/* 081 PORTAL — единая B2B-дизайн-система.
   Семантические токены — источник цветов и размеров. Малиновый отвечает за бренд,
   навигацию, фокус и основные действия; красный — только за опасные состояния. */
:root {
  --background: #0d1119;
  --background-subtle: #111722;
  --surface: #151c27;
  --surface-elevated: #1a2331;
  --surface-hover: rgba(255, 255, 255, .055);
  --border: rgba(185, 197, 218, .14);
  --border-strong: rgba(195, 206, 226, .25);
  --text-primary: #f2f5fa;
  --text-secondary: #c8d0dc;
  --text-muted: #929dad;
  --text-faint: #7d899b;
  --accent: #f04485;
  --accent-strong: #c2185b;
  --accent-hover: #a9124d;
  --accent-ink: #ffffff;
  --brand: #f04485;
  --brand-hover: #ff5b98;
  --brand-ink: #ffffff;
  --success: #39cc90;
  --warning: #f2b246;
  --danger: #ff6875;
  --info: #6fa2ff;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --radius-sm: 9px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --control-h: 40px;
  --head-h: 56px;
  --sidebar-w: 248px;
  --sidebar-collapsed-w: 72px;
  --z-topbar: 30;
  --z-dropdown: 50;
  --z-dialog: 80;
  --z-toast: 100;

  --font: "Onest", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Обратная совместимость существующих компонентов. */
  --bg: var(--background);
  --bg-2: var(--background-subtle);
  --panel: var(--surface);
  --ink: var(--text-primary);
  --ink-2: var(--text-secondary);
  --muted: var(--text-muted);
  --faint: var(--text-faint);
  --line: var(--border);
  --hover: var(--surface-hover);
  --seg-bg: var(--background-subtle);
  --input-bg: var(--surface-elevated);
  --thead-bg: color-mix(in srgb, var(--surface-elevated) 88%, var(--background));
  --chip: color-mix(in srgb, var(--surface-elevated) 84%, var(--text-primary) 4%);
  --glass: rgba(21, 28, 39, .78);
  --glass-2: rgba(17, 23, 34, .91);
  --glass-brd: var(--border);
  --glass-hi: rgba(255, 255, 255, .05);
  --glass-blur: 18px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .24), 0 8px 24px -22px rgba(0, 0, 0, .65);
  --shadow-hover: 0 18px 42px -24px rgba(0, 0, 0, .76);
  --mesh-1: rgba(240, 68, 133, .14);
  --mesh-2: rgba(255, 91, 152, .055);
  --accent-2: #ff8db4;
  --ok: var(--success);
  --warn: var(--warning);
  --warn-ink: var(--warning);
  --bad: var(--danger);
  --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent);
  --accent-ring: color-mix(in srgb, var(--accent) 62%, transparent);
  --brand-soft: color-mix(in srgb, var(--brand) 15%, transparent);
  --brand-ring: color-mix(in srgb, var(--brand) 58%, transparent);
  --ok-soft: color-mix(in srgb, var(--success) 15%, transparent);
  --warn-soft: color-mix(in srgb, var(--warning) 16%, transparent);
  --bad-soft: color-mix(in srgb, var(--danger) 15%, transparent);
  color-scheme: dark;
}

[data-theme="light"] {
  --background: #f3f4f7;
  --background-subtle: #f8f9fb;
  --surface: #ffffff;
  --surface-elevated: #ffffff;
  --surface-hover: rgba(194, 24, 91, .055);
  --border: #dfe3eb;
  --border-strong: #c8cfdb;
  --text-primary: #1b1e27;
  --text-secondary: #3f4755;
  --text-muted: #687386;
  --text-faint: #6b7689;
  --accent: #c2185b;
  --accent-strong: #c2185b;
  --accent-hover: #a9124d;
  --brand: #c2185b;
  --brand-hover: #a9124d;
  --success: #147a57;
  --warning: #a36300;
  --danger: #c92f47;
  --info: #356dc5;
  --input-bg: #ffffff;
  --glass: rgba(255, 255, 255, .78);
  --glass-2: rgba(255, 255, 255, .92);
  --glass-hi: rgba(255, 255, 255, .76);
  --shadow: 0 1px 2px rgba(26, 32, 46, .05), 0 10px 28px -24px rgba(33, 41, 70, .24);
  --shadow-hover: 0 18px 40px -24px rgba(42, 48, 78, .30);
  --mesh-1: rgba(194, 24, 91, .09);
  --mesh-2: rgba(240, 68, 133, .045);
  --accent-2: #d9467d;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  background-image:
    radial-gradient(720px 500px at 2% -8%, var(--mesh-1), transparent 62%),
    radial-gradient(640px 480px at 102% 2%, var(--mesh-2), transparent 64%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  font-size: 13.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--accent); }
