/* 课本句子学习（三年级上册 · PEP）
   页面容器与页头卡见 /css/style.css；配色令牌见 style.css 的 :root（珊瑚暖色系）。
   交互约定见 design.md：hover 反馈一律包在 (hover:hover) and (pointer:fine) 内，触屏用 :active / 语义 class。 */

body {
    background-color: #FFF9F0;
}

.ss-container {
    max-width: var(--site-max-width);
    margin: 0 auto;
    padding: 80px var(--site-gutter) 40px;
}

.ss-app {
    min-height: 40vh;
}

/* ===== 加载 / 出错占位 ===== */
.ss-loading,
.ss-error {
    grid-column: 1 / -1;   /* 占位块落在卡片网格里，横跨整行 */
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 2rem 1rem;
    text-align: center;
    color: var(--muted);
}

.ss-error p {
    margin: 0 0 0.9rem;
}

/* ===== 通用按钮 ===== */
.ss-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.42rem 1rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--chip-bg);
    color: var(--ink-2);
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ss-btn:active {
    transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
    .ss-btn:hover {
        color: var(--ink);
        background: var(--chip-bg-hover);
        border-color: var(--chip-bg-hover);
    }
}

.ss-btn-main {
    color: #ffffff;
    background: var(--coral-deep);
    border-color: var(--coral-deep);
}

@media (hover: hover) and (pointer: fine) {
    .ss-btn-main:hover {
        color: #ffffff;
        background: var(--coral-hover);
        border-color: var(--coral-hover);
    }
}

.ss-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

/* ===== 首页：单元卡片网格（排版照「字母自然拼读」页：每行同色系，断点换列自动重排） ===== */
.ss-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.8rem;
}

