/* Generated from src/tokens.json. Do not edit. */
:root {
  --tc-color-brand-overlay-accent: rgba(255,212,0,.30);
  --tc-color-brand-overlay-soft: rgba(255,212,0,.18);
  --tc-color-brand-overlay-line: rgba(255,212,0,.55);
  --tc-color-brand-yellow-50: #FFFBE5;
  --tc-color-brand-yellow-100: #FFF4B8;
  --tc-color-brand-yellow-200: #FFE870;
  --tc-color-brand-yellow-300: #FFDD33;
  --tc-color-brand-yellow-400: #FFD400;
  --tc-color-brand-yellow-500: #E8BE00;
  --tc-color-brand-yellow-600: #B58A00;
  --tc-color-brand-yellow-700: #7A5F00;
  --tc-color-brand-yellow-800: #4D3C00;
  --tc-color-brand-yellow-900: #261E00;
  --tc-color-neutral-0: #FFFFFF;
  --tc-color-neutral-25: #FCFBF9;
  --tc-color-neutral-50: #F7F6F2;
  --tc-color-neutral-100: #F2F0E9;
  --tc-color-neutral-200: #E4E1D8;
  --tc-color-neutral-300: #CFCCC2;
  --tc-color-neutral-400: #9A988F;
  --tc-color-neutral-500: #77756D;
  --tc-color-neutral-600: #5A5852;
  --tc-color-neutral-700: #3A3833;
  --tc-color-neutral-800: #1A1A18;
  --tc-color-neutral-900: #000000;
  --tc-color-success-base: #237A45;
  --tc-color-success-surface: #EAF7EF;
  --tc-color-success-border: #A9D8B8;
  --tc-color-warning-base: #8A5A00;
  --tc-color-warning-surface: #FFF6D8;
  --tc-color-warning-border: #EBCB69;
  --tc-color-danger-base: #B42318;
  --tc-color-danger-fill-hover: #921E15;
  --tc-color-danger-fill-pressed: #711811;
  --tc-color-danger-on-base: #FFFFFF;
  --tc-color-danger-surface: #FFF0EE;
  --tc-color-danger-border: #E7AAA4;
  --tc-color-info-base: #1769AA;
  --tc-color-info-surface: #EEF7FD;
  --tc-color-info-border: #ADD3ED;
  --tc-color-channel-whatsapp: #25D366;
  --tc-color-channel-telegram: #229ED9;
  --tc-color-channel-instagram: #E1306C;
  --tc-color-channel-facebook: #0866FF;
  --tc-color-channel-messenger: #0866FF;
  --tc-color-bg: #FFFFFF;
  --tc-color-bg-chat: #FCFBF9;
  --tc-color-surface-subtle: #F7F6F2;
  --tc-color-surface-hover: #F2F0E9;
  --tc-color-border: #E4E1D8;
  --tc-color-border-disabled: #CFCCC2;
  --tc-color-text: #000000;
  --tc-color-text-secondary: #5A5852;
  --tc-color-text-tertiary: #77756D;
  --tc-color-icon: #5A5852;
  --tc-color-brand: #FFD400;
  --tc-color-accent: rgba(255,212,0,.30);
  --tc-color-accent-soft: rgba(255,212,0,.18);
  --tc-color-accent-line: rgba(255,212,0,.55);
  --tc-color-focus: #000000;
  --tc-color-overlay-backdrop: rgba(0,0,0,.28);
  --tc-data-viz-quality-good-fill: #0B4F2E;
  --tc-data-viz-quality-good-on-fill: #FFFFFF;
  --tc-data-viz-quality-acceptable-fill: #8FD0AB;
  --tc-data-viz-quality-acceptable-on-fill: #000000;
  --tc-data-viz-quality-poor-fill: #E89A22;
  --tc-data-viz-quality-poor-on-fill: #000000;
  --tc-data-viz-quality-critical-fill: #D7382A;
  --tc-data-viz-quality-critical-on-fill: #FFFFFF;
  --tc-data-viz-quality-unanswered-fill: #75746D;
  --tc-data-viz-quality-unanswered-on-fill: #FFFFFF;
  --tc-data-viz-quality-empty-fill: #F7F6F2;
  --tc-data-viz-quality-empty-stripe: #F2F0E9;
  --tc-data-viz-quality-empty-border: #E4E1D8;
  --tc-data-viz-quality-empty-on-fill: #5A5852;
  --tc-data-viz-message-type-text-fill: #3A3833;
  --tc-data-viz-message-type-text-on-fill: #FFFFFF;
  --tc-data-viz-message-type-voice-fill: #8C3A7E;
  --tc-data-viz-message-type-voice-on-fill: #FFFFFF;
  --tc-data-viz-message-type-photo-fill: #246BC0;
  --tc-data-viz-message-type-photo-on-fill: #FFFFFF;
  --tc-data-viz-message-type-file-fill: #CFCCC2;
  --tc-data-viz-message-type-file-on-fill: #000000;
  --tc-data-viz-message-type-video-fill: #2BA88F;
  --tc-data-viz-message-type-video-on-fill: #000000;
  --tc-data-viz-message-type-location-fill: #D9822B;
  --tc-data-viz-message-type-location-on-fill: #000000;
  --tc-data-viz-series-1-fill: #FFD400;
  --tc-data-viz-series-1-on-fill: #000000;
  --tc-data-viz-series-2-fill: #3A3833;
  --tc-data-viz-series-2-on-fill: #FFFFFF;
  --tc-data-viz-series-3-fill: #246BC0;
  --tc-data-viz-series-3-on-fill: #FFFFFF;
  --tc-data-viz-series-4-fill: #D9822B;
  --tc-data-viz-series-4-on-fill: #000000;
  --tc-data-viz-series-5-fill: #8C3A7E;
  --tc-data-viz-series-5-on-fill: #FFFFFF;
  --tc-data-viz-series-6-fill: #2BA88F;
  --tc-data-viz-series-6-on-fill: #000000;
  --tc-type-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;
  --tc-type-font-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --tc-type-meta-size: 12px;
  --tc-type-meta-line: 16px;
  --tc-type-meta-weight: 400;
  --tc-type-control-size: 14px;
  --tc-type-control-line: 20px;
  --tc-type-control-weight: 600;
  --tc-type-message-size: 15px;
  --tc-type-message-line: 22px;
  --tc-type-message-weight: 400;
  --tc-type-body-size: 16px;
  --tc-type-body-line: 24px;
  --tc-type-body-weight: 400;
  --tc-type-label-tracking: 0.04em;
  --tc-type-title-sm-size: 20px;
  --tc-type-title-sm-line: 24px;
  --tc-type-title-sm-weight: 700;
  --tc-type-title-lg-size: 24px;
  --tc-type-title-lg-line: 28px;
  --tc-type-title-lg-weight: 700;
  --tc-type-metric-size: 32px;
  --tc-type-metric-line: 36px;
  --tc-type-metric-weight: 700;
  --tc-space-1: 4px;
  --tc-space-2: 8px;
  --tc-space-3: 12px;
  --tc-space-4: 16px;
  --tc-space-5: 24px;
  --tc-space-6: 32px;
  --tc-size-control-sm: 32px;
  --tc-size-control-md: 40px;
  --tc-size-control-lg: 44px;
  --tc-size-icon-sm: 16px;
  --tc-size-icon-md: 20px;
  --tc-size-icon-lg: 24px;
  --tc-size-avatar-desktop: 42px;
  --tc-size-avatar-mobile: 44px;
  --tc-size-rail: 72px;
  --tc-size-sidebar: 240px;
  --tc-size-chat-list: 300px;
  --tc-size-history: 320px;
  --tc-size-header: 64px;
  --tc-size-message-max-desktop: 74%;
  --tc-size-message-max-mobile: 84%;
  --tc-size-viewport-desktop-width: 1440px;
  --tc-size-viewport-desktop-height: 900px;
  --tc-size-viewport-compact-width: 1280px;
  --tc-size-viewport-compact-height: 800px;
  --tc-size-viewport-tablet-width: 1024px;
  --tc-size-viewport-tablet-height: 768px;
  --tc-size-viewport-mobile-width: 390px;
  --tc-size-viewport-mobile-height: 844px;
  --tc-size-viewport-mobile-small-width: 360px;
  --tc-size-viewport-mobile-small-height: 800px;
  --tc-radius-control: 10px;
  --tc-radius-surface: 12px;
  --tc-radius-overlay: 16px;
  --tc-radius-full: 999px;
  --tc-border-default: 1px;
  --tc-border-selected: 3px;
  --tc-border-focus: 2px;
  --tc-elevation-0: none;
  --tc-elevation-1: 0 1px 2px rgba(26,26,24,.06);
  --tc-elevation-2: 0 8px 24px rgba(26,26,24,.12);
  --tc-elevation-3: 0 16px 48px rgba(26,26,24,.16);
  --tc-motion-fast: 100ms;
  --tc-motion-normal: 160ms;
  --tc-motion-overlay: 220ms;
  --tc-motion-tooltip-delay: 500ms;
  --tc-motion-skeleton: 1200ms;
  --tc-motion-easing: cubic-bezier(.2, 0, 0, 1);
  --tc-breakpoint-mobile-max: 760px;
  --tc-breakpoint-history-panel-min: 761px;
  --tc-breakpoint-history-persistent-min: 1181px;
  --tc-z-index-content: 0;
  --tc-z-index-sticky: 100;
  --tc-z-index-floating: 200;
  --tc-z-index-overlay: 300;
  --tc-z-index-toast: 400;
  --tc-z-index-tooltip: 500;
  --tc-layout-page-gutter-desktop: 24px;
  --tc-layout-page-gutter-mobile: 16px;
  --tc-layout-section-gap: 24px;
  --tc-layout-region-gap: 16px;
  --tc-layout-item-gap: 8px;
  --tc-component-dialog-close-inset: 8px;
  --tc-component-dialog-close-size: 44px;
  --tc-component-dialog-close-radius: 8px;
  --tc-component-dialog-close-gap: 12px;
  --tc-component-badge-size: 24px;
  --tc-component-badge-compact-size: 20px;
  --tc-component-badge-padding-inline: 4px;
  --tc-component-badge-muted-background: #77756D;
  --tc-component-badge-muted-text: #FFFFFF;
  --tc-component-rail-glyph-size: 40px;
  --tc-component-rail-badge-offset: 8px;
  --tc-component-chip-counter-inset: 4px;
  --tc-component-avatar-status-size: 12px;
  --tc-component-avatar-status-ring: 2px;
  --tc-component-list-row-padding-inline: 12px;
  --tc-component-list-row-padding-block: 8px;
  --tc-component-list-row-line-height: 24px;
  --tc-component-list-row-metadata-gap: 8px;
  --tc-component-progress-track-size: 4px;
  --tc-component-toast-max-width: 320px;
  --tc-component-toast-region-inset: 16px;
  --tc-component-toast-region-inset-mobile: 12px;
  --tc-component-editable-grid-row-header-width: 240px;
  --tc-component-editable-grid-column-min-width: 320px;
  --tc-component-data-viz-hatch-step: 3px;
  --tc-component-data-viz-swatch-size: 12px;
  --tc-component-data-viz-swatch-radius: 4px;
  --tc-component-app-shell-drawer-gap: 44px;
  --tc-component-confirm-dialog-max-width: 440px;
  --tc-component-combobox-list-max-height: 320px;
  --tc-component-combobox-option-gap: 12px;
  --tc-component-reaction-size: 26px;
  --tc-component-reaction-emoji: 17px;
  --tc-component-reaction-overlap: 10px;
  --tc-component-reaction-padding-inline: 8px;
  --tc-component-tag-compact-height: 24px;
  --tc-component-card-padding-sm: 12px;
  --tc-component-pinned-bar-compact-height: 44px;
}



@layer tc-reset, tc-foundation, tc-components, tc-patterns, tc-utilities;

@layer tc-reset {
  *, *::before, *::after { box-sizing: border-box; }
  button, input, textarea, select { font: inherit; }
  button, summary, label[for] { touch-action: manipulation; }
  img { max-width: 100%; display: block; }
}

