/*
 * classic.css — tt-* 组件外观，以及 Bootstrap 5 与设计令牌的衔接层。
 * 组件结构沿用 antd 的划分（按钮 / 表单 / 标签 / 表格 / 弹窗 ...），外观遵循浅色 Claude Design System：
 * 白卡片带 1px 环、浅灰填充的次要按钮与输入框、分段控件、阴影 e1–e4。字号一律来自 base.css 的 --t-* 令牌。
 */

/* ---------- Bootstrap 变量映射 ---------- */
:root {
  --bs-body-font-family: var(--font-sans);
  --bs-font-sans-serif: var(--font-sans);
  --bs-font-monospace: var(--font-mono);
  --bs-body-font-size: 14px;
  --bs-body-line-height: 1.5715;
  --bs-body-color: var(--text-1);
  --bs-body-bg: var(--bg-page);
  --bs-secondary-color: var(--text-2);
  --bs-tertiary-color: var(--text-3);
  --bs-emphasis-color: var(--text-1);
  --bs-heading-color: inherit;
  --bs-border-color: var(--border);
  --bs-border-radius: var(--radius-md);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-border-radius-xl: var(--radius-xl);
  --bs-border-radius-pill: var(--radius-full);
  --bs-primary: var(--primary);
  --bs-primary-rgb: 217, 119, 87;
  --bs-success: var(--success);
  --bs-success-rgb: 52, 199, 89;
  --bs-danger: var(--danger);
  --bs-danger-rgb: 215, 0, 21;
  --bs-warning-rgb: 255, 149, 0;
  --bs-link-color: var(--primary-text);
  --bs-link-color-rgb: 154, 52, 18;
  --bs-link-hover-color: var(--primary-text-hover);
  --bs-link-hover-color-rgb: 122, 52, 28;
  --bs-focus-ring-color: rgba(217, 119, 87, 0.25);
  --bs-box-shadow: var(--shadow-e2);
  --bs-box-shadow-sm: var(--shadow-e1);
  --bs-box-shadow-lg: var(--shadow-e3);
}

h1, h2, h3, h4, h5, h6 { color: inherit; }
button { font-family: inherit; }
[hidden] { display: none !important; }

/* ---------- 图标 ---------- */
.tt-icon {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  vertical-align: -0.125em;
  flex-shrink: 0;
}
.tt-icon svg { display: block; }
.tt-icon-spin svg { animation: tt-spin 1s linear infinite; }
@keyframes tt-spin { to { transform: rotate(360deg); } }

/* ---------- 按钮：xxs 20/4、xs 24/6、sm 28/8、md 32/8、lg 40/12。primary 陶土底 + #151515 字，default 无边框浅底，text/link 幽灵，danger 危险浅底 ---------- */
.tt-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 32px;
  padding: 0 14px;
  font: var(--t-button);
  white-space: nowrap;
  border-radius: 8px;
  border: 0;
  background: var(--control-fill);
  color: var(--text-1);
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur-fast) ease-out;
}
.tt-btn:hover { background: var(--control-fill-hover); color: var(--text-1); }
.tt-btn:active { background: var(--control-fill-hover); color: var(--text-1); transform: scale(0.98); }
.tt-btn:focus-visible { outline: 1.5px solid var(--primary); outline-offset: 2px; }

.tt-btn-primary { background: var(--primary); color: var(--text-1); }
.tt-btn-primary:hover { background: var(--primary-hover); color: var(--text-1); }
.tt-btn-primary:active { background: var(--primary-active); color: var(--text-1); }

.tt-btn-outline { background: var(--bg-card); color: var(--text-1); box-shadow: inset 0 0 0 var(--hairline) var(--border-strong); }
.tt-btn-outline:hover,
.tt-btn-outline:active { background: var(--gray-50); color: var(--text-1); }
/* 卡片里不放描边按钮：描边退回无边框浅底 */
.tt-card .tt-btn-outline,
.tt-list .tt-btn-outline,
.modal-content .tt-btn-outline,
.offcanvas .tt-btn-outline { box-shadow: none; background: var(--control-fill); }
.tt-card .tt-btn-outline:hover,
.tt-list .tt-btn-outline:hover,
.modal-content .tt-btn-outline:hover,
.offcanvas .tt-btn-outline:hover,
.tt-card .tt-btn-outline:active,
.tt-list .tt-btn-outline:active,
.modal-content .tt-btn-outline:active,
.offcanvas .tt-btn-outline:active { background: var(--control-fill-hover); }

.tt-btn-text { background: transparent; color: var(--primary-text); }
.tt-btn-text:hover { background: var(--hover-overlay); color: var(--primary-text-hover); }
.tt-btn-text:active { background: var(--press-overlay); color: var(--primary-text-hover); }

.tt-btn-link { background: transparent; color: var(--primary-text); padding-left: 4px; padding-right: 4px; }
.tt-btn-link:hover,
.tt-btn-link:active { background: transparent; color: var(--primary-text-hover); }

