/* ==========================================================================
   优讯云生图 · 组件库（对齐企业级组件规范）
   ========================================================================== */

/* ==========================================================================
   图标
   ========================================================================== */

.t-icon {
  width: 16px;
  height: 16px;
  flex: none;
  display: inline-block;
  vertical-align: -0.15em;
  overflow: visible;
}

.t-icon--s {
  width: 14px;
  height: 14px;
}

.t-icon--m {
  width: 20px;
  height: 20px;
}

.t-icon--l {
  width: 24px;
  height: 24px;
}

.t-icon--xl {
  width: 32px;
  height: 32px;
}

.t-icon--spin {
  animation: t-spin 0.9s linear infinite;
}

@keyframes t-spin {
  to {
    transform: rotate(360deg);
  }
}

.t-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--td-text-color-placeholder);
  background: transparent;
  border: 0;
  cursor: pointer;
  border-radius: var(--td-radius-default);
}

/* ==========================================================================
   按钮
   ========================================================================== */

.t-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: var(--td-comp-size-m);
  padding: 0 16px;
  border-radius: var(--td-radius-default);
  border: 1px solid var(--td-component-border);
  background: var(--td-bg-color-container);
  color: var(--td-text-color-primary);
  font-size: var(--td-font-size-body-medium);
  font-weight: var(--td-font-weight-regular);
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition: all var(--td-anim-duration-base) var(--td-anim-timing-ease-default);
}

.t-button:hover {
  color: var(--td-brand-color);
  border-color: var(--td-brand-color);
}

.t-button:active {
  color: var(--td-brand-color-active);
  border-color: var(--td-brand-color-active);
}

.t-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--td-brand-color-focus);
}

.t-button--primary {
  background: var(--td-brand-color);
  border-color: var(--td-brand-color);
  color: var(--td-text-color-anti);
}

.t-button--primary:hover {
  background: var(--td-brand-color-hover);
  border-color: var(--td-brand-color-hover);
  color: var(--td-text-color-anti);
}

.t-button--primary:active {
  background: var(--td-brand-color-active);
  border-color: var(--td-brand-color-active);
}

.t-button--danger {
  background: var(--td-error-color);
  border-color: var(--td-error-color);
  color: var(--td-text-color-anti);
}

.t-button--danger:hover {
  background: var(--td-error-color-hover);
  border-color: var(--td-error-color-hover);
  color: var(--td-text-color-anti);
}

.t-button--text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: auto;
  padding: 0 6px;
  border: 1px solid transparent;
  border-radius: var(--td-radius-small);
  background: transparent;
  color: var(--td-brand-color);
  font-size: var(--td-font-size-body-medium);
  line-height: 22px;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition: all var(--td-anim-duration-base) var(--td-anim-timing-ease-default);
}

.t-button--text:hover {
  background: var(--td-brand-color-light);
  border-color: transparent;
  color: var(--td-brand-color);
}

.t-button--text.t-button--danger-text {
  color: var(--td-error-color);
}

.t-button--text.t-button--danger-text:hover {
  background: var(--td-error-color-1);
}

.t-button--outline {
  border-color: var(--td-brand-color);
  color: var(--td-brand-color);
  background: transparent;
}

.t-button--outline:hover {
  background: var(--td-brand-color-light);
}

.t-button--dashed {
  border-style: dashed;
}

.t-button--ghost {
  border-color: transparent;
  background: var(--td-bg-color-component);
  color: var(--td-text-color-primary);
}

.t-button--ghost:hover {
  background: var(--td-bg-color-component-hover);
  border-color: transparent;
  color: var(--td-brand-color);
}

.t-button--s {
  height: var(--td-comp-size-s);
  padding: 0 8px;
  font-size: var(--td-font-size-body-small);
}

.t-button--l {
  height: var(--td-comp-size-l);
  padding: 0 24px;
  font-size: var(--td-font-size-body-medium);
}

.t-button--block {
  width: 100%;
}

.t-button--square {
  padding: 0;
  width: var(--td-comp-size-m);
}

.t-button.is-disabled,
.t-button:disabled {
  cursor: not-allowed;
  background: var(--td-bg-color-component-disabled);
  border-color: var(--td-border-level-1-color);
  color: var(--td-text-color-disabled);
}

.t-button--primary.is-disabled,
.t-button--primary:disabled,
.t-button--danger.is-disabled,
.t-button--danger:disabled {
  background: var(--td-brand-color-disabled);
  border-color: var(--td-brand-color-disabled);
  color: var(--td-text-color-anti);
}

.t-button--text.is-disabled,
.t-button--text:disabled {
  background: transparent;
  border-color: transparent;
}

.t-button.is-loading {
  pointer-events: none;
  opacity: 0.9;
}

.t-button__spinner {
  width: 14px;
  height: 14px;
  border-radius: var(--td-radius-circle);
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: t-spin 0.8s linear infinite;
}

.t-button-group {
  display: inline-flex;
}

.t-button-group .t-button {
  border-radius: 0;
  margin-left: -1px;
}

.t-button-group .t-button:first-child {
  border-radius: var(--td-radius-default) 0 0 var(--td-radius-default);
  margin-left: 0;
}

.t-button-group .t-button:last-child {
  border-radius: 0 var(--td-radius-default) var(--td-radius-default) 0;
}

/* ==========================================================================
   标签 / 徽标 / 头像
   ========================================================================== */

.t-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--td-radius-small);
  background: var(--td-bg-color-component);
  color: var(--td-text-color-secondary);
  font-size: var(--td-font-size-body-small);
  line-height: 1;
  white-space: nowrap;
  border: 1px solid transparent;
}

.t-tag--brand {
  background: var(--td-brand-color-light);
  color: var(--td-brand-color);
}

.t-tag--success {
  background: var(--td-success-color-1);
  color: var(--td-success-color);
}

.t-tag--warning {
  background: var(--td-warning-color-1);
  color: var(--td-warning-color);
}

.t-tag--error {
  background: var(--td-error-color-1);
  color: var(--td-error-color);
}

.t-tag--solid {
  background: var(--td-brand-color);
  color: var(--td-text-color-anti);
}

.t-tag--outline {
  background: transparent;
  border-color: var(--td-component-border);
  color: var(--td-text-color-secondary);
}