button, input, select, textarea { font-family: inherit; }
::selection { background: var(--accent-soft); color: var(--text-primary); }
[hidden] { display: none !important; }
.sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}
.skip-link {
  position: fixed; z-index: 1000; top: 8px; left: 8px; transform: translateY(-140%);
  padding: 9px 13px; border-radius: var(--radius-sm); background: var(--accent-strong);
  color: #fff; font-weight: 700; box-shadow: var(--shadow-hover);
}
.skip-link:focus { transform: translateY(0); color: #fff; }

/* ===================== Layout ===================== */
.app {
  display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-height: 100vh; transition: grid-template-columns .18s ease;
}
.sidebar {
  --surface-elevated: #151c27;
  --surface-hover: rgba(255, 255, 255, .06);
  --border: rgba(185, 197, 218, .14);
  --border-strong: rgba(195, 206, 226, .25);
  --text-primary: #f2f5fa;
  --text-secondary: #c8d0dc;
  --text-muted: #929dad;
  --text-faint: #7d899b;
  --ink: #f2f5fa;
  --ink-2: #c8d0dc;
  --muted: #929dad;
  --faint: #7d899b;
  --line: rgba(185, 197, 218, .14);
  --hover: rgba(255, 255, 255, .06);
  --seg-bg: #111722;
  --input-bg: #151c27;
  --glass: rgba(21, 28, 39, .82);
  --glass-2: rgba(8, 13, 21, .96);
  --glass-brd: rgba(185, 197, 218, .15);
  background: var(--glass-2); color: var(--ink); padding: 0;
  position: sticky; top: 0; z-index: 40; height: 100vh; overflow: hidden;
  border-right: 1px solid var(--glass-brd);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  display: flex; flex-direction: column;
}
.side-head {
  flex: 0 0 auto; height: var(--head-h);
  display: flex; align-items: center; gap: 10px; padding: 0 12px 0 14px;
  border-bottom: 1px solid var(--glass-brd);
}
.side-head .brand { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; color: var(--ink); }
.brand-code {
  color: var(--brand); font-weight: 800; font-size: 21px; line-height: 1;
  letter-spacing: -.035em; font-variant-numeric: tabular-nums;
}
.brand-wordmark {
  font-weight: 800; font-size: 16px; letter-spacing: .035em;
  color: var(--ink); line-height: 1;
}
.side-head .brand:hover .brand-wordmark { color: var(--ink); }
.side-collapse { margin-left: auto; color: var(--muted); }
.side-collapse:hover { color: var(--accent); }
.side-top { flex: 1 1 auto; overflow-y: auto; min-height: 0; padding: 10px 10px 4px; }
.sidebar .nav-title {
  color: var(--faint); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em; padding: 14px 8px 5px;
}
.side-top > .nav-title:first-child { padding-top: 6px; }
.nav-home { margin-bottom: 5px !important; }
.nav-projects {
  max-height: min(34vh, 292px); overflow-y: auto; overflow-x: hidden;
  margin-right: -3px; padding-right: 3px; scrollbar-width: thin;
}
.nav-search {
  position: relative; display: flex; align-items: center; margin: 2px 0 6px;
  color: var(--faint);
}
.nav-search > .ic { position: absolute; left: 10px; pointer-events: none; }
.nav-search input {
  width: 100%; min-height: 34px; padding: 6px 9px 6px 31px; font-size: 12px;
  background: color-mix(in srgb, var(--input-bg) 82%, transparent);
}
.nav-no-results { padding: 8px 10px; color: var(--muted); font-size: 11.5px; }
.sidebar a.nav-item {
  display: flex; align-items: center; gap: 10px;
  min-height: 36px; color: var(--ink-2); padding: 7px 9px; border-radius: 9px; margin-bottom: 1px;
  font-weight: 500; font-size: 12.75px;
  transition: background .12s ease, color .12s ease;
}
.ic { flex: 0 0 auto; vertical-align: middle; }
.sidebar a.nav-item .ic { color: var(--faint); }
.sidebar a.nav-item > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar a.nav-item:hover { background: var(--hover); color: var(--ink); }
.sidebar a.nav-item.active {
  background: var(--accent-soft); color: var(--accent); font-weight: 700;
  box-shadow: inset 3px 0 0 var(--accent);
}
.sidebar a.nav-item.active .ic { color: var(--accent); }

.side-utilities {
  flex: 0 0 auto; padding: 8px 10px 10px; border-top: 1px solid var(--glass-brd);
}
.icon-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; border-radius: 9px;
  background: transparent; border: 1px solid transparent; color: var(--muted); cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.icon-btn:hover { background: var(--hover); color: var(--accent); }
.main { display: flex; flex-direction: column; min-width: 0; width: 100%; }

@media (min-width: 901px) {
  .app.sidebar-collapsed { grid-template-columns: var(--sidebar-collapsed-w) minmax(0, 1fr); }
  .app.sidebar-collapsed .side-head { justify-content: flex-start; padding-inline: 8px 36px; }
  .app.sidebar-collapsed .brand-wordmark,
  .app.sidebar-collapsed .sidebar .nav-title,
  .app.sidebar-collapsed .nav-search,
  .app.sidebar-collapsed .nav-no-results,
  .app.sidebar-collapsed .sidebar a.nav-item > span { display: none; }
  .app.sidebar-collapsed .side-head .brand { gap: 0; }
  .app.sidebar-collapsed .brand-code { font-size: 14px; letter-spacing: 0; }
  .app.sidebar-collapsed .side-collapse { position: absolute; right: 5px; top: 13px; width: 27px; min-height: 28px; background: var(--surface-elevated); border-color: var(--border); }
  .app.sidebar-collapsed .side-collapse .ic { transform: rotate(180deg); }
  .app.sidebar-collapsed .sidebar a.nav-item { justify-content: center; padding-inline: 8px; }
}

/* Профиль-страница */
.profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.profile-grid .profile-wide { grid-column: 1 / -1; }
.card-title { margin: 0 0 14px; }
.form-narrow { max-width: 340px; }
@media (max-width: 760px) { .profile-grid { grid-template-columns: 1fr; } }
.kv { display: flex; flex-direction: column; gap: 8px; }
.kv-row { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.kv-k { color: var(--muted); font-size: 12.5px; }
.kv-v { font-weight: 600; text-align: right; word-break: break-word; }
.field-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; flex-wrap: wrap; }
.field-row + .field-row { border-top: 1px solid var(--line); }
.hint { color: var(--muted); font-size: 12px; margin: 10px 0 0; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.totp-setup { display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-start; }
.qr-box { background: #fff; padding: 10px; border-radius: 14px; line-height: 0; flex: 0 0 auto; box-shadow: var(--shadow); }
.qr-box svg { width: 172px; height: 172px; display: block; }
.totp-manual { flex: 1 1 220px; min-width: 220px; }
.totp-secret { display: inline-block; margin: 4px 0 14px; padding: 6px 10px; border-radius: 8px; background: var(--seg-bg); font-family: var(--mono); letter-spacing: 2px; word-break: break-all; }

/* ===================== Topbar ===================== */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  min-height: var(--head-h);
  background: var(--glass-2);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  position: sticky; top: 0; z-index: var(--z-topbar);
  padding: 7px 20px; gap: 14px;
  border-bottom: 1px solid var(--glass-brd);
}
.topbar-context { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.topbar h1 { font-size: 18px; line-height: 1.25; margin: 0; font-weight: 750; letter-spacing: -.018em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.breadcrumbs {
  display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--muted);
  font-size: 10.5px; line-height: 1.2;
}
.breadcrumbs a { color: var(--muted); }
.breadcrumbs a:hover { color: var(--accent); }
.breadcrumbs [aria-current="page"] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .user { color: var(--muted); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; font-size: 12.5px; }
/* Переключатель темы (иконка в топбаре) — на месте бывшего лого 0-81. */
.topbar-theme { margin-left: auto; }
.topbar-account { display: flex; align-items: center; gap: 4px; padding-left: 4px; border-left: 1px solid var(--border); }
.topbar-profile {
  min-width: 0; display: flex; align-items: center; gap: 9px; padding: 3px 7px;
  border-radius: 10px; color: var(--ink-2);
}
.topbar-profile:hover, .topbar-profile.active { color: var(--ink); background: var(--surface-hover); }
.topbar-avatar {
  flex: none; width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 9px; background: var(--accent-strong); color: var(--accent-ink);
  font-size: 11.5px; font-weight: 800;
}
.topbar-profile-copy { min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.topbar-profile-copy strong { max-width: 138px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; font-weight: 700; }
.topbar-profile-copy small { color: var(--muted); font-size: 9.5px; }
.topbar-account form .icon-btn:hover { color: var(--danger); }
.topbar-theme:hover { background: var(--hover); color: var(--accent); }
.content { width: 100%; max-width: 1880px; margin: 0 auto; padding: 18px 20px 64px; }
.content > * + *,
#calls-wrap > * + *,
#sla-wrap > * + * { margin-top: 14px; }
form > .panel + .panel { margin-top: 14px; }

/* ===================== Panels & cards ===================== */
.panel {
  background: var(--glass);
  border: 1px solid var(--glass-brd); border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  overflow: clip;
}
.panel > h3 { margin: 0; padding: 14px 16px 9px; font-size: 14px; font-weight: 700; }
.panel > h3 + .table-wrap { padding-top: 2px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 9px; flex-wrap: wrap; }
.panel-head h3 { margin: 0; font-size: 14px; font-weight: 700; }
.panel-head + .table-wrap { padding-top: 2px; }
.panel-pad { padding: 0 16px; }
.panel-foot { padding: 11px 16px 15px; }
.panel > pre { margin: 0; padding: 4px 16px 15px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(244px, 1fr)); gap: 12px; }
.card { padding: 16px 18px; transition: box-shadow .15s ease, transform .15s ease; }
a.card:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); color: var(--ink); }
.card h3 { margin: 0 0 5px; font-size: 15px; font-weight: 700; }
.card > h3 { padding: 0; }
.card .meta { color: var(--muted); font-size: 12.5px; }

/* Транскрипция: плотный таймлайн, не чатовые пузыри. */
.dialog { display: flex; flex-direction: column; padding: 0; }
.dialog-seg {
  position: relative; max-width: none; min-width: 0; display: grid;
  grid-template-columns: 68px minmax(0, 1fr); gap: 12px; padding: 11px 14px;
  border: 0; border-bottom: 1px solid var(--border); border-radius: 0;
  background: transparent; box-shadow: none; line-height: 1.5;
}
.dialog-seg:last-child { border-bottom: 0; }
.dialog-seg:hover { background: var(--surface-hover); }
.dialog-seg.op { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.dialog-seg.cl { background: transparent; }
.dialog-seg.sys, .dialog-seg.un { background: color-mix(in srgb, var(--text-muted) 5%, transparent); }
.dialog-seg.neg { box-shadow: inset 3px 0 0 var(--danger); }
.dialog-seg.emp { box-shadow: inset 3px 0 0 var(--success); }
.dialog-seg.vio { box-shadow: inset 3px 0 0 var(--warning); }
.segment-time { padding-top: 2px; color: var(--muted); font: 11px/1.4 var(--mono); font-variant-numeric: tabular-nums; }
.segment-body { min-width: 0; }
.segment-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 8px; margin-bottom: 4px; }
.segment-speaker { color: var(--ink); font-size: 12px; }
.dialog-seg.op .segment-speaker { color: var(--accent); }
.segment-range { color: var(--faint); font-size: 10.5px; }
.segment-content { display: flex; align-items: flex-start; gap: 8px; }
.seg-text { min-width: 0; flex: 1 1 auto; color: var(--ink-2); overflow-wrap: anywhere; }
.segment-note { margin-top: 5px; color: var(--muted); font-size: 11.5px; }
.segment-editor { width: 100%; }
.segment-editor-actions { margin-top: 7px; }
.ca-cols { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(340px, .8fr); gap: 14px; align-items: start; margin-bottom: 14px; }
.ca-cols > .ca-analysis > * + *, .ca-cols > .ca-main > * + * { margin-top: 14px; }
.ca-analysis { position: sticky; top: calc(var(--head-h) + 12px); }
@media (max-width: 1100px) { .ca-cols { grid-template-columns: 1fr; } .ca-analysis { position: static; } }
.dialog-compact { padding: 0; }
.dialog-compact .dialog-seg { padding: 9px 11px; line-height: 1.45; }
body.dialog-window { margin: 0; min-height: 100vh; }
.dialog-win-head { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 14px; background: var(--glass-2); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.3); backdrop-filter: blur(var(--glass-blur)) saturate(1.3); border-bottom: 1px solid var(--glass-brd); }
.dialog-win-title { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dialog-win-title .meta { font-size: 11.5px; }
.dialog-win-main { padding: 6px 6px 24px; }

/* ===================== Tabs (сегмент-контрол) ===================== */
.tabs {
  display: flex; flex-wrap: nowrap; gap: 2px; overflow-x: auto;
  background: transparent; border: 0; border-bottom: 1px solid var(--border);
  border-radius: 0; padding: 0; margin-bottom: 14px;
  width: 100%; max-width: 100%; scrollbar-width: thin;
}
.tabs a { flex: 0 0 auto; white-space: nowrap; padding: 9px 12px 8px; border-radius: 8px 8px 0 0; color: var(--muted); font-weight: 600; font-size: 12.5px; border-bottom: 2px solid transparent; }
.tabs a:hover { color: var(--ink); }
.tabs a.active { color: var(--accent); background: var(--accent-soft); border-bottom-color: var(--accent); box-shadow: none; }

/* ===================== Buttons & inputs ===================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer;
  min-height: var(--control-h);
  border: 1px solid var(--glass-brd);
  background: var(--glass-2); color: var(--ink);
  padding: 8px 14px; border-radius: var(--radius-sm); font: inherit; font-weight: 650; font-size: 12.75px;
  backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%);
  transition: background .12s ease, border-color .12s ease, transform .12s ease, color .12s ease;
}
.btn:hover { background: var(--hover); border-color: var(--glass-brd); color: var(--ink); transform: translateY(-1px); }
.btn.primary {
  background: var(--accent-strong); color: var(--accent-ink); border-color: transparent;
  box-shadow: 0 7px 18px -10px color-mix(in srgb, var(--accent-strong) 80%, transparent);
}
.btn.primary:hover { background: var(--accent-hover); color: var(--accent-ink); }
.btn.danger { background: var(--danger); color: #fff; border-color: transparent; }
.btn.danger:hover { background: color-mix(in srgb, var(--danger) 86%, #000); color: #fff; }
.btn.sm { min-height: 32px; padding: 5px 10px; font-size: 12px; border-radius: 8px; }
.btn.ghost { background: transparent; box-shadow: none; border-color: var(--glass-brd); color: var(--muted); }
.btn.ghost:hover { background: var(--hover); color: var(--ink); }
.btn.icon { padding-left: 11px; padding-right: 11px; font-weight: 700; }
.btn-block { width: 100%; margin-top: 6px; }
.btn:disabled, .btn[aria-disabled="true"], .icon-btn:disabled,
input:disabled, select:disabled, textarea:disabled {
  opacity: .48; cursor: not-allowed; pointer-events: none;
}
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
  content: ""; position: absolute; width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .38); border-top-color: #fff;
  animation: ui-spin .7s linear infinite;
}
@keyframes ui-spin { to { transform: rotate(360deg); } }
input, select, textarea {
  font: inherit; font-size: 12.75px; color: var(--ink);
  background: var(--input-bg); border: 1px solid var(--glass-brd);
  min-height: var(--control-h); border-radius: var(--radius-sm); padding: 8px 11px;
  transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
}
textarea { min-height: 88px; resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: var(--border-strong); }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--accent-ring); outline-offset: 0; border-color: var(--accent); }
input::placeholder, textarea::placeholder { color: var(--faint); opacity: 1; }
input[type="checkbox"], input[type="radio"] { min-height: 0; width: 18px; height: 18px; padding: 0; accent-color: var(--accent-strong); }
a:focus-visible, button:focus-visible, .btn:focus-visible, .swatch:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--accent-ring); outline-offset: 2px; }
label.field { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--muted); font-weight: 600; }
.meta { color: var(--muted); font-size: 12.5px; }
.form-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.form-row .field { flex: 1 1 220px; min-width: 180px; }
.form-row .field-compact, .field-compact { flex: 0 1 160px; min-width: 130px; }
.checks { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 6px; }
.check { display: flex; align-items: center; gap: 7px; font-weight: 500; color: var(--ink); cursor: pointer; }
.check input { width: auto; }

/* Множественный выбор (.ms) */
.ms { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 190px; }
.ms .field-label { font-size: 12px; color: var(--muted); font-weight: 500; }
.ms-trigger { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: var(--control-h); padding: 8px 12px; font: inherit; font-size: 12.75px; text-align: left; cursor: pointer; color: var(--ink); background: var(--input-bg); border: 1px solid var(--glass-brd); border-radius: var(--radius-sm); transition: border-color .15s ease; }
.ms-trigger:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--glass-brd)); }
.ms.open > .ms-trigger { border-color: var(--accent); }
.ms-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-label.ms-empty-label { color: var(--muted); }
.ms-caret { flex: none; color: var(--muted); font-size: 11px; transition: transform .15s ease; }
.ms.open .ms-caret { transform: rotate(180deg); }
.ms-panel { position: absolute; z-index: var(--z-dropdown); top: calc(100% + 6px); left: 0; min-width: 100%; max-width: 360px; display: none; flex-direction: column; background: var(--panel); border: 1px solid var(--glass-brd); border-radius: 12px; box-shadow: var(--shadow-hover); overflow: hidden; }
.ms.open > .ms-panel { display: flex; }
.ms-search { flex: none; margin: 8px 8px 6px; padding: 7px 10px; font-size: 12.75px; color: var(--ink); background: var(--input-bg); border: 1px solid var(--glass-brd); border-radius: 8px; }
.ms-search:focus { outline: 2px solid var(--accent-ring); border-color: var(--accent); }
.ms-all { display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--ink); background: var(--accent-soft); border-bottom: 1px solid var(--glass-brd); }
.ms-list { max-height: 264px; overflow-y: auto; padding: 4px; }
.ms-option { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 8px; cursor: pointer; font-size: 12.75px; color: var(--ink); }
.ms-option:hover { background: var(--hover); }
.ms-option input, .ms-all input { flex: none; width: auto; accent-color: var(--accent); cursor: pointer; }
.ms-empty { padding: 10px 12px; }
.ms-open-host { position: relative; z-index: 50; overflow: visible; }

/* ===================== Filters ===================== */
.filters form, .filters-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; padding: 14px; }
.filters form { margin: 0; }
.filters-row {
  background: var(--glass); border: 1px solid var(--glass-brd); border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  margin-bottom: 14px;
}
.report-desc { margin: 0 2px 2px; }
#report-table { margin-top: 14px; }

/* ===================== Tables ===================== */
.table-wrap { overflow: auto; max-width: 100%; overscroll-behavior-inline: contain; scrollbar-gutter: stable; }
table.calls { width: 100%; border-collapse: collapse; }
table.calls th, table.calls td { height: 40px; padding: 7px 12px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; vertical-align: middle; }
table.calls thead th { position: sticky; top: 0; z-index: 2; background: var(--thead-bg); font-size: 11px; color: var(--muted); font-weight: 700; letter-spacing: .005em; }
table.calls thead th a { color: inherit; }
table[data-sortable] th.th-sort { cursor: pointer; user-select: none; }
table[data-sortable] th.th-sort:hover { color: var(--ink); }
table[data-sortable] th[data-sort-dir]::after { font-size: 10px; color: var(--accent); margin-left: 5px; }
table[data-sortable] th[data-sort-dir="asc"]::after { content: "▲"; }
table[data-sortable] th[data-sort-dir="desc"]::after { content: "▼"; }
table.calls tbody { font-variant-numeric: tabular-nums; }
table.calls tbody td { font-size: 12.5px; }
table.calls tbody tr:hover { background: var(--hover); }
table.calls tbody tr:last-child td { border-bottom: none; }
.calls td.num, .calls th.num, .calls td[data-type="number"], .calls th[data-type="number"] { text-align: right; font-variant-numeric: tabular-nums; }
.calls td.wrap { white-space: normal; min-width: 220px; line-height: 1.45; }
.col-order { width: 104px; }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 700; }
.badge.ok { background: var(--ok-soft); color: var(--ok); }
.badge.warn { background: var(--warn-soft); color: var(--warn-ink); }
.badge.bad { background: var(--bad-soft); color: var(--bad); }
.badge.info { background: color-mix(in srgb, var(--info) 14%, transparent); color: var(--info); }
.badge.brand { background: var(--brand-soft); color: var(--brand); }
.badge.muted { background: var(--chip); color: var(--muted); }
.tech { color: var(--muted); font-family: var(--mono); font-size: 11px; }

/* Pagination / toolbar */
.toolbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; gap: 12px; flex-wrap: wrap; }
.pager { display: flex; gap: 6px; align-items: center; }
.pager .btn.sm[disabled] { opacity: .4; pointer-events: none; }
.count { color: var(--muted); font-size: 12px; font-weight: 500; }

/* ===================== Audio player ===================== */
.player {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
  background: var(--glass-2); border: 1px solid var(--glass-brd);
  border-radius: var(--radius-pill); padding: 3px 10px 3px 3px;
}
.player .pp {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; border: none;
  background: var(--accent); color: var(--accent-ink); cursor: pointer;
  font-weight: 700; font-size: 10px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--accent) 55%, transparent);
  transition: background .12s ease;
}
.player .pp:hover { background: var(--accent-hover); }
.player input[type=range] { flex: 0 0 auto; width: 108px; height: 4px; accent-color: var(--accent); cursor: pointer; }
.player .t { flex: 0 0 auto; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.player select { flex: 0 0 auto; background: transparent; border: none; color: var(--ink); font-size: 11px; padding: 2px; cursor: pointer; }
.player select:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }
.player .btn.sm { flex: 0 0 auto; border: none; background: transparent; color: var(--muted); padding: 4px 7px; border-radius: 50%; }
.player .btn.sm:hover { background: var(--hover); color: var(--ink); }

