/* TeraSoft components — copied from design-system/components/bundle.css by tools/build.py. Do not edit by hand. */
/* TeraSoft components. Every value comes from tokens.json; class prefix ts-. */

.ts-vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ============ Button ============ */
.ts-btn {
  --_bg: transparent; --_fg: var(--color\.text\.primary); --_bd: transparent;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space\.sm);
  box-sizing: border-box; height: var(--size\.control\.md); padding: 0 var(--space\.5); margin: 0;
  border: var(--border\.width\.control) solid var(--_bd); border-radius: var(--radius\.md);
  background: var(--_bg); color: var(--_fg);
  font-family: var(--font-sans); font-size: 15px; line-height: 20px; font-weight: 700; letter-spacing: 0;
  white-space: nowrap; text-decoration: none; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease;
}
.ts-btn__icon { display: inline-flex; flex: none; }
.ts-btn__icon svg { width: var(--size\.icon\.md); height: var(--size\.icon\.md); }
.ts-btn--sm { height: var(--size\.control\.sm); padding: 0 var(--space\.3); gap: var(--space\.xs); font-size: 13px; line-height: 16px; border-radius: var(--radius\.sm); }
.ts-btn--sm .ts-btn__icon svg { width: var(--size\.icon\.sm); height: var(--size\.icon\.sm); }
.ts-btn--lg { height: var(--size\.control\.lg); padding: 0 var(--space\.6); font-size: 16px; line-height: 24px; }
.ts-btn--lg .ts-btn__icon svg { width: var(--size\.icon\.lg); height: var(--size\.icon\.lg); }
.ts-btn--icon { padding: 0; width: var(--size\.control\.md); }
.ts-btn--icon.ts-btn--sm { width: var(--size\.control\.sm); }
.ts-btn--icon.ts-btn--lg { width: var(--size\.control\.lg); }
.ts-btn--full { display: flex; width: 100%; }

.ts-btn--primary { --_bg: var(--color\.brand\.primary); --_fg: var(--color\.brand\.on-primary); }
.ts-btn--primary:hover:not(:disabled), .ts-btn--primary[data-state="hover"] { --_bg: var(--color\.brand\.primary-hover); }
.ts-btn--primary:active:not(:disabled), .ts-btn--primary[data-state="active"] { --_bg: var(--color\.brand\.primary-active); }

.ts-btn--secondary { --_bg: var(--color\.secondary\.default); --_fg: var(--color\.secondary\.on); }
.ts-btn--secondary:hover:not(:disabled), .ts-btn--secondary[data-state="hover"] { --_bg: var(--color\.secondary\.hover); }
.ts-btn--secondary:active:not(:disabled), .ts-btn--secondary[data-state="active"] { --_bg: var(--color\.secondary\.active); }

.ts-btn--outline { --_bg: var(--color\.bg\.surface); --_bd: var(--color\.border\.default); }
.ts-btn--outline:hover:not(:disabled), .ts-btn--outline[data-state="hover"] { --_bd: var(--color\.border\.control-hover); }
.ts-btn--outline:active:not(:disabled), .ts-btn--outline[data-state="active"] { --_bg: var(--color\.bg\.muted); --_bd: var(--color\.border\.control-hover); }

.ts-btn--ghost:hover:not(:disabled), .ts-btn--ghost[data-state="hover"] { --_bg: var(--color\.bg\.muted); }
.ts-btn--ghost:active:not(:disabled), .ts-btn--ghost[data-state="active"] { --_bg: var(--color\.bg\.pressed); }

.ts-btn--danger { --_bg: var(--color\.error\.solid); --_fg: var(--color\.error\.on-solid); }
.ts-btn--danger:hover:not(:disabled), .ts-btn--danger[data-state="hover"],
.ts-btn--danger:active:not(:disabled), .ts-btn--danger[data-state="active"] { --_bg: var(--color\.error\.solid-hover); }

.ts-btn:active:not(:disabled), .ts-btn[data-state="active"] { transform: translateY(1px); }
.ts-btn:focus-visible, .ts-btn[data-state="focus"] { outline: var(--border\.width\.focus) solid var(--color\.focus\.ring); outline-offset: 2px; }
.ts-btn:disabled:not(.is-loading) { --_bg: var(--color\.bg\.disabled); --_fg: var(--color\.text\.disabled); --_bd: transparent; cursor: not-allowed; }
.ts-btn--ghost:disabled:not(.is-loading) { --_bg: transparent; }
.ts-btn--outline:disabled:not(.is-loading) { --_bd: var(--color\.border\.subtle); --_bg: transparent; }
.ts-btn.is-loading { cursor: progress; }

/* ============ Field (shared by Input, Select) ============ */
.ts-field { display: grid; gap: var(--space\.sm); min-width: 0; font-family: var(--font-sans); }
.ts-field__label { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--color\.text\.primary); }
.ts-field__req { color: var(--color\.error\.text); }
.ts-field__msg { display: flex; gap: var(--space\.xs); align-items: flex-start; margin: 0; font-size: 13px; line-height: 18px; color: var(--color\.text\.secondary); }
.ts-field__msg svg { flex: none; width: var(--size\.icon\.sm); height: var(--size\.icon\.sm); margin-top: 1px; }
.ts-field__msg--error { color: var(--color\.error\.text); font-weight: 600; }
.ts-field.is-disabled .ts-field__label { color: var(--color\.text\.disabled); }