.t-tag--l {
  height: 26px;
  padding: 0 10px;
  font-size: var(--td-font-size-body-medium);
}

.t-tag__close {
  display: inline-flex;
  cursor: pointer;
  opacity: 0.7;
}

.t-tag__close:hover {
  opacity: 1;
}

.t-tag-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.t-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  border-radius: var(--td-radius-round);
  background: var(--td-error-color);
  color: var(--td-text-color-anti);
  font-size: var(--td-font-size-s);
  line-height: 1;
}

.t-badge--dot {
  min-width: 6px;
  width: 6px;
  height: 6px;
  padding: 0;
}

.t-badge--count {
  position: relative;
}

.t-badge--count > .t-badge__dot {
  position: absolute;
  top: -6px;
  right: -8px;
}

.t-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--td-radius-circle);
  background: var(--td-brand-color-light);
  color: var(--td-brand-color);
  font-size: var(--td-font-size-body-small);
  font-weight: var(--td-font-weight-medium);
  flex: none;
  overflow: hidden;
}

.t-avatar--s {
  width: 24px;
  height: 24px;
  font-size: var(--td-font-size-s);
}

.t-avatar--l {
  width: 40px;
  height: 40px;
  font-size: var(--td-font-size-body-medium);
}

.t-avatar--xl {
  width: 56px;
  height: 56px;
  font-size: var(--td-font-size-title-small);
}

.t-avatar--square {
  border-radius: var(--td-radius-default);
}

.t-avatar-group {
  display: inline-flex;
}

.t-avatar-group .t-avatar {
  border: 2px solid var(--td-text-color-anti);
  margin-left: -8px;
}

.t-avatar-group .t-avatar:first-child {
  margin-left: 0;
}

/* ==========================================================================
   卡片
   ========================================================================== */

.t-card {
  background: var(--td-bg-color-container);
  border: 1px solid var(--td-border-level-1-color);
  border-radius: var(--td-radius-default);
  transition: box-shadow var(--td-anim-duration-base) var(--td-anim-timing-ease-default);
}

.t-card--shadow {
  border-color: transparent;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
}

.t-card--hover:hover {
  box-shadow: var(--td-shadow-1);
}

.t-card--bordered-0 {
  border-color: transparent;
}

.t-card__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--td-border-level-1-color);
}

.t-card__title {
  font-size: var(--td-font-size-title-small);
  font-weight: var(--td-font-weight-bold);
  color: var(--td-text-color-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.t-card__subtitle {
  font-size: var(--td-font-size-body-small);
  color: var(--td-text-color-secondary);
  font-weight: var(--td-font-weight-regular);
}

.t-card__extra {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--td-font-size-body-medium);
}

.t-card__body {
  padding: 20px;
}

.t-card__body--tight {
  padding: 0;
}

.t-card__footer {
  padding: 12px 20px;
  border-top: 1px solid var(--td-border-level-1-color);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 指标卡 */
.t-stat-card {
  position: relative;
  padding: 20px;
  background: var(--td-bg-color-container);
  border: 1px solid var(--td-border-level-1-color);
  border-radius: var(--td-radius-default);
  overflow: hidden;
  height: 100%;
}

.t-stat-card__label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--td-font-size-body-medium);
  color: var(--td-text-color-secondary);
}

.t-stat-card__value {
  margin-top: 8px;
  font-size: var(--td-font-size-3xl);
  line-height: 36px;
  font-weight: var(--td-font-weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--td-text-color-primary);
}

.t-stat-card__value small {
  font-size: var(--td-font-size-body-medium);
  font-weight: var(--td-font-weight-regular);
  color: var(--td-text-color-secondary);
  margin-left: 4px;
}

.t-stat-card__foot {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--td-font-size-body-small);
  color: var(--td-text-color-secondary);
}

.t-trend {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: var(--td-font-size-body-small);
}

.t-trend--up {
  color: var(--td-success-color);
}

.t-trend--down {
  color: var(--td-error-color);
}

/* ==========================================================================
   表格
   ========================================================================== */

.t-table-wrap {
  position: relative;
  overflow: hidden;
}

.t-table-scroll {
  overflow-x: auto;
}

.t-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--td-font-size-body-medium);
  table-layout: fixed;
}

.t-table th,
.t-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--td-border-level-1-color);
  vertical-align: middle;
  word-break: break-all;
}

.t-table thead th {
  background: var(--td-bg-color-secondarycontainer);
  color: var(--td-text-color-secondary);
  font-weight: var(--td-font-weight-medium);
  height: 44px;
  padding: 0 16px;
  white-space: nowrap;
  position: relative;
}

.t-table thead th:first-child {
  border-top-left-radius: var(--td-radius-small);
}

.t-table thead th:last-child {
  border-top-right-radius: var(--td-radius-small);
}

.t-table tbody tr {
  transition: background var(--td-anim-duration-fast) linear;
}

.t-table tbody tr:hover {
  background: var(--td-bg-color-container-hover);
}

.t-table tbody tr.is-selected {
  background: rgba(0, 82, 217, 0.06);
}

.t-table tbody tr.is-selected:hover {
  background: rgba(0, 82, 217, 0.1);
}

.t-table tbody tr.is-disabled {
  color: var(--td-text-color-disabled);
}

.t-table tbody td {
  color: var(--td-text-color-primary);
}

.t-table--compact th,
.t-table--compact td {
  padding: 8px 12px;
  height: 40px;
}

.t-table--loose tbody td {
  height: 56px;
}

.t-table__col-check {
  width: 48px;
  text-align: center !important;
  padding-right: 0 !important;
}

.t-table__col-op {
  width: 180px;
  white-space: nowrap;
}

.t-table__op-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.t-table__op-link + .t-table__op-link {
  margin-left: 12px;
  position: relative;
}

.t-sort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  user-select: none;
}

.t-sort:hover {
  color: var(--td-brand-color);
}

.t-sort__arrows {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
}

.t-sort__arrows i {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}

.t-sort__arrows i.up {
  border-bottom: 4px solid var(--td-gray-color-5);
}

.t-sort__arrows i.down {
  border-top: 4px solid var(--td-gray-color-5);
}