.ss-card {
    /* 默认（.ss-c0）珊瑚红；.ss-c1 ~ .ss-c5 是其余五套色，由页面按「当前行号」分配 */
    --ss: #D93E3E;
    --ss-soft: #FFE5E5;
    --ss-line: #F5C9C9;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.6rem;
    background: #ffffff;
    border: 1px solid #EFE6D9;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(96, 64, 24, 0.04);
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

/* 悬停上浮只在鼠标设备生效：触屏点一下 :hover 会一直粘住 */
@media (hover: hover) and (pointer: fine) {
    .ss-card:hover {
        transform: translateY(-2px);
        border-color: var(--ss);
        box-shadow: 0 10px 20px -12px rgba(96, 64, 24, 0.18);
    }
}

/* 六套颜色：色相沿用「字母自然拼读」页那一套（都在暖色范围内，未引入冷蓝） */
.ss-card.ss-c1 { --ss: #d14d7a; --ss-soft: #fbe4ec; --ss-line: #f2c2d4; }
.ss-card.ss-c2 { --ss: #b07f14; --ss-soft: #fdf0d8; --ss-line: #f2dcae; }
.ss-card.ss-c3 { --ss: #3e9a55; --ss-soft: #e4f4e8; --ss-line: #bfe2c8; }
.ss-card.ss-c4 { --ss: #b79b10; --ss-soft: #fbf6dc; --ss-line: #ece2a8; }
.ss-card.ss-c5 { --ss: #cf7a2a; --ss-soft: #fceadc; --ss-line: #f0ccae; }

/* 卡片头部：单元号 + 单元名（相当于字母卡上的字母区，整块用本行色系）。
   固定两行显示：Unit 1 一行、Making friends 另起一行，卡片之间高度也更整齐 */
.ss-unit-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    padding: 0.45rem 0.3rem;
    border-radius: 10px;
    background: var(--ss-soft);
    color: var(--ss);
    text-align: center;
}

.ss-unit-no {
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.2;
}

.ss-unit-title {
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.2;
    opacity: 0.9;
}

/* 卡片内的三个入口：Part A / Part B / Reading time */
.ss-parts {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.ss-part {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    width: 100%;
    padding: 0.4rem 0.55rem;
    border: 1px solid #F6EFE3;
    border-radius: 8px;
    background: #fdfaf5;
    color: var(--ink);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* 按下即时反馈（触屏）；hover 反馈只在鼠标设备 */
.ss-part:active {
    background: var(--ss-soft);
    border-color: var(--ss-line);
    color: var(--ss);
}

@media (hover: hover) and (pointer: fine) {
    .ss-part:hover {
        background: var(--ss-soft);
        border-color: var(--ss-line);
        color: var(--ss);
    }
}

/* 句子数：靠右的浅色小字 */
.ss-part-count {
    margin-left: auto;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
}

/* 单元测验入口沿用 .ss-part 的样式（见 index.html：它就是 .ss-parts 里的最后一行），
   这里刻意不再给它单独的强调样式 —— 它不是这个页面的主打内容 */

/* ===== 学习页：工具条 =====
   跟着页面一起滚，不吸顶：连读/中文/语速都是进页面时设一次就完事，
   悬浮在顶上反而会盖住句子、一直占着视线 —— 要看设置往回滚一格就行 */
.ss-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.9rem;
    padding: 0.55rem 0.8rem;
    margin-bottom: 0.9rem;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 2px 8px -4px rgba(96, 64, 24, 0.16);
}

/* 连读：整页最主要的动作，做成主色实心按钮（白字对比清楚），
   与旁边中性的「中文 / 循环 / 语速」拉开层次（与站点其它拼读页的连读按钮一致） */
.ss-cont {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.5rem 1.2rem;
    border: 1px solid var(--coral-deep);
    border-radius: 999px;
    background: var(--coral-deep);
    color: #ffffff;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    box-shadow: 0 3px 10px -4px rgba(217, 62, 62, 0.55);
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.ss-cont i {
    font-size: 1.05rem;
}

/* 按下即时反馈（触屏）；鼠标 hover 反馈见下 */
.ss-cont:active {
    transform: scale(0.96);
    background: var(--coral-hover);
}

@media (hover: hover) and (pointer: fine) {
    .ss-cont:hover {
        background: var(--coral-hover);
        border-color: var(--coral-hover);
    }
}

/* 连读进行中：再深一档 + 外圈浅珊瑚光晕，配合「停止」文案与方块图标表达「再点一下就停」 */
.ss-cont.is-playing {
    background: var(--coral-hover);
    border-color: var(--coral-hover);
    box-shadow: 0 0 0 3px var(--coral-soft);
}

/* 工具条右端的「测验」入口（本部分测验）：整条工具条里唯一的跳转动作，
   做成中性胶囊靠右，不跟红色的「连读」抢注意力 */
.ss-toolbar-quiz {
    margin-left: auto;
    padding: 0.3rem 0.85rem;
    font-size: 0.85rem;
}

.ss-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin: 0;
    font-size: 0.85rem;
    color: var(--ink-2);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.ss-switch input {
    accent-color: var(--coral-deep);
    width: 1rem;
    height: 1rem;
}

.ss-rate-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    font-size: 0.85rem;
    color: var(--ink-2);
}

.ss-rate-wrap input[type="range"] {
    width: 110px;
    margin: 0;
    accent-color: var(--coral-deep);
}

/* ===== 学习页：分组小标题（课时名，如 Let's talk） ===== */
.ss-group {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.15rem 0.5rem;
    margin: 1.4rem 0 0.55rem;
}

/* 竖条沿用整站标题的珊瑚→橙渐变（见 style.css 的 .page-head-title::before） */
.ss-group::before {
    content: '';
    align-self: center;
    flex: 0 0 auto;
    width: 4px;
    height: 1.05em;
    background: linear-gradient(160deg, var(--coral), var(--coral-2));
    border-radius: 2px;
}

/* 紧跟工具条的第一组不再留上间距 */
.ss-toolbar + .ss-group {
    margin-top: 0;
}

.ss-group-name {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--ink);
}

.ss-group-count {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--muted);
}

/* 分组标题右侧的「书写」：把这组句子送到「书写示范」生成四线格示范。
   小胶囊（与工具条里的「测验」同一档尺寸），白底 + 浅珊瑚描边，不抢句子的注意力 */
.ss-group-write {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    padding: 0.22rem 0.62rem;
    border: 1px solid var(--coral-soft);
    border-radius: 999px;
    background: #ffffff;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--coral-deep);
    text-decoration: none;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.ss-group-write:active {
    background: var(--coral-soft);
    border-color: var(--coral);
}

@media (hover: hover) and (pointer: fine) {
    .ss-group-write:hover {
        background: var(--coral-soft);
        border-color: var(--coral);
    }
}

/* ===== 学习页：句子卡片 ===== */
.ss-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.ss-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.8rem 0.9rem;
    background: #ffffff;
    border: 1px solid #EFE6D9;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(96, 64, 24, 0.04);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.ss-item:active {
    background: var(--coral-softer);
}

@media (hover: hover) and (pointer: fine) {
    .ss-item:hover {
        border-color: var(--coral);
        box-shadow: 0 8px 18px -12px rgba(96, 64, 24, 0.2);
    }
}

/* 正在朗读的那一句：整句高亮。
   英文整句只换字色（珊瑚色），不铺底色、不加光晕 —— 高亮的是文字本身，不是文字外面套一个框；
   句卡底色/边框同步加深一级，用来在长列表里定位「在读哪一句」。
   底色用 coral-soft 而不是更浅的 coral-softer：后者(#FFF3EF)跟页面暖米白底(#FFF9F0)几乎同色，看不出在读哪句。 */
.ss-item.is-playing {
    border-color: var(--coral);
    background: var(--coral-soft);
}

.ss-item.is-playing .ss-en {
    /* color: var(--coral-deep); */
    color: #3B82F6;
}

.ss-idx {
    flex: 0 0 auto;
    min-width: 1.4rem;
    padding-top: 0.15rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--muted);
    text-align: center;
}

.ss-body {
    flex: 1 1 auto;
    min-width: 0;
}

.ss-en {
    margin: 0 0 0.25rem;
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.75;
    color: var(--ink);
    /* 单词要单独点，避免长按弹出系统选词菜单抢走点击 */
    -webkit-user-select: none;
    user-select: none;
}

.ss-zh {
    margin: 0;
    padding: 0.1rem 0;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--ink-3);
}

/* 「中文」开关（同时管显示与连读朗读）关掉时只显示英文，用于自测 */
body.ss-hide-zh .ss-zh {
    display: none;
}

/* 单词：手指点得到才算点读。
   padding + 等量负 margin 只把命中区往左右各撑 0.08em，排版位置完全不变
   （词与词之间是空格，撑出去也压不到邻居） */
.ss-w {
    padding: 0 0.08em;
    margin: 0 -0.08em;
    border-radius: 4px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* 点过的单词：用 box-shadow 撑开底色，不改变文字排版，避免整句重排跳动 */
.ss-w.is-picked {
    color: var(--coral-deep);
    background: var(--coral-soft);
    box-shadow: 0 0 0 2px var(--coral-soft);
}

.ss-spk {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--coral-soft);
    border-radius: 50%;
    background: #ffffff;
    color: var(--coral-deep);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.ss-spk i {
    display: block;
    line-height: 1;
}

.ss-spk:active {
    background: var(--coral-deep);
    color: #ffffff;
    border-color: var(--coral-deep);
}

@media (hover: hover) and (pointer: fine) {
    .ss-spk:hover {
        background: var(--coral-deep);
        color: #ffffff;
        border-color: var(--coral-deep);
    }
}

/* ===== 单词释义气泡 =====
   语义是「解释 / 词语」，按 design.md 的约定用浅黄：米黄底 + 浅黄边。
   底色 (#fffdf6) 与页面米白 (#FFF9F0) 很接近，所以描边取了浅黄里偏深的一档 (#e0cfa9)，
   否则气泡在页面/白卡上「没有边」，看着像浮着的文字 */
.ss-popover {
    --bs-popover-bg: #fffdf6;
    --bs-popover-border-width: 1px;
    --bs-popover-border-color: #e0cfa9;
    --bs-popover-arrow-color: #fffdf6;
    --bs-popover-arrow-outer-color: #e0cfa9;
    --bs-popover-max-width: 320px;   /* 英 /…/ 美 /…/ 两段音标并排也放得下 */
    --bs-popover-border-radius: 12px;
    font-size: 0.95rem;
    box-shadow: 0 12px 30px -10px rgba(96, 64, 24, 0.34);
}

.ss-popover .popover-body {
    padding: 0.55rem 0.8rem;
    color: var(--ink);
}

/* 音标行：英 /…/  美 /…/，各带一个小标（英美相同时构建期已只留一个，这里不用去重） */
.ss-pop-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem 0.7rem;
    margin-bottom: 0.2rem;
}

.ss-pop-ph {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--ink-3);
}

.ss-pop-tag {
    align-self: center;
    padding: 0.08rem 0.26rem;
    border-radius: 4px;
    background: var(--chip-bg);
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.3;
}

/* 中文释义：气泡里的主信息，词性在前（n. 苹果） */
.ss-pop-zh {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--ink);
}