/* ===================== KPI ===================== */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 14px; }
.kpi { padding: 13px 15px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.kpi > :first-child { min-width: 0; }
.kpi-label { color: var(--muted); font-size: 11px; font-weight: 600; }
.kpi-value { font-size: 25px; font-weight: 800; letter-spacing: -.025em; margin-top: 3px; white-space: nowrap; }
.kpi-value.ok { color: var(--ok); }
.kpi-value.bad { color: var(--bad); }
.kpi-sub { color: var(--muted); font-size: 11.5px; margin-top: 2px; }
.kpi-ico { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 18px; font-weight: 700; background: var(--accent-soft); color: var(--accent); }
.kpi-ico.ok { background: var(--ok-soft); color: var(--ok); }
.kpi-ico.bad { background: var(--bad-soft); color: var(--bad); }
.kpi-ico.warn { background: var(--warn-soft); color: var(--warn-ink); }
.kpi-action { display: flex; align-items: center; gap: 6px; }
.kpi-strip .kpi-value { font-size: 22px; }

/* SLA */
.sla-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 14px; margin-bottom: 14px; align-items: start; }
.sla-block { padding: 15px 16px; margin-bottom: 0; }
.sla-cols .sla-block { margin-top: 0; }
.sla-block + .panel.sla-block { margin-top: 14px; }
.sla-cols .sla-block + .sla-block { margin-top: 0; }
.sla-block h3 { margin: 0 0 10px; font-size: 14px; font-weight: 700; }
.content > .panel.sla-block { margin-top: 14px; }
.bar { position: relative; width: 150px; max-width: 100%; height: 17px; background: color-mix(in srgb, var(--ink) 9%, transparent); border-radius: var(--radius-pill); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.bar-fill { position: absolute; inset: 0 auto 0 0; border-radius: var(--radius-pill); background: var(--ok); transition: width .45s cubic-bezier(.4, 0, .2, 1); }
.bar-fill.accent { background: var(--accent); }
.bar span { position: relative; z-index: 1; font-size: 10.5px; font-weight: 700; line-height: 17px; letter-spacing: .2px; color: var(--ink); text-shadow: 0 0 3px color-mix(in srgb, var(--panel) 85%, transparent); }

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ink) 22%, transparent) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ink) 20%, transparent); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--accent) 60%, transparent); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* Компактные саммари над таблицей звонков */
.stat-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 10px; }
.stat-split > .stat-card:only-child { grid-column: 1 / -1; }
@media (max-width: 820px) { .stat-split { grid-template-columns: 1fr; } }
.stat-card { padding: 11px 14px 10px; }
.stat-head { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 8px; display: flex; align-items: center; gap: 7px; }
.stat-head::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.stat-row { display: flex; align-items: stretch; }
.stat { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding: 2px 10px; border-left: 1px solid var(--line); }
.stat:first-child { border-left: 0; padding-left: 2px; }
.stat-num { font-size: 20px; font-weight: 800; letter-spacing: -.5px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-num.ok { color: var(--ok); }
.stat-num.bad { color: var(--bad); }
.stat-num.warn { color: var(--warn); }
.stat-cap { font-size: 10.5px; color: var(--muted); font-weight: 600; line-height: 1.2; }
.stat-times { display: flex; flex-wrap: wrap; gap: 18px; margin: 0 2px 14px; font-size: 12px; color: var(--muted); }
.stat-times b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ===================== Login ===================== */
.auth-page { min-height: 100vh; min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; }
.auth-topbar { min-height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 12px clamp(18px, 3vw, 42px); }
.auth-topbar .brand { display: inline-flex; align-items: baseline; gap: 7px; color: var(--ink); }
.auth-theme { min-height: 36px; padding: 6px 10px; }
.login-wrap { display: grid; place-items: center; min-height: 0; padding: 28px 18px; }
.login-card { width: min(440px, 100%); min-width: 0; padding: 30px 32px 28px; border-radius: var(--radius-lg); }
.login-card h1 { font-size: 24px; line-height: 1.25; margin: 0 0 7px; font-weight: 750; letter-spacing: -.025em; }
.login-card .sub { color: var(--muted); margin-bottom: 0; font-size: 13px; }
.login-card .sub strong { color: var(--ink-2); font-weight: 600; word-break: break-word; }
.login-card .field { margin-bottom: 13px; }
.auth-status { min-height: 44px; display: flex; align-items: flex-end; padding: 8px 0 5px; }
.auth-status-list { min-height: 20px; flex-direction: column; align-items: stretch; gap: 6px; }
.errnote { width: 100%; color: var(--bad); background: var(--bad-soft); border: 1px solid color-mix(in srgb, var(--bad) 30%, transparent); border-radius: var(--radius-sm); font-size: 12.5px; padding: 8px 10px; }
.password-field { position: relative; display: block; }
.password-field input { width: 100%; padding-right: 44px; }
.password-toggle { position: absolute; top: 2px; right: 2px; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer; }
.password-toggle:hover { background: var(--hover); color: var(--accent); }
.code-field { width: 100%; text-transform: uppercase; letter-spacing: 4px; text-align: center; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.auth-link { display: block; width: fit-content; margin: 12px auto 0; color: var(--accent); font-size: 12.5px; font-weight: 600; }
.auth-help { margin: -3px 0 11px; color: var(--muted); font-size: 11.5px; }
.auth-message { margin: 0 0 20px !important; line-height: 1.55; }
.auth-footer { padding: 0 18px 22px; color: var(--muted); text-align: center; font-size: 11.5px; }
@media (max-width: 480px) {
  .auth-topbar { padding: 10px 16px; }
  .auth-theme span { display: none; }
  .login-wrap { padding: 8vh 16px 16px; align-items: start; }
  .login-card { padding: 24px 20px; border-radius: 14px; }
}
.empty { color: var(--muted); padding: 40px; text-align: center; }

/* Тосты */
.toasts { position: fixed; top: 16px; right: 16px; z-index: 1000; display: flex; flex-direction: column; gap: 8px; max-width: min(360px, calc(100vw - 32px)); }
.toast { padding: 11px 15px; border-radius: 12px; font-size: 13px; font-weight: 600; background: var(--glass-2); color: var(--ink); border: 1px solid var(--glass-brd); border-left: 3px solid var(--accent); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); box-shadow: var(--shadow-hover); cursor: pointer; animation: toast-in .22s ease; }
.toast.success { border-left-color: var(--ok); }
.toast.error, .toast.danger { border-left-color: var(--bad); }
.toast.warning { border-left-color: var(--warn); }
.toast.hide { opacity: 0; transform: translateX(14px); transition: opacity .28s ease, transform .28s ease; }
@keyframes toast-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }

.callback-link { text-decoration: none; cursor: pointer; }
.callback-link:hover { box-shadow: 0 0 0 2px var(--accent); }
tr:target { background: var(--accent-soft); }
tr:target td { font-weight: 600; }

/* Переключатель темы (профиль). Свотчи акцента/шрифта оставлены, но НЕ влияют
   на акцент/шрифт — единый фирменный стиль. Можно убрать из шаблона профиля. */
.theme-controls { display: inline-flex; align-items: flex-start; flex-wrap: wrap; gap: 14px; margin-right: 6px; }
.swatch-item { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; }
.swatch-name { font-size: 11px; font-weight: 600; color: var(--sw); white-space: nowrap; }
.font-select { padding: 6px 10px; font-size: 13px; border-radius: 8px; max-width: 190px; }
.swatch { width: 18px; height: 18px; border-radius: 50%; cursor: pointer; padding: 0; background: var(--sw); border: 2px solid transparent; transition: transform .12s ease, border-color .12s ease; }
.swatch:hover { transform: scale(1.15); }
.swatch.active { border-color: var(--ink); }
.theme-toggle { padding: 4px 9px; }
.theme-icon { font-size: 14px; line-height: 1; }

/* Изменение ширины столбцов */
table.calls[data-resizable] thead th { padding-right: 18px; overflow: hidden; text-overflow: ellipsis; }
table.calls[data-resizable] td { overflow: hidden; }
table.calls[data-resizable] td:not(:has(.player)) { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), #0000); mask-image: linear-gradient(to right, #000 calc(100% - 26px), #0000); }
.col-resize { position: absolute; top: 0; right: 0; width: 10px; height: 100%; cursor: col-resize; z-index: 3; user-select: none; touch-action: none; }
.col-resize::after { content: ""; position: absolute; right: 4px; top: 22%; bottom: 22%; width: 2px; border-radius: 2px; background: transparent; transition: background .12s ease; }
.col-resize:hover::after, body.col-resizing .col-resize::after { background: var(--accent); }
body.col-resizing { cursor: col-resize; user-select: none; }

