/* ============================================================
   英语智习室 · 精修设计令牌 v3
   关键词：明亮橙主色 · 色彩平衡 · 简约扁平 · 暖灰阴影 · 统一线条图标
   v3 变更：辅色饱和度下调 / 阴影改暖灰基 / hover 幅度精校 / 细节抛光
   ============================================================ */
:root{
  /* ---- 主色（橙）—— 保持不变 ---- */
  --o-primary-50:#FFF5EE;
  --o-primary-100:#FFE8D6;
  --o-primary-200:#FFD0AD;
  --o-primary-300:#FFB380;
  --o-primary-400:#FF8C42;
  --o-primary-500:#FF7A1A;
  --o-primary-600:#FF6A00;   /* 主按钮 / 主强调 */
  --o-primary-700:#E55F00;
  --o-primary-800:#CC5500;

  /* ---- 辅色 1：青蓝（冷调平衡 · v3 微降饱和） ---- */
  --o-teal-50:#F0F9FB;
  --o-teal-100:#DDF1F6;
  --o-teal-200:#BCE4ED;
  --o-teal-300:#82CFDC;
  --o-teal-400:#52B5C4;
  --o-teal-500:#3B9CA8;
  --o-teal-600:#2E8590;

  /* ---- 辅色 2：暖琥珀（v3 更暖更金） ---- */
  --o-amber-50:#FFFAF3;
  --o-amber-100:#FFF0DA;
  --o-amber-200:#FFDFA8;
  --o-amber-300:#FFCC6E;
  --o-amber-400:#FFB840;
  --o-amber-500:#E8A028;
  --o-amber-600:#D98A00;     /* 深阶：琥珀角标/强调文字（壳 .mstep 同族用） */

  /* ---- 辅色 3：紫（v3 降饱和更雅） ---- */
  --o-purple-50:#F7F5FC;
  --o-purple-100:#EEE8F8;
  --o-purple-200:#D9CDF2;
  --o-purple-300:#B89FE3;
  --o-purple-400:#9479CF;
  --o-purple-500:#785DB0;

  /* ---- 辅色 4：亮紫（10-14 柴：查单词模块专用 · 不侵入现有 purple 档） ----
     区别：purple = 作业/语法（降饱和 #785DB0） / violet = 查单词（贴参考图明亮饱和 #7C4DFF）
     引用登记见 SPEC-hall-flow §10-14；任何引用 --o-violet-* 的页面/组件必须在此处有定义（缺则整条静默失效 → 壳 token 完整性红线） */
  --o-violet-50:#F2ECFF;     /* 浅底：页面 hero / chip 底 */
  --o-violet-100:#E3D9F8;    /* hover/嵌套浅容器 */
  --o-violet-200:#C9B6F0;    /* 描边/分隔 */
  --o-violet-300:#A98FE8;    /* 中阶：进度/选中态 */
  --o-violet-400:#9070E0;    /* hover 深阶 */
  --o-violet-500:#7C4DFF;    /* 主色：按钮/链接/图标（贴参考图主紫） */
  --o-violet-600:#6636E0;    /* 深阶：按钮 hover/按下 */

  /* ---- 辅色 5：青绿（10-13 柴：启蒙英语模块专用 · 第八色家族） ----
     与 teal（句子学习 · 青蓝 #3B9CA8）刻意区分：green 偏绿青 #1FA375，两色并列不混淆；
     启蒙学习页在 :root 重映射 --o-primary-* → --o-green-*（study-shell 家族色机制），
     入口卡图标 / 学情报告第八桶 color 同取 --o-green-500。
     引用登记见 SPEC-qimen；任何引用 --o-green-* 的页面/组件必须在此处有定义
     （缺则整条静默失效 → 壳 token 完整性红线） */
  --o-green-50:#EFFAF5;      /* 浅底：卡片底 / 进度槽 */
  --o-green-100:#D8F3E7;     /* hover/嵌套浅容器 */
  --o-green-200:#AFE6CE;     /* 描边/分隔 */
  --o-green-300:#77D2AE;     /* 中阶：进度填充/选中态 */
  --o-green-400:#41BC8D;     /* hover 深阶 */
  --o-green-500:#1FA375;     /* 主色：按钮/链接/图标 */
  --o-green-600:#158763;     /* 深阶：按钮 hover/按下 */
  --o-green-700:#0F6E51;     /* 最深阶：强调文字 */

  /* ---- 中性色（v3 冷灰中性体系） ---- */
  --o-white:#FFFFFF;
  --o-bg:#F8F8F9;            /* 页面底（冷浅灰） */
  --o-bg-2:#F2F2F4;          /* 卡内浅容器/轨道（冷浅） */
  --o-bg-3:#ECECEF;          /* hover/嵌套浅容器（冷次浅） */
  --o-border:#F1F1F3;        /* 卡片边框（冷淡） */
  --o-border-2:#E5E5E9;      /* hover/结构边（冷中） */
  --o-border-3:#D9D9DE;      /* 分隔强调（冷深） */
  --o-text:#1A1A1F;          /* 主标题 */
  --o-text-2:#3D3D45;        /* 正文 */
  --o-text-3:#6B6B75;        /* 次要 */
  --o-text-4:#9E9EA8;        /* 辅助 */

  /* ---- 功能色 ---- */
  --o-success:#36B07F;
  --o-success-bg:#E6F6EF;
  --o-success-deep:#2BA070;  /* 深阶：判定正确态标题 + 按钮 hover（缺则 hover 变透明） */
  --o-success-soft:rgba(54,179,127,.12);
  --o-danger:#EA5A5A;
  --o-danger-bg:#FEF0F0;
  --o-danger-deep:#D64848;   /* 深阶：判定错误态按钮 hover + 跟读录音渐变（缺则失效） */
  --o-warning:#E89A28;
  --o-warning-bg:#FFF7EA;
  --o-blue-500:#4A90D9;
  --o-blue-600:#3B7CC0;
  --o-blue-50:#EDF4FC;

  /* ---- 字体 ---- */
  --o-font:"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  --o-fw-400:400;--o-fw-500:500;--o-fw-600:600;--o-fw-700:700;--o-fw-800:800;

  /* ---- 字号 ---- */
  --o-10:10px;--o-11:11px;--o-12:12px;--o-13:13px;--o-14:14px;--o-15:15px;--o-16:16px;
  --o-18:18px;--o-20:20px;--o-22:22px;--o-24:24px;--o-28:28px;--o-32:32px;

  /* ---- 间距 ---- */
  --o-4:4px;--o-8:8px;--o-12:12px;--o-16:16px;--o-20:20px;
  --o-24:24px;--o-28:28px;--o-32:32px;--o-40:40px;--o-48:48px;

  /* ---- 圆角 ---- */
  --o-r-6:6px;--o-r-8:8px;--o-r-10:10px;--o-r-12:12px;--o-r-14:14px;
  --o-r-16:16px;--o-r-20:20px;--o-r-24:24px;--o-r-full:999px;

  /* ---- 精致阴影体系（v3 暖灰基替代纯黑） ---- */
  --o-sh-0:none;
  --o-sh-1:0 1px 2px rgba(55,45,35,.025),0 1px 3px rgba(55,45,35,.018);           /* 极淡 · 静息 */
  --o-sh-2:0 2px 4px rgba(55,45,35,.03),0 4px 10px rgba(55,45,35,.025);          /* 淡 · 卡片静息 */
  --o-sh-3:0 4px 8px rgba(55,45,35,.045),0 8px 20px rgba(55,45,35,.035);        /* 中 · hover */
  --o-sh-4:0 8px 16px rgba(55,45,35,.05),0 16px 36px rgba(55,45,35,.04);        /* 强 · 弹窗/浮层 */
  --o-sh-primary:0 2px 6px rgba(255,106,0,.10),0 4px 14px rgba(255,106,0,.14);
  --o-sh-teal:0 2px 6px rgba(46,133,144,.10),0 4px 14px rgba(46,133,144,.12);
  --o-sh-green:0 2px 6px rgba(21,135,99,.10),0 4px 14px rgba(21,135,99,.12);   /* 10-13 启蒙英语家族（壳 --ws-accent-shadow 重映射用） */

  /* ---- 动效 ---- */
  --o-t:200ms cubic-bezier(.4,0,.2,1);
  --o-t-fast:120ms cubic-bezier(.4,0,.2,1);
  --o-t-slow:350ms cubic-bezier(.4,0,.2,1);
}

