/* ============================================================
   RaiseMeTop — Simplified learner flow (/start)
   Fully self-contained. No theme.css, no i18n.js, no FA, no CDN.
   Inherits the marketing site's indigo design tokens by value.
   No single-side border emphasis anywhere.
   ============================================================ */
:root{
  --pri:#6366f1; --pri-dark:#4f46e5; --pri-soft:#eef2ff;
  --cta:#4f46e5; --cta-hover:#4338ca;
  --t1:#CDD3FE; --t1-txt:#23265E; --t1-ico:#4F46E5; --t1-hover:#B9C2FD;
  --t2:#C6EEDC; --t2-txt:#0E4A38; --t2-ico:#059669; --t2-hover:#AEE3CC;
  --t3:#FAE6BC; --t3-txt:#6B4A12; --t3-ico:#D97706; --t3-hover:#F5D89E;
  --bg:#f6f7fb; --surface:#fff; --line:#e8eaf2; --line-2:#e0e3ee;
  --text:#1f2437; --body:#4a5168; --muted:#7b8299; --faint:#a3a9bd;
  --r-lg:14px; --r-xl:20px;
  --font:"Inter","Segoe UI",-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body.sm-page{
  background:var(--bg);color:var(--body);font-family:var(--font);
  font-size:15px;line-height:1.65;-webkit-font-smoothing:antialiased;
  min-height:100vh;
}
h1,h2,h3,h4,p{margin:0}
a{text-decoration:none;color:inherit}
button,input,select{font-family:inherit}
svg{display:block}
[hidden]{display:none !important}

/* ---------- 顶栏：面包屑路径 + 模块快速链接 ---------- */
.sm-top{
  display:flex;align-items:center;gap:26px;flex-wrap:wrap;
  width:100%;margin:0 auto;
  /* 与内容列同一套留白：广告位占掉侧边时，顶栏内容跟着让位，左边缘才对齐 */
  max-width:calc(1124px + var(--sm-side-l) + var(--sm-side-r));
  padding:20px var(--sm-side-r) 14px var(--sm-side-l);
  border-bottom:1px solid var(--line);
}
.sm-brand{display:inline-flex;align-items:center;gap:11px;flex:none}
.sm-brand-mark{width:36px;height:36px;flex:none}
.sm-brand-text{font-size:1.24rem;font-weight:700;letter-spacing:-.02em;color:var(--text);line-height:1}
.sm-brand-text span{color:var(--pri-dark)}

.sm-crumbs{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:15px;color:var(--muted);min-width:0}
.sm-crumbs a{color:var(--muted);min-height:36px;display:inline-flex;align-items:center;border-radius:8px;padding:0 2px;transition:color .18s ease}
.sm-crumbs a:hover{color:var(--pri-dark)}
.sm-crumbs a:focus-visible{outline:3px solid var(--pri);outline-offset:2px}
.sm-sep{color:var(--faint);font-size:17px;line-height:1}
.sm-crumb-now{
  color:var(--text);font-weight:600;background:var(--pri-soft);
  border:1px solid #dfe3ff;border-radius:999px;padding:5px 14px;line-height:1.4;
}
.sm-crumb-past{color:var(--body);font-weight:500}

/* ---------- 顶栏：账号菜单（右上角） ---------- */
.sm-user{position:relative;margin-left:auto;flex:none}
.sm-user-btn{
  display:inline-flex;align-items:center;gap:9px;max-width:270px;
  min-height:40px;padding:5px 13px 5px 6px;border-radius:999px;
  background:var(--surface);border:1px solid var(--line-2);color:var(--text);
  font-size:14px;font-weight:600;cursor:pointer;
  transition:border-color .18s ease,background .18s ease,color .18s ease;
}
.sm-user-btn:hover{border-color:var(--pri);color:var(--pri-dark)}
.sm-user-btn:focus-visible{outline:3px solid var(--pri);outline-offset:2px}
.sm-user-btn[aria-expanded="true"]{border-color:var(--pri);background:var(--pri-soft);color:var(--pri-dark)}
.sm-user-ava{
  width:28px;height:28px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--pri-soft);color:var(--pri-dark);font-size:13px;font-weight:700;
}
.sm-user-btn[aria-expanded="true"] .sm-user-ava{background:#fff}
.sm-user-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sm-user-caret{
  width:12px;height:12px;flex:none;stroke:currentColor;fill:none;
  stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .18s ease;
}
.sm-user-btn[aria-expanded="true"] .sm-user-caret{transform:rotate(180deg)}

.sm-user-menu{
  position:absolute;right:0;top:calc(100% + 10px);z-index:70;
  min-width:232px;max-width:300px;background:var(--surface);
  border:1px solid var(--line);border-radius:14px;
  box-shadow:0 16px 40px rgba(15,20,40,.16);padding:8px;
}
.sm-user-meta{padding:9px 12px 12px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.sm-user-meta .n{font-size:15px;font-weight:600;color:var(--text);word-break:break-all;line-height:1.4}
.sm-user-meta .r{font-size:13px;color:var(--faint);margin-top:3px;line-height:1.5}
.sm-user-item{
  display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:0 12px;
  border:0;border-radius:9px;background:none;color:var(--body);
  font-size:15px;font-weight:500;text-align:left;cursor:pointer;
  transition:background .16s ease,color .16s ease;
}
.sm-user-item:hover{background:var(--pri-soft);color:var(--pri-dark)}
.sm-user-item:focus-visible{outline:3px solid var(--pri);outline-offset:-2px}
.sm-user-item svg{
  width:17px;height:17px;flex:none;stroke:currentColor;fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
.sm-user-item.is-danger:hover{background:#fef2f2;color:#b91c1c}

.sm-pw-err{
  font-size:15px;color:#b91c1c;background:#fef2f2;border:1px solid #fecaca;
  border-radius:10px;padding:10px 14px;margin:0 0 18px;line-height:1.55;
}

/* ---------- 主区 ---------- */
.sm-main{max-width:1180px;margin:0 auto;padding:0 28px 90px}

/* ---------- 01 大色块菜单 ---------- */
.sm-hero{text-align:center;padding:44px 20px 40px}
.sm-hero h1{font-size:clamp(28px,3.4vw,36px);color:var(--text);font-weight:700;letter-spacing:-.01em;line-height:1.3}
.sm-hero p{font-size:20px;color:var(--body);margin-top:14px}

.sm-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.sm-tile{
  border-radius:var(--r-xl);padding:32px;min-height:280px;
  display:flex;flex-direction:column;position:relative;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
  outline-offset:4px;
}
.sm-tile:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(31,36,55,.10)}
.sm-t1{background:var(--t1);color:var(--t1-txt)}
.sm-t2{background:var(--t2);color:var(--t2-txt)}
.sm-t3{background:var(--t3);color:var(--t3-txt)}
.sm-t1:hover{background:var(--t1-hover)}
.sm-t2:hover{background:var(--t2-hover)}
.sm-t3:hover{background:var(--t3-hover)}
.sm-tile:focus-visible{outline:3px solid var(--pri)}
.sm-tile-ico{
  width:64px;height:64px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;margin-bottom:auto;
}
.sm-t1 .sm-tile-ico{background:var(--t1-ico)}
.sm-t2 .sm-tile-ico{background:var(--t2-ico)}
.sm-t3 .sm-tile-ico{background:var(--t3-ico)}
.sm-tile-ico svg{width:32px;height:32px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sm-tile h2{font-size:28px;font-weight:700;color:inherit;margin-top:28px;letter-spacing:-.01em}
.sm-tile p{font-size:18px;color:var(--body);margin-top:10px}
.sm-tile-arrow{
  position:absolute;right:26px;top:30px;font-size:20px;line-height:1;
  color:currentColor;opacity:0;transition:opacity .18s ease;
}
.sm-tile:hover .sm-tile-arrow,.sm-tile:focus-visible .sm-tile-arrow{opacity:.65}
.sm-foot{text-align:center;font-size:16px;color:var(--faint);padding:26px 0 0}

/* ---------- 02 历史列表 ---------- */
.sm-history{padding:22px 0 0}
.sm-pagebar{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:30px;flex-wrap:wrap}
.sm-back{font-size:15px;color:var(--muted);display:inline-flex;align-items:center;min-height:44px;transition:color .18s ease}
.sm-back:hover{color:var(--pri-dark)}
.sm-pagebar h1{font-size:clamp(28px,3vw,32px);color:var(--text);font-weight:650;letter-spacing:-.02em;margin-top:2px}

.sm-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:56px;padding:0 30px;border-radius:999px;font-size:18px;font-weight:600;
  border:1px solid transparent;cursor:pointer;transition:background .18s ease,transform .16s ease,box-shadow .18s ease;
}
.sm-btn svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.sm-btn-pri{background:var(--cta);color:#fff;box-shadow:0 6px 16px rgba(79,70,229,.20)}
.sm-btn-pri:hover:not(:disabled){background:var(--cta-hover);transform:translateY(-1px)}
.sm-btn:disabled,.sm-btn.is-disabled{background:#C7C9D9;color:#fff;cursor:not-allowed;box-shadow:none;pointer-events:none}
.sm-btn:focus-visible{outline:3px solid var(--pri);outline-offset:3px}

.sm-hist-list{display:flex;flex-direction:column;gap:12px}
/* 信息流原生广告位：每 4 条练习后一张，占满列表宽度。
   版式与尺寸复用 is-h 横幅双档（桌面高 90 / ≤767px 高 100），
   这里只用更高特异性放开 max-width，双档规则在上文媒体查询里不动。 */
.sm-native-ad .sm-ad-slot.is-h{max-width:none;width:100%}
.sm-hist-row{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  min-height:88px;padding:20px 24px;display:flex;align-items:center;gap:16px;
  box-shadow:0 2px 8px rgba(31,36,55,.04);transition:transform .18s ease,box-shadow .18s ease;
  cursor:pointer;
}
.sm-hist-row:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(31,36,55,.08)}
.sm-hist-row:focus-visible{outline:3px solid var(--pri);outline-offset:3px}
.sm-hist-ico{
  width:48px;height:48px;border-radius:12px;background:var(--pri-soft);flex:none;
  display:flex;align-items:center;justify-content:center;
}
.sm-hist-ico svg{width:24px;height:24px;stroke:var(--cta);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sm-hist-main{flex:1;min-width:0}
.sm-hist-main .t{font-size:20px;color:var(--text);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sm-hist-main .m{font-size:16px;color:var(--muted);margin-top:5px}
.sm-hist-chev{font-size:24px;color:#B9BFD0;line-height:1;flex:none}

/* ---------- 弹层 ---------- */
.sm-overlay{
  position:fixed;inset:0;z-index:60;background:rgba(238,240,247,.94);
  display:flex;align-items:center;justify-content:center;padding:34px 20px;
  backdrop-filter:blur(2px);
}
.sm-modal{
  width:100%;max-width:560px;max-height:calc(100vh - 60px);overflow-y:auto;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:0 24px 64px rgba(15,20,40,.20);padding:36px 40px 30px;
}
.sm-modal-wide{max-width:720px}
.sm-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:28px}
.sm-modal-head h2{font-size:26px;color:var(--text);font-weight:700}
.sm-hint{font-size:16px;color:var(--body);margin-top:6px}
.sm-x{
  width:44px;height:44px;border-radius:10px;border:1px solid var(--line);
  background:#fff;color:var(--muted);font-size:21px;line-height:1;cursor:pointer;flex:none;
  transition:background .18s ease,color .18s ease;
}
.sm-x:hover{background:var(--pri-soft);color:var(--pri-dark)}

.sm-field{margin-bottom:24px}
.sm-field label{display:block;font-size:17px;color:var(--text);font-weight:600;margin-bottom:10px}
.sm-ctrl{
  width:100%;min-height:56px;border:1px solid var(--line-2);border-radius:10px;
  background:#fff;padding:0 16px;font-size:18px;color:var(--text);
}
.sm-ctrl:focus{outline:none;border-color:var(--pri);box-shadow:0 0 0 3px rgba(99,102,241,.14)}
.sm-ctrl::placeholder{color:#A6ACC0}
select.sm-ctrl{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%237b8299' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 18px center;padding-right:44px;cursor:pointer;
}
.sm-help{font-size:15px;color:var(--faint);margin-top:8px;line-height:1.6}
.sm-auto-note{
  font-size:16px;color:var(--body);background:var(--bg);
  border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin:0 0 24px;
}
.sm-actions{display:flex;gap:12px;justify-content:flex-end;align-items:center}
.sm-actions .sm-btn{min-height:56px}
.sm-actions-end{margin-top:20px}
.sm-btn-link{
  background:none;border:0;color:var(--muted);font-size:17px;min-height:56px;
  padding:0 12px;cursor:pointer;transition:color .18s ease;
}
.sm-btn-link:hover{color:var(--text)}

/* ---------- 04 场景卡 ---------- */
.sm-sc-list{display:flex;flex-direction:column;gap:12px;max-height:340px;overflow-y:auto;margin-bottom:16px;padding-right:4px}
.sm-sc-card{
  border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px;
  position:relative;cursor:pointer;background:#fff;transition:border-color .16s ease,background .16s ease;
}
.sm-sc-card:hover{border-color:var(--pri)}
.sm-sc-card.is-picked{border:2px solid var(--pri);background:var(--pri-soft);padding:17px 19px}
.sm-sc-card .st{font-size:20px;color:var(--text);font-weight:600;padding-right:30px;line-height:1.45}
.sm-sc-card.is-picked .st{color:#3730A3}
.sm-sc-card .sd{font-size:16px;color:var(--body);margin-top:5px;line-height:1.55;padding-right:30px}
.sm-check{
  position:absolute;right:18px;top:20px;width:24px;height:24px;border-radius:50%;
  border:2px solid var(--line);display:flex;align-items:center;justify-content:center;
}
.sm-sc-card.is-picked .sm-check{background:var(--cta);border-color:var(--cta)}
.sm-check svg{width:13px;height:13px;stroke:#fff;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.sm-sc-more{font-size:15px;color:var(--muted);text-align:center;padding:0 0 4px}

/* ---------- 练习页：整页不滚动，滚动只发生在两个标签页面板里 ---------- */
/* 关键：body 带着 .sm-page 的 min-height:100vh。手机浏览器的 100vh 是「地址栏
   收起来」时的大视口，而 100dvh 是当前可见的小视口 —— 两者混用时 body 会被
   min-height 撑到比屏幕更高，面板底部就沉到地址栏后面，句子越多越看不到。
   所以这里必须把 min-height 归零，并把高度同时钉成 100dvh。 */
html{height:100%}
html,body.sm-practice-page{overflow:hidden}
.sm-practice-page{
  display:flex;flex-direction:column;
  height:100vh;height:100dvh;
  min-height:0;max-height:100vh;max-height:100dvh;
}
.sm-practice-page .sm-top{flex:none}
/* 练习页正文列窄一档（924），顶栏跟着收，左边缘才对得上 */
.sm-practice-page .sm-top{max-width:calc(924px + var(--sm-side-l) + var(--sm-side-r))}
.sm-practice-main{
  max-width:980px;flex:1;min-height:0;display:flex;flex-direction:column;
  padding-bottom:16px;overflow:hidden;
}
.sm-practice-head{flex:none;padding:10px 0 12px}
.sm-practice-topline{display:flex;align-items:center;gap:12px;min-width:0}
.sm-practice-head .sm-back{flex:none;min-height:32px;font-size:14px;white-space:nowrap}
.sm-practice-titleline{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-top:2px}
.sm-practice-head h1{font-size:clamp(21px,2.4vw,26px);color:var(--text);font-weight:700;letter-spacing:-.01em;line-height:1.3}
.sm-practice-meta{
  margin-left:auto;flex:0 1 auto;min-width:0;text-align:right;
  font-size:15px;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sm-demo-note{font-size:14px;color:var(--faint);text-align:center;margin-top:12px}

/* ---------- 列表页 / 内容页：整页不滚，滚动只发生在内容区 ----------
   和练习页同一套思路：body 钉死一屏高，内容列自己滚。这样窗口右侧不会出现
   整页滚动条，滚动条只贴在内容列边上。 */
body.sm-shell-page{
  display:flex;flex-direction:column;
  height:100vh;height:100dvh;
  min-height:0;max-height:100vh;max-height:100dvh;
  overflow:hidden;
}
body.sm-shell-page .sm-top{flex:none}
body.sm-shell-page .sm-shell{flex:1;min-height:0;align-items:stretch}
body.sm-shell-page .sm-main{
  flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding-bottom:22px;scrollbar-gutter:stable;
}
body.sm-shell-page .sm-main::-webkit-scrollbar{width:11px}
body.sm-shell-page .sm-main::-webkit-scrollbar-thumb{
  background:#d7dbf0;border-radius:999px;border:4px solid transparent;background-clip:content-box;
}
body.sm-shell-page .sm-main::-webkit-scrollbar-thumb:hover{
  background:#c2c8e8;background-clip:content-box;border:4px solid transparent;
}
body.sm-shell-page .sm-main::-webkit-scrollbar-track{background:transparent}

/* ---------- 广告位预留（暂无广告填充时由激励语录顶上） ---------- */
/* 左右留白是变量：广告位出现时把对应一侧让出 160/120px，顶栏与内容列
   同时吃同一个变量，左边缘永远对齐。 */
/* 底部固定层高度是全局唯一变量：桌面 0 / 固定广告底条 100（广告内容高，分隔线用 inset 阴影、不占高度）/ 竖屏 dock 94（含矮屏，统一 94）。
   body 的 padding-bottom 与 .sm-toast 的 bottom 都只认它，不再各写一套数字。 */
body.sm-page{--sm-side-l:28px;--sm-side-r:28px;--sm-fixed-h:0px}
.sm-shell{position:relative;display:flex;justify-content:center;align-items:flex-start;gap:22px;
  padding:0 var(--sm-side-r) 0 var(--sm-side-l);width:100%}
.sm-shell>.sm-main{flex:1 1 auto;min-width:0;max-width:1124px;margin:0;padding-left:0;padding-right:0}
.sm-practice-page>.sm-shell{flex:1;min-height:0;align-items:stretch}
.sm-practice-page>.sm-shell>.sm-main{max-width:924px;margin:0 auto;padding-bottom:0}

/* 广告位固定在视口侧边，不参与内容排版，也不随内容宽度变化挤压正文 */
.sm-ad-rail{display:none;position:fixed;top:94px;width:160px}
.sm-ad-rail.is-left{left:12px}
.sm-ad-rail.is-right{right:12px}
/* ---------- 广告位：上层广告 / 下层语录（零脚本叠层） ----------
   .sm-ad-fill 保持「零子节点」时，:empty 命中 → display:none → 下层语录露出。
   未来接广告：把广告代码写进 .sm-ad-fill 内部即可，它变非空就自动显示并盖住语录，
   不需要任何 JS 判断或 DOM 替换。 */
.sm-ad-slot{
  position:relative;width:100%;height:600px;overflow:hidden;
  border-radius:12px;background:#f7f8fc;border:1px solid var(--line);
}
.sm-ad-fill{
  position:absolute;inset:0;z-index:2;display:flex;overflow:hidden;
  align-items:center;justify-content:center;background:#fff;
}
.sm-ad-fill:empty{display:none}
.sm-quote{
  position:absolute;inset:0;z-index:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:18px 16px;text-align:center;
}
.sm-quote > p{margin:0}
.sm-quote-en{font-size:14px;line-height:1.55;color:var(--text);font-weight:600;font-style:italic}
.sm-quote-zh{font-size:13.5px;line-height:1.7;color:var(--body)}
.sm-quote-by{font-size:12px;line-height:1.5;color:var(--faint);margin-top:2px}

/* 竖向窄栏（160×600 / 120×600）：字缩小，长句自然换行 */
.sm-ad-slot.is-rail .sm-quote{gap:12px;padding:24px 13px}
.sm-ad-slot.is-rail .sm-quote-en{font-size:13px}
.sm-ad-slot.is-rail .sm-quote-zh{font-size:13px}
.sm-ad-slot.is-rail .sm-quote-by{font-size:11.5px}

/* 菜单下方的横版位：728×90 Leaderboard（桌面/平板），窄屏收成 320×100 */
.sm-ad-h{display:flex;justify-content:center;margin:30px 0 8px}
.sm-ad-slot.is-h{height:90px;max-width:728px}
.sm-ad-slot.is-h .sm-quote{
  display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;
  align-content:center;justify-items:start;gap:3px 20px;padding:10px 22px;text-align:left;
}
.sm-ad-slot.is-h .sm-quote-en{grid-column:1;grid-row:1;font-size:14px}
.sm-ad-slot.is-h .sm-quote-zh{grid-column:1;grid-row:2;font-size:13px}
.sm-ad-slot.is-h .sm-quote-zh:first-child{grid-row:1/span 2;align-self:center;font-size:16px}
.sm-ad-slot.is-h .sm-quote-by{
  grid-column:2;grid-row:1/span 2;align-self:center;font-size:12px;text-align:right;
}
@media (max-width:767px){
  /* /start 菜单页的桌面中部横幅在窄屏让位给底部固定条，避免移动端同时出现两条 */
  .sm-ad-h{display:none}
  .sm-ad-slot.is-h{height:100px;max-width:320px}
  .sm-ad-slot.is-h .sm-quote{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;padding:8px 14px;text-align:center;
  }
  .sm-ad-slot.is-h .sm-quote-en{font-size:12.5px}
  .sm-ad-slot.is-h .sm-quote-zh{font-size:12.5px}
  .sm-ad-slot.is-h .sm-quote-by{font-size:11px}
}
/* 横屏且够宽够高：左右两侧各留一条 160×600（Wide Skyscraper，品牌曝光最常用的竖向尺寸） */
@media (orientation:landscape) and (min-width:1100px) and (min-height:700px){
  body.sm-page.sm-has-rails{--sm-side-l:190px;--sm-side-r:190px}
  .sm-ad-rail.is-left,.sm-ad-rail.is-right{display:block}
}
/* 竖屏（平板竖放 / 竖着的桌面窗口）：只留右侧，宽度不够时用 120×600 省内容宽度 */
@media (orientation:portrait) and (min-width:768px) and (min-height:900px){
  body.sm-page.sm-has-rails{--sm-side-r:160px}
  .sm-ad-rail.is-right{display:block}
}
@media (orientation:portrait) and (min-width:768px) and (max-width:1099px){
  body.sm-page.sm-has-rails{--sm-side-r:148px}
  .sm-ad-rail.is-right{width:120px}
  .sm-ad-dim.is-wide{display:none}
  .sm-ad-dim.is-narrow{display:inline}
}

.sm-player{
  flex:none;display:flex;align-items:center;gap:18px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-xl);
  padding:13px 18px;box-shadow:0 4px 16px rgba(31,36,55,.05);
}
/* 「显示原文」并入播放器后所有断点共用同一 DOM：desktop 一行里它是第 3 个子节点。
   基础层只锁死「开关固定宽度」这一条 —— 新增第 4 子节点的必要处理，不影响基线其它部分。
   901–1100px 区间 body 会被压到约 293px，若 body 仍 flex-wrap:wrap，内部
   now(≈150) + modes(≈225) + gap 14 = 389px 会折成两行、播放器高 +44px；
   故下列三条守卫仅 ≥901px 生效：body 不换行、进度可伸缩且省略号截断、播放方式不伸缩。
   ≤900 保持基线一行四件（约 98.8px），≤680 由文件末尾 dock 块接管；
   min-width:901px 与 ≤900 / ≤680 块互斥，无层叠冲突。守卫圈窄后不再影响 681–900 档。
   不改基础 min-height：那会反覆盖矮屏的 30px 档，造成横屏矮屏回归。 */
.sm-player .sm-text-toggle{flex:none}
@media (min-width:901px){
  .sm-player .sm-player-body{flex:1 1 auto;min-width:0;flex-wrap:nowrap}
  .sm-player .sm-player-now{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sm-player .sm-modes{flex:none;flex-wrap:nowrap}
}
.sm-play{
  width:54px;height:54px;border-radius:50%;flex:none;cursor:pointer;
  background:var(--cta);color:#fff;border:1px solid transparent;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 20px rgba(79,70,229,.24);transition:transform .16s ease,background .18s ease;
}
.sm-play:hover{background:var(--cta-hover);transform:scale(1.04)}
.sm-play:focus-visible{outline:3px solid var(--pri);outline-offset:4px}
.sm-play svg{width:23px;height:23px;fill:#fff;stroke:none}
.sm-play .sm-pause-ico{fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round}
.sm-play .sm-pause-ico,.sm-play.is-playing .sm-play-ico{display:none}
.sm-play.is-playing .sm-pause-ico{display:block}

.sm-player-body{flex:1;min-width:0;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
/* 没有时间轴：每句是独立音频文件，「进度」就是第几句。
   这里只报当前位置 + 选播放方式。空着的时候整行不占位。 */
.sm-player-now{font-size:15px;color:var(--body);font-variant-numeric:tabular-nums}
.sm-player-now:empty{display:none}
.sm-modes{display:flex;gap:7px;flex-wrap:wrap}
.sm-mode{
  display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 13px;
  border:1px solid var(--line-2);border-radius:999px;background:#fff;color:var(--body);
  font-size:15px;cursor:pointer;transition:border-color .16s ease,color .16s ease,background .16s ease;
}
.sm-mode svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sm-mode-lbl.is-short{display:none}
.sm-mode:hover{border-color:var(--pri);color:var(--pri-dark)}
.sm-mode:focus-visible{outline:3px solid var(--pri);outline-offset:2px}
.sm-mode.is-on{background:var(--pri-soft);border-color:var(--pri);color:var(--pri-dark);font-weight:650}

/* 语速：横排，1× 固定排在中间（HTML 顺序 0.75 / 1 / 1.25） */
.sm-player-tools{display:flex;align-items:center;gap:6px;flex:none}
.sm-speed-label{font-size:13px;color:var(--faint);margin-right:1px}
.sm-tool{
  min-height:32px;padding:0 11px;border:1px solid var(--line-2);border-radius:9px;
  background:#fff;color:var(--body);font-size:13px;cursor:pointer;
  font-variant-numeric:tabular-nums;transition:border-color .18s ease,color .18s ease,background .18s ease;
}
.sm-tool:hover{border-color:var(--pri);color:var(--pri-dark)}
.sm-tool:focus-visible{outline:3px solid var(--pri);outline-offset:2px}
.sm-tool.is-on{background:var(--pri-soft);border:1px solid var(--pri);color:var(--pri-dark);font-weight:600}

/* ---------- 练习页：标签页（逐句听 / 练习题） ---------- */
.sm-ptabs{flex:none;display:flex;gap:4px;margin-top:14px;border-bottom:1px solid var(--line)}
.sm-ptab{
  position:relative;display:inline-flex;align-items:center;gap:8px;
  min-height:42px;padding:0 15px;border:0;background:none;color:var(--muted);
  font-size:16px;font-weight:650;cursor:pointer;border-radius:10px 10px 0 0;
  transition:color .16s ease,background .16s ease;
}
.sm-ptab:hover{color:var(--pri-dark);background:var(--pri-soft)}
.sm-ptab:focus-visible{outline:3px solid var(--pri);outline-offset:-2px}
.sm-ptab.is-on{color:var(--pri-dark)}
.sm-ptab.is-on::after{
  content:"";position:absolute;left:11px;right:11px;bottom:-1px;height:3px;
  border-radius:3px 3px 0 0;background:var(--pri);
}
.sm-ptab-n{font-size:13px;font-weight:600;color:var(--faint);font-variant-numeric:tabular-nums}
.sm-ptab.is-on .sm-ptab-n{color:var(--pri-dark)}

.sm-panes{flex:1;min-height:0;display:flex;flex-direction:column;margin-top:12px;overflow:hidden}
.sm-pane{flex:1;min-height:0;display:none;flex-direction:column}
.sm-pane.is-on{display:flex}
.sm-pane:focus-visible{outline:3px solid var(--pri);outline-offset:2px;border-radius:12px}
.sm-pane-bar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-bottom:10px}
.sm-pane-hint{font-size:13px;color:var(--faint)}
/* 每个面板自己滚：整页永远不出现纵向滚动条 */
/* 底部必须留 padding：滚动到最后一屏时，最后一句 / 结果卡片不能贴死面板底边
   （main 的 padding-bottom 在滚动容器外面，管不到滚动内容末尾）。 */
.sm-pane-scroll{
  flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding-right:8px;padding-bottom:24px;scrollbar-gutter:stable;
}
.sm-pane-scroll::-webkit-scrollbar{width:11px}
.sm-pane-scroll::-webkit-scrollbar-thumb{
  background:#d7dbf0;border-radius:999px;border:4px solid transparent;background-clip:content-box;
}
.sm-pane-scroll::-webkit-scrollbar-thumb:hover{background:#c2c8e8;background-clip:content-box;border:4px solid transparent}
.sm-pane-scroll::-webkit-scrollbar-track{background:transparent}

/* ---------- 练习页：逐题作答 ---------- */
.sm-quiz{margin-top:0}
.sm-quiz-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.sm-quiz-count{font-size:16px;color:var(--muted);font-weight:600}
.sm-qdots{display:flex;gap:8px}
.sm-qdot{width:26px;height:8px;border-radius:999px;background:#E2E5F2}
.sm-qdot.is-done{background:#A5AEF5}
.sm-qdot.is-now{background:var(--pri)}

.sm-quiz-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:32px 34px;box-shadow:0 4px 16px rgba(31,36,55,.05)}
.sm-q-title{font-size:23px;color:var(--text);font-weight:650;line-height:1.5;letter-spacing:-.01em}
.sm-opts{display:flex;flex-direction:column;gap:12px;margin-top:24px}
.sm-opt{
  display:flex;align-items:center;gap:16px;text-align:left;width:100%;min-height:62px;
  padding:12px 18px;border:1px solid var(--line-2);border-radius:12px;background:#fff;
  color:var(--text);font-size:18px;cursor:pointer;
  transition:border-color .16s ease,background .16s ease;
}
.sm-opt:hover:not(:disabled){border-color:var(--pri)}
.sm-opt:focus-visible{outline:3px solid var(--pri);outline-offset:2px}
.sm-opt.is-picked{border:2px solid var(--pri);background:var(--pri-soft);padding:11px 17px}
.sm-opt.is-right{border:2px solid #059669;background:#E8F8F1;padding:11px 17px}
.sm-opt.is-wrong{border:2px solid #DC2626;background:#FEF0F0;padding:11px 17px}
.sm-opt:disabled{cursor:default;opacity:1}
.sm-opt-letter{
  width:34px;height:34px;border-radius:9px;background:var(--bg);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;flex:none;font-size:15px;font-weight:700;color:var(--muted);
}
.sm-opt.is-picked .sm-opt-letter{background:var(--cta);border-color:var(--cta);color:#fff}
.sm-opt.is-right .sm-opt-letter{background:#059669;border-color:#059669;color:#fff}
.sm-opt.is-wrong .sm-opt-letter{background:#DC2626;border-color:#DC2626;color:#fff}
.sm-opt-text{line-height:1.45}

.sm-feedback{margin-top:22px;border:1px solid var(--line);border-radius:12px;padding:16px 18px;background:var(--bg);display:flex;flex-direction:column;gap:6px}
.sm-feedback.is-ok{border:1px solid #A7DFC9;background:#EDF9F3}
.sm-feedback.is-no{border:1px solid #F3C9C9;background:#FDF2F2}
.sm-feedback strong{font-size:17px;color:var(--text)}
.sm-fb-skill{font-size:14px;color:var(--pri-dark)}
.sm-fb-why{font-size:16px;color:var(--body);line-height:1.6}
.sm-quiz-actions{display:flex;justify-content:flex-end;margin-top:24px}
.sm-quiz-actions .sm-btn{min-width:180px}

.sm-result{
  margin-top:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:48px 34px;text-align:center;box-shadow:0 4px 16px rgba(31,36,55,.05);
}
.sm-result-score{font-size:56px;font-weight:700;color:var(--pri-dark);letter-spacing:-.03em;line-height:1.2}
.sm-result h2{font-size:26px;color:var(--text);font-weight:700;margin-top:10px}
.sm-result p{font-size:17px;color:var(--body);margin-top:8px}
.sm-result-actions{display:flex;justify-content:center;gap:12px;margin-top:28px;flex-wrap:wrap}
.sm-btn-ghost{background:#fff;color:var(--pri-dark);border:1px solid var(--line-2)}
.sm-btn-ghost:hover{border-color:var(--pri);background:var(--pri-soft)}

/* ---------- 登录 / 注册 ---------- */
.sm-auth-main{max-width:560px;padding-top:40px}
.sm-auth-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:38px 40px 30px;box-shadow:0 8px 26px rgba(31,36,55,.06)}
/* 登录/注册的两个面板用自己的类名，别跟练习页的 .sm-pane（面板切换，默认
   display:none + .is-on 才显示）撞名——撞了以后登录框整块不可见，用户点不到
   输入框。这里不写 display，靠 div 默认 block，[hidden] 仍然生效。 */
.sm-auth-pane .sm-field{margin-bottom:20px}
.sm-auth-intro h1{font-size:28px;color:var(--text);font-weight:700;letter-spacing:-.01em}
.sm-auth-intro p{font-size:16px;color:var(--body);margin-top:10px;line-height:1.6}
.sm-tabs{display:flex;gap:8px;margin:26px 0 24px;border:1px solid var(--line);border-radius:12px;padding:5px;background:var(--bg)}
.sm-tab{
  flex:1;min-height:46px;border:1px solid transparent;border-radius:9px;background:transparent;
  color:var(--muted);font-size:17px;font-weight:600;cursor:pointer;transition:background .18s ease,color .18s ease;
}
.sm-tab:hover{color:var(--text)}
.sm-tab:focus-visible{outline:3px solid var(--pri);outline-offset:2px}
.sm-tab.is-on{background:#fff;border:1px solid var(--line-2);color:var(--pri-dark);box-shadow:0 2px 8px rgba(31,36,55,.06)}
.sm-pane .sm-field{margin-bottom:20px}
.sm-form-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:24px;flex-wrap:wrap}
.sm-checkline{display:inline-flex;align-items:center;gap:9px;font-size:16px;color:var(--body);cursor:pointer}
.sm-checkline input{width:18px;height:18px;accent-color:var(--pri)}
.sm-link-sm{font-size:15px;min-height:40px}
.sm-btn-full{width:100%;min-height:58px}
.sm-auth-foot{text-align:center;font-size:14px;color:var(--faint);margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.sm-auth-back{display:inline-block;margin-top:22px;font-size:16px;color:var(--muted);min-height:44px}
.sm-auth-back:hover{color:var(--pri-dark)}
.sm-auth-back:focus-visible{outline:3px solid var(--pri);outline-offset:3px;border-radius:8px}

/* ---------- 生词本：概览、筛选、列表 ---------- */
.sm-lede{font-size:16px;color:var(--muted);margin-top:8px;max-width:60ch}

.sm-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:26px 0}
.sm-stat{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:16px 20px;display:flex;flex-direction:column;gap:2px;
  box-shadow:0 2px 8px rgba(31,36,55,.04);
}
.sm-stat .n{font-size:26px;font-weight:700;color:var(--text);line-height:1.25;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.sm-stat .l{font-size:14px;color:var(--muted)}
.sm-stat.is-due .n{color:#B45309}
.sm-stat.is-known .n{color:#047857}

.sm-toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.sm-filter{display:inline-flex;flex:none;flex-wrap:nowrap;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:4px}
.sm-chip{
  display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 15px;
  border:1px solid transparent;border-radius:999px;background:transparent;
  color:var(--muted);font-size:15px;font-weight:600;cursor:pointer;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.sm-chip{white-space:nowrap}
.sm-chip:hover{color:var(--text)}
.sm-chip:focus-visible{outline:3px solid var(--pri);outline-offset:2px}
.sm-chip.is-on{background:var(--pri-soft);border-color:var(--pri);color:var(--pri-dark)}
.sm-chip .c{font-size:13px;color:var(--faint);font-variant-numeric:tabular-nums}
.sm-chip.is-on .c{color:var(--pri-dark)}

.sm-search{position:relative;flex:1 1 240px;max-width:340px;margin-left:auto}
.sm-search svg{
  position:absolute;left:15px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;stroke:var(--muted);fill:none;stroke-width:2;stroke-linecap:round;
}
.sm-ctrl-search{min-height:46px;border-radius:999px;padding-left:42px;font-size:15px}

.sm-vocab-list{display:flex;flex-direction:column;gap:10px}
/* 游客模式提示条：生词本 / 生词复习顶部，说明数据只存本浏览器 */
.sm-local-note{
  display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap;
  margin-bottom:14px;padding:12px 16px;border-radius:14px;
  background:#F3F4FF;border:1px solid #DFE3FF;color:#3730A3;font-size:14px;line-height:1.6;
}
.sm-local-note-ic{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:50%;background:#4F46E5;color:#fff;
  font-size:13px;font-weight:700;margin-top:1px;
}
.sm-local-note-text{flex:1 1 220px;min-width:0;overflow-wrap:anywhere}
.sm-local-note-link{
  flex:none;border:1px solid #C7CCF8;background:#fff;color:#3730A3;
  border-radius:999px;padding:4px 14px;font-size:13px;font-weight:600;
  text-decoration:none;cursor:pointer;line-height:1.8;
}
.sm-local-note-link:hover{background:#EEF0FF}
.sm-local-note-link[disabled]{opacity:.6;cursor:default}
.sm-local-note-import{background:#ECFDF5;border-color:#A7DFC9;color:#065F46}
.sm-local-note-import .sm-local-note-ic{background:#059669}

.sm-vrow{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:0 2px 8px rgba(31,36,55,.04);overflow:hidden;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.sm-vrow:hover{box-shadow:0 6px 18px rgba(31,36,55,.07)}
.sm-vrow.is-open{border-color:#CFD5F7;box-shadow:0 10px 26px rgba(31,36,55,.08)}
.sm-vrow-btn{
  display:flex;align-items:center;gap:18px;width:100%;min-height:78px;
  padding:14px 22px;background:none;border:0;text-align:left;cursor:pointer;
}
.sm-vrow-btn:focus-visible{outline:3px solid var(--pri);outline-offset:-3px}
.sm-vcol{display:flex;flex-direction:column;gap:4px;min-width:0}
.sm-vcol-main{flex:1}
.sm-vcol-side{flex:none;align-items:flex-end;text-align:right;gap:5px}
.sm-vline{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.sm-vword{font-size:19px;font-weight:650;color:var(--text);letter-spacing:-.01em}
.sm-vphon{font-size:14px;color:var(--faint)}
.sm-vdef{font-size:16px;color:var(--body);line-height:1.5}
.sm-vpos{
  display:inline-block;font-size:12px;font-weight:600;color:var(--pri-dark);
  background:var(--pri-soft);border:1px solid #E4E7FE;border-radius:6px;
  padding:1px 7px;margin-right:8px;vertical-align:1px;line-height:1.6;
}
.sm-vmeta{font-size:13px;color:var(--faint);font-variant-numeric:tabular-nums}
.sm-vbadge{
  display:inline-flex;align-items:center;font-size:13px;font-weight:600;
  border:1px solid transparent;border-radius:999px;padding:2px 11px;line-height:1.7;
}
.sm-vbadge.is-due{color:#92400E;background:#FEF3C7;border-color:#FDE68A}
.sm-vbadge.is-learning{color:#3730A3;background:var(--pri-soft);border-color:#DFE3FF}
.sm-vbadge.is-known{color:#065F46;background:#ECFDF5;border-color:#A7DFC9}
.sm-vchev{font-size:20px;color:#B9BFD0;flex:none;transition:transform .2s ease}
.sm-vrow.is-open .sm-vchev{transform:rotate(90deg)}

.sm-vdetail{border-top:1px solid var(--line);background:#FCFCFE;padding:20px 22px 22px}
.sm-vsent{font-size:16px;color:var(--text);line-height:1.65}
.sm-vsent em{font-style:normal;font-weight:650;color:#3730A3;background:#EEF2FF;border-radius:5px;padding:0 5px}
.sm-vdetail-meta{display:flex;gap:8px;flex-wrap:wrap;font-size:14px;color:var(--muted);margin-top:12px}
.sm-vdot{color:var(--faint)}
.sm-vnote{
  font-size:15px;color:var(--body);background:var(--surface);
  border:1px solid var(--line);border-radius:10px;padding:11px 15px;margin-top:14px;line-height:1.65;
}
.sm-vacts{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.sm-btn-xs{min-height:42px;padding:0 18px;font-size:15px;border-radius:999px}
/* 生词本：可反复改写的学习状态 + 危险操作 + 删除二次确认弹层 */
.sm-vstatus{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px}
.sm-vstatus > label{font-size:14px;font-weight:600;color:var(--muted);flex:none}
.sm-vstatus .sm-ctrl{width:auto;flex:1 1 190px;min-height:40px;padding:0 12px;font-size:15px}
.sm-btn-danger{background:#fff;color:#b91c1c;border:1px solid #f0b9b9}
.sm-btn-danger:hover:not(:disabled){background:#fef2f2;border-color:#e05252;transform:none}
.sm-modal-sm{max-width:440px}
.sm-modal-sm .sm-modal-head{margin-bottom:22px}
.sm-modal-sm .sm-actions{flex-wrap:wrap}
.sm-vempty{
  text-align:center;font-size:16px;color:var(--faint);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:44px 20px;margin:0;
}
.sm-vload,.sm-verr{
  text-align:center;font-size:16px;color:var(--muted);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:44px 20px;margin:0;
}
.sm-verr{color:#b4423a}
.sm-verr .sm-btn{margin-top:16px}
.sm-rv-load,.sm-rv-err{
  text-align:center;font-size:16px;color:var(--muted);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:44px 20px;margin:24px auto;max-width:760px;
}
.sm-rv-err{color:#b4423a}
.sm-rv-err .sm-btn{margin-top:16px}

/* ---------- 生词复习：卡片 ----------
   包进 .sm-shell 后，.sm-shell>.sm-main 会把 max-width 抬到 1124px 且清掉居中；
   用同等特异性、位置更靠后的规则把复习页的 760px 窄列找回来。 */
.sm-review-main,.sm-shell>.sm-review-main{max-width:760px;margin:0 auto}
.sm-review-head{padding:26px 0 0}
.sm-review-meta{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-size:15px;color:var(--muted);margin-top:18px;font-variant-numeric:tabular-nums;
}
.sm-review-progress{position:relative;height:8px;border-radius:999px;background:#E9ECF7;margin-top:10px;overflow:hidden}
.sm-review-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:999px;background:var(--pri);transition:width .3s ease}

.sm-flash{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:0 8px 26px rgba(31,36,55,.06);padding:42px 44px 40px;margin-top:28px;
  min-height:340px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
}
.sm-flash-tag{
  font-size:13px;font-weight:600;color:#92400E;background:#FEF3C7;
  border:1px solid #FDE68A;border-radius:999px;padding:3px 12px;
}
.sm-flash-word{
  font-size:clamp(32px,4.6vw,44px);font-weight:700;color:var(--text);
  letter-spacing:-.02em;line-height:1.2;margin-top:18px;word-break:break-word;
}
.sm-flash-phon{font-size:17px;color:var(--muted);margin-top:8px}
.sm-sound{
  display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 15px;
  margin-top:14px;border:1px solid var(--line-2);border-radius:999px;background:#fff;
  color:var(--body);font-size:14px;cursor:pointer;
  transition:border-color .18s ease,color .18s ease;
}
.sm-sound:hover{border-color:var(--pri);color:var(--pri-dark)}
.sm-sound:focus-visible{outline:3px solid var(--pri);outline-offset:2px}
.sm-sound svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sm-flash-sent{font-size:18px;color:var(--body);line-height:1.7;margin-top:22px;max-width:52ch}
.sm-blank{
  display:inline-block;min-width:96px;height:19px;vertical-align:-3px;
  background:#E9ECF7;border-radius:6px;color:transparent;
  transition:color .2s ease,background .2s ease;
}
.sm-flash.is-revealed .sm-blank{height:auto;color:#3730A3;background:transparent;font-weight:650}
.sm-flash-back{
  width:100%;text-align:left;border-top:1px solid var(--line);
  margin-top:26px;padding-top:24px;display:flex;flex-direction:column;gap:12px;
}
.sm-flash-def{font-size:22px;font-weight:650;color:var(--text);line-height:1.5}
.sm-flash-def .pos{
  display:inline-block;font-size:13px;font-weight:600;color:var(--pri-dark);
  background:var(--pri-soft);border:1px solid #E4E7FE;border-radius:6px;
  padding:1px 8px;margin-right:10px;vertical-align:2px;
}
.sm-flash-eg{font-size:17px;color:var(--body);line-height:1.7}
.sm-flash-src{font-size:14px;color:var(--faint)}

.sm-review-actions{margin-top:24px;display:flex;flex-direction:column;gap:12px}
.sm-btn-wide{width:100%;min-height:58px}
.sm-grades{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.sm-grade{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:66px;padding:10px 8px;border:1px solid var(--line-2);border-radius:12px;
  background:#fff;color:var(--text);font-size:15px;font-weight:600;cursor:pointer;
  transition:border-color .16s ease,background .16s ease;
}
.sm-grade b{font-weight:600}
.sm-grade span{font-size:12px;color:var(--faint);font-weight:500}
.sm-grade:hover{border-color:var(--pri);background:var(--pri-soft)}
.sm-grade:focus-visible{outline:3px solid var(--pri);outline-offset:2px}
.sm-grade[data-grade="0"]:hover{border-color:#F3C9C9;background:#FDF2F2}
.sm-grade[data-grade="1"]:hover{border-color:#F8DCB4;background:#FFF8EC}
.sm-grade[data-grade="2"]:hover{border-color:#BFC7FA;background:#F2F5FF}
.sm-grade[data-grade="3"]:hover{border-color:#A7DFC9;background:#EDF9F3}
.sm-kbd-hint{text-align:center;font-size:13px;color:var(--faint);margin-top:2px}

.sm-done{
  margin-top:28px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-xl);padding:44px 36px 38px;text-align:center;
  box-shadow:0 8px 26px rgba(31,36,55,.06);
}
.sm-done-num{font-size:52px;font-weight:700;color:var(--pri-dark);letter-spacing:-.03em;line-height:1.2}
.sm-done h2{font-size:26px;color:var(--text);font-weight:700;margin-top:8px}
.sm-done-note{font-size:16px;color:var(--body);margin-top:10px;line-height:1.65}
.sm-done-list{display:flex;flex-direction:column;gap:8px;margin-top:24px;text-align:left}
.sm-done-row{
  display:flex;align-items:center;gap:12px;font-size:15px;
  border:1px solid var(--line);border-radius:10px;padding:11px 15px;background:var(--bg);
}
.sm-done-name{color:var(--text);font-weight:600;flex:1}
.sm-done-count{color:var(--body);font-variant-numeric:tabular-nums}
.sm-done-gap{color:var(--faint);font-size:14px;min-width:96px;text-align:right}

/* ---------- Toast ---------- */
.sm-toast{
  position:fixed;left:50%;bottom:calc(36px + var(--sm-fixed-h) + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:90;
  background:var(--text);color:#fff;font-size:16px;padding:14px 24px;
  border-radius:999px;box-shadow:0 12px 30px rgba(15,20,40,.24);max-width:calc(100vw - 40px);
  text-align:center;
}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .sm-tiles{grid-template-columns:1fr}
  .sm-tile{min-height:190px}
  .sm-hero h1{font-size:28px}
  .sm-hero p{font-size:17px}
  .sm-main{padding:0 20px 70px}
  .sm-top{padding:16px var(--sm-side-r) 12px var(--sm-side-l);gap:14px}
  .sm-user{margin-left:auto}
  .sm-pagebar{align-items:flex-start}
  .sm-modal{padding:28px 24px 24px}
  .sm-hist-row{padding:18px 18px;gap:12px}
  .sm-hist-main .t{font-size:18px}
  .sm-hist-main .m{font-size:15px}
  .sm-hist-regen{padding:0 12px;min-height:40px;font-size:14px;gap:6px}
  .sm-hist-badge{font-size:12px;padding:2px 8px}
  .sm-player{flex-wrap:wrap;gap:14px;padding:12px 14px}
  /* 平板宽度足够：播放键 + 播放方式 + 语速仍然一行，别把语速挤到第二行 */
  .sm-player-tools{flex:none}
  .sm-tool{flex:none}
  .sm-mode{flex:none}
  .sm-pane-hint{display:none}
  /* toggle 已移入 .sm-player：≤900px 下 .sm-pane-bar 只剩空 padding，整行隐藏。
     >900px 桌面 .sm-pane-hint 可见，这一行原样保留，桌面零变化。 */
  .sm-pane-bar{display:none}
  .sm-quiz-card{padding:26px 22px}
  .sm-stats{gap:10px}
  .sm-stat{padding:13px 15px}
  .sm-stat .n{font-size:22px}
  .sm-search{max-width:none;width:100%;margin-left:0;flex:1 1 100%}
  .sm-flash{padding:32px 24px 30px;min-height:300px}
  .sm-done{padding:34px 22px 30px}
}
@media (max-width:560px){
  .sm-btn{font-size:16px;padding:0 22px}
  .sm-modal-head h2{font-size:22px}
  .sm-actions{flex-wrap:wrap}
  .sm-actions .sm-btn,.sm-actions .sm-btn-link{flex:1 1 100%}
  .sm-actions .sm-btn-link{order:2}
  .sm-brand-text{font-size:1.1rem}
  .sm-crumbs{font-size:14px;gap:7px}
  .sm-user-btn{max-width:168px;font-size:13px;padding:4px 11px 4px 5px}
  .sm-user-menu{min-width:210px}
  .sm-play{width:50px;height:50px}
  .sm-play svg{width:21px;height:21px}
  .sm-line-text{font-size:16px}
  .smg-sentence{font-size:17px;line-height:2}
  .sm-q-title{font-size:20px}
  .sm-opt{font-size:16px;min-height:56px;padding:10px 14px;gap:12px}
  .sm-opt.is-picked,.sm-opt.is-right,.sm-opt.is-wrong{padding:9px 13px}
  .sm-quiz-actions .sm-btn{width:100%}
  .sm-auth-card{padding:28px 22px 24px}
  .sm-auth-intro h1{font-size:24px}
  .sm-stat{padding:11px 12px}
  .sm-stat .n{font-size:20px}
  .sm-stat .l{font-size:12px}
  .sm-chip{padding:0 11px;font-size:14px}
  /* 四个筛选项在窄屏放不下一行：让胶囊容器自己换行，别把内容挤出屏幕 */
  .sm-filter{flex:0 1 auto;flex-wrap:wrap;max-width:100%;border-radius:16px}
  .sm-toolbar{gap:10px}
  .sm-vrow-btn{padding:14px 16px;gap:12px;min-height:72px}
  .sm-vword{font-size:17px}
  .sm-vphon{font-size:13px}
  .sm-vdef{font-size:15px;overflow-wrap:anywhere}
  .sm-vmeta{display:none}
  .sm-vbadge{font-size:12px;padding:2px 9px}
  .sm-vdetail{padding:18px 16px 20px}
  .sm-grades{grid-template-columns:1fr 1fr}
  .sm-flash{padding:28px 20px 26px}
  .sm-flash-sent{font-size:16px}
  .sm-flash-def{font-size:19px}
  .sm-done-num{font-size:44px}
  .sm-review-meta{font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;scroll-behavior:auto !important;animation:none !important}
}

/* ---------- 登录页：真实账号服务（错误提示 / 已登录 / 滑块验证） ---------- */
.sm-auth-msg{
  margin-top:18px;padding:12px 15px;border-radius:var(--r-lg);
  font-size:15px;line-height:1.55;border:1px solid transparent;
}
.sm-auth-msg.is-err{background:#fdf0f0;color:#a92a24;border-color:#f3d2d2}
.sm-auth-msg.is-ok{background:#eefaf3;color:#0e6b45;border-color:#c7ebd8}

.sm-auth-done{padding-top:22px}
.sm-auth-who{font-size:17px;color:var(--text);margin-bottom:22px}
.sm-auth-who strong{font-weight:700;color:var(--pri-dark)}
#sm-auth-logout{display:inline-flex;align-items:center;margin-top:12px;min-height:44px;padding:0 2px}

.sm-cap-stage{
  position:relative;margin:0 auto 12px;overflow:hidden;
  border-radius:var(--r-lg);
  background:#e9eef5;line-height:0;
}
.sm-cap-bg{display:block;width:100%;height:auto;-webkit-user-drag:none}
.sm-cap-piece{
  position:absolute;top:0;left:0;height:auto;z-index:2;border-radius:8px;
  cursor:grab;touch-action:none;-webkit-user-drag:none;user-select:none;
  box-shadow:0 1px 4px rgba(0,0,0,.3);
}
.sm-cap-piece:active{cursor:grabbing}
.sm-cap-bar{
  position:relative;height:44px;margin:0 auto 10px;
  background:#f0f2f5;border-radius:22px;
  touch-action:none;
}
.sm-cap-fill{
  position:absolute;left:0;top:0;height:100%;width:0;
  background:var(--pri-soft);border-radius:22px 0 0 22px;
}
.sm-cap-handle{
  position:absolute;top:50%;left:0;transform:translate(-50%,-50%);
  width:40px;height:40px;border-radius:50%;z-index:3;
  display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--line-2);
  box-shadow:0 1px 4px rgba(0,0,0,.25);
  color:var(--pri-dark);font-size:20px;font-weight:700;line-height:1;
  cursor:grab;touch-action:none;
}
.sm-cap-handle:active{cursor:grabbing}
.sm-cap-handle:focus-visible{outline:3px solid var(--pri);outline-offset:3px}
.sm-cap-tip{font-size:14px;color:var(--muted);text-align:center}

/* ============================================================
   真实数据对接后新增的组件（列表 / 逐句 / 语法 / 生成进度）
   ============================================================ */

/* ---------- 游客横幅 ---------- */
.sm-guest-banner{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:0 0 18px;padding:12px 16px;border-radius:var(--r-lg);
  background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;font-size:15px;
}
.sm-guest-banner a{color:#c2410c;font-weight:650;text-decoration:underline}
.sm-guest-note{margin-top:10px;font-size:14px;color:#9a3412}
.sm-guest-note a{color:#c2410c;font-weight:650;text-decoration:underline}

/* ---------- 系统通知（管理员在系统运营页填写） ----------
   学习菜单顶栏正下方的一条警示色块。刻意比游客横幅更重：
   渐变底 + 橙色描边 + 左侧警示条 + 呼吸的图标，扫一眼就能注意到。
   没有通知时模板不渲染这个节点，所以不需要隐藏规则。 */
.sm-notice-wrap{
  width:100%;max-width:calc(1124px + var(--sm-side-l) + var(--sm-side-r));
  margin:18px auto 0;padding:0 var(--sm-side-r) 0 var(--sm-side-l);
}
.sm-notice{
  display:flex;align-items:flex-start;gap:12px;
  padding:14px 18px 14px 16px;border-radius:var(--r-lg);
  background:linear-gradient(135deg,#fff1f2 0%,#ffedd5 58%,#fef3c7 100%);
  border:1px solid #fdba74;border-left:5px solid #ea580c;
  box-shadow:0 8px 22px rgba(194,65,12,.12);
  color:#7c2d12;
}
.sm-notice-ico{
  flex:none;width:22px;height:22px;margin-top:1px;color:#dc2626;
  animation:sm-notice-pulse 2.4s ease-in-out infinite;
}
@keyframes sm-notice-pulse{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.12);opacity:.82}
}
@media (prefers-reduced-motion:reduce){
  .sm-notice-ico{animation:none}
}
.sm-notice-body{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;min-width:0}
.sm-notice-tag{
  flex:none;font-size:12px;font-weight:700;letter-spacing:.06em;
  padding:2px 9px;border-radius:999px;
  background:#dc2626;color:#fff;white-space:nowrap;
}
.sm-notice-text{
  font-size:15.5px;font-weight:650;line-height:1.6;color:#7c2d12;
  white-space:pre-line;word-break:break-word;
}
@media (max-width:640px){
  .sm-notice-wrap{margin-top:14px;padding:0 16px}
  .sm-notice{padding:12px 14px;gap:10px}
  .sm-notice-text{font-size:15px}
  .sm-notice-body{gap:6px 8px}
}


/* ---------- 列表：加载 / 空态 / 状态角标 ---------- */
.sm-hist-loading{
  padding:34px 20px;text-align:center;color:var(--muted);font-size:16px;
  background:var(--surface);border:1px dashed var(--line-2);border-radius:var(--r-lg);
}
.sm-hist-empty{
  padding:44px 24px;text-align:center;
  background:var(--surface);border:1px dashed var(--line-2);border-radius:var(--r-lg);
}
.sm-hist-empty-t{font-size:19px;font-weight:650;color:var(--text)}
.sm-hist-empty-n{font-size:16px;color:var(--muted);margin-top:8px}
.sm-hist-row.is-disabled{opacity:.72}
/* A row that cannot be opened yet keeps its info readable: it is still the
   record of the scenario that was picked, only the action changes. */
.sm-hist-row.is-static{cursor:default;opacity:.95}
.sm-hist-row.is-static:hover{transform:none;box-shadow:0 2px 8px rgba(31,36,55,.04)}
.sm-hist-badge{
  flex:none;font-size:13px;font-weight:600;padding:2px 10px;border-radius:999px;
  background:var(--pri-soft);color:var(--pri-dark);border:1px solid #dfe3ff;
}
.sm-hist-badge.is-bad{background:#fef2f2;color:#b91c1c;border-color:#fecaca}

/* 重新生成：失败行的唯一动作，图标 + 文字，和角标并排 */
.sm-hist-regen{
  flex:none;display:inline-flex;align-items:center;gap:7px;min-height:42px;
  padding:0 15px;border-radius:999px;border:1px solid #dfe3ff;
  background:var(--pri-soft);color:var(--pri-dark);font-size:15px;font-weight:650;
  cursor:pointer;transition:background .16s ease,border-color .16s ease,transform .16s ease;
}
.sm-hist-regen:hover:not(:disabled){background:#e3e8ff;border-color:var(--pri);transform:translateY(-1px)}
.sm-hist-regen:focus-visible{outline:3px solid var(--pri);outline-offset:2px}
.sm-hist-regen:disabled{opacity:.75;cursor:progress;transform:none}
.sm-hist-regen svg{
  width:17px;height:17px;flex:none;stroke:currentColor;fill:none;
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
}
.sm-hist-regen.is-busy svg{animation:sm-spin 1s linear infinite}
@keyframes sm-spin{to{transform:rotate(360deg)}}

/* ---------- 场景弹窗：加载 / 练过标记 / 生成进度 ---------- */
.sm-sc-loading{padding:26px 6px;text-align:center;color:var(--muted);font-size:16px}
.sm-sc-practiced{font-size:13px;color:var(--faint);margin-top:6px}
.sm-sc-card.is-first{border-color:#cfd5f7}

.sm-gen{margin:4px 0 18px}
.sm-gen-title{font-size:19px;font-weight:650;color:var(--text)}
.sm-gen-track{
  position:relative;height:9px;border-radius:999px;background:#e8ebf7;
  overflow:hidden;
}
.sm-gen-fill{
  display:block;height:100%;width:0;border-radius:999px;
  background:var(--cta);transition:width .45s ease;
}
/* 语音那条换色，两条并排时才分得清哪条在动 */
.sm-gen-fill.is-audio{background:#059669}
/* 文本阶段后台只有一个「在写」的布尔状态，没有可用的百分比。与其编一个数字，
   不如让它走不确定态：移动的高光表示还在写，文本落地那刻直接跳到 100%。 */
.sm-gen-track.is-indet{
  background-image:linear-gradient(90deg,transparent 0%,rgba(79,70,229,.30) 45%,transparent 90%);
  background-size:55% 100%;background-repeat:no-repeat;
  animation:sm-gen-slide 1.4s linear infinite;
}
@keyframes sm-gen-slide{0%{background-position:-55% 0}100%{background-position:155% 0}}
.sm-gen-bars{display:flex;flex-direction:column;gap:14px;margin:16px 0 12px}
.sm-gen-row-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:7px}
.sm-gen-label{font-size:14px;font-weight:650;color:var(--text)}
.sm-gen-val{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.sm-gen-step{font-size:15px;color:var(--body);font-variant-numeric:tabular-nums}
.sm-gen-note{font-size:14px;color:var(--faint);margin-top:8px}
.sm-gen-note a{color:var(--pri-dark);font-weight:650;text-decoration:underline}

/* ---------- 练习页：空态 ---------- */
.sm-empty{
  margin-top:26px;padding:46px 26px;text-align:center;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
}
.sm-empty-title{font-size:21px;font-weight:650;color:var(--text)}
.sm-empty-note{font-size:16px;color:var(--muted);margin:10px 0 22px}

/* ---------- 练习页：逐句听（原文默认隐藏，只给说话人） ---------- */
.sm-text-toggle{
  display:inline-flex;align-items:center;gap:7px;flex:none;min-height:38px;padding:0 14px;
  border:1px solid var(--line-2);border-radius:999px;background:#fff;color:var(--body);
  font-size:14px;cursor:pointer;transition:border-color .16s ease,color .16s ease,background .16s ease;
}
.sm-text-toggle svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.sm-text-toggle:hover{border-color:var(--pri);color:var(--pri-dark)}
.sm-text-toggle:focus-visible{outline:3px solid var(--pri);outline-offset:2px}
.sm-text-toggle.is-on{background:var(--pri-soft);border-color:var(--pri);color:var(--pri-dark);font-weight:650}

.sm-line-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
/* 只有行首的播放键会发声：整行不再是播放热区，避免误触。 */
.sm-line{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  transition:border-color .16s ease,background .16s ease;
  -webkit-tap-highlight-color:transparent;
}
.sm-line:hover{border-color:#cfd5f7;background:#fcfcff}
.sm-line.is-current{border-color:var(--pri);background:#f8f9ff}
.sm-line-head{display:flex;align-items:flex-start;gap:12px;padding:12px 16px}
.sm-line-play{
  /* 圆角方钮 + 「起点竖条 ▸ 三角」图标：和上方圆形播放控件明确区分，
     它做的是「跳到这一句并往后播」，不是播放/暂停。 */
  flex:none;width:34px;height:34px;border-radius:10px;border:1px solid var(--line-2);
  background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:border-color .16s ease,background .16s ease;
}
.sm-line-play:hover{border-color:var(--pri);background:var(--pri-soft)}
.sm-line-play:focus-visible{outline:3px solid var(--pri);outline-offset:2px}
.sm-line-play svg{width:15px;height:15px;fill:var(--cta);stroke:none}
.sm-line-meta{display:inline-flex;align-items:center;gap:8px;flex:none;padding-top:5px}
.sm-line-no{font-size:13px;color:var(--faint);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.sm-line-speaker{
  font-size:13px;font-weight:650;color:var(--pri-dark);
  background:var(--pri-soft);border-radius:6px;padding:2px 9px;
}
/* 播放中的三根跳动条：替代时间轴，标出「现在说的是哪一句」 */
.sm-line-bars{display:none;align-items:flex-end;gap:2px;height:14px}
.sm-line-bars i{width:3px;height:6px;border-radius:2px;background:var(--pri)}
.sm-line.is-current .sm-line-bars{display:inline-flex}
.sm-line.is-current .sm-line-bars i:nth-child(1){animation:smBars .9s ease-in-out infinite}
.sm-line.is-current .sm-line-bars i:nth-child(2){animation:smBars .9s ease-in-out .18s infinite}
.sm-line.is-current .sm-line-bars i:nth-child(3){animation:smBars .9s ease-in-out .36s infinite}
@keyframes smBars{0%,100%{height:5px;opacity:.55}50%{height:13px;opacity:1}}
.sm-line-text{
  flex:1;min-width:0;font-size:17px;color:var(--text);line-height:1.6;
  padding-top:4px;cursor:text;
}
.sm-line-list.is-text-hidden .sm-line-text{display:none}
.sm-line-list.is-text-hidden .sm-line-head{align-items:center}
.sm-line-list.is-text-hidden .sm-line-meta{padding-top:0}
.sm-line-list.is-text-hidden .sm-gram-btn{margin-left:auto}

.sm-gram-btn{
  flex:none;display:inline-flex;align-items:center;gap:6px;
  min-height:34px;padding:0 13px;border-radius:9px;
  border:1px solid var(--line-2);background:#fff;color:var(--body);
  font-size:14px;cursor:pointer;transition:border-color .16s ease,color .16s ease,background .16s ease;
}
.sm-gram-btn svg{
  width:15px;height:15px;flex:none;stroke:currentColor;fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
.sm-gram-btn.is-busy svg{animation:sm-spin 1.1s linear infinite}
.sm-gram-btn:hover{border-color:var(--pri);color:var(--pri-dark)}
.sm-gram-btn.is-on{background:var(--pri-soft);border-color:var(--pri);color:var(--pri-dark);font-weight:600}
.sm-gram-btn:focus-visible{outline:3px solid var(--pri);outline-offset:2px}

.sm-gram-panel{margin:0 16px 14px;padding:16px 18px;border-radius:14px;background:#fff;border:1px solid #e6e9fa;cursor:default}
.smg-status{font-size:15px;color:var(--muted)}

/* 精读面板内的广告位：居中容器不能用 .sm-ad-h（那个类在窄屏被 display:none）。
   尺寸复用 is-h 的双档预留：横屏桌面 728×90 Leaderboard；≤767px 竖屏手机 320×100，
   双档规则在上方窄屏媒体查询里，这里只管排布不管尺寸。 */
.smg-ad{display:flex;justify-content:center;margin-top:14px}
.smg-ad .sm-ad-slot.is-h{flex:none}

/* 精读讲解：标题 + 关闭 */
.smg-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.smg-title{font-size:15px;font-weight:700;color:var(--text);letter-spacing:.01em}
.smg-close{
  width:30px;height:30px;flex:none;border-radius:8px;border:1px solid transparent;
  background:none;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.smg-close:hover{background:#f1f3fb;color:var(--body)}
.smg-close svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}

/* 成分 chips：主 / 谓 / 宾 / 状 …，点一下高亮整句里对应的词 */
.smg-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.smg-chip{
  display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 12px 0 6px;
  border-radius:10px;border:1px solid var(--line-2);background:#fff;cursor:pointer;
  transition:border-color .16s ease,box-shadow .16s ease;
}
.smg-chip:hover{border-color:#c8cff0}
.smg-chip.is-on{border-color:currentColor;box-shadow:0 0 0 2px rgba(99,102,241,.12)}
.smg-chip:focus-visible{outline:3px solid var(--pri);outline-offset:2px}
.smg-chip-tag{
  min-width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;color:#fff;background:var(--role-color,#94a3b8);
}
.smg-chip-text{font-size:15px;color:var(--text);white-space:nowrap}

/* 整句：颜色=成分，底色=固定短语，下划线=从句，字体=词性 */
.smg-sentence{
  font-size:19px;line-height:2.1;color:var(--text);letter-spacing:.005em;
  margin-bottom:14px;
}
.smg-w{border-radius:5px;padding:1px 3px;margin:0 -3px}
.smg-w.in-phrase{background:var(--smg-bg,#eef2ff);box-shadow:inset 0 -1px 0 var(--smg-bg-line,#dfe5ff)}
.smg-w.in-clause{text-decoration:underline;text-decoration-color:var(--smg-clause,#4f46e5);text-underline-offset:4px;text-decoration-thickness:1.5px}
.smg-w.pos-noun,.smg-w.pos-pronoun{font-style:italic}
.smg-w.pos-verb,.smg-w.pos-auxiliary,.smg-w.pos-modal{font-weight:650}
.smg-w.is-lit{background:#fff3c4;box-shadow:inset 0 -2px 0 #f0c33c;border-radius:4px}
.smg-w.is-hover{background:#e0e7ff;border-radius:4px;box-shadow:inset 0 -2px 0 #818cf8}
/* 悬停提示：这个单词本身 + 它在这句里的意思。follows 面板内部滚动 */
.smg-tip{
  position:fixed;z-index:95;pointer-events:none;opacity:0;visibility:hidden;
  width:max-content;max-width:300px;background:#fff;border:1px solid var(--line-2);
  border-radius:12px;box-shadow:0 16px 40px rgba(15,20,40,.18);
  padding:10px 12px;font-size:13px;color:var(--body);transition:opacity .12s ease;
}
.smg-tip.is-on{opacity:1;visibility:visible}
.smg-tip-head{display:flex;align-items:baseline;gap:6px;margin-bottom:6px}
.smg-tip-word{font-size:16px;font-weight:700;color:var(--text)}
.smg-tip-lemma{font-size:12px;color:var(--faint)}
.smg-tip-badges{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}
.smg-tip-badge{
  font-size:12px;font-weight:650;color:var(--pri-dark);background:var(--pri-soft);
  border-radius:5px;padding:1px 7px;
}
.smg-tip-badge.is-role{color:#0e7490;background:#e0f2fe}
.smg-tip-row{display:flex;gap:8px;line-height:1.5;margin:3px 0}
.smg-tip-label{flex:none;width:54px;color:var(--faint);font-size:12px}
.smg-tip-value{color:var(--text)}
.smg-tip-value.is-sense{color:#0e7490;font-weight:650}
.smg-tip-extra{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line);line-height:1.5;max-width:276px}
.smg-tip-extra strong{color:var(--pri-dark);font-weight:700}
.smg-tip-kind{display:block;font-size:12px;color:var(--faint);margin-top:2px}
.smg-w.is-punct{padding:1px 0;margin:0}

/* 讲解 + 图例 */
.smg-note{
  font-size:15px;color:#3b3f57;line-height:1.75;background:#eff2fe;
  border-radius:10px;padding:12px 14px;margin-bottom:14px;
}
/* 整句含义：放在彩色句子下面、结构说明上面，白底 + 左侧标签，
   与下面那条浅蓝的「结构说明」区分开，避免两块长得一样分不清谁是谁。 */
.smg-meaning{
  display:flex;align-items:flex-start;gap:10px;
  font-size:15px;color:var(--text);line-height:1.75;
  background:#fff;border:1px solid #e8eaf6;border-radius:10px;
  padding:11px 14px;margin:2px 0 12px;
}
.smg-meaning-tag{
  flex:none;margin-top:3px;font-size:12px;font-weight:650;letter-spacing:.02em;
  color:#4f46e5;background:#eef2ff;border-radius:999px;padding:1px 9px;line-height:1.6;
}
.smg-meaning-text{flex:1 1 auto;min-width:0}
.smg-legend{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;padding-top:12px;border-top:1px dashed #e6e9fa}
.smg-legend-item{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--body)}
.smg-legend-dot{width:9px;height:9px;border-radius:50%;flex:none}
.smg-legend-keys{display:flex;gap:16px;flex-wrap:wrap;margin-left:auto;font-size:13px;color:var(--faint)}

/* 成分配色：chip 标签和整句共用一套变量 */
.role-subject{--role-color:#2563eb;color:#2563eb}
.role-predicate{--role-color:#dc2626;color:#dc2626}
.role-object{--role-color:#059669;color:#059669}
.role-indirect_object{--role-color:#0d9488;color:#0d9488}
.role-object_complement{--role-color:#7c3aed;color:#7c3aed}
.role-predicative{--role-color:#9333ea;color:#9333ea}
.role-attributive{--role-color:#7c3aed;color:#7c3aed}
.role-adverbial{--role-color:#b45309;color:#b45309}
.role-aux{--role-color:#64748b;color:#64748b}
.role-other,.role-conjunction,.role-preposition,.role-determiner,.role-particle{--role-color:#94a3b8}
.smg-chip.role-other,.smg-chip.role-conjunction,.smg-chip.role-preposition,
.smg-chip.role-determiner,.smg-chip.role-particle{color:var(--body)}
.smg-w.role-other,.smg-w.role-conjunction,.smg-w.role-preposition,
.smg-w.role-determiner,.smg-w.role-particle{color:var(--text)}

/* ---------- 练习页：「没听懂」选项 ---------- */
.sm-opt-unknown{border-style:dashed;color:var(--body)}
.sm-opt-unknown .sm-opt-letter{background:#f3f4f8;color:var(--muted)}
.sm-opt-unknown.is-picked{border-style:solid;background:#f5f6fb;border-color:var(--muted)}
.sm-opt-unknown.is-picked .sm-opt-letter{background:var(--muted);border-color:var(--muted);color:#fff}
.sm-opt-unknown.is-wrong .sm-opt-letter{background:#DC2626;border-color:#DC2626;color:#fff}

/* ---------- 练习页：结果分析 ---------- */
.sm-result.is-saving .sm-result-score{opacity:.55}
.sm-result-analysis{
  margin:24px auto 0;max-width:640px;text-align:left;
  background:#f8f9fe;border:1px solid #e6e9fa;border-radius:var(--r-lg);padding:18px 20px;
}
.sm-result-analysis h3{font-size:16px;font-weight:650;color:var(--text);margin-bottom:8px}
.sm-result-analysis p{font-size:15px;color:var(--body);line-height:1.7;margin:4px 0}

/* ---------- 划词加入生词本 ---------- */
/* ---------- 划词浮层：先挑标签，再进生词本 ---------- */
.sm-vocab-pop{
  position:fixed;z-index:85;width:294px;max-width:calc(100vw - 24px);
  background:var(--surface);border:1px solid var(--line-2);border-radius:14px;
  box-shadow:0 18px 44px rgba(15,20,40,.18);overflow:hidden;
}
.sm-vocab-head{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:10px 12px;background:#f7f8fd;border-bottom:1px solid var(--line);
}
.sm-vocab-term{
  font-size:16px;font-weight:700;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.sm-vocab-x{
  flex:none;border:0;background:none;color:var(--faint);font-size:20px;line-height:1;
  cursor:pointer;padding:0 2px;
}
.sm-vocab-x:hover{color:var(--text)}
.sm-vocab-tags{display:flex;flex-wrap:wrap;gap:6px;padding:11px 12px 7px}
.sm-vocab-tag{
  border:1px solid var(--line-2);background:#fff;color:var(--body);border-radius:999px;
  padding:5px 11px;font-size:13px;font-weight:600;cursor:pointer;
  transition:background .14s ease,border-color .14s ease,color .14s ease;
}
.sm-vocab-tag:hover{border-color:var(--pri);color:var(--pri-dark)}
.sm-vocab-tag.is-on{background:var(--pri);border-color:var(--pri);color:#fff}
.sm-vocab-tag:focus-visible{outline:3px solid var(--pri);outline-offset:2px}
.sm-vocab-foot{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:6px 12px 12px;
}
.sm-vocab-hint{font-size:12px;color:var(--faint);line-height:1.4}
.sm-vocab-add{
  flex:none;border:0;border-radius:9px;background:var(--cta);color:#fff;
  font-size:14px;font-weight:650;padding:8px 15px;cursor:pointer;
  transition:background .16s ease;
}
.sm-vocab-add:hover{background:var(--cta-hover)}
.sm-vocab-add:disabled{opacity:.6;cursor:progress}
.sm-vocab-status{margin:0;padding:0 12px 12px;font-size:13px;color:var(--muted)}
.sm-vocab-status.is-ok{color:#047857}
.sm-vocab-status.is-err{color:#b91c1c}
.sm-line-play:disabled{opacity:.4;cursor:not-allowed;border-color:var(--line)}

/* ---------- 创建面板：主题 + 场景同页 ---------- */
.sm-modal-new{
  max-width:760px;display:flex;flex-direction:column;padding:0;
  max-height:calc(100vh - 48px);overflow:hidden;
}
.sm-modal-new .sm-modal-head{
  margin:0;padding:26px 34px 16px;border-bottom:1px solid var(--line);flex:none;
}
.sm-modal-new .sm-modal-head h2{font-size:24px}
.sm-new-body{padding:20px 34px 6px;overflow-y:auto;flex:1;min-height:0}
.sm-modal-new .sm-actions{
  padding:16px 34px 22px;border-top:1px solid var(--line);flex:none;flex-wrap:wrap;background:#fff;
}
.sm-field-last{margin-bottom:8px}
.sm-field-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
/* 标题行内的小号按钮：「换一组主题」「生成 6 个场景」与标题同行靠右 */
.sm-btn-inline{min-height:34px;padding:0 14px;border-radius:999px;font-size:14px;flex:none}
.sm-field-title{display:flex;align-items:baseline;gap:10px;min-width:0}
/* 「自定义内容主题」小标签：区分上面的推荐 chips 和手动输入框 */
.sm-sub-label{display:block;font-size:13px;color:var(--faint);margin:0 0 6px}
.sm-field-label{font-size:17px;color:var(--text);font-weight:600}
.sm-field-note{font-size:14px;color:var(--faint);font-variant-numeric:tabular-nums}

.sm-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.sm-chip{
  border:1px solid var(--line-2);background:#fff;border-radius:999px;
  padding:9px 16px;font-size:16px;color:var(--body);cursor:pointer;min-height:44px;
  transition:background .16s ease,border-color .16s ease,color .16s ease;
}
.sm-chip:hover{border-color:var(--pri);background:var(--pri-soft)}
.sm-chip.is-on{border-color:var(--pri);background:var(--pri-soft);color:var(--pri-dark);font-weight:650}
.sm-chip:focus-visible{outline:3px solid var(--pri);outline-offset:2px}

.sm-linkbtn{
  background:none;border:0;padding:0;color:var(--pri-dark);
  font-size:15px;font-weight:650;cursor:pointer;text-decoration:underline;
}
.sm-linkbtn:hover{color:var(--cta)}
.sm-help-sep{margin:0 6px;color:#C3C8D8}

.sm-sc-inline{max-height:none;margin-bottom:0;overflow:visible}
.sm-sc-idle{font-size:15px;color:var(--faint);padding:14px 2px;line-height:1.6}

/* ---------- 换一批：广告弹层（只剩标题 + 关闭，不显示倒数） ---------- */
.sm-ad-card{
  width:100%;max-width:460px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-xl);box-shadow:0 24px 64px rgba(15,20,40,.22);
  padding:32px 36px 30px;text-align:center;
}
.sm-ad-kicker{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.sm-ad-card h2{font-size:23px;color:var(--text);font-weight:700;margin:10px 0 12px}
.sm-ad-card .sm-btn{width:100%}

@media (max-width:640px){
  .sm-modal-new .sm-modal-head{padding:22px 20px 14px}
  .sm-new-body{padding:16px 20px 4px}
  .sm-modal-new .sm-actions{padding:14px 20px 18px}
  .sm-modal-new .sm-actions .sm-btn{flex:1 1 100%}
  .sm-ad-card{padding:26px 22px 24px}
}

/* ---------- 练习页：窄屏也保持「整页不滚动」，把纵向空间让给面板 ---------- */
/* 手机上每一像素的纵向空间都属于标签页内容，所以这里把顶栏、标题、播放器
   全部压到最小：顶栏只剩「logo + 账号」一行，面包屑让位给标题上方的「← 返回」；
   播放器拆成两行紧凑条（播放键 + 进度 + 播放方式 / 语速）。 */
@media (max-width:680px){
  body.sm-page{--sm-side-l:14px;--sm-side-r:14px}
  .sm-shell{gap:12px}

  .sm-top{padding:9px var(--sm-side-r) 8px var(--sm-side-l);gap:8px 10px;align-items:center}
  .sm-brand{gap:8px}
  .sm-brand-mark{width:26px;height:26px}
  .sm-brand-text{font-size:1rem}
  .sm-user{order:2;margin-left:auto}
  .sm-user-btn{min-height:32px;padding:3px 9px 3px 3px;gap:7px;font-size:12.5px;max-width:146px}
  .sm-user-ava{width:23px;height:23px;font-size:11.5px}
  .sm-crumbs{order:3;flex:1 1 100%;font-size:13px;gap:6px}
  .sm-crumbs a{min-height:30px}
  /* 练习页保留面包屑：与下方「← 返回听力练习」并存，层级更清楚 */
  /* 手机竖屏：三个返回入口（返回菜单 / 返回听力练习 / 回生词本）统一 40px 高、同一内边距 */
  .sm-back{min-height:40px;font-size:14px;padding:0}
  .sm-pagebar .sm-btn{min-height:40px;padding:0 14px;font-size:14px}

  .sm-practice-head{padding:2px 0 6px}
  .sm-practice-head .sm-back{display:inline-flex;min-height:40px;font-size:14px;color:var(--muted)}
  .sm-practice-head h1{font-size:17px}
  .sm-practice-titleline{gap:8px;margin-top:0}
  .sm-practice-meta{font-size:12px}
  .sm-guest-note{margin-top:2px;font-size:11.5px;line-height:1.45}

  .sm-player{flex-wrap:wrap;gap:7px;padding:7px 10px;border-radius:14px}
  .sm-play{width:44px;height:44px;box-shadow:0 4px 12px rgba(79,70,229,.22)}
  .sm-play svg{width:19px;height:19px}
  .sm-player-body{flex:1 1 auto;min-width:0;flex-wrap:nowrap;gap:8px;align-items:center}
  .sm-player-now{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sm-modes{gap:5px;flex:none}
  .sm-mode{min-height:28px;padding:0 9px;font-size:12px;gap:5px;justify-content:center}
  .sm-mode-lbl{display:none}
  .sm-mode-lbl.is-short{display:inline}
  .sm-mode svg{width:13px;height:13px}
  .sm-player-tools{flex:1 1 100%;justify-content:flex-start;gap:6px}
  .sm-speed-label{font-size:12px}
  .sm-tool{min-height:27px;padding:0 10px;font-size:12px}

  .sm-ptabs{margin-top:6px;gap:2px}
  .sm-ptab{min-height:33px;padding:0 10px;font-size:14px;gap:6px}
  .sm-ptab-n{font-size:11.5px}
  .sm-pane-hint{display:none}
  .sm-pane-bar{padding-bottom:6px;justify-content:flex-end}
  .sm-panes{margin-top:6px}
  /* 手机上纵向更紧，底部间隔收一档（比桌面小，但依然不贴边） */
  .sm-pane-scroll{padding-bottom:16px}

  /* 精读讲解：只留图标，按钮 32×32，给句子腾出横向空间 */
  .sm-gram-btn{width:32px;height:32px;min-height:32px;padding:0;justify-content:center;border-radius:9px}
  .sm-gram-btn .lbl{display:none}
  .sm-gram-btn svg{width:16px;height:16px}
  .sm-line-head{gap:9px;padding:9px 12px}
  /* 隐藏原文时只有「序号 + 姓名」，行高再压一点，一屏多放两三句 */
  .sm-line-list.is-text-hidden .sm-line-head{padding:7px 12px}
  .sm-line-play{width:32px;height:32px}
  .sm-gram-panel{margin:0 12px 12px;padding:13px 14px}
  .smg-chips{gap:6px;margin-bottom:12px}
  .smg-chip{min-height:32px;padding:0 10px 0 5px}
  .smg-chip-tag{min-width:22px;height:22px;font-size:12px}
  .smg-chip-text{font-size:13.5px}

  /* 学习菜单页：三个入口纵向排列，每条改成「图标在左、文字在右」的紧凑行。
     卡片内仍竖排会把三张撑到 3×190px，手机上必然滚动；横排一行只要约 56px。 */
  .sm-hero{padding:8px 0}
  .sm-hero h1{font-size:19px}
  .sm-hero p{font-size:12.5px;margin-top:5px}
  .sm-tiles{grid-template-columns:1fr;gap:8px}
  .sm-tile{
    display:grid;grid-template-columns:auto minmax(0,1fr);
    grid-template-rows:auto auto;column-gap:10px;row-gap:1px;
    align-items:center;min-height:0;padding:10px 12px;border-radius:14px;
  }
  .sm-tile-ico{grid-column:1;grid-row:1/span 2;width:34px;height:34px;margin:0;align-self:center}
  .sm-tile-ico svg{width:18px;height:18px}
  .sm-tile h2{grid-column:2;grid-row:1;font-size:15px;margin:0}
  .sm-tile p{grid-column:2;grid-row:2;font-size:12px;margin:0;line-height:1.3}
  .sm-tile-arrow{display:none}
  .sm-ad-h{margin:8px 0 0}

  /* 生词本顶部：标题区 / 统计 / 筛选 / 搜索整体压一档，把高度还给词条列表。
     限定在 sm-vocab-page，避免影响弹层里的主题 chips 和听力列表页的按钮。 */
  body.sm-vocab-page .sm-pagebar{margin-bottom:14px;gap:10px}
  body.sm-vocab-page .sm-pagebar .sm-back{min-height:40px;font-size:14px}
  body.sm-vocab-page .sm-pagebar h1{font-size:17px}
  body.sm-vocab-page .sm-lede{font-size:12.5px;margin-top:3px}
  body.sm-vocab-page .sm-pagebar .sm-btn{min-height:40px;padding:0 14px;font-size:14px;gap:6px}
  body.sm-vocab-page .sm-pagebar .sm-btn svg{width:16px;height:16px}
  body.sm-vocab-page .sm-stats{gap:8px;margin:10px 0}
  body.sm-vocab-page .sm-stat{padding:9px 12px;gap:0;border-radius:12px}
  body.sm-vocab-page .sm-stat .n{font-size:20px;line-height:1.25}
  body.sm-vocab-page .sm-stat .l{font-size:12px}
  body.sm-vocab-page .sm-toolbar{gap:8px;margin-bottom:12px}
  body.sm-vocab-page .sm-filter{padding:3px;gap:3px}
  body.sm-vocab-page .sm-chip{min-height:32px;padding:0 11px;font-size:13px;gap:5px}
  body.sm-vocab-page .sm-chip .c{font-size:12px}
  body.sm-vocab-page .sm-ctrl-search{min-height:38px;font-size:13.5px;padding-left:36px}
  body.sm-vocab-page .sm-search svg{width:15px;height:15px;left:13px}

  /* ---------- 登录/注册：字号 14–20px、输入与按钮压矮；验证码允许页面纵向滚动 ---------- */
  .sm-auth-card{padding:20px 16px 18px}
  .sm-auth-intro h1{font-size:20px}
  .sm-auth-intro p{font-size:14px;margin-top:6px;line-height:1.5}
  .sm-tabs{margin:16px 0 14px}
  .sm-field{margin-bottom:14px}
  .sm-field label{font-size:14px;margin-bottom:6px}
  .sm-ctrl{min-height:44px;font-size:14px;padding:0 12px}
  .sm-help{font-size:13px;margin-top:5px;line-height:1.5}
  .sm-cap-tip{font-size:13px}
  .sm-btn-link{font-size:14px;min-height:40px;padding:0 6px}
  .sm-auth-foot{font-size:13px;margin-top:14px;padding-top:12px}
  /* 触屏 bug：touch-action:none 把页面纵向滚动也拦掉了，改为只放行纵向、横向仍由脚本接管 */
  .sm-cap-piece,.sm-cap-handle,.sm-cap-bar{touch-action:pan-y}
}
/* 矮屏（手机横屏、小窗口）：纵向空间只有 400 上下，把每一块再压一档，
   否则标签页面板会被挤到只剩几像素。 */
@media (max-height:520px){
  .sm-top{padding:6px var(--sm-side-r) 6px var(--sm-side-l)}
  .sm-brand-mark{width:24px;height:24px}
  .sm-brand-text{font-size:.98rem}
  .sm-practice-page .sm-crumbs{display:none}
  .sm-user-btn{min-height:30px;font-size:12px;padding:2px 8px 2px 3px}
  .sm-user-ava{width:22px;height:22px;font-size:11px}

  .sm-practice-head{padding:0 0 4px}
  .sm-practice-head .sm-back{display:none}
  .sm-practice-head h1{font-size:15px}
  .sm-practice-titleline{gap:8px;margin:0}
  .sm-practice-meta{font-size:12px}
  /* 矮屏 back 已隐藏，topline 里只剩 meta：折叠 topline 盒子，
     让 meta 回到 h1 右侧同一行，head 高度回到改动前，面板可视高不再被吃掉。 */
  .sm-practice-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:0 8px}
  .sm-practice-topline{display:contents}
  .sm-practice-titleline{grid-column:1;grid-row:1;margin:0}
  .sm-practice-meta{grid-column:2;grid-row:1;margin-left:0;text-align:right}
  .sm-guest-note{display:none}

  .sm-player{flex-wrap:nowrap;padding:5px 10px;gap:10px;border-radius:12px}
  .sm-play{width:44px;height:44px}
  .sm-player-tools{flex:none}
  .sm-tool{min-height:26px;padding:0 9px;font-size:12px}
  .sm-speed-label{display:none}
  .sm-mode{min-height:26px;padding:0 8px;font-size:12px}

  .sm-ptabs{margin-top:4px}
  .sm-ptab{min-height:30px;font-size:13.5px}
  .sm-panes{margin-top:4px}
  .sm-pane-bar{padding-bottom:4px}
  .sm-pane-scroll{padding-bottom:12px}
  .sm-pane-hint{display:none}
  .sm-text-toggle{min-height:30px;padding:0 11px;font-size:12.5px}
  .sm-line-head{padding:7px 12px}
}

/* 触屏（平板 / 手机）：划词浮层的标签要好点 */
@media (pointer:coarse){
  .sm-vocab-tag{padding:8px 13px;font-size:13.5px}
  .sm-vocab-add{padding:10px 17px;font-size:14.5px}
  .sm-vocab-pop{width:308px}
}

/* ============================================================
   练习页：生成等待弹层
   不改页面结构，只在上面盖一层：文本 / 语音两条真实进度 + 广告位 + 说明。
   首次打开这份练习要满 10 秒才能关；练习内容在弹层后面照常加载，关掉即见。
   ============================================================ */
.sm-prep-overlay{z-index:70;padding:26px 18px}
.sm-prep-card{
  /* 卡宽按广告位的原生尺寸给：1080 - 左右 40 - 滚动条预留 ≈ 985，装得下 970 宽。
     之前 768 宽会把 728 的广告挤成 687，投放侧拿不到标准尺寸。 */
  width:100%;max-width:1080px;max-height:calc(100vh - 52px);overflow-y:auto;
  overscroll-behavior:contain;scrollbar-gutter:stable;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:0 24px 64px rgba(15,20,40,.22);padding:28px 40px 20px;
}
/* 卡变宽了，正文别拉成一行 90 字：给长段落一个可读的行宽 */
.sm-prep-note,.sm-prep-ask-n{max-width:820px}
.sm-prep-kicker{font-size:11.5px;font-weight:700;letter-spacing:.1em;color:var(--pri-dark)}
.sm-prep-title{font-size:23px;font-weight:700;color:var(--text);line-height:1.4;margin:8px 0 7px}
.sm-prep-note{font-size:15px;color:var(--muted);line-height:1.65}
.sm-prep-bars{margin:18px 0 10px;gap:15px}
.sm-prep .sm-gen-step{font-size:14.5px}

/* 广告位：只留一条宽幅横幅位。卡宽放宽后按 IAB 原生尺寸展示，不再被挤成非标宽度：
   宽屏 970×250 Billboard（宽幅里单价最高）、中等屏 728×90 Leaderboard、手机 320×100。
   原来并排两块方块位（336×280 + 300×250）纵向吃掉近 300px，把「开始练习」
   顶到折叠线以下；一条宽位的曝光面积并不差，页面还能一屏看完。 */
.sm-prep-ads{
  display:block;margin:16px 0 0;
}
.sm-ad-slot.sm-prep-ad{height:250px;max-width:970px;margin:0 auto}
/* 卡宽不够 970 时换一档原生尺寸，而不是把 970 硬压扁 */
@media (max-width:1119px){
  .sm-ad-slot.sm-prep-ad{height:90px;max-width:728px}
}
@media (max-width:879px){
  .sm-ad-slot.sm-prep-ad{height:100px;max-width:none}
}

.sm-prep-ask{
  margin:15px 0 0;padding:10px 14px;border-radius:12px;
  background:#f6f7fc;border:1px solid var(--line);
}
.sm-prep-ask-n{font-size:13px;color:var(--muted);line-height:1.7;margin-top:0}

.sm-prep-actions{
  position:sticky;bottom:-20px;display:flex;align-items:center;justify-content:flex-end;
  gap:12px;flex-wrap:wrap;
  padding:12px 0 14px;margin-top:14px;background:#fff;
  box-shadow:0 -10px 16px -12px rgba(31,36,55,.18);
}
.sm-prep-actions .sm-btn{min-height:44px}
#sm-prep-start.is-disabled{opacity:.55;cursor:not-allowed}

@media (max-width:700px){
  .sm-prep-overlay{padding:14px 12px}
  .sm-prep-card{padding:20px 18px 12px;border-radius:16px;max-height:calc(100vh - 28px)}
  .sm-prep-title{font-size:19px}
  .sm-prep-note{font-size:13.5px}
  /* 弹层的 320×100 手机档由上方 @media(max-width:879px) 统一给，这里不重复声明 */
  .sm-prep-ask{padding:9px 12px}
  .sm-prep-ask-n{font-size:12.5px}
}

/* ---------- 电脑横屏：屏幕够大，激励语录整体放大一档 ----------
   放在文件末尾，确保覆盖前面 is-rail / is-h / sm-prep-ad 的字号；
   竖屏、平板、手机仍走各自的小字号，横版 728×90 的高度也不变。 */
@media (orientation:landscape) and (min-width:1024px){
  .sm-quote-en{font-size:16px}
  .sm-quote-zh{font-size:15.5px}
  .sm-quote-by{font-size:13px}
  .sm-ad-slot.is-rail .sm-quote-en{font-size:15px}
  .sm-ad-slot.is-rail .sm-quote-zh{font-size:15px}
  .sm-ad-slot.is-rail .sm-quote-by{font-size:12.5px}
  .sm-ad-slot.is-h .sm-quote-en{font-size:16px}
  .sm-ad-slot.is-h .sm-quote-zh{font-size:15px}
  .sm-ad-slot.is-h .sm-quote-zh:first-child{font-size:18px}
  .sm-ad-slot.is-h .sm-quote-by{font-size:13px}
  .sm-ad-slot.sm-prep-ad .sm-quote-en{font-size:16.5px}
  .sm-ad-slot.sm-prep-ad .sm-quote-zh{font-size:16px}
  .sm-ad-slot.sm-prep-ad .sm-quote-by{font-size:13.5px}
}

/* 970×250 这一档版面高，语录跟着放大一档，避免大片留白配小字。
   选择器比上面的横屏规则更具体，因此不受其覆盖；窄屏走各自的 728×90 / 320×100 字号。 */
@media (min-width:1120px){
  .sm-prep-ads .sm-ad-slot.is-h .sm-quote{padding:20px 34px;gap:8px}
  .sm-prep-ads .sm-ad-slot.is-h .sm-quote-en{font-size:20px}
  .sm-prep-ads .sm-ad-slot.is-h .sm-quote-zh{font-size:18px}
  .sm-prep-ads .sm-ad-slot.is-h .sm-quote-zh:first-child{font-size:22px}
  .sm-prep-ads .sm-ad-slot.is-h .sm-quote-by{font-size:14px}
}

/* ============================================================
   手机横向矮条广告位（100px，对应 320×100 移动大横幅，与站内 is-h / sm-prep-ad
   的手机 100px 档一致）
   - 默认完全不占位，只在 ≤767px 出现；桌面 / 宽屏不受影响。
   - .sm-ad-inline ：练习页主题与播放器之间，随内容流排布。
   - .sm-ad-bottom：列表页屏幕底部固定，始终留在视口里，不随列表滚动出现/消失。
   - 列表页 body 带 sm-has-bottom-ad：body 是 flex 一屏布局，统一用 --sm-fixed-h
     让出底条高度（100px），.sm-shell / .sm-main 自己变矮，滚动内容末尾能滚到
     底条上方，零遮挡；.sm-toast 也只认这一个变量，不再单独叠一遍。
   - 语录三行在 100px 容器内垂直居中、上下各留 4px 内边距，单行截断不撑破横条；
     未来 .sm-ad-fill 里放真实广告即自动盖住语录。
   - 本块保持 max-width:767px：681–767px 竖屏（如 720px 宽平板竖屏）同样有固定
     底条，必须同样拿到 --sm-fixed-h:100px；桌面 >767px 由基础层 0px 兜底。
   放在文件末尾，确保不被前面的 is-rail / is-h / 横屏字号规则覆盖。
   ============================================================ */
.sm-ad-inline,.sm-ad-bottom{display:none}
.sm-ad-slot.is-strip{display:none}

@media (max-width:767px){
  .sm-ad-inline{display:block;flex:none;margin:6px 0 2px}

  .sm-ad-bottom{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:40;
    background:#fff;box-shadow:inset 0 1px 0 var(--line);
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  body.sm-page.sm-has-bottom-ad{
    /* 100 = .sm-ad-slot.is-strip 的内容高。顶部分隔线用 inset 阴影画，不占布局高度，
       所以底条实高就是 100px，与补偿精确相等，main 底边不会压在广告上。 */
    --sm-fixed-h:100px;
    padding-bottom:calc(var(--sm-fixed-h) + env(safe-area-inset-bottom,0px));
  }

  .sm-ad-slot.is-strip{
    display:block;width:100%;max-width:none;height:100px;
    border:0;border-radius:0;background:#f7f8fc;
  }
  .sm-ad-slot.is-strip .sm-quote{
    flex-direction:column;justify-content:center;gap:0;padding:4px 12px;
  }
  .sm-ad-slot.is-strip .sm-quote > p{
    max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .sm-ad-slot.is-strip .sm-quote-en{font-size:12px;line-height:1.3}
  .sm-ad-slot.is-strip .sm-quote-zh{font-size:13px;line-height:1.4}
  .sm-ad-slot.is-strip .sm-quote-by{font-size:12px;line-height:1.3;margin-top:3px}
}

/* ============================================================
   手机竖屏（≤680px 且 orientation:portrait）：一次性收敛
   放在文件最末尾，确保不被前面的 :1280 / :1341 / :1446 / :1485 反覆盖。
   桌面、平板横屏、矮屏横屏一律不吃这里的规则。
   ============================================================ */
@media (max-width:680px) and (orientation:portrait){

  /* ---------- A 组：逐句精读两行化（本组不含任何 font-size） ----------
     第一行：左侧人名 / 右侧精读 SVG；第二行：整行原文。
     不声明 grid-template-rows，row-gap:0；隐藏原文时 .sm-line-text 连
     margin-top:6px 一起 display:none，不留空轨道。 */
  .sm-line-head{
    display:grid;grid-template-columns:auto minmax(0,1fr) auto;
    column-gap:8px;row-gap:0;align-items:center;
  }
  .sm-line-play{grid-column:1;grid-row:1}
  .sm-line-meta{grid-column:2;grid-row:1;padding-top:0;min-width:0}
  .sm-gram-btn{grid-column:3;grid-row:1;justify-self:end}
  .sm-line-text{
    grid-column:1/-1;grid-row:2;align-self:start;
    padding-top:0;margin-top:6px;overflow-wrap:break-word;
  }
  .sm-line-speaker{min-width:0;overflow-wrap:anywhere}
  /* 整句含义：标题一行、中文翻译一行 */
  .smg-meaning{display:flex;flex-direction:column;align-items:stretch;gap:6px}
  .smg-meaning-tag{align-self:flex-start;margin-top:0}
  .smg-meaning-text{width:100%;flex:0 0 auto;overflow-wrap:break-word}

  /* ---------- B 组：紧凑化 + 字号收敛（含生词本 / 生词复习 / 题目面板） ---------- */
  /* 页头 / 通用 */
  .sm-pagebar{margin-bottom:16px;gap:12px}
  .sm-pagebar h1{font-size:17px}
  .sm-lede{font-size:14px}
  .sm-btn{min-height:44px;font-size:14px}
  .sm-chip{font-size:13px}
  .sm-foot{padding:14px 0 0}
  /* 生词本 */
  .sm-stats{margin:14px 0;gap:8px}
  .sm-toolbar{margin-bottom:10px;gap:8px}
  .sm-vrow-btn{min-height:56px;padding:10px 12px}
  /* 听力 / 精读 / 题目 */
  .sm-line-text{font-size:15px}
  .smg-sentence{font-size:15px;line-height:1.7}
  .sm-quiz-top{margin-bottom:10px;gap:10px}
  .sm-quiz-count{font-size:13px}
  .sm-q-title{font-size:17px;line-height:1.4}
  .sm-opt{font-size:15px;min-height:48px;padding:9px 12px}
  /* 覆盖基础 :526 的 24px，去掉按钮自身 12px，有效间距 = 12px（不同组下限） */
  .sm-quiz-actions{margin-top:12px}
  .sm-quiz-actions .sm-btn{width:auto;min-width:120px;min-height:44px}
  /* 生词复习：整屏只留「进度 + 卡片 + 显示答案」，元素间距整体压一档 */
  .sm-review-head{padding:6px 0 0}
  .sm-review-meta{margin-top:6px;font-size:12.5px;gap:8px}
  .sm-review-progress{height:5px;margin-top:6px}
  .sm-flash{padding:18px 16px 16px;margin-top:10px;min-height:0}
  .sm-flash-tag{font-size:11.5px;padding:2px 10px}
  .sm-flash-word{margin-top:10px;font-size:17px}
  .sm-flash-phon{margin-top:3px;font-size:15px}
  .sm-sound{margin-top:6px;min-height:32px;padding:0 12px;font-size:13px}
  .sm-flash-sent{margin-top:10px;font-size:15px;line-height:1.5}
  .sm-review-actions{margin-top:10px;gap:8px}
  .sm-btn-wide{min-height:44px}
  .sm-grades{gap:8px}
  .sm-done{padding:22px 18px}
  .sm-done-num{font-size:40px}
  .sm-done-list{margin-top:14px;gap:6px}
  .sm-done h2{margin-top:6px}
  .sm-done-note{margin-top:8px}

  /* ---------- C 组：底部固定播放区 dock + 统一 padding-bottom 补偿 ----------
     .sm-player 自己 fixed，不新增 .sm-dock 容器；「显示原文」已在同节点内。
     DOM 顺序 = 视觉顺序 = Tab 焦点序：第一行 play + body(顺序/单句) + 显示原文，
     第二行语速三档（flex:1 1 100% 独占一行），完全不需要 CSS order。
     .sm-player-now 竖屏直接 display:none（列表自带 .sm-line-no 序号 / 跳动条，
     进度冗余；320px 下它还会把 .sm-modes 挤出可用宽）。
     #sm-player[hidden] 由 :30 [hidden]{display:none !important} 兜底。
     实测 dock 高度：44(play) + 6(row-gap) + 27(tool) + 8+8(padding) + 1(上边框) = 94px。 */
  body.sm-practice-page{
    --sm-fixed-h:94px;
    padding-bottom:calc(var(--sm-fixed-h) + env(safe-area-inset-bottom,0px));
  }
  body.sm-practice-page .sm-player{
    position:fixed;left:0;right:0;bottom:0;z-index:40;
    display:flex;flex-wrap:wrap;align-items:center;
    column-gap:8px;row-gap:6px;
    padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));
    background:var(--surface);border:0;border-top:1px solid var(--line);
    border-radius:16px 16px 0 0;
    box-shadow:0 -6px 20px rgba(31,36,55,.10);
    margin:0;
  }
  body.sm-practice-page .sm-play{flex:none;width:44px;height:44px}
  body.sm-practice-page .sm-play svg{width:19px;height:19px}
  body.sm-practice-page .sm-player-body{flex:1 1 auto;min-width:0;flex-wrap:nowrap;gap:8px}
  body.sm-practice-page .sm-player-now{display:none}
  body.sm-practice-page .sm-modes{gap:5px;flex:none}
  body.sm-practice-page .sm-mode{min-height:28px;padding:0 9px;font-size:12px}
  body.sm-practice-page .sm-text-toggle{flex:none;min-height:28px;padding:0 9px;font-size:12px}
  body.sm-practice-page .sm-player-tools{flex:1 1 100%;justify-content:flex-start;gap:6px}
  body.sm-practice-page .sm-speed-label{font-size:12px}
  body.sm-practice-page .sm-tool{min-height:27px;padding:0 10px;font-size:12px}

  /* ---------- D 组：听力练习 / 生词本 / 生词复习 统一字号与间距 ----------
     口径：标题 ≤17px、正文 ≤17px、解释/辅助 ≥13px、按钮 14px（用户红线 13–17）。
     .sm-flash-word（单词卡主词）已按用户要求压到 17px；
     .sm-done-num/.stat .n（大数字展示）不属于标题/正文/解释/按钮四类，刻意不压。 */
  .sm-hist-main .t{font-size:17px}
  .sm-hist-main .m{font-size:13px;margin-top:3px}
  .sm-hist-row{min-height:0;padding:10px 12px;gap:10px}
  .sm-hist-list{gap:8px}
  .sm-hist-ico{width:36px;height:36px}
  .sm-hist-ico svg{width:18px;height:18px}
  /* 失败行：右侧同一列里「生成失败」徽章在上、「重新生成」按钮在下，
     中间标题/摘要拿回整行宽度（此前并排挤成一字一行）。 */
  .sm-hist-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:10px;row-gap:6px}
  .sm-hist-row>.sm-hist-ico{grid-column:1;grid-row:1}
  .sm-hist-row>.sm-hist-main{grid-column:2;grid-row:1;min-width:0}
  .sm-hist-row>.sm-hist-badge{grid-column:3;grid-row:1;justify-self:end}
  .sm-hist-row>.sm-hist-chev{grid-column:3;grid-row:1;justify-self:end}
  .sm-hist-row>.sm-hist-regen{grid-column:3;grid-row:2;justify-self:end}
  .sm-flash-def{font-size:17px}
  .sm-done h2{font-size:17px}
  .sm-done-note{font-size:13px}
  .sm-foot{font-size:13px}
  .sm-grade{min-height:56px;font-size:14px;padding:8px 6px}
  .sm-vocab-list{gap:8px}
  .sm-vsent{font-size:15px}
  .sm-vnote{font-size:13px}
  .sm-pagebar{margin-bottom:12px}

  /* ---------- E 组：练习页 WAP 整页滚动 ----------
     手机竖屏不再是「标签面板内滚动」，整页跟着滚；播放器仍 fixed 底部。
     只解除高度链，不搬 DOM、不加 order。body 的 padding-bottom:94px 补偿保留。 */
  html,body.sm-practice-page{overflow:visible}
  .sm-practice-page{height:auto;min-height:100dvh;max-height:none}
  .sm-practice-page>.sm-shell{flex:none;align-items:flex-start}
  /* width:100% 必须显式声明：flex:none + width:auto 会按内容 max-content
     收缩适配，显示原文后整列被撑出屏幕（用户实测 bug）。 */
  .sm-practice-page>.sm-shell>.sm-main{flex:none;width:100%;min-height:0;overflow:visible}
  /* 练习页左右内边距独立放宽（顶栏 .sm-top 与 .sm-shell 共用同一变量，边缘对齐） */
  body.sm-practice-page{--sm-side-l:20px;--sm-side-r:20px}
  .sm-practice-page .sm-panes{flex:none;overflow:visible;min-height:0;margin-top:6px}
  .sm-practice-page .sm-pane{flex:none;min-height:0}
  .sm-practice-page .sm-pane.is-on{display:block}
  .sm-practice-page .sm-pane-scroll{flex:none;overflow:visible;padding-right:0;scrollbar-gutter:auto;padding-bottom:16px}

  /* ---------- F 组：标题换行 + 原文行只增高不撑宽 ----------
     标题一行、难度/数量提示第二行；标题可任意断行。
     overflow-wrap:anywhere 才会收缩 min-content（break-word 不会），
     跨列网格项的长文本不会把列撑出屏幕。 */
  .sm-practice-titleline{flex-direction:column;align-items:stretch;gap:3px}
  .sm-practice-head h1{overflow-wrap:anywhere;line-height:1.35}
  .sm-practice-meta{margin-left:0;text-align:left;white-space:normal;overflow:visible;text-overflow:clip;flex:none;min-width:0}
  .sm-line-text{overflow-wrap:anywhere}
  .smg-meaning-text{overflow-wrap:anywhere}

  /* ---------- G 组：新增练习弹层字号收敛（13–17px）+ 按钮再缩一档 ----------
     输入框/label/计数 chips 已由 ≤680 块压到 14px / 13px；这里补弹层标题、
     弹层内边距和两颗行内小按钮。 */
  .sm-modal-new .sm-modal-head{padding:16px 20px 10px}
  .sm-modal-new .sm-modal-head h2{font-size:17px}
  .sm-modal-new .sm-new-body{padding:12px 20px 4px}
  .sm-modal-new .sm-actions{padding:10px 20px 14px}
  .sm-modal-new .sm-actions .sm-btn{min-height:44px;padding:0 18px;font-size:14px}
  .sm-btn-inline{min-height:30px;padding:0 11px;font-size:13px}
  .sm-sc-card .st{font-size:17px}
  .sm-sc-card .sd{font-size:15px}
}

/* 矮屏竖屏二次收紧：只收页面级间距 + 显式回写最紧值，绝不放宽。
   dock 口径不变：--sm-fixed-h 仍为 94px，两行结构（flex-wrap:wrap /
   .sm-player-tools{flex:1 1 100%}）由上方竖屏块以更高特异性锁死；这里
   严禁回写 :1356 的 flex-wrap:nowrap / :1358 的 .sm-player-tools{flex:none}，
   也不缩 dock 高度，保持实测 94px = 补偿 94px，零遮挡。 */
@media (max-width:680px) and (orientation:portrait) and (max-height:520px){
  body.sm-practice-page{--sm-fixed-h:94px}
  /* 显式回写：后置竖屏块不得把既有 :1341 的矮屏最紧值放宽 */
  .sm-top{padding:6px var(--sm-side-r) 6px var(--sm-side-l)}
  .sm-practice-head{padding:0 0 4px}
  .sm-ptabs{margin-top:4px}
  .sm-panes{margin-top:4px}
  .sm-pane-scroll{padding-bottom:12px}
  /* 页面级间距再减 2px（同组 gap 守住 8px 可读下限，只收 margin） */
  .sm-pagebar{margin-bottom:12px}
  .sm-stats{margin:10px 0}
  .sm-toolbar{margin-bottom:8px}
  .sm-quiz-top{margin-bottom:8px}
  .sm-review-actions{margin-top:8px}
  .sm-done-list{margin-top:10px}
}