/* ═══════════════════════════════════════════════════════════════════════════
 * RunX UI —— 与桌面同一套视觉语言的组件库
 *
 * 依据 docs/RunX.UI.md（RunXOS UI 设计文档）与 .js/@runx-desktop/assets/tokens.css：
 *   §2.1 排版    语义化文本样式，等宽数字，除小区块标签外不用全大写
 *   §2.2 颜色材质 语义色分层；材质不叠加；文字对比度充足
 *   §2.4 形状    嵌套圆角同心：inner = outer - padding
 *   §4   Liquid Glass 控件浮于内容之上
 *
 * ── 怎么用 ────────────────────────────────────────────────────────────────
 *   <link rel="stylesheet" href="http://<kernel>/runx/ui/runx-ui.css">
 *   <script src="http://<kernel>/runx/ui/runx-ui.js"></script>
 *   <body class="rx" data-theme="auto"> … </body>
 *
 * ── 为什么全部挂在 .rx 下面 ───────────────────────────────────────────────
 * 应用页面有它自己的样式与变量命名。如果把 `--label-primary` 之类写到 :root，
 * 迟早撞上某个应用的变量，而且排查时会以为是浏览器的问题。所以：
 *   · 所有选择器都以 .rx 开头（`<body class="rx">` 一行搞定）；
 *   · 所有变量都带 `--rx-` 前缀。
 * 代价是写起来多一点，换来的是「装进来不会改变应用原有的任何东西」。
 *
 * ── 与桌面的关系 ─────────────────────────────────────────────────────────
 * 令牌值从桌面的 tokens.css 逐字搬来（同一个 Inter、同一条涨落色、同一组
 * 语义红黄绿）。改这里之前先看桌面那份 —— 两处不一致时，用户在窗口内外会
 * 看到两种蓝。
 * ═════════════════════════════════════════════════════════════════════════ */

/* ── Inter 可变字体：一个文件覆盖 wght 100–900 / opsz 14–32 ──
   由 @runx-ui 扩展以 CORS 头提供（字体受 CORS 限制，直接引桌面目录会失败）。
   加载失败立刻回落到系统字体栈，不阻塞任何渲染。 */
