/* components.css —— 按钮 / 表单 / 表格 / 卡片 / 模态 / Toast / 徽章 / 进度条 / 空状态 / 骨架屏 */

/* ================= 按钮 ================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap-target);
  padding: 0 var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast), border-color var(--transition-fast),
    color var(--transition-fast), box-shadow var(--transition-fast);
}

.btn:hover:not(:disabled) {
  background: var(--color-surface-2);
}

.btn:active:not(:disabled) {
  transform: translateY(1px);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn--primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.btn--primary:hover:not(:disabled) {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.btn--primary:active:not(:disabled) {
  background: var(--color-primary-active);
}

.btn--danger {
  background: var(--color-danger);
  border-color: var(--color-danger);
  color: #fff;
}

.btn--danger:hover:not(:disabled) {
  background: #b91c1c;
  border-color: #b91c1c;
}

.btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--color-primary);
}

.btn--ghost:hover:not(:disabled) {
  background: var(--color-primary-soft);
}

.btn--subtle {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-text-muted);
}

.btn--subtle:hover:not(:disabled) {
  color: var(--color-text);
}

.btn--sm {
  min-height: 32px;
  padding: 0 var(--space-3);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-sm);
}

.btn--icon {
  min-width: var(--tap-target);
  padding: 0 var(--space-2);
}

.btn--block {
  width: 100%;
}

.btn.is-loading {
  color: transparent;
  position: relative;
  pointer-events: none;
}

.btn.is-loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: var(--radius-full);
  color: #fff;
  animation: spin 700ms linear infinite;
}

.btn--subtle.is-loading::after,
.btn--ghost.is-loading::after {
  color: var(--color-primary);
}

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

/* ================= 表单 ================= */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.label__optional {
  color: var(--color-text-faint);
  font-weight: var(--font-weight-normal);
}

.input,
.select,
.textarea {
  width: 100%;
  min-height: var(--tap-target);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-size: var(--font-size-base);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.textarea {
  min-height: 96px;
  resize: vertical;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
}

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.input:disabled,
.select:disabled,
.textarea:disabled {
  background: var(--color-surface-2);
  color: var(--color-text-faint);
  cursor: not-allowed;
}

.input.is-invalid,
.select.is-invalid {
  border-color: var(--color-danger);
}

.help {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.error-text {
  font-size: var(--font-size-xs);
  color: var(--color-danger);
}

/* 输入框 + 内嵌按钮（如 Device Key 的显示/隐藏） */
.input-group {
  display: flex;
  gap: var(--space-2);
  min-width: 0;
}

.input-group > .input {
  flex: 1 1 auto;
  min-width: 0;
}

/* 复选 / 单选 */
.check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  min-height: var(--tap-target);
  padding: var(--space-1) 0;
  font-size: var(--font-size-base);
  cursor: pointer;
}

.check input[type="checkbox"],
.check input[type="radio"] {
  width: 18px;
  height: 18px;
  margin: 3px 0 0;
  flex: 0 0 auto;
  accent-color: var(--color-primary);
  cursor: pointer;
}

/* 紧凑型下拉（用于表格内的行内预览面板等窄空间） */
.select--sm {
  min-height: 32px;
  padding: 0 var(--space-2);
  font-size: var(--font-size-sm);
}

.check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-1) var(--space-3);
}

/* 开关（启用/停用） */
.switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  min-height: var(--tap-target);
}

.switch input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.switch__track {
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: var(--radius-full);
  background: var(--color-border-strong);
  transition: background var(--transition-fast);
  flex: 0 0 auto;
}

.switch__track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast);
}

.switch input:checked + .switch__track {
  background: var(--color-success);
}

.switch input:checked + .switch__track::after {
  transform: translateX(20px);
}

.switch input:focus-visible + .switch__track {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.switch input:disabled + .switch__track {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ================= 卡片 ================= */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  min-width: 0;
}

.card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.card__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  flex: 1 1 auto;
  min-width: 0;
}