/* Утилити */
.stack { display: flex; flex-direction: column; gap: 12px; }
.stack-sm { display: flex; flex-direction: column; gap: 6px; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.grow { flex: 1 1 auto; min-width: 0; }
.full-width { width: 100%; }
.inline-form { display: inline; margin: 0; }
.mt-0 { margin-top: 0 !important; }

/* ========================================================================= *
   Графики работы (apps/schedule)
 * ========================================================================= */
.sched-toolbar { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.sched-monthnav { display: flex; align-items: center; gap: 8px; }
.sched-month { font-weight: 700; font-size: 16px; min-width: 150px; text-align: center; }
.sched-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-left: auto; align-items: center; }
.sched-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.sched-leg i { width: 12px; height: 12px; border-radius: 4px; background: var(--c, var(--chip)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent); }
.sched-leg i.off { background: repeating-linear-gradient(135deg, var(--chip), var(--chip) 3px, transparent 3px, transparent 6px); }
.sched-grid-wrap .table-scroll { overflow: auto; max-height: calc(100vh - 280px); border-radius: var(--radius-sm); }
table.sched { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; }
table.sched th, table.sched td { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
table.sched thead th { position: sticky; top: 0; z-index: 3; background: var(--thead-bg); backdrop-filter: blur(6px); padding: 6px 0; text-align: center; font-weight: 600; }
.sched-dayhead { width: 40px; min-width: 40px; }
.sched-dayhead .d { display: block; font-size: 13px; }
.sched-dayhead .wd { display: block; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.sched-dayhead.we { background: color-mix(in srgb, var(--accent) 8%, var(--thead-bg)); }
.sched-dayhead.we .wd { color: color-mix(in srgb, var(--accent) 70%, var(--muted)); }
.sched-dayhead.today { box-shadow: inset 0 -2px 0 var(--brand); }
.sched-opcol { position: sticky; left: 0; z-index: 2; background: var(--panel); text-align: left; padding: 0 12px; font-weight: 600; white-space: nowrap; max-width: 200px; overflow: hidden; text-overflow: ellipsis; min-width: 150px; }
table.sched thead .sched-opcol { z-index: 4; background: var(--thead-bg); }
table.sched tbody tr:hover .sched-opcol { background: var(--hover); }
.sched-cell { padding: 0; text-align: center; height: 38px; }
.sched-cell.we { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.sched-cellbtn { display: flex; align-items: center; justify-content: center; width: 100%; height: 38px; border: 0; background: transparent; cursor: pointer; color: var(--ink); padding: 0; }
button.sched-cellbtn:hover { background: var(--hover); }
.sched-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 22px; padding: 0 7px; border-radius: 6px; font-size: 11px; font-weight: 700; line-height: 1; color: #fff; background: var(--c); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 1px 2px rgba(0,0,0,.18); }
.sched-dot { color: color-mix(in srgb, var(--muted) 55%, transparent); font-size: 16px; }
.sched-modal-bg { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, #000 46%, transparent); backdrop-filter: blur(2px); padding: 20px; animation: sched-fade .12s ease; }
@keyframes sched-fade { from { opacity: 0; } to { opacity: 1; } }
.sched-modal { width: 380px; max-width: 100%; background: var(--glass-2); color: var(--ink); border: 1px solid var(--glass-brd); border-radius: var(--radius); box-shadow: var(--shadow-hover); backdrop-filter: blur(var(--glass-blur)) saturate(150%); overflow: hidden; }
.sched-modal-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.sched-modal-head .meta { text-transform: capitalize; }
.sched-modal-sec { padding: 12px 16px; border-bottom: 1px solid var(--line); }
.sched-modal-title { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 8px; }
.sched-tpl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sched-tpl { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; cursor: pointer; padding: 8px 10px; border-radius: 10px; text-align: left; border: 1px solid var(--glass-brd); background: var(--glass); border-left: 3px solid var(--c); color: var(--ink); }
.sched-tpl b { font-size: 13px; }
.sched-tpl span { font-size: 11px; color: var(--muted); }
.sched-tpl:hover { background: var(--hover); }
.sched-tpl.on { outline: 2px solid var(--c); }
.sched-custom { display: flex; align-items: center; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.sched-custom input[type=time] { padding: 5px 8px; }
.sched-time-field { display: flex; flex-direction: column; gap: 2px; color: var(--muted); font-size: 10px; }
.sched-dash { color: var(--muted); }
.sched-kind-row { display: flex; gap: 8px; flex-wrap: wrap; }
.sched-kind { cursor: pointer; padding: 7px 12px; border-radius: 9px; font-weight: 600; font-size: 13px; border: 1px solid var(--c); color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); }
.sched-kind:hover { background: color-mix(in srgb, var(--c) 22%, transparent); }
.sched-kind.on { background: var(--c); color: #fff; }
.sched-modal-foot { padding: 12px 16px; display: flex; justify-content: flex-end; }
.sched-tpl-page { display: grid; grid-template-columns: 320px 1fr; gap: 16px; align-items: start; }
.sched-form { display: flex; flex-direction: column; gap: 10px; }
.sched-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.sched-form input { color: var(--ink); }
.sched-form input[type=color] { padding: 2px; height: 38px; width: 56px; }
.sched-check { flex-direction: row !important; align-items: center; gap: 8px !important; color: var(--ink) !important; }
.sched-swatch { display: inline-block; width: 16px; height: 16px; border-radius: 5px; background: var(--c); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 14%, transparent); }
@media (max-width: 720px) { .sched-tpl-page { grid-template-columns: 1fr; } }
.sched-my { display: grid; grid-template-columns: 1fr 280px; gap: 16px; align-items: start; }
@media (max-width: 860px) { .sched-my { grid-template-columns: 1fr; } }
table.sched-cal { width: 100%; border-collapse: separate; border-spacing: 6px; table-layout: fixed; }
table.sched-cal th { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; padding-bottom: 2px; }
table.sched-cal th.we { color: color-mix(in srgb, var(--accent) 70%, var(--muted)); }
.sched-calcell { height: 78px; vertical-align: top; padding: 7px 8px; border-radius: 12px; background: var(--glass); border: 1px solid var(--glass-brd); }
.sched-calcell.out { opacity: .38; }
.sched-calcell.we { background: color-mix(in srgb, var(--accent) 6%, var(--glass)); }
.sched-calcell.today { outline: 2px solid var(--brand); }
.sched-calcell .dnum { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.sched-calcell.today .dnum { color: var(--brand); }
.sched-calchip { display: inline-block; padding: 3px 8px; border-radius: 7px; font-size: 11px; font-weight: 700; color: #fff; background: var(--c); box-shadow: inset 0 1px 0 rgba(255,255,255,.22); }
.sched-caloff { font-size: 11px; color: color-mix(in srgb, var(--muted) 75%, transparent); }
.sched-up { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.sched-up:last-child { border-bottom: 0; }
.sched-up-date { min-width: 86px; font-weight: 600; font-size: 13px; text-transform: capitalize; }
.sched-roster { display: grid; grid-template-columns: 320px 1fr; gap: 16px; align-items: start; }
@media (max-width: 820px) { .sched-roster { grid-template-columns: 1fr; } }
.sched-roster select[multiple] { padding: 4px; }

/* ---------- Недельный график из книги Nextcloud ---------- */
.sched-sync { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sched-sync-state { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sched-sync-form { margin-left: auto; }
.sched-leg-hours { font-size: 12px; color: var(--muted); }
.sched-leg-hours b { color: var(--ink); }

.sched-cov { display: flex; flex-direction: column; gap: 6px; }
.sched-cov-row { display: grid; grid-template-columns: 92px 1fr 150px; align-items: center; gap: 10px; }
.sched-cov-day { font-size: 12px; }
.sched-cov-strip { display: flex; gap: 1px; height: 14px; }
.sched-cov-strip i { flex: 1 1 0; border-radius: 2px; background: var(--chip); }
.sched-cov-strip i.cv-idle { background: color-mix(in srgb, var(--muted) 18%, transparent); }
.sched-cov-strip i.cv-exact { background: color-mix(in srgb, var(--ok) 55%, transparent); }
.sched-cov-strip i.cv-spare { background: color-mix(in srgb, var(--info) 55%, transparent); }
.sched-cov-strip i.cv-short { background: var(--bad); }
.sched-cov-num { text-align: right; }
@media (max-width: 720px) {
  .sched-cov-row { grid-template-columns: 74px 1fr; }
  .sched-cov-num { grid-column: 1 / -1; text-align: left; }
}

table.sched-week { table-layout: fixed; }
table.sched-week .sched-weekhead { min-width: 150px; padding: 6px 4px; }
.sched-weekhead .d { display: block; font-size: 13px; }
.sched-weekhead .wd { display: block; font-size: 10px; color: var(--muted); }
.sched-weekhead.we { background: color-mix(in srgb, var(--accent) 8%, var(--thead-bg)); }
.sched-weekhead.today { box-shadow: inset 0 -2px 0 var(--brand); }
.sched-opname { display: block; overflow: hidden; text-overflow: ellipsis; }
.sched-opline { display: block; font-size: 10px; font-weight: 500; color: var(--muted); }
th.sched-hours, td.sched-hours { width: 56px; min-width: 56px; text-align: center; font-size: 12px; color: var(--muted); }
.sched-daycell { padding: 0; height: 42px; }
.sched-daycell.we { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.sched-daycell.today { background: color-mix(in srgb, var(--brand) 6%, transparent); }
.sched-bar-btn { display: flex; align-items: center; gap: 4px; width: 100%; height: 42px; padding: 0 6px; border: 0; background: transparent; cursor: pointer; color: var(--ink); }
span.sched-bar-btn { cursor: default; }
button.sched-bar-btn:hover { background: var(--hover); }
.sched-bar { position: relative; flex: 1 1 auto; height: 18px; border-radius: 5px; background: color-mix(in srgb, var(--muted) 12%, transparent); overflow: hidden; }
.sched-bar.pending { box-shadow: inset 0 0 0 1px var(--warn); }
.sched-bar-lg { height: 26px; }
.sched-seg { position: absolute; top: 0; bottom: 0; background: var(--c); border-radius: 3px; }
.sched-bar-off { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; color: color-mix(in srgb, var(--muted) 70%, transparent); }
.sched-notedot { color: var(--warn); font-size: 16px; line-height: 1; }

.sched-myweek { display: flex; flex-direction: column; gap: 10px; }
.sched-myscale { display: flex; justify-content: space-between; font-size: 10px; color: var(--faint); padding: 0 2px; }
.sched-myday { display: grid; grid-template-columns: 120px 1fr; gap: 10px 12px; align-items: center; padding: 8px; border-radius: var(--radius-sm); border: 1px solid var(--glass-brd); background: var(--glass); }
.sched-myday.we { background: color-mix(in srgb, var(--accent) 6%, var(--glass)); }
.sched-myday.today { outline: 2px solid var(--brand); }
.sched-myday-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.sched-myday-text { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; }
.sched-int-line b { font-variant-numeric: tabular-nums; }
.sched-note-line { color: var(--warn-ink); }
@media (max-width: 640px) { .sched-myday { grid-template-columns: 1fr; } }

.sched-int { display: flex; align-items: center; gap: 8px; padding: 5px 0; flex-wrap: wrap; font-size: 13px; }
.sched-note { display: flex; gap: 8px; padding: 4px 0; font-size: 12.5px; flex-wrap: wrap; }
.sched-note-time { font-weight: 700; font-variant-numeric: tabular-nums; }
.sched-form-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sched-form-row .field { margin: 0; }
.sched-form-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.sched-log tr.row-warn td { background: color-mix(in srgb, var(--warn) 10%, transparent); }
.sched-log-filters { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sched-log-filter-group { display: flex; gap: 6px; flex-wrap: wrap; }
.sched-log-conflicts { margin-left: auto; }
.sched-log-day + .sched-log-day { margin-top: 12px; }
.sched-log-day .panel-head h3 { font-size: 13px; text-transform: capitalize; }
th.sched-log-time, td.sched-log-time { width: 62px; color: var(--muted); }
.sched-log-diff { white-space: nowrap; }
.sched-tok { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 7px; font-size: 11px; font-weight: 700; color: #fff; background: var(--c); box-shadow: inset 0 1px 0 rgba(255,255,255,.2); }
.sched-tok.off { color: var(--muted); background: transparent; box-shadow: inset 0 0 0 1px var(--line); font-weight: 600; }
.sched-tok-arrow { margin: 0 6px; color: var(--faint); }
.sched-week-total { font-size: 12px; color: var(--muted); margin-left: 6px; }
.sched-week-total b { color: var(--ink); }
.sched-cov-head { margin-bottom: -2px; }
.sched-cov-scale { display: flex; justify-content: space-between; font-size: 10px; color: var(--faint); }
.sched-cov-note { margin: 6px 0 0; }
.sched-hours .unit { color: var(--faint); font-size: 10px; }
.sched-cov-num { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.sched-cov-num .meta { font-size: 10px; }
.sched-seg.cont-left { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.sched-seg.cont-right { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.sched-seg.cont-right::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 3px; background: repeating-linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.65) 2px, transparent 2px, transparent 4px); }
.sched-seg.cont-left::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: repeating-linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.65) 2px, transparent 2px, transparent 4px); }


/* ========================================================================= *
   v30 — ДОПОЛНЕНИЯ ДИЗАЙН-ШАБЛОНА (Claude Design, 2026-07)
   Новые разделы: reveal-анимации, count-up, skeleton, графики, пагинация
   с номерами, empty-состояния, мобильная навигация, командная палитра,
   KPI drill-down, переходы табов. Всё уважает prefers-reduced-motion.
 * ========================================================================= */

/* ---------- Микро-интеракции (нажатия) ---------- */
.btn:active { transform: translateY(0) scale(.985); }
.btn.primary:active { box-shadow: 0 3px 8px -4px color-mix(in srgb, var(--brand) 60%, transparent); }
a.card:active { transform: translateY(-1px) scale(.996); }
.icon-btn:active { transform: scale(.92); }
.sidebar a.nav-item:active { transform: scale(.985); }
.tabs a { transition: background .14s ease, color .14s ease, box-shadow .14s ease; }
.tabs a:active { transform: scale(.97); }

/* ---------- Reveal: появление контента (staggered) ----------
   Разметка: data-reveal на элементе; ui.js проставляет --ri (индекс в группе)
   и класс .in при входе во вьюпорт / после HTMX-свапа. Без JS контент виден. */
html.js [data-reveal] {
  opacity: 0; transform: translateY(9px);
  transition: opacity .4s ease, transform .4s ease;
  transition-delay: calc(var(--ri, 0) * 46ms);
}
html.js [data-reveal].in { opacity: 1; transform: none; }

/* ---------- Переход контента при смене таба / HTMX-свапе ---------- */
.panel-in { animation: panel-in .26s ease both; }
@keyframes panel-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

/* ---------- Skeleton-загрузка (HTMX-партиалы) ----------
   ui.js вставляет каркас в hx-target по data-skel="table|kpi|cards" на время запроса. */
.skel {
  position: relative; overflow: hidden; border-radius: 8px;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}
.skel::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ink) 7%, transparent), transparent);
  animation: skel-wave 1.15s infinite;
}
@keyframes skel-wave { to { transform: translateX(100%); } }
.skel-wrap { padding: 14px 16px; display: flex; flex-direction: column; gap: 11px; }
.skel-row { display: flex; gap: 12px; align-items: center; }
.skel-row .skel { height: 13px; flex: 1 1 auto; }
.skel-row .skel.w1 { flex: 0 0 12%; } .skel-row .skel.w2 { flex: 0 0 22%; } .skel-row .skel.w3 { flex: 0 0 8%; }
.skel-kpi { height: 74px; border-radius: var(--radius); }
.skel-card { height: 86px; border-radius: var(--radius); }

/* ---------- Графики (charts.js: line / donut / sparkline) ---------- */
.chart-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 14px; align-items: stretch; }
@media (max-width: 960px) { .chart-row { grid-template-columns: 1fr; } }
.chart-body { position: relative; padding: 6px 16px 14px; }
.chart-body svg { display: block; width: 100%; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 0 16px 12px; }
.chart-leg { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--muted); font-weight: 600; }
.chart-leg i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 18%, transparent); }
.chart-leg b { color: var(--ink); font-variant-numeric: tabular-nums; }
.chart-tip {
  position: absolute; z-index: 20; pointer-events: none; min-width: 148px;
  background: var(--glass-2); border: 1px solid var(--glass-brd); border-radius: 11px;
  box-shadow: var(--shadow-hover); backdrop-filter: blur(12px) saturate(150%);
  padding: 8px 11px; font-size: 11.5px; opacity: 0; transition: opacity .12s ease;
}
.chart-tip.on { opacity: 1; }
.chart-tip .tip-t { font-weight: 700; font-size: 11px; margin-bottom: 4px; }
.chart-tip .tip-r { display: flex; align-items: center; gap: 7px; color: var(--muted); padding: 1px 0; }
.chart-tip .tip-r i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex: none; }
.chart-tip .tip-r b { margin-left: auto; color: var(--ink); font-variant-numeric: tabular-nums; padding-left: 12px; }
.donut-wrap { display: flex; align-items: center; gap: 18px; padding: 10px 16px 16px; flex-wrap: wrap; }
.donut-c { position: relative; flex: 0 0 auto; }
.donut-center { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.donut-center b { display: block; font-size: 21px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.donut-center span { display: block; font-size: 10.5px; color: var(--muted); font-weight: 600; margin-top: 1px; }
.donut-legend { display: flex; flex-direction: column; gap: 8px; min-width: 150px; flex: 1 1 150px; }
.donut-legend .chart-leg { justify-content: flex-start; }
.donut-legend .chart-leg b { margin-left: auto; }
.spark { display: block; width: 100%; height: 26px; margin-top: 7px; }
.kpi .spark { max-width: 132px; }

/* Мини-бары (drill-down по часам) — CSS-only */
.mini-bars { display: flex; align-items: flex-end; gap: 3px; height: 96px; padding: 4px 0 0; }
.mini-bars i {
  flex: 1 1 0; min-width: 4px; border-radius: 3px 3px 1px 1px;
  background: color-mix(in srgb, var(--accent) 55%, transparent);
  height: calc(var(--v) * 1%); transition: height .5s cubic-bezier(.4,0,.2,1), background .12s ease;
}
.mini-bars i:hover { background: var(--accent); }
.mini-bars i.hot { background: var(--bad); }
.mini-caps { display: flex; gap: 3px; margin-top: 4px; }
.mini-caps span { flex: 1 1 0; text-align: center; font-size: 9.5px; color: var(--faint); font-variant-numeric: tabular-nums; }

/* ---------- KPI drill-down ---------- */
.kpi.drillable { cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.kpi.drillable:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.kpi.drillable .kpi-more { color: var(--faint); transition: color .12s ease, transform .2s ease; }
.kpi.drillable:hover .kpi-more { color: var(--accent); }
.kpi.drillable.open { outline: 2px solid var(--accent-ring); }
.kpi.drillable.open .kpi-more { transform: rotate(180deg); color: var(--accent); }
.drill-panel { display: none; }
.drill-panel.open { display: block; animation: panel-in .24s ease both; }
.drill-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(240px, 1fr); gap: 18px; padding: 4px 16px 16px; }
@media (max-width: 820px) { .drill-grid { grid-template-columns: 1fr; } }

/* ---------- Пагинация с номерами страниц ---------- */
.pager { flex-wrap: wrap; }
.pager .pnum {
  min-width: 28px; height: 28px; padding: 0 7px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; font-size: 12px; font-weight: 600; color: var(--muted);
  transition: background .12s ease, color .12s ease;
}
.pager .pnum:hover { background: var(--hover); color: var(--ink); }
.pager .pnum.current {
  background: var(--accent); color: var(--accent-ink); font-weight: 700;
  box-shadow: 0 3px 10px -3px color-mix(in srgb, var(--accent) 55%, transparent);
}
.pager .pgap { color: var(--faint); padding: 0 3px; font-size: 12px; }

/* ---------- Empty-состояния с иллюстрацией ---------- */
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 44px 24px 46px; text-align: center; }
.empty-state .eico {
  width: 58px; height: 58px; border-radius: 19px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent); margin-bottom: 8px;
  box-shadow: 0 0 0 9px color-mix(in srgb, var(--accent) 5%, transparent);
}
.empty-state .eico.quiet { background: var(--chip); color: var(--muted); box-shadow: 0 0 0 9px color-mix(in srgb, var(--ink) 3%, transparent); }
.empty-state h4 { margin: 0; font-size: 14px; font-weight: 700; }
.empty-state p { margin: 0; color: var(--muted); font-size: 12.5px; max-width: 380px; }
.empty-state .btn { margin-top: 12px; }

/* ---------- Мобильная навигация (сворачиваемый сайдбар) ---------- */
.nav-burger { display: none; }
.nav-scrim {
  position: fixed; inset: 0; z-index: 110; background: color-mix(in srgb, #000 42%, transparent);
  backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
@media (max-width: 900px) {
  body.nav-locked { overflow: hidden; }
  .app { grid-template-columns: 1fr; }
  .nav-burger { display: inline-flex; }
  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; width: 248px; z-index: 120;
    transform: translateX(-104%); visibility: hidden; pointer-events: none;
    transition: transform .24s cubic-bezier(.4,0,.2,1), visibility 0s linear .24s;
    height: 100dvh;
  }
  .app.nav-open .sidebar { transform: none; visibility: visible; pointer-events: auto; transition-delay: 0s; box-shadow: var(--shadow-hover); }
  .app.nav-open .nav-scrim { opacity: 1; pointer-events: auto; }
}

/* ---------- Топбар: группа действий справа ---------- */
.topbar-tools { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.topbar-tools .icon-btn:hover { color: var(--accent); }

/* ---------- Командная палитра (Ctrl/⌘+K) ---------- */
.cmdk-bg {
  position: fixed; inset: 0; z-index: 300; display: none;
  align-items: flex-start; justify-content: center; padding: 11vh 16px 16px;
  background: color-mix(in srgb, #000 40%, transparent); backdrop-filter: blur(3px);
}
.cmdk-bg.open { display: flex; animation: sched-fade .13s ease; }
.cmdk {
  width: 560px; max-width: 100%; overflow: hidden;
  background: var(--glass-2); border: 1px solid var(--glass-brd); border-radius: 16px;
  box-shadow: var(--shadow-hover);
  backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  animation: cmdk-pop .17s cubic-bezier(.2,.9,.3,1.15);
}
@keyframes cmdk-pop { from { opacity: 0; transform: scale(.965) translateY(-8px); } }
.cmdk-input {
  width: 100%; border: none; border-bottom: 1px solid var(--line); border-radius: 0;
  background: transparent; padding: 14px 16px; font-size: 14px;
}
.cmdk-input:focus { outline: 3px solid var(--accent-ring); outline-offset: 0; border-color: var(--accent); }
.cmdk-list { max-height: 336px; overflow-y: auto; padding: 6px; }
.cmdk-sec { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--faint); padding: 9px 10px 4px; }
.cmdk-item {
  display: flex; align-items: center; gap: 10px; padding: 8.5px 10px; border-radius: 9px;
  cursor: pointer; font-size: 12.75px; font-weight: 500; color: var(--ink-2);
}
.cmdk-item .ic { color: var(--faint); }
.cmdk-item.sel, .cmdk-item:hover { background: var(--accent); color: var(--accent-ink); }
.cmdk-item.sel .ic, .cmdk-item:hover .ic { color: var(--accent-ink); }
.cmdk-item .kb { margin-left: auto; }
.cmdk-item.sel .kb, .cmdk-item:hover .kb { background: color-mix(in srgb, #fff 18%, transparent); color: var(--accent-ink); border-color: transparent; }
.cmdk-foot { display: flex; gap: 14px; padding: 9px 14px; border-top: 1px solid var(--line); color: var(--faint); font-size: 11px; }
.cmdk-foot .kb { margin-right: 4px; }
.cmdk-hidden { display: none !important; }
kbd.kb {
  font-family: var(--mono); font-size: 10px; font-weight: 600; line-height: 1;
  padding: 3px 6px; border-radius: 6px; color: var(--muted);
  background: var(--seg-bg); border: 1px solid var(--glass-brd);
}

/* ---------- Бары: рост при появлении (ui.js ставит width из data-w) ---------- */
.bar-fill[data-w] { width: 0; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .panel-in, .drill-panel.open, .cmdk, .cmdk-bg.open { animation: none; }
  .skel::after { animation: none; }
  .bar-fill, .mini-bars i { transition: none; }
  .btn, .icon-btn, a.card, .tabs a, .sidebar a.nav-item { transition: none; }
}

/* ===================== Unified shell & directory ===================== */
.command-trigger {
  width: clamp(220px, 26vw, 390px); min-height: 36px; display: flex; align-items: center;
  gap: 9px; padding: 6px 8px 6px 11px; border: 1px solid var(--border);
  border-radius: 9px; background: color-mix(in srgb, var(--input-bg) 82%, transparent);
  color: var(--muted); font: inherit; font-size: 12px; text-align: left; cursor: pointer;
}
.command-trigger:hover { border-color: var(--border-strong); color: var(--ink-2); background: var(--surface-hover); }
.command-trigger > span { flex: 1 1 auto; }
.command-trigger kbd { padding: 2px 5px; border: 1px solid var(--border); border-radius: 5px; color: var(--faint); background: var(--background-subtle); font: 10px var(--mono); }

.page-lead { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.page-lead h2 { margin: 0 0 3px; font-size: 17px; line-height: 1.3; letter-spacing: -.015em; }
.page-lead p { margin: 0; color: var(--muted); font-size: 12.5px; }
.result-count { flex: none; color: var(--muted); font-size: 12px; font-weight: 650; }
.directory-toolbar { display: flex; align-items: center; gap: 10px; padding: 10px; }
.directory-search { position: relative; display: flex; align-items: center; width: min(440px, 100%); color: var(--faint); }
.directory-search > .ic { position: absolute; left: 12px; pointer-events: none; }
.directory-search input { width: 100%; padding-left: 36px; }
.directory-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.project-directory { padding: 10px; }
.project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.project-row {
  min-width: 0; min-height: 72px; display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px;
  color: var(--ink); background: color-mix(in srgb, var(--surface) 76%, transparent);
  transition: border-color .14s ease, background .14s ease, box-shadow .14s ease, transform .14s ease;
}
.project-row:hover { color: var(--ink); border-color: color-mix(in srgb, var(--accent) 38%, var(--border)); background: var(--surface-hover); box-shadow: var(--shadow); transform: translateY(-1px); }
.project-icon { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: var(--accent-soft); color: var(--accent); }
.project-copy { min-width: 0; display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; }
.project-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 700; }
.project-copy > span { color: var(--muted); font-size: 11.5px; }
.project-arrow { flex: none; color: var(--faint); }
.project-row:hover .project-arrow { color: var(--accent); }
.empty-state.compact { padding: 28px 18px 32px; }
.empty-state.compact .eico { width: 44px; height: 44px; border-radius: 14px; }
.empty-state.compact h3 { margin: 4px 0 0; font-size: 14px; }

/* Переиспользуемые плотные группы для форм, статусов и карточек сведений. */
.section-title { margin: 0; font-size: 14px; font-weight: 700; }
.card-title { margin: 0 0 12px; font-size: 15px; font-weight: 750; }
.subsection-title { margin: 0 0 10px; font-size: 13px; }
.section-divider { border: 0; border-top: 1px solid var(--border); margin: 16px 0; }
.analysis-list-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px 18px; margin-top: 14px; }
.analysis-list-grid h4 { margin: 0 0 6px; }
.analysis-list-grid ul { margin: 0; padding-left: 18px; color: var(--ink-2); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.compact-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.field-row.flush-top { padding-top: 0; }
.field-grow { flex: 1 1 280px !important; min-width: min(240px, 100%) !important; }
.input-fill { width: 100%; min-width: 150px; }
.input-score { width: 68px; }
.input-level { width: 58px; }
.input-type { width: 128px; }
.nowrap { white-space: nowrap; }
.text-center { text-align: center; }
.mt-3 { margin-top: 12px !important; }
.mb-2 { margin-bottom: 10px !important; }
.comment-entry { margin: 9px 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--hover); }
.comment-field { max-width: 760px; }
.comment-actions { margin-top: 8px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.mt-2 { margin-top: 8px !important; }
.mb-1 { margin-bottom: 4px !important; }
.panel-footnote { margin-top: 8px; padding: 10px 12px; border-top: 1px solid var(--border); color: var(--muted); font-size: 12px; line-height: 1.5; }
.token-notice { border-color: color-mix(in srgb, var(--success) 48%, var(--border)); background: var(--ok-soft); }
.selectable-code { display: block; margin: 10px 0; padding: 10px 12px; overflow-wrap: anywhere; user-select: all; border-radius: 8px; background: var(--surface); color: var(--ink); }
.compact-stats, .quality-metrics { display: flex; gap: 0; flex-wrap: wrap; padding: 0; overflow: hidden; }
.compact-stats > div, .quality-metrics > div { min-width: 150px; padding: 13px 18px; border-right: 1px solid var(--border); }
.compact-stats span, .quality-metrics span { display: block; color: var(--muted); font-size: 11px; }
.compact-stats strong, .quality-metrics strong { display: block; margin-top: 3px; font-size: 19px; font-variant-numeric: tabular-nums; }
.quality-metric-action { align-self: center; border-right: 0 !important; }
.threshold-inputs input { width: 64px; }
.warning-text { color: var(--warning); }
.success-text { color: var(--success); }
.col-icon { width: 54px; text-align: center; }
.icon-btn.compact { width: 30px; height: 30px; min-height: 30px; }
.align-end { align-self: flex-end; }
.mt-4 { margin-top: 16px !important; }
.subsection-gap { margin: 16px 0 6px; }
.grp-block { padding: 14px; margin-bottom: 10px; }
.col-order { width: 110px; }
.section-copy { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.form-section { padding: 16px; }
.form-section + .form-section { border-top: 1px solid var(--border); }
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.info-item { min-width: 0; }
.info-item > span { display: block; margin-bottom: 3px; color: var(--muted); font-size: 11px; }
.info-item > strong { display: block; overflow-wrap: anywhere; font-size: 13px; font-weight: 650; }
.call-metadata { padding: 2px 0; }
.call-audio { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.call-audio audio { display: block; width: 100%; height: 40px; }
.score-value { font-size: 19px !important; font-variant-numeric: tabular-nums; }
.score-value small { color: var(--muted); font-size: 11px; font-weight: 600; }
.score-value.ok, .metric-cell strong.ok { color: var(--success); }
.score-value.warn { color: var(--warning); }
.score-value.bad, .metric-cell strong.bad { color: var(--danger); }
.invite-log td { vertical-align: top; }
.invite-log .meta { font-size: 11.5px; }
.dialog-launch .dialog-inline { margin: 0; }
.transcript-summary { display: flex; justify-content: center; padding: 12px 16px; border-top: 1px solid var(--border); list-style: none; cursor: pointer; }
.transcript-summary::-webkit-details-marker { display: none; }
.transcript-summary::marker { content: ""; }
.transcript-toggle { color: var(--accent); }
.transcript-summary:hover .transcript-toggle { background: var(--hover); border-color: color-mix(in srgb, var(--accent) 45%, var(--glass-brd)); }
.transcript-summary:focus-visible { outline: none; }
.transcript-summary:focus-visible .transcript-toggle { outline: 3px solid var(--accent-ring); outline-offset: 2px; }
.transcript-toggle .ic { transition: transform .16s ease; }
.transcript-toggle-hide { display: none; }
.dialog-inline[open] .transcript-toggle-show { display: none; }
.dialog-inline[open] .transcript-toggle-hide { display: inline; }
.dialog-inline[open] .transcript-toggle .ic { transform: rotate(180deg); }
.dialog-inline[open] .transcript-summary { padding-bottom: 10px; }
.dialog-inline-body { border-top: 1px solid var(--border); }
.dialog-scroll { max-height: min(62vh, 620px); overflow-y: auto; overscroll-behavior: contain; }
.transcript-help { margin: 0; padding: 8px 14px; border-bottom: 1px solid var(--border); }
.transcript-raw { margin: 12px 0 0; padding: 12px; white-space: pre-wrap; border-radius: 9px; background: var(--background-subtle); color: var(--ink-2); font: 12px/1.65 var(--font); }
.call-summary { white-space: normal; overflow-wrap: anywhere; line-height: 1.55; }
.metric-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.metric-cell { min-width: 0; padding: 13px 14px; }
.metric-cell + .metric-cell { border-left: 1px solid var(--border); }
.metric-cell > span, .metric-cell > small { display: block; color: var(--muted); font-size: 10.5px; }
.metric-cell > strong { display: block; margin: 2px 0; font-size: 18px; font-variant-numeric: tabular-nums; }
.speech-health { display: flex; align-items: center; flex-wrap: wrap; gap: 0; padding: 8px 10px; }
.health-state { min-width: 220px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; padding: 7px 9px; }
.health-metric { min-width: 100px; padding: 7px 13px; border-left: 1px solid var(--border); }
.health-metric span { display: block; color: var(--muted); font-size: 10.5px; }
.health-metric strong { display: block; margin-top: 1px; font-size: 14px; font-variant-numeric: tabular-nums; }
.health-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; padding: 5px; }
.queue-note { margin: -3px 2px 10px; padding: 8px 10px; border-left: 3px solid var(--info); color: var(--muted); font-size: 12px; }
.active-filter { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border-bottom: 1px solid var(--border); background: var(--accent-soft); color: var(--ink-2); font-size: 12px; }
.active-filter a { color: var(--accent); font-weight: 650; }
.error-cell { max-width: 440px; }
.details-summary { width: fit-content; cursor: pointer; color: var(--accent); font-size: 12px; font-weight: 650; }

/* Раскрываемые подробности воркера в таблице обработки звонков. Ширину
   ограничиваем: без этого длинные имена моделей растягивают колонку и ломают
   таблицу на узких экранах. */
.worker-details { margin: 2px 0 6px; }
.worker-details-row > td { padding-top: 0; border-top: 0; }
.worker-details-grid {
  display: grid; gap: 10px 32px; margin-top: 10px;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
}
.detail-label { margin-top: 8px; color: var(--muted); font-size: 11.5px; font-weight: 650; }
.afl-pre { white-space: pre-wrap; word-break: break-word; background: var(--chip); padding: 10px 12px; border-radius: 10px; font-size: 12px; max-height: 340px; overflow: auto; margin: 4px 0 0; }
.afl-form { max-width: 1100px; }
.afl-form input:not([type="checkbox"]), .afl-form select, .afl-form textarea { width: 100%; }
#afl-code { display: block; width: 100%; min-height: 320px; resize: vertical; }
.CodeMirror { height: 480px; border: 1px solid var(--line); border-radius: 12px; font-size: 13px; }
.afl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.afl-help code { background: var(--chip); padding: 1px 6px; border-radius: 6px; }
.field .err, .errorlist { color: var(--bad); font-size: 12px; margin: 4px 0 0; list-style: none; padding: 0; }
.supervisor-message { margin-top: 13px; padding: 11px 12px; border-left: 3px solid var(--accent); border-radius: 0 9px 9px 0; background: var(--accent-soft); color: var(--ink-2); }
.analysis-list-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 14px; }
.analysis-list-grid h4 { margin: 0 0 7px; font-size: 12.5px; }
.analysis-list-grid ul { margin: 0; padding-left: 18px; color: var(--ink-2); }
.resolution-note, .appeal-text { margin-top: 10px; padding: 11px 12px; border-radius: 9px; background: var(--hover); color: var(--ink-2); }
.appeal-help { margin-bottom: 9px; }
.form-wide { width: 100%; max-width: 780px; }
.form-wide textarea { width: 100%; }
.appeal-meta { align-items: end; }
.appeal-status { margin-left: auto; }
.appeal-resolution { margin-top: 12px; }
.resolution-meta { margin-top: 9px; }
.action-cell { text-align: right !important; white-space: nowrap; }
.section-heading { margin: 22px 2px 10px; }
.section-heading h2 { margin: 0 0 3px; font-size: 16px; }
.section-heading p { margin: 0; color: var(--muted); font-size: 12px; }
.field-optional { margin-left: 4px; color: var(--faint); font-weight: 500; }
.field-spaced { margin-top: 12px; }
.field-small { max-width: 160px; }
.field-medium { max-width: 220px; }
.field-wide { max-width: 380px; }
.check-bottom { align-self: flex-end; padding-bottom: 9px; }
.panel-description { margin: 0 0 14px; padding: 0 16px; }
.destructive-actions { margin-top: 14px; }
.account-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.account-form-card { min-width: 0; }
.account-form-wide { grid-row: span 2; }
.account-form-card .btn.primary { align-self: flex-start; }
.user-projects { max-width: 320px; }
.user-projects .badge { margin: 1px 2px 1px 0; }
.row-actions { display: inline-flex; align-items: center; gap: 2px; }
.danger-text { color: var(--danger); }
.status-panel { display: flex; align-items: flex-start; gap: 11px; padding: 13px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--glass); }
.status-panel.warning { border-color: color-mix(in srgb, var(--warning) 38%, var(--border)); background: var(--warn-soft); }
.status-panel.error { border-color: color-mix(in srgb, var(--danger) 38%, var(--border)); background: var(--bad-soft); }
.status-panel .status-copy { min-width: 0; flex: 1 1 auto; }
.status-panel > .eico { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--bad-soft); color: var(--danger); }
.status-panel.warning > .eico { background: var(--warn-soft); color: var(--warning); }
.status-panel h3 { margin: 0 0 3px; font-size: 13px; }
.status-panel p { margin: 0; color: var(--ink-2); font-size: 12px; }

.toasts { z-index: var(--z-toast); }
.toast { display: flex; align-items: flex-start; gap: 10px; cursor: default; }
.toast > span { min-width: 0; flex: 1 1 auto; }
.toast-close { flex: none; width: 24px; height: 24px; display: grid; place-items: center; margin: -4px -7px -4px 0; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font: 18px/1 sans-serif; cursor: pointer; }
.toast-close:hover { color: var(--ink); background: var(--hover); }
.dialog-unavailable { padding: 16px; }

@media (max-width: 1100px) {
  .project-grid { grid-template-columns: 1fr; }
  .command-trigger { width: 210px; }
  .command-trigger kbd { display: none; }
  .account-form-grid { grid-template-columns: 1fr; }
  .account-form-wide { grid-row: auto; }
}
@media (max-width: 900px) {
  .side-collapse { display: none; }
  .topbar { padding-inline: 14px; }
  .content { padding: 16px 14px 48px; }
  .command-trigger { width: 36px; height: 36px; padding: 0; justify-content: center; border-color: transparent; background: transparent; }
  .command-trigger > span, .command-trigger kbd { display: none; }
  .directory-toolbar { align-items: stretch; flex-direction: column; }
  .directory-actions { margin-left: 0; justify-content: flex-start; }
  .topbar .icon-btn, .nav-burger { width: 40px; height: 40px; }
  .topbar-profile { padding-inline: 3px; }
  .topbar-profile-copy { display: none; }
  .topbar-account { padding-left: 2px; }
}
@media (max-width: 640px) {
  .breadcrumbs { display: none; }
  .topbar h1 { font-size: 16px; }
  .page-lead { align-items: flex-start; flex-direction: column; gap: 8px; }
  .project-directory { padding: 7px; }
  .project-row { min-height: 66px; padding: 8px 10px; }
  .project-icon { width: 36px; height: 36px; }
  .filters form, .filters-row { padding: 11px; }
  .form-row .field { min-width: min(100%, 220px); }
  .dialog-seg { grid-template-columns: 54px minmax(0, 1fr); gap: 8px; padding: 10px; }
  .segment-meta { gap: 4px 6px; }
  .metric-cell + .metric-cell { border-left: 0; border-top: 1px solid var(--border); }
}

/* ===================== Справка и обращения ===================== */
.support-hero {
  position: relative; isolation: isolate; display: grid;
  grid-template-columns: minmax(0, 1fr) 330px; gap: 24px; padding: 22px;
  overflow: hidden;
}
.support-hero::after {
  content: ""; position: absolute; z-index: -1; width: 360px; height: 360px;
  right: -165px; top: -190px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand) 17%, transparent), transparent 69%);
}
.support-kicker {
  display: block; margin-bottom: 6px; color: var(--brand); font-size: 10.5px;
  font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
}
.support-hero h2, .support-article h2, .ticket-detail-head h2 {
  margin: 0; font-size: clamp(20px, 2vw, 27px); line-height: 1.2; letter-spacing: -.025em;
}
.support-hero-copy > p { max-width: 690px; margin: 7px 0 15px; color: var(--ink-2); }
.support-search {
  position: relative; display: flex; align-items: center; gap: 8px; max-width: 760px;
}
.support-search > .ic { position: absolute; left: 13px; z-index: 1; color: var(--faint); pointer-events: none; }
.support-search input { flex: 1 1 auto; width: 100%; min-width: 0; padding-left: 40px; }
.support-search .btn { flex: 0 0 auto; }
.support-hero-actions {
  align-self: stretch; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px; padding: 12px; border: 1px solid var(--border);
  border-radius: var(--radius); background: color-mix(in srgb, var(--surface-elevated) 72%, transparent);
}
.support-hero-actions > .btn { grid-column: 1 / -1; align-self: end; width: 100%; }
.support-ticket-metric {
  min-width: 0; padding: 7px 8px; border-radius: 9px; background: var(--hover);
}
.support-ticket-metric span { display: block; color: var(--muted); font-size: 10.5px; line-height: 1.25; }
.support-ticket-metric strong { display: block; margin-top: 3px; font-size: 20px; font-variant-numeric: tabular-nums; }
.support-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start;
}
.support-main, .support-aside { min-width: 0; }
.support-section-head { min-height: 46px; margin-bottom: 8px; }
.support-section-head h2 { margin: 0; font-size: 16px; }
.support-section-head p { margin: 2px 0 0; color: var(--muted); font-size: 12px; }
.support-category-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
}
.support-category { min-width: 0; padding: 15px; }
.support-category > header { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 9px; }
.support-category-icon {
  flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 11px; color: var(--brand); background: var(--brand-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 18%, transparent);
}
.support-category h3 { margin: 0; font-size: 14px; line-height: 1.3; }
.support-category header p { margin: 3px 0 0; color: var(--muted); font-size: 11.5px; line-height: 1.4; }
.support-article-links { display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.support-article-links a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 38px; padding: 7px 3px; border-bottom: 1px solid var(--border);
  color: var(--ink-2); font-size: 12.25px;
}
.support-article-links a:last-child { border-bottom: 0; }
.support-article-links a:hover { color: var(--brand); }
.support-article-links a .ic { color: var(--faint); }
.support-article-links a:hover .ic { color: currentColor; }
.support-recent { overflow: hidden; }
.support-recent .panel-head { padding-bottom: 11px; border-bottom: 1px solid var(--border); }
.support-recent-list { display: flex; flex-direction: column; }
.support-recent-list a {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 8px; padding: 11px 14px; border-bottom: 1px solid var(--border);
}
.support-recent-list a:last-child { border-bottom: 0; }
.support-recent-list a:hover { background: var(--hover); color: var(--ink); }
.support-recent-list strong { grid-column: 1 / -1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.support-recent-list .badge { align-self: center; }
.support-recent-list time { color: var(--muted); font-size: 10.5px; }
.ticket-ref { color: var(--brand); font-family: var(--mono); font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.support-search-results { display: flex; flex-direction: column; }
.support-result {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 16px;
  padding: 13px 16px; border-bottom: 1px solid var(--border);
}
.support-result:last-child { border-bottom: 0; }
.support-result:hover { background: var(--hover); color: var(--ink); }
.support-result-category { color: var(--brand); font-size: 10.5px; font-weight: 700; }
.support-result strong, .support-result > span:not(.support-result-category) { grid-column: 1; }
.support-result > span:not(.support-result-category) { color: var(--muted); font-size: 11.5px; }
.support-result > .ic { grid-column: 2; grid-row: 1 / 4; align-self: center; color: var(--faint); }

.page-trail { display: flex; align-items: center; gap: 7px; margin: -2px 1px 10px; color: var(--muted); font-size: 11.5px; }
.page-trail a { color: var(--muted); }
.page-trail a:hover { color: var(--brand); }
.support-article-layout { display: grid; grid-template-columns: minmax(0, 820px) 280px; gap: 14px; align-items: start; justify-content: center; }
.support-article { padding: 24px 28px 0; }
.support-article-summary { margin: 9px 0 20px; padding-bottom: 18px; border-bottom: 1px solid var(--border); color: var(--ink-2); font-size: 14px; }
.support-article-body { max-width: 72ch; color: var(--ink-2); font-size: 13.5px; line-height: 1.7; }
.support-article-body p { margin: 0 0 15px; }
.support-article-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  margin: 25px -28px 0; padding: 16px 28px; border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--brand-soft) 52%, transparent);
}
.support-article-foot div { display: flex; flex-direction: column; }
.support-article-foot span { color: var(--muted); font-size: 11.5px; }
.support-related { position: sticky; top: calc(var(--head-h) + 16px); padding: 15px; }
.support-related h3 { margin: 0 0 8px; font-size: 13px; }
.support-related > a:not(.support-back) { display: block; padding: 8px 0; border-bottom: 1px solid var(--border); color: var(--ink-2); font-size: 11.75px; }
.support-related > a:hover { color: var(--brand); }
.support-related .support-back { display: block; margin-top: 13px; color: var(--brand); font-size: 11.5px; font-weight: 700; }

