/* ============================================================================
   public/css/design-tokens.css —— 把"差一点"的圆角收敛到统一刻度
   ----------------------------------------------------------------------------
   🔴 用户要求：「页面不好看的改下配色和CSS」

   ★ 我在 style.css 的 :root 里建好了变量层（见那里的说明），
     这个文件负责【真正让页面变统一】的那一步：
     把散落的、彼此只差 1~4px 的圆角值收敛到 5 档刻度上。

   ★ 为什么"差一点"最伤观感（这是核心判断，不是审美偏好）：
       人眼对【同一屏内两个相似但不等的值】特别敏感 ——
       两个卡片圆角是 10px 和 12px，看着就是"没对齐、没做完"，
       而 8px 和 20px 放一起反而觉得是刻意的层次。
       ⇒ 所以问题不是"值偏大或偏小"，而是【值太多且互相接近】。
       实测现状：圆角 82 种取值，按钮/标签 20 种、卡片/面板 20 种。

   ★ 刻度（在 style.css 里定义，这里只引用）：
       xs 4px · sm 8px · md 12px · lg 16px · xl 20px · pill 999px
       圆形一律 50%（不参与收敛）

   ★ 收敛规则（每一档都能说出"为什么是它"）：
       4px  → xs   （原来 4px，不变）
       9px  → sm   （差 1px，视觉无感；统一后同屏不再有两种）
       10px → sm   （差 2px）
       .95rem(15.2) → lg  （差 0.8px）
       1.05rem(16.8) → lg  （差 0.8px）
       1.1rem(17.6) → lg   （差 1.6px）
       1.15rem(18.4) → lg  （差 2.4px）
       1.25rem(20) → xl    （正好）

   ⚠️ 为什么用【属性选择器】（[class~="…"]）逐类挑，而不是一条 `*{border-radius:var(--r-md)}`：
      那样会把【有意做圆/做胶囊】的也拍平 ——
      头像 50%（圆）、chip 999px（胶囊）、进度条 999px…
      "统一"不等于"全一样"：该圆的还得圆。
   ⚠️ 为什么加 !important：
      这些类在各自的 CSS 里是单类选择器（0,1,0），本文件也是（0,1,0）——
      同级靠后能赢。但本文件可能被别处更长的选择器（如 .a .b）压过，
      为了保证"刻度说了算"，统一加 !important。
      ⚠️ 这是【有意覆盖】：目标是纠正"同类组件刻度不一"，
         不是抢组件自己的控制权（组件本来也没打算要 9px 这种值）。
   ⚠️ 本文件【只改圆角】，不改颜色/间距/字体 ——
      一次只动一个维度，出问题好定位、也好回退（删掉这个 link 即可）。
   ⚠️ 加载顺序：放在 style.css 之后、各页内联 <style> 之前（见各页 head）。
   ============================================================================ */

/* ---------- 卡片 / 面板：lg（16px）----------
   ⚠️ 这一组是"最大的面"，统一到 lg 后整个页面的骨架就齐了 */
[class~="mj-panel"],
[class~="group-card"],
[class~="gallery-card"],
[class~="res-card"],
[class~="stat-card"],
[class~="model-card"],
[class~="z-card"],
[class~="ao-card"],
[class~="bd-card"],
[class~="sp-card"],
[class~="pm-card"],
[class~="pq-card"],
[class~="pt-card"],
[class~="glass-effect"],
[class~="glass-strong"] {
  border-radius: var(--r-lg) !important;
}

/* ---------- 中等面：缩略图、内嵌小块 → md（12px）---------- */
[class~="ratio-card"],
[class~="va-card"],
[class~="mj-thumb"],
[class~="thumb"],
[class~="bd-thumb"],
[class~="lb-thumb"],
[class~="za-item"],
[class~="z-icon"],
[class~="it-stage"],
[class~="res-chip"] {
  border-radius: var(--r-md) !important;
}

/* ---------- 小控件：按钮 / 输入框 / chip → sm（8px）----------
   ⚠️ 原来这一组混了 .5rem(8) / .45rem(7.2) / .55rem(8.8) / 9px / 10px
      —— 五个值在 7.2~10px 之间，这就是"看着不齐"的主要来源。 */
[class~="ao-btn"],
[class~="ao-btn-mini"],
[class~="za-expbtn"],
[class~="pm-btn"],
[class~="sp-btn"],
[class~="pt-btn"],
[class~="ui-cf-btn"],
[class~="lb-btn"],
[class~="btn"],
[class~="btn-ghost"],
[class~="btn-primary"],
[class~="z-chip"],
[class~="mb-tab"],
[class~="user-pop"],
[class~="ao-f"],
[class~="za-export"],
[class~="it-f"],
[class~="ui-cf-input"],
[class~="dropzone"],
[class~="ref-item"] {
  border-radius: var(--r-sm) !important;
}

/* ⚠️ 输入框外观和按钮【不一样才有层次】——
   但同一档里的小控件（按钮/chip/输入框）用同一个 sm 是对的：
   它们在同一行里并排出现（如"搜索框 + 搜索按钮"），
   圆角不一致时那种"错位感"最明显。

   ⚠️ 下面这几个【不收敛】，保持原样（写明理由，免得以后有人来"统一"它们）：
     .md-edit / textarea  —— 多行文本域，圆角大一点更像"框"
     .img-lb / .modal-box / .media-modal-box  —— 弹窗，走 xl（见下）
     .sp-table / table     —— 表格不用圆角（用了反而割裂）
*/

/* ---------- 小角标 / 内嵌小块 → xs（4px）---------- */
[class~="tag"],
[class~="cl-tag"],
[class~="cmp-cell"] {
  border-radius: var(--r-xs) !important;
}

/* ---------- 弹窗 / 抽屉 → xl（20px）---------- */
[class~="modal-box"],
[class~="media-modal-box"],
[class~="auth-box"],
[class~="drawer"] {
  border-radius: var(--r-xl) !important;
}

/* ---------- 胶囊类：显式声明，防止上面的规则误伤 ----------
   ⚠️ 这一组【必须】保持胶囊（999px）—— 它们靠"圆头"表达"可点/可切换"。
      写在这里是【防御性】的：万一以后有人把某个 pill 类加进了上面的列表，
      这条更靠后、能把它拉回胶囊。
   ⚠️ 我第一版还写了 ui-cf-chip / screen-chip / pill 三个类，
      核对发现【全项目都不存在】（既没定义也没用过）——
      已经删掉：留着就是"写了但没用"，而且会让人以为有这些组件。
      （这类"凭印象写类名"的错只能靠逐个核对发现，静态检查查不出来。） */
[class~="pm-chip"],
[class~="pm-badge"],
[class~="lb-float"],
[class~="lb-tool"] {
  border-radius: var(--r-pill) !important;
}