.t-sort.is-asc .t-sort__arrows i.up {
  border-bottom-color: var(--td-brand-color);
}

.t-sort.is-desc .t-sort__arrows i.down {
  border-top-color: var(--td-brand-color);
}

/* 表格工具条 */
.t-table__toolbar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--td-border-level-1-color);
  flex-wrap: wrap;
}

.t-table__selection-tip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: var(--td-brand-color-light);
  border-bottom: 1px solid var(--td-border-level-1-color);
  font-size: var(--td-font-size-body-medium);
  color: var(--td-text-color-primary);
}

/* 加载 / 空 / 错误覆盖层 */
.t-table__mask {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.85);
  z-index: 2;
}

.t-table-wrap.is-loading .t-table__mask {
  display: flex;
}

.t-table__placeholder {
  padding: 56px 16px;
  text-align: center;
}

/* ==========================================================================
   分页
   ========================================================================== */

.t-pagination {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  font-size: var(--td-font-size-body-medium);
  color: var(--td-text-color-primary);
  flex-wrap: wrap;
}

.t-pagination__total {
  color: var(--td-text-color-secondary);
  margin-right: auto;
}

.t-pagination__list {
  display: flex;
  align-items: center;
  gap: 4px;
}

.t-pagination__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--td-comp-size-m);
  height: var(--td-comp-size-m);
  padding: 0 4px;
  border: 1px solid transparent;
  border-radius: var(--td-radius-default);
  background: transparent;
  color: var(--td-text-color-primary);
  font-size: var(--td-font-size-body-medium);
  cursor: pointer;
  transition: all var(--td-anim-duration-base) var(--td-anim-timing-ease-default);
}

.t-pagination__btn:hover:not(:disabled):not(.is-current) {
  background: var(--td-bg-color-container-hover);
  color: var(--td-brand-color);
}

.t-pagination__btn.is-current {
  background: var(--td-brand-color);
  border-color: var(--td-brand-color);
  color: var(--td-text-color-anti);
  font-weight: var(--td-font-weight-medium);
  cursor: default;
}

.t-pagination__btn:disabled {
  color: var(--td-text-color-disabled);
  cursor: not-allowed;
}

.t-pagination__jump {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--td-text-color-secondary);
}

.t-pagination__jump .t-input {
  width: 56px;
}

.t-pagination__jump .t-input input {
  text-align: center;
}

/* ==========================================================================
   表单控件
   ========================================================================== */

.t-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.t-form--vertical .t-form__item {
  flex-direction: column;
  align-items: flex-start;
}

.t-form__item {
  display: flex;
  align-items: flex-start;
  gap: 0;
}

.t-form__label {
  width: 140px;
  flex: none;
  padding-right: 12px;
  padding-top: 6px;
  text-align: right;
  font-size: var(--td-font-size-body-medium);
  color: var(--td-text-color-primary);
  line-height: 20px;
}

.t-form__label--required::before {
  content: "*";
  color: var(--td-error-color);
  margin-right: 4px;
  font-family: var(--td-font-family-monospace);
}

.t-form__label--top {
  text-align: left;
  width: auto;
  padding: 0 0 8px;
}

.t-form__control {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 640px;
}

.t-form__help {
  margin-top: 4px;
  font-size: var(--td-font-size-body-small);
  color: var(--td-text-color-placeholder);
}

.t-form__error {
  margin-top: 4px;
  font-size: var(--td-font-size-body-small);
  color: var(--td-error-color);
  display: flex;
  align-items: center;
  gap: 4px;
}

.t-form__item.is-error .t-input,
.t-form__item.is-error .t-textarea,
.t-form__item.is-error .t-select {
  border-color: var(--td-error-color);
}

.t-form__item.is-error .t-form__label {
  color: var(--td-error-color);
}

/* 输入框 */
.t-input {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: var(--td-comp-size-m);
  padding: 0 12px;
  border: 1px solid var(--td-component-border);
  border-radius: var(--td-radius-default);
  background: var(--td-bg-color-container);
  transition: all var(--td-anim-duration-base) var(--td-anim-timing-ease-default);
}

.t-input:hover {
  border-color: var(--td-brand-color-hover);
}

.t-input:focus-within {
  border-color: var(--td-brand-color);
  box-shadow: 0 0 0 2px var(--td-brand-color-focus);
}

.t-input.is-disabled {
  background: var(--td-bg-color-component-disabled);
  border-color: var(--td-border-level-1-color);
  cursor: not-allowed;
}

.t-input.is-disabled input {
  color: var(--td-text-color-disabled);
  cursor: not-allowed;
}

.t-input input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: none;
  background: transparent;
  font-size: var(--td-font-size-body-medium);
  color: var(--td-text-color-primary);
}

.t-input input::placeholder {
  color: var(--td-text-color-placeholder);
}

.t-input__prefix,
.t-input__suffix {
  display: inline-flex;
  align-items: center;
  color: var(--td-text-color-placeholder);
  flex: none;
}

.t-input--l {
  height: var(--td-comp-size-l);
}

.t-input--s {
  height: var(--td-comp-size-s);
  padding: 0 8px;
}

.t-input--s input {
  font-size: var(--td-font-size-body-small);
}

.t-search-input {
  max-width: 360px;
}

.t-textarea {
  display: block;
  width: 100%;
  min-height: 88px;
  padding: 8px 12px;
  border: 1px solid var(--td-component-border);
  border-radius: var(--td-radius-default);
  background: var(--td-bg-color-container);
  resize: vertical;
  outline: none;
  font-size: var(--td-font-size-body-medium);
  line-height: 22px;
  color: var(--td-text-color-primary);
  transition: all var(--td-anim-duration-base) var(--td-anim-timing-ease-default);
}

.t-textarea::placeholder {
  color: var(--td-text-color-placeholder);
}

.t-textarea:hover {
  border-color: var(--td-brand-color-hover);
}

.t-textarea:focus {
  border-color: var(--td-brand-color);
  box-shadow: 0 0 0 2px var(--td-brand-color-focus);
}