.tt-btn-danger { background: var(--danger-soft); color: var(--danger-text); }
.tt-btn-danger:hover,
.tt-btn-danger:active { background: var(--danger-soft); color: var(--danger-text); }
.tt-btn-primary.tt-btn-danger { background: var(--danger); color: var(--on-primary); }
.tt-btn-primary.tt-btn-danger:hover,
.tt-btn-primary.tt-btn-danger:active { background: var(--danger-text); color: var(--on-primary); }
.tt-btn-text.tt-btn-danger,
.tt-btn-link.tt-btn-danger { background: transparent; }
.tt-btn-text.tt-btn-danger:hover { color: var(--danger-text); background: var(--danger-soft); }
.tt-btn-link.tt-btn-danger:hover { color: var(--danger-text); }

.tt-btn-lg { height: 40px; padding: 0 18px; border-radius: 12px; font: var(--t-button-large); }
.tt-btn-sm { height: 28px; padding: 0 12px; gap: 6px; border-radius: 8px; }
.tt-btn-xs { height: 24px; padding: 0 8px; gap: 4px; border-radius: 6px; }
.tt-btn-xxs { height: 20px; padding: 0 6px; gap: 4px; border-radius: 4px; }
.tt-btn-block { display: flex; width: 100%; }
.tt-btn-icon { width: 32px; padding: 0; }
.tt-btn-sm.tt-btn-icon { width: 28px; }
.tt-btn-xs.tt-btn-icon { width: 24px; }
.tt-btn-xxs.tt-btn-icon { width: 20px; }
.tt-btn-lg.tt-btn-icon { width: 40px; }
/* 按钮内的箭头：hover 时右移 */
.tt-btn-arrow { display: inline-block; transition: transform var(--dur) var(--ease); }
@media (hover: hover) {
  .tt-btn:hover .tt-btn-arrow { transform: translateX(3px); }
}

/* 禁用 / 进行中：浅灰底 + 占位色字，不再半透明；进行中保持尺寸，文字前一个 16 的菊花（lib/ui.js setLoading） */
.tt-btn:disabled,
.tt-btn.is-disabled,
.tt-btn.is-loading {
  cursor: not-allowed;
  background: var(--control-fill) !important;
  box-shadow: none !important;
  color: var(--placeholder) !important;
}
.tt-btn:disabled:active,
.tt-btn.is-disabled:active,
.tt-btn.is-loading:active { transform: none; }
.tt-btn-text:disabled,
.tt-btn-link:disabled,
.tt-btn-text.is-disabled,
.tt-btn-link.is-disabled { background: transparent !important; }
.tt-btn.is-loading { pointer-events: none; }
.tt-btn.is-loading::before {
  content: '';
  width: 16px;
  height: 16px;
  flex: none;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: tt-spin 0.75s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .tt-btn:active { transform: none; }
}

/* ---------- 表单：输入框浅灰填充、无描边，聚焦 1.5px 陶土环 ---------- */
.tt-form-item { margin-bottom: 16px; }
.tt-form-item:last-child { margin-bottom: 0; }
.tt-form-label {
  display: block;
  padding-bottom: 6px;
  font: var(--t-body-strong);
  color: var(--text-1);
}
.tt-form-label.is-required::after {
  content: '*';
  margin-inline-start: 4px;
  color: var(--danger);
}
.tt-form-error {
  margin-top: 6px;
  font: var(--t-caption);
  color: var(--danger-text);
}
.tt-form-error:empty { display: none; }
.tt-form-help { margin-top: 6px; font: var(--t-caption); color: var(--text-3); }

.tt-input,
.tt-select,
.tt-textarea {
  display: block;
  width: 100%;
  height: var(--input-h);
  padding: 0 12px;
  font: var(--t-input);
  color: var(--text-1);
  background-color: var(--bg-sunken);
  border: 0;
  border-radius: var(--radius-md);
  box-shadow: none;
  outline: none;
  transition: box-shadow var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
  appearance: none;
}
.tt-textarea { height: auto; min-height: 96px; padding: 8px 12px; resize: vertical; }
.tt-input::placeholder,
.tt-textarea::placeholder { color: var(--placeholder); opacity: 1; }
.tt-input:focus,
.tt-select:focus,
.tt-textarea:focus { box-shadow: var(--ring-focus); }
.tt-input:disabled,
.tt-select:disabled,
.tt-textarea:disabled { background-color: var(--gray-50); color: var(--text-3); cursor: not-allowed; }
.tt-input-lg { height: var(--input-h-lg); font: var(--t-input-large); }
.tt-select {
  padding-right: 36px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23525252' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6' d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px 14px;
}
.tt-input.is-error,
.tt-form-item.has-error .tt-input,
.tt-form-item.has-error .tt-select,
.tt-form-item.has-error .tt-textarea,
.tt-form-item.has-error .tt-input-affix { box-shadow: inset 0 0 0 1px var(--danger); }
.tt-input.is-error:focus,
.tt-form-item.has-error .tt-input:focus,
.tt-form-item.has-error .tt-select:focus,
.tt-form-item.has-error .tt-textarea:focus,
.tt-form-item.has-error .tt-input-affix:focus-within { box-shadow: inset 0 0 0 1.5px var(--danger); }
.tt-form-item.has-error .tt-input-affix .tt-input { box-shadow: none; }

