/* ════════════════════════════════════════════════════════════════════
 * apple-radical.css — 存量按钮/选择器/操作栏覆盖层（兼容壳）
 *
 * 2026-07-31 视觉方向已冻结：不再扩写本文件、不再把它当作目标设计系统。
 * 见 docs/frontend-remediation/20260731-visual-direction-freeze.md
 *
 * 存量页面通过 data-design-skin="apple" 显式启用；新页面脚手架默认不引入。
 * 规则应走普通层叠 + var(--*)；禁止新增强制优先级声明。
 * ════════════════════════════════════════════════════════════════════ */

/* ─── 兼容壳 token 覆盖（存量；勿再扩写为目标设计系统） ── */
:root {
  --bg: #ffffff;
  --surface: #f5f5f7;
  --surface-warm: #fbfbfd;
  --fg: #1d1d1f;
  --fg-2: #424245;
  --muted: #6e6e73;
  --meta: #86868b;
  --border: #d2d2d7;
  --border-soft: #e8e8ed;
  --accent: #0071e3;
  --accent-on: #ffffff;
  --accent-hover: #0077ed;
  --accent-active: #0066cc;
  --on-accent: #ffffff;
  --dark-hover: #2c2c2e;
  --dark-active: #000000;
  --danger-hover: #b91c1c;
  --success: #16a34a;
  --warn: #eab308;
  --danger: #dc2626;

  --font-display: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, Monaco, Consolas, monospace;

  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 17px;
  --text-lg: 21px;
  --text-xl: 28px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 980px;

  --focus-ring: 0 0 0 4px color-mix(in oklab, var(--accent), transparent 65%);
  --motion-fast: 150ms;
  --motion-base: 220ms;
  --ease-standard: cubic-bezier(0.28, 0, 0.22, 1);
}

/* 暗色模式变量覆盖（修复 :root 覆盖 base.css [data-theme="dark"] 的问题）
 * apple-radical.css 在 base.css 之后加载，:root 与 [data-theme="dark"] 同等优先级，
 * 导致 :root 中的亮色变量覆盖了 base.css 的暗色变量。这里显式重新声明暗色值。 */
[data-theme="dark"] {
  --bg:           #0a0e1a;
  --surface:      #131825;
  --surface-warm: #1a2030;
  --fg:           #e8eaed;
  --fg-2:         #b8bcc4;
  --muted:        #9aa0ac;
  --meta:         #848a96;
  --border:       rgba(255, 255, 255, 0.08);
  --border-soft:  rgba(255, 255, 255, 0.04);
  --accent:       #4a9eff;
  --accent-hover: #5aabff;
  --accent-active:#3a8eef;
  --text-primary: var(--fg);
  --text-secondary: var(--muted);
  --text-muted:   var(--meta);
}

/* ════════════════════════════════════════════════════════════════════
 * 按钮覆盖 —— 普通按钮：实色 + 1px 边框，无 hover/active 动效、无阴影、无渐变、无光晕
 * ════════════════════════════════════════════════════════════════════ */

/*
 * 皮肤只在页面显式声明 data-design-skin="apple" 时生效。根选择器提供一层
 * 可见的优先级边界：通用按钮仍保持统一外观，页面的 ID 级/更具体组件规则可正常接管。
 */
/* 基类：所有原生 button 与 .btn 收纳为普通按钮 */
html[data-design-skin="apple"] :where(button, .btn, .ant-btn, .el-button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 15px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  font: 600 var(--text-sm)/1 var(--font-body);
  letter-spacing: -0.01em;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  background: var(--surface);
  color: var(--fg);
}

/* 主题切换滑块按钮豁免全局按钮胶囊样式（padding/height/border 会撑大按钮、挤占侧栏布局） */
html[data-design-skin="apple"] button[data-theme-toggle] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* primary —— --accent 蓝填充 */
html[data-design-skin="apple"] .btn-primary,
html[data-design-skin="apple"] .btn--primary,
html[data-design-skin="apple"] button.btn-primary,
html[data-design-skin="apple"] .ant-btn-primary,
html[data-design-skin="apple"] .el-button--primary,
html[data-design-skin="apple"] [data-variant="primary"] {
  background: var(--accent);
  color: var(--accent-on);
  border-color: var(--accent);
}

