/* ============================================================
   css/panels/panels-grammar.css — 「外文 → 语法」这一块的样式（第 6 窗口）
   ------------------------------------------------------------
   前缀 `gr-`（交接说明里已给定，别的分区不要占用）。
   地基零件（按钮 / 输入框 / 进度条 / 三态 / 行列）在 panels-learning.css 与 panels-ec.css，
   这一份只放语法这一块自己的排版：今天那一格、错句卡、练一练、场景对话、
   小结、帮助、清干净、以及自己画的那个小窗。
   规矩：
     · 只用主题令牌（--ec-ink / --ec-sub / --ec-line / --rose …），不写死颜色
     · 零 emoji、零系统默认控件；触碰有动画反馈
     · 竖屏；窄屏 <370px 不横向溢出；底部留白含 --safe-bottom
     · prefers-reduced-motion 有替代（不位移、不淡入）
   ============================================================ */

/* ===== 主页：今天那一格 ===== */
.gr-today {
    border: 1px solid var(--ec-line-soft);
    border-radius: var(--ec-radius);
    padding: 16px 16px 14px;
    background: linear-gradient(180deg, rgba(201,168,168,0.055), rgba(201,168,168,0.015));
}
.gr-today-reason {
    font-family: var(--font-body); font-size: 13px; line-height: 1.75; color: var(--ec-sub);
}
.gr-today-title {
    font-family: var(--font-body); font-size: 16px; font-weight: 600; color: var(--ec-ink);
    margin-top: 4px; line-height: 1.45; overflow-wrap: anywhere;
}
.gr-today-go { margin-top: 12px; }

/* 右下角那一行：这一块存了什么 */
.gr-foot { padding: 22px 24px calc(28px + var(--safe-bottom, 0px)); text-align: center; }
.gr-foot-link {
    border: 1px solid var(--ec-line-soft); background: none; border-radius: 999px;
    padding: 5px 14px; min-height: 30px;
    font-family: var(--font-body); font-size: 11.5px; color: var(--ec-sub); cursor: pointer;
    transition: color var(--ec-dur) var(--ec-ease), border-color var(--ec-dur) var(--ec-ease), transform .12s var(--ec-ease);
}
.gr-foot-link:hover { color: var(--ec-rose-ink); border-color: rgba(201,168,168,0.4); }
.gr-foot-link:active { transform: scale(0.97); }
.gr-foot-note {
    display: block; margin-top: 8px;
    font-family: var(--font-body); font-size: 11px; line-height: 1.7; color: var(--ec-sub); opacity: .9;
}

/* ===== 我的错误 ===== */
.gr-filters { display: flex; gap: 8px; padding: 14px 24px 2px; }
.gr-chip {
    border: 1px solid var(--ec-line-soft); background: none; border-radius: 999px;
    min-height: 30px; padding: 4px 14px;
    font-family: var(--font-body); font-size: 12px; color: var(--ec-sub); cursor: pointer;
    transition: color var(--ec-dur) var(--ec-ease), border-color var(--ec-dur) var(--ec-ease), background var(--ec-dur) var(--ec-ease);
}
.gr-chip.is-on { color: var(--ec-rose-ink); border-color: rgba(201,168,168,0.5); background: var(--rose-light); }
.gr-err-meta { padding: 10px 24px 2px; font-family: var(--font-body); font-size: 11.5px; color: var(--ec-sub); }