/* ---- Reset ---- */
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;overflow-x:hidden;} /* 移动端防止横向溢出滚动 */
body{font-family:var(--o-font);background:var(--o-bg);color:var(--o-text-2);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.5;}
a{text-decoration:none;color:inherit;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
ul,ol{list-style:none;}

/* ===========================================================
   SVG 图标系统（统一线条风格 v3）
   规范：24×24 viewBox · 2px stroke · round caps · fill:none
   装饰元素统一 opacity:.35 · 内边距 ≥2px
   =========================================================== */
.ico{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none;
  stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;display:inline-block;vertical-align:middle;}
.ico-sm{width:16px;height:16px;}
.ico-lg{width:24px;height:24px;}
.ico-xl{width:32px;height:32px;}

/* ===========================================================
   顶部导航
   =========================================================== */
.topnav{height:60px;background:var(--o-white);border-bottom:1px solid var(--o-border);
  display:flex;align-items:center;justify-content:space-between;padding:0 var(--o-32);position:sticky;top:0;z-index:100;}
.nav-left{display:flex;align-items:center;gap:36px;align-self:stretch;}
.logo{display:flex;align-items:center;gap:10px;font-size:var(--o-18);font-weight:var(--o-fw-700);color:var(--o-text);}
.logo-mark{width:32px;height:32px;border-radius:var(--o-r-10);background:var(--o-primary-600);
  display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:var(--o-sh-primary);}
.logo-mark .ico{width:18px;height:18px;}
.logo-img{height:36px;width:auto;display:block;}/* 2026-09-20 LOGO 更换：409x115 透明底位图，高 36px 适配 60px 顶栏 */
.nav-links{display:flex;gap:36px;align-self:stretch;}
.nav-link{font-size:var(--o-16);font-weight:var(--o-fw-500);color:var(--o-text-3);
  display:flex;align-items:center;gap:6px;transition:color var(--o-t);position:relative;padding:4px 0;}
.nav-link .ico{width:16px;height:16px;}
.nav-link:hover{color:var(--o-primary-600);}
.nav-link.active{color:var(--o-primary-600);font-weight:var(--o-fw-600);}
/* 2026-09-10 按柴要求：激活下划线「平行居中」于文字标签（原 left:50% 相对「图标+文字」整块 → 偏左 11px） */
.nav-link.active::after{content:'';position:absolute;bottom:0;left:calc(50% + 11px);transform:translateX(-50%);
  width:24px;height:3px;border-radius:var(--o-r-full);background:var(--o-primary-600);}
.nav-right{display:flex;align-items:center;gap:12px;}
.nav-icon{width:36px;height:36px;border-radius:var(--o-r-full);display:flex;align-items:center;justify-content:center;
  color:var(--o-text-3);cursor:pointer;transition:all var(--o-t);}
.nav-icon:hover{background:var(--o-bg);color:var(--o-primary-600);}
.nav-icon .ico{width:18px;height:18px;}
.nav-avatar{width:34px;height:34px;border-radius:50%;
  background:linear-gradient(135deg,var(--o-primary-400),var(--o-primary-600));
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:var(--o-fw-600);
  border:2px solid var(--o-white);box-shadow:var(--o-sh-1);cursor:pointer;transition:transform var(--o-t);}
.nav-avatar:hover{transform:scale(1.06);}

/* ===== 顶栏账户入口（双计费 zsx_account_v1 · 全站 8 处导航同构副本，改必全同步）=====
   课时态 chip「我的课时 21」｜卡态 chip「我的卡 66 天」；未销 ≤2 课时 / 剩 ≤7 天转警示色。
   点开 = 平铺账本（与 learn-report 账本气泡同款三行 + 注脚），底部给报告页入口。
   样式单源在本文件（导航标记仍按约定 8 页各持一份，标记/JS 改动必 8 页同发）。 */
/* 2026-09-16 柴「整体缩放」→ 缩小一档（口径 ×0.85）：
   高 34→29 / 字号 13→11 / 图标 15→13 / 左右内边距 12→10 / 间距 6→5。
   动因：会话态胶囊「学习中 mm:ss」是顶栏最靠左的实心色块，与右侧新建的「流程模式」按钮
   （36px/13px）抢视觉 → 收一档让它退为状态指示。
   ⚠️ 本规则是全站单源（.nav-acct 无任何页内副本），改这里即 8 页同时生效，无需同发。
      三态（.is-studying/.is-resting/.is-homework）只换底色/深浅，尺寸一律继承本块。 */
.nav-acct{display:inline-flex;align-items:center;gap:5px;height:29px;padding:0 10px;border:0;
  border-radius:var(--o-r-full);background:var(--o-primary-50);color:var(--o-primary-600);
  font-family:inherit;font-size:var(--o-11);font-weight:var(--o-fw-500);white-space:nowrap;
  cursor:pointer;transition:all var(--o-t);}
.nav-acct .ico{width:13px;height:13px;flex:none;}
.nav-acct .nap-val{font-weight:var(--o-fw-700);}
.nav-acct:hover{background:var(--o-primary-100);}
/* 09-17 柴（截图框选）：交互态（展开中 .is-on）取消柔光描边 ——
   本胶囊/三态胶囊一律只靠「背景加深」表达按压，不再叠 box-shadow 光圈。
   ⚠️ 基础 / 警示 / 学 / 休 / 作 五处 is-on 的光圈全撤（见下方三态块），漏一处即「展开仍带光晕」。 */
.nav-acct.is-on{background:var(--o-primary-100);}
.nav-acct.is-warn{background:var(--o-warning-bg);color:var(--o-warning);}
/* 学习会话态（zsx-session.js 接管）：学习中=绿（09-15 柴口径，与休息蓝冷暖分明）/ 休息中=蓝 /
   作业中=紫（09-17 柴三方分域：作业域=冻结岛，chip 显示作业累计时长）；
   标签换成状态词，数值走等宽数字防抖。
   ⚠️ 三态样式单源在本文件（12.15 守）—— is-homework 曾一度落在 zsx-session.js 注入串内，
      会绕过本块窄屏单字规则（作业态窄屏丢状态词）+ 展开态被主色 .is-on 染橙，09-17 迁回。 */
.nav-acct.is-studying{background:var(--o-success-bg);color:var(--o-success);}
.nav-acct.is-resting{background:var(--o-blue-50);color:var(--o-blue-500);}
.nav-acct.is-homework{background:var(--o-purple-50);color:var(--o-purple-500);}
.nav-acct.is-studying .nap-val,.nav-acct.is-resting .nap-val{font-variant-numeric:tabular-nums;}
.nav-acct.is-homework .nap-val{font-variant-numeric:tabular-nums;}
/* 交互态按状态色走：基础 :hover / .is-on 是主色，休息态须改蓝（否则蓝胶囊 hover/展开被染橙）
   09-17 柴：三态 is-on 的柔光描边一并撤除，只保留底色加深（与基础态口径一致）。 */
.nav-acct.is-studying:hover,.nav-acct.is-studying.is-on{background:color-mix(in srgb,var(--o-success) 14%,var(--o-success-bg));}
.nav-acct.is-resting:hover,.nav-acct.is-resting.is-on{background:color-mix(in srgb,var(--o-blue-500) 14%,var(--o-blue-50));}
.nav-acct.is-homework:hover,.nav-acct.is-homework.is-on{background:color-mix(in srgb,var(--o-purple-500) 14%,var(--o-purple-50));}
/* 09-16 柴：账户胶囊「我的课时 21」已迁入头像弹窗 → idle 态顶栏不再出现该胶囊。
   ⚠️ 仅改「何时现身」，三态的尺寸/间距/配色/窄屏单字规则全部原样保留 ——
      会话态（学习中/休息中/作业中）出现的位置、宽度、视觉与迁移前逐像素一致。 */
.nav-acct{display:none;}
.nav-acct.is-studying,.nav-acct.is-resting,.nav-acct.is-homework{display:inline-flex;}
/* 09-17 柴（方案 A）：弹层加宽 284 → 300px —— 四列快捷入口 + 主数值卡需要更从容的内容宽
   （284 时四列每列仅 58.5px，「学情周报」4 字 11px 会贴边）。place() 用 offsetWidth 定位，自动跟随。 */
.nav-acct-pop{position:fixed;z-index:120;display:none;width:300px;padding:14px 16px 12px;
  background:var(--o-white);border:1px solid var(--o-border);border-radius:var(--o-r-16);box-shadow:var(--o-sh-4);}
.nav-acct-pop.is-open{display:block;}

/* ===== 个人中心弹层（09-17 柴四轮迭代后 =「数值上移 + 参数卡」）=====
   触发器改为头像 .nav-avatar（原「我的课时」胶囊只在会话态现身，不再作触发入口）。
   版式三段，视觉权重自上而下递减：
     ① 用户行（身份 + 账本块）：头像 + 昵称/年级 pill ｜ 右端 = 账本小标 + 数值
        柴第四轮：数值（21 / 88 天）**一并上移**到右上角（上轮只迁了文案）；
        组合 = 小标 12px 灰 + 数值 20px 主色 700，横排 baseline
     ② 账本参数卡 .nap-hero（浅橙底 = 唯一强调块，卡内**不再有主数值**）
        结构：参数标签行（换算说明 + 已销/总，pill 并排靠右）/ 进度条 / 注脚
        课时态 = 「1课时 = 60分钟」｜「已销 3 · 总 24 课时」｜ 条 = 已消耗比例
        卡态   = 「月卡 · 期内不限时」｜「生效 xx · 到期 xx」｜ 条 = 已消耗比例
        剩余 ≤2 课时 / ≤7 天 → 右上数值与进度条同步转警示色
     ③ 快捷入口 4 列（图标上 · 文字下）
   账本口径不变（与报告页同源）。 */
/* 09-17 柴：avatar 取消交互柔光描边（与 chip 同处理 —— 弹层 .nap-pop.is-open 可见本身就是反馈，无需 shadow 描边） */
.nap-user{display:flex;align-items:center;gap:9px;padding-bottom:11px;margin-bottom:11px;
  border-bottom:1px solid var(--o-border);}
.nap-user-av{flex:none;width:34px;height:34px;border-radius:50%;
  background:linear-gradient(135deg,var(--o-primary-400),var(--o-primary-600));
  display:flex;align-items:center;justify-content:center;color:#fff;
  font-size:13px;font-weight:var(--o-fw-600);}
/* 09-17 柴：年级 pill 由「用户行最右」下移至「姓名正下方」——身份两块收成一列，左缩进与姓名对齐 */
.nap-user-info{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0;}
.nap-user-n{font-size:var(--o-14);font-weight:var(--o-fw-600);color:var(--o-text);}
.nap-user-t{padding:2px 8px;border-radius:999px;background:var(--o-primary-50);
  color:var(--o-primary-600);font-size:var(--o-11);font-weight:var(--o-fw-500);}
/* 09-17 柴（第四轮）：账本**标签 + 数值**整体挂「弹层右上角」——
   上轮只迁了标签、数值仍留卡内（柴纠正：要移动的是数量本身）。
   09-18 柴（第五轮）：**改为上下排版** —— 说明（12px 灰）与数值（20px 主色 700）竖排、右对齐。
   09-18 柴（第六轮）：**上下对换** —— 数值在上、说明在下。
   实现用 column-reverse：只翻转**视觉序**，DOM 仍保持「说明 → 数值」的语义读序
   （脚本选择器、读屏顺序都不受影响；日后想换回来改一处即可）。
   margin-right:12px 使该列右缘与卡内参数标签行右缘对齐成同一条右侧基准线。
   ⚠️ 与 .nap-user-t 的旧 margin-left:auto（已撤）无关，勿混改。 */
.nap-user-lab{display:flex;flex-direction:column-reverse;align-items:flex-end;gap:2px;
  margin-left:auto;margin-right:12px;white-space:nowrap;}
.nap-user-lab>span{font-size:var(--o-12);line-height:1.2;color:var(--o-text-3);}
.nap-user-lab>b{font-size:var(--o-20);line-height:1.1;font-weight:var(--o-fw-700);
  color:var(--o-primary-600);font-variant-numeric:tabular-nums;}
.nap-user-lab>b em{font-style:normal;margin-left:2px;font-size:var(--o-12);font-weight:var(--o-fw-600);}
.nap-user-lab>b.is-warn{color:var(--o-warning);}
.nap-hero{padding:11px 12px;border-radius:var(--o-r-12);background:var(--o-primary-50);}
/* 卡内参数标签行（第四轮）：「1课时 = 60分钟」与「已销 3 · 总 24 课时」并排、pill 化。
   09-18 柴（第五轮）：**左右互换 + 权重区分** ——
   左 = 账本事实（白底实 pill · 600 · 次深字）= H.meta；右 = 口径说明（.is-sub）= H.conv
   （「1课时 = 60分钟」只是单位表达，不是重点 → 去底 · 400 · 10px · 三级灰）；
   09-18 柴（第六轮）：**两枚左右分开对齐** —— space-between 把账本事实顶到卡内容左缘、
   口径说明顶到卡内容右缘（右缘 ≡ 右上大数值右缘，同一条右侧基准线）；
   .is-sub 另带 margin-left:auto，兜住卡态长文案 wrap 折行时它仍留在右端（不回到左）；
   卡态长文案（生效…·到期…）允许 wrap 折行，不挤压 pill 内文字。 */
.nap-hero-tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px;justify-content:space-between;}
.nap-hero-tag{padding:3px 10px;border-radius:999px;background:color-mix(in srgb,var(--o-white) 92%,transparent);
  color:var(--o-text-2);font-size:var(--o-11);font-weight:var(--o-fw-600);white-space:nowrap;}
