@charset "UTF-8";
/* 词卷 V7.0.0 旧版界面（经典 UI）收尾层 —— 所有主题通用
   ─────────────────────────────────────────────────────────────────────────────
   作用范围：
   · 第 1 段「图表色令牌」挂在 :root 上，新旧界面都读（04-main.js 画甜甜圈 / 折线 / 分享卡 canvas、index.html 的统计强调色）。
     只引用各主题已有的令牌（--accent --amber --rose --ink-soft …），不新增任何写死的颜色；个别主题的令牌彼此太像
     （极简深的 accent≈amber、桃桃猫卷的 accent≈rose、像素的 accent≈rose），就在本主题里换成本主题另一个令牌，保证五段颜色分得开。
   · 其余各段只命中旧版界面：html:not(.ws-v5)（没开新版，或服务器急停把新版整体关掉）。新版界面（html.ws-v5，电脑与手机都算）
     一条都不命中，由 16–26 号负责；像素街机的旧版皮肤在 26 号（优先级 4 个 ID，本文件同属性不和它抢）。
   · 选择器里重复的 #id（#mobileHome#mobileHome…）只用来抬优先级：旧版各层到处是带 !important 的 #id 规则，不抬盖不过。
   逐段说明见各段开头。 */

/* ============ 1. 图表色令牌（跟主题走） ============
   --ws-chart-1…5：统计页甜甜圈 / 图例 / 折线的五种系列色；--ws-chart-ok：「已掌握 / 完成」的绿。
   --ws-chart-*-ink：拿系列色当「文字色」时用（往 --ink 方向混 55%，七个主题实测对比度都 ≥ 4.5:1，桃桃猫卷最紧）。 */
:root{
  --ws-chart-1:var(--accent);
  --ws-chart-2:var(--amber);
  --ws-chart-3:var(--rose);
  --ws-chart-4:var(--ink-soft);
  --ws-chart-5:color-mix(in srgb,var(--ink-faint) 55%,var(--card));
  --ws-chart-ok:var(--ok,var(--mint,var(--accent)));
  --ws-chart-2-ink:color-mix(in srgb,var(--ws-chart-2) 45%,var(--ink));
  --ws-chart-3-ink:color-mix(in srgb,var(--ws-chart-3) 45%,var(--ink));
  --ws-chart-4-ink:color-mix(in srgb,var(--ws-chart-4) 45%,var(--ink));
  --ws-chart-ok-ink:color-mix(in srgb,var(--ws-chart-ok) 45%,var(--ink));
}
/* 深色主题：第 5 段用 --ink-faint 本色（和卡片底色拉开） */
:root[data-theme="dark"]{--ws-chart-5:var(--ink-faint);}
/* 极简浅：amber 是天蓝，和 accent 的蓝太近 → 第 2 段换 rose，第 3 段才用天蓝 */
:root[data-theme="minimal-light"]{--ws-chart-2:var(--rose);--ws-chart-3:var(--amber);}
/* 极简深：accent / amber / terra 三个都是青蓝 → 第 2 段 rose，第 3、4、5 段用三档灰蓝 */
:root[data-theme="minimal-dark"]{--ws-chart-2:var(--rose);--ws-chart-3:var(--ink-soft);--ws-chart-4:var(--ink-faint);--ws-chart-5:var(--line-strong);}
/* 桃桃猫卷：rose / terra 和 accent 同一个粉 → 第 3 段用深豆沙，第 4 段用奶茶，第 5 段用浅粉描边色 */
:root[data-theme="cute-pink"]{--ws-chart-3:var(--ink-soft);--ws-chart-4:color-mix(in srgb,var(--amber) 55%,var(--ink-soft));--ws-chart-5:var(--line-strong);}
/* 星穹至尊：第 4 段用 mint，第 5 段灰 */
:root[data-theme="supreme"]{--ws-chart-4:var(--mint);--ws-chart-5:var(--ink-faint);}
/* 像素街机：rose 和洋红太近 → 第 3 段青、第 4 段绿（本主题自己的 --cyan / --ok） */
:root[data-theme="pixel"]{--ws-chart-3:var(--cyan);--ws-chart-4:var(--ok);--ws-chart-5:var(--ink-faint);}
/* V7.0.0 海盐汽水 / 森林书屋：本主题的令牌里没有五个分得开的色相（点缀色只做填充），直接用设计规范 §1.7 / §3.7 验过的分类色
   （release-packages/v7-themes/DESIGN-SODA-FOREST.md：亮度带 / 彩度 / 色盲相邻分离 / 对表面 3:1 全部 PASS）。这是本文件唯二写死的颜色组，只做图形填充；
   图例文字照旧用墨色令牌。新版界面读同一组 --ws-chart-*，不用另写。 */
