/* ============================================================
common.css — 「俄语学习中心」公共样式（唯一的设计 token 正本）
------------------------------------------------------------
设计方向：A「纸墨书卷」——暖纸底 / 墨蓝壳层 / 砖红签名 / Palatino 西里尔
结构：① :root token ② 基础排版 ③ .page-head ④ 通用组件 ⑤ 顶栏+抽屉
⑥ 图标系统 ⑦ 遮挡四段式（红线，逐字保留） ⑧ 响应式
约束：· 十六进制色值只允许出现在 :root；其余一律 var() / rgba()（带用途注释）
· 旧 token 名与旧 class 选择器全部保留（页面 CSS 不改也能整体换肤）
· 零外部资源：无 @font-face / CDN / 图标库 / 外链图
· 不做暗色模式；color-scheme:light 由 9 页 声明
token 正本：plans/russian-study-visual-upgrade-plan.md §3
============================================================ */
/* ============================================================
tokens.part.css ｜ T0 子任务 2 产物（design-system · tokens）
------------------------------------------------------------
用途：直接替换 russian-study/common.css 现有 :root（原第 13–88 行）。
规格出处：plans/russian-study-visual-upgrade-plan.md §3.1–§3.3 / §3.6 / §3.7。
规则：· 颜色十六进制只允许出现在本文件（且只在本 :root 内）；
· 旧 token 名全部保留、只改值（页面 CSS 不改也能整体换肤）；
· 零外部资源：字体全部系统栈，无 @font-face / CDN；
· 本文件只有 :root，不含任何选择器规则。
============================================================ */
:root{
/* ===== 墨蓝品牌阶（壳层、主操作、链接；§3.1） ===== */
--brand-50:#edf3f9; --brand-100:#d8e4f0; --brand-200:#b7cddd;
--brand-500:#2d6398; --brand-600:#23507f; --brand-700:#1b3a5f;
--brand-800:#142c49; --brand-900:#0f2238;
/* ===== 墨色阶（文字/壳层；§3.1） ===== */
--ink-900:#0f1a2b; --ink-800:#17263c; --ink-700:#1f3450;
--ink-600:#2b4767; --ink-500:#3d5b7d; --ink-400:#5f7893;
--ink-300:#93a5b8; --ink-200:#c4cedb; --ink-100:#dfe6ee;
/* ===== 纸色阶（底/卡/线；§3.1） ===== */
--paper-0:#fffdf8; --paper-50:#f8f4ec; --paper-100:#f2ecdf;
--paper-200:#e7ddcb; --paper-300:#d7c9b3;
/* ===== 暖红签名 accent（重音符号 / 品牌签名 / 图表“今天”；§3.1） ===== */
--accent-50:#fbf1ed; --accent-100:#f4ddd5; --accent-300:#e0b3a4;
--accent-500:#c05440; --accent-600:#b0452e; --accent-700:#8f3524;
/* ===== 语义色（去饱和；§3.1） ===== */
--success:#2c6a4a; --success-soft:#e7f1ea;
--warn:#8f5a12; --warn-soft:#f8efdc;
--danger:#8c1d15; --danger-soft:#f8e3df;
--info:#2b6183; --info-soft:#e6f0f5;
--purple:#6d4aa8; --purple-soft:#f0eaf7;
/* ===== 旧名兼容（§3.7：页面 CSS 不必一次改完） ===== */
--neutral-0:var(--paper-0); --neutral-50:var(--paper-50);
--neutral-100:var(--paper-100); --neutral-200:var(--paper-200);
--neutral-300:var(--paper-300); --neutral-500:var(--ink-500);
--neutral-700:var(--ink-700); --neutral-900:var(--ink-900);
--ink:var(--ink-900); --ink-2:var(--ink-500);
--line:var(--paper-200); --bg:var(--paper-50);
--gray:var(--ink-500); --gray-soft:var(--paper-100);
--blue:var(--brand-600); --blue-soft:var(--brand-50);
--green:var(--success); --green-soft:var(--success-soft);
--orange:var(--warn); --orange-soft:var(--warn-soft);
--red:var(--danger); --red-soft:var(--danger-soft);
--zh:var(--ink-700);
/* ===== 字体栈（§3.2；西里尔/拉丁在前，中文逐字回落） ===== */
--font-sans:"Segoe UI","Helvetica Neue","PingFang SC","Microsoft YaHei","Noto Sans SC","Hiragino Sans GB",system-ui,-apple-system,sans-serif;
--font-ru:"Palatino Linotype","Palatino","Book Antiqua","PT Serif","Times New Roman",serif;
--font-ipa:"Segoe UI","Charis SIL","Doulos SIL","Gentium Plus",sans-serif;
--font-mono:"Cascadia Mono","Consolas","SF Mono",Menlo,"Courier New",monospace;
/* ===== 字阶（§3.2；fluid 两档） ===== */
--fs-4xl:40px; --fs-3xl:32px; --fs-2xl:26px; --fs-xl:21px; --fs-lg:18px;
--fs-base:16px; --fs-md:15px; --fs-sm:14px; --fs-xs:13px; --fs-2xs:12px;
--fs-ru-word:clamp(34px,7.4vw,56px);
--fs-ru-sentence:clamp(20px,2.4vw,26px);
--fs-kicker:11px;
--lh-tight:1.2; --lh-snug:1.45; --lh-body:1.65; --lh-loose:1.8;
/* ===== 间距（4 基；§3.3） ===== */
--sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
--sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;
/* ===== 圆角（书卷感＝小圆角；§3.3） ===== */
--r-xs:4px; --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:18px; --r-pill:999px;
--radius-sm:var(--r-sm); --radius:var(--r-md); --radius-lg:var(--r-lg);
/* ===== 阴影（暖墨 3 层，无蓝色 glow；§3.3） ===== */
--sh-1:0 1px 2px rgba(23,38,60,.06);
--sh-2:0 6px 18px -12px rgba(23,38,60,.28);
--sh-3:0 18px 44px -26px rgba(23,38,60,.38);
--sh-focus:0 0 0 3px rgba(35,80,127,.18);
/* ===== 动效（§3.3） ===== */
--dur-1:120ms; --dur-2:180ms; --dur-3:260ms;
--ease:cubic-bezier(.22,.61,.36,1);
--ease-in-out:cubic-bezier(.4,0,.2,1);
/* ===== 布局 / 触控 / 层级（§3.3） ===== */
--tap:44px;
--wrap:1240px; --wrap-study:900px; --measure:68ch;
--page-wrap:var(--wrap); /* 旧名保留：各页只写 .wrap{--page-wrap:...} 覆盖 */
--pad-x:clamp(16px,3vw,32px);
--pad-t:clamp(14px,2vw,24px);
--pad-b:max(64px,calc(env(safe-area-inset-bottom,0px) + 40px));
--topbar-h:56px;
--z-topbar:40; --z-sheet:60; --z-modal:90; --z-toast:100;
--border:1px solid var(--line);
/* ===== 控件高度（新增；供组件层消费，不改变既有类名） ===== */
--control-h:44px; --control-h-lg:48px; --control-h-sm:40px;
}
/* ============================================================
components.part.css ｜ T0 子任务 2 产物（design-system · 通用组件层）
------------------------------------------------------------
范围：基础排版 / 容器 / .page-head / .kicker / .btn / .card / .sec /
.chip / .legend / .statbar·.stat / .tbl / 弹窗·toast·loading /
图标基座（§4.5 + findings §8.1）/ 遮挡四段式（逐字复制，红线）/
响应式 / prefers-reduced-motion。
不含（owner 自己写）：#topbar .ru-topbar .ru-nav .ru-user .ru-badge
.ru-switch .ru-login .ru-logout .ru-menu-btn .ru-sheet .ru-back。
规则：本文件零十六进制色值；半透明叠层一律写 rgba 且必须带用途注释；
旧 class 选择器全部保留（T1–T3 改完前旧页面仍靠它们渲染）。
规格：plans/russian-study-visual-upgrade-plan.md §2.2/§2.3/§3.4/§4.5/§4.3。
============================================================ */
/* ============================================================
0. 基础：html / body / 选区 / 焦点
============================================================ */
*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{
background:var(--paper-50);
/* 锚点不被 sticky 顶栏遮挡（§3.3） */
scroll-padding-top:calc(var(--topbar-h) + 8px);
/* 暗色模式明确不做（§3.5）；正式声明在 9 页 ，
此处为 CSS 兜底，避免移动端浏览器强制反色 */
color-scheme:light;
-webkit-text-size-adjust:100%;
text-size-adjust:100%;
}
body{
background:var(--bg); /* 纯纸底：删除旧版的两个径向光斑装饰（§2.4） */
color:var(--ink);
font-family:var(--font-sans);
font-size:var(--fs-base);
line-height:var(--lh-body);
overflow-wrap:break-word;
-webkit-tap-highlight-color:rgba(27,58,95,.10); /* 触控高亮：墨蓝 10%（原品牌蓝 12% 已退役） */
}
::selection{background:var(--brand-100);color:var(--brand-800);}
.hidden{display:none !important;}
:focus-visible{outline:2px solid var(--brand-600);outline-offset:2px;border-radius:var(--r-xs);}
/* ============================================================
1. 容器 / 正文辅助类
============================================================ */
.wrap{
max-width:var(--page-wrap);margin:0 auto;
padding:var(--pad-t) var(--pad-x) var(--pad-b); /* 旧浏览器 max()/env() 兜底 */
padding:
var(--pad-t)
max(var(--pad-x),env(safe-area-inset-right,0px))
var(--pad-b)
max(var(--pad-x),env(safe-area-inset-left,0px));
}
.hint,.sub,.dim,.modal-text,.legend-tip{max-width:var(--measure);}
.sub{color:var(--ink-500);font-size:var(--fs-sm);margin:0;}
.hint{margin:8px 2px 0;font-size:var(--fs-xs);color:var(--ink-500);line-height:1.7;}
/* ============================================================
2. .page-head —— 全站唯一页头（9 页同构）
------------------------------------------------------------
规范 DOM（T1–T3 照抄）：
… ← 可选（行内 icon + 文字）
01 · СЛОВАРЬ ← 可选
章节词典
…
← 可选
…
← 可选（meta / 主操作）
兼容：旧 .head-main / .head-side（study/library/curve 现网结构）、
无包裹层直接把 h1/sub 放在 .page-head 下（不塌）。
============================================================ */
.page-head{
display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
gap:12px 24px;margin:0 0 var(--sp-6);
}
.page-head-main,.page-head > .head-main{
display:flex;flex-direction:column;align-items:flex-start;
flex:1 1 320px;min-width:0;
}
.page-head-side,.page-head > .head-side{
display:flex;flex-direction:column;align-items:flex-end;gap:8px;
flex:0 0 auto;margin-left:auto;min-width:0;
}
.page-head .back{
display:inline-flex;align-items:center;gap:6px;
min-height:var(--tap);padding:0;margin:0 0 2px; /* 13px 文字也保证 44px 触控高度 */
font-size:var(--fs-xs);font-weight:500;line-height:var(--lh-tight);
color:var(--ink-500);text-decoration:none;border-radius:var(--r-xs);
transition:color var(--dur-1) var(--ease);
}
.page-head .back:hover{color:var(--brand-700);}
.page-head h1{
margin:0;font-size:var(--fs-3xl);font-weight:700;line-height:var(--lh-tight);
letter-spacing:-.01em;color:var(--ink-900);
}
.page-head .sub{margin:4px 0 0;font-size:var(--fs-sm);color:var(--ink-500);line-height:var(--lh-snug);}
.page-head .sub:empty{display:none;}
/* 兜底：没有 .page-head-main 包裹时不塌（直接子元素各自成行/可换行） */
.page-head > .back{flex:0 0 100%;}
.page-head > h1,.page-head > .sub,.page-head > .page-head-kicker{flex:1 1 100%;}
.page-head > div{min-width:0;}
/* ============================================================
3. .kicker —— 编号 + 西里尔小字（取代 3px 渐变竖条，§2.2/§3.4）
用法：01 · СЛОВАРЬ
============================================================ */
.kicker,.page-head-kicker{
display:inline-flex;align-items:center;gap:6px;
margin:0 0 4px;
font-family:var(--font-ru);font-size:var(--fs-kicker);font-weight:600;
line-height:var(--lh-tight);letter-spacing:.14em;text-transform:uppercase;
color:var(--ink-500); /* T0 追加：11px 小字必须 >=4.5:1；ink-400 在 paper-50 仅 4.17:1，ink-500 = 6.40:1 */
}
.kicker-num,.kicker .num{color:var(--accent-600);font-variant-numeric:tabular-nums;letter-spacing:.08em;}
/* ============================================================
4. 通用按钮（.btn / .es-btn 同源；各页不重复定义基础样式）
primary = brand-700 底 + paper-0 字；secondary = 纸底 + 暖灰边 + 墨字
============================================================ */
.btn,.es-btn{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
min-height:var(--control-h);padding:9px 16px;
border:1px solid transparent;border-radius:var(--r-md);
font-family:inherit;font-size:var(--fs-md);font-weight:600;line-height:1.3;
text-decoration:none;text-align:center;cursor:pointer;
background:var(--brand-700);color:var(--paper-0);
transition:background var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),
box-shadow var(--dur-1) var(--ease),transform var(--dur-1) var(--ease),
opacity var(--dur-1) var(--ease);
}
.btn:hover,.es-btn:hover{background:var(--brand-600);}
.btn:active,.es-btn:active{transform:translateY(1px);}
.btn:disabled,.es-btn:disabled{opacity:.55;cursor:not-allowed;}
.btn:disabled:active,.es-btn:disabled:active{transform:none;}
.btn.primary,.es-btn.primary{background:var(--brand-700);color:var(--paper-0);}
.btn.primary:hover,.es-btn.primary:hover{background:var(--brand-600);}
/* secondary：纸底 + paper-300 边 + ink-700 字（新类名，旧页可用 .btn-navy） */
.btn.secondary,.es-btn.secondary,.btn-secondary{
background:var(--paper-0);border-color:var(--paper-300);color:var(--ink-700);
}
.btn.secondary:hover,.es-btn.secondary:hover,.btn-secondary:hover{
background:var(--paper-50);border-color:var(--ink-300);color:var(--ink-900);
}
/* ghost：无边透明（hover 才出现纸灰底） */
.btn.ghost,.es-btn.ghost,.btn-nav{background:transparent;border-color:transparent;color:var(--ink-700);}
.btn.ghost:hover,.es-btn.ghost:hover,.btn-nav:hover{
background:var(--paper-100);border-color:var(--paper-200);color:var(--ink-900);
}
/* danger：透明底 + danger 边/字，hover danger-soft */
.btn-danger{background:transparent;border-color:var(--danger);color:var(--danger);}
.btn-danger:hover{background:var(--danger-soft);border-color:var(--danger);color:var(--danger);}
/* 旧功能色按钮：类名全保留，只换 token */
.btn-blue{background:var(--brand-600);color:var(--paper-0);}
.btn-blue:hover{background:var(--brand-700);}
.btn-navy{background:var(--brand-50);border-color:var(--brand-100);color:var(--brand-700);}
.btn-navy:hover{background:var(--brand-100);border-color:var(--brand-200);color:var(--brand-800);}
.btn-orange{background:var(--warn);color:var(--paper-0);}
.btn-orange:hover{background:var(--warn);box-shadow:inset 0 0 0 100px rgba(15,26,43,.14);/* hover 压暗 14%：warn 无深阶 token */}
.btn-green{background:var(--success);color:var(--paper-0);}
.btn-green:hover{background:var(--success);box-shadow:inset 0 0 0 100px rgba(15,26,43,.12);/* hover 压暗 12% */}
.btn-big{font-size:var(--fs-md);padding:12px 22px;border-radius:var(--r-md);min-height:var(--control-h-lg);white-space:nowrap;}
.btn-tool{font-size:var(--fs-sm);padding:10px 15px;}
/* ============================================================
5. 卡片 / 区块标题（.sec / .cv-title）
============================================================ */
.card,.es-card{
background:var(--paper-0);
border:1px solid var(--paper-200);
border-radius:var(--r-lg);
box-shadow:var(--sh-1);
padding:clamp(16px,1.8vw,24px);
}
.sec,.cv-title{
display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;
font-size:var(--fs-xl);font-weight:700;line-height:1.35;color:var(--ink-900);
margin:0 0 14px;
}
/* 旧的 3px 渐变竖条已删除（§3.4：改用编号 kicker）。
选择器保留为空壳，.today/.resume 等页面对 ::before 的覆写不会失效报错。 */
.sec::before,.cv-title::before{content:none;}
.sec > .kicker,.cv-title > .kicker{flex:0 0 100%;margin-bottom:2px;}
.sec-sub{font-size:var(--fs-xs);font-weight:600;color:var(--ink-500);letter-spacing:0;}
/* ============================================================
6. 课时芯片（首页 / 章节页共用四态）
============================================================ */
.chip-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;}
.chip{
position:relative;min-width:0;
display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:5px;
border:1px solid var(--paper-200);border-left:3px solid var(--ink-300);
border-radius:var(--r-sm);background:var(--paper-0);
padding:11px 13px 11px 14px;color:var(--ink-900);text-decoration:none;
box-shadow:var(--sh-1);
transition:transform var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease),
border-color var(--dur-1) var(--ease);
}
.chip:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:var(--brand-200);}
.chip:active{transform:none;}
.chip-title{
font-weight:600;font-size:14.5px;line-height:1.4;color:var(--ink-900);min-width:0;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.chip-sub{font-size:var(--fs-xs);color:var(--ink-500);line-height:1.4;}
.chip-status{
font-size:var(--fs-xs);font-weight:600;line-height:1.5;
padding:1px 9px;border-radius:var(--r-pill);white-space:nowrap;flex:none;
background:var(--paper-100);color:var(--ink-500);
}
.chip.st-mastered{border-left-color:var(--success);}
.chip.st-mastered .chip-status{background:var(--success-soft);color:var(--success);}
.chip.st-due{border-left-color:var(--warn);}
.chip.st-due .chip-status{background:var(--warn-soft);color:var(--warn);}
.chip.st-learning{border-left-color:var(--info);}
.chip.st-learning .chip-status{background:var(--info-soft);color:var(--info);}
.chip.st-new{border-left-color:var(--ink-300);background:var(--paper-50);}
.chip.st-new .chip-title{color:var(--ink-700);}
/* ============================================================
7. 图例（四态）
============================================================ */
.legend{
display:flex;flex-wrap:wrap;gap:8px;align-items:center;
margin:0 0 var(--sp-4);padding:9px 12px;
font-size:var(--fs-xs);background:var(--paper-50);
border:1px solid var(--paper-200);border-radius:var(--r-sm);
}
.lg{display:inline-flex;align-items:center;gap:6px;padding:2px 9px;border-radius:var(--r-pill);font-weight:600;line-height:1.5;}
.lg::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;}
.lg-mastered{background:var(--success-soft);color:var(--success);}
.lg-due{background:var(--warn-soft);color:var(--warn);}
.lg-learning{background:var(--info-soft);color:var(--info);}
.lg-new{background:var(--paper-100);color:var(--ink-500);}
.legend-tip{color:var(--ink-500);margin-left:auto;font-size:var(--fs-xs);}
/* ============================================================
8. .statbar / .stat —— 统计条（T1/T2 复用；数字 26–32 / 标签 12.5）
------------------------------------------------------------
规范 DOM：
兼容旧写法：library.html 的 .stat > .n / .l 与 .stat.ok / .stat.bad。
状态色只上数字色 +（可选）6px 圆点，不做整块底色（§3.4）。
============================================================ */
.statbar{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--sp-3);margin:0 0 var(--sp-4);}
.stat{
min-width:0;background:var(--paper-0);border:1px solid var(--paper-200);
border-radius:var(--r-md);padding:12px 14px;text-align:center;
}
.stat .n,.stat-value{
display:block;font-size:clamp(26px,2.2vw,32px);font-weight:800;line-height:1.1;
color:var(--ink-900);font-variant-numeric:tabular-nums;letter-spacing:-.01em;
}
.stat .l,.stat-label{
display:block;margin-top:4px;font-size:12.5px;font-weight:500;line-height:1.4;
color:var(--ink-500);
}
.stat.ok .n,.stat.ok .stat-value,.stat-ok .n,.stat-ok .stat-value{color:var(--success);}
.stat.bad .n,.stat.bad .stat-value,.stat-bad .n,.stat-bad .stat-value{color:var(--danger);}
.stat.due .n,.stat.due .stat-value,.stat-due .n,.stat-due .stat-value{color:var(--warn);}
.stat-dot{
display:inline-block;width:6px;height:6px;border-radius:50%;flex:none;
background:currentColor;margin-right:5px;vertical-align:.08em;
}
/* ============================================================
9. 表格通用类（opt-in：只有加了 .tbl 才生效，不写裸 table 选择器）
============================================================ */
.tbl{width:100%;border-collapse:collapse;font-size:var(--fs-sm);color:var(--ink-700);}
.tbl thead th{
background:var(--paper-100);color:var(--ink-600);
font-size:var(--fs-xs);font-weight:600;line-height:1.4;text-align:left;
padding:9px 12px;border-bottom:1px solid var(--paper-200);white-space:nowrap;
}
.tbl td{padding:9px 12px;border-bottom:1px solid var(--paper-200);vertical-align:top;}
.tbl tbody tr:hover td{background:var(--paper-50);}
.tbl .num,.tbl th.num,.tbl td.num{text-align:right;font-variant-numeric:tabular-nums;}
.tbl caption{caption-side:top;text-align:left;font-size:var(--fs-xs);color:var(--ink-500);padding:0 0 6px;}
/* ============================================================
10. 弹窗 / 轻提示 / 加载遮罩（common.js 的 confirmDialog / toast / setLoading）
类名与语义全保留，只换 token；背板去毛玻璃、改纯墨色半透明（§3.4）
============================================================ */
.ru-modal-mask{
position:fixed;inset:0;z-index:var(--z-modal);
background:rgba(15,26,43,.44); /* 墨色背板 44%（ink-900 半透明），不叠加毛玻璃 */
display:flex;align-items:center;justify-content:center;
padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px))
max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
overflow:auto;
}
.ru-modal{
background:var(--paper-0);border:1px solid var(--paper-200);border-radius:var(--r-lg);
box-shadow:var(--sh-3);width:min(520px,calc(100vw - 32px));max-width:100%;
max-height:calc(100dvh - 32px);overflow:auto;margin:auto;
padding:20px clamp(16px,2.6vw,24px) 18px;
}
.ru-modal-title{font-size:var(--fs-xl);font-weight:700;line-height:1.35;color:var(--ink-900);margin:0 0 8px;}
.ru-modal-text{font-size:var(--fs-md);color:var(--ink-500);margin:0 0 16px;line-height:1.7;white-space:pre-line;}
.ru-modal-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;}
.ru-toast-host{
position:fixed;left:50%;bottom:26px;transform:translateX(-50%);
z-index:var(--z-toast);display:flex;flex-direction:column;align-items:center;gap:8px;
pointer-events:none;max-width:90vw;
}
.ru-toast{
background:rgba(15,26,43,.95); /* ink-900 95%：纸色文字的轻提示底 */
color:var(--paper-0);
padding:9px 16px;border-radius:var(--r-sm);font-size:var(--fs-sm);line-height:1.5;
box-shadow:var(--sh-3);text-align:center;
animation:ru-toast-in var(--dur-2) var(--ease);
}
.ru-toast.ok,.ru-toast-ok{background:var(--success);color:var(--paper-0);}
.ru-toast.warn,.ru-toast-warn{background:var(--warn);color:var(--paper-0);}
.ru-toast.error,.ru-toast-error{background:var(--danger);color:var(--paper-0);}
@keyframes ru-toast-in{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.ru-loading{
position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:95;
display:flex;align-items:center;gap:10px;
background:var(--paper-0);border:1px solid var(--paper-200);
border-radius:var(--r-pill);box-shadow:var(--sh-2);
padding:10px 18px;font-size:var(--fs-sm);color:var(--ink-700);
}
.ru-spinner{
width:16px;height:16px;border-radius:50%;flex:none;
border:2px solid var(--brand-100);border-top-color:var(--brand-600);
animation:ru-spin .8s linear infinite;
}
@keyframes ru-spin{to{transform:rotate(360deg);}}
body.ru-busy{cursor:progress;}
/* ============================================================
11. 图标基座（§4.5 / §4.3 / findings §8.1）
画法契约：24 viewBox、stroke 1.75、round、currentColor，尺寸只取
12/14/16/18/20/22/26 七档；容器规则按「容器优先」覆盖档位类。
顶栏相关（.ru-topbar .ru-nav .ic / .ru-badge .ic / .ru-back .ic）
由 owner 的顶栏段落负责，本节不写。
============================================================ */
.ic{
display:inline-block;flex:none;width:18px;height:18px;
vertical-align:-.125em;color:currentColor;
fill:none;stroke:currentColor;stroke-width:1.75;
stroke-linecap:round;stroke-linejoin:round;overflow:visible;
}
.ic[data-fill]{fill:currentColor;stroke:none;}
.ic-12{width:12px;height:12px;} .ic-14{width:14px;height:14px;}
.ic-16{width:16px;height:16px;} .ic-18{width:18px;height:18px;}
.ic-20{width:20px;height:20px;} .ic-22{width:22px;height:22px;}
.ic-26{width:26px;height:26px;}
/* 旧别名（findings §8.1 已在验证页使用，保留） */
.ic--lg{width:22px;height:22px;}
.ic--sm{width:14px;height:14px;}
/* ---- 容器分档（§4.5） ---- */
.btn .ic,.es-btn .ic{width:16px;height:16px;}
.page-head .back .ic{width:14px;height:14px;}
.say .ic,.tts-sm .ic{width:18px;height:18px;}
.tts-btn .ic{width:20px;height:20px;}
.qz-big-say .ic{width:26px;height:26px;}
.qz-big-say.slow .ic{width:20px;height:20px;}
.entry-icon .ic{width:22px;height:22px;}
.qz-pill .ic,.qz-rv-res .ic,.mark .ic,.qz-opt .mark .ic{width:13px;height:13px;}
/* ---- findings §8.1 旧类名尺寸覆盖（保留旧类名，不改旧按钮尺寸） ---- */
.tk-caret .ic{width:12px;height:12px;stroke-width:2;transition:transform var(--dur-1) var(--ease);}
details[open] > summary .tk-caret .ic{transform:rotate(180deg);}
.qz-hintline .ic{width:15px;height:15px;vertical-align:-.16em;margin-right:2px;}
.qz-fb-head .ic{width:16px;height:16px;vertical-align:-.18em;}
.sec .ic{width:18px;height:18px;vertical-align:-.14em;margin-right:6px;color:var(--brand-600);}
/* ---- 静态 HTML 水合容器（RU.hydrateIcons 的兜底占位） ---- */
[data-icon]{display:inline-flex;align-items:center;justify-content:center;line-height:0;}
/* ============================================================
12. 三档遮挡 CSS 基座（逐字复制自现网 common.css 第 324–345 行，红线不改）
============================================================ */
/* ============================================================
三档遮挡 CSS 基座（A §2.4.1 定稿；学习页/浏览页共用）
full=不挡；zh=遮中文；ru=遮俄文。必须用 blur+opacity，保持布局稳定。
============================================================ */
.mask{
filter:blur(9px);
opacity:.32;
user-select:none;
-webkit-user-select:none;
transition:filter .12s var(--ease),opacity .12s var(--ease);
}
/* 俄文侧容器内嵌 🔊/🐢 按钮，父级 filter 会连按钮一起糊掉 → 模糊下移到文字 span */
.w-ru.mask,.ex-ru.mask,.s-ru.mask{filter:none;opacity:1;}
.w-ru.mask > span,.ex-ru.mask > span,.s-ru.mask > span{
display:inline-block;filter:blur(9px);opacity:.32;
}
.card.revealed .mask{filter:none;opacity:1;}
.card.revealed .w-ru > span,.card.revealed .ex-ru > span,
.card.revealed .s-ru > span{filter:none;opacity:1;}
.card.revealed .reveal-tip{display:none;}
/* 重音开关：body.stress-off 时隐藏独立的 .w-stress 行（JS 仍可用 ru 原形渲染） */
.stress-off .w-stress{display:none;}
/* ============================================================
13. 响应式
============================================================ */
/* 触控/手机：44px 触控高度 + 16px 输入字号（防 iOS 聚焦缩放） */
@media (pointer:coarse),(max-width:760px){
button,.btn,.es-btn,.chip,
input[type="text"],input[type="password"],input[type="search"],
input[type="email"],input[type="number"],select,textarea{
min-height:var(--tap);
}
input[type="text"],input[type="password"],input[type="search"],
input[type="email"],input[type="number"],select,textarea,.ru-input{
font-size:16px;
}
/* 主 CTA 在触屏/移动仍保持 48（上面的 .btn 通用 44px 会盖掉 .btn-big） */
.btn-big{min-height:var(--control-h-lg);}
}
@media (max-width:760px){
.page-head{gap:6px 12px;margin-bottom:var(--sp-4);}
.page-head h1{font-size:var(--fs-2xl);line-height:1.25;}
.page-head-side{align-items:flex-start;flex:1 1 100%;margin-left:0;}
.card,.es-card{border-radius:var(--r-md);padding:16px 14px;}
.sec{font-size:18px;margin-bottom:12px;}
.chip-grid{grid-template-columns:1fr;}
.chip-title{font-size:15px;}
.legend{gap:6px;padding:8px 10px;}
.legend-tip{margin-left:0;flex-basis:100%;font-size:13.5px;}
.statbar{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.stat{padding:12px 10px;}
.tbl{font-size:var(--fs-xs);}
.tbl thead th,.tbl td{padding:8px 10px;}
.ru-modal-actions{flex-direction:column;gap:8px;}
.ru-modal-actions .btn{width:100%;}
}
@media (min-width:761px){
.page-head-side{align-items:flex-end;margin-left:auto;}
.chip-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));}
.legend-tip{margin-left:auto;}
.statbar{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));}
}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{
animation-duration:.01ms !important;animation-iteration-count:1 !important;
transition-duration:.01ms !important;scroll-behavior:auto !important;
}
}
/* icons.part.css — 图标专属补丁（owner 合并进 common.css 的「图标系统」章节之后）
*
* 只放 plan §4.5 基础规则覆盖不到的两件事。基础规则（照抄即可，本文件不重复）：
* .ic{display:inline-block;flex:none;vertical-align:-.125em;color:currentColor;
* fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
* .ic-12 … .ic-26 七档尺寸 + 各容器分档（.btn/.say/.tts-btn/.entry-icon/.qz-pill …）
*/
/* ① 实心图标的 fill 优先级修复 —— 必需项
* 数据里 dot / play / star 在形状上写了 fill="currentColor" stroke="none"。
* 这是 presentation attribute，优先级低于 .ic 的 CSS 声明（fill:none;stroke:currentColor），
* 不修的话 star/play 会变成「空心 + 1.75 描边」（三角/五角星会胖一圈），dot 会变成空心圆。
* 用属性选择器把优先级提到 (0,2,1) > .ic 的 (0,1,0)。 */
.ic path[fill="currentColor"],
.ic circle[fill="currentColor"],
.ic polygon[fill="currentColor"]{fill:currentColor;stroke:none}
/* 兼容 findings §8.1 的实例级开关（