.support-form-layout { display: grid; grid-template-columns: minmax(0, 720px) 320px; gap: 14px; align-items: start; justify-content: center; }
.support-ticket-form { padding: 20px; }
.support-form-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 20px; }
.support-form-head h2 { margin: 0; font-size: 18px; }
.support-form-head p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.support-field { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.support-field > label, .ticket-reply > label { font-size: 12.5px; font-weight: 700; }
.support-field > select, .support-field > textarea, .support-field > input { width: 100%; }
.field-help { color: var(--muted); font-size: 11.5px; line-height: 1.45; }
.support-form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.support-form-note { padding: 17px; }
.support-form-note > h3 { margin: 0 0 9px; font-size: 13px; }
.support-form-note > ul { margin: 0 0 16px; padding-left: 18px; color: var(--ink-2); font-size: 12px; }
.support-form-note > ul li + li { margin-top: 7px; }
.support-form-note .status-panel { margin-top: 6px; }
.support-list-actions, .section-actions {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.filter-inline { display: flex; align-items: center; gap: 8px; }
.filter-inline label { color: var(--muted); font-size: 11.5px; font-weight: 700; }
.filter-inline select { min-width: 180px; }
.support-ticket-table td:nth-child(2) { white-space: normal; min-width: 190px; }
.support-ticket-table .cell-action { width: 52px; padding-block: 2px; text-align: right; }
.pager { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 12px; color: var(--muted); font-size: 11.5px; }

.ticket-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 20px; }
.ticket-detail-head h2 { font-size: 20px; }
.ticket-detail-head p { margin: 4px 0 0; color: var(--muted); font-size: 11.5px; }
.ticket-head-meta { display: flex; align-items: flex-end; flex-direction: column; gap: 6px; color: var(--muted); font-size: 11px; }
.ticket-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 14px; align-items: start; }
.ticket-conversation { min-width: 0; }
.ticket-conversation .panel-head { border-bottom: 1px solid var(--border); }
.ticket-thread { display: flex; flex-direction: column; gap: 9px; padding: 14px 16px; }
.ticket-message { max-width: 86%; padding: 12px 13px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.ticket-message-user { align-self: flex-start; }
.ticket-message-staff { align-self: flex-end; border-color: color-mix(in srgb, var(--brand) 24%, var(--border)); background: color-mix(in srgb, var(--brand-soft) 58%, var(--surface)); }
.ticket-message header { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 8px; margin-bottom: 8px; }
.ticket-avatar { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--chip); color: var(--ink-2); font-size: 11px; font-weight: 800; }
.ticket-message-staff .ticket-avatar { background: var(--brand-soft); color: var(--brand); }
.ticket-message header div { min-width: 0; display: flex; flex-direction: column; }
.ticket-message header strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.75px; }
.ticket-message header span, .ticket-message time { color: var(--muted); font-size: 9.75px; }
.ticket-message-body { color: var(--ink-2); font-size: 12.5px; line-height: 1.55; overflow-wrap: anywhere; }
.ticket-resolution { display: flex; align-items: flex-start; gap: 10px; margin: 0 16px 14px; padding: 13px; border: 1px solid color-mix(in srgb, var(--success) 28%, var(--border)); border-radius: var(--radius); background: var(--ok-soft); }
.ticket-resolution > span { display: grid; place-items: center; color: var(--success); }
.ticket-resolution p { margin: 3px 0 0; color: var(--ink-2); font-size: 12px; }
.ticket-reply { padding: 14px 16px 16px; border-top: 1px solid var(--border); }
.ticket-reply textarea { width: 100%; margin-top: 7px; }
.ticket-closed-note { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-top: 1px solid var(--border); background: var(--hover); }
.ticket-closed-note p { margin: 0; color: var(--muted); font-size: 12px; }
.ticket-side-info { position: sticky; top: calc(var(--head-h) + 16px); padding: 16px; }
.ticket-side-info h3 { margin: 0 0 10px; font-size: 13px; }
.ticket-side-info dl { margin: 0; }
.ticket-side-info dl > div { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.ticket-side-info dt { color: var(--muted); font-size: 11px; }
.ticket-side-info dd { margin: 0; text-align: right; font-size: 11.5px; }
.ticket-side-help { margin: 13px 0 0; color: var(--muted); font-size: 11px; }

.ticket-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ticket-kpi { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 13px 15px; }
.ticket-kpi span { color: var(--muted); font-size: 11.5px; }
.ticket-kpi strong { font-size: 21px; font-variant-numeric: tabular-nums; }
.ticket-kpi.is-new strong { color: var(--brand); }
.ticket-kpi.is-done strong { color: var(--success); }
.ticket-admin-filters { display: grid; grid-template-columns: minmax(220px, 1fr) 220px 190px auto; gap: 10px; align-items: end; padding: 13px; }
.ticket-admin-filters .field { display: flex; flex-direction: column; gap: 4px; }
.ticket-admin-filters label { color: var(--muted); font-size: 10.5px; font-weight: 700; }
.ticket-admin-filter-actions { display: flex; gap: 7px; }
.admin-ticket-head { border-left: 3px solid var(--brand); }
.admin-ticket-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 14px; align-items: start; }
.admin-ticket-controls { position: sticky; top: calc(var(--head-h) + 16px); }
.admin-ticket-controls .panel-head { border-bottom: 1px solid var(--border); }
.admin-ticket-controls form { padding: 0 16px 16px; }
.admin-ticket-reply { background: color-mix(in srgb, var(--brand-soft) 32%, transparent); }