.card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.card__body {
  padding: var(--space-4);
  min-width: 0;
}

.card__body--flush {
  padding: 0;
}

/* 指标卡 */
.stat-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  min-width: 0;
}

.stat-card__label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.stat-card__value {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  font-variant-numeric: tabular-nums;
}

.stat-card__hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-faint);
}

.stat-card--warning { border-left: 3px solid var(--color-warning); }
.stat-card--danger { border-left: 3px solid var(--color-danger); }
.stat-card--success { border-left: 3px solid var(--color-success); }

/* ================= 表格 ================= */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.data-table {
  width: 100%;
  font-size: var(--font-size-base);
}

/* 表格内的勾选框（批量选择列）：与 .check 里的尺寸/配色保持一致 */
.data-table .row-select {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.data-table .row-select:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.data-table th.cell-select {
  width: 44px;
}

.data-table th,
.data-table td {
  padding: var(--space-3);
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--color-border);
}

.data-table th {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  background: var(--color-surface-2);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}

/*
 * 单元格默认不换行。
 * 中文没有词间空格，浏览器可以在任意两个汉字之间折行 —— 列一旦被内容挤窄，
 * "聚宝仙盆之杂灵根才是真BOSS第十三季" 就会被渲染成每个字一行，
 * 整行高度暴涨到几百像素，这是表格可读性崩掉的主因。
 * 需要换行的列单独声明（窄屏转卡片时统一放开）。
 */
.data-table td {
  min-width: 0;
  white-space: nowrap;
}