/* 带前后缀的输入框 */
.tt-input-affix {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: var(--input-h);
  padding: 0 12px;
  font: var(--t-input);
  background-color: var(--bg-sunken);
  border: 0;
  border-radius: var(--radius-md);
  transition: box-shadow var(--dur-fast) var(--ease);
}
.tt-input-affix.tt-input-lg { height: var(--input-h-lg); font: var(--t-input-large); }
.tt-input-affix:focus-within { box-shadow: var(--ring-focus); }
.tt-input-affix .tt-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font: inherit;
}
.tt-input-prefix,
.tt-input-suffix {
  display: inline-flex;
  align-items: center;
  color: var(--text-3);
}

.tt-input-toggle {
  display: inline-flex;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  padding: 2px;
  transition: color var(--dur-fast) var(--ease);
}

.tt-input-toggle:hover { color: var(--text-1); }
.tt-input-toggle .pw-hide { display: none; }
.tt-input-toggle.is-visible .pw-show { display: none; }
.tt-input-toggle.is-visible .pw-hide { display: inline-flex; }

/* 输入组：输入框 + 按钮 */
.tt-input-group { display: flex; gap: 8px; align-items: stretch; }
.tt-input-group > .tt-input,
.tt-input-group > .tt-input-affix,
.tt-input-group > .tt-select { flex: 1; min-width: 0; }
.tt-input-group > .tt-btn { height: auto; min-height: var(--input-h); flex-shrink: 0; }

/* 复制框：浅灰底 + 单行等宽编码 + 右侧小按钮（邀请链接、订阅链接） */
.tt-copy-field {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: var(--input-h);
  padding: 0 4px 0 12px;
  border-radius: var(--radius-md);
  background: var(--bg-sunken);
}
.tt-copy-field-value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--text-1);
  font: var(--t-body);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tt-copy-field > .tt-btn { flex: none; height: calc(var(--input-h) - 8px); }
.tt-copy-field > .tt-btn-default { background: var(--bg-card); }
.tt-copy-field > .tt-btn-default:hover { background: var(--gray-50); }

/* 开关（Bootstrap form-switch） */
.tt-switch.form-check { display: inline-flex; align-items: center; gap: 8px; min-height: 24px; margin: 0; padding: 0; }
.tt-switch .form-check-input {
  float: none;
  width: 40px;
  height: 22px;
  margin: 0;
  cursor: pointer;
  border: 0;
  background-color: var(--border-strong);
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}
.tt-switch .form-check-input:checked { background-color: var(--primary); }
.tt-switch .form-check-input:focus { box-shadow: var(--focus-ring); }
.tt-switch .form-check-input:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- 标签：圆角 6，*-soft 底 + *-text 字 ---------- */
.tt-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font: var(--t-label);
  white-space: nowrap;
  border-radius: var(--radius-xs);
  border: 0;
  background: var(--gray-100);
  color: var(--gray-700);
  margin-inline-end: 6px;
}
.tt-tag:last-child { margin-inline-end: 0; }
.tt-tag-lg { padding: 4px 10px; }
.tt-tag-green,
.tt-tag-success { color: var(--success-text); background: var(--success-soft); }
.tt-tag-red,
.tt-tag-error { color: var(--danger-text); background: var(--danger-soft); }
.tt-tag-orange,
.tt-tag-warning { color: var(--warning-text); background: var(--warning-soft); }
.tt-tag-gold { color: var(--warning-text); background: var(--accent-soft); }
/* 紫色、青色并入品牌蓝（禁紫） */
.tt-tag-blue,
.tt-tag-processing,
.tt-tag-purple,
.tt-tag-cyan { color: var(--primary-text-hover); background: var(--primary-soft); }

/* 「大奖」角标：浅琥珀底 + 深琥珀字（只用于最高奖） */
.tt-badge-prize {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 6px;
  border-radius: var(--radius-xs);
  background: var(--accent-soft);
  color: var(--warning-text);
  font: var(--t-micro);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------- 徽标数字 ---------- */
.tt-badge { position: relative; display: inline-flex; align-items: center; }
.tt-badge-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font: var(--t-micro);
  font-variant-numeric: tabular-nums;
  color: var(--on-primary);
  white-space: nowrap;
  background: var(--danger);
  border-radius: var(--radius-full);
  box-shadow: 0 0 0 2px var(--bg-card);
}
.tt-badge-count:empty,
.tt-badge-count[data-count='0'] { display: none; }
.tt-badge > .tt-badge-count {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
}