/* ============ Input ============ */
.ts-input {
  position: relative; display: flex; align-items: center; gap: var(--space\.sm); box-sizing: border-box;
  height: var(--size\.control\.md); padding: 0 var(--space\.3); min-width: 0;
  background: var(--color\.bg\.surface); border: var(--border\.width\.control) solid var(--color\.border\.control); border-radius: var(--radius\.md);
  color: var(--color\.text\.primary); transition: border-color 120ms ease, box-shadow 120ms ease;
}
.ts-input--sm { height: var(--size\.control\.sm); border-radius: var(--radius\.sm); }
.ts-input--lg { height: var(--size\.control\.lg); padding: 0 var(--space\.4); }
.ts-input__control {
  flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; outline: 0; background: transparent;
  font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 500; color: inherit;
}
.ts-input--sm .ts-input__control { font-size: 14px; line-height: 20px; }
.ts-input--multiline { height: auto; align-items: stretch; padding: 10px var(--space\.3); }
.ts-input--multiline .ts-input__control { height: auto; min-height: 96px; resize: vertical; }
.ts-input__control::placeholder { color: var(--color\.text\.placeholder); opacity: 1; font-weight: 400; }
.ts-input__affix { flex: none; display: inline-flex; align-items: center; color: var(--color\.text\.secondary); font-size: 15px; font-weight: 600; }
.ts-input__affix svg { width: var(--size\.icon\.md); height: var(--size\.icon\.md); }
.ts-input:hover:not(.is-disabled):not(.is-readonly), .ts-input[data-state="hover"] { border-color: var(--color\.border\.control-hover); }
.ts-input:focus-within:not(.is-disabled), .ts-input[data-state="focus"] { border-color: var(--color\.border\.strong); box-shadow: 0 0 0 3px var(--color\.focus\.halo); }
.ts-input.is-error { border-color: var(--color\.error\.border); }
.ts-input.is-error:focus-within, .ts-input.is-error[data-state="focus"] { border-color: var(--color\.error\.border); box-shadow: 0 0 0 3px var(--color\.error\.bg); }
.ts-input.is-readonly { background: var(--color\.bg\.subtle); border-color: var(--color\.border\.subtle); }
.ts-input.is-disabled { background: var(--color\.bg\.disabled); border-color: var(--color\.border\.subtle); color: var(--color\.text\.disabled); cursor: not-allowed; }
.ts-input.is-disabled .ts-input__control { cursor: not-allowed; }
.ts-input.is-disabled .ts-input__control::placeholder, .ts-input.is-disabled .ts-input__affix { color: var(--color\.text\.disabled); }

/* ============ Select ============ */
.ts-select { padding: 0; }
.ts-select__control {
  appearance: none; -webkit-appearance: none; width: 100%; height: 100%; margin: 0; padding: 0 40px 0 var(--space\.3);
  border: 0; outline: 0; background: transparent; color: inherit; cursor: pointer;
  font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 500; border-radius: inherit;
}
.ts-input--sm .ts-select__control { font-size: 14px; }
.ts-input--lg .ts-select__control { padding-left: var(--space\.4); }
.ts-select__control:invalid, .ts-select.is-placeholder .ts-select__control { color: var(--color\.text\.placeholder); font-weight: 400; }
.ts-select__control option { color: var(--color\.text\.primary); background: var(--color\.bg\.surface); }
.ts-select__chevron { position: absolute; right: var(--space\.3); top: 50%; width: var(--size\.icon\.md); height: var(--size\.icon\.md); margin-top: -10px; pointer-events: none; color: var(--color\.text\.secondary); transition: transform 120ms ease; }
.ts-select[data-state="active"] .ts-select__chevron { transform: rotate(180deg); }
.ts-select.is-disabled .ts-select__control { cursor: not-allowed; }
.ts-select.is-disabled .ts-select__chevron { color: var(--color\.text\.disabled); }

