/* ══════════════════════════════════════════════════════════════════
   OOEG 首页 · App 风格（Neo-brutalist Textbook）
   与 App 内部同一套色板与语言：米白纸底 + 2px 硬框 + 4px 偏移硬阴影 + 4px 圆角。
   纯视觉覆盖：不改结构、不删模块、不动脚本。要回滚，删掉这一段即可。
   ══════════════════════════════════════════════════════════════════ */
:root {
  --ink:#15201A; --paper:#FBF9F3; --card:#FFFFFF;
  --soft:#DCEBE1; --hair:#C9CFC7; --brandbk:#E4EFE7;
  --grn:#2E6B4F; --grn-lite:#8FBAA3; --cin:#B4562E;
  --t2:#44514A; --t3:#7C8A82;
  --sh:2px 2px 0 #15201A;
  --sh-lg:4px 4px 0 #15201A;
}

/* ── 纸底：去掉旧站的噪点纸纹，换成 App 的纯米白 ── */
html, body {
  background-color: var(--paper) !important;
  background-image: none !important;
  color: var(--ink) !important;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif !important;
}
body { padding: 14px 26px !important; }

/* 原站 h2/h3 用站酷小薇装饰体；App 里界面文字一律无衬线，只有例句/今日句保留衬线 */
body, h1, h2, h3, h4, h5, h6,
button, input, textarea, select, label, th, td,
.wb-title, .content-header h2, .sidebar-card h3,
.nav-logo, .wb-cta, .wb-chip {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif !important;
}
::selection { background: rgba(46,107,79,.18) !important; }
:focus-visible { outline: 2px solid var(--grn) !important; outline-offset: 2px; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent !important; }
::-webkit-scrollbar-thumb {
  background: var(--hair) !important; border-radius: 2px !important;
  border: 3px solid var(--paper) !important;
}
::-webkit-scrollbar-thumb:hover { background: #A9B3AC !important; }

/* ── 左侧导航：一块硬框板 ── */
.left-nav {
  background: var(--card) !important;
  border: 2px solid var(--ink) !important;
  border-radius: 4px !important;
  box-shadow: var(--sh-lg) !important;
  padding: 15px 10px !important;
  backdrop-filter: none !important;
}
.nav-logo {
  font-family: Georgia, "Noto Serif SC", serif !important;
  font-size: 17px !important; font-weight: 700 !important;
  letter-spacing: .01em !important; color: var(--ink) !important;
  padding: 3px 10px 13px !important; margin-bottom: 11px !important;
  border-bottom: 2px solid var(--ink) !important;
  gap: 8px !important;
}
.nav-logo span:last-child {
  font-size: 9.5px !important; font-weight: 700 !important;
  letter-spacing: .1em !important;
  color: var(--cin) !important; background: transparent !important;
  border: 1.5px solid var(--cin) !important; border-radius: 2px !important;
  padding: 0 4px !important; line-height: 1.55 !important;
}
.nav-item {
  border: 2px solid transparent !important;
  border-radius: 3px !important;
  color: var(--t2) !important;
  font-size: 13.5px !important; font-weight: 600 !important;
  letter-spacing: .01em !important;
  padding: 9px 10px !important;
  margin-bottom: 2px !important;
  transition: background .14s, color .14s !important;
}
.nav-item svg { stroke: var(--t2) !important; stroke-width: 1.9 !important; }
.nav-item:hover {
  background: var(--soft) !important;
  color: var(--ink) !important;
  border-color: transparent !important;
}
.nav-item:hover svg { stroke: var(--ink) !important; }
.nav-item.active {
  background: var(--soft) !important;
  color: var(--ink) !important;
  font-weight: 800 !important;
  border-color: var(--ink) !important;
  box-shadow: var(--sh) !important;
}
.nav-item.active svg { stroke: var(--cin) !important; }

/* ── 主内容板 ── */
.main-content {
  background: var(--card) !important;
  border: 2px solid var(--ink) !important;
  border-radius: 4px !important;
  box-shadow: var(--sh-lg) !important;
  backdrop-filter: none !important;
}
.content-header {
  background: var(--card) !important;
  border-bottom: 2px solid var(--ink) !important;
  padding: 13px 22px !important;
}
.content-header h2 {
  font-size: 16.5px !important; font-weight: 800 !important;
  letter-spacing: -.2px !important; color: var(--ink) !important;
  display: flex !important; align-items: center !important; gap: 10px !important;
}
/* 朱砂小方章：App 每一页标题前的那个记号 */
.content-header h2::before {
  content: '' !important; flex: 0 0 auto;
  width: 10px !important; height: 10px !important;
  background: var(--cin) !important;
  border: 2px solid var(--ink) !important;
  border-radius: 2px !important;
  box-shadow: var(--sh) !important;
}

/* ── 眉标：字距拉开 + 两端细线 ── */
.wb-eyebrow {
  font-size: 11px !important; font-weight: 700 !important;
  letter-spacing: .22em !important; color: var(--t2) !important;
  gap: 14px !important;
}
.wb-eyebrow::before, .wb-eyebrow::after {
  height: 1px !important;
  background: rgba(21,32,26,.26) !important;
}

/* ── 大标题：粗黑 + 朱砂硬头下划线 ── */
.wb-title {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-size: clamp(24px, 3vw, 32px) !important;
  font-weight: 800 !important;
  letter-spacing: -1px !important;
  line-height: 1.3 !important;
  color: var(--ink) !important;
}
.wb-title::after {
  content: '' !important;
  position: absolute !important; left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: -4px !important;
  width: 78px !important; height: 5px !important;
  border-radius: 0 !important;
  background: var(--cin) !important;
  opacity: 1 !important;
}

/* ── 快捷建议：方角描边小卡 ── */
.wb-sug {
  border: 1.5px solid var(--ink) !important;
  border-radius: 3px !important;
  box-shadow: var(--sh) !important;
  background: var(--card) !important;
  color: var(--ink) !important;
  font-size: 12.5px !important; font-weight: 600 !important;
  padding: 7px 13px !important;
}
.wb-sug::before { content: '↘'; color: var(--cin) !important; font-weight: 700 !important; }
.wb-sug:hover {
  background: var(--soft) !important;
  border-color: var(--ink) !important;
  box-shadow: var(--sh) !important;
  transform: translate(1px,1px) !important;
}
.wb-sug:hover::before { color: var(--cin) !important; }
.wb-sug-more {
  border-radius: 3px !important;
  border: 1.5px solid var(--ink) !important;
  background: var(--card) !important;
  color: var(--ink) !important;
  box-shadow: var(--sh) !important;
}
.wb-sug-more:hover {
  border-color: var(--ink) !important;
  color: var(--ink) !important;
  background: var(--soft) !important;
}

/* ── 主输入卡：全站主入口，框和阴影都实 ── */
.wb-quick-box {
  border: 2px solid var(--ink) !important;
  border-radius: 4px !important;
  box-shadow: var(--sh-lg) !important;
  background: var(--card) !important;
  padding: 12px 10px 8px 16px !important;
}
.wb-quick-box:focus-within {
  border-color: var(--grn) !important;
  box-shadow: var(--sh-lg), 0 0 0 3px rgba(46,107,79,.16) !important;
}
.wb-quick-box textarea {
  /* App 里输入框走无衬线，只有例句/正文用衬线 */
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-size: 14.5px !important; color: var(--ink) !important;
}
.wb-quick-box textarea::placeholder { color: var(--t3) !important; }
.wb-quick-act button {
  background: var(--grn) !important;
  border: 2px solid var(--ink) !important;
  border-radius: 3px !important;
  box-shadow: var(--sh) !important;
}
.wb-quick-act button:hover { background: #256044 !important; transform: none !important; }
.wb-quick-act button:active { transform: translate(2px,2px) !important; box-shadow: none !important; }
.wb-quick-act button:disabled { background: var(--hair) !important; box-shadow: var(--sh) !important; }
.wb-qhint, .wb-qhint-full, .wb-qhint-short {
  color: var(--t3) !important; font-size: 11.5px !important;
}

/* ── 示例窗口：与 App 展廊卡同构 ── */
.wb-hero {
  border: 2px solid var(--ink) !important;
  border-radius: 4px !important;
  box-shadow: var(--sh-lg) !important;
  background: var(--card) !important;
  padding: 15px 17px 14px !important;
}
.wb-hero:hover { transform: none !important; box-shadow: var(--sh-lg) !important; }
.sc-frame {
  border: 2px solid var(--ink) !important;
  border-radius: 4px !important;
  box-shadow: var(--sh-lg) !important;
  background: var(--card) !important;
  padding: 9px 11px 11px !important;
}
.sc-frame::before, .sc-frame::after {
  border-color: var(--ink) !important; opacity: 1 !important;
  width: 16px !important; height: 16px !important;
}
.sc-frame::before { border-top-left-radius: 3px !important; }
.sc-frame::after { border-bottom-right-radius: 3px !important; }
#scIframe { border-radius: 2px !important; background: var(--paper) !important; }
.sc-vwrap { border-radius: 2px !important; border: 1.5px solid var(--ink) !important; }
.sc-vov .sc-vbtn { border-radius: 3px !important; }

/* 标注体示例：主干深绿实线、简化朱砂虚线 —— 与 App 完全一致 */
.hs-cap { font-size: 11px !important; font-weight: 700 !important; letter-spacing: .28em !important; color: var(--cin) !important; }
.hs-en { font-family: Georgia, "Songti SC", "Times New Roman", serif !important; color: var(--ink) !important; }
.hs-core { border-bottom: 2.5px solid var(--grn) !important; }
.hs-mod  { border-bottom: 2px dotted var(--cin) !important; }
.hs-no {
  display: inline-block !important;
  min-width: 15px !important; height: 15px !important; line-height: 12px !important;
  border-radius: 2px !important;
  background: var(--cin) !important;
  border: 1.5px solid var(--ink) !important;
  color: #fff !important;
  font-size: 9px !important; font-weight: 700 !important;
  text-align: center !important; vertical-align: 5px !important;
  padding: 0 !important; margin: 0 1px !important;
}
.hs-notes { border-top: 2px dashed var(--hair) !important; }
.hs-notes .hsn { color: var(--t2) !important; font-size: 12px !important; }
.hs-notes .hsn b { color: var(--grn) !important; }
.hs-notes .hsn-mod b { color: var(--cin) !important; }
.hs-notes .hs-gloss { color: var(--ink) !important; }
.hs-notes .hs-gloss b { color: var(--cin) !important; }
.hs-legend { color: var(--t3) !important; font-size: 11px !important; }

/* 轮播控件：圆形改方角描边 */
.sc-ctl button {
  border-radius: 3px !important;
  border: 1.5px solid var(--ink) !important;
  background: var(--card) !important;
  color: var(--ink) !important;
}
.sc-ctl button:hover { background: var(--ink) !important; color: var(--card) !important; border-color: var(--ink) !important; }
.sc-badge {
  border: 1.5px solid var(--ink) !important;
  border-radius: 3px !important;
  background: var(--soft) !important;
  color: var(--ink) !important;
  font-weight: 700 !important;
}
.sc-dot { border-radius: 1px !important; background: var(--hair) !important; }
.sc-dot.on { border-radius: 1px !important; background: var(--ink) !important; width: 20px !important; }
.sc-open { color: var(--cin) !important; font-weight: 700 !important; }
.sc-cap { font-size: 11px !important; font-weight: 700 !important; letter-spacing: .2em !important; color: var(--ink) !important; }
.sc-cap .sc-kind { color: var(--cin) !important; border-bottom: 2px solid var(--cin) !important; }
.sc-cap .sc-zoom { font-weight: 700 !important; }

/* ── 今日一句卡 ── */
.wb-daily {
  background: var(--card) !important;
  border: 2px solid var(--ink) !important;
  border-radius: 4px !important;
  box-shadow: var(--sh-lg) !important;
}
.wb-daily:hover { transform: none !important; box-shadow: var(--sh-lg) !important; }
.dc-cap { color: var(--cin) !important; font-weight: 800 !important; letter-spacing: .2em !important; }
.dc-sent { font-family: Georgia, "Songti SC", "Times New Roman", serif !important; color: var(--ink) !important; }
.dc-go {
  border: 1.5px solid var(--ink) !important;
  border-radius: 3px !important;
  box-shadow: var(--sh) !important;
  background: var(--card) !important;
  color: var(--ink) !important;
  font-weight: 700 !important;
}
.dc-go:hover {
  background: var(--soft) !important;
  color: var(--ink) !important;
  border-color: var(--ink) !important;
  transform: translate(1px,1px) !important;
  box-shadow: none !important;
}

/* ── 七个功能胶囊 ── */
.wb-chip {
  border: 1.5px solid var(--ink) !important;
  border-radius: 3px !important;
  box-shadow: var(--sh) !important;
  background: var(--card) !important;
  color: var(--ink) !important;
  font-weight: 600 !important;
}
.wb-chip:hover {
  background: var(--soft) !important;
  border-color: var(--ink) !important;
  color: var(--ink) !important;
  transform: translate(2px,2px) !important;
  box-shadow: none !important;
}

/* ── CTA：主操作绿 ── */
.wb-cta {
  background: var(--grn) !important;
  border: 2px solid var(--ink) !important;
  border-radius: 4px !important;
  box-shadow: var(--sh-lg) !important;
  color: #fff !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
}
.wb-cta:hover {
  background: #256044 !important;
  transform: translate(2px,2px) !important;
  box-shadow: var(--sh) !important;
}

/* ── 页脚 ── */
.footer-note {
  border-top: 2px dashed var(--hair) !important;
  color: var(--t3) !important;
  font-size: 11.5px !important;
  padding-top: 12px !important;
  margin-top: 6px !important;
}
/* 底部植物线描：整块去掉。
   它是写实照片质感，和这套"硬框 + 线条"的教科书语言不是一路；
   而且是 aria-hidden 的纯装饰、无任何功能。
   去掉后 CTA 直接接页脚，留白由纸底自己撑，更干净。 */
.wb-sketch { display: none !important; }

/* ── 右侧栏卡片 ── */
.sidebar-card {
  background: var(--card) !important;
  border: 2px solid var(--ink) !important;
  border-radius: 4px !important;
  box-shadow: var(--sh-lg) !important;
}
.sidebar-card:hover {
  transform: none !important;
  box-shadow: var(--sh-lg) !important;
  border-color: var(--ink) !important;
}
.sidebar-card h3 {
  font-size: 13px !important; font-weight: 800 !important;
  letter-spacing: .01em !important; color: var(--ink) !important;
  border-bottom: 2px dashed var(--hair) !important;
  padding-bottom: 9px !important; margin-bottom: 10px !important;
  gap: 9px !important;
}
/* 红圆点 → 朱砂小方章 */
.sidebar-card h3::before {
  content: '' !important;
  width: 9px !important; height: 9px !important;
  border-radius: 2px !important;
  background: var(--cin) !important;
  border: 2px solid var(--ink) !important;
  box-shadow: none !important;
  margin-right: 0 !important;
  vertical-align: middle !important;
}
/* ── 右栏：不再是一块"面板"，而是三张卡直接落在纸底上 ──
   原来 .right-sidebar 自己有 1px 淡边 + 12px 圆角 + 柔和阴影，
   里面每张卡又加了墨框硬阴影，就成了"框套框"，外层一眼还是旧风格。
   App 里一个区域就是一组独立卡片，没有这个外套。 */
.right-sidebar {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  /* 原设计就是 280，但它在 flex 里没有 flex-shrink:0，一直被主内容挤到 238，
     卡片只剩 206px 宽、字挤成一团。这里把宽度钉住。 */
  flex: 0 0 280px !important;
  width: 280px !important;
  /* .app-wrapper 的 gap 在这里没吃到（实测主内容右缘和右栏左缘间距为 0），
     补一个左边距，让左右两侧都是 20。≤1000px 时右栏整体 display:none，无副作用。 */
  margin-left: 20px !important;
  /* 原来这层是"白板"，20/16 的内边距是给板内卡片留白的。
     板去掉后这圈 padding 会让卡片整体下沉 20、右缩 16，和左栏/主内容对不齐，所以清零。 */
  padding: 0 !important;
  /* 「固定不动」只在内容放得下时启用（由 home-idiom.js 量完加 .side-fixed）。
     内容比视口还长还硬 sticky，底部永远露不出来，只能在栏内滚，更难受。
     align-self 必须给 flex-start —— 父级是 align-items:stretch，
     不解除拉伸右栏会被撑到和主内容等高，sticky 就没有可滑动的余量。 */
}

.right-sidebar.side-fixed {
  position: sticky !important;
  top: 14px !important;
  align-self: flex-start !important;
  max-height: calc(100vh - 28px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--hair) transparent;
}
.right-sidebar.side-fixed::-webkit-scrollbar { width: 4px; }
.right-sidebar.side-fixed::-webkit-scrollbar-thumb { background: var(--hair); border-radius: 2px; border: none; }
.right-sidebar.side-fixed::-webkit-scrollbar-track { background: transparent; }
/* 原站的"纸折角"：15px 浅灰三角贴在卡片右上角，是线装批注本的语言，
   硬框卡上留着就是一块缺口 —— 去掉 */
.sidebar-card::after { display: none !important; }

.ab-carousel {
  background: var(--paper) !important;
}
.ab-carousel a { border-radius: 2px !important; border: 2px solid var(--ink) !important; }
.ab-slide { border-radius: 0 !important; }
.ab-cap {
  background: rgba(21,32,26,.86) !important;
  border-radius: 2px !important;
  font-weight: 600 !important; letter-spacing: .02em !important;
}
/* 轮播圆点：实际是 .ab-dots button，之前写成 .ab-dot 所以没生效 */
.ab-dots button {
  width: 7px !important; height: 7px !important;
  border-radius: 1px !important;
  background: var(--hair) !important;
}
.ab-dots button.on {
  width: 16px !important;
  background: var(--ink) !important;
  border-radius: 1px !important;
}
/* 每日名言的引用竖线 + 文字色 */
.dq-item { border-left: 2px solid var(--hair) !important; }
.dq-en { color: var(--ink) !important; }
.dq-zh { color: var(--t3) !important; }
#aboutText, .sidebar-card p { color: var(--t2) !important; }
#dailyQuoteBody, #dailyQuoteBody p { color: var(--t2) !important; }
.sb-edit-btn, .sidebar-card button {
  border-radius: 3px !important;
  border: 1.5px solid var(--ink) !important;
  box-shadow: var(--sh) !important;
  font-weight: 600 !important;
}

/* ── 公告卡 ── */
#announcementCard .anno-item, .anno-item {
  border-left: 3px solid var(--cin) !important;
  border-radius: 2px !important;
  background: var(--paper) !important;
}

/* ── 用户区按钮（顶部右侧） ── */
.user-area .user-btn,
.user-area .logout-btn,
.user-btn, .logout-btn {
  border-radius: 3px !important;
  border: 1.5px solid var(--ink) !important;
  box-shadow: var(--sh) !important;
  background: var(--card) !important;
  color: var(--ink) !important;
  font-weight: 700 !important;
}
.user-btn:hover, .logout-btn:hover { background: var(--soft) !important; }

/* ── 弹层 / 悬浮卡：同一套框线语言 ── */
.wb-sug-tip {
  background: var(--card) !important;
  border: 2px solid var(--ink) !important;
  border-radius: 3px !important;
  box-shadow: var(--sh-lg) !important;
  color: var(--ink) !important;
}
.sc-lightbox .sc-lb-card {
  border-radius: 4px !important;
  border: 2px solid var(--ink) !important;
  box-shadow: 6px 6px 0 var(--ink) !important;
}

/* ── 窄屏底部标签栏（原站模块，只换视觉） ── */
.mobile-bottom-nav {
  background: var(--paper) !important;
  border-top: 2px solid var(--ink) !important;
  backdrop-filter: none !important;
}
.mobile-nav-item { color: var(--t3) !important; font-weight: 600 !important; }
.mobile-nav-item.active { color: var(--ink) !important; font-weight: 800 !important; }
.mobile-nav-item.active svg { stroke: var(--cin) !important; }
.mobile-nav-item.active::after {
  background: var(--cin) !important;
  border-radius: 1px !important;
  width: 6px !important; height: 6px !important;
}

/* ── 窄屏：与线上一致地收起侧栏，主内容撑满 ── */
@media (max-width: 900px) {
  body { padding: 12px 14px !important; }
  .wb-title { font-size: 23px !important; }
  .wb-title::after { width: 62px !important; height: 4px !important; }
  .wb-chip { box-shadow: 1.5px 1.5px 0 var(--ink) !important; }
}

/* ══════════════════════════════════════════════════════════════════
   顶栏「机器人推单词」
   样式从 App 端 desktop/index.html 的 D 方案原样搬来（机器人三层结构、
   轮子按位移积分、卡片摇晃、出汗/喘气动画都没改）。
   只改了三处：
     1. 容器从 App 的整条 header 变成顶栏中间那段（.wordbar）
     2. 卡片 max-width 由 100vw-44 改成跟容器走（JS 里也同步改了）
     3. 顶栏 padding 从 13 收到 9，给这 32px 高的轨道让位，总高基本不变
   ══════════════════════════════════════════════════════════════════ */

/* App 的样式引用这两个变量，首页这边叫 --t2/--t3，补个别名 */
:root { --text2: #44514A; --text3: #7C8A82; }

.content-header {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 8px 22px !important;   /* 原 13px：给 38px 轨道让位，总高只多 3px */
}
.content-header h2 { flex: 0 0 auto !important; }
.content-header > div:last-child { flex: 0 0 auto !important; }

/* 轨道：占据标题与按钮之间的整段 */
.wordbar {
  display: block;
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 38px;
  overflow: hidden;
  cursor: pointer;
}
.wordbar.paused .wb-card { opacity: .85; }

.wordbar .wb-train {
  position: absolute; left: 0; top: 0; height: 100%; width: 100%;
  display: flex; align-items: flex-end; padding-left: 8px;
  white-space: nowrap; will-change: transform;
  transform: translateX(var(--wbx, -600px));
}
.wordbar .wb-inner { display: flex; align-items: flex-end; white-space: nowrap; }

/* 机器人三层结构：外层吃 --wbbx，内层 .bot-lean 吃 --wbl，
   svg 自己跑 CSS 微动（抖 / 呼吸），互不打架 */
.wordbar .wb-bot {
  position: relative; flex: 0 0 auto; width: 34px; height: 32px;
  transform: translateX(var(--wbbx, 0px));
}
.wordbar .bot-lean {
  width: 100%; height: 100%;
  transform: rotate(var(--wbl, 0deg)); transform-origin: 50% 94%;
}
.wordbar .wb-bot svg { display: block; width: 34px; height: 32px; overflow: visible; }

.wordbar .wb-bot.idle svg { animation: wbBreath 2.4s ease-in-out infinite; }
@keyframes wbBreath {
  0%, 100% { transform: translateY(0) }
  50%      { transform: translateY(-.55px) }
}
.wordbar .wb-bot.strain svg { animation: wbTremble .12s steps(2, end) infinite; }
@keyframes wbTremble {
  0%   { transform: translate(0, 0) }
  50%  { transform: translate(.35px, -.3px) }
  100% { transform: translate(-.15px, .2px) }
}

.wordbar .wb-bot .b-head { fill: var(--brandbk); stroke: var(--ink); stroke-width: 1.9; }
.wordbar .wb-bot .b-eye  { fill: var(--ink); }
.wordbar .wb-bot .b-line { stroke: var(--ink); fill: none; }
.wordbar .wb-bot .b-tip  { fill: var(--cin); }
.wordbar .wb-bot .b-arm  { stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; fill: none; }
.wordbar .wb-bot .b-arm.push { display: none; }
.wordbar .wb-bot.grip .b-arm.push { display: block; }
.wordbar .wb-bot.grip .b-arm.rest { display: none; }
.wordbar .wb-bot .b-whl    { fill: var(--paper); stroke: var(--ink); stroke-width: 1.7; }
.wordbar .wb-bot .b-wnotch { stroke: var(--ink); stroke-width: 1.3; stroke-linecap: round; }
.wordbar .b-whlg { transform-box: fill-box; transform-origin: center; transform: rotate(var(--wbrot, 0deg)); }
.wordbar .wb-bot .b-mouth-o { display: none; fill: var(--paper); stroke: var(--ink); stroke-width: 1.3; }
.wordbar .wb-bot.strain .b-mouth-o { display: block; }
.wordbar .wb-bot.strain .b-mouth-line { display: none; }
.wordbar .wb-bot .b-sw { fill: var(--cin); opacity: 0; }
.wordbar .wb-bot.strain .b-sw1 { animation: wbSweat 1.5s .25s infinite; }
.wordbar .wb-bot.strain .b-sw2 { animation: wbSweat 1.5s 1.0s infinite; }
@keyframes wbSweat {
  0%   { opacity: 0; transform: translate(0, 0) }
  18%  { opacity: .95 }
  100% { opacity: 0; transform: translate(-2.6px, -3.2px) }
}

/* 被推的卡片：2px 墨框 + 硬影，底部压轨道底线，推行中轻微摇晃 */
.wordbar .wb-card {
  position: relative; flex: 0 0 auto; display: flex; align-items: center;
  height: 36px; padding: 0 12px 0 11px; margin-left: -2px;
  background: var(--card); border: 2px solid var(--ink); border-radius: 3px 6px 6px 3px;
  box-shadow: var(--sh);
  max-width: 100%;
  transform: rotate(var(--wbwob, 0deg)); transform-origin: 50% 100%;
}
.wordbar .wb-card.brand { background: var(--brandbk); }

.wordbar .wb-brand {
  display: flex; align-items: center; font-size: 13px; font-weight: 700;
  color: var(--ink); letter-spacing: .02em; line-height: 1;
}
.wordbar .wb-brand .k { letter-spacing: .08em; }
.wordbar .wb-brand .star { display: inline-flex; margin: 0 5px 0 4px; transform: translateY(-.5px); }
.wordbar .wb-brand .star svg { width: 10px; height: 10px; display: block; }
.wordbar .wb-brand .star path { stroke: var(--ink); }
.wordbar .wb-brand .dot { margin: 0 5px; color: var(--text3); }

.wordbar .wb-word { display: flex; align-items: baseline; white-space: nowrap; line-height: 1; min-width: 0; }
.wordbar .wb-word .w {
  font-family: Georgia, "Times New Roman", serif; font-size: 15px; font-weight: 600;
  color: var(--ink); letter-spacing: .01em; white-space: nowrap; flex: 0 0 auto;
}
.wordbar .wb-word .ipa {
  font-size: 12px; color: var(--text3); margin-left: 7px; white-space: nowrap; flex: 0 0 auto;
}
.wordbar .wb-word .pos {
  font-size: 10px; color: var(--cin); font-weight: 700; margin-left: 7px;
  white-space: nowrap; flex: 0 0 auto; letter-spacing: .02em;
}
.wordbar .wb-word .cn {
  font-size: 13px; color: var(--text2); margin-left: 9px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; min-width: 0;
}

.wordbar .wb-card.wb-fade { animation: wbFade .7s linear; }
@keyframes wbFade { 0% { opacity: 1 } 50% { opacity: 0 } 100% { opacity: 1 } }

/* 窄屏：轨道变短，卡片收紧，字不缩 */
@media (max-width: 900px) {
  .content-header { gap: 10px !important; padding: 8px 14px !important; }
  .wordbar { height: 34px; }
}
/* 640 以下关掉：手机顶栏只有 92px 轨道，268px 的卡片会被裁成一条，
   与其露出半截不如不显示。手机端要看这个效果，进 App（那边有全宽顶栏）。 */
@media (max-width: 640px) {
  .wordbar { display: none !important; }
  /* 没有轨道了，padding 回到原来的 13，顶栏高度和加这功能之前一致 */
  .content-header { padding: 12px 14px !important; }
}

/* ── 右栏「每日习语」──
   结构复用 .sidebar-card，标题的朱砂方章、下划虚线都自动继承，
   这里只补卡片内部的排版。 */
#idiomCard .idm-en {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px; font-weight: 700; color: var(--ink);
  letter-spacing: .01em; line-height: 1.35; margin-bottom: 5px;
}
#idiomCard .idm-zh {
  font-size: 12.5px; font-weight: 700; color: var(--cin);
  letter-spacing: .02em; margin-bottom: 11px;
}
#idiomCard .idm-ex {
  border-top: 2px dashed var(--hair);
  padding-top: 10px;
}
#idiomCard .idm-ex-en {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 12.5px; line-height: 1.7; color: var(--t2);
  margin: 0;
}
/* .sidebar-card p 有 color:t2 !important，这里要盖住 */
#idiomCard .idm-ex-zh {
  font-size: 11.5px; line-height: 1.65; color: var(--t3) !important;
  margin: 5px 0 0;
}