/* ---------- 提示条：浅底 + 同色淡描边，圆角 12 ---------- */
.tt-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font: var(--t-body);
}
.tt-alert-icon { display: inline-flex; padding-top: 3px; line-height: 0; font-size: var(--icon-16); }
.tt-alert-content { flex: 1; min-width: 0; }
.tt-alert-message { color: var(--text-1); font: var(--t-body-strong); }
.tt-alert-description { margin-top: 2px; color: var(--text-2); font: var(--t-body-secondary); }
.tt-alert-info { background: var(--primary-soft); border-color: rgba(var(--primary-rgb), 0.22); }
.tt-alert-info .tt-alert-icon { color: var(--primary); }
.tt-alert-success { background: var(--success-soft); border-color: rgba(var(--success-rgb), 0.22); }
.tt-alert-success .tt-alert-icon { color: var(--success); }
.tt-alert-warning { background: var(--warning-soft); border-color: rgba(var(--warning-rgb), 0.22); }
.tt-alert-warning .tt-alert-icon { color: var(--warning); }
.tt-alert-error { background: var(--danger-soft); border-color: rgba(var(--danger-rgb), 0.22); }
.tt-alert-error .tt-alert-icon { color: var(--danger); }
.tt-alert.tt-alert-with-description { padding: 12px 14px; }
.tt-alert-with-description .tt-alert-icon { padding-top: 1px; font-size: var(--icon-20); }
.tt-alert-with-description .tt-alert-message { display: block; margin-bottom: 2px; }
.tt-alert-with-description .tt-alert-description { display: block; margin-top: 0; }

/* ---------- 空状态：插图 96（small 64）或浅灰图标块 + 标题 + 说明（lib/ui.js emptyHtml） ---------- */
.tt-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 16px;
  text-align: center;
}
.tt-empty-sm { padding: 20px 16px; }
.tt-empty > .tt-illus,
.tt-empty-icon { margin-bottom: 12px; }
.tt-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-inner);
  background: var(--bg-sunken);
  color: var(--placeholder);
  font-size: var(--icon-24);
}
.tt-empty-sm .tt-empty-icon { width: 40px; height: 40px; border-radius: var(--radius-md); font-size: var(--icon-18); }
.tt-empty-title { color: var(--text-1); font: var(--t-title); }
.tt-empty-desc { max-width: 360px; margin-top: 4px; color: var(--text-2); font: var(--t-body-secondary); }
.tt-empty-action { margin-top: 16px; }

/* ---------- 加载 ---------- */
.tt-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2.5px solid currentColor;
  border-right-color: transparent;
  color: var(--primary);
  animation: tt-spin 0.75s linear infinite;
  vertical-align: middle;
}
.tt-spinner-sm { width: 16px; height: 16px; border-width: 2px; }
.tt-spinner-lg { width: 32px; height: 32px; border-width: 3px; }
.tt-spin-block { display: flex; align-items: center; justify-content: center; padding: 40px 0; }
.tt-spin-container { position: relative; }
.tt-spin-container > .tt-spin-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 60px;
}
.tt-spin-container.is-loading > .tt-spin-overlay { display: flex; }
.tt-spin-container.is-loading > :not(.tt-spin-overlay) { opacity: 0.5; pointer-events: none; transition: opacity var(--dur) var(--ease); }

/* 骨架屏：浅灰底扫光，圆角跟随所替代的元素 */
.tt-skeleton-line {
  position: relative;
  overflow: hidden;
  height: 14px;
  border-radius: var(--radius-xs);
  background: var(--bg-sunken);
}
.tt-skeleton-line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65%);
  animation: tt-skeleton 2s linear infinite;
}
.tt-skeleton-line + .tt-skeleton-line { margin-top: 12px; }
@keyframes tt-skeleton { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

/* ---------- 表格（放在白卡里）：表头浅灰底 + label 字阶，行高 48、行间发丝线；数字列 .is-num 等宽右对齐 ---------- */
.tt-table-wrap { width: 100%; overflow-x: auto; }
.tt-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font: var(--t-body);
  color: var(--text-1);
}
.tt-table th {
  height: 36px;
  padding: 0 16px;
  font: var(--t-label);
  text-align: left;
  white-space: nowrap;
  color: var(--text-2);
  background: var(--table-head);
  border: 0;
}
.tt-table th:first-child { border-start-start-radius: var(--radius-sm); border-end-start-radius: var(--radius-sm); }
.tt-table th:last-child { border-start-end-radius: var(--radius-sm); border-end-end-radius: var(--radius-sm); }
.tt-table td {
  height: var(--row-h);
  padding: 13px 16px;
  border-bottom: 0;
  box-shadow: inset 0 calc(var(--hairline) * -1) 0 var(--border);
  vertical-align: middle;
}
.tt-table tbody tr:last-child > td { border-bottom: 0; box-shadow: none; }
.tt-table .is-num { text-align: right; font-variant-numeric: tabular-nums; }
.tt-table tbody tr { transition: background-color var(--dur-fast) var(--ease); }
.tt-table tbody tr:hover > td { background: var(--row-hover); }
.tt-table .tt-table-empty td { padding: 0; border-bottom: 0; }
.tt-table .tt-table-empty:hover > td { background: transparent; }