/* 下拉选择（模拟） */
.t-select {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: var(--td-comp-size-m);
  padding: 0 12px;
  border: 1px solid var(--td-component-border);
  border-radius: var(--td-radius-default);
  background: var(--td-bg-color-container);
  cursor: pointer;
  font-size: var(--td-font-size-body-medium);
  transition: all var(--td-anim-duration-base) var(--td-anim-timing-ease-default);
}

.t-select:hover {
  border-color: var(--td-brand-color-hover);
}

.t-select.is-open,
.t-select.is-focus {
  border-color: var(--td-brand-color);
  box-shadow: 0 0 0 2px var(--td-brand-color-focus);
}

.t-select__value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.t-select__value.is-placeholder {
  color: var(--td-text-color-placeholder);
}

.t-select__arrow {
  flex: none;
  color: var(--td-text-color-placeholder);
  transition: transform var(--td-anim-duration-base) var(--td-anim-timing-ease-default);
}

.t-select.is-open .t-select__arrow {
  transform: rotate(180deg);
}

.t-select--auto {
  width: auto;
  min-width: 120px;
}

.t-select__panel {
  position: absolute;
  z-index: var(--console-z-popup);
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  padding: 4px;
  background: var(--td-bg-color-container);
  border-radius: var(--td-radius-default);
  box-shadow: var(--td-shadow-2);
  max-height: 260px;
  overflow-y: auto;
  display: none;
}

.t-select.is-open .t-select__panel {
  display: block;
  animation: t-pop-in var(--td-anim-duration-base) var(--td-anim-timing-ease-out);
}

.t-select__option {
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--td-comp-size-m);
  padding: 0 8px;
  border-radius: var(--td-radius-small);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--td-anim-duration-fast) linear;
}

.t-select__option:hover {
  background: var(--td-bg-color-container-hover);
}

.t-select__option.is-selected {
  color: var(--td-brand-color);
  background: var(--td-brand-color-light);
}

.t-select__option.is-selected::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--td-radius-circle);
  background: var(--td-brand-color);
  margin-left: auto;
}

@keyframes t-pop-in {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 复选框 / 单选框 */
.t-checkbox,
.t-radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: var(--td-font-size-body-medium);
  user-select: none;
}

.t-checkbox input,
.t-radio input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.t-checkbox__box,
.t-radio__box {
  width: 16px;
  height: 16px;
  flex: none;
  border: 1px solid var(--td-component-border);
  border-radius: var(--td-radius-small);
  background: var(--td-bg-color-container);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: all var(--td-anim-duration-base) var(--td-anim-timing-ease-default);
}

.t-radio__box {
  border-radius: var(--td-radius-circle);
}

.t-checkbox:hover .t-checkbox__box,
.t-radio:hover .t-radio__box {
  border-color: var(--td-brand-color);
}

.t-checkbox input:checked + .t-checkbox__box,
.t-radio input:checked + .t-radio__box {
  background: var(--td-brand-color);
  border-color: var(--td-brand-color);
  color: var(--td-text-color-anti);
}

.t-radio input:checked + .t-radio__box {
  color: var(--td-text-color-anti);
}

.t-radio__box::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--td-radius-circle);
  background: currentColor;
}

.t-checkbox input:indeterminate + .t-checkbox__box {
  background: var(--td-brand-color);
  border-color: var(--td-brand-color);
  color: var(--td-text-color-anti);
}

.t-checkbox input:checked + .t-checkbox__box .t-icon,
.t-checkbox input:indeterminate + .t-checkbox__box .t-icon {
  display: block;
}

.t-checkbox__box .t-icon {
  display: none;
  width: 12px;
  height: 12px;
}

.t-checkbox.is-disabled,
.t-radio.is-disabled {
  color: var(--td-text-color-disabled);
  cursor: not-allowed;
}

.t-checkbox.is-disabled .t-checkbox__box,
.t-radio.is-disabled .t-radio__box {
  background: var(--td-bg-color-component-disabled);
  border-color: var(--td-border-level-1-color);
  color: transparent;
}

.t-checkbox-group,
.t-radio-group {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

/* 开关 */
.t-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 40px;
  height: 22px;
  flex: none;
  border-radius: var(--td-radius-round);
  background: var(--td-gray-color-5);
  cursor: pointer;
  transition: background var(--td-anim-duration-base) var(--td-anim-timing-ease-default);
}

.t-switch__dot {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: var(--td-radius-circle);
  background: var(--td-bg-color-container);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform var(--td-anim-duration-base) var(--td-anim-timing-ease-default);
}

.t-switch.is-checked {
  background: var(--td-brand-color);
}

.t-switch.is-checked .t-switch__dot {
  transform: translateX(18px);
}

.t-switch.is-disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.t-switch--s {
  width: 32px;
  height: 18px;
}

.t-switch--s .t-switch__dot {
  width: 14px;
  height: 14px;
}

.t-switch--s.is-checked .t-switch__dot {
  transform: translateX(14px);
}

/* 滑块 */
.t-slider {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 420px;
}

input[type="range"].t-slider__input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: var(--td-radius-round);
  background: var(--td-gray-color-3);
  outline: none;
}

input[type="range"].t-slider__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: var(--td-radius-circle);
  background: var(--td-bg-color-container);
  border: 2px solid var(--td-brand-color);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
  transition: transform var(--td-anim-duration-fast) linear;
}

input[type="range"].t-slider__input::-webkit-slider-thumb:hover {
  transform: scale(1.12);
}

.t-slider__value {
  width: 48px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--td-text-color-secondary);
  font-size: var(--td-font-size-body-small);
}

/* 上传 */
.t-upload-dragger {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 28px 16px;
  border: 1px dashed var(--td-component-border);
  border-radius: var(--td-radius-default);
  background: var(--td-bg-color-container);
  color: var(--td-text-color-secondary);
  cursor: pointer;
  text-align: center;
  transition: all var(--td-anim-duration-base) var(--td-anim-timing-ease-default);
}

.t-upload-dragger:hover,
.t-upload-dragger.is-dragover {
  border-color: var(--td-brand-color);
  background: var(--td-brand-color-light);
  color: var(--td-brand-color);
}

.t-upload-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.t-upload-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--td-border-level-1-color);
  border-radius: var(--td-radius-default);
  font-size: var(--td-font-size-body-medium);
}

.t-upload-item.is-error {
  border-color: var(--td-error-color-3);
  background: var(--td-error-color-1);
}