/* ============ Checkbox & Radio ============ */
.ts-check, .ts-radio {
  position: relative; display: inline-grid; grid-template-columns: 20px auto; column-gap: var(--space\.3); align-items: start;
  font-family: var(--font-sans); font-size: 15px; line-height: 20px; color: var(--color\.text\.primary);
}
.ts-check--bare, .ts-radio--bare { grid-template-columns: 20px; }
.ts-check__input, .ts-radio__input { position: absolute; left: 0; top: 0; width: 20px; height: 20px; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.ts-check__box, .ts-radio__box {
  box-sizing: border-box; width: 20px; height: 20px; display: grid; place-items: center;
  background: var(--color\.bg\.surface); border: var(--border\.width\.control) solid var(--color\.border\.control);
  transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.ts-check__box { border-radius: var(--radius\.xs); }
.ts-radio__box { border-radius: var(--radius\.full); }
.ts-check__box svg { width: 14px; height: 14px; fill: none; stroke: var(--color\.control\.on-checked); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.ts-check__dash { display: none; }
.ts-radio__dot { width: 8px; height: 8px; border-radius: var(--radius\.full); background: var(--color\.control\.on-checked); transform: scale(0); transition: transform 120ms ease; }
.ts-check__text, .ts-radio__text { display: grid; gap: 2px; min-width: 0; }
.ts-check__label, .ts-radio__label { cursor: pointer; font-weight: 500; }
.ts-check__desc, .ts-radio__desc { font-size: 14px; line-height: 20px; color: var(--color\.text\.secondary); }
.ts-check__error, .ts-radio__error { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--color\.error\.text); }

.ts-check__input:checked + .ts-check__box, .ts-check__input:indeterminate + .ts-check__box,
.ts-radio__input:checked + .ts-radio__box { background: var(--color\.control\.checked); border-color: var(--color\.control\.checked-border); }
.ts-check__input:checked + .ts-check__box svg, .ts-check__input:indeterminate + .ts-check__box svg { opacity: 1; }
.ts-check__input:indeterminate + .ts-check__box .ts-check__tick { display: none; }
.ts-check__input:indeterminate + .ts-check__box .ts-check__dash { display: inline; }
.ts-radio__input:checked + .ts-radio__box .ts-radio__dot { transform: scale(1); }

.ts-check:hover:not(.is-disabled) .ts-check__box, .ts-check[data-state="hover"] .ts-check__box,
.ts-radio:hover:not(.is-disabled) .ts-radio__box, .ts-radio[data-state="hover"] .ts-radio__box { border-color: var(--color\.border\.control-hover); }
.ts-check:hover:not(.is-disabled) .ts-check__input:checked + .ts-check__box, .ts-check[data-state="hover"] .ts-check__input:checked + .ts-check__box,
.ts-radio:hover:not(.is-disabled) .ts-radio__input:checked + .ts-radio__box, .ts-radio[data-state="hover"] .ts-radio__input:checked + .ts-radio__box { background: var(--color\.brand\.primary-hover); }
.ts-check__input:active:not(:disabled) + .ts-check__box, .ts-check[data-state="active"] .ts-check__box,
.ts-radio__input:active:not(:disabled) + .ts-radio__box, .ts-radio[data-state="active"] .ts-radio__box { transform: scale(.92); background: var(--color\.bg\.pressed); }
.ts-check[data-state="active"] .ts-check__input:checked + .ts-check__box,
.ts-radio[data-state="active"] .ts-radio__input:checked + .ts-radio__box { background: var(--color\.brand\.primary-active); }
.ts-check__input:focus-visible + .ts-check__box, .ts-check[data-state="focus"] .ts-check__box,
.ts-radio__input:focus-visible + .ts-radio__box, .ts-radio[data-state="focus"] .ts-radio__box { outline: var(--border\.width\.focus) solid var(--color\.focus\.ring); outline-offset: 2px; }
.ts-check.is-error .ts-check__box, .ts-radio.is-error .ts-radio__box { border-color: var(--color\.error\.border); }
.ts-check.is-disabled, .ts-radio.is-disabled { color: var(--color\.text\.disabled); }
.ts-check.is-disabled .ts-check__input, .ts-radio.is-disabled .ts-radio__input, .ts-check.is-disabled .ts-check__label, .ts-radio.is-disabled .ts-radio__label { cursor: not-allowed; }
.ts-check.is-disabled .ts-check__box, .ts-radio.is-disabled .ts-radio__box { background: var(--color\.bg\.disabled); border-color: var(--color\.border\.subtle); }
.ts-check.is-disabled .ts-check__input:checked + .ts-check__box, .ts-check.is-disabled .ts-check__input:indeterminate + .ts-check__box,
.ts-radio.is-disabled .ts-radio__input:checked + .ts-radio__box { background: var(--color\.bg\.muted); border-color: var(--color\.border\.subtle); }
.ts-check.is-disabled .ts-check__box svg { stroke: var(--color\.text\.disabled); }
.ts-radio.is-disabled .ts-radio__dot { background: var(--color\.text\.disabled); }
.ts-check.is-disabled .ts-check__desc, .ts-radio.is-disabled .ts-radio__desc { color: var(--color\.text\.disabled); }
.ts-radio-group { display: grid; gap: var(--space\.3); border: 0; margin: 0; padding: 0; min-width: 0; }
.ts-radio-group--row { display: flex; flex-wrap: wrap; gap: var(--space\.3) var(--space\.6); }
.ts-radio-group__legend { padding: 0; margin-bottom: var(--space\.sm); font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 600; color: var(--color\.text\.primary); }

/* ============ Toggle ============ */
.ts-toggle { display: inline-grid; grid-template-columns: auto auto; column-gap: var(--space\.3); align-items: start; font-family: var(--font-sans); font-size: 15px; line-height: 20px; color: var(--color\.text\.primary); }
.ts-toggle--bare { grid-template-columns: auto; }
.ts-toggle__track {
  position: relative; box-sizing: border-box; width: 40px; height: 24px; margin: -2px 0 0; padding: 0; flex: none;
  border: var(--border\.width\.control) solid var(--color\.border\.control); border-radius: var(--radius\.full); background: var(--color\.bg\.muted);
  cursor: pointer; transition: background-color 150ms ease, border-color 150ms ease;
}
.ts-toggle__thumb {
  position: absolute; top: 50%; left: 3px; width: 16px; height: 16px; margin-top: -8px; border-radius: var(--radius\.full);
  background: var(--color\.border\.control); transition: left 150ms ease, width 150ms ease, background-color 150ms ease;
}
.ts-toggle__track[aria-checked="true"] { background: var(--color\.control\.checked); border-color: var(--color\.control\.checked-border); }
.ts-toggle__track[aria-checked="true"] .ts-toggle__thumb { left: 18px; background: var(--color\.control\.on-checked); }
.ts-toggle--sm .ts-toggle__track { width: 32px; height: 20px; margin-top: 0; }
.ts-toggle--sm .ts-toggle__thumb { width: 12px; height: 12px; margin-top: -6px; }
.ts-toggle--sm .ts-toggle__track[aria-checked="true"] .ts-toggle__thumb { left: 14px; }
.ts-toggle:not(.is-disabled) .ts-toggle__track:hover, .ts-toggle[data-state="hover"] .ts-toggle__track { border-color: var(--color\.border\.control-hover); }
.ts-toggle:not(.is-disabled) .ts-toggle__track[aria-checked="true"]:hover, .ts-toggle[data-state="hover"] .ts-toggle__track[aria-checked="true"] { background: var(--color\.brand\.primary-hover); border-color: var(--color\.control\.checked-border); }
.ts-toggle__track:active:not(:disabled) .ts-toggle__thumb, .ts-toggle[data-state="active"] .ts-toggle__thumb { width: 20px; }
.ts-toggle__track[aria-checked="true"]:active:not(:disabled) .ts-toggle__thumb, .ts-toggle[data-state="active"] .ts-toggle__track[aria-checked="true"] .ts-toggle__thumb { left: 14px; }
.ts-toggle__track:focus-visible, .ts-toggle[data-state="focus"] .ts-toggle__track { outline: var(--border\.width\.focus) solid var(--color\.focus\.ring); outline-offset: 2px; }
.ts-toggle.is-error .ts-toggle__track { border-color: var(--color\.error\.border); }
.ts-toggle__text { display: grid; gap: 2px; min-width: 0; }
.ts-toggle__label { cursor: pointer; font-weight: 500; }
.ts-toggle__desc { font-size: 14px; line-height: 20px; color: var(--color\.text\.secondary); }
.ts-toggle__error { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--color\.error\.text); }
.ts-toggle.is-disabled { color: var(--color\.text\.disabled); }
.ts-toggle.is-disabled .ts-toggle__track, .ts-toggle.is-disabled .ts-toggle__label { cursor: not-allowed; }
.ts-toggle.is-disabled .ts-toggle__track { background: var(--color\.bg\.disabled); border-color: var(--color\.border\.subtle); }
.ts-toggle.is-disabled .ts-toggle__track[aria-checked="true"] { background: var(--color\.bg\.muted); }
.ts-toggle.is-disabled .ts-toggle__thumb { background: var(--color\.text\.disabled); }
.ts-toggle.is-disabled .ts-toggle__desc { color: var(--color\.text\.disabled); }

/* ============ Badge ============ */
.ts-badge {
  --_bg: var(--color\.bg\.subtle); --_fg: var(--color\.text\.secondary); --_bd: transparent;
  display: inline-flex; align-items: center; gap: var(--space\.xs); box-sizing: border-box; height: 24px; padding: 0 var(--space\.2);
  border: 1px solid var(--_bd); border-radius: var(--radius\.sm); background: var(--_bg); color: var(--_fg);
  font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .01em; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ts-badge--sm { height: 20px; padding: 0 6px; font-size: 11px; }
.ts-badge svg { width: 14px; height: 14px; flex: none; }
.ts-badge__dot { width: 6px; height: 6px; border-radius: var(--radius\.full); background: currentColor; flex: none; }
.ts-badge--soft.ts-badge--brand { --_bg: var(--color\.brand\.subtle); --_fg: var(--color\.brand\.text); }
.ts-badge--soft.ts-badge--success { --_bg: var(--color\.success\.bg); --_fg: var(--color\.success\.text); }
.ts-badge--soft.ts-badge--warning { --_bg: var(--color\.warning\.bg); --_fg: var(--color\.warning\.text); }
.ts-badge--soft.ts-badge--error { --_bg: var(--color\.error\.bg); --_fg: var(--color\.error\.text); }
.ts-badge--soft.ts-badge--info { --_bg: var(--color\.info\.bg); --_fg: var(--color\.info\.text); }
.ts-badge--solid.ts-badge--neutral { --_bg: var(--color\.bg\.inverse); --_fg: var(--color\.text\.inverse); }
.ts-badge--solid.ts-badge--brand { --_bg: var(--color\.brand\.primary); --_fg: var(--color\.brand\.on-primary); }
.ts-badge--solid.ts-badge--success { --_bg: var(--color\.success\.solid); --_fg: var(--color\.success\.on-solid); }
.ts-badge--solid.ts-badge--warning { --_bg: var(--color\.warning\.solid); --_fg: var(--color\.warning\.on-solid); }
.ts-badge--solid.ts-badge--error { --_bg: var(--color\.error\.solid); --_fg: var(--color\.error\.on-solid); }
.ts-badge--solid.ts-badge--info { --_bg: var(--color\.info\.solid); --_fg: var(--color\.info\.on-solid); }
.ts-badge--outline { --_bg: transparent; }
.ts-badge--outline.ts-badge--neutral { --_bd: var(--color\.border\.default); --_fg: var(--color\.text\.secondary); }
.ts-badge--outline.ts-badge--brand { --_bd: var(--color\.brand\.primary); --_fg: var(--color\.text\.primary); }
.ts-badge--outline.ts-badge--success { --_bd: var(--color\.success\.border); --_fg: var(--color\.success\.text); }
.ts-badge--outline.ts-badge--warning { --_bd: var(--color\.warning\.border); --_fg: var(--color\.warning\.text); }
.ts-badge--outline.ts-badge--error { --_bd: var(--color\.error\.border); --_fg: var(--color\.error\.text); }
.ts-badge--outline.ts-badge--info { --_bd: var(--color\.info\.border); --_fg: var(--color\.info\.text); }

/* ============ Tag ============ */
.ts-tag {
  --_bg: var(--color\.bg\.surface); --_fg: var(--color\.text\.primary); --_bd: var(--color\.border\.default);
  display: inline-flex; align-items: center; box-sizing: border-box; height: 32px; max-width: 100%;
  border: var(--border\.width\.control) solid var(--_bd); border-radius: var(--radius\.full); background: var(--_bg); color: var(--_fg);
  font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 600; white-space: nowrap;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.ts-tag--sm { height: 24px; font-size: 13px; }
.ts-tag__main {
  display: inline-flex; align-items: center; gap: 6px; height: 100%; min-width: 0; padding: 0 var(--space\.3); margin: 0;
  border: 0; background: none; color: inherit; font: inherit; border-radius: inherit; cursor: default;
}
.ts-tag--sm .ts-tag__main { padding: 0 10px; }
.ts-tag__main svg { width: var(--size\.icon\.sm); height: var(--size\.icon\.sm); flex: none; }
.ts-tag__text { overflow: hidden; text-overflow: ellipsis; }
.ts-tag--removable .ts-tag__main { padding-right: 2px; }
.ts-tag__remove {
  display: inline-grid; place-items: center; width: 20px; height: 20px; margin: 0 6px 0 0; padding: 0; flex: none;
  border: 0; border-radius: var(--radius\.full); background: transparent; color: var(--color\.text\.secondary); cursor: pointer;
}
.ts-tag--sm .ts-tag__remove { width: 16px; height: 16px; margin-right: 4px; }
.ts-tag__remove svg { width: 12px; height: 12px; }
.ts-tag__remove:hover { background: var(--color\.bg\.muted); color: var(--color\.text\.primary); }
.ts-tag__remove:focus-visible { outline: var(--border\.width\.focus) solid var(--color\.focus\.ring); outline-offset: 1px; }
button.ts-tag__main { cursor: pointer; }
.ts-tag--interactive:hover:not(.is-disabled), .ts-tag[data-state="hover"] { --_bd: var(--color\.border\.control-hover); --_bg: var(--color\.bg\.subtle); }
.ts-tag--interactive:active:not(.is-disabled), .ts-tag[data-state="active"] { --_bg: var(--color\.bg\.pressed); }
.ts-tag button.ts-tag__main:focus-visible, .ts-tag[data-state="focus"] { outline: var(--border\.width\.focus) solid var(--color\.focus\.ring); outline-offset: 2px; }
.ts-tag.is-selected { --_bg: var(--color\.secondary\.default); --_fg: var(--color\.secondary\.on); --_bd: var(--color\.secondary\.default); }
.ts-tag.is-selected:hover:not(.is-disabled), .ts-tag.is-selected[data-state="hover"] { --_bg: var(--color\.secondary\.hover); --_bd: var(--color\.secondary\.hover); }
.ts-tag.is-selected .ts-tag__remove { color: inherit; }
.ts-tag.is-invalid { --_bg: var(--color\.error\.bg); --_fg: var(--color\.error\.text); --_bd: var(--color\.error\.border); }
.ts-tag.is-invalid .ts-tag__remove { color: var(--color\.error\.text); }
.ts-tag.is-disabled { --_bg: var(--color\.bg\.disabled); --_fg: var(--color\.text\.disabled); --_bd: var(--color\.border\.subtle); }
.ts-tag.is-disabled .ts-tag__main, .ts-tag.is-disabled .ts-tag__remove { cursor: not-allowed; color: var(--color\.text\.disabled); }

/* ============ Avatar ============ */
.ts-avatar {
  --_size: 40px; --_bg: var(--color\.bg\.muted); --_fg: var(--color\.text\.primary);
  position: relative; display: inline-grid; place-items: center; flex: none; box-sizing: border-box;
  width: var(--_size); height: var(--_size); border-radius: var(--radius\.full); background: var(--_bg); color: var(--_fg);
  font-family: var(--font-sans); font-weight: 800; font-size: calc(var(--_size) * .38); line-height: 1; letter-spacing: .01em;
  user-select: none; padding: 0; margin: 0; border: 0;
}
.ts-avatar--xs { --_size: 24px; font-size: 10px; }
.ts-avatar--sm { --_size: 32px; }
.ts-avatar--lg { --_size: 48px; }
.ts-avatar--xl { --_size: 64px; }
.ts-avatar--square { border-radius: var(--radius\.md); }
.ts-avatar--square.ts-avatar--xl, .ts-avatar--square.ts-avatar--lg { border-radius: var(--radius\.lg); }
.ts-avatar--square.ts-avatar--xs { border-radius: var(--radius\.xs); }
.ts-avatar__img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.ts-avatar--brand { --_bg: var(--color\.brand\.subtle); --_fg: var(--color\.brand\.text); }
.ts-avatar--graphite { --_bg: var(--color\.bg\.inverse); --_fg: var(--color\.text\.inverse); }
.ts-avatar--blue { --_bg: var(--color\.info\.bg); --_fg: var(--color\.info\.text); }
.ts-avatar--green { --_bg: var(--color\.success\.bg); --_fg: var(--color\.success\.text); }
.ts-avatar--orange { --_bg: var(--color\.warning\.bg); --_fg: var(--color\.warning\.text); }
.ts-avatar__status {
  position: absolute; right: -1px; bottom: -1px; width: max(8px, calc(var(--_size) * .26)); height: max(8px, calc(var(--_size) * .26));
  box-sizing: border-box; border: 2px solid var(--color\.bg\.page); border-radius: var(--radius\.full); background: var(--color\.border\.control);
}
.ts-avatar--square .ts-avatar__status { right: -3px; bottom: -3px; }
.ts-avatar__status--online { background: var(--color\.success\.solid); }
.ts-avatar__status--away { background: var(--color\.warning\.solid); }
.ts-avatar__status--busy { background: var(--color\.error\.solid); }
button.ts-avatar { cursor: pointer; transition: box-shadow 120ms ease; }
button.ts-avatar:hover, .ts-avatar[data-state="hover"] { box-shadow: 0 0 0 2px var(--color\.bg\.page), 0 0 0 4px var(--color\.border\.default); }
button.ts-avatar:focus-visible, .ts-avatar[data-state="focus"] { outline: var(--border\.width\.focus) solid var(--color\.focus\.ring); outline-offset: 2px; }
button.ts-avatar:disabled { cursor: not-allowed; opacity: .5; }

/* ============ Divider ============ */
.ts-divider { border: 0; margin: 0; flex: none; background: var(--color\.border\.subtle); height: 1px; width: 100%; }
.ts-divider--strong { background: var(--color\.border\.default); }
.ts-divider--vertical { width: 1px; height: auto; align-self: stretch; min-height: 16px; }
.ts-divider--space-sm { margin-block: var(--space\.sm); }
.ts-divider--space-md { margin-block: var(--space\.md); }
.ts-divider--space-lg { margin-block: var(--space\.lg); }
.ts-divider--vertical.ts-divider--space-sm { margin: 0 var(--space\.sm); }
.ts-divider--vertical.ts-divider--space-md { margin: 0 var(--space\.md); }
.ts-divider--vertical.ts-divider--space-lg { margin: 0 var(--space\.lg); }
.ts-divider--label { display: flex; align-items: center; gap: var(--space\.3); height: auto; background: none; font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color\.text\.secondary); }
.ts-divider--label::before, .ts-divider--label::after { content: ""; flex: 1; height: 1px; background: var(--color\.border\.subtle); }
.ts-divider--label.ts-divider--strong::before, .ts-divider--label.ts-divider--strong::after { background: var(--color\.border\.default); }
.ts-divider--label.ts-divider--start::before { flex: 0 0 var(--space\.6); }

/* ============ Spinner ============ */
.ts-spinner { display: inline-flex; flex: none; width: 20px; height: 20px; color: var(--color\.text\.primary); }
.ts-spinner--sm { width: 16px; height: 16px; }
.ts-spinner--lg { width: 32px; height: 32px; }
.ts-spinner svg { width: 100%; height: 100%; animation: ts-spin 800ms linear infinite; }
.ts-spinner__track { stroke: var(--color\.border\.subtle); }
.ts-spinner__arc { stroke: currentColor; }
.ts-spinner--current { color: inherit; }
.ts-spinner--current .ts-spinner__track { stroke: currentColor; opacity: .25; }
.ts-spinner--brand { color: var(--color\.brand\.primary); }
.ts-spinner--brand .ts-spinner__track { stroke: currentColor; opacity: .25; }
@keyframes ts-spin { to { transform: rotate(360deg); } }

/* ============ Tooltip ============ */
.ts-tooltip { position: relative; display: inline-flex; }
.ts-tooltip__bubble {
  position: absolute; z-index: var(--z\.tooltip); box-sizing: border-box; width: max-content; max-width: 260px; padding: 6px var(--space\.3);
  border-radius: var(--radius\.sm); background: var(--color\.bg\.inverse); color: var(--color\.text\.inverse); box-shadow: var(--shadow\.md);
  font-family: var(--font-sans); font-size: 13px; line-height: 18px; font-weight: 500; text-align: left; white-space: normal;
  pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 120ms ease, transform 120ms ease, visibility 0s linear 120ms;
}
.ts-tooltip__bubble::after { content: ""; position: absolute; width: 8px; height: 8px; background: inherit; transform: rotate(45deg); }
.ts-tooltip__bubble[data-open="true"] { opacity: 1; visibility: visible; transition: opacity 120ms ease, transform 120ms ease, visibility 0s; }
.ts-tooltip__bubble--top { bottom: calc(100% + var(--space\.sm)); left: 50%; transform: translate(-50%, 4px); }
.ts-tooltip__bubble--top::after { bottom: -4px; left: calc(50% - 4px); }
.ts-tooltip__bubble--bottom { top: calc(100% + var(--space\.sm)); left: 50%; transform: translate(-50%, -4px); }
.ts-tooltip__bubble--bottom::after { top: -4px; left: calc(50% - 4px); }
.ts-tooltip__bubble--left { right: calc(100% + var(--space\.sm)); top: 50%; transform: translate(4px, -50%); }
.ts-tooltip__bubble--left::after { right: -4px; top: calc(50% - 4px); }
.ts-tooltip__bubble--right { left: calc(100% + var(--space\.sm)); top: 50%; transform: translate(-4px, -50%); }
.ts-tooltip__bubble--right::after { left: -4px; top: calc(50% - 4px); }
.ts-tooltip__bubble--top[data-open="true"], .ts-tooltip__bubble--bottom[data-open="true"] { transform: translate(-50%, 0); }
.ts-tooltip__bubble--left[data-open="true"], .ts-tooltip__bubble--right[data-open="true"] { transform: translate(0, -50%); }

/* ============ Tabs ============ */
.ts-tabs { display: grid; gap: var(--space\.lg); min-width: 0; font-family: var(--font-sans); }
.ts-tabs__list { display: flex; gap: var(--space\.6); min-width: 0; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--color\.border\.subtle); }
.ts-tabs__list::-webkit-scrollbar { display: none; }
.ts-tab {
  position: relative; display: inline-flex; align-items: center; gap: var(--space\.sm); flex: none; margin: 0; padding: var(--space\.3) 0;
  border: 0; background: none; color: var(--color\.text\.secondary); cursor: pointer; white-space: nowrap;
  font-family: var(--font-sans); font-size: 15px; line-height: 20px; font-weight: 700;
  transition: color 120ms ease, background-color 120ms ease;
}
.ts-tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: transparent; transition: background-color 120ms ease; }
.ts-tab:hover:not(:disabled), .ts-tab[data-state="hover"] { color: var(--color\.text\.primary); }
.ts-tab[aria-selected="true"] { color: var(--color\.text\.primary); }
.ts-tab[aria-selected="true"]::after { background: var(--color\.border\.strong); }
.ts-tab:focus-visible, .ts-tab[data-state="focus"] { outline: var(--border\.width\.focus) solid var(--color\.focus\.ring); outline-offset: 2px; border-radius: var(--radius\.xs); }
.ts-tab:disabled { color: var(--color\.text\.disabled); cursor: not-allowed; }
.ts-tabs--segmented .ts-tabs__list { display: inline-flex; justify-self: start; max-width: 100%; gap: var(--space\.1); padding: var(--space\.1); border: 1px solid var(--color\.border\.subtle); border-radius: 10px; background: var(--color\.bg\.subtle); }
.ts-tabs--segmented .ts-tab { padding: var(--space\.2) var(--space\.4); border-radius: var(--radius\.sm); color: var(--color\.text\.secondary); }
.ts-tabs--segmented .ts-tab::after { display: none; }
.ts-tabs--segmented .ts-tab:hover:not(:disabled):not([aria-selected="true"]), .ts-tabs--segmented .ts-tab[data-state="hover"]:not([aria-selected="true"]) { background: var(--color\.bg\.muted); color: var(--color\.text\.primary); }
.ts-tabs--segmented .ts-tab[aria-selected="true"] { background: var(--color\.brand\.primary); color: var(--color\.brand\.on-primary); }
.ts-tabs--sm .ts-tab { font-size: 13px; line-height: 16px; }
.ts-tabs__panel:focus-visible { outline: var(--border\.width\.focus) solid var(--color\.focus\.ring); outline-offset: 4px; border-radius: var(--radius\.sm); }