/* 长文本列：限宽截断 + 省略号，完整内容靠 title 悬浮查看 */
.data-table td.cell-clamp .cell-value {
  display: block;
  max-width: 16em;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 数字列：右对齐便于纵向比较，等宽数字避免小数点跳动 */
.data-table td.cell-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* 斑马纹 + 悬停过渡，行与行之间更容易横向追踪 */
.data-table tbody tr {
  transition: background-color 0.15s ease;
}

.data-table tbody tr:nth-child(even) {
  background: var(--color-surface-2);
}

.data-table tbody tr:hover {
  background: var(--color-primary-soft);
}

.cell-value {
  min-width: 0;
  overflow-wrap: anywhere;
}

.cell-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/*
 * 表格里的操作按钮比默认 .btn--sm 更紧凑：一列里要塞 2-4 个按钮，
 * 12px 的左右内边距会把这一列撑得过宽，挤掉"文件/方案"这类真正需要宽度的列。
 * 只缩内边距、不动按钮间距，点起来仍然好按。
 */
.data-table .cell-actions .btn--sm {
  padding: 0 var(--space-2);
}

/*
 * 桌面端操作按钮强制排成一行。
 * 原因：flex-wrap 允许换行时，表格自动布局会把"操作"列一路压窄（实测只剩 75px），
 * 三个按钮叠成三行，把整行高度从 70px 撑到 137px —— 这是行高失控的根因。
 * 注意：固定布局下这条会被下面的 cell-wrap 规则覆盖（列宽有保证时才允许换行）。
 */
@media (min-width: 769px) {
  .data-table .cell-actions {
    flex-wrap: nowrap;
  }
}

/*
 * 固定表格布局（列配置里只要有一列声明 width 就会启用）。
 *
 * 为什么必须固定布局：`td{white-space:nowrap}` 让每列都取自然宽度，各列之和一旦超过
 * 容器就横向溢出，把最右边的"操作"列连同按钮挤出可视区 —— 实测文件页是 1043px 塞进
 * 853px（溢出 190px），操作列整体落在卡片外、按钮被裁在边缘；融合结果页同样（909/853），
 * "JSON"按钮整颗在卡片之外。固定布局下表格宽度恒等于容器宽度，窗口怎么缩都不会挤掉某一列。
 *
 * 代价是长文本只能靠省略号截断（完整内容在 title 里），所以默认单行省略；
 * 放按钮/徽章这类复合内容的列必须用 `wrap: true` 标出来（渲染成 td.cell-wrap），
 * 让它们换行而不是被省略号切掉。
 */
@media (min-width: 769px) {
  .data-table--fixed {
    table-layout: fixed;
  }

  .data-table--fixed td:not(.cell-wrap) .cell-value {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* 换行列：允许折行、不做裁切（按钮/徽章被省略号切掉是不可接受的） */
  .data-table--fixed td.cell-wrap .cell-value {
    white-space: normal;
    overflow: visible;
  }

  /*
   * 换行列里的按钮也要允许换行。否则 nowrap 的 .cell-actions 会撑破单元格，
   * 又变成横向溢出 —— 那正是本次要修掉的问题。
   */
  .data-table--fixed td.cell-wrap .cell-actions {
    flex-wrap: wrap;
  }

  /* 固定布局下列宽已由 colgroup 决定，再限宽只会让内容用不满整列 */
  .data-table--fixed td.cell-clamp .cell-value {
    max-width: none;
  }
}

/* 单行截断 + 省略号（表格里的长文件名/路径靠它限宽） */
.truncate {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 移动端：表格转卡片（td 的标签由 renderTable 写入 data-label） */
@media (max-width: 768px) {
  .data-table,
  .data-table thead,
  .data-table tbody,
  .data-table tr,
  .data-table th,
  .data-table td {
    display: block;
    width: 100%;
  }

  /* 表头仍保留在无障碍树中，但视觉上隐藏 */
  .data-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .data-table tr {
    margin-bottom: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
  }

  .data-table tbody tr:hover {
    background: var(--color-surface);
  }

  .data-table td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-bottom: 1px dashed var(--color-border);
  }

  .data-table td:last-child {
    border-bottom: 0;
  }

  .data-table td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
  }

  .data-table .cell-value {
    text-align: right;
  }

  /*
   * 转卡片后每行独占宽度，不再受列宽挤压，因此放开"不换行 + 截断"的限制，
   * 否则长链接与简介会被省略号吃掉。
   */
  .data-table td {
    white-space: normal;
  }

  .data-table td.cell-clamp .cell-value {
    max-width: none;
    overflow: visible;
    overflow-wrap: anywhere;
  }

  .data-table td.cell-num {
    text-align: right;
  }

  .data-table .cell-actions {
    justify-content: flex-end;
  }
}

/* ================= 徽章 ================= */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1.6;
  white-space: nowrap;
  border: 1px solid transparent;
}

.badge--neutral { background: var(--color-surface-2); color: var(--color-text-muted); border-color: var(--color-border); }
.badge--success { background: var(--color-success-soft); color: #15803d; }
.badge--warning { background: var(--color-warning-soft); color: #b45309; }
.badge--danger { background: var(--color-danger-soft); color: #b91c1c; }
.badge--info { background: var(--color-info-soft); color: #0e7490; }
.badge--primary { background: var(--color-primary-soft); color: var(--color-primary-hover); }

/* ================= 进度条 ================= */
.progress {
  position: relative;
  width: 100%;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--color-surface-2);
  overflow: hidden;
}

.progress__bar {
  height: 100%;
  width: 0;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  transition: width var(--transition-base);
}

.progress__bar--success { background: var(--color-success); }
.progress__bar--danger { background: var(--color-danger); }
.progress__bar--cancelled { background: var(--color-text-faint); }

/* 未知进度：条纹动画，表示"进行中"而不是假百分比 */
.progress--indeterminate .progress__bar {
  width: 40%;
  animation: indeterminate 1.4s ease-in-out infinite;
}

@keyframes indeterminate {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}

.progress-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* ================= Toast ================= */
.toast-host {
  position: fixed;
  top: var(--space-4);
  right: var(--space-4);
  left: var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
  z-index: 1000;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  width: min(420px, 100%);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
  animation: toast-in var(--transition-base);
}

.toast--success { border-left-color: var(--color-success); }
.toast--error { border-left-color: var(--color-danger); }
.toast--warning { border-left-color: var(--color-warning); }
.toast--info { border-left-color: var(--color-info); }

.toast__text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--font-size-base);
  overflow-wrap: anywhere;
}

.toast__close {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-faint);
  font-size: var(--font-size-lg);
  line-height: 1;
  cursor: pointer;
}