/* ── 每日习语：前两天当复习，只给英文 + 释义 ── */
#idiomCard .idm-mini {
  border-top: 2px dashed var(--hair);
  margin-top: 11px;
  padding-top: 9px;
}
#idiomCard .idm-mini-cap {
  font-size: 10px; font-weight: 700; letter-spacing: .16em;
  color: var(--t3); margin-bottom: 4px;
}
#idiomCard .idm-mini-en {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 13.5px; font-weight: 700; color: var(--ink);
  line-height: 1.35;
}
#idiomCard .idm-mini-zh {
  font-size: 11.5px; font-weight: 700; color: var(--cin);
  margin-top: 2px;
}

/* ══════════════════════════════════════════════════════════════════
   统一欢迎区宽度
   原来示例卡 640（展开 980），而建议条、输入框、今日卡、功能胶囊、CTA
   一律卡在 640 —— 上面宽下面窄，两边空出一大块。
   这里把所有模块收进一个宽度变量，并把七个胶囊从 4+3 改成一行排开。
   ══════════════════════════════════════════════════════════════════ */
:root { --wb-w: min(100%, 900px); }

.wb-quick,
.wb-quick-sugs-wrap,
.wb-hero,
.sc-stage,
.wb-showcase.expanded .sc-stage,
.wb-daily {
  max-width: var(--wb-w) !important;
}

