/* =========================================================
   shell.css —— 新一层「外壳」的样式（首页 / 年级页 / 错题本 / 我的）
   ------------------------------------------------------------------
   为什么单独一个文件，而不是塞进 learn-theme.css：
     learn-theme.css 被 55 个学科页共用，里面的 .card / header.top 等是
     学科页的既有结构。首页这一层是**重新设计**的，样式名全部另起，
     避免一动就波及 55 个页面。

   约定：
     - 只依赖 learn-theme.css 的 body / .wrap / .btn 这些基础件；
     - 移动优先，>=900px 才做桌面增强；
     - 颜色一律用变量，不在类里写死色值。
   ========================================================= */

:root{
  /* 外壳层新增的令牌（不改动 learn-theme.css 里已有的） */
  --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:22px;
  --fs-xs:.74rem; --fs-sm:.82rem; --fs-md:.92rem; --fs-lg:1.06rem; --fs-xl:1.32rem;
  --sh-1:0 1px 2px rgba(15,23,42,.05);
  --sh-2:0 1px 2px rgba(15,23,42,.05),0 10px 26px -14px rgba(15,23,42,.22);
  --sh-3:0 12px 34px -16px rgba(37,99,235,.45);
  --bnav-h:60px;
}

/* 底部有固定导航时，正文要留出等于导航高度的空白，否则最后一行会被盖住 */
body.has-bnav{ padding-bottom:calc(var(--bnav-h) + env(safe-area-inset-bottom,0px) + 10px); }

