/* Компоненты, раздел 9 (копия без изменений) */
body { margin: 0; font-family: var(--font-sans); font-size: 14px; line-height: 20px; background: var(--canvas); color: var(--ink); -webkit-font-smoothing: antialiased; font-feature-settings: "tnum" 1; }
.to-icon { display: block; flex: none; }
.to-demo { padding: var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; box-sizing: border-box; }
.to-demo--col { flex-direction: column; align-items: stretch; }
.to-demo--grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: start; }

/* Button */
.to-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--control-md); padding: 0 var(--space-5); border-radius: var(--radius-full); border: 0; font: 500 14px/18px var(--font-sans); cursor: pointer; white-space: nowrap; transition: background-color .15s, box-shadow .15s; }
.to-btn--sm { height: var(--control-sm); padding: 0 var(--space-4); font-size: 13px; }
.to-btn--lg { height: var(--control-lg); padding: 0 var(--space-6); font-size: 15px; }
.to-btn--icon { width: var(--control-md); padding: 0; }
.to-btn--sm.to-btn--icon { width: var(--control-sm); }
.to-btn--lg.to-btn--icon { width: var(--control-lg); }
.to-btn:focus-visible, .to-seg__item:focus-visible, .to-kcard:focus-visible, .to-event:focus-visible, .to-file:focus-visible, .to-side__item:focus-visible, .to-kcol__add:focus-visible, .to-top__bell:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }
.to-btn--primary { background: var(--primary); color: var(--on-primary); }
.to-btn--primary:hover { background: var(--violet); color: var(--on-violet); }
.to-btn--accent { background: var(--violet); color: var(--on-violet); }
.to-btn--accent:hover { background: var(--primary); color: var(--on-primary); }
.to-btn--secondary { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.to-btn--secondary:hover { background: var(--surface-3); }
.to-btn--ghost { background: transparent; color: var(--ink); }
.to-btn--ghost:hover { background: var(--surface-3); }
.to-btn--danger { background: var(--danger); color: var(--on-danger); }
.to-btn:disabled { opacity: .45; cursor: not-allowed; }

/* Field */
.to-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.to-field__label { font: 500 13px/18px var(--font-sans); color: var(--ink); }
.to-field__control { display: flex; align-items: center; gap: var(--space-2); height: var(--control-md); padding: 0 var(--space-4); border-radius: var(--radius-full); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink-muted); }
.to-field__control--sm { height: var(--control-sm); padding: 0 var(--space-3); }
.to-field__control:focus-within { box-shadow: inset 0 0 0 1px var(--violet), var(--focus-ring); }
.to-field__control.is-error { box-shadow: inset 0 0 0 1.5px var(--danger-ink); background: var(--danger-soft); }
.to-field__input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font: 400 14px/20px var(--font-sans); color: var(--ink); padding: 0; }
.to-field__input::placeholder { color: var(--ink-muted); }
.to-field__suffix { font: 600 12px/16px var(--font-sans); letter-spacing: .04em; color: var(--ink-muted); }
.to-field__hint { font: 500 12px/16px var(--font-sans); color: var(--ink-muted); }
.to-field__error { font: 500 12px/16px var(--font-sans); color: var(--danger-ink); }