@layer tc-foundation {
  :where(.tc-root) {
    color: var(--tc-color-text);
    background: var(--tc-color-bg);
    font-family: var(--tc-type-font-family);
    font-size: var(--tc-type-body-size);
    line-height: var(--tc-type-body-line);
    font-variant-numeric: tabular-nums;
    -webkit-text-size-adjust: 100%;
  }

  :where(.tc-root) :focus-visible {
    outline: var(--tc-border-focus) solid var(--tc-color-focus);
    outline-offset: var(--tc-space-1);
  }

  .tc-tabular { font-variant-numeric: tabular-nums; }

  .tc-stack { display: flex; flex-direction: column; align-items: var(--tc-stack-align, stretch); }
  .tc-inline { display: flex; align-items: var(--tc-inline-align, center); flex-wrap: wrap; }
  .tc-inline--nowrap { flex-wrap: nowrap; }
  .tc-inline--justify-start { justify-content: flex-start; }
  .tc-inline--justify-center { justify-content: center; }
  .tc-inline--justify-end { justify-content: flex-end; }
  .tc-inline--justify-between { justify-content: space-between; }
  .tc-stack--gap-0, .tc-inline--gap-0 { gap: 0; }
  .tc-stack--gap-1, .tc-inline--gap-1 { gap: var(--tc-space-1); }
  .tc-stack--gap-2, .tc-inline--gap-2 { gap: var(--tc-space-2); }
  .tc-stack--gap-3, .tc-inline--gap-3 { gap: var(--tc-space-3); }
  .tc-stack--gap-4, .tc-inline--gap-4 { gap: var(--tc-space-4); }
  .tc-stack--gap-5, .tc-inline--gap-5 { gap: var(--tc-space-5); }
  .tc-stack--gap-6, .tc-inline--gap-6 { gap: var(--tc-space-6); }

  .tc-icon {
    display: inline-block;
    flex: none;
    /* Inline next to text the glyph sits on the text centre line, not on the baseline:
       a baseline-aligned SVG adds the font's descender to the line box. */
    vertical-align: middle;
    color: currentColor;
  }
  .tc-icon--sm { width: var(--tc-size-icon-sm); height: var(--tc-size-icon-sm); }
  .tc-icon--md { width: var(--tc-size-icon-md); height: var(--tc-size-icon-md); }
  .tc-icon--lg { width: var(--tc-size-icon-lg); height: var(--tc-size-icon-lg); }
  .tc-icon--default { color: var(--tc-color-icon); }
  .tc-icon--muted { color: var(--tc-color-text-secondary); }
  .tc-icon--brand { color: var(--tc-color-brand-yellow-600); }
  .tc-icon--success { color: var(--tc-color-success-base); }
  .tc-icon--warning { color: var(--tc-color-warning-base); }
  .tc-icon--danger { color: var(--tc-color-danger-base); }
  .tc-icon--info { color: var(--tc-color-info-base); }
  .tc-icon--channel-whatsapp { color: var(--tc-color-channel-whatsapp); }
  .tc-icon--channel-telegram { color: var(--tc-color-channel-telegram); }
  .tc-icon--channel-instagram { color: var(--tc-color-channel-instagram); }
  .tc-icon--channel-facebook { color: var(--tc-color-channel-facebook); }
  .tc-icon--channel-messenger { color: var(--tc-color-channel-messenger); }

  .tc-control--sm { min-height: var(--tc-size-control-sm); }
  .tc-control--md { min-height: var(--tc-size-control-md); }
  .tc-control--lg { min-height: var(--tc-size-control-lg); }

  .tc-spin { animation: tc-spin var(--tc-motion-overlay) linear infinite; }
  @keyframes tc-spin { to { transform: rotate(360deg); } }

  @media (prefers-reduced-motion: reduce) {
    :where(.tc-root) *, :where(.tc-root) *::before, :where(.tc-root) *::after {
      scroll-behavior: auto !important;
      animation-duration: 0s !important;
      transition-duration: 0s !important;
    }
  }
}

