/* apps/appearance.css —— 外观页自己的样式（主题色块 / 读数 / 字号刻度 / 预览卡）。 */

.trpb-note--tight{ margin-top:0; }

.trpb-swatches{ display:flex; gap:11px; }

.trpb-swatch{
  appearance:none; width:52px; height:52px; padding:5px; border-radius:14px;
  background:var(--trpb-surface); border:1px solid var(--trpb-line); cursor:pointer;
  box-shadow:var(--trpb-shadow-1);
  transition:transform 120ms ease, border-color var(--trpb-t) ease, box-shadow var(--trpb-t) ease;
}

.trpb-swatch i{ display:block; width:100%; height:100%; border-radius:10px; }

.trpb-swatch--1 i{ background:var(--trpb-theme-1); }

.trpb-swatch--2 i{ background:var(--trpb-theme-2); }

.trpb-swatch--3 i{ background:var(--trpb-theme-3); }

.trpb-swatch--4 i{ background:var(--trpb-theme-4); }

.trpb-swatch:active{ transform:translateY(1px); }

.trpb-swatch.trpb-is-active{ border-color:var(--trpb-text-strong); box-shadow:var(--trpb-ring); }

.trpb-swatch:focus-visible{ box-shadow:var(--trpb-ring); }

.trpb-readout{
  margin-top:12px; display:flex; align-items:center; gap:10px;
  font-family:var(--trpb-mono); font-size:var(--trpb-font-small); letter-spacing:.08em; color:var(--trpb-text-dim);
}

.trpb-readout--tight{ margin:0; }

.trpb-readout b{ color:var(--trpb-accent); font-weight:400; }

.trpb-ticks{ display:flex; gap:3px; margin-top:10px; }

.trpb-ticks .trpb-step{ flex:1 1 0; height:6px; border-radius:2px; }

.trpb-preview-main{ font-size:var(--trpb-font-body); color:var(--trpb-text); }

.trpb-preview-dim{ font-size:var(--trpb-font-mid); color:var(--trpb-text-dim); }