.toast__close:hover {
  background: var(--color-surface-2);
  color: var(--color-text);
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

/* ================= 模态 ================= */
.modal {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: transparent;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  border: 0;
  overflow-y: auto;
}

.modal::backdrop { background: rgba(15, 23, 42, 0.5); }

.modal__panel {
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 2 * var(--space-4));
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  animation: modal-in var(--transition-base);
}

.modal__panel--lg { max-width: 800px; }
.modal__panel--xl { max-width: 1040px; }
.modal__panel--sm { max-width: 420px; }

.modal__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.modal__title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

.modal__close {
  flex: 0 0 auto;
  width: var(--tap-target);
  height: var(--tap-target);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--font-size-xl);
  line-height: 1;
  cursor: pointer;
}

.modal__close:hover {
  background: var(--color-surface-2);
  color: var(--color-text);
}

.modal__body {
  padding: var(--space-4);
  overflow-y: auto;
  min-width: 0;
}

.modal__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-4);
  border-top: 1px solid var(--color-border);
}

@keyframes modal-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .modal__panel { animation: none; }
}

/* ================= 空状态 / 骨架屏 ================= */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-10) var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
}

.empty__icon {
  font-size: 2rem;
  line-height: 1;
  color: var(--color-text-faint);
}

.empty__title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.empty__hint {
  font-size: var(--font-size-sm);
}

.skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
}

.skeleton__line {
  height: 14px;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--color-surface-2), var(--color-border), var(--color-surface-2));
  background-size: 200% 100%;
  animation: shimmer 1.3s linear infinite;
}

@keyframes shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

/* ================= 提示条 ================= */
.banner {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  font-size: var(--font-size-base);
  min-width: 0;
}

.banner__icon {
  flex: 0 0 auto;
  font-size: var(--font-size-lg);
  line-height: 1.4;
}

.banner__body {
  min-width: 0;
}

.banner__title {
  font-weight: var(--font-weight-semibold);
}

.banner--warning { background: var(--color-warning-soft); border-color: #fcd34d; color: #92400e; }
.banner--danger { background: var(--color-danger-soft); border-color: #fca5a5; color: #991b1b; }
.banner--info { background: var(--color-info-soft); border-color: #67e8f9; color: #155e75; }
.banner--success { background: var(--color-success-soft); border-color: #86efac; color: #166534; }

/* ================= 分页 / 工具条 ================= */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
}

.toolbar__grow {
  flex: 1 1 220px;
  min-width: 0;
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.pagination__pages {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* 日志/JSON 预览 */
.code-block {
  margin: 0;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: #0f172a;
  color: #e2e8f0;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  overflow: auto;
  max-height: 420px;
  white-space: pre;
  min-width: 0;
}

.kv-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-2) var(--space-4);
}

.kv-list__key {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.kv-list__val {
  font-size: var(--font-size-base);
  overflow-wrap: anywhere;
}

/* ================= 触控目标 =================
 * 移动端把紧凑按钮放大到 >= 40px。必须放在 .btn--sm 之后（媒体查询不增加优先级），
 * 否则会被上面的 .btn--sm { min-height: 32px } 覆盖。
 */
@media (max-width: 768px) {
  .btn--sm,
  .btn--icon {
    min-height: var(--tap-target);
    min-width: var(--tap-target);
  }

  .toast__close,
  .modal__close {
    min-height: var(--tap-target);
    min-width: var(--tap-target);
  }
}