/* Badge */
.to-badge { display: inline-flex; align-items: center; gap: var(--space-1); height: 24px; padding: 0 10px; border-radius: var(--radius-full); font: 600 11px/14px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.to-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.to-badge--neutral { background: var(--surface-3); color: var(--ink); }
.to-badge--ink { background: var(--primary); color: var(--on-primary); }
.to-badge--violet { background: var(--violet-soft); color: var(--violet-ink); }
.to-badge--lime { background: var(--lime-soft); color: var(--positive-ink); }
.to-badge--teal { background: var(--teal-soft); color: var(--teal-ink); }
.to-badge--amber { background: var(--amber-soft); color: var(--amber-ink); }
.to-badge--danger { background: var(--danger-soft); color: var(--danger-ink); }
.to-badge--violet.is-solid { background: var(--violet); color: var(--on-violet); }
.to-badge--lime.is-solid { background: var(--lime); color: var(--on-lime); }
.to-badge--teal.is-solid { background: var(--teal); color: var(--on-teal); }
.to-badge--amber.is-solid { background: var(--amber); color: var(--on-amber); }
.to-badge--danger.is-solid { background: var(--danger); color: var(--on-danger); }
.to-badge--neutral.is-solid { background: var(--surface-3); color: var(--ink); }

/* Avatar */
.to-ava { display: inline-grid; place-items: center; flex: none; border-radius: var(--radius-full); font: 600 13px/1 var(--font-display); text-transform: uppercase; letter-spacing: .02em; }
.to-ava--xs { width: 24px; height: 24px; font-size: 11px; }
.to-ava--sm { width: 32px; height: 32px; font-size: 12px; }
.to-ava--md { width: 40px; height: 40px; font-size: 14px; }
.to-ava--lg { width: 64px; height: 64px; font-size: 22px; }
.to-ava--neutral { background: var(--surface-3); color: var(--ink); }
.to-ava--violet { background: var(--violet); color: var(--on-violet); }
.to-ava--lime { background: var(--lime); color: var(--on-lime); }
.to-ava--teal { background: var(--teal); color: var(--on-teal); }
.to-ava--ink { background: var(--primary); color: var(--on-primary); }
.to-ava.is-ring { box-shadow: 0 0 0 2px var(--surface); }
.to-stack { display: inline-flex; } .to-stack > * + * { margin-left: -6px; }

/* Segmented */
.to-seg { display: inline-flex; padding: 4px; gap: 2px; border-radius: var(--radius-full); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.to-seg__item { height: 32px; padding: 0 var(--space-4); border: 0; border-radius: var(--radius-full); background: transparent; color: var(--ink); font: 500 13px/18px var(--font-sans); cursor: pointer; white-space: nowrap; }
.to-seg__item:hover { background: var(--surface-3); }
.to-seg__item.is-on { background: var(--primary); color: var(--on-primary); }
.to-seg--sm .to-seg__item { height: 26px; padding: 0 var(--space-3); font-size: 12px; }

/* Delta + StatTile */
.to-delta { display: inline-flex; align-items: center; gap: 2px; font: 600 13px/18px var(--font-sans); }
.to-delta.is-good { color: var(--positive-ink); } .to-delta.is-bad { color: var(--danger-ink); }
.to-stat { background: var(--surface); border-radius: var(--radius-lg); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.to-stat__label { font: 500 13px/18px var(--font-sans); color: var(--ink-muted); }
.to-stat__value { font: 500 36px/40px var(--font-display); text-transform: uppercase; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.to-stat__unit { font: 500 14px/18px var(--font-sans); margin-left: 6px; color: var(--ink-muted); text-transform: none; }
.to-stat__foot { display: flex; align-items: center; gap: var(--space-2); min-height: 18px; }
.to-stat__hint { font: 500 12px/16px var(--font-sans); color: var(--ink-muted); }
.to-stat--violet { background: var(--violet); } .to-stat--violet .to-stat__label, .to-stat--violet .to-stat__value, .to-stat--violet .to-stat__unit, .to-stat--violet .to-stat__hint { color: var(--on-violet); }
.to-stat--violet .to-delta { color: var(--on-violet); }
.to-stat--ink { background: var(--primary); } .to-stat--ink .to-stat__label, .to-stat--ink .to-stat__value, .to-stat--ink .to-stat__unit, .to-stat--ink .to-stat__hint, .to-stat--ink .to-delta { color: var(--on-primary); }

/* Kanban */
.to-kcol { width: var(--kanban-col-w); flex: none; display: flex; flex-direction: column; gap: var(--space-3); }
.to-kcol__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); padding: 0 var(--space-1); }
.to-kcol__title { display: flex; align-items: center; gap: var(--space-2); font: 600 18px/24px var(--font-display); text-transform: uppercase; letter-spacing: .02em; }
.to-kcol__num { font-weight: 300; color: var(--ink-muted); }
.to-kcol__count { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: var(--radius-full); background: var(--surface); font: 600 12px/1 var(--font-sans); letter-spacing: 0; }
.to-kcol__sum { font: 600 13px/18px var(--font-sans); color: var(--ink-muted); white-space: nowrap; }
.to-kcol__body { display: flex; flex-direction: column; gap: var(--space-3); }
.to-kcol__add { display: flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--control-md); border: 1.5px dashed var(--line-strong); border-radius: var(--radius-md); background: transparent; color: var(--ink-muted); font: 500 13px/18px var(--font-sans); cursor: pointer; }
.to-kcard { background: var(--surface); border-radius: var(--radius-md); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); box-shadow: var(--shadow-sm); cursor: grab; outline: none; }
.to-kcard.is-selected { box-shadow: inset 0 0 0 2px var(--violet); }
.to-kcard.is-dragging { box-shadow: var(--shadow-lg); transform: rotate(-2deg); }
.to-kcard__top { display: flex; justify-content: space-between; gap: var(--space-2); }
.to-kcard__company { font: 600 14px/20px var(--font-sans); }
.to-kcard__contact { font: 500 12px/16px var(--font-sans); color: var(--ink-muted); }
.to-kcard__grip { color: var(--ink-muted); }
.to-kcard__amount { font: 500 22px/26px var(--font-display); }
.to-kcard__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.to-kcard__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.to-kcard__days { display: inline-flex; align-items: center; gap: 4px; font: 500 12px/16px var(--font-sans); color: var(--ink-muted); }
.to-kcard__days.is-stale { color: var(--amber-ink); }
.to-board { display: flex; gap: var(--space-4); align-items: flex-start; overflow-x: auto; padding: var(--space-6); }

