/*
 * AtomService design system v4 «Квитанция» (docs/CRM-DESIGN-V4.md).
 * Loaded after the vision-* layers and before responsive.css: it owns colour, type, shape, depth and motion;
 * responsive.css keeps the final say on sizes and touch targets. Screen only: print layouts are untouched.
 */
@media screen {
  /* ---------- 0. Tokens ---------- */
  .crm-ui {
    --v4-canvas: #edf0f4;
    --v4-surface: #fff;
    --v4-sunken: #f5f7fa;
    --v4-hover: #f0f3f7;
    --v4-ink: #17202d;
    --v4-ink-2: #46536a;
    --v4-ink-3: #5f6b7e;
    --v4-placeholder: #6b7688;
    --v4-line: #dde3ea;
    --v4-line-strong: #c9d1dc;
    --v4-control-line: #808b9c;
    --v4-accent: #0b5bc8;
    --v4-accent-press: #0849a3;
    --v4-accent-soft: #e9f1fd;
    --v4-accent-ring: #0b5bc833;
    --v4-success: #17643f;
    --v4-success-soft: #e5f4ec;
    --v4-warning: #86500a;
    --v4-warning-soft: #fbf0dc;
    --v4-danger: #a61e30;
    --v4-danger-fill: #b3261e;
    --v4-danger-soft: #fce9eb;
    --v4-nav: #1c2533;
    --v4-nav-raised: #2b3647;
    --v4-nav-ink: #e8edf4;
    --v4-nav-ink-2: #a9b4c4;
    --v4-radius-control: 10px;
    --v4-radius-card: 14px;
    --v4-radius-sheet: 18px;
    --v4-shadow-float: 0 1px 2px #17202d14, 0 8px 24px #17202d1f;
    --v4-shadow-sheet: 0 2px 6px #17202d14, 0 24px 64px #17202d33;
    --v4-mono: ui-monospace, 'SF Mono', 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;
    --v4-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
    --v4-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --v4-fast: 90ms;
    --v4-normal: 180ms;
    --v4-slow: 280ms;

    /* Re-point the shared tokens so every legacy rule that reads them follows v4. */
    --text-primary: var(--v4-ink);
    --text-secondary: var(--v4-ink-2);
    --text-muted: var(--v4-ink-3);
    --accent: var(--v4-accent);
    --accent-hover: var(--v4-accent-press);
    --accent-soft: var(--v4-accent-soft);
    --canvas: var(--v4-canvas);
    --surface-nav: var(--v4-nav);
    --surface-panel: var(--v4-surface);
    --surface-data: var(--v4-surface);
    --surface-overlay: var(--v4-surface);
    --border-glass: var(--v4-line);
    --separator: var(--v4-line);
    --radius-shell: var(--v4-radius-card);
    --radius-panel: var(--v4-radius-card);
    --radius-control: var(--v4-radius-control);
    --radius-small: 6px;
    --radius: var(--v4-radius-control);
    --shadow-panel: none;
    --motion-fast: var(--v4-normal);
    --motion-normal: var(--v4-slow);
    --ease-standard: var(--v4-ease-out);
    --success: var(--v4-success);
    --warning: var(--v4-warning);
    --danger: var(--v4-danger);
    --info: var(--v4-accent);

    color: var(--v4-ink);
    background: var(--v4-canvas);
    background-attachment: scroll;
    font-size: 14px;
    line-height: 1.45;
  }

  /* ---------- 1. Canvas and shell: no photo, no glass in the content layer ---------- */
  .crm-ui .crm-loading-shell :is(aside, header, section > div) {
    background: var(--v4-surface);
    border-color: var(--v4-line);
  }
  .crm-ui .crm-loading-shell aside {
    background: var(--v4-nav);
    border: 0;
    border-radius: var(--v4-radius-card);
  }
  .crm-ui .crm-loading-shell i {
    background: linear-gradient(90deg, #ffffff14 0%, #ffffff2e 50%, #ffffff14 100%) 0 0 / 200% 100%;
    animation: atom-shimmer 1.4s linear infinite;
  }
  .crm-ui .crm-loading-shell :is(header, section > div) {
    background: linear-gradient(90deg, #fff 0%, #f3f6f9 50%, #fff 100%) 0 0 / 200% 100%;
    animation: atom-shimmer 1.4s linear infinite;
  }

  .crm-ui .sidebar {
    background: var(--v4-nav);
    border: 0;
    border-radius: var(--v4-radius-card);
    box-shadow: 0 1px 2px #17202d1f;
    backdrop-filter: none;
    color: var(--v4-nav-ink);
  }
  .crm-ui .sidebar nav {
    scrollbar-color: #4a5668 transparent;
  }
  .crm-ui .workspace-brand,
  .crm-ui .workspace-brand strong {
    color: #fff;
  }
  .crm-ui .workspace-brand small {
    color: var(--v4-nav-ink-2);
  }
  .crm-ui .workspace-mark {
    background: var(--v4-accent);
    border-radius: 10px;
    box-shadow: inset 0 1px 0 #ffffff33;
  }
  .crm-ui .sidebar .nav-item {
    position: relative;
    color: var(--v4-nav-ink);
    border-radius: 9px;
    font-weight: 500;
    transition:
      background-color var(--v4-normal) var(--v4-ease-out),
      color var(--v4-normal) var(--v4-ease-out);
  }
  .crm-ui .sidebar .nav-item svg {
    color: var(--v4-nav-ink-2);
    transition: color var(--v4-normal) var(--v4-ease-out);
  }
  .crm-ui .sidebar .nav-item:hover {
    background: #ffffff12;
    color: #fff;
  }
  .crm-ui .sidebar .nav-item:hover svg {
    color: var(--v4-nav-ink);
  }
  .crm-ui .sidebar .nav-item.selected {
    background: var(--v4-nav-raised);
    color: #fff;
    box-shadow: none;
  }
  .crm-ui .sidebar .nav-item.selected svg {
    color: #8db9ff;
  }
  .crm-ui .sidebar .nav-item.selected::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 9px;
    bottom: 9px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: #8db9ff;
  }
  .crm-ui .sidebar .nav-item :is(.badge, .count, b, strong) {
    color: var(--v4-nav-ink);
  }
  .crm-ui .nav-divider::after {
    border-color: #ffffff1f;
  }
  .crm-ui .sidebar .profile-button {
    color: var(--v4-nav-ink);
    border-color: #ffffff1f;
    background: transparent;
  }
  .crm-ui .sidebar .profile-button:hover {
    background: #ffffff12;
  }
  .crm-ui .sidebar .profile-button :is(small, span small) {
    color: var(--v4-nav-ink-2);
  }
  .crm-ui .sidebar .nav-flyout {
    background: var(--v4-nav);
    border: 1px solid #ffffff1f;
    border-radius: 12px;
    box-shadow: var(--v4-shadow-sheet);
  }
  .crm-ui .sidebar :is(a, button):focus-visible {
    outline: 2px solid #8db9ff;
    outline-offset: 2px;
  }

  .crm-ui .topbar {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    padding-left: 4px;
    padding-right: 4px;
  }
  .crm-ui .top-title h1 {
    font-size: 26px;
    line-height: 32px;
    font-weight: 650;
    letter-spacing: -0.02em;
    color: var(--v4-ink);
  }
  .crm-ui .topbar :is(.global-search, .ord-search, .search) {
    background: var(--v4-surface);
    border: 1px solid var(--v4-line-strong);
    border-radius: var(--v4-radius-control);
    box-shadow: 0 1px 2px #17202d0a;
    transition:
      border-color var(--v4-normal) var(--v4-ease-out),
      box-shadow var(--v4-normal) var(--v4-ease-out);
  }
  .crm-ui .topbar :is(.global-search, .ord-search, .search):focus-within,
  .crm-ui .topbar input.ord-search:focus {
    border-color: var(--v4-accent);
    box-shadow: 0 1px 2px #17202d0a;
  }
  .crm-ui .topbar :is(.global-search, .search) input,
  .crm-ui .topbar input.ord-search {
    box-shadow: none;
  }
  .crm-ui .topbar .help-link {
    color: var(--v4-ink-2);
    border-radius: var(--v4-radius-control);
  }
  .crm-ui .topbar .help-link:hover {
    color: var(--v4-accent);
    background: var(--v4-hover);
  }
  .crm-ui .main > main[data-workspace='registry'],
  .crm-ui
    :is(
      .panel,
      .co-chart,
      .co-metric,
      .profile-card,
      .ct-summary-card,
      .tasks-page,
      .booking-table-workspace,
      .lead-list-controls
    ) {
    background: var(--v4-surface);
    border: 1px solid var(--v4-line);
    border-radius: var(--v4-radius-card);
    box-shadow: none;
    backdrop-filter: none;
  }
  .crm-ui .panel-heading {
    border-bottom-color: var(--v4-line);
  }

  /* ---------- 2. Typography ---------- */
  .crm-ui :is(h1, h2, h3) {
    color: var(--v4-ink);
    letter-spacing: -0.015em;
  }
  .crm-ui h2 {
    font-weight: 650;
  }
  .crm-ui h3 {
    font-weight: 600;
  }
  .crm-ui :is(.muted, small) {
    color: var(--v4-ink-3);
  }
  .crm-ui
    a:not(
      .btn,
      .nav-item,
      .settings-card,
      .workspace-brand,
      .login-brand,
      .settings-nav a,
      .profile-nav a,
      .module-tabs a,
      .page-tabs a,
      .tabs a
    ) {
    color: var(--v4-accent);
    text-underline-offset: 3px;
  }
  .crm-ui
    a:not(
      .btn,
      .nav-item,
      .settings-card,
      .workspace-brand,
      .login-brand,
      .settings-nav a,
      .profile-nav a,
      .module-tabs a,
      .page-tabs a,
      .tabs a
    ):hover {
    color: var(--v4-accent-press);
  }
  /* The ticket: order numbers, serials and money read as a printed receipt. */
  .crm-ui
    :is(
      a.order-no,
      .ord-table td:first-of-type a,
      .ord-table .btn.link[data-oa='open'],
      :is(.ord-cards, .iv-cards, .sale-cards, #warehouse-document-register .wh-cards) .list-card-title,
      .ord-card-head .ord-number,
      .lead-card .lead-number,
      .iv-number,
      .sale-number,
      .wh-number
    ),
  .crm-ui :is(.ord-table, .iv-table, .sale-table, .wh-table, .fn-table) :is(td.num, td.money, .amount, .sum),
  .crm-ui :is(.list-card-amount, .ord-card-footer > span strong, .ord-totals strong) {
    font-family: var(--v4-mono);
    font-variant-numeric: tabular-nums slashed-zero;
    letter-spacing: -0.01em;
  }

  /* ---------- 3. Buttons ---------- */
  .crm-ui :is(.btn, .icon-btn) {
    min-height: 36px;
    border: 1px solid var(--v4-line-strong);
    border-radius: var(--v4-radius-control);
    background: var(--v4-surface);
    color: var(--v4-ink);
    font-weight: 550;
    box-shadow: 0 1px 1px #17202d0a;
    transition:
      background-color var(--v4-normal) var(--v4-ease-out),
      border-color var(--v4-normal) var(--v4-ease-out),
      color var(--v4-normal) var(--v4-ease-out),
      box-shadow var(--v4-normal) var(--v4-ease-out),
      transform var(--v4-fast) var(--v4-ease-out);
  }
  .crm-ui :is(.btn, .icon-btn):hover {
    background: var(--v4-hover);
    border-color: #b3bdca;
    box-shadow: 0 1px 2px #17202d14;
  }
  .crm-ui
    :is(.btn, .icon-btn, .nav-item, .settings-card, .ord-status, .lead-status, .iv-status-button):active:not(
      :disabled
    ) {
    transform: scale(0.97);
  }
  .crm-ui
    :is(.btn.primary, .btn.success, .btn.green, .btn.blue, .ord-card-footer .btn.primary, .fn-drawer .btn.success) {
    color: #fff;
    background: var(--v4-accent);
    border-color: var(--v4-accent);
    box-shadow:
      0 1px 2px #0b5bc833,
      inset 0 1px 0 #ffffff26;
  }
  .crm-ui :is(.btn.primary, .btn.success, .btn.green, .btn.blue):hover {
    color: #fff;
    background: var(--v4-accent-press);
    border-color: var(--v4-accent-press);
  }
  .crm-ui .btn.danger {
    background: var(--v4-surface);
    color: var(--v4-danger);
    border-color: #e7b9bf;
  }
  .crm-ui .btn.danger:hover {
    background: var(--v4-danger-soft);
    border-color: #d98f99;
  }
  .crm-ui .btn.danger-fill {
    background: var(--v4-danger-fill);
    border-color: var(--v4-danger-fill);
    color: #fff;
  }
  .crm-ui .btn.danger-fill:hover {
    background: #921d17;
    border-color: #921d17;
    color: #fff;
  }
  .crm-ui :is(.btn.link, .text-button, .btn.ord-secondary-link) {
    min-height: 0;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    color: var(--v4-accent);
  }
  .crm-ui :is(.btn.link, .text-button, .btn.ord-secondary-link):hover {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    color: var(--v4-accent-press);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .crm-ui :is(.btn.selected, .btn.active, .btn.on, .btn[aria-pressed='true']) {
    background: var(--v4-accent-soft);
    border-color: #a9c7f2;
    color: var(--v4-accent-press);
    box-shadow: none;
  }
  .crm-ui .btn.unpaid {
    background: var(--v4-warning-soft);
    border-color: #ecd3a4;
    color: var(--v4-warning);
  }
  .crm-ui :is(button, .btn):disabled {
    opacity: 0.5;
    box-shadow: none;
    transform: none;
  }
  .crm-ui .icon-btn {
    min-width: 36px;
    padding: 6px;
  }

  /* Segmented controls: one track, a raised thumb for the current choice. */
  .crm-ui
    :is(
      .ord-views,
      .view-switch,
      .ct-switch,
      .task-segment,
      .iv-segment,
      .lead-view,
      .chat-type-filters,
      .chat-quick-filters,
      .ord-history-tabs
    ) {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border: 0;
    border-radius: 11px;
    background: #e3e8ef;
    box-shadow: inset 0 1px 2px #17202d14;
  }
  .crm-ui
    :is(
      .ord-views,
      .view-switch,
      .ct-switch,
      .task-segment,
      .iv-segment,
      .lead-view,
      .chat-type-filters,
      .chat-quick-filters,
      .ord-history-tabs
    )
    > :is(button, .btn, a) {
    min-height: 32px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--v4-ink-2);
    box-shadow: none;
  }
  .crm-ui
    :is(
      .ord-views,
      .view-switch,
      .ct-switch,
      .task-segment,
      .iv-segment,
      .lead-view,
      .chat-type-filters,
      .chat-quick-filters,
      .ord-history-tabs
    )
    > :is(button, .btn, a):hover {
    background: #ffffff8c;
    color: var(--v4-ink);
  }
  .crm-ui
    :is(
      .ord-views,
      .view-switch,
      .ct-switch,
      .task-segment,
      .iv-segment,
      .lead-view,
      .chat-type-filters,
      .chat-quick-filters,
      .ord-history-tabs
    )
    > :is(.selected, .on, .active, [aria-pressed='true'], [aria-selected='true']) {
    background: var(--v4-surface);
    color: var(--v4-ink);
    box-shadow:
      0 1px 2px #17202d1f,
      0 1px 1px #17202d0f;
  }

  /* Tabs: text with an underline indicator, never boxed buttons. */
  .crm-ui :is(.module-tabs, .page-tabs, .tabs, .ord-card-tabs) {
    gap: 4px;
    border-bottom: 1px solid var(--v4-line);
    background: transparent;
  }
  .crm-ui :is(.module-tabs, .page-tabs, .tabs) > :is(a, button),
  .crm-ui .ord-card-tabs > :is(button, a, .btn) {
    position: relative;
    min-height: 40px;
    padding: 8px 12px;
    border: 0;
    border-radius: 8px 8px 0 0;
    background: transparent;
    box-shadow: none;
    color: var(--v4-ink-2);
    font-weight: 550;
    transition: color var(--v4-normal) var(--v4-ease-out);
  }
  .crm-ui :is(.module-tabs, .page-tabs, .tabs) > :is(a, button):hover,
  .crm-ui .ord-card-tabs > :is(button, a, .btn):hover {
    background: var(--v4-hover);
    color: var(--v4-ink);
  }
  .crm-ui :is(.module-tabs, .page-tabs, .tabs) > :is(a, button)::after,
  .crm-ui .ord-card-tabs > :is(button, a, .btn)::after {
    content: '';
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: -1px;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: var(--v4-accent);
    transform: scaleX(0);
    transition: transform var(--v4-slow) var(--v4-ease-out);
  }
  .crm-ui :is(.module-tabs, .page-tabs, .tabs) > :is(.on, .selected, .active, [aria-selected='true']),
  .crm-ui .ord-card-tabs > :is(.on, .selected, .active, [aria-selected='true'], [aria-current]) {
    background: transparent;
    color: var(--v4-accent);
    box-shadow: none;
  }
  .crm-ui :is(.module-tabs, .page-tabs, .tabs) > :is(.on, .selected, .active, [aria-selected='true'])::after,
  .crm-ui .ord-card-tabs > :is(.on, .selected, .active, [aria-selected='true'], [aria-current])::after {
    transform: scaleX(1);
  }

  /* ---------- 4. Fields ---------- */
  .crm-ui
    :is(input, select, textarea):not([type='checkbox'], [type='radio'], [type='range'], [type='file'], [type='color']) {
    min-height: 38px;
    border: 1px solid var(--v4-control-line);
    border-radius: var(--v4-radius-control);
    background: var(--v4-surface);
    color: var(--v4-ink);
    box-shadow: none;
    transition:
      border-color var(--v4-normal) var(--v4-ease-out),
      box-shadow var(--v4-normal) var(--v4-ease-out),
      background-color var(--v4-normal) var(--v4-ease-out);
  }
  .crm-ui
    :is(input, select, textarea):not(
      [type='checkbox'],
      [type='radio'],
      [type='range'],
      [type='file'],
      [type='color']
    ):hover {
    border-color: #5f6b7e;
  }
  .crm-ui :is(input, select, textarea):focus {
    border-color: var(--v4-accent);
    box-shadow: 0 0 0 3px var(--v4-accent-ring);
    outline: 0;
  }
  .crm-ui :is(input, textarea)::placeholder {
    color: var(--v4-placeholder);
    opacity: 1;
  }
  .crm-ui :is(input, select, textarea):disabled {
    background: var(--v4-sunken);
    border-color: var(--v4-line-strong);
    color: var(--v4-ink-3);
  }
  .crm-ui :is(input, textarea)[readonly] {
    background: var(--v4-sunken);
  }
  .crm-ui :is(input[type='checkbox'], input[type='radio']) {
    accent-color: var(--v4-accent);
    width: 18px;
    height: 18px;
  }
  .crm-ui
    :is(
      .field,
      .co-field,
      .ord-field,
      .fn-field,
      .wh-field,
      .ct-field,
      .task-field,
      .iv-field,
      .sale-field,
      .lead-field
    )
    > span {
    color: var(--v4-ink-2);
    font-size: 13px;
    font-weight: 550;
  }
  .crm-ui :is(.field, .co-field, .ord-field) em {
    color: var(--v4-danger);
  }
  .crm-ui .ord-select-trigger {
    border: 1px solid var(--v4-control-line);
    border-radius: var(--v4-radius-control);
    background: var(--v4-surface);
    box-shadow: none;
  }
  .crm-ui .ord-select-trigger:hover {
    border-color: #5f6b7e;
    background: var(--v4-surface);
  }

  /* ---------- 5. Focus: always visible for keyboards ---------- */
  .crm-ui :is(button, a, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--v4-accent);
    outline-offset: 2px;
    box-shadow: none;
  }
  .crm-ui :is(button, a, summary, [tabindex]):focus:not(:focus-visible) {
    outline: 0;
  }

  /* ---------- 6. Cards and sections ---------- */
  .crm-ui .settings-card {
    border: 1px solid var(--v4-line);
    border-radius: var(--v4-radius-card);
    background: var(--v4-surface);
    box-shadow: none;
    transition:
      border-color var(--v4-normal) var(--v4-ease-out),
      box-shadow var(--v4-normal) var(--v4-ease-out),
      transform var(--v4-fast) var(--v4-ease-out);
  }
  .crm-ui .settings-card:hover {
    border-color: #b3bdca;
    box-shadow: var(--v4-shadow-float);
  }
  .crm-ui .settings-card h3 {
    color: var(--v4-ink);
  }
  .crm-ui :is(.lead-card, .ord-board article, .task-list .task-row, .list-card) {
    border: 1px solid var(--v4-line);
    border-radius: 12px;
    background: var(--v4-surface);
    box-shadow: 0 1px 1px #17202d0a;
    transition:
      border-color var(--v4-normal) var(--v4-ease-out),
      box-shadow var(--v4-normal) var(--v4-ease-out);
  }
  .crm-ui :is(.lead-card, .ord-board article, .task-list .task-row, .list-card):hover {
    border-color: #b3bdca;
    box-shadow: 0 1px 2px #17202d14;
  }
  .crm-ui :is(.ord-board-column, .lead-column) {
    background: #e6eaf0;
    border: 0;
    border-radius: var(--v4-radius-card);
  }
  .crm-ui :is(.ord-board-column > h3, .lead-column h3) {
    color: var(--v4-ink-2);
    font-size: 13px;
    font-weight: 650;
    letter-spacing: 0.01em;
  }
  /* Phone list cards: the receipt stub — a perforation between the number row and the fields. */
  .crm-ui .list-card {
    position: relative;
    overflow: hidden;
  }
  .crm-ui .list-card-top {
    position: relative;
    padding-bottom: 10px;
    margin-bottom: 10px;
    background-image: linear-gradient(90deg, var(--v4-line-strong) 50%, transparent 0);
    background-size: 8px 1px;
    background-repeat: repeat-x;
    background-position: 0 100%;
  }
  .crm-ui .list-card-title {
    font-weight: 650;
    letter-spacing: -0.01em;
  }
  .crm-ui .list-card-fields dt {
    color: var(--v4-ink-3);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
  }
  .crm-ui .list-card-amount {
    color: var(--v4-ink);
    font-weight: 650;
  }

  /* Order card sections: quiet headings instead of blue bars. */
  .crm-ui .ord-workspace-v3 .ord-card-content {
    background: var(--v4-canvas);
  }
  .crm-ui .ord-workspace-v3 .ord-form-section,
  .crm-ui :is(.lead-form-section, .task-fields fieldset, .settings-tools) {
    border: 1px solid var(--v4-line);
    border-radius: var(--v4-radius-card);
    background: var(--v4-surface);
    box-shadow: none;
  }
  .crm-ui .ord-workspace-v3 .form-section-heading,
  .crm-ui :is(.form-section-heading, .co-section > h3, .ct-section > h3) {
    padding: 0 0 10px;
    margin: 0 0 2px;
    border: 0;
    border-bottom: 1px solid var(--v4-line);
    border-radius: 0;
    background: transparent;
    color: var(--v4-ink);
    font-size: 15px;
    line-height: 22px;
    font-weight: 650;
    letter-spacing: -0.01em;
  }
  .crm-ui .ord-workspace-v3 .field > span,
  .crm-ui .ord-workspace-v3 .ord-field > span {
    color: var(--v4-ink-2);
    font-size: 13px;
    font-weight: 550;
  }
  .crm-ui :is(.ord-create-requirements, .ord-photo-privacy-hint) {
    background: var(--v4-accent-soft);
    color: #163a6b;
  }
  .crm-ui :is(.ord-contact-selected, .iv-contact-card, .ord-contact-card) {
    border: 1px solid var(--v4-line);
    border-radius: 12px;
    background: var(--v4-sunken);
    box-shadow: none;
  }

  /* ---------- 7. Tables ---------- */
  .crm-ui
    :is(
      .table-wrap,
      .co-table-scroll,
      .ord-table-scroll,
      .fn-table-wrap,
      .wh-table-wrap,
      .ct-table-scroll,
      .iv-table-scroll,
      .sale-table-wrap,
      .schedule-scroll
    ) {
    background: var(--v4-surface);
    border: 1px solid var(--v4-line);
    border-radius: 12px;
  }
  .crm-ui thead th {
    background: var(--v4-sunken);
    color: var(--v4-ink-3);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
    border-bottom: 1px solid var(--v4-line);
    border-right-color: transparent;
  }
  .crm-ui tbody td {
    border-bottom: 1px solid #e8ecf1;
    border-right-color: transparent;
    transition: background-color var(--v4-fast) linear;
  }
  .crm-ui tbody tr:hover td {
    background: #f4f7fb;
  }
  .crm-ui tbody tr.selected td {
    background: var(--v4-accent-soft);
  }
  .crm-ui :is(.ord-table, .lead-table, .iv-table, .sale-table, .wh-table, .fn-table, .ct-table) :is(th, td) {
    border-left-color: transparent;
    border-right-color: transparent;
  }
  .crm-ui .ord-table-resize {
    opacity: 0;
    transition: opacity var(--v4-normal) var(--v4-ease-out);
  }
  .crm-ui th:hover .ord-table-resize {
    opacity: 1;
  }

  /* ---------- 8. Status: the ticket stub ---------- */
  .crm-ui :is(.ord-status, .lead-status, .iv-status, .wh-status) {
    --chip: var(--st, var(--status, #6b7688));
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    max-width: none;
    padding: 3px 10px 3px 13px;
    white-space: nowrap;
    border: 0;
    border-radius: 7px;
    background: color-mix(in srgb, var(--chip) 15%, #fff);
    color: color-mix(in srgb, var(--chip) 48%, #17202d);
    font-size: 12.5px;
    font-weight: 650;
    line-height: 18px;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chip) 28%, transparent);
    -webkit-mask: radial-gradient(circle 4px at 0 50%, #0000 3.5px, #000 4px);
    mask: radial-gradient(circle 4px at 0 50%, #0000 3.5px, #000 4px);
    transition:
      background-color var(--v4-normal) var(--v4-ease-out),
      transform var(--v4-fast) var(--v4-ease-out);
  }
  .crm-ui :is(.ord-status, .lead-status, .iv-status, .wh-status)::before {
    content: '';
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--chip);
  }
  .crm-ui :is(.ord-status, .lead-status, .wh-status):hover {
    background: color-mix(in srgb, var(--chip) 24%, #fff);
  }
  .crm-ui .ord-status span {
    border-left-color: color-mix(in srgb, var(--chip) 35%, transparent);
  }
  .crm-ui .iv-status-button .iv-status::after {
    color: inherit;
  }
  .crm-ui .ord-status-timer {
    color: var(--v4-ink-3);
  }
  .crm-ui .ord-status-timer.ord-late,
  .crm-ui .ord-late {
    color: var(--v4-danger);
  }
  .crm-ui :is(.badge, .pill) {
    border-radius: 6px;
    font-weight: 600;
  }

  /* ---------- 9. Floating layer: sheets, dialogs, menus ---------- */
  .crm-ui
    :is(
      .backdrop,
      .co-backdrop,
      .ord-backdrop,
      .task-backdrop,
      .co-nested-backdrop,
      .sale-backdrop,
      .iv-backdrop,
      .lead-backdrop
    ) {
    background: #10182433;
    backdrop-filter: blur(2px);
  }
  .crm-ui :is(.co-nested, .modal) {
    border: 0;
    border-radius: var(--v4-radius-sheet);
    background: var(--v4-surface);
    box-shadow: var(--v4-shadow-sheet);
  }
  .crm-ui :is(.drawer, .co-drawer, .ord-drawer, .task-drawer, .ct-drawer, .sale-drawer, .iv-drawer, .lead-drawer) {
    background: var(--v4-surface);
    box-shadow: var(--v4-shadow-sheet);
  }
  .crm-ui :is(.co-nested, .modal) > header,
  .crm-ui .co-nested form > footer,
  .crm-ui .modal .form-footer {
    border-color: var(--v4-line);
  }
  .crm-ui :is(.co-nested, .modal) > header h2 {
    font-size: 18px;
    font-weight: 650;
  }
  .crm-ui .co-nested form > footer,
  .crm-ui .modal .form-footer {
    background: var(--v4-sunken);
  }
  .crm-ui
    :is(.ord-popover, .fn-popover, .iv-popover, .sale-popover, .wh-popover, .chat-filter-popover, .booking-columns),
  .crm-ui details[open] > :is(.co-menu, .ct-menu-panel, .table-menu, .task-add-menu, .lead-bulk-menu) {
    border: 1px solid var(--v4-line);
    border-radius: 12px;
    background: var(--v4-surface);
    box-shadow: var(--v4-shadow-float);
  }
  .crm-ui :is(.ord-menu, .co-menu) > :is(.btn, button, a) {
    border-radius: 8px;
    font-weight: 500;
  }
  .crm-ui :is(.ord-menu, .co-menu) > :is(.btn, button, a):hover {
    background: var(--v4-hover);
  }

  /* Order card: the receipt header with a perforation. */
  .crm-ui .ord-workspace-v3 .ord-card-head {
    position: relative;
    background: var(--v4-surface);
  }
  .crm-ui .ord-workspace-v3 .ord-card-head h2 {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.02em;
  }
  .crm-ui .ord-workspace-v3 .ord-card-head::after {
    content: '';
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg, var(--v4-line-strong) 55%, transparent 0) 0 0 / 10px 2px repeat-x;
    transform-origin: left center;
  }
  .crm-ui .ord-workspace-v3 .ord-card-actions {
    border-bottom: 0;
  }
  .crm-ui .ord-workspace-v3 .ord-card-footer {
    background: var(--v4-surface);
    border-top-color: var(--v4-line);
    box-shadow: 0 -1px 0 var(--v4-line);
  }
  .crm-ui .ord-history {
    background: var(--v4-sunken);
    border-left: 1px solid var(--v4-line);
  }
  .crm-ui .ord-history :is(article, .ord-event, .ord-feed-item) {
    border: 1px solid var(--v4-line);
    border-radius: 12px;
    background: var(--v4-surface);
    box-shadow: none;
  }

  /* ---------- 10. Feedback ---------- */
  #toast {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border: 0;
    border-radius: 12px;
    background: var(--v4-nav, #1c2533);
    color: #f4f7fb;
    font-size: 13.5px;
    font-weight: 550;
    box-shadow: var(--v4-shadow-sheet, 0 24px 64px #17202d33);
    transition:
      opacity 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
      transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  #toast::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #5ad08e;
    flex: 0 0 auto;
  }
  #toast.error {
    background: #5c1820;
    color: #fff;
  }
  #toast.error::before {
    background: #ff8a95;
  }
  .crm-ui :is(.co-empty, .wh-empty, .fn-empty, .task-empty, .ord-empty, .list-cards-empty) {
    color: var(--v4-ink-2);
  }
  .crm-ui .form-error:not(:empty) {
    color: var(--v4-danger);
    font-weight: 550;
  }

  /* ---------- 11. Chats ---------- */
  .crm-ui .chat-workspace {
    --chat-ink: var(--v4-ink);
    --chat-muted: var(--v4-ink-3);
    border-color: var(--v4-line);
    border-radius: var(--v4-radius-card);
  }
  .crm-ui .chat-sidebar {
    border-right-color: var(--v4-line);
  }
  .crm-ui .chat-type-filters > .btn {
    border-radius: 8px;
  }
  .crm-ui .chat-type-filters [aria-pressed='true'] {
    background: var(--v4-surface);
    color: var(--v4-ink);
  }

  /* ---------- 13. Refinements after the first visual pass ---------- */
  .crm-ui .sidebar nav {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
    padding-bottom: 20px;
  }
  .crm-ui :is(.settings-nav, .profile-nav) {
    background: var(--v4-surface);
    border: 1px solid var(--v4-line);
    border-radius: var(--v4-radius-card);
    box-shadow: none;
  }
  .crm-ui :is(.settings-nav, .profile-nav) a {
    color: var(--v4-ink-2);
    border-radius: 8px;
    font-weight: 500;
    text-decoration: none;
    transition:
      background-color var(--v4-normal) var(--v4-ease-out),
      color var(--v4-normal) var(--v4-ease-out);
  }
  .crm-ui :is(.settings-nav, .profile-nav) a:hover {
    background: var(--v4-hover);
    color: var(--v4-ink);
  }
  .crm-ui :is(.settings-nav, .profile-nav) a.on {
    background: var(--v4-accent-soft);
    color: var(--v4-accent-press);
    box-shadow: none;
    font-weight: 600;
  }
  .crm-ui .ord-card-head :is(.btn, .icon-btn),
  .crm-ui .ord-card-head [data-oa='close'] {
    border-radius: var(--v4-radius-control);
  }
  .crm-ui .ord-card-head [data-oa='close'] {
    min-width: 40px;
    min-height: 40px;
    border-color: transparent;
    background: var(--v4-sunken);
    box-shadow: none;
  }
  .crm-ui .ord-card-head [data-oa='close']:hover {
    background: #e3e8ef;
  }
  .crm-ui .ord-card-head .ord-number {
    color: var(--v4-ink);
    font-weight: 650;
    letter-spacing: -0.02em;
  }
  .crm-ui .lead-status {
    padding-right: 8px;
  }
  .crm-ui .lead-status :is(span, i, svg) {
    margin-left: 2px;
  }
  .crm-ui .chat-quick-filters > .btn,
  .crm-ui .chat-type-filters > .btn {
    flex: 1 1 auto;
  }
  .crm-ui .chat-filter-toggle,
  .crm-ui .chat-icon-btn {
    border-radius: var(--v4-radius-control);
  }
  .crm-ui .chat-icon-btn.is-accent {
    background: var(--v4-accent);
    border-color: var(--v4-accent);
    color: #fff;
  }

  /* Module CSS loaded per route uses !important for a green create button; one colour = one meaning. */
  .crm-ui .btn.task-create {
    color: #fff !important;
    background: var(--v4-accent) !important;
    border-color: var(--v4-accent) !important;
  }
  .crm-ui .btn.task-create:hover {
    background: var(--v4-accent-press) !important;
    border-color: var(--v4-accent-press) !important;
  }
  /* «Обучение»: a quiet, consistent help chip on every module. */
  .crm-ui :is(a.ord-training, a.sale-training, a.iv-training, a.lead-training, .co-training > summary) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 4px 10px;
    border: 1px solid var(--v4-line);
    border-radius: 999px;
    background: var(--v4-surface);
    color: var(--v4-ink-2);
    font-size: 12.5px;
    font-weight: 550;
    text-decoration: none;
    box-shadow: none;
  }
  .crm-ui :is(a.ord-training, a.sale-training, a.iv-training, a.lead-training, .co-training > summary):hover {
    border-color: var(--v4-line-strong);
    background: var(--v4-hover);
    color: var(--v4-ink);
  }
  /* Sortable headers are labels, not links. */
  .crm-ui thead th :is(.btn.link, button, a) {
    color: var(--v4-ink-3);
    font-weight: 600;
    text-decoration: none;
  }
  .crm-ui thead th :is(.btn.link, button, a):hover {
    color: var(--v4-ink);
    text-decoration: none;
  }

  /* Menus read as lists: left aligned rows, destructive row in red. */
  .crm-ui :is(.ord-menu, .co-menu, .table-menu, .task-add-menu, .lead-bulk-menu) > :is(.btn, button, a) {
    justify-content: flex-start;
    width: 100%;
    min-height: 36px;
    padding: 8px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
    color: var(--v4-ink);
    text-align: left;
    font-weight: 500;
  }
  .crm-ui :is(.ord-menu, .co-menu, .table-menu, .task-add-menu, .lead-bulk-menu) > :is(.btn, button, a):hover {
    background: var(--v4-hover);
    color: var(--v4-ink);
  }
  .crm-ui :is(.ord-menu, .co-menu) > :is([data-oa='delete'], [data-action='delete'], .danger) {
    color: var(--v4-danger);
  }
  .crm-ui :is(.ord-menu, .co-menu) > :is([data-oa='delete'], [data-action='delete'], .danger):hover {
    background: var(--v4-danger-soft);
    color: var(--v4-danger);
  }
  .crm-ui :is(.ord-popover, .fn-popover, .iv-popover, .sale-popover, .wh-popover) {
    padding: 6px;
  }
  .crm-ui .btn.task-link {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    color: var(--v4-accent);
    padding-left: 0;
    padding-right: 12px;
  }
  .crm-ui .btn.task-link:hover {
    background: transparent;
    color: var(--v4-accent-press);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .crm-ui
    :is(.task-drawer, .lead-drawer, .sale-drawer, .iv-drawer, .ct-drawer, .co-drawer)
    > header
    :is(.icon-btn, [data-close], [data-action='close']),
  .crm-ui :is(.co-nested, .modal) > header :is(.icon-btn, [data-close]) {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    padding: 0;
    border: 0;
    border-radius: var(--v4-radius-control);
    background: var(--v4-sunken);
    box-shadow: none;
  }
  .crm-ui
    :is(.task-drawer, .lead-drawer, .sale-drawer, .iv-drawer, .ct-drawer, .co-drawer)
    > header
    :is(.icon-btn, [data-close], [data-action='close']):hover,
  .crm-ui :is(.co-nested, .modal) > header :is(.icon-btn, [data-close]):hover {
    background: #e3e8ef;
  }

  /* Sort buttons in table headers are labels, not boxes; plain row buttons open the record like a link. */
  .crm-ui :is(thead th, table th) > .btn[class='btn'] {
    min-height: 28px;
    padding: 2px 4px;
    margin-left: -4px;
    border-color: transparent;
    border-radius: 6px;
    background: transparent;
    box-shadow: none;
    color: var(--v4-ink-2);
    font-size: inherit;
    font-weight: 600;
  }
  .crm-ui :is(thead th, table th) > .btn[class='btn']:hover {
    background: var(--v4-hover);
    color: var(--v4-ink);
  }
  .crm-ui tbody td > .btn[class='btn'] {
    min-height: 28px;
    padding: 2px 0;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    color: var(--v4-accent);
    text-align: left;
    white-space: normal;
  }
  .crm-ui tbody td > .btn[class='btn']:hover {
    background: transparent;
    color: var(--v4-accent-press);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .crm-ui .search > input.section-search {
    width: min(320px, 100%);
    min-height: 36px;
    padding: 6px 12px;
    border: 1px solid var(--v4-control-line);
    border-radius: var(--v4-radius-control);
  }
  .crm-ui .search > input.section-search:focus {
    border-color: var(--v4-accent);
    box-shadow: 0 0 0 3px var(--v4-accent-ring);
    outline: none;
  }

  /* Panel headings keep their buttons whole on narrow screens: they wrap under the title instead of squeezing. */
  .crm-ui .panel-heading {
    flex-wrap: wrap;
    gap: 8px;
  }
  @media (max-width: 760px) {
    .crm-ui .panel-heading > :is(h2, h3) {
      flex: 1 0 100%;
    }
  }

  /* tasks.css shrank the idle top-search placeholder to 11px for an old compact field; the field is full width now. */
  .crm-ui:has(.tasks-page) .global-search input:not(:focus)::placeholder {
    color: var(--v4-placeholder);
    font-size: inherit;
  }

  /* Task form links: tasks.css paints them #0877e0 (4.3:1) with !important and glues the pair together. */
  .crm-ui .btn.task-link {
    color: var(--v4-accent) !important;
  }
  .crm-ui .btn.task-link + .btn.task-link {
    margin-left: 20px;
  }
  .crm-ui header > .icon-btn:is([data-dismiss], [data-close]) {
    font-size: 20px;
    line-height: 1;
  }

  /* Phone list cards give the status 52% of the row: a long status («Новый Refurbished») wraps inside the stub
     instead of pushing the ⌄ out of the masked chip (seen on crmatom.uk 16.10, r34). */
  .crm-ui .list-card-status > :is(.ord-status, .lead-status, .iv-status-button, button) {
    white-space: normal;
    text-align: left;
    text-wrap: balance;
  }
  .crm-ui .list-card-status > :is(.ord-status, .lead-status, .iv-status-button, button) > span {
    flex-shrink: 0;
  }

  /* ---------- 14. Sign-in: the same receipt, torn along the perforation ---------- */
  .crm-ui.atom-login {
    min-height: 100dvh;
    background: var(--v4-canvas);
  }
  .crm-ui.atom-login > main {
    gap: 40px 64px;
  }
  .crm-ui .login-brand,
  .crm-ui .login-brand:hover {
    color: var(--v4-ink);
    text-decoration: none;
    font-size: 20px;
    letter-spacing: -0.4px;
  }
  .crm-ui .login-mark {
    width: 40px;
    height: 40px;
    border-radius: var(--v4-radius-control);
    background: var(--v4-nav);
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    box-shadow: inset 0 -3px 0 var(--v4-accent);
  }
  .crm-ui .login-intro h1 {
    margin: 0 0 20px;
    color: var(--v4-ink);
    font-size: 44px;
    line-height: 1.12;
    font-weight: 600;
    letter-spacing: -1.2px;
  }
  .crm-ui .login-intro p {
    color: var(--v4-ink-2);
  }
  .crm-ui .login-panel {
    position: relative;
    overflow: hidden;
    padding: 32px;
    border: 1px solid var(--v4-line);
    border-radius: var(--v4-radius-sheet);
    background: var(--v4-surface);
    box-shadow:
      0 1px 2px #17202d0f,
      0 12px 32px #17202d14;
    animation: atom-rise var(--v4-slow) var(--v4-ease-out) 60ms both;
  }
  .crm-ui .login-panel h2 {
    color: var(--v4-ink);
    font-size: 22px;
    letter-spacing: -0.4px;
  }
  .crm-ui .login-panel > p,
  .crm-ui .login-panel label {
    color: var(--v4-ink-2);
  }
  .crm-ui .login-panel input {
    height: 46px;
    border: 1px solid var(--v4-control-line);
    border-radius: var(--v4-radius-control);
    color: var(--v4-ink);
    transition:
      border-color var(--v4-normal) var(--v4-ease-out),
      box-shadow var(--v4-normal) var(--v4-ease-out);
  }
  .crm-ui .login-panel input:focus {
    border-color: var(--v4-accent);
    box-shadow: 0 0 0 3px var(--v4-accent-ring);
  }
  .crm-ui .login-panel button {
    min-height: 46px;
    border-radius: var(--v4-radius-control);
    background: var(--v4-accent);
    font-size: 15px;
    font-weight: 600;
    transition:
      background-color var(--v4-normal) var(--v4-ease-out),
      transform var(--v4-fast) var(--v4-ease-out);
  }
  .crm-ui .login-panel button:hover {
    background: var(--v4-accent-press);
  }
  .crm-ui .login-panel button:active:not(:disabled) {
    transform: scale(0.98);
  }
  .crm-ui .login-panel button:focus-visible,
  .crm-ui.atom-login a:focus-visible {
    outline: 3px solid var(--v4-accent-ring);
    outline-offset: 3px;
  }
  .crm-ui .login-panel #error {
    color: var(--v4-danger);
  }
  .crm-ui .login-panel #error:not(:empty) {
    padding: 10px 12px;
    border-radius: var(--v4-radius-control);
    background: var(--v4-danger-soft);
  }
  /* The help note is the receipt's tear-off: a dashed perforation with notches at both edges. */
  .crm-ui .login-panel .help {
    position: relative;
    margin-top: 28px;
    padding-top: 22px;
    border-top: 0;
    color: var(--v4-ink-3);
    font-size: 12px;
  }
  .crm-ui .login-panel .help::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--v4-line-strong) 55%, transparent 0) 0 0 / 10px 2px repeat-x;
    transform-origin: left center;
    animation: atom-perforate 420ms var(--v4-ease-out) 260ms both;
  }
  .crm-ui .login-panel .help::after {
    content: '';
    position: absolute;
    top: -9px;
    left: -43px;
    right: -43px;
    height: 20px;
    background:
      radial-gradient(circle 10px at 10px 50%, var(--v4-canvas) 9px, var(--v4-line) 9.5px, transparent 10px) left / 20px
        20px no-repeat,
      radial-gradient(circle 10px at 10px 50%, var(--v4-canvas) 9px, var(--v4-line) 9.5px, transparent 10px) right /
        20px 20px no-repeat;
    pointer-events: none;
  }
  @media (max-width: 760px) {
    .crm-ui .login-intro h1 {
      font-size: 32px;
      letter-spacing: -0.8px;
    }
    .crm-ui .login-panel {
      padding: 24px 20px;
      border-radius: var(--v4-radius-card);
    }
    .crm-ui .login-panel .help::after {
      left: -31px;
      right: -31px;
    }
  }

  /* ---------- 15. Master audit 15.10, P2–P3 leftovers (16.10) ---------- */
  /* «Обучение» in invoices and sales follows orders: hidden on tablets and phones (responsive.css only knew .ord-training). */
  @media (max-width: 1024px) {
    .crm-ui .topbar :is(.sale-training, .iv-training) {
      display: none;
    }
  }

  /* Contacts «Действия»: the <details> wraps the trigger; only its panel floats (vision.css painted both — U16). */
  .crm-ui details.ct-menu {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .crm-ui details.ct-menu > div {
    padding: 6px;
    border: 1px solid var(--v4-line);
    border-radius: 12px;
    background: var(--v4-surface);
    box-shadow: var(--v4-shadow-float);
  }

  /* Invoice status: the 44 px button is only a touch wrapper around the chip; the .btn shadow drew a second plate. */
  .crm-ui .btn.iv-status-button,
  .crm-ui .btn.iv-status-button:is(:hover, :active) {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
  }

  /* Contacts on phones: «+ Физ лицо» and «Перенос в единый справочник» wrap instead of hiding past the edge;
     the «Действия» row does not scroll either, so its open menu is not clipped by the scroll box. */
  @media (max-width: 760px) {
    .crm-ui .ct-toolbar:has(> [data-ct='migration-start'], > details.ct-menu) {
      flex-wrap: wrap;
      overflow-x: visible;
    }
    .crm-ui .ct-toolbar:has(> [data-ct='migration-start']) > .btn {
      flex: 1 1 auto;
    }
  }

  /* Invoices on phones: vision-modules.css sized every toolbar button to 100% for an old two-column grid; in the
     single scrolling row (responsive.css) that hid 12 of 13 filters behind «+ Счёт». Buttons take their own width. */
  @media (max-width: 760px) {
    .crm-ui .iv-toolbar .btn {
      width: auto;
      white-space: nowrap;
    }
  }

  /* Order history: the event kind and the comment audience are captions (12/16), not 10px fine print. */
  .crm-ui .ord-history .ord-event-author small,
  .crm-ui .ord-history .ord-compose-title span {
    color: var(--v4-ink-3);
    font-size: 12px;
    line-height: 16px;
  }

  /* Tablets: columns behind the column pager no longer stretch rows — long text is clamped like on desktops. */
  @media (min-width: 761px) and (max-width: 1024px) {
    .crm-ui .ord-table .ord-clamp {
      display: -webkit-box;
      overflow: hidden;
      overflow-wrap: anywhere;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
    }
    .crm-ui .ord-table td:is([data-col='client'], [data-col='payer'], [data-col='partner']) > .btn.link {
      display: -webkit-box;
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

    /* Order lines: sort headers («Цена» was 30×40) reach the 40 px tablet target. */
    .crm-ui .ord-drawer .ord-items-table th > .btn.link {
      min-width: 40px;
      min-height: 40px;
    }
  }
  /* Invoices: a long client or payer name takes two lines; the full name stays in the title. */
  @media (min-width: 761px) {
    .crm-ui #invoices-module .iv-table td > .btn.link[data-ia='contact'] {
      display: -webkit-box;
      overflow: hidden;
      text-align: left;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
  }

  /* Laptops with a mouse: the Jodit toolbar fits one row at 1366 (compact 30 px buttons, narrower variables column). */
  @media (min-width: 1025px) and (pointer: fine) {
    .crm-ui .document-templates .document-editor-layout {
      grid-template-columns: minmax(0, 1fr) 200px;
    }
    .crm-ui .document-templates .jodit-container {
      --jd-button-size: 30px;
    }
    .crm-ui .document-templates .jodit-toolbar-button {
      min-width: 30px;
      margin: 0;
    }
    .crm-ui .document-templates .jodit-toolbar-button__button {
      min-width: 30px;
      min-height: 32px;
    }
    .crm-ui .document-templates .jodit-toolbar-button__trigger {
      width: 12px;
    }
  }

  /* Below ~1350 px (tablets included) the editor and the variables column cannot share a row without a cramped
     editor and a two-row toolbar: variables move under the editor as a compact, scrollable list of chips. */
  @media (min-width: 701px) and (max-width: 1349px) {
    .crm-ui .document-templates .document-editor-layout {
      grid-template-columns: minmax(0, 1fr);
    }
    .crm-ui .document-templates [data-variables] {
      max-height: 260px;
    }
    .crm-ui .document-templates [data-variables] button {
      display: inline-flex;
      width: auto;
      margin: 4px 4px 0 0;
    }
  }

  /* Stock table on laptops: tighter cell padding and two-line headers keep ten columns inside the panel at 1366. */
  @media (min-width: 1025px) {
    .crm-ui #warehouse-stock-workspace .wh-table :is(th, td) {
      padding-right: 8px;
      padding-left: 8px;
    }
    .crm-ui #warehouse-stock-workspace .wh-table th,
    .crm-ui #warehouse-stock-workspace .wh-table th > button {
      white-space: normal;
      text-align: left;
    }
    /* A long unbroken code in a real name (e.g. «MM35D/36D/142/…», 253 px) must not set the column's minimum. */
    .crm-ui #warehouse-stock-workspace .wh-table tbody td[data-col='name'] {
      min-width: 220px;
      overflow-wrap: anywhere;
    }
  }

  /* The page header stays sticky (style.css); without the old glass it must be opaque, or scrolled cards
     and forms run under the title and search. A hairline appears only once the page has scrolled. */
  .crm-ui .main > .topbar {
    border-radius: 0;
    background: var(--v4-canvas);
  }
  @supports (animation-timeline: scroll()) {
    .crm-ui .topbar {
      animation: atom-topbar-line linear both;
      animation-range: 0 24px;
      animation-timeline: scroll(root);
    }
  }

  /* Tasks: the people filter is a <summary> styled by tasks.css (3 px corners, own border); match the v4 buttons. */
  .crm-ui .task-people-filter > summary {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 9px 14px;
    border: 1px solid var(--v4-line-strong);
    border-radius: var(--v4-radius-control);
    background: var(--v4-surface);
    box-shadow: 0 1px 1px #17202d0a;
    color: var(--v4-ink);
    font-weight: 550;
  }
  .crm-ui .task-people-filter > summary:hover {
    background: var(--v4-hover);
  }
  @media (max-width: 760px) {
    .crm-ui .task-people-filter > summary {
      min-height: 44px;
    }
  }

  /* Touch screens of any width (OPPO Pad landscape is 1070 px, past the 761–1024 tablet rules): the quiet 28 px
     header sort labels and row buttons of section 13, catalog links and small toggles still get a 40 px target. */
  @media (pointer: coarse) {
    .crm-ui :is(thead th, table th) > .btn[class='btn'],
    .crm-ui tbody td > .btn[class='btn'] {
      min-height: 40px;
    }
    .crm-ui #warehouse-stock-workspace .wh-table th > button,
    .crm-ui .ord-drawer .ord-items-table th > .btn.link {
      min-width: 40px;
    }
    .crm-ui .co-table td > .co-link {
      display: inline-flex;
      align-items: center;
      min-height: 40px;
    }
    .crm-ui .co-category > .co-tree-toggle {
      width: 40px;
      min-width: 40px;
      min-height: 40px;
    }
    .crm-ui .lead-card .text-button,
    .crm-ui h2 > button[data-co='date-picker'] {
      display: inline-flex;
      align-items: center;
      min-height: 40px;
    }
    .crm-ui .lead-status {
      min-height: 36px;
    }
    .crm-ui button.task-row-date {
      min-height: 40px;
    }
  }

  /* Phones in landscape (~250 px tall): a sticky 120 px header would leave half the screen for content. */
  @media (max-height: 500px) {
    .crm-ui .main > .topbar {
      position: static;
    }
  }

  /* ---------- 12. Motion: entry moments (motion.js marks them once) ---------- */
  .crm-ui[data-atom-enter] .main > :is(main, header) > *,
  .crm-ui[data-atom-enter] .main > main {
    animation: atom-rise var(--v4-slow) var(--v4-ease-out) both;
  }
  .crm-ui[data-atom-enter] .main > main > :nth-child(2) {
    animation-delay: 40ms;
  }
  .crm-ui[data-atom-enter] .main > main > :nth-child(3) {
    animation-delay: 80ms;
  }
  .crm-ui[data-atom-enter] .main > main > :nth-child(n + 4) {
    animation-delay: 120ms;
  }
  .crm-ui [data-atom-enter] .ord-workspace-v3 .ord-card-head::after {
    animation: atom-perforate 420ms var(--v4-ease-out) 180ms both;
  }
  details[open] > :is(.co-menu, .ct-menu-panel, .table-menu, .task-add-menu, .lead-bulk-menu, .ord-filter-menu) {
    animation: atom-pop var(--v4-normal) var(--v4-ease-out) both;
    transform-origin: top left;
  }
}