:root[data-theme="soda"]{--ws-chart-1:#1C82B0;--ws-chart-2:#CC7412;--ws-chart-3:#2A9468;--ws-chart-4:#8A6BD1;--ws-chart-5:#D2553F;}
:root[data-theme="forest"]{--ws-chart-1:#3D7F4C;--ws-chart-2:#B8862E;--ws-chart-3:#3F7FB5;--ws-chart-4:#A8553A;--ws-chart-5:#8C6BB0;}

/* ============ 2. 旧版手机首页（≤768）：顶部几排气泡 → 一排、可左右滑（和新版手机一样） ============
   原来 .mobile-home-pills 是 flex-wrap + 靠右，6 个入口（连胜 / 个人·班级 / 主题 / 商城 / 邀请 / 日历）挤成三排。
   现在永远一排：超出部分左右滑、右侧渐隐提示还能滑；入口一个不少，顺序同新版（连胜在最前）。
   · 只改排布，不改显示与隐藏：不写 display —— 新手安静首页（整行 display:none）、[hidden] 的入口都照旧。
   · 右侧渐隐用 mask；行尾补一个 24px 的伪元素占位，滑到底时最后一颗气泡能完整离开渐隐区。
   · 晚间「保住连胜」提醒（04-main.js 插在这一行里）紧跟在连胜气泡后面，只显示短句「今晚保住 N 天连胜」（V7.0.0 第二轮：原来整句排在最前面，
     一颗就占满首屏、6 个入口都得往左滑，360 宽时还被裁掉右边框）；整句在它的 title 里。 */
@media (max-width:768px){
  html:not(.ws-v5) body #mobileHome#mobileHome#mobileHome > .mobile-home-pills{
    flex-wrap:nowrap!important;justify-content:flex-start!important;align-items:center!important;gap:8px!important;
    overflow-x:auto!important;overflow-y:hidden!important;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin:0!important;padding:3px 0!important;width:auto!important;max-width:none!important;min-height:0!important;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);
  }
  html:not(.ws-v5) body #mobileHome#mobileHome#mobileHome > .mobile-home-pills::-webkit-scrollbar{display:none;}
  html:not(.ws-v5) body #mobileHome#mobileHome#mobileHome > .mobile-home-pills::after{content:"";flex:0 0 24px;height:1px;order:99;}
  html:not(.ws-v5) body #mobileHome#mobileHome#mobileHome > .mobile-home-pills > *{flex:0 0 auto!important;white-space:nowrap!important;max-width:none!important;overflow:visible!important;order:9;}
  html:not(.ws-v5) body #mobileHome#mobileHome#mobileHome > .mobile-home-pills > #mobileHomeStreak{order:1;}
  html:not(.ws-v5) body #mobileHome#mobileHome#mobileHome > .mobile-home-pills > #wsModeChipM{order:2;}
  html:not(.ws-v5) body #mobileHome#mobileHome#mobileHome > .mobile-home-pills > #mobileHomeTheme{order:3;}
  html:not(.ws-v5) body #mobileHome#mobileHome#mobileHome > .mobile-home-pills > #mobileHomeShop{order:4;}
  html:not(.ws-v5) body #mobileHome#mobileHome#mobileHome > .mobile-home-pills > #mobileHomeInvite{order:5;}
  html:not(.ws-v5) body #mobileHome#mobileHome#mobileHome > .mobile-home-pills > #mobileHomeCalendar{order:6;}
  html:not(.ws-v5) body #mobileHome#mobileHome#mobileHome > .mobile-home-pills > .ws-streak-guard{order:1;}
  /* 本身带 emoji 的气泡（主题 / 商城 / 邀请 / 个人·班级）没有线性图标：ui-polish-v4 给的是透明占位图，白占 21px 让字偏右 → 不画 */
  html:not(.ws-v5) body #mobileHome#mobileHome#mobileHome > .mobile-home-pills > .mobile-home-pill:not(#mobileHomeStreak):not(#mobileHomeCalendar)::before{content:none!important;display:none!important;}
  /* 保住连胜提醒：从「整行宽的块」改成和气泡同高的一颗长气泡 */
  html:not(.ws-v5) body #mobileHome#mobileHome#mobileHome > .mobile-home-pills > .ws-streak-guard{width:auto!important;max-width:calc(100vw - 88px)!important;overflow:hidden!important;text-overflow:ellipsis!important;margin:0!important;padding:0 12px!important;min-height:34px;line-height:32px!important;border-radius:999px!important;font-size:13px!important;}
  html:not(.ws-v5) body #mobileHome#mobileHome#mobileHome > .mobile-home-pills > .ws-streak-guard .ws-sg-long{display:none!important;}
  html:not(.ws-v5) body #mobileHome#mobileHome#mobileHome > .mobile-home-pills > .ws-streak-guard .ws-sg-short{display:inline!important;}
}