/* ============ Accordion (button pattern or <details>) ============ */
.ts-accordion { display: grid; border-top: 1px solid var(--color\.border\.subtle); font-family: var(--font-sans); }
.ts-accordion__item { border-bottom: 1px solid var(--color\.border\.subtle); }
.ts-accordion__heading { margin: 0; font: inherit; }
.ts-accordion__trigger {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space\.md); width: 100%; margin: 0; padding: var(--space\.5) 0;
  border: 0; background: none; color: var(--color\.text\.primary); cursor: pointer; text-align: left; list-style: none;
  font-family: var(--font-sans); font-size: 17px; line-height: 26px; font-weight: 700;
}
.ts-accordion__trigger::-webkit-details-marker { display: none; }
.ts-accordion__icon {
  display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: var(--radius\.full);
  background: var(--color\.bg\.subtle); color: var(--color\.text\.primary); transition: transform 200ms ease, background-color 120ms ease;
}
.ts-accordion__icon svg { width: var(--size\.icon\.md); height: var(--size\.icon\.md); }
.ts-accordion__trigger:hover .ts-accordion__icon, .ts-accordion__item[data-state="hover"] .ts-accordion__icon { background: var(--color\.bg\.muted); }
.ts-accordion__trigger:focus-visible, .ts-accordion__item[data-state="focus"] .ts-accordion__trigger { outline: var(--border\.width\.focus) solid var(--color\.focus\.ring); outline-offset: 2px; border-radius: var(--radius\.xs); }
.ts-accordion__trigger[aria-expanded="true"] .ts-accordion__icon, details[open] > .ts-accordion__trigger .ts-accordion__icon { transform: rotate(180deg); background: var(--color\.brand\.primary); color: var(--color\.brand\.on-primary); }
.ts-accordion__trigger:disabled { color: var(--color\.text\.disabled); cursor: not-allowed; }
.ts-accordion__trigger:disabled .ts-accordion__icon { color: var(--color\.text\.disabled); }
.ts-accordion__panel { padding: 0 48px var(--space\.5) 0; color: var(--color\.text\.secondary); font-size: 16px; line-height: 24px; max-width: 72ch; }
.ts-accordion__panel > :first-child { margin-top: 0; }
.ts-accordion__panel > :last-child { margin-bottom: 0; }