.ss-pop-zh .ss-pop-pos {
    margin-right: 0.3rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--muted);
}

.ss-pop-none {
    margin-top: 0.1rem;
    font-size: 0.88rem;
    color: var(--muted);
}

/* ===== 操作行（测验结果页的按钮行） ===== */
.ss-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

/* ===== 连读播放条 ===== */
.ss-playbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    background: #ffffff;
    border-top: 1px solid var(--line);
    box-shadow: 0 -4px 16px rgba(96, 64, 24, 0.08);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.ss-playbar[hidden] {
    display: none;
}

.ss-playbar-inner {
    max-width: var(--site-max-width);
    margin: 0 auto;
    padding: 0.5rem var(--site-gutter);
    display: flex;
    align-items: center;
    gap: 0.6rem 1rem;
}

/* 进度数字：读到第几句 / 共几句。
   定宽 + 右对齐 + 等宽数字：从 9/12 走到 10/12 时进度条不会左右跳。 */
.ss-playbar-count {
    flex: 0 0 auto;
    min-width: 3.2em;
    text-align: right;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--coral-deep);
    font-variant-numeric: tabular-nums;
}

/* 进度条：读到第几句 / 共几句（原来这里显示的是句子内容，改成进度后不再占一行文字） */
.ss-playbar-track {
    flex: 1 1 auto;
    min-width: 80px;
    height: 6px;
    border-radius: 999px;
    background: var(--chip-bg);
    overflow: hidden;
}