@keyframes atom-rise {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}
@keyframes atom-pop {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
}
@keyframes atom-perforate {
  from {
    transform: scaleX(0);
  }
}
@keyframes atom-topbar-line {
  to {
    box-shadow: 0 1px 0 var(--v4-line);
  }
}
@keyframes atom-shimmer {
  to {
    background-position: -200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .crm-ui *,
  .crm-ui *::before,
  .crm-ui *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
  }
  /* The scroll-linked header hairline is not motion: show it statically. */
  .crm-ui .main > .topbar {
    animation: none;
    box-shadow: 0 1px 0 var(--v4-line);
  }
  .crm-ui
    :is(.btn, .icon-btn, .nav-item, .settings-card, .ord-status, .lead-status, .iv-status-button):active:not(
      :disabled
    ) {
    transform: none;
  }
}
@media (prefers-reduced-transparency: reduce) {
  .crm-ui
    :is(
      .backdrop,
      .co-backdrop,
      .ord-backdrop,
      .task-backdrop,
      .co-nested-backdrop,
      .sale-backdrop,
      .iv-backdrop,
      .lead-backdrop
    ) {
    backdrop-filter: none;
    background: #10182459;
  }
}
@media (prefers-contrast: more) {
  .crm-ui {
    --v4-line: #a9b3c1;
    --v4-line-strong: #808b9c;
    --v4-control-line: #5f6b7e;
    --v4-ink-2: #2f3a4c;
    --v4-ink-3: #46536a;
  }
}