/* ============ Alert ============ */
.ts-alert {
  --_bg: var(--color\.info\.bg); --_bd: var(--color\.info\.border); --_ic: var(--color\.info\.text);
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--space\.3); align-items: start; box-sizing: border-box;
  padding: var(--space\.4); border: 1px solid var(--_bd); border-radius: var(--radius\.md); background: var(--_bg); color: var(--color\.text\.primary);
  font-family: var(--font-sans); font-size: 15px; line-height: 22px;
}
.ts-alert--success { --_bg: var(--color\.success\.bg); --_bd: var(--color\.success\.border); --_ic: var(--color\.success\.text); }
.ts-alert--warning { --_bg: var(--color\.warning\.bg); --_bd: var(--color\.warning\.border); --_ic: var(--color\.warning\.text); }
.ts-alert--error { --_bg: var(--color\.error\.bg); --_bd: var(--color\.error\.border); --_ic: var(--color\.error\.text); }
.ts-alert__icon { display: inline-flex; color: var(--_ic); margin-top: 1px; }
.ts-alert__icon svg { width: var(--size\.icon\.md); height: var(--size\.icon\.md); }
.ts-alert__body { display: grid; gap: var(--space\.1); min-width: 0; }
.ts-alert__title { margin: 0; font-size: 15px; line-height: 22px; font-weight: 800; color: var(--color\.text\.primary); }
.ts-alert__text { margin: 0; }
.ts-alert__actions { display: flex; flex-wrap: wrap; gap: var(--space\.sm); margin-top: var(--space\.2); }
.ts-alert__close { display: inline-grid; place-items: center; width: 28px; height: 28px; margin: -4px -4px 0 0; padding: 0; border: 0; border-radius: var(--radius\.sm); background: transparent; color: var(--color\.text\.secondary); cursor: pointer; }
.ts-alert__close:hover { background: var(--color\.bg\.pressed); color: var(--color\.text\.primary); }
.ts-alert__close:focus-visible { outline: var(--border\.width\.focus) solid var(--color\.focus\.ring); outline-offset: 1px; }
.ts-alert__close svg { width: var(--size\.icon\.sm); height: var(--size\.icon\.sm); }

@media (prefers-reduced-motion: reduce) {
  .ts-tab, .ts-accordion__icon { transition: none; }
  .ts-btn, .ts-input, .ts-check__box, .ts-radio__box, .ts-radio__dot, .ts-toggle__track, .ts-toggle__thumb, .ts-tag, .ts-tooltip__bubble { transition: none; }
  .ts-spinner svg { animation-duration: 2400ms; }
}