@media (max-width: 1180px) {
  .support-layout { grid-template-columns: minmax(0, 1fr) 280px; }
  .ticket-admin-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ticket-admin-filter-actions { grid-column: 1 / -1; justify-content: flex-end; }
}
@media (max-width: 980px) {
  .support-hero { grid-template-columns: 1fr; }
  .support-hero-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .support-layout, .support-article-layout, .support-form-layout,
  .ticket-detail-layout, .admin-ticket-layout { grid-template-columns: 1fr; }
  .support-related, .ticket-side-info, .admin-ticket-controls { position: static; }
  .support-aside { grid-row: 2; }
}
@media (max-width: 700px) {
  .support-category-grid, .ticket-kpis { grid-template-columns: 1fr; }
  .support-search { align-items: stretch; flex-direction: column; }
  .support-search > .ic { top: 11px; }
  .support-search .btn { width: 100%; }
  .support-article { padding: 20px 18px 0; }
  .support-article-foot { align-items: stretch; flex-direction: column; margin-inline: -18px; padding-inline: 18px; }
  .support-article-foot .btn { width: 100%; }
  .ticket-admin-filters { grid-template-columns: 1fr; }
  .ticket-admin-filter-actions { grid-column: auto; }
  .ticket-message { max-width: 100%; }
  .ticket-detail-head { align-items: flex-start; flex-direction: column; }
  .ticket-head-meta { align-items: flex-start; }
  .filter-inline { align-items: stretch; flex-direction: column; width: 100%; }
  .filter-inline select, .support-list-actions > .btn { width: 100%; }
  .support-list-actions { align-items: stretch; flex-direction: column; }
}