@layer tc-components {
  .tc-button,
  .tc-icon-button {
    position: relative;
    border: var(--tc-border-default) solid transparent;
    border-radius: var(--tc-radius-control);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tc-space-2);
    padding: 0 var(--tc-space-4);
    color: var(--tc-color-text);
    background: transparent;
    font-size: var(--tc-type-control-size);
    line-height: var(--tc-type-control-line);
    font-weight: var(--tc-type-control-weight);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--tc-motion-fast) var(--tc-motion-easing), border-color var(--tc-motion-fast) var(--tc-motion-easing);
  }
  .tc-button:hover:not(:disabled), .tc-icon-button:hover:not(:disabled) { background: var(--tc-color-surface-hover); }
  .tc-button:active:not(:disabled), .tc-icon-button:active:not(:disabled) { background: var(--tc-color-neutral-200); }
  .tc-button:disabled, .tc-icon-button:disabled { cursor: not-allowed; color: var(--tc-color-neutral-600); background: var(--tc-color-neutral-100); border-color: var(--tc-color-border-disabled); }
  .tc-button--primary { background: var(--tc-color-brand); border-color: var(--tc-color-neutral-900); }
  .tc-button--primary:hover:not(:disabled) { background: var(--tc-color-brand-yellow-300); }
  .tc-button--primary:active:not(:disabled) { background: var(--tc-color-brand-yellow-500); }
  .tc-button--secondary { background: var(--tc-color-bg); border-color: var(--tc-color-border); }
  .tc-button--ghost { background: transparent; }
  .tc-button--destructive { color: var(--tc-color-danger-base); background: transparent; }
  .tc-button--destructive:hover:not(:disabled) { background: var(--tc-color-danger-surface); border-color: var(--tc-color-danger-border); }
  .tc-button--destructive-solid { color: var(--tc-color-danger-on-base); background: var(--tc-color-danger-base); border-color: var(--tc-color-danger-base); }
  .tc-button--destructive-solid:hover:not(:disabled) { color: var(--tc-color-danger-on-base); background: var(--tc-color-danger-fill-hover); border-color: var(--tc-color-danger-fill-hover); }
  .tc-button--destructive-solid:active:not(:disabled) { color: var(--tc-color-danger-on-base); background: var(--tc-color-danger-fill-pressed); border-color: var(--tc-color-danger-fill-pressed); }
  .tc-button[data-selected="true"] { background: var(--tc-color-brand-yellow-100); border-color: var(--tc-color-brand-yellow-600); }
  .tc-button > .tc-icon, .tc-icon-button > .tc-icon { color: inherit; }
  .tc-button__label { min-width: 0; overflow-wrap: anywhere; }
  .tc-button[data-has-counter="true"] { padding-inline-end: var(--tc-space-2); }
  .tc-button[data-has-counter="true"] > .tc-badge { align-self: center; }
  .tc-button[data-loading="true"] .tc-button__label, .tc-button[data-loading="true"] .tc-button__icon { opacity: 0; }
  .tc-button .tc-button__spinner { position: absolute; inset: 0; margin: auto; }
  .tc-icon-button { width: var(--tc-size-control-md); padding: 0; }
  .tc-icon-button.tc-control--sm { width: var(--tc-size-control-sm); }
  .tc-icon-button.tc-control--lg { width: var(--tc-size-control-lg); }
  .tc-icon-button--round { border-radius: var(--tc-radius-full); }
  .tc-button-group { display: inline-flex; align-items: center; gap: var(--tc-space-2); flex-wrap: wrap; }

  .tc-segmented {
    display: inline-grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    align-items: stretch;
    padding: var(--tc-space-1);
    gap: var(--tc-space-1);
    border-radius: var(--tc-radius-surface);
    background: var(--tc-color-surface-subtle);
  }
  .tc-segmented button {
    min-width: 0;
    border: 0;
    border-radius: var(--tc-radius-control);
    padding: 0 var(--tc-space-3);
    background: transparent;
    color: var(--tc-color-text-secondary);
    font-size: var(--tc-type-control-size);
    line-height: var(--tc-type-control-line);
    font-weight: var(--tc-type-control-weight);
    cursor: pointer;
  }
  .tc-segmented button[aria-checked="true"] { background: var(--tc-color-brand-yellow-100); color: var(--tc-color-text); box-shadow: var(--tc-elevation-1); }
  .tc-segmented button:disabled { color: var(--tc-color-neutral-600); cursor: not-allowed; }
  .tc-link { color: var(--tc-color-text); font-weight: var(--tc-type-control-weight); text-underline-offset: var(--tc-space-1); }
  .tc-link:hover { color: var(--tc-color-brand-yellow-700); }
  /* .tc-link--action — ссылка-действие вне текста («Открыть заявку»): на касании цель 44 px. */

  .tc-field { display: grid; gap: var(--tc-space-2); color: var(--tc-color-text); }
  .tc-field-label { font-size: var(--tc-type-control-size); line-height: var(--tc-type-control-line); font-weight: var(--tc-type-control-weight); }
  .tc-field-hint { color: var(--tc-color-text-secondary); font-size: var(--tc-type-meta-size); line-height: var(--tc-type-meta-line); }
  .tc-field-error { color: var(--tc-color-danger-base); display: flex; gap: var(--tc-space-1); align-items: flex-start; font-size: var(--tc-type-meta-size); line-height: var(--tc-type-meta-line); }
  .tc-input-shell, .tc-select-shell {
    display: flex;
    align-items: center;
    gap: var(--tc-space-2);
    border: var(--tc-border-default) solid var(--tc-color-border);
    border-radius: var(--tc-radius-control);
    background: var(--tc-color-bg);
    padding: 0 var(--tc-space-3);
    transition: border-color var(--tc-motion-fast) var(--tc-motion-easing);
  }
  .tc-input-shell:focus-within, .tc-select-shell:focus-within { border-color: var(--tc-color-neutral-900); }
  .tc-field[data-invalid="true"] .tc-input-shell, .tc-field[data-invalid="true"] .tc-select-shell, .tc-textarea[aria-invalid="true"] { border-color: var(--tc-color-danger-base); }
  .tc-input-shell--readonly { background: var(--tc-color-surface-subtle); border-style: dashed; }
  .tc-input-shell:has(input:disabled), .tc-select-shell:has(select:disabled) { background: var(--tc-color-neutral-100); border-color: var(--tc-color-border-disabled); }
  .tc-input-shell input, .tc-select-shell select {
    border: 0;
    outline: 0;
    min-width: 0;
    width: 100%;
    color: var(--tc-color-text);
    background: transparent;
    font-size: var(--tc-type-body-size);
    line-height: var(--tc-type-body-line);
  }
  .tc-input-shell__affix { color: var(--tc-color-icon); display: flex; align-items: center; }
  /* Значение по центру всего поля (счётчик с «−» и «+»). Поле ввода занимает всю оболочку и
     целиком остаётся целью нажатия; подпись («из 8») лежит поверх края и пропускает нажатие
     к полю, поэтому число не сдвигает. Для коротких значений: длинное зашло бы под подпись. */
  .tc-input-shell--center { position: relative; }
  .tc-input-shell--center input { text-align: center; }
  .tc-input-shell--center > .tc-input-shell__affix { position: absolute; inset-inline-end: var(--tc-space-3); pointer-events: none; }
  .tc-input-shell--center > .tc-input-shell__affix:first-child { inset-inline-start: var(--tc-space-3); inset-inline-end: auto; }
  /* WebKit рисует текст выбранного варианта за границей списка с appearance: none —
     длинный вариант расширял оболочку и страницу. Текст обрезается многоточием. */
  .tc-select-shell select { appearance: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Цель нажатия — вся высота поля: элемент управления растянут по оболочке, иначе
     нажатие у верхнего или нижнего края 44 px поля ни во что не попадало. Стрелка
     списка лежит поверх него на прежнем месте и пропускает нажатие к списку. */
  /* …и заходит на рамку оболочки сверху и снизу: иначе рамка в 1 px оставалась мёртвой
     полосой, и цель была 42 px вместо 44. Фон поля прозрачный — рамку видно, как раньше. */
  .tc-input-shell input, .tc-select-shell select { align-self: stretch; margin-block: calc(var(--tc-border-default) * -1); }
  .tc-select-shell { position: relative; }
  .tc-select-shell select { padding-inline-end: calc(var(--tc-size-icon-sm) + var(--tc-space-2)); }
  .tc-select-shell > select ~ .tc-icon { position: absolute; inset-inline-end: var(--tc-space-3); pointer-events: none; }
  .tc-textarea {
    width: 100%;
    min-height: calc(var(--tc-size-control-lg) * 2);
    resize: vertical;
    padding: var(--tc-space-3);
    border: var(--tc-border-default) solid var(--tc-color-border);
    border-radius: var(--tc-radius-control);
    color: var(--tc-color-text);
    background: var(--tc-color-bg);
    font-size: var(--tc-type-body-size);
    line-height: var(--tc-type-body-line);
  }
  .tc-composer {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: end;
    gap: var(--tc-space-2);
    padding: var(--tc-space-3);
    border-top: var(--tc-border-default) solid var(--tc-color-border);
    background: var(--tc-color-bg);
  }
  .tc-composer textarea { min-width: 0; max-height: calc(var(--tc-size-control-lg) * 3); resize: none; border: var(--tc-border-default) solid var(--tc-color-border); border-radius: var(--tc-radius-control); padding: var(--tc-space-2) var(--tc-space-3); color: var(--tc-color-text); background: var(--tc-color-surface-subtle); font-size: var(--tc-type-body-size); line-height: var(--tc-type-body-line); }
  .tc-composer__reason { grid-column: 1 / -1; color: var(--tc-color-text-secondary); font-size: var(--tc-type-meta-size); line-height: var(--tc-type-meta-line); }
  .tc-choice { display: inline-flex; align-items: flex-start; gap: var(--tc-space-2); min-height: var(--tc-size-control-lg); cursor: pointer; }
  /* Скрытое поле держится внутри своего флажка: без этого оно уходит к ближайшему
     позиционированному предку и в прокручиваемой таблице растягивает страницу вбок. */
  .tc-choice, .tc-switch { position: relative; }
  .tc-choice input, .tc-switch input { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
  .tc-choice__control { width: var(--tc-size-icon-md); height: var(--tc-size-icon-md); flex: none; margin-top: var(--tc-space-1); border: var(--tc-border-default) solid var(--tc-color-neutral-600); border-radius: var(--tc-space-1); background: var(--tc-color-bg); }
  .tc-choice--radio .tc-choice__control { border-radius: var(--tc-radius-full); }
  .tc-choice input:checked + .tc-choice__control { background: var(--tc-color-brand); border-color: var(--tc-color-neutral-900); box-shadow: inset 0 0 0 var(--tc-space-1) var(--tc-color-bg); }
  .tc-choice input:focus-visible + .tc-choice__control, .tc-switch input:focus-visible + .tc-switch__track { outline: var(--tc-border-focus) solid var(--tc-color-focus); outline-offset: var(--tc-space-1); }
  .tc-choice input:disabled + .tc-choice__control { background: var(--tc-color-neutral-100); border-color: var(--tc-color-border-disabled); }
  .tc-choice__copy, .tc-switch__copy { display: grid; gap: var(--tc-space-1); font-size: var(--tc-type-body-size); line-height: var(--tc-type-body-line); }
  /* Выбор одного из 2–4 вариантов плитками с рисунком (остаток во вскрытой упаковке). Плитка —
     label с радиокнопкой: стрелки, фокус и форма — как у Radio. Выбранная — заливка бренда с
     тёмной рамкой, как основная кнопка. Четыре варианта в узком месте встают 2 × 2, совсем
     в узком — столбцом: рисунок слева, подпись справа. */
  .tc-choice-tiles { container-type: inline-size; display: flex; flex-wrap: wrap; gap: var(--tc-space-2); }
  .tc-choice-tile { position: relative; flex: 1 1 0; min-width: 0; min-height: calc(var(--tc-size-control-lg) + var(--tc-space-5)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--tc-space-1); padding: var(--tc-space-2); border: var(--tc-border-default) solid var(--tc-color-border); border-radius: var(--tc-radius-control); background: var(--tc-color-bg); color: var(--tc-color-text-secondary); font-size: var(--tc-type-control-size); line-height: var(--tc-type-control-line); font-weight: var(--tc-type-control-weight); text-align: center; overflow-wrap: break-word; cursor: pointer; transition: background-color var(--tc-motion-fast) var(--tc-motion-easing), border-color var(--tc-motion-fast) var(--tc-motion-easing); }
  .tc-choice-tile input { position: absolute; inset: 0; margin: 0; opacity: 0; pointer-events: none; }
  .tc-choice-tile__visual { display: flex; align-items: center; justify-content: center; }
  .tc-choice-tile__label { min-width: 0; }
  .tc-choice-tile:has(input:checked) { background: var(--tc-color-brand); border-color: var(--tc-color-neutral-900); color: var(--tc-color-neutral-900); }
  .tc-choice-tile:has(input:focus-visible) { outline: var(--tc-border-focus) solid var(--tc-color-focus); outline-offset: var(--tc-border-focus); }
  .tc-choice-tile:has(input:disabled) { color: var(--tc-color-neutral-600); background: var(--tc-color-neutral-100); border-color: var(--tc-color-border-disabled); cursor: not-allowed; }
  .tc-choice-tile:has(input:checked:disabled) { background: var(--tc-color-brand-yellow-100); border-color: var(--tc-color-brand-yellow-600); }
  @media (hover: hover) {
    .tc-choice-tile:not(:has(input:checked, input:disabled)):hover { border-color: var(--tc-color-neutral-600); }
  }
  @container (max-width: 23rem) {
    .tc-choice-tiles > .tc-choice-tile:first-child:nth-last-child(4), .tc-choice-tiles > .tc-choice-tile:first-child:nth-last-child(4) ~ .tc-choice-tile { flex-basis: calc(50% - var(--tc-space-2)); }
  }
  @container (max-width: 15rem) {
    .tc-choice-tile { flex-basis: 100%; flex-direction: row; justify-content: flex-start; gap: var(--tc-space-3); min-height: var(--tc-size-control-lg); padding-inline: var(--tc-space-3); text-align: start; }
  }
  /* Уровень заполнения: контур и заливка цветом текста (на выбранной плитке — тёмные).
     Шаги 0, 25, 50, 75 и 100 %. Контур — толщина линии значков, 1,75 px: рисунок читается
     как значок и стоит рядом со значками. */
  .tc-fill-level { --tc-fill-level: 0%; position: relative; flex: none; display: inline-block; width: calc(var(--tc-size-icon-lg) * 0.75); height: var(--tc-size-icon-lg); border: 1.75px solid currentColor; border-radius: var(--tc-space-1); overflow: hidden; }
  .tc-fill-level::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; height: var(--tc-fill-level); background: currentColor; }
  .tc-fill-level[data-level="25"] { --tc-fill-level: 25%; }
  .tc-fill-level[data-level="50"] { --tc-fill-level: 50%; }
  .tc-fill-level[data-level="75"] { --tc-fill-level: 75%; }
  .tc-fill-level[data-level="100"] { --tc-fill-level: 100%; }
  .tc-switch { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--tc-space-4); min-height: var(--tc-size-control-lg); cursor: pointer; }
  .tc-switch__track { width: var(--tc-size-control-lg); height: var(--tc-size-icon-lg); border: var(--tc-border-default) solid var(--tc-color-neutral-600); border-radius: var(--tc-radius-full); background: var(--tc-color-neutral-100); padding: var(--tc-space-1); display: flex; align-items: center; transition: background var(--tc-motion-normal) var(--tc-motion-easing); }
  .tc-switch__track span { width: var(--tc-size-icon-sm); height: var(--tc-size-icon-sm); border-radius: var(--tc-radius-full); background: var(--tc-color-neutral-700); transition: transform var(--tc-motion-normal) var(--tc-motion-easing); }
  .tc-switch input:checked + .tc-switch__track { background: var(--tc-color-brand); border-color: var(--tc-color-neutral-900); }
  .tc-switch input:checked + .tc-switch__track span { transform: translateX(var(--tc-size-icon-md)); background: var(--tc-color-neutral-900); }
  .tc-file-picker { display: flex; align-items: center; gap: var(--tc-space-3); flex-wrap: wrap; }

  .tc-app-rail { width: var(--tc-size-rail); min-height: 100dvh; display: flex; flex-direction: column; align-items: center; background: var(--tc-color-surface-subtle); border-right: var(--tc-border-default) solid var(--tc-color-border); }
  .tc-app-rail__brand { min-height: var(--tc-size-header); display: flex; align-items: center; justify-content: center; }
  .tc-app-rail__items { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--tc-space-1); padding: var(--tc-space-2) 0; }
  .tc-app-rail__footer { border-top: var(--tc-border-default) solid var(--tc-color-border); padding: var(--tc-space-2) 0; }
  .tc-rail-item { width: calc(var(--tc-size-rail) - var(--tc-space-2)); min-height: var(--tc-size-header); padding: var(--tc-space-3) 0 var(--tc-space-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--tc-space-1); border-radius: var(--tc-radius-surface); color: var(--tc-color-icon); text-decoration: none; text-align: center; font-size: var(--tc-type-meta-size); line-height: var(--tc-type-meta-line); position: relative; }
  .tc-rail-item:hover { background: var(--tc-color-surface-hover); }
  .tc-rail-item[aria-current="page"] { background: var(--tc-color-brand-yellow-50); color: var(--tc-color-text); font-weight: var(--tc-type-control-weight); }
  .tc-rail-item__visual { position: relative; display: flex; flex: none; align-items: center; justify-content: center; width: var(--tc-component-rail-glyph-size); height: var(--tc-component-rail-glyph-size); border: var(--tc-border-default) solid transparent; border-radius: var(--tc-radius-full); background: var(--tc-color-neutral-100); color: var(--tc-color-neutral-700); }
  .tc-rail-item[aria-current="page"] .tc-rail-item__visual { background: var(--tc-color-brand); color: var(--tc-color-text); border-color: var(--tc-color-text); }
  .tc-rail-item__initials { font-size: var(--tc-type-control-size); line-height: var(--tc-type-control-line); font-weight: var(--tc-type-title-sm-weight); }
  .tc-rail-item__label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tc-rail-item .tc-icon { color: inherit; }
  .tc-rail-item .tc-badge { position: absolute; inset-block-start: calc(var(--tc-component-rail-badge-offset) * -1 - var(--tc-border-default)); inset-inline-end: calc(var(--tc-component-rail-badge-offset) * -1 - var(--tc-border-default)); }
  .tc-app-sidebar { width: var(--tc-size-sidebar); min-height: 100dvh; position: sticky; inset-block-start: 0; display: flex; flex-direction: column; align-self: start; background: var(--tc-color-surface-subtle); border-inline-end: var(--tc-border-default) solid var(--tc-color-border); }
  .tc-app-sidebar__brand { min-height: var(--tc-size-header); display: flex; align-items: center; padding: var(--tc-space-3) var(--tc-space-4); border-block-end: var(--tc-border-default) solid var(--tc-color-border); }
  .tc-app-sidebar__nav { flex: 1; min-height: 0; overflow-y: auto; padding: var(--tc-space-4) var(--tc-space-2); }
  .tc-app-sidebar__section + .tc-app-sidebar__section { margin-block-start: var(--tc-space-5); }
  .tc-app-sidebar__section h2 { margin: 0 0 var(--tc-space-2); padding-inline: var(--tc-space-3); color: var(--tc-color-text-secondary); font-size: var(--tc-type-meta-size); line-height: var(--tc-type-meta-line); font-weight: var(--tc-type-control-weight); text-transform: uppercase; letter-spacing: var(--tc-type-label-tracking); }
  .tc-app-sidebar__section > div { display: grid; gap: var(--tc-space-1); }
  .tc-app-sidebar__footer { padding: var(--tc-space-3) var(--tc-space-2); border-block-start: var(--tc-border-default) solid var(--tc-color-border); }
  .tc-sidebar-item { min-height: var(--tc-size-control-lg); display: grid; grid-template-columns: var(--tc-size-icon-md) minmax(0, 1fr) auto; align-items: center; gap: var(--tc-space-3); padding: 0 var(--tc-space-3); border-radius: var(--tc-radius-surface); color: var(--tc-color-text); text-decoration: none; font-size: var(--tc-type-control-size); line-height: var(--tc-type-control-line); font-weight: var(--tc-type-control-weight); }
  .tc-sidebar-item:hover { background: var(--tc-color-surface-hover); }
  .tc-sidebar-item[aria-current="page"] { background: var(--tc-color-accent-soft); }
  .tc-sidebar-item > .tc-icon { color: var(--tc-color-icon); }
  .tc-sidebar-item[aria-current="page"] > .tc-icon { color: var(--tc-color-text); }
  .tc-sidebar-item__label { min-width: 0; overflow-wrap: anywhere; }
  .tc-sidebar-item > .tc-badge { justify-self: end; }
  .tc-header-bar { min-height: var(--tc-size-header); display: flex; align-items: center; gap: var(--tc-space-3); padding: 0 var(--tc-space-4); background: var(--tc-color-bg); border-bottom: var(--tc-border-default) solid var(--tc-color-border); }
  .tc-header-bar__leading { flex: none; display: flex; align-items: center; }
  .tc-header-bar__title { min-width: 0; flex: 1; display: grid; }
  .tc-header-bar__title strong { font-size: var(--tc-type-body-size); line-height: var(--tc-type-body-line); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tc-header-bar__title span { color: var(--tc-color-text-secondary); font-size: var(--tc-type-meta-size); line-height: var(--tc-type-meta-line); }
  .tc-header-bar__actions { flex: none; display: flex; align-items: center; gap: var(--tc-space-2); }
  .tc-tabs { display: flex; gap: var(--tc-space-1); border-bottom: var(--tc-border-default) solid var(--tc-color-border); overflow-x: auto; scrollbar-width: none; }
  /* Вкладки не помещаются в ширину: полосы прокрутки нет — её принимали за вторую выбранную
     вкладку. Край, за которым есть ещё вкладки, затухает; края отмечают Tabs в React и
     mountLegacyUI, они же держат выбранную вкладку в поле зрения. */
  .tc-tabs::-webkit-scrollbar { display: none; }
  .tc-tabs[data-overflow-left="true"] { mask-image: linear-gradient(to left, currentColor calc(100% - var(--tc-size-control-lg)), transparent); }
  .tc-tabs[data-overflow-right="true"] { mask-image: linear-gradient(to right, currentColor calc(100% - var(--tc-size-control-lg)), transparent); }
  .tc-tabs[data-overflow-left="true"][data-overflow-right="true"] { mask-image: linear-gradient(to right, transparent, currentColor var(--tc-size-control-lg), currentColor calc(100% - var(--tc-size-control-lg)), transparent); }
  .tc-tabs button { min-height: var(--tc-size-control-lg); flex: none; border: 0; border-bottom: var(--tc-border-selected) solid transparent; padding: 0 var(--tc-space-3); background: transparent; color: var(--tc-color-text-secondary); font-size: var(--tc-type-control-size); line-height: var(--tc-type-control-line); font-weight: var(--tc-type-control-weight); cursor: pointer; }
  .tc-tabs button[aria-selected="true"] { color: var(--tc-color-text); border-bottom-color: var(--tc-color-brand); }
  .tc-filter-chip { min-height: var(--tc-size-control-sm); max-width: 100%; display: inline-flex; align-items: center; gap: var(--tc-space-2); flex: none; border: var(--tc-border-default) solid var(--tc-color-border); border-radius: var(--tc-radius-full); padding: 0 var(--tc-space-3); background: var(--tc-color-bg); color: var(--tc-color-text-secondary); font-size: var(--tc-type-control-size); line-height: var(--tc-type-control-line); font-weight: var(--tc-type-control-weight); cursor: pointer; }
  .tc-filter-chip[data-has-counter="true"], .tc-filter-chip:has(> .tc-badge) { padding-block: calc(var(--tc-component-chip-counter-inset) - var(--tc-border-default)); padding-inline-end: calc(var(--tc-component-chip-counter-inset) - var(--tc-border-default)); }
  .tc-filter-chip__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tc-filter-chip[data-selected="true"] { color: var(--tc-color-text); background: var(--tc-color-brand-yellow-100); border-color: var(--tc-color-brand-yellow-600); }
  .tc-filter-chip:disabled { color: var(--tc-color-neutral-600); background: var(--tc-color-neutral-100); border-color: var(--tc-color-border-disabled); }
  .tc-filter-toolbar { display: flex; align-items: end; gap: var(--tc-space-2); flex-wrap: wrap; }
  .tc-filter-toolbar__search { min-width: min(100%, var(--tc-size-sidebar)); flex: 1; }
  .tc-filter-toolbar__filters { min-width: 0; display: flex; align-items: end; gap: var(--tc-space-2); flex-wrap: wrap; }
  .tc-filter-toolbar__actions { margin-inline-start: auto; display: flex; align-items: end; gap: var(--tc-space-2); flex-wrap: wrap; }
  .tc-filter-toolbar__mobile { display: none; }
  .tc-bulk-action-bar { min-height: var(--tc-size-header); display: flex; align-items: center; justify-content: space-between; gap: var(--tc-space-3); padding: var(--tc-space-2) var(--tc-space-4); border: var(--tc-border-default) solid var(--tc-color-accent-line); border-radius: var(--tc-radius-surface); background: var(--tc-color-accent-soft); }
  .tc-bulk-action-bar__selection { min-width: 0; display: grid; gap: var(--tc-space-1); }
  .tc-bulk-action-bar__selection span { color: var(--tc-color-text-secondary); font-size: var(--tc-type-meta-size); line-height: var(--tc-type-meta-line); }
  .tc-bulk-action-bar__actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--tc-space-2); flex-wrap: wrap; }
  .tc-mobile-menu { position: relative; }
  .tc-mobile-menu summary { list-style: none; }
  .tc-mobile-menu summary::-webkit-details-marker { display: none; }
  .tc-mobile-menu nav { position: absolute; inset-inline-end: 0; min-width: var(--tc-size-chat-list); margin-top: var(--tc-space-2); padding: var(--tc-space-2); border: var(--tc-border-default) solid var(--tc-color-border); border-radius: var(--tc-radius-surface); background: var(--tc-color-bg); box-shadow: var(--tc-elevation-2); }
  .tc-pagination { display: flex; gap: var(--tc-space-1); flex-wrap: wrap; }
  .tc-pagination__item { min-width: var(--tc-size-control-md); border: var(--tc-border-default) solid var(--tc-color-border); border-radius: var(--tc-radius-control); background: var(--tc-color-bg); color: var(--tc-color-text); cursor: pointer; }
  .tc-pagination__item[aria-current="page"] { background: var(--tc-color-brand); border-color: var(--tc-color-neutral-900); font-weight: var(--tc-type-control-weight); }

  .tc-avatar { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--tc-radius-full); overflow: visible; color: var(--tc-color-neutral-700); background: var(--tc-color-neutral-200); font-size: var(--tc-type-control-size); line-height: var(--tc-type-control-line); font-weight: var(--tc-type-control-weight); }
  .tc-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
  .tc-avatar--sm { width: var(--tc-size-control-sm); height: var(--tc-size-control-sm); }
  .tc-avatar--md { width: var(--tc-size-avatar-desktop); height: var(--tc-size-avatar-desktop); }
  .tc-avatar--lg { width: var(--tc-size-control-lg); height: var(--tc-size-control-lg); }
  .tc-avatar__status { --tc-status-inset: calc((100% - 100% * cos(45deg) - var(--tc-component-avatar-status-size)) / 2); position: absolute; inset-inline-end: var(--tc-status-inset); inset-block-end: var(--tc-status-inset); width: var(--tc-component-avatar-status-size); height: var(--tc-component-avatar-status-size); border: var(--tc-component-avatar-status-ring) solid var(--tc-color-bg); border-radius: var(--tc-radius-full); }
  .tc-avatar__status--online { background: var(--tc-color-success-base); }
  .tc-avatar__status--offline { background: var(--tc-color-neutral-500); }
  .tc-badge { box-sizing: border-box; inline-size: max-content; min-inline-size: var(--tc-component-badge-size); block-size: var(--tc-component-badge-size); max-inline-size: none; padding: 0 var(--tc-component-badge-padding-inline); display: inline-flex; flex: none; align-items: center; justify-content: center; align-self: center; border-radius: var(--tc-radius-full); font-size: var(--tc-type-meta-size); line-height: 1; font-weight: var(--tc-type-control-weight); font-variant-numeric: tabular-nums; letter-spacing: normal; text-align: center; white-space: nowrap; overflow-wrap: normal; word-break: normal; vertical-align: middle; }
  .tc-badge--sm { min-inline-size: var(--tc-component-badge-compact-size); block-size: var(--tc-component-badge-compact-size); }
  .tc-badge--brand { color: var(--tc-color-text); background: var(--tc-color-brand); }
  .tc-badge--neutral { color: var(--tc-color-neutral-0); background: var(--tc-color-neutral-700); }
  .tc-badge--muted { color: var(--tc-component-badge-muted-text); background: var(--tc-component-badge-muted-background); }
  .tc-badge--danger { color: var(--tc-color-neutral-0); background: var(--tc-color-danger-base); }
  .tc-status { display: inline-flex; align-items: center; gap: var(--tc-space-2); color: var(--tc-color-text-secondary); font-size: var(--tc-type-control-size); line-height: var(--tc-type-control-line); }
  .tc-status__dot { width: var(--tc-space-2); height: var(--tc-space-2); border-radius: var(--tc-radius-full); background: var(--tc-color-neutral-500); }
  .tc-status--success .tc-status__dot { background: var(--tc-color-success-base); }
  .tc-status--warning .tc-status__dot { background: var(--tc-color-warning-base); }
  .tc-status--danger .tc-status__dot { background: var(--tc-color-danger-base); }
  .tc-status--info .tc-status__dot { background: var(--tc-color-info-base); }
  .tc-tag { min-height: var(--tc-size-control-sm); display: inline-flex; align-items: center; gap: var(--tc-space-1); padding: 0 var(--tc-space-2); border: var(--tc-border-default) solid var(--tc-color-border); border-radius: var(--tc-radius-full); color: var(--tc-color-text-secondary); background: var(--tc-color-surface-subtle); font-size: var(--tc-type-meta-size); line-height: var(--tc-type-meta-line); }
  /* Компактная плашка: там, где их три-четыре в ряд (источники связи у клиента,
     метки на карточке) и обычная высота съедает строку. */
  .tc-tag--sm { min-height: var(--tc-component-tag-compact-height); padding-inline: var(--tc-space-1); }
  /* Плашка всегда в одну строку и не сжимается соседями: в тесной строке уступает
     текст рядом, а не плашка (иначе она переносилась и становилась 34 px вместо 24). */
  .tc-tag { white-space: nowrap; flex-shrink: 0; }
  /* Плашка-фраза, которую читают целиком (сводка по каналу в аналитике True Chat): на узком
     экране переносится, как до v1.2.0, а не выходит за край. Обычная плашка — в одну строку. */
  .tc-tag--wrap { white-space: normal; flex-shrink: 1; }
  .tc-tag--brand { color: var(--tc-color-brand-yellow-800); background: var(--tc-color-brand-yellow-100); border-color: var(--tc-color-brand-yellow-200); }
  .tc-tag--success { color: var(--tc-color-success-base); background: var(--tc-color-success-surface); border-color: var(--tc-color-success-border); }
  .tc-tag--warning { color: var(--tc-color-warning-base); background: var(--tc-color-warning-surface); border-color: var(--tc-color-warning-border); }
  .tc-tag--danger { color: var(--tc-color-danger-base); background: var(--tc-color-danger-surface); border-color: var(--tc-color-danger-border); }
  .tc-tag--info { color: var(--tc-color-info-base); background: var(--tc-color-info-surface); border-color: var(--tc-color-info-border); }
  .tc-list-row { width: 100%; min-height: var(--tc-size-header); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: repeat(2, minmax(var(--tc-component-list-row-line-height), auto)); grid-template-areas: "leading content meta" "leading content trailing"; column-gap: var(--tc-space-3); row-gap: 0; align-items: center; padding: var(--tc-component-list-row-padding-block) var(--tc-component-list-row-padding-inline); border: 0; box-shadow: inset 0 calc(var(--tc-border-default) * -1) 0 var(--tc-color-border); border-inline-start: var(--tc-border-selected) solid transparent; color: var(--tc-color-text); background: var(--tc-color-bg); text-align: start; }
  .tc-list-row:not(:has(> .tc-list-row__leading)) { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "content meta" "content trailing"; }
  .tc-list-row__leading { grid-area: leading; display: flex; align-items: center; }
  /* Перенос вместо многоточия: строки, где название нужно прочитать целиком
     (товар, позиция заказа). Строка растёт в высоту, время и хвост прижаты к
     первой строке названия, слово не рвётся посередине без нужды. */
  .tc-list-row--wrap { align-items: start; }
  .tc-list-row--wrap .tc-list-row__title,
  .tc-list-row--wrap .tc-list-row__title > span,
  .tc-list-row--wrap .tc-list-row__description { overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: break-word; }
  .tc-list-row--wrap .tc-list-row__title { flex-wrap: wrap; }
  .tc-list-row--wrap .tc-list-row__meta, .tc-list-row--wrap .tc-list-row__trailing { align-self: start; }
  /* Без метки хвост встаёт на её место — к первой строке названия, а не под неё. */
  .tc-list-row--wrap:not(:has(> .tc-list-row__meta)) .tc-list-row__trailing { grid-row: 1; }
  /* Строка-ссылка выглядит как строка, а не как подчёркнутый текст. */
  a.tc-list-row { text-decoration: none; }
  .tc-list-row--interactive { cursor: pointer; }
  .tc-list-row--interactive:hover { background: var(--tc-color-surface-subtle); }
  /* Название — ссылка на всю строку, когда в строке свои элементы управления (флажок
     выбора) и сама строка ссылкой быть не может: слой ::after ссылки накрывает строку,
     элементы управления лежат над ним. */
  .tc-list-row:has(.tc-list-row__link) { position: relative; cursor: pointer; }
  .tc-list-row:has(.tc-list-row__link):hover { background: var(--tc-color-surface-subtle); }
  .tc-list-row__link { color: inherit; text-decoration: none; }
  .tc-list-row__link::after { content: ""; position: absolute; inset: 0; }
  .tc-list-row:has(.tc-list-row__link) :is(a[href], button, label, select, textarea, summary, .tc-choice, .tc-switch, .tc-input-shell, .tc-select-shell):not(.tc-list-row__link) { position: relative; z-index: 1; }
  .tc-list-row[data-selected="true"] { background: var(--tc-color-brand-yellow-50); border-inline-start-color: var(--tc-color-brand); }
  .tc-list-row[data-unread="true"] .tc-list-row__title { font-weight: var(--tc-type-title-sm-weight); }
  /* Колонка задана явно: у неявной колонки auto минимум — по содержимому, и одно слипшееся
     слово (название или артикул из чужой системы) растягивало строку шире её места в сетке —
     страница уезжала вбок и на телефоне, и на 1440. minmax(0, 1fr) держит колонку в границах
     строки, перенос остаётся тот же. Нашлось аудитом фронтенда «Заказника» 22.09.2026. */
  .tc-list-row__content { grid-area: content; align-self: stretch; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: subgrid; align-items: center; }
  .tc-list-row__title { display: flex; align-items: center; gap: var(--tc-space-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--tc-type-body-size); line-height: var(--tc-type-body-line); font-weight: var(--tc-type-control-weight); }
  .tc-list-row__title:only-child { grid-row: 1 / -1; }
  .tc-list-row__title > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tc-list-row__description { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tc-color-text-secondary); font-size: var(--tc-type-control-size); line-height: var(--tc-type-control-line); }
  .tc-list-row__meta { grid-area: meta; justify-self: end; align-self: center; color: var(--tc-color-text-secondary); font-size: var(--tc-type-meta-size); line-height: var(--tc-type-meta-line); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .tc-list-row__trailing { grid-area: trailing; justify-self: end; display: flex; align-items: center; justify-content: flex-end; gap: var(--tc-component-list-row-metadata-gap); }
  /* Подпись слева, значение справа; значению — сколько ему нужно. Подпись не уже своего
     самого длинного слова: длинное значение переносится, а не наезжает на подпись. Пока
     значение помещается, раскладка та же, что раньше. */
  .tc-key-value { display: grid; grid-template-columns: minmax(min-content, 1fr) auto; gap: var(--tc-space-3); padding: var(--tc-space-2) 0; border-bottom: var(--tc-border-default) solid var(--tc-color-border); }
  .tc-key-value dt { color: var(--tc-color-text-secondary); }
  .tc-key-value dd { min-width: 0; margin: 0; color: var(--tc-color-text); text-align: end; overflow-wrap: anywhere; }
  .tc-metric { min-width: 0; }
  .tc-metric__value { color: var(--tc-color-text); font-size: var(--tc-type-metric-size); line-height: var(--tc-type-metric-line); font-weight: var(--tc-type-metric-weight); font-variant-numeric: tabular-nums; }
  .tc-metric__label { color: var(--tc-color-text-secondary); font-size: var(--tc-type-control-size); line-height: var(--tc-type-control-line); }
  .tc-metric__detail { color: var(--tc-color-text-secondary); font-size: var(--tc-type-meta-size); line-height: var(--tc-type-meta-line); }
  .tc-metric--success .tc-metric__value { color: var(--tc-color-success-base); }
  .tc-metric--warning .tc-metric__value { color: var(--tc-color-warning-base); }
  .tc-metric--danger .tc-metric__value { color: var(--tc-color-danger-base); }
  .tc-metric--info .tc-metric__value { color: var(--tc-color-info-base); }
  .tc-table-scroll { width: 100%; overflow-x: auto; }
  .tc-table { width: 100%; border-collapse: collapse; color: var(--tc-color-text); background: var(--tc-color-bg); font-size: var(--tc-type-control-size); line-height: var(--tc-type-control-line); }
  .tc-table th { padding: var(--tc-space-2) var(--tc-space-3); border-bottom: var(--tc-border-default) solid var(--tc-color-border); color: var(--tc-color-text-secondary); font-size: var(--tc-type-meta-size); line-height: var(--tc-type-meta-line); font-weight: var(--tc-type-control-weight); text-align: start; white-space: nowrap; }
  .tc-table td { padding: var(--tc-space-3); border-bottom: var(--tc-border-default) solid var(--tc-color-border); vertical-align: top; }
  .tc-table__number { text-align: end !important; }
  .tc-editable-grid-scroll { width: 100%; overflow: auto; overscroll-behavior-inline: contain; border: var(--tc-border-default) solid var(--tc-color-border); border-radius: var(--tc-radius-overlay); background: var(--tc-color-bg); }
  .tc-editable-grid { width: 100%; min-width: max-content; border-collapse: separate; border-spacing: 0; color: var(--tc-color-text); background: var(--tc-color-bg); font-size: var(--tc-type-control-size); line-height: var(--tc-type-control-line); }
  .tc-editable-grid th, .tc-editable-grid td { min-width: var(--tc-component-editable-grid-column-min-width); padding: var(--tc-space-3); border-block-end: var(--tc-border-default) solid var(--tc-color-border); border-inline-end: var(--tc-border-default) solid var(--tc-color-border); vertical-align: top; text-align: start; }
  .tc-editable-grid thead th { position: sticky; inset-block-start: 0; z-index: var(--tc-z-index-sticky); color: var(--tc-color-text-secondary); background: var(--tc-color-surface-subtle); font-size: var(--tc-type-meta-size); line-height: var(--tc-type-meta-line); font-weight: var(--tc-type-control-weight); }
  .tc-editable-grid tr:last-child > * { border-block-end: 0; }
  .tc-editable-grid tr > *:last-child { border-inline-end: 0; }
  .tc-editable-grid .tc-editable-grid__row-header { min-width: var(--tc-component-editable-grid-row-header-width); max-width: var(--tc-component-editable-grid-row-header-width); position: sticky; inset-inline-start: 0; z-index: var(--tc-z-index-sticky); background: var(--tc-color-bg); }
  .tc-editable-grid thead .tc-editable-grid__row-header { z-index: var(--tc-z-index-floating); background: var(--tc-color-surface-subtle); }
  .tc-editable-grid__entity { display: flex; align-items: flex-start; gap: var(--tc-space-2); }
  .tc-editable-grid__entity > span { min-width: 0; display: grid; gap: var(--tc-space-1); }
  .tc-editable-grid__entity small { color: var(--tc-color-text-secondary); font-size: var(--tc-type-meta-size); line-height: var(--tc-type-meta-line); font-weight: var(--tc-type-meta-weight); }
  .tc-editable-grid__cell { display: flex; align-items: start; gap: var(--tc-space-2); }
  .tc-editable-grid__cell > .tc-field { min-width: calc(var(--tc-size-control-lg) * 3); flex: 1; }
  .tc-editable-grid .tc-number-field { max-width: none; }
  .tc-card { border: var(--tc-border-default) solid var(--tc-color-border); border-radius: var(--tc-radius-overlay); background: var(--tc-color-bg); box-shadow: var(--tc-elevation-0); }
  /* Плотный шаг карточки: списки, где карточек подряд много (история визитов). */
  .tc-card--sm { padding: var(--tc-component-card-padding-sm); }
  .tc-card--md { padding: var(--tc-space-4); }
  .tc-card--lg { padding: var(--tc-space-5); }
  /* Карточка, в которой ждёт невыполненное требование (не назначен поставщик): фон и рамка
     тона danger, как у метки требования. Требование выполнено — карточка обычная. */
  .tc-card--danger { border-color: var(--tc-color-danger-border); background: var(--tc-color-danger-surface); }
  /* Действия и плашка в шапке карточки уходят под заголовок, когда рядом им нет места. */
  .tc-card__header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--tc-space-3); margin-bottom: var(--tc-space-4); }
  /* Заголовок карточки выглядит одинаково на любом уровне: уровень (h2–h6) задаёт место в
     структуре страницы, а не размер. */
  /* Перенос строки флекса мерит заголовок по ширине в одну строку: длинный заголовок уходил
     целиком под значок. Заголовок не шире строки, а после значка — не шире строки без значка:
     он остаётся рядом со значком и переносится по словам. Плашка и действия справа уходят под
     заголовок, только когда им тесно (v1.2.0); короткому заголовку соседи не мешают. */
  .tc-card__header > :is(h2, h3, h4, h5, h6) { max-width: 100%; }
  .tc-card__header > .tc-icon--sm:first-child + :is(h2, h3, h4, h5, h6) { max-width: calc(100% - var(--tc-size-icon-sm) - var(--tc-space-3)); }
  .tc-card__header > .tc-icon--md:first-child + :is(h2, h3, h4, h5, h6) { max-width: calc(100% - var(--tc-size-icon-md) - var(--tc-space-3)); }
  .tc-card__header > .tc-icon--lg:first-child + :is(h2, h3, h4, h5, h6) { max-width: calc(100% - var(--tc-size-icon-lg) - var(--tc-space-3)); }
  .tc-card__header > :is(h2, h3, h4, h5, h6) { margin: 0; font-size: var(--tc-type-title-sm-size); line-height: var(--tc-type-title-sm-line); font-weight: var(--tc-type-title-sm-weight); }
  .tc-empty-state { min-height: calc(var(--tc-size-header) * 3); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--tc-space-2); padding: var(--tc-space-5); text-align: center; color: var(--tc-color-text-secondary); }
  .tc-empty-state strong { color: var(--tc-color-text); font-size: var(--tc-type-body-size); line-height: var(--tc-type-body-line); }
  .tc-empty-state p { max-width: var(--tc-size-history); margin: 0; }
  .tc-skeleton { display: grid; gap: var(--tc-space-2); }
  .tc-skeleton span { display: block; height: var(--tc-size-icon-sm); border-radius: var(--tc-radius-control); background: var(--tc-color-neutral-100); animation: tc-skeleton-pulse var(--tc-motion-skeleton) var(--tc-motion-easing) infinite alternate; }
  .tc-skeleton span:last-child { width: var(--tc-size-message-max-desktop); }
  @keyframes tc-skeleton-pulse { from { opacity: .56; } to { opacity: 1; } }

  .tc-tooltip { position: relative; display: inline-flex; }
  .tc-tooltip__content { position: fixed; z-index: var(--tc-z-index-tooltip); inset: auto; margin: 0; border: 0; width: max-content; max-width: var(--tc-size-history); padding: var(--tc-space-2) var(--tc-space-3); border-radius: var(--tc-radius-control); color: var(--tc-color-neutral-0); background: var(--tc-color-neutral-900); box-shadow: var(--tc-elevation-2); font-size: var(--tc-type-meta-size); line-height: var(--tc-type-meta-line); overflow-wrap: anywhere; }
  .tc-tooltip__content::after { content: ""; position: absolute; inset: calc(var(--tc-space-2) * -1); }
  .tc-tooltip__content[hidden] { display: none; }
  .tc-disclosure { position: relative; display: inline-block; }
  .tc-disclosure > summary { min-height: var(--tc-size-control-md); display: inline-flex; align-items: center; gap: var(--tc-space-2); padding: 0 var(--tc-space-3); border: var(--tc-border-default) solid var(--tc-color-border); border-radius: var(--tc-radius-control); background: var(--tc-color-bg); color: var(--tc-color-text); cursor: pointer; list-style: none; font-size: var(--tc-type-control-size); line-height: var(--tc-type-control-line); font-weight: var(--tc-type-control-weight); }
  .tc-disclosure > summary::-webkit-details-marker { display: none; }
  .tc-disclosure__content { position: absolute; z-index: var(--tc-z-index-floating); inset-block-start: calc(100% + var(--tc-space-2)); inset-inline-start: 0; min-width: var(--tc-size-chat-list); padding: var(--tc-space-2); border: var(--tc-border-default) solid var(--tc-color-border); border-radius: var(--tc-radius-surface); color: var(--tc-color-text); background: var(--tc-color-bg); box-shadow: var(--tc-elevation-2); }
  .tc-disclosure__content { display: grid; gap: var(--tc-space-1); }
  .tc-disclosure__content > .tc-button { width: 100%; justify-content: flex-start; }
  .tc-disclosure > summary .tc-icon { transition: transform var(--tc-motion-fast) var(--tc-motion-easing); }
  .tc-disclosure[open] > summary .tc-icon { transform: rotate(180deg); }
  .tc-disclosure[open] .tc-disclosure__content { animation: tc-dropdown-enter var(--tc-motion-fast) var(--tc-motion-easing); }
  @keyframes tc-dropdown-enter { from { opacity: 0; transform: translateY(calc(var(--tc-space-1) * -1)); } to { opacity: 1; transform: translateY(0); } }
  @media (prefers-reduced-motion: reduce) { .tc-disclosure[open] .tc-disclosure__content { animation: none; } .tc-disclosure > summary .tc-icon { transition: none; } }
  .tc-disclosure--end .tc-disclosure__content { inset-inline-start: auto; inset-inline-end: 0; }
  .tc-disclosure .tc-disclosure__content--top-layer { position: fixed; inset: auto; margin: 0; overflow-y: auto; overscroll-behavior: contain; }
  .tc-disclosure__content--top-layer:not(:popover-open) { display: none; }
  .tc-dialog { width: min(calc(var(--tc-size-history) * 2), calc(100% - var(--tc-space-6))); max-height: calc(100dvh - var(--tc-space-6)); padding: 0; border: var(--tc-border-default) solid var(--tc-color-border); border-radius: var(--tc-radius-overlay); color: var(--tc-color-text); background: var(--tc-color-bg); box-shadow: var(--tc-elevation-3); }
  .tc-modal { margin: auto; }
  /* Колонка, а не сетка: Safari 26 (системный WebKit) делает окно-сетку высотой в его max-height —
     окно без тела отдавало всю лишнюю высоту кнопкам. Тело забирает место и прокручивается. */
  .tc-dialog[open] { display: flex; flex-direction: column; overflow: hidden; }
  .tc-dialog__header, .tc-dialog__actions { flex: none; }
  .tc-dialog__header > div { min-width: 0; overflow-wrap: anywhere; }
  .tc-dialog__header > .tc-icon-button { flex: none; }
  .tc-dialog::backdrop { background: var(--tc-color-overlay-backdrop); }
  .tc-dialog__header { min-height: var(--tc-size-header); display: grid; grid-template-columns: minmax(0, 1fr) var(--tc-component-dialog-close-size); align-items: start; gap: var(--tc-component-dialog-close-gap); padding: calc(var(--tc-component-dialog-close-inset) - var(--tc-border-default)) calc(var(--tc-component-dialog-close-inset) - var(--tc-border-default)) var(--tc-space-3) var(--tc-space-4); border-bottom: var(--tc-border-default) solid var(--tc-color-border); }
  .tc-dialog__close { width: var(--tc-component-dialog-close-size); height: var(--tc-component-dialog-close-size); border-radius: var(--tc-component-dialog-close-radius); }
  .tc-dialog__header { padding-inline-start: var(--tc-space-4); padding-inline-end: calc(var(--tc-component-dialog-close-inset) - var(--tc-border-default)); }
  .tc-card--equal { display: flex; flex-direction: column; }
  .tc-card__body { min-width: 0; flex: 1; }
  .tc-card__actions { margin-block-start: var(--tc-space-3); display: flex; flex-wrap: wrap; gap: var(--tc-space-2); }
  .tc-number-field { min-width: 0; max-width: calc(var(--tc-size-control-lg) * 4); }
  .tc-number-field input { font-variant-numeric: tabular-nums; text-align: end; }
  .tc-field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--tc-space-3); row-gap: var(--tc-space-2); max-width: calc(var(--tc-size-control-lg) * 8 + var(--tc-space-3)); }
  .tc-field-row > .tc-field { grid-row: span 3; grid-template-rows: subgrid; min-width: 0; max-width: none; }
  .tc-dialog__header h2 { min-height: var(--tc-component-dialog-close-size); display: flex; align-items: center; margin: 0; font-size: var(--tc-type-title-sm-size); line-height: var(--tc-type-title-sm-line); }
  .tc-dialog__header p { margin: var(--tc-space-1) 0 0; color: var(--tc-color-text-secondary); font-size: var(--tc-type-control-size); line-height: var(--tc-type-control-line); }
  .tc-dialog__body { flex: 1 1 auto; min-height: 0; padding: var(--tc-space-4); overflow: auto; }
  .tc-dialog__actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--tc-space-2); padding: var(--tc-space-3) var(--tc-space-4); border-top: var(--tc-border-default) solid var(--tc-color-border); }
  .tc-side-panel { width: var(--tc-size-history); max-width: 100%; height: 100dvh; max-height: 100dvh; margin-inline-end: 0; border-radius: var(--tc-radius-overlay) 0 0 var(--tc-radius-overlay); }
  .tc-bottom-sheet { width: 100%; max-width: 100%; margin-block-end: 0; border-radius: var(--tc-radius-overlay) var(--tc-radius-overlay) 0 0; }
  .tc-bottom-sheet, .tc-side-panel { padding-bottom: env(safe-area-inset-bottom); }
  .tc-toast-region { position: fixed; z-index: var(--tc-z-index-toast); inset-inline: var(--tc-component-toast-region-inset); inset-block-end: calc(max(var(--tc-component-toast-region-inset), env(safe-area-inset-bottom)) + var(--tc-toast-offset, 0)); width: min(calc(100% - var(--tc-component-toast-region-inset) * 2), var(--tc-component-toast-max-width)); margin-inline: auto; display: grid; gap: var(--tc-space-2); pointer-events: none; }
  .tc-toast { display: flex; align-items: center; gap: var(--tc-space-2); width: 100%; padding: var(--tc-space-3) var(--tc-space-4); border: var(--tc-border-default) solid var(--tc-color-border); border-radius: var(--tc-radius-surface); color: var(--tc-color-text); background: var(--tc-color-bg); box-shadow: var(--tc-elevation-2); pointer-events: auto; }
  .tc-toast__content { min-width: 0; flex: 1; overflow-wrap: anywhere; }
  .tc-toast__action { flex: none; }
  .tc-toast > .tc-icon-button { flex: none; }
  .tc-toast--success { border-color: var(--tc-color-success-border); }
  .tc-toast--danger { border-color: var(--tc-color-danger-border); }
  .tc-toast--info { border-color: var(--tc-color-info-border); }
  .tc-inline-alert { display: flex; align-items: flex-start; gap: var(--tc-space-3); padding: var(--tc-space-3) var(--tc-space-4); border: var(--tc-border-default) solid var(--tc-color-info-border); border-radius: var(--tc-radius-surface); color: var(--tc-color-info-base); background: var(--tc-color-info-surface); }
  .tc-inline-alert strong { display: block; margin-bottom: var(--tc-space-1); color: inherit; }
  .tc-inline-alert__actions { margin-top: var(--tc-space-2); }
  .tc-inline-alert--success { color: var(--tc-color-success-base); background: var(--tc-color-success-surface); border-color: var(--tc-color-success-border); }
  .tc-inline-alert--warning { color: var(--tc-color-warning-base); background: var(--tc-color-warning-surface); border-color: var(--tc-color-warning-border); }
  .tc-inline-alert--danger { color: var(--tc-color-danger-base); background: var(--tc-color-danger-surface); border-color: var(--tc-color-danger-border); }
  .tc-notification { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--tc-space-3); padding: var(--tc-space-3); border: var(--tc-border-default) solid var(--tc-color-border); border-radius: var(--tc-radius-surface); color: var(--tc-color-text); background: var(--tc-color-bg); text-decoration: none; }
  .tc-notification[data-unread="true"] { background: var(--tc-color-brand-yellow-50); border-color: var(--tc-color-brand-yellow-200); }
  .tc-notification > span { min-width: 0; display: grid; }
  .tc-notification > span > span, .tc-notification time { color: var(--tc-color-text-secondary); font-size: var(--tc-type-meta-size); line-height: var(--tc-type-meta-line); }
  .tc-spinner { display: inline-flex; }
  .tc-progress { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--tc-space-2); color: var(--tc-color-text); font-size: var(--tc-type-control-size); line-height: var(--tc-type-control-line); }
  .tc-progress > span:first-child { grid-column: 1; grid-row: 1; }
  .tc-progress > .tc-tabular { grid-column: 2; grid-row: 1; }
  .tc-progress progress { grid-column: 1 / -1; grid-row: 2; width: 100%; height: var(--tc-component-progress-track-size); appearance: none; overflow: hidden; border: 0; border-radius: var(--tc-radius-full); background: var(--tc-color-neutral-100); accent-color: var(--tc-color-brand); }
  .tc-progress progress::-webkit-progress-bar { background: var(--tc-color-neutral-100); }
  .tc-progress progress::-webkit-progress-value { border-radius: var(--tc-radius-full); background: var(--tc-color-brand); }
  .tc-progress progress::-moz-progress-bar { border-radius: var(--tc-radius-full); background: var(--tc-color-brand); }
  /* AppShell: page frame only. It never sets font or colour, so protected subtrees keep their own contract. */
  .tc-app-shell { position: relative; min-height: 100dvh; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: stretch; }
  .tc-app-shell:not(:has(> .tc-app-shell__nav)) { grid-template-columns: minmax(0, 1fr); }
  .tc-app-shell__skip { position: fixed; z-index: var(--tc-z-index-tooltip); inset-block-start: var(--tc-space-2); inset-inline-start: var(--tc-space-2); }
  .tc-app-shell__skip:not(:focus):not(:focus-visible) { width: var(--tc-border-default); height: var(--tc-border-default); min-height: 0; padding: 0; margin: calc(var(--tc-border-default) * -1); overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  .tc-app-shell__nav { position: sticky; inset-block-start: 0; z-index: var(--tc-z-index-sticky); height: 100dvh; min-width: 0; display: flex; }
  .tc-app-shell__nav > .tc-app-rail, .tc-app-shell__nav > .tc-app-sidebar { min-height: 0; height: 100%; position: static; }
  .tc-app-shell__backdrop { display: none; }
  .tc-app-shell__body { min-width: 0; min-height: 100dvh; display: flex; flex-direction: column; }
  .tc-app-shell__header { position: sticky; inset-block-start: 0; z-index: var(--tc-z-index-sticky); padding-block-start: env(safe-area-inset-top); background: var(--tc-color-bg); }
  .tc-app-shell__main { flex: 1; min-width: 0; padding-inline: env(safe-area-inset-left) env(safe-area-inset-right); padding-block-end: env(safe-area-inset-bottom); }
  .tc-app-shell__main:focus:not(:focus-visible) { outline: 0; }
  .tc-app-shell__menu-button { display: none; }

  /* ConfirmDialog: a Modal with one question and explicit answers. */
  .tc-confirm-dialog { width: min(var(--tc-component-confirm-dialog-max-width), calc(100% - var(--tc-space-6))); }
  .tc-confirm-dialog .tc-dialog__body { display: grid; gap: var(--tc-space-3); color: var(--tc-color-text); font-size: var(--tc-type-body-size); line-height: var(--tc-type-body-line); }
  .tc-confirm-dialog .tc-dialog__body:empty { display: none; }
  .tc-confirm-dialog .tc-dialog__body:empty + .tc-dialog__actions, .tc-confirm-dialog .tc-dialog__header + .tc-dialog__actions { border-top: 0; }
  .tc-confirm-dialog .tc-dialog__body p { margin: 0; }
  .tc-confirm-dialog .tc-dialog__actions .tc-button { min-width: calc(var(--tc-size-control-lg) * 2); }

  /* SecretField: TextField with reveal, copy and host actions that keep 44 px targets inside a 44 px shell. */
  .tc-secret-field .tc-input-shell { padding-inline-end: 0; }
  .tc-secret-field__actions { flex: none; display: flex; align-items: center; align-self: stretch; }
  .tc-secret-field__action.tc-icon-button { width: var(--tc-size-control-lg); min-height: var(--tc-size-control-lg); margin-block: calc(var(--tc-border-default) * -1); border-radius: 0; background-clip: padding-box; }
  .tc-secret-field__action.tc-icon-button:last-child { border-start-end-radius: var(--tc-radius-control); border-end-end-radius: var(--tc-radius-control); }
  .tc-secret-field__action.tc-icon-button:focus-visible { outline-offset: calc(var(--tc-border-focus) * -1); }
  .tc-secret-field__toggle[aria-pressed="true"] .tc-secret-field__show, .tc-secret-field__toggle:not([aria-pressed="true"]) .tc-secret-field__hide { display: none; }
  .tc-secret-field--mono input { font-family: var(--tc-type-font-family-mono); letter-spacing: normal; }
  .tc-secret-field__status:empty { display: none; }

  /* Combobox: labelled input + listbox (ARIA 1.2), popup or inline, single or multiple. */
  .tc-combobox { position: relative; min-width: 0; }
  .tc-combobox__control { position: relative; }
  .tc-combobox__control .tc-input-shell input { text-overflow: ellipsis; }
  .tc-combobox__chevron { color: var(--tc-color-icon); transition: transform var(--tc-motion-fast) var(--tc-motion-easing); }
  .tc-combobox[data-open="true"] .tc-combobox__chevron { transform: rotate(180deg); }
  .tc-combobox__panel { color: var(--tc-color-text); background: var(--tc-color-bg); }
  .tc-combobox__panel[hidden], .tc-combobox__option[hidden], .tc-combobox__group[hidden] { display: none; }
  .tc-combobox--popup .tc-combobox__panel { position: absolute; z-index: var(--tc-z-index-floating); inset-inline: 0; inset-block-start: calc(100% + var(--tc-space-1)); padding: var(--tc-space-1); border: var(--tc-border-default) solid var(--tc-color-border); border-radius: var(--tc-radius-surface); color: var(--tc-color-text); background: var(--tc-color-bg); box-shadow: var(--tc-elevation-2); }
  /* The listbox itself scrolls: keyboard users move through it with arrows from the input (ARIA combobox popup), so the scroll region stays operable. */
  .tc-combobox--popup .tc-combobox__listbox { max-height: var(--tc-component-combobox-list-max-height); overflow-y: auto; overscroll-behavior: contain; }
  .tc-combobox--inline .tc-combobox__panel { margin-block-start: var(--tc-space-2); }
  .tc-combobox__listbox { display: grid; align-content: start; gap: 0; }
  .tc-combobox__group { display: grid; }
  .tc-combobox__group-label { padding: var(--tc-space-3) var(--tc-space-3) var(--tc-space-1); color: var(--tc-color-text-secondary); font-size: var(--tc-type-meta-size); line-height: var(--tc-type-meta-line); font-weight: var(--tc-type-control-weight); text-transform: uppercase; letter-spacing: var(--tc-type-label-tracking); }
  .tc-combobox__option { min-height: var(--tc-size-control-lg); display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-flow: column; grid-auto-columns: auto; align-items: center; column-gap: var(--tc-component-combobox-option-gap); padding: var(--tc-space-2) var(--tc-space-3); border-radius: var(--tc-radius-control); color: var(--tc-color-text); cursor: pointer; user-select: none; }
  .tc-combobox__option:has(> .tc-combobox__leading) { grid-template-columns: auto minmax(0, 1fr); }
  .tc-combobox__option:hover { background: var(--tc-color-surface-hover); }
  .tc-combobox__option[data-active="true"] { background: var(--tc-color-surface-hover); outline: var(--tc-border-focus) solid var(--tc-color-focus); outline-offset: calc(var(--tc-border-focus) * -1); }
  .tc-combobox__option[aria-selected="true"] { background: var(--tc-color-accent-soft); }
  .tc-combobox__option[aria-selected="true"][data-active="true"] { background: var(--tc-color-accent); }
  .tc-combobox__option[aria-disabled="true"] { color: var(--tc-color-neutral-600); cursor: not-allowed; background: transparent; }
  .tc-combobox__leading { display: flex; align-items: center; gap: var(--tc-space-2); }
  .tc-combobox__text { min-width: 0; display: grid; }
  .tc-combobox__label { min-width: 0; display: flex; align-items: center; gap: var(--tc-space-2); overflow-wrap: anywhere; font-size: var(--tc-type-body-size); line-height: var(--tc-type-body-line); }
  .tc-combobox__description { min-width: 0; overflow-wrap: anywhere; color: var(--tc-color-text-secondary); font-size: var(--tc-type-control-size); line-height: var(--tc-type-control-line); }
  .tc-combobox__check { color: var(--tc-color-text); }
  .tc-combobox__option:not([aria-selected="true"]) .tc-combobox__check { visibility: hidden; }
  .tc-combobox--multiple .tc-combobox__option .tc-combobox__check { visibility: visible; }
  .tc-combobox--multiple .tc-combobox__option:not([aria-selected="true"]) .tc-combobox__check--on, .tc-combobox--multiple .tc-combobox__option[aria-selected="true"] .tc-combobox__check--off { display: none; }
  .tc-combobox:not(.tc-combobox--multiple) .tc-combobox__check--off { display: none; }
  .tc-combobox__status { display: flex; align-items: center; gap: var(--tc-space-2); min-height: var(--tc-size-control-lg); padding: var(--tc-space-2) var(--tc-space-3); color: var(--tc-color-text-secondary); font-size: var(--tc-type-control-size); line-height: var(--tc-type-control-line); }
  .tc-combobox__status:empty { display: none; }

  /* Data visualisation primitives: identity comes from dataViz tokens plus a visible label or pattern. */
  .tc-viz-swatch { display: inline-block; flex: none; width: var(--tc-component-data-viz-swatch-size); height: var(--tc-component-data-viz-swatch-size); border-radius: var(--tc-component-data-viz-swatch-radius); background: var(--tc-viz-fill, var(--tc-color-neutral-300)); }
  .tc-viz-legend { display: flex; flex-wrap: wrap; gap: var(--tc-space-2) var(--tc-space-4); color: var(--tc-color-text-secondary); font-size: var(--tc-type-meta-size); line-height: var(--tc-type-meta-line); }
  .tc-viz-legend > * { display: inline-flex; align-items: center; gap: var(--tc-space-2); min-width: 0; }
  .tc-viz-hatch { background: repeating-linear-gradient(45deg, var(--tc-data-viz-quality-empty-fill), var(--tc-data-viz-quality-empty-fill) var(--tc-component-data-viz-hatch-step), var(--tc-data-viz-quality-empty-stripe) var(--tc-component-data-viz-hatch-step), var(--tc-data-viz-quality-empty-stripe) calc(var(--tc-component-data-viz-hatch-step) * 2)); color: var(--tc-data-viz-quality-empty-on-fill); }
  .tc-viz-swatch.tc-viz-hatch { border: var(--tc-border-default) solid var(--tc-data-viz-quality-empty-border); }
  .tc-viz--quality-good { --tc-viz-fill: var(--tc-data-viz-quality-good-fill); --tc-viz-on-fill: var(--tc-data-viz-quality-good-on-fill); }
  .tc-viz--quality-acceptable { --tc-viz-fill: var(--tc-data-viz-quality-acceptable-fill); --tc-viz-on-fill: var(--tc-data-viz-quality-acceptable-on-fill); }
  .tc-viz--quality-poor { --tc-viz-fill: var(--tc-data-viz-quality-poor-fill); --tc-viz-on-fill: var(--tc-data-viz-quality-poor-on-fill); }
  .tc-viz--quality-critical { --tc-viz-fill: var(--tc-data-viz-quality-critical-fill); --tc-viz-on-fill: var(--tc-data-viz-quality-critical-on-fill); }
  .tc-viz--quality-unanswered { --tc-viz-fill: var(--tc-data-viz-quality-unanswered-fill); --tc-viz-on-fill: var(--tc-data-viz-quality-unanswered-on-fill); }
  .tc-viz--message-type-text { --tc-viz-fill: var(--tc-data-viz-message-type-text-fill); --tc-viz-on-fill: var(--tc-data-viz-message-type-text-on-fill); }
  .tc-viz--message-type-voice { --tc-viz-fill: var(--tc-data-viz-message-type-voice-fill); --tc-viz-on-fill: var(--tc-data-viz-message-type-voice-on-fill); }
  .tc-viz--message-type-photo { --tc-viz-fill: var(--tc-data-viz-message-type-photo-fill); --tc-viz-on-fill: var(--tc-data-viz-message-type-photo-on-fill); }
  .tc-viz--message-type-file { --tc-viz-fill: var(--tc-data-viz-message-type-file-fill); --tc-viz-on-fill: var(--tc-data-viz-message-type-file-on-fill); }
  .tc-viz--message-type-video { --tc-viz-fill: var(--tc-data-viz-message-type-video-fill); --tc-viz-on-fill: var(--tc-data-viz-message-type-video-on-fill); }
  .tc-viz--message-type-location { --tc-viz-fill: var(--tc-data-viz-message-type-location-fill); --tc-viz-on-fill: var(--tc-data-viz-message-type-location-on-fill); }
  .tc-viz--series-1 { --tc-viz-fill: var(--tc-data-viz-series-1-fill); --tc-viz-on-fill: var(--tc-data-viz-series-1-on-fill); }
  .tc-viz--series-2 { --tc-viz-fill: var(--tc-data-viz-series-2-fill); --tc-viz-on-fill: var(--tc-data-viz-series-2-on-fill); }
  .tc-viz--series-3 { --tc-viz-fill: var(--tc-data-viz-series-3-fill); --tc-viz-on-fill: var(--tc-data-viz-series-3-on-fill); }
  .tc-viz--series-4 { --tc-viz-fill: var(--tc-data-viz-series-4-fill); --tc-viz-on-fill: var(--tc-data-viz-series-4-on-fill); }
  .tc-viz--series-5 { --tc-viz-fill: var(--tc-data-viz-series-5-fill); --tc-viz-on-fill: var(--tc-data-viz-series-5-on-fill); }
  .tc-viz--series-6 { --tc-viz-fill: var(--tc-data-viz-series-6-fill); --tc-viz-on-fill: var(--tc-data-viz-series-6-on-fill); }
  .tc-viz-fill { background: var(--tc-viz-fill); color: var(--tc-viz-on-fill); }

}