.ss-playbar-fill {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 999px;
    background: var(--coral-deep);
    transition: width 0.25s ease;
}

.ss-playbar-actions {
    flex: 0 0 auto;
    display: flex;
    gap: 0.5rem;
}

.ss-bar-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.32rem 0.9rem;
    border: 1px solid var(--coral-deep);
    border-radius: 999px;
    background: #ffffff;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--coral-deep);
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.ss-bar-btn:active {
    background: var(--coral-deep);
    color: #ffffff;
}

@media (hover: hover) and (pointer: fine) {
    .ss-bar-btn:hover {
        background: var(--coral-deep);
        color: #ffffff;
    }
}

.ss-bar-stop {
    color: #ffffff;
    background: var(--coral-deep);
}

@media (hover: hover) and (pointer: fine) {
    .ss-bar-stop:hover {
        background: var(--coral-hover);
        border-color: var(--coral-hover);
    }
}

/* 窄屏（手机）：播放条上的四个元素收一收，
   保证「3/12 + 进度条 + 暂停 / 停止」在 320px 宽的小屏上也排得下一行不折行、不横滚 */
@media (max-width: 599px) {
    .ss-playbar-inner {
        gap: 0.5rem;
    }

    .ss-playbar-count {
        min-width: 2.9em;
        font-size: 0.78rem;
    }

    .ss-playbar-track {
        min-width: 40px;
    }

    .ss-bar-btn {
        padding: 0.3rem 0.6rem;
        font-size: 0.8rem;
    }
}

/* 连读进行中（含暂停）：句子区整体不再接受点击。
   点单词、点喇叭、点句子空白原本都会立刻进入一段新朗读，连读时误触会直接打断整轮，
   所以这里跟「字母自然拼读」页一样整块让位 —— 要停就点底部播放条的「停止」（或工具条上已变成「停止」的连读按钮）。 */
body.ss-reading .ss-item,
body.ss-reading .ss-w,
body.ss-reading .ss-spk {
    pointer-events: none;
}

/* 连读时给页面底部留出播放条的高度 */
body.ss-reading {
    padding-bottom: 64px;
}

