/* ============================================================
   今日工作台 · workbench.css
   作用范围：index.html（首页三栏摘要）与 center.html（个人中心完整版）共用
   设计约束：
     ① 颜色一律走 CSS 变量并带兜底 var(--x, fallback)，禁止硬编码色值（兼容 8 套主题）
     ② 新增类名一律 .wb-* 前缀；复用既有组件不改名（.mini-btn/.switch/.memo-item/…）
     ③ -mini 后缀 = 首页压缩变体，只压缩间距，不改结构、不改配色
     ④ 媒体查询块一律写在被覆写的基础规则之后（同优先级后者胜）
     ⑤ 末尾统一处理 prefers-reduced-motion 降级
     ⑥ 栅格必须写 minmax(0, Xfr)：Xfr 等价 minmax(auto, Xfr)，其 min-content 下限
        正是 390px 横向溢出的同类成因（详见文件末尾「390px 溢出修复」段）
   ============================================================ */

/* ============================================================
   一、从 center.css 下沉的共用组件（两页共用，center.css 不再重复定义）
   ============================================================ */

/* 通用小按钮 */
.mini-btn {
  width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--border, rgba(120, 160, 220, .22));
  background: var(--surface, rgba(255, 255, 255, .05)); color: var(--text-soft, #c3cee6);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  flex: none; padding: 0; transition: color .18s, border-color .18s, background .18s;
}
.mini-btn:hover { color: var(--cyan, #2af0ff); border-color: var(--border-strong, rgba(47, 107, 255, .5)); }
.mini-btn.danger:hover { color: var(--error, #ff6b5a); border-color: var(--error, #ff6b5a); }
.mini-btn .biz-ico { width: 16px; height: 16px; margin: 0; }

/* 计数胶囊 */
.count-pill {
  font-size: 12px; font-weight: 600; color: var(--text-mute, #8a93ad);
  background: var(--surface, rgba(255, 255, 255, .06)); border-radius: 20px; padding: 3px 10px;
  white-space: nowrap;
}

/* 空态提示 */
.empty-tip { color: var(--text-mute, #8a93ad); font-size: 14px; padding: 14px; text-align: center; }

/* ---------- 备忘 ---------- */
.memo-add { display: flex; gap: 10px; margin-bottom: 12px; }
.memo-add input { flex: 1; min-width: 0; }
.memo-add .btn { flex: none; }
.memo-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.memo-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px;
  background: var(--surface-2, rgba(20, 28, 48, .55)); border: 1px solid var(--border, rgba(120, 160, 220, .16));
  transition: border-color .2s, background .2s;
}
.memo-item.done .memo-text { text-decoration: line-through; color: var(--text-mute, #8a93ad); }
.memo-chk { display: inline-flex; flex: none; }
.memo-chk input { width: 18px; height: 18px; accent-color: var(--mint, #38ffd0); cursor: pointer; }
.memo-text { flex: 1; min-width: 0; color: var(--text, #eaf0ff); word-break: break-word; }
.memo-acts { display: flex; gap: 6px; flex: none; }
.memo-edit-input {
  flex: 1; min-width: 0;
  padding: 9px 12px; border-radius: 10px; background: var(--surface, rgba(255, 255, 255, .05));
  border: 1px solid var(--border-strong, rgba(47, 107, 255, .5)); color: var(--text); font-size: 14px; font-family: inherit;
}
.memo-add input {
  width: 100%; box-sizing: border-box; padding: 11px 13px; border-radius: 11px;
  background: var(--surface, rgba(255, 255, 255, .04)); border: 1px solid var(--border, rgba(120, 160, 220, .22));
  color: var(--text, #eaf0ff); font-size: 14px; font-family: inherit;
}
.memo-add input:focus { border-color: var(--border-strong, rgba(47, 107, 255, .5)); outline: none; }

/* ---------- 日程 ---------- */
.agenda { display: flex; flex-direction: column; gap: 6px; }
.agenda-item {
  display: flex; align-items: center; gap: 16px; padding: 14px 16px; border-radius: 14px;
  background: var(--surface-2, rgba(20, 28, 48, .55)); border: 1px solid var(--border, rgba(120, 160, 220, .16));
  transition: border-color .2s, transform .2s;
}
.agenda-item:hover { border-color: var(--border-strong, rgba(47, 107, 255, .5)); transform: translateX(3px); }
.ai-time { min-width: 70px; text-align: center; flex: none; }
.ai-hm { display: block; font-size: 17px; font-weight: 700; color: var(--text); }
.ai-hm2 { display: block; font-size: 12px; color: var(--text-mute, #8a93ad); }
.ai-main { flex: 1; min-width: 0; }
.ai-title { font-size: 16px; font-weight: 600; color: var(--text, #eaf0ff); word-break: break-word; }
.ai-meta { font-size: 13px; color: var(--text-soft, #9fb0d0); margin-top: 3px; word-break: break-word; }
.ai-acts { display: flex; gap: 6px; flex: none; }

/* ---------- 闹钟 ---------- */
.alarm-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.alarm-item {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px;
  border-radius: 14px;
  background: var(--surface-2, rgba(20, 28, 48, .55)); border: 1px solid var(--border, rgba(120, 160, 220, .16));
  transition: border-color .2s, opacity .2s;
}
.alarm-item.off { opacity: .55; }
.al-left { min-width: 0; flex: 1; }
.al-time { font-size: 24px; font-weight: 800; color: var(--text, #eaf0ff); font-family: var(--font-display, 'Orbitron', sans-serif); }
.al-rep { font-size: 13px; color: var(--text-soft, #9fb0d0); margin-top: 2px; }
.al-note { font-size: 12px; color: var(--text-mute, #8a93ad); margin-top: 2px; }
.al-right { display: flex; align-items: center; gap: 10px; flex: none; }

/* ---------- 开关 ---------- */
.switch { position: relative; display: inline-block; width: 44px; height: 24px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; inset: 0; background: rgba(120, 140, 170, .3); border-radius: 24px; transition: background .2s; }
.slider::before {
  content: ''; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: transform .2s;
}
.switch input:checked + .slider { background: var(--accent-grad, linear-gradient(120deg, #2af0ff, #b06bff)); }
.switch input:checked + .slider::before { transform: translateX(20px); }

/* ---------- 表单细节（模态共用） ---------- */
.check-line { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-soft); margin: 4px 0 12px; cursor: pointer; }
.check-line input { width: 16px; height: 16px; accent-color: var(--cyan); }
.repeat-days { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0; }
.repeat-days label { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; color: var(--text-soft); cursor: pointer; }
.repeat-days input { accent-color: var(--cyan); }
.field textarea {
  width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 10px;
  background: var(--surface, rgba(255, 255, 255, .04)); border: 1px solid var(--border, rgba(120, 160, 220, .22));
  color: var(--text, #eaf0ff); font-size: 14px; font-family: inherit; resize: vertical;
}
.field textarea:focus { border-color: var(--border-strong, rgba(47, 107, 255, .5)); outline: none; }
/* 窄屏模态里的多列字段组允许换行，避免 min-content 撑破 modal-box */
.modal-box .field-row { flex-wrap: wrap; }

/* ============================================================
   二、首页「今日工作台」栅格与卡片
   ============================================================ */
#workbench { padding: 12px 0 52px; }
.wb-head { text-align: center; max-width: 720px; margin: 0 auto 22px; }
.wb-head .kicker { color: var(--cyan, #2af0ff); font-size: 13px; letter-spacing: 3px; margin-bottom: 8px; }
.wb-head h2 { font-size: 24px; margin: 0 0 6px; color: var(--text-strong, #fff); }
.wb-head p { color: var(--text-soft, #9fb0d0); font-size: 15px; margin: 0 0 10px; }

/* 三栏：备忘 40 / 日程 35 / 闹钟 25。必须 minmax(0, Xfr) —— 见文件头 ⑥ */
.wb-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 40fr) minmax(0, 35fr) minmax(0, 25fr);
  align-items: stretch;
}
/* 每一层栅格子项都要显式 min-width: 0，否则子项内容 min-content 仍会顶宽轨道 */
.wb-grid > .wb-cell { min-width: 0; }

/* ---------------- 手风琴（首页右栏限定） ----------------
   用户口径：三栏一次只展开一栏，点栏头切换，其余自动收起。
   仅作用于首页 .pg-aside（center.html 的整页工作台不受影响）：
   · align-items:start + 收起栏 height/min-height 归 auto → 收起栏只剩栏头高度；
   · body（栏头之后的全部内容）由 JS 包进 .wb-acc-body，默认 display:none；
   · 展开态恢复原有 flex 纵排与最小高度，登录前后不跳变的约束由 .open 保持。 */
.pg-aside .wb-grid { align-items: start; }
.pg-aside .wb-col { height: auto; }
.pg-aside .wb-col .wb-acc-body { display: none; }
.pg-aside .wb-col.open .wb-acc-body { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.pg-aside .wb-col.open { min-height: 280px; }
.pg-aside .wb-col:not(.open) { min-height: 0; }
.wb-acc-head {
  cursor: pointer;
  user-select: none;
  border-radius: 10px;
  transition: background .15s;
  position: relative;
  padding-right: 26px; /* 给箭头留位，避免压住 count-pill */
}
.wb-acc-head:hover { background: color-mix(in srgb, var(--brand, #4f86ff) 12%, transparent); }
.wb-acc-head::after {
  content: "";
  position: absolute; right: 6px; top: 50%;
  width: 8px; height: 8px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  opacity: .55;
  transition: transform .18s;
}
.wb-col.open .wb-acc-head::after { transform: translateY(-30%) rotate(-135deg); }

.wb-col {
  display: flex; flex-direction: column; min-width: 0; height: 100%;
  padding: 14px 16px 12px; border-radius: var(--radius, 18px);
  background: var(--surface, rgba(255, 255, 255, .05));
  border: 1px solid var(--border, rgba(120, 160, 220, .18));
  backdrop-filter: blur(12px);
  /* 与访客占位卡共用同一最小高度：登录前后不跳变 */
  min-height: 280px;
}
.wb-col > * { min-width: 0; }
.wb-col-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 10px; padding-bottom: 10px;
  border-bottom: 1px solid var(--border, rgba(120, 160, 220, .16));
}
.wb-col-head h3 {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 700; margin: 0; color: var(--text-strong, #fff); min-width: 0;
}
.wb-col-head h3 span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-svg { width: 16px; height: 16px; flex: none; color: var(--cyan, #2af0ff); }
.wb-deep-link {
  margin-top: auto; padding-top: 10px; font-size: 13px; color: var(--cyan, #2af0ff);
  text-decoration: none; display: inline-block;
}
.wb-deep-link:hover { text-shadow: 0 0 10px color-mix(in srgb, var(--cyan, #2af0ff) 60%, transparent); }
.wb-text-btn {
  border: 0; background: transparent; cursor: pointer; padding: 2px 4px;
  font-size: 13px; color: var(--cyan, #2af0ff); font-family: inherit; flex: none;
}
.wb-text-btn:hover { text-shadow: 0 0 10px color-mix(in srgb, var(--cyan, #2af0ff) 60%, transparent); }
.wb-danger-text { color: var(--error, #ff6b5a); }
.wb-error { color: var(--text-mute, #8a93ad); font-size: 14px; align-items: center; justify-content: center; text-align: center; }

/* ---------- 备忘卡（首页） ---------- */
.wb-memo-add { margin-bottom: 10px; }
.wb-memo-add .btn { padding: 9px 16px; font-size: 14px; }
.wb-mini-list { flex: 1 1 auto; min-height: 118px; }

/* ---------- 日程卡（首页） ---------- */
.wb-schedule .agenda { flex: 1 1 auto; min-height: 118px; }
.wb-empty-action { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.agenda-item-mini { padding: 10px 12px; gap: 12px; }
.agenda-item-mini .ai-hm { font-size: 15px; }
.agenda-item-mini .ai-time { min-width: 58px; }
.agenda-item-mini .ai-title { font-size: 15px; }
.agenda-item-mini:hover { transform: none; }

/* ---------- 闹钟卡（首页） ---------- */
.wb-alarm-summary {
  font-size: 14px; color: var(--text-soft, #9fb0d0); padding: 10px 12px; border-radius: var(--radius-sm, 12px);
  background: var(--surface-2, rgba(20, 28, 48, .5)); margin-bottom: 10px; word-break: break-word;
}
.wb-alarm-detail { margin-bottom: 10px; }
.alarm-item-mini { padding: 10px 12px; gap: 10px; }
.alarm-item-mini .al-time { font-size: 19px; }
.wb-add-alarm { width: 100%; justify-content: center; padding: 9px 14px; font-size: 14px; }

/* ---------- 备忘 mini 变体 ---------- */
.memo-item-mini { padding: 9px 12px; gap: 10px; }
.memo-item-mini .memo-text { font-size: 14px; }

/* ---------- 访客占位卡（未登录） ---------- */
.wb-guest-card { align-items: stretch; }
.wb-guest-body {
  flex: 1 1 auto; min-height: 150px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px; text-align: center;
  padding: 8px 4px;
}
.wb-guest-body p { margin: 0; font-size: 14px; color: var(--text-soft, #9fb0d0); }
.wb-guest-body .btn { padding: 9px 22px; font-size: 14px; }

/* ============================================================
   三、最近访问：visits 卡片（＋加入常用 / ×删除）
   ============================================================ */
.bm-card.visit-card { padding: 14px 12px; min-width: 140px; }
.visit-card .v-link {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; width: 100%; color: var(--text, #eaf0ff);
}
.visit-card .v-acts { position: absolute; top: 6px; right: 6px; display: flex; gap: 4px; }
.visit-card .v-btn {
  width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--border, rgba(120, 160, 220, .22));
  background: var(--surface-3, rgba(255, 255, 255, .13)); color: var(--text-soft, #c3cee6); cursor: pointer;
  font-size: 13px; line-height: 1; display: flex; align-items: center; justify-content: center; padding: 0;
}
.visit-card .v-btn:hover { color: var(--text); border-color: var(--border-strong, rgba(47, 107, 255, .5)); }
.visit-card .v-btn.v-added {
  color: var(--mint, #38ffd0); border-color: color-mix(in srgb, var(--mint, #38ffd0) 45%, transparent);
  cursor: default; opacity: .85;
}
.visit-card .v-btn.v-del:hover { color: var(--error, #ff6b5a); border-color: var(--error, #ff6b5a); }
.section-head .head-actions { display: flex; justify-content: center; gap: 10px; margin-top: 14px; }
.btn-mini { padding: 8px 16px; font-size: 13px; }

/* ============================================================
   四、首页信息层级重排（搜索区瘦身 / 发现常用胶囊 / 关于群华横幅）
   —— 只做「瘦身 + 降级」，不推翻既有布局
   ============================================================ */
.portal-hero { padding: 16px 0 6px; }
.portal-hero .portal-search { margin-top: 0; }
.portal-hero .info-bar { margin-top: 10px; }

/* 发现常用：从独立 section 降为一行胶囊 */
.discover-inline { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--border, rgba(120, 160, 220, .16)); }
.discover-inline .di-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 14px; color: var(--text-mute, #8a93ad); margin-bottom: 12px;
}
.discover-inline .di-head strong { color: var(--text-soft, #9fb0d0); font-size: 15px; font-weight: 700; }

/* 关于群华：从半屏 .split 降为一行窄横幅 */
.about-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 18px 22px; border-radius: var(--radius, 18px);
  background: var(--surface, rgba(255, 255, 255, .05));
  border: 1px solid var(--border, rgba(120, 160, 220, .18));
  backdrop-filter: blur(12px);
}
.about-banner .ab-text { min-width: 0; flex: 1 1 260px; }
.about-banner .ab-text strong { display: block; font-size: 16px; color: var(--text-strong, #fff); margin-bottom: 4px; }
.about-banner .ab-text span { font-size: 14px; color: var(--text-soft, #9fb0d0); }
.about-banner .ab-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; flex: none; }
.about-banner .ab-actions .tel { color: var(--cyan, #2af0ff); font-weight: 700; font-size: 15px; }
.about-banner .btn { padding: 10px 20px; font-size: 14px; }

/* ============================================================
   五、响应式断点（媒体查询一律放在基础规则之后）
   ============================================================ */
@media (max-width: 980px) {
  .wb-grid { grid-template-columns: minmax(0, 62fr) minmax(0, 38fr); }
  .wb-grid > .wb-cell.wb-cell-alarm { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .wb-grid { grid-template-columns: minmax(0, 1fr); }
  .wb-grid > .wb-cell.wb-cell-alarm { grid-column: auto; }
  .wb-col { min-height: 0; }
  .wb-guest-body { min-height: 0; }
  .wb-mini-list, .wb-schedule .agenda { min-height: 0; }
  .about-banner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 420px) {
  .wb-head h2 { font-size: 21px; }
  .wb-col { padding: 12px 12px 10px; }
  .about-banner { padding: 16px; }
}

/* ============================================================
   六、390px 横向溢出修复（既有缺陷，本次升级为 P1 必须修掉）
   实测：390 视口 clientWidth=375，documentElement.scrollWidth=480，溢出 105px。
   元凶：.portal-search 是 flex 行，三个子项默认 min-width:auto（= min-content），
        合计 min-content 471px > 可用 339px，其中 #searchBtn 被顶到 right=480。
   修法：给可收缩子项显式 min-width:0，并允许整行在极端窄屏换行兜底。
   不改：.nav / .site-header（fixed，不参与文档溢出）/ .recent-row（已横向滚动）。
   ============================================================ */
.portal-search { flex-wrap: wrap; min-width: 0; }
.portal-search .ps-engine { min-width: 0; max-width: 100%; }
.portal-search .ps-input { min-width: 0; flex: 1 1 120px; }
.portal-search .btn { flex: none; min-width: 0; }
@media (max-width: 420px) {
  .portal-search { padding: 8px; border-radius: var(--radius, 18px); }
  .portal-search .ps-input { flex: 1 1 100%; order: 2; }
  .portal-search .ps-engine { order: 1; }
  .portal-search .btn { order: 3; flex: 1 1 auto; justify-content: center; }
}

/* ============================================================
   六点五、首页三列布局 · 右列（.pg-aside）工作台竖排
   保留 .wb-grid / .wb-cell / .wb-col 类名不变，只靠父作用域覆盖：
   .pg-aside .wb-grid 特异性 (0,2,0) 恒胜媒体查询里的 .wb-grid (0,1,0)，
   所以下面配套的「≤1180px 还原三栏」必须写在同一个父作用域里才压得住。
   ============================================================ */
.pg-aside > #workbench { padding: 0 0 12px; }          /* 中和 #workbench 的 12px 0 52px */
.pg-aside .wb-head { text-align: left; max-width: none; margin: 0 0 8px; }
.pg-aside .wb-head h2 { font-size: 16px; }
.pg-aside .wb-head p { display: none; }                /* 窄列里副标题是纯噪音 */
.pg-aside .wb-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.pg-aside .wb-col { min-height: 0; padding: 9px 11px 7px; }   /* 中和原 min-height: 280px */
/* 右列收窄到 20fr 后，三张卡的内部空档（min-height 118px 的列表区）也要按比例收，
   否则 1440/1366 下列内溢出 103px（实测）。 */
.pg-aside .wb-mini-list, .pg-aside .wb-schedule .agenda { min-height: 70px; }
.pg-aside .wb-guest-body { min-height: 72px; padding: 4px 2px; gap: 8px; }
.pg-aside .wb-guest-body p { font-size: 13px; }
.pg-aside .wb-guest-body .btn { padding: 7px 18px; font-size: 13px; }
/* 卡片头与「完整版 →」链接：1366 下右列高度吃紧，各收 4-6px */
.pg-aside .wb-col-head { margin-bottom: 6px; padding-bottom: 6px; }
.pg-aside .wb-deep-link { padding-top: 6px; font-size: 12px; }
.pg-aside .wb-alarm-summary { padding: 7px 9px; margin-bottom: 7px; font-size: 13px; }
.pg-aside .agenda-item-mini { padding: 8px 10px; gap: 10px; }
.pg-aside .wb-col .field-row { flex-wrap: wrap; }
.pg-aside .al-right { flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
/* 备忘在最上：DOM 顺序本来就是 memo → schedule → alarm，竖排后天然成立，无需 order */

/* ★ 左右栏各收 20%（20fr → 16fr）后的窄档补偿：
   右栏在 1280 档只有 189px（收窄前 237px），三张工作台卡的文案各多折 1~2 行、
   单卡从 185px 涨到 207px，整列溢出 33px —— 而 1366/1440/1920 三档仍是 0。
   用户口径是「右栏宽度再减 20%」，所以不动栅格，改在本档把卡片间距再压一档
   （只调间距/行高，不动配色与结构；字号仅正文段落收 1px，仍是可读区间）。
   ★ 区间取 1181~1439px：≤1180px 右栏已跨整行恢复三栏并排（见下一段媒体查询），
     ≥1440px 右栏宽度足够、本来就零溢出，都不该被这条影响。
   ★ 13/74/13 收窄后右栏在 1366 档也只剩 ~165px，原 1310 上限覆盖不到 → 扩到 1439。
   ★ .pg-aside 只出现在首页 page-grid 里，故本块对 center.html 无副作用。 */
@media (min-width: 1181px) and (max-width: 1439px) {
  .pg-aside .wb-grid { gap: 6px; }
  .pg-aside .wb-col { padding: 7px 9px 5px; }
  .pg-aside .wb-col-head { margin-bottom: 4px; padding-bottom: 4px; }
  .pg-aside .wb-guest-body { min-height: 60px; padding: 2px 0; gap: 6px; }
  .pg-aside .wb-guest-body p { font-size: 12px; line-height: 1.5; }
  .pg-aside .wb-guest-body .btn { padding: 6px 14px; font-size: 12px; }
  .pg-aside .wb-deep-link { padding-top: 4px; }
  .pg-aside .wb-alarm-summary { padding: 5px 8px; margin-bottom: 5px; }
  .pg-aside .agenda-item-mini { padding: 6px 8px; gap: 8px; }
  .pg-aside .wb-mini-list, .pg-aside .wb-schedule .agenda { min-height: 60px; }
}

@media (max-width: 1180px) {
  /* 工作台跨整行后，还原成它擅长的「三栏并排 + head 居中」 */
  .pg-aside > #workbench { padding: 0 0 8px; }
  .pg-aside .wb-head { text-align: center; max-width: 720px; margin: 0 auto 22px; }
  .pg-aside .wb-head h2 { font-size: 24px; }
  .pg-aside .wb-head p { display: block; }
  .pg-aside .wb-grid { grid-template-columns: minmax(0, 40fr) minmax(0, 35fr) minmax(0, 25fr); gap: 18px; }
  .pg-aside .wb-col { min-height: 280px; padding: 14px 16px 12px; }
}
@media (max-width: 980px) {
  /* 三列塌成单列，右列也回到单列竖排（否则 390px 下会三栏挤爆） */
  .pg-aside .wb-grid { grid-template-columns: minmax(0, 1fr); }
  .pg-aside .wb-col { min-height: 0; }
  .pg-aside .wb-head { text-align: left; max-width: none; margin: 0 0 14px; }
  .pg-aside .wb-head h2 { font-size: 20px; }
  .pg-aside .wb-head p { display: none; }
}

/* ============================================================
   七、prefers-reduced-motion 降级（统一放最后，覆盖上面的过渡/动画）
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .wb-col,
  .wb-col *,
  .mini-btn,
  .memo-item,
  .agenda-item,
  .alarm-item,
  .bm-card,
  .visit-card .v-btn,
  .about-banner,
  .slider,
  .slider::before {
    transition: none !important;
    animation: none !important;
  }
  .agenda-item:hover,
  .agenda-item-mini:hover { transform: none !important; }
  .bm-card:hover { transform: none !important; }
}