/* ════════════════════════════════════════════════════════════════ StudyTeacher — Mature Learning V2 · shared visual foundation ── 这个文件是什么 ── V2 全部应用页共用的**唯一**设计令牌与组件层（Figma「44 — Visual System」的落地面）。 页面只允许用这里的变量与类，不许各自再复制一套颜色 / 圆角 / 阴影。 旧 styles.css 仍被登录 / 找回 / 定价等页与 teacher 页里的遗留弹层引用； 两者共存时以本文件为准（本文件在后加载，且所有类都带 st- 前缀，不会互相污染）。 ── 视觉令牌（FIGMA → BROWSER IMPLEMENTATION HANDOFF · 151:8，Owner 冻结）── 页面底色 #F3F5F8 → 白色主卡 #FFFFFF（1px #D7DEE8 边框 · 0 4px 14px rgba(27,36,48,.06) 阴影）→ 卡内辅助面（浅蓝 / 浅绿 / 浅黄）。 三层必须一眼分得开：不许米色贴米色、灰贴灰。主 CTA 一律深色底 + #FFFFFF 字（--st-cta）；森林绿只做品牌 / 状态 / 链接色。 字体沿用（Literata 标题 / Nunito Sans 正文，中文单独指定字体栈，见 CLAUDE.md「设计调性」）。 ⚠ Figma 文件本轮仍不可达（登录墙），以上取值来自 Owner 交接文本；令牌集中在 :root 一处，改值页面零改动。 ── 断点 ── mobile < 768 底部导航 + 单列 + 老师面板做成底部抽屉 tablet 768–1099 顶部导航 + 两列自适应 desktop ≥ 1100 顶部导航 + 阅读区 / 老师面板并排 ════════════════════════════════════════════════════════════════ */ :root{ --st-bg:#F3F5F8; --st-surface:#FFFFFF; --st-surface-2:#EEF3F9; --st-surface-3:#E1E8F1; --st-border:#D7DEE8; --st-border-strong:#BFC9D6; --st-ink:#1B2430; --st-text:#334155; --st-muted:#5B6675; --st-faint:#8A94A3; --st-primary:#2f6b47; --st-primary-600:#275a3c; --st-primary-soft:#E6F4EA; --st-primary-soft-2:#D2EBDA; --st-on-primary:#ffffff; --st-cta:#1B2430; --st-cta-hover:#0F1620; --st-on-cta:#FFFFFF; --st-accent:#b8892b; --st-accent-soft:#FFF6D6; --st-danger:#b3261e; --st-danger-soft:#fde7e5; --st-warn:#8a6d1f; --st-warn-soft:#FFF6D6; --st-info:#3b5f8a; --st-info-soft:#E8F0FA; --st-highlight:#f8e0a8; --st-focus:#3B4A5C; --st-font-body:"Nunito Sans","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,sans-serif; --st-font-head:"Literata","Songti SC","Noto Serif SC","SimSun",serif; --st-font-zh-head:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif; --st-radius-sm:8px; --st-radius:12px; --st-radius-lg:18px; --st-radius-pill:999px; --st-shadow-soft:0 4px 14px rgba(27,36,48,.06); --st-shadow-lift:0 14px 40px rgba(27,36,48,.10); --st-sidebar-w:88px; --st-mobilebar-h:54px; --st-bottomnav-h:62px; --st-max:1280px; --st-gutter:24px; --st-transition:.16s ease; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body.st-body{margin:0;min-height:100vh;background:var(--st-bg);color:var(--st-text);font-family:var(--st-font-body);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden} body.st-body h1,body.st-body h2,body.st-body h3,body.st-body h4{color:var(--st-ink);font-family:var(--st-font-head);font-weight:700;line-height:1.25;margin:0} body.st-body:lang(zh-CN) h1,body.st-body:lang(zh-CN) h2,body.st-body:lang(zh-CN) h3,body.st-body:lang(zh-CN) h4{font-family:var(--st-font-zh-head);letter-spacing:.01em} body.st-body a{color:inherit} body.st-body button,body.st-body input,body.st-body select,body.st-body textarea{font-family:inherit;font-size:inherit} body.st-body .material-symbols-outlined{font-size:20px;line-height:1;font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 24;vertical-align:middle} body.st-body .material-symbols-outlined.fill{font-variation-settings:"FILL" 1,"wght" 500,"GRAD" 0,"opsz" 24} body.st-body [hidden]{display:none!important} .st-hidden{display:none!important} .st-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* 焦点：键盘用户必须看得见；两条规则（outline + box-shadow）一起管，只关一条等于没关。 */ body.st-body :focus{outline:none} body.st-body :focus-visible{outline:2px solid var(--st-focus);outline-offset:2px;box-shadow:none} @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}} /* ---------- Typography ---------- */ .st-h1{font-size:28px} .st-h2{font-size:22px} .st-h3{font-size:17px} .st-h4{font-size:15px} .st-lead{font-size:15px;color:var(--st-muted);margin:6px 0 0} .st-muted{color:var(--st-muted)} .st-faint{color:var(--st-faint)} .st-small{font-size:13px} .st-tiny{font-size:12px} .st-strong{font-weight:800;color:var(--st-ink)} .st-eyebrow{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--st-primary)} .st-mono{font-variant-numeric:tabular-nums} .st-en{font-family:var(--st-font-body)} .st-serif{font-family:var(--st-font-head)} /* ---------- Layout ---------- */ .st-app{min-height:100vh;display:flex;flex-direction:column} .st-main{flex:1;width:100%;max-width:var(--st-max);margin:0 auto;padding:22px var(--st-gutter) 40px} .st-main.st-wide{max-width:none} .st-main.st-narrow{max-width:860px} .st-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px} .st-page-head .st-lead{margin-top:4px} .st-grid{display:grid;gap:18px} .st-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))} .st-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))} .st-grid-main{grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr)} .st-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .st-col{display:flex;flex-direction:column;gap:10px} .st-between{justify-content:space-between} .st-gap-sm{gap:6px} .st-gap-lg{gap:18px} .st-wrap{flex-wrap:wrap} .st-grow{flex:1;min-width:0} .st-divider{height:1px;background:var(--st-border);margin:12px 0} .st-stack>*+*{margin-top:14px} /* ---------- 左侧 sidebar（Owner A · Figma 152:2 / 137:2 / 147 / 148 系列）---------- 一份标记，三种形态 —— 不是三套 DOM（三套 DOM 就会有三份 #accountChip / #langSelect 与三处失配）： · 紧凑 88px（**基态**）：平板 768–1199，以及任何调用 mountShell({layout:'rail'}) 的 工作区页（阅读页要把宽度留给三列工作区）。图标在上、文字在下。 · 展开 248px：≥1200 且没有要求紧凑的页面。图标 + 文字横排，并显示当前备考项目。 · 手机 ≤767：同一个