/* dark —— --fg 黑填充 */
html[data-design-skin="apple"] .btn-dark,
html[data-design-skin="apple"] .btn--dark,
html[data-design-skin="apple"] .ant-btn {
  background: var(--fg);
  color: var(--on-accent);
  border-color: var(--fg);
}

/* secondary —— 白底 + 1px 灰边 */
html[data-design-skin="apple"] .btn-secondary,
html[data-design-skin="apple"] .btn--secondary,
html[data-design-skin="apple"] .btn-default,
html[data-design-skin="apple"] .ant-btn-default,
html[data-design-skin="apple"] .el-button--default {
  background: var(--bg);
  color: var(--fg);
  border-color: var(--border);
}

/* ghost —— 透明 */
html[data-design-skin="apple"] .btn-ghost,
html[data-design-skin="apple"] .btn--ghost,
html[data-design-skin="apple"] .btn-link,
html[data-design-skin="apple"] .ant-btn-link,
html[data-design-skin="apple"] .el-button--text {
  background: transparent;
  color: var(--fg);
  border-color: transparent;
}

/* danger —— --danger 红填充 */
html[data-design-skin="apple"] .btn-danger,
html[data-design-skin="apple"] .btn--danger,
html[data-design-skin="apple"] .ant-btn-dangerous,
html[data-design-skin="apple"] .el-button--danger {
  background: var(--danger);
  color: var(--on-accent);
  border-color: var(--danger);
}

/* 尺寸 */
html[data-design-skin="apple"] .btn-lg,
html[data-design-skin="apple"] .btn--lg,
html[data-design-skin="apple"] .ant-btn-lg,
html[data-design-skin="apple"] .el-button--large {
  height: 44px;
  padding: 0 22px;
  font-size: 16px;
  border-radius: var(--radius-md);
}

/* 胶囊 */
html[data-design-skin="apple"] .btn-pill,
html[data-design-skin="apple"] .btn--pill,
html[data-design-skin="apple"] .btn-lg.btn--pill,
html[data-design-skin="apple"] .btn--lg.btn--pill {
  border-radius: var(--radius-pill);
  height: 44px;
  padding: 0 28px;
  font-size: 16px;
}

/* 禁用态 */
html[data-design-skin="apple"] :where(button, .btn)[disabled],
html[data-design-skin="apple"] :where(button, .btn).disabled,
html[data-design-skin="apple"] :where(button, .btn).is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ════════════════════════════════════════════════════════════════════
 * 顶栏导航 —— 把拥挤的彩色 ghost 按钮改成统一胶囊链接
 * ════════════════════════════════════════════════════════════════════ */
html[data-design-skin="apple"] .topbar,
html[data-design-skin="apple"] .navbar,
html[data-design-skin="apple"] header.navbar,
html[data-design-skin="apple"] header.gh-topbar,
html[data-design-skin="apple"] header[class*="topbar"] {
  position: sticky;
  top: 0;
  z-index: 100;
  /* 移除 backdrop-filter：顶栏常驻视口，blur(20px) 持续吃 GPU */
  background: var(--bg);
  border-bottom: 1px solid var(--border-soft);
}

/* topbar-left 改为纵向布局，让 eyebrow 显示在 title 上方 */
html[data-design-skin="apple"] .topbar-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
html[data-design-skin="apple"] .topbar-left .eyebrow {
  margin: 0;
}