/* ---------- 分页：方块页码 ---------- */
.tt-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  font: var(--t-body);
}
.tt-pagination button {
  min-width: var(--control-h-sm);
  height: var(--control-h-sm);
  padding: 0 8px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.tt-pagination button:hover:not(:disabled) { background: var(--hover-overlay); color: var(--text-1); }
.tt-pagination button.active,
.tt-pagination button.active:hover { background: var(--primary); color: var(--text-1); font-weight: 600; }
.tt-pagination button:disabled { color: var(--placeholder); cursor: not-allowed; }
.tt-pagination .tt-page-ellipsis { color: var(--placeholder); padding: 0 4px; letter-spacing: 2px; }
.tt-pagination .tt-page-total { color: var(--text-3); margin-right: 6px; }
.tt-pagination-sm button { min-width: 24px; height: 24px; font: var(--t-caption); }
.tt-pagination-center { justify-content: center; }

/* ---------- 标签页：分段控件（1px 内边距、rgba(0,0,0,0.06) 轨道、白滑块、0.5px 内描边、120ms 吸附）；页级下划线导航用 tt-tabs--line ---------- */
.tt-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  width: max-content;
  max-width: 100%;
  margin: 0 0 16px;
  padding: 1px;
  list-style: none;
  border-radius: var(--radius-md);
  background: var(--segment-track);
  overflow-x: auto;
  scrollbar-width: none;
}
.tt-tabs::-webkit-scrollbar { display: none; }
.tt-tabs button,
.tt-tabs a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: none;
  height: 28px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-2);
  font: var(--t-control);
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
/* 等分宽度只在 chrome.js 写入 --tt-tab-count 后生效；未设置时声明无效，退回内容宽度。不用 :has() 做布局 */
.tt-tabs:not(.tt-tabs--line) > button,
.tt-tabs:not(.tt-tabs--line) > a,
.tt-tabs:not(.tt-tabs--line) > li {
  flex: 1 1 calc((100% - 2px) / var(--tt-tab-count));
  width: calc((100% - 2px) / var(--tt-tab-count));
}
.tt-tabs button:hover,
.tt-tabs a:hover { color: var(--text-1); }
.tt-tabs .active {
  background: var(--bg-card);
  color: var(--text-1);
  font-weight: 600;
  box-shadow: var(--shadow-thumb);
}
.tt-tabs--line {
  gap: 24px;
  width: auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border-bottom: 1px solid var(--border);
}
.tt-tabs--line button,
.tt-tabs--line a { flex: none; width: auto; height: auto; padding: 12px 0; border-radius: 0; }
.tt-tabs--line .active { background: transparent; box-shadow: none; }
.tt-tabs--line .active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--primary);
}

/* ---------- 下拉菜单（Bootstrap Dropdown）：浮层白底 + e3、圆角 8、无描边 ---------- */
.tt-dropdown.dropdown-menu {
  --bs-dropdown-bg: var(--bg-raised);
  --bs-dropdown-color: var(--text-1);
  --bs-dropdown-border-color: transparent;
  --bs-dropdown-border-width: 0;
  --bs-dropdown-border-radius: var(--radius-md);
  --bs-dropdown-link-color: var(--text-1);
  --bs-dropdown-link-hover-color: var(--text-1);
  --bs-dropdown-link-hover-bg: var(--hover-overlay);
  --bs-dropdown-link-active-color: var(--primary-text);
  --bs-dropdown-link-active-bg: var(--selected-fill);
  --bs-dropdown-divider-bg: var(--border-subtle);
  --bs-dropdown-item-padding-y: 8px;
  --bs-dropdown-item-padding-x: 10px;
  --bs-dropdown-padding-x: 6px;
  --bs-dropdown-padding-y: 6px;
  --bs-dropdown-item-border-radius: var(--radius-sm);
  box-shadow: var(--shadow-e3);
  min-width: 180px;
  font: var(--t-control);
}
.tt-dropdown .dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: var(--radius-sm);
  font: inherit;
}
.tt-dropdown .dropdown-item.text-danger { color: var(--danger-text) !important; }
.tt-dropdown .dropdown-item.text-danger:hover { background: var(--danger-soft); }
/* 带说明的菜单项：标题 + 一行灰字 */
.tt-dropdown-desc { display: block; color: var(--text-3); font: var(--t-caption); }