.gr-err {
    margin: 10px 24px 0; padding: 12px 14px 10px;
    border: 1px solid var(--ec-line-soft); border-left: 3px solid rgba(201,168,168,0.55);
    border-radius: var(--ec-radius-s);
    background: var(--surface-solid);
}
.gr-err-top { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; flex-wrap: wrap; }
.gr-err-kind {
    font-family: var(--font-body); font-size: 10.5px; color: var(--ec-rose-ink);
    border: 1px solid rgba(201,168,168,0.35); border-radius: 999px; padding: 1px 8px;
}
.gr-err-sev { font-family: var(--font-body); font-size: 10.5px; color: var(--ec-sub); }
.gr-err-sev.is-hot { color: var(--ec-gold-ink); }
.gr-err-done {
    margin-left: auto; font-family: var(--font-body); font-size: 10.5px;
    color: var(--ec-sub); border: 1px dashed var(--ec-line); border-radius: 999px; padding: 1px 8px;
}
.gr-err-wrong {
    font-family: var(--font-body); font-size: 14px; line-height: 1.6; color: var(--ec-ink);
    overflow-wrap: anywhere;
}
.gr-err-right {
    margin-top: 5px; display: flex; gap: 8px; align-items: flex-start;
    font-family: var(--font-body); font-size: 13px; line-height: 1.6; color: var(--ec-ink);
    overflow-wrap: anywhere;
}
.gr-err-tag { flex-shrink: 0; font-size: 10.5px; color: var(--ec-sub); line-height: 1.9; }
.gr-err-why { margin-top: 5px; font-family: var(--font-body); font-size: 11.5px; line-height: 1.7; color: var(--ec-sub); }
.gr-err-acts { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.gr-err-acts .ec-mini-btn:disabled { opacity: .5; }

/* ===== 专项训练 ===== */
.gr-search { padding: 14px 24px 4px; }
.gr-topic .ec-row-desc { white-space: normal; }
.gr-count { font-family: var(--font-body); font-size: 12px; color: var(--ec-sub); }

/* ===== 基础教程：一题一张独立课程卡（R2-3）=====
   为什么单独一套：原来这一屏和「全部语法点」共用 `ec-row`，画出来是一行一行的连续横向长条
   （贴边、正文没有边界），与最初投诉的「语法子模块贴边、散落、难看」是同一件事。
   这一套只服务**基础教程**那一屏；「全部语法点」保留列表语义（共用同一份数据，不另做数据）。
   版心：左右 24px（与全外文其它块一致），窄屏 14px；卡内 14/16；细边 + 圆角 + 实底纸面。
   字号与颜色全部沿用现有变量，不加英文装饰、不做科技感。 */
.gr-topic-list-basics { padding: 4px 0 8px; }
/* 卡片撑满「去掉两侧留白」的那条线：`width: 100%` + 盒子算边（盒模型算进 border/padding），
   于是 390px 下每张卡都是 390 − 24 − 24 = 342px 宽，卡内文字左边 = 24 + 16 = 40px。 */
.gr-topic-list-basics .gr-topic-card { width: calc(100% - 48px); }
.gr-topic-card {
    display: flex; align-items: center; gap: 12px;
    /* 宽高都算死一点：flex 子项默认会被内容撑成不同宽度（实测画出来每张卡宽度都不一样），
       这里 box-sizing + width:auto 配合 margin 固定版心，卡内文字才有一致的左右留白。 */
    box-sizing: border-box;
    margin: 10px 24px 0; padding: 14px 16px;
    border: 1px solid var(--ec-line-soft); border-radius: var(--ec-radius);
    background: var(--surface-solid);
    text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.gr-topic-card:hover { border-color: var(--ec-line); }
.gr-topic-card:active { transform: scale(0.985); }
.gr-topic-card-main { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; }
.gr-topic-card-title {
    font-family: var(--font-display); font-size: 15px; line-height: 1.5; color: var(--ec-ink);
    overflow-wrap: anywhere;
}
.gr-topic-card-meta { font-family: var(--font-body); font-size: 11.5px; line-height: 1.65; color: var(--ec-sub); }
.gr-topic-card-stat { font-family: var(--font-body); font-size: 11px; line-height: 1.6; color: var(--ec-rose-ink); }
.gr-topic-card-arrow {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    border: 1px solid var(--ec-line-soft); color: var(--ec-sub);
}
@media (max-width: 369px) {
    .gr-topic-card { margin: 9px 14px 0; padding: 13px 14px; }
    .gr-topic-list-basics .gr-topic-card { width: calc(100% - 28px); }
}

.gr-lesson { padding: 20px 24px 4px; }
.gr-lesson-en {
    font-family: var(--font-script); font-size: 24px; line-height: 1.25;
    color: var(--rose); margin-bottom: 4px;
}
.gr-lesson-meta { font-family: var(--font-body); font-size: 11.5px; color: var(--ec-sub); margin-bottom: 14px; }
.gr-note-lines { border-top: 1px solid var(--ec-line); }
.gr-note-line {
    font-family: var(--font-body); font-size: 13.5px; line-height: 1.85; color: var(--ec-ink);
    padding: 9px 0; border-bottom: 1px solid var(--ec-line-soft);
    overflow-wrap: anywhere;
}
.gr-note-key {
    display: inline-block; min-width: 4.6em; margin-right: 6px;
    color: var(--ec-rose-ink); font-size: 12.5px;
}
.gr-mini-err { padding: 8px 0; border-bottom: 1px solid var(--ec-line-soft); }
.gr-mini-wrong { display: block; font-family: var(--font-body); font-size: 12.5px; color: var(--ec-sub); text-decoration: line-through; text-decoration-color: rgba(201,168,168,.5); overflow-wrap: anywhere; }
.gr-mini-right { display: block; font-family: var(--font-body); font-size: 13px; color: var(--ec-ink); margin-top: 2px; overflow-wrap: anywhere; }

/* 练一练 */
.gr-ex { padding: 18px 24px calc(28px + var(--safe-bottom, 0px)); }
.gr-ex-type { font-family: var(--font-body); font-size: 11px; letter-spacing: 1.5px; color: var(--ec-gold-ink); }
.gr-ex-prompt {
    margin-top: 8px; font-family: var(--font-display); font-size: 17px; line-height: 1.6;
    color: var(--ec-ink); overflow-wrap: anywhere;
}
.gr-ex-hint { margin-top: 6px; font-family: var(--font-body); font-size: 12px; line-height: 1.7; color: var(--ec-sub); }
.gr-answer { display: flex; gap: 10px; align-items: center; margin-top: 16px; flex-wrap: wrap; }
.gr-answer .ec-input { flex: 1 1 160px; min-width: 0; }
.gr-checking { margin-top: 12px; font-family: var(--font-body); font-size: 12px; color: var(--ec-sub); }

.gr-verdict {
    margin-top: 14px; padding: 12px 14px; border-radius: var(--ec-radius-s);
    border: 1px solid var(--ec-line-soft);
    opacity: 0; transform: translateY(4px);
    transition: opacity .24s var(--ec-ease), transform .24s var(--ec-ease);
}
.gr-verdict.gr-in { opacity: 1; transform: none; }
.gr-verdict.is-ok { border-color: rgba(140,170,140,0.4); background: rgba(140,170,140,0.07); }
.gr-verdict.is-no { border-color: rgba(201,168,168,0.45); background: rgba(201,168,168,0.06); }
.gr-verdict-line { display: flex; align-items: center; gap: 8px; }
.gr-verdict-mark { color: var(--ec-rose-ink); display: flex; }
.gr-verdict.is-ok .gr-verdict-mark { color: #5E7A6E; }
.gr-verdict-text { font-family: var(--font-body); font-size: 14px; color: var(--ec-ink); }
.gr-verdict-body { margin-top: 9px; }
.gr-vrow { display: flex; gap: 8px; align-items: flex-start; font-family: var(--font-body); font-size: 13px; line-height: 1.65; color: var(--ec-sub); overflow-wrap: anywhere; }
.gr-vrow.is-right { color: var(--ec-ink); margin-top: 4px; }
.gr-vtag { flex-shrink: 0; font-size: 10.5px; line-height: 2; min-width: 3.4em; }
.gr-vhint { margin-top: 7px; font-family: var(--font-body); font-size: 11.5px; line-height: 1.7; color: var(--ec-sub); }
.gr-vnote { margin-top: 8px; font-family: var(--font-body); font-size: 11px; color: var(--ec-sub); opacity: .9; }

.gr-result { padding: 30px 24px 6px; text-align: center; }
.gr-result-big { font-family: var(--font-display); font-size: 34px; line-height: 1.1; color: var(--ec-ink); }
.gr-result-sub { margin-top: 6px; font-family: var(--font-body); font-size: 12.5px; color: var(--ec-sub); }
.gr-result-note { margin-top: 12px; font-family: var(--font-body); font-size: 12.5px; line-height: 1.8; color: var(--ec-sub); }

/* ===== 场景练习 ===== */
.gr-pick-hint { padding: 0 24px; margin-top: 12px; }
.gr-resume {
    margin: 16px 24px 0; padding: 12px 14px; border-radius: var(--ec-radius-s);
    border: 1px solid rgba(201,168,168,0.4); background: var(--rose-light);
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.gr-resume-t { flex: 1 1 160px; font-family: var(--font-body); font-size: 12.5px; line-height: 1.6; color: var(--ec-ink); min-width: 0; }

.gr-sc { margin: 14px 24px 0; padding: 12px 14px; border: 1px solid var(--ec-line-soft); border-radius: var(--ec-radius); background: var(--surface-solid); }
.gr-sc-head { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; }
.gr-sc-label { font-family: var(--font-body); font-size: 14.5px; color: var(--ec-ink); }
.gr-sc-en { font-family: var(--font-display); font-style: italic; font-size: 11.5px; color: var(--ec-gold-ink); margin-left: 8px; }
.gr-sc-desc { display: block; margin-top: 3px; font-family: var(--font-body); font-size: 11.5px; line-height: 1.6; color: var(--ec-sub); }
.gr-sc-roles { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.gr-role {
    border: 1px solid var(--ec-line-soft); background: none; border-radius: 999px;
    min-height: 30px; padding: 4px 13px;
    font-family: var(--font-body); font-size: 12px; color: var(--ec-sub); cursor: pointer;
    transition: color var(--ec-dur) var(--ec-ease), border-color var(--ec-dur) var(--ec-ease), background var(--ec-dur) var(--ec-ease), transform .12s var(--ec-ease);
}
.gr-role:hover { color: var(--ec-rose-ink); border-color: rgba(201,168,168,0.42); }
.gr-role:active { transform: scale(0.97); }
.gr-role.is-on { color: var(--ec-rose-ink); background: var(--rose-light); border-color: rgba(201,168,168,0.5); }

.gr-mission {
    margin: 12px 24px 0; padding: 9px 12px; border-radius: var(--ec-radius-s);
    background: rgba(180,160,140,0.09);
    font-family: var(--font-body); font-size: 12px; line-height: 1.7; color: var(--ec-sub);
}
.gr-chat {
    margin: 12px 24px 0; padding: 4px 0 2px;
    max-height: 46vh; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
.gr-chat-empty { text-align: center; font-family: var(--font-body); font-size: 12px; color: var(--ec-sub); padding: 18px 0; }
.gr-b {
    max-width: 82%; margin: 8px auto 0 0; padding: 9px 13px;
    border-radius: 14px 14px 14px 4px;
    border: 1px solid var(--ec-line-soft); background: var(--surface-solid);
    font-family: var(--font-body); font-size: 13.5px; line-height: 1.65; color: var(--ec-ink);
    overflow-wrap: anywhere;
    animation: grBubbleIn .22s var(--ec-ease) both;
}
.gr-b.is-mine {
    margin: 8px 0 0 auto; border-radius: 14px 14px 4px 14px;
    background: var(--rose-light); border-color: rgba(201,168,168,0.36);
}
@keyframes grBubbleIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

.gr-compose {
    display: flex; gap: 10px; align-items: center;
    padding: 10px 24px calc(12px + var(--safe-bottom, 0px));
}
.gr-compose .ec-input { flex: 1 1 140px; min-width: 0; }
.gr-typing { flex: 1; font-family: var(--font-body); font-size: 12px; color: var(--ec-sub); padding: 11px 0; }
.gr-scen-note { padding: 0 24px calc(22px + var(--safe-bottom, 0px)); text-align: center; }
.gr-head-btn {
    border: 1px solid var(--ec-line-soft); background: none; border-radius: 999px;
    min-height: 30px; padding: 4px 12px;
    font-family: var(--font-body); font-size: 11.5px; color: var(--ec-sub); cursor: pointer;
    transition: color var(--ec-dur) var(--ec-ease), border-color var(--ec-dur) var(--ec-ease);
}
.gr-head-btn:hover { color: var(--ec-rose-ink); border-color: rgba(201,168,168,0.42); }

/* 练完的小结 */
.gr-sum-head { padding: 18px 24px 4px; }
.gr-sum-turns { font-family: var(--font-body); font-size: 13px; color: var(--ec-ink); }
.gr-sum-note { margin-top: 4px; font-family: var(--font-body); font-size: 11.5px; line-height: 1.7; color: var(--ec-sub); }
.gr-sum-row { padding: 12px 24px; border-bottom: 1px solid var(--ec-line-soft); }
.gr-sum-key { font-family: var(--font-body); font-size: 12px; color: var(--ec-rose-ink); margin-bottom: 3px; }
.gr-sum-val { font-family: var(--font-body); font-size: 13px; line-height: 1.75; color: var(--ec-ink); overflow-wrap: anywhere; }
.gr-sum-next {
    margin: 14px 24px 0; padding: 11px 13px; border-radius: var(--ec-radius-s);
    background: rgba(180,160,140,0.09);
    font-family: var(--font-body); font-size: 12.5px; line-height: 1.75; color: var(--ec-ink);
}

/* ===== 这一块存了什么 / 帮助 ===== */
.gr-clear { padding: 22px 24px calc(26px + var(--safe-bottom, 0px)); display: flex; flex-direction: column; gap: 10px; }
.gr-clear-t { font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--ec-ink); letter-spacing: 1px; }
.gr-help-row { padding: 14px 24px; border-bottom: 1px solid var(--ec-line-soft); }
.gr-help-k { font-family: var(--font-body); font-size: 13px; color: var(--ec-rose-ink); margin-bottom: 4px; }
.gr-help-v { font-family: var(--font-body); font-size: 12.5px; line-height: 1.85; color: var(--ec-ink); overflow-wrap: anywhere; }

/* ===== 自己画的小窗（挂 #app 内，两拍出场；绝不用系统 confirm）===== */
.gr-ask-wrap {
    position: absolute; inset: 0; z-index: 60;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .2s var(--ec-ease);
    pointer-events: none;
}
.gr-ask-wrap.show { opacity: 1; pointer-events: auto; }
.gr-ask-mask { position: absolute; inset: 0; background: rgba(30,26,24,0.28); }
.gr-ask-box {
    position: relative; width: calc(100% - 56px); max-width: 340px;
    padding: 20px 18px 16px; border-radius: 16px;
    background: var(--surface-solid); border: 1px solid var(--ec-line-soft);
    box-shadow: 0 12px 36px rgba(60,48,44,0.18);
    transform: translateY(6px) scale(.985); transition: transform .22s var(--ec-ease);
}
.gr-ask-wrap.show .gr-ask-box { transform: none; }
.gr-ask-title { font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--ec-ink); }
.gr-ask-sub { margin-top: 6px; font-family: var(--font-body); font-size: 12.5px; line-height: 1.8; color: var(--ec-sub); }
.gr-ask-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }

/* ===== 设置：聊天时顺带纠正（一个开关）=====
   开关本体是**全站同一个组件**（`ck-switch`，原本只写在 panels-settings.css 里）——
   照抄整份结构：外层 label.ck-switch + 隐藏的原生 input + 轨道 .ck-switch-track + 圆球 .ck-switch-thumb。
   ⚠ 少一个子元素就会「只有底色变化、没有滑块与滑动动画」（长期规则 #194）。

   ★ 2028-09 健康第 2 窗口：原来这里把 .ck-switch 那一整套**照抄了一份**，而
     panels-grammar.css 在本页比 panels-settings.css 后加载 → 它一直悄悄压着设置页那一份，
     也就是「改设置页那份永远不生效」（长期规则 #226）。两份除了颜色变量本来就一模一样，
     所以这里整块删掉，全站开关统一由 panels-settings.css 那**唯一一份**负责。
     以后要改开关样式，只改那里。 */
.gr-set-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 16px 24px; }
.gr-set-text { min-width: 0; }
.gr-set-label { font-family: var(--font-body); font-size: 13.5px; color: var(--ec-ink); }
.gr-set-desc { margin-top: 5px; font-family: var(--font-body); font-size: 11.5px; line-height: 1.75; color: var(--ec-sub); }
/* （开关样式见 css/panels/panels-settings.css 的 .ck-switch —— 全站唯一一份，别在这里再抄）*/

/* ===== 窄屏（<370px）：收边距、字号微降，绝不横向溢出 ===== */
@media (max-width: 369px) {
    .gr-err, .gr-sc, .gr-mission { margin-left: 14px; margin-right: 14px; }
    .gr-err-meta, .gr-filters, .gr-search, .gr-lesson, .gr-ex, .gr-pick-hint,
    .gr-sum-head, .gr-sum-row, .gr-sum-next, .gr-clear, .gr-help-row, .gr-foot,
    .gr-resume, .gr-compose, .gr-scen-note, .gr-chat, .gr-set-row { padding-left: 14px; padding-right: 14px; }
    .gr-ex-prompt { font-size: 16px; }
    .gr-b { max-width: 88%; }
    .gr-note-key { min-width: 4.1em; font-size: 12px; }
}

/* ===== 减少动效：不位移、不淡入 ===== */
@media (prefers-reduced-motion: reduce) {
    .gr-b { animation: none; }
    .gr-verdict { transition: none; opacity: 1; transform: none; }
    .gr-ask-wrap, .gr-ask-box { transition: none; }
    .gr-chip, .gr-role, .gr-foot-link, .gr-head-btn { transition: none; }
    .gr-chip:active, .gr-role:active, .gr-foot-link:active { transform: none; }
}

/* ============================================================
   课程正文（2026-09-26 外文返工 · 甲方原文第 5 条）
   ------------------------------------------------------------
   甲方原话：「一点我们内置的语法都没有，基础教程都没有……我希望有系统的语法课程。」
   这一块就是那一课里补上的三样：中英对照例句、什么时候用得上、最容易错的地方。
   排版口径与全外文其它屏一致：左右 = 24px（窄屏 14px）；块与块靠标题分隔，
   不堆卡片、不堆边框 —— 例句是**纸上的句子**，不是一张张卡。
   ============================================================ */
.gr-ex { padding: 9px 0 10px; border-bottom: 1px solid var(--ec-line-soft); }
.gr-ex:last-child { border-bottom: 0; }
.gr-ex-en { font-size: 14px; line-height: 1.7; color: var(--ec-ink); }
.gr-ex-zh { margin-top: 3px; font-size: 12.5px; line-height: 1.7; color: var(--ec-sub); }

/* 使用场景：一排小签（虚线，比按钮轻一档 —— 它是说明不是入口） */
.gr-scenes { display: flex; flex-wrap: wrap; gap: 8px; }
.gr-scene {
    display: inline-block; max-width: 100%;
    padding: 4px 10px; border: 1px dashed var(--ec-line-strong); border-radius: 999px;
    font-size: 12px; line-height: 1.6; color: var(--ec-sub);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 最容易错的地方：错句划掉 → 对句 → 为什么（三段各有各的层级） */
.gr-mis { padding: 10px 0 11px; border-bottom: 1px solid var(--ec-line-soft); }
.gr-mis:last-child { border-bottom: 0; }
.gr-mis-wrong { font-size: 13.5px; line-height: 1.65; color: var(--ec-sub); text-decoration: line-through; text-decoration-color: rgba(201,168,168,0.75); }
.gr-mis-right { margin-top: 3px; font-size: 13.5px; line-height: 1.65; color: var(--ec-sage-ink); }
.gr-mis-why { margin-top: 4px; font-size: 11.5px; line-height: 1.7; color: var(--ec-sub); }

/* 这三块各自撑满一行：与 .gr-lesson 的左右留白对齐（不贴边） */
.gr-ex, .gr-scenes, .gr-mis { margin-left: 24px; margin-right: 24px; }

/* 「跟着课学」那一块（首页）：课程是这个模块的主线，所以给它一块自己的承托面 ——
   不是卡片堆，就一张纸 + 一条主线句 + 一个明确的主按钮。 */
.gr-course {
    margin: 0 24px; padding: 16px 18px 14px;
    border: 1px solid var(--ec-line); border-radius: var(--ec-radius);
    background: var(--ec-surface-2);
}
.gr-course-h { font-size: 14.5px; font-weight: 600; color: var(--ec-ink); line-height: 1.5; }
.gr-course-sub { margin-top: 6px; font-size: 12px; line-height: 1.75; color: var(--ec-sub); }
.gr-course .ec-actions { margin-top: 12px; }
.gr-course .ec-btn { width: 100%; }
/* 课程路径（FINAL_REVIEW 产品裁决）：基础 → 提升 → 进阶 三段 + 走了多少。
   只做「看得出我在哪一段、已经完成多少」这一件事，不做进度环、不堆动画。 */
.gr-path {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
    margin-top: 12px;
}
.gr-path-step {
    display: inline-flex; align-items: baseline; gap: 3px;
    padding: 4px 9px; border-radius: 999px;
    border: 1px solid var(--ec-line); background: transparent;
    font-size: 12px; color: var(--ec-sub); line-height: 1.4;
}
.gr-path-step .gr-path-name { font-weight: 600; }
.gr-path-step .gr-path-num { font-size: 11px; opacity: .85; font-variant-numeric: tabular-nums; }
.gr-path-step.is-now { border-color: var(--rose); color: var(--ec-ink); background: var(--ec-surface); }
.gr-path-step.is-done { color: var(--ec-ink); }
.gr-path-sep { font-size: 11px; color: var(--ec-line); }
/* 细进度条：她把「已经完成多少」看成一个长度，而不是一个百分数 */
.gr-path-bar {
    margin-top: 9px; height: 3px; border-radius: 999px;
    background: var(--ec-line); overflow: hidden;
}
.gr-path-bar-in { display: block; height: 100%; background: var(--rose); border-radius: 999px; }

@media (max-width: 369px) {
    .gr-course { margin: 0 14px; padding: 14px 14px 12px; }
    .gr-ex, .gr-scenes, .gr-mis { margin-left: 14px; margin-right: 14px; }
}