/* ============ 3. 晚间「保住连胜」提醒：颜色跟主题走（原来写死砖红 #b4502e，深色主题上只有 3.6:1） ============ */
html:not(.ws-v5) body .ws-streak-guard{
  border-color:color-mix(in srgb,var(--rose) 45%,transparent)!important;
  background:color-mix(in srgb,var(--rose) 10%,transparent)!important;
  color:color-mix(in srgb,var(--rose) 45%,var(--ink))!important; /* 45%：桃桃猫卷的粉底上也 ≥ 4.5:1 */
}

/* ============ 4. 电脑顶栏头像按钮显示成「林林」 ============
   登录后按钮里除了头像，还藏着「欢迎回来 / 昵称 / 币数」三段（靠 font-size:0 + 圆形裁切藏）；星穹等主题把字号改回来后，
   昵称从圆圈后面透出来。登录态直接不显示这三段（游客的「登录 / 注册」是 .is-guest，不受影响）。 */
html:not(.ws-v5) body #topAccountBtn#topAccountBtn:not(.is-guest) > span:not(.top-account-avatar){display:none!important;}

/* ============ 5. 主题预览弹窗：右上角 × 盖住价格药丸（电脑宽度） ============ */
@media (min-width:769px){
  html:not(.ws-v5) body #themePreviewModal#themePreviewModal .theme-preview-top{padding-right:46px!important;}
}

/* ============ 6. 电脑首页轮播 ============
   a) 1101–1180px：首页网格被别的层改成单列排布（hero / today / calendar 上下排），列宽却还是「主列 + 320px 侧列」，
      右边空一条、轮播只剩 570px 宽，300px 高装不下 → 标题压在正文上（自叠）。这一段宽度把列宽也改成单列。
   b) ≥1101px：轮播每页钉死 300px（09 号），晚上多出「保住连胜」提醒条、或窗口偏窄换行多时，正文被挤成 0 高、和标题叠字。
      改成「至少 300px、内容多就长高」（同 26 号像素主题的修法）。 */
@media (min-width:1101px) and (max-width:1180px){
  html:not(.ws-v5) body #view-home#view-home.active{grid-template-columns:minmax(0,1fr)!important;}
}
@media (min-width:1101px){
  html:not(.ws-v5) body #view-home#view-home .share-hero{height:auto!important;min-height:300px!important;}
  html:not(.ws-v5) body #view-home#view-home .share-hero .hero-carousel{height:auto!important;min-height:300px!important;}
  html:not(.ws-v5) body #view-home#view-home .share-hero .hero-carousel > .hero-slide.active{height:auto!important;min-height:300px!important;max-height:none!important;}
  html:not(.ws-v5) body #view-home#view-home .share-hero .hero-slide > p{max-height:none!important;}
}
/* c) ≥1101px（V7.0.0 第二轮）：b 让每页按内容长高以后，每页高度不一样 → 16 秒自动翻页时下面的「今日计划」跟着上下跳
      （实测 1440 晚上跳 90px、1180 最多跳 243px）。改成所有页叠在同一个格子里（grid-area 1 / 1），
      不在当前的那几页只是看不见（visibility:hidden：不占点击、读屏也跳过），轮播高度 = 最高那一页，翻页时下方内容一动不动。
      第三轮：只在 ≥1101 生效。769–1100 是单列窄排，第一页比其余页高出一大截（820 宽 694 对 332–460），钉成最高那页会让其余 5 页
      上下散开、中间空出约 130px，「今日计划」也被推下去 → 这一段宽度恢复原样（各页按内容高，和改动前一样）。 */
@media (min-width:1101px){
  html:not(.ws-v5) body #view-home#view-home .share-hero .hero-carousel{display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto!important;align-items:stretch!important;}
  html:not(.ws-v5) body #view-home#view-home .share-hero .hero-carousel > .hero-slide:not([hidden]):not([data-hero-empty="true"]):not([data-hero-clone]){display:grid!important;grid-area:1 / 1!important;height:auto!important;max-height:none!important;}
  html:not(.ws-v5) body #view-home#view-home .share-hero .hero-carousel > .hero-slide:not(.active){visibility:hidden!important;pointer-events:none!important;}
}