/* Table */
.to-table { background: var(--surface); border-radius: var(--radius-lg); overflow-x: auto; }
.to-table table { width: 100%; border-collapse: collapse; }
.to-table th { height: 40px; padding: 0 var(--space-4); background: var(--surface-2); font: 600 11px/14px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); white-space: nowrap; }
.to-table td { height: var(--row-h); padding: 0 var(--space-4); border-top: 1px solid var(--line); font: 400 14px/20px var(--font-sans); white-space: nowrap; }
.to-table td.is-num { font-weight: 600; }
.to-table tbody tr:hover td { background: var(--surface-3); }
.to-table tr.is-selected td { background: var(--violet-soft); }
.to-table__check { width: 20px; padding-right: 0 !important; }
.to-check { width: 18px; height: 18px; border-radius: var(--radius-xs); box-shadow: inset 0 0 0 1.5px var(--line-strong); display: grid; place-items: center; }
.to-check.is-on { background: var(--primary); color: var(--on-primary); box-shadow: none; }
.to-cell-main { display: flex; flex-direction: column; } .to-cell-main b { font-weight: 600; } .to-cell-main span { font: 500 12px/16px var(--font-sans); color: var(--ink-muted); }
.to-cell-who { display: inline-flex; align-items: center; gap: var(--space-2); }