/* ==========================================================================
   选项卡 / 步骤条 / 分段控制器
   ========================================================================== */

.t-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  border-bottom: 1px solid var(--td-border-level-1-color);
  padding: 0 20px;
  overflow-x: auto;
}

.t-tabs--plain {
  padding: 0;
}

.t-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 12px;
  font-size: var(--td-font-size-body-medium);
  color: var(--td-text-color-primary);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--td-anim-duration-base) var(--td-anim-timing-ease-default);
}

.t-tab:hover {
  color: var(--td-brand-color);
}

.t-tab.is-active {
  color: var(--td-brand-color);
  font-weight: var(--td-font-weight-medium);
}

.t-tab.is-active::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: -1px;
  height: 2px;
  border-radius: var(--td-radius-small) var(--td-radius-small) 0 0;
  background: var(--td-brand-color);
}

.t-tab.is-disabled {
  color: var(--td-text-color-disabled);
  cursor: not-allowed;
}

.t-tab-panel {
  display: none;
}

.t-tab-panel.is-active {
  display: block;
  animation: t-fade-in var(--td-anim-duration-slow) var(--td-anim-timing-ease-out);
}

@keyframes t-fade-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.t-steps {
  display: flex;
  align-items: flex-start;
  gap: 0;
  width: 100%;
}

.t-step {
  flex: 1 1 0;
  display: flex;
  gap: 8px;
  min-width: 0;
}

.t-step__indicator {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}

.t-step__dot {
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: var(--td-radius-circle);
  border: 1px solid var(--td-component-border);
  background: var(--td-bg-color-container);
  color: var(--td-text-color-secondary);
  font-size: var(--td-font-size-body-small);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--td-anim-duration-base) var(--td-anim-timing-ease-default);
}

.t-step.is-process .t-step__dot {
  border-color: var(--td-brand-color);
  background: var(--td-brand-color);
  color: var(--td-text-color-anti);
}

.t-step.is-finish .t-step__dot {
  border-color: var(--td-brand-color);
  color: var(--td-brand-color);
}

.t-step__line {
  flex: 1 1 auto;
  height: 1px;
  margin: 0 8px;
  background: var(--td-border-level-2-color);
  margin-top: 12px;
  min-width: 16px;
}

.t-step.is-finish .t-step__line {
  background: var(--td-brand-color);
}

.t-step__content {
  padding-top: 2px;
  min-width: 0;
}

.t-step__title {
  font-size: var(--td-font-size-body-medium);
  font-weight: var(--td-font-weight-medium);
  color: var(--td-text-color-primary);
}

.t-step.is-wait .t-step__title {
  color: var(--td-text-color-secondary);
  font-weight: var(--td-font-weight-regular);
}

.t-step__desc {
  font-size: var(--td-font-size-body-small);
  color: var(--td-text-color-placeholder);
  margin-top: 2px;
}

.t-segmented {
  display: inline-flex;
  align-items: center;
  padding: 2px;
  border-radius: var(--td-radius-default);
  background: var(--td-bg-color-component);
  gap: 2px;
}

.t-segmented__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border-radius: var(--td-radius-small);
  font-size: var(--td-font-size-body-medium);
  color: var(--td-text-color-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--td-anim-duration-base) var(--td-anim-timing-ease-default);
}

.t-segmented__item:hover {
  color: var(--td-brand-color);
}

.t-segmented__item.is-active {
  background: var(--td-bg-color-container);
  color: var(--td-brand-color);
  font-weight: var(--td-font-weight-medium);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   浮层：下拉菜单 / 提示 / 气泡确认 / 模态 / 抽屉
   ========================================================================== */

.t-popup {
  position: absolute;
  z-index: var(--console-z-popup);
  min-width: 140px;
  padding: 4px;
  background: var(--td-bg-color-container);
  border-radius: var(--td-radius-default);
  box-shadow: var(--td-shadow-2);
  display: none;
}

.t-popup.is-open {
  display: block;
  animation: t-pop-in var(--td-anim-duration-base) var(--td-anim-timing-ease-out);
}

.t-popup--right {
  right: 0;
  top: calc(100% + 6px);
}

.t-dropdown__item {
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--td-comp-size-m);
  padding: 0 8px;
  border-radius: var(--td-radius-small);
  font-size: var(--td-font-size-body-medium);
  color: var(--td-text-color-primary);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--td-anim-duration-fast) linear;
}

.t-dropdown__item:hover {
  background: var(--td-bg-color-container-hover);
  color: var(--td-brand-color);
}

.t-dropdown__item.is-danger {
  color: var(--td-error-color);
}

.t-dropdown__item.is-active {
  color: var(--td-brand-color);
  font-weight: var(--td-font-weight-medium);
  background: var(--td-brand-color-light);
}

.t-dropdown__item.is-active:hover {
  background: var(--td-brand-color-light-hover);
  color: var(--td-brand-color);
}

.t-dropdown__item.is-danger:hover {
  background: var(--td-error-color-1);
}

.t-dropdown__item.is-disabled {
  color: var(--td-text-color-disabled);
  cursor: not-allowed;
  background: transparent;
}

.t-dropdown__divider {
  height: 1px;
  margin: 4px 0;
  background: var(--td-border-level-1-color);
}

.t-dropdown__header {
  padding: 8px;
  font-size: var(--td-font-size-body-small);
  color: var(--td-text-color-placeholder);
}

.t-tooltip {
  position: fixed;
  z-index: var(--console-z-popup);
  padding: 6px 10px;
  border-radius: var(--td-radius-default);
  background: rgba(0, 0, 0, 0.9);
  color: var(--td-text-color-anti);
  font-size: var(--td-font-size-body-small);
  line-height: 18px;
  max-width: 280px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity var(--td-anim-duration-base) var(--td-anim-timing-ease-default),
    transform var(--td-anim-duration-base) var(--td-anim-timing-ease-default);
}

.t-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.t-popconfirm {
  min-width: 240px;
  padding: 12px;
}

.t-popconfirm__body {
  display: flex;
  gap: 8px;
  font-size: var(--td-font-size-body-medium);
  color: var(--td-text-color-primary);
}

.t-popconfirm__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