@font-face {
  font-family: "InterVar";
  src: url("fonts/InterVariable.woff2") format("woff2-variations"),
       url("fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "InterVar";
  src: url("fonts/InterVariable-Italic.woff2") format("woff2-variations"),
       url("fonts/InterVariable-Italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 1. 令牌
 * ═══════════════════════════════════════════════════════════════════════════ */

.rx {
  /* 字体栈：Inter 排在系统字体之前，中日韩自动回落（Inter 没有 CJK 字形） */
  --rx-font-sans: "InterVar", "Inter", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
                  "Source Han Sans SC", "Noto Sans CJK SC", sans-serif;
  --rx-font-mono: ui-monospace, SFMono-Regular, "SF Mono", "JetBrains Mono",
                  "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* 排版层级：字号 / 行高 / 字重 / 字距 四件套。行高是比例，换字号不会打死行高 */
  --rx-font-title:     600 17px/1.32 var(--rx-font-sans);
  --rx-font-subtitle:  600 15px/1.36 var(--rx-font-sans);
  --rx-font-body:      400 13.5px/1.48 var(--rx-font-sans);
  --rx-font-caption:   400 11.5px/1.4 var(--rx-font-sans);
  --rx-font-status:    500 11px/1.35 var(--rx-font-sans);
  --rx-font-toolbar:   500 13px/1.2 var(--rx-font-sans);
  --rx-tracking-title: -0.012em;
  --rx-tracking-body:  -0.002em;
  --rx-tracking-caps:  0.055em;

  /* 尺寸：8pt 网格的细分档 */
  --rx-s1: 4px;  --rx-s2: 8px;  --rx-s3: 12px; --rx-s4: 16px;
  --rx-s5: 20px; --rx-s6: 24px; --rx-s7: 32px;
  --rx-control-h: 28px;
  --rx-control-h-lg: 34px;

  /* 圆角：同心公式 inner = outer - padding */
  --rx-radius-window: 12px;
  --rx-radius-panel:  10px;
  --rx-radius-field:  6px;
  --rx-radius-inner:  calc(var(--rx-outer-radius, var(--rx-radius-window)) - var(--rx-padding, 0px));
  --rx-radius-pill:   999px;

  /* 动效：克制、短促、有目的 */
  --rx-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --rx-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --rx-dur-fast: 120ms;
  --rx-dur-base: 200ms;
  --rx-dur-slow: 320ms;

  /* ── 语义色 · 亮色（默认）── */
  color-scheme: light;
  --rx-label-primary:    rgba(0, 0, 0, 0.88);
  --rx-label-secondary:  rgba(0, 0, 0, 0.60);
  --rx-label-tertiary:   rgba(0, 0, 0, 0.38);
  --rx-label-quaternary: rgba(0, 0, 0, 0.22);
  --rx-label-on-accent:  #ffffff;

  --rx-surface-window: rgba(250, 250, 252, 0.78);
  --rx-surface-chrome: rgba(250, 250, 252, 0.72);
  --rx-surface-card:   rgba(255, 255, 255, 0.72);
  --rx-surface-sunken: rgba(0, 0, 0, 0.045);
  --rx-surface-hover:  rgba(0, 0, 0, 0.055);
  --rx-surface-active: rgba(0, 0, 0, 0.10);
  --rx-surface-solid:  #fbfbfd;          /* 不支持毛玻璃时的兜底 */
  /* 画布：应用页面的底色。与桌面窗口内容区（--canvas）同值 ——
     应用把 body 设成 transparent 时，窗口内外才是一块画布；
     应用单独打开（不在桌面窗口里）时，这一层就是它自己的底色。 */
  --rx-canvas:        #ffffff;
  /* 菜单/Toast 用的厚面：浮在内容之上时要压住底下的颜色，78% 不够 ——
     底下是纯红按钮时，22% 的透光会让菜单文字看起来是红的 */
  --rx-surface-overlay: rgba(252, 252, 255, 0.93);

  --rx-hairline:        rgba(0, 0, 0, 0.11);
  --rx-hairline-strong: rgba(0, 0, 0, 0.18);
  --rx-stroke-control:  rgba(0, 0, 0, 0.14);
  --rx-stroke-focus:    color-mix(in srgb, var(--rx-accent) 62%, transparent);

  --rx-accent:       #0a6cff;
  --rx-accent-hover: #2b81ff;
  --rx-accent-press: #0a5ad8;
  --rx-accent-soft:  color-mix(in srgb, var(--rx-accent) 14%, transparent);
  --rx-accent-ring:  color-mix(in srgb, var(--rx-accent) 34%, transparent);

  --rx-semantic-red:    #d70015;
  --rx-semantic-yellow: #b25000;
  --rx-semantic-green:  #1a7f37;
  --rx-semantic-blue:   #0a6cff;

  --rx-shadow-window: 0 0 0 0.5px rgba(0,0,0,0.22), 0 12px 28px -6px rgba(0,0,0,0.32),
                      0 32px 64px -18px rgba(0,0,0,0.36);
  --rx-shadow-panel:  0 1px 2px rgba(0,0,0,0.10), 0 8px 24px -8px rgba(0,0,0,0.24);
  --rx-shadow-menu:   0 0 0 0.5px rgba(0,0,0,0.16), 0 6px 16px -4px rgba(0,0,0,0.22),
                      0 20px 40px -14px rgba(0,0,0,0.28);
}

/* ── 深色 · 手动 ──
   与桌面一致：`data-theme="dark"` 是用户的选择，`auto` 跟随系统。两份值必须
   逐字相同（CSS 没有「复用规则块」的语法，只能写两遍）。 */
.rx[data-theme="dark"] {
  color-scheme: dark;
  --rx-label-primary:    rgba(255, 255, 255, 0.94);
  --rx-label-secondary:  rgba(255, 255, 255, 0.62);
  --rx-label-tertiary:   rgba(255, 255, 255, 0.38);
  --rx-label-quaternary: rgba(255, 255, 255, 0.20);
  --rx-label-on-accent:  #ffffff;

  --rx-surface-window: rgba(28, 28, 32, 0.72);
  --rx-surface-chrome: rgba(30, 30, 35, 0.70);
  --rx-surface-card:   rgba(255, 255, 255, 0.06);
  --rx-surface-sunken: rgba(0, 0, 0, 0.28);
  --rx-surface-hover:  rgba(255, 255, 255, 0.085);
  --rx-surface-active: rgba(255, 255, 255, 0.15);
  --rx-surface-solid:  #16161a;
  --rx-surface-overlay: rgba(40, 40, 46, 0.94);
  --rx-canvas:          #16161a;

  --rx-hairline:        rgba(255, 255, 255, 0.13);
  --rx-hairline-strong: rgba(255, 255, 255, 0.22);
  --rx-stroke-control:  rgba(255, 255, 255, 0.16);

  --rx-accent:       #4a9eff;
  --rx-accent-hover: #6bb0ff;
  --rx-accent-press: #2f80e0;
  --rx-accent-soft:  color-mix(in srgb, var(--rx-accent) 22%, transparent);
  --rx-accent-ring:  color-mix(in srgb, var(--rx-accent) 42%, transparent);

  --rx-semantic-red:    #ff6b63;
  --rx-semantic-yellow: #ffb340;
  --rx-semantic-green:  #3fd07a;
  --rx-semantic-blue:   #4a9eff;

  --rx-shadow-window: 0 0 0 0.5px rgba(0,0,0,0.55), 0 14px 32px -6px rgba(0,0,0,0.62),
                      0 36px 72px -20px rgba(0,0,0,0.70);
  --rx-shadow-panel: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px -8px rgba(0,0,0,0.55);
  --rx-shadow-menu:  0 0 0 0.5px rgba(0,0,0,0.5), 0 6px 16px -4px rgba(0,0,0,0.5),
                     0 20px 40px -14px rgba(0,0,0,0.6);
}

/* ── 深色 · 跟随系统 ── */
@media (prefers-color-scheme: dark) {
  .rx[data-theme="auto"] {
    color-scheme: dark;
    --rx-label-primary:    rgba(255, 255, 255, 0.94);
    --rx-label-secondary:  rgba(255, 255, 255, 0.62);
    --rx-label-tertiary:   rgba(255, 255, 255, 0.38);
    --rx-label-quaternary: rgba(255, 255, 255, 0.20);
    --rx-label-on-accent:  #ffffff;

    --rx-surface-window: rgba(28, 28, 32, 0.72);
    --rx-surface-chrome: rgba(30, 30, 35, 0.70);
    --rx-surface-card:   rgba(255, 255, 255, 0.06);
    --rx-surface-sunken: rgba(0, 0, 0, 0.28);
    --rx-surface-hover:  rgba(255, 255, 255, 0.085);
    --rx-surface-active: rgba(255, 255, 255, 0.15);
    --rx-surface-solid:  #16161a;
    --rx-surface-overlay: rgba(40, 40, 46, 0.94);
    --rx-canvas:          #16161a;

    --rx-hairline:        rgba(255, 255, 255, 0.13);
    --rx-hairline-strong: rgba(255, 255, 255, 0.22);
    --rx-stroke-control:  rgba(255, 255, 255, 0.16);

    --rx-accent:       #4a9eff;
    --rx-accent-hover: #6bb0ff;
    --rx-accent-press: #2f80e0;
    --rx-accent-soft:  color-mix(in srgb, var(--rx-accent) 22%, transparent);
    --rx-accent-ring:  color-mix(in srgb, var(--rx-accent) 42%, transparent);

    --rx-semantic-red:    #ff6b63;
    --rx-semantic-yellow: #ffb340;
    --rx-semantic-green:  #3fd07a;
    --rx-semantic-blue:   #4a9eff;

    --rx-shadow-window: 0 0 0 0.5px rgba(0,0,0,0.55), 0 14px 32px -6px rgba(0,0,0,0.62),
                        0 36px 72px -20px rgba(0,0,0,0.70);
    --rx-shadow-panel: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px -8px rgba(0,0,0,0.55);
    --rx-shadow-menu:  0 0 0 0.5px rgba(0,0,0,0.5), 0 6px 16px -4px rgba(0,0,0,0.5),
                       0 20px 40px -14px rgba(0,0,0,0.6);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 2. 基础
 * ═══════════════════════════════════════════════════════════════════════════ */

/* 覆盖层壳（Toast / 菜单 / 对话框的挂载点）。
   它带 .rx 是为了拿到令牌，但绝不能有底色：.rx 的 background 是画布色，
   而这个壳是 fixed + inset:0 的整屏容器 —— 有底色就会把页面全盖住。 */
.rx.rx-overlay-root {
  background: transparent;
}

.rx {
  font-family: var(--rx-font-sans);
  font-size: 13.5px;
  line-height: 1.48;
  color: var(--rx-label-primary);
  /* 画布底色：桌面窗口内容区（--canvas）用的是同一个值，所以应用在窗口里
     与窗口外是一块连续的画布；应用单独打开时，这一层就是它的底色。
     不要写 transparent —— 暗色主题下白字会落在 iframe 的白底上。 */
  background: var(--rx-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* 等宽数字：时间、尺寸、日志行号不会因数字宽度变化而抖动 */
  font-feature-settings: "tnum" 1, "cv05" 1, "ss03" 1;
  font-variant-numeric: tabular-nums;
  text-rendering: optimizeLegibility;
}
.rx *,
.rx *::before,
.rx *::after { box-sizing: border-box; }

.rx ::selection { background: var(--rx-accent-soft); }

/* 键盘焦点：只在键盘操作时出现（§可访问性），鼠标点不给描边 */
.rx :focus-visible {
  outline: none;
  box-shadow: 0 0 0 3.5px var(--rx-accent-ring);
  border-color: var(--rx-accent);
}

/* 滚动条：细、半透明、悬停才明显 */
.rx ::-webkit-scrollbar { width: 9px; height: 9px; }
.rx ::-webkit-scrollbar-thumb {
  background: var(--rx-label-quaternary);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.rx ::-webkit-scrollbar-thumb:hover { background: var(--rx-label-tertiary); background-clip: padding-box; }
.rx ::-webkit-scrollbar-track { background: transparent; }

/* ═══════════════════════════════════════════════════════════════════════════
 * 3. 排版
 * ═══════════════════════════════════════════════════════════════════════════ */

.rx-title       { font: var(--rx-font-title); letter-spacing: var(--rx-tracking-title); margin: 0; }
.rx-subtitle    { font: var(--rx-font-subtitle); letter-spacing: var(--rx-tracking-title); margin: 0; }
.rx-body        { font: var(--rx-font-body); letter-spacing: var(--rx-tracking-body); margin: 0; }
.rx-caption     { font: var(--rx-font-caption); color: var(--rx-label-secondary); margin: 0; }
.rx-status      { font: var(--rx-font-status); color: var(--rx-label-tertiary); }
.rx-tnum        { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* 小型分区标签是唯一允许全大写的场合（§2.1） */
.rx-section-label {
  font: var(--rx-font-status);
  text-transform: uppercase;
  letter-spacing: var(--rx-tracking-caps);
  color: var(--rx-label-tertiary);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 4. 材质（§2.2 / §4）—— 三种，禁止叠加
 * ═══════════════════════════════════════════════════════════════════════════ */

.rx-glass {
  background: var(--rx-surface-window);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
}
.rx-glass-thin {
  background: var(--rx-surface-chrome);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
}
.rx-glass-thick {
  background: color-mix(in srgb, var(--rx-surface-card) 92%, var(--rx-label-primary) 0%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
}

/* 老 WebView 没有 backdrop-filter：回落到不透明面，可读性优先 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .rx-glass, .rx-glass-thin, .rx-glass-thick { background: var(--rx-surface-solid); }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 5. 按钮（§3.5）
 * ═══════════════════════════════════════════════════════════════════════════ */

.rx-btn {
  height: var(--rx-control-h);
  padding: 0 12px;
  font: var(--rx-font-toolbar);
  color: var(--rx-label-primary);
  background: var(--rx-surface-card);
  border: 0.5px solid var(--rx-stroke-control);
  border-radius: var(--rx-radius-field);
  box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  transition: background var(--rx-dur-fast) var(--rx-ease-out),
              transform var(--rx-dur-fast) var(--rx-ease-out);
  -webkit-user-select: none;
  user-select: none;
}
.rx-btn:hover { background: var(--rx-surface-hover); }
.rx-btn:active { background: var(--rx-surface-active); transform: scale(0.97); }
.rx-btn[disabled], .rx-btn.is-disabled { opacity: 0.42; pointer-events: none; }

.rx-btn.primary {
  background: var(--rx-accent);
  color: var(--rx-label-on-accent);
  border-color: transparent;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--rx-accent) 40%, transparent);
}
.rx-btn.primary:hover { background: var(--rx-accent-hover); }
.rx-btn.primary:active { background: var(--rx-accent-press); }

.rx-btn.destructive {
  background: var(--rx-semantic-red);
  color: #fff;
  border-color: transparent;
}
.rx-btn.destructive:hover { filter: brightness(1.08); }

.rx-btn.soft {
  background: var(--rx-accent-soft);
  color: var(--rx-accent);
  border-color: transparent;
  box-shadow: none;
}
.rx-btn.soft:hover { background: color-mix(in srgb, var(--rx-accent) 22%, transparent); }

.rx-btn.plain {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--rx-label-secondary);
}
.rx-btn.plain:hover { background: var(--rx-surface-hover); color: var(--rx-label-primary); }

/* 尺寸 */
.rx-btn.sm { height: 24px; padding: 0 9px; font-size: 12px; border-radius: 5px; }
.rx-btn.lg { height: var(--rx-control-h-lg); padding: 0 16px; border-radius: 8px; }
.rx-btn.block { width: 100%; }

/* 纯图标按钮：圆形（§2.4） */
.rx-icon-btn {
  width: var(--rx-control-h);
  height: var(--rx-control-h);
  padding: 0;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  border: 0.5px solid transparent;
  background: transparent;
  color: var(--rx-label-secondary);
  cursor: pointer;
  transition: background var(--rx-dur-fast) var(--rx-ease-out);
}
.rx-icon-btn:hover { background: var(--rx-surface-hover); color: var(--rx-label-primary); }
.rx-icon-btn:active { background: var(--rx-surface-active); }

/* 按钮组：胶囊（§2.4 浮动控制组） */
.rx-btn-group {
  display: inline-flex;
  padding: 2px;
  gap: 2px;
  border-radius: 999px;
  background: var(--rx-surface-sunken);
}
.rx-btn-group > .rx-btn {
  border: 0;
  box-shadow: none;
  background: transparent;
  border-radius: 999px;
  height: 24px;
  padding: 0 12px;
  color: var(--rx-label-secondary);
}
.rx-btn-group > .rx-btn:hover { color: var(--rx-label-primary); }
.rx-btn-group > .rx-btn.on {
  background: var(--rx-surface-card);
  color: var(--rx-label-primary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 6. 表单控件（§3.5）
 * ═══════════════════════════════════════════════════════════════════════════ */

.rx-field { display: flex; flex-direction: column; gap: 5px; }
.rx-field > label { font: var(--rx-font-status); color: var(--rx-label-secondary); }

.rx-input, .rx-textarea, .rx-select {
  width: 100%;
  font: var(--rx-font-body);
  color: var(--rx-label-primary);
  background: var(--rx-surface-card);
  border: 0.5px solid var(--rx-stroke-control);
  border-radius: var(--rx-radius-field);
  padding: 0 10px;
  height: var(--rx-control-h);
  transition: border-color var(--rx-dur-fast) var(--rx-ease-out),
              box-shadow var(--rx-dur-fast) var(--rx-ease-out);
}
.rx-textarea {
  height: auto;
  min-height: 68px;
  padding: 7px 10px;
  line-height: 1.45;
  resize: vertical;
}
.rx-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 26px;
  /* 自绘箭头：不依赖系统下拉外观，深色下也不会变成白底 */
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 14px) 12px, calc(100% - 9px) 12px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.rx-input::placeholder, .rx-textarea::placeholder { color: var(--rx-label-tertiary); }
.rx-input:focus, .rx-textarea:focus, .rx-select:focus {
  outline: none;
  border-color: var(--rx-accent);
  box-shadow: 0 0 0 3.5px var(--rx-accent-ring);
}
.rx-input[disabled], .rx-textarea[disabled] { opacity: 0.55; cursor: not-allowed; }
.rx-field .rx-hint { font: var(--rx-font-caption); color: var(--rx-label-tertiary); }
.rx-field .rx-error { font: var(--rx-font-caption); color: var(--rx-semantic-red); }

/* 搜索框：凹陷底 + 前置图标 */
.rx-search {
  position: relative;
  display: flex;
  align-items: center;
}
.rx-search::before {
  content: "";
  position: absolute;
  left: 9px;
  width: 12px;
  height: 12px;
  border: 1.6px solid var(--rx-label-tertiary);
  border-radius: 999px;
  pointer-events: none;
}
.rx-search::after {
  content: "";
  position: absolute;
  left: 19px;
  top: 50%;
  width: 4px;
  height: 1.6px;
  background: var(--rx-label-tertiary);
  transform: rotate(45deg);
  pointer-events: none;
}
.rx-search > .rx-input {
  padding-left: 26px;
  background: var(--rx-surface-sunken);
  border-color: transparent;
}

/* 开关：用 checkbox 驱动，纯 CSS（不要 JS 才有状态） */
.rx-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.rx-switch > input { position: absolute; opacity: 0; width: 0; height: 0; }
.rx-switch > .rx-track {
  width: 36px;
  height: 21px;
  flex: none;
  border-radius: 999px;
  background: var(--rx-label-quaternary);
  position: relative;
  transition: background var(--rx-dur-base) var(--rx-ease-out);
}
.rx-switch > .rx-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 17px;
  height: 17px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform var(--rx-dur-base) var(--rx-ease-out);
}
.rx-switch > input:checked + .rx-track { background: var(--rx-semantic-green); }
.rx-switch > input:checked + .rx-track::after { transform: translateX(15px); }
.rx-switch > input:focus-visible + .rx-track { box-shadow: 0 0 0 3.5px var(--rx-accent-ring); }
.rx-switch > input:disabled + .rx-track { opacity: 0.45; }
.rx-switch.accent > input:checked + .rx-track { background: var(--rx-accent); }

/* 复选框 / 单选：方形 / 圆形，勾用伪元素画 */
.rx-check, .rx-radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.rx-check > input, .rx-radio > input { position: absolute; opacity: 0; width: 0; height: 0; }
.rx-check > .rx-box, .rx-radio > .rx-box {
  width: 16px;
  height: 16px;
  flex: none;
  border-radius: 4px;
  border: 1.5px solid var(--rx-stroke-control);
  background: var(--rx-surface-card);
  position: relative;
  transition: background var(--rx-dur-fast) var(--rx-ease-out),
              border-color var(--rx-dur-fast) var(--rx-ease-out);
}
.rx-radio > .rx-box { border-radius: 999px; }
.rx-check > input:checked + .rx-box,
.rx-radio > input:checked + .rx-box {
  background: var(--rx-accent);
  border-color: var(--rx-accent);
}
.rx-check > input:checked + .rx-box::after {
  content: "";
  position: absolute;
  left: 4.5px;
  top: 1.5px;
  width: 4px;
  height: 8px;
  border: 1.8px solid #fff;
  border-top: 0;
  border-left: 0;
  transform: rotate(42deg);
}
.rx-radio > input:checked + .rx-box::after {
  content: "";
  position: absolute;
  inset: 3.5px;
  border-radius: 999px;
  background: #fff;
}
.rx-check > input:focus-visible + .rx-box,
.rx-radio > input:focus-visible + .rx-box { box-shadow: 0 0 0 3.5px var(--rx-accent-ring); }

/* 滑块 */
.rx-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: var(--rx-surface-active);
  outline: none;
}
.rx-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 999px;
  background: #fff;
  border: 0.5px solid var(--rx-hairline-strong);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}
.rx-slider::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border-radius: 999px;
  background: #fff;
  border: 0.5px solid var(--rx-hairline-strong);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}
.rx-slider:focus-visible { box-shadow: 0 0 0 3.5px var(--rx-accent-ring); }

/* 分段控件（§3.5：胶囊 + 选中项浮起） */
.rx-seg {
  display: inline-flex;
  padding: 2px;
  gap: 2px;
  border-radius: 999px;
  background: var(--rx-surface-sunken);
}
.rx-seg > button {
  height: 26px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--rx-label-secondary);
  font: var(--rx-font-toolbar);
  cursor: pointer;
  transition: background var(--rx-dur-fast) var(--rx-ease-out),
              color var(--rx-dur-fast) var(--rx-ease-out);
}
.rx-seg > button:hover { color: var(--rx-label-primary); }
.rx-seg > button.on {
  background: var(--rx-surface-card);
  color: var(--rx-label-primary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14);
}

/* 步进器 */
.rx-stepper {
  display: inline-flex;
  align-items: center;
  border: 0.5px solid var(--rx-stroke-control);
  border-radius: var(--rx-radius-field);
  overflow: hidden;
  background: var(--rx-surface-card);
}
.rx-stepper > button {
  width: 26px;
  height: var(--rx-control-h);
  border: 0;
  background: transparent;
  color: var(--rx-label-secondary);
  cursor: pointer;
  font-size: 14px;
}
.rx-stepper > button:hover { background: var(--rx-surface-hover); }
.rx-stepper > input {
  width: 44px;
  height: var(--rx-control-h);
  border: 0;
  border-left: 0.5px solid var(--rx-hairline);
  border-right: 0.5px solid var(--rx-hairline);
  background: transparent;
  color: inherit;
  font: var(--rx-font-body);
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 7. 容器：卡片 / 列表 / 工具栏 / 侧边栏 / 表格
 * ═══════════════════════════════════════════════════════════════════════════ */

.rx-card {
  --rx-outer-radius: var(--rx-radius-panel);
  --rx-padding: 14px;
  padding: var(--rx-padding);
  border-radius: var(--rx-radius-panel);
  background: var(--rx-surface-card);
  border: 0.5px solid var(--rx-hairline);
  box-shadow: var(--rx-shadow-panel);
}
.rx-card.tight { --rx-padding: 10px; }

.rx-panel {
  border-radius: var(--rx-radius-panel);
  border: 0.5px solid var(--rx-hairline);
  background: var(--rx-surface-window);
  overflow: hidden;
}

.rx-list { display: flex; flex-direction: column; }
.rx-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--rx-radius-field);
  transition: background var(--rx-dur-fast) var(--rx-ease-out);
}
.rx-row + .rx-row { box-shadow: inset 0 0.5px 0 var(--rx-hairline); }
.rx-row:hover { background: var(--rx-surface-hover); }
.rx-row.on { background: var(--rx-accent-soft); }
.rx-row-main { min-width: 0; flex: 1; }
.rx-row-title {
  font: var(--rx-font-body);
  color: var(--rx-label-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rx-row-sub { font: var(--rx-font-caption); color: var(--rx-label-tertiary); }

.rx-hairline { height: 0.5px; background: var(--rx-hairline); border: 0; margin: 0; }

/* 工具栏：统一（unified）样式，一条细分割线与内容分开 */
.rx-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 12px;
  border-bottom: 0.5px solid var(--rx-hairline);
  background: var(--rx-surface-chrome);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
}
.rx-toolbar .rx-spacer { flex: 1; }
.rx-toolbar.compact { height: 38px; }

/* 侧边栏：顶级导航，条目可快速扫视（§3.4） */
.rx-sidebar {
  width: 200px;
  flex: none;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-right: 0.5px solid var(--rx-hairline);
  background: var(--rx-surface-chrome);
}
.rx-sidebar .rx-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 9px;
  border-radius: var(--rx-radius-field);
  color: var(--rx-label-secondary);
  text-decoration: none;
  font: var(--rx-font-toolbar);
  cursor: pointer;
}
.rx-sidebar .rx-nav-item:hover { background: var(--rx-surface-hover); color: var(--rx-label-primary); }
.rx-sidebar .rx-nav-item.on { background: var(--rx-accent-soft); color: var(--rx-accent); }

.rx-split { display: flex; min-height: 0; }
.rx-split > .rx-main { flex: 1; min-width: 0; }

/* 表格：细线、等宽数字、表头吸顶 */
.rx-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font: var(--rx-font-body);
}
.rx-table th {
  text-align: left;
  font: var(--rx-font-status);
  color: var(--rx-label-tertiary);
  padding: 7px 10px;
  border-bottom: 0.5px solid var(--rx-hairline);
  background: var(--rx-surface-chrome);
  position: sticky;
  top: 0;
  text-transform: none;
}
.rx-table td {
  padding: 8px 10px;
  border-bottom: 0.5px solid var(--rx-hairline);
  color: var(--rx-label-primary);
}
.rx-table tbody tr:hover td { background: var(--rx-surface-hover); }
.rx-table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* 徽标 / 标签 */
.rx-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 18px;
  padding: 0 6px;
  border-radius: 5px;
  font: var(--rx-font-status);
  background: var(--rx-surface-sunken);
  color: var(--rx-label-secondary);
}
.rx-badge.accent { background: var(--rx-accent-soft); color: var(--rx-accent); }
.rx-badge.green  { background: color-mix(in srgb, var(--rx-semantic-green) 16%, transparent); color: var(--rx-semantic-green); }
.rx-badge.yellow { background: color-mix(in srgb, var(--rx-semantic-yellow) 18%, transparent); color: var(--rx-semantic-yellow); }
.rx-badge.red    { background: color-mix(in srgb, var(--rx-semantic-red) 16%, transparent); color: var(--rx-semantic-red); }
.rx-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  flex: none;
}