html[data-design-skin="apple"] .topbar .ghost-button,
html[data-design-skin="apple"] .topbar .nav-link,
html[data-design-skin="apple"] .topbar a,
html[data-design-skin="apple"] .navbar a,
html[data-design-skin="apple"] .navbar .nav-link {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  border-radius: 6px;
  color: var(--fg-2);
  background: transparent;
  border: 0;
  font: 500 var(--text-sm)/1 var(--font-body);
  letter-spacing: -0.01em;
  text-decoration: none;
}
html[data-design-skin="apple"] .topbar .ghost-button:hover,
html[data-design-skin="apple"] .topbar a:hover,
html[data-design-skin="apple"] .navbar a:hover,
html[data-design-skin="apple"] .topbar a[aria-current="page"],
html[data-design-skin="apple"] .topbar a.active {
  background: var(--surface);
  color: var(--fg);
}

/* .system-admin-btn 只需更具体的组件选择器，不再依赖强制优先级。 */
html[data-design-skin="apple"] .topbar .system-admin-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  color: var(--fg-2);
  height: auto;
  font: 500 var(--text-sm)/1.4 var(--font-body);
  letter-spacing: 0;
}
html[data-design-skin="apple"] .topbar .system-admin-btn:hover {
  background: var(--bg-elevated);
  border-color: var(--accent);
  color: var(--accent);
}

/* ════════════════════════════════════════════════════════════════════
 * 侧边 stepper → 水平 stepper
 * 原生 .hub-stepper / .ant-steps / .el-steps 全部归一
 * ════════════════════════════════════════════════════════════════════ */
html[data-design-skin="apple"] .hub-stepper,
html[data-design-skin="apple"] .ant-steps,
html[data-design-skin="apple"] .el-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 18px;
  border: 1px solid var(--border);
}

html[data-design-skin="apple"] .hub-stepper .step,
html[data-design-skin="apple"] .ant-steps-item,
html[data-design-skin="apple"] .el-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 6px 10px;
}

html[data-design-skin="apple"] .hub-stepper .step + .step::before,
html[data-design-skin="apple"] .ant-steps-item + .ant-steps-item::before {
  content: "";
  position: absolute;
  top: 16px;
  left: calc(-50% + 18px);
  right: calc(50% + 18px);
  height: 1px;
  background: var(--border);
}

html[data-design-skin="apple"] .hub-stepper .step-dot,
html[data-design-skin="apple"] .ant-steps-item-icon,
html[data-design-skin="apple"] .el-step__circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  font: 600 13px/1 var(--font-body);
  color: var(--muted);
}

html[data-design-skin="apple"] .hub-stepper .step[data-state="done"] .step-dot,
html[data-design-skin="apple"] .ant-steps-item-finish .ant-steps-item-icon {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

html[data-design-skin="apple"] .hub-stepper .step[data-state="active"] .step-dot,
html[data-design-skin="apple"] .ant-steps-item-process .ant-steps-item-icon,
html[data-design-skin="apple"] .el-step.is-process .el-step__circle {
  background: var(--fg);
  border-color: var(--fg);
  color: var(--on-accent);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--fg), transparent 85%);
}

/* ════════════════════════════════════════════════════════════════════
 * Tab 按钮 → segmented control
 * 原生 nav-tabs / .ant-tabs-nav / .el-tabs__nav 归一
 * ════════════════════════════════════════════════════════════════════ */
html[data-design-skin="apple"] .segmented,
html[data-design-skin="apple"] .nav-tabs,
html[data-design-skin="apple"] .ant-tabs-nav,
html[data-design-skin="apple"] .el-tabs__nav-wrap {
  display: inline-flex;
  align-items: stretch;
  padding: 2px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  gap: 2px;
}