/* ===== 测验 ===== */
.ss-quiz {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 1rem 1.1rem 1.2rem;
    box-shadow: 0 1px 4px rgba(96, 64, 24, 0.06);
}

.ss-qnum {
    margin: 0 0 0.8rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ink-3);
}

.ss-qplay {
    margin-bottom: 0.9rem;
}

.ss-qzh {
    margin: 0 0 1rem;
    font-size: 1.12rem;
    font-weight: 600;
    line-height: 1.6;
    color: var(--ink);
}

.ss-opts {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ss-opt {
    display: block;
    width: 100%;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #ffffff;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    font-variant-ligatures: none;
    font-feature-settings: "liga" 0, "dlig" 0, "hlig" 0, "calt" 0, "clig" 0;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
    .ss-opt:not(:disabled):hover {
        border-color: var(--coral);
        background: var(--coral-softer);
    }
}

.ss-opt:disabled {
    cursor: default;
}

.ss-opt.is-correct {
    border-color: var(--coral-deep);
    background: var(--coral-soft);
    color: var(--coral-deep);
    font-weight: 700;
}

.ss-opt.is-wrong {
    border-color: var(--line);
    background: var(--line-soft);
    color: var(--muted);
    text-decoration: line-through;
}

/* ===== 测验结果 ===== */
.ss-result {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 1.4rem 1.1rem;
    text-align: center;
    box-shadow: 0 1px 4px rgba(96, 64, 24, 0.06);
}

.ss-result-big {
    margin: 0 0 0.6rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ink);
}

.ss-result-line {
    margin: 0 0 0.4rem;
    font-size: 1rem;
    color: var(--ink-2);
}

.ss-result-line b {
    color: var(--coral-deep);
    font-size: 1.15rem;
}

.ss-result-stars {
    margin: 0 0 1rem;
    font-size: 1.05rem;
    letter-spacing: 2px;
    color: var(--gold-deep);
}

.ss-result .ss-actions {
    justify-content: center;
    margin-top: 0;
}

/* ===== 响应式（规范 S / M / L，见 design.md） ===== */
/* M 平板竖屏（768–1023）：4 列。阈值与列数须与 index 页的 columnsFor() 保持一致 */
@media (max-width: 1023.98px) {
    .ss-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.7rem;
    }
}

/* S 手机（< 768）：3 列 */
@media (max-width: 767.98px) {
    .ss-container {
        padding: 72px var(--site-gutter) 30px;
    }

    .ss-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.55rem;
    }

    .ss-card {
        padding: 0.5rem;
    }

    .ss-unit-no {
        font-size: 1.05rem;
    }

    .ss-unit-title {
        font-size: 0.85rem;
    }

    /* 手机上句子略收一档，但行高保持宽松，便于点词 */
    .ss-en {
        font-size: 1.25rem;
        line-height: 1.7;
    }

    /* 喇叭（从这一句开始连读）做到 44px：指头好按 */
    .ss-spk {
        width: 44px;
        height: 44px;
        font-size: 1.3rem;
    }

    /* 连读按钮同样按 44px 触控高度来 */
    .ss-cont {
        min-height: 44px;
        padding: 0.5rem 1rem;
    }

    .ss-toolbar {
        gap: 0.45rem 0.7rem;
        padding: 0.5rem 0.7rem;
    }

    .ss-rate-wrap input[type="range"] {
        width: 84px;
    }

    /* 「书写」在手机上给足指头的高度 */
    .ss-group-write {
        min-height: 36px;
        padding: 0.3rem 0.7rem;
    }

    .ss-playbar-inner {
        padding: 0.5rem var(--site-gutter);
    }
}

/* S 下段（< 600）：2 列（与 index 页的 columnsFor() 保持一致） */
@media (max-width: 599.98px) {
    .ss-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ss-item {
        padding: 0.7rem 0.75rem;
        gap: 0.55rem;
    }

    .ss-idx {
        min-width: 1.2rem;
        font-size: 0.8rem;
    }

    .ss-zh {
        font-size: 0.9rem;
    }

    .ss-actions .ss-btn {
        flex: 1 1 auto;
    }
}