/* HNC 每日一句 · 跟读评测 — 和主站外壳、写作工坊同一套: 黑板绿 #0E3B2E, 荧光绿只做强调, 白卡 + 1px 线框, 系统中文字体 */
.sr {
  --sr-brand: #0E3B2E; --sr-brand-2: #155441; --sr-tint: #E3EFE8; --sr-lime: #CDEB63; --sr-lime-ink: #3F5A00;
  --sr-ink: #15201B; --sr-ink-2: #4C5751; --sr-ink-3: #66706A; --sr-bg: #F6F7F4; --sr-line: #DDE1D8; --sr-line-2: #C9CEC3;
  --sr-good: #1F7A4D; --sr-good-t: #E2F2E8; --sr-mid: #8A5A00; --sr-mid-t: #FBF0D6; --sr-bad: #A8381F; --sr-bad-t: #FBE9E4;
  --sr-ui: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --sr-num: "Bricolage Grotesque", -apple-system, "PingFang SC", sans-serif;
  --sr-en: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  max-width: 860px; margin: 0 auto; padding: 8px 0 40px; font-family: var(--sr-ui); color: var(--sr-ink); font-size: 16px; line-height: 1.7;
  display: flex; flex-direction: column; gap: 18px;
}
.sr *, .sr *::before, .sr *::after { box-sizing: border-box; }
.sr h2, .sr h3, .sr p { margin: 0; }
.sr h3 { font-size: 17px; line-height: 1.45; font-weight: 700; }
.sr [hidden] { display: none !important; }
.sr svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sr svg.fill { fill: currentColor; stroke: none; }
.sr-num { font-family: var(--sr-num); font-variant-numeric: tabular-nums; }
.sr-k { font-size: 13px; letter-spacing: .06em; color: var(--sr-ink-2); font-weight: 600; }
.sr-meta { font-size: 13px; color: var(--sr-ink-3); }
.sr-err { color: var(--sr-bad); }
.sr-loading { padding: 28px; text-align: center; color: var(--sr-ink-3); background: #FFF; border: 1px solid var(--sr-line); border-radius: 16px; }

/* 头部 + 步骤条 */
.sr-head > div { display: flex; flex-direction: column; gap: 6px; max-width: 44em; }
.sr-title { font-size: 28px; line-height: 1.3; font-weight: 700; text-wrap: balance; }
.sr-lead { color: var(--sr-ink-2); }
.sr-steps { list-style: none; margin: 0 !important; padding: 0 !important; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; counter-reset: sr; }
.sr-steps li { counter-increment: sr; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: #FFF; border: 1px solid var(--sr-line); font-size: 14px; color: var(--sr-ink-3); margin: 0 !important; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-steps li::before { content: counter(sr); flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--sr-line-2); display: inline-flex; align-items: center; justify-content: center; font-family: var(--sr-num); font-weight: 800; font-size: 12px; }
.sr-steps li.done { color: var(--sr-ink-2); }
.sr-steps li.done::before { background: var(--sr-tint); border-color: var(--sr-tint); color: var(--sr-brand); }
.sr-steps li.on { background: var(--sr-brand); border-color: var(--sr-brand); color: #FFF; font-weight: 700; }
.sr-steps li.on::before { background: var(--sr-lime); border-color: var(--sr-lime); color: var(--sr-brand); }

/* 通用 */
.sr-body { display: flex; flex-direction: column; gap: 14px; }
.sr-card { background: #FFF; border: 1px solid var(--sr-line); border-radius: 16px; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sr-row { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; }
.sr-tag { display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 6px; background: var(--sr-brand); color: #FFF; white-space: nowrap; }
.sr-src { font-size: 13px; color: var(--sr-ink-2); }
.sr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: 12px; border: 1.5px solid var(--sr-brand); background: var(--sr-brand); color: #FFF !important; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; text-decoration: none !important; line-height: 1.2; }
.sr-btn:hover { background: var(--sr-brand-2); }
.sr-btn:focus-visible, .sr-w:focus-visible, .sr-chip:focus-visible, .sr-pastitem:focus-visible, .sr-seg button:focus-visible, .sr-x:focus-visible { outline: 3px solid var(--sr-lime); outline-offset: 2px; }
.sr-btn[disabled] { opacity: .6; cursor: default; }
.sr-btn.ghost { background: #FFF; color: var(--sr-brand) !important; border-color: var(--sr-line-2); }
.sr-btn.ghost:hover, .sr-btn.ghost.on { background: var(--sr-tint); border-color: var(--sr-brand); }
.sr-btn.big { min-height: 52px; padding: 12px 24px; font-size: 16px; }
.sr-btn.stop { background: var(--sr-bad); border-color: var(--sr-bad); }
.sr-btn.sm { min-height: 40px; padding: 6px 14px; font-size: 14px; border-radius: 10px; gap: 6px; }
.sr-btn.sm svg { width: 16px; height: 16px; }

/* 句子 */
.sr-sent { gap: 14px; }
.sr-en { font-family: var(--sr-en); font-size: 23px; line-height: 1.75; color: var(--sr-ink); overflow-wrap: anywhere; }
.sr-cn { color: var(--sr-ink-2); font-size: 15px; }
.sr-w { font: inherit; color: inherit; background: none; border: 0; padding: 0 1px; margin: 0; border-radius: 4px; line-height: inherit; }
button.sr-w { cursor: pointer; border-bottom: 3px solid transparent; position: relative; }
button.sr-w.g { color: var(--sr-good); border-bottom-color: #9CD3B2; }
button.sr-w.m { color: var(--sr-mid); border-bottom-color: #EDC46A; }
button.sr-w.b { color: var(--sr-bad); border-bottom-color: #E79A86; background: var(--sr-bad-t); }
button.sr-w.wrong { color: var(--sr-bad); background: var(--sr-bad-t); border-bottom: 3px solid var(--sr-bad); }
button.sr-w.miss { color: var(--sr-ink-3); text-decoration: line-through; text-decoration-color: var(--sr-bad); border-bottom: 2px dashed var(--sr-bad); }
button.sr-w.na { color: var(--sr-ink-3); }
button.sr-w.sel { outline: 2px solid var(--sr-brand); outline-offset: 1px; }
.sr-w em { font-family: var(--sr-ui); font-style: normal; font-size: 11px; font-weight: 700; color: #FFF; background: var(--sr-bad); border-radius: 4px; padding: 0 4px; margin-left: 3px; vertical-align: 3px; letter-spacing: 0; }
.sr-ins { font-family: var(--sr-ui); font-size: 12px; font-weight: 700; color: var(--sr-mid); background: var(--sr-mid-t); border-radius: 5px; padding: 1px 6px; vertical-align: 3px; white-space: nowrap; }
.sr-listen { gap: 10px; }
.sr-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--sr-ink-2); }
.sr-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sr-legend i { width: 14px; height: 4px; border-radius: 2px; display: inline-block; }
.sr-legend i.g { background: #9CD3B2; } .sr-legend i.m { background: #EDC46A; } .sr-legend i.b { background: #E79A86; } .sr-legend i.x { background: var(--sr-bad); }

/* 音素 */
.sr-phones { border: 1px solid var(--sr-line); border-radius: 12px; padding: 12px 14px; background: var(--sr-bg); display: flex; flex-direction: column; gap: 10px; }
.sr-pw { font-family: var(--sr-en); font-size: 20px; }
.sr-x { margin-left: auto; min-height: 36px; padding: 4px 12px; border-radius: 8px; border: 1px solid var(--sr-line-2); background: #FFF; color: var(--sr-ink-2); font: inherit; font-size: 13px; cursor: pointer; }
.sr-ph { display: flex; flex-wrap: wrap; gap: 8px; }
.sr-ph span { display: inline-flex; flex-direction: column; align-items: center; min-width: 52px; padding: 6px 8px; border-radius: 10px; background: #FFF; border: 1px solid var(--sr-line); }
.sr-ph b { font-size: 18px; font-weight: 600; font-family: "Lucida Sans Unicode", "Arial Unicode MS", "Segoe UI", sans-serif; }
.sr-ph i { font-style: normal; font-size: 13px; color: var(--sr-ink-2); }
.sr-ph span.g { border-color: #9CD3B2; } .sr-ph span.m { border-color: #EDC46A; background: var(--sr-mid-t); } .sr-ph span.b { border-color: #E79A86; background: var(--sr-bad-t); color: var(--sr-bad); }

/* 录音 */
.sr-recorder { align-items: flex-start; }
.sr-recbar { display: flex; align-items: center; gap: 12px; width: 100%; }
.sr-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--sr-bad); animation: sr-pulse 1s ease-in-out infinite; flex: none; }
@keyframes sr-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .sr-dot { animation: none; } }
.sr-clock { font-size: 20px; font-weight: 700; min-width: 5.5em; }
.sr-meter { flex: 1; height: 8px; border-radius: 4px; background: var(--sr-tint); overflow: hidden; max-width: 320px; }
.sr-meter i { display: block; height: 100%; width: 0; background: var(--sr-brand); transition: width .08s linear; }
.sr-mine { width: 100%; max-width: 420px; height: 44px; }
.sr-phase { list-style: none; margin: 0 !important; padding: 0 !important; display: flex; flex-direction: column; gap: 6px; }
.sr-phase li { margin: 0 !important; color: var(--sr-ink-3); padding-left: 22px; position: relative; }
.sr-phase li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--sr-line-2); }
.sr-phase li.on { color: var(--sr-ink); font-weight: 700; }
.sr-phase li.on::before { border-color: var(--sr-brand); background: var(--sr-lime); }
.sr-phase li.done { color: var(--sr-ink-2); }
.sr-phase li.done::before { background: var(--sr-brand); border-color: var(--sr-brand); }

/* 结果 */
#sr-result { display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 80px; }
#sr-result:empty { display: none; }
.sr-score { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.sr-total { display: flex; flex-direction: column; gap: 2px; min-width: 150px; }
.sr-total b { font-size: 56px; line-height: 1; font-weight: 800; }
.sr-total b.g { color: var(--sr-good); } .sr-total b.m { color: var(--sr-mid); } .sr-total b.b { color: var(--sr-bad); }
.sr-total span { font-size: 13px; color: var(--sr-ink-3); }
.sr-total strong { font-size: 15px; }
/* 对比着听: 自己的录音 + 示范 */
.sr-replay { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding-top: 14px; border-top: 1px solid var(--sr-line); }
.sr-replay-note { flex: 1 1 100%; }
.sr-replay-note.sr-warn { color: var(--sr-mid); }
.sr-btn[aria-busy="true"] { opacity: .75; cursor: progress; }
.sr-privacy { margin: 0 !important; }
.sr-tplay { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 !important; }
.sr-tplay > .sr-meta { margin-right: 2px; }
.sr-bars { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 10px; }
.sr-bar { display: grid; grid-template-columns: 4.5em 2.5em 1fr; align-items: center; gap: 8px; font-size: 14px; }
.sr-bar b { text-align: right; }
.sr-bar i { height: 8px; border-radius: 4px; background: var(--sr-tint); overflow: hidden; }
.sr-bar em { display: block; height: 100%; background: var(--sr-brand); }
.sr-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sr-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 12px; border-radius: 999px; border: 1px solid #E79A86; background: var(--sr-bad-t); color: var(--sr-bad); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.sr-chip span { font-size: 12px; font-weight: 500; }
span.sr-chip { cursor: default; }
.sr-chip.ok { border-color: #9CD3B2; background: var(--sr-good-t); color: var(--sr-good); }
.sr-tips h3::after { content: "根据评测数据生成"; font-size: 12px; font-weight: 500; color: var(--sr-ink-3); margin-left: 8px; }
.sr-tiplist { margin: 0 !important; padding: 0 !important; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.sr-tiplist li { margin: 0 !important; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-left: 3px solid var(--sr-lime); background: var(--sr-bg); border-radius: 0 10px 10px 0; }
.sr-tiplist b { font-family: var(--sr-en); font-size: 16px; color: var(--sr-brand); }
.sr-praise { color: var(--sr-good); font-weight: 600; }
.sr-note { font-size: 12px; color: var(--sr-ink-3); }
.sr-cmp-total { display: flex; align-items: baseline; gap: 10px; font-size: 22px; }
.sr-cmp-total b { font-size: 30px; }
.sr-cmp-dims { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; color: var(--sr-ink-2); }
.sr-d { font-family: var(--sr-num); font-weight: 700; font-size: 15px; color: var(--sr-ink-3); }
.sr-d.up { color: var(--sr-good); } .sr-d.down { color: var(--sr-bad); }
.sr-cmp p { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

/* 记录 / 往期 */
.sr-hist ol { margin: 0 !important; padding: 0 !important; list-style: none; display: flex; flex-direction: column; }
.sr-hist li { margin: 0 !important; display: grid; grid-template-columns: 5em 1fr auto auto; gap: 8px 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--sr-line); }
.sr-hist li:first-child { border-top: 0; }
.sr-hist b { font-size: 18px; }
.sr-hist b.g { color: var(--sr-good); } .sr-hist b.m { color: var(--sr-mid); } .sr-hist b.b { color: var(--sr-bad); }
.sr-pastlist { display: flex; flex-direction: column; gap: 8px; }
.sr-pastitem { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; min-height: 44px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--sr-line); background: #FFF; font: inherit; color: var(--sr-ink); cursor: pointer; }
.sr-pastitem:hover, .sr-pastitem.on { border-color: var(--sr-brand); background: var(--sr-tint); }
.sr-pastitem span[lang] { font-family: var(--sr-en); font-size: 15px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* 使用说明 */
.sr-rules { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; color: var(--sr-ink-2); }
.sr-rules b { color: var(--sr-ink); margin-right: 4px; }
.sr-rules span { padding: 4px 10px; border-radius: 999px; background: #ECEEE8; }

/* 老师查看 */
.sr-tmode { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sr-seg { display: flex; padding: 4px; background: #ECEEE8; border-radius: 12px; gap: 4px; }
.sr-seg button { min-height: 40px; padding: 6px 16px; border-radius: 9px; border: 0; background: none; color: var(--sr-ink-2); font: inherit; font-size: 15px; cursor: pointer; }
.sr-seg button.on { background: #FFF; color: var(--sr-ink); font-weight: 700; box-shadow: 0 1px 2px rgba(21,32,27,.12); }
.sr-tlist { display: flex; flex-direction: column; gap: 10px; }
.sr-titem { gap: 8px; }
.sr-tsent { font-family: var(--sr-en); font-size: 15px; color: var(--sr-ink-2); }
.sr-tscores { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; }
.sr-tscores b { font-size: 18px; }
.sr-tscores b.g { color: var(--sr-good); } .sr-tscores b.m { color: var(--sr-mid); } .sr-tscores b.b { color: var(--sr-bad); }

/* 手机 */
@media (max-width: 600px) {
  .sr { gap: 14px; padding-top: 4px; }
  .sr-title { font-size: 22px; }
  .sr-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sr-card { padding: 14px 14px; border-radius: 14px; }
  .sr-en { font-size: 20px; line-height: 1.7; }
  .sr-total b { font-size: 48px; }
  .sr-btn.big { width: 100%; }
  .sr-score { flex-direction: column; align-items: stretch; gap: 14px; }
  .sr-total { min-width: 0; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
  .sr-total strong { width: 100%; }
  .sr-bars { min-width: 0; width: 100%; }
  .sr-hist li { grid-template-columns: 4.5em 1fr auto auto; gap: 8px; }
  .sr-replay { flex: none; }
  .sr-replay .sr-k { flex: 1 1 100%; }
  .sr-replay .sr-btn { flex: 1 1 auto; }
  .sr-cmp-play b { flex: 1 1 100%; }
  .sr-tplay > .sr-meta { flex: 1 1 100%; }
}