/* 模态 */
.t-mask {
  position: fixed;
  inset: 0;
  z-index: var(--console-z-mask);
  background: var(--td-bg-color-mask);
  opacity: 0;
  transition: opacity var(--td-anim-duration-base) linear;
}

.t-mask.is-visible {
  opacity: 1;
}

.t-modal {
  position: fixed;
  z-index: var(--console-z-modal);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -46%) scale(0.98);
  width: 520px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 96px);
  display: flex;
  flex-direction: column;
  background: var(--td-bg-color-container);
  border-radius: var(--td-radius-default);
  box-shadow: var(--td-shadow-3);
  opacity: 0;
  transition: opacity var(--td-anim-duration-base) linear,
    transform var(--td-anim-duration-base) var(--td-anim-timing-ease-out);
}

.t-modal.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.t-modal--s {
  width: 400px;
}

.t-modal--l {
  width: 720px;
}

.t-modal--xl {
  width: 960px;
}

.t-modal__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--td-border-level-1-color);
  font-size: var(--td-font-size-title-small);
  font-weight: var(--td-font-weight-bold);
}

.t-modal__close {
  margin-left: auto;
  display: inline-flex;
  color: var(--td-text-color-placeholder);
  cursor: pointer;
  border: 0;
  background: transparent;
  border-radius: var(--td-radius-default);
  padding: 4px;
}

.t-modal__close:hover {
  color: var(--td-text-color-primary);
  background: var(--td-bg-color-container-hover);
}

.t-modal__body {
  padding: 24px;
  overflow-y: auto;
  font-size: var(--td-font-size-body-medium);
  color: var(--td-text-color-primary);
}

.t-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 24px;
  border-top: 1px solid var(--td-border-level-1-color);
}

.t-modal__icon {
  width: 22px;
  height: 22px;
  color: var(--td-warning-color);
}

/* 抽屉 */
.t-drawer {
  position: fixed;
  z-index: var(--console-z-drawer);
  top: 0;
  right: 0;
  bottom: 0;
  width: 520px;
  max-width: 100vw;
  display: flex;
  flex-direction: column;
  background: var(--td-bg-color-container);
  box-shadow: var(--td-shadow-3);
  transform: translateX(100%);
  transition: transform var(--td-anim-duration-slow) var(--td-anim-timing-ease-out);
}

.t-drawer.is-visible {
  transform: translateX(0);
}

.t-drawer--s {
  width: 400px;
}

.t-drawer--l {
  width: 720px;
}

.t-drawer__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--td-border-level-1-color);
  font-size: var(--td-font-size-title-small);
  font-weight: var(--td-font-weight-bold);
  flex: none;
}

.t-drawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 20px;
}

.t-drawer__footer {
  flex: none;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--td-border-level-1-color);
}

/* ==========================================================================
   全局提示（Message / Notification）
   ========================================================================== */

.t-message-container {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--console-z-message);
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  pointer-events: none;
}

.t-message {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 240px;
  max-width: 520px;
  padding: 10px 16px;
  border-radius: var(--td-radius-default);
  background: var(--td-bg-color-container);
  box-shadow: var(--td-shadow-2);
  font-size: var(--td-font-size-body-medium);
  color: var(--td-text-color-primary);
  pointer-events: auto;
  animation: t-message-in var(--td-anim-duration-slow) var(--td-anim-timing-ease-out);
}

.t-message.is-leaving {
  animation: t-message-out var(--td-anim-duration-base) var(--td-anim-timing-ease-in) forwards;
}

.t-message--success .t-icon {
  color: var(--td-success-color);
}

.t-message--warning .t-icon {
  color: var(--td-warning-color);
}

.t-message--error .t-icon {
  color: var(--td-error-color);
}

.t-message--info .t-icon,
.t-message--loading .t-icon {
  color: var(--td-brand-color);
}

.t-message__close {
  margin-left: 8px;
  color: var(--td-text-color-placeholder);
  cursor: pointer;
  border: 0;
  background: transparent;
}