/* ---------- 弹窗（Bootstrap Modal）：白底、圆角 16、popover 阴影 e4。默认 520，确认框 400 ---------- */
.modal {
  --bs-modal-width: 520px;
  --bs-modal-bg: var(--bg-raised);
  --bs-modal-color: var(--text-1);
  --bs-modal-border-color: transparent;
  --bs-modal-border-width: 0;
  --bs-modal-border-radius: var(--radius-xl);
  --bs-modal-inner-border-radius: var(--radius-xl);
  --bs-modal-padding: 24px;
  --bs-modal-header-padding: 24px 24px 0;
  --bs-modal-header-border-width: 0;
  --bs-modal-footer-border-width: 0;
  --bs-modal-title-line-height: 28px;
  --bs-modal-box-shadow: var(--shadow-e4);
}
.modal-content { box-shadow: var(--bs-modal-box-shadow); }
.modal.fade .modal-dialog { transition-duration: var(--dur-slow); transition-timing-function: var(--ease); }
.modal-backdrop { --bs-backdrop-bg: #000; --bs-backdrop-opacity: 0.4; }
.modal-header { align-items: flex-start; }
.modal-header + .modal-body { padding-top: 8px; }
.modal-body:has(+ .modal-footer) { padding-bottom: 0; }
.modal-title { font: var(--t-dialog-title); color: var(--text-1); }
.modal-footer { gap: 8px; padding: 24px; }
.modal-footer > * { margin: 0; }
@media (min-width: 769px) {
  .tt-modal .modal-dialog:not(.modal-dialog-centered) { margin-top: 96px; margin-bottom: 24px; }
}
.tt-modal .btn-close,
.offcanvas .btn-close {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: var(--radius-sm);
  opacity: 0.55;
  background-size: 12px;
  box-shadow: none;
  transition: opacity var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.tt-modal .btn-close:hover,
.offcanvas .btn-close:hover { opacity: 0.9; background-color: var(--hover-overlay); }
.tt-modal .btn-close:focus-visible,
.offcanvas .btn-close:focus-visible { outline: 1.5px solid var(--primary); outline-offset: 2px; }
/* 确认框（lib/confirm.js）：宽 400，标题 + 说明，按钮右对齐 */
.tt-confirm { --bs-modal-width: 400px; }
.tt-confirm-title { margin: 0 0 8px; color: var(--text-1); font: var(--t-dialog-title); }
.tt-confirm-text { margin: 0; color: var(--text-2); font: var(--t-body-secondary); }

/* ---------- 抽屉（Bootstrap Offcanvas） ---------- */
.offcanvas {
  transition-duration: var(--dur-slow);
  transition-timing-function: var(--ease);
  --bs-offcanvas-bg: var(--bg-raised);
  --bs-offcanvas-color: var(--text-1);
  --bs-offcanvas-border-color: var(--border);
  --bs-offcanvas-padding-x: 24px;
  --bs-offcanvas-padding-y: 16px;
  --bs-offcanvas-box-shadow: var(--shadow-e4);
}
.offcanvas.show,
.offcanvas.showing { box-shadow: var(--bs-offcanvas-box-shadow); }
.offcanvas-header { border-bottom: 0; box-shadow: inset 0 calc(var(--hairline) * -1) 0 var(--border); }
.offcanvas-title { font: var(--t-dialog-title); }
.offcanvas-backdrop { --bs-backdrop-bg: #000; --bs-backdrop-opacity: 0.4; }
.tt-drawer.offcanvas-end { --bs-offcanvas-width: 520px; }

/* ---------- 结果弹窗（lib/message.js：message.* 与 resultDialog）：84 插图 + 居中标题 + 全宽「好的」 ---------- */
/* 自带遮罩，不走 Bootstrap Modal；层级在所有 Bootstrap 浮层之上，手机上同样居中 */
.tt-result {
  position: fixed;
  inset: 0;
  z-index: 1095;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px calc(16px + var(--safe-right)) 24px calc(16px + var(--safe-left));
  background: var(--mask);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease);
}
/* 2px 模糊仅在支持时叠加；X5 / 老 WebView 保持 40% 实色遮罩 */
@supports ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
  .modal-backdrop,
  .offcanvas-backdrop,
  .tt-result {
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }
}
.tt-result.is-in { opacity: 1; }
.tt-result-dialog {
  width: 100%;
  max-width: 400px;
  max-height: 100%;
  overflow-y: auto;
  padding: 22px 24px 24px;
  border-radius: var(--radius-xl);
  background: var(--bg-raised);
  box-shadow: var(--shadow-e4);
  text-align: center;
  transform: scale(0.96);
  transition: transform var(--dur-slow) var(--ease);
}
.tt-result.is-in .tt-result-dialog { transform: none; }
.tt-result-dialog:focus { outline: none; }
/* 插图背后一团极淡的陶土柔光（占位 140×104，柔光 140×140 居中） */
.tt-result-art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 104px;
  margin: 0 auto;
}
.tt-result-art::before {
  content: '';
  position: absolute;
  top: -18px;
  left: 0;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--primary-rgb), 0.1), rgba(var(--primary-rgb), 0));
}
.tt-result-art > .tt-illus { position: relative; }
.tt-result-title { margin: 12px 0 0; color: var(--text-1); font: var(--t-dialog-title); overflow-wrap: anywhere; }
/* 超过 12 个字的长句（多是报错原文）小一档，免得 400 宽里折行只剩一两个字 */
.tt-result-title.is-long { font: var(--t-title); }
.tt-result-value { margin: 4px 0 0; color: var(--primary-text); font: var(--t-stat-large); font-variant-numeric: tabular-nums; }
.tt-result-value.is-accent { color: var(--warning-text); }
.tt-result-value.is-success { color: var(--success-text); }
.tt-result-message { margin: 4px 0 0; color: var(--text-2); font: var(--t-body-secondary); overflow-wrap: anywhere; }
.tt-result-actions { margin-top: 24px; }

