/* 卡片、反馈及浮层使用相同的表面与边缘语言。 */
[data-ui="panel"] {
  background: var(--surface); border: 1px solid var(--soft-line);
  border-radius: var(--radius-panel); box-shadow: inset 0 1px 0 var(--glow);
}
[data-ui="badge"] {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px;
  color: var(--accent-hover); background: var(--selected-surface);
  border: 1px solid var(--soft-line); border-radius: var(--radius-pill); font-size: 11px;
}
[data-ui="badge"][data-tone="danger"] { color: var(--danger); }
[data-ui="badge"][data-tone="success"] { color: var(--success); }
[data-ui="dialog"] {
  max-width: calc(100vw - 32px); border: 1px solid var(--border);
  border-radius: 16px; background: var(--surface); color: var(--text);
  box-shadow: 0 24px 80px var(--shadow), inset 0 1px 0 var(--glow);
}
[data-ui="dialog"] h2 { font-family: var(--font-display); }
[data-ui="dialog"].checkout-dialog { border-radius: 18px 18px 0 0; }
.modal-backdrop { background: var(--backdrop); }
#toast {
  background: var(--surface); color: var(--text); border: 1px solid var(--accent);
  border-radius: var(--radius-control); box-shadow: 0 8px 32px var(--shadow);
  padding: 12px 18px; font-size: 13px;
  top: calc(80px + env(safe-area-inset-top, 0px)); bottom: auto;
}
[data-ui="accordion"] {
  min-height: 44px; cursor: pointer; color: var(--text); border-radius: var(--radius-control);
}
[data-ui="accordion"]:hover { color: var(--accent-hover); }
:where(.progress-track, .progress-bar, .cap-track, .allocation-track) {
  background: var(--track); border-radius: var(--radius-pill);
}
:where(.progress-track, .progress-bar, .cap-track) > :where(i, span) {
  background: linear-gradient(90deg, var(--accent), var(--accent-hover));
}

/* 容纳三维轨道的横向绘制，避免窄屏产生整页横向滚动。 */
.archive-page #app { overflow-x: clip; }