/* ============ 7. 769–1099px 学习页：学习卡被挤成一条 ============
   旧版学习页照搬 1440 的两栏（卡片 + 360px 右栏），还给左侧栏留了 240px 空位（学习页盖住整屏，侧栏其实看不见）。
   820px 宽时卡片只剩约 100px，单词被截断、释义一行一个字。这一段宽度：去掉左侧空位，改单栏，
   右栏（学习小贴士 / 查看上一个词 / 快捷键）挪到卡片下面并排两列 —— 入口一个不少。 */
@media (min-width:769px) and (max-width:1099px){
  html:not(.ws-v5) body #study#study.on .study-top,
  html:not(.ws-v5) body #study#study.on .study-progress,
  html:not(.ws-v5) body #study#study.on .study-body,
  html:not(.ws-v5) body #study#study.on .study-foot{margin-left:0!important;}
  html:not(.ws-v5) body #study#study.on .study-top{padding-left:28px!important;padding-right:28px!important;}
  /* 顶栏一排放不下（820px 时要 968px）：面包屑压在「今日计划总进度」上、进度条被挤成 0 宽、右边的连续学习 / 专注时长 / 头像出屏。
     允许换行，进度条至少 220px；放不下的统计小药丸整组换到第二行靠右 */
  html:not(.ws-v5) body #study#study.on .study-top{flex-wrap:wrap!important;row-gap:10px!important;}
  html:not(.ws-v5) body #study#study.on .study-top .study-brand{flex:0 0 auto!important;}
  html:not(.ws-v5) body #study#study.on .study-top .study-top-progress{flex:1 1 220px!important;min-width:220px!important;}
  html:not(.ws-v5) body #study#study.on .study-top .study-top-meta{margin-left:auto!important;}
  html:not(.ws-v5) body #study#study.on .study-progress{padding-left:28px!important;padding-right:28px!important;}
  html:not(.ws-v5) body #study#study.on .study-body{grid-template-columns:minmax(0,1fr)!important;padding-left:28px!important;padding-right:28px!important;}
  html:not(.ws-v5) body #study#study.on .study-aside{position:static!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;align-items:start!important;}
  html:not(.ws-v5) body #study#study.on .study-foot{padding-left:28px!important;padding-right:28px!important;}
}

/* ============ 8. 电脑统计页「学习内容分布」：甜甜圈 + 图例挤在一张窄卡里 ============
   卡片内宽只有约 310px，却按「190px 甜甜圈 + 图例」两栏排，图例标签被压成一行一个字、和数字叠在一起。
   改成能并排就并排、放不下就图例换到甜甜圈下面（同新版做法）。 */
html:not(.ws-v5) body #view-stats#view-stats .stats-donut-wrap{display:flex!important;flex-wrap:wrap!important;align-items:center!important;justify-content:center!important;gap:16px 20px!important;}
html:not(.ws-v5) body #view-stats#view-stats .stats-donut{flex:none!important;margin:0!important;}
html:not(.ws-v5) body #view-stats#view-stats .stats-legend{flex:1 1 200px!important;min-width:200px!important;}
html:not(.ws-v5) body #view-stats#view-stats .stats-legend-row b{white-space:nowrap!important;}

/* ============ 9. 旧版手机难词本 / 统计页：7–11.5px 的小字抬到 12px（V7.0.0 第二轮） ============
   真浏览器量出来这两页还有一大片小于 12px 的字：难词卡的例句 9.2px / 标签 8px / 底部信息与按钮 8.8px、分类页签 8.5px、
   统计页图例 8.5px、甜甜圈中心 7px、记忆持久度刻度 7.5px、「查看详情」9px、图表坐标 8px、各统计卡说明 11–11.5px。
   一律抬到 12px（契约：字号 ≥ 12）；卡片都是弹性 / 网格布局，按钮只把固定高度改成最小高度。底栏五个标签是全站公用的，不在这里动。 */