html[data-design-skin="apple"] .seg-btn,
html[data-design-skin="apple"] .nav-tabs .nav-link,
html[data-design-skin="apple"] .ant-tabs-tab,
html[data-design-skin="apple"] .el-tabs__item {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 6px 14px;
  border-radius: 8px;
  font: 500 13px/1 var(--font-body);
  color: var(--fg-2);
  cursor: pointer;
  margin: 0;
}
html[data-design-skin="apple"] .seg-btn:hover,
html[data-design-skin="apple"] .ant-tabs-tab:hover,
html[data-design-skin="apple"] .el-tabs__item:hover {
  color: var(--fg);
}
html[data-design-skin="apple"] .seg-btn[aria-selected="true"],
html[data-design-skin="apple"] .nav-tabs .nav-link.active,
html[data-design-skin="apple"] .ant-tabs-tab-active,
html[data-design-skin="apple"] .el-tabs__item.is-active {
  background: var(--bg);
  color: var(--fg);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 0 0 1px var(--border);
}

/* 干掉 ant-tabs 的下划线动画 */
html[data-design-skin="apple"] .ant-tabs-ink-bar { display: none; }

/* ════════════════════════════════════════════════════════════════════
 * Chip / badge —— 卖点标签统一胶囊
 * ════════════════════════════════════════════════════════════════════ */
html[data-design-skin="apple"] .chip,
html[data-design-skin="apple"] .badge,
html[data-design-skin="apple"] .tag,
html[data-design-skin="apple"] .ant-tag,
html[data-design-skin="apple"] .el-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  height: 28px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--fg);
  font: 500 13px/1 var(--font-body);
  border: 0;
  cursor: pointer;
}
html[data-design-skin="apple"] .chip:hover,
html[data-design-skin="apple"] .ant-tag:hover,
html[data-design-skin="apple"] .el-tag:hover {
  background: var(--border-soft);
}
html[data-design-skin="apple"] .chip[data-selected="true"],
html[data-design-skin="apple"] .chip.selected,
html[data-design-skin="apple"] .badge-success,
html[data-design-skin="apple"] .ant-tag-success {
  background: var(--fg);
  color: var(--on-accent);
}

/* 干掉原生红色 badge / tag */
html[data-design-skin="apple"] .badge-danger,
html[data-design-skin="apple"] .badge-error,
html[data-design-skin="apple"] .ant-tag-error {
  background: color-mix(in oklab, var(--danger), transparent 88%);
  color: var(--danger);
}

/* ════════════════════════════════════════════════════════════════════
 * 表单选择卡片 —— 覆盖 .mcp-cost-choice / 选项卡
 * 原生用了紫色粗边框 + 灰底，换成 Apple 风
 * ════════════════════════════════════════════════════════════════════ */
html[data-design-skin="apple"] .mcp-cost-choice,
html[data-design-skin="apple"] .choice-card,
html[data-design-skin="apple"] .option-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg);
  padding: 16px;
  transition: border-color var(--motion-fast) var(--ease-standard),
              background var(--motion-fast) var(--ease-standard),
              box-shadow var(--motion-fast) var(--ease-standard);
}
html[data-design-skin="apple"] .mcp-cost-choice:hover,
html[data-design-skin="apple"] .choice-card:hover,
html[data-design-skin="apple"] .option-card:hover {
  border-color: color-mix(in oklab, var(--border) 50%, var(--accent) 20%);
  background: var(--surface-warm);
}
html[data-design-skin="apple"] .mcp-cost-choice.selected,
html[data-design-skin="apple"] .mcp-cost-choice.active,
html[data-design-skin="apple"] .choice-card.selected,
html[data-design-skin="apple"] .choice-card.active,
html[data-design-skin="apple"] .option-card.selected {
  border-color: var(--accent);
  background: color-mix(in oklab, var(--accent), transparent 92%);
}

/* ════════════════════════════════════════════════════════════════════
 * 表单 input —— 苹果风细边输入框
 * ════════════════════════════════════════════════════════════════════ */
