/* 英语板块页（设计档 施工 12）：沿用 style.css 的蓝玻璃体系变量，不写死颜色 */
.en-wrap { max-width: 1080px; margin: 0 auto; padding: 18px 18px 60px; display: flex; flex-direction: column; gap: 18px; }
.en-teacher { display: flex; align-items: center; gap: 16px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 14px 18px; }
.en-teacher img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; box-shadow: 0 4px 14px rgba(47,107,255,.18); }
.en-teacher .t-say { font-size: 16px; line-height: 1.6; color: var(--ink); }
.en-teacher .t-meta { font-size: 13px; color: var(--ink-soft); margin-top: 4px; display: flex; gap: 12px; flex-wrap: wrap; }
.en-teacher .t-meta b { color: var(--accent); }
.en-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.en-tool { position: relative; display: flex; flex-direction: column; gap: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px 16px 14px; text-align: left; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; color: var(--ink); text-decoration: none; }
.en-tool:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(47,107,255,.14); }
.en-tool .ico { font-size: 26px; }
.en-tool .name { font-size: 16.5px; font-weight: 700; }
.en-tool .desc { font-size: 13px; color: var(--ink-soft); line-height: 1.5; }
.en-tool.primary { background: linear-gradient(135deg, var(--accent-soft) 0%, var(--accent) 100%); color: #fff; border: none; }
.en-tool.primary .desc { color: rgba(255,255,255,.85); }
.en-tool.soon { opacity: .62; cursor: default; }
.en-tool.soon:hover { transform: none; box-shadow: none; }
.en-tool .badge { position: absolute; top: 10px; right: 12px; font-size: 11.5px; background: rgba(255,255,255,.28); border-radius: 999px; padding: 2px 9px; }
.en-tool.soon .badge { background: rgba(120,140,180,.18); color: var(--ink-soft); }
.en-section { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; }
.en-section h3 { margin: 0 0 10px; font-size: 16px; display: flex; align-items: center; gap: 10px; }
.en-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.en-tabs button { padding: 6px 14px; border-radius: 999px; font-size: 13.5px; }
.en-tabs button.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.en-list { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow: auto; }
.en-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; font-size: 14.5px; }
.en-item .w { font-weight: 600; font-family: var(--serif, Georgia, serif); font-size: 16px; }
.en-item .src { color: var(--ink-soft); font-size: 12.5px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.en-item .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.en-item .dot.s1 { background: #f0a03c; } .en-item .dot.s2 { background: #6ea8ff; } .en-item .dot.s3 { background: #2f6bff; } .en-item .dot.s4 { background: #27ae60; }
.en-item audio { height: 30px; max-width: 220px; }
.en-empty { color: var(--ink-soft); font-size: 14px; padding: 10px 2px; }
.en-muted { color: var(--ink-soft); font-size: 13px; }

/* 跟读打卡全屏层 */
#sh-layer { position: fixed; inset: 0; z-index: 120; background: var(--paper); display: flex; flex-direction: column; }
#sh-layer.hidden { display: none; }
.sh-top { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line); background: var(--card); }
.sh-top .title { font-weight: 700; font-size: 16px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-body { flex: 1; overflow: auto; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 22px 18px 40px; }
.sh-choose { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: min(720px, 100%); }
.sh-choose .opt { background: var(--card); border: 1.5px dashed var(--line); border-radius: 18px; padding: 22px 18px; text-align: center; cursor: pointer; }
.sh-choose .opt:hover { border-color: var(--accent); }
.sh-choose .opt .ico { font-size: 34px; }
.sh-choose .opt .name { font-weight: 700; font-size: 16px; margin-top: 6px; }
.sh-choose .opt .desc { font-size: 13px; color: var(--ink-soft); margin-top: 4px; line-height: 1.5; }
.sh-sets { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 8px; }
.sh-sets button { border-radius: 999px; padding: 7px 14px; font-size: 13.5px; }
.sh-card { width: min(720px, 100%); background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 26px 26px 22px; box-shadow: 0 12px 40px rgba(47,107,255,.10); }
.sh-progress { display: flex; gap: 5px; justify-content: center; margin-bottom: 14px; flex-wrap: wrap; }
.sh-progress i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); display: inline-block; }
.sh-progress i.cur { background: var(--accent); transform: scale(1.25); }
.sh-progress i.done { background: #27ae60; }
.sh-sentence { font-family: var(--serif, Georgia, "Songti SC", serif); font-size: clamp(22px, 3.4vw, 32px); line-height: 1.7; text-align: center; letter-spacing: .2px; min-height: 60px; }
.sh-sentence span { transition: color .1s ease, background .1s ease; border-radius: 6px; padding: 0 2px; }
.sh-sentence span.on { background: rgba(47,107,255,.16); color: var(--accent); }
.sh-sentence span.miss { text-decoration: underline wavy #e74c3c; }
.sh-sentence.recite span { color: transparent; background: rgba(120,140,180,.16); }
.sh-sentence.recite span.on { color: var(--accent); background: rgba(47,107,255,.16); }
.sh-actions { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; flex-wrap: wrap; }
.sh-play { border-radius: 999px; padding: 12px 22px; font-size: 15.5px; }
.sh-rec { width: 96px; height: 96px; border-radius: 50%; border: none; background: linear-gradient(135deg, var(--accent-soft), var(--accent)); color: #fff; font-size: 34px; box-shadow: 0 10px 28px rgba(47,107,255,.35); transition: transform .12s ease; }
.sh-rec:active { transform: scale(.95); }
.sh-rec.on { background: linear-gradient(135deg, #ff7a59, #e74c3c); box-shadow: 0 10px 28px rgba(231,76,60,.35); animation: shpulse 1s ease-in-out infinite; }
.sh-rec:disabled { opacity: .55; }
@keyframes shpulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.sh-hint { text-align: center; color: var(--ink-soft); font-size: 13.5px; margin-top: 8px; min-height: 20px; }
.sh-result { margin-top: 16px; border-top: 1px dashed var(--line); padding-top: 14px; display: none; }
.sh-result.show { display: block; }
.sh-score { display: flex; align-items: baseline; gap: 12px; justify-content: center; }
.sh-score .num { font-size: 44px; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.sh-score .stars { font-size: 22px; letter-spacing: 2px; }
.sh-heard { text-align: center; font-size: 15px; color: var(--ink); margin-top: 6px; font-family: var(--serif, Georgia, serif); }
.sh-heard .lbl { color: var(--ink-soft); font-size: 12.5px; font-family: var(--sans); }
.sh-tip { text-align: center; color: var(--ink-soft); font-size: 14px; margin-top: 6px; }
.sh-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; }
.sh-modes { display: flex; border: 1.5px solid var(--line); border-radius: 10px; overflow: hidden; }
.sh-modes button { border: none; border-radius: 0; padding: 8px 14px; font-size: 13.5px; }
.sh-modes button.active { background: var(--ink); color: #fff; }
.sh-recap { width: min(640px, 100%); background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 26px; text-align: center; }
.sh-recap .big { font-size: 56px; font-weight: 800; color: var(--accent); }
.sh-recap ul { text-align: left; margin: 14px auto 0; max-width: 460px; line-height: 1.8; font-size: 15px; }
.sh-recap audio { margin-top: 10px; width: 100%; max-width: 420px; }
@media (max-width: 640px) { .sh-choose { grid-template-columns: 1fr; } .sh-card { padding: 18px 16px; } }

/* 每日三分钟 */
.dy-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; }
.dy-row .w { font-family: var(--serif, Georgia, serif); font-size: 18px; font-weight: 600; min-width: 120px; }
.dy-row .ctx { flex: 1; color: var(--ink-soft); font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dy-row button { padding: 6px 12px; font-size: 13px; border-radius: 999px; }
.dy-row.done { opacity: .55; }
.dy-row.done .w::after { content: ' ✓'; color: #27ae60; }
.dy-done { text-align: center; padding: 12px; color: var(--accent); font-weight: 600; }
.dy-streak { display: flex; gap: 4px; margin-top: 8px; }
.dy-streak i { width: 14px; height: 14px; border-radius: 4px; background: var(--line); }
.dy-streak i.on { background: #f0a03c; }
/* 周榜 */
.lb-top { display: flex; flex-direction: column; gap: 6px; }
.lb-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; font-size: 14.5px; }
.lb-row .rk { width: 28px; font-weight: 700; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.lb-row .rk.gold { color: #f0a03c; } .lb-row .nm { flex: 1; } .lb-row .sc { font-weight: 700; font-variant-numeric: tabular-nums; }
.lb-row.me { background: rgba(47,107,255,.10); }
.lb-me { margin-top: 10px; padding: 10px 12px; border-top: 1px dashed var(--line); font-size: 14px; }
.lb-me b { color: var(--accent); }
.lb-grade { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.lb-grade select { padding: 6px 14px; }

/* 四维评价 */
.sh-dims { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; }
.sh-dim { text-align: center; }
.sh-dim .n { font-size: 12.5px; color: var(--ink-soft); }
.sh-dim .v { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sh-dim .bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; margin-top: 4px; }
.sh-dim .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-soft), var(--accent)); border-radius: 3px; }
.sh-dim.weak .v { color: #e67e22; } .sh-dim.weak .bar i { background: linear-gradient(90deg, #ffb84d, #e67e22); }
.sh-sentence.passage { font-size: clamp(18px, 2.6vw, 24px); text-align: left; line-height: 1.85; }
.sh-sentence.passage .ln { display: block; }
.sh-engine { font-size: 11.5px; color: var(--ink-soft); text-align: center; margin-top: 4px; }
@media (max-width: 640px) { .sh-dims { grid-template-columns: repeat(2, 1fr); } }

.sh-sentence span.w-good { color: #1f9d55; }
.sh-sentence span.w-mid { color: #d98b1a; }
.sh-sentence span.w-bad { color: #e74c3c; text-decoration: underline wavy #e74c3c; }