@media (max-width:768px){
  html:not(.ws-v5) body #mobileHardBook#mobileHardBook :is(.mobile-hard-stat span,.mobile-hard-stat > em,.mobile-hard-stat b small,#mobileHardAdviceText,.mobile-hard-toolbtn,.mobile-hard-def,.mobile-hard-def b,.mobile-hard-example,.mobile-hard-tags span,.mobile-hard-meta,.mobile-hard-meta span,.mobile-hard-meta b){font-size:12px!important;}
  html:not(.ws-v5) body #mobileHardBook#mobileHardBook .mobile-hard-tabs button{font-size:12px!important;height:auto!important;min-height:32px!important;padding:0 6px!important;}
  html:not(.ws-v5) body #mobileHardBook#mobileHardBook .mobile-hard-actions-row button{font-size:12px!important;height:auto!important;min-height:34px!important;}
  html:not(.ws-v5) body #mobileHardBook#mobileHardBook .mobile-hard-tags span{min-height:22px!important;}
  html:not(.ws-v5) body #mobileHardBook#mobileHardBook .axis-text{font-size:12px!important;}
  /* 难词本里的「学习统计」缩略图借用的是电脑统计页的 720×226 画布（preserveAspectRatio=none），手机上横向缩到 0.43、纵向 0.46 倍，
     日期刻度只剩 5px 高、放大又会被压扁和裁掉 → 这张缩略图不画刻度（卡片标题已写「近 7 天」，点进统计页有完整的图和 12px 刻度） */
  html:not(.ws-v5) body #mobileHardBook#mobileHardBook #recordsStatsLineM .axis-text{display:none!important;}
  html:not(.ws-v5) body #mobileHardBook#mobileHardBook .mobile-hard-trend-copy span{font-size:12px!important;}
  html:not(.ws-v5) body #mobileStatsPage#mobileStatsPage :is(.mobile-stat-card span,.mobile-stat-card > em,.mobile-stat-card b small,.mobile-stats-legend,.mobile-stats-legend span,.mobile-stats-summary div,.mobile-stats-panel-head button,.mobile-stats-donut-core span,.mobile-durability-score span,.mobile-durability-score small,.mobile-durability-scale,.mobile-durability-scale span,.mobile-stats-list-row,.mobile-stats-list-row span){font-size:12px!important;}
  html:not(.ws-v5) body #mobileStatsPage#mobileStatsPage .mobile-stats-info{font-size:12px!important;width:16px!important;height:16px!important;}
  /* 字大了，甜甜圈中心和持久度左栏跟着放宽，「掌握单词」「只读统计指标」不折行、不被圆裁掉 */
  html:not(.ws-v5) body #mobileStatsPage#mobileStatsPage .mobile-stats-donut-core{width:66px!important;height:66px!important;}
  html:not(.ws-v5) body #mobileStatsPage#mobileStatsPage .mobile-stats-donut-core span{white-space:nowrap!important;margin-top:1px!important;}
  html:not(.ws-v5) body #mobileStatsPage#mobileStatsPage .mobile-durability{grid-template-columns:90px minmax(0,1fr)!important;}
  html:not(.ws-v5) body #mobileStatsPage#mobileStatsPage .mobile-durability-score :is(span,small){white-space:nowrap!important;}
  html:not(.ws-v5) body #mobileStatsPage#mobileStatsPage .axis-text{font-size:12.5px!important;}
}

/* ============ 10. V7.0.0 更新公告的「知道了」次按钮（旧版，第三轮） ============
   ui-polish-v4 给 .ws-reg-ghost 的是 --ink-faint（13.5px、400 字重），在公告卡上只有 3.5–3.9:1（纸墨浅 3.93、纸墨深 3.70、星穹 3.55、桃桃猫卷 3.77）。
   公告里这颗换成 --ink-soft（九个主题实测见交活报告，都 ≥ 4.5）；悬停再深一档。新版界面由 22 号穿皮，本段不命中。 */
html:not(.ws-v5) body #wsAnnounceModal .ws-reg-ghost{color:var(--ink-soft)!important;}
html:not(.ws-v5) body #wsAnnounceModal .ws-reg-ghost:hover{color:var(--ink)!important;}

/* V7.0.0 旧版登录框报错字对比度（9/23 出过事的位置）：--terra 在桃桃猫卷上只有 2.6:1，压深到和墨色混合，所有主题 ≥4.5 */
html:not(.ws-v5) #authModalMessage[data-kind="error"]{color:color-mix(in srgb,var(--terra) 45%,var(--ink))!important;}
html:not(.ws-v5) #authModalMessage:not([data-kind="error"]){color:var(--ink-soft)!important;}

/* ============ 11. V7.0.1 桃桃猫卷旧版主按钮对比度 ============
   --solid #cf5f8f 配 --solid-text #fffaf8 只有 3.57:1（.ws-reg-primary、btn-primary、手机首页「开始复习」、toast 等都拿它当底色）。
   旧版界面里把 --solid 压深一档到 #c43b76：色相 334°、饱和度 54% 都不变，只把明度 59% 降到 50% → 4.79:1，仍是桃桃猫的玫粉；
   --solid-text 不动。新版界面（html.ws-v5）用自己的令牌，本段不命中，一个像素不变。
   优先级 (0,2,1) 高于 index.html 的 :root[data-theme="cute-pink"] (0,2,0)。 */
html:not(.ws-v5)[data-theme="cute-pink"]{--solid:#c43b76;}