/* 标签页：下划线式（窗口内的分区切换） */
.rx-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 0.5px solid var(--rx-hairline);
}
.rx-tab {
  height: 32px;
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: var(--rx-label-secondary);
  font: var(--rx-font-toolbar);
  cursor: pointer;
  position: relative;
}
.rx-tab:hover { color: var(--rx-label-primary); }
.rx-tab.on { color: var(--rx-label-primary); }
.rx-tab.on::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: -0.5px;
  height: 2px;
  border-radius: 2px;
  background: var(--rx-accent);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 8. 反馈：进度 / 骨架 / 空状态 / Toast / 对话框 / 菜单
 * ═══════════════════════════════════════════════════════════════════════════ */

.rx-progress {
  height: 5px;
  border-radius: 999px;
  background: var(--rx-surface-active);
  overflow: hidden;
}
.rx-progress > i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--rx-accent);
  transition: width var(--rx-dur-base) var(--rx-ease-out);
}
.rx-progress.indeterminate > i {
  width: 35%;
  animation: rx-slide 1.1s var(--rx-ease-in-out) infinite;
}
@keyframes rx-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(300%); }
}

/* 转圈：纯 CSS，尺寸跟随字号 */
.rx-spinner {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid var(--rx-label-quaternary);
  border-top-color: var(--rx-accent);
  animation: rx-spin 700ms linear infinite;
  display: inline-block;
}
@keyframes rx-spin { to { transform: rotate(360deg); } }