@layer tc-patterns {
  .tc-chat-row .tc-list-row__trailing { flex-direction: row; }
  .tc-message { position: relative; width: fit-content; max-width: var(--tc-size-message-max-desktop); margin: var(--tc-space-3) 0 0; padding: var(--tc-space-2) var(--tc-space-3); border: var(--tc-border-default) solid var(--tc-color-border); border-radius: var(--tc-radius-surface); color: var(--tc-color-text); background: var(--tc-color-bg); font-size: var(--tc-type-message-size); line-height: var(--tc-type-message-line); }
  .tc-message:first-child { margin-top: 0; }
  .tc-message[data-grouped="true"] { margin-top: var(--tc-space-1); }
  .tc-message--outgoing { margin-inline-start: auto; background: var(--tc-color-brand-yellow-100); border-color: var(--tc-color-brand-yellow-200); }
  .tc-message--system { margin-inline: auto; color: var(--tc-color-text-secondary); background: var(--tc-color-surface-subtle); text-align: center; }
  .tc-message footer { display: flex; justify-content: flex-end; align-items: center; gap: var(--tc-space-1); margin-top: var(--tc-space-1); color: var(--tc-color-text-secondary); font-size: var(--tc-type-meta-size); line-height: var(--tc-type-meta-line); }
  .tc-message__translation { margin-top: var(--tc-space-2); padding-top: var(--tc-space-2); border-top: var(--tc-border-default) solid var(--tc-color-brand-yellow-200); color: var(--tc-color-neutral-700); }
  /* Место под реакцию резервируется внутри пузыря: снизу добавляется ровно та часть
     плашки, которая на него заходит. Поэтому реакция никогда не ложится на текст,
     время, галочки и статус — ни на коротком сообщении, ни на длинном. */
  .tc-message:has(.tc-message__reactions) { padding-block-end: calc(var(--tc-component-reaction-size) - var(--tc-component-reaction-overlap) + var(--tc-space-1)); margin-bottom: var(--tc-component-reaction-overlap); }
  .tc-message__reactions { position: absolute; inset-inline-start: var(--tc-space-3); inset-block-end: calc(var(--tc-component-reaction-overlap) * -1); display: flex; gap: var(--tc-space-1); pointer-events: none; }
  .tc-message__reactions > * { pointer-events: auto; }
  .tc-message-status { display: inline-flex; align-items: center; gap: var(--tc-space-1); color: var(--tc-color-text-secondary); }
  .tc-message-status--error { color: var(--tc-color-danger-base); }
  /* Реакция висит на нижнем крае пузыря, как в мессенджерах, и потому меряется своими
     токенами, а не высотой малого контрола: с контролом она была ростом с кнопку и
     на коротком сообщении закрывала текст, время и галочки. Ширина не задаётся —
     составные эмодзи, флаги и модификаторы кожи не должны обрезаться. */
  .tc-reaction { min-height: var(--tc-component-reaction-size); display: inline-flex; align-items: center; gap: var(--tc-space-1); padding: 0 var(--tc-component-reaction-padding-inline); border: var(--tc-border-default) solid var(--tc-color-border); border-radius: var(--tc-radius-full); color: var(--tc-color-text); background: var(--tc-color-bg); box-shadow: var(--tc-elevation-1); font-size: var(--tc-component-reaction-emoji); line-height: 1; white-space: nowrap; cursor: pointer; }
  .tc-reaction > .tc-tabular { font-size: var(--tc-type-meta-size); line-height: var(--tc-type-meta-line); color: var(--tc-color-text-secondary); }
  .tc-reaction[data-selected="true"] { background: var(--tc-color-brand-yellow-100); border-color: var(--tc-color-brand-yellow-600); }
  .tc-reply-quote { margin: 0 0 var(--tc-space-2); padding-inline-start: var(--tc-space-2); border-inline-start: var(--tc-border-selected) solid var(--tc-color-brand-yellow-600); display: grid; color: var(--tc-color-text-secondary); font-size: var(--tc-type-control-size); line-height: var(--tc-type-control-line); }
  .tc-reply-quote strong { color: var(--tc-color-brand-yellow-800); }
  .tc-divider { display: flex; align-items: center; gap: var(--tc-space-3); margin: var(--tc-space-4) 0; color: var(--tc-color-text-secondary); font-size: var(--tc-type-meta-size); line-height: var(--tc-type-meta-line); }
  .tc-divider::before, .tc-divider::after { content: ""; height: var(--tc-border-default); flex: 1; background: var(--tc-color-border); }
  .tc-unread-divider { color: var(--tc-color-brand-yellow-800); font-weight: var(--tc-type-control-weight); }
  .tc-unread-divider::before, .tc-unread-divider::after { background: var(--tc-color-brand-yellow-500); }
  .tc-pinned-bar { min-height: var(--tc-size-header); display: flex; align-items: center; gap: var(--tc-space-3); padding: var(--tc-space-2) var(--tc-space-3); border-bottom: var(--tc-border-default) solid var(--tc-color-border); background: var(--tc-color-bg); }
  /* Компактная полоса: одна строка без заголовка — над перепиской заголовок «Закреплённое
     сообщение» повторяет то, что и так видно по значку, и съедает высоту ленты. */
  .tc-pinned-bar--compact { min-height: var(--tc-component-pinned-bar-compact-height); padding-block: var(--tc-space-1); }
  .tc-pinned-bar--compact > button:not(.tc-icon-button) { display: flex; align-items: center; gap: var(--tc-space-2); }
  .tc-pinned-bar > button:not(.tc-icon-button) { min-width: 0; flex: 1; display: grid; border: 0; background: transparent; color: var(--tc-color-text); text-align: start; cursor: pointer; }
  .tc-pinned-bar > button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tc-color-text-secondary); font-size: var(--tc-type-control-size); line-height: var(--tc-type-control-line); }
  .tc-waiting { display: inline-flex; align-items: center; gap: var(--tc-space-1); color: var(--tc-color-warning-base); font-size: var(--tc-type-meta-size); line-height: var(--tc-type-meta-line); white-space: nowrap; }
  .tc-waiting--critical { font-weight: var(--tc-type-title-sm-weight); }
  .tc-visit-summary, .tc-metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--tc-space-4); }
  .tc-visit-summary .tc-metric__value { font-size: var(--tc-type-title-sm-size); line-height: var(--tc-type-title-sm-line); }
  .tc-visit-card[data-state="next"] { background: var(--tc-color-brand-yellow-50); border-color: var(--tc-color-brand-yellow-200); }
  .tc-visit-card { --tc-visit-card-gap: var(--tc-space-3); }
  .tc-visit-card.tc-card--sm { --tc-visit-card-gap: var(--tc-space-2); }
  .tc-visit-card > header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--tc-space-2); align-items: center; margin-bottom: var(--tc-visit-card-gap); }
  .tc-visit-card > header > div { display: grid; min-width: 0; }
  .tc-visit-card > header span, .tc-visit-card > header time { color: var(--tc-color-text-secondary); font-size: var(--tc-type-meta-size); line-height: var(--tc-type-meta-line); }
  .tc-visit-card dl { margin: 0; }
  .tc-visit-card > footer { display: flex; gap: var(--tc-space-2); margin-top: var(--tc-visit-card-gap); }
  .tc-analytics-overview { display: grid; gap: var(--tc-space-5); }
  .tc-admin-account { padding: var(--tc-space-4); border: var(--tc-border-default) solid var(--tc-color-border); border-radius: var(--tc-radius-overlay); background: var(--tc-color-bg); }
  .tc-admin-account > header { display: flex; align-items: center; gap: var(--tc-space-3); padding-bottom: var(--tc-space-3); border-bottom: var(--tc-border-default) solid var(--tc-color-border); }
  .tc-admin-account > header > div { display: grid; }
  .tc-admin-account > header span { color: var(--tc-color-text-secondary); font-size: var(--tc-type-meta-size); line-height: var(--tc-type-meta-line); }
  .tc-admin-account dl { margin: 0; }
  .tc-admin-account > footer { display: flex; gap: var(--tc-space-2); margin-top: var(--tc-space-3); }
  .tc-audit-log { display: grid; gap: var(--tc-space-4); }
  .tc-audit-log__filters { display: flex; gap: var(--tc-space-2); flex-wrap: wrap; }
  .tc-audit-log__list { margin: 0; padding: 0; list-style: none; border: var(--tc-border-default) solid var(--tc-color-border); border-radius: var(--tc-radius-overlay); overflow: hidden; background: var(--tc-color-bg); }
  .tc-audit-entry { padding: var(--tc-space-3) var(--tc-space-4); }
  .tc-audit-entry + .tc-audit-entry { border-block-start: var(--tc-border-default) solid var(--tc-color-border); }
  .tc-audit-entry > header { display: grid; gap: var(--tc-space-1); }
  .tc-audit-entry > header > div { color: var(--tc-color-text-secondary); font-size: var(--tc-type-meta-size); line-height: var(--tc-type-meta-line); }
  .tc-audit-entry__changes { margin: var(--tc-space-3) 0 0; display: grid; gap: var(--tc-space-2); }
  .tc-audit-entry__changes > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--tc-space-3); }
  .tc-audit-entry__changes dt { color: var(--tc-color-text-secondary); }
  .tc-audit-entry__changes dd { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--tc-space-2); overflow-wrap: anywhere; }
  .tc-audit-entry__changes dd > span:last-child { font-weight: var(--tc-type-control-weight); }
  .tc-audit-entry__details { margin-block-start: var(--tc-space-3); }
  .tc-audit-entry__details summary { width: fit-content; min-height: var(--tc-size-control-sm); display: flex; align-items: center; color: var(--tc-color-text-secondary); cursor: pointer; font-size: var(--tc-type-control-size); line-height: var(--tc-type-control-line); font-weight: var(--tc-type-control-weight); }
  .tc-audit-entry__details > div { margin-block-start: var(--tc-space-2); padding: var(--tc-space-3); border-radius: var(--tc-radius-control); background: var(--tc-color-surface-subtle); overflow-wrap: anywhere; }
  .tc-import-preview { display: grid; gap: var(--tc-space-4); padding: var(--tc-space-4); border: var(--tc-border-default) solid var(--tc-color-border); border-radius: var(--tc-radius-overlay); background: var(--tc-color-bg); }
  .tc-import-preview > header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--tc-space-3); }
  .tc-import-preview > header > div { min-width: 0; display: grid; gap: var(--tc-space-1); }
  .tc-import-preview h3 { margin: 0; font-size: var(--tc-type-title-sm-size); line-height: var(--tc-type-title-sm-line); font-weight: var(--tc-type-title-sm-weight); }
  .tc-import-preview__requirements { color: var(--tc-color-text-secondary); font-size: var(--tc-type-control-size); line-height: var(--tc-type-control-line); }
  .tc-import-preview__picker { padding: var(--tc-space-3); border: var(--tc-border-default) dashed var(--tc-color-border); border-radius: var(--tc-radius-surface); }
  .tc-import-preview__file { display: flex; align-items: center; gap: var(--tc-space-3); padding: var(--tc-space-3); border-radius: var(--tc-radius-surface); background: var(--tc-color-surface-subtle); }
  .tc-import-preview__file > span { min-width: 0; display: grid; }
  .tc-import-preview__file strong, .tc-import-preview__file small { overflow-wrap: anywhere; }
  .tc-import-preview__file small { color: var(--tc-color-text-secondary); font-size: var(--tc-type-meta-size); line-height: var(--tc-type-meta-line); }
  .tc-import-preview__summary { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--tc-space-3); }
  .tc-import-preview__summary > div { min-width: 0; padding: var(--tc-space-3); border: var(--tc-border-default) solid var(--tc-color-border); border-radius: var(--tc-radius-surface); }
  .tc-import-preview__summary dt { color: var(--tc-color-text-secondary); font-size: var(--tc-type-meta-size); line-height: var(--tc-type-meta-line); }
  .tc-import-preview__summary dd { margin: var(--tc-space-1) 0 0; font-size: var(--tc-type-title-sm-size); line-height: var(--tc-type-title-sm-line); font-weight: var(--tc-type-title-sm-weight); font-variant-numeric: tabular-nums; }
  .tc-import-preview__issues { padding: var(--tc-space-3); border-radius: var(--tc-radius-surface); background: var(--tc-color-surface-subtle); }
  .tc-import-preview__table { overflow-x: auto; }
  .tc-import-preview > footer { display: flex; justify-content: flex-end; gap: var(--tc-space-2); flex-wrap: wrap; padding-block-start: var(--tc-space-3); border-block-start: var(--tc-border-default) solid var(--tc-color-border); }

  @media (max-width: 760px) {
    .tc-app-rail, .tc-app-sidebar { display: none; }
    .tc-avatar--md { width: var(--tc-size-avatar-mobile); height: var(--tc-size-avatar-mobile); }
    .tc-message { max-width: var(--tc-size-message-max-mobile); }
    .tc-visit-summary, .tc-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tc-button.tc-control--sm, .tc-button.tc-control--md, .tc-icon-button.tc-control--sm, .tc-icon-button.tc-control--md, .tc-disclosure > summary { min-height: var(--tc-size-control-lg); }
    /* Поле на касании — та же цель 44 px, что и кнопка: плотный sm/md остаётся на компьютере.
       Компактная плотность (класс tc-touch-compact на <html>, решение владельца для True Chat
       19.09.2026) оставляет на телефоне размеры v1.1.2: это и правила целей ниже не действуют. */
    :where(:root:not(.tc-touch-compact)) .tc-input-shell.tc-control--sm, :where(:root:not(.tc-touch-compact)) .tc-input-shell.tc-control--md, :where(:root:not(.tc-touch-compact)) .tc-select-shell.tc-control--sm, :where(:root:not(.tc-touch-compact)) .tc-select-shell.tc-control--md { min-height: var(--tc-size-control-lg); }
    .tc-icon-button.tc-control--sm, .tc-icon-button.tc-control--md { width: var(--tc-size-control-lg); }
    /* Цели нажатия 44 × 44. У фильтра и переключателя видимая плашка остаётся 32 px: слой
       ::before расширяет нажатие до 44 px, а поля резервируют это место в раскладке, так что
       соседям нечего перекрывать. Стрелка журнала и ссылка-действие — без рамки, они просто выше. */
    :where(:root:not(.tc-touch-compact)) .tc-filter-chip { position: relative; min-width: var(--tc-size-control-lg); margin-block: calc((var(--tc-size-control-lg) - var(--tc-size-control-sm)) / 2); }
    :where(:root:not(.tc-touch-compact)) .tc-segmented { margin-block: calc((var(--tc-size-control-lg) - var(--tc-size-control-sm)) / 2 - var(--tc-space-1)); }
    :where(:root:not(.tc-touch-compact)) .tc-segmented button { position: relative; min-width: var(--tc-size-control-lg); }
    /* Слой отсчитывается от внутреннего края рамки: не меньше чем на рамку наружу, чтобы
       закруглённый край плашки тоже был целью. */
    :where(:root:not(.tc-touch-compact)) .tc-filter-chip::before, :where(:root:not(.tc-touch-compact)) .tc-segmented button::before { content: ""; position: absolute; inset: min(calc(var(--tc-border-default) * -1), calc((100% - var(--tc-size-control-lg)) / 2)); }
    :where(:root:not(.tc-touch-compact)) .tc-audit-entry__details summary { min-height: var(--tc-size-control-lg); min-width: var(--tc-size-control-lg); }
    /* Флажок или переключатель без подписи (выбор строки): вся цель 44 × 44, значок по центру. */
    :where(:root:not(.tc-touch-compact)) .tc-choice:not(:has(> .tc-choice__copy)) { min-width: var(--tc-size-control-lg); justify-content: center; align-items: center; }
    :where(:root:not(.tc-touch-compact)) .tc-choice:not(:has(> .tc-choice__copy)) > .tc-choice__control { margin-top: 0; }
    :where(:root:not(.tc-touch-compact)) .tc-link--action { display: inline-flex; align-items: center; min-height: var(--tc-size-control-lg); min-width: var(--tc-size-control-lg); }
    .tc-modal { width: calc(100% - var(--tc-space-5)); max-width: calc(100% - var(--tc-space-5)); height: fit-content; max-height: calc(100dvh - var(--tc-space-5)); margin: auto; border-radius: var(--tc-radius-overlay); }
    .tc-side-panel { width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0; }
    .tc-bottom-sheet { width: 100%; max-width: 100%; height: auto; max-height: calc(100dvh - var(--tc-space-5)); border-radius: var(--tc-radius-overlay) var(--tc-radius-overlay) 0 0; }
    .tc-toast-region { inset-inline: var(--tc-component-toast-region-inset-mobile); inset-block-end: calc(max(var(--tc-component-toast-region-inset-mobile), env(safe-area-inset-bottom)) + var(--tc-toast-offset, 0)); width: calc(100% - var(--tc-component-toast-region-inset-mobile) * 2); }
    .tc-filter-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
    .tc-filter-toolbar__search { min-width: 0; }
    .tc-filter-toolbar__filters { display: none; }
    .tc-filter-toolbar__mobile { display: inline-flex; }
    .tc-filter-toolbar__actions { grid-column: 1 / -1; margin-inline-start: 0; }
    .tc-bulk-action-bar { align-items: stretch; flex-direction: column; }
    .tc-bulk-action-bar__actions { justify-content: flex-start; }
    .tc-editable-grid th, .tc-editable-grid td { min-width: calc(var(--tc-component-editable-grid-column-min-width) - var(--tc-space-5)); }
    .tc-editable-grid .tc-editable-grid__row-header { min-width: calc(var(--tc-component-editable-grid-row-header-width) - var(--tc-space-6)); max-width: calc(var(--tc-component-editable-grid-row-header-width) - var(--tc-space-6)); }
    .tc-audit-entry__changes > div { grid-template-columns: 1fr; gap: var(--tc-space-1); }
    .tc-import-preview > header { flex-direction: column; }
    .tc-import-preview__summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tc-table-scroll--labelled { overflow-x: visible; }
    .tc-table--labelled, .tc-table--labelled tbody, .tc-table--labelled tr, .tc-table--labelled td { display: block; width: 100%; }
    .tc-table--labelled thead { position: absolute; width: var(--tc-border-default); height: var(--tc-border-default); padding: 0; margin: calc(var(--tc-border-default) * -1); overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
    .tc-table--labelled tr { padding: var(--tc-space-2) 0; border-bottom: var(--tc-border-default) solid var(--tc-color-border); }
    .tc-table--labelled td, .tc-table--labelled td.tc-table__number { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: baseline; gap: var(--tc-space-3); padding: var(--tc-space-2) 0; border: 0; text-align: end !important; }
    .tc-table--labelled .tc-table__value { min-width: 0; overflow-wrap: anywhere; }
    .tc-table--labelled td::before { content: attr(data-label); color: var(--tc-color-text-secondary); font-size: var(--tc-type-meta-size); line-height: var(--tc-type-meta-line); font-weight: var(--tc-type-control-weight); text-align: start; }
    .tc-list-row { min-height: var(--tc-size-header); }
  }
  @media (max-width: 760px) {
    .tc-app-shell { grid-template-columns: minmax(0, 1fr); }
    .tc-app-shell__nav { display: none; }
    .tc-app-shell[data-mobile-nav="drawer"] .tc-app-shell__menu-button { display: inline-flex; }
    .tc-app-shell[data-nav-open="true"] > .tc-app-shell__nav { display: flex; position: fixed; z-index: var(--tc-z-index-overlay); inset-block: 0; inset-inline-start: 0; height: 100dvh; max-width: calc(100% - var(--tc-component-app-shell-drawer-gap)); padding-block-start: env(safe-area-inset-top); padding-inline-start: env(safe-area-inset-left); background: var(--tc-color-surface-subtle); box-shadow: var(--tc-elevation-3); overflow-y: auto; overscroll-behavior: contain; }
    .tc-app-shell[data-nav-open="true"] > .tc-app-shell__nav > .tc-app-rail, .tc-app-shell[data-nav-open="true"] > .tc-app-shell__nav > .tc-app-sidebar { display: flex; max-width: 100%; }
    .tc-app-shell[data-nav-open="true"] > .tc-app-shell__backdrop { display: block; position: fixed; z-index: calc(var(--tc-z-index-overlay) - 1); inset: 0; background: var(--tc-color-overlay-backdrop); }
    .tc-confirm-dialog .tc-dialog__actions { flex-direction: column-reverse; align-items: stretch; }
    .tc-confirm-dialog .tc-dialog__actions .tc-button { width: 100%; }
    .tc-combobox__option { min-height: var(--tc-size-header); }
  }
  @media (prefers-reduced-motion: reduce) { .tc-combobox__chevron { transition: none; } }

}

@layer tc-utilities {
  .tc-visually-hidden {
    position: absolute !important;
    width: var(--tc-border-default) !important;
    height: var(--tc-border-default) !important;
    padding: 0 !important;
    margin: calc(var(--tc-border-default) * -1) !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
}