@keyframes t-message-in {
  from {
    opacity: 0;
    transform: translateY(-16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes t-message-out {
  to {
    opacity: 0;
    transform: translateY(-12px);
  }
}

.t-notification-container {
  position: fixed;
  top: 72px;
  right: 24px;
  z-index: var(--console-z-message);
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 360px;
  max-width: calc(100vw - 32px);
}

.t-notification {
  display: flex;
  gap: 12px;
  padding: 16px;
  border-radius: var(--td-radius-default);
  background: var(--td-bg-color-container);
  box-shadow: var(--td-shadow-3);
  animation: t-slide-in-right var(--td-anim-duration-slow) var(--td-anim-timing-ease-out);
}

.t-notification__title {
  font-size: var(--td-font-size-body-medium);
  font-weight: var(--td-font-weight-medium);
}

.t-notification__desc {
  margin-top: 4px;
  font-size: var(--td-font-size-body-small);
  color: var(--td-text-color-secondary);
}

@keyframes t-slide-in-right {
  from {
    opacity: 0;
    transform: translateX(24px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ==========================================================================
   反馈：进度 / 加载 / 骨架 / 空状态 / 结果页 / 告警条
   ========================================================================== */

.t-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.t-progress__track {
  flex: 1 1 auto;
  height: 6px;
  border-radius: var(--td-radius-round);
  background: var(--td-bg-color-component);
  overflow: hidden;
}

.t-progress__bar {
  height: 100%;
  border-radius: var(--td-radius-round);
  background: var(--td-brand-color);
  transition: width var(--td-anim-duration-slow) var(--td-anim-timing-ease-out);
}

.t-progress--success .t-progress__bar {
  background: var(--td-success-color);
}

.t-progress--warning .t-progress__bar {
  background: var(--td-warning-color);
}

.t-progress--error .t-progress__bar {
  background: var(--td-error-color);
}

.t-progress__label {
  flex: none;
  font-size: var(--td-font-size-body-small);
  color: var(--td-text-color-secondary);
  font-variant-numeric: tabular-nums;
  min-width: 36px;
  text-align: right;
}

.t-loading {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--td-text-color-secondary);
  font-size: var(--td-font-size-body-small);
}

.t-loading__spinner {
  width: 24px;
  height: 24px;
  border-radius: var(--td-radius-circle);
  border: 2.5px solid var(--td-brand-color-3);
  border-top-color: var(--td-brand-color);
  animation: t-spin 0.8s linear infinite;
}

.t-loading--s .t-loading__spinner {
  width: 16px;
  height: 16px;
  border-width: 2px;
}

.t-skeleton {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.t-skeleton__item {
  height: 16px;
  border-radius: var(--td-radius-small);
  background: linear-gradient(90deg, #f0f0f0 25%, #e6e6e6 37%, #f0f0f0 63%);
  background-size: 400% 100%;
  animation: t-shimmer 1.4s ease infinite;
}

.t-skeleton__item--title {
  height: 24px;
  width: 40%;
}

.t-skeleton__item--text {
  width: 100%;
}

.t-skeleton__item--short {
  width: 62%;
}

.t-skeleton__item--card {
  height: 120px;
  border-radius: var(--td-radius-default);
}

@keyframes t-shimmer {
  0% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0 50%;
  }
}

.t-empty,
.t-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 56px 24px;
  text-align: center;
}

.t-empty__image,
.t-result__image {
  width: 96px;
  height: 96px;
  margin-bottom: 8px;
}

.t-empty__title {
  font-size: var(--td-font-size-body-medium);
  color: var(--td-text-color-primary);
}

.t-empty__desc {
  font-size: var(--td-font-size-body-small);
  color: var(--td-text-color-placeholder);
  max-width: 420px;
}

.t-result__icon {
  width: 56px;
  height: 56px;
  margin-bottom: 8px;
}

.t-result--success .t-result__icon {
  color: var(--td-success-color);
}

.t-result--warning .t-result__icon {
  color: var(--td-warning-color);
}

.t-result--error .t-result__icon {
  color: var(--td-error-color);
}

.t-result--info .t-result__icon {
  color: var(--td-brand-color);
}

.t-result__title {
  font-size: var(--td-font-size-title-medium);
  font-weight: var(--td-font-weight-bold);
  color: var(--td-text-color-primary);
}

.t-result__desc {
  font-size: var(--td-font-size-body-medium);
  color: var(--td-text-color-secondary);
  max-width: 520px;
}

.t-result__extra {
  margin-top: 16px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.t-alert {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-radius: var(--td-radius-default);
  font-size: var(--td-font-size-body-medium);
  align-items: flex-start;
}

.t-alert--info {
  background: var(--td-brand-color-1);
  color: var(--td-text-color-primary);
}

.t-alert--success {
  background: var(--td-success-color-1);
}

.t-alert--warning {
  background: var(--td-warning-color-1);
}

.t-alert--error {
  background: var(--td-error-color-1);
}

.t-alert .t-icon {
  margin-top: 2px;
}

.t-alert--info .t-icon {
  color: var(--td-brand-color);
}

.t-alert--success .t-icon {
  color: var(--td-success-color);
}

.t-alert--warning .t-icon {
  color: var(--td-warning-color);
}

.t-alert--error .t-icon {
  color: var(--td-error-color);
}

.t-alert__title {
  font-weight: var(--td-font-weight-medium);
}

.t-alert__desc {
  color: var(--td-text-color-secondary);
  font-size: var(--td-font-size-body-small);
  margin-top: 2px;
}

.t-alert__close {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: var(--td-text-color-placeholder);
  cursor: pointer;
}

/* ==========================================================================
   数据展示：描述列表 / 统计 / 时间轴 / 代码块 / 图片网格
   ========================================================================== */

.t-desc {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  border: 1px solid var(--td-border-level-1-color);
  border-radius: var(--td-radius-default);
  overflow: hidden;
  background: var(--td-border-level-1-color);
  gap: 1px;
}

.t-desc__item {
  display: flex;
  background: var(--td-bg-color-container);
  min-height: 44px;
}

.t-desc__label {
  width: 116px;
  flex: none;
  padding: 11px 16px;
  background: var(--td-bg-color-secondarycontainer);
  color: var(--td-text-color-secondary);
  font-size: var(--td-font-size-body-medium);
  display: flex;
  align-items: center;
}

.t-desc__value {
  flex: 1 1 auto;
  min-width: 0;
  padding: 11px 16px;
  font-size: var(--td-font-size-body-medium);
  word-break: break-all;
  display: flex;
  align-items: center;
  gap: 6px;
}

.t-desc--wide .t-desc__item {
  grid-column: 1 / -1;
}

.t-timeline {
  display: flex;
  flex-direction: column;
}

.t-timeline__item {
  position: relative;
  display: flex;
  gap: 12px;
  padding-bottom: 20px;
}

.t-timeline__item:last-child {
  padding-bottom: 0;
}

.t-timeline__item:last-child .t-timeline__line {
  display: none;
}

.t-timeline__axis {
  position: relative;
  width: 12px;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.t-timeline__dot {
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: var(--td-radius-circle);
  background: var(--td-brand-color);
  box-shadow: 0 0 0 3px var(--td-brand-color-1);
}

.t-timeline__item--success .t-timeline__dot {
  background: var(--td-success-color);
  box-shadow: 0 0 0 3px var(--td-success-color-1);
}

.t-timeline__item--error .t-timeline__dot {
  background: var(--td-error-color);
  box-shadow: 0 0 0 3px var(--td-error-color-1);
}

.t-timeline__item--info .t-timeline__dot {
  background: var(--td-gray-color-5);
  box-shadow: 0 0 0 3px var(--td-gray-color-1);
}

.t-timeline__line {
  flex: 1 1 auto;
  width: 1px;
  margin-top: 4px;
  background: var(--td-border-level-2-color);
}

.t-timeline__content {
  flex: 1 1 auto;
  min-width: 0;
  margin-top: 0;
}

.t-timeline__title {
  font-size: var(--td-font-size-body-medium);
  color: var(--td-text-color-primary);
}

.t-timeline__time {
  font-size: var(--td-font-size-body-small);
  color: var(--td-text-color-placeholder);
  margin-top: 2px;
}

.t-code {
  position: relative;
  padding: 12px 16px;
  border-radius: var(--td-radius-default);
  background: var(--td-gray-color-1);
  border: 1px solid var(--td-border-level-1-color);
  font-family: var(--td-font-family-monospace);
  font-size: var(--td-font-size-body-small);
  line-height: 20px;
  overflow-x: auto;
  white-space: pre;
  color: var(--td-text-color-primary);
}

.t-code--dark {
  background: var(--td-gray-color-12);
  border-color: transparent;
  color: var(--td-gray-color-3);
}

.t-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}

.t-gallery__item {
  position: relative;
  border-radius: var(--td-radius-default);
  overflow: hidden;
  border: 1px solid var(--td-border-level-1-color);
  background: var(--td-bg-color-container);
  cursor: pointer;
  transition: box-shadow var(--td-anim-duration-base) var(--td-anim-timing-ease-default),
    transform var(--td-anim-duration-base) var(--td-anim-timing-ease-default);
}

.t-gallery__item:hover {
  box-shadow: var(--td-shadow-2);
  transform: translateY(-2px);
}

.t-gallery__item.is-selected {
  border-color: var(--td-brand-color);
  box-shadow: 0 0 0 1px var(--td-brand-color);
}

.t-gallery__thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, #eef2ff 0%, #dbe4ff 45%, #cfe0ff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--td-brand-color);
  overflow: hidden;
}

.t-gallery__thumb--a {
  background: linear-gradient(135deg, #e8f3ff 0%, #cfe0ff 100%);
}

.t-gallery__thumb--b {
  background: linear-gradient(135deg, #f3e8ff 0%, #dcc6ff 100%);
  color: #7d3ddc;
}

.t-gallery__thumb--c {
  background: linear-gradient(135deg, #e6fbf3 0%, #c2f0dd 100%);
  color: var(--td-success-color-6);
}

.t-gallery__thumb--d {
  background: linear-gradient(135deg, #fff3e0 0%, #ffd9a8 100%);
  color: var(--td-warning-color-7);
}

.t-gallery__check {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
}

.t-gallery__meta {
  padding: 10px 12px;
}

.t-gallery__name {
  font-size: var(--td-font-size-body-medium);
  color: var(--td-text-color-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.t-gallery__sub {
  margin-top: 2px;
  font-size: var(--td-font-size-body-small);
  color: var(--td-text-color-placeholder);
  display: flex;
  align-items: center;
  gap: 6px;
}

.t-gallery__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity var(--td-anim-duration-base) linear;
}

.t-gallery__item:hover .t-gallery__overlay {
  opacity: 1;
}

.t-gallery__overlay .t-button {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.6);
  color: var(--td-text-color-anti);
}

.t-gallery__overlay .t-button:hover {
  background: rgba(255, 255, 255, 0.28);
  color: var(--td-text-color-anti);
  border-color: var(--td-text-color-anti);
}

/* 模型卡片 */
.t-model-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  height: 100%;
  background: var(--td-bg-color-container);
  border: 1px solid var(--td-border-level-1-color);
  border-radius: var(--td-radius-default);
  transition: all var(--td-anim-duration-base) var(--td-anim-timing-ease-default);
}

.t-model-card:hover {
  border-color: var(--td-brand-color-3);
  box-shadow: var(--td-shadow-1);
}

.t-model-card__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.t-model-card__logo {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--td-radius-default);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--td-brand-color-light);
  color: var(--td-brand-color);
}

.t-model-card__name {
  font-size: var(--td-font-size-body-large);
  font-weight: var(--td-font-weight-medium);
}

.t-model-card__desc {
  margin-top: 2px;
  font-size: var(--td-font-size-body-small);
  color: var(--td-text-color-secondary);
  min-height: 40px;
}

.t-model-card__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: var(--td-font-size-body-small);
  color: var(--td-text-color-secondary);
}

.t-model-card__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--td-border-level-1-color);
}

/* ==========================================================================
   图表容器
   ========================================================================== */

.t-chart {
  position: relative;
  width: 100%;
}

.t-chart svg {
  display: block;
  width: 100%;
  overflow: visible;
}

.t-chart__legend {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: var(--td-font-size-body-small);
  color: var(--td-text-color-secondary);
}

.t-chart__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.t-chart__legend-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--td-radius-small);
  background: var(--td-brand-color);
}

.t-chart__legend-dot--alt {
  background: var(--td-brand-color-3);
}

.t-chart__axis-text {
  font-size: var(--td-font-size-s);
  fill: var(--td-text-color-placeholder);
}

.t-chart__grid-line {
  stroke: var(--td-border-level-1-color);
  stroke-dasharray: 3 3;
}

.t-chart__bar {
  fill: var(--td-brand-color-2);
  transition: fill var(--td-anim-duration-base) linear;
}

.t-chart__bar:hover {
  fill: var(--td-brand-color);
}

/* ==========================================================================
   键盘聚焦态（规范：间距 / 圆角 / 阴影 · 组件状态「聚焦」，令牌 --td-brand-color-focus）
   --------------------------------------------------------------------------
   现状：全站只有 .t-button、.t-input/.t-textarea 有聚焦反馈，其余可交互元素
   （页头操作区、菜单项、页签、分段控件、开关、勾选、下拉、浮层项、分页、
   卡片入口、上传区等）键盘 Tab 到之后没有任何可见反馈，无法满足规范中的
   「聚焦」状态与无障碍要求。
   这里统一补齐：用 outline 呈现（不覆盖元素自身的 --td-shadow-*，避免浮层/
   卡片的阴影被吃掉），颜色取品牌色、2px 偏移，`:where()` 降低权重便于业务覆盖。
   ========================================================================== */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible,
.t-header__action:focus-visible,
.t-header__user:focus-visible,
.t-menu__item:focus-visible,
.t-tab:focus-visible,
.t-segmented__item:focus-visible,
.t-switch:focus-visible,
.t-checkbox:focus-visible,
.t-radio:focus-visible,
.t-select:focus-visible,
.t-dropdown__item:focus-visible,
.t-pagination__item:focus-visible,
.t-icon-btn:focus-visible,
.t-modal__close:focus-visible,
.t-tag[data-check-tag]:focus-visible,
.t-card--hover:focus-visible,
.t-upload-dragger:focus-visible {
  outline: 2px solid var(--td-brand-color);
  outline-offset: 2px;
}