/* ---------- Одноразовые заметки: администрирование ---------- */
.onetime-table .cell-action { width: 52px; padding-block: 2px; text-align: right; }
.secret-link { overflow: hidden; }
.secret-link-body { display: flex; align-items: center; gap: 10px; padding: 0 16px; flex-wrap: wrap; }
.secret-link-value {
  flex: 1 1 320px; min-width: 0; font-family: var(--mono); font-size: 12.5px;
  color: var(--ink); background: var(--chip); border: 1px solid var(--border);
}
.secret-link-note { margin: 10px 16px 16px; color: var(--muted); font-size: 11.5px; line-height: 1.45; }
.secret-timeline { list-style: none; margin: 0; padding: 4px 16px 16px; display: flex; flex-direction: column; gap: 2px; }
.secret-timeline li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; padding: 9px 0; }
.secret-timeline li + li { border-top: 1px solid var(--border); }
.secret-timeline strong { display: block; font-size: 13px; }
.secret-timeline .meta { display: block; font-size: 11.5px; }
.secret-step-mark {
  width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%;
  background: var(--chip); color: var(--faint);
}
.secret-timeline li.is-done .secret-step-mark { background: var(--ok-soft); color: var(--ok); }
.secret-revoke { padding: 12px 0 4px; }
.secret-revoke .meta { display: block; margin-bottom: 9px; font-size: 11.5px; line-height: 1.45; }

/* ---------- Одноразовые заметки: страница получателя ---------- */
.secret-card { width: min(560px, 100%); text-align: left; }
.secret-card-icon {
  width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: 12px;
  border-radius: 14px; background: var(--brand-soft); color: var(--brand);
}
.secret-card-icon.is-open { background: var(--warn-soft); color: var(--warn-ink); }
.secret-card-icon.is-gone { background: var(--chip); color: var(--muted); }
.secret-warning { margin: 16px 0 14px; }
.secret-warning h3 { margin: 0 0 5px; font-size: 13px; font-weight: 700; }
.secret-warning p { margin: 0; color: var(--ink-2); font-size: 12.5px; line-height: 1.5; }
.secret-warning-list { margin: 0; padding-left: 17px; color: var(--ink-2); font-size: 12.5px; line-height: 1.55; }
.secret-warning-list li + li { margin-top: 4px; }
.secret-reveal-form { margin-top: 4px; }
.secret-countdown {
  margin: 0 0 10px; color: var(--muted); font-size: 12.5px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.secret-countdown strong { color: var(--ink); font-family: var(--mono); }
.secret-value-label { margin: 4px 0 6px; color: var(--muted); font-size: 11.5px; font-weight: 600; }
.secret-value {
  margin: 0 0 12px; padding: 13px 14px; max-height: 320px; overflow: auto;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--chip); color: var(--ink); font-family: var(--mono);
  font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word;
  -webkit-user-select: all; user-select: all;
}
@media (max-width: 700px) {
  .secret-link-body { flex-direction: column; align-items: stretch; }
  .secret-link-body .btn { width: 100%; }
  .secret-card { padding: 24px 18px; }
}

/* Пояснение к срезу данных SLA (какая задача и какой порог считается попаданием). */
.sla-scope { margin: -4px 2px 12px; font-size: 11.5px; line-height: 1.45; }

/* --- Раздел «Пользователи»: вкладки, фильтры, диалоги, журнал ------------- */
.oknote { width: 100%; color: var(--ok); background: var(--ok-soft); border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent); border-radius: var(--radius-sm); font-size: 12.5px; padding: 8px 10px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.linkish { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }

.page-lead-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.users-filters, .logs-filters { margin-top: 10px; }
.users-filters .field, .logs-filters .field { min-width: 170px; flex: 1 1 170px; }
.filters-actions { display: flex; gap: 8px; align-items: center; margin-left: auto; }

.compliance-banner { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 14px 16px; margin-top: 10px; border-color: color-mix(in srgb, var(--warning) 38%, var(--border)); }
.compliance-banner h3 { margin: 0 0 3px; font-size: 14px; }
.compliance-banner-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.user-table th a { color: inherit; }
.user-table th[aria-sort="asc"] a::after { content: " ↑"; color: var(--accent); }
.user-table th[aria-sort="desc"] a::after { content: " ↓"; color: var(--accent); }

.app-dialog { z-index: var(--z-dialog); }
.app-dialog-box { width: 520px; }
.app-dialog-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; max-height: min(70vh, 640px); overflow-y: auto; }
.app-dialog-body .sched-modal-foot { position: sticky; bottom: -14px; margin: 4px -16px -14px; gap: 8px; background: var(--glass-2); }

.ss-foot { padding: 6px 8px 8px; border-top: 1px solid var(--glass-brd); }
.ss-option { width: 100%; text-align: left; background: none; border: 0; font: inherit; }
.ss-option:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: -2px; }

/* Журнал активности: плотная техническая строка, спокойные метки уровня. */
.log-table td { font-size: 12.5px; }
.log-table tbody tr { height: 36px; }
.badge.log-level { min-width: 92px; justify-content: center; }
.badge.log-info { background: var(--chip); color: var(--muted); }
.badge.log-notice { background: color-mix(in srgb, var(--info) 14%, transparent); color: var(--info); }
.badge.log-warning { background: var(--warn-soft); color: var(--warn-ink); }
.badge.log-error { background: var(--bad-soft); color: var(--bad); }