.nap-hero-tag.is-sub{padding:0;background:none;color:var(--o-text-4);
  font-size:var(--o-10);font-weight:var(--o-fw-400);margin-left:auto;}
.nap-hero-bar{height:6px;margin-top:12px;border-radius:var(--o-r-full);background:var(--o-primary-100);overflow:hidden;}
.nap-hero-bar i{display:block;height:100%;border-radius:var(--o-r-full);background:var(--o-primary-500);}
.nap-hero-bar.is-warn i{background:var(--o-warning);}
.nap-hero-note{margin-top:8px;font-size:var(--o-11);line-height:1.5;color:var(--o-text-4);}
.nap-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:12px;padding-top:12px;
  border-top:1px solid var(--o-border);}
.nap-gi{display:flex;flex-direction:column;align-items:center;gap:5px;padding:9px 2px;border:0;
  border-radius:var(--o-r-10);background:var(--o-bg-2);color:var(--o-text-2);font-family:inherit;
  font-size:var(--o-11);font-weight:var(--o-fw-500);text-align:center;text-decoration:none;
  white-space:nowrap;cursor:pointer;transition:all var(--o-t);}
.nap-gi:hover{background:var(--o-primary-50);color:var(--o-primary-600);}
.nap-gi .ico{flex:none;width:16px;height:16px;}
/* 未建页面的快捷入口占位提示（弹层模块自持，不依赖页内 toast） */
.nap-toast{position:fixed;left:50%;bottom:calc(28px + env(safe-area-inset-bottom,0px));
  transform:translateX(-50%) translateY(6px);z-index:130;padding:9px 16px;border-radius:var(--o-r-full);
  background:rgba(23,26,31,.9);color:#fff;font-size:var(--o-12);white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;}
.nap-toast.is-on{opacity:1;transform:translateX(-50%) translateY(0);}
/* 窄屏：文字标签收起只留「数值 + 时钟图标」，避免与 指引/铃铛/头像 抢宽（414 实测不换行） */

/* 2026-09-20 按柴要求：宽屏（≥1260px）模块导航整体居中（三列网格：logo 1fr / 导航 auto / 右侧组 1fr）；
   <1260px 回退 flex+space-between（导航居中于 logo 与右侧组之间，避免窄屏重叠） */
@media(min-width:1260px){
  .topnav{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;}
  .nav-right{justify-self:end;}
}

@media(max-width:920px){
  .nav-acct{padding:0 10px;gap:5px;}
  .nav-acct .nap-label{display:none;}
  /* 会话态例外：窄屏也不丢状态（原词压成单字 学 / 休 / 作，保住「状态 + 时长」语义又不挤压流程按钮） */
  .nav-acct.is-studying .nap-label,.nav-acct.is-resting .nap-label{display:inline;font-size:0;}
  .nav-acct.is-studying .nap-label::after,.nav-acct.is-resting .nap-label::after{font-size:var(--o-11);font-weight:var(--o-fw-600);}
  .nav-acct.is-studying .nap-label::after{content:'学';}
  .nav-acct.is-resting .nap-label::after{content:'休';}
  .nav-acct.is-homework .nap-label{display:inline;font-size:0;}
  .nav-acct.is-homework .nap-label::after{font-size:var(--o-11);font-weight:var(--o-fw-600);content:'作';}
  .nav-acct-pop{width:min(300px,calc(100vw - 32px));}
}

/* ===========================================================
   按钮（v3 阴影更细腻）
   =========================================================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 20px;border-radius:var(--o-r-10);font-size:var(--o-14);font-weight:var(--o-fw-600);
  transition:all var(--o-t);white-space:nowrap;}
.btn .ico{width:16px;height:16px;}
.btn-primary{background:var(--o-primary-600);color:#fff;box-shadow:var(--o-sh-primary);}
.btn-primary:hover{background:var(--o-primary-700);transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(255,106,0,.18),0 8px 20px rgba(255,106,0,.10);}
.btn-primary:active{transform:translateY(0);box-shadow:var(--o-sh-primary);}
.btn-outline{border:1.5px solid var(--o-border-2);color:var(--o-text-3);background:var(--o-white);}
.btn-outline:hover{border-color:var(--o-primary-400);color:var(--o-primary-600);background:var(--o-primary-50);}
.btn-ghost{background:var(--o-primary-50);color:var(--o-primary-600);}
.btn-ghost:hover{background:var(--o-primary-100);}
.btn-teal{background:var(--o-teal-50);color:var(--o-teal-600);box-shadow:0 1px 3px rgba(46,133,144,.08);}
.btn-teal:hover{background:var(--o-teal-100);transform:translateY(-1px);}
.btn-sm{padding:6px 14px;font-size:var(--o-13);border-radius:var(--o-r-8);}

/* ===========================================================
   卡片（v3 hover 更平滑）
   =========================================================== */
.card{background:var(--o-white);border-radius:var(--o-r-16);border:1px solid var(--o-border);
  box-shadow:var(--o-sh-1);transition:all var(--o-t);}
.card-hover:hover{transform:translateY(-2px);box-shadow:var(--o-sh-3);border-color:var(--o-border-2);}

/* ===========================================================
   标签 / 徽章
   =========================================================== */
.tag{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:var(--o-r-full);
  font-size:var(--o-12);font-weight:var(--o-fw-500);line-height:1.6;}
.tag .ico{width:12px;height:12px;}
.tag-new{background:var(--o-primary-50);color:var(--o-primary-600);}
.tag-review{background:var(--o-teal-50);color:var(--o-teal-600);}
.tag-home{background:var(--o-purple-50);color:var(--o-purple-500);}
.tag-done{background:var(--o-success-bg);color:var(--o-success);}
.tag-doing{background:var(--o-warning-bg);color:var(--o-warning);}
.tag-lock{background:var(--o-bg-2);color:var(--o-text-4);}
.tag-urgent{background:var(--o-danger-bg);color:var(--o-danger);}

/* ===========================================================
   任务进度（百分比 + 内容数量上下结构）
   =========================================================== */
.task-prog{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex-shrink:0;line-height:1;}
.tp-pct{font-size:var(--o-28);font-weight:var(--o-fw-800);line-height:1;}
.tp-count{font-size:var(--o-11);color:var(--o-text-4);line-height:1;}

/* ===========================================================
   进度条（v3 加内高光）
   =========================================================== */
.progress{height:6px;background:var(--o-bg-2);border-radius:var(--o-r-full);overflow:hidden;
  position:relative;}
.progress>span{display:block;height:100%;border-radius:var(--o-r-full);
  background:var(--o-primary-600);transition:width .6s cubic-bezier(.4,0,.2,1);
  position:relative;overflow:hidden;}
.progress>span::after{content:'';position:absolute;top:0;left:0;right:0;height:50%;
  background:linear-gradient(to bottom,rgba(255,255,255,.25),transparent);border-radius:var(--o-r-full) var(--o-r-full) 0 0;}
.progress-teal>span{background:var(--o-teal-500);}
.progress-purple>span{background:var(--o-purple-400);}

/* ===========================================================
   步骤 Chips（v3 边框更精致）
   =========================================================== */
.step-chip{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:var(--o-r-full);
  font-size:var(--o-12);font-weight:var(--o-fw-500);border:1px solid var(--o-border);
  background:var(--o-white);color:var(--o-text-3);transition:all var(--o-t);}
.step-chip .dot{width:6px;height:6px;border-radius:50%;background:var(--o-text-4);flex-shrink:0;}
.step-chip.done{background:var(--o-success-bg);color:#2BA070;border-color:transparent;}
.step-chip.done .dot{background:var(--o-success);}
.step-chip.done .ico{width:12px;height:12px;color:#2BA070;}
.step-chip.doing{background:var(--o-primary-50);color:var(--o-primary-600);border-color:var(--o-primary-200);}
.step-chip.doing .dot{background:var(--o-primary-600);animation:pulse 2s ease-in-out infinite;}
.step-chip.lock{opacity:.48;}
.step-chip b{font-weight:var(--o-fw-700);}

/* ===========================================================
   模块图标盒
   =========================================================== */
.icon-box{width:40px;height:40px;border-radius:var(--o-r-12);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.icon-box .ico{width:20px;height:20px;}
.m-word{background:var(--o-primary-50);color:var(--o-primary-600);}
.m-book{background:var(--o-teal-50);color:var(--o-teal-600);}
.m-read{background:var(--o-teal-50);color:var(--o-teal-600);}
.m-gram{background:var(--o-purple-50);color:var(--o-purple-500);}
.m-exam{background:var(--o-amber-50);color:var(--o-amber-500);}

/* ===========================================================
   动画
   =========================================================== */
@keyframes fadeUp{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.55;}}
@keyframes bounce{0%,100%{transform:translateY(0);}50%{transform:translateY(-4px);}}
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
@keyframes shimmer{0%{background-position:-200% 0;}100%{background-position:200% 0;}}

.fade-up{animation:fadeUp var(--o-t-slow) both;}
.delay-1{animation-delay:60ms;}.delay-2{animation-delay:120ms;}.delay-3{animation-delay:180ms;}
.delay-4{animation-delay:240ms;}.delay-5{animation-delay:300ms;}

/* ===========================================================
   底部 TabBar（移动端主导航 · 2026-09-10 柴拍板默认固定底部）
   用法：页面在 </body> 前放置
   <nav class="bottom-nav">
     <a class="bn-item active" href="v1-orange.html"><svg class="ico"><use href="#i-home"/></svg><span>英语</span></a>
     ...
   </nav>
   =========================================================== */
.bottom-nav{display:none;position:fixed;left:0;right:0;bottom:0;z-index:90;
  background:var(--o-white);border-top:1px solid var(--o-border);
  box-shadow:0 -2px 10px rgba(55,45,35,.04);
  padding-bottom:env(safe-area-inset-bottom,0);}
.bn-list{display:grid;grid-template-columns:repeat(6,1fr);
  height:calc(56px + env(safe-area-inset-bottom,0));
  padding-bottom:env(safe-area-inset-bottom,0);}
.bn-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:var(--o-text-4);transition:color var(--o-t);position:relative;
  font-size:var(--o-10);font-weight:var(--o-fw-500);line-height:1;padding-top:8px;}
.bn-item .ico{width:20px;height:20px;transition:transform var(--o-t);color:var(--o-text-4);}
.bn-item span{display:block;line-height:1;}
.bn-item:active{background:var(--o-bg);}
.bn-item.active{color:var(--o-primary-600);font-weight:var(--o-fw-600);}
.bn-item.active .ico{color:var(--o-primary-600);transform:scale(1.08);}
.bn-item.active::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:18px;height:2px;border-radius:var(--o-r-full);background:var(--o-primary-600);}

@media(max-width:920px){
  /* 顶部 nav：保留 logo + 右侧铃/头像，隐藏 hamburger + 6 项平铺 */
  .topnav{padding:0 16px;}
  .nav-links,.nav-toggle{display:none;}
  /* 底部 tabbar 显示 */
  .bottom-nav{display:block;}
  /* 内容预留底部空间，避免被 tabbar 遮挡最后一行 */
  body{padding-bottom:calc(56px + env(safe-area-inset-bottom,0));}
}

.zone-num{width:24px;height:24px;border-radius:var(--o-r-full);display:inline-flex;
  align-items:center;justify-content:center;font-size:var(--o-13);font-weight:var(--o-fw-700);
  color:#fff;flex-shrink:0;line-height:1;box-shadow:0 2px 5px rgba(55,45,35,.12);}
.zone-num.n1{background:var(--o-primary-600);}
.zone-num.n2{background:var(--o-teal-500);}
.zone-num.n3{background:var(--o-purple-500);}

/* 三大任务标题色：与顺序数字标签语义色一一对应 */
.zt h2.zc1{color:var(--o-primary-600);}
.zt h2.zc2{color:var(--o-teal-500);}
.zt h2.zc3{color:var(--o-purple-500);}

/* ===========================================================
   滚动条
   =========================================================== */
::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-thumb{background:var(--o-border-3);border-radius:var(--o-r-full);}
::-webkit-scrollbar-thumb:hover{background:var(--o-text-4);}
::-webkit-scrollbar-track{background:transparent;}

/* ===========================================================
   全局更新横幅（发现新版本 · 参照设计稿）
   与 v1-orange.html 内联样式保持同步，供各页面复用。
   徽章/按钮使用独立 hex（#8A63E8/#6D4BC4）保证视觉统一，
   不依赖已降饱和的 --o-purple-400/500。
   =========================================================== */
.version-banner{position:fixed;top:14px;left:50%;transform:translateX(-50%) translateY(-18px);
  display:flex;align-items:center;gap:10px;padding:9px 14px 9px 10px;
  width:max-content;max-width:calc(100vw - 32px);
  background:#F6F2FC;border:1px solid #E5DCF7;border-radius:var(--o-r-16);
  box-shadow:0 8px 24px rgba(120,93,176,.14),0 2px 6px rgba(120,93,176,.07);
  z-index:3000;opacity:0;pointer-events:none;
  transition:opacity .28s cubic-bezier(.4,0,.2,1),transform .28s cubic-bezier(.4,0,.2,1);}
.version-banner.show{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0);}
.version-banner .vb-badge{width:34px;height:34px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#8A63E8,#6D4BC4);color:#fff;box-shadow:0 4px 10px rgba(109,75,196,.30);}
.version-banner .vb-badge .ico{width:18px;height:18px;}
.version-banner .vb-text{display:flex;flex-direction:column;gap:2px;min-width:0;}
.version-banner .vb-title{font-size:var(--o-13);font-weight:var(--o-fw-700);color:var(--o-text);line-height:1.3;}
.version-banner .vb-sub{font-size:var(--o-11);color:var(--o-text-3);line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.version-banner .vb-btn{flex-shrink:0;margin-left:8px;padding:7px 14px;border-radius:var(--o-r-8);
  font-size:var(--o-12);font-weight:var(--o-fw-600);color:#fff;background:var(--o-purple-500);
  box-shadow:0 4px 12px rgba(120,93,176,.28);transition:all var(--o-t);}
.version-banner .vb-btn:hover{background:var(--o-purple-400);transform:translateY(-1px);}
.version-banner .vb-btn:active{background:var(--o-purple-500);transform:translateY(1px);}
.version-banner .vb-close{width:22px;height:22px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;color:var(--o-text-4);
  transition:all var(--o-t);}
.version-banner .vb-close:hover{background:rgba(120,93,176,.12);color:var(--o-purple-500);}
.version-banner .vb-close .ico{width:14px;height:14px;}
@media(max-width:520px){
  .version-banner{gap:8px;padding:8px 10px 8px 8px;}
  .version-banner .vb-badge{width:30px;height:30px;}
  .version-banner .vb-sub{max-width:44vw;}
  .version-banner .vb-btn{padding:6px 11px;font-size:var(--o-11);margin-left:2px;}
}