/* ── 七个功能胶囊：桌面一行排开 ── */
.wb-chips {
  width: 100% !important;
  max-width: var(--wb-w) !important;
  gap: 10px !important;
}
.wb-chip {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  padding: 10px 6px !important;
  font-size: 12.5px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 三栏都在时（1001–1360），主内容被左右栏挤到 424–648，
   7 个平分会窄到放不下「长难句分析」，这时退回 4 列。
   ≤1000 侧栏隐藏、主内容变宽，回到 7 列；≤560 才两列。 */
@media (min-width: 1001px) and (max-width: 1360px) {
  .wb-chip { flex: 1 1 calc(25% - 8px) !important; padding: 9px 10px !important; }
}
/* 1001–1150 三栏还开着但主内容只剩 400 出头，4 列会窄到把「长难句分析」裁掉，
   再降一档；1151 以上 4 列已经够宽。 */
@media (min-width: 1001px) and (max-width: 1150px) {
  .wb-chip { flex: 1 1 calc(50% - 8px) !important; }
}
@media (max-width: 560px) {
  .wb-chip { flex: 1 1 calc(50% - 8px) !important; padding: 9px 10px !important; }
}

/* ── CTA 撑满，字也放一点 ── */
.wb-cta {
  max-width: var(--wb-w) !important;
  padding: 15px 20px !important;
  font-size: 15px !important;
}

/* ── 宽度变了，字号跟着上调一档，不然显空 ── */
.wb-daily .dc-sent { font-size: 16px !important; line-height: 1.85 !important; }
.wb-hero .hs-en { font-size: 17px !important; }
.wb-hero .hs-notes .hsn { font-size: 12.5px !important; }
.wb-quick-box textarea { font-size: 15px !important; }

/* ── 容器变宽后，标题区的比例跟着调 ──
   原来这些是按 640 宽调的，放到 808 里眉标线短一截、大标题也显小。 */
.wb-eyebrow { max-width: var(--wb-w) !important; }
.wb-title {
  font-size: clamp(26px, 2.6vw, 36px) !important;
  letter-spacing: -1.2px !important;
}
.wb-title::after { width: 96px !important; height: 5px !important; }

/* 建议胶囊条变宽后，条与条之间松一点，别挤成一排 */
.wb-quick-sugs { gap: 9px !important; }
.wb-sug { padding: 8px 14px !important; font-size: 13px !important; }

/* ── 内容别贴着白板边框 ──
   主内容 828，内容铺到 808 时左右只剩 10px，卡片像贴在 2px 墨框上。
   这里给欢迎区补内边距，让卡片离边框有呼吸。
   --wb-w 保持不变，100% 会跟着内容盒一起收窄。 */
.wb-welcome {
  padding-left: 40px !important;
  padding-right: 40px !important;
}
@media (max-width: 760px) {
  .wb-welcome { padding-left: 16px !important; padding-right: 16px !important; }
}

/* 收窄后长句会换行，末行容易只剩一两个词（"designer³."）。
   balance 让两行长度尽量均衡，孤行问题基本消失。 */
.wb-hero .hs-en { text-wrap: balance; }
.wb-daily .dc-sent { text-wrap: pretty; }

/* ══════════════════════════════════════════════════════════════════
   输入框右上角：坐在框沿上的小机器人
   从 App 端 desktop/index.html 的 .app-mascot 搬来（168×150 的透明 PNG，
   原定位 right:-4px / bottom:calc(100% - 2px)，即屁股坐在框沿、上半身探出框外）。
   网页这边用伪元素实现：不动 HTML、不加 JS，样式停用就一起消失。
   ══════════════════════════════════════════════════════════════════ */
.wb-quick-box { position: relative !important; }

/* 机器人探出框外 58px，上面就是建议条 —— 给它让出位置，否则会压住胶囊 */
.wb-quick { margin-top: 40px !important; }

.wb-quick-box::after {
  content: '';
  position: absolute;
  right: 2px;
  bottom: calc(100% - 2px);
  width: 68px;
  height: 60px;
  background: url(/img/home-mascot.png) center bottom / contain no-repeat;
  pointer-events: none;
  z-index: 5;
}

@media (max-width: 760px) {
  .wb-quick { margin-top: 28px !important; }
  .wb-quick-box::after { width: 52px; height: 46px; right: 0; }
}

/* ══════════════════════════════════════════════════════════════════
   品牌卡：眉标 + 大标题包进一块浅绿硬框卡
   色值直接取自 App 端 body.appmode.appHome .app-brand 的 #E6F0E9。
   网页原来标题裸放在纸底上，整页只剩 CTA 一处墨绿，所以显得"没颜色"。
   ══════════════════════════════════════════════════════════════════ */
.wb-brandcard {
  width: 100%;
  max-width: var(--wb-w);
  background: #E6F0E9;
  border: 2px solid var(--ink);
  border-radius: 4px;
  box-shadow: var(--sh-lg);
  padding: 15px 22px 19px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
}
/* 卡片里已经有浅绿底了，眉标两端那两条细线就没必要再拉满 */
.wb-brandcard .wb-eyebrow { max-width: 100% !important; }
.wb-brandcard .wb-eyebrow::before,
.wb-brandcard .wb-eyebrow::after { background: var(--ink) !important; opacity: .22; }

@media (max-width: 760px) {
  .wb-brandcard { padding: 13px 14px 16px; gap: 10px; }
  .wb-brandcard .wb-title { font-size: 24px !important; }
  .wb-brandcard .wb-title::after { width: 62px !important; height: 4px !important; }
}