.log-details { margin: 0; display: grid; gap: 6px; }
.log-details > div { display: grid; grid-template-columns: 150px 1fr; gap: 10px; align-items: start; }
.log-details dt { color: var(--muted); font-size: 12px; }
.log-details dd { margin: 0; font-size: 12.5px; word-break: break-word; }
.log-details-title { margin: 14px 0 6px; font-size: 13px; }
.log-details-meta > div { grid-template-columns: 180px 1fr; }

@media (max-width: 900px) {
  .compliance-banner { flex-direction: column; }
  .app-dialog-box { width: 100%; }
  .log-details > div, .log-details-meta > div { grid-template-columns: 1fr; gap: 2px; }
}

/* Внутри диалога выпадающий список раскрывается в потоке, а не «поверх»:
   у тела диалога своя прокрутка, и абсолютная панель либо обрезалась бы ею,
   либо висела за пределами карточки. */
.app-dialog-body .ms.open > .ms-panel {
  position: static; max-width: none; margin-top: 6px; box-shadow: none;
}
.app-dialog-body .ms-list { max-height: 210px; }

.mail-section-tabs a { min-height: 40px; display: inline-flex; align-items: center; }
.mail-modes { display: inline-flex; gap: 4px; padding: 3px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); }
.mail-modes a { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 6px 14px; border-radius: var(--radius-pill); color: var(--muted); font-size: 12.5px; font-weight: 650; }
.mail-modes a:hover { color: var(--ink); background: var(--hover); }
.mail-modes a.active { color: var(--accent); background: var(--accent-soft); }
.mail-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 12px 14px; margin-bottom: 14px; }
.mail-search { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; flex: 1 1 430px; }
.mail-search input[type="search"] { flex: 1 1 260px; min-width: 180px; }
.mail-toolbar-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mail-toolbar-actions form { margin: 0; }
.mail-switch select { max-width: 240px; }
.mailbox-identity { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.mailbox-identity strong { max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.mailbox-identity span { max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 10.5px; }
.chip-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; height: var(--control-h); border: 1px solid var(--line); border-radius: var(--radius-pill); font-size: 12.5px; color: var(--ink-2); cursor: pointer; }
.chip-toggle input { margin: 0; }

.mail-shell { display: grid; grid-template-columns: 204px minmax(310px, 360px) minmax(0, 1fr); gap: 12px; align-items: start; }
.mail-folders, .mail-list, .mail-reader { height: clamp(480px, calc(100vh - 250px), 720px); }
.mail-folders { display: flex; flex-direction: column; gap: 3px; padding: 9px; overflow: auto; }
.mail-column-label { padding: 7px 9px 8px; color: var(--muted); font-size: 10.5px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.mail-folder { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 7px 9px; border-radius: var(--radius-sm); color: var(--ink-2); font-size: 13px; font-weight: 600; }
.mail-folder:hover { background: var(--hover); color: var(--ink); }
.mail-folder.active { background: var(--accent-soft); color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.mail-folder-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mail-list { padding: 0; display: flex; min-width: 0; flex-direction: column; overflow: hidden; }
.mail-column-head { min-height: 57px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 13px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 86%, transparent); }
.mail-column-head h2 { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.mail-column-head span:not(.badge) { color: var(--muted); font-size: 10.5px; }
.mail-list-scroll { min-height: 0; flex: 1 1 auto; overflow: auto; scrollbar-width: thin; }
.mail-items { list-style: none; margin: 0; padding: 0; }
.mail-item { position: relative; border-bottom: 1px solid var(--line); }
.mail-item:last-child { border-bottom: 0; }
.mail-item > a { min-height: 70px; display: grid; align-content: center; gap: 3px; padding: 9px 34px 10px 15px; color: var(--ink-2); }
.mail-item:hover { background: var(--hover); }
.mail-item.current { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.mail-item.current > a { color: var(--ink); }
.mail-item-top { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; }
.mail-item-from { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.mail-item-date { flex: 0 0 auto; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.mail-item-subject { display: flex; align-items: center; gap: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--ink); }
.mail-item-snippet { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 11.5px; }
.mail-item.unread .mail-item-from, .mail-item.unread .mail-item-subject { font-weight: 750; }
.mail-item.unread::before { content: ""; position: absolute; left: 6px; top: 19px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.mail-item-clip { position: absolute; right: 12px; top: 14px; color: var(--muted); }

.mail-reader { padding: 0; display: flex; min-width: 0; flex-direction: column; overflow: hidden; scroll-margin-top: calc(var(--head-h) + 12px); }
.mail-reader:focus { outline: none; }
.mail-reader:focus-visible { outline: 3px solid var(--accent-ring); outline-offset: 2px; }
.mail-reader-head { padding: 15px 17px 12px; border-bottom: 1px solid var(--line); }
.mail-reader-head h2 { margin: 0 0 7px; overflow-wrap: anywhere; font-size: 17px; line-height: 1.3; }
.mail-reader-meta { margin: 0 0 3px; display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; font-size: 13px; }
.mail-reader-to { margin: 0 0 11px; word-break: break-word; }
.mail-reader-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.mail-reader-actions form { margin: 0; }
.mail-mobile-back { display: none; }
.mail-attachments { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.mail-attachment { min-height: 40px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--chip); color: var(--ink-2); font-size: 12.5px; }
.mail-attachment:hover { border-color: var(--accent); color: var(--ink); }
.mail-attachment-name { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-body { flex: 1 1 auto; width: 100%; min-height: 300px; border: 0; background: transparent; }
.mail-reader > .empty-state { margin: auto; }

.mail-compose { width: min(100%, 860px); display: grid; gap: 14px; padding: 18px; }
.mail-compose input[type="text"], .mail-compose input[type="email"], .mail-compose textarea { width: 100%; }
.mail-compose-from { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--background-subtle); }
.mail-compose-from-icon { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--accent-soft); color: var(--accent); }
.mail-compose-from > span:last-child { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1px 8px; }
.mail-compose-from small { grid-column: 1 / -1; color: var(--muted); font-size: 10.5px; }
.mail-compose-from strong, .mail-compose-from span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-compose-from span { color: var(--muted); font-size: 12px; }
.mail-file-picker { min-height: 44px; display: flex; align-items: center; gap: 10px; }
.mail-file-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mail-file-input:focus-visible + .btn { outline: 3px solid var(--accent-ring); outline-offset: 2px; }
.mail-file-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 12px; }
.mail-compose-actions { display: flex; gap: 8px; justify-content: flex-end; }
.mail-form { width: min(100%, 980px); display: grid; gap: 14px; padding: 18px; }
.mail-form fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 13px 14px 15px; margin: 0; background: color-mix(in srgb, var(--background-subtle) 68%, transparent); }
.mail-form legend { padding: 0 7px; color: var(--muted); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.mail-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 11px 14px; }
.mail-form input:not([type="checkbox"]), .mail-form textarea, .mail-form select { width: 100%; }
.mail-form .field-check { display: flex; align-items: center; gap: 8px; min-height: var(--control-h); }
.mail-form .field-check label { margin: 0; }
.mail-form .field-check input { width: auto; }
.mail-admin-page { width: min(100%, 1600px); margin-inline: auto; }
.mail-admin-page > * + * { margin-top: 14px; }
.mail-detail-back { width: min(100%, 1600px); margin: 0 auto 10px; }
.mail-admin-head { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; justify-content: space-between; padding: 16px 18px; }
.mail-admin-summary > div:first-child { min-width: 280px; flex: 1 1 420px; }
.mail-admin-address { margin: 0 0 5px; font-size: 16px; font-weight: 750; }
.mail-admin-head p { margin-top: 7px; margin-bottom: 0; }
.mail-admin-status { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 10px; }
.mail-admin-actions { max-width: 680px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.mail-admin-actions form { margin: 0; }
.mail-admin-layout { display: grid; grid-template-columns: minmax(420px, .9fr) minmax(600px, 1.25fr); gap: 14px; align-items: start; }
.mail-panel-heading { min-height: 52px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 16px 8px; }
.mail-panel-heading h3, .mail-panel-heading p { margin: 0; }
.mail-panel-heading p { margin-top: 4px; }
.mail-access-panel > .meta { margin: 0; padding: 0 16px; }
.mail-access-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; margin: 11px 16px 15px; }
.mail-access-form .field { min-width: 0; }
.mail-access-form select { width: 100%; }
.mail-access-empty { min-height: 170px; }
.mail-folders-panel .table-wrap { max-height: 360px; }
.mail-files-panel .table-wrap { max-height: calc(100vh - 310px); }
.mail-files-table .icon-btn { width: 40px; height: 40px; }
.calls .cell-action { width: 52px; padding-block: 2px; text-align: right; }
.mail-account-dialog-backdrop { padding: 20px; }
.content > .mail-account-dialog-backdrop { margin-top: 0; }
body.mail-dialog-open { overflow: hidden; }
.mail-account-dialog { width: min(1240px, calc(100vw - 40px)); max-width: none; max-height: min(900px, calc(100vh - 40px)); display: flex; flex-direction: column; overflow: hidden; }
.mail-account-dialog-head { flex: 0 0 auto; align-items: center; }
.mail-account-dialog-head p { margin: 3px 0 0; }
.mail-account-dialog-head .meta { text-transform: none; }
.mail-account-dialog-body { min-height: 260px; padding: 14px; overflow: auto; overscroll-behavior: contain; background: color-mix(in srgb, var(--background-subtle) 66%, transparent); }
.mail-account-dialog-body .mail-admin-page { width: 100%; }
.mail-account-dialog .mail-admin-layout { grid-template-columns: minmax(0, 1fr); }
.mail-dialog-loading { min-height: 230px; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--muted); font-size: 13px; }
.mail-dialog-loading .spinner { width: 18px; height: 18px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: ui-spin .7s linear infinite; }
.mail-dialog-error { min-height: 230px; }

@media (max-width: 1280px) {
  .mail-shell { grid-template-columns: minmax(290px, 340px) minmax(0, 1fr); }
  .mail-folders { grid-column: 1 / -1; height: auto; max-height: none; min-height: 58px; flex-direction: row; gap: 6px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scrollbar-width: thin; }
  .mail-column-label { display: none; }
  .mail-folder { flex: 0 0 auto; scroll-snap-align: start; }
  .mail-list, .mail-reader { height: clamp(500px, calc(100vh - 320px), 690px); }
}
@media (max-width: 1180px) {
  .mail-admin-layout { grid-template-columns: minmax(0, 1fr); }
  .mail-folders-panel .table-wrap { max-height: none; }
}
@media (max-width: 820px) {
  .mail-shell { grid-template-columns: minmax(0, 1fr); }
  .mail-shell:not(.has-selection) .mail-reader { display: none; }
  .mail-shell.has-selection .mail-folders, .mail-shell.has-selection .mail-list { display: none; }
  .mail-list { height: max(430px, calc(100vh - 320px)); }
  .mail-reader { height: auto; min-height: calc(100vh - 190px); }
  .mail-toolbar.has-selection .mail-search { display: none; }
  .mail-mobile-back { min-height: 40px; display: inline-flex; align-items: center; gap: 6px; margin: -5px 0 8px; color: var(--muted); font-size: 12.5px; font-weight: 650; }
  .mail-body { min-height: 480px; }
}
@media (max-width: 640px) {
  .mail-section-tabs a, .mail-modes a, .mail-folder, .mail-attachment, .mail-mobile-back { min-height: 44px; }
  .mail-modes { width: 100%; }
  .mail-modes a { flex: 1 1 50%; justify-content: center; }
  .mail-toolbar { padding: 10px; align-items: stretch; }
  .mail-search, .mail-toolbar-actions { width: 100%; flex-basis: 100%; }
  .mail-search input[type="search"] { flex-basis: 100%; }
  .mail-toolbar-actions { justify-content: space-between; }
  .mailbox-identity { margin-right: auto; }
  .mail-reader-head { padding: 13px 14px 11px; }
  .mail-reader-actions > a, .mail-reader-actions > form { flex: 1 1 calc(50% - 4px); }
  .mail-reader-actions form .btn, .mail-reader-actions > .btn { width: 100%; min-height: 44px; }
  .mail-attachment-name { max-width: 150px; }
  .mail-compose, .mail-form { padding: 14px; }
  .mail-compose-from > span:last-child { grid-template-columns: minmax(0, 1fr); }
  .mail-compose-from small { grid-column: auto; }
  .mail-compose-actions .btn { flex: 1 1 50%; min-height: 44px; }
  .mail-file-picker { align-items: flex-start; flex-direction: column; }
  .mail-admin-head { padding: 14px; }
  .mail-admin-actions { width: 100%; justify-content: flex-start; }
  .mail-admin-actions > a, .mail-admin-actions > form { flex: 1 1 calc(50% - 4px); }
  .mail-admin-actions form .btn, .mail-admin-actions > .btn { width: 100%; min-height: 44px; }
  .mail-access-form { grid-template-columns: minmax(0, 1fr); }
  .mail-access-form .btn { width: 100%; min-height: 44px; }
  .mail-account-dialog-backdrop { padding: 0; align-items: stretch; }
  .mail-account-dialog { width: 100%; min-height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; }
  .mail-account-dialog-head { min-height: 58px; padding: 9px 12px; }
  .mail-account-dialog-head .icon-btn { width: 44px; height: 44px; }
  .mail-account-dialog-body { padding: 10px; }
}