.rx-skeleton {
  border-radius: 6px;
  background: linear-gradient(90deg,
    var(--rx-surface-sunken) 0%,
    var(--rx-surface-hover) 50%,
    var(--rx-surface-sunken) 100%);
  background-size: 200% 100%;
  animation: rx-shimmer 1.4s linear infinite;
  height: 12px;
}
@keyframes rx-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.rx-empty {
  padding: 28px 16px;
  text-align: center;
  color: var(--rx-label-tertiary);
  font: var(--rx-font-caption);
}

.rx-kbd {
  display: inline-block;
  min-width: 18px;
  padding: 1px 5px;
  border-radius: 5px;
  border: 0.5px solid var(--rx-hairline-strong);
  border-bottom-width: 1.5px;
  background: var(--rx-surface-card);
  font: 11px/1.5 var(--rx-font-mono);
  color: var(--rx-label-secondary);
  text-align: center;
}

.rx-code {
  font: 12px/1.55 var(--rx-font-mono);
  background: var(--rx-surface-sunken);
  border-radius: var(--rx-radius-field);
  padding: 9px 11px;
  overflow: auto;
  color: var(--rx-label-primary);
  white-space: pre;
}

/* ── Toast ── */
.rx-toasts {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 3000;
  pointer-events: none;
}
.rx-toast {
  pointer-events: auto;
  max-width: min(420px, 88vw);
  padding: 9px 14px;
  border-radius: 999px;
  font: var(--rx-font-toolbar);
  color: var(--rx-label-primary);
  background: var(--rx-surface-overlay);
  border: 0.5px solid var(--rx-hairline);
  box-shadow: var(--rx-shadow-menu);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  transition: opacity var(--rx-dur-base) var(--rx-ease-out),
              transform var(--rx-dur-base) var(--rx-ease-out);
  white-space: pre-wrap;
  word-break: break-word;
}
.rx-toast.in { opacity: 1; transform: none; }
.rx-toast.error { color: var(--rx-semantic-red); }
.rx-toast.ok { color: var(--rx-semantic-green); }

