/* base.css — 设计令牌（浅色 + 两个深色块）、重置、对话配色 .t-*、动效令牌、减少动态效果、共享组件类 .ui-* */

/* ---------- 1. 令牌：浅色 ---------- */
:root {
  --bg: #F7F4EE;
  --surface: #FFFFFF;
  --surface-2: #F2EEE6;
  --ink: #1F1D1A;
  --ink-2: #3F3B35;
  --muted: #6E6A63;
  --placeholder: #8A857D;
  --line: #E8E3DA;
  --line-2: #F0ECE4;
  --paper: #FFFFFF;
  --paper-ink: #1F1D1A;
  --scrim: rgba(31, 29, 26, .38);
  --shadow-1: 0 4px 16px rgba(31, 29, 26, .06);
  --shadow-2: 0 10px 30px rgba(31, 29, 26, .12);
  --danger: #B3261E;
  --desk: #E9E4DA;
  --frame: #1F1D1A;

  /* 补充令牌（规格外，见 SPEC 实现备注） */
  --on-danger: #FFFFFF;
  --glass: rgba(247, 244, 238, .8);
  --menu-scrim: rgba(31, 29, 26, .16);
  --dim: rgba(20, 18, 16, .08);
  --desk-line: rgba(31, 29, 26, .2);
  --desk-muted: #5F5B55;  /* 桌面说明栏上的次要文字（--muted 在 --desk 上只有 4.24:1） */
  --polaroid-shadow: 0 5px 16px rgba(31, 29, 26, .13);
  --seg-thumb: #FFFFFF;

  /* 楷书：马善政（Google Fonts，异步加载，大陆可能打不开）→ 各系统自带/常装的楷体（新版 macOS 的「楷体-简」是可下载字体，不一定装了） */
  --font-char: 'Ma Shan Zheng', 'Kaiti SC', 'STKaiti', 'KaiTi', 'KaiTi_GB2312', '楷体', 'Kaiti TC', 'BiauKai', 'DFKai-SB', '標楷體', 'LXGW WenKai', 'AR PL UKai CN', 'AR PL UKai TW', serif;
  --font-display: 'Source Serif 4', 'Noto Serif SC', 'Songti SC', 'STSong', Georgia, serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Noto Sans SC', 'Microsoft YaHei', sans-serif;

  /* 动效令牌 */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-1: 160ms;
  --dur-2: 260ms;
  --dur-3: 380ms;
  --dur-4: 560ms;

  /* 未指定配色时的对话变量兜底 */
  --c-soft: var(--surface-2);
  --c-deep: var(--ink);
  --c-ink: var(--ink);
  --c-on-deep: var(--bg);
  --c-wm: var(--ink);
  --c-line: rgba(31, 29, 26, .22);

  color-scheme: light;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ---------- 2. 对话配色（浅色） ---------- */
.t-sakura   { --c-soft: #F4C9D3; --c-deep: #A8355A; --c-wm: #A8355A; --c-ink: #1F1D1A; --c-on-deep: #FFFFFF; --c-line: rgba(31, 29, 26, .22); }
.t-sky      { --c-soft: #C3DBEF; --c-deep: #2E5E8C; --c-wm: #2E5E8C; --c-ink: #1F1D1A; --c-on-deep: #FFFFFF; --c-line: rgba(31, 29, 26, .22); }
.t-apricot  { --c-soft: #F6DFA4; --c-deep: #8A6414; --c-wm: #8A6414; --c-ink: #1F1D1A; --c-on-deep: #FFFFFF; --c-line: rgba(31, 29, 26, .22); }
.t-mint     { --c-soft: #C4E5D2; --c-deep: #2F6F4E; --c-wm: #2F6F4E; --c-ink: #1F1D1A; --c-on-deep: #FFFFFF; --c-line: rgba(31, 29, 26, .22); }
.t-lavender { --c-soft: #D9CFF2; --c-deep: #5B44A8; --c-wm: #5B44A8; --c-ink: #1F1D1A; --c-on-deep: #FFFFFF; --c-line: rgba(31, 29, 26, .22); }
.t-peach    { --c-soft: #F8D2BC; --c-deep: #A2471F; --c-wm: #A2471F; --c-ink: #1F1D1A; --c-on-deep: #FFFFFF; --c-line: rgba(31, 29, 26, .22); }
.t-celadon  { --c-soft: #BFE1DE; --c-deep: #276B66; --c-wm: #276B66; --c-ink: #1F1D1A; --c-on-deep: #FFFFFF; --c-line: rgba(31, 29, 26, .22); }
.t-ink      { --c-soft: #2A2723; --c-deep: #1F1D1A; --c-wm: #FFFFFF; --c-ink: #FFFFFF; --c-on-deep: #FFFFFF; --c-line: rgba(255, 255, 255, .4); }

/* ---------- 3. 深色块 A：跟随系统（未强制浅色时） ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #171513;
    --surface: #211E1B;
    --surface-2: #2A2622;
    --ink: #EDE7DD;
    --ink-2: #C9C1B4;
    --muted: #9A9286;
    --placeholder: #7C756B;
    --line: #34302A;
    --line-2: #2A2622;
    --paper: #EFEAE2;
    --paper-ink: #1F1D1A;
    --scrim: rgba(0, 0, 0, .55);
    --shadow-1: 0 4px 16px rgba(0, 0, 0, .35);
    --shadow-2: 0 10px 30px rgba(0, 0, 0, .5);
    --danger: #F2B8B5;
    --desk: #0E0D0C;
    --frame: #000000;
    --on-danger: #3A0B08;
    --glass: rgba(23, 21, 19, .78);
    --menu-scrim: rgba(0, 0, 0, .38);
    --dim: rgba(0, 0, 0, .3);
    --desk-line: rgba(237, 231, 221, .2);
    --desk-muted: #9A9286;
    --polaroid-shadow: 0 6px 18px rgba(0, 0, 0, .5);
    --seg-thumb: #3A3631;
    --c-line: rgba(255, 255, 255, .22);
    color-scheme: dark;
  }
  :root:not([data-theme="light"]) .t-sakura   { --c-soft: #4A2531; --c-deep: #F09AB5; --c-wm: #F09AB5; --c-ink: #FBE9EE; --c-on-deep: #171513; --c-line: rgba(255, 255, 255, .22); }
  :root:not([data-theme="light"]) .t-sky      { --c-soft: #1F3447; --c-deep: #8EC0EA; --c-wm: #8EC0EA; --c-ink: #E6F1FB; --c-on-deep: #171513; --c-line: rgba(255, 255, 255, .22); }
  :root:not([data-theme="light"]) .t-apricot  { --c-soft: #43351A; --c-deep: #EBC46A; --c-wm: #EBC46A; --c-ink: #FBF1D9; --c-on-deep: #171513; --c-line: rgba(255, 255, 255, .22); }
  :root:not([data-theme="light"]) .t-mint     { --c-soft: #1E3A2B; --c-deep: #86CDA4; --c-wm: #86CDA4; --c-ink: #E3F4EA; --c-on-deep: #171513; --c-line: rgba(255, 255, 255, .22); }
  :root:not([data-theme="light"]) .t-lavender { --c-soft: #2E2648; --c-deep: #B7A6F0; --c-wm: #B7A6F0; --c-ink: #EEEAFB; --c-on-deep: #171513; --c-line: rgba(255, 255, 255, .22); }
  :root:not([data-theme="light"]) .t-peach    { --c-soft: #48291B; --c-deep: #F2A27C; --c-wm: #F2A27C; --c-ink: #FCEADF; --c-on-deep: #171513; --c-line: rgba(255, 255, 255, .22); }
  :root:not([data-theme="light"]) .t-celadon  { --c-soft: #183A37; --c-deep: #7FCBC3; --c-wm: #7FCBC3; --c-ink: #E0F3F1; --c-on-deep: #171513; --c-line: rgba(255, 255, 255, .22); }
  :root:not([data-theme="light"]) .t-ink      { --c-soft: #3A3631; --c-deep: #EDE7DD; --c-wm: #EDE7DD; --c-ink: #FFFFFF; --c-on-deep: #171513; --c-line: rgba(255, 255, 255, .22); }
}

/* ---------- 4. 深色块 B：手动深色 ---------- */
:root[data-theme="dark"] {
  --bg: #171513;
  --surface: #211E1B;
  --surface-2: #2A2622;
  --ink: #EDE7DD;
  --ink-2: #C9C1B4;
  --muted: #9A9286;
  --placeholder: #7C756B;
  --line: #34302A;
  --line-2: #2A2622;
  --paper: #EFEAE2;
  --paper-ink: #1F1D1A;
  --scrim: rgba(0, 0, 0, .55);
  --shadow-1: 0 4px 16px rgba(0, 0, 0, .35);
  --shadow-2: 0 10px 30px rgba(0, 0, 0, .5);
  --danger: #F2B8B5;
  --desk: #0E0D0C;
  --frame: #000000;
  --on-danger: #3A0B08;
  --glass: rgba(23, 21, 19, .78);
  --menu-scrim: rgba(0, 0, 0, .38);
  --dim: rgba(0, 0, 0, .3);
  --desk-line: rgba(237, 231, 221, .2);
  --desk-muted: #9A9286;
  --polaroid-shadow: 0 6px 18px rgba(0, 0, 0, .5);
  --seg-thumb: #3A3631;
  --c-line: rgba(255, 255, 255, .22);
  color-scheme: dark;
}
:root[data-theme="dark"] .t-sakura   { --c-soft: #4A2531; --c-deep: #F09AB5; --c-wm: #F09AB5; --c-ink: #FBE9EE; --c-on-deep: #171513; --c-line: rgba(255, 255, 255, .22); }
:root[data-theme="dark"] .t-sky      { --c-soft: #1F3447; --c-deep: #8EC0EA; --c-wm: #8EC0EA; --c-ink: #E6F1FB; --c-on-deep: #171513; --c-line: rgba(255, 255, 255, .22); }
:root[data-theme="dark"] .t-apricot  { --c-soft: #43351A; --c-deep: #EBC46A; --c-wm: #EBC46A; --c-ink: #FBF1D9; --c-on-deep: #171513; --c-line: rgba(255, 255, 255, .22); }
:root[data-theme="dark"] .t-mint     { --c-soft: #1E3A2B; --c-deep: #86CDA4; --c-wm: #86CDA4; --c-ink: #E3F4EA; --c-on-deep: #171513; --c-line: rgba(255, 255, 255, .22); }
:root[data-theme="dark"] .t-lavender { --c-soft: #2E2648; --c-deep: #B7A6F0; --c-wm: #B7A6F0; --c-ink: #EEEAFB; --c-on-deep: #171513; --c-line: rgba(255, 255, 255, .22); }
:root[data-theme="dark"] .t-peach    { --c-soft: #48291B; --c-deep: #F2A27C; --c-wm: #F2A27C; --c-ink: #FCEADF; --c-on-deep: #171513; --c-line: rgba(255, 255, 255, .22); }
:root[data-theme="dark"] .t-celadon  { --c-soft: #183A37; --c-deep: #7FCBC3; --c-wm: #7FCBC3; --c-ink: #E0F3F1; --c-on-deep: #171513; --c-line: rgba(255, 255, 255, .22); }
:root[data-theme="dark"] .t-ink      { --c-soft: #3A3631; --c-deep: #EDE7DD; --c-wm: #EDE7DD; --c-ink: #FFFFFF; --c-on-deep: #171513; --c-line: rgba(255, 255, 255, .22); }

/* ---------- 5. 重置 ---------- */
html {
  box-sizing: border-box;
  height: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
*, *::before, *::after { box-sizing: inherit; }
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--desk);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, h4, h5, h6, p, figure, blockquote { margin: 0; font-size: inherit; font-weight: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
button:disabled { cursor: default; }
input::placeholder, textarea::placeholder { color: var(--placeholder); opacity: 1; }
[hidden] { display: none !important; }
::selection { background: var(--c-soft); color: var(--c-ink); }

:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---------- 6. 减少动态效果：CSS 动画压到 1ms，过渡直接取消 ----------
   不能把过渡统一设成 80ms：没声明 transition 的元素 transition-property 默认是 all，
   会给所有元素凭空加上过渡，拖拽跟手（左缘右滑、下拉刷新、弹窗/灯箱拖动）都会变迟 */
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after {
  animation-duration: 1ms !important;
  animation-delay: 0ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0s !important;
  transition-delay: 0s !important;
  scroll-behavior: auto !important;
}

/* 加载转圈是必要的进度提示，不算装饰动画：减少动态时照样转（否则会停成一个静止的半圆，像卡死了） */
.reduce-motion .ui-spinner,
.reduce-motion .au-spin > i,
.reduce-motion .me-pw-spin > i,
.reduce-motion .ui-ptr.is-spinning .ui-ptr-ring,
.reduce-motion .ls-pick.is-loading .ls-pick-spin,
.reduce-motion .ls-cmp-create.is-loading .ls-cmp-spin,
.reduce-motion .lb-frame.is-loading .lb-spin,
.reduce-motion .st-slide.is-loading .st-spin,
.reduce-motion .mo-spin,
.reduce-motion .ct-older-sp::before {
  animation-duration: 1s !important;
  animation-iteration-count: infinite !important;
}

/* 拖拽中禁止选中文字 */
.is-dragging, .is-dragging * { -webkit-user-select: none !important; user-select: none !important; }

/* ---------- 7. 共享组件类 ---------- */

/* 文字 */
.ui-title-lg { font-family: var(--font-display); font-size: 30px; font-weight: 600; line-height: 1.2; letter-spacing: 1px; }
.ui-title { font-family: var(--font-display); font-size: 17px; font-weight: 600; line-height: 1.3; }
.ui-display { font-family: var(--font-display); }
.ui-label { font-size: 13px; font-weight: 500; color: var(--muted); }
.ui-muted { color: var(--muted); }
.ui-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* 楷书字头像：配合 .t-* 使用 --c-deep；字号用 --size 调 */
.ui-char {
  display: inline-block;
  font-family: var(--font-char);
  font-size: var(--size, 38px);
  font-weight: 400;
  line-height: 1;
  color: var(--c-deep);
  -webkit-user-select: none;
  user-select: none;
}
/* 短色条（浅色） */
.ui-colorbar {
  display: block;
  width: var(--w, 16px);
  height: 3px;
  border-radius: 1.5px;
  background: var(--c-soft);
}
/* 头像组合：字 + 色条（列表 44px / 小号 34px） */
.ui-avatar {
  flex: none;
  width: 44px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.ui-avatar > .ui-char { --size: 38px; }
.ui-avatar.ui-avatar-sm { width: 34px; gap: 5px; }
.ui-avatar.ui-avatar-sm > .ui-char { --size: 32px; }
.ui-avatar.ui-avatar-sm > .ui-colorbar { --w: 12px; }
.ui-avatar.ui-avatar-xs { width: 24px; gap: 3px; }
.ui-avatar.ui-avatar-xs > .ui-char { --size: 22px; }
.ui-avatar.ui-avatar-xs > .ui-colorbar { --w: 10px; height: 2px; }

/* 白边拍立得：--rot 控制倾角；内部放 img / .ui-polaroid-img */
.ui-polaroid {
  display: block;
  padding: 6px;
  background: var(--paper);
  color: var(--paper-ink);
  border-radius: 3px;
  box-shadow: var(--polaroid-shadow);
  transform: rotate(var(--rot, 0deg));
}
.ui-polaroid > img, .ui-polaroid .ui-polaroid-img {
  display: block;
  width: 100%;
  height: var(--h, auto);
  object-fit: cover;
  background: var(--surface-2);
}
.ui-polaroid-cap { display: block; padding: 8px 3px 4px; font-size: 14px; line-height: 1.4; color: var(--paper-ink); }
.ui-polaroid-sub { display: block; padding: 0 3px 2px; font-size: 11px; color: #6E6A63; }

/* 角标：默认墨色；放在 .t-* 内用对话深色 */
.ui-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 6px;
  background: var(--c-deep);
  color: var(--c-on-deep);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ui-badge.ui-badge-dot { min-width: 8px; width: 8px; height: 8px; padding: 0; border-radius: 4px; }
.ui-badge.ui-badge-muted { background: var(--line); color: var(--muted); }

/* 按钮 */
.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  transition: transform var(--dur-1) var(--ease-out), background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), opacity var(--dur-2);
}
.ui-btn:active:not(:disabled) { transform: scale(.97); }
.ui-btn-primary { background: var(--ink); color: var(--bg); }
.ui-btn-primary:disabled { background: var(--placeholder); color: var(--bg); }
.ui-btn-deep { background: var(--c-deep); color: var(--c-on-deep); }
.ui-btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
@media (hover: hover) {
  .ui-btn-ghost:hover { background: var(--surface-2); }
}
.ui-btn-soft { background: var(--surface-2); color: var(--ink); }
.ui-btn-danger { background: var(--danger); color: var(--on-danger); }
.ui-btn-sm { min-height: 36px; padding: 0 12px; font-size: 13px; border-radius: 10px; }
.ui-btn-block { display: flex; width: 100%; }

/* 44px 图标按钮 */
.ui-icon-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: inherit;
  transition: transform var(--dur-1) var(--ease-out), background-color var(--dur-2);
}
@media (hover: hover) {  /* 触屏上点完不留灰底 */
  .ui-icon-btn:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
}
.ui-icon-btn:active { transform: scale(.92); }

.ui-ico { display: inline-block; flex: none; vertical-align: middle; overflow: visible; }

/* 通用按下反馈 */
.ui-press { transition: transform var(--dur-1) var(--ease-out), background-color var(--dur-2); }
.ui-press:active { transform: scale(.97); }
.ui-pressing { transform: scale(.97); transition: transform var(--dur-1) var(--ease-out); }

/* 开关：<button class="ui-switch" role="switch" aria-checked="true|false"><span class="ui-switch-thumb"></span></button> */
.ui-switch {
  position: relative;
  flex: none;
  width: 51px;
  height: 31px;
  border-radius: 16px;
  background: var(--line);
  transition: background-color var(--dur-2) var(--ease-out);
}
.ui-switch::after { content: ''; position: absolute; inset: -7px -2px; } /* 触控区补到 44px */
.ui-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
  transition: transform var(--dur-3) var(--ease-spring);
}
.ui-switch[aria-checked="true"] { background: var(--c-deep); }
.ui-switch[aria-checked="true"] .ui-switch-thumb { transform: translateX(20px); }
.ui-switch:active .ui-switch-thumb { width: 31px; }
.ui-switch[aria-checked="true"]:active .ui-switch-thumb { transform: translateX(16px); }

/* 分段控件：容器 style="--seg-n:3; --seg-i:1"，JS 只改 --seg-i
   <div class="ui-seg" role="radiogroup"><span class="ui-seg-thumb"></span><button class="ui-seg-btn" role="radio" aria-checked="true">…</button>…</div> */
.ui-seg {
  --seg-n: 3;
  --seg-i: 0;
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  padding: 3px;
  border-radius: 12px;
  background: var(--surface-2);
}
.ui-seg-thumb {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc((100% - 6px) / var(--seg-n));
  border-radius: 9px;
  background: var(--seg-thumb);
  box-shadow: 0 1px 4px rgba(31, 29, 26, .12);
  transform: translateX(calc(100% * var(--seg-i)));
  transition: transform var(--dur-3) var(--ease-spring);
}
.ui-seg-btn {
  position: relative;
  z-index: 1;
  min-height: 38px;
  padding: 0 8px;
  border-radius: 9px;
  font-size: 14px;
  color: var(--muted);
  transition: color var(--dur-2);
}
.ui-seg-btn[aria-checked="true"], .ui-seg-btn[aria-pressed="true"] { color: var(--ink); font-weight: 600; }

/* 输入框 */
.ui-input {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.4;
  outline: none;
  transition: border-color var(--dur-2), background-color var(--dur-2);
}
.ui-input:focus { border-color: var(--line); background: var(--surface); }
textarea.ui-input { resize: none; }

/* 滚动区：每个屏幕自己的主滚动容器（tab 再次点击会滚回顶部的就是第一个 .ui-scroll） */
.ui-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.ui-scroll::-webkit-scrollbar { display: none; }

/* 三点跳动：<span class="ui-typing"><i></i><i></i><i></i></span> */
.ui-typing { display: inline-flex; align-items: center; gap: 3px; height: 1em; vertical-align: middle; }
.ui-typing > i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .5;
  animation: ui-typing 1.1s var(--ease-in-out) infinite;
}
.ui-typing > i:nth-child(2) { animation-delay: .15s; }
.ui-typing > i:nth-child(3) { animation-delay: .3s; }
@keyframes ui-typing {
  0%, 60%, 100% { transform: translateY(0); opacity: .4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* 卡片、分隔线、空状态 */
.ui-card { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; }
.ui-hairline { height: 1px; background: var(--line); border: 0; margin: 0; }
.ui-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 24px; text-align: center; font-size: 14px; color: var(--muted); }

/* 数字滚动（countRoll 内部结构） */
.ui-roll { display: inline-grid; overflow: hidden; vertical-align: top; }
.ui-roll > span { grid-area: 1 / 1; }