/* ============================================================
   Workbench Bridge · 主应用桥接层
   作用：把 workbench-desktop.html 的基础表现对齐 Ant Design 5。
   页面的主题变量（--page-bg / --surface-card / --accent 等）
   已在页内 :root 中映射到 design-system.css 的 antd 令牌，
   本文件只负责「变量管不到」的全局细节。
   ============================================================ */

/* 字体：antd 字阶统一，表单元素继承 */
input, select, textarea, button { font-family: inherit; }

/* 选区与滚动条统一为 antd 观感 */
::selection { background: var(--md-primary-container); color: var(--md-on-primary-container); }

*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border: none;
  border-radius: 4px;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.28); background-clip: padding-box; }

/* 内容区：滚动槽位预留，避免内容抖动 */
.main { scrollbar-gutter: stable; }

/* 卡片标题竖条 → antd 主色 */
.sec-title::before { background: var(--md-primary); }

/* 内嵌 iframe：暗色主题下避免刺眼白底 */
.embed-frame { color-scheme: light dark; }

/* 弹层/浮层统一 antd 海拔与圆角 */
[class*="modal"], [class*="sheet"], [class*="popover"] {
  border-radius: var(--md-shape-lg) !important;
  box-shadow: var(--md-elev-3) !important;
}

/* ---------- 通用布局助手（供页面直接使用） ---------- */
.wb-row { display: flex; align-items: center; gap: var(--md-s-3); flex-wrap: wrap; }
.wb-col { display: flex; flex-direction: column; gap: var(--md-s-3); }
.wb-grid { display: grid; gap: var(--md-s-4); }
.wb-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wb-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wb-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wb-grid--auto { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.wb-spacer { flex: 1; }
.wb-muted { color: var(--md-on-surface-variant); }

@media (max-width: 1100px) {
  .wb-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .wb-grid--2, .wb-grid--3, .wb-grid--4 { grid-template-columns: 1fr; }
}