/* ---------- 顶部状态条（取代原来的蓝色大区块） ---------- */
.appbar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:10px 14px; box-shadow:var(--sh-1);
}
.appbar .who{display:flex;align-items:center;gap:9px;min-width:0;}
.appbar .avatar{
  width:32px;height:32px;border-radius:99px;flex:none;
  background:linear-gradient(135deg,#2563eb,#60a5fa);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem;
}
.appbar .nm{font-weight:700;font-size:var(--fs-md);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.appbar .nm small{display:block;font-weight:500;color:var(--muted);font-size:var(--fs-xs);}
.appbar .spacer{margin-left:auto;}
.appbar .stat{
  display:flex;align-items:baseline;gap:4px;font-size:var(--fs-xs);color:var(--muted);
  background:#f8fafc;border:1px solid var(--line);border-radius:99px;padding:4px 11px;white-space:nowrap;
}
.appbar .stat b{font-size:var(--fs-md);color:var(--ink);}
.appbar .minibtn{
  border:1px solid var(--line);background:#fff;border-radius:99px;padding:5px 12px;
  font:inherit;font-size:var(--fs-xs);font-weight:600;color:#334155;cursor:pointer;
}
.appbar .minibtn:hover{border-color:#bfdbfe;background:var(--brand-soft);}

/* ---------- 行动卡改版：左内容 + 右「今日目标环」 ---------- */
.act.split{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;}
.act .acts .go{margin-top:14px;}
.act .acts .alt{margin-left:12px;margin-top:14px;}
.act-side{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:112px;}
.act .ring{
  width:82px;height:82px;border-radius:50%;display:grid;place-items:center;
  box-shadow:0 6px 16px -8px rgba(15,23,42,.55);
}
.act .ring .rin{
  width:64px;height:64px;border-radius:50%;background:#1e40af;
  display:flex;align-items:center;justify-content:center;gap:2px;color:#fff;
}
.act .ring .rin b{font-size:1.2rem;line-height:1;}
.act .ring .rin i{font-style:normal;font-size:.7rem;opacity:.8;align-self:flex-end;padding-bottom:3px;}
.act .side-k{font-size:var(--fs-xs);font-weight:700;letter-spacing:.02em;}
.act .side-note{font-size:.68rem;opacity:.88;text-align:center;line-height:1.55;max-width:150px;}
@media (max-width:640px){
  .act.split{grid-template-columns:1fr;}
  .act-side{flex-direction:row;justify-content:flex-start;gap:14px;min-width:0;}
  .act .side-note{text-align:left;max-width:none;}
}
/* 概览里可点的统计格 */
.sc.link{cursor:pointer;transition:.15s;}
.sc.link:hover{border-color:#93c5fd;background:var(--brand-soft);transform:translateY(-1px);}
/* 本学期面板的年级快捷切换条 */
#termChips{margin-bottom:11px;}
#termChips .gc{padding:5px 12px;min-height:34px;font-size:var(--fs-xs);border-radius:99px;}

/* ---------- 行动卡（今天做什么） ---------- */
.act{
  margin-top:14px; border-radius:var(--r-xl); padding:18px 18px 16px; color:#fff;
  background:linear-gradient(125deg,#1d4ed8,#2563eb 48%,#4f46e5);
  box-shadow:var(--sh-3);
}
.act .kicker{font-size:var(--fs-xs);opacity:.85;letter-spacing:.06em;font-weight:700;}
.act h1{font-size:var(--fs-xl);margin-top:7px;line-height:1.4;}
.act .meta{font-size:var(--fs-sm);opacity:.9;margin-top:5px;display:flex;gap:8px;flex-wrap:wrap;}
.act .meta i{font-style:normal;background:rgba(255,255,255,.18);border-radius:99px;padding:1px 9px;}
.act .go{
  display:inline-flex;align-items:center;gap:7px;margin-top:14px;
  background:#fff;color:#1d4ed8;border:0;border-radius:var(--r-md);
  padding:11px 20px;font:inherit;font-size:var(--fs-md);font-weight:700;cursor:pointer;
  text-decoration:none;box-shadow:0 6px 18px -8px rgba(15,23,42,.5);
}
.act .go:hover{transform:translateY(-1px);}
.act .alt{
  display:inline-block;margin-left:12px;margin-top:14px;color:#fff;font-size:var(--fs-sm);
  font-weight:600;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.5);
}
.act.flat{
  background:#fff;color:var(--ink);box-shadow:var(--sh-1);border:1px solid var(--line);
}
.act.flat .kicker{color:var(--brand);}
.act.flat .go{background:var(--brand);color:#fff;}
.act.flat .alt{color:var(--brand);border-bottom-color:#bfdbfe;}

/* ---------- 面板 ---------- */
.panel{
  margin-top:16px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:15px 16px 16px;
}
.panel > .ph{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-bottom:11px;}
.panel > .ph h2{font-size:var(--fs-lg);display:flex;align-items:center;gap:8px;}
.panel > .ph .dot{width:7px;height:7px;border-radius:99px;background:var(--brand);}
.panel > .ph small{font-weight:400;color:var(--muted);font-size:var(--fs-xs);}
.panel > .ph .more{margin-left:auto;font-size:var(--fs-xs);font-weight:600;color:var(--brand);text-decoration:none;}
.panel .hint{font-size:var(--fs-sm);color:var(--muted);margin-bottom:11px;line-height:1.8;}
.panel .hint b{color:var(--ink);}

/* ---------- 进度行（本学期按学科） ---------- */
.prow{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:11px;
  padding:9px 0;border-bottom:1px dashed var(--line);
}
.prow:last-child{border-bottom:0;}
.prow .sname{font-size:var(--fs-md);font-weight:600;min-width:4.4em;}
.prow .track{height:8px;background:#eef2f7;border-radius:99px;overflow:hidden;min-width:80px;}
.prow .track i{display:block;height:100%;width:0;background:linear-gradient(90deg,#3b82f6,#22c55e);transition:width .4s;}
.prow .track i.due{background:linear-gradient(90deg,#f59e0b,#dc2626);}
.prow .num{font-size:var(--fs-xs);color:var(--muted);white-space:nowrap;}
.prow .num b{color:var(--ink);font-size:var(--fs-md);}

/* ---------- 学科卡（年级页） ---------- */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;}
.pcard{
  display:block;position:relative;overflow:hidden;text-decoration:none;color:inherit;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:14px 15px;box-shadow:var(--sh-1);transition:.16s;
}
.pcard:hover{transform:translateY(-2px);border-color:#bfdbfe;box-shadow:var(--sh-3);}
.pcard .tag{
  position:absolute;right:0;top:0;font-size:.68rem;font-weight:700;padding:3px 11px;
  border-bottom-left-radius:11px;background:var(--brand-soft);color:var(--brand);
}
.pcard h3{font-size:var(--fs-lg);}
.pcard .tp{font-size:var(--fs-xs);color:var(--muted);margin-top:3px;line-height:1.75;}
.pcard .track{height:7px;background:#eef2f7;border-radius:99px;overflow:hidden;margin-top:10px;}
.pcard .track i{display:block;height:100%;width:0;background:linear-gradient(90deg,#60a5fa,#22c55e);transition:width .4s;}
.pcard .meta{display:flex;justify-content:space-between;gap:8px;font-size:var(--fs-xs);color:var(--muted);margin-top:6px;}
.pcard .meta .due{color:#b45309;font-weight:700;}

/* ---------- 横排 chips（年级切换） ---------- */
.chiprow{display:flex;gap:8px;overflow-x:auto;padding:2px 0 6px;-webkit-overflow-scrolling:touch;}
.chiprow::-webkit-scrollbar{height:4px;}
.chiprow::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:99px;}
.gc{
  flex:none;border:1px solid var(--line);background:#fff;border-radius:99px;padding:7px 15px;
  font:inherit;font-size:var(--fs-sm);font-weight:700;color:#334155;cursor:pointer;white-space:nowrap;
}
.gc:hover{border-color:#bfdbfe;background:var(--brand-soft);}
.gc.on{background:var(--brand);border-color:var(--brand);color:#fff;}
.gc small{font-weight:600;opacity:.72;margin-left:5px;font-size:var(--fs-xs);}
.stagelabel{font-size:var(--fs-xs);font-weight:700;color:var(--muted);margin:12px 0 2px;}

/* ---------- 工具方块（学科页用，本层先定义好） ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:11px;}
.tile{
  display:block;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-md);padding:13px 14px;transition:.16s;text-align:left;font:inherit;cursor:pointer;
}
.tile:hover{transform:translateY(-2px);border-color:#bfdbfe;box-shadow:var(--sh-2);}
.tile .tt{display:flex;align-items:center;gap:7px;font-size:var(--fs-md);font-weight:700;}
.tile .tt .ic{width:22px;height:22px;flex:none;color:var(--brand);}
.tile .td{font-size:var(--fs-xs);color:var(--muted);margin-top:4px;line-height:1.7;}
.tile .badge{
  display:inline-block;margin-top:7px;font-size:var(--fs-xs);font-weight:700;
  background:var(--brand-soft);color:var(--brand);border-radius:99px;padding:2px 9px;
}
.tile .badge.warn{background:var(--warn-soft);color:#b45309;}

/* ---------- 底部固定导航 ---------- */
.bnav{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:flex;align-items:stretch;
  background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom,0px);
  box-shadow:0 -6px 22px -14px rgba(15,23,42,.4);
}
.bnav a{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  height:var(--bnav-h);text-decoration:none;color:var(--muted);
  font-size:var(--fs-xs);font-weight:600;transition:.14s;
}
.bnav a .ic{width:23px;height:23px;}
.bnav a.on{color:var(--brand);}
.bnav a.on .ic{transform:translateY(-1px);}
.bnav a:active{background:var(--brand-soft);}
.bnav .dotbadge{
  position:absolute;transform:translate(13px,-15px);
  background:#dc2626;color:#fff;font-size:.62rem;font-weight:700;
  border-radius:99px;padding:0 5px;min-width:15px;text-align:center;line-height:15px;
}

/* ---------- 列表（错题本 / 我的） ---------- */
.rowlist{display:flex;flex-direction:column;gap:10px;}
.item{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px;box-shadow:var(--sh-1);
}
.item .ih{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:var(--fs-xs);color:var(--muted);}
.item .ih .from{font-weight:700;color:var(--brand);text-decoration:none;}
.item .iq{font-size:var(--fs-md);line-height:1.9;margin-top:6px;}
.item .ia{font-size:var(--fs-sm);line-height:1.85;margin-top:6px;color:#15803d;background:var(--ok-soft);
  border:1px solid #bbf7d0;border-radius:var(--r-sm);padding:8px 11px;}
.item .ia b{color:#166534;}
.item .if{display:flex;gap:9px;align-items:center;margin-top:9px;flex-wrap:wrap;}
.item .n{font-size:var(--fs-xs);color:var(--bad);background:var(--bad-soft);border-radius:99px;padding:2px 9px;font-weight:700;}
.muted{color:var(--muted);}
.empty{
  text-align:center;padding:38px 18px;color:var(--muted);font-size:var(--fs-sm);line-height:2;
  background:#fff;border:1px dashed var(--line);border-radius:var(--r-lg);
}
.empty b{display:block;color:var(--ink);font-size:var(--fs-md);margin-bottom:6px;}

/* ---------- 折叠的完整目录 ---------- */
.catbox{margin-top:16px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);}
.catbox > summary{
  cursor:pointer;list-style:none;padding:14px 16px;font-size:var(--fs-md);font-weight:700;
  display:flex;align-items:center;gap:9px;
}
.catbox > summary::-webkit-details-marker{display:none;}
.catbox > summary::after{content:"展开 ▾";margin-left:auto;font-size:var(--fs-xs);font-weight:600;color:var(--brand);}
.catbox[open] > summary::after{content:"收起 ▴";}
.catbox > summary small{font-weight:400;color:var(--muted);font-size:var(--fs-xs);}
.catbox .inner{padding:0 16px 16px;}

/* 静态目录里的分区标题（供 .sec / .h2row / a.card 沿用，保证无 JS 时也可读） */
.catbox .h2row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:20px 0 10px;}
.catbox .h2row:first-child{margin-top:6px;}
.catbox .h2row h2{font-size:var(--fs-lg);}
.catbox .h2row small{color:var(--muted);font-weight:400;font-size:var(--fs-xs);}

/* ---------- 骨架：>=900px 的桌面增强 ---------- */
@media(min-width:900px){
  .bnav{
    position:sticky;top:0;bottom:auto;border-top:0;border-bottom:1px solid var(--line);
    border-radius:var(--r-lg);margin-top:14px;box-shadow:var(--sh-1);
    backdrop-filter:none;background:#fff;
  }
  .bnav a{height:48px;flex-direction:row;gap:8px;font-size:var(--fs-md);}
  .bnav a .ic{width:19px;height:19px;}
  .bnav .dotbadge{transform:translate(8px,-12px);}
  body.has-bnav{padding-bottom:20px;}
  .wrap{padding-bottom:40px;}
  .twocol{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:16px;align-items:start;}
  .twocol > *{margin-top:0;}
  .appbar{margin-top:0;}
  .act h1{font-size:1.5rem;}
}

/* =========================================================
   折叠目录里的静态卡片（build.js 生成的 a.card 复用同一套）
   —— 这些卡片同时承担两个角色：JS 正常时是年级页的替身，
      禁用 JS 时是唯一的课程入口，所以必须自带足量的可读信息：
      学科名 · 内容范围 · 教材版本 · 章节 · 知识点数 · 进度。
   ========================================================= */
.catbox .sec{margin-top:16px;}
.catbox .sec:first-of-type{margin-top:4px;}
.catbox .h2row .verline{margin-left:auto;font-size:var(--fs-xs);color:var(--muted);}
.catbox .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(244px,1fr));gap:11px;}
.catbox a.card{
  display:block;position:relative;overflow:hidden;text-decoration:none;color:inherit;
  padding:13px 15px 14px;transition:.16s;
}
.catbox a.card:hover{transform:translateY(-2px);border-color:#bfdbfe;box-shadow:var(--sh-3);}
.catbox a.card .tag{
  position:absolute;right:0;top:0;font-size:.68rem;font-weight:700;padding:3px 11px;
  border-bottom-left-radius:11px;background:var(--brand-soft);color:var(--brand);
}
.catbox a.card h3{font-size:var(--fs-md);}
.catbox a.card .sub{font-size:var(--fs-xs);color:var(--muted);margin-top:3px;line-height:1.7;}
.catbox a.card .ver{font-size:var(--fs-xs);color:#7c3aed;margin-top:6px;line-height:1.7;}
.catbox a.card .chap{font-size:var(--fs-xs);color:var(--muted);margin-top:4px;line-height:1.7;}
.catbox a.card .chap b{color:var(--ink);font-weight:600;}
.catbox a.card .bar{height:7px;background:#eef2f7;border-radius:99px;overflow:hidden;margin-top:9px;}
.catbox a.card .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#60a5fa,#22c55e);transition:width .4s;}
.catbox a.card .meta{display:flex;justify-content:space-between;gap:8px;font-size:var(--fs-xs);color:var(--muted);margin-top:6px;}
.catbox a.card.soon{opacity:.62;background:#fbfcfe;cursor:default;}

/* 折叠块里的说明文字（原来首页的 .gnote） */
.catbox .gnote{
  margin-top:12px;padding:11px 13px;background:#f8fafc;border:1px solid var(--line);
  border-radius:var(--r-md);font-size:var(--fs-sm);color:var(--muted);line-height:1.95;
}
.catbox .gnote b{color:var(--ink);}

/* ---------- 今日推荐的卡片（沿用 pcard 的手感，尺寸更紧凑） ---------- */
.pc{
  display:block;position:relative;overflow:hidden;text-decoration:none;color:inherit;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  padding:12px 14px;transition:.16s;box-shadow:var(--sh-1);
}
.pc:hover{transform:translateY(-2px);border-color:#bfdbfe;box-shadow:var(--sh-3);}
.pc .tag{
  display:inline-block;font-size:var(--fs-xs);font-weight:700;border-radius:99px;padding:2px 10px;
  background:#f1f5f9;color:#475569;
}
.pc .tag.due{background:var(--bad-soft);color:#b91c1c;}
.pc .tag.weak{background:var(--warn-soft);color:#b45309;}
.pc .tag.fresh{background:var(--brand-soft);color:#1d4ed8;}
.pc .tag.here{background:var(--ok-soft);color:#047857;}
.pc h3{font-size:var(--fs-md);margin-top:8px;line-height:1.5;}
.pc small{display:block;font-size:var(--fs-xs);color:var(--muted);margin-top:3px;line-height:1.7;}
.pc .meta{display:flex;justify-content:space-between;gap:8px;font-size:var(--fs-xs);color:var(--muted);margin-top:9px;}

/* ---------- 学习概况：横向滚动的数字条 ----------
   原来是两列网格 + 7 个条目（奇数），必然剩一个落单；
   改成横排滚动，条目数是奇数还是偶数都不会再破版。 */
.statstrip{
  display:flex;gap:9px;overflow-x:auto;padding:2px 0 8px;-webkit-overflow-scrolling:touch;
}
.statstrip::-webkit-scrollbar{height:4px;}
.statstrip::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:99px;}
.statstrip .sc{
  flex:1 0 108px;background:#f8fafc;border:1px solid var(--line);border-radius:var(--r-md);
  padding:9px 12px;min-width:108px;
}
.statstrip .sc b{display:block;font-size:1.24rem;line-height:1.3;}
.statstrip .sc span{font-size:var(--fs-xs);color:var(--muted);display:block;margin-top:1px;}
.statstrip .sc i{font-style:normal;font-weight:700;color:var(--ink);}
.stripline{font-size:var(--fs-sm);color:var(--muted);line-height:1.9;margin-top:2px;}
.stripline i{font-style:normal;font-weight:700;color:var(--ink);}

/* ---------- 页脚 ---------- */
.pagefoot{
  margin-top:20px;padding-top:16px;border-top:1px solid var(--line);
  font-size:var(--fs-sm);color:var(--muted);line-height:1.95;
}
.pagefoot .footrow{display:flex;gap:9px;flex-wrap:wrap;margin-top:11px;}
.pagefoot .footnote{margin-top:9px;font-size:var(--fs-xs);color:#94a3b8;}

/* ---------- 年级页：章节（单元）清单 ---------- */
.chaps{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.chaps span,
.chaps a{
  font-size:var(--fs-xs);background:#f8fafc;border:1px solid var(--line);
  border-radius:99px;padding:2px 10px;color:#475569;text-decoration:none;
}
.chaps a:hover{background:var(--brand-soft);border-color:#bfdbfe;color:var(--brand);}
.chaps span.on{background:var(--brand-soft);border-color:#bfdbfe;color:var(--brand);font-weight:700;}
.chaps .more{background:transparent;border-style:dashed;color:var(--muted);}
.verline2{font-size:var(--fs-xs);color:var(--muted);margin-top:5px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;line-height:1.9;}
.verline2 b{color:var(--ink);}
.verline2 .pill{background:#f5f3ff;border:1px solid #ddd6fe;border-radius:99px;padding:2px 10px;font-weight:600;color:#6d28d9;}

/* ---------- 列表条目的补充件（年级页 / 错题本 / 我的 共用） ---------- */
.item .ih .sp{margin-left:auto;}
.item h3.t{font-size:var(--fs-lg);margin-top:7px;line-height:1.5;}
.item h3.t a{color:inherit;text-decoration:none;}
.item h3.t a:hover{color:var(--brand);}
.item .tp{font-size:var(--fs-sm);color:var(--muted);margin-top:4px;line-height:1.75;}
.item .verpill{
  font-size:var(--fs-xs);font-weight:600;color:#6d28d9;background:#f5f3ff;
  border:1px solid #ddd6fe;border-radius:99px;padding:2px 10px;
}
.item .track{height:8px;background:#eef2f7;border-radius:99px;overflow:hidden;margin-top:10px;}
.item .track i{display:block;height:100%;width:0;background:linear-gradient(90deg,#60a5fa,#22c55e);transition:width .4s;}
.item .meta{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:var(--fs-xs);color:var(--muted);margin-top:6px;}
.item .actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:11px;}
.item .actions .btn{font-size:var(--fs-sm);padding:7px 14px;}
.item .steps{margin:9px 0 0 18px;font-size:var(--fs-sm);color:#334155;line-height:1.95;}
.item .tip{
  margin-top:8px;font-size:var(--fs-sm);color:#b45309;background:var(--warn-soft);
  border:1px solid #fde68a;border-radius:var(--r-sm);padding:7px 11px;line-height:1.85;
}
.subhead{font-size:var(--fs-xs);font-weight:700;color:var(--muted);margin:14px 0 2px;}
.prowlist{margin-top:4px;}
.footnote{font-size:var(--fs-xs);line-height:1.9;}
.actions{display:flex;gap:9px;flex-wrap:wrap;}
.gselect{display:flex;flex-direction:column;}

/* ---------- 云端同步（可选功能，目前只在「我的」页出现） ----------
   这一块与全站风格的两点不同，都是有原因的：
     1. 它是**唯一需要联网**的功能，所以视觉上刻意「收着」——
        用虚线边框的提示条说明环境限制，而不是弹窗报错，避免孩子误以为页面坏了。
     2. 它要用户输入邮箱和密码，所以输入框是本文件里第一处表单样式：
        字号跟正文一致（手机端小于 16px 会触发 iOS 自动放大），触控高度照抄 .btn 的 44px 底线。 */
.cform{display:flex;flex-direction:column;gap:11px;margin-top:12px;}
.cform label{display:flex;flex-direction:column;gap:5px;font-size:var(--fs-xs);font-weight:700;color:var(--muted);}
.cform input{
  font:inherit;font-weight:400;font-size:1rem;color:var(--ink);
  padding:11px 12px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:#fff;min-height:44px;
}
.cform input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft);}
.cform input::placeholder{color:#a3adbb;font-size:var(--fs-sm);}
.cform .row2{display:flex;gap:8px;align-items:flex-end;}
.cform .row2 label{flex:1;min-width:0;}
.cform .row2 .btn{flex:none;white-space:nowrap;}
.codehint{font-size:var(--fs-xs);color:var(--muted);line-height:1.9;}
.cserver{
  font-size:var(--fs-xs);color:#6d28d9;background:#f5f3ff;border:1px dashed #ddd6fe;
  border-radius:var(--r-sm);padding:9px 12px;line-height:1.95;word-break:break-all;
  -webkit-user-select:all;user-select:all;
}
.cdiff{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px;}
@media (max-width:520px){ .cdiff{grid-template-columns:1fr;} }
.cdiff .col{border:1px solid var(--line);border-radius:var(--r-md);padding:10px 12px;background:#fbfcfe;}
.cdiff .col h4{font-size:var(--fs-sm);margin-bottom:6px;display:flex;align-items:center;gap:6px;}
.cdiff .col h4 .chip{font-size:.66rem;padding:2px 8px;}
.cdiff .col .kv{display:flex;justify-content:space-between;gap:8px;font-size:var(--fs-xs);color:var(--muted);padding:3px 0;line-height:1.85;}
.cdiff .col .kv b{color:var(--ink);font-size:var(--fs-sm);font-weight:700;}
.cmsg{font-size:var(--fs-sm);line-height:1.85;border-radius:var(--r-sm);padding:9px 12px;margin-top:10px;}
.cmsg:empty{display:none;}
.cmsg.ok{background:var(--ok-soft);color:#166534;border:1px solid #bbf7d0;}
.cmsg.bad{background:var(--bad-soft);color:#991b1b;border:1px solid #fecaca;}
.cmsg.info{background:#f8fafc;color:#334155;border:1px solid var(--line);}
.cmsg.warn{background:var(--warn-soft);color:#92400e;border:1px solid #fde68a;}
.cmsg b{color:inherit;}

/* =========================================================
   听写 · 跟读（dictation.html）
   ------------------------------------------------------------------
   这一页只有一件事：把词读给孩子听。所以版面按「一个词、一个键」来排——
   词要大到坐远也看得清（手机横放在桌上也能读），播放键独占一行且够高，
   中文释义放在发音键**下面**：先听、后对意思，顺序反了孩子会先看中文再听音，
   那就成了认字不是听音。
   ========================================================= */
.dlcard{text-align:center;padding:4px 2px 2px;}
.dlprog{font-size:var(--fs-sm);color:var(--muted);line-height:1.8;}
.dlprog b{color:var(--ink);font-size:var(--fs-md);}
.dlprog .dlok{color:#15803d;font-weight:700;}
.dlprog .dlbad{color:#b91c1c;font-weight:700;}

/* 大字英文：clamp 的下限照顾手机竖屏，上限避免长句撑破桌面版 */
.dlword{
  font-size:clamp(2rem,10.5vw,3.2rem);
  font-weight:800;line-height:1.3;letter-spacing:.005em;
  margin:22px 0 20px;word-break:break-word;
}
.dlsay{
  display:block;width:100%;max-width:520px;margin:0 auto;
  min-height:64px;padding:14px 18px;
  font-size:var(--fs-lg);font-weight:800;font-family:inherit;
  border:0;border-radius:var(--r-lg);cursor:pointer;color:#fff;
  background:linear-gradient(135deg,#3b82f6,#22c55e);
  box-shadow:0 12px 28px -14px rgba(37,99,235,.65);
  transition:.16s;
}
.dlsay:hover{transform:translateY(-1px);box-shadow:0 16px 32px -14px rgba(37,99,235,.7);}
.dlsay:active{transform:translateY(1px);}
.dlzh{font-size:var(--fs-lg);color:var(--muted);margin-top:15px;line-height:1.75;}
.dlask{font-size:var(--fs-sm);color:var(--muted);margin-top:15px;line-height:1.85;}
.dlfld{
  display:block;width:100%;max-width:520px;margin:16px auto 0;
  min-height:58px;padding:11px 15px;
  font-size:1.25rem;font-family:inherit;text-align:center;
  border:2px solid var(--line);border-radius:var(--r-md);
  background:#fff;color:var(--ink);
}
.dlfld:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-soft);}
.dlres{min-height:1.9em;margin-top:13px;font-size:var(--fs-md);line-height:1.85;word-break:break-word;}
.dlres.ok{color:#15803d;}
.dlres.bad{color:#b91c1c;}
.dlres b{font-weight:800;font-size:1.05em;}
.dlrow{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px;}
/* 触控目标：拇指点在桌上/手上时，48px 以下很容易点偏 */
.dlrow .btn{min-height:52px;padding:12px 18px;font-size:var(--fs-md);}
.dlrow .btn.primary{min-width:140px;}

/* ---- 朗读声音（家长偶尔设一次，藏在「怎么练」面板底下） ----
   语音名普遍很长（Microsoft Xiaoxiao Online (Natural) - Chinese (Simplified)），
   所以这一块刻意比正文小一号、颜色压低：它是给家长看的设备清单，
   不该在孩子点发音键时抢注意力。 */
.voiceset{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line);}
.voiceset>#btnVoice{width:100%;}
.voiceset>#btnVoice #voiceNow{color:var(--muted);font-weight:600;}
.dlsel{
  display:block;width:100%;margin-top:10px;
  min-height:52px;padding:10px 12px;
  font-size:var(--fs-sm);font-family:inherit;
  border:1px solid var(--line);border-radius:var(--r-md);
  background:#fff;color:var(--ink);
}
.dlsel:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-soft);}
.dlsel:disabled{color:var(--muted);background:var(--card);}
.voiceset .dlrow{margin-top:10px;justify-content:flex-start;}
.voiceset .dlrow .btn{min-height:46px;padding:10px 14px;font-size:var(--fs-sm);}