/* ── 对话框 ── */
.rx-scrim {
  position: fixed;
  inset: 0;
  z-index: 2500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.34);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity var(--rx-dur-base) var(--rx-ease-out);
}
.rx-scrim.in { opacity: 1; }
.rx-dialog {
  width: min(420px, 100%);
  max-height: min(84vh, 720px);
  display: flex;
  flex-direction: column;
  border-radius: var(--rx-radius-window);
  border: 0.5px solid var(--rx-hairline);
  background: var(--rx-surface-window);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  box-shadow: var(--rx-shadow-window);
  overflow: hidden;
  transform: translateY(10px) scale(0.98);
  transition: transform var(--rx-dur-base) var(--rx-ease-out);
}
.rx-scrim.in .rx-dialog { transform: none; }
.rx-dialog.wide { width: min(640px, 100%); }
.rx-dialog-head {
  padding: 16px 18px 6px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.rx-dialog-head .rx-dialog-title {
  font: var(--rx-font-subtitle);
  letter-spacing: var(--rx-tracking-title);
  flex: 1;
  min-width: 0;
}
.rx-dialog-body {
  padding: 4px 18px 14px;
  overflow: auto;
  font: var(--rx-font-body);
  color: var(--rx-label-secondary);
  -webkit-overflow-scrolling: touch;
}
.rx-dialog-foot {
  padding: 12px 18px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  border-top: 0.5px solid var(--rx-hairline);
}

/* ── 菜单（下拉 / 上下文）── */
.rx-menu {
  position: absolute;
  z-index: 2400;
  min-width: 180px;
  padding: 5px;
  border-radius: var(--rx-radius-panel);
  border: 0.5px solid var(--rx-hairline);
  background: var(--rx-surface-overlay);
  box-shadow: var(--rx-shadow-menu);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  display: none;
}
.rx-menu.open { display: block; }
.rx-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 9px;
  border-radius: 6px;
  font: var(--rx-font-toolbar);
  color: var(--rx-label-primary);
  cursor: pointer;
  white-space: nowrap;
}
.rx-menu-item:hover { background: var(--rx-surface-hover); }
.rx-menu-item.danger { color: var(--rx-semantic-red); }
.rx-menu-item .rx-menu-key { margin-left: auto; color: var(--rx-label-tertiary); font: 11px var(--rx-font-mono); }
.rx-menu-sep { height: 0.5px; background: var(--rx-hairline); margin: 5px 4px; }

/* 深色下厚材质菜单别把文字压在壁纸上 */
.rx-menu, .rx-toast, .rx-dialog { color: var(--rx-label-primary); }