html[data-design-skin="apple"] input[type="text"],
html[data-design-skin="apple"] input[type="search"],
html[data-design-skin="apple"] input[type="email"],
html[data-design-skin="apple"] input[type="number"],
html[data-design-skin="apple"] textarea,
html[data-design-skin="apple"] .form-control,
html[data-design-skin="apple"] .ant-input,
html[data-design-skin="apple"] .el-input__inner {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--fg);
  font: 400 var(--text-base)/1.4 var(--font-body);
  padding: 8px 12px;
  transition: border-color var(--motion-fast) var(--ease-standard),
              box-shadow var(--motion-fast) var(--ease-standard);
}
html[data-design-skin="apple"] input:focus,
html[data-design-skin="apple"] textarea:focus,
html[data-design-skin="apple"] .form-control:focus,
html[data-design-skin="apple"] .ant-input:focus,
html[data-design-skin="apple"] .el-input__inner:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent), transparent 85%);
}

/* ════════════════════════════════════════════════════════════════════
 * Modal / Drawer / Toast —— 苹果风浮层
 * ════════════════════════════════════════════════════════════════════ */
html[data-design-skin="apple"] .modal-content,
html[data-design-skin="apple"] .ant-modal-content,
html[data-design-skin="apple"] .el-dialog,
html[data-design-skin="apple"] .drawer-content {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.18);
  background: var(--bg);
}

html[data-design-skin="apple"] .toast,
html[data-design-skin="apple"] .ant-message-notice,
html[data-design-skin="apple"] .el-message {
  background: var(--fg);
  color: var(--on-accent);
  border-radius: var(--radius-md);
  border: 0;
  padding: 12px 18px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}

/* ════════════════════════════════════════════════════════════════════
 * 表格 —— 苹果风克制行高
 * ════════════════════════════════════════════════════════════════════ */
html[data-design-skin="apple"] table,
html[data-design-skin="apple"] .table,
html[data-design-skin="apple"] .ant-table {
  border-collapse: separate;
  border-spacing: 0;
  font: 500 14px/1.4 var(--font-body);
  color: var(--fg);
  width: 100%;
}
html[data-design-skin="apple"] table thead th,
html[data-design-skin="apple"] .ant-table-thead > tr > th {
  color: var(--muted);
  font-weight: 600;
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-soft);
  background: transparent;
}
html[data-design-skin="apple"] table tbody td,
html[data-design-skin="apple"] .ant-table-tbody > tr > td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--border-soft);
}
html[data-design-skin="apple"] table tbody tr:hover,
html[data-design-skin="apple"] .ant-table-tbody > tr:hover > td {
  background: var(--surface);
}

/* ════════════════════════════════════════════════════════════════════
 * Sticky 底部 action bar —— 苹果风磨砂胶囊
 * ════════════════════════════════════════════════════════════════════ */
html[data-design-skin="apple"] .action-bar,
html[data-design-skin="apple"] .action-row,
html[data-design-skin="apple"] .sticky-actions {
  position: sticky;
  bottom: 16px;
  margin: 24px auto 0;
  max-width: var(--container-max, 1024px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: color-mix(in oklab, var(--bg) 85%, transparent);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  z-index: 50;
}

/* ════════════════════════════════════════════════════════════════════
 * 字体基线 —— 让原项目所有正文都走 SF Pro 体系
 * ════════════════════════════════════════════════════════════════════ */
html[data-design-skin="apple"] body,
html[data-design-skin="apple"] input,
html[data-design-skin="apple"] textarea,
html[data-design-skin="apple"] select,
html[data-design-skin="apple"] button {
  font-family: var(--font-body);
}
html[data-design-skin="apple"] h1,
html[data-design-skin="apple"] h2,
html[data-design-skin="apple"] h3,
html[data-design-skin="apple"] h4,
html[data-design-skin="apple"] h5,
html[data-design-skin="apple"] h6,
html[data-design-skin="apple"] .display {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-display);
}

/* ════════════════════════════════════════════════════════════════════
 * macOS 毛玻璃风格全覆盖
 * 对所有页面的 card / panel / sidebar / input / modal / table 统一应用
 * ════════════════════════════════════════════════════════════════════ */

