:root {
  --bg: #f6f7f9;
  --card: #ffffff;
  --ink: #1a1d24;
  --muted: #6b7280;
  --line: #e3e6eb;
  --brand: #2563eb;
  --brand-ink: #ffffff;
  --ok: #16a34a;
  --err: #b91c1c;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); }
.app { max-width: 960px; margin: 0 auto; padding: 1.25rem 1.1rem 4rem; }

/* 多数屏窄栏居中；试次屏放宽以容纳左右两栏 */
.screen { display: none; max-width: 560px; margin: 0 auto; animation: fade .25s ease; }
.screen.active { display: block; }
#screen-trial.active, #screen-rank.active { max-width: 960px; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

h1 { font-size: 1.4rem; margin: .4rem 0 .8rem; }
.lead { font-size: 1rem; line-height: 1.6; color: var(--ink); }
.hint { color: var(--muted); font-size: .9rem; line-height: 1.55; }
.notes { color: var(--muted); font-size: .92rem; line-height: 1.7; padding-left: 1.1rem; }
.hidden { display: none !important; }
.hl { color: #d6342c; font-weight: 700; }
.hl-blue { color: var(--brand); font-weight: 700; }

.field { display: block; margin: .9rem 0; }
.field span { display: block; font-size: .9rem; margin-bottom: .35rem; color: var(--muted); }
.field input, .field select {
  width: 100%; padding: .7rem .8rem; font-size: 1rem;
  border: 1px solid var(--line); border-radius: 10px; background: #fff;
}
.check { display: flex; align-items: center; gap: .55rem; margin: 1rem 0; font-size: .95rem; }
.check input { width: 1.15rem; height: 1.15rem; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; padding: .85rem 1rem; margin-top: .6rem;
  font-size: 1rem; font-weight: 600; cursor: pointer;
  border: 1px solid var(--line); border-radius: 12px;
  background: #fff; color: var(--ink); transition: .15s;
}
.btn:active { transform: scale(.99); }
.btn.primary { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.btn.secondary { background: #eef2ff; border-color: #dbe3ff; color: var(--brand); }
.btn.audio { background: #f0f5ff; border-color: #d6e2ff; color: var(--brand); }
.btn.audio.big { font-size: 1.1rem; padding: 1.05rem; }
.btn.audio.played { background: #eef7ee; border-color: #cde9cd; color: var(--ok); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.linkish, .linkish { background: none; border: none; color: var(--brand); cursor: pointer; font: inherit; padding: 0; width: auto; text-decoration: underline; }
.btn.ghost { background: #fff; color: var(--muted); border-color: var(--line); }
.trial-nav { display: flex; gap: .6rem; align-items: stretch; }
.trial-nav .btn { margin-top: .8rem; }
.trial-nav #btn-trial-back { width: auto; flex: 0 0 auto; padding-left: 1.1rem; padding-right: 1.1rem; }
.trial-nav #btn-trial-next { flex: 1; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1.1rem; line-height: 1.6; }
.card ol { padding-left: 1.2rem; }
.err { color: var(--err); font-size: .9rem; }
.resume { margin-top: 1.4rem; color: var(--muted); font-size: .9rem; }
.resume-box { margin-top: .6rem; }

.trial-top { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.badge { font-size: .78rem; font-weight: 700; padding: .25rem .6rem; border-radius: 999px; background: #eef2ff; color: var(--brand); }
.badge.formal { background: #eef7ee; color: var(--ok); }
.progress { flex: 1; height: 7px; background: var(--line); border-radius: 999px; overflow: hidden; }
.progress-bar { height: 100%; width: 0; background: var(--brand); transition: width .3s; }
.counter { font-size: .82rem; color: var(--muted); min-width: 3.2rem; text-align: right; }

.context-block { background: #fffdf5; border: 1px solid #f0e6c8; border-radius: 14px; padding: 1rem 1.1rem; margin-bottom: 1rem; }
.context-label { font-size: .78rem; font-weight: 700; color: #b08900; margin: 0 0 .4rem; }
.context-text { margin: 0 0 .7rem; line-height: 1.65; }

.audio-block { text-align: center; margin: 1rem 0 1.4rem; }
.audio-label { font-size: .9rem; color: var(--muted); margin: 0 0 .5rem; }
.replay-hint { font-size: .8rem; color: var(--muted); margin: .5rem 0 0; min-height: 1rem; }

/* 编号提示条 */
.id-banner {
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  background: #eef7ee; border: 1px solid #cde9cd; border-radius: 10px;
  padding: .6rem .8rem; margin-bottom: 1rem; font-size: .9rem; color: var(--ok);
}
.id-banner strong { font-size: 1.15rem; letter-spacing: .03em; }
.id-banner span { color: var(--muted); font-size: .82rem; }

/* 练习说明（两部分） */
.part { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1.1rem; margin: 1rem 0; }
.part-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.part-head h2 { font-size: 1.05rem; margin: 0; }
.part-no {
  width: 1.7rem; height: 1.7rem; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--brand); color: #fff; font-weight: 700; font-size: .95rem;
}
.part-sub { font-size: .92rem; color: var(--muted); margin: .2rem 0 .8rem; line-height: 1.55; }

.flow { display: flex; align-items: center; gap: .6rem; margin: .55rem 0; flex-wrap: wrap; }
.flow-tag {
  flex: 0 0 auto; font-size: .8rem; font-weight: 700; padding: .25rem .6rem;
  border-radius: 8px; background: #fffdf5; border: 1px solid #f0e6c8; color: #b08900;
}
.flow-tag.alt { background: #f0f5ff; border-color: #d6e2ff; color: var(--brand); }
.flow-steps { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; font-size: .86rem; }
.flow-steps span { background: #f3f5f9; border-radius: 7px; padding: .25rem .5rem; }
.flow-steps i { color: var(--muted); font-style: normal; }

.dims { display: grid; gap: .6rem; margin-top: .9rem; }
@media (min-width: 480px) { .dims { grid-template-columns: 1fr 1fr; } }
.dim { border: 1px solid var(--line); border-radius: 10px; padding: .6rem .7rem; background: #fafbfc; }
.dim-name { font-size: .9rem; font-weight: 600; margin: 0 0 .4rem; }
.dim-ends { display: flex; justify-content: space-between; font-size: .76rem; color: var(--muted); margin: 0; }
.hint.center { text-align: center; }

/* 练习提示卡片 */
.practice-tip {
  background: #fffaf0; border: 1px solid #f0d9a8; border-radius: 12px;
  padding: .85rem 1rem; margin-bottom: 1.1rem; line-height: 1.6; font-size: .9rem;
}
.practice-tip .tip-h { font-weight: 700; color: #b08900; margin: 0 0 .4rem; }
.practice-tip p { margin: .35rem 0; }
.practice-tip ul { margin: .35rem 0; padding-left: 1.2rem; }
.practice-tip li { margin: .2rem 0; }
.practice-tip .muted-end { color: var(--muted); font-size: .82rem; white-space: nowrap; }

/* 试次左右两栏：左=信息(情境/音频)，右=打分 */
.trial-grid { display: grid; gap: 1.4rem; }
@media (min-width: 760px) {
  .trial-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 2rem; align-items: start; }
  .trial-left { position: sticky; top: 1rem; }
  /* 仅音频试次没有情境，左栏会空一大块 → 收成单列居中 */
  .trial-grid.solo { grid-template-columns: minmax(0, 600px); justify-content: center; gap: 1rem; }
  .trial-grid.solo .trial-left { position: static; }
}

.rate-guide {
  font-size: .85rem; line-height: 1.55; color: var(--brand);
  background: #f0f5ff; border: 1px solid #d6e2ff; border-radius: 10px;
  padding: .6rem .75rem; margin: 0 0 1.1rem;
}

.ratings { margin-top: .4rem; }
.q { margin: 0 0 1.4rem; }
.q-title { font-size: .98rem; font-weight: 600; margin: 0 0 .2rem; }
.q-sub { font-size: .82rem; color: var(--muted); margin: 0 0 .55rem; }
.scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: .4rem; }
.scale button {
  padding: .7rem 0; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; font-size: 1rem; font-weight: 600; cursor: pointer; color: var(--ink);
}
.scale button.sel { background: var(--brand); color: #fff; border-color: var(--brand); }
.scale-ends { display: flex; justify-content: space-between; font-size: .76rem; color: var(--muted); margin-top: .35rem; }
.choices { display: flex; flex-wrap: wrap; gap: .45rem; }
.choices button {
  padding: .55rem .8rem; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; font-size: .9rem; cursor: pointer; color: var(--ink);
}
.choices button.sel { background: var(--brand); color: #fff; border-color: var(--brand); }
.other-input {
  display: block; width: 100%; margin-top: .55rem; padding: .55rem .7rem;
  border: 1px solid var(--line); border-radius: 10px; font-size: .9rem; color: var(--ink);
  box-sizing: border-box;
}
.other-input:focus { outline: none; border-color: var(--brand); }

/* D2 重心三连排序 */
.badge.rank { background: #fdeee6; color: #c2410c; }
.rank-h { font-size: 1.2rem; margin: .4rem 0 .6rem; }
.rank-cards { display: flex; flex-direction: column; gap: .8rem; margin: 1.1rem 0; }
.rank-card {
  display: flex; align-items: center; gap: .9rem;
  border: 1px solid var(--line); border-radius: 14px; padding: .9rem 1rem;
  background: #fff; cursor: pointer; transition: .15s;
}
.rank-card.ranked { border-color: var(--brand); background: #f5f8ff; }
.rank-card .rank-play { width: auto; flex: 1; margin: 0; }
.rank-card .rank-num {
  width: 2rem; height: 2rem; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; font-weight: 700; font-size: 1.05rem;
  background: #eef2ff; color: var(--muted);
}
.rank-card.ranked .rank-num { background: var(--brand); color: #fff; }
.rank-actions { display: flex; gap: .7rem; }
.rank-actions .btn { margin-top: 0; }