/* ---------- 进行中轻量指示（message.loading）：顶部居中白色胶囊，无遮罩、不打断 ---------- */
.tt-message {
  position: fixed;
  top: calc(16px + var(--safe-top));
  left: 0;
  right: 0;
  z-index: 1095;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.tt-message-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: min(92vw, 560px);
  padding: 10px 16px;
  border-radius: var(--radius-md);
  background: var(--bg-raised);
  color: var(--text-1);
  box-shadow: var(--shadow-e3);
  font: var(--t-control);
  pointer-events: auto;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.tt-message-item.is-in { opacity: 1; transform: none; }
.tt-message-icon { display: inline-flex; }

/* ---------- 3D 插图（Fluent Emoji，见 lib/illus.js）：固定尺寸阶梯，首次出现可淡入一次 ---------- */
.tt-illus {
  display: inline-block;
  flex: none;
  object-fit: contain;
  vertical-align: middle;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.tt-illus--14 { width: 14px; height: 14px; }
.tt-illus--20 { width: 20px; height: 20px; }
.tt-illus--28 { width: 28px; height: 28px; }
.tt-illus--40 { width: 40px; height: 40px; }
.tt-illus--46 { width: 46px; height: 46px; }
.tt-illus--64 { width: 64px; height: 64px; }
.tt-illus--84 { width: 84px; height: 84px; }
.tt-illus--96 { width: 96px; height: 96px; }
.tt-illus--128 { width: 128px; height: 128px; }
.tt-illus--136 { width: 136px; height: 136px; }
.tt-illus--appear,
.tt-hero-art { animation: tt-illus-in 500ms cubic-bezier(0.33, 1, 0.68, 1) both; }
/* 用独立的 translate 属性，不占用 transform（插图组合在手机上要 scale，主插图要 rotate） */
@keyframes tt-illus-in {
  from { opacity: 0; translate: 0 8px; }
  to { opacity: 1; translate: none; }
}

/* ---------- 主视觉（tt-hero-card）：浅陶土渐变 + 两团柔光；左侧眉标 / 标题 / 副标题 / 数据胶囊，右侧插图组合。每屏最多一个 ---------- */
/* 首页 home.css 的 tt-hero* 是公共页主视觉，与这里无关；tt-hero-backdrop 给认证页左栏铺满用（占用 ::before / ::after） */
.tt-hero-card,
.tt-hero-backdrop {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--grad-hero);
}
.tt-hero-card::before,
.tt-hero-card::after,
.tt-hero-backdrop::before,
.tt-hero-backdrop::after {
  content: '';
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}
.tt-hero-card::before,
.tt-hero-backdrop::before {
  top: -80px;
  right: -40px;
  width: 260px;
  height: 260px;
  background: radial-gradient(closest-side, rgba(var(--primary-rgb), 0.14), rgba(var(--primary-rgb), 0));
}
.tt-hero-card::after,
.tt-hero-backdrop::after {
  right: 160px;
  bottom: -90px;
  width: 200px;
  height: 200px;
  background: radial-gradient(closest-side, rgba(var(--sky-rgb), 0.16), rgba(var(--sky-rgb), 0));
}
.tt-hero-card {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 168px;
  padding: 28px;
  border-radius: var(--radius-hero);
  box-shadow: var(--shadow-e1);
}
.tt-hero-card-body { flex: 1; min-width: 0; max-width: 520px; }
.tt-hero-card-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  margin-bottom: 12px;
  padding: 0 10px 0 8px;
  border: 1px solid var(--primary-soft-hover);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--primary-text);
  font: var(--t-label);
}
.tt-hero-card-title { margin: 0; color: var(--text-1); font: var(--t-hero-title); }
.tt-hero-card-sub { margin: 8px 0 0; color: var(--text-2); font: var(--t-body-secondary); }
.tt-hero-card-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.tt-hero-card-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--primary-soft);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.8);
}
.tt-hero-card-stat-label { color: var(--text-2); font: var(--t-caption); }
.tt-hero-card-stat-value { color: var(--text-1); font: var(--t-title); font-variant-numeric: tabular-nums; }
.tt-hero-card > .tt-hero-art { margin-left: auto; margin-right: -4px; }

/* 插图组合（设计尺寸 220×168）：主插图 136（+4°）、左下点缀 64（-10°）、右上点缀 46，底部一圈柔影；首次出现整组淡入 */
.tt-hero-art { position: relative; flex: none; width: 220px; height: 168px; }
.tt-hero-art::before {
  content: '';
  position: absolute;
  top: 141px;
  left: 50px;
  width: 120px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--primary-rgb), 0.18), rgba(var(--primary-rgb), 0));
}
.tt-hero-art > .tt-illus { position: absolute; }
.tt-hero-art-main { top: 10px; left: 42px; transform: rotate(4deg); }
.tt-hero-art-bl { top: 76px; left: 38px; transform: rotate(-10deg); }
.tt-hero-art-tr { top: -1px; left: 151px; }

/* ---------- 通用辅助 ---------- */

.visually-hidden-focusable:not(:focus):not(:focus-within) { position: absolute !important; }