/* 背景：单一实色（原 5 层 radial-gradient + linear-gradient 已移除，GPU 持续占用主因之一） */
html[data-design-skin="apple"] body {
  background: var(--bg);
}
html[data-design-skin="apple"][data-theme="dark"] body {
  background: #0a0e1a;
}

/* ════════════════════════════════════════════════════════════════════
 * 暗色模式 topbar 强制深色
 * ════════════════════════════════════════════════════════════════════ */
html[data-design-skin="apple"][data-theme="dark"] .topbar,
html[data-design-skin="apple"][data-theme="dark"] .gh-topbar,
html[data-design-skin="apple"][data-theme="dark"] header[class*="topbar"] {
  background: #0a0e1a;
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
html[data-design-skin="apple"][data-theme="dark"] .topbar-title,
html[data-design-skin="apple"][data-theme="dark"] .eyebrow,
html[data-design-skin="apple"][data-theme="dark"] .gh-topbar h1,
html[data-design-skin="apple"][data-theme="dark"] .gh-topbar .topbar-title {
  color: #e8ecf3;
}
html[data-design-skin="apple"][data-theme="dark"] .system-admin-btn {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: #b8bcc4;
}
html[data-design-skin="apple"][data-theme="dark"] .system-admin-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(74, 158, 255, 0.4);
  color: #4a9eff;
}
html[data-design-skin="apple"][data-theme="dark"] .user-name-trigger {
  color: #e8ecf3;
}

/* 注：原 .aurora-bg / .aurora-blob / @keyframes aurora-drift-* 已全部移除。
 *     页面 DOM 中的 <div class="aurora-bg"> 也已删除。 */

/* 侧边栏 —— 移除 backdrop-filter，改纯色背景（9 代 i3 核显优化） */
html[data-design-skin="apple"] .sidebar,
html[data-design-skin="apple"] .hub-stepper,
html[data-design-skin="apple"] [class*="sidebar"]:not(.gh-topbar) {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: var(--bg-card, var(--bg));
}