/* Sidebar & Topbar */
.to-side { width: var(--sidebar-w); box-sizing: border-box; padding: var(--space-5) var(--space-4); display: flex; flex-direction: column; gap: var(--space-6); background: var(--canvas); min-height: 100%; }
.to-side__brand { display: flex; align-items: center; gap: var(--space-2); }
.to-logo-pill { display: inline-flex; align-items: center; height: 48px; padding: 0 20px; border-radius: var(--radius-full); background: #ffffff; font: 700 18px/1 var(--font-display); color: #000000; }
.to-logo-pill img { height: 20px; display: block; }
.to-side__product { font: 600 18px/24px var(--font-display); text-transform: uppercase; letter-spacing: .02em; }
.to-side__nav { display: flex; flex-direction: column; gap: 2px; }
.to-side__item { display: flex; align-items: center; gap: var(--space-3); height: 44px; padding: 0 var(--space-4); border-radius: var(--radius-full); color: var(--ink); text-decoration: none; font: 500 14px/20px var(--font-sans); outline: none; }
.to-side__item:hover { background: var(--surface-3); }
.to-side__item.is-on { background: var(--primary); color: var(--on-primary); }
.to-side__count { margin-left: auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--radius-full); background: var(--violet); color: var(--on-violet); font: 600 11px/22px var(--font-sans); text-align: center; }
.to-side__user { margin-top: auto; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2); padding-right: var(--space-4); border-radius: var(--radius-full); background: var(--surface); }
.to-side__user > div > b { display: block; font: 600 13px/18px var(--font-sans); } .to-side__user > div > span { font: 500 12px/16px var(--font-sans); color: var(--ink-muted); }
.to-top { display: flex; align-items: center; gap: var(--space-4); height: var(--topbar-h); padding: 0 var(--space-6); flex-wrap: wrap; }
.to-top__title { margin: 0; font: 600 32px/36px var(--font-display); text-transform: uppercase; }
.to-top__search { flex: 1 1 280px; max-width: 520px; display: flex; align-items: center; gap: var(--space-2); height: var(--control-md); padding: 0 var(--space-4); border-radius: var(--radius-full); background: var(--surface); color: var(--ink-muted); }
.to-top__search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font: 400 14px/20px var(--font-sans); color: var(--ink); }
.to-top__search input::placeholder { color: var(--ink-muted); }
.to-top__search:focus-within { box-shadow: var(--focus-ring); }
.to-top__search kbd { font: 600 11px/1 var(--font-sans); padding: 4px 7px; border-radius: 6px; background: var(--surface-2); color: var(--ink-muted); }
.to-top__actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }
.to-top__bell { position: relative; width: var(--control-md); height: var(--control-md); border: 0; border-radius: var(--radius-full); background: var(--surface); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.to-top__dot { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 4px; border-radius: var(--radius-full); background: var(--violet); color: var(--on-violet); font: 600 10px/18px var(--font-sans); box-shadow: 0 0 0 2px var(--canvas); }

/* Progress */
.to-progress { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.to-progress__head { display: flex; justify-content: space-between; font: 500 12px/16px var(--font-sans); color: var(--ink-muted); }
.to-progress__val { color: var(--ink); font-weight: 600; }
.to-progress__track { height: 8px; border-radius: var(--radius-full); background: var(--surface-3); overflow: hidden; }
.to-progress__bar { display: block; height: 100%; border-radius: var(--radius-full); }
.to-progress__bar--violet { background: var(--violet); } .to-progress__bar--lime { background: var(--positive-ink); } .to-progress__bar--teal { background: var(--teal); } .to-progress__bar--amber { background: var(--amber); }

/* Package card */
.to-pack { background: var(--surface); border-radius: var(--radius-xl); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.to-pack__top { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.to-pack__name { margin: 0; font: 600 24px/28px var(--font-display); text-transform: uppercase; }
.to-pack__items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); font: 400 14px/20px var(--font-sans); }
.to-pack__items li { display: flex; gap: var(--space-2); align-items: flex-start; }
.to-pack__items li .to-icon { color: var(--positive-ink); margin-top: 2px; }
.to-pack__price { font: 500 32px/36px var(--font-display); display: flex; align-items: baseline; gap: 6px; }
.to-pack__price span { font: 500 14px/18px var(--font-sans); color: var(--ink-muted); }
.to-pack__stats { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.to-pack__stats dt { font: 500 12px/16px var(--font-sans); color: var(--ink-muted); }
.to-pack__stats dd { margin: 2px 0 0; font: 600 15px/20px var(--font-sans); }

/* Event */
.to-event { border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: 6px; min-width: 0; outline: none; cursor: pointer; }
.to-event--teal { background: var(--teal-soft); } .to-event--violet { background: var(--violet-soft); } .to-event--lime { background: var(--lime-soft); } .to-event--amber { background: var(--amber-soft); }
.to-event__name { font: 600 16px/20px var(--font-display); text-transform: uppercase; letter-spacing: .02em; color: var(--ink); }
.to-event__meta { display: flex; align-items: center; gap: 6px; font: 500 12px/16px var(--font-sans); color: var(--ink); }
.to-event__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; }
.to-event__team { display: inline-flex; } .to-event__team > * + * { margin-left: -6px; }
.to-event.is-compact { padding: 6px 10px; border-radius: var(--radius-sm); gap: 2px; }
.to-event.is-compact .to-event__name { font-size: 13px; line-height: 16px; }

/* File */
.to-file { background: var(--surface); border-radius: var(--radius-lg); padding: var(--space-3); display: flex; flex-direction: column; gap: 6px; min-width: 0; outline: none; cursor: pointer; }
.to-file:hover { background: var(--surface-3); }
.to-file__thumb { height: 112px; border-radius: var(--radius-md); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; margin-bottom: var(--space-1); color: var(--ink); }
.to-file__thumb span { font: 600 12px/14px var(--font-display); letter-spacing: .08em; }
.to-file__thumb--danger { background: var(--danger-soft); } .to-file__thumb--amber { background: var(--amber-soft); } .to-file__thumb--lime { background: var(--lime-soft); } .to-file__thumb--violet { background: var(--violet-soft); } .to-file__thumb--teal { background: var(--teal-soft); } .to-file__thumb--neutral { background: var(--surface-2); }
.to-file__name { font: 600 13px/18px var(--font-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 var(--space-1); }
.to-file__meta { font: 500 12px/16px var(--font-sans); color: var(--ink-muted); padding: 0 var(--space-1); }
.to-file__tags { display: flex; flex-wrap: wrap; gap: 4px; padding: 2px var(--space-1) var(--space-1); }

/* Activity */
.to-act { display: flex; gap: var(--space-3); position: relative; padding-bottom: var(--space-4); }
.to-act::before { content: ""; position: absolute; left: 15px; top: 32px; bottom: 0; width: 2px; background: var(--line); }
.to-act.is-last::before { display: none; }
.to-act__icon { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.to-act__icon--neutral { background: var(--surface-3); color: var(--ink); } .to-act__icon--violet { background: var(--violet-soft); color: var(--violet-ink); } .to-act__icon--teal { background: var(--teal-soft); color: var(--teal-ink); } .to-act__icon--lime { background: var(--lime-soft); color: var(--positive-ink); } .to-act__icon--danger { background: var(--danger-soft); color: var(--danger-ink); }
.to-act__body { min-width: 0; padding-top: 6px; }
.to-act__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); font: 400 14px/20px var(--font-sans); }
.to-act__what b { margin-right: 6px; }
.to-act__head b { font-weight: 600; } .to-act__what span { color: var(--ink-muted); }
.to-act__head time { font: 500 12px/20px var(--font-sans); color: var(--ink-muted); white-space: nowrap; }
.to-act__text { margin: 6px 0 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-2); font: 400 14px/20px var(--font-sans); }

/* Charts */
.to-funnel { display: grid; grid-template-columns: minmax(110px, auto) 1fr auto 48px; gap: 10px var(--space-4); align-items: center; }
.to-funnel__row { display: contents; }
.to-funnel__label { font: 500 13px/18px var(--font-sans); white-space: nowrap; }
.to-funnel__track { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.to-funnel__bar { display: block; height: 24px; border-radius: 0 4px 4px 0; background: var(--chart-1); }
.to-funnel__row:hover .to-funnel__bar { background: var(--violet-ink); }
.to-funnel__count { font: 600 13px/18px var(--font-sans); }
.to-funnel__sum { font: 500 12px/16px var(--font-sans); color: var(--ink-muted); text-align: right; white-space: nowrap; }
.to-funnel__conv { font: 600 12px/16px var(--font-sans); color: var(--ink-muted); text-align: right; }
.to-share { display: flex; flex-direction: column; gap: var(--space-3); }
.to-share__bar { display: flex; gap: 2px; height: 16px; border-radius: 4px; overflow: hidden; }
.to-share__bar i { display: block; min-width: 4px; }
.to-share__legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.to-share__legend li { display: flex; align-items: center; gap: 6px; font: 500 13px/18px var(--font-sans); }
.to-share__legend li i { width: 10px; height: 10px; border-radius: 3px; }
.to-share__legend li b { font-weight: 600; }

/* panels used by previews and screens */
.to-panel { background: var(--surface); border-radius: var(--radius-lg); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.to-panel__title { margin: 0; font: 600 18px/24px var(--font-display); text-transform: uppercase; letter-spacing: .02em; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }