/* ===== 公开版升学页（毕业倒计时 / 年级路线 / QS100） ===== */
.mini-input {
  height: 34px;
  min-width: 150px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font: 13px/1.4 inherit;
}
.mini-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }

.pb-hero { display: grid; grid-template-columns: 1.15fr 1fr; gap: 18px; align-items: center; padding: 25px 26px; margin-bottom: 14px; }
.pb-num { font-size: 62px; font-weight: 800; letter-spacing: -0.045em; line-height: 1.02; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.pb-num span { font-size: 17px; font-weight: 600; color: var(--faint); margin-left: 6px; }
.pb-sub { font-size: 12.5px; color: var(--muted); margin-top: 8px; }
.pb-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pb-tile { padding: 13px 14px; border-radius: 14px; background: color-mix(in srgb, var(--surface) 74%, transparent); border: 1px solid var(--line); }
.pb-tile span { display: block; font-size: 11.5px; color: var(--faint); }
.pb-tile b { display: block; font-size: 22px; font-weight: 780; color: var(--ink); font-variant-numeric: tabular-nums; margin: 3px 0 2px; }
.pb-tile em { font-style: normal; font-size: 11px; color: var(--faint); }

.pb-roadwrap { padding: 20px 22px; margin-bottom: 14px; }
.pb-cap { font-size: 12px; letter-spacing: 0.09em; color: var(--faint); margin-bottom: 12px; }
.pb-cap span { letter-spacing: 0; color: var(--faint); margin-left: 8px; }
.pb-road { display: grid; grid-template-columns: 92px minmax(0, 190px) 1fr; gap: 12px; align-items: start; padding: 11px 12px; border-radius: 12px; border-left: 2px solid transparent; }
.pb-road + .pb-road { border-top: 1px solid var(--line-2); }
.pb-road.is-now { background: color-mix(in srgb, var(--accent) 8%, transparent); border-left-color: var(--accent); }
.pb-g { font-size: 12px; font-weight: 650; color: var(--accent-ink); padding-top: 1px; }
.pb-t { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.pb-d { font-size: 12.5px; line-height: 1.7; color: var(--muted); }

.qs-panel { padding: 20px 22px; }
.pb-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.pb-ctys { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.qs-list { max-height: 560px; overflow: auto; }
.qs-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 90px 34px; gap: 10px; align-items: center; padding: 9px 8px; border-radius: 10px; margin: 0 -8px; }
.qs-row:hover { background: color-mix(in srgb, var(--surface-3) 60%, transparent); }
.qs-row + .qs-row { border-top: 1px solid var(--line-2); }
.qs-rank { font-size: 13px; font-weight: 700; color: var(--accent-ink); font-variant-numeric: tabular-nums; text-align: right; }
.qs-name b { display: block; font-size: 13.5px; font-weight: 560; color: var(--ink); }
.qs-name em { display: block; font-style: normal; font-size: 11px; color: var(--faint); margin-top: 1px; }
.qs-cty { font-size: 12px; color: var(--muted); }
.qs-star { width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); color: var(--faint); cursor: pointer; font-size: 14px; line-height: 1; transition: transform 0.14s ease, color 0.16s ease, border-color 0.16s ease; }
.qs-star:hover { transform: translateY(-1px); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.qs-star.is-on { color: #c8922e; border-color: color-mix(in srgb, #c8922e 40%, transparent); background: color-mix(in srgb, #c8922e 12%, transparent); }
.qs-empty { padding: 26px 6px; font-size: 13px; color: var(--muted); }
.pb-note { margin: 12px 0 0; font-size: 11.5px; line-height: 1.7; color: var(--faint); }

[data-theme='dark'] .pb-tile { background: rgba(255, 255, 255, 0.04); }
[data-theme='dark'] .qs-star { background: rgba(255, 255, 255, 0.04); }

@media (max-width: 1024px) {
  .pb-hero { grid-template-columns: 1fr; }
  .pb-road { grid-template-columns: 78px 1fr; }
  .pb-d { grid-column: 2; }
  .qs-row { grid-template-columns: 38px minmax(0, 1fr) 30px; }
  .qs-cty { display: none; }
}
/* QS 榜单行：档位 + 雅思参考 */
.qs-row {
  grid-template-columns: 44px minmax(0, 1fr) 128px 82px 32px;
  align-items: center;
}
.qs-meta { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.qs-tier {
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  padding: 5px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.qs-tier.is-a { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-ink); }
.qs-tier.is-b { background: color-mix(in srgb, #7a8fd6 18%, transparent); color: #46578f; }
.qs-tier.is-c { background: color-mix(in srgb, #c99a4e 18%, transparent); color: #7d5a1c; }
.qs-ielts {
  font-style: normal;
  font-size: 11.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
@media (max-width: 1024px) {
  .qs-row { grid-template-columns: 40px minmax(0, 1fr) 76px 30px; }
  .qs-meta { grid-column: 2; justify-content: flex-start; }
  .qs-cty { display: none; }
}