/* 卡片/面板 —— 移除 backdrop-filter */
html[data-design-skin="apple"] .card,
html[data-design-skin="apple"] .panel,
html[data-design-skin="apple"] .section-card,
html[data-design-skin="apple"] .result-card,
html[data-design-skin="apple"] .stat-card,
html[data-design-skin="apple"] .kpi-card,
html[data-design-skin="apple"] .chart-container,
html[data-design-skin="apple"] .table-container,
html[data-design-skin="apple"] .queue-section,
html[data-design-skin="apple"] .images-section,
html[data-design-skin="apple"] .image-grid,
html[data-design-skin="apple"] .detail-overlay,
html[data-design-skin="apple"] .checklist-bar,
html[data-design-skin="apple"] .placeholder-main > *,
html[data-design-skin="apple"] .control-panel,
html[data-design-skin="apple"] .hero {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* 输入框 —— 移除 backdrop-filter */
html[data-design-skin="apple"] input[type="text"],
html[data-design-skin="apple"] input[type="email"],
html[data-design-skin="apple"] input[type="password"],
html[data-design-skin="apple"] input[type="search"],
html[data-design-skin="apple"] input[type="number"],
html[data-design-skin="apple"] textarea,
html[data-design-skin="apple"] select,
html[data-design-skin="apple"] .search-input,
html[data-design-skin="apple"] .adopt-input {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* 模态/弹窗/下拉 —— 移除 backdrop-filter */
html[data-design-skin="apple"] .modal,
html[data-design-skin="apple"] .dialog,
html[data-design-skin="apple"] .dropdown-menu,
html[data-design-skin="apple"] .user-dropdown-menu,
html[data-design-skin="apple"] .popover,
html[data-design-skin="apple"] .tooltip {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: var(--bg-card, var(--bg));
}

/* ════════════════════════════════════════════════════════════════════
 * 按钮变体定制层（原"液体玻璃材质"已全部移除）
 * 按钮已统一为普通实色 + 1px 边框样式，无渐变、无阴影、无 hover/active 动效。
 * 变体定义见文件开头"按钮覆盖"区块。
 * ════════════════════════════════════════════════════════════════════ */

/* 表格容器 —— 移除 backdrop-filter */
html[data-design-skin="apple"] .table-wrap,
html[data-design-skin="apple"] .result-table-wrap {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Toast —— 移除 backdrop-filter */
html[data-design-skin="apple"] .toast,
html[data-design-skin="apple"] .hub-toast {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* 降级：不支持 backdrop-filter 的浏览器 */
@supports not (backdrop-filter: blur(10px)) {
  html[data-design-skin="apple"] .card,
  html[data-design-skin="apple"] .panel,
  html[data-design-skin="apple"] .section-card,
  html[data-design-skin="apple"] .sidebar,
  html[data-design-skin="apple"] .hub-stepper,
  html[data-design-skin="apple"] .modal,
  html[data-design-skin="apple"] .dialog,
  html[data-design-skin="apple"] .dropdown-menu,
  html[data-design-skin="apple"] .user-dropdown-menu {
    background: var(--bg-card, var(--bg));
  }
  /* 液体玻璃降级：回退为实色按钮 */
  :where(button, .btn) {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  html[data-design-skin="apple"] .btn-secondary,
  html[data-design-skin="apple"] .btn--secondary,
  html[data-design-skin="apple"] .btn-default {
    background: var(--bg);
    border-color: var(--border);
  }
  html[data-design-skin="apple"] .btn-ghost,
  html[data-design-skin="apple"] .btn--ghost,
  html[data-design-skin="apple"] .btn-link {
    background: transparent;
  }
  html[data-design-skin="apple"] .btn-primary,
  html[data-design-skin="apple"] .btn--primary {
    background: var(--accent);
  }
}

/* ════════════════════════════════════════════════════════════════════
 * 液体玻璃暗色主题适配
 * ════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] :where(button, .btn, .ant-btn, .el-button, [class*="btn"]) {
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.10),
    inset 0 -1px 0 0 rgba(0, 0, 0, 0.30),
    inset 1px 0 0 0 rgba(255, 255, 255, 0.04),
    inset -1px 0 0 0 rgba(255, 255, 255, 0.04),
    0 1px 2px rgba(0, 0, 0, 0.30),
    0 4px 12px rgba(0, 0, 0, 0.25);
}

html[data-design-skin="apple"][data-theme="dark"] .btn-secondary,
html[data-design-skin="apple"][data-theme="dark"] .btn--secondary,
html[data-design-skin="apple"][data-theme="dark"] .btn-default,
html[data-design-skin="apple"][data-theme="dark"] .ant-btn-default,
html[data-design-skin="apple"][data-theme="dark"] .el-button--default {
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0.03) 50%,
    rgba(255, 255, 255, 0.05) 100%);
  border-color: rgba(255, 255, 255, 0.10);
  color: var(--fg-2);
}

html[data-design-skin="apple"][data-theme="dark"] .btn-ghost,
html[data-design-skin="apple"][data-theme="dark"] .btn--ghost,
html[data-design-skin="apple"][data-theme="dark"] .btn-link,
html[data-design-skin="apple"][data-theme="dark"] .ant-btn-link,
html[data-design-skin="apple"][data-theme="dark"] .el-button--text {
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.04) 0%,
    transparent 50%,
    rgba(255, 255, 255, 0.03) 100%);
  color: var(--fg-2);
}

[data-theme="dark"] :where(button, .btn):hover {
  border-color: rgba(74, 158, 255, 0.5);
}

[data-theme="dark"] :where(button, .btn):active {
  background: rgba(255, 255, 255, 0.04);
}

/* prefers-reduced-motion：关闭液体玻璃的 transform 反馈 */
@media (prefers-reduced-motion: reduce) {
  :where(button, .btn):hover,
  :where(button, .btn):active {
    transform: none;
    transition: background var(--motion-fast) var(--ease-standard),
                color var(--motion-fast) var(--ease-standard);
  }
}