/* 状态圆点：在线 / 警告 / 离线 */
.tt-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--gray-400); flex: none; }
.tt-dot--ok { background: var(--success); }
.tt-dot--warn { background: var(--warning); }
.tt-dot--off { background: #ef4444; }
.tt-dot--ready { background: #d97757; }
.tt-dot--running { background: #d97757; animation: tt-dot-blink 1.2s ease-in-out infinite; }
@keyframes tt-dot-blink {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

/* ==========================================================================
 * 手机端（≤768px）：表单 16px（避免 iOS 聚焦放大）、弹窗统一为底部弹层、抽屉安全区；
 * 按钮阶梯保持 20 / 24 / 28 / 32 / 40；输入框仍是 44 / 48，字号 16px
 * ========================================================================== */
@media (max-width: 768px) {
  .tt-input,
  .tt-select,
  .tt-textarea,
  .tt-input-affix,
  .tt-input-lg { font-size: 16px; }
  .tt-input-toggle { padding: 8px; margin-right: -8px; }
  .tt-pagination button { min-width: 36px; height: 36px; }
  .tt-tabs button,
  .tt-tabs a { height: 36px; font-size: 15px; }
  .tt-tabs--line { gap: 20px; }
  .tt-tabs--line button,
  .tt-tabs--line a { height: auto; min-height: 44px; padding: 0; }

  /* 主视觉：插图组合缩到 136×104 放右上角，眉标和标题右侧让出位置；副标题和数据胶囊占满宽度 */
  .tt-hero-card { display: block; min-height: 0; padding: 20px; }
  .tt-hero-card > .tt-hero-art {
    position: absolute;
    top: 12px;
    right: 8px;
    margin: 0;
    transform: scale(0.618);
    transform-origin: top right;
  }
  .tt-hero-card:not(.tt-hero-card--no-art) .tt-hero-card-eyebrow,
  .tt-hero-card:not(.tt-hero-card--no-art) .tt-hero-card-title { margin-right: 124px; }
  .tt-hero-card-stats { gap: 8px; margin-top: 16px; }
  .tt-hero-card-stat { height: 32px; padding: 0 10px; gap: 5px; border-radius: 10px; }

  /* 底部弹层：贴底满宽、上圆角、顶部把手；内容区独立滚动，底部按钮常驻并让出 Home 指示条 */
  .tt-modal:not(.tt-modal--center) .modal-dialog {
    display: flex;
    align-items: flex-end;
    width: 100%;
    max-width: none;
    min-height: 100%;
    margin: 0;
  }
  .tt-modal.fade:not(.tt-modal--center) .modal-dialog {
    transform: translate3d(0, 100%, 0);
    transition: transform 0.3s var(--ease);
  }
  .tt-modal.show:not(.tt-modal--center) .modal-dialog { transform: none; }
  .tt-modal:not(.tt-modal--center) .modal-content {
    max-height: calc(100vh - 24px);
    max-height: calc(var(--vvh, var(--vh)) - var(--safe-top) - 24px);
    overflow: hidden;
    border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;
    padding-left: var(--safe-left);
    padding-right: var(--safe-right);
  }
  .tt-modal:not(.tt-modal--center) .modal-content::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    width: 36px;
    height: 4px;
    margin-left: -18px;
    border-radius: 2px;
    background: var(--gray-300);
    pointer-events: none;
  }
  .tt-modal:not(.tt-modal--center) .modal-header { padding: 24px 20px 0; }
  .tt-modal:not(.tt-modal--center) .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 20px;
  }
  .tt-modal:not(.tt-modal--center) .modal-header + .modal-body { padding-top: 12px; }
  .tt-modal:not(.tt-modal--center) .modal-body:last-child { padding-bottom: calc(24px + var(--safe-bottom)); }
  .tt-modal:not(.tt-modal--center) .modal-footer {
    flex: none;
    flex-wrap: nowrap;
    padding: 12px 20px calc(12px + var(--safe-bottom));
    border-top: 0;
    box-shadow: inset 0 var(--hairline) 0 var(--border);
    background: var(--bg-card);
  }
  .tt-modal:not(.tt-modal--center) .modal-footer > .tt-btn { flex: 1 1 0; height: 46px; font-size: 15px; }
  .tt-confirm .modal-body { padding-top: 28px; }

  /* 居中弹窗（保留卡片样式）：左右留白，内容超高时整体滚动 */
  .tt-modal--center .modal-dialog { margin: 16px calc(16px + var(--safe-right)) 16px calc(16px + var(--safe-left)); }

  /* 抽屉 */
  .offcanvas-bottom {
    max-height: calc(100vh - 48px);
    max-height: calc(var(--vh) - var(--safe-top) - 48px);
    border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;
  }
  .offcanvas-end .offcanvas-header { padding-top: calc(var(--bs-offcanvas-padding-y) + var(--safe-top)); }
  .offcanvas-end .offcanvas-body { padding-bottom: calc(var(--bs-offcanvas-padding-y) + var(--safe-bottom)); }
  .tt-drawer.offcanvas-end { --bs-offcanvas-width: 100%; }
}