/* -------------------------------------------------------- continue card
   The one thing a returning learner wants is "where was I". Three lines and a
   button — no target numbers, no character counts, no sentence explaining the
   progress bar. Those live one click away on the course page. */

.cont {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-card);
  background: linear-gradient(120deg, var(--accent-tint), var(--bg-elevated) 58%);
}

.cont-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  color: var(--accent-ink);
  font-size: 11.5px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cont-eyebrow svg {
  width: 13px;
  height: 13px;
}

.cont h2 {
  margin-bottom: 3px;
  color: var(--text-strong);
  font-size: 20px;
  font-weight: var(--fw-bold);
}

.cont-sub {
  color: var(--text-muted);
  font-size: 13.5px;
}

.cont-bar {
  max-width: 320px;
  margin-top: 12px;
  height: 5px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.07);
  overflow: hidden;
}

.cont-bar > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width 0.5s var(--ease);
}

@media (max-width: 720px) {
  .cont {
    grid-template-columns: 1fr;
  }
}

/* OneOneTyping v6 — application pages.
 *
 * One skeleton for every non-marketing page, so the eight modules read as a
 * single product rather than eight separate screens:
 *
 *   .pg-band   blue page band — eyebrow, title, one-line lead, right-hand slot
 *   .pg-body   max-width column holding .pg-grid
 *   .pg-grid   main (2fr) + rail (1fr); the rail is "how am I doing"
 *   .pg-quiet  full-width de-emphasised strip: history, standards, FAQ
 *
 * Rules carried over from design/v5/DESIGN-v5.md: one band per page, one gold
 * primary button per page, blue panels only for the thing you are doing now,
 * and flat hairline cards instead of heavy shadows.
 */

/* ------------------------------------------------------------------ band */

.pg-band {
  position: relative;
  padding: 104px 0 30px;
  background: linear-gradient(180deg, var(--accent-tint), var(--bg) 88%);
  border-bottom: 1px solid var(--line-soft);
}

.pg-band-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}

.pg-band-main {
  min-width: 0;
  flex: 1 1 420px;
}

.pg-band-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-dark);
}

.pg-band-title {
  font-size: 30px;
  font-weight: var(--fw-bold);
  line-height: 1.18;
  letter-spacing: -0.015em;
}

.pg-band-lead {
  max-width: 62ch;
  margin-top: 8px;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.55;
}

.pg-band-side {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.pg-band-figure {
  text-align: right;
}

.pg-band-figure b {
  display: block;
  color: var(--text-strong);
  font-size: 24px;
  font-weight: var(--fw-bold);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.pg-band-figure span {
  color: var(--text-dim);
  font-size: 12.5px;
}

/* ------------------------------------------------------------------ body */

.pg-body {
  max-width: var(--max);
  margin: 0 auto;
  padding: 32px var(--gutter) 72px;
}

.pg-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.pg-main {
  min-width: 0;
}

.pg-rail {
  min-width: 0;
  display: grid;
  gap: 18px;
  position: sticky;
  top: 80px;
}

/* ------------------------------------------------------------------ card */

.pg-card {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-card);
  background: var(--bg-elevated);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.pg-card + .pg-card {
  margin-top: 18px;
}

.pg-card-head {
  /* 卡片标题直接写在卡片上，不要灰色标题条（2026-10-16，和 kit.css .ui-card-head 一样） */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px 4px;
}

.pg-card-title {
  font-size: 16px;
  font-weight: var(--fw-bold);
  color: var(--text-strong);
}

.pg-card-body {
  padding: 14px 20px 20px;
}

.pg-card-note {
  color: var(--text-dim);
  font-size: 12.5px;
}

.pg-card-body.tight {
  padding: 0;
  overflow-x: auto;
}

/* Section heading inside a quiet strip. */
.pg-quiet {
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px solid var(--line-soft);
}

.pg-quiet-h {
  margin-bottom: 4px;
  color: var(--text-strong);
  font-size: 15px;
  font-weight: var(--fw-bold);
}

.pg-quiet-sub {
  margin-bottom: 16px;
  color: var(--text-dim);
  font-size: 13px;
}

/* --------------------------------------------------------- blue panel rows
   The blue panel is reserved for "the thing you are doing right now" — a
   course's unit list, the test you are about to run. Nothing else uses it. */

.pg-panel {
  border-radius: var(--radius-card);
  background: var(--blue-deep);
  padding: 16px;
  color: #fff;
}

.pg-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 2px 4px 14px;
  flex-wrap: wrap;
}

.pg-panel-head h3 {
  color: #fff;
  font-size: 17px;
  font-weight: var(--fw-bold);
}

.pg-panel-head p {
  margin-top: 3px;
  color: #fff;
  font-size: 13px;
  opacity: 0.92;
}

.pg-panel-rows {
  display: grid;
  gap: 2px;
}

.pg-panel-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 11px 14px;
  background: var(--bg-elevated);
  color: var(--text);
  border-radius: 4px;
  transition: background-color 0.15s;
}

.pg-panel-row:first-child {
  border-radius: 8px 8px 4px 4px;
}

.pg-panel-row:last-child {
  border-radius: 4px 4px 8px 8px;
}

.pg-panel-row:only-child {
  border-radius: 8px;
}

a.pg-panel-row:hover {
  background: var(--blue-soft);
}

.pg-panel-row.is-done {
  background: var(--green-soft);
}

.pg-panel-row.is-current {
  background: var(--gold-soft, #fdf3dc);
}

.pg-panel-row.is-locked {
  opacity: 0.62;
}

.pg-panel-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bg-sunken);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: var(--fw-semibold);
}

.pg-panel-row.is-done .pg-panel-num {
  background: var(--green);
  color: #fff;
}

.pg-panel-row.is-current .pg-panel-num {
  background: var(--gold);
  color: var(--gold-ink);
}

.pg-panel-name {
  min-width: 0;
}

.pg-panel-name b {
  display: block;
  color: var(--text-strong);
  font-size: 14.5px;
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pg-panel-name span {
  display: block;
  margin-top: 2px;
  color: var(--text-dim);
  font-size: 12.5px;
}

.pg-panel-tail {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: nowrap;
}

.pg-panel-metric {
  text-align: right;
  color: var(--text-dim);
  font-size: 11.5px;
  line-height: 1.25;
  white-space: nowrap;
}

.pg-panel-metric b {
  display: block;
  color: var(--text-strong);
  font-size: 13.5px;
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- stat bubs */

.pg-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.pg-stats-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pg-stat {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-card);
  background: var(--bg-elevated);
  padding: 14px 15px;
}

.pg-stat b {
  display: block;
  color: var(--text-strong);
  font-size: 24px;
  font-weight: var(--fw-bold);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.pg-stat b small {
  margin-left: 3px;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: var(--fw-semibold);
}

.pg-stat span {
  display: block;
  margin-top: 3px;
  color: var(--text-dim);
  font-size: 12.5px;
}

.pg-stat .delta {
  display: inline-block;
  margin-left: 5px;
  font-size: 11.5px;
  font-weight: var(--fw-bold);
}

.delta-up {
  color: var(--green-ink);
}

.delta-down {
  color: var(--red);
}

/* ------------------------------------------------------------------ rings */

.pg-rings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.pg-ring {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pg-ring svg {
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  transform: rotate(-90deg);
}

.pg-ring .ring-track {
  fill: none;
  stroke: var(--bg-sunken);
  stroke-width: 6;
}

.pg-ring .ring-fill {
  fill: none;
  stroke: var(--blue);
  stroke-width: 6;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.6s var(--ease);
}

.pg-ring.is-done .ring-fill {
  stroke: var(--green);
}

.pg-ring.is-gold .ring-fill {
  stroke: var(--gold);
}

.pg-ring-text b {
  display: block;
  color: var(--text-strong);
  font-size: 16px;
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}

.pg-ring-text span {
  color: var(--text-dim);
  font-size: 12px;
}

/* --------------------------------------------------------------- level xp */

.pg-level {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.pg-level-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--blue-deep);
  color: #fff;
  font-size: 15px;
  font-weight: var(--fw-bold);
  flex: 0 0 auto;
}

.pg-level-badge.is-gold {
  background: var(--gold);
  color: var(--gold-ink);
}

.pg-level-text b {
  display: block;
  color: var(--text-strong);
  font-size: 15px;
  font-weight: var(--fw-bold);
}

.pg-level-text span {
  color: var(--text-dim);
  font-size: 12.5px;
}

/* ------------------------------------------------------------- course card */

.course-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.course-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-card);
  background: var(--bg-elevated);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s var(--ease);
}

.course-card:hover {
  border-color: var(--line);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Covers are the course's own keys on a quiet, per-track tint. They used to be
   six identical deep-blue slabs — the accent as a surface, which the palette
   rules forbid, and nothing told one course from another at a glance. */
.course-cover {
  position: relative;
  aspect-ratio: 16 / 7;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(120% 90% at 20% 0%, var(--cover-sheen, rgba(255, 255, 255, 0.7)), transparent 60%),
    var(--cover-bg, var(--accent-tint));
  border-bottom: 1px solid var(--line-soft);
  overflow: hidden;
}

.course-cover[data-track="pinyin"] { --cover-bg: var(--green-soft); --cover-ink: var(--green-ink); }
.course-cover[data-track="hanzi"] { --cover-bg: var(--gold-soft); --cover-ink: var(--gold-ink); }
.course-cover[data-track="code"] { --cover-bg: var(--bg-sunken); --cover-ink: var(--text-strong); }

/* In dark mode the white sheen reads as fog, and --gold-ink is the dark ink
   meant for text ON gold, so the 汉字 keys need the gold itself. */
html[data-theme='dark'] .course-cover { --cover-sheen: rgba(255, 255, 255, 0.05); }
html[data-theme='dark'] .course-cover[data-track="hanzi"] { --cover-ink: var(--gold-400); }

.cover-keys {
  display: flex;
  gap: 10px;
  transition: transform 0.25s var(--ease);
}

.cover-keys kbd {
  display: grid;
  place-items: center;
  min-width: 58px;
  height: 58px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-elevated);
  box-shadow: 0 3px 0 var(--line), 0 10px 22px -14px rgba(16, 17, 19, 0.45);
  color: var(--cover-ink, var(--accent-ink));
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 26px;
  font-weight: var(--fw-bold);
  line-height: 1;
}

.course-card:hover .cover-keys {
  transform: translateY(-2px);
}

.course-card.is-shut .cover-keys {
  opacity: 0.55;
  filter: grayscale(0.4);
}

.course-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.course-cover .cover-lock {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(16, 17, 19, 0.78);
  color: #fff;
  font-size: 12px;
  font-weight: var(--fw-semibold);
}

.course-cover .cover-lock svg {
  width: 14px;
  height: 14px;
}

.course-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 15px 16px 16px;
  flex: 1 1 auto;
}

.course-body h3 {
  color: var(--text-strong);
  font-size: 16px;
  font-weight: var(--fw-bold);
}

.course-body .course-sub {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
}

.course-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 4px;
  color: var(--text-dim);
  font-size: 12.5px;
}

.course-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* --------------------------------------------------------------- test list */

.tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: var(--bg-sunken);
}

.tabs button {
  padding: 7px 16px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-muted);
  font-size: 13.5px;
  font-weight: var(--fw-semibold);
  transition: background-color 0.2s, color 0.2s;
}

.tabs button:hover {
  color: var(--text-strong);
}

.tabs button[aria-selected='true'] {
  background: var(--bg-elevated);
  color: var(--blue-dark);
  box-shadow: var(--shadow-sm);
}

.test-group + .test-group {
  margin-top: 14px;
}

/* Collapsible so the catalogue does not put fifty rows between the reader and
   everything below it. One group is open by default. */
.test-group {
  border-top: 1px solid var(--line-soft);
}

.test-group:first-child {
  border-top: 0;
}

.test-group-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 2px;
  cursor: pointer;
  list-style: none;
}

.test-group-h::-webkit-details-marker {
  display: none;
}

.test-group-h:hover h3 {
  color: var(--accent-ink);
}

.test-group-caret {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--text-dim);
  transition: transform 0.2s var(--ease);
}

.test-group[open] .test-group-caret {
  transform: rotate(180deg);
}

.test-group .test-rows {
  padding-bottom: 14px;
}

/* The "random passage" row leads each group — it is the honest default once a
   fixed passage has been typed a few times. */
.test-row.is-random {
  border-color: var(--accent-line);
  background: var(--accent-soft);
}

.test-more {
  margin-top: 2px;
}

.test-more > summary {
  /* the same soft pill as every list's 展开全部 (base.css .fold-list-toggle) */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: fit-content;
  margin: 6px auto 0;
  padding: 8px 12px 8px 16px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-strong) 6%, transparent);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: var(--fw-semibold);
  line-height: 1;
  cursor: pointer;
  list-style: none;
  transition: background 0.15s, color 0.15s;
}
.test-more > summary:hover { background: var(--accent-tint); color: var(--accent-ink); }
.test-more > summary .is-opened, .test-more[open] > summary .is-closed { display: none; }
.test-more[open] > summary .is-opened { display: inline; }

.test-more > summary::-webkit-details-marker {
  display: none;
}

.test-more > summary svg {
  width: 15px;
  height: 15px;
  transition: transform 0.2s var(--ease);
}

.test-more[open] > summary svg {
  transform: rotate(180deg);
}

.test-more[open] > summary {
  margin-bottom: 8px;
}

.test-more .test-row {
  margin-bottom: 8px;
}

.test-group-h h3 {
  font-size: 15px;
  font-weight: var(--fw-bold);
}

.test-group-h span {
  color: var(--text-dim);
  font-size: 12.5px;
}

.test-rows {
  display: grid;
  gap: 8px;
}

.test-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 16px;
  padding: 13px 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-card);
  background: var(--bg-elevated);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.test-row:hover {
  border-color: var(--blue-mid);
  box-shadow: var(--shadow-sm);
}

.test-row-name b {
  display: block;
  color: var(--text-strong);
  font-size: 14.5px;
  font-weight: var(--fw-semibold);
}

.test-row-name span {
  display: block;
  margin-top: 2px;
  color: var(--text-dim);
  font-size: 12.5px;
}

.test-row-best {
  text-align: right;
  color: var(--text-dim);
  font-size: 11.5px;
  line-height: 1.25;
  white-space: nowrap;
}

.test-row-best b {
  display: block;
  color: var(--text-strong);
  font-size: 15px;
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- tables */

.pg-table {
  width: 100%;
  font-size: 13.5px;
}

.pg-table th,
.pg-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  white-space: nowrap;
}

.pg-table th {
  color: var(--text-dim);
  font-size: 11.5px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pg-table td {
  color: var(--text);
}

.pg-table tbody tr:hover {
  background: var(--bg-soft);
}

.pg-table .t-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.pg-table .t-strong {
  color: var(--text-strong);
  font-weight: var(--fw-semibold);
}

/* A speed no person could have typed (see levels.plausible): the record stays
   in the log, but it is marked so the bests and averages beside it make sense. */
.pg-table .t-odd {
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--bg-sunken);
  color: var(--text-muted);
  font-size: 11px;
  font-style: normal;
  font-weight: var(--fw-semibold);
}

.pg-table .t-rank {
  width: 52px;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-weight: var(--fw-semibold);
}

.pg-table tr.is-me {
  background: var(--blue-soft);
}

.pg-table tr.is-me td {
  color: var(--text-strong);
  font-weight: var(--fw-semibold);
}

/* -------------------------------------------------------------- keyboard */

.kb-heat {
  display: grid;
  gap: 5px;
  padding: 4px 0;
}

.kb-heat-row {
  display: flex;
  gap: 5px;
  justify-content: center;
}

.kb-heat-key {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 6px;
  border-radius: 6px;
  background: var(--bg-sunken);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: var(--fw-semibold);
  border: 1px solid transparent;
  cursor: default;
}

.kb-heat-key.wide {
  min-width: 62px;
}

.kb-heat-key.wider {
  min-width: 84px;
}

.kb-heat-key.widest {
  min-width: 230px;
}

.kb-heat-key.is-blank {
  background: transparent;
  border-color: transparent;
}

.kb-heat-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
  color: var(--text-dim);
  font-size: 12px;
}

.kb-heat-scale {
  display: inline-flex;
  gap: 2px;
}

.kb-heat-scale i {
  width: 22px;
  height: 10px;
  border-radius: 2px;
}

/* Per-finger proficiency list. */
.finger-list {
  display: grid;
  gap: 10px;
}

.finger-row {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) 88px;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}

.finger-row .f-name {
  color: var(--text-muted);
  font-weight: var(--fw-semibold);
}

.finger-row .f-val {
  text-align: right;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-semibold);
}

.finger-row .f-val small {
  color: var(--text-dim);
  font-size: 11px;
  font-weight: var(--fw-normal);
}

/* ---------------------------------------------------------------- medals */

.medal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}

.medal {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 18px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-card);
  background: var(--bg-elevated);
  text-align: center;
  transition: transform 0.2s var(--ease), box-shadow 0.2s, border-color 0.2s;
}

.medal:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.medal.is-locked {
  background: var(--bg-soft);
}

.medal.is-locked:hover {
  transform: none;
  box-shadow: none;
}

.medal-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  margin: 0 auto;
}

.medal-icon svg.medal-emblem {
  width: 88px;
  height: 88px;
  transition: transform 0.25s var(--ease);
}

.medal.is-earned:hover .medal-emblem {
  transform: rotate(-6deg) scale(1.05);
}

.medal.is-locked .medal-emblem {
  opacity: 0.75;
}

.medal h3 {
  font-size: 15px;
  font-weight: var(--fw-bold);
}

.medal p {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
  flex: 1 1 auto;
}

.medal .medal-prog {
  margin-top: auto;
}

.medal .medal-prog span {
  display: block;
  margin-top: 6px;
  color: var(--text-dim);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.medal.is-earned {
  border-color: var(--gold);
}

/* --------------------------------------------------------- leaderboard */

.lb-podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: end;
}

/* With one or two entrants a fixed three-column grid strands the cards on the
   left; the column count follows the size of the field. */
.lb-podium[data-count='1'] {
  grid-template-columns: minmax(0, 340px);
  justify-content: center;
}

.lb-podium[data-count='2'] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: center;
}


/* ------------------------------------------------- leaderboard controls
   One ranked decision, one filter. The metric changes what the whole board
   measures, so it is a described segmented control; the track narrows the pool
   and stays deliberately quieter underneath. */

.lb-myrank {
  color: var(--text-muted);
  font-size: 13px;
}

.lb-myrank b {
  color: var(--text-strong);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
}

.lb-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 20px 16px;
}

.lb-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.lb-metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 13px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-card);
  background: var(--bg-elevated);
  color: var(--text-muted);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s, background-color 0.18s, color 0.18s;
}

.lb-metric:hover {
  border-color: var(--blue-mid);
}

.lb-metric b {
  color: var(--text-strong);
  font-size: 14px;
  font-weight: var(--fw-semibold);
}

.lb-metric span {
  color: var(--text-dim);
  font-size: 11.5px;
  line-height: 1.4;
}

.lb-metric.is-on {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.lb-metric.is-on b {
  color: var(--accent-ink);
}

.lb-tracks {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.lb-tracks-label {
  color: var(--text-dim);
  font-size: 11.5px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
}

.tabs.is-quiet button {
  font-size: 12.5px;
}

@media (max-width: 720px) {
  .lb-metrics {
    grid-template-columns: 1fr;
  }

  .lb-metric {
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
  }
}

/* ------------------------------------------------ podium (top three)
   Each place gets a metallic rim and a wash of its own metal inside the card,
   so gold / silver / bronze read as materials rather than as three pastel
   backgrounds. The rim is a gradient painted into the border box while the fill
   stays solid underneath it — a plain `border-color` cannot show metal.

   The three layers below are, in order: the sheen over the fill, the fill
   itself, then the rim. */

.lb-place {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-card);
  background: var(--bg-elevated);
  text-align: center;
}

.lb-place.is-1,
.lb-place.is-2,
.lb-place.is-3 {
  border: 1.5px solid transparent;
}

.lb-place.is-1 {
  padding-top: 26px;
  padding-bottom: 26px;
  background:
    linear-gradient(180deg, rgba(233, 199, 90, 0.2), rgba(233, 199, 90, 0) 52%) padding-box,
    linear-gradient(var(--bg-elevated), var(--bg-elevated)) padding-box,
    linear-gradient(155deg, #fbf1c0 0%, #dcb748 20%, #8f6d16 46%, #f0da95 60%, #a37f1c 80%, #fbf1c0 100%) border-box;
  box-shadow: 0 6px 20px rgba(160, 124, 26, 0.16);
}

.lb-place.is-2 {
  background:
    linear-gradient(180deg, rgba(170, 182, 196, 0.22), rgba(170, 182, 196, 0) 52%) padding-box,
    linear-gradient(var(--bg-elevated), var(--bg-elevated)) padding-box,
    linear-gradient(155deg, #ffffff 0%, #ccd6e0 22%, #7d8896 48%, #eef2f7 62%, #96a3b2 82%, #ffffff 100%) border-box;
  box-shadow: 0 4px 14px rgba(110, 122, 136, 0.13);
}

.lb-place.is-3 {
  background:
    linear-gradient(180deg, rgba(217, 154, 99, 0.2), rgba(217, 154, 99, 0) 52%) padding-box,
    linear-gradient(var(--bg-elevated), var(--bg-elevated)) padding-box,
    linear-gradient(155deg, #f6d3ad 0%, #d99a63 22%, #8b5225 48%, #f0c69b 62%, #a8642f 82%, #f6d3ad 100%) border-box;
  box-shadow: 0 4px 14px rgba(140, 88, 44, 0.14);
}

/* The medal sits above the avatar, i.e. over the player's head. */
.lb-medal {
  width: 54px;
  height: 60px;
  margin-bottom: -2px;
  overflow: visible;
}

.lb-medal text {
  font-family: var(--font-sans);
}

.lb-place .lb-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--blue-deep);
  color: #fff;
  font-size: 17px;
  font-weight: var(--fw-bold);
}

.lb-place b {
  color: var(--text-strong);
  font-size: 15px;
  font-weight: var(--fw-bold);
}

.lb-place .lb-wpm {
  color: var(--blue-dark);
  font-size: 21px;
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}

.lb-place .lb-wpm small {
  color: var(--text-dim);
  font-size: 11.5px;
  font-weight: var(--fw-semibold);
}

/* --------------------------------------------------------------- profile */

.profile-head {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.profile-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue-deep), #2a7fbc);
  color: #fff;
  font-size: 26px;
  font-weight: var(--fw-bold);
  flex: 0 0 auto;
}

.profile-id h1,
.profile-id > b {
  display: block;
  color: var(--text-strong);
  font-size: 20px;
  font-weight: var(--fw-bold);
}

.profile-id > span {
  color: var(--text-dim);
  font-size: 13px;
}

/* ------------------------------------------------------------ form fields
   The app pages had been borrowing `.ad-input` / `.ad-note` from admin.css,
   which they never load — so those fields were unstyled and only looked right
   because each one carried its own inline style. These are the app-side
   primitives; admin.css keeps its own. */

.field {
  margin-bottom: 14px;
}

.field-label {
  display: block;
  margin-bottom: 6px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: var(--fw-semibold);
}

.field-input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-ctl);
  background: var(--bg-elevated);
  color: var(--text-strong);
  font-family: inherit;
  font-size: 14px;
}

.field-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.field-hint {
  margin-top: 6px;
  color: var(--text-dim);
  font-size: 12.5px;
  line-height: 1.55;
}

/* A note strip. Shared by the account and leaderboard pages. */
.ad-note {
  padding: 11px 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-card);
  background: var(--bg-soft);
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.6;
}

.ad-note.is-bad {
  border-color: var(--red-soft);
  background: var(--red-soft);
  color: var(--red-ink);
}

.ad-note.is-warn {
  border-color: var(--gold-300);
  background: var(--gold-100);
  color: var(--gold-ink);
}

/* ----------------------------------------------------------- avatar editor */

.avatar-editor {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding-bottom: 20px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line-soft);
}

.avatar-slot {
  display: inline-flex;
  flex: 0 0 auto;
}

.avatar-slot .avatar-fallback {
  width: 72px;
  height: 72px;
  font-size: 28px;
}

.avatar-slot img.avatar-fallback {
  object-fit: cover;
}

.avatar-editor-side {
  flex: 1 1 240px;
  min-width: 0;
}

.avatar-editor-hint {
  margin-top: 9px;
  color: var(--text-dim);
  font-size: 12.5px;
  line-height: 1.55;
}

/* Avatars on the leaderboard are 46px, matching the old initial badge. */
.lb-avatar .avatar-fallback {
  width: 46px;
  height: 46px;
  font-size: 17px;
}

.lb-avatar img.avatar-fallback {
  object-fit: cover;
}

/* ---------------------------------------------------------- practice calendar
   Geometry measured from GitHub's contribution graph, not eyeballed:
   table layout, 54 week columns, 10x10 cells, 3px gap, 2px radius, a 28px
   weekday label column, and a 13px-tall month header row. The five greens are
   GitHub's own light-mode ramp, so the two read as the same object.

   The only deliberate difference is what the levels mean — see renderCalendar. */

/* The window is chosen to fit, so this should never actually scroll. It stays
   as a safety net for the 13-week floor on an unusually narrow screen, with a
   thin scrollbar rather than the default slab. */
.cal-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  padding-bottom: 2px;
}

.cal-scroll::-webkit-scrollbar {
  height: 6px;
}

.cal-scroll::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: var(--line);
}

.cal-grid {
  border-collapse: separate;
  border-spacing: 3px;
  /* No `table-layout: fixed`. Fixed layout distributes the container's width
     across the columns, so whenever the card is narrower than 54 cells' worth
     the cells quietly shrink — which showed up as 9px squares instead of 10.
     Letting the table size to its content and scrolling the wrapper keeps the
     geometry identical to GitHub's at every container width. */
  width: max-content;
}

/* Row 1: the month labels. GitHub makes each month a <td colspan=weeks> and
   absolutely positions the text inside it, so a label sits under the first week
   of its month rather than centred across the span. */
.cal-grid tr:first-child td {
  height: 13px;
  padding: 0;
}

.cal-corner {
  width: 28px;
}

.cal-month {
  position: relative;
  padding: 0;
}

.cal-month > span[aria-hidden='true'] {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--text-dim);
  font-size: 12px;
  line-height: 13px;
  white-space: nowrap;
}

/* Rows 2-8: the seven weekdays, each led by its own label cell. */
.cal-day-label {
  width: 28px;
  padding: 0 4px 0 0;
  color: var(--text-dim);
  font-size: 12px;
  line-height: var(--cal-cell, 10px);
  text-align: right;
  white-space: nowrap;
}

.cal-cell {
  width: var(--cal-cell, 10px);
  height: var(--cal-cell, 10px);
  padding: 0;
  border: 1px solid var(--cal-line);
  border-radius: 2px;
  background: var(--cal-0);
}

.cal-cell[data-level='1'] {
  background: var(--cal-1);
}

.cal-cell[data-level='2'] {
  background: var(--cal-2);
}

.cal-cell[data-level='3'] {
  background: var(--cal-3);
}

.cal-cell[data-level='4'] {
  background: var(--cal-4);
}

/* Days after today have no cell at all, rather than an empty box. */
.cal-cell.is-empty {
  border-color: transparent;
  background: transparent;
}

.cal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.cal-note {
  margin: 0;
  color: var(--text-dim);
  font-size: 12.5px;
  line-height: 1.6;
}

.cal-legend {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--text-dim);
  font-size: 12px;
}

.cal-legend span {
  margin: 0 4px;
}

.cal-legend .cal-cell {
  display: block;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------- XP rules */

.xp-rules {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-card);
  background: var(--bg-soft);
}

.xp-rules-title {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.xp-rules ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 5px;
}

.xp-rules li {
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.55;
}

.xp-rules li b {
  color: var(--text-strong);
  font-weight: var(--fw-semibold);
}


/* Chart canvas wrapper — SVG is drawn by charts.js. */
.chart {
  width: 100%;
  height: 190px;
}

.chart-legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.chart-legend button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: var(--fw-semibold);
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}

.chart-legend button i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
}

.chart-legend button[aria-pressed='true'] {
  border-color: currentColor;
  background: var(--bg-soft);
}

.chart-legend button[data-series='speed'][aria-pressed='true'] {
  color: var(--blue-dark);
}

.chart-legend button[data-series='acc'][aria-pressed='true'] {
  color: var(--green-ink);
}

.chart-legend button[data-series='cover'][aria-pressed='true'] {
  color: var(--gold-ink);
}

/* -------------------------------------------------------------- history */

.hist-list {
  display: grid;
  gap: 2px;
}

.hist-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 16px;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 13.5px;
}

.hist-row:nth-child(odd) {
  background: var(--bg-soft);
}

.hist-row .h-name {
  min-width: 0;
  color: var(--text-strong);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hist-row .h-name span {
  display: block;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: var(--fw-normal);
}

.hist-row .h-cell {
  text-align: right;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.hist-row .h-cell b {
  color: var(--text-strong);
  font-weight: var(--fw-semibold);
}

/* --------------------------------------------------------- empty states */

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 40px 20px;
  text-align: center;
  color: var(--text-dim);
}

.empty svg {
  width: 34px;
  height: 34px;
  color: var(--line);
}

.empty b {
  color: var(--text-muted);
  font-size: 15px;
  font-weight: var(--fw-semibold);
}

.empty p {
  max-width: 44ch;
  font-size: 13.5px;
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 1024px) {
  .pg-grid {
    grid-template-columns: 1fr;
  }

  .pg-rail {
    position: static;
  }

  .course-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .pg-band {
    padding-top: 88px;
  }

  .pg-band-title {
    font-size: 24px;
  }

  .pg-body {
    padding: 24px var(--gutter) 56px;
  }

  .pg-stats,
  .pg-stats-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .course-grid {
    grid-template-columns: 1fr;
  }

  .test-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
  }

  .test-row-best {
    grid-column: 2;
    grid-row: 1;
  }

  /* The data-count rules are attribute selectors and would otherwise win here. */
  .lb-podium,
  .lb-podium[data-count] {
    grid-template-columns: 1fr;
    justify-content: stretch;
  }

  .pg-panel-row {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 10px;
    padding: 10px 11px;
  }

  .pg-panel-metric {
    display: none;
  }

  .hist-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .hist-row .h-cell:nth-of-type(n + 3) {
    display: none;
  }

  .kb-heat {
    overflow-x: auto;
    padding-bottom: 6px;
  }

  .kb-heat-row {
    justify-content: flex-start;
  }

  .kb-heat-key {
    min-width: 30px;
    height: 30px;
    font-size: 11px;
  }
}

/* ------------------------------------------------------------ level gauge
   The single most useful thing a speed test can show is where you sit. This is
   a horizontal scale with a marker at your speed — readable at a glance, and it
   makes progress between tests visible even when the number barely moves. */

.lvl {
  margin-top: 6px;
}

.lvl-track {
  position: relative;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  display: flex;
  background: var(--bg-sunken);
}

.lvl-seg {
  flex: 1 1 auto;
  height: 100%;
}

.lvl-seg.is-on {
  filter: saturate(1.1);
}

.lvl-marker {
  position: absolute;
  top: -5px;
  width: 3px;
  height: 22px;
  border-radius: 2px;
  background: var(--text-strong);
  box-shadow: 0 0 0 2px var(--bg-elevated);
  transform: translateX(-50%);
  transition: left 0.6s var(--ease);
}

.lvl-marker::after {
  content: attr(data-label);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 5px);
  transform: translateX(-50%);
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--text-strong);
  color: var(--bg-elevated);
  font-size: 11.5px;
  font-weight: var(--fw-bold);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.lvl-scale {
  position: relative;
  height: 16px;
  margin-top: 8px;
}

.lvl-tick {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  color: var(--text-dim);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.lvl-tick:first-child {
  transform: translateX(0);
}

.lvl-verdict {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.lvl-verdict-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 62px;
  height: 62px;
  padding: 0 12px;
  border-radius: 50%;
  background: var(--accent-tint);
  border: 2px solid var(--accent-line);
  color: var(--accent-ink);
  font-size: 18px;
  font-weight: var(--fw-bold);
  flex: 0 0 auto;
}

.lvl-verdict-badge.is-top {
  background: var(--gold-soft);
  border-color: var(--gold-500);
  color: var(--gold-soft-ink);
}

.lvl-verdict-text b {
  display: block;
  color: var(--text-strong);
  font-size: 16px;
  font-weight: var(--fw-bold);
}

.lvl-verdict-text span {
  color: var(--text-muted);
  font-size: 13px;
}

/* -------------------------------------------------------- test entry
   typing.com offers exactly three timed tests and puts the 1-minute one first,
   because that is what "a typing test" means to almost everyone. This follows
   that: one obvious primary action, two quieter alternatives, and the full
   choice of track, passage and warm-up lengths folded away behind 更多选项.
   A first-time visitor should not have to decide anything to start. */

.start-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 20px 22px;
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-card);
  background: linear-gradient(120deg, var(--accent-tint), var(--bg-elevated) 62%);
}

.start-hero h3 {
  margin-bottom: 4px;
  color: var(--text-strong);
  font-size: 19px;
  font-weight: var(--fw-bold);
}

.start-hero p {
  color: var(--text-muted);
  font-size: 13.5px;
  line-height: 1.5;
}

.start-alts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.start-alt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-card);
  background: var(--bg-soft);
  text-align: left;
  transition: border-color 0.18s, background-color 0.18s;
}

.start-alt:hover {
  border-color: var(--accent-line);
  background: var(--accent-tint);
}

.start-alt b {
  display: block;
  color: var(--text-strong);
  font-size: 14.5px;
  font-weight: var(--fw-bold);
}

.start-alt span {
  color: var(--text-dim);
  font-size: 12.5px;
}

.start-alt svg {
  width: 16px;
  height: 16px;
  color: var(--accent);
  flex: 0 0 auto;
}

.start-more {
  margin-top: 14px;
  border-top: 1px solid var(--line-soft);
  padding-top: 12px;
}

.start-more > summary {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  list-style: none;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: var(--fw-semibold);
}

.start-more > summary::-webkit-details-marker {
  display: none;
}

.start-more > summary svg {
  width: 15px;
  height: 15px;
  transition: transform 0.2s var(--ease);
}

.start-more[open] > summary svg {
  transform: rotate(90deg);
}

.qs-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
}

.qs-row:last-of-type {
  border-bottom: 0;
}

.qs-label {
  width: 44px;
  flex: 0 0 auto;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: var(--fw-semibold);
}

.qs-options {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1 1 auto;
}

.qs-pill {
  padding: 7px 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-size: 13.5px;
  font-weight: var(--fw-semibold);
  transition: color 0.18s, border-color 0.18s, background-color 0.18s;
}

.qs-pill:hover {
  border-color: var(--accent-mid);
  color: var(--accent-ink);
}

.qs-pill.is-on {
  border-color: var(--accent);
  background: var(--accent-tint);
  color: var(--accent-ink);
}

.qs-go {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  flex-wrap: wrap;
}

.qs-go .qs-summary {
  min-width: 0;
  color: var(--text-muted);
  font-size: 13.5px;
}

.qs-go .qs-summary b {
  color: var(--text-strong);
}

@media (max-width: 720px) {
  .start-hero,
  .start-alts {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------- personal bests */

.pb-list {
  display: grid;
  gap: 8px;
}

.pb-hint { margin: 6px 0 0; color: var(--text-dim); font-size: 12.5px; }
.pb-row {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: var(--radius-ctl);
  background: var(--bg-soft);
  font-size: 13px;
}

.pb-row .pb-dur {
  color: var(--text-dim);
  font-weight: var(--fw-semibold);
}

.pb-row .pb-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--bg-sunken);
  overflow: hidden;
}

.pb-row .pb-bar > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--blue-400);
}

.pb-row .pb-val {
  color: var(--text-strong);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pb-row .pb-val small {
  color: var(--text-dim);
  font-weight: var(--fw-normal);
}

/* -------------------------------------------------------- continue card
   The one thing a returning learner wants is "where was I". This puts the next
   lesson, its course and its unit in one card with a single primary action,
   instead of making them find their place in a grid. */

.cont {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  padding: 20px 22px;
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-card);
  background: linear-gradient(120deg, var(--accent-tint), var(--bg-elevated) 58%);
}

.cont-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: var(--blue-600);
  font-size: 12px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cont h2 {
  margin-bottom: 6px;
  color: var(--text-strong);
  font-size: 22px;
  font-weight: var(--fw-bold);
}

.cont p {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.55;
}

.cont-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 12px;
  color: var(--text-dim);
  font-size: 12.5px;
}

.cont-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.cont-progress {
  margin-top: 14px;
  max-width: 420px;
}

@media (max-width: 720px) {
  .cont {
    grid-template-columns: 1fr;
  }

  .cont-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

.course-section-head { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin:26px 0 18px; }
.course-section-head .tabs { max-width:100%; flex-wrap:wrap; }
.course-section-head .tabs button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* A full-width row after the two-column grid — for content that needs the room,
   which here is a year of 10px weeks (723px) that will not fit a 2fr column. */
.pg-wide {
  margin-top: 18px;
}

/* ------------------------------------------------------- calendar range */
.cal-years {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--bg-sunken);
}

.cal-years button {
  padding: 4px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.cal-years button:hover {
  color: var(--text-strong);
}

.cal-years button[aria-selected='true'] {
  background: var(--bg-elevated);
  color: var(--text-strong);
  font-weight: var(--fw-semibold);
  box-shadow: var(--shadow-sm);
}

@media (max-width: 760px) {
  .pg-wide {
    margin-top: 14px;
  }
}

/* Lock/crown next to a course name in the catalog sits in the text line. */
td svg.ic {
  display: inline-block;
  margin-left: 4px;
  vertical-align: -0.125em;
  color: var(--gold-ink);
}

/* ------------------------------------------------------ weak-key drill */

.weak-drill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--bg-soft);
}

.weak-drill-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  flex: 1 1 260px;
}

.weak-drill-text b {
  color: var(--text-strong);
  font-size: 14px;
}

.weak-drill-text > span {
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.6;
}

.weak-drill-keys {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.weak-drill-keys > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.weak-drill-keys kbd {
  display: inline-grid;
  place-items: center;
  min-width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-elevated);
  box-shadow: 0 2px 0 var(--line);
  color: var(--red-ink);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: var(--fw-bold);
}

.weak-drill-keys small {
  color: var(--text-dim);
  font-size: 12px;
}

/* ---------------------------------------------------------- player strip */
/* Sits at the top of .pg-body, directly under the band. One row on desktop:
   level + XP | four numbers | today's goal. Wraps to stacked groups on phones. */

.player-strip {
  display: grid;
  grid-template-columns: minmax(240px, 1.3fr) minmax(0, 2fr) auto;
  align-items: center;
  gap: 24px;
  margin-bottom: 28px;
  padding: 18px 22px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-card);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-sm);
}

.ps-level {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.ps-badge {
  position: relative;
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
}

.ps-plant {
  width: 60px;
  height: 60px;
}

/* The exact level rides on the pot as a small gold tag. */
.ps-badge em {
  position: absolute;
  right: -4px;
  bottom: -2px;
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border: 2px solid var(--bg-elevated);
  border-radius: 999px;
  background: var(--gold-400);
  color: var(--gold-ink);
  font-size: 12px;
  font-style: normal;
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}

.ps-level-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  flex: 1 1 auto;
}

.ps-level-name {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.ps-level-name b {
  color: var(--text-strong);
  font-size: 16px;
}

.ps-level-name span {
  color: var(--text-dim);
  font-size: 12px;
  font-weight: var(--fw-semibold);
}

.ps-xp {
  height: 8px;
  border-radius: 999px;
  background: var(--bg-sunken);
  overflow: hidden;
}

.ps-xp i {
  display: block;
  height: 100%;
  min-width: 4px;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold-400), var(--gold-500));
  transition: width 0.6s var(--ease);
}

.ps-xp-note {
  color: var(--text-dim);
  font-size: 12px;
}

.ps-xp-note b {
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}

.ps-tasks { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; color: var(--text-dim); font-size: 12px; }
.ps-tasks i { width: 7px; height: 7px; border: 1.5px solid var(--line); border-radius: 50%; }
.ps-tasks i:first-of-type { margin-left: 3px; }
.ps-tasks i.is-done { border-color: var(--green); background: var(--green); }
.ps-tasks b { margin-left: 2px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

.ps-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 0 20px;
  border-left: 1px solid var(--line-soft);
  border-right: 1px solid var(--line-soft);
}

.ps-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ps-stat b {
  color: var(--text-strong);
  font-size: 20px;
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  white-space: nowrap;
}

.ps-stat b small,
.ps-goal .pg-ring-text b small {
  margin-left: 2px;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: var(--fw-semibold);
}

.ps-stat span {
  color: var(--text-dim);
  font-size: 12px;
}

.ps-goal {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ps-goal .pg-ring {
  position: relative;
  gap: 0;
}

.ps-goal .pg-ring svg {
  width: 58px;
  height: 58px;
}

.ps-goal .pg-ring-text {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.ps-goal .pg-ring-text b {
  font-size: 14px;
}

.ps-goal .pg-ring-text span {
  display: none;
}

.ps-goal-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ps-goal-text b {
  color: var(--text-strong);
  font-size: 14px;
}

.ps-goal-text span {
  color: var(--text-dim);
  font-size: 12px;
  white-space: nowrap;
}

@media (max-width: 1000px) {
  .player-strip {
    grid-template-columns: 1fr auto;
  }
  .ps-stats {
    grid-column: 1 / -1;
    grid-row: 2;
    padding: 14px 0 0;
    border: 0;
    border-top: 1px solid var(--line-soft);
  }
}

@media (max-width: 560px) {
  .player-strip {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 16px;
  }
  .ps-stats {
    grid-row: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 12px;
  }
}


/* ------------------------------------------------------ course lesson rows */

.lr-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 52px;
  height: 44px;
  border-radius: 10px;
  background: var(--bg-sunken);
  color: var(--text-muted);
}

.lr-tile svg {
  width: 20px;
  height: 20px;
}

.lr-tile.is-new {
  background: var(--accent-tint);
}

.lr-tile kbd {
  display: grid;
  place-items: center;
  min-width: 19px;
  height: 22px;
  padding: 0 3px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--bg-elevated);
  box-shadow: 0 1.5px 0 var(--line);
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: var(--fw-bold);
  line-height: 1;
}

.lr-tile em {
  color: var(--text-dim);
  font-size: 10px;
  font-style: normal;
  font-weight: var(--fw-semibold);
}

.lr-tile.is-drill {
  background: var(--gold-soft);
  color: var(--gold-ink);
}

.lr-tile.is-game {
  background: #efe8ff;
  color: #6a4cc9;
}

html[data-theme='dark'] .lr-tile.is-game {
  background: rgba(138, 100, 224, 0.2);
  color: #b9a3ff;
}

.pg-panel-row.is-game {
  background: var(--bg-soft);
}

.pg-panel-row.is-done .lr-tile {
  background: rgba(113, 177, 107, 0.18);
}

.lr .pg-panel-name b {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lr-no {
  flex: 0 0 auto;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
}

.lr-next {
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--gold-soft);
  color: var(--gold-ink);
  font-size: 11px;
  font-weight: var(--fw-bold);
}

.pg-panel-name b > :not(.lr-no):not(.lr-next) {
  min-width: 0;
}

.pg-panel-row.is-current {
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 1.5px var(--gold), 0 8px 24px -14px rgba(16, 17, 19, 0.5);
}

.pg-panel-row.is-ahead .pg-panel-name b {
  color: var(--text);
}

.pg-panel-row.is-drill {
  background: var(--bg-soft);
}

.pg-panel-row.is-drill.is-ahead {
  cursor: default;
}

.lr-wait {
  color: var(--text-dim);
  font-size: 12px;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .pg-panel-row.lr {
    grid-template-columns: 44px minmax(0, 1fr) auto;
  }
  .lr-tile {
    width: 44px;
    height: 40px;
  }
  .lr .stars {
    display: none;
  }
  .lr-no {
    display: none;
  }
}

/* ------------------------------------------------------------ test page
   One hero that answers the page's question — how fast am I — beside the
   control that changes it. Everything else is secondary and sits below. */

.pg-band-compact {
  padding: 92px 0 22px;
}

.tt-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  border: 1px solid var(--line-soft);
  border-radius: 22px;
  background: var(--bg-elevated);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.tt-answer {
  padding: 30px 34px 28px;
  min-width: 0;
}

.tt-label {
  color: var(--text-dim);
  font-size: 13px;
  font-weight: var(--fw-semibold);
}

.tt-speed {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.tt-speed b {
  color: var(--text-strong);
  font-size: clamp(64px, 8vw, 96px);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.02em;
}

.tt-speed > span {
  color: var(--text-dim);
  font-size: 20px;
  font-weight: var(--fw-bold);
}

.tt-level {
  align-self: center;
  margin-left: 6px;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--accent-tint);
  color: var(--accent-ink);
  font-size: 15px;
  font-style: normal;
  font-weight: var(--fw-bold);
}

.tt-level.is-top {
  background: var(--gold-soft);
  color: var(--gold-ink);
}

.tt-sub {
  margin-top: 10px;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.6;
}

.tt-sub b {
  color: var(--text-strong);
}

.tt-mini {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 22px 0 24px;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

.tt-mini > div {
  padding: 12px 0;
}

.tt-mini > div + div {
  padding-left: 16px;
  border-left: 1px solid var(--line-soft);
}

.tt-mini b {
  display: block;
  color: var(--text-strong);
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}

.tt-mini span {
  color: var(--text-dim);
  font-size: 12px;
}

.tt-blurb {
  margin-top: 12px;
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.6;
}

.tt-start {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 30px 30px 26px;
  border-left: 1px solid var(--line-soft);
  background: var(--bg-soft);
}

.tt-group > span {
  display: block;
  margin-bottom: 8px;
  color: var(--text-dim);
  font-size: 12.5px;
  font-weight: var(--fw-semibold);
}

.tt-seg {
  display: flex;
  gap: 3px;
  padding: 3px;
  border-radius: 12px;
  background: var(--bg-sunken);
}

.tt-seg button {
  flex: 1 1 0;
  min-width: 0;
  padding: 8px 4px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 13.5px;
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  cursor: pointer;
}

.tt-seg button[aria-pressed='true'] {
  background: var(--bg-elevated);
  color: var(--text-strong);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* 两行的分段（对战的长度、小一的水平）：上面一行字，下面一行小字 */
.tt-seg.is-two button {
  display: grid;
  gap: 1px;
  padding: 7px 4px;
  line-height: 1.25;
}

.tt-seg.is-two button small {
  color: var(--text-dim);
  font-size: 11px;
  font-weight: var(--fw-medium, 500);
}

.tt-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tt-pills button {
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-elevated);
  color: var(--text-muted);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.tt-pills button[aria-pressed='true'] {
  border-color: var(--accent);
  background: var(--accent-tint);
  color: var(--accent-ink);
}

.tt-go {
  width: 100%;
  margin-top: 4px;
  justify-content: center;
}

.tt-summary {
  margin-top: -6px;
  color: var(--text-dim);
  font-size: 12.5px;
  text-align: center;
}

.tt-summary b {
  color: var(--text-strong);
}

.tt-summary kbd {
  padding: 0 5px;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
}

.tt-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 24px;
  margin-top: 24px;
  align-items: start;
}

.tt-rest {
  margin-top: 8px;
}

@media (max-width: 900px) {
  .tt-hero,
  .tt-row {
    /* minmax(0, 1fr), not 1fr: a bare 1fr is minmax(auto, 1fr), and the auto
       minimum let a long English line push the single track to 436px inside a
       354px card — with the hero's overflow:hidden that cut the sentence off
       mid-word ("by the leader…") and clipped the gauge's right end. */
    grid-template-columns: minmax(0, 1fr);
  }
  .tt-start {
    border-left: 0;
    border-top: 1px solid var(--line-soft);
  }
  .tt-answer {
    padding: 22px;
  }
  .tt-mini {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tt-mini > div:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }
}

.tt-row > .pg-card {
  margin: 0;
}

/* ---------------------------------------------------------- profile insights */

.pf-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  margin-bottom: 28px;
  border: 1px solid var(--line-soft);
  border-radius: 22px;
  background: var(--bg-elevated);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.pf-summary {
  padding: 26px 30px;
  min-width: 0;
}

.pf-kicker {
  color: var(--accent-ink);
  font-size: 12px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
}

.pf-sentence {
  margin-top: 8px;
  color: var(--text);
  font-size: 18px;
  line-height: 1.6;
}

.pf-sentence b {
  color: var(--text-strong);
}

.pf-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
}

.pf-tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--bg-soft);
}

.pf-tile span {
  color: var(--text-dim);
  font-size: 12px;
}

.pf-tile b {
  color: var(--text-strong);
  font-size: 24px;
  font-variant-numeric: tabular-nums;
}

.pf-tile b small {
  margin-left: 3px;
  color: var(--text-dim);
  font-size: 12px;
}

.pf-delta {
  color: var(--text-dim);
  font-size: 12px;
  font-style: normal;
  font-weight: var(--fw-semibold);
}

.pf-delta.is-up {
  color: var(--green-ink);
}

.pf-delta.is-down {
  color: var(--red-ink);
}

.pf-next {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 26px 28px;
  border-left: 1px solid var(--line-soft);
  background: linear-gradient(160deg, var(--gold-soft), var(--bg-elevated) 70%);
}

.pf-next .pf-kicker {
  color: var(--gold-ink);
}

html[data-theme='dark'] .pf-next .pf-kicker {
  color: var(--gold-400);
}

.pf-next h2 {
  font-size: 20px;
  line-height: 1.35;
}

.pf-next p {
  flex: 1 1 auto;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.6;
}

.pf-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.pf-cmp h3 {
  margin-bottom: 12px;
  font-size: 14px;
}

.pf-cmp h3 small {
  color: var(--text-dim);
  font-size: 12px;
  font-weight: var(--fw-medium);
}

.pf-bar {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 84px;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  color: var(--text-dim);
  font-size: 12.5px;
}

.pf-bar i {
  height: 10px;
  border-radius: 999px;
  background: var(--bg-sunken);
  overflow: hidden;
}

.pf-bar em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: color-mix(in srgb, var(--accent) 45%, transparent);
}

.pf-bar.is-now em {
  background: var(--accent);
}

.pf-bar.is-done em {
  background: var(--green);
}

.pf-bar b {
  color: var(--text-strong);
  font-size: 14px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.pf-bar b small {
  color: var(--text-dim);
  font-size: 11px;
  font-weight: var(--fw-medium);
}

.pf-hours {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: end;
  gap: 8px;
  height: 130px;
}

.pf-hour {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  height: 100%;
}

.pf-hour i {
  width: 100%;
  max-width: 34px;
  min-height: 0;
  border-radius: 8px 8px 3px 3px;
  background: color-mix(in srgb, var(--accent) 35%, transparent);
}

.pf-hour.is-best i {
  background: var(--accent);
}

.pf-hour b {
  color: var(--text-strong);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.pf-hour span {
  color: var(--text-dim);
  font-size: 11.5px;
}

.pf-forecast {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.pf-forecast b {
  color: var(--text-strong);
  font-size: 34px;
  font-variant-numeric: tabular-nums;
}

.pf-forecast span {
  color: var(--text-dim);
  font-size: 13px;
}

@media (max-width: 900px) {
  .pf-hero,
  .pf-compare {
    grid-template-columns: 1fr;
  }
  .pf-next {
    border-left: 0;
    border-top: 1px solid var(--line-soft);
  }
  .pf-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* -------------------------------------------------------------- leaderboard */

.lb-boards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.lb-boards button {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  background: var(--bg-elevated);
  color: var(--text-muted);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.lb-boards button svg {
  width: 20px;
  height: 20px;
  margin-top: 1px;
  color: var(--text-dim);
}

.lb-boards button b {
  display: block;
  color: var(--text-strong);
  font-size: 15px;
}

.lb-boards button small {
  display: block;
  margin-top: 2px;
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.4;
}

.lb-boards button[aria-selected='true'] {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.lb-boards button[aria-selected='true'] svg {
  color: var(--accent);
}

.lb-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 16px 0 22px;
}

.lb-filters:empty {
  margin: 8px 0 14px;
}

.lb-seg {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  border-radius: 12px;
  background: var(--bg-sunken);
}

.lb-seg button {
  padding: 7px 14px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 13.5px;
  font-weight: var(--fw-semibold);
  cursor: pointer;
}

.lb-seg button[aria-pressed='true'] {
  background: var(--bg-elevated);
  color: var(--text-strong);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
/* 游戏榜的游戏切换：12 个游戏排不下，横滑 */
.lb-games-seg { max-width: 100%; overflow-x: auto; }
.lb-games-seg .lb-seg { flex-wrap: nowrap; }
.lb-games-seg .lb-seg button { white-space: nowrap; }
.lb-foot-link { color: var(--accent); font-weight: var(--fw-semibold); }

.lb-games {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}

.lb-games button {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 6px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: var(--bg-elevated);
  color: var(--text-muted);
  font: inherit;
  font-size: 13px;
  font-weight: var(--fw-semibold);
  cursor: pointer;
}

.lb-game-cover {
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: 9px;
  overflow: hidden;
}

.lb-game-cover svg {
  display: block;
  width: 100%;
  height: 100%;
}

.lb-games button[aria-pressed='true'] {
  border-color: var(--accent);
  color: var(--text-strong);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.lb-card {
  border: 1px solid var(--line-soft);
  border-radius: 20px;
  background: var(--bg-elevated);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.lb-you-in,
.lb-you-out {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 14px;
}

.lb-you-in {
  justify-content: flex-start;
  background: var(--accent-tint);
  color: var(--text);
}

.lb-you-in b {
  color: var(--text-strong);
}

.lb-you-rank {
  color: var(--accent-ink);
  font-size: 15px;
}

.lb-you-rank b {
  color: var(--accent-ink);
  font-size: 24px;
}

.lb-you-out {
  background: var(--bg-soft);
  color: var(--text-muted);
}

.lb-you-out span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.lb-you-out svg {
  width: 18px;
  height: 18px;
  color: var(--text-dim);
}

.lb-podium2 {
  padding: 26px 22px 0;
}

.lb-podium2:empty {
  display: none;
}

.lb-meter {
  display: block;
  width: min(220px, 100%);
  height: 4px;
  margin: 5px 0 3px;
  border-radius: 2px;
  background: var(--line-soft);
  overflow: hidden;
}

.lb-meter i {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--accent-mid);
}

.lb-row.is-me .lb-meter i { background: var(--accent); }

.lb-list {
  margin: 0;
  padding: 8px 12px 4px;
  list-style: none;
}

.lb-row {
  display: grid;
  grid-template-columns: 34px 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 8px;
  border-radius: 12px;
}

.lb-row + .lb-row {
  border-top: 1px solid var(--line-soft);
}

.lb-row.is-me {
  background: var(--accent-tint);
}

.lb-rank {
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: var(--fw-semibold);
  text-align: center;
}

.lb-avatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent-ink);
  font-weight: var(--fw-bold);
  object-fit: cover;
  overflow: hidden;
}

.lb-who {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.lb-name {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.lb-name b {
  overflow: hidden;
  color: var(--text-strong);
  font-size: 14.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lb-tag {
  flex: 0 0 auto;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--bg-sunken);
  color: var(--text-dim);
  font-size: 11px;
  font-style: normal;
  font-weight: var(--fw-semibold);
}

.lb-tag.is-me {
  background: var(--accent);
  color: #fff;
}

.lb-sub {
  color: var(--text-dim);
  font-size: 12px;
}

.lb-val {
  color: var(--text-strong);
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.lb-val small {
  margin-left: 3px;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: var(--fw-medium);
}

.lb-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 44px 20px;
  color: var(--text-muted);
  font-size: 13.5px;
  text-align: center;
}

.lb-empty svg {
  width: 30px;
  height: 30px;
  color: var(--text-dim);
}

.lb-empty b {
  color: var(--text-strong);
  font-size: 15px;
}

.lb-foot {
  padding: 10px 20px 16px;
  color: var(--text-dim);
  font-size: 12px;
}

.lb-rule {
  color: var(--text-muted);
  font-size: 13.5px;
  line-height: 1.7;
}

.lb-rule b {
  color: var(--text-strong);
}

.lb-climb li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 8px;
  color: var(--text-muted);
  font-size: 13.5px;
  line-height: 1.55;
}

.lb-climb svg {
  width: 16px;
  height: 16px;
  margin-top: 3px;
  color: var(--accent);
}

@media (max-width: 1000px) {
  .lb-boards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .lb-games {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .lb-boards {
    display: flex;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .lb-boards button {
    flex: 0 0 auto;
    padding: 10px 12px;
  }
  .lb-boards button small {
    display: none;
  }
  .lb-podium2 {
    padding: 18px 8px 0;
  }
  .lb-row {
    grid-template-columns: 26px 34px minmax(0, 1fr) auto;
    gap: 8px;
  }
  .lb-avatar {
    width: 34px;
    height: 34px;
  }
}

/* ============================================================ 测速 · 最近走势
   Slim gradient bars (height = speed, colour = accuracy), a smooth moving
   average, the next level as a target line, the best run crowned. */

.tr-card {
  padding: 22px 24px 18px;
}

.tr-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.tr-lede {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 12.5px;
}

.tr-range {
  display: inline-flex;
  padding: 3px;
  border-radius: 10px;
  background: var(--bg-soft);
}

.tr-range button {
  padding: 5px 11px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
}

.tr-range button[aria-checked='true'] {
  background: var(--bg-elevated);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  color: var(--text-strong);
  font-weight: var(--fw-semibold);
}

/* KPIs as one quiet row with hairline dividers, label above value. */
.tr-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 18px 0 22px;
  padding: 12px 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

.tr-kpis > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 14px;
}

.tr-kpis > div + div {
  border-left: 1px solid var(--line-soft);
}

.tr-kpis > div:first-child { padding-left: 0; }

.tr-kpis span {
  color: var(--text-dim);
  font-size: 11.5px;
}

.tr-kpis b {
  color: var(--text-strong);
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.tr-kpis b small {
  margin-left: 3px;
  color: var(--text-dim);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0;
}

.tr-kpis .is-up b { color: var(--green-ink); }
.tr-kpis .is-down b { color: var(--wrong-ink); }

.tr-plot {
  --tr-clean-a: #3b8fe0;
  --tr-clean-b: #1662b8;
  --tr-ok-a: #b8dcf7;
  --tr-ok-b: #8fc3ec;
  --tr-low-a: #f7d78c;
  --tr-low-b: #efb73a;
  --tr-avg: #e0a132;
}

html[data-theme='dark'] .tr-plot {
  --tr-clean-a: #5aaaf2;
  --tr-clean-b: #2f7fd0;
  --tr-ok-a: #3b6d99;
  --tr-ok-b: #2c577d;
}

.tr-area {
  position: relative;
  height: 200px;
  margin: 18px 0 26px 34px;
}

.tr-grid {
  position: absolute;
  right: 0;
  left: 0;
  border-top: 1px solid var(--line-soft);
}

.tr-grid.is-base {
  border-top-color: var(--line);
}

.tr-grid em,
.tr-goal em {
  position: absolute;
  left: -34px;
  top: -7px;
  width: 26px;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-style: normal;
  text-align: right;
}

/* The next level: a dashed target the bars can grow into. */
.tr-goal {
  position: absolute;
  right: 0;
  left: 0;
  z-index: 1;
  border-top: 1.5px dashed color-mix(in srgb, var(--accent) 45%, transparent);
  pointer-events: none;
}

.tr-goal em {
  left: auto;
  right: 0;
  top: -19px;
  width: auto;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--accent-tint);
  color: var(--accent-ink);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: var(--fw-semibold);
}

.tr-cols {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  align-items: end;
}

.tr-col {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 100%;
  border-radius: 8px;
  outline: none;
  transition: background-color 0.15s;
}

.tr-col:hover,
.tr-col:focus-visible {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}

.tr-bar {
  position: relative;
  width: min(46%, 18px);
  min-height: 2px;
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, var(--tr-clean-a), var(--tr-clean-b));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transform-origin: bottom;
  animation: tr-grow 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.tr-col:nth-child(2n) .tr-bar { animation-delay: 0.03s; }
.tr-col:nth-child(3n) .tr-bar { animation-delay: 0.06s; }

@keyframes tr-grow {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

.tr-bar.is-ok { background: linear-gradient(180deg, var(--tr-ok-a), var(--tr-ok-b)); }
.tr-bar.is-low { background: linear-gradient(180deg, var(--tr-low-a), var(--tr-low-b)); }

.tr-val {
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--bg-elevated);
  box-shadow: 0 1px 4px rgba(15, 35, 60, 0.14);
  transform: translateX(-50%);
  color: var(--text-strong);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: var(--fw-bold);
  white-space: nowrap;
}

.tr-val.is-best {
  background: linear-gradient(180deg, #fbe7ae, #f4c965);
  color: #5a3f0b;
}

.tr-val svg {
  width: 12px;
  height: 12px;
}

.tr-x {
  position: absolute;
  top: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 10.5px;
  white-space: nowrap;
}

.tr-tip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  z-index: 3;
  display: none;
  flex-direction: column;
  gap: 1px;
  padding: 8px 11px;
  border-radius: 10px;
  background: #1c2733;
  box-shadow: 0 8px 20px rgba(15, 35, 60, 0.25);
  color: rgba(255, 255, 255, 0.72);
  font-size: 11.5px;
  white-space: nowrap;
  transform: translateX(-50%);
  pointer-events: none;
}

.tr-tip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border: 5px solid transparent;
  border-top-color: #1c2733;
}

.tr-tip b {
  color: #fff;
  font-family: var(--font-mono);
  font-size: 14px;
}

.tr-tip b small {
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--font-sans);
  font-size: 10.5px;
}

.tr-col:hover .tr-tip,
.tr-col:focus-visible .tr-tip {
  display: flex;
  bottom: calc(100% - 4px);
}

.tr-col:hover .tr-val,
.tr-col:focus-visible .tr-val {
  visibility: hidden;
}

.tr-avg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.tr-avg path {
  fill: none;
  stroke: var(--tr-avg);
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tr-avg .tr-avg-glow {
  stroke: color-mix(in srgb, var(--tr-avg) 22%, transparent);
  stroke-width: 7;
}

.tr-dot {
  position: absolute;
  width: 11px;
  height: 11px;
  margin: 0 0 -5.5px -5.5px;
  border: 2.5px solid var(--bg-elevated);
  border-radius: 50%;
  background: var(--tr-avg);
  box-shadow: 0 1px 4px rgba(160, 124, 26, 0.4);
  pointer-events: none;
}

.tr-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  color: var(--text-dim);
  font-size: 11.5px;
}

.tr-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tr-legend i {
  display: inline-block;
  width: 8px;
  height: 12px;
  border-radius: 3px 3px 1px 1px;
}

.tr-legend .is-clean { background: linear-gradient(180deg, #3b8fe0, #1662b8); }
.tr-legend .is-ok { background: linear-gradient(180deg, #b8dcf7, #8fc3ec); }
.tr-legend .is-low { background: linear-gradient(180deg, #f7d78c, #efb73a); }
.tr-legend .is-avg { width: 16px; height: 3px; border-radius: 2px; background: #e0a132; }

.tr-card.is-empty .tr-kpis,
.tr-card.is-empty .tr-legend,
.tr-card.is-empty .tr-range { display: none; }
.tr-card.is-empty { display: flex; flex-direction: column; }
.tr-card.is-empty .tr-plot { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-height: 0; }
.tr-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 40px 0;
  color: var(--text-dim);
  font-size: 12.5px;
}

.tr-empty svg { width: 28px; height: 28px; color: var(--accent); }
.tr-empty b { color: var(--text-strong); font-size: 14px; }

@media (max-width: 640px) {
  .tr-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; }
  .tr-kpis > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .tr-card { padding: 16px 14px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .tr-bar { animation: none; }
}

/* ============================================================ 我的数据 · 成长之路
   The page's single dark surface: identity row, current speed, the journey
   chart. Everything else sits in tabs below. */

.pf-top {
  padding: calc(var(--nav-h) + 30px) 0 34px;
  background:
    radial-gradient(80% 120% at 85% 0%, rgba(124, 196, 255, 0.16), transparent 60%),
    linear-gradient(165deg, #1d4f86 0%, #163d6b 55%, #102c50 100%);
  color: #fff;
}

.pf-id {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.pf-id .profile-id h1 {
  color: #fff;
  font-size: 20px;
  font-weight: var(--fw-bold);
}

.pf-id .profile-id > span {
  color: rgba(255, 255, 255, 0.66);
  font-size: 12.5px;
}

.pf-id .avatar-slot {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18);
  border-radius: 50%;
}

.pf-id-edit {
  padding: 5px 11px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  text-decoration: none;
}

.pf-id-edit:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.pf-id-streak {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
}

.pf-id-streak svg {
  width: 18px;
  height: 18px;
  color: #ffb04d;
}

.pf-id-streak b {
  font-size: 15px;
}

.pf-id-streak small {
  color: rgba(255, 255, 255, 0.66);
  font-size: 12px;
}

.pf-journey {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  gap: 30px;
  margin-top: 24px;
}

.pj-now-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.pj-label {
  color: rgba(255, 255, 255, 0.66);
  font-size: 12.5px;
  font-weight: var(--fw-semibold);
}

.pj-big {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: -4px;
}

.pj-big b {
  font-family: var(--font-mono);
  font-size: 86px;
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(180deg, #ffffff 30%, #bfe0ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pj-big small {
  color: rgba(255, 255, 255, 0.66);
  font-size: 16px;
  font-weight: var(--fw-semibold);
}

.pj-chip {
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.75);
  font-size: 12.5px;
  font-weight: var(--fw-semibold);
}

.pj-chip.is-up { background: rgba(127, 208, 138, 0.18); color: #9fe0a8; }
.pj-chip.is-down { background: rgba(255, 159, 138, 0.16); color: #ffb8a8; }

.pj-level-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 12px;
  background: linear-gradient(180deg, #f7d78c, #f1bc3f);
  color: #4a3a0e;
  box-shadow: 0 8px 20px -8px rgba(241, 188, 63, 0.7);
}

.pj-level-pill b { font-size: 15px; }
.pj-level-pill span { font-size: 12px; opacity: 0.8; }

.pj-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  margin-top: 6px;
}

.pj-facts > div {
  padding: 10px 10px 9px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
}

.pj-facts b {
  display: block;
  font-family: var(--font-mono);
  font-size: 19px;
  font-variant-numeric: tabular-nums;
}

.pj-facts span {
  color: rgba(255, 255, 255, 0.6);
  font-size: 11px;
}

.pj-chart {
  min-width: 0;
  padding: 16px 18px 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  background: rgba(8, 24, 46, 0.35);
}

.pj-chart-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.pj-chart-head b {
  font-size: 15px;
}

.pj-chart-head span {
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
}

.pj-svg {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 6px;
  overflow: visible;
  font-family: var(--font-sans);
}

.pj-area { fill: url(#pjArea); }
/* 每天真实的平均（趋势线后面的小圆点，2026-10-22） */
.pj-days circle { fill: var(--text-dim, #8a94a6); fill-opacity: 0.32; stroke: none; transition: fill-opacity 0.15s; }
.pj-days circle:hover { fill-opacity: 0.85; }

.pj-line {
  fill: none;
  stroke: url(#pjLine);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-dasharray: 4000;
  stroke-dashoffset: 4000;
  animation: pj-draw 1.6s cubic-bezier(0.3, 0.7, 0.2, 1) 0.1s forwards;
}
.pj-svg.is-still .pj-line { animation: none; stroke-dashoffset: 0; }

@keyframes pj-draw { to { stroke-dashoffset: 0; } }

.pj-level {
  stroke: rgba(255, 255, 255, 0.16);
  stroke-dasharray: 3 5;
}

.pj-level-t {
  fill: rgba(255, 255, 255, 0.5);
  font-size: 11px;
}

.pj-fore {
  fill: none;
  stroke: #f4c965;
  stroke-width: 2.5;
  stroke-dasharray: 6 6;
  opacity: 0.9;
}

.pj-goal circle {
  fill: none;
  stroke: #f4c965;
  stroke-width: 2.5;
}

.pj-goal text {
  fill: #f4c965;
  font-size: 12px;
  font-weight: 700;
}

.pj-mark circle {
  fill: #102c50;
  stroke: #7cc4ff;
  stroke-width: 2.5;
}

.pj-mark text {
  fill: rgba(255, 255, 255, 0.78);
  font-size: 11.5px;
  font-weight: 600;
}

.pj-mark.is-best circle { stroke: #f4c965; }
.pj-mark.is-best text { fill: #f4c965; }
.pj-mark.is-level circle { stroke: #9fe0a8; }
.pj-mark.is-level text { fill: #9fe0a8; }

.pj-now circle { fill: #fff; }

.pj-now .pj-pulse {
  fill: rgba(255, 255, 255, 0.25);
  transform-box: fill-box;
  transform-origin: center;
  animation: pj-pulse 2s ease-out infinite;
}

@keyframes pj-pulse {
  0% { transform: scale(0.5); opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}

.pj-now text {
  fill: #fff;
  font-size: 13px;
  font-weight: 700;
}

.pj-axis {
  fill: rgba(255, 255, 255, 0.5);
  font-size: 11px;
}

.pj-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 34px 0 12px;
  text-align: center;
}

.pj-empty b { font-size: 20px; }
.pj-empty span { color: rgba(255, 255, 255, 0.7); font-size: 13.5px; }

.btn.pj-ghost {
  border-color: rgba(255, 255, 255, 0.3);
  background: transparent;
  color: #fff;
}

/* ---- tabs ------------------------------------------------------------- */

.pf-tabs {
  position: sticky;
  top: calc(var(--nav-h, 56px) + 8px);
  z-index: 20;
  display: flex;
  gap: 4px;
  margin: 0 0 18px;
  padding: 6px;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-elevated) 92%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  width: fit-content;
}

.pf-tabs button {
  padding: 8px 18px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: var(--fw-semibold);
  cursor: pointer;
}

.pf-tabs button[aria-selected='true'] {
  /* 选中：淡蓝底、蓝字（2026-10-16，原来是实心蓝底白字，和全站别的切换不一样） */
  background: var(--accent-tint);
  color: var(--accent-ink);
}

.pf-pane[hidden] {
  display: none;
}

@media (max-width: 900px) {
  .pf-journey { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .pj-big b { font-size: 68px; }
  .pf-id-streak { margin-left: 0; }
}

@media (max-width: 560px) {
  .pj-chart { padding: 12px 10px 6px; }
  .pj-level-t { display: none; }
  .pf-tabs { width: 100%; }
  .pf-tabs button { flex: 1 1 0; padding: 8px 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .pj-line { animation: none; stroke-dashoffset: 0; }
  .pj-now .pj-pulse { animation: none; }
}

.pf-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap, 16px);
  align-items: start;
}

@media (max-width: 720px) {
  .pf-pair { grid-template-columns: minmax(0, 1fr); }
}

.tr-legend .is-goal { width: 16px; height: 0; border-top: 1.5px dashed var(--accent); border-radius: 0; }

/* The target's label sits at the left end of its line, clear of the value
   pills over the newest bars. */
.tr-goal em {
  right: auto;
  left: 6px;
}

/* 各时长最好成绩 matches the chart's height and spreads its rows. */
@media (min-width: 901px) {
  .tt-row { align-items: stretch; }
  .tt-row > .pg-card { display: flex; flex-direction: column; }
  .tt-row > .pg-card > .pg-card-body { flex: 1 1 auto; display: flex; }
  .tt-row .pb-list { flex: 1 1 auto; align-content: space-evenly; }
}
.tr-legend { margin-top: 4px; }

/* ============================================================ 我的数据 · round 7
   Light hero in the site's own palette (pale blue band, white chart card),
   and the overview as a 12-column grid whose rows share one height. */

.pf-top {
  background:
    radial-gradient(70% 90% at 90% 0%, rgba(124, 196, 255, 0.28), transparent 60%),
    linear-gradient(180deg, var(--accent-tint) 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--line-soft);
  color: var(--text-strong);
}

.pf-id .profile-id h1 { color: var(--text-strong); }
.pf-id .profile-id > span { color: var(--text-muted); }
.pf-id .avatar-slot { box-shadow: 0 0 0 3px var(--bg-elevated), 0 4px 12px rgba(13, 118, 201, 0.18); }

.pf-id-streak {
  border: 1px solid var(--line-soft);
  background: var(--bg-elevated);
  color: var(--text-strong);
}

.pf-id-streak svg { color: #f08a24; }
.pf-id-streak small { color: var(--text-dim); }

.pj-label { color: var(--text-muted); }

.pj-big b {
  background: linear-gradient(180deg, var(--accent) 20%, var(--accent-ink));
  -webkit-background-clip: text;
  background-clip: text;
}

.pj-big small { color: var(--text-dim); }

.pj-chip { background: var(--bg-soft); color: var(--text-muted); }
.pj-chip.is-up { background: var(--green-soft); color: var(--green-ink); }
.pj-chip.is-down { background: var(--red-soft, #fdecec); color: var(--wrong-ink); }

.pj-facts > div {
  border-color: var(--line-soft);
  background: var(--bg-elevated);
}

.pj-facts b { color: var(--text-strong); }
.pj-facts span { color: var(--text-dim); }

.pj-chart {
  border-color: var(--line-soft);
  background: var(--bg-elevated);
  box-shadow: 0 12px 32px -18px rgba(13, 118, 201, 0.3);
}

.pj-chart-head b { color: var(--text-strong); }
.pj-chart-head span { color: var(--text-dim); }

.pj-level { stroke: var(--line); }
.pj-level-t { fill: var(--text-dim); }
.pj-axis { fill: var(--text-dim); }
.pj-area { fill: url(#pjArea); }
.pj-mark circle { fill: var(--bg-elevated); stroke: var(--accent); }
.pj-mark text { fill: var(--text-muted); }
.pj-mark.is-best circle { stroke: #e0a132; }
.pj-mark.is-best text { fill: #b07a12; }
.pj-mark.is-level circle { stroke: #57a95a; }
.pj-mark.is-level text { fill: var(--green-ink); }
.pj-now circle { fill: var(--accent); }
.pj-now .pj-pulse { fill: color-mix(in srgb, var(--accent) 30%, transparent); }
.pj-now text { fill: var(--accent-ink); }
.pj-fore { stroke: #e0a132; }
.pj-goal circle { stroke: #e0a132; fill: var(--bg-elevated); }
.pj-goal text { fill: #b07a12; }

.pj-empty span { color: var(--text-muted); }
.btn.pj-ghost { border-color: var(--line); color: var(--text-strong); }

/* ---- aligned overview grid ---- */

.pf-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}

.pf-grid > .pg-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
}

.pf-grid > .pg-card > .pg-card-body {
  flex: 1 1 auto;
}

.pf-span-4 { grid-column: span 4; }
.pf-span-8 { grid-column: span 8; }
.pf-span-12 { grid-column: 1 / -1; }

/* The three stat cards share one shape: a 2 x 2 grid of figures. */
.pf-stat-card .pg-stats,
.pf-stat-card .pg-stats.pg-stats-4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pf-kbd { display: inline-grid; place-items: center; min-width: 26px; height: 26px; margin-right: 6px; padding: 0 5px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; background: var(--bg-soft); color: var(--text-strong); font: var(--fw-bold) 14px/1 var(--font-mono); vertical-align: 3px; }

.pf-stat-card .pg-card-body {
  display: flex;
  flex-direction: column;
}

.pf-stat-card .pg-card-body > p:last-child {
  margin-top: auto !important;
  padding-top: 12px;
}

@media (max-width: 1080px) {
  .pf-span-8, .pf-span-4 { grid-column: 1 / -1; }
  .pf-stat-card { grid-column: span 6; }
  .pf-stat-card:last-of-type { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .pf-stat-card, .pf-stat-card:last-of-type { grid-column: 1 / -1; }
}

html[data-theme='dark'] .pf-top {
  background: linear-gradient(180deg, #13263b 0%, var(--bg) 100%);
}

/* ============================================================ 账号设置 · round 7
   Settings layout: a sticky section list on the left, sections on the right.
   The switch / segmented styles are the practice panel's own (engine.css),
   repeated here because this page does not load engine.css. */

.acc-layout {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  /* settings read as a form: on a wide screen the column stays at its laptop width, centred */
  max-width: 1072px;
  margin: 0 auto;
}
/* the band above lines up with it */
main:has(> .pg-body .acc-layout) > .pg-band.has-scene { width: min(1072px, 100% - 2 * var(--gutter)); }
/* a name or a one-line bio does not need a 1000px field */
.acc-sec .field-input:not([type='number']) { max-width: 560px; }

.acc-nav {
  position: sticky;
  top: calc(var(--nav-h) + 20px);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: var(--bg-elevated);
}

.acc-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 9px;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: var(--fw-semibold);
  text-decoration: none;
}

.acc-nav a svg { width: 17px; height: 17px; }
.acc-nav a:hover { background: var(--bg-soft); color: var(--text-strong); }
.acc-nav a.is-on { background: var(--accent-tint); color: var(--accent-ink); }

.acc-main {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.acc-sec {
  margin: 0;
  scroll-margin-top: calc(var(--nav-h) + 20px);
}

.acc-sec .pg-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.acc-uid { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; margin-bottom: 8px; padding: 14px 16px; border-radius: 14px; background: var(--bg-soft); }
.acc-uid > div { display: flex; align-items: baseline; gap: 10px; }
.acc-uid span { color: var(--text-dim); font-size: 12.5px; }
.acc-uid b { color: var(--text-strong); font-family: "Roboto Mono", ui-monospace, monospace; font-size: 20px; letter-spacing: .08em; }
.acc-uid p { grid-column: 1; margin: 0; color: var(--text-dim); font-size: 12.5px; }
.acc-uid .btn { grid-column: 2; grid-row: 1 / span 2; }
.acc-sec .set-row.acc-hide { margin: 4px 0; padding-left: 14px; padding-right: 14px; border-radius: 12px; transition: background .2s; }
.acc-sec.is-hidden .acc-hide { background: linear-gradient(120deg, color-mix(in srgb, #6b5bd6 11%, var(--bg-elevated)), var(--bg-elevated) 75%); }

.acc-goal {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--line-soft);
}

.acc-goal-chips {
  display: inline-flex;
  gap: 6px;
}

.acc-goal-chips button {
  min-width: 42px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-family: var(--font-mono);
  cursor: pointer;
}

.acc-goal-chips button:hover { border-color: var(--accent-line); color: var(--accent-ink); }

.acc-select {
  width: auto;
  min-width: 140px;
}

.acc-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  font-size: 12.5px;
}

.acc-sec .set-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
}

.acc-sec .set-row + .set-row,
#prefSwitches + .set-row {
  border-top: 1px solid var(--line-soft);
}

.acc-sec .set-text { display: flex; flex: 1 1 220px; flex-direction: column; gap: 3px; min-width: 0; }
/* 带选项按钮的一行：文字至少 220px，放不下就让按钮换到下一行，别把文字挤成一字一行 */
.acc-sec .set-row.is-seg { flex-wrap: wrap; row-gap: 10px; }
.acc-sec .set-text b { color: var(--text-strong); font-size: 14px; font-weight: var(--fw-semibold); }
.acc-sec .set-text span { color: var(--text-dim); font-size: 12.5px; line-height: 1.5; }

.acc-sec .set-switch {
  position: relative;
  flex: 0 0 auto;
  width: 42px;
  height: 25px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--line);
  cursor: pointer;
  transition: background-color 0.18s;
}

.acc-sec .set-switch i {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.18s;
}

.acc-sec .set-switch[aria-checked='true'] { background: var(--accent); }
.acc-sec .set-switch[aria-checked='true'] i { transform: translateX(17px); }

.acc-sec .set-seg {
  display: inline-flex;
  flex: 0 0 auto;
  padding: 3px;
  border-radius: 10px;
  background: var(--bg-soft);
}

.acc-sec .set-seg button {
  padding: 6px 13px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
}

.acc-sec .set-seg button[aria-checked='true'] {
  background: var(--bg-elevated);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  color: var(--text-strong);
  font-weight: var(--fw-semibold);
}

.acc-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.acc-meta > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 13px;
  border-radius: 11px;
  background: var(--bg-soft);
}

.acc-meta span { color: var(--text-dim); font-size: 12px; }
.acc-meta b { color: var(--text-strong); font-size: 14px; overflow-wrap: anywhere; }

.acc-pw {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.acc-flow {
  gap: 10px;
  margin: 18px 0 8px;
}

.acc-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--line-soft);
}

.acc-actions > div { display: flex; flex-direction: column; gap: 3px; }
.acc-actions b { color: var(--text-strong); font-size: 14px; }
.acc-actions span { color: var(--text-dim); font-size: 12.5px; }

.acc-actions.is-danger {
  margin-top: 6px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--wrong-ink) 30%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--wrong-ink) 5%, transparent);
}

.acc-actions.is-danger b { color: var(--wrong-ink); }

.btn.acc-danger {
  border: 1px solid color-mix(in srgb, var(--wrong-ink) 45%, transparent);
  background: var(--bg-elevated);
  color: var(--wrong-ink);
}

.btn.acc-danger:hover { background: var(--wrong-ink); color: #fff; }
.btn.acc-danger.is-solid { background: var(--wrong-ink); color: #fff; }
.btn.acc-danger.is-solid:hover { filter: brightness(1.08); }
/* 注销账号: the row opens into a small form */
.acc-delete { flex-wrap: wrap; }
.acc-delete-form { display: grid; gap: 10px; flex: 1 1 100%; margin-top: 4px; padding-top: 12px; border-top: 1px dashed color-mix(in srgb, var(--wrong-ink) 30%, transparent); }
.acc-delete-form p { margin: 0; color: var(--text-muted); font-size: 13px; line-height: 1.7; }
.acc-delete-form label { display: grid; gap: 5px; color: var(--text-strong); font-size: 13px; font-weight: var(--fw-semibold); }
.acc-delete-form .field-input { max-width: 320px; }
.acc-delete-err { color: var(--wrong-ink) !important; }
.acc-delete-acts { display: flex; gap: 8px; }

@media (max-width: 860px) {
  .acc-layout { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .acc-nav { position: static; flex-direction: row; overflow-x: auto; }
  .acc-nav a { flex: 0 0 auto; }
  .acc-pw, .acc-meta { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================ 课程 v2 · course.html */

.cb-placement {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
  padding: 16px 20px;
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-card-lg);
  background: var(--accent-tint);
}

.cb-placement > div { display: flex; flex-direction: column; gap: 4px; }
.cb-placement b { color: var(--text-strong); font-size: 15px; }
.cb-placement span { color: var(--text-muted); font-size: 13px; line-height: 1.6; }

.cb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.cb-card {
  display: flex;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-card-lg);
  background: var(--bg-elevated);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.cb-card:hover { border-color: var(--accent-line); box-shadow: 0 10px 26px -16px rgba(13, 118, 201, 0.4); }
.cb-card.is-locked { opacity: 0.72; }
.cb-card.is-done { border-color: color-mix(in srgb, var(--green) 50%, transparent); }

.cb-cover {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: linear-gradient(160deg, #3b8fe0, #1662b8);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: var(--fw-bold);
}

.cb-card-main { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; }
.cb-card-main b { color: var(--text-strong); font-size: 16px; }
.cb-card-main > span { color: var(--text-muted); font-size: 13px; line-height: 1.55; }
.cb-meta { display: inline-flex; align-items: center; gap: 4px; color: var(--text-dim) !important; font-size: 12px !important; }
.cb-meta svg { width: 13px; height: 13px; }

.cb-progress { display: block; height: 6px; margin-top: 4px; border-radius: 3px; background: var(--bg-soft); overflow: hidden; }
.cb-progress i { display: block; height: 100%; border-radius: 3px; background: var(--green); }

.cb-note { margin-top: 16px; color: var(--text-dim); font-size: 12.5px; }

.cb-path-head {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.cb-path-sum { margin-left: auto; color: var(--text-muted); font-size: 13.5px; }
.cb-path-sum b { color: var(--text-strong); font-family: var(--font-mono); }
.cb-done-tag { color: var(--green-ink); font-weight: var(--fw-bold); }

.cb-lockbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--bg-soft);
  color: var(--text-muted);
  font-size: 13.5px;
}

.cb-lockbar svg { width: 16px; height: 16px; }

.cb-path { display: flex; flex-direction: column; gap: 22px; }

.cb-unit h2 {
  margin-bottom: 10px;
  color: var(--text-strong);
  font-size: 15px;
  font-weight: var(--fw-bold);
}

.cb-lessons {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 4px;
}

.cb-lesson {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 10px 16px 10px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: var(--bg-elevated);
  color: inherit;
  text-decoration: none;
}

a.cb-lesson:hover { border-color: var(--accent-line); }

.cb-node {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-soft);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: var(--fw-bold);
}

.cb-node svg { width: 14px; height: 14px; }
.cb-lesson.is-done .cb-node { background: var(--green); color: #fff; }
.cb-lesson.is-current { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.cb-lesson.is-current .cb-node { background: var(--accent); color: #fff; }
.cb-lesson.is-locked { background: transparent; color: var(--text-dim); }
.cb-lesson.is-locked b { color: var(--text-dim); }

.cb-l-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cb-l-main b { overflow: hidden; color: var(--text-strong); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }

.cb-l-type {
  flex: 0 0 auto;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--bg-soft);
  color: var(--text-dim);
  font-size: 11px;
}

.cb-l-type.is-unit-test { background: var(--gold-soft); color: var(--gold-ink); }
.cb-l-type.is-review { background: var(--green-soft); color: var(--green-ink); }
.cb-l-type.is-guide { background: var(--accent-tint); color: var(--accent-ink); }

.cb-stars { display: inline-flex; gap: 1px; font-size: 13px; }
.cb-stars i { color: var(--line); font-style: normal; }
.cb-stars i.is-on { color: var(--gold-500); }
.cb-l-tag { color: var(--text-dim); font-size: 12px; }
.cb-l-go { color: var(--accent-ink); font-size: 13px; font-weight: var(--fw-bold); }

@media (max-width: 640px) {
  .cb-placement { flex-direction: column; align-items: flex-start; }
  .cb-path-sum { margin-left: 0; }
}

/* Teaching cards on the practice page reuse the key-intro card. */
.ki-teach .ki-teach-body { max-width: 560px; font-size: 14.5px; line-height: 1.75; }



/* ================================================= course center (cc-*)
   assets/js/pages/course.js. Accent per course: --ca / --ca-deep / --ca-soft
   / --ca-tint come from OOT.courseArt.theme(). */

/* 2026-10-12 第二版：继续学习和我的进度并排；下面整页宽给课程卡片（一行四张）；
   跳转条贴顶；入学测评、自定义练习、每日一词、小贴士放在最底下一行 */
.cc-top { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: stretch; }
/* the stats sit beside the hero, so they set its height: kept to about 220px —
   the ring row says 今日目标 itself, the guest note is one line */
.cc-top > .cc-panel { display: flex; flex-direction: column; justify-content: center; padding: 14px 16px; }
.cc-top > .cc-panel h3 { display: none; }
.cc-top .cc-today svg { width: 38px; height: 38px; }
.cc-top .cc-nums { gap: 8px; margin-top: 10px; }
.cc-top .cc-nums div { padding: 6px 10px; }
.cc-top .cc-nums dt { font-size: 11.5px; }
.cc-top .cc-nums dd { margin-top: 1px; font-size: 16px; }
.cc-top .cc-note { margin-top: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.cc-jump {
  position: sticky; top: calc(var(--nav-h, 64px) + 8px); z-index: 4;
  display: flex; flex-wrap: wrap; gap: 6px; width: fit-content; max-width: 100%;
  margin: 26px 0 0; padding: 5px; border: 1px solid var(--line-soft); border-radius: 99px;
  background: color-mix(in srgb, var(--bg-elevated) 92%, transparent); backdrop-filter: blur(8px);
  box-shadow: 0 10px 24px -20px rgba(0, 0, 0, 0.5);
}
.cc-jump a { display: inline-flex; align-items: baseline; gap: 5px; padding: 6px 14px; border-radius: 99px; color: var(--text-strong); font-size: 13.5px; font-weight: 700; text-decoration: none; }
.cc-jump a:hover { background: var(--bg-sunken); }
.cc-jump small { color: var(--text-muted); font-size: 11.5px; font-weight: 600; }
.cc-zone { scroll-margin-top: calc(var(--nav-h, 64px) + 64px); }
.cc-extras { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 16px; margin-top: 44px; }
.cc-extras .cc-panel { margin: 0; }
.cc-legacy > summary { cursor: pointer; list-style: none; }
.cc-legacy > summary::-webkit-details-marker { display: none; }
.cc-legacy-toggle { margin-left: auto; width: 10px; height: 10px; border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted); transform: rotate(45deg); transition: transform 0.2s; align-self: center; }
.cc-legacy[open] .cc-legacy-toggle { transform: rotate(-135deg); }
.cc-legacy > .cc-grid { margin-top: 18px; }
.cc-step {
  position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 26px; height: 26px;
  border-radius: 50%; background: rgba(255, 255, 255, 0.94); color: var(--ca-deep); font-size: 13px; font-weight: 900;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.cc-bar { position: relative; display: block; flex: 1; height: 8px; border-radius: 99px; overflow: hidden;
  background: color-mix(in srgb, var(--ca, var(--accent)) 14%, var(--line-soft)); }
.cc-bar i { display: block; height: 100%; border-radius: inherit; background: var(--ca, var(--accent)); }

/* 全部课程: the chips and the search box get their own tinted band, so the
   filter row reads as one control and the grid starts on a clean line
   (2026-10-11) */
.cc-filter {
  padding: 12px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  background: var(--bg-sunken);
}
.cc-filter .gb-search { background: var(--bg-elevated); }
.cc-filter + .cc-grid { margin-top: 18px; }

.cc-hero {
  display: grid;
  /* picture | words | action. The picture is flush with the card's edge — the
     same borderless look the course cards below use — and 240px wide, which is
     its own 16:9 height, so the scene is not cropped (2026-10-11). */
  grid-template-columns: 240px minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ca) 22%, var(--line-soft));
  border-radius: 18px;
  background: var(--bg-elevated);
  box-shadow: 0 22px 44px -30px color-mix(in srgb, var(--ca) 80%, transparent);
}
.cc-hero-art { display: block; width: 240px; height: 100%; overflow: hidden; border-radius: 0; }
.cc-hero-art svg { display: block; width: 100%; height: 100%; }
.cc-hero-main { display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 14px 18px; min-width: 0; }
.cc-hero-eyebrow { margin: 0; color: var(--ca-deep); font-size: 12px; font-weight: 800; letter-spacing: 0.04em; }
.cc-hero h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 0; color: var(--text-strong); font-size: 19px; line-height: 1.3; }
.cc-hero-no { padding: 2px 8px; border-radius: 99px; background: var(--ca-soft); color: var(--ca-deep); font-size: 12px; font-weight: 800; }
/* the hint can be a whole sentence: two lines at most, then it fades out */
.cc-hero-next {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 0;
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.55;
}
/* the bar only has to show "how far along": 220px is enough, a full-width bar
   read as a page-level progress line (2026-10-11) */
.cc-hero-bar { display: flex; align-items: center; gap: 10px; margin-top: 3px; }
.cc-hero-bar .cc-bar { flex: 0 1 220px; }
.cc-hero-bar b { color: var(--text-muted); font-size: 12px; white-space: nowrap; }
.cc-hero-actions { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 7px; padding: 14px 16px; margin-top: 0; }
.cc-hero-actions .cc-link { display: block; text-align: center; }

.cc-go, .cm-go {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: 14px;
  background: var(--ca);
  box-shadow: 0 5px 0 var(--ca-deep);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  transition: transform 0.08s, box-shadow 0.08s;
}
.cc-go:hover, .cm-go:hover { transform: translateY(-1px); color: #fff; }
.cc-go:active, .cm-go:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ca-deep); }
.cc-go kbd, .cm-go kbd { padding: 1px 6px; border-radius: 5px; background: rgba(255, 255, 255, 0.22); font: 600 11px var(--font-mono); }
/* 小一 sitting on the button (sprite row 48 of 52 = the edge). */
.cc-link { color: var(--ca-deep); font-size: 14px; font-weight: 700; }

.cc-head { display: flex; align-items: baseline; gap: 12px; margin: 34px 0 14px; }
.cc-head h2 { margin: 0; color: var(--text-strong); font-size: 19px; }
.cc-head span { color: var(--text-muted); font-size: 13px; }

/* 课程中心三区（主线 / 专项 / 内容库）与主线里的两条路 */
.cc-zone { margin-top: 38px; }
.cc-zone-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line-soft); }
.cc-zone-head h2 { margin: 0; color: var(--text-strong); font-size: 21px; }
.cc-zone-head span { color: var(--text-muted); font-size: 13px; }
.cc-zone > .cc-grid, .cc-zone > .cc-filter { margin-top: 18px; }
.cc-lane .cc-head { flex-wrap: wrap; margin: 22px 0 12px; }
.cc-lane .cc-head h3 { margin: 0; color: var(--text-strong); font-size: 16px; }
.cc-lane-test { margin-left: auto; color: var(--text-muted); font-size: 12.5px; text-decoration: none; }
.cc-lane-test:hover { color: var(--accent-ink); }
/* 前置没学完：淡一点、写「建议先学」，但照样能点进去（推荐不硬锁） */
.cc-card.is-later .cc-cover svg.ca { filter: saturate(0.55); opacity: 0.85; }
.cc-card.is-later .cc-state { color: var(--text-muted); font-weight: 600; }
@media (max-width: 640px) { .cc-lane-test { margin-left: 0; flex-basis: 100%; } }
.cc-lane .cc-tags { display: none; }   /* 主线标题已经说了英文 / 中文 */

.cc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 228px), 1fr)); gap: 16px; }
.cc-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  background: var(--bg-elevated);
  color: inherit;
  transition: transform 0.16s var(--ease), box-shadow 0.16s var(--ease), border-color 0.16s;
}
.cc-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--ca) 40%, var(--line-soft)); box-shadow: 0 18px 36px -22px color-mix(in srgb, var(--ca) 85%, transparent); color: inherit; }
.cc-card.is-current { border: 2px solid var(--ca); }
.cc-cover { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.cc-cover svg { display: block; width: 100%; height: 100%; }
.cc-badge { position: absolute; top: 8px; left: 8px; padding: 3px 9px; border-radius: 99px; background: rgba(255, 255, 255, 0.94); color: var(--ca-deep); font-size: 12px; font-weight: 800; }
.cc-badge.is-now { background: var(--ca); color: #fff; }
.cc-badge.is-new { background: #1f7a44; color: #fff; }
.cc-badge.is-legacy { background: #6741d9; color: #fff; }
/* 课程升级了：给学过开服课程的人一句话 */
.cc-notice { display: flex; align-items: flex-start; gap: 10px; margin-top: 18px; padding: 12px 16px; border-radius: 14px; background: #f3f0ff; color: #3b2a8a; font-size: 13.5px; line-height: 1.65; }
.cc-notice > svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; }
.cm-lockbar.is-legacy { background: #f3f0ff; color: #3b2a8a; }
.cc-body { display: flex; flex: 1; flex-direction: column; gap: 4px; padding: 11px 14px 13px; }
.cc-tags { display: flex; gap: 6px; }
.cc-tags i { padding: 2px 8px; border-radius: 6px; background: var(--ca-soft); color: var(--ca-deep); font-size: 11.5px; font-style: normal; font-weight: 700; }
.cc-title { color: var(--text-strong); font-size: 16px; }
/* two lines at most: the whole subtitle is on the course map */
.cc-sub { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: var(--text-muted); font-size: 12.5px; line-height: 1.55; }
.cc-meta { display: flex; justify-content: space-between; color: var(--text-muted); font-size: 12.5px; }
.cc-star { color: #d99a0b; font-weight: 800; }
.cc-foot { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 6px; }
.cc-state { display: inline-flex; align-items: center; gap: 4px; color: var(--ca-deep); font-size: 12.5px; font-weight: 800; white-space: nowrap; }
.cc-arrow { margin-left: 3px; font-style: normal; }
.cc-state svg { width: 14px; height: 14px; }

.cc-panel { padding: 16px; border: 1px solid var(--line-soft); border-radius: 18px; background: var(--bg-elevated); }
.cc-panel h3 { margin: 0 0 10px; color: var(--text-strong); font-size: 15px; }
.cc-today { display: flex; align-items: center; gap: 12px; }
/* the ring shows today's goal; at 0 minutes a 64px circle was mostly empty
   space in the sidebar (2026-10-11) */
.cc-today svg { width: 46px; height: 46px; flex: 0 0 auto; transform: rotate(-90deg); }
.cc-ring-bg, .cc-ring { fill: none; stroke-width: 7; }
.cc-ring-bg { stroke: var(--line-soft); }
.cc-ring { stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset 0.6s var(--ease); }
.cc-today b { display: block; color: var(--text-strong); font-size: 15px; }
.cc-today span { color: var(--text-muted); font-size: 12.5px; }
.cc-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0 0; }
.cc-nums div { padding: 10px 12px; border-radius: 12px; background: var(--bg-soft, var(--bg)); }
.cc-nums dt { color: var(--text-muted); font-size: 12px; }
.cc-nums dd { margin: 3px 0 0; color: var(--text-strong); font-size: 20px; font-weight: 800; }
.cc-nums dd small { color: var(--text-muted); font-size: 12px; font-weight: 600; }
.cc-nums dd.is-star { color: #d99a0b; }
.cc-note { margin: 14px 0 0; color: var(--text-muted); font-size: 12.5px; line-height: 1.6; }
.cc-note a { color: var(--accent-ink); text-decoration: underline; }
.cc-place p { margin: 0 0 12px; color: var(--text-muted); font-size: 13px; line-height: 1.7; }
.cc-place b { color: var(--text-strong); }
/* 打字指南 (guide-*.html): the on-screen keyboard in a section */
/* the hands reach below and beside the tray: clipped to the section, with room under the keys for the fingers */
.gd-kb { position: relative; max-width: 900px; margin: 0 auto; padding-bottom: 64px; overflow: hidden; }
@media (max-width: 640px) { .gd-kb { padding-bottom: 40px; overflow-x: auto; overflow-y: hidden; } }
.gd-kb-hint { margin: 14px 0 0; color: var(--text-muted); font-size: 13.5px; text-align: center; }
.cc-place .cc-place-acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }

@media (max-width: 1000px) {
  .cc-top { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  /* phones: the picture is the top band again, the words and the button below */
  .cc-hero { grid-template-columns: 1fr; gap: 0; padding: 0; border-radius: 18px; }
  .cc-hero-art { width: 100%; aspect-ratio: 16 / 6; border-radius: 18px 18px 0 0; }
  .cc-hero-main { padding: 12px 16px 2px; }
  .cc-hero h2 { font-size: 19px; }
  .cc-hero-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px; padding: 0 16px 16px; }
  .cc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cc-body { padding: 8px 10px 10px; }
  .cc-sub { display: none; }
  .cc-jump { width: 100%; justify-content: space-between; }
  .cc-jump a { padding: 6px 9px; }
}

/* ==================================================== course map (cm-*, ct-*) */

.pg-body.cm-host { max-width: none; padding: 0; }
.cm { min-height: 70vh; padding-bottom: 64px; background: color-mix(in srgb, var(--ca) 5%, var(--bg)); }

.cm-banner { position: relative; min-height: 330px; overflow: hidden; }

.cm-banner-in { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 12px; min-height: 330px; padding: 84px 24px 26px; }
.cm-back { align-self: flex-start; padding: 5px 12px; border-radius: 99px; background: rgba(255, 255, 255, 0.88); color: var(--ca-deep); font-size: 13px; font-weight: 700; }
.cm-card { max-width: 500px; padding: 18px 22px 20px; border-radius: 18px; background: rgba(255, 255, 255, 0.92); box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.45); backdrop-filter: blur(6px); }
.cm-eyebrow { margin: 0; color: var(--ca-deep); font-size: 12px; font-weight: 800; letter-spacing: 0.04em; }
.cm-card h1 { margin: 2px 0 4px; color: #16202e; font-size: 28px; }
.cm-sub { margin: 0 0 10px; color: #5b6576; font-size: 13.5px; line-height: 1.6; }
.cm-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.cm-pills span { padding: 4px 10px; border-radius: 99px; background: var(--ca-soft); color: var(--ca-deep); font-size: 12.5px; }
.cm-pills span.is-star { background: #fff3cf; color: #a86f00; }
.cm-pills b { font-weight: 800; }
.cm-go { margin-top: 14px; }
.cm-finished { display: inline-block; margin-top: 12px; color: var(--ca-deep); font-weight: 800; }

.cm-lockbar { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding: 12px 16px; border-radius: 12px; background: #fff7e6; color: #8a5a00; font-size: 13.5px; }
.cm-lockbar > svg { width: 16px; height: 16px; flex: 0 0 auto; }
.cm-lockbar span { flex: 1; }

.cm-layout { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 28px; padding-top: 30px; }
.cm-unit { margin-bottom: 34px; scroll-margin-top: 90px; }
.cm-unit-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
/* 新课程的地图（course.js v4）：学完的单元折成一行，后面的单元淡一些 */
.cm-unit.is-folded { margin-bottom: 12px; }
.cm-unit.is-folded .cm-tiles { display: none; }
.cm-unit.is-folded .cm-unit-head,
.cm-unit.is-unfolded .cm-unit-head { cursor: pointer; margin-bottom: 0; padding: 10px 14px; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--bg-elevated); }
.cm-unit.is-unfolded .cm-unit-head { margin-bottom: 16px; }
.cm-unit-toggle { margin-left: auto; color: var(--text-dim); font-size: 13px; }
.cm-unit.is-folded .cm-unit-head:focus-visible,
.cm-unit.is-unfolded .cm-unit-head:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cm-unit.is-later { opacity: 0.6; }
/* 拼音纠音：体检之后每组的状态 */
.ct-py { margin-left: auto; padding: 1px 6px; border-radius: 6px; font-size: 11px; font-weight: 800; }
.ct-py.is-weak { background: #fdecec; color: #c92a2a; }
.ct-py.is-ok { background: #e8f7ee; color: #1f7a44; }
.cm-unit.is-later:hover, .cm-unit.is-later:focus-within { opacity: 1; }
.cm-unit-no { padding: 4px 10px; border-radius: 8px; background: var(--ca); color: #fff; font-size: 12.5px; font-weight: 800; }
.cm-unit-head h2 { margin: 0; color: var(--text-strong); font-size: 19px; }
.cm-unit-sum { margin-left: auto; color: var(--text-muted); font-size: 13px; }
.cm-unit-medal { font-size: 18px; }

.cm-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 30px 16px; }
.ct-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  aspect-ratio: 1 / 1.08;
  padding: 10px 12px 0;
  border: 1px solid color-mix(in srgb, var(--ca) 18%, var(--line-soft));
  border-radius: 16px;
  background: var(--bg-elevated);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--ca) 20%, var(--line-soft));
  color: inherit;
  transition: transform 0.14s var(--ease), box-shadow 0.14s var(--ease);
}
a.ct-tile:hover { transform: translateY(-3px); box-shadow: 0 7px 0 color-mix(in srgb, var(--ca) 30%, var(--line-soft)); color: inherit; }
a.ct-tile:active { transform: translateY(2px); box-shadow: 0 2px 0 color-mix(in srgb, var(--ca) 30%, var(--line-soft)); }
.ct-top { display: flex; align-items: flex-start; justify-content: space-between; }
.ct-num { color: var(--text-strong); font-size: 26px; font-weight: 900; line-height: 1; letter-spacing: -0.02em; }
.ct-type { padding: 2px 7px; border-radius: 6px; background: var(--ca-soft); color: var(--ca-deep); font-size: 11px; font-weight: 700; }
.ct-type.is-unit-test { background: #fff3cf; color: #a86f00; }
.ct-type.is-guide { background: #fde6f0; color: #b3326b; }
.ct-art { display: grid; flex: 1; place-items: center; }
.ct-keys { display: flex; gap: 6px; }
.ct-keys kbd { display: grid; place-items: center; min-width: 32px; height: 34px; padding: 0 7px; border: 1px solid #d6dfeb; border-radius: 8px;
  background: #fff; box-shadow: 0 3px 0 #c3cfdf; color: #24324a; font: 800 15px var(--font-mono); }
.ct-icon { width: 44px; height: 44px; }
.ct-words { display: flex; flex-direction: column; gap: 5px; width: 58px; }
.ct-words i { display: block; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--ca) 45%, #fff); }
.ct-words i:nth-child(2) { width: 80%; }
.ct-words i:nth-child(3) { width: 58%; }
.ct-xy { width: 44px; height: 48px; }
.ct-foot { display: grid; height: 22px; place-items: center; }
.ct-stars { display: flex; gap: 2px; }
.ct-stars i { width: 15px; height: 15px; background: color-mix(in srgb, var(--text-muted) 22%, transparent);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.ct-stars i.is-on { background: #f5b82e; }
.ct-tag { color: var(--ca-deep); font-size: 11.5px; font-weight: 700; }
.ct-tag.is-review { padding: 1px 8px; border-radius: 999px; background: #fff1cf; color: #9a6a0c; }
.ct-tile.is-review { outline: 2px dashed #f2b705; outline-offset: -3px; }
/* 学完之后课程新加的关卡：能进、标「新增」，但不是「下一关」 */
.ct-tag.is-new { padding: 1px 8px; border-radius: 999px; background: #e2f2e6; color: #1f7a44; }
.ct-tile.is-new { outline: 2px dashed #4aa96c; outline-offset: -3px; }
.ct-lock svg { width: 16px; height: 16px; color: var(--text-muted); }
.ct-start { color: var(--ca-deep); font-size: 13.5px; font-weight: 900; }
.ct-name { margin: 6px -12px 0; padding: 7px 8px; overflow: hidden; border-top: 1px solid var(--line-soft); border-radius: 0 0 15px 15px;
  color: var(--text-strong); font-size: 12.5px; font-weight: 700; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.ct-tile.is-done .ct-name { background: color-mix(in srgb, var(--ca) 8%, transparent); }
.ct-tile.is-current { border: 2px solid var(--ca); box-shadow: 0 5px 0 var(--ca-deep), 0 0 0 6px color-mix(in srgb, var(--ca) 20%, transparent); }
.ct-tile.is-current .ct-name { border-top-color: var(--ca); background: var(--ca); color: #fff; }
.ct-tile.is-locked { background: color-mix(in srgb, var(--bg-elevated) 65%, transparent); box-shadow: none; cursor: not-allowed; opacity: 0.6; }
.ct-tile.is-locked .ct-art { filter: grayscale(1); opacity: 0.6; }
.ct-perch { position: absolute; top: -48px; right: 4px; display: flex; pointer-events: none; }
.ct-perch .xy-shadow { display: none; }
/* 收藏这关（会员，2026-10-18）：类型标签下面一颗星；平时很淡，指上去或收藏了才明显 */
.ct-fav { position: absolute; top: 36px; right: 8px; display: grid; width: 28px; height: 28px; place-items: center; border-radius: 8px;
  color: color-mix(in srgb, var(--text-muted) 70%, transparent); opacity: 0; cursor: pointer; transition: opacity 0.14s, color 0.14s, background 0.14s; }
.ct-fav svg { width: 17px; height: 17px; }
a.ct-tile:hover .ct-fav, .ct-fav:focus-visible { opacity: 1; }
.ct-fav:hover { background: color-mix(in srgb, #f5b82e 16%, transparent); color: #c98a00; }
.ct-fav.is-on { color: #f5b82e; opacity: 1; }
.ct-fav:not(.is-on) svg path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.ct-fav.is-busy { opacity: 0.5; pointer-events: none; }
@media (hover: none) { .ct-fav { opacity: 0.75; } }
/* 右边单元列表下面：收藏与错题 */
.cm-nav .cm-nb { display: flex; align-items: center; gap: 10px; margin-top: 6px; padding: 10px; border-top: 1px solid var(--line-soft); border-radius: 0 0 10px 10px; }
.cm-nav .cm-nb svg { flex: 0 0 auto; width: 18px; height: 18px; color: #e0a100; }
.cm-nav .cm-nb span { display: grid; gap: 2px; }
.cm-nav .cm-nb b { grid-column: auto; }
.cc-nb-pro { margin-left: 4px; padding: 1px 6px; border-radius: 6px; background: #fff1cf; color: #9a6a0c; font-size: 11px; font-weight: 700; }

.cm-nav { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 4px; align-self: start; padding: 12px; border: 1px solid var(--line-soft); border-radius: 16px; background: var(--bg-elevated); }
.cm-nav a { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 5px 8px; padding: 8px 10px; border-radius: 10px; color: inherit; }
.cm-nav a:hover { background: var(--ca-soft); color: inherit; }
.cm-nav a.is-here { background: var(--ca-soft); }
.cm-nav b { grid-column: 1 / -1; color: var(--text-strong); font-size: 13px; }
.cm-nav .cc-bar { height: 6px; }
.cm-nav small { color: var(--text-muted); font-size: 11.5px; }

[data-theme='dark'] .cm-card { background: rgba(20, 26, 38, 0.9); }
[data-theme='dark'] .cm-card h1 { color: #eef3fa; }
[data-theme='dark'] .cm-sub { color: #a9b4c4; }
[data-theme='dark'] .ct-keys kbd { border-color: #3a4558; background: #253043; box-shadow: 0 3px 0 #151c28; color: #e8eef8; }
[data-theme='dark'] .cm-lockbar { background: #3a2f16; color: #f2d08a; }

@media (max-width: 1000px) {
  .cm-layout { grid-template-columns: 1fr; }
  .cm-nav { display: none; }
}
@media (max-width: 560px) {
  .cm-banner, .cm-banner-in { min-height: 0; }
  .cm-card { max-width: none; }
  .cm-card h1 { font-size: 23px; }
  .cm-tiles { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 12px; }
  .ct-num { font-size: 20px; }
  .ct-keys kbd { min-width: 26px; height: 28px; font-size: 13px; }
  .ct-stars i { width: 12px; height: 12px; }
}

/* On the course map 小一 already sits on the next tile. */
body:has(.cm) .xy-dock { display: none; }

/* ======================================================== scene banners
   course-art.js upgradeBand(): the page header gets its own illustrated
   scene (like the course map), and its words sit on a card on the left. */
.pg-band.has-scene {
  display: flex;
  align-items: center;
  min-height: 300px;
  padding: 88px 0 26px;
  overflow: hidden;
  border-bottom: 0;
  background: var(--ca-soft);
}
.pg-band.has-scene.pg-band-compact { min-height: 243px; }

.has-scene .pg-band-inner { position: relative; flex-direction: column; align-items: flex-start; gap: 12px; width: 100%; }
.has-scene .pg-band-main {
  flex: 0 1 auto;
  width: min(560px, 100%);
  padding: 18px 22px 20px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.93);
  box-shadow: 0 18px 40px -26px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
}
.has-scene .pg-band-eyebrow { margin-bottom: 6px; color: var(--ca-deep); }
.has-scene .pg-band-title { color: #16202e; font-size: 28px; }
.has-scene .pg-band-lead { color: #5b6576; font-size: 14px; }
.has-scene .pg-band-side {
  padding: 10px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.93);
  box-shadow: 0 14px 30px -24px rgba(0, 0, 0, 0.45);
}
.has-scene .pg-band-figure { text-align: left; }
.has-scene .pg-band-figure b { color: #16202e; }
[data-theme='dark'] .has-scene .pg-band-main,
[data-theme='dark'] .has-scene .pg-band-side { background: rgba(20, 26, 38, 0.9); }
[data-theme='dark'] .has-scene .pg-band-title,
[data-theme='dark'] .has-scene .pg-band-figure b { color: #eef3fa; }
[data-theme='dark'] .has-scene .pg-band-lead { color: #a9b4c4; }
@media (max-width: 760px) {
  .pg-band.has-scene { min-height: 0; padding: 80px 0 18px; }
  .has-scene .pg-band-title { font-size: 23px; }
}

/* Every page header is one rounded card exactly as wide as the content under it —
   an illustrated one with its scene inside and the title straight on the sky (no
   smaller white box of its own). A header half the width of the cards below it,
   or running edge to edge above them, read as two pages stacked (2026-10-09). */
header.pg-band {
  display: block;
  width: calc(min(var(--max), 100%) - 2 * var(--gutter));
  margin: calc(var(--nav-h) + 16px) auto 0;
  padding: 24px 0 22px;
  border: 0;
  border-radius: 24px;
  overflow: hidden;
}
header.pg-band:not(.has-scene) {
  background: linear-gradient(135deg, var(--accent-tint), color-mix(in srgb, var(--accent-tint) 35%, var(--bg-elevated)));
  box-shadow: inset 0 0 0 1px var(--line-soft);
}
header.pg-band .pg-band-inner { max-width: none; padding: 0 40px; }
main:has(> header.pg-band) > .pg-body { padding-top: 24px; }
.pg-band.has-scene {
  /* One height for every illustrated header — 奖杯室's, 243px — so the picture
     (scene-art, a share of the height) is the same size on every page and the
     words sit centred whatever their length (2026-10-09). How big 小一 is drawn
     inside that frame is decided per scene in course-art.js (2026-10-10). */
  display: flex;
  align-items: center;
  min-height: 243px;
  padding: 24px 0 22px;
  box-shadow: 0 18px 44px -30px rgba(10, 40, 80, 0.45);
}
.pg-band.has-scene .scene-wrap { max-width: none; padding: 0 28px; }
.has-scene .pg-band-main { width: min(640px, 100%); padding: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.has-scene .pg-band-title { font-size: 30px; }
.has-scene .pg-band-lead { color: #3f4a5c; font-size: 15px; }
[data-theme='dark'] .has-scene .pg-band-main { background: none; }
@media (max-width: 760px) {
  header.pg-band, .pg-band.has-scene { margin-top: calc(var(--nav-h) + 12px); padding: 22px 0 20px; border-radius: 18px; }
  header.pg-band .pg-band-inner { padding: 0 20px; }
  .has-scene .pg-band-title { font-size: 24px; }
  main:has(> header.pg-band) > .pg-body { padding-top: 16px; }
}

/* ---- scene layers (course-art.js banner()): sky fills, ground stretches,
   the picture keeps its shape at the right of the column. */
.scene { position: absolute; inset: 0; overflow: hidden; }
.scene-ground { position: absolute; right: 0; bottom: 0; left: 0; width: 100%; height: 70px; }
.scene-wrap { position: relative; display: flex; align-items: flex-end; justify-content: flex-end; height: 100%; }
.scene-art { display: block; width: auto; height: min(88%, 250px); max-width: 52%; margin-right: 1%; overflow: visible; }  /* rays and far hills may run past the box into the sky (course-art.js) */
@media (max-width: 900px) {
  .scene-art { height: min(62%, 170px); opacity: 0.55; }
}
@media (max-width: 560px) {
  .scene-art { display: none; }
}

/* ---- 我的数据: the same scene banner; who you are on a card on the left,
   the journey on a full-width card under it. */
.pf-top.has-scene { position: relative; overflow: hidden; padding: calc(var(--nav-h) + 26px) 0 26px; border-bottom: 0; background: var(--ca-soft); }
.pf-top.has-scene > .wrap:not(.scene-wrap) { position: relative; }
.pf-top.has-scene .scene-wrap { align-items: flex-start; padding-top: calc(var(--nav-h) + 6px); }
.pf-top.has-scene .scene-art { height: min(58%, 210px); }
.pf-top.has-scene .pf-id {
  width: min(620px, 100%);
  padding: 16px 20px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.93);
  box-shadow: 0 18px 40px -26px rgba(0, 0, 0, 0.45);
}
.pf-top.has-scene .pf-journey {
  margin-top: 16px;
  padding: 18px 22px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 18px 40px -28px rgba(0, 0, 0, 0.4);
}
[data-theme='dark'] .pf-top.has-scene .pf-id,
[data-theme='dark'] .pf-top.has-scene .pf-journey { background: rgba(20, 26, 38, 0.92); }

.ct-keys.is-hanzi kbd { font-family: var(--font-sans); font-size: 16px; }

/* ============================================================ 我的数据 · round 8
   Banner like a course map: who you are on a card at the left, 小一 and his
   chart free at the right (nothing sits on top of him any more). Under it,
   成长之路 as the page's one big card, then the tabs; the overview is two
   columns that stack on their own, so no card is stretched into an empty box. */

.pf-top.has-scene {
  display: flex;
  align-items: center;
  min-height: 300px;
  padding: calc(var(--nav-h) + 24px) 0 56px;
}
.pf-top.has-scene > .wrap:not(.scene-wrap) { width: 100%; }
.pf-top.has-scene .scene-wrap { align-items: flex-end; padding-top: 0; }
.pf-top.has-scene .scene-art { height: min(84%, 240px); margin-bottom: 26px; }

.pf-top.has-scene .pf-id {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: 'avatar text' 'foot foot';
  align-items: center;
  gap: 14px 16px;
  width: min(460px, 100%);
  padding: 20px 22px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
}
.pf-id .avatar-slot { grid-area: avatar; }
.pf-id .avatar-slot .avatar { width: 64px; height: 64px; font-size: 26px; }
.pf-id .profile-id { grid-area: text; min-width: 0; }
.pf-eyebrow { margin: 0 0 2px; color: var(--ca-deep, var(--accent-ink)); font-size: 12px; font-weight: 800; letter-spacing: 0.06em; }
.pf-top.has-scene .pf-id .profile-id h1 { display: flex; flex-wrap: wrap; align-items: center; row-gap: 4px; margin: 0; color: #16202e; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.pf-top.has-scene .pf-id .profile-id > span { display: block; margin-top: 3px; color: #5b6576; font-size: 13px; }
.pf-id-foot { grid-area: foot; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.pf-id-foot .pf-id-streak { margin: 0; }
[data-theme='dark'] .pf-top.has-scene .pf-id .profile-id h1 { color: #eef3fa; }
[data-theme='dark'] .pf-top.has-scene .pf-id .profile-id span { color: #a9b4c4; }

/* 成长之路 */
.pf-journey.pf-journey-card {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 28px;
  margin: 0 0 28px;
  padding: 24px 26px;
  border: 1px solid var(--line-soft);
  border-radius: 22px;
  background: var(--bg-elevated);
  box-shadow: var(--shadow-md);
}
.pf-journey-card .pj-chart { border: 0; box-shadow: none; padding: 0; background: none; }
.pf-journey-card .pj-now-col { padding-right: 26px; border-right: 1px solid var(--line-soft); }
.pf-journey-card:has(.pj-empty) { display: block; }
/* 赛道选择器：架在两栏之上，占满整行。速度是分赛道的数字，先选赛道再看数字。 */
.pf-journey-card .pj-pick {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: -6px 0 2px;
}
.pf-journey-card .pj-pick > span { font-size: 12.5px; color: var(--text-muted); }
.pf-journey-card .pj-pick .lb-seg button { padding: 5px 12px; font-size: 12.5px; }

/* the overview */
.pf-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 20px;
  align-items: start;
  margin-bottom: 20px;
}
.pf-col-main,
.pf-col-side { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.pf-cols .pg-card { margin: 0; }
.pf-cal-card { margin: 0; }

/* figures: one shape everywhere — a soft tile, the number, then the label */
.pf-cols .pg-stats { gap: 10px; }
.pf-col-main .pg-stats.pg-stats-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pf-col-side .pg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* speed, accuracy, consistency, then 按键反应 and the slowest key: six, three a row */
.pf-col-main .pg-stats.pg-stats-4#topStats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pf-cols .pg-stat { padding: 12px 14px; border: 0; border-radius: 14px; background: var(--bg-soft); }
.pf-cols .pg-stat b { font-size: 22px; }

@media (max-width: 1080px) {
  .pf-cols { grid-template-columns: minmax(0, 1fr); }
  .pf-col-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
@media (max-width: 900px) {
  .pf-journey.pf-journey-card { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 18px; }
  .pf-journey-card .pj-now-col { padding-right: 0; border-right: 0; }
}
@media (max-width: 640px) {
  .pf-col-side { grid-template-columns: minmax(0, 1fr); }
  .pf-col-main .pg-stats.pg-stats-4, .pf-col-main .pg-stats.pg-stats-4#topStats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-top.has-scene { min-height: 0; padding-bottom: 36px; }
}
/* 我的数据's banner, like every page header: one card as wide as the content,
   who you are straight on the scene — no second, narrower box inside it */
.pf-top.has-scene {
  width: calc(min(var(--max), 100%) - 2 * var(--gutter));
  min-height: 230px;
  margin: calc(var(--nav-h) + 20px) auto 0;
  padding: 30px 0 30px;
  border-radius: 24px;
  box-shadow: 0 18px 44px -30px rgba(10, 40, 80, 0.45);
}
.pf-top.has-scene > .wrap:not(.scene-wrap) { max-width: none; padding: 0 40px; }
.pf-top.has-scene .scene-wrap { max-width: none; padding: 0 28px; }
.pf-top.has-scene .scene-art { margin-bottom: 18px; }
.pf-top.has-scene .pf-id { width: min(520px, 100%); padding: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.pf-top.has-scene .pf-id-foot { border-top-color: rgba(16, 32, 46, 0.12); }
[data-theme='dark'] .pf-top.has-scene .pf-id { background: none; }
@media (max-width: 760px) {
  .pf-top.has-scene { margin-top: calc(var(--nav-h) + 12px); padding: 22px 0 20px; border-radius: 18px; }
  .pf-top.has-scene > .wrap:not(.scene-wrap) { padding: 0 20px; }
}
.pf-next { position: relative; }
.pf-next-xy { position: absolute; right: 18px; bottom: 10px; pointer-events: auto; }
.pf-next-xy .xy-say { max-width: 200px; }
@media (max-width: 640px) { .pf-next-xy { display: none; } }
.pf-col-main .pf-hours { height: 96px; gap: 18px; }
.pf-col-main .pf-hour i { max-width: 44px; }

/* 账号设置 · 试听全部音效 */
.sfx-grid { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0 14px; }
.sfx-chip { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-elevated); color: var(--text-strong); font-size: 13px; font-weight: 600; cursor: pointer; transition: transform 0.08s, background 0.15s; }
.sfx-chip:hover { background: var(--accent-tint); border-color: var(--accent-line, var(--accent)); color: var(--accent-ink); }
.sfx-chip:active { transform: translateY(1px) scale(0.97); }

/* guest mode (.guest-card, .guest-invite): in base.css since 2026-10-13 — the home page has no app.css */

/* Leaderboard, guest: where your own best would land. */
.lb-you-out.lb-you-guest {
  background: linear-gradient(100deg, var(--gold-100), color-mix(in srgb, var(--gold-100) 30%, var(--bg-elevated)));
  color: var(--text);
}
.lb-you-guest em { font-style: normal; line-height: 1.55; }
.lb-you-guest em b { color: var(--text-strong); }
.lb-you-guest svg { flex: none; color: var(--gold-ink); }
.lb-you-guest .lb-you-acts { flex: none; gap: 8px; }
html[data-theme='dark'] .lb-you-out.lb-you-guest { background: color-mix(in srgb, var(--gold-500) 12%, var(--bg-elevated)); }
@media (max-width: 640px) {
  .lb-you-out.lb-you-guest { flex-wrap: wrap; }
}
.pf-guest { margin-bottom: 18px; }

/* ======================================================== custom practice */
.ct-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
@media (max-width: 960px) { .ct-layout { grid-template-columns: minmax(0, 1fr); } }
.ct-editor { padding: 22px 24px 24px; }
.ct-status {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-bottom: 20px; padding: 10px 12px;
  border-radius: 12px;
  background: var(--bg-soft);
  color: var(--text-muted);
  font-size: 13px;
}
.ct-status b { color: var(--text-strong); }
.ct-status .btn { margin-left: auto; }
.ct-status.is-member { background: linear-gradient(100deg, #fff6df, var(--bg-soft)); }
html[data-theme='dark'] .ct-status.is-member { background: rgba(244, 198, 83, 0.1); }
.ct-badge { padding: 1px 9px; border-radius: 9999px; background: var(--bg-elevated); color: var(--text-strong); font-weight: var(--fw-bold); font-size: 12px; box-shadow: var(--shadow-sm); }
.ct-badge.is-member { padding: 0; background: none; box-shadow: none; }
.ct-badge.is-member .pro-pill { margin-left: 0; }
.ct-label { display: block; margin: 0 0 6px; color: var(--text-strong); font-size: 13px; font-weight: var(--fw-bold); }
.ct-label small { margin-left: 6px; color: var(--text-dim); font-weight: var(--fw-medium); }
.ct-input, .ct-text {
  display: block; width: 100%;
  margin-bottom: 16px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-elevated);
  color: var(--text-strong);
  font: inherit; font-size: 14px;
  transition: border-color .18s, box-shadow .18s;
}
.ct-text { margin-bottom: 8px; min-height: max(240px, calc(100vh - 560px)); resize: vertical; font-family: var(--font-mono); font-size: 13.5px; line-height: 1.7; }
.ct-input:focus, .ct-text:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.ct-meta { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 18px; color: var(--text-dim); font-size: 12px; font-variant-numeric: tabular-nums; }
.ct-meta .is-over { color: var(--red-ink); font-weight: var(--fw-bold); }
.ct-warn { color: var(--orange); text-align: right; }
.ct-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ct-actions kbd { margin-left: 4px; padding: 0 5px; border-radius: 4px; background: rgba(0,0,0,.08); font-family: var(--font-mono); font-size: 11px; }
.ct-side { display: grid; gap: 16px; }
.ct-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ct-list li { display: flex; align-items: center; gap: 6px; border-radius: 10px; }
.ct-list li.is-on { background: var(--accent-tint); }
.ct-item { flex: 1; min-width: 0; padding: 8px 10px; border: 0; background: none; text-align: left; cursor: pointer; border-radius: 10px; font: inherit; }
.ct-item:hover { background: var(--bg-soft); }
.ct-item b { display: block; overflow: hidden; color: var(--text-strong); font-size: 13.5px; white-space: nowrap; text-overflow: ellipsis; }
.ct-item span { color: var(--text-dim); font-size: 12px; }
.ct-del { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 8px; background: none; color: var(--text-dim); cursor: pointer; }
.ct-del:hover { background: var(--red-soft); color: var(--red-ink); }
.ct-del svg { width: 15px; height: 15px; }
.ct-empty, .ct-note { margin: 0; color: var(--text-dim); font-size: 12.5px; line-height: 1.6; }
.ct-note { margin-top: 10px; }
.ct-howto ul { margin: 0; padding-left: 18px; color: var(--text-muted); font-size: 13px; line-height: 1.8; }

/* ======================================================= speed certificate */
.cert-modal {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  padding: 24px;
  background: rgba(16, 20, 30, 0.55);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.22s;
}
.cert-modal.is-in { opacity: 1; }
.cert-box { position: relative; width: min(880px, 100%); transform: translateY(10px) scale(0.98); transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
.cert-modal.is-in .cert-box { transform: none; }
.cert-frame { position: relative; overflow: hidden; border-radius: 14px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.5); }
.cert-frame canvas { display: block; width: 100%; height: auto; }
.cert-frame.is-locked canvas { filter: blur(1.5px) saturate(0.9); }
.cert-veil {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(255, 253, 246, 0.35), rgba(255, 253, 246, 0.85) 55%);
  text-align: center;
}
.cert-veil > div { max-width: 380px; padding: 22px 26px; border-radius: 18px; background: rgba(255, 255, 255, 0.92); box-shadow: var(--shadow-lg); }
.cert-veil b { display: block; margin: 10px 0 6px; color: #101012; font-size: 19px; }
.cert-veil p { margin: 0 0 16px; color: #56565e; font-size: 13.5px; line-height: 1.6; }
.cert-lock .pro-pill { margin: 0; }
.cert-actions { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; }
.cert-actions .btn svg { width: 16px; height: 16px; }
.cert-note { color: rgba(255, 255, 255, 0.8); font-size: 12.5px; }
.cert-x {
  position: absolute; top: -14px; right: -14px; z-index: 2;
  width: 34px; height: 34px;
  border: 0; border-radius: 50%;
  background: #fff; color: #333;
  box-shadow: var(--shadow-md);
  font-size: 20px; line-height: 1; cursor: pointer;
}
@media (max-width: 640px) { .cert-x { top: -40px; right: 0; } }

/* ============================================================ membership */
.mb-hero {
  position: relative;
  overflow: hidden;
  /* the site nav is fixed over the top of the page, so the hero starts below it */
  padding: calc(var(--nav-h) + 24px) 0 64px;
  background:
    radial-gradient(900px 420px at 12% -10%, rgba(247, 215, 140, 0.45), transparent 60%),
    radial-gradient(700px 380px at 95% 10%, rgba(143, 200, 240, 0.35), transparent 60%);
}
.mb-hero-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 440px); gap: 56px; align-items: center; }
@media (max-width: 960px) { .mb-hero-in { grid-template-columns: minmax(0, 1fr); gap: 32px; } .mb-hero { padding: calc(var(--nav-h) + 20px) 0 40px; } }
.mb-kicker { margin: 0 0 14px; color: #b07a12; font-size: 13px; font-weight: var(--fw-bold); letter-spacing: 0.08em; }
.mb-pitch h1 { margin: 0 0 18px; color: var(--text-strong); font-size: clamp(34px, 4.6vw, 54px); line-height: 1.12; letter-spacing: -0.01em; }
.mb-pitch h1 span { display: inline-block; margin-top: 6px; font-size: 0.62em; color: var(--text); }
.mb-pitch h1 em { font-style: normal; background: linear-gradient(180deg, transparent 58%, rgba(244, 198, 83, 0.55) 58%); color: var(--text-strong); }
.mb-lead { max-width: 560px; margin: 0 0 20px; color: var(--text); font-size: 16px; line-height: 1.75; }
.mb-lead b { color: var(--text-strong); }
.mb-ticks { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.mb-ticks li { position: relative; padding-left: 28px; color: var(--text-muted); font-size: 14.5px; }
.mb-ticks li::before {
  content: ''; position: absolute; left: 0; top: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--green-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f855a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.mb-card { min-width: 0; }
.mb-offer, .mb-mine {
  position: relative;
  padding: 26px 26px 22px;
  border: 1px solid rgba(212, 165, 58, 0.35);
  border-radius: 24px;
  background: linear-gradient(180deg, #fffdf7, var(--bg-elevated) 45%);
  box-shadow: 0 30px 60px -28px rgba(176, 122, 18, 0.35), var(--shadow-sm);
}
html[data-theme='dark'] .mb-offer, html[data-theme='dark'] .mb-mine { background: var(--bg-elevated); }
.mb-offer-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.mb-offer-tag { color: #b07a12; font-size: 13px; font-weight: var(--fw-bold); }
.mb-offer-top .pro-pill { margin: 0; }
.mb-price { display: flex; align-items: flex-end; gap: 14px; }
.mb-price-now { color: var(--text-strong); font-size: 64px; font-weight: var(--fw-bold); line-height: 1; letter-spacing: -0.02em; }
.mb-price-was { display: grid; margin-bottom: 8px; color: var(--text-dim); font-size: 18px; line-height: 1.2; }
.mb-price-was small { font-size: 11.5px; }
.mb-price-sub { margin: 10px 0 18px; color: var(--text-muted); font-size: 13.5px; }
.mb-seats { margin-bottom: 18px; }
.mb-seats-bar { height: 8px; margin-bottom: 7px; border-radius: 9999px; background: var(--bg-sunken); overflow: hidden; }
.mb-seats-bar i { display: block; min-width: 6px; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f7d78c, #f59a3a); }
.mb-seats span { color: var(--text-muted); font-size: 12.5px; }
.mb-seats b { color: var(--text-strong); font-variant-numeric: tabular-nums; }
.mb-buy { width: 100%; justify-content: center; }
.mb-buy svg { width: 18px; height: 18px; }
.mb-buy-note { margin: 8px 0 0; color: var(--text-dim); font-size: 12px; text-align: center; }
.mb-redeem { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line); }
.mb-redeem label { display: block; margin-bottom: 8px; color: var(--text-strong); font-size: 13px; font-weight: var(--fw-bold); }
.mb-redeem-row { display: flex; gap: 8px; }
.mb-redeem-input {
  flex: 1; min-width: 0;
  height: 40px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg-elevated); color: var(--text-strong);
  font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.04em;
}
.mb-redeem-input:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.mb-redeem-input:disabled { background: var(--bg-soft); }
.mb-redeem-msg { min-height: 18px; margin: 8px 0 0; color: var(--text-dim); font-size: 12.5px; line-height: 1.6; }
.mb-redeem-msg.is-bad { color: var(--red-ink); }

.mb-mine-top { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.mb-mine-top .mb-mine-av { width: 52px; height: 52px; border-radius: 50%; font-size: 20px; }
.mb-mine-top b { display: block; color: var(--text-strong); font-size: 19px; }
.mb-mine-top .name-marks { margin: 6px 0 0; }
.mb-mine-no {
  position: relative; overflow: hidden;
  margin-bottom: 16px; padding: 16px 18px;
  border-radius: 16px;
  background: radial-gradient(120% 140% at 100% 0%, rgba(246, 205, 110, 0.22), transparent 55%), linear-gradient(160deg, #1d3767, #0e1e3f);
  box-shadow: inset 0 0 0 1px rgba(246, 205, 110, 0.55);
  color: #f8dc8e;
}
.mb-mine-no small { display: block; font-size: 12px; font-weight: var(--fw-bold); opacity: 0.85; letter-spacing: 0.08em; }
.mb-mine-no b { font-family: var(--font-mono); font-size: 40px; font-weight: 800; letter-spacing: 0.02em; background: linear-gradient(180deg, #fff2c6, #e9b84a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mb-mine-no .pro-badge { position: absolute; right: 18px; top: 50%; width: 58px; height: 58px; margin: 0; transform: translateY(-50%) rotate(-6deg); }
.mb-mine-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 18px; }
.mb-mine-kv div { padding: 10px 12px; border-radius: 12px; background: var(--bg-soft); }
.mb-mine-kv dt { color: var(--text-dim); font-size: 12px; }
.mb-mine-kv dd { margin: 2px 0 0; color: var(--text-strong); font-weight: var(--fw-bold); }
.mb-mine-go { display: flex; flex-wrap: wrap; gap: 10px; }
.mb-mine-go .btn svg { width: 16px; height: 16px; }
.mb-thanks { margin: 16px 0 0; color: var(--text-dim); font-size: 13px; }

.mb-benefits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 1180px) { .mb-benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 960px) { .mb-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .mb-benefits { grid-template-columns: minmax(0, 1fr); } }
.mb-benefit { padding: 22px 22px 20px; border: 1px solid var(--line-soft); border-radius: 18px; background: var(--bg-elevated); transition: transform .25s var(--ease), box-shadow .25s; }
.mb-benefit:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.mb-benefit-ico { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px; border-radius: 14px; background: linear-gradient(135deg, #fff4d6, #fde6a8); color: #9a6a14; }
.mb-benefit-ico svg { width: 22px; height: 22px; }
.mb-benefit h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; color: var(--text-strong); font-size: 17px; }
.mb-benefit h3 em { padding: 0 7px; border-radius: 9999px; background: var(--accent-tint); color: var(--accent-ink); font-size: 11px; font-style: normal; line-height: 20px; }
.mb-benefit p { margin: 0; color: var(--text-muted); font-size: 13.5px; line-height: 1.7; }
.mb-benefit-demo { display: flex; align-items: center; gap: 4px; margin-top: 12px !important; color: var(--text-strong) !important; font-weight: var(--fw-bold); }
.mb-benefit-go { display: inline-block; margin-top: 12px; color: var(--accent-ink); font-size: 13px; font-weight: var(--fw-bold); }

.mb-table-wrap { overflow-x: auto; border: 1px solid var(--line-soft); border-radius: 18px; background: var(--bg-elevated); }
.mb-compare { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14px; }
.mb-compare th, .mb-compare td { padding: 14px 18px; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: middle; }
.mb-compare tr:last-child th, .mb-compare tr:last-child td { border-bottom: 0; }
.mb-compare thead th { color: var(--text-dim); font-size: 12.5px; font-weight: var(--fw-bold); }
.mb-compare tbody th { color: var(--text-strong); font-weight: var(--fw-semibold); }
.mb-compare td { color: var(--text-muted); }
.mb-compare td small { color: var(--text-dim); font-size: 12px; }
.mb-compare .is-pro { background: rgba(247, 215, 140, 0.14); color: var(--text-strong); font-weight: var(--fw-semibold); }
/* 手机上三列都放得下，不用横着滑才看到「会员」那一列（2026-10-21） */
@media (max-width: 600px) {
  .mb-compare { min-width: 0; font-size: 13px; table-layout: fixed; }
  .mb-compare th, .mb-compare td { padding: 11px 8px; }
  .mb-compare tr > :first-child { width: 40%; }
  .mb-compare td { line-height: 1.45; }
}
.mb-compare thead .is-pro { color: #9a6a14; }
.mb-yes { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--green-soft); color: var(--green-ink); }
.mb-yes svg { width: 13px; height: 13px; }

.mb-road { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.mb-road::before { content: ''; position: absolute; left: 11px; right: 11px; top: 11px; height: 2px; background: var(--line); }
@media (max-width: 860px) { .mb-road { grid-template-columns: 1fr 1fr; } .mb-road::before { display: none; } }
.mb-road li { position: relative; padding: 36px 16px 16px; border-radius: 16px; }
.mb-road-dot { position: absolute; left: 4px; top: 4px; width: 16px; height: 16px; border: 3px solid var(--bg); border-radius: 50%; background: var(--line); box-shadow: 0 0 0 1px var(--line); }
.mb-road li.is-now { background: linear-gradient(180deg, #fff6df, transparent); }
html[data-theme='dark'] .mb-road li.is-now { background: rgba(244, 198, 83, 0.08); }
.mb-road li.is-now .mb-road-dot { background: #f59a3a; box-shadow: 0 0 0 4px rgba(245, 154, 58, 0.25); }
.mb-road-now { position: absolute; left: 28px; top: 2px; padding: 0 8px; border-radius: 9999px; background: #f59a3a; color: #fff; font-size: 11px; font-style: normal; font-weight: var(--fw-bold); line-height: 20px; }
.mb-road b { display: block; color: var(--text-strong); font-size: 16px; }
.mb-road-price { display: block; margin: 4px 0 6px; color: var(--text-strong); font-size: 24px; font-weight: var(--fw-bold); }
.mb-road-price small { color: var(--text-dim); font-size: 13px; }
.mb-road p { margin: 0; color: var(--text-muted); font-size: 13px; line-height: 1.6; }
.mb-road li.is-past { opacity: 0.55; }

.mb-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
@media (max-width: 760px) { .mb-steps { grid-template-columns: minmax(0, 1fr); } }
.mb-steps li { padding: 22px; border: 1px solid var(--line-soft); border-radius: 18px; background: var(--bg-elevated); }
.mb-steps li > b { display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 12px; border-radius: 10px; background: var(--accent); color: #fff; font-size: 15px; }
.mb-steps h3 { margin: 0 0 6px; color: var(--text-strong); font-size: 16px; }
.mb-steps p { margin: 0; color: var(--text-muted); font-size: 13.5px; line-height: 1.7; }
.mb-steps code { padding: 1px 5px; border-radius: 5px; background: var(--bg-soft); font-family: var(--font-mono); font-size: 12px; }
.cc-custom h3 { display: flex; align-items: center; gap: 8px; }
.cc-custom h3 svg { width: 18px; height: 18px; color: var(--accent); }

/* ===================================================== overall board (总榜) */
.ov-season { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 9999px; background: linear-gradient(100deg, #fff1d6, #ffe0f0); color: #8a3d6b; font-size: 12.5px; font-weight: var(--fw-bold); }
.ov-season svg { width: 15px; height: 15px; }
html[data-theme='dark'] .ov-season { background: rgba(255, 150, 200, 0.12); color: #ffb3d9; }
.ov-emblem { position: relative; display: inline-block; flex: none; vertical-align: middle; line-height: 0; }
.ov-emblem img { display: block; width: 100%; height: var(--em-h, 100%); object-fit: contain; }
/* the high tiers glow in their own colour, and a shine passes over them now and then */
.ov-emblem[data-tier="diamond"] img { filter: drop-shadow(0 0 6px rgba(80, 150, 255, 0.45)); }
.ov-emblem[data-tier="master"] img { filter: drop-shadow(0 0 6px rgba(170, 90, 255, 0.45)); }
.ov-emblem[data-tier="grandmaster"] img { filter: drop-shadow(0 0 7px rgba(255, 90, 40, 0.5)); }
.ov-emblem[data-tier="king"] img { filter: drop-shadow(0 0 8px rgba(80, 180, 255, 0.55)) drop-shadow(0 0 3px rgba(255, 210, 90, 0.5)); }
.ov-emblem[data-tier="diamond"]::after, .ov-emblem[data-tier="master"]::after,
.ov-emblem[data-tier="grandmaster"]::after, .ov-emblem[data-tier="king"]::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: var(--em-h, 100%); pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.55) 50%, transparent 62%) no-repeat;
  background-size: 250% 100%; background-position: 150% 0;
  -webkit-mask: var(--em-mask) center / contain no-repeat; mask: var(--em-mask) center / contain no-repeat;
  animation: em-shine 4.8s ease-in-out infinite;
}
@keyframes em-shine { 0%, 70% { background-position: 150% 0; } 100% { background-position: -60% 0; } }
@media (prefers-reduced-motion: reduce) { .ov-emblem::after { animation: none !important; display: none; } }
.ov-div {
  position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap;
  padding: 0.12em 0.6em; border-radius: 0.35em; line-height: 1.15;
  font-family: var(--font-display, "Quicksand", sans-serif); font-weight: 800; letter-spacing: 0.04em; color: #fff;
  background: linear-gradient(#454b62, #1b1e2a); border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}
.lb-sub .ov-emblem { margin: -2px 5px 0 0; filter: none; }
.ov-season-badge { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: linear-gradient(135deg, #ffe0f0, #fff1d6); color: #8a3d6b; }
.ov-season-badge svg { width: 30px; height: 30px; }
.ov-parts { display: grid; gap: 7px; align-content: center; }
/* 每一项两行：上面「名字 … 分数」，下面整行是进度条。
   这一栏很窄（约 230px），四列并排会把进度条挤到 40px——条才是要看的那个东西。 */
.ov-part {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center; column-gap: 9px; row-gap: 5px;
  font-size: 12.5px;
}
.ov-part.is-split { grid-template-rows: auto auto auto; }
.ov-part-ico { grid-row: 1 / 3; align-self: center; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); }
.ov-part.is-split .ov-part-ico { grid-row: 1 / 4; }
.ov-part-ico svg { width: 14px; height: 14px; }
.ov-part-name { grid-column: 2; grid-row: 1; color: var(--text-muted); font-weight: var(--fw-semibold); }
/* 速度那一项：轨道从中断成两半，英文一半、中文一半，各填各的色 */
.ov-part-bar { grid-column: 2 / -1; grid-row: 2; }
.ov-part-bar.is-split { display: flex; gap: 3px; background: none; overflow: visible; }
.ov-part-bar.is-split .ov-half { flex: 1 1 0; height: 8px; border-radius: 9999px; background: var(--bg-sunken); overflow: hidden; }
.ov-part-bar.is-split .ov-half i { display: block; height: 100%; border-radius: inherit; }
.ov-part-legend {
  grid-column: 2 / -1; grid-row: 3; display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--text-dim); font-variant-numeric: tabular-nums;
}
.ov-part-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 3px; }
.ov-part-legend i.is-en { background: #0d76c9; }
.ov-part-legend i.is-zh { background: #e8590c; margin-left: 10px; }
.ov-part-bar { height: 8px; border-radius: 9999px; background: var(--bg-sunken); overflow: hidden; }
.ov-part-bar i { display: block; height: 100%; border-radius: inherit; animation: ov-grow 0.8s cubic-bezier(0.34, 1.3, 0.64, 1) both; transform-origin: left; }
.ov-part b { grid-column: 3; grid-row: 1; justify-self: end; color: var(--text-strong); text-align: right; font-variant-numeric: tabular-nums; }
.ov-tip { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; color: var(--text-muted); font-size: 12.5px; }
.ov-tip svg { width: 14px; height: 14px; color: #e0a132; }
.ov-tip b { color: var(--text-strong); margin: 0 2px; }
.ov-row-bar { display: block; min-width: 8%; }
.ov-stack { display: flex; height: 6px; border-radius: 9999px; overflow: hidden; background: var(--bg-sunken); }
.ov-stack i { display: block; height: 100%; }
.ov-stack i + i { margin-left: 1px; }
.ov-tip { align-items: flex-start; }
.ov-tip svg { margin-top: 2px; }
.ov-tip span { line-height: 1.55; }
/* six boards on one row; 总榜 is the headline, in gold */
.lb-boards { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1100px) { .lb-boards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .lb-boards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lb-boards button[data-board="overall"] { background: linear-gradient(135deg, #fff7df, #ffe9c2); border-color: rgba(212, 165, 58, 0.45); }
.lb-boards button[data-board="overall"] svg { color: #c98a12; }
.lb-boards button[data-board="overall"][aria-selected="true"] { box-shadow: 0 0 0 2px #f1b83a, 0 10px 24px -14px rgba(176, 122, 18, 0.6); }
html[data-theme='dark'] .lb-boards button[data-board="overall"] { background: rgba(241, 184, 58, 0.12); }

/* ============================================== 排位赛 (ranked-ui.js) */
/* the board picker: 成长值 · 段位 is the headline tile */
.lb-boards { grid-template-columns: 1.25fr repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; }
.lb-boards button[data-board="overall"] {
  grid-row: span 2;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  background:
    radial-gradient(240px 140px at 100% 0%, rgba(255, 196, 80, 0.35), transparent 70%),
    linear-gradient(150deg, #20325f, #3a2a6a);
  border-color: transparent;
  color: rgba(255, 255, 255, 0.8);
}
.lb-boards button[data-board="overall"] b { color: #fff; font-size: 18px; }
.lb-boards button[data-board="overall"] small { color: rgba(255, 255, 255, 0.72); }
.lb-boards button[data-board="overall"][aria-selected="true"] { box-shadow: 0 0 0 3px #f1b83a, 0 14px 30px -16px rgba(40, 30, 110, 0.8); }
.rk-tab-crest { line-height: 0; }
.rk-tab-crest .ov-emblem { width: 72px !important; height: 48px !important; }
@media (max-width: 1100px) { .lb-boards { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lb-boards button[data-board="overall"] { grid-row: auto; grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: flex-start; } }
@media (max-width: 640px) { .lb-boards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ladder rows: crest + LP on the right */
.rk-row-val { display: inline-flex; align-items: center; gap: 8px; }
.rk-row-val .ov-div { font-size: 9px !important; }
.rk-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 4px; margin-top: 14px; }
.rk-tiers > span { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.rk-tiers small { color: var(--text-muted); font-size: 11.5px; font-weight: var(--fw-semibold); }


/* profile: the rank beside the name */
.pf-rank { display: inline-flex; align-items: center; gap: 4px; margin-left: 10px; padding: 2px 12px 2px 4px; border-radius: 9999px; vertical-align: middle; background: var(--bg-soft); box-shadow: inset 0 0 0 1px var(--line-soft); color: var(--text-strong); font-size: 13px; font-weight: var(--fw-bold); text-decoration: none; line-height: 1; }
.pf-rank:hover { box-shadow: inset 0 0 0 1px var(--accent); }
.pf-rank .ov-emblem::after { display: none; }
.pf-rank.is-none { padding-left: 10px; color: var(--text-muted); font-weight: var(--fw-semibold); }
.pf-rank.is-none svg { width: 14px; height: 14px; }
.pf-uid { margin-left: 8px; padding: 3px 10px; border: 0; border-radius: 9999px; vertical-align: middle; background: transparent; box-shadow: inset 0 0 0 1px var(--line-soft); color: var(--text-dim); font: 600 12px/1.2 "Roboto Mono", ui-monospace, monospace; letter-spacing: .04em; cursor: pointer; }
.pf-uid:hover { color: var(--text-strong); box-shadow: inset 0 0 0 1px var(--accent); }
.pf-career { display: inline-block; color: var(--accent-ink); font-family: inherit; text-decoration: none; }

/* ============================================== 好友与邀请 (live.js) */
/* an invitation, bottom right, on any page */
/* 双人合作 on the game's start card */
.gp-coop { margin: 10px 0 4px; padding: 12px 14px; border-radius: 12px; background: var(--bg-soft); color: var(--text-muted); font-size: 13.5px; line-height: 1.6; }
.gp-coop a { color: var(--accent-ink); font-weight: var(--fw-semibold); }
.gp-coop-wait { display: flex; align-items: center; gap: 12px; margin: 12px 0 6px; color: var(--text); font-size: 14.5px; }
.gp-coop-wait b { color: var(--text-strong); }
.gp-spin { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--line); border-top-color: #f1b83a; animation: gp-spin 0.9s linear infinite; }
@keyframes gp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .gp-spin { animation-duration: 3s; } }

/* 测速: the passages dim while a word bank is chosen instead */
.tt-pills.is-muted button[aria-pressed='true'] { opacity: 0.55; }

/* 词汇测速: the word you are on, its phonetics and meaning, above the text */
.gloss { display: inline-flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.gloss b { color: var(--text-strong); font-family: var(--font-mono); font-size: 18px; }
/* 默写: the word as blanks, one per letter (or character) */
.gloss b.gloss-blank { display: inline-flex; gap: 3px; align-items: flex-end; height: 1.1em; }
.gloss b.gloss-blank u { display: inline-block; width: 0.62em; border-bottom: 2px solid color-mix(in srgb, var(--accent) 60%, transparent); }
.gloss i { color: var(--text-dim); font-style: normal; font-family: var(--font-mono); font-size: 13px; }
.gloss span { color: var(--accent-ink); font-size: 15px; font-weight: var(--fw-semibold); }

/* 课程中心侧栏: 每日一词、学习路线、今日小贴士 */
.cc-panel h3 svg { width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; color: var(--accent); }
.cc-word-main { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cc-word-main b { color: var(--text-strong); font-family: var(--font-mono); font-size: 22px; }
.cc-word-main i { color: var(--text-dim); font-style: normal; font-family: var(--font-mono); font-size: 13px; }
.cc-word-main .gloss-btn { margin-left: auto; }
.cc-word-m { margin: 6px 0 10px; color: var(--accent-ink); font-size: 14px; font-weight: var(--fw-semibold); }
.cc-word-acts { display: flex; gap: 6px; flex-wrap: wrap; margin: 0; }
.cc-tip b { display: block; margin-bottom: 4px; color: var(--text-strong); font-size: 14px; }
.cc-tip p { margin: 0; color: var(--text-muted); font-size: 13px; line-height: 1.6; }
.cc-word h3, .cc-tip h3 { display: flex; align-items: center; gap: 2px; }
/* the 🔊 / 读音 buttons (also used outside the typing pages: 每日一词) */
.gloss-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 28px; min-width: 30px; padding: 0 8px; border: 1px solid var(--line-soft); border-radius: 8px; background: var(--bg-elevated); color: var(--text-muted); font: inherit; font-size: 12px; cursor: pointer; }
.gloss-btn svg { width: 16px; height: 16px; }
.gloss-btn:hover { color: var(--accent-ink); border-color: var(--accent); }

/* 好友: the nav button and the panel that slides in from the right (live.js) */



/* ===================================================== 奖杯室 (trophies.js) */
.tp-wrap { display: grid; gap: 20px; padding-bottom: 48px; }
.tp-cup { width: 100%; height: 100%; display: block; }
.tp-level { padding: 22px; border: 1px solid var(--line-soft); border-radius: var(--radius-card); background: var(--bg-elevated); }
.tp-lv { display: grid; grid-template-columns: 116px minmax(0, 1fr) minmax(220px, 300px); gap: 24px; align-items: center; }
@media (max-width: 860px) { .tp-lv { grid-template-columns: 92px 1fr; } .tp-lv-recent { grid-column: 1 / -1; } }
.tp-lv-badge { position: relative; display: grid; place-items: center; width: 110px; height: 110px; color: #fff; }
.tp-lv-badge svg { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 6px 12px rgba(47, 111, 214, 0.3)); }
.tp-lv-badge b { position: relative; margin-top: -6px; font: 800 38px/1 Quicksand, system-ui, sans-serif; }
.tp-lv-badge small { position: absolute; bottom: 24px; font-size: 11px; font-weight: var(--fw-bold); opacity: 0.9; }
@media (max-width: 860px) { .tp-lv-badge { width: 88px; height: 88px; } .tp-lv-badge b { font-size: 30px; } .tp-lv-badge small { bottom: 18px; font-size: 10px; } }
.tp-lv-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.tp-lv-row b { color: var(--text-strong); font-size: 22px; }
.tp-lv-row span { color: var(--text-dim); font-size: 13px; }
.tp-lv-bar { display: block; height: 8px; margin: 10px 0 16px; }
.tp-counts { display: flex; flex-wrap: wrap; gap: 10px; }
.tp-count { display: flex; align-items: center; gap: 6px; padding: 6px 12px 6px 6px; border: 1px solid var(--line-soft); border-radius: 12px; }
.tp-count .tp-cup { width: 30px; height: 30px; }
.tp-count b { color: var(--text-strong); font-size: 18px; font-variant-numeric: tabular-nums; }
.tp-count small { color: var(--text-dim); font-size: 12px; }
.tp-pct { padding-left: 12px; }
.tp-lv-note { margin: 10px 0 0; color: var(--text-dim); font-size: 12px; }
.tp-lv-recent h3 { margin: 0 0 8px; color: var(--text-muted); font-size: 13px; }
.tp-mini { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.tp-mini:last-child { border-bottom: 0; }
.tp-mini .tp-cup { width: 32px; height: 32px; flex: 0 0 auto; }
.tp-mini span { display: grid; min-width: 0; }
.tp-mini b { overflow: hidden; color: var(--text-strong); font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
.tp-mini small { color: var(--text-dim); font-size: 12px; }

.tp-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 12px; }
.tp-toolbar h2 { display: flex; align-items: baseline; gap: 10px; margin: 0; font-size: 19px; }
.tp-toolbar h2 small { color: var(--text-dim); font-size: 13px; font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; }

/* one folding card per group; closed, it is a line of the table of contents */
.tp-group { margin-bottom: 10px; border: 1px solid var(--line-soft); border-radius: 18px; background: var(--bg-elevated); transition: box-shadow 0.2s, border-color 0.2s; }
.tp-group:hover { border-color: var(--line); }
.tp-group.is-open { box-shadow: var(--shadow-sm); }
.tp-ghead { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 168px 28px; align-items: center; gap: 14px; width: 100%; padding: 12px 16px; border: 0; border-radius: inherit; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.tp-ghead:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tp-ghead-cup { width: 44px; height: 44px; }
.tp-ghead-cup .tp-cup { width: 100%; height: 100%; }
.tp-ghead-txt { min-width: 0; }
.tp-ghead-txt b { display: block; overflow: hidden; color: var(--text-strong); font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.tp-ghead-txt small { display: block; margin-top: 1px; color: var(--text-dim); font-size: 12.5px; }
.tp-gtiers { display: flex; gap: 10px; }
.tp-gtier { display: inline-flex; align-items: center; gap: 4px; color: var(--text-strong); font-size: 13px; font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.tp-gtier small { color: var(--text-dim); font-weight: var(--fw-medium); }
.tp-gtier i { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.15); }
.tp-gtier.is-gold i { background: #e2ac2c; } .tp-gtier.is-silver i { background: #a9b4c4; } .tp-gtier.is-bronze i { background: #c8814f; }
.tp-ghead-prog { display: grid; gap: 5px; text-align: right; }
.tp-ghead-prog b { color: var(--text-strong); font-size: 13px; font-variant-numeric: tabular-nums; }
.tp-ghead-prog .bar { height: 6px; }
.tp-chev { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--bg-soft); color: var(--text-muted); transition: transform 0.25s var(--ease), background 0.2s; }
.tp-chev svg { width: 16px; height: 16px; }
.tp-group.is-open .tp-chev { transform: rotate(180deg); }
.tp-ghead:hover .tp-chev { background: var(--bg-sunken); }
.tp-group.is-done .tp-ghead-txt b::after { content: '全部获得'; margin-left: 8px; padding: 1px 7px; border-radius: 999px; background: #e3f3ff; color: #3e6e92; font-size: 11px; vertical-align: 2px; }
/* the fold: rows 0fr → 1fr animates to the content's own height */
.tp-gbody { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s var(--ease); }
.tp-group.is-open .tp-gbody { grid-template-rows: 1fr; }
.tp-gbody-in { min-height: 0; overflow: hidden; padding: 0 16px; }
.tp-group.is-open .tp-gbody-in { padding-bottom: 16px; }
.tp-gbody-in > :first-child { margin-top: 4px; border-top: 1px solid var(--line-soft); padding-top: 14px; }
.tp-gplay { display: flex; justify-content: flex-end; margin: 0 0 10px; }
.tp-gbody-in > .tp-card.is-plat { margin-bottom: 10px; }
@media (max-width: 760px) {
  .tp-ghead { grid-template-columns: 38px minmax(0, 1fr) 84px 24px; gap: 10px; padding: 10px 12px; }
  .tp-ghead-cup { width: 38px; height: 38px; }
  .tp-gtiers { display: none; }
  .tp-gbody-in { padding: 0 12px; }
}
@media (prefers-reduced-motion: reduce) { .tp-gbody, .tp-chev { transition: none; } }
.tp-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 10px; }
.tp-card { display: flex; gap: 14px; padding: 14px 16px; border: 1px solid var(--line-soft); border-radius: 14px; background: var(--bg-elevated); transition: transform 0.18s, box-shadow 0.18s; }
.tp-card.is-earned:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.tp-card:not(.is-earned) { background: var(--bg-soft); }
.tp-card:not(.is-earned) h4, .tp-card:not(.is-earned) p { opacity: 0.85; }
.tp-card-cup { flex: 0 0 auto; width: 52px; height: 52px; }
.tp-card-main { min-width: 0; flex: 1 1 auto; }
.tp-card h4 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; color: var(--text-strong); font-size: 15px; }
.tp-card p { margin: 3px 0 8px; color: var(--text-muted); font-size: 13px; line-height: 1.5; }
.tp-card.is-hidden p { font-style: italic; }
.tp-card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; font-size: 12px; }
.tp-when { color: var(--green-ink); font-weight: var(--fw-semibold); }
.tp-when.is-todo { color: var(--text-dim); font-weight: var(--fw-medium); }
.tp-prog { display: flex; flex: 1 1 160px; align-items: center; gap: 8px; }
.tp-prog .bar { flex: 1 1 auto; height: 5px; }
.tp-prog small { color: var(--text-dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tp-rare { color: var(--text-dim); }
.tp-rare.is-rare { color: #8a64e0; font-weight: var(--fw-semibold); }
.tp-rare.is-ultra { color: #c9961a; font-weight: var(--fw-bold); }
.tp-tier { padding: 0 7px; border-radius: 9999px; font-size: 11px; font-weight: var(--fw-bold); line-height: 18px; }
.tp-tier.is-bronze { background: #f7e3d3; color: #8a5230; }
.tp-tier.is-silver { background: #e9edf3; color: #5f6b7d; }
.tp-tier.is-gold { background: #fff0c4; color: #8a600a; }
.tp-tier.is-platinum { background: #dff1ff; color: #2f6590; }
.tp-card.is-plat { margin-bottom: 10px; padding: 16px 18px; border-color: #bfe0f5; background: linear-gradient(120deg, #f2faff, #ffffff 60%); }
.tp-card.is-plat:not(.is-earned) { background: var(--bg-soft); border-color: var(--line-soft); }
.tp-card.is-plat .tp-card-cup { width: 64px; height: 64px; }
[data-theme="dark"] .tp-card.is-plat.is-earned { background: linear-gradient(120deg, rgba(127, 184, 220, 0.18), transparent 60%); }
[data-theme="dark"] .tp-tier.is-bronze { background: rgba(200, 129, 79, 0.2); color: #f0b98f; }
[data-theme="dark"] .tp-tier.is-silver { background: rgba(154, 166, 184, 0.2); color: #cfd6e0; }
[data-theme="dark"] .tp-tier.is-gold { background: rgba(226, 172, 44, 0.2); color: #f3cd6a; }
[data-theme="dark"] .tp-tier.is-platinum { background: rgba(127, 184, 220, 0.2); color: #a9d8f5; }

/* the corner notice when one is earned (PlayStation style) */
.tp-pop {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 2000;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 260px;
  max-width: calc(100vw - 36px);
  padding: 10px 18px 10px 10px;
  border-radius: 14px;
  background: rgba(18, 22, 32, 0.92);
  color: #fff;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
  transform: translateY(-16px);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(.2, .9, .3, 1.2), opacity 0.25s;
  pointer-events: none;
}
.tp-pop.is-in { transform: none; opacity: 1; }
.tp-pop .tp-cup { width: 46px; height: 46px; flex: 0 0 auto; }
.tp-pop span { display: grid; gap: 1px; }
.tp-pop small { color: rgba(255, 255, 255, 0.7); font-size: 12px; }
.tp-pop b { font-size: 15px; }
.tp-pop.is-platinum { background: linear-gradient(120deg, #1d3b57, #12202e); box-shadow: 0 0 0 2px #7fb8dc, 0 12px 32px rgba(0, 0, 0, 0.35); }
/* The practice and result screens carry a ~64px toolbar right across the top,
   and the notice landed on its 重来 / 设置 buttons. Drop it below the bar. */
.engine .tp-pop { top: 74px; }
.tp-rare b { margin-right: 6px; font-weight: var(--fw-bold); }

/* the side panel's head: a link to the full page */
/* the nav button's count: red while friend requests wait */
/* games that friends can play together */
.chip-coop { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; background: #e9f7ee; color: #1f7a45; }
.chip-coop svg { width: 13px; height: 13px; }

/* ===================================================== 好友中心 (friends.html) */
.fr-wrap { padding-bottom: 48px; }
.fr-grid2 { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
@media (max-width: 900px) { .fr-grid2 { grid-template-columns: 1fr; } .fr-rail { order: -1; } }
.fr-panel { border: 1px solid var(--line-soft); border-radius: var(--radius-card); background: var(--bg-elevated); }
.fr-tabs { display: flex; gap: 4px; padding: 10px 12px 0; border-bottom: 1px solid var(--line-soft); overflow-x: auto; }
.fr-tabs button { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px 12px; border: 0; background: none; color: var(--text-muted); font: inherit; font-size: 14.5px; font-weight: var(--fw-bold); white-space: nowrap; cursor: pointer; }
.fr-tabs button small { color: var(--text-dim); font-size: 12px; font-weight: var(--fw-semibold); }
.fr-tabs button small.is-alert { min-width: 18px; padding: 0 5px; border-radius: 9px; background: #eb5757; color: #fff; line-height: 18px; text-align: center; }
.fr-tabs button[aria-selected="true"] { color: var(--text-strong); }
.fr-tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--accent); }
.fr-body { padding: 16px 18px 20px; }
.fr-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.fr-chips { display: flex; gap: 6px; }
.fr-chips button { padding: 6px 12px; border: 1px solid var(--line); border-radius: 9999px; background: var(--bg-elevated); color: var(--text-muted); font: inherit; font-size: 13px; font-weight: var(--fw-semibold); cursor: pointer; }
.fr-chips button small { color: var(--text-dim); }
.fr-chips button[aria-pressed="true"] { border-color: var(--accent); background: var(--blue-soft); color: var(--blue-dark); }
.fr-find { width: 220px; height: 36px; padding-top: 0 !important; padding-bottom: 0 !important; }
.fr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.fr-card { display: grid; grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: auto auto; gap: 4px 12px; padding: 14px; border: 1px solid var(--line-soft); border-radius: 14px; background: var(--bg-elevated); transition: box-shadow .18s, border-color .18s; }
.fr-card:hover { border-color: var(--line); box-shadow: var(--shadow-sm); }
.fr-card.is-game { border-color: color-mix(in srgb, #2f8be0 35%, var(--line-soft)); background: linear-gradient(135deg, color-mix(in srgb, #2f8be0 7%, var(--bg-elevated)), var(--bg-elevated) 60%); }
.fr-card.is-off { background: var(--bg-soft); }
.fr-card.is-off .fr-av { opacity: .6; filter: grayscale(.6); }
.fr-card .fr-av { grid-row: span 2; }
.fr-card .fr-acts { grid-column: 2; }
.fr-av { position: relative; display: inline-block; width: 44px; height: 44px; flex: 0 0 auto; }
.fr-av.is-big { width: 56px; height: 56px; }
.fr-avatar { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: var(--accent-tint); color: var(--accent-ink); font-size: 16px; font-weight: var(--fw-bold); object-fit: cover; }
.fr-avatar.is-sm { width: 30px; height: 30px; font-size: 12px; }
.fr-dot { position: absolute; right: 0; bottom: 0; width: 13px; height: 13px; border-radius: 50%; background: #9aa3ad; box-shadow: 0 0 0 2.5px var(--bg-elevated); }
.fr-card.is-on .fr-dot, .fr-card.is-busy .fr-dot { background: #34c46a; }
.fr-card.is-game .fr-dot { background: #2f8be0; }
.fr-main { display: grid; gap: 2px; min-width: 0; }
.fr-main b { display: flex; align-items: center; min-width: 0; color: var(--text-strong); font-size: 15px; white-space: nowrap; }
.fr-name { overflow: hidden; text-overflow: ellipsis; }
.fr-main small { color: var(--text-dim); font-size: 12.5px; }
.fr-st { display: inline-flex; align-items: center; gap: 6px; color: var(--text-dim); font-size: 12.5px; }
.fr-st i { width: 7px; height: 7px; border-radius: 50%; background: #9aa3ad; }
.fr-st.is-on, .fr-st.is-busy { color: #27a35a; }
.fr-st.is-on i, .fr-st.is-busy i { background: #34c46a; }
.fr-st.is-game { color: #1f76c4; font-weight: var(--fw-semibold); }
.fr-st.is-game i { background: #2f8be0; box-shadow: 0 0 0 3px rgba(47, 139, 224, .2); }
.fr-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.fr-later { color: var(--text-dim); font-size: 12px; }
.fr-more { display: inline-grid; place-items: center; min-width: 30px; height: 30px; margin-left: auto; padding: 0 6px; border: 0; border-radius: 8px; background: transparent; color: var(--text-dim); font: inherit; font-size: 12px; font-weight: var(--fw-bold); cursor: pointer; }
.fr-more svg { width: 16px; height: 16px; }
.fr-more:hover { background: var(--bg-sunken); color: var(--text); }
.fr-more.is-sure { background: var(--red-soft); color: var(--red-ink); }
.fr-list { display: grid; gap: 2px; margin: 0 0 10px; padding: 0; list-style: none; }
.fr-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; }
.fr-row:hover { background: var(--bg-soft); }
.fr-row .fr-acts { margin: 0; }
.fr-h { margin: 6px 0 8px; font-size: 14px; color: var(--text-strong); }
.fr-h small { color: var(--text-dim); font-weight: var(--fw-medium); }
.fr-none, .fr-hint, .fr-small { color: var(--text-dim); font-size: 13px; }
.fr-note { color: var(--text-dim); font-size: 12.5px; }
.fr-search { display: flex; gap: 8px; margin-bottom: 6px; }
.fr-search .field-input { flex: 1 1 auto; height: 42px; }
.fr-empty, .fr-out { display: grid; justify-items: center; gap: 8px; padding: 40px 20px; text-align: center; color: var(--text-muted); }
.fr-empty > svg, .fr-out > svg { width: 36px; height: 36px; color: var(--accent); }
.fr-empty b, .fr-out h2 { color: var(--text-strong); font-size: 17px; margin: 0; }
.fr-rail { padding: 18px; }
.fr-me { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.fr-me > div { flex: 1 1 auto; display: grid; gap: 2px; min-width: 0; }
.fr-me b { display: flex; align-items: center; min-width: 0; font-size: 16px; color: var(--text-strong); white-space: nowrap; }
.fr-me .fr-name { overflow: hidden; text-overflow: ellipsis; }
.fr-me b .name-marks { flex: none; }
.fr-code { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--bg-soft); }
.fr-code span { color: var(--text-dim); font-size: 12.5px; }
.fr-code b { flex: 1 1 auto; color: var(--text-strong); font-family: "Roboto Mono", ui-monospace, monospace; font-size: 18px; letter-spacing: .08em; }
.fr-link { width: 100%; margin-top: 8px; justify-content: center; gap: 6px; }
.fr-link svg { width: 15px; height: 15px; }
.fr-small { margin: 6px 0 0; }
.fr-rail-h { margin: 18px 0 8px; font-size: 13px; color: var(--text-muted); }
.fr-mini { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.fr-mini li { display: flex; align-items: center; gap: 10px; }
.fr-mini li span { display: grid; flex: 1 1 auto; min-width: 0; font-size: 13.5px; color: var(--text-strong); }
.fr-mini li small { color: var(--text-dim); font-size: 11.5px; }
.fr-mini .fr-avatar { width: 30px; height: 30px; }
.fr-can { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; color: var(--text-muted); font-size: 13px; }
.fr-can li { display: flex; gap: 8px; }
.fr-can svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 2px; color: var(--accent); }
.fr-lock { display: flex; gap: 16px; padding: 28px; }
.fr-lock > svg { width: 40px; height: 40px; flex: 0 0 auto; color: #d09a2a; }
.fr-lock h2 { margin: 0 0 6px; font-size: 18px; }
.fr-lock p { margin: 0 0 10px; color: var(--text-muted); font-size: 14px; }

/* ===================================================== 生涯 (career.html) */
.cr-wrap.wrap { padding-top: 28px; padding-bottom: 40px; }
.cr-wrap { display: grid; gap: 16px; }
.cr-hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 28px; border-radius: 22px; color: #fff;
  background: radial-gradient(520px 220px at 12% 0%, rgba(120, 180, 255, .35), transparent 70%), linear-gradient(120deg, #1f2d5c, #3a2d74 55%, #6a2f6a); box-shadow: 0 14px 34px -20px rgba(40, 30, 110, .7); }
.cr-id { display: flex; align-items: center; gap: 18px; min-width: 0; }
.cr-av { flex: 0 0 auto; width: 92px; height: 92px; padding: 4px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.cr-avatar { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: #e8f0ff; color: #2a3f8a; font-size: 34px; font-weight: 800; object-fit: cover; }
.cr-who { display: grid; gap: 6px; min-width: 0; }
.cr-who h1 { display: flex; align-items: center; gap: 4px; margin: 0; color: #fff; font-size: 28px; line-height: 1.15; }
.cr-who h1 > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0; color: rgba(255, 255, 255, .78); font-size: 13px; }
.cr-uid { padding: 3px 10px; border: 0; border-radius: 9999px; background: rgba(255, 255, 255, .14); color: #fff; font: 600 12.5px/1.3 "Roboto Mono", ui-monospace, monospace; letter-spacing: .05em; cursor: pointer; }
.cr-uid:hover { background: rgba(255, 255, 255, .24); }
.cr-on { display: inline-flex; align-items: center; gap: 6px; color: #8ff0b0; }
.cr-on i { width: 7px; height: 7px; border-radius: 50%; background: #34c46a; box-shadow: 0 0 0 3px rgba(52, 196, 106, .25); }
.cr-bio { max-width: 520px; margin: 2px 0 0; color: rgba(255, 255, 255, .88); font-size: 14px; line-height: 1.6; }
.cr-bio.is-empty { color: rgba(255, 255, 255, .6); }
.cr-bio a { color: #ffd35a; }
.cr-rank { display: grid; justify-items: center; gap: 4px; flex: 0 0 auto; min-width: 150px; padding-top: 6px; text-align: center; }
.cr-rank b { margin-top: 12px; font-size: 17px; }
.cr-rank small { color: rgba(255, 255, 255, .72); font-size: 12px; }
.cr-rank.is-quiet > svg { width: 42px; height: 42px; margin-bottom: 4px; color: rgba(255, 255, 255, .8); }
.cr-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cr-tile { display: grid; gap: 4px; padding: 16px 18px; border: 1px solid var(--line-soft); border-radius: 16px; background: var(--bg-elevated); }
.cr-tile-ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--accent-tint); color: var(--accent-ink); }
.cr-tile-ico svg { width: 17px; height: 17px; }
.cr-tile-k { color: var(--text-dim); font-size: 12.5px; }
.cr-tile b { color: var(--text-strong); font-size: 28px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cr-tile b small { margin-left: 4px; color: var(--text-dim); font-size: 13px; font-weight: 600; }
.cr-tile > small { color: var(--text-dim); font-size: 12px; }
.cr-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.cr-col { display: grid; gap: 16px; }
.cr-card { padding: 18px 20px; border: 1px solid var(--line-soft); border-radius: 18px; background: var(--bg-elevated); }
.cr-card h2 { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 12px; color: var(--text-strong); font-size: 16px; }
.cr-card h2 small { color: var(--text-dim); font-size: 12.5px; font-weight: 500; }
.cr-none { margin: 0; color: var(--text-dim); font-size: 13.5px; }
.cr-high { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.cr-high li { --c: #2f6fe0; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--c) 9%, var(--bg-elevated)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 22%, transparent); }
.cr-high li > svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--c); }
.cr-high li span { display: grid; min-width: 0; }
.cr-high b { color: var(--text-strong); font-size: 14px; }
.cr-high small { color: var(--text-dim); font-size: 12px; }
.cr-high .is-gold { --c: #d39a12; } .cr-high .is-orange { --c: #e8702a; } .cr-high .is-purple { --c: #7a5ad6; }
.cr-high .is-plat { --c: #3e8ec2; } .cr-high .is-red { --c: #d8453a; } .cr-high .is-green { --c: #2f9a55; } .cr-high .is-blue { --c: #2f6fe0; }
.cr-radar-body { display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: center; gap: 12px; }
.cr-radar svg { width: 100%; height: auto; overflow: visible; }
.cr-radar text { fill: var(--text-muted); font-size: 11.5px; font-weight: 600; }
.cr-ring { fill: none; stroke: var(--line); stroke-width: 1; }
.cr-shape { fill: color-mix(in srgb, #5a7cf0 28%, transparent); stroke: #4a6ae0; stroke-width: 2; stroke-linejoin: round; }
.cr-radar ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cr-radar li { display: flex; justify-content: space-between; color: var(--text-muted); font-size: 13px; }
.cr-radar li b { color: var(--text-strong); font-variant-numeric: tabular-nums; }
/* 速度那一项下面再写一行「英 x · 中 y」：这一项是两半合起来的 */
.cr-radar li small { display: block; font-size: 11px; color: var(--text-dim); }
.cr-heat-grid { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 18px); grid-auto-columns: 18px; justify-content: center; gap: 4px; }
.cr-heat-grid i, .cr-legend i { display: block; aspect-ratio: 1; border-radius: 4px; background: var(--bg-sunken); }
.cr-heat .l1 { background: #cfe3ff; } .cr-heat .l2 { background: #94c1ff; } .cr-heat .l3 { background: #4f94f2; } .cr-heat .l4 { background: #2360c8; }
.cr-heat .l-1 { background: transparent; box-shadow: inset 0 0 0 1px var(--line-soft); }
.cr-legend { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin: 10px 0 0; color: var(--text-dim); font-size: 11.5px; }
.cr-legend i { width: 12px; height: 12px; }
.cr-rare { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cr-rare li { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 4px; border-bottom: 1px solid var(--line-soft); }
.cr-rare li:last-child { border-bottom: 0; }
.cr-rare .tp-cup { width: 38px; height: 38px; }
.cr-rare span { display: grid; min-width: 0; }
.cr-rare b { overflow: hidden; color: var(--text-strong); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.cr-rare small { color: var(--text-dim); font-size: 12px; }
.cr-rare em { display: grid; justify-items: end; color: #b8860b; font-style: normal; font-weight: 800; font-size: 15px; }
.cr-rare em small { font-weight: 500; font-size: 11px; }
.cr-games { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.cr-games a { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--bg-soft); color: inherit; text-decoration: none; }
.cr-games a:hover { background: var(--bg-sunken); }
.cr-games b { color: var(--text-strong); font-size: 14px; }
.cr-games span { color: var(--text-muted); font-size: 12.5px; }
.cr-games em { color: var(--text-strong); font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums; }
.cr-games small { color: var(--text-dim); font-size: 11.5px; }
.cr-pk { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; text-align: center; }
.cr-pk b { display: block; color: var(--text-strong); font-size: 22px; font-variant-numeric: tabular-nums; }
.cr-pk small { color: var(--text-dim); font-size: 12px; }
@media (max-width: 520px) { .cr-pk { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; } }
.cr-vs { display: flex; align-items: baseline; justify-content: center; gap: 10px; margin-top: 12px; padding: 10px; border-radius: 12px; background: linear-gradient(110deg, #1d2a5a, #3b2a78); color: #fff; }
.cr-vs span, .cr-vs small { color: rgba(255, 255, 255, .75); font-size: 12.5px; }
.cr-vs b { font-size: 22px; letter-spacing: .06em; }
.cr-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; color: var(--text-dim); font-size: 13px; }
.cr-foot > svg { width: 16px; height: 16px; color: var(--accent); }
.cr-foot a:not(.btn) { color: var(--accent-ink); font-weight: 600; }
.cr-foot .btn svg { width: 15px; height: 15px; }
.cr-closed { display: grid; justify-items: center; gap: 10px; max-width: 460px; margin: 40px auto; padding: 36px 28px; border: 1px solid var(--line-soft); border-radius: 22px; background: var(--bg-elevated); text-align: center; }
.cr-closed .cr-avatar { width: 88px; height: 88px; }
.cr-closed > svg { width: 38px; height: 38px; color: var(--accent); }
.cr-closed h1 { display: flex; align-items: center; margin: 0; font-size: 22px; color: var(--text-strong); }
.cr-closed p { margin: 0; color: var(--text-muted); font-size: 14px; }
.cr-closed p svg { width: 16px; height: 16px; vertical-align: -3px; color: #7a5ad6; }
.cr-closed .cr-uid { background: var(--bg-soft); color: var(--text-muted); }
@media (max-width: 860px) {
  .cr-hero { flex-direction: column; align-items: flex-start; padding: 20px; }
  .cr-rank { flex-direction: row; min-width: 0; }
  .cr-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cr-grid { grid-template-columns: minmax(0, 1fr); }
  .cr-radar-body { grid-template-columns: 180px minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .cr-av { width: 72px; height: 72px; }
  .cr-who h1 { font-size: 22px; }
  .cr-tile b { font-size: 22px; }
  .cr-high, .cr-games { grid-template-columns: minmax(0, 1fr); }
  .cr-radar-body { grid-template-columns: minmax(0, 1fr); }
  .cr-radar svg { max-width: 240px; margin: 0 auto; }
}

.fr-mine { margin-left: auto; gap: 5px; white-space: nowrap; }
.fr-mine svg, .fr-acts .btn svg { width: 15px; height: 15px; }

/* a friend card opens the friend's sheet (资料 · 备注 · 删除) */
.fr-card { grid-template-columns: minmax(0, 1fr); }
.fr-card .fr-acts { grid-column: 1; padding-left: 60px; }
.fr-open { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 12px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.fr-open .fr-av { grid-row: auto; }
.fr-open:hover .fr-name { color: var(--accent-ink); }
.fr-real { flex: 0 1 auto; overflow: hidden; margin-left: 6px; color: var(--text-dim); font-size: 12px; font-weight: var(--fw-medium); text-overflow: ellipsis; }
.fr-privacy li span { color: var(--text-muted); }
.fr-rail .fr-privacy + .btn { margin-top: 10px; gap: 6px; }
.fr-rail .fr-privacy + .btn svg { width: 15px; height: 15px; }
.fr-sheet { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: rgba(15, 18, 30, .42); animation: fr-fade .16s ease-out; }
@keyframes fr-fade { from { opacity: 0; } }
.fr-sheet-card { position: relative; width: min(420px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 22px; border-radius: 20px; background: var(--bg-elevated); box-shadow: var(--shadow-lg); }
.fr-sheet-x { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border: 0; border-radius: 10px; background: transparent; color: var(--text-dim); font-size: 22px; line-height: 1; cursor: pointer; }
.fr-sheet-x:hover { background: var(--bg-sunken); color: var(--text); }
.fr-sheet-head { display: flex; align-items: center; gap: 14px; padding-right: 30px; }
.fr-sheet-head > div { display: grid; gap: 3px; min-width: 0; }
.fr-sheet-head b { display: flex; align-items: center; min-width: 0; color: var(--text-strong); font-size: 18px; white-space: nowrap; }
.fr-sheet-head.is-on .fr-dot, .fr-sheet-head.is-busy .fr-dot { background: #34c46a; }
.fr-sheet-head.is-game .fr-dot { background: #2f8be0; }
.fr-facts { display: grid; gap: 0; margin: 18px 0 0; border-top: 1px solid var(--line-soft); }
.fr-facts > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; border-bottom: 1px solid var(--line-soft); }
.fr-facts dt { color: var(--text-dim); font-size: 13px; }
.fr-facts dd { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--text-strong); font-size: 14px; font-weight: var(--fw-semibold); }
.fr-facts dd > span:first-child { font-variant-numeric: tabular-nums; }
.fr-facts dd .btn { min-height: 28px; padding: 0 10px; }
.fr-note-form { display: grid; gap: 6px; margin-top: 16px; }
.fr-note-form label { display: flex; align-items: baseline; gap: 8px; color: var(--text-strong); font-size: 13px; font-weight: var(--fw-semibold); }
.fr-note-form label small { color: var(--text-dim); font-weight: var(--fw-medium); }
.fr-note-form > div { display: flex; gap: 8px; }
.fr-note-form .field-input { flex: 1 1 auto; height: 38px; }
.fr-sheet-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; }
.fr-sheet-acts .btn svg { width: 15px; height: 15px; }
.fr-danger { margin-left: auto; color: var(--red-ink) !important; gap: 6px; }
.fr-danger.is-sure { background: var(--red-soft) !important; }

/* ===================================================== 打字 PK (pk.html) */
.pk-promo { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; padding: 14px 18px; border: 1px solid var(--line-soft); border-radius: 18px; color: var(--text); text-decoration: none;
  /* 2026-10-16：原来是深紫到酒红的横条，和页面别的地方格格不入；换成和卡片一样的白底，左上淡淡一层对战的紫 */
  background: radial-gradient(120% 160% at 0% 0%, rgba(107, 79, 216, .12), transparent 55%), var(--bg-elevated); box-shadow: var(--shadow-sm); transition: transform .15s, box-shadow .15s; }
.pk-promo:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.pk-promo-art { display: grid; place-items: center; flex: 0 0 auto; width: 52px; height: 52px; border-radius: 16px; background: linear-gradient(135deg, #ffd35a, #ff8a5a); color: #2a1450; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .12); }
.pk-promo-art b { font: 900 22px/1 Quicksand, system-ui, sans-serif; letter-spacing: -.02em; }
.pk-promo-text { display: grid; flex: 1 1 auto; gap: 2px; }
.pk-promo-text b { color: var(--text-strong); font-size: 16px; }
.pk-promo-text em { margin-left: 6px; padding: 1px 7px; border-radius: 9999px; background: #ff5a7a; color: #fff; font-size: 11px; font-style: normal; vertical-align: 2px; }
.pk-promo-text > span { color: var(--text-muted); font-size: 13px; }
.pk-wrap { padding-bottom: 48px; }
.pk-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
@media (max-width: 900px) { .pk-grid { grid-template-columns: 1fr; } }
.pk-panel { padding: 20px; border: 1px solid var(--line-soft); border-radius: var(--radius-card); background: var(--bg-elevated); }
.pk-h { margin: 18px 0 10px; font-size: 14px; color: var(--text-strong); }
.pk-h:first-child { margin-top: 0; }
.pk-none, .pk-small { color: var(--text-dim); font-size: 13px; }
.pk-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.pk-people button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; border: 1.5px solid var(--line-soft); border-radius: 14px; background: var(--bg-elevated); font: inherit; text-align: left; cursor: pointer; }
.pk-people button:disabled { opacity: .5; cursor: default; }
.pk-people button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-tint); box-shadow: inset 0 0 0 1px var(--accent); }
.pk-av { position: relative; display: inline-block; flex: 0 0 auto; width: 40px; height: 40px; }
.pk-av.is-sm { width: 30px; height: 30px; }
.pk-avatar { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: var(--accent-tint); color: var(--accent-ink); font-weight: var(--fw-bold); object-fit: cover; }
.pk-av i { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: #9aa3ad; box-shadow: 0 0 0 2px var(--bg-elevated); }
.pk-av i.is-on { background: #34c46a; }
.pk-who { display: grid; flex: 1 1 auto; min-width: 0; }
.pk-who b { overflow: hidden; color: var(--text-strong); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.pk-who small { color: var(--text-dim); font-size: 12px; }
.pk-rec { flex: 0 0 auto; padding: 1px 7px; border-radius: 9999px; background: var(--bg-soft); color: var(--text-muted); font-size: 11.5px; font-weight: var(--fw-bold); }
/* 对战大厅（2026-10-19）：水平相近的人标出来；出现在大厅的开关 */
.pk-rec.is-near { background: var(--green-soft); color: var(--green-ink); }
.pk-hall-vis { display: flex; align-items: center; gap: 8px; margin: 2px 0 14px; color: var(--text); font-size: 13px; cursor: pointer; }
.pk-hall-vis input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.pk-people.is-hall { max-height: 320px; overflow-y: auto; }
.pk-go { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 22px; }
.pk-go .btn svg { width: 18px; height: 18px; margin-right: 4px; }
.pk-rules { display: grid; gap: 6px; margin: 0; padding-left: 18px; color: var(--text-muted); font-size: 13px; }
.pk-hist { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.pk-hist li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line-soft); }
.pk-hist-who { display: grid; flex: 1 1 auto; min-width: 0; }
.pk-hist-who b { font-size: 13.5px; color: var(--text-strong); }
.pk-hist-who small { color: var(--text-dim); font-size: 11.5px; }
.pk-hist-num { color: var(--text-muted); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pk-hist-num b { color: var(--text-strong); }
.pk-hist-num small { margin-left: 3px; color: var(--text-dim); font-size: 11px; }
.pk-tag { display: grid; place-items: center; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px; background: var(--bg-sunken); color: var(--text-dim); font-size: 12.5px; font-weight: 800; }
.pk-tag.is-win { background: #e5f7ec; color: #1f7a45; }
.pk-tag.is-lose { background: #fdeaea; color: #b53a3a; }
.pk-lock { display: flex; gap: 16px; }
.pk-lock > svg { width: 38px; height: 38px; flex: 0 0 auto; color: var(--accent); }
.pk-lock h2 { margin: 0 0 6px; font-size: 18px; }
.pk-lock p { color: var(--text-muted); }
.pk-code { font-family: "Roboto Mono", ui-monospace, monospace; letter-spacing: .08em; color: var(--text-strong); }
.pk-wait { display: grid; justify-items: center; gap: 8px; padding: 48px 20px; text-align: center; color: var(--text-muted); }
.pk-wait > svg { width: 36px; height: 36px; color: var(--accent); }
.pk-wait h2 { margin: 0; font-size: 19px; color: var(--text-strong); }

.pk-race { position: relative; padding: 18px 20px 14px; border: 1px solid var(--line-soft); border-radius: var(--radius-card); background: var(--bg-elevated); }
.pk-race-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 12px; color: var(--text-dim); font-size: 13px; }
.pk-status { color: var(--text-strong); font-weight: var(--fw-bold); }
.pk-status.is-warn { color: var(--red-ink); }
.pk-race .pk-board { position: relative; display: block; min-height: 0; background: none; --type-size: 28px; --type-pitch: 52px; padding: 8px 4px 0; }
.pk-board .typing-text { max-width: 100%; }

/* ---- split screen (pk.js side / onPeer): you | the opponent ---------------- */
.pk-duo .pk-race-head { align-items: center; }
.pk-score { display: inline-flex; gap: 6px; align-items: baseline; padding: 4px 14px; border-radius: 999px; background: var(--bg-soft); color: var(--text-dim); font-size: 13px; }
.pk-score b { color: var(--text-strong); font-size: 18px; font-variant-numeric: tabular-nums; }
.pk-tugrow { display: grid; grid-template-columns: minmax(0, 120px) minmax(0, 1fr) minmax(0, 120px); align-items: center; gap: 10px; }
.pk-tug-name { overflow: hidden; color: var(--text-muted); font-size: 12.5px; font-weight: var(--fw-semibold); text-overflow: ellipsis; white-space: nowrap; }
.pk-tug-name:last-child { text-align: right; }
.pk-tug { --share: 50%; position: relative; height: 10px; border-radius: 999px; background: #e86096; overflow: hidden; }
.pk-tug i { position: absolute; inset: 0 auto 0 0; width: var(--share); background: #2f8be0; transition: width .25s ease; }
.pk-tug::after { content: ''; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 2px; background: var(--bg-elevated); }
.pk-lead { margin: 6px 0 12px; color: var(--text-muted); font-size: 13.5px; text-align: center; }
.pk-lead b { color: var(--text-strong); font-variant-numeric: tabular-nums; }
.pk-arena { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); align-items: stretch; transition: box-shadow .3s; border-radius: 18px; }
.pk-arena.is-final { animation: pk-final 1.2s ease-in-out infinite; }
@keyframes pk-final { 50% { box-shadow: 0 0 0 4px rgba(244, 198, 83, .45); } }
.pk-divider { display: grid; place-items: center; }
.pk-divider::before { content: ''; grid-area: 1 / 1; width: 2px; height: 100%; background: linear-gradient(var(--line-soft), var(--line), var(--line-soft)); }
.pk-divider .pk-vs { grid-area: 1 / 1; padding: 6px 0; background: var(--bg-elevated); }
.pk-side { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px; border-radius: 16px; background: var(--bg-soft); --side: #2f8be0; }
.pk-side.is-peer { --side: #e86096; }
.pk-side-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pk-side-head .pk-av { flex: none; width: 36px; height: 36px; }
.pk-side-name { display: grid; min-width: 0; }
.pk-side-name b { overflow: hidden; color: var(--text-strong); font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.pk-side-name small { color: var(--side); font-size: 12px; font-weight: var(--fw-semibold); }
/* 和测速页同一排数字（等宽粗体 + 小字单位）：速度、准确率、进度，还有没改的错 */
.pk-side-nums { display: flex; align-items: baseline; gap: 14px; margin-left: auto; }
.pk-side-nums > span { display: inline-flex; align-items: baseline; gap: 3px; white-space: nowrap; }
.pk-side-nums b { color: var(--text-strong); font: 700 22px/1.05 var(--font-mono); font-variant-numeric: tabular-nums; }
.pk-side-nums > span:first-child b { color: var(--side); }
.pk-side-nums small { color: var(--text-dim); font-size: 11px; }
.pk-side-nums .pk-err { padding: 2px 8px; border-radius: 999px; background: var(--red-soft); }
.pk-side-nums .pk-err b, .pk-side-nums .pk-err small { color: var(--red-ink, #c53030); }
.pk-mid { display: inline-flex; align-items: center; gap: 8px; }
.pk-clock { padding: 4px 10px; border-radius: 999px; background: var(--bg-soft); color: var(--text-muted); font: 600 14px/1.2 var(--font-mono); font-variant-numeric: tabular-nums; }
.pk-combo { padding: 3px 10px; border-radius: 999px; background: linear-gradient(135deg, #ffb347, #ff7a59); color: #fff; font-size: 12px; font-weight: 800; white-space: nowrap; }
.pk-combo.is-pop { animation: pk-pop .45s cubic-bezier(.34, 1.6, .64, 1); }
@keyframes pk-pop { from { transform: scale(.6); } }
.pk-bar { height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--side) 15%, var(--bg-elevated)); overflow: hidden; }
.pk-bar i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--side); transition: width .15s linear; }
.pk-race-head.is-duo { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; }
.pk-race-head.is-duo .pk-status { justify-self: end; }
/* each side: the practice page's own typing screen and keyboard, at half the arena (pk.js fitRace sets the size) */
.pk-duo .pk-screen { position: relative; margin: 0; padding: 14px 16px 10px; --type-size: var(--pk-type, 22px); --type-pitch: var(--pk-pitch, 42px); }
/* 打字区就是练习引擎那一块（engine.css 的 .engine / .practice-workspace 变量和样子）：等宽字、一格一个字、
   白底卡片；打错的字红底——空格打错也是一格红底加红线，一眼看到错在哪（2026-10-21 学员反馈） */
.pk-duo { --type-font: var(--font-mono); --type-cell: 0.68em; }
.pk-duo .pk-screen { border: 1px solid var(--line); border-radius: 14px; background: var(--bg-elevated); box-shadow: 0 3px 14px rgba(16, 24, 40, .03); }
.pk-duo .typing-text .is-wrong { background: var(--red-soft); border-radius: 3px; }
.pk-duo .typing-text .ch.is-sp.is-wrong { background: var(--red-soft); box-shadow: inset 0 -3px 0 var(--wrong-ink, #c53030); }
.pk-duo .inview.is-cjk .typing-text .is-wrong { background: linear-gradient(var(--wrong-ink), var(--wrong-ink)) center calc(50% + 0.72em) / 70% 2px no-repeat; border-radius: 0; }
.pk-duo .inview.is-zh-pair .typing-text .is-wrong { background: none; }
.pk-duo .pk-screen.is-oops { animation: pk-oops .35s ease-out; }
@keyframes pk-oops { 30% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrong-ink, #c53030) 35%, transparent); } }
/* a race takes the window: no band, no footer, the full width, centred under the nav */
body.pk-racing .pk-band, body.pk-racing .footer { display: none; }
body.pk-racing .pg-body { display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; min-height: 100vh; min-height: 100dvh; max-width: none; padding: calc(var(--nav-h) + 14px) clamp(12px, 2vw, 32px) 14px; }
body.pk-racing.has-announcement .pg-body { min-height: calc(100dvh - 38px); }
body.pk-racing .pk-wrap { max-width: none; padding: 0; }
body.pk-racing .pk-race { margin: 0 auto; }
body.pk-racing .pk-side-nums b { font-size: clamp(22px, calc(var(--pk-type, 22px) * 0.85), 34px); }
body.pk-racing .pk-side-name b { font-size: clamp(15px, calc(var(--pk-type, 22px) * 0.5), 19px); }
.pk-duo .pk-side.is-me .pk-screen { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--side) 35%, transparent); }
.pk-screen.is-peer .inview { height: calc(var(--type-pitch) * 3); overflow: hidden; -webkit-mask-image: linear-gradient(transparent 0, #000 10px); mask-image: linear-gradient(transparent 0, #000 10px); }
.pk-screen.is-peer .typing-text { transition: transform .2s ease; }
.pk-screen.is-peer .typing-text .ch.is-current { box-shadow: inset 0 -3px 0 var(--side); }
/* 中文 PK: no keyboards — the keys are pinyin, the passage is characters */
.pk-arena.is-zh .pk-kbmount { display: none; }
.pk-kbmount { position: relative; min-width: 0; overflow: hidden; border-radius: 12px; padding-bottom: 26px; }
.pk-kbmount .keyboard { margin: 0 auto; }
.pk-side-done { position: absolute; top: 12px; left: 50%; z-index: 2; transform: translateX(-50%); padding: 6px 14px; border-radius: 999px; background: #1f7a45; color: #fff; font-size: 13px; white-space: nowrap; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .35); }
.pk-side-done b { margin-right: 4px; }
.pk-banner { position: absolute; left: 50%; top: 42%; z-index: 4; padding: 8px 22px; border-radius: 999px; color: #fff; font: 900 22px/1.2 Quicksand, system-ui, sans-serif; opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(.8); }
.pk-banner.is-good { background: #2f8be0; }
.pk-banner.is-bad { background: #e86096; }
.pk-banner.is-on { animation: pk-banner 1.3s ease-out; }
@keyframes pk-banner { 15% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); } 70% { opacity: 1; transform: translate(-50%, -50%) scale(1); } to { opacity: 0; transform: translate(-50%, -60%) scale(1); } }
/* the replay at the end */
.pk-replay { margin: 12px 0 0; }
.pk-replay svg { max-height: 120px; }
.pk-replay figcaption { margin-bottom: 6px; color: var(--text-dim); font-size: 12.5px; }
.pk-replay svg { width: 100%; height: auto; }
.pk-replay path { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pk-replay-me { stroke: #2f8be0; }
.pk-replay-peer { stroke: #e86096; }
.pk-replay-goal { stroke: var(--line); stroke-dasharray: 4 4; }
.pk-replay text { fill: var(--text-dim); font-size: 11px; }
.pk-replay-key { display: flex; justify-content: center; gap: 6px 14px; margin: 4px 0 0; color: var(--text-muted); font-size: 12px; }
.pk-replay-key i { display: inline-block; width: 14px; height: 4px; margin-right: 4px; border-radius: 2px; vertical-align: middle; }
.pk-replay-key i.is-me { background: #2f8be0; }
.pk-replay-key i.is-peer { background: #e86096; margin-left: 10px; }
/* 人机对战 in the lobby */
.pk-botcard { margin-top: 16px; }
.pk-bot-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
@media (max-width: 900px) {
  .pk-arena { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .pk-divider { display: none; }
  .pk-side.is-peer { order: -1; }
  .pk-kbmount { display: none; }
  .pk-duo .pk-board { --type-size: 20px; --type-pitch: 38px; }
}
.pk-count { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; border-radius: 14px; background: color-mix(in srgb, var(--bg-elevated) 75%, transparent); backdrop-filter: blur(2px); color: #4b33b0; font: 900 72px/1 Quicksand, system-ui, sans-serif; }
.pk-count.is-go { color: #1f7a45; animation: pk-go .6s ease-out forwards; }
@keyframes pk-go { from { transform: scale(1); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }
.pk-foot { margin: 8px 0 0; text-align: center; }
.pk-result { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 16px; border-radius: var(--radius-card); background: color-mix(in srgb, var(--bg) 60%, transparent); backdrop-filter: blur(3px); }
/* on a desktop the result covers the window, not just the race: a Chinese race has no keyboards and is
   short, and the card used to scroll inside it with half the screen free */
@media (min-width: 901px) {
  .pk-result { position: fixed; top: var(--nav-h); z-index: 50; border-radius: 0; }
  .pk-res-card { max-height: calc(100vh - var(--nav-h) - 32px); max-height: calc(100dvh - var(--nav-h) - 32px); }
}
.pk-result[hidden] { display: none; }
.pk-res-card { width: min(620px, 100%); max-height: 100%; overflow-y: auto; padding: 20px 22px; border-radius: 20px; background: var(--bg-elevated); box-shadow: 0 24px 60px -24px rgba(20, 20, 60, .45); text-align: center; animation: lv-in .35s cubic-bezier(.34, 1.4, .64, 1) both; }
.pk-res-card h2 { margin: 0; font-size: 30px; }
.pk-res-card.is-win h2 { color: #1f7a45; }
.pk-res-card.is-lose h2 { color: #b53a3a; }
.pk-res-line { margin: 4px 0 16px; color: var(--text-muted); }
.pk-res-cols { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.pk-res-col { display: grid; justify-items: center; gap: 6px; padding: 14px 8px; border-radius: 16px; background: var(--bg-soft); }
.pk-res-col.is-win { background: color-mix(in srgb, #34c46a 12%, var(--bg-elevated)); box-shadow: inset 0 0 0 2px color-mix(in srgb, #34c46a 45%, transparent); }
.pk-res-col b { color: var(--text-strong); }
.pk-res-nums { display: flex; gap: 12px; }
.pk-res-nums span { display: grid; }
.pk-res-nums b { font-size: 20px; font-variant-numeric: tabular-nums; }
.pk-res-nums small { color: var(--text-dim); font-size: 11px; }
.pk-vs { color: #6b4fd8; font: 900 20px/1 Quicksand, system-ui, sans-serif; }
.pk-res-rec { margin: 10px 0 12px; color: var(--text-muted); font-size: 13.5px; }
.pk-res-xp { margin: 0 0 12px; color: var(--text-dim); font-size: 12.5px; text-align: center; }
.pk-res-xp b { color: var(--gold-ink); }
.pk-res-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pk-res-acts .is-ask { animation: pk-ask 1s ease-in-out infinite; }
@keyframes pk-ask { 50% { box-shadow: 0 0 0 6px rgba(244, 198, 83, .35); } }
.fr-pk { margin-left: auto; padding: 2px 8px; border-radius: 9999px; background: var(--bg-soft); color: #4b33b0; font-size: 11.5px; font-weight: 800; }
.fr-acts .btn svg { width: 14px; height: 14px; margin-right: 3px; }

/* 打字 PK on a phone */
.pk-ready { position: absolute; left: 50%; bottom: 14px; z-index: 4; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; }
.pk-ready svg { width: 18px; height: 18px; }
.is-kb-open .pk-band, .is-kb-open .pk-page ~ .footer { display: none !important; }
.is-kb-open .pk-race { padding: 10px 12px; }
.is-kb-open .pk-tugrow, .is-kb-open .pk-lead { display: none; }
.is-kb-open .pk-track { height: 24px; }
.is-kb-open .pk-car { width: 26px; height: 20px; }
.is-kb-open .pk-foot { display: none; }
@media (max-width: 560px) {
  .pk-race { padding: 12px; }
  .pk-race .pk-board { --type-size: 24px; --type-pitch: 44px; }
  .pk-count { font-size: 56px; }
}

/* friends: icon actions, delete on hover, the collapsed 添加好友 */

/* 部分免费 courses: member units on the course map (docs/ACCESS-PLAN.md) */
.cc-free { font-style: normal; color: #9a6a0c; font-weight: var(--fw-bold); }
.cm-member { display: flex; align-items: center; gap: 14px; margin: 8px 0 22px; padding: 16px 18px; border-radius: 16px; background: linear-gradient(135deg, #fff7df, #ffefcf); box-shadow: inset 0 0 0 1px rgba(233, 184, 74, 0.45); color: #6b4a10; }
.cm-member > svg { flex: none; width: 26px; height: 26px; color: #d49a18; }
.cm-member div { flex: 1; min-width: 0; }
.cm-member b { display: block; color: #5a3d08; font-size: 15px; }
.cm-member p { margin: 3px 0 0; font-size: 13px; line-height: 1.6; }
.cm-unit-member { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 2px 9px; border-radius: 999px; background: linear-gradient(180deg, #1d3767, #0e1e3f); color: #f8dc8e; font-size: 12px; font-weight: var(--fw-bold); }
.cm-unit-member svg { width: 13px; height: 13px; }
.cm-unit.is-member .ct-tile { filter: saturate(0.55); }
.ct-tile.is-member { opacity: 0.88; }
.ct-tile.is-member:hover { opacity: 1; filter: none; }
.ct-lock.is-member svg { color: #d49a18; }
.cm-go.is-member { background: linear-gradient(180deg, #1d3767, #0e1e3f); color: #f8dc8e; box-shadow: inset 0 0 0 1px rgba(246, 205, 110, 0.6); }
.cm-go.is-member svg { width: 16px; height: 16px; vertical-align: -3px; }
html[data-theme='dark'] .cm-member { background: rgba(241, 184, 58, 0.12); color: #f1d9a2; }
html[data-theme='dark'] .cm-member b { color: #ffe3a6; }
@media (max-width: 640px) { .cm-member { flex-wrap: wrap; } }

/* membership: the phone buy sheet and the redeem-link buttons */
.mb-redeem-go { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 0; }
.mb-link-note { margin: 0 0 16px; padding: 12px 14px; border-radius: 12px; background: var(--bg-soft); color: var(--text-muted); font-size: 13.5px; line-height: 1.6; }
.mb-link-note b { font-family: var(--font-mono); color: var(--text-strong); }
.mb-link-note.is-ok { display: flex; align-items: flex-start; gap: 8px; background: var(--green-soft); color: var(--green-ink); }
.mb-link-note.is-ok svg { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.mb-sheet { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-end; justify-content: center; }
.mb-sheet-bg { position: absolute; inset: 0; background: rgba(10, 20, 40, 0.45); }
.mb-sheet-box { position: relative; width: min(480px, 100%); display: flex; flex-direction: column; gap: 10px; padding: 22px 18px calc(18px + env(safe-area-inset-bottom)); border-radius: 20px 20px 0 0; background: var(--bg-elevated); box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.2); animation: mb-sheet-in 0.22s ease-out both; }
@keyframes mb-sheet-in { from { transform: translateY(24px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mb-sheet-box { animation: none; } }
.mb-sheet-box h3 { margin: 0 0 4px; font-size: 18px; color: var(--text-strong); }
.mb-sheet-x { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border: 0; border-radius: 10px; background: var(--bg-soft); color: var(--text-muted); font-size: 20px; cursor: pointer; }
.mb-sheet-app { justify-content: center; }
.mb-sheet-app svg { width: 18px; height: 18px; }
.mb-sheet-or { margin: 6px 0 0; font-size: 13px; color: var(--text-dim); }
.mb-sheet-or.is-hint { color: #b7791f; font-weight: var(--fw-bold); }
.mb-sheet-raw { margin: 4px 0 0; padding: 8px 10px; border-radius: 8px; background: var(--bg-soft); font-size: 12px; word-break: break-all; user-select: all; -webkit-user-select: all; }
.mb-sheet-web { align-self: center; font-size: 13px; }
.mb-sheet-warn { margin: 0; padding: 10px 12px; border-radius: 10px; background: #fff4d6; color: #7a5412; font-size: 13.5px; line-height: 1.6; }
.mb-sheet-note { margin: 4px 0 0; font-size: 12.5px; color: var(--text-dim); text-align: center; }

/* free typing: what kind of text this is */
.ct-mode { padding: 2px 10px; border-radius: 999px; background: var(--blue-soft, #eaf4fd); color: var(--accent-ink, #0d5fa6); font-size: 12.5px; font-weight: var(--fw-bold); }

/* --------------------------------------------------------- hub filter */
/* categories with counts, and a search box: the games hub (games.js) and the course center (course.js) */
.gb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 18px;
}
.gb-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.gb-cats button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-elevated);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.gb-cats button small {
  color: var(--text-dim);
  font-size: 12px;
  font-weight: var(--fw-bold);
}
.gb-cats button:hover { border-color: var(--accent); }
.gb-cats button[aria-selected="true"] {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}
.gb-cats button[aria-selected="true"] small { color: rgba(255, 255, 255, 0.8); }
.gb-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(300px, 100%);
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-elevated);
  color: var(--text-dim);
}
.gb-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft, rgba(13, 118, 201, 0.15)); }
.gb-search svg { width: 16px; height: 16px; flex: none; }
.gb-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-strong);
  font: inherit;
  font-size: 14px;
}
.game-tagline {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 3.2em;
}
.link-btn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
}
@media (max-width: 640px) {
  .gb-search { width: 100%; }
}

.cc-filter { margin-top: -4px; }
.cc-none { margin: 8px 0 24px; color: var(--text-dim); font-size: 14px; }

/* one row of choices (OOT.ui.foldRow): the rest behind 「更多 N ⌄」.
   A quiet chip of its own, whatever row it sits in — as tall as its neighbours,
   text and chevron on one line, no dashed outline; its own look must not come
   from the row's buttons (.gp-options button stacks a title over a note). The
   doubled class outranks those row rules. Open, 「收起 ⌃」 is a small chip after
   the last choice. */
.is-folded > [hidden] { display: none !important; }
button.fold-toggle.fold-toggle {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  align-self: stretch;
  justify-content: center;
  gap: 2px;
  min-height: 32px;
  margin: 0;
  padding: 0 9px 0 13px;
  border: 1px solid transparent;
  border-radius: 999px;
  /* a tint, not a fill: it shows on a white card and on a grey one alike */
  background: color-mix(in srgb, var(--text-strong) 6%, transparent);
  box-shadow: none;
  color: var(--text-muted);
  font: inherit;
  font-size: 13px;
  font-weight: var(--fw-semibold);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
button.fold-toggle.fold-toggle:hover { background: var(--accent-tint, rgba(13, 118, 201, 0.08)); color: var(--accent-ink, var(--accent)); }
button.fold-toggle.fold-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fold-toggle svg { width: 15px; height: 15px; flex: none; transition: transform 0.2s var(--ease, ease); }
button.fold-toggle.is-open { align-self: center; min-height: 30px; }
.fold-toggle.is-open svg { transform: rotate(180deg); }
/* the same corners as the choices beside it */
.gp-options > button.fold-toggle.fold-toggle { border-radius: 12px; }
.gp-options.is-compact > button.fold-toggle.fold-toggle { border-radius: 10px; }
@media (prefers-reduced-motion: reduce) { .fold-toggle svg { transition: none; } }

/* 给家长的一周小结 (profile.js showParentReport): a card to screenshot */
.pf-parent-btn { margin-top: 12px; }
.pf-parent-btn svg { width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; }
.pr-overlay { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; background: rgba(10, 18, 36, 0.5); }
.pr-card { width: min(420px, 100%); padding: 24px 24px 20px; border-radius: 22px; background: var(--bg-elevated); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.55); }
.pr-eyebrow { margin: 0; font-size: 12.5px; font-weight: 800; letter-spacing: 0.06em; color: var(--accent); }
.pr-card h2 { margin: 4px 0 14px; font-size: 21px; color: var(--text-strong); }
.pr-rows { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; font-size: 14.5px; }
.pr-rows dt { color: var(--text-dim); white-space: nowrap; }
.pr-rows dd { margin: 0; color: var(--text-strong); font-weight: 700; }
.pr-praise { margin: 16px 0 6px; padding: 10px 14px; border-radius: 12px; background: #fff6dc; color: #7a5a06; font-weight: 700; line-height: 1.6; }
.pr-hint { margin: 8px 0 14px; font-size: 12.5px; color: var(--text-dim); }
.pr-actions { display: flex; gap: 10px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pr-praise { background: #3a2f12; color: #f5d98a; } }
:root[data-theme="dark"] .pr-praise { background: #3a2f12; color: #f5d98a; }

/* =====================================================================
   排行榜 v3 (2026-10-03): the 成长值 card and the podium, redrawn.
   ===================================================================== */

/* ---- 我的成长值 ----------------------------------------------------------
   Crest | points and rank | the six parts. The way to the next tier is a
   row of its own under the first two columns, so its bar is exactly as wide
   as they are and can never run in under the parts. */
@keyframes ov-grow { from { transform: scaleX(0); } }
.ovh {
  --ov-c: #f1b83a;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.15fr);
  grid-template-areas: 'crest id parts' 'next next parts';
  align-items: center;
  gap: 4px 22px;
  padding: 24px 26px 22px;
  border-bottom: 1px solid var(--line-soft);
  background:
    radial-gradient(460px 220px at 0% 0%, color-mix(in srgb, var(--ov-c) 20%, transparent), transparent 72%),
    var(--bg-elevated);
}
.ovh.is-iron { --ov-c: #6b6770; } .ovh.is-bronze { --ov-c: #c07a45; } .ovh.is-silver { --ov-c: #8e9cb0; }
.ovh.is-gold { --ov-c: #f1b83a; } .ovh.is-platinum { --ov-c: #3fb5b2; } .ovh.is-diamond { --ov-c: #6a8cff; }
.ovh.is-master { --ov-c: #a45cf0; } .ovh.is-grandmaster { --ov-c: #e0401e; } .ovh.is-king { --ov-c: #ff6b4a; }
.ovh.is-season { --ov-c: #e872a8; }
.ovh-crest { grid-area: crest; line-height: 0; }
.ovh-crest .ov-emblem { filter: drop-shadow(0 6px 10px color-mix(in srgb, var(--ov-c) 35%, transparent)); }
.ovh-id { grid-area: id; min-width: 0; }
.ovh-id > small { display: block; color: var(--text-dim); font-size: 12px; font-weight: var(--fw-bold); letter-spacing: 0.04em; }
.ovh-pts { display: block; margin: 2px 0 8px; color: var(--text-strong); font-size: 42px; font-weight: var(--fw-bold); line-height: 1.02; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.ovh-pts small { margin-left: 4px; color: var(--text-muted); font-size: 15px; font-weight: var(--fw-semibold); letter-spacing: 0; }
.ovh-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ovh-chip { padding: 3px 10px; border-radius: 999px; background: var(--bg-soft); box-shadow: inset 0 0 0 1px var(--line-soft); color: var(--text); font-size: 12.5px; white-space: nowrap; }
.ovh-chip b { color: var(--text-strong); font-size: 14px; }
.ovh-gap { display: inline-flex; align-items: center; gap: 4px; color: var(--accent-ink); font-size: 12.5px; font-weight: var(--fw-semibold); }
.ovh-gap.is-top { color: #b07a12; }
.ovh-gap svg { width: 14px; height: 14px; }
.ovh-next { grid-area: next; min-width: 0; margin-top: 12px; padding: 10px 12px 12px; border-radius: 14px; background: color-mix(in srgb, var(--ov-c) 9%, var(--bg-soft)); }
.ovh-next-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 7px; font-size: 12.5px; color: var(--text-muted); }
.ovh-next-row em { font-style: normal; font-weight: var(--fw-bold); color: color-mix(in srgb, var(--ov-c) 70%, var(--text-strong)); white-space: nowrap; }
.ovh-next-row b { color: var(--text-strong); }
.ovh-bar { display: block; height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--ov-c) 14%, var(--bg-sunken)); overflow: hidden; }
.ovh-bar b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--ov-c) 70%, #fff), var(--ov-c)); animation: ov-grow 0.9s var(--ease-spring, cubic-bezier(0.34, 1.4, 0.64, 1)) both; transform-origin: left; }
.ovh-parts { grid-area: parts; display: grid; gap: 7px; align-content: center; min-width: 0; padding-left: 22px; border-left: 1px solid var(--line-soft); }
.ovh .ov-tip { margin-top: 8px; }
@media (max-width: 900px) {
  .ovh { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: 'crest id' 'next next' 'parts parts'; }
  .ovh-parts { padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--line-soft); margin-top: 6px; }
}
@media (max-width: 520px) {
  .ovh { padding: 18px 16px; gap: 4px 14px; }
  .ovh-crest .ov-emblem { transform: scale(0.8); transform-origin: left center; }
  .ovh-pts { font-size: 34px; }
}

/* ---- podium ---------------------------------------------------------------
   Award cards on a stepped block of their own metal. The block has a lit top
   face, a brushed front with the place pressed into it, and a soft shadow on
   the floor; a warm light falls on the winner from behind. */
.lb-podium2 { padding: 34px 22px 0; }
.lbp {
  --lbp-gold: #c9971f; --lbp-silver: #8a97a8; --lbp-bronze: #b0682e;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr) minmax(0, 1fr);
  align-items: end;
  gap: 0 14px;
  max-width: 660px;
  margin: 0 auto;
  padding-bottom: 14px;
}
.lbp[data-count='2'] { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); max-width: 450px; }
.lbp[data-count='1'] { grid-template-columns: minmax(0, 240px); justify-content: center; }
/* the light behind first place, and the floor line the blocks stand on */
.lbp::before {
  content: '';
  position: absolute;
  left: 50%; top: -30px;
  width: 420px; height: 360px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(255, 214, 102, 0.28), rgba(255, 214, 102, 0));
  pointer-events: none;
}
.lbp[data-count='2']::before { left: 62%; }
.lbp::after {
  content: '';
  position: absolute;
  left: -8px; right: -8px; bottom: 10px;
  height: 14px;
  background: radial-gradient(closest-side, rgba(40, 52, 70, 0.18), rgba(40, 52, 70, 0));
  pointer-events: none;
}
.lbp-col { position: relative; z-index: 1; display: flex; flex-direction: column; min-width: 0; }
.lbp-col.is-1 { --m: var(--lbp-gold); --m-hi: #fff4c7; --m-mid: #e8c35a; --m-lo: #9a7114; --m-ink: #7a5508; }
.lbp-col.is-2 { --m: var(--lbp-silver); --m-hi: #ffffff; --m-mid: #c9d2dd; --m-lo: #7c8898; --m-ink: #4d5866; }
.lbp-col.is-3 { --m: var(--lbp-bronze); --m-hi: #ffe0c2; --m-mid: #d9965c; --m-lo: #8a4f22; --m-ink: #7a4114; }

.lbp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 0 4px 8px;
  padding: 34px 12px 16px;
  border: 1.5px solid transparent;
  border-radius: 22px;
  text-align: center;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--m-mid) 22%, transparent), transparent 58%) padding-box,
    linear-gradient(var(--bg-elevated), var(--bg-elevated)) padding-box,
    linear-gradient(150deg, var(--m-hi) 0%, var(--m-mid) 26%, var(--m-lo) 50%, var(--m-hi) 66%, var(--m-mid) 84%, var(--m-hi) 100%) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 1px 2px rgba(20, 30, 50, 0.06),
    0 16px 30px -14px color-mix(in srgb, var(--m) 70%, transparent);
  overflow: visible;
}
.lbp-col.is-1 .lbp-card { padding: 40px 14px 18px; }
/* one slow glint across the winner's card when the board arrives */
.lbp-col.is-1 .lbp-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.55) 48%, transparent 60%) no-repeat;
  background-size: 250% 100%;
  background-position: 160% 0;
  animation: lbp-glint 1.6s 0.5s ease-out both;
  pointer-events: none;
}
@keyframes lbp-glint { to { background-position: -60% 0; } }

.lbp-medal { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); line-height: 0; }
.lbp .lb-medal { width: 42px; height: 47px; margin: 0; filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.2)); }
.lbp-col.is-1 .lb-medal { width: 50px; height: 56px; }
.lbp-col.is-1 .lbp-medal { top: -32px; }
.lbp-you { position: absolute; top: 10px; right: 10px; padding: 1px 8px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; font-style: normal; font-weight: var(--fw-bold); }

.lbp-av { display: inline-block; padding: 3px; border-radius: 50%; background: linear-gradient(150deg, var(--m-hi), var(--m-mid) 30%, var(--m-lo) 60%, var(--m-hi)); box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--m) 80%, transparent); }
.lbp .lb-avatar { width: 54px; height: 54px; border: 2px solid var(--bg-elevated); font-size: 20px; }
.lbp-col.is-1 .lb-avatar { width: 68px; height: 68px; font-size: 24px; }

/* the name: one line, then … (the full name is the title); the marks stay whole */
.lbp-name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  max-width: 100%;
  margin: 6px 0 0;
  color: var(--text-strong);
  font-size: 14px;
  line-height: 1.35;
}
.lbp-col.is-1 .lbp-name { font-size: 15px; }
.lbp-name b { min-width: 0; overflow: hidden; font-weight: var(--fw-bold); text-overflow: ellipsis; white-space: nowrap; }
.lbp-name .name-marks { display: inline-flex; flex: 0 0 auto; margin-left: 0; }
.lbp-name .lb-tag { flex: 0 0 auto; margin-left: 0; }

.lbp-val {
  display: block;
  margin-top: 2px;
  font-size: 26px;
  font-weight: var(--fw-bold);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  background: linear-gradient(180deg, color-mix(in srgb, var(--m-ink) 72%, var(--m-mid)), var(--m-ink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lbp-col.is-1 .lbp-val { font-size: 32px; }
.lbp-val small { margin-left: 3px; color: var(--text-dim); -webkit-text-fill-color: var(--text-dim); font-size: 12px; font-weight: var(--fw-medium); }
.lbp-crest { display: block; line-height: 0; margin-top: 4px; }
.lbp-crest .ov-emblem { filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.18)); }
.lbp-sub { color: var(--text-dim); font-size: 11.5px; }

/* the block */
.lbp-block {
  position: relative;
  display: grid;
  place-items: center;
  height: 48px;
  border-radius: 8px 8px 3px 3px;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.1), transparent 14%, transparent 86%, rgba(0, 0, 0, 0.12)),
    radial-gradient(120% 90% at 30% 0%, rgba(255, 255, 255, 0.32), transparent 55%),
    linear-gradient(180deg, var(--m-mid) 0%, var(--m) 58%, var(--m-lo) 100%);
  box-shadow: inset 0 -6px 10px -6px rgba(0, 0, 0, 0.35), 0 6px 14px -8px rgba(0, 0, 0, 0.35);
}
/* the lit top face */
.lbp-block::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 9px;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, var(--m-hi), color-mix(in srgb, var(--m-hi) 40%, var(--m-mid)));
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
}
.lbp-block span {
  position: relative;
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.95);
  font-family: var(--font-display, 'Quicksand', sans-serif);
  font-size: 24px;
  font-weight: 800;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.28), 0 1px 0 rgba(255, 255, 255, 0.35);
}
.lbp-col.is-1 .lbp-block { height: 84px; }
.lbp-col.is-1 .lbp-block span { font-size: 34px; }
.lbp-col.is-2 .lbp-block { height: 60px; }
.lbp-col.is-3 .lbp-block { height: 44px; }
.lbp-col.is-3 .lbp-block span { font-size: 21px; }

html[data-theme='dark'] .lbp::before { background: radial-gradient(closest-side, rgba(255, 200, 80, 0.14), rgba(255, 200, 80, 0)); }
html[data-theme='dark'] .lbp-card { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 16px 30px -14px rgba(0, 0, 0, 0.6); }
html[data-theme='dark'] .lbp-col.is-1 { --m-ink: #f3d27a; }
html[data-theme='dark'] .lbp-col.is-2 { --m-ink: #dfe6ee; }
html[data-theme='dark'] .lbp-col.is-3 { --m-ink: #f2c49a; }

@media (max-width: 640px) {
  .lb-podium2 { padding: 30px 8px 0; }
  .lbp { gap: 0 6px; }
  .lbp-card { margin: 0 0 10px; padding: 28px 6px 12px; border-radius: 16px; }
  .lbp-col.is-1 .lbp-card { padding: 32px 6px 14px; }
  .lbp .lb-avatar { width: 42px; height: 42px; }
  .lbp-col.is-1 .lb-avatar { width: 52px; height: 52px; }
  .lbp .lb-medal { width: 34px; height: 38px; }
  .lbp-col.is-1 .lb-medal { width: 40px; height: 45px; }
  .lbp-medal { top: -20px; }
  .lbp-col.is-1 .lbp-medal { top: -24px; }
  .lbp-name { font-size: 12.5px; }
  .lbp-col.is-1 .lbp-name { font-size: 13px; }
  .lbp-val { font-size: 19px; }
  .lbp-col.is-1 .lbp-val { font-size: 23px; }
  .lbp-crest .ov-emblem { transform: scale(0.72); margin: -6px 0; }
  .lbp-sub, .lbp-name .lb-tag { display: none; }
  .lbp-col.is-1 .lbp-block { height: 64px; }
  .lbp-col.is-2 .lbp-block { height: 46px; }
  .lbp-col.is-3 .lbp-block { height: 34px; }
}
@media (prefers-reduced-motion: reduce) { .lbp-col.is-1 .lbp-card::after { animation: none; display: none; } }

/* 排行榜 v3: three boards in one row — 段位榜 the headline, then 速度榜, 本周榜 */
.lb-boards { grid-template-columns: 1.3fr 1fr 1fr; }
.lb-boards button[data-board="overall"] { grid-row: auto; grid-column: auto; flex-direction: row; align-items: center; justify-content: flex-start; }
.lb-boards button[data-board="overall"] b { font-size: 17px; }
.rk-tab-crest .ov-emblem { width: 60px !important; height: 40px !important; }
.lb-filters[hidden] { display: none; }
.lb-note { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 13px; }
.lb-note svg { width: 15px; height: 15px; color: var(--text-dim); }
a.lb-note { color: var(--accent-ink); text-decoration: none; }
a.lb-note:hover { text-decoration: underline; }
.lb-game-title { display: inline-flex; align-items: center; gap: 8px; color: var(--text-strong); font-size: 16px; }
.lb-game-title svg { width: 18px; height: 18px; color: #e2609f; }
@media (max-width: 1100px) { .lb-boards { grid-template-columns: 1.3fr 1fr 1fr; } .lb-boards button[data-board="overall"] { grid-column: auto; } }
@media (max-width: 640px) {
  .lb-boards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
  .lb-boards button { padding: 10px 8px; justify-content: center; }
  .lb-boards button[data-board="overall"] .rk-tab-crest { display: none; }
}
/* the board tabs, then (when a board has one) its switch, then the board:
   the same breathing room whether or not the switch row is there */
.lb-boards { margin-bottom: 28px; }
.lb-filters { margin: -10px 0 24px; }
@media (max-width: 640px) { .lb-boards { margin-bottom: 20px; } .lb-filters { margin: -6px 0 18px; } }

/* 奖杯等级 on a phone: badge beside the points, the five counts in one row under both */
@media (max-width: 560px) {
  .tp-lv { grid-template-columns: 76px minmax(0, 1fr); gap: 10px 14px; }
  .tp-lv-main { display: contents; }
  .tp-lv-badge { grid-column: 1; grid-row: 1 / span 2; width: 76px; height: 76px; }
  .tp-lv-badge b { font-size: 26px; margin-top: -4px; }
  .tp-lv-badge small { bottom: 13px; font-size: 9px; }
  .tp-lv-row { grid-column: 2; grid-row: 1; align-self: end; }
  .tp-lv-bar { grid-column: 2; grid-row: 2; align-self: start; margin: 4px 0 0; }
  .tp-counts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 6px; }
  .tp-count { flex-direction: column; justify-content: center; gap: 2px; padding: 8px 2px; text-align: center; }
  .tp-count .tp-cup { width: 24px; height: 24px; }
  .tp-count b { font-size: 16px; }
  .tp-count small { font-size: 11px; }
  .tp-lv-note { grid-column: 1 / -1; margin: 0; }
  .tp-lv-recent { grid-column: 1 / -1; }
}

/* 奖杯等级 card, v2: badge | points, bar and one five-cell strip | 最近获得 behind a rule */
.tp-level { padding: 24px 28px; }
.tp-lv { grid-template-columns: 120px minmax(0, 1fr) minmax(220px, 280px); gap: 28px; }
.tp-lv-badge { justify-self: center; }
.tp-lv-row b { font-size: 24px; letter-spacing: -0.01em; }
.tp-lv-bar { height: 8px; margin: 10px 0 14px; }
/* five separate cards, always one row: equal columns that shrink rather than wrap */
.tp-counts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.tp-count { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; padding: 10px 6px; border: 1px solid var(--line-soft); border-radius: 14px; background: var(--bg-elevated); }
.tp-count .tp-cup, .tp-ring { width: 28px; height: 28px; flex: 0 0 auto; }
.tp-count > span { display: grid; line-height: 1.15; min-width: 0; }
.tp-count b { font-size: 19px; }
.tp-count small { font-size: 11.5px; white-space: nowrap; }
.tp-pct { padding-left: 6px; }
.tp-lv-note { margin: 10px 0 0; font-size: 12px; }
.tp-lv-recent { align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding-left: 24px; border-left: 1px solid var(--line-soft); }
.tp-lv-recent h3 { margin: 0 0 6px; font-size: 12.5px; font-weight: var(--fw-bold); letter-spacing: 0.02em; }
.tp-mini { gap: 10px; padding: 7px 0; }
.tp-mini .tp-cup { width: 28px; height: 28px; }
.tp-mini b { font-size: 13.5px; }
.tp-mini small { font-size: 11.5px; }
@media (max-width: 1100px) {
  .tp-count { flex-direction: column; gap: 4px; text-align: center; }
  .tp-count > span { justify-items: center; }
}
@media (max-width: 860px) {
  .tp-lv { grid-template-columns: 96px minmax(0, 1fr); }
  .tp-lv-recent { padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--line-soft); }
}
@media (max-width: 560px) {
  .tp-level { padding: 18px 16px; }
  .tp-lv { grid-template-columns: 76px minmax(0, 1fr); gap: 10px 14px; }
  .tp-lv-recent { padding-top: 10px; }
  .tp-counts { margin-top: 6px; gap: 6px; }
  .tp-count { padding: 8px 2px; border-radius: 12px; }
  .tp-count .tp-cup, .tp-ring { width: 22px; height: 22px; }
  .tp-count b { font-size: 16px; }
}

/* 成长值 v2: every part shows its ceiling; the tier table says what each takes and who holds it */
.ov-part b small { margin-left: 1px; color: var(--text-dim); font-size: 10.5px; font-weight: var(--fw-medium); }
.lb-caps { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 8px 0 10px; }
.lb-caps span { display: inline-flex; align-items: center; gap: 5px; color: var(--text-muted); font-size: 12.5px; }
.lb-caps i { width: 8px; height: 8px; border-radius: 50%; }
.lb-caps b { color: var(--text-strong); font-variant-numeric: tabular-nums; }
.rk-tiers > span { padding: 6px 2px 8px; border-radius: 12px; }
.rk-tiers > span.is-top { background: linear-gradient(180deg, rgba(241, 184, 58, 0.14), transparent); }
.rk-tiers em { color: var(--text-strong); font-size: 11.5px; font-style: normal; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.rk-tiers > span.is-top em { color: #b07a12; }
.rk-tiers i { color: var(--text-dim); font-size: 11px; font-style: normal; }

/* ===================================================== 更新日志 (changelog.html) */
.cl-wrap { max-width: 760px; padding-bottom: 56px; }
.cl-lead { margin: 4px 0 22px; color: var(--text-muted); font-size: 14px; line-height: 1.75; }
.cl-lead b { color: var(--text-strong); }
.cl-list { position: relative; margin: 0; padding: 0 0 0 24px; list-style: none; }
.cl-list::before { content: ''; position: absolute; left: 6px; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; background: var(--line-soft); }
.cl-item { position: relative; margin-bottom: 16px; padding: 18px 20px 16px; border: 1px solid var(--line-soft); border-radius: 18px; background: var(--bg-elevated); }
.cl-item::before { content: ''; position: absolute; left: -24px; top: 24px; width: 14px; height: 14px; border-radius: 50%; background: var(--bg-elevated); box-shadow: inset 0 0 0 3px var(--line); }
.cl-item.is-now::before { box-shadow: inset 0 0 0 4px var(--accent); }
.cl-item.is-major::before { background: #ffe9a8; }
.cl-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cl-ver { font: 700 16px/1.2 Quicksand, var(--font-sans); color: var(--text-strong); }
.cl-kind, .cl-now { padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: var(--fw-bold); }
.cl-kind { background: var(--bg-soft); color: var(--text-muted); }
.cl-item.is-major .cl-kind { background: #fff3d1; color: #9a6c0c; }
.cl-item.is-minor .cl-kind { background: var(--blue-soft, #e3f0fd); color: var(--accent-ink); }
.cl-now { background: var(--accent); color: #fff; }
.cl-head time { margin-left: auto; color: var(--text-dim); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.cl-item h2 { margin: 8px 0 6px; color: var(--text-strong); font-size: 17px; line-height: 1.4; }
.cl-item ul { margin: 0; padding-left: 20px; list-style: disc; color: var(--text); font-size: 14px; line-height: 1.75; }
.cl-empty { padding: 30px; color: var(--text-dim); text-align: center; }

/* ---- 我的数据: three tabs, every number in one place (profile.js header) ---- */
.pf-pane .pf-journey-card { margin-bottom: 20px; }
.pf-tile.is-link { color: inherit; text-decoration: none; box-shadow: inset 0 0 0 1px transparent; transition: box-shadow 0.15s, transform 0.15s; }
.pf-tile.is-link:hover { box-shadow: inset 0 0 0 1px var(--accent); transform: translateY(-1px); }
.pf-tile.is-link .pf-delta { color: var(--accent); }

/* 键位分析: reaction time first */
.pf-react { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.pf-react-cell { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border: 1px solid var(--line-soft); border-radius: 18px; background: var(--bg-elevated); box-shadow: var(--shadow-sm); }
.pf-react-cell:first-child { background: linear-gradient(135deg, var(--accent-tint), var(--bg-elevated)); }
.pf-react-label { color: var(--text-dim); font-size: 12.5px; }
.pf-react-cell b { display: flex; align-items: center; color: var(--text-strong); font-size: 28px; font-weight: var(--fw-bold); line-height: 1.15; font-variant-numeric: tabular-nums; }
.pf-react-cell b small { margin-left: 4px; color: var(--text-dim); font-size: 13px; font-weight: var(--fw-semibold); }
.pf-react-note { color: var(--text-dim); font-size: 12px; }
.pf-react-empty { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 18px; background: var(--bg-soft); color: var(--text-muted); font-size: 13.5px; line-height: 1.6; }
.pf-react-empty svg { flex: none; width: 24px; height: 24px; color: var(--accent); }
.kb-heat-key { flex-direction: column; gap: 1px; height: 42px; }
.kb-heat-key span { line-height: 1; }
.kb-heat-key small { font-size: 9.5px; font-weight: var(--fw-semibold); opacity: 0.75; line-height: 1; font-variant-numeric: tabular-nums; }

/* 练习记录: time, lessons, time of day above the list */
.pf-hist-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px; margin-bottom: 24px; align-items: stretch; }
.pf-hist-row .pg-card { margin: 0; }
@media (max-width: 1000px) {
  .pf-react { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-hist-row { grid-template-columns: minmax(0, 1fr); }
}

/* 测速: 自由测速 | 打字高考 (test.html band) */

/* 我的数据: the tab bar sticks under the nav. .has-seg-ink (the sliding
   highlight) sets position: relative, which kept top: 64px and pushed the bar
   onto the first card — sticky wins here. */
.pf-tabs.has-seg-ink { position: sticky; }
.pf-more { color: var(--accent); font-size: 12.5px; font-weight: var(--fw-semibold); text-decoration: none; }
.pf-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-bottom: 28px; }
.pf-trio .pg-card { margin: 0; display: flex; flex-direction: column; }
.pf-trio .pg-card-body { flex: 1; }
.pf-best { display: grid; gap: 10px; }
.pf-best-row { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--bg-soft); color: inherit; text-decoration: none; }
.pf-best-row .pf-best-k { color: var(--text-dim); font-size: 12.5px; font-weight: var(--fw-semibold); }
.pf-best-row b { color: var(--text-strong); font-size: 22px; font-variant-numeric: tabular-nums; }
.pf-best-row b small { margin-left: 3px; color: var(--text-dim); font-size: 11.5px; }
.pf-best-row em { justify-self: end; padding: 2px 8px; border-radius: 999px; background: var(--bg-elevated); color: var(--text-muted); font-size: 12px; font-style: normal; white-space: nowrap; }
.pf-best-row.is-empty b { color: var(--text-dim); font-size: 14px; font-weight: var(--fw-semibold); }
.pf-packs { display: grid; gap: 12px; }
.pf-pack { display: grid; gap: 5px; color: inherit; text-decoration: none; }
.pf-pack-top { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; }
.pf-pack-top b { overflow: hidden; color: var(--text-strong); text-overflow: ellipsis; white-space: nowrap; }
.pf-pack-top span { color: var(--text-dim); font-size: 12.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pf-pack i { display: block; height: 6px; border-radius: 3px; background: var(--bg-soft); overflow: hidden; }
.pf-pack i i { height: 100%; border-radius: 3px; background: var(--accent); }
.pf-pack.is-done i i { background: var(--green); }
.pf-play-top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.pf-play-top div { padding: 10px 12px; border-radius: 12px; background: var(--bg-soft); }
.pf-play-top b { display: block; color: var(--text-strong); font-size: 22px; font-variant-numeric: tabular-nums; }
.pf-play-top span { color: var(--text-dim); font-size: 12.5px; }
.pf-games { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pf-games li { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; }
.pf-games li span { overflow: hidden; color: var(--text-strong); text-overflow: ellipsis; white-space: nowrap; }
.pf-games li em { color: var(--text-dim); font-size: 12.5px; font-style: normal; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pf-none { margin: 0; padding: 12px; border-radius: 12px; background: var(--bg-soft); color: var(--text-dim); font-size: 13px; line-height: 1.6; }
.pf-none a { color: var(--accent); }
.pf-recent { margin: 0; padding: 0; list-style: none; }
.pf-recent li { display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px 52px 52px; align-items: center; gap: 10px; padding: 10px 18px; border-top: 1px solid var(--line-soft); font-size: 13.5px; }
.pf-recent li:first-child { border-top: 0; }
.pf-recent .pf-r-when { color: var(--text-dim); font-size: 12.5px; }
.pf-recent .pf-r-name { overflow: hidden; color: var(--text-strong); text-overflow: ellipsis; white-space: nowrap; }
.pf-recent .pf-r-name small { margin-left: 6px; color: var(--text-dim); font-size: 11.5px; }
.pf-recent b, .pf-recent .pf-r-acc { text-align: right; font-variant-numeric: tabular-nums; }
.pf-recent .pf-r-acc, .pf-recent .pf-r-time { color: var(--text-muted); text-align: right; font-size: 12.5px; }
@media (max-width: 1000px) { .pf-trio { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .pf-recent li { grid-template-columns: minmax(0, 1fr) 54px 48px; } .pf-recent .pf-r-when, .pf-recent .pf-r-time { display: none; } }


/* Big screens (tokens.css widens the column from 1440px): the main lists take
   more columns, so the wider page shows more cards at a glance instead of the
   same cards blown up — courses go 2 → 3 from a 1536 laptop, 4 on 2K. */
@media (min-width: 1536px) {
  /* each card keeps its size; the extra width becomes extra cards (games.css .game-grid does the same) */
  .tp-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); }
}
/* 打字 PK on a short window (a 1366×650 laptop): the lead line and some air go, the race keeps its keyboards */
@media (min-width: 901px) and (max-height: 780px) {
  body.pk-racing .pg-body { padding-top: calc(var(--nav-h) + 8px); padding-bottom: 8px; }
  body.pk-racing .pk-race { padding: 12px 16px 10px; }
  body.pk-racing .pk-lead { display: none; }
  body.pk-racing .pk-race-head { margin-bottom: 8px; }
  body.pk-racing .pk-tugrow { margin-bottom: 10px; }
  body.pk-racing .pk-side { gap: 8px; padding: 10px; }
}

/* A .wrap inside .pg-body: the body already has the page's side margin; a second
   one (the .wrap's own) pushed the content in from the header's edges. */
.pg-body > .wrap { padding-left: 0; padding-right: 0; }
/* 更新日志 is a reading column (.cl-wrap 760px): its header follows it, as 账号设置's does */
main:has(.cl-wrap) > header.pg-band { width: min(760px, 100% - 2 * var(--gutter)); }

/* ===================================================== 法律信息 (privacy / terms / children)
   A document to read: the 760px reading column (.cl-wrap), a switch between
   the three documents, the one-paragraph summary first, then numbered parts. */
.lg-switch { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 22px; }
.lg-switch a { padding: 7px 14px; border-radius: 999px; background: color-mix(in srgb, var(--text-strong) 6%, transparent); color: var(--text-muted); font-size: 13px; font-weight: var(--fw-semibold); text-decoration: none; }
.lg-switch a:hover { color: var(--accent-ink); }
.lg-switch a[aria-current='page'] { background: var(--accent-tint); color: var(--accent-ink); }
.lg-doc { color: var(--text); font-size: 15px; line-height: 1.85; }
.lg-doc h2 { margin: 36px 0 10px; padding-top: 4px; color: var(--text-strong); font-size: 19px; font-weight: var(--fw-bold); scroll-margin-top: calc(var(--nav-h) + 16px); }
.lg-doc h3 { margin: 20px 0 6px; color: var(--text-strong); font-size: 15.5px; font-weight: var(--fw-bold); }
.lg-doc p { margin: 0 0 12px; }
.lg-doc ul { margin: 0 0 14px; padding-left: 1.3em; }
.lg-doc li { margin: 4px 0; }
.lg-doc li > ul { margin: 6px 0 2px; }
.lg-doc b { color: var(--text-strong); }
.lg-doc a { color: var(--accent-ink); }
.lg-doc code { padding: 1px 6px; border-radius: 6px; background: var(--bg-soft); font-size: 13px; }
.lg-summary { margin: 0 0 8px !important; padding: 16px 20px; border-radius: 16px; background: var(--accent-tint); color: var(--text-strong); font-size: 14.5px; line-height: 1.8; }
.lg-table { width: 100%; margin: 8px 0 16px; border-collapse: collapse; font-size: 13.5px; line-height: 1.6; }
.lg-table th, .lg-table td { padding: 9px 10px; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: top; }
.lg-table th { color: var(--text-dim); font-size: 12.5px; font-weight: var(--fw-semibold); white-space: nowrap; }
@media (max-width: 640px) {
  .lg-doc { font-size: 14.5px; }
  .lg-table { display: block; overflow-x: auto; }
}

/* the purchase terms under the redeem box (membership.js) */
.mb-redeem-terms { margin: 8px 0 0; color: var(--text-dim); font-size: 12px; }
.mb-redeem-terms a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Dark theme, illustrated headers: the scene stays a bright sky (it is a picture), so the words
   on it stay dark ink — light text on the sky was unreadable. The side card keeps its own box. */
[data-theme='dark'] .has-scene .pg-band-title,
[data-theme='dark'] .pf-top.has-scene .pf-id .profile-id h1 { color: #16202e; }
[data-theme='dark'] .has-scene .pg-band-lead,
[data-theme='dark'] .pf-top.has-scene .pf-id .profile-id > span { color: #3f4a5c; }
[data-theme='dark'] .has-scene .pg-band-eyebrow { color: var(--ca-deep); }
[data-theme='dark'] .has-scene .pg-band-figure b { color: #eef3fa; }

/* =============================================================== 经验
   ui.xpGainHtml: what one finished thing earned and why, the level bar with
   the next unlock, and today's tasks — on lesson and test results. */
.xp-rules-title::-webkit-details-marker { display: none; }
.xp-rules-title::after { content: ''; width: 6px; height: 6px; margin-left: auto; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform 0.2s var(--ease); }
.xp-rules[open] .xp-rules-title::after { transform: rotate(-135deg) translate(-1px, -1px); }
.xp-rules[open] .xp-rules-title { margin-bottom: 8px; }
.xp-rules > p { margin: 8px 0 0; color: var(--text-dim); font-size: 12px; line-height: 1.55; }

.xg { display: grid; gap: 7px; min-width: 0; }
.xg-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; color: var(--gold-ink); }
html[data-theme='dark'] .xg-head { color: var(--gold-400); }
.xg-head b { font-size: 24px; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; line-height: 1.1; }
.xg-head span { font-size: 12px; font-weight: var(--fw-bold); }
.xg-head em { margin-left: 4px; color: var(--text-dim); font-size: 12px; font-style: normal; }
.xg-level { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.xg-level span { min-width: 0; overflow: hidden; color: var(--text-strong); font-size: 14px; font-weight: var(--fw-bold); text-overflow: ellipsis; white-space: nowrap; }
.xg-level small { flex: 0 0 auto; color: var(--text-dim); font-size: 12px; }
.xg.is-up .xg-level span { color: var(--gold-ink); }
.xg .ps-xp i { transition: width 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.25s; }
.xg-unlock, .xg-next, .xg-tasks { margin: 0; font-size: 12.5px; line-height: 1.5; }
.xg-unlock { display: flex; align-items: center; gap: 5px; color: var(--gold-ink); font-weight: var(--fw-semibold); }
.xg-unlock svg { width: 14px; height: 14px; flex: 0 0 auto; }
.xg-next { color: var(--text-dim); }
.xg-tasks { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 6px; color: var(--text-dim); }
.xg-tasks span { padding: 1px 9px; border-radius: 999px; background: var(--bg-soft); color: var(--text-muted); font-size: 12px; white-space: nowrap; }
.xg-tasks span.is-done { background: var(--green-soft); color: var(--green-ink); }
.xg-tasks span.is-done::before { content: '✓ '; }
@media (prefers-reduced-motion: reduce) { .xg .ps-xp i { transition: none; } }

/* the profile's 等级 card: next unlock, today's tasks, every level's reward */
.lv-togo { margin: 8px 0 0; font-size: 12.5px; line-height: 1.6; }
.lv-tasks, .lv-rewards { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.lv-sub { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.lv-sub b { color: var(--text-strong); font-size: 13px; }
.lv-sub span { color: var(--text-dim); font-size: 12px; font-variant-numeric: tabular-nums; }
.lv-tasks ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.lv-tasks a { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 9px; color: var(--text-strong); font-size: 13px; text-decoration: none; transition: background-color 0.15s; }
.lv-tasks a:hover { background: var(--bg-soft); }
.lv-tasks a span { flex: 1 1 auto; }
.lv-tasks a em { color: var(--gold-ink); font-size: 12px; font-style: normal; font-weight: var(--fw-bold); }
.lv-check { display: grid; place-items: center; flex: 0 0 auto; width: 18px; height: 18px; border: 1.5px solid var(--line); border-radius: 50%; }
.lv-check svg { width: 12px; height: 12px; }
.lv-tasks li.is-done .lv-check { border-color: var(--green); background: var(--green); color: #fff; }
.lv-tasks li.is-done span { color: var(--text-dim); text-decoration: line-through; text-decoration-color: var(--line); }
.lv-tasks li.is-done em { color: var(--text-dim); }
.lv-note { margin: 8px 0 0; color: var(--text-dim); font-size: 11.5px; line-height: 1.55; }
.lv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.lv-reward { position: relative; display: grid; justify-items: center; gap: 3px; padding: 9px 2px 7px; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--bg-elevated); color: var(--text-muted); font: inherit; text-align: center; }
button.lv-reward { cursor: pointer; transition: border-color 0.15s, transform 0.15s; }
button.lv-reward:hover { border-color: var(--accent-line); transform: translateY(-1px); }
.lv-reward b { max-width: 100%; overflow: hidden; color: var(--text-strong); font-size: 11.5px; font-weight: var(--fw-semibold); text-overflow: ellipsis; white-space: nowrap; }
.lv-reward small { color: var(--text-dim); font-size: 10.5px; }
.lv-reward:not(.is-own) { background: var(--bg-soft); }
.lv-reward:not(.is-own) .kbt-mini { opacity: 0.55; }
.lv-reward:not(.is-own) b { color: var(--text-dim); }
.lv-reward > svg { position: absolute; top: 5px; right: 5px; width: 11px; height: 11px; color: var(--text-dim); }
.lv-reward.is-on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.lv-reward .kbt-mini { margin: 2px 0; }

/* 排行榜: the coloured bar's key, the folded formula, and 本周榜's own card */
.lb-legend { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; color: var(--text-dim); font-size: 12px; }
.lb-legend span { display: inline-flex; align-items: center; gap: 5px; }
.lb-legend i { width: 10px; height: 6px; border-radius: 2px; }
.lb-more { margin-top: 12px; border-top: 1px solid var(--line-soft); padding-top: 10px; }
.lb-more summary { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-ink); font-size: 13px; font-weight: var(--fw-semibold); cursor: pointer; list-style: none; }
.lb-more summary::-webkit-details-marker { display: none; }
.lb-more summary::after { content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform 0.2s var(--ease); }
.lb-more[open] summary::after { transform: rotate(-135deg) translate(-1px, -1px); }
.lb-more ul { display: grid; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.lb-more li { color: var(--text-muted); font-size: 12.5px; line-height: 1.55; }
.lb-more li i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; vertical-align: 1px; }
.lb-more li b { margin-right: 6px; color: var(--text-strong); }
.lb-more p { margin: 10px 0 0; color: var(--text-muted); font-size: 12.5px; line-height: 1.6; }

.lbw { flex-direction: column; align-items: stretch; gap: 10px; }
.lbw-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.lb-you-rank.is-none { display: inline-grid; place-items: center; }
.lb-you-rank.is-none svg { width: 22px; height: 22px; }
.lbw-tasks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
/* 经验榜：我的经验从哪来（打字 / 游戏 / 过关与学完 …） */
.lbw-by { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--text-dim); }
.lbw-by b { color: var(--text-strong); font-variant-numeric: tabular-nums; }
.lbw-tasks small { margin-right: 4px; color: var(--text-dim); font-size: 12.5px; }
.lbw-task { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; border: 1px solid var(--line-soft); border-radius: 999px; background: var(--bg-elevated); color: var(--text-strong); font-size: 12.5px; text-decoration: none; transition: border-color 0.15s; }
.lbw-task:hover { border-color: var(--accent-line); }
.lbw-task i { display: grid; place-items: center; width: 16px; height: 16px; border: 1.5px solid var(--line); border-radius: 50%; }
.lbw-task i svg { width: 11px; height: 11px; }
.lbw-task em { color: var(--gold-ink); font-size: 11.5px; font-style: normal; font-weight: var(--fw-bold); }
.lbw-task.is-done { color: var(--text-dim); }
.lbw-task.is-done i { border-color: var(--green); background: var(--green); color: #fff; }
.lbw-task.is-done em { color: var(--text-dim); }

/* ---- 我的数据 · 等级与奖励（等级系统 2026-10-13）
   用的是奖杯室那一套（.tp-level / .tp-lv / .tp-group / .tp-card），这里只补奖励自己的几样：
   五类的图标、计数格做成按钮、奖励卡左边的小图、「正在用」。 */
.pf-lvlink { color: inherit; font-weight: 700; text-decoration: none; border-bottom: 1px dashed currentColor; }
.pf-lvlink:hover { color: var(--accent); }
.rw-level { margin-bottom: 18px; }
.rw-kicon { display: block; width: 30px; height: 30px; flex: none; }
.rw-kicon.is-locked { filter: grayscale(1); opacity: 0.45; }
.tp-ghead-cup .rw-kicon { width: 44px; height: 44px; }
.rw-count { background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.rw-count:hover { border-color: var(--line); background: var(--bg-soft); }
.rw-count b i { color: var(--text-dim); font-size: 12px; font-style: normal; font-weight: var(--fw-medium); }
.rw-mini .lk-item { flex: 0 0 40px; }
.rw-mini .lk-item .kbt-mini { width: 40px; height: 25px; }
.rw-mini .lk-pic { width: 32px; height: 28px; font-size: 19px; }
.rw-mini .lk-pic-sound { width: 28px; height: 28px; font-size: 14px; }
.rw-mini .lk-cert { width: 36px; height: 25px; }
.rw-mini b em { margin-left: 6px; padding: 0 6px; border-radius: 99px; background: #fff0c4; color: #8a600a; font-size: 10.5px; font-style: normal; }
.rw-mini.is-next b { color: var(--accent); }
.rw-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.rw-card { align-items: center; }
.rw-card-pic { display: grid; place-items: center; width: 64px; height: 48px; border-radius: 10px; background: var(--bg-sunken); }
.rw-card:not(.is-earned) .rw-card-pic > * { filter: grayscale(0.8); opacity: 0.5; }
.rw-card .tp-card-foot { margin-top: 6px; justify-content: flex-start; }
.rw-card .tp-when svg { width: 12px; height: 12px; vertical-align: -1px; }
.rw-lvtag { color: var(--text-dim); font-size: 11.5px; font-weight: var(--fw-medium); }
.rw-card.is-using { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.rw-inuse { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); font-weight: var(--fw-bold); }
.rw-inuse svg { width: 13px; height: 13px; }
.rw-none { color: var(--text-dim); font-size: 20px; }
/* 我的数据横幅：名字一行（名字 + 会员标 + 段位），下面一行（等级 · 加入时间 · UID · 生涯） */
.pf-top.has-scene .pf-id { width: min(580px, 100%); }
.pf-top.has-scene .pf-id .profile-id > span#profileMeta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin-top: 6px; }
#profileMeta .pf-meta-sep { margin: 0 6px; color: var(--text-dim); }
#profileMeta .pf-uid { margin-left: 10px; padding: 2px 9px; font-size: 11.5px; }
#profileMeta .pf-career { margin-left: 6px; }
.pf-id-foot .btn { min-width: 132px; }

/* ---- 我的生涯（2026-10-13）：名字和会员标同「我的数据」；8 格两排四格 */
.cr-who h1 { gap: 8px; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.cr-who h1 .pro-badge { flex: none; width: 24px; height: 24px; margin: 0; }
.cr-tile { gap: 6px; }
.cr-tile-head { display: flex; align-items: center; gap: 8px; }
.cr-tile-head .cr-tile-ico { width: 26px; height: 26px; border-radius: 8px; }
.cr-tile-head .cr-tile-ico svg { width: 15px; height: 15px; }
.cr-tile b { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.cr-tile b small { margin-left: 0; overflow: hidden; text-overflow: ellipsis; }
.cr-tile > small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 我的数据 · 三个小数字：数字和单位一行，说明一行 */
.pj-facts b { display: flex; align-items: baseline; gap: 3px; white-space: nowrap; }
.pj-facts b small { color: var(--text-dim); font-family: var(--font-sans); font-size: 11.5px; font-weight: 600; }
.pj-facts span { display: block; margin-top: 2px; white-space: nowrap; }
/* 连续练习：火苗 + 天数 + 这一周七个点 */
.pf-id .pf-id-foot { justify-content: flex-start; }
.pf-id .pf-id-streak { display: inline-flex; align-items: center; gap: 12px; padding: 8px 16px 8px 8px; border-radius: 16px; background: #fff; box-shadow: 0 6px 16px -10px rgba(0, 0, 0, 0.35); color: var(--text-muted); }
.pf-streak-fire { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: linear-gradient(160deg, #ffb347, #ff6a2b); color: #fff; }
.pf-streak-fire svg { width: 20px; height: 20px; }
.pf-streak-text { display: grid; line-height: 1.15; }
.pf-streak-text b { color: var(--text-strong); font-size: 17px; }
.pf-streak-text small { color: var(--text-dim); font-size: 11.5px; }
.pf-streak-week { display: flex; gap: 5px; padding-left: 12px; border-left: 1px solid var(--line-soft); }
.pf-streak-week i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--bg-sunken, #eef2f7); font-style: normal; }
.pf-streak-week i em { color: var(--text-dim); font-size: 10px; font-style: normal; font-weight: 700; }
.pf-streak-week i.is-on { background: linear-gradient(160deg, #ffb347, #ff6a2b); }
.pf-streak-week i.is-on em { color: #fff; }
.pf-streak-week i.is-today { box-shadow: 0 0 0 2px #ff8a3d; }
.pf-streak-week i.is-future { opacity: 0.5; }
@media (max-width: 520px) { .pf-streak-week i { width: 17px; height: 17px; } .pf-streak-week { gap: 3px; } }

/* ---- 我的数据 · 今天（概览最上面）：圈 | 三件小事 | 奖励 */
.pf-today { display: flex; align-items: center; gap: 22px; padding: 18px 22px; margin-bottom: 16px; }
.pt-ring { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pt-goal { color: var(--text-dim); font-size: 12px; }
.pt-main { flex: 1; min-width: 0; }
.pt-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.pt-head > b { color: var(--text-strong); font-size: 16px; }
.pt-head > span { color: var(--text-dim); font-size: 13px; }
.pt-xp { margin-left: auto; color: var(--text-muted); font-size: 12.5px; font-style: normal; }
.pt-xp b { color: #c9961a; font-size: 15px; }
.pt-tasks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pt-task { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--line-soft); border-radius: 14px; background: var(--bg-elevated); color: inherit; text-decoration: none; transition: border-color .15s, transform .15s; }
.pt-task:hover { border-color: var(--accent-line, #9cc8ef); transform: translateY(-1px); }
.pt-ico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--accent-tint); color: var(--accent-ink); }
.pt-ico svg { width: 18px; height: 18px; }
.pt-txt { display: grid; min-width: 0; }
.pt-txt b { color: var(--text-strong); font-size: 14px; }
.pt-txt small { overflow: hidden; color: var(--text-dim); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.pt-task em { margin-left: auto; padding: 2px 9px; border-radius: 99px; background: #fff3cf; color: #9a6a00; font-size: 12.5px; font-style: normal; font-weight: 800; }
.pt-task.is-done { background: var(--bg-soft); }
.pt-task.is-done .pt-ico { background: var(--green-ink, #2f9e44); color: #fff; }
.pt-task.is-done em { background: transparent; color: var(--text-dim); text-decoration: line-through; }
.pt-bonus { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 10px; color: var(--text-muted); font-size: 12.5px; }
.pt-bonus span { display: inline-flex; align-items: center; gap: 5px; }
.pt-bonus span svg { width: 14px; height: 14px; color: #c9961a; }
.pt-bonus span.is-done { color: var(--green-ink, #2f9e44); }
.pt-bonus span.is-done svg { color: currentColor; }
.pt-bonus a { margin-left: auto; color: var(--accent); }
.rw-rules { margin-top: 16px; }
@media (max-width: 760px) {
  .pf-today { flex-direction: column; align-items: stretch; }
  .pt-tasks { grid-template-columns: 1fr; }
  .pt-ring { flex-direction: row; justify-content: center; gap: 12px; }
}
.pf-id .pf-id-streak .pf-streak-fire svg { color: #fff; stroke-width: 2.2; }

/* ---- 课程中心（2026-10-13）：英文主线、中文主线各一张卡；一行数字；分区做成标签 */
.cc-lines { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 14px; }
.cc-line { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px; border: 1px solid var(--line-soft); border-radius: 20px;
  background: linear-gradient(120deg, var(--ca-tint, var(--bg-elevated)), var(--bg-elevated) 60%); box-shadow: 0 10px 28px -20px rgba(16, 24, 40, 0.35); }
.cc-line-art { display: block; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; }
.cc-line-art svg { display: block; width: 100%; height: 100%; }
.cc-line-main { min-width: 0; }
.cc-line-eyebrow { margin: 0; color: var(--ca-deep, var(--accent-ink)); font-size: 12.5px; font-weight: 800; }
.cc-line h2 { margin: 2px 0 4px; color: var(--text-strong); font-size: 21px; }
.cc-line-next { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; overflow: hidden; color: var(--text-muted); font-size: 13.5px; }
.cc-line-next small { color: var(--text-dim); font-size: 12px; }
.cc-line-bar { display: flex; align-items: center; gap: 10px; margin: 10px 0 12px; }
.cc-line-bar b { flex: none; color: var(--text-dim); font-size: 12px; font-weight: 600; }
.cc-line-acts { display: flex; align-items: center; gap: 14px; }
.cc-line .cc-go { padding: 9px 18px; font-size: 14.5px; }
.cc-line .cc-link { border: 0; background: none; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 700; color: var(--ca-deep, var(--accent-ink)); }
.cc-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; margin-bottom: 16px; padding: 12px 20px; border: 1px solid var(--line-soft); border-radius: 16px; background: var(--bg-elevated); }
.cc-strip > div { display: grid; line-height: 1.25; }
.cc-strip b { color: var(--text-strong); font-size: 18px; }
.cc-strip b small { color: var(--text-dim); font-size: 12px; font-weight: 600; }
.cc-strip b.is-star { color: #c9961a; }
.cc-strip span { color: var(--text-dim); font-size: 12px; }
.cc-strip .cc-note { margin: 0 0 0 auto; }
/* 2026-10-14 和测速页统一：分段切换 = 灰底轨道 + 选中的一块白底（测速页 .tt-seg 同一种） */
.cc-tabs { position: sticky; top: calc(var(--nav-h, 64px) + 6px); z-index: 5; display: flex; flex-wrap: wrap; gap: 3px; margin: 0 0 16px; padding: 3px; width: fit-content; border-radius: 12px; background: var(--bg-sunken); box-shadow: 0 0 0 4px var(--bg); }
.cc-tabs button { display: inline-flex; align-items: baseline; gap: 5px; padding: 8px 16px; border: 0; border-radius: 9px; background: transparent; color: var(--text-muted); font: inherit; font-size: 13.5px; font-weight: var(--fw-semibold); cursor: pointer; }
.cc-tabs button small { color: var(--text-dim); font-size: 12px; }
.cc-tabs button[aria-selected='true'] { background: var(--bg-elevated); color: var(--text-strong); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.cc-zone[hidden] { display: none; }
@media (max-width: 980px) { .cc-lines { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .cc-line { grid-template-columns: 1fr; } .cc-strip { gap: 8px 18px; } .cc-tabs { width: auto; } }

/* ---- 对战 (pk.html, 2026-10-13): 约战链接, 挑战最好成绩, 每天 3 场 ---- */
.pk-main { display: grid; gap: 16px; min-width: 0; }
.pk-main > .pk-botcard { margin-top: 0; }
.pk-side-col { display: grid; gap: 16px; align-content: start; }
.pk-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 640px) { .pk-modes { grid-template-columns: 1fr; } }
.pk-mode { display: grid; align-content: start; justify-items: start; gap: 8px; }
.pk-mode h3 { margin: 4px 0 0; font-size: 17px; color: var(--text-strong); }
.pk-mode p { margin: 0 0 6px; color: var(--text-muted); font-size: 13.5px; line-height: 1.6; }
.pk-mode p b { color: var(--text-strong); }
.pk-mode .btn svg { width: 17px; height: 17px; margin-right: 4px; }
.pk-mode-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--accent-tint); color: var(--accent); }
.pk-mode-ico svg { width: 22px; height: 22px; }
.pk-mode.is-ghost .pk-mode-ico { background: var(--gold-soft); color: #b9790a; }
.pk-mode.is-link { background: linear-gradient(160deg, color-mix(in srgb, #6b4fd8 7%, var(--bg-elevated)), var(--bg-elevated) 60%); }

.pk-quota { display: flex; align-items: center; gap: 12px; margin: 0 0 6px; padding: 12px 14px; border-radius: 14px; background: var(--bg-soft); }
.pk-quota > span:last-child { display: grid; gap: 2px; }
.pk-quota b { color: var(--text-strong); font-size: 14px; }
.pk-quota small { color: var(--text-dim); font-size: 12px; }
.pk-quota small a { color: var(--accent-ink); font-weight: var(--fw-semibold); }
.pk-quota-dots { display: flex; gap: 5px; }
.pk-quota-dots i { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); }
.pk-quota-dots i.is-used { background: var(--line); }
.pk-quota.is-out { background: #fdf3e6; }
.pk-quota.is-member > svg { width: 24px; height: 24px; flex: 0 0 auto; color: var(--gold-dark); }

.pk-ghosts { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pk-ghosts li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1.5px solid var(--line-soft); border-radius: 14px; }
.pk-ghost-acts { display: flex; flex: 0 0 auto; gap: 8px; }
.pk-ghost-btn { display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 4px; padding: 6px 12px; border-radius: 12px; background: var(--gold-soft); color: var(--gold-ink); text-decoration: none; line-height: 1.2; }
.pk-ghost-btn b { font-size: 17px; font-variant-numeric: tabular-nums; }
.pk-ghost-btn small { font-size: 11px; opacity: .8; }
.pk-ghost-btn span { grid-column: 1 / -1; font-size: 12px; font-weight: var(--fw-bold); }
.pk-ghost-btn:hover { background: var(--gold-200); }
.pk-mybest { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); color: var(--text-muted); font-size: 13.5px; }
.pk-mybest > span { display: grid; gap: 2px; }
.pk-mybest b { color: var(--text-strong); }
.pk-mybest small { color: var(--text-dim); font-size: 12px; }
.pk-mybest .btn svg, .pk-linkrow .btn svg { width: 16px; height: 16px; margin-right: 4px; }
.pk-tag.is-wide { width: auto; padding: 0 7px; }
.pk-beaten li.is-fresh .pk-hist-who b::after { content: '新'; margin-left: 6px; padding: 0 5px; border-radius: 6px; background: #e5484d; color: #fff; font-size: 10.5px; vertical-align: 2px; }

.pk-linkbox { display: grid; justify-items: center; gap: 10px; max-width: 620px; margin: 0 auto; padding: 36px 24px; text-align: center; }
.pk-linkbox h2 { margin: 4px 0 0; font-size: 22px; color: var(--text-strong); }
.pk-linkbox .pk-mode-ico { width: 56px; height: 56px; border-radius: 18px; }
.pk-linkbox .pk-mode-ico svg { width: 28px; height: 28px; }
.pk-linkrow { display: flex; gap: 8px; width: 100%; }
.pk-linkrow input { flex: 1 1 auto; min-width: 0; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--bg-soft); color: var(--text-strong); font: inherit; font-size: 13.5px; }
@media (max-width: 520px) { .pk-linkrow { flex-direction: column; } }
.pk-linkwait { display: flex; align-items: center; gap: 10px; margin: 6px 0; padding: 10px 16px; border-radius: 9999px; background: var(--bg-soft); color: var(--text-muted); font-size: 13.5px; }
.pk-linkwait .gp-spin { width: 16px; height: 16px; }
.pk-join-av { width: 72px; height: 72px; }
.pk-join-av .pk-avatar, .pk-avatar.pk-join-av { font-size: 28px; }
.pk-joinbox .btn-lg svg { width: 20px; height: 20px; margin-right: 6px; }
.pk-ghost-num { margin: 0; color: var(--text-muted); font-size: 15px; }
.pk-ghost-num b { color: var(--text-strong); font-size: 44px; font-variant-numeric: tabular-nums; }
.pk-ghost-num small { display: block; color: var(--text-dim); font-size: 12.5px; }

.pk-res-acts .btn svg { width: 16px; height: 16px; margin-right: 4px; }
.pk-res-join { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 12px 14px; border-radius: 14px; background: var(--gold-soft); text-align: left; }
.pk-res-join > span { display: grid; flex: 1 1 auto; gap: 2px; }
.pk-res-join b { color: var(--gold-ink); font-size: 14.5px; }
.pk-res-join small { color: var(--gold-soft-ink); font-size: 12px; opacity: .85; }

/* the share sheet (sharecard.js) */
.sc-sheet { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; background: rgba(12, 16, 24, .55); opacity: 0; transition: opacity .2s ease; }
.sc-sheet.is-on { opacity: 1; }
.sc-sheet.is-out { opacity: 0; }
.sc-box { position: relative; display: grid; justify-items: center; gap: 12px; width: min(440px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 18px; border-radius: 20px; background: var(--bg-elevated); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .5); }
.sc-img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 0 0 1px var(--line-soft); }
.sc-note { margin: 0; color: var(--text-muted); font-size: 13px; text-align: center; }
.sc-acts { display: flex; gap: 10px; }
.sc-acts .btn svg { width: 16px; height: 16px; margin-right: 4px; }
.sc-x { position: absolute; top: 8px; right: 10px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--bg-soft); color: var(--text-muted); font-size: 20px; cursor: pointer; }

/* 我的数据's tab row also links out (成就 is its own page) */
.pf-tabs a { padding: 8px 18px; border-radius: 10px; color: var(--text-muted); font-size: 14px; font-weight: var(--fw-semibold); text-decoration: none; }
.pf-tabs a:hover { background: var(--bg-soft); color: var(--text-strong); }
.pf-tabs a[aria-current='page'] { background: var(--accent-tint); color: var(--accent-ink); }
@media (max-width: 560px) { .pf-tabs a { flex: 1 1 0; padding: 8px 6px; text-align: center; } }

/* 生涯 (2026-10-13): actions under the hero, 正在学 */
.cr-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cr-acts .btn { display: inline-flex; align-items: center; gap: 6px; }
.cr-acts .btn svg { width: 16px; height: 16px; }
.cr-acts .btn small { margin-left: 4px; padding-left: 8px; border-left: 1px solid currentColor; opacity: .7; font-size: 12px; font-weight: 600; }
.cr-acts .btn.is-off { opacity: .55; cursor: default; pointer-events: none; }
.cr-acts-note { color: var(--text-dim); font-size: 13px; }
.cr-learn { display: flex; align-items: center; gap: 16px; padding: 12px 18px 12px 12px; border: 1px solid var(--line-soft); border-radius: 18px; background: var(--bg-elevated); color: inherit; text-decoration: none; }
.cr-learn:hover { border-color: var(--accent-line); }
.cr-learn-art { flex: 0 0 auto; width: 128px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; }
.cr-learn-art svg { display: block; width: 100%; height: 100%; }
.cr-learn-txt { display: grid; flex: 1 1 auto; gap: 3px; min-width: 0; }
.cr-learn-txt small { color: var(--text-dim); font-size: 12px; font-weight: 600; }
.cr-learn-txt b { color: var(--text-strong); font-size: 17px; }
.cr-learn-txt > span { overflow: hidden; color: var(--text-muted); font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
.cr-learn-bar { display: block; height: 6px; margin-top: 4px; border-radius: 3px; background: var(--accent-tint); overflow: hidden; }
.cr-learn-bar i { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.cr-learn-go { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 4px; color: var(--accent-ink); font-size: 14px; font-weight: var(--fw-bold); }
.cr-learn-go svg { width: 16px; height: 16px; }
@media (max-width: 560px) {
  .cr-learn-art { width: 84px; }
  .cr-learn-go { display: none; }
}

/* PK: 先打完的人——结束比赛 / 继续等 */
.pk-endbar { position: fixed; left: 50%; bottom: 24px; z-index: 60; display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 20px; border: 1px solid var(--line-soft); border-radius: 18px; background: var(--bg-elevated); box-shadow: 0 18px 48px -18px rgba(20, 20, 60, .45); transform: translateX(-50%); animation: pk-endbar-in .3s cubic-bezier(.34, 1.4, .64, 1) both; }
@keyframes pk-endbar-in { from { opacity: 0; translate: 0 20px; } }
.pk-endbar-txt { display: grid; gap: 2px; }
.pk-endbar-txt b { color: var(--text-strong); font-size: 14.5px; }
.pk-endbar-txt small { color: var(--text-muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.pk-endbar.is-small { gap: 8px; padding: 8px 10px 8px 14px; }
.pk-endbar.is-small .pk-endbar-txt b, .pk-endbar.is-small #pkWait, .pk-endbar.is-small #pkKeep { display: none; }
@media (max-width: 560px) { .pk-endbar { left: 16px; right: 16px; transform: none; flex-wrap: wrap; } }

/* 等级与奖励 · 会员奖励线（black-gold, like the member mark） */
.rw-member { margin: 0 0 22px; padding: 18px; border-radius: 20px; background: linear-gradient(160deg, #1b1712, #2a2216 55%, #1b1712); color: #f6e7c0; box-shadow: inset 0 0 0 1px rgba(240, 201, 92, 0.35); }
.rw-member-head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 14px; }
.rw-member-head > div { flex: 1 1 260px; }
.rw-member-head h2 { margin: 0; color: #ffe7a3; font-size: 18px; }
.rw-member-head h2 small { margin-left: 8px; color: rgba(246, 231, 192, 0.65); font-size: 13px; font-weight: 600; }
.rw-member-head p { margin: 4px 0 0; color: rgba(246, 231, 192, 0.78); font-size: 13px; line-height: 1.6; }
.rw-member-head p b { color: #ffe7a3; }
.rw-member-head .btn svg { width: 16px; height: 16px; margin-right: 4px; }
.rw-member-mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: linear-gradient(135deg, #fff0b8, #d09a2a); color: #2a1c00; }
.rw-member-mark svg { width: 24px; height: 24px; }
.rw-mlane { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.rw-mcard { position: relative; display: grid; justify-items: center; gap: 4px; padding: 14px 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(240, 201, 92, 0.18); text-align: center; }
.rw-mcard.is-earned { background: rgba(240, 201, 92, 0.12); border-color: rgba(240, 201, 92, 0.5); }
.rw-mcard.is-using { box-shadow: 0 0 0 2px #f0c95c; }
.rw-mcard-lv { position: absolute; top: 8px; left: 8px; padding: 1px 7px; border-radius: 999px; background: rgba(240, 201, 92, 0.18); color: #f0c95c; font-size: 11px; font-weight: 700; }
.rw-mcard .rw-card-pic { width: 72px; height: 52px; margin-top: 6px; background: rgba(0, 0, 0, 0.25); }
.rw-mcard:not(.is-earned) .rw-card-pic > * { opacity: 0.75; }
.rw-mcard b { color: #fff3cf; font-size: 14px; }
.rw-mcard small { color: rgba(246, 231, 192, 0.6); font-size: 11.5px; }
.rw-mcard-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 6px; }
.rw-mcard-foot .tp-when { display: inline-flex; align-items: center; gap: 4px; color: rgba(246, 231, 192, 0.7); font-size: 11.5px; white-space: nowrap; }
.rw-mcard-foot .tp-when svg { width: 12px; height: 12px; vertical-align: -1px; }
.rw-mcard-foot .btn-quiet { color: #f6e7c0; }
.rw-mcard-foot .btn-ghost { border-color: rgba(240, 201, 92, 0.6); color: #ffe7a3; background: transparent; }
.rw-mcard-foot .rw-inuse { color: #f0c95c; }
@media (max-width: 560px) { .rw-mlane { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 课程中心（第二稿，站长 2026-10-13：封面没铺满、和卡片割裂；数据条不好看）
   主线卡：封面铺满卡片上半部分（2:1，边到边），下面一行写课名、下一关、进度，右边是「继续」。 */
.cc-lines { gap: 18px; margin-bottom: 16px; }
.cc-line { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden; border-radius: 22px; background: var(--bg-elevated);
  box-shadow: 0 14px 34px -22px rgba(16, 24, 40, 0.45); transition: transform 0.2s var(--ease), box-shadow 0.2s; }
.cc-line:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -22px rgba(16, 24, 40, 0.5); }
.cc-line-art { aspect-ratio: 2 / 1; border-radius: 0; }
.cc-line-art svg { transition: transform 0.4s var(--ease); }
.cc-line:hover .cc-line-art svg { transform: scale(1.025); }
.cc-line-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 18px; align-items: center; padding: 16px 20px 18px;
  background: linear-gradient(180deg, var(--ca-tint, var(--bg-elevated)), var(--bg-elevated)); }
.cc-line-main > * { grid-column: 1; }
.cc-line h2 { font-size: 22px; }
.cc-line-bar { margin: 10px 0 0; }
.cc-line-acts { grid-column: 2; grid-row: 1 / span 4; flex-direction: column; align-items: stretch; gap: 8px; }
.cc-line .cc-go { padding: 12px 22px; font-size: 15px; text-align: center; white-space: nowrap; }
.cc-line .cc-link { text-align: center; }
@media (max-width: 560px) {
  .cc-line-main { grid-template-columns: 1fr; }
  .cc-line-acts { grid-column: 1; grid-row: auto; flex-direction: row; align-items: center; margin-top: 12px; }
}

/* 数据条：五格，左边今日目标是一个进度环，其余每格一个彩色小图标 */
.cc-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; padding: 0; overflow: hidden; border-radius: 18px; }
.cc-strip .cc-note { grid-column: 1 / -1; margin: 0; padding: 8px 18px 10px; border-top: 1px solid var(--line-soft); }
.cc-strip > .cc-st { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 14px 18px; line-height: 1.25; }
.cc-st + .cc-st { border-left: 1px solid var(--line-soft); }
.cc-st-ico { display: grid; flex: 0 0 auto; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: color-mix(in srgb, var(--c) 13%, var(--bg-elevated)); color: var(--c); }
.cc-st-ico svg { width: 20px; height: 20px; }
.cc-st-txt { display: grid; min-width: 0; line-height: 1.25; }
.cc-st-txt b { color: var(--text-strong); font-size: 20px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cc-st-txt b small { color: var(--text-dim); font-size: 12px; font-weight: 600; }
.cc-st-txt em { overflow: hidden; color: var(--text-dim); font-size: 12px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.cc-ring { position: relative; display: grid; flex: 0 0 auto; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: conic-gradient(var(--accent) var(--p), var(--accent-tint) 0); color: var(--accent-ink); }
.cc-ring::before { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: var(--bg-elevated); }
.cc-ring svg { position: relative; width: 17px; height: 17px; }
.cc-st.is-done .cc-ring { background: conic-gradient(#16a37a 100%, #16a37a 0); color: #16a37a; }
@media (max-width: 900px) {
  .cc-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cc-st.is-goal { grid-column: 1 / -1; }
  .cc-st + .cc-st { border-left: 0; }
  .cc-st { border-top: 1px solid var(--line-soft); }
  .cc-st.is-goal { border-top: 0; }
}

/* ---- 对战大厅第二稿 (pk.js lobby, 2026-10-13) ---- */
.pk-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 20px; align-items: start; }
@media (max-width: 960px) { .pk-layout { grid-template-columns: 1fr; } }
.pk-start { margin: 0; }
.pk-start-body { padding: 18px 20px 20px; }
.pk-start .pg-card-title { margin: 0; }
.pk-sidecard { margin: 0; }
.pk-sidecard .pg-card-title { margin: 0; }
.pk-side-col .pg-card + .pg-card { margin-top: 0; }
.pk-mode-body .tt-group + .tt-group, .pk-optrow + .tt-group { margin-top: 16px; }
.pk-modebar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
/* 五种开法（2026-10-19 加了对战大厅）：窄一点排成 3 + 2，手机上 1 + 2 + 2，不留单个 */
@media (max-width: 1100px) {
  .pk-modebar { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .pk-modebar button { grid-column: span 2; }
  .pk-modebar button:nth-child(n+4) { grid-column: span 3; }
}
@media (max-width: 560px) {
  .pk-modebar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pk-modebar button, .pk-modebar button:nth-child(n+4) { grid-column: auto; }
  .pk-modebar button:first-child { grid-column: span 2; }
}
.pk-modebar button { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; padding: 14px; border: 1.5px solid var(--line-soft); border-radius: 16px; background: var(--bg-elevated);
  color: var(--text-muted); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s, transform .15s; }
.pk-modebar button:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line-soft)); transform: translateY(-1px); }
.pk-modebar button[aria-selected='true'] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.pk-modebar .pk-mode-ico { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; }
.pk-modebar .pk-mode-ico svg { width: 20px; height: 20px; }
.pk-modebar button[aria-selected='true'] .pk-mode-ico { background: var(--accent); color: #fff; }
.pk-mode-txt { display: grid; min-width: 0; line-height: 1.3; }
.pk-mode-txt b { color: var(--text-strong); font-size: 14.5px; }
.pk-mode-txt small { color: var(--text-dim); font-size: 12px; line-height: 1.45; }
.pk-mode-dot { position: absolute; top: 10px; right: 10px; width: 9px; height: 9px; border-radius: 50%; background: #34c46a; box-shadow: 0 0 0 3px color-mix(in srgb, #34c46a 25%, transparent); }
.pk-mode-body { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.pk-mode-body > .pk-h:first-child { margin-top: 0; }
.pk-optrow { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; gap: 18px; margin-bottom: 4px; }
@media (max-width: 760px) { .pk-optrow { grid-template-columns: 1fr; } }
.pk-optcol .pk-h { margin-top: 0; }
.pk-mode-body .pk-people { margin-bottom: 4px; }
.pk-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 20px; padding: 16px 18px; border: 1px solid var(--line-soft); border-radius: 14px; background: var(--bg-soft); }
.pk-cta-txt { display: grid; flex: 1 1 260px; gap: 3px; }
.pk-cta-txt b { color: var(--text-strong); font-size: 14.5px; }
.pk-cta-txt span { color: var(--text-muted); font-size: 13px; line-height: 1.55; }
.pk-cta-txt a { color: var(--accent-ink); font-weight: 600; }
.pk-cta .btn svg { width: 18px; height: 18px; margin-right: 4px; }
.pk-mode-lead { margin: 0 0 14px; color: var(--text-muted); font-size: 13.5px; line-height: 1.6; }
.pk-signin { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 20px; border-radius: 16px; background: var(--bg-soft); }
.pk-signin > svg { width: 30px; height: 30px; color: var(--accent); }
.pk-signin > div { display: grid; flex: 1 1 240px; gap: 3px; }
.pk-signin b { color: var(--text-strong); }
.pk-signin span { color: var(--text-muted); font-size: 13px; }
/* 右边：我的战绩 */
.pk-record { text-align: center; }
.pk-rec-big { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 4px 0 2px; }
.pk-rec-big span { display: grid; }
.pk-rec-big b { color: var(--text-strong); font-size: 40px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.pk-rec-big span.is-win b { color: #1f7a45; }
.pk-rec-big small { color: var(--text-dim); font-size: 12px; font-weight: 600; }
.pk-rec-big i { color: var(--line); font-size: 28px; font-style: normal; font-weight: 800; }
.pk-rec-sub { margin: 4px 0 12px; color: var(--text-muted); font-size: 13px; }
.pk-rec-best { display: flex; justify-content: center; gap: 22px; margin-bottom: 12px; padding: 10px 0; border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); }
.pk-rec-best span { display: grid; }
.pk-rec-best b { color: var(--text-strong); font-size: 20px; }
.pk-rec-best small { color: var(--text-dim); font-size: 11.5px; }
.pk-record .pk-quota { margin: 0; text-align: left; }
.pk-howto .pk-rules { font-size: 12.5px; }

/* 课程升级了（第二稿，2026-10-13）：和数据条、标签同样的间距和圆角，能 × 掉 */
.cc-notice { position: relative; display: flex; align-items: flex-start; gap: 14px; margin: 0 0 16px; padding: 16px 48px 16px 18px; border: 1px solid #ddd3ff; border-radius: 18px;
  background: linear-gradient(110deg, #f5f1ff, var(--bg-elevated) 70%); color: var(--text); font-size: 13.5px; line-height: 1.6; transition: opacity .2s, transform .2s; }
.cc-notice.is-out { opacity: 0; transform: translateY(-6px); }
.cc-notice-ico { display: grid; flex: 0 0 auto; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #6741d9; color: #fff; }
.cc-notice-ico svg { width: 20px; height: 20px; }
.cc-notice-main { flex: 1 1 auto; min-width: 0; }
.cc-notice-main b { display: block; margin-bottom: 4px; color: #3b2a8a; font-size: 15px; }
.cc-notice-main ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.cc-notice-main li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; color: var(--text-muted); }
.cc-notice-main li::before { content: ''; flex: 0 0 auto; width: 5px; height: 5px; margin-right: -4px; border-radius: 50%; background: #9b87f0; transform: translateY(-2px); }
.cc-notice-go { padding: 0; border: 0; background: none; color: #6741d9; font: inherit; font-weight: 700; cursor: pointer; }
.cc-notice-x { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: var(--text-dim); font-size: 20px; line-height: 1; cursor: pointer; }
.cc-notice-x:hover { background: rgba(103, 65, 217, 0.1); color: #3b2a8a; }
.cc-tabs button { position: relative; }
.cc-tab-dot { position: absolute; top: 5px; right: 5px; width: 8px; height: 8px; border-radius: 50%; background: #e5484d; }
[data-theme='dark'] .cc-notice { border-color: rgba(155, 135, 240, .35); background: linear-gradient(110deg, rgba(103, 65, 217, .18), var(--bg-elevated) 70%); }
[data-theme='dark'] .cc-notice-main b { color: #c9bbff; }

/* 主线按顺序解锁：没解锁的课 */
.cc-badge.is-lock { display: inline-flex; align-items: center; gap: 4px; background: rgba(16, 24, 40, .72); color: #fff; }
.cc-badge.is-lock svg { width: 12px; height: 12px; }
.cm-lockbar.is-lock { background: #f3f0ff; color: #3b2a8a; }
.cm-lockbar.is-lock .btn { flex: 0 0 auto; }
.cm-go svg, .cm-finished svg { width: 16px; height: 16px; vertical-align: -2px; }

/* ============================================================ 排行榜 · 荣耀版（2026-10-13）
   站长：排行榜要有荣耀感、就是要炫耀展示；规则说明都收起来。
   最上面一块深色的「荣耀殿堂」，四位冠军站在聚光灯下；榜单占满整宽，领奖台在一块舞台上；
   段位殿堂一排徽章；我的位置一条细的；规则收在「规则」按钮后面。 */
.lb-champs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .lb-champs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lbc { position: relative; display: grid; justify-items: center; gap: 6px; padding: 16px 12px 16px; border-radius: 20px; color: #fff; text-decoration: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04)); box-shadow: inset 0 0 0 1px rgba(255, 215, 106, .28), 0 14px 30px -18px rgba(0, 0, 0, .6);
  transition: transform .2s var(--ease), box-shadow .2s; }
.lbc:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1.5px rgba(255, 215, 106, .6), 0 18px 34px -16px rgba(0, 0, 0, .7); }
.lbc-label { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; background: rgba(255, 215, 106, .16); color: #ffd76a; font-size: 12px; font-weight: 800; letter-spacing: .05em; }
.lbc-label svg { width: 14px; height: 14px; }
.lbc-av { position: relative; display: grid; place-items: center; width: 86px; height: 92px; padding-top: 10px; }
.lbc-crown { position: absolute; top: -2px; left: 50%; width: 38px; transform: translateX(-50%) rotate(-6deg); filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .4)); z-index: 2; }
.lbc-ring { display: grid; place-items: center; width: 78px; height: 78px; border-radius: 50%; padding: 4px; background: conic-gradient(#ffe89a, #d4a017, #fff3c4, #c9961f, #ffe89a);
  box-shadow: 0 0 0 4px rgba(255, 215, 106, .18), 0 0 28px rgba(255, 200, 80, .45); }
.lbc-ring .lb-avatar { width: 100%; height: 100%; border-radius: 50%; border: 3px solid #1d1645; font-size: 26px; }
.lbc-av.is-empty { width: 78px; height: 78px; margin-top: 10px; border-radius: 50%; border: 2px dashed rgba(255, 215, 106, .5); color: rgba(255, 215, 106, .7); font-size: 30px; font-weight: 800; }
.lbc-name { display: flex; align-items: center; justify-content: center; gap: 4px; max-width: 100%; overflow: hidden; font-size: 15.5px; text-overflow: ellipsis; white-space: nowrap; }
.lbc-val { color: rgba(255, 255, 255, .7); font-size: 12px; }
.lbc-val b { margin-right: 4px; color: #ffd76a; font-size: 28px; font-variant-numeric: tabular-nums; text-shadow: 0 2px 12px rgba(255, 200, 80, .35); }
.lbc-tier { display: inline-flex; align-items: center; gap: 5px; color: rgba(255, 255, 255, .85); font-size: 12px; font-weight: 700; }
.lbc-you { position: absolute; top: 10px; right: 10px; padding: 1px 8px; border-radius: 999px; background: #ffd76a; color: #2a1c00; font-size: 11px; font-style: normal; font-weight: 800; }
.lbc.is-empty .lbc-name { color: rgba(255, 255, 255, .7); }
/* 工具条：筛选在左，「规则」在右 */
.lb-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 14px; }
.lb-toolbar .lb-filters { margin: 0; }
.lb-rules-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid var(--line-soft); border-radius: 999px; background: var(--bg-elevated); color: var(--text-muted); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.lb-rules-btn::before { content: 'i'; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--text-dim); color: #fff; font-size: 11px; font-style: italic; font-weight: 800; }
.lb-rules-btn:hover { color: var(--text-strong); border-color: var(--line); }
/* 领奖台的舞台 */
.lb-stage { position: relative; background: radial-gradient(70% 100% at 50% 0%, #fff6d8 0%, var(--bg-elevated) 70%); }
.lb-stage::before { content: ''; position: absolute; inset: 0; background: repeating-conic-gradient(from 0deg at 50% 0%, rgba(241, 188, 63, .08) 0 5deg, transparent 5deg 15deg);
  -webkit-mask: radial-gradient(60% 90% at 50% 0%, #000, transparent 80%); mask: radial-gradient(60% 90% at 50% 0%, #000, transparent 80%); pointer-events: none; }
.lb-stage .lb-podium2 { position: relative; padding-top: 34px; }
[data-theme='dark'] .lb-stage { background: radial-gradient(70% 100% at 50% 0%, rgba(241, 188, 63, .16) 0%, var(--bg-elevated) 70%); }
/* 段位殿堂 */
.lb-tierwall { padding: 16px 20px 18px; border-top: 1px solid var(--line-soft); }
.lbt-title { margin: 0 0 10px; color: var(--text-strong); font-size: 14px; }
.lbt-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.lbt { display: grid; flex: 1 0 74px; justify-items: center; gap: 2px; padding: 10px 6px; border-radius: 14px; background: var(--bg-soft); }
.lbt b { color: var(--text-strong); font-size: 12.5px; }
.lbt small { color: var(--text-dim); font-size: 11.5px; }
.lbt.is-top { background: linear-gradient(180deg, #fff3d1, var(--bg-soft)); box-shadow: inset 0 0 0 1px rgba(241, 188, 63, .4); }
.lbt.is-empty { opacity: .55; }
/* 我的位置：一条细的 */
.lb-mebar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 14px 20px; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); background: var(--accent-tint); }
.lb-mebar-main { display: flex; align-items: baseline; gap: 10px; color: var(--text-muted); font-size: 14px; }
.lb-mebar-main b { color: var(--accent-ink); font-size: 18px; }
.lb-mebar-main em { color: var(--text-strong); font-style: normal; font-weight: 700; }
.lb-mebar-gap { flex: 1 1 auto; color: var(--text-muted); font-size: 13.5px; }
.lb-mebar-gap b { color: var(--text-strong); }
.lb-mebar-gap svg { width: 16px; height: 16px; color: var(--gold-dark); vertical-align: -3px; }
.lb-mebar-more { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border: 1px solid var(--accent-line); border-radius: 999px; background: var(--bg-elevated); color: var(--accent-ink); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.lb-mebar-more svg { width: 14px; height: 14px; transition: transform .2s; }
.lb-mebar-more[aria-expanded='true'] svg { transform: rotate(180deg); }
.lb-me-detail { border-bottom: 1px solid var(--line-soft); }
/* 规则面板 */
.lb-rules { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; padding: 16px; background: rgba(12, 16, 28, .5); }
.lb-rules[hidden] { display: none; }
.lb-rules-box { position: relative; width: min(640px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 24px 26px; border-radius: 22px; background: var(--bg-elevated); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .5); }
.lb-rules-box h2 { margin: 0 0 12px; font-size: 19px; }
.lb-rules-box h3 { margin: 20px 0 8px; font-size: 15px; }
.lb-rules-x { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--bg-soft); color: var(--text-muted); font-size: 20px; cursor: pointer; }
body.has-lb-rules { overflow: hidden; }

/* ============================================================ 排行榜第三稿（2026-10-14）
   标题栏回到和课程一样；荣耀殿堂是标题栏下面同宽的一条；三块奖牌标签；领奖台下面两栏：
   左边我的位置和名单，右边段位殿堂金字塔。 */
.lb-hall { position: relative; overflow: hidden; margin: 0 0 18px; padding: 18px 20px 20px; border-radius: 22px; color: #fff;
  background: radial-gradient(120% 120% at 50% 0%, #4a2f9e 0%, #231a56 50%, #120e2c 100%); box-shadow: 0 20px 50px -30px rgba(20, 10, 60, .7); }
.lb-hall::before { content: ''; position: absolute; inset: -60% -10% auto; height: 180%; background: repeating-conic-gradient(from 0deg at 50% 0%, rgba(255, 214, 102, .09) 0 6deg, transparent 6deg 18deg);
  -webkit-mask: radial-gradient(70% 60% at 50% 0%, #000 30%, transparent 75%); mask: radial-gradient(70% 60% at 50% 0%, #000 30%, transparent 75%); pointer-events: none; }
.lb-hall-eyebrow { position: relative; margin: 0 0 12px; color: #ffd76a; font-size: 12.5px; font-weight: 800; letter-spacing: .18em; text-align: center; }
.lb-hall .lb-champs { position: relative; }

/* 三块奖牌标签 */
.lbtabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
@media (max-width: 760px) { .lbtabs { grid-template-columns: 1fr; } }
.lbtab { --c1: #6b4fd8; --c2: #c9961f; position: relative; display: flex; align-items: center; gap: 14px; min-width: 0; padding: 16px 18px; border: 1.5px solid var(--line-soft); border-radius: 20px;
  background: var(--bg-elevated); color: var(--text-muted); font: inherit; text-align: left; cursor: pointer; overflow: hidden; transition: transform .18s var(--ease), box-shadow .18s, border-color .18s; }
.lbtab.is-speed { --c1: #1c7ed6; --c2: #4fc3f7; }
.lbtab.is-week { --c1: #e8590c; --c2: #ffb648; }
.lbtab.is-overall { --c1: #5b3fc4; --c2: #d4a017; }
.lbtab:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--c1) 40%, var(--line-soft)); }
.lbtab-medal { position: relative; display: grid; flex: 0 0 auto; place-items: center; width: 54px; height: 54px; border-radius: 50%; color: #fff;
  background: linear-gradient(145deg, var(--c2), var(--c1)); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -3px 0 rgba(0, 0, 0, .18), 0 6px 14px -6px var(--c1); }
.lbtab-medal::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .45); }
.lbtab-medal svg { width: 26px; height: 26px; }
.lbtab-txt { display: grid; flex: 1 1 auto; gap: 2px; min-width: 0; }
.lbtab-txt b { color: var(--text-strong); font-size: 18px; }
.lbtab-txt small { overflow: hidden; color: var(--text-dim); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.lbtab-lead { display: flex; flex: 0 0 auto; align-items: center; gap: 7px; max-width: 42%; padding: 5px 10px 5px 5px; border-radius: 999px; background: var(--bg-soft); }
.lbtab-lead .lb-avatar { width: 30px; height: 30px; border-radius: 50%; box-shadow: 0 0 0 2px #f2c94c; font-size: 13px; }
.lbtab-lead > span { display: grid; min-width: 0; line-height: 1.15; }
.lbtab-lead small { color: #b8860b; font-size: 10.5px; font-weight: 800; }
.lbtab-lead b { overflow: hidden; color: var(--text-strong); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.lbtab[aria-selected='true'] { border-color: transparent; background: linear-gradient(120deg, var(--c1), color-mix(in srgb, var(--c1) 70%, var(--c2))); box-shadow: 0 16px 30px -16px var(--c1); }
.lbtab[aria-selected='true'] .lbtab-txt b { color: #fff; }
.lbtab[aria-selected='true'] .lbtab-txt small { color: rgba(255, 255, 255, .8); }
.lbtab[aria-selected='true'] .lbtab-medal { background: rgba(255, 255, 255, .18); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5); }
.lbtab[aria-selected='true'] .lbtab-lead { background: rgba(255, 255, 255, .16); }
.lbtab[aria-selected='true'] .lbtab-lead small { color: #ffe08a; }
.lbtab[aria-selected='true'] .lbtab-lead b { color: #fff; }
@media (max-width: 1000px) { .lbtab-lead { display: none; } }

/* 领奖台下面：两栏 */
.lb-split { display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; border-top: 1px solid var(--line-soft); }
.lb-split:has(> .lb-tierwall[hidden]) { grid-template-columns: 1fr; }
@media (max-width: 980px) { .lb-split { grid-template-columns: 1fr; } }
.lb-split-main { min-width: 0; }
.lb-split .lb-tierwall { position: sticky; top: calc(var(--nav-h, 64px) + 12px); margin: 16px; padding: 0; border: 0; }

/* 每一行 */
.lb-list { margin: 0; padding: 8px 12px 4px; list-style: none; }
.lbr { display: grid; grid-template-columns: 46px 50px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 10px; border-radius: 16px; transition: background .15s; }
.lbr + .lbr { margin-top: 2px; }
.lbr:hover { background: var(--bg-soft); }
.lbr-rank { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--bg-soft); color: var(--text-muted); font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.lbr.is-top10 .lbr-rank { background: linear-gradient(145deg, #fff6d8, #f6e2a6); color: #8a6100; box-shadow: inset 0 0 0 1.5px rgba(212, 160, 23, .5); }
.lbr-av { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; padding: 3px; background: var(--ring); }
.lbr-av .lb-avatar { width: 100%; height: 100%; border-radius: 50%; border: 2px solid var(--bg-elevated); font-size: 17px; }
.lbr-who { display: grid; gap: 3px; min-width: 0; }
.lbr-name { display: flex; align-items: center; gap: 5px; min-width: 0; }
.lbr-name > b { overflow: hidden; color: var(--text-strong); font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.lbr-tag { flex: 0 0 auto; padding: 0 6px; border-radius: 6px; background: var(--bg-sunken); color: var(--text-dim); font-size: 11px; font-style: normal; font-weight: 700; }
.lbr-tag.is-me { background: var(--accent); color: #fff; }
.lbr-sub { display: flex; align-items: center; gap: 7px; overflow: hidden; color: var(--text-dim); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.lbr-tierchip { flex: 0 0 auto; padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--c) 14%, var(--bg-elevated)); color: color-mix(in srgb, var(--c) 80%, #000); font-size: 11px; font-style: normal; font-weight: 800; }
.lbr-meter { display: block; width: min(240px, 100%); height: 4px; border-radius: 2px; background: var(--bg-sunken); overflow: hidden; }
.lbr-meter i { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, #a78bfa, #f2c94c); }
.lbr-emblem { display: grid; place-items: center; }
.lbr-val { min-width: 86px; text-align: right; }
.lbr-val b { color: var(--text-strong); font-size: 20px; font-variant-numeric: tabular-nums; }
.lbr-val small { margin-left: 3px; color: var(--text-dim); font-size: 11.5px; }
.lbr.is-me { background: var(--accent-tint); box-shadow: inset 0 0 0 1.5px var(--accent-line); }
@media (max-width: 560px) {
  .lbr { grid-template-columns: 36px 42px minmax(0, 1fr) auto; gap: 8px; }
  .lbr-emblem, .lbr-meter { display: none; }
  .lbr-rank { width: 32px; height: 32px; font-size: 13px; }
  .lbr-av { width: 42px; height: 42px; }
  .lbr-val { min-width: 0; }
  .lbr-val b { font-size: 17px; }
}

/* 段位殿堂：金字塔 */
.lbpy { padding: 16px 14px 18px; border-radius: 20px; color: #fff; background: linear-gradient(170deg, #1c1640, #2a1f5c 55%, #16112f); box-shadow: inset 0 0 0 1px rgba(242, 201, 76, .35), 0 18px 40px -26px rgba(20, 10, 60, .8); }
.lbpy-title { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin: 0 0 12px; }
.lbpy-title span { color: #ffd76a; font-size: 16px; letter-spacing: .12em; }
.lbpy-title small { color: rgba(255, 255, 255, .55); font-size: 11.5px; font-weight: 600; }
.lbpy-layer { display: flex; justify-content: center; gap: 8px; }
.lbpy-layer + .lbpy-layer { margin-top: 8px; }
.lbpy-cell { position: relative; display: grid; flex: 1 1 0; justify-items: center; gap: 1px; max-width: 96px; padding: 8px 4px 8px; border-radius: 14px; background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 45%, transparent); }
.lbpy-cell b { color: #fff; font-size: 12.5px; }
.lbpy-cell small { color: rgba(255, 255, 255, .62); font-size: 11px; }
.lbpy-cell.lv-0 { max-width: 170px; padding: 12px 10px; background: radial-gradient(100% 100% at 50% 0%, rgba(242, 183, 5, .35), rgba(255, 255, 255, .05)); box-shadow: inset 0 0 0 1.5px rgba(255, 215, 106, .75), 0 0 30px rgba(242, 183, 5, .3); }
.lbpy-cell.lv-0 b { color: #ffd76a; font-size: 16px; }
.lbpy-cell.lv-1 { max-width: 130px; background: rgba(255, 255, 255, .09); }
.lbpy-cell.lv-1 b { font-size: 14px; }
.lbpy-cell.is-empty { opacity: .55; }
.lbpy-emb { filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .45)); }
.lbpy-cell.lv-0 .lbpy-emb { filter: drop-shadow(0 0 14px rgba(255, 210, 90, .6)); }
.lbpy-who { display: flex; margin-top: 4px; }
.lbpy-who .lb-avatar { width: 22px; height: 22px; margin-left: -6px; border-radius: 50%; border: 2px solid #231a56; font-size: 10px; }
.lbpy-who .lb-avatar:first-child { margin-left: 0; }
.lbpy-need { position: absolute; top: 5px; right: 6px; color: #ffd76a; font-size: 9.5px; font-style: normal; font-weight: 800; }

/* 我的位置：细条照旧，「我的详情」重做 */
.lb-split-main .lb-mebar { border-top: 0; }
.lbme { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 20px; padding: 18px 20px 20px; background: linear-gradient(180deg, var(--accent-tint), var(--bg-elevated) 60%); }
@media (max-width: 640px) { .lbme { grid-template-columns: 1fr; } }
.lbme-tier { display: grid; justify-items: center; align-content: start; gap: 4px; text-align: center; }
.lbme-ring { display: grid; place-items: center; width: 124px; height: 124px; border-radius: 50%; background: conic-gradient(var(--ink) var(--p), color-mix(in srgb, var(--ink) 15%, var(--bg-elevated)) 0); position: relative; }
.lbme-ring::before { content: ''; position: absolute; inset: 8px; border-radius: 50%; background: var(--bg-elevated); }
.lbme-ring > * { position: relative; }
.lbme-tname { color: var(--text-strong); font-size: 17px; }
.lbme-total { color: var(--text-strong); font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
.lbme-total small { margin-left: 4px; color: var(--text-dim); font-size: 12px; font-weight: 600; }
.lbme-next { color: var(--text-muted); font-size: 12.5px; }
.lbme-next b { color: var(--text-strong); }
.lbme-parts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.lbme-part { display: grid; grid-template-columns: 36px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; row-gap: 6px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--bg-elevated);
  box-shadow: inset 0 0 0 1px var(--line-soft); }
.lbme-part.is-tip { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 60%, transparent); }
.lbme-ico { display: grid; grid-row: 1; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: color-mix(in srgb, var(--c) 14%, var(--bg-elevated)); color: var(--c); }
.lbme-ico svg { width: 18px; height: 18px; }
.lbme-pt { display: grid; line-height: 1.2; }
.lbme-pt small { color: var(--text-dim); font-size: 11.5px; font-weight: 700; }
.lbme-pt b { color: var(--text-strong); font-size: 17px; font-variant-numeric: tabular-nums; }
.lbme-pt b i { color: var(--text-dim); font-size: 11px; font-style: normal; font-weight: 600; }
.lbme-pt em { color: var(--text-dim); font-size: 10.5px; font-style: normal; }
.lbme-bar { grid-column: 1 / -1; height: 5px; border-radius: 3px; background: var(--bg-sunken); overflow: hidden; }
.lbme-bar i { display: block; height: 100%; border-radius: 3px; background: var(--c); }
.lbme-tip { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--gold-soft); color: var(--gold-ink); font-size: 12.5px; line-height: 1.55; }
.lbme-tip svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; }
.lb-rules-btn { margin-left: auto; }

/* 指南里的段位徽章（guide-leaderboard.html 段位表） */
.gd-emb { display: block; width: auto; height: 44px; margin: -4px auto; }

/* 测速页底下通往指南的那条路（说明搬进了 guide-typing-speed.html） */
.tt-guide-link { margin-top: 32px; padding-top: 18px; text-align: center; font-size: 14px; }
.tt-guide-link a { font-weight: var(--fw-semibold); }
/* 指南里的表：说明那一列很长，换行而不是横着滚（.pg-table 默认一格一行） */
body.mk .pg-table td:last-child { white-space: normal; line-height: 1.55; }
/* 说明那一列长、最后一列短时，最后一列被挤成一字一行（2026-10-21 站长截图）：中间的列也换行，每列至少 7 个字宽 */
body.mk .pg-table td:not(:first-child) { white-space: normal; line-height: 1.55; min-width: 7em; }
.pk-howto .pk-guide { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: var(--fw-semibold); }

/* 测速：会员时长（2026-10-15） */
.tt-seg button.is-member { color: #8a6212; }
.tt-seg button.is-member svg { width: 13px; height: 13px; margin-right: 3px; vertical-align: -1px; color: #c9961a; }
/* 皇冠和字排在同一行，按钮高度和别的档一样（原来 svg 是块级，皇冠顶在字上面，整排变高） */
.tt-seg button.is-member { display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.tt-seg button.is-member svg { display: block; flex: none; margin: 0; }

/* 新课程上线一个月的 NEW 角标（2026-10-15） */
.cc-new { position: absolute; bottom: 8px; left: 8px; padding: 2px 9px; border-radius: 99px; background: #e5577a; color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; box-shadow: 0 2px 6px rgba(229, 87, 122, .35); }
.cc-new.is-inline { position: static; display: inline-block; margin-left: 8px; padding: 0 7px; font-size: 10.5px; line-height: 18px; vertical-align: 1px; box-shadow: none; }
/* PK 中文对照：对手那栏正在打的字和自己这栏一样，用颜色标，不画下划线（下划线会落在格子下面） */
.pk-screen.is-peer .inview.is-zh-pair .typing-text .ch.is-current { box-shadow: none; color: var(--side); }

/* PK：自定义内容（会员，2026-10-15） */
.tt-pills button.is-member { display: inline-flex; align-items: center; gap: 3px; color: #8a6212; }
.tt-pills button.is-member svg { flex: none; width: 13px; height: 13px; color: #c9961a; }
.pk-custom { display: grid; gap: 4px; margin: 10px 0 14px; }
.pk-custom textarea { width: 100%; min-height: 76px; resize: vertical; font: inherit; font-size: 14px; line-height: 1.6; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-elevated); color: var(--text-strong); }
.pk-custom small { justify-self: end; color: var(--text-dim); font-size: 12px; }
.pk-custom.is-locked { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; background: #fbf1d9; color: #6d4f0d; font-size: 13.5px; }
.pk-custom.is-locked svg { flex: none; width: 18px; height: 18px; color: #c9961a; }
.pk-custom.is-locked span { flex: 1; }

/* PK：自己这栏头上的中文输入方式切换（2026-10-15） */
/* 头上一行放不下（名字、中文输入、四个数字）就折成两行，谁都不许被挤成竖排（2026-10-21 站长截图） */
.pk-side-head { flex-wrap: wrap; row-gap: 8px; }
.pk-side-head .pk-zh-switch { margin-left: auto; margin-right: 12px; }
.pk-side-head .pk-zh-switch + .pk-side-nums { margin-left: 0; }
@media (max-width: 1100px) { .pk-side-head .pk-zh-switch .zh-switch-label { display: none; } }

/* ---------------------------------------------------------------- PK 结算（2026-10-15 重做：好看、能存图） */
.pk-res-card { width: min(720px, 100%); padding: 22px 26px 18px; text-align: center; }
.pk-res-kicker { margin: 0 0 4px; color: var(--text-dim); font-size: 12.5px; font-weight: 600; letter-spacing: .04em; }
.pk-res-card h2 { font-size: 34px; letter-spacing: .02em; }
.pk-res-line { margin: 2px 0 18px; font-size: 14.5px; }
.pk-res-cols { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 14px; align-items: stretch; }
.pk-res-col { position: relative; gap: 4px; padding: 18px 12px 14px; border-radius: 18px; background: var(--bg-soft); overflow: hidden; }
.pk-res-col.is-me { --side: #2f8be0; }
.pk-res-col.is-peer { --side: #e86096; }
.pk-res-col::before { content: ''; position: absolute; inset: 0 0 auto; height: 4px; background: var(--side); opacity: .8; }
.pk-res-col.is-win { background: color-mix(in srgb, #34c46a 10%, var(--bg-elevated)); box-shadow: inset 0 0 0 2px color-mix(in srgb, #34c46a 55%, transparent); }
.pk-res-ribbon { position: absolute; top: 12px; right: -30px; width: 100px; padding: 3px 0; transform: rotate(35deg); background: #34c46a; color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .2em; text-align: center; }
.pk-res-col .pk-av { width: 56px; height: 56px; }
.pk-res-name { overflow: hidden; max-width: 100%; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.pk-res-hero { display: flex; align-items: baseline; justify-content: center; gap: 6px; margin: 4px 0 6px; }
.pk-res-hero b { color: var(--text-strong); font-size: 46px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.pk-res-col.is-win .pk-res-hero b { color: #1f7a45; }
.pk-res-hero small { color: var(--text-dim); font-size: 13px; font-weight: 600; }
.pk-res-hero.is-none b { color: var(--text-dim); }
.pk-res-nums { justify-content: center; gap: 0; width: 100%; border-top: 1px solid var(--line-soft); padding-top: 8px; }
.pk-res-nums span { flex: 1; min-width: 0; }
.pk-res-nums span + span { border-left: 1px solid var(--line-soft); }
.pk-res-nums b { font-size: 17px; }
.pk-res-score { display: grid; align-content: center; justify-items: center; gap: 2px; min-width: 64px; }
.pk-res-score b { color: #6b4ce6; font-size: 34px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pk-res-score b i { margin: 0 4px; font-style: normal; opacity: .5; }
.pk-res-score small { color: var(--text-dim); font-size: 11px; }
/* 谁在领先 */
.pk-story { margin: 16px 0 4px; padding: 14px 14px 12px; border-radius: 16px; background: var(--bg-soft); text-align: left; }
.pk-story-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.pk-story-head b { color: var(--text-strong); font-size: 15px; }
.pk-story-head span { color: var(--text-dim); font-size: 12.5px; }
.pk-story svg { display: block; width: 100%; height: auto; }
.pk-story text { fill: var(--text-dim); font-size: 11px; font-variant-numeric: tabular-nums; }
.pk-story text.is-me { fill: #2f8be0; }
.pk-story text.is-peer { fill: #e86096; }
.pk-st-grid { stroke: var(--line-soft); stroke-dasharray: 3 4; }
.pk-st-zero { stroke: var(--line); stroke-width: 1.5; }
.pk-st-line { fill: none; stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.pk-st-line.is-me { stroke: #2f8be0; }
.pk-st-line.is-peer { stroke: #e86096; }
.pk-st-dot { stroke: var(--bg-elevated); stroke-width: 2; }
.pk-st-dot.is-me { fill: #2f8be0; }
.pk-st-dot.is-peer { fill: #e86096; }
.pk-story text.pk-st-tag { font-size: 12px; font-weight: 800; }
.pk-st-tag.is-me { fill: #2f8be0; }
.pk-st-tag.is-peer { fill: #e86096; }
.pk-story-key { display: flex; justify-content: center; gap: 18px; margin-top: 2px; color: var(--text-muted); font-size: 12px; }
.pk-story-key span::before { content: ''; display: inline-block; width: 12px; height: 8px; margin-right: 6px; border-radius: 2px; vertical-align: 0; }
.pk-story-key .is-me::before { background: rgba(47, 139, 224, .45); }
.pk-story-key .is-peer::before { background: rgba(232, 96, 150, .45); }
.pk-moments { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.pk-moments li { padding: 4px 10px; border-radius: 999px; background: var(--bg-elevated); color: var(--text); font-size: 12.5px; box-shadow: inset 0 0 0 1px var(--line-soft); }
.pk-moments li.is-me { color: #1c6db8; box-shadow: inset 0 0 0 1px rgba(47, 139, 224, .35); }
.pk-moments li.is-peer { color: #b83a72; box-shadow: inset 0 0 0 1px rgba(232, 96, 150, .35); }
@media (max-width: 640px) { .pk-res-hero b { font-size: 34px; } .pk-res-card { padding: 18px 14px 14px; } }
.pk-res-hero.is-none { flex-direction: column; align-items: center; gap: 8px; margin: 18px 0; }

/* PK 结算卡二版（2026-10-15）：不要顶上的色条；你我靠头像外圈的颜色分，赢的绿边 + 顶上「胜」 */
.pk-res-cols { margin-top: 10px; }
.pk-res-col { overflow: visible; padding: 22px 14px 14px; background: var(--bg-elevated); box-shadow: inset 0 0 0 1px var(--line); }
.pk-res-col::before { display: none; }
.pk-res-col.is-win { background: color-mix(in srgb, #34c46a 7%, var(--bg-elevated)); box-shadow: inset 0 0 0 2px #7fd6a0; }
.pk-res-col .pk-av { width: 64px; height: 64px; border-radius: 50%; box-shadow: 0 0 0 3px var(--bg-elevated), 0 0 0 6px var(--side); }
.pk-res-name { margin-top: 8px; }
.pk-res-tag { padding: 1px 9px; border-radius: 999px; background: color-mix(in srgb, var(--side) 12%, transparent); color: var(--side); font-size: 11.5px; font-weight: 700; }
.pk-res-badge { position: absolute; top: -13px; left: 50%; display: inline-flex; align-items: center; gap: 4px; padding: 3px 12px 3px 9px; transform: translateX(-50%); border-radius: 999px; background: #34c46a; color: #fff; font-size: 12.5px; font-weight: 800; letter-spacing: .1em; box-shadow: 0 4px 10px -4px rgba(31, 122, 69, .6); }
.pk-res-badge svg { width: 14px; height: 14px; }
.pk-res-unfin { display: grid; justify-items: center; gap: 6px; width: 100%; margin: auto 0; padding: 14px 6px 6px; }
.pk-res-unfin b { color: var(--text-muted); font-size: 22px; }
.pk-res-unfin small { color: var(--text-dim); font-size: 13px; font-variant-numeric: tabular-nums; }
.pk-res-prog { display: block; width: 80%; height: 6px; border-radius: 3px; background: var(--line-soft); overflow: hidden; }
.pk-res-prog i { display: block; height: 100%; border-radius: 3px; background: var(--side); opacity: .7; }
.pk-res-badge { padding: 3px 14px; }

/* ============================================ 成长之路 · 2026-10-15 台阶版
   档位画成一层层淡色带子，线从下往上爬；图的高度跟左栏一样（profile.js journeySpace）。 */
.pj-now-col { align-self: start; }
.pj-chart { display: flex; flex-direction: column; }
.pj-svg { flex: none; }
.pj-band { fill: var(--bc); fill-opacity: 0.05; }
.pj-band.is-mine { fill-opacity: 0.12; }
.pj-band.is-next { fill-opacity: 0.07; stroke: var(--bc); stroke-opacity: 0.45; stroke-dasharray: 5 5; stroke-width: 1.2; }
.pj-svg .pj-level { stroke: var(--bc); stroke-opacity: 0.35; stroke-dasharray: 3 5; }
.pj-band-t { fill: var(--bc); font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em; }
.pj-base { stroke: var(--line, rgba(0, 0, 0, 0.12)); }
.pj-tick { stroke: var(--line, rgba(0, 0, 0, 0.18)); }
.pj-line { stroke-width: 4; filter: drop-shadow(0 4px 6px rgba(59, 143, 224, 0.25)); }
.pj-fore.is-up { stroke-dasharray: 2 6; stroke-linecap: round; opacity: 0.8; }
.pj-flag { fill: #f4c965; stroke: #c9961a; stroke-width: 1.2; stroke-linejoin: round; }
.pj-goal circle { fill: var(--bg-elevated, #fff); stroke-width: 2.5; }
.pj-goal text { fill: #b07a12; font-size: 12.5px; }
.pj-gain { padding: 2px 10px; border-radius: 999px; background: var(--green-soft, #e7f6ec); color: var(--green-ink, #217a3c); font-style: normal; font-size: 12.5px; font-weight: 700; }
@media (max-width: 640px) { .pj-band-t { font-size: 10.5px; } }
.pj-band-t.is-mine { font-size: 12.5px; }
.pj-band-n { fill: var(--text-dim, #8a93a3); font-size: 10.5px; }

/* ---------- 意见反馈 · 工单（feedback.html，2026-10-16）：左边我的每一条，右边整段对话 ---------- */
.fbp-desk { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 18px; align-items: start; }
.fbp-list { display: grid; gap: 2px; padding: 8px; max-height: calc(100vh - 160px); overflow-y: auto; }
.fbp-item { display: grid; gap: 6px; width: 100%; padding: 12px; border: 0; border-radius: 12px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.fbp-item:hover { background: var(--bg-soft); }
.fbp-item.is-on { background: var(--accent-tint); }
.fbp-item-top { display: flex; align-items: center; gap: 8px; }
.fbp-item-top time { margin-left: auto; color: var(--text-dim); font-size: 12px; }
.fbp-item-text { color: var(--text-strong); font-size: 14px; line-height: 1.5; }
.fbp-item-last { color: var(--text-muted); font-size: 12.5px; }
.fbp-st { display: inline-flex; align-items: center; gap: 5px; color: var(--text-dim); font-size: 12px; font-weight: 600; white-space: nowrap; }
.fbp-st::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.fbp-st.is-new { color: #eb5757; }
.fbp-st.is-replied { color: var(--accent); }
.fbp-st.is-wait { color: var(--gold-soft-ink, #a8730c); }
.fbp-st.is-done { color: var(--green-ink); }
.fbp-pane { display: grid; gap: 14px; padding: 20px 22px; min-height: 420px; transition: opacity .15s; }
.fbp-pane.is-busy { opacity: .55; }
.fbp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.fbp-head h2 { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--text-strong); font-size: 17px; }
.fbp-head p { margin: 6px 0 0; color: var(--text-dim); font-size: 13px; }
.fbp-msgs { display: grid; align-content: start; gap: 14px; max-height: calc(100vh - 380px); min-height: 220px; padding: 16px; overflow-y: auto; border-radius: 16px; background: var(--bg-soft); }
.fbp-msg { display: flex; align-items: flex-end; gap: 10px; max-width: 82%; }
.fbp-msg.is-me { justify-self: end; flex-direction: row-reverse; text-align: right; }
.fbp-msg > div { display: grid; gap: 4px; }
.fbp-msg.is-me > div { justify-items: end; }
.fbp-who { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--bg-elevated); box-shadow: 0 1px 3px rgba(16, 24, 40, .1); }
.fbp-who svg { width: 24px; height: 24px; }
.fbp-bubble { padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: var(--bg-elevated); color: var(--text-strong); font-size: 14.5px; line-height: 1.65; text-align: left; overflow-wrap: anywhere; box-shadow: 0 1px 2px rgba(16, 24, 40, .06); }
.fbp-msg.is-me .fbp-bubble { border-radius: 16px 16px 4px 16px; background: var(--accent); color: #fff; }
.fbp-msg small { color: var(--text-dim); font-size: 12px; }
.fbp-wait { justify-self: center; margin: 4px 0 0; color: var(--text-dim); font-size: 12.5px; }
.fbp-compose { display: grid; gap: 8px; }
.fbp-compose textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-elevated); color: var(--text-strong); font: inherit; font-size: 14px; line-height: 1.6; resize: vertical; }
.fbp-compose textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.fbp-compose-row { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.fbp-compose-row > .att-box { flex: 1; }
.fbp-msg.is-me .att-show { justify-content: flex-end; }
.fbp-compose-row span { color: var(--text-dim); font-size: 12px; }
.fbp-out, .fbp-empty { display: grid; justify-items: center; gap: 6px; max-width: 560px; margin: 0 auto; padding: 36px 28px; text-align: center; }
.fbp-out > svg, .fbp-empty > svg { width: 36px; height: 36px; color: var(--accent); }
.fbp-out h2, .fbp-empty h2 { margin: 6px 0 0; color: var(--text-strong); font-size: 18px; }
.fbp-out p, .fbp-empty p { margin: 0; color: var(--text-muted); font-size: 14px; line-height: 1.7; }
.fbp-tips { padding: 10px 14px; border-radius: 12px; background: var(--bg-soft); font-size: 13px !important; }
.fbp-empty .btn { margin-top: 10px; }
.fbp-err { color: var(--red-ink); }
@media (max-width: 860px) {
  .fbp-desk { grid-template-columns: 1fr; }
  .fbp-list { max-height: 280px; }
  .fbp-msgs { max-height: 460px; }
  .fbp-msg { max-width: 92%; }
}

/* 手机上标题栏跟着字的高度走（2026-10-16）：插画在手机上不显示，原来还留着电脑上的 243px，
   字挤在下半截、上半截空着。留出底下波浪的位置。 */
@media (max-width: 760px) {
  .pg-band.has-scene, .pg-band.has-scene.pg-band-compact { min-height: 0; padding: 26px 0 48px; }
}

/* 成就页：标签下面的「奖杯室」一条（原来是独立的标题栏，2026-10-16 换成和我的数据一样的名字条） */
.tp-head { margin-bottom: 18px; }
.tp-head-figure { display: grid; justify-items: end; margin-left: auto; line-height: 1.15; }
.tp-head-figure b { color: var(--text-strong); font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tp-head-figure small { color: var(--text-dim); font-size: 12px; }

/* 测速标题栏：自由测速 | 打字高考（2026-10-16）。原来是两张大卡片，在标题栏里显得又大又挤；
   现在是一条半透明白底的小胶囊切换——短、只有一行，所以用胶囊。 */
.tt-modes { display: inline-flex; gap: 3px; margin-top: 14px; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.tt-modes a { display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 16px; border-radius: 999px; color: var(--text); font-size: 14px; font-weight: 700; text-decoration: none; transition: background .15s, color .15s; }
.tt-modes a small { color: var(--text-dim); font-size: 11.5px; font-weight: 500; }
.tt-modes a:hover { color: var(--text-strong); }
.tt-modes a[aria-current='page'] { background: var(--bg-elevated); color: var(--accent-ink); box-shadow: 0 1px 3px rgba(16, 24, 40, 0.12); }
html[data-theme='dark'] .tt-modes { background: rgba(20, 26, 38, 0.6); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }

/* 空状态统一成一种样子（2026-10-16，和 kit.css .ui-empty 一样）：图标放在淡蓝小方块里、
   一句粗体、一句灰字。原来 .empty 是一个很淡的大图标，测速走势是蓝色图标，两种样子。 */
.empty, .tr-empty { gap: 6px; font-size: 13px; }
.empty svg, .tr-empty svg { box-sizing: content-box; width: 20px; height: 20px; margin-bottom: 4px; padding: 10px; border-radius: 12px; background: var(--accent-tint); color: var(--accent); }
.empty b, .tr-empty b { color: var(--text-strong); font-size: 14.5px; }

/* 卡片里的胶囊不描边（2026-10-16，一条视线最多一层框）：淡灰填充，选中淡蓝底蓝字。
   测速的文章 / 词库、对战的比什么、好友的筛选、kit 的 .ui-chip 都是这一种。 */
.tt-pills button, .fr-chips button, .ui-chip { border-color: transparent; background: rgba(20, 20, 20, 0.05); }
.tt-pills button:hover, .fr-chips button:hover, .ui-chip:hover { border-color: transparent; background: rgba(20, 20, 20, 0.085); color: var(--text-strong); }
.tt-pills button[aria-pressed='true'], .fr-chips button[aria-pressed="true"], .ui-chip[aria-pressed='true'], .ui-chip.is-on { border-color: transparent; background: var(--accent-tint); color: var(--accent-ink); font-weight: var(--fw-semibold); }
html[data-theme='dark'] .tt-pills button, html[data-theme='dark'] .fr-chips button, html[data-theme='dark'] .ui-chip { background: rgba(255, 255, 255, 0.06); }
html[data-theme='dark'] .tt-pills button:hover, html[data-theme='dark'] .fr-chips button:hover, html[data-theme='dark'] .ui-chip:hover { background: rgba(255, 255, 255, 0.1); }
html[data-theme='dark'] .tt-pills button[aria-pressed='true'], html[data-theme='dark'] .fr-chips button[aria-pressed="true"], html[data-theme='dark'] .ui-chip[aria-pressed='true'] { background: var(--accent-tint); }

/* 我的数据的五个标签在手机上一行放不下：横着滑，字不折行（2026-10-16） */
@media (max-width: 560px) {
  .pf-tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .pf-tabs::-webkit-scrollbar { display: none; }
  .pf-tabs button, .pf-tabs a { flex: 0 0 auto; padding: 8px 12px; white-space: nowrap; }
}

/* 深色模式：名字条里「连续练习」那块跟着主题变深，字才看得清（原来白底配浅色字，2026-10-16） */
[data-theme='dark'] .pf-id .pf-id-streak { background: var(--bg-elevated); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35); }


/* ---------- 收藏与错题（notebook.html，会员，2026-10-18） ---------- */
.nb-status { margin-bottom: var(--ui-gap); }
.nb-note.is-member { background: var(--gold-soft); }
.nb-note .btn svg { width: 16px; height: 16px; }
.nb-book .ui-card-head { align-items: center; }
.nb-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 14px 0 6px; }
.nb-seg small { margin-left: 4px; color: var(--text-dim); font-weight: var(--fw-medium); }
.nb-add { display: flex; flex: 1 1 260px; gap: 8px; max-width: 380px; }
.nb-add .ct-input { flex: 1; min-width: 0; height: 34px; margin: 0; padding: 0 12px; font-size: 13.5px; }
.nb-list .ui-row-title { font-size: 16px; }
.nb-list .ui-row-title.is-en { font-family: var(--font-mono); letter-spacing: 0.01em; }
.nb-manual { margin-left: 4px; color: var(--text-dim); font-family: var(--font-sans, inherit); font-size: 11px; font-weight: var(--fw-medium); }
.nb-miss { flex: 0 0 auto; min-width: 44px; justify-content: center; }
.nb-when { flex: 0 0 auto; color: var(--text-dim); font-size: 12px; }
.nb-dots { display: inline-flex; flex: 0 0 auto; gap: 3px; }
.nb-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--bg-sunken); box-shadow: inset 0 0 0 1px var(--line); }
.nb-dots i.is-on { background: var(--green, #2f9e5b); box-shadow: none; }
.nb-del { display: grid; flex: 0 0 auto; width: 30px; height: 30px; place-items: center; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--text-dim); cursor: pointer; opacity: 0.55; }
.nb-del svg { width: 15px; height: 15px; }
.nb-del:hover, .nb-del:focus-visible { background: var(--red-soft); color: var(--red-ink); opacity: 1; }
.nb-row:hover .nb-del, .nb-fav:hover .nb-del { opacity: 1; }
.nb-more { margin: 10px 0 0; text-align: center; }
.nb-favlist .ui-row-main { color: inherit; text-decoration: none; }
.nb-favlist .ui-row-main:hover .ui-row-title { color: var(--accent-ink); }
.nb-pro { margin-top: 4px; padding: 2px 8px; border-radius: 6px; background: var(--gold-soft); color: var(--gold-soft-ink); font-size: 12px; font-weight: var(--fw-semibold); }
.nb-tips { display: grid; gap: 8px; margin: 12px 0 0; padding-left: 18px; color: var(--text); font-size: 13px; line-height: 1.55; }
@media (max-width: 640px) {
  .nb-when { display: none; }
  .nb-add { max-width: none; }
  .nb-book .ui-card-head { flex-wrap: wrap; }
}

/* ---- 名片：点头像弹出来（ui.js userCard，2026-10-21） ---------------------- */
[data-user] { cursor: pointer; }
[data-user]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.uc-card { position: fixed; z-index: 1200; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg-elevated); box-shadow: 0 18px 48px -12px rgba(16, 24, 40, .28); animation: uc-in .16s ease-out; }
.uc-card.is-center { left: 50%; top: 50%; transform: translate(-50%, -50%); animation: none; }
@keyframes uc-in { from { opacity: 0; transform: translateY(-4px); } }
.uc-loading { margin: 8px 0; color: var(--text-dim); font-size: 13px; text-align: center; }
.uc-head { display: flex; align-items: center; gap: 12px; }
.uc-av { flex: none; width: 48px; height: 48px; }
.uc-av .uc-avatar { width: 48px; height: 48px; border-radius: 50%; font-size: 20px; }
.uc-who { display: grid; gap: 2px; min-width: 0; flex: 1; }
.uc-who b { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--text-strong); font-size: 16px; }
.uc-who b > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uc-who small { color: var(--text-dim); font-size: 12px; font-variant-numeric: tabular-nums; }
.uc-rank { display: grid; justify-items: center; gap: 2px; flex: none; }
.uc-rank small { color: var(--text-muted); font-size: 11px; white-space: nowrap; }
.uc-x { align-self: flex-start; width: 26px; height: 26px; margin: -6px -6px 0 0; border: 0; border-radius: 8px; background: none; color: var(--text-dim); font-size: 18px; line-height: 1; cursor: pointer; }
.uc-x:hover { background: var(--bg-soft); color: var(--text-strong); }
.uc-bio { margin: 10px 0 0; color: var(--text-muted); font-size: 13px; line-height: 1.5; }
.uc-note { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--bg-soft); color: var(--text-muted); font-size: 13px; line-height: 1.5; }
.uc-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.uc-stats div { display: grid; gap: 2px; padding: 8px 4px; border-radius: 10px; background: var(--bg-soft); text-align: center; }
.uc-stats b { color: var(--text-strong); font: 700 17px/1.1 var(--font-mono); font-variant-numeric: tabular-nums; }
.uc-stats small { color: var(--text-dim); font-size: 11px; }
.uc-cups { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.uc-cups li { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px 3px 4px; border-radius: 999px; background: var(--bg-soft); color: var(--text-muted); font-size: 12px; }
.uc-cups li svg { width: 18px; height: 18px; }
.uc-games { display: grid; gap: 4px; margin: 10px 0 0; padding: 0; list-style: none; }
.uc-games li { display: flex; justify-content: space-between; color: var(--text-muted); font-size: 13px; }
.uc-games b { color: var(--text-strong); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.uc-acts { display: flex; gap: 8px; margin-top: 14px; }
.uc-acts .btn { flex: 1; justify-content: center; }
.uc-acts:empty { display: none; }
.lb-avbtn { display: flex; border-radius: 50%; }

/* ---- 头像框（server/src/frames.js；ui.js avatarHtml 写 class） --------------
   一圈白边隔开，外面两道颜色；会动的（赛季、星河）只在不减少动效时动。 */
.has-frame { --avf1: #c98b4f; --avf2: #e8c39a; box-shadow: 0 0 0 2px var(--bg-elevated), 0 0 0 4px var(--avf1), 0 0 0 6px var(--avf2); }
.avf-lv10 { --avf1: #a8683a; --avf2: #e2b48a; }
.avf-lv30 { --avf1: #8c97a6; --avf2: #dfe5ec; }
.avf-lv50 { --avf1: #d4a017; --avf2: #f7e08a; }
.avf-lv80 { --avf1: #1f9d6b; --avf2: #9fe5c4; }
.avf-lv100 { --avf1: #6f5cf0; --avf2: #4fc3f7; animation: avf-hue 6s linear infinite; }
.avf-rank-diamond { --avf1: #3aa0d8; --avf2: #b9e6ff; }
.avf-rank-master { --avf1: #8a3fd1; --avf2: #e0b6ff; }
.avf-rank-grandmaster { --avf1: #c0392b; --avf2: #ffb4a8; }
.avf-rank-king { --avf1: #b8860b; --avf2: #ffe27a; box-shadow: 0 0 0 2px var(--bg-elevated), 0 0 0 4px var(--avf1), 0 0 0 6px var(--avf2), 0 0 12px 2px rgba(255, 200, 60, .55); }
.avf-platinum { --avf1: #7d8fa3; --avf2: #f3f7fb; box-shadow: 0 0 0 2px var(--bg-elevated), 0 0 0 4px var(--avf1), 0 0 0 6px var(--avf2), 0 0 10px 1px rgba(160, 190, 220, .6); }
.avf-member { --avf1: #e0a91f; --avf2: #fff1bf; }
.avf-founder { --avf1: #1c1c1c; --avf2: #d9b45a; }
.avf-season { --avf1: #e0402f; --avf2: #ffd34d; animation: avf-glow 2.4s ease-in-out infinite; }
@keyframes avf-hue { 33% { box-shadow: 0 0 0 2px var(--bg-elevated), 0 0 0 4px #4fc3f7, 0 0 0 6px #b388ff; } 66% { box-shadow: 0 0 0 2px var(--bg-elevated), 0 0 0 4px #ff7ab6, 0 0 0 6px #6f5cf0; } }
@keyframes avf-glow { 50% { box-shadow: 0 0 0 2px var(--bg-elevated), 0 0 0 4px var(--avf1), 0 0 0 6px var(--avf2), 0 0 16px 4px rgba(255, 170, 60, .6); } }
@media (prefers-reduced-motion: reduce) { .avf-lv100, .avf-season { animation: none; } }

/* ---- 主页皮肤（frames.js SKINS；只换生涯页顶上那一块） ---------------------- */
.cr-hero.skin-dawn { background: radial-gradient(520px 220px at 12% 0%, rgba(255, 236, 190, .45), transparent 70%), linear-gradient(120deg, #f08a5d, #e8607a 55%, #9b59b6); }
.cr-hero.skin-meadow { background: radial-gradient(520px 220px at 12% 0%, rgba(220, 255, 200, .4), transparent 70%), linear-gradient(120deg, #2e8b57, #3aa17e 55%, #2f7a8c); }
.cr-hero.skin-ocean { background: radial-gradient(520px 220px at 12% 0%, rgba(150, 230, 255, .4), transparent 70%), linear-gradient(120deg, #0b3d6b, #1565a8 55%, #0e8fa8); }
.cr-hero.skin-sakura { background: radial-gradient(520px 220px at 12% 0%, rgba(255, 255, 255, .45), transparent 70%), linear-gradient(120deg, #e57399, #f19cbb 55%, #c27ac9); }
.cr-hero.skin-ink { background: radial-gradient(520px 220px at 80% 0%, rgba(255, 255, 255, .18), transparent 70%), linear-gradient(120deg, #2b2b2b, #4a4a48 55%, #6b6a63); }
.cr-hero.skin-gold { background: radial-gradient(520px 220px at 12% 0%, rgba(255, 240, 180, .45), transparent 70%), linear-gradient(120deg, #3b2a05, #8a6512 50%, #d4a72c); }
.cr-hero.skin-galaxy { background: radial-gradient(2px 2px at 20% 30%, #fff, transparent), radial-gradient(1.5px 1.5px at 70% 60%, #fff, transparent), radial-gradient(1.5px 1.5px at 45% 80%, #fff, transparent), radial-gradient(600px 260px at 70% 10%, rgba(140, 90, 255, .5), transparent 70%), linear-gradient(120deg, #0a0a2a, #1d1450 55%, #3a1a5e); }

/* ---- 展示柜 ---------------------------------------------------------------- */
.cr-show { margin-top: 14px; padding: 16px 18px; border: 1px solid var(--line-soft); border-radius: var(--radius-card); background: var(--bg-elevated); }
.cr-show h2 { display: flex; align-items: center; justify-content: space-between; margin: 0 0 10px; font-size: 15px; }
.cr-show ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.cr-show li { display: grid; justify-items: center; gap: 4px; padding: 14px 8px 12px; border-radius: 14px; background: var(--bg-soft); text-align: center; }
.cr-show li svg { width: 40px; height: 40px; }
.cr-show li b { color: var(--text-strong); font-size: 13.5px; }
.cr-show li small { color: var(--text-dim); font-size: 11.5px; }
.cr-show.is-empty { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--text-muted); font-size: 13px; }
.cr-show.is-empty span { display: inline-flex; align-items: center; gap: 8px; }
.cr-show.is-empty svg { width: 18px; height: 18px; }

/* ---- 装扮主页（career.js openLooks） ---------------------------------------- */
.lk-box { width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto; padding: 20px; }
.lk-loading { margin: 20px 0; color: var(--text-dim); text-align: center; }
.lk-tabs { margin: 4px 0 14px; }
.lk-note { margin: 10px 0 0; color: var(--text-dim); font-size: 12.5px; line-height: 1.5; }
.lk-frames, .lk-skins { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.lk-frame, .lk-skin, .lk-badge { position: relative; display: grid; justify-items: center; gap: 4px; padding: 14px 8px 10px; border: 1px solid var(--line-soft); border-radius: 14px; background: var(--bg-elevated); color: var(--text-muted); font: inherit; cursor: pointer; text-align: center; }
.lk-frame:hover:not(:disabled), .lk-skin:hover:not(:disabled), .lk-badge:hover { border-color: var(--line); background: var(--bg-soft); }
.lk-frame.is-on, .lk-skin.is-on, .lk-badge.is-on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-tint); }
.lk-frame.is-locked, .lk-skin.is-locked { cursor: default; opacity: .55; }
.lk-frame b, .lk-skin b { color: var(--text-strong); font-size: 13px; }
.lk-frame b em { margin-left: 4px; padding: 0 5px; border-radius: 6px; background: var(--red-soft); color: var(--red-ink); font-size: 10.5px; font-style: normal; }
.lk-frame small, .lk-skin small { font-size: 11px; color: var(--text-dim); }
.lk-frame-av { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 4px; }
.lk-av { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #e8f0ff; color: #2a3f8a; font-size: 18px; font-weight: 800; }
.lk-swatch.cr-hero { display: block; width: 100%; height: 46px; padding: 0; border-radius: 10px; box-shadow: none; }
.lk-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; margin-top: 10px; }
.lk-badge { grid-template-columns: auto 1fr; justify-items: start; align-items: center; padding: 8px 10px; text-align: left; }
.lk-badge svg { width: 26px; height: 26px; }
.lk-badge span { display: grid; min-width: 0; }
.lk-badge b { overflow: hidden; color: var(--text-strong); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.lk-badge small { color: var(--text-dim); font-size: 11px; }
.lk-badge em { position: absolute; top: 6px; right: 8px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 11px; font-style: normal; }

/* ---- 班级（class.html，教学版第①步） ---------------------------------------- */
.kl-wrap { display: grid; gap: 16px; }
.kl-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.kl-err { margin: 8px 0 0; color: var(--red-ink); font-size: 13px; }
.kl-dim { color: var(--text-dim); font-size: 12.5px; }
.kl-codebox h2, .kl-teacher h2, .kl-create h2, .kl-howto h2, .kl-me h2 { margin: 0 0 6px; font-size: 18px; }
.kl-codebox p, .kl-me p { color: var(--text-muted); font-size: 13.5px; }
.kl-codeform { display: flex; gap: 8px; margin-top: 12px; }
.kl-codeform input { flex: 1; min-width: 0; height: 52px; padding: 0 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-elevated); color: var(--text-strong); font: 700 24px/1 var(--font-mono); letter-spacing: .18em; text-transform: uppercase; }
.kl-codeform .btn { height: 52px; padding: 0 22px; }
.kl-teacher .ticks { display: grid; gap: 8px; margin: 10px 0 16px; padding: 0; list-style: none; color: var(--text-muted); font-size: 14px; }
.kl-teacher .ticks li { display: flex; gap: 8px; align-items: flex-start; }
.kl-teacher .ticks svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--green, #1f9d55); }
.kl-create input:not([type=checkbox]), .kl-create textarea, .kl-settings input:not([type=checkbox]), .fb-box input:not([type=checkbox]) { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-elevated); color: var(--text-strong); font: inherit; }
.kl-create textarea, #clAddNames { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font: inherit; resize: vertical; }
.kl-howto ol { display: grid; gap: 10px; margin: 10px 0 0; padding-left: 20px; color: var(--text-muted); font-size: 14px; line-height: 1.6; }
.kl-check { display: flex; align-items: flex-start; gap: 8px; margin: 4px 0 14px; color: var(--text-muted); font-size: 14px; line-height: 1.5; cursor: pointer; }
.kl-check input { flex: none; margin: 3px 0 0; }
.kl-check span { flex: 1; min-width: 0; }
.kl-danger { color: var(--red-ink); }
/* 学生进班 */
.kl-join { display: grid; gap: 16px; }
.kl-join-head { display: grid; justify-items: start; gap: 4px; }
.kl-join-head h2 { margin: 0; font-size: 22px; }
.kl-join-head small { color: var(--text-dim); }
.kl-kids { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.kl-kid { position: relative; display: grid; justify-items: center; gap: 4px; padding: 16px 8px 12px; border: 1px solid var(--line-soft); border-radius: 14px; background: var(--bg-elevated); color: var(--text-strong); font: inherit; cursor: pointer; }
.kl-kid:hover { border-color: var(--line); background: var(--bg-soft); }
.kl-kid.is-on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.kl-kid b { font-size: 16px; }
.kl-kid small { color: var(--accent); font-size: 11.5px; }
.kl-seat { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--bg-soft); color: var(--text-muted); font: 700 13px/1 var(--font-mono); }
.kl-pin { display: grid; justify-items: center; gap: 8px; max-width: 420px; margin: 0 auto; text-align: center; }
.kl-pin h3 { margin: 0; font-size: 18px; }
.kl-pin p { margin: 0; color: var(--text-muted); font-size: 13.5px; }
.kl-pin input { width: 180px; height: 56px; border: 1px solid var(--line); border-radius: 12px; text-align: center; font: 700 30px/1 var(--font-mono); letter-spacing: .5em; padding-left: .5em; }
.kl-new summary { cursor: pointer; color: var(--text-muted); font-size: 13.5px; }
.kl-newform { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.kl-newform input { flex: 1 1 160px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font: inherit; }
/* 老师：一个班 */
.kl-tabs { margin-bottom: 4px; }
.kl-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.kl-head h2 { margin: 0; font-size: 22px; }
.kl-head small { color: var(--text-dim); }
.kl-code { display: flex; align-items: baseline; gap: 10px; margin-top: 10px; }
.kl-code span { color: var(--text-dim); font-size: 13px; }
.kl-code b { color: var(--text-strong); font: 800 34px/1 var(--font-mono); letter-spacing: .14em; }
.kl-link { margin: 6px 0 0; color: var(--text-muted); font-size: 13.5px; }
.kl-head-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.kl-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kl-table-wrap { overflow-x: auto; }
.kl-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.kl-table th { padding: 8px 10px; border-bottom: 1px solid var(--line); color: var(--text-dim); font-size: 12px; font-weight: 600; text-align: left; white-space: nowrap; }
.kl-table th small { margin-left: 3px; font-weight: 400; }
.kl-table th.kl-n { text-align: right; }
.kl-head-main h2 .pro-pill, .kl-head-main h2 .kl-free, .kl-me h2 .pro-pill { margin-left: 10px; vertical-align: 0.25em; }
.kl-free { font-size: 12px; font-weight: 600; }
.kl-table td { padding: 9px 10px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
.kl-table td a { color: var(--text-strong); font-weight: 600; }
.kl-table .kl-n { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }
.kl-table tr:hover td { background: var(--bg-soft); }
.kl-acts { display: flex; gap: 10px; justify-content: flex-end; }
.kl-foot { margin: 10px 0 0; color: var(--text-dim); font-size: 12.5px; }
/* 投到大屏 */
.kl-screen { position: fixed; inset: 0; z-index: 2000; display: grid; place-content: center; justify-items: center; gap: 18px; padding: 40px; background: #0f1a3a; color: #fff; text-align: center; }
.kl-screen-x { position: absolute; top: 20px; right: 24px; width: 44px; height: 44px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .12); color: #fff; font-size: 26px; cursor: pointer; }
.kl-screen-name { margin: 0; font-size: clamp(22px, 3vw, 40px); font-weight: 700; opacity: .85; }
.kl-screen-code { margin: 0; font: 800 clamp(80px, 16vw, 220px)/1 var(--font-mono); letter-spacing: .12em; color: #ffd34d; }
.kl-screen ol { display: grid; gap: 8px; margin: 0; padding: 0; list-style-position: inside; font-size: clamp(18px, 2.2vw, 30px); text-align: left; }
.kl-screen ol b { color: #9fd3ff; }
.kl-screen-tip { margin: 0; opacity: .6; font-size: clamp(14px, 1.4vw, 20px); }
@media (max-width: 860px) { .kl-split { grid-template-columns: minmax(0, 1fr); } .kl-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 顶栏「班级」进来、还没建班：学生输班级码的一行 */
.kl-pick { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-bottom: 16px; }
.kl-pick > div { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; flex: 1 1 320px; min-width: 0; }
.kl-pick .kl-codeform { flex: 0 1 360px; }
/* 第③步：教师会员卡（免费版）、开通后的一行 */
.kl-plan { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; }
.kl-plan-main { flex: 1 1 360px; min-width: 0; }
.kl-plan-price { margin-left: 8px; color: var(--gold-ink, #9a6a10); font-size: 14px; font-weight: 700; }
.kl-plan-list { display: grid; gap: 6px; margin: 10px 0; padding: 0; list-style: none; font-size: 14px; }
.kl-plan-list li { display: flex; gap: 8px; align-items: flex-start; }
.kl-plan-list svg, .kl-plan-on svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--good, #2e8a4f); }
.kl-plan-list p, .kl-plan .kl-dim { margin: 0; font-size: 13px; }
.kl-plan-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.kl-plan-on { display: flex; gap: 8px; align-items: flex-start; margin: -4px 2px 0; color: var(--text-muted); font-size: 13.5px; }
.kl-plan-on b { color: var(--text-strong); }
/* 第②步：现在在做什么、任务、班级榜 */
.kl-now { white-space: nowrap; }
.kl-doing { color: var(--text-muted); font-size: 12.5px; }
.kl-taskcard .ui-card-head, .kl-board .ui-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.kl-board .ui-card-title small { margin-left: 8px; color: var(--text-dim); font-size: 12px; font-weight: 400; }
.kl-none { margin: 6px 0 0; }
.kl-tasks { display: grid; gap: 14px; margin: 6px 0 0; padding: 0; list-style: none; }
.kl-task-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.kl-task-top b { display: inline-flex; align-items: center; gap: 6px; color: var(--text-strong); font-size: 14.5px; }
.kl-task-top b svg { width: 18px; height: 18px; color: var(--green, #1f9d55); }
.kl-task-top .lv-link, .kl-task-top .btn, .kl-task-top .ui-tag { margin-left: auto; }
.kl-bar { height: 8px; margin: 8px 0 6px; border-radius: 999px; background: var(--bg-soft); overflow: hidden; }
.kl-bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.kl-tasks li.is-done .kl-bar i { background: var(--green, #1f9d55); }
.kl-task-n { margin: 0; color: var(--text-muted); font-size: 13px; }
.kl-inline { display: flex; align-items: center; gap: 8px; }
.kl-inline input, .kl-inline select, #clTaskPack { padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-elevated); color: var(--text-strong); font: inherit; }
.kl-inline input { width: 100px; }
#clTaskPack { width: 100%; }
.kl-board-list { display: grid; gap: 2px; margin: 6px 0 0; padding: 0; list-style: none; }
.kl-board-list li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 10px; }
.kl-board-list li.is-me { background: var(--accent-tint); }
.kl-board-list b { overflow: hidden; color: var(--text-strong); text-overflow: ellipsis; white-space: nowrap; }
.kl-board-v { color: var(--text-strong); font: 700 15px/1 var(--font-mono); white-space: nowrap; }
.kl-board-v small { margin-left: 3px; color: var(--text-dim); font: 400 11px/1 var(--font-sans, inherit); }
.kl-me h2 small { margin-left: 10px; color: var(--text-dim); font-size: 13px; font-weight: 400; }
.kl-pick .kl-codeform { margin-top: 0; }
.kl-pick .kl-codeform input { height: 44px; font-size: 18px; letter-spacing: .12em; }
.kl-pick .kl-codeform input::placeholder { font: 500 14px/1 var(--font-sans, inherit); letter-spacing: 0; text-transform: none; }
.kl-pick .kl-codeform .btn { height: 44px; }
/* 会员页 · 教师会员（教学版，2026-10-21）：蓝绿色，和班级会员标一个颜色 */
.mb-teacher-jump { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 7px 14px 7px 7px; border-radius: 999px; background: #e3f7f2; color: #17695d; font-size: 13.5px; font-weight: 700; text-decoration: none; box-shadow: inset 0 0 0 1px rgba(31, 138, 122, .25); }
.mb-teacher-jump:hover { background: #d3f1e9; }
.mb-teacher-jump-tag { padding: 2px 9px; border-radius: 999px; background: #1f8a7a; color: #fff; font-size: 12px; }
.mb-teacher { background: linear-gradient(180deg, #f1fbf8, transparent 70%); }
.mb-teacher-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; align-items: center; }
.mb-teacher h2 { margin: 6px 0 12px; font-size: clamp(26px, 3vw, 36px); line-height: 1.2; }
.mb-teacher h2 em { font-style: normal; color: #1f8a7a; }
.mb-teacher .kicker span { color: #1f8a7a; }
.mb-teacher-lead { margin: 0 0 16px; color: var(--text-muted); font-size: 15.5px; line-height: 1.7; }
.mb-teacher-lead b { color: #17695d; font-size: 18px; }
.mb-teacher-list { display: grid; gap: 10px; margin: 0 0 20px; padding: 0; list-style: none; }
.mb-teacher-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.55; color: var(--text-muted); }
.mb-teacher-list li b { display: block; color: var(--text-strong); font-size: 15px; }
.mb-teacher-list svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: #1f8a7a; }
.mb-teacher-acts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.mb-teacher-on { display: inline-flex; align-items: center; gap: 6px; color: #17695d; font-size: 14px; font-weight: 700; }
.mb-teacher-on svg { width: 16px; height: 16px; }
.mb-teacher-on .pro-pill { margin-left: 0; }
.mb-teacher-note { margin: 14px 0 0; color: var(--text-dim); font-size: 13px; }
.mb-tdemo { padding: 20px 22px; border-radius: 20px; background: var(--bg-elevated); border: 1px solid var(--line); box-shadow: 0 30px 60px -36px rgba(20, 90, 80, .45); }
.mb-tdemo-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); }
.mb-tdemo-head b { font-size: 17px; color: var(--text-strong); }
.mb-tdemo-head > span:last-child { margin-left: auto; color: var(--text-dim); font-size: 12.5px; }
.mb-tdemo-head code { color: var(--text-strong); font: 800 14px var(--font-mono); letter-spacing: .1em; }
.mb-tdemo ul { margin: 6px 0 0; padding: 0; list-style: none; }
.mb-tdemo li { display: flex; align-items: center; gap: 6px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px; }
.mb-tdemo li > b { color: var(--text-strong); }
.mb-tdemo-seat { width: 22px; color: var(--text-dim); font: 600 12px var(--font-mono); text-align: right; margin-right: 6px; }
.mb-tdemo-now { margin-left: auto; padding: 2px 8px; border-radius: 999px; background: #e3f5ea; color: #2e8a4f; font-size: 12px; font-weight: 600; }
.mb-tdemo-now.is-dim { background: transparent; color: var(--text-dim); font-weight: 400; }
.mb-tdemo-min { width: 64px; text-align: right; font: 700 14px var(--font-mono); color: var(--text-strong); }
.mb-tdemo-min small { color: var(--text-dim); font: 400 11px var(--font-sans, inherit); }
.mb-tdemo p { margin: 12px 0 0; color: var(--text-dim); font-size: 12.5px; text-align: center; }
.mb-tdemo p b { color: #17695d; }
@media (max-width: 860px) { .mb-teacher-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; } }
/* 班级页（10-21 晚）：名单工具条、排序表头、第一节课清单、学生侧边栏、学生自己的数 */
.kl-rbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 12px; }
.kl-rbar .ui-card-title { margin: 0; }
.kl-filters small { margin-left: 3px; color: var(--text-dim); font-weight: 500; }
.kl-search { flex: 0 1 200px; min-width: 140px; height: 34px; margin-left: auto; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-elevated); color: var(--text-strong); font-size: 13.5px; }
.kl-search:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.kl-table th.kl-sortable { padding: 0; }
.kl-table th.kl-sortable button { display: inline-flex; align-items: baseline; gap: 2px; width: 100%; padding: 8px 10px; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; white-space: nowrap; }
.kl-table th.kl-n.kl-sortable button { justify-content: flex-end; }
.kl-table th.kl-sortable button:hover, .kl-table th.is-on button { color: var(--text-strong); }
.kl-table th.kl-sortable i { display: inline-block; width: 10px; font-style: normal; font-size: 9px; color: var(--accent); }
.kl-name { padding: 0; border: 0; background: none; color: var(--text-strong); font: inherit; font-weight: 700; cursor: pointer; }
.kl-name:hover { color: var(--accent); text-decoration: underline; }
.kl-none-row { padding: 22px 10px !important; color: var(--text-dim); text-align: center; }
.kl-check-card .ui-card-title small { margin-left: 8px; color: var(--text-dim); font-size: 12px; font-weight: 400; }
.kl-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 8px 0 0; padding: 0; list-style: none; }
.kl-steps li { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 14px; background: var(--bg-soft); }
.kl-steps li > div { display: flex; flex-direction: column; gap: 3px; }
.kl-steps li b { color: var(--text-strong); font-size: 14.5px; }
.kl-steps li > div span { color: var(--text-muted); font-size: 12.5px; line-height: 1.5; }
.kl-steps .lv-link { align-self: flex-start; margin-top: auto; }
.kl-step-n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--bg-elevated); color: var(--text-strong); font: 800 13px var(--font-mono); box-shadow: inset 0 0 0 1.5px var(--line); }
.kl-steps li.is-done { background: #e3f7f2; }
.kl-steps li.is-done .kl-step-n { background: #1f8a7a; color: #fff; box-shadow: none; }
.kl-steps li.is-done .kl-step-n svg { width: 14px; height: 14px; }
.kl-steps li.is-done b { color: #17695d; }
@media (max-width: 860px) { .kl-steps { grid-template-columns: 1fr 1fr; } }
.kl-drawer-veil { position: fixed; inset: 0; z-index: 1500; background: rgba(15, 22, 35, 0); transition: background .2s; }
.kl-drawer-veil.is-open { background: rgba(15, 22, 35, .32); }
.kl-drawer { position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100%); overflow-y: auto; background: var(--bg-elevated); box-shadow: -20px 0 50px -30px rgba(0, 0, 0, .5); transform: translateX(100%); transition: transform .2s ease; }
.kl-drawer-veil.is-open .kl-drawer { transform: none; }
.kl-drawer-body { padding: 22px 24px 28px; }
.kl-drawer-head { display: flex; gap: 12px; align-items: flex-start; }
.kl-drawer-head h3 { margin: 0; font-size: 20px; color: var(--text-strong); }
.kl-drawer-head p { margin: 4px 0 0; color: var(--text-dim); font-size: 13px; }
.kl-drawer-seat { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 12px; background: #e3f7f2; color: #17695d; font: 800 17px var(--font-mono); }
.kl-drawer-x { margin-left: auto; width: 34px; height: 34px; border: 0; border-radius: 10px; background: var(--bg-soft); color: var(--text-muted); font-size: 20px; cursor: pointer; }
.kl-dstats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 18px 0 6px; }
.kl-dstats div { padding: 10px; border-radius: 12px; background: var(--bg-soft); text-align: center; }
.kl-dstats b { display: block; color: var(--text-strong); font: 800 19px var(--font-mono); }
.kl-dstats span { color: var(--text-dim); font-size: 11.5px; }
.kl-drawer h4 { margin: 20px 0 8px; color: var(--text-strong); font-size: 14px; }
.kl-drawer h4 small { margin-left: 6px; color: var(--text-dim); font-weight: 400; }
.kl-bars { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 4px; height: 96px; align-items: end; }
.kl-bar-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.kl-bar-col i { width: 100%; max-width: 18px; border-radius: 5px 5px 2px 2px; background: linear-gradient(#5fd0bb, #1f8a7a); }
.kl-bar-col i.is-zero { background: var(--line); }
.kl-bar-col span { height: 12px; color: var(--text-dim); font-size: 10.5px; }
.kl-runs, .kl-packs, .kl-dtasks { margin: 0; padding: 0; list-style: none; }
.kl-runs li { display: grid; grid-template-columns: minmax(0, 1fr) auto 44px 70px; gap: 8px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.kl-runs li span { overflow: hidden; color: var(--text-muted); text-overflow: ellipsis; white-space: nowrap; }
.kl-runs li b { color: var(--text-strong); font-family: var(--font-mono); }
.kl-runs li b small { color: var(--text-dim); font: 400 11px var(--font-sans, inherit); }
.kl-runs li em { color: var(--text-dim); font-style: normal; text-align: right; }
.kl-runs li time { color: var(--text-dim); font-size: 12px; text-align: right; }
.kl-packs li { display: grid; grid-template-columns: minmax(0, 1fr) 90px 56px; gap: 10px; align-items: center; padding: 6px 0; font-size: 13px; }
.kl-packs li span { overflow: hidden; color: var(--text-muted); text-overflow: ellipsis; white-space: nowrap; }
.kl-packs li b { color: var(--text-strong); font: 700 12.5px var(--font-mono); text-align: right; }
.kl-packs .kl-bar { margin: 0; }
.kl-dtasks li { display: flex; gap: 8px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px; color: var(--text-muted); }
.kl-dtasks li > i { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line); }
.kl-dtasks li svg { width: 16px; height: 16px; color: #2e8a4f; }
.kl-dtasks li b { margin-left: auto; color: var(--text-strong); font: 700 12.5px var(--font-mono); }
.kl-dtasks li.is-done b { color: #2e8a4f; }
.kl-drawer-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.kl-mine { margin: 0 0 16px; }
.kl-rank b { font-size: inherit; }
.kl-board-list li.is-me { border-radius: 10px; background: #e3f7f2; }
.kl-board-list li.kl-you { margin-top: 6px; border-top: 1px dashed var(--line); }
.kl-rbar .kl-filters { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.kl-rbar .kl-filters::-webkit-scrollbar { display: none; }
@media (max-width: 640px) {
  .kl-search { flex: 1 1 100%; margin-left: 0; }
  .kl-dstats { grid-template-columns: 1fr 1fr; }
  .kl-drawer-body { padding: 18px 16px 24px; }
}
.kl-steps .lv-link { color: var(--accent); font-weight: 700; }
/* 普通账号加入班级（10-21 晚） */
.kl-acc { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin: 0 0 16px; border: 1.5px solid #bfe6dc; background: #f1fbf8; }
.kl-acc > div { display: flex; flex-direction: column; gap: 4px; flex: 1 1 320px; min-width: 0; }
.kl-acc b { color: var(--text-strong); font-size: 16px; }
.kl-acc span { color: var(--text-muted); font-size: 13.5px; line-height: 1.55; }
.kl-acc.is-in { border-color: #9fd8c6; }
.kl-acc-hint, .kl-acc-or { margin: 0 0 14px; color: var(--text-muted); font-size: 13.5px; }
.kl-acc-hint a { font-weight: 700; }
.kl-acct { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 6px; background: var(--bg-soft); color: var(--text-dim); font-size: 11px; font-weight: 600; line-height: 18px; vertical-align: 1px; }
.kl-pending ul { margin: 6px 0 0; padding: 0; list-style: none; }
.kl-pending li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.kl-pending li b { color: var(--text-strong); }
.kl-pending .ui-card-title small { margin-left: 8px; color: var(--text-dim); font-size: 12px; font-weight: 400; }
.kl-joined-too, .kl-teach-too { margin: 0 0 14px; color: var(--text-muted); font-size: 13.5px; }
.kl-joined-too a { font-weight: 700; }
.kl-teach-too { margin-top: 16px; text-align: center; }
.kl-me-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kl-blocked { margin: 0 0 16px; }
/* 会员页：两种会员、三种标、对比表的班级会员列（10-21 晚） */
.mb-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.mb-plan { display: flex; flex-direction: column; gap: 14px; padding: 24px 26px; border-radius: 22px; background: var(--bg-elevated); border: 1px solid var(--line); box-shadow: 0 24px 50px -36px rgba(120, 90, 20, .5); }
.mb-plan.is-teacher { background: linear-gradient(180deg, #f1fbf8, var(--bg-elevated) 60%); border-color: #bfe6dc; box-shadow: 0 24px 50px -36px rgba(20, 100, 85, .5); }
.mb-plan header h3 { margin: 6px 0 2px; font-size: 24px; color: var(--text-strong); }
.mb-plan header p { margin: 0; color: var(--text-dim); font-size: 13.5px; }
.mb-plan-tag { display: inline-block; padding: 2px 10px; border-radius: 999px; background: #fff1c4; color: #8a5a00; font-size: 12px; font-weight: 800; }
.is-teacher .mb-plan-tag { background: #1f8a7a; color: #fff; }
.mb-plan-price { display: flex; align-items: baseline; gap: 10px; }
.mb-plan-price b { font: 800 40px/1 var(--font-sans, inherit); letter-spacing: -1px; color: var(--text-strong); }
.is-teacher .mb-plan-price b { color: #17695d; }
.mb-plan-price span { color: var(--text-dim); font-size: 13.5px; }
.mb-plan ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mb-plan li { display: flex; gap: 8px; align-items: flex-start; color: var(--text-muted); font-size: 14.5px; line-height: 1.5; }
.mb-plan li svg { flex: none; width: 17px; height: 17px; margin-top: 2px; color: #c9961a; }
.is-teacher li svg { color: #1f8a7a; }
.mb-plan li b { color: #17695d; }
.mb-plan-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 4px; }
.mb-plan-on { display: inline-flex; align-items: center; gap: 6px; color: #8a5a00; font-weight: 700; font-size: 14px; }
.mb-plan-on svg { width: 16px; height: 16px; }
.mb-kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.mb-kinds > div { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--bg-soft); font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.mb-kinds .pro-badge { flex: none; width: 22px; height: 22px; margin: 0; }
.mb-kinds b { display: block; color: var(--text-strong); font-size: 14px; }
.mb-compare .is-class { background: rgba(60, 191, 168, .08); color: #17695d; font-weight: var(--fw-semibold); }
.mb-compare .is-class.is-same { color: var(--text-muted); font-weight: 400; }
.mb-compare thead .is-class { color: #17695d; }
.mb-compare thead small { display: block; color: var(--text-dim); font-size: 11px; font-weight: 400; }
@media (max-width: 860px) { .mb-plans, .mb-kinds { grid-template-columns: minmax(0, 1fr); } }
.kl-redeem { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 1 1 100%; padding-top: 12px; border-top: 1px dashed var(--line); }
.kl-redeem label { color: var(--text-muted); font-size: 13px; font-weight: 600; }
.kl-redeem input { flex: 0 1 240px; min-width: 0; height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg-elevated); color: var(--text-strong); font: 600 13.5px var(--font-mono); letter-spacing: .04em; }
.kl-redeem .kl-err { flex: 1 1 100%; margin: 0; }

/* ================================================================ 班级页重做（10-22）
   老师：左边班级列表 + 右边（班级头、标签、内容）；学生：一张大的「我」卡。颜色和班级插画一样，蓝绿色。 */
.kl-shell { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 20px; align-items: start; }
.kl-main { display: grid; gap: 16px; min-width: 0; }
.kl-side { position: sticky; top: calc(var(--nav-h, 64px) + 16px); display: grid; gap: 10px; padding: 16px; border-radius: 18px; background: var(--bg-elevated); border: 1px solid var(--line); }
.kl-side h3 { margin: 2px 4px 2px; color: var(--text-dim); font-size: 12px; font-weight: 700; letter-spacing: .08em; }
.kl-side ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.kl-side-item { display: grid; gap: 2px; width: 100%; padding: 10px 12px; border: 0; border-radius: 12px; background: none; color: var(--text-strong); text-align: left; cursor: pointer; }
.kl-side-item b { overflow: hidden; font-size: 14.5px; text-overflow: ellipsis; white-space: nowrap; }
.kl-side-item small { color: var(--text-dim); font-size: 12px; }
.kl-side-item:hover { background: var(--bg-soft); }
.kl-side-item.is-on { background: #e3f7f2; box-shadow: inset 0 0 0 1.5px #9fd8c6; }
.kl-side-item.is-on b { color: #14665a; }
.kl-dot { display: inline-block; width: 7px; height: 7px; margin: 0 4px 1px 0; border-radius: 50%; background: #2e8a4f; vertical-align: middle; }
.kl-side-new { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px; border: 1.5px dashed var(--line); border-radius: 12px; background: none; color: var(--text-muted); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.kl-side-new:hover { border-color: #3cbfa8; color: #14665a; }
.kl-side-new svg { width: 15px; height: 15px; }
.kl-side-plan { display: grid; gap: 6px; padding: 12px; border-radius: 12px; background: var(--bg-soft); font-size: 12.5px; color: var(--text-muted); }
.kl-side-plan.is-on { background: #f1fbf8; }
.kl-side-plan-t { display: flex; align-items: center; gap: 6px; color: var(--text-strong); font-size: 13.5px; font-weight: 800; }
.kl-side-plan-t svg { width: 15px; height: 15px; color: #1f8a7a; }
.kl-side-plan b { color: var(--text-strong); }
.kl-side-plan .lv-link { justify-self: start; color: #14665a; font-weight: 700; }
.kl-seatbar { height: 6px; border-radius: 99px; background: #d5efe8; overflow: hidden; }
.kl-seatbar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #5fd0bb, #1f8a7a); }
.kl-side-joined { display: grid; gap: 4px; padding: 4px 4px 0; font-size: 13px; }
.kl-side-joined small { color: var(--text-dim); font-size: 12px; font-weight: 700; }
.kl-side-joined a { font-weight: 600; }

.kl-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 24px; align-items: center; padding: 22px 24px; }
.kl-hero-l { min-width: 0; }
.kl-hero-school { margin: 0 0 2px; color: var(--text-dim); font-size: 13px; }
.kl-hero h2 { margin: 0; color: var(--text-strong); font-size: 26px; line-height: 1.25; }
.kl-hero-code { display: grid; justify-items: end; gap: 2px; padding: 10px 16px; border-radius: 14px; background: #f1fbf8; }
.kl-hero-code span { color: var(--text-dim); font-size: 12px; }
.kl-hero-code b { color: var(--text-strong); font: 800 32px/1 var(--font-mono); letter-spacing: .14em; }
.kl-hero-code small { color: var(--text-muted); font-size: 12px; }
.kl-hero-acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.kl-hero-acts .btn svg { width: 16px; height: 16px; margin-right: 6px; }
.kl-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 10px 0 0; color: var(--text-muted); font-size: 13.5px; line-height: 1.5; }
.kl-status svg { flex: none; width: 15px; height: 15px; }
.kl-status.is-on { color: #14665a; font-weight: 600; }
.kl-status.is-on span { padding: 1px 9px; border-radius: 99px; background: #e3f7f2; font-size: 12.5px; font-weight: 700; }
.kl-status.is-bad { color: var(--red-ink, #b3261e); }
.kl-status .lv-link { color: #14665a; font-weight: 700; }

.kl-tabbar { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--bg-soft); overflow-x: auto; scrollbar-width: none; }
.kl-tabbar::-webkit-scrollbar { display: none; }
.kl-tabbar button { position: relative; flex: 1 0 auto; padding: 9px 16px; border: 0; border-radius: 10px; background: none; color: var(--text-muted); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.kl-tabbar button small { margin-left: 5px; color: var(--text-dim); font-size: 12px; font-weight: 600; }
.kl-tabbar button[aria-selected="true"] { background: var(--bg-elevated); color: #14665a; box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 4px 12px -6px rgba(20, 100, 85, .3); }
.kl-tab-dot { display: inline-block; width: 7px; height: 7px; margin-left: 4px; border-radius: 50%; background: #e2457a; vertical-align: 2px; }
.kl-tabbody { display: grid; gap: 16px; }

.kl-live-stats { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 12px; }
.kl-live-stats > div { display: grid; gap: 4px; padding: 16px 18px; border-radius: 16px; background: var(--bg-elevated); border: 1px solid var(--line); }
.kl-live-stats > div.is-hero { background: linear-gradient(135deg, #e3f7f2, #f6fdfb); border-color: #bfe6dc; }
.kl-live-stats b { color: var(--text-strong); font: 800 30px/1 var(--font-sans, inherit); font-variant-numeric: tabular-nums; }
.kl-live-stats .is-hero b { color: #14665a; font-size: 38px; }
.kl-live-stats b small { margin-left: 4px; color: var(--text-dim); font-size: 13px; font-weight: 600; }
.kl-live-stats span { color: var(--text-muted); font-size: 13px; }
.kl-live-stats span small { color: var(--text-dim); font-size: 12.5px; }
.kl-seats .ui-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.kl-seats .ui-card-title small { margin-left: 8px; color: var(--text-dim); font-size: 12px; font-weight: 400; }
.kl-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; color: var(--text-dim); font-size: 12px; }
.kl-legend i { width: 9px; height: 9px; margin-left: 8px; border-radius: 3px; }
.kl-legend i.is-typing { background: #2e8a4f; } .kl-legend i.is-on { background: #2f6fd6; } .kl-legend i.is-idle { background: #d9a441; } .kl-legend i.is-off { background: var(--line); }
.kl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; }
.kl-tile { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; gap: 2px 10px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-elevated); color: inherit; text-align: left; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.kl-tile:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -16px rgba(0, 0, 0, .4); }
.kl-tile-seat { grid-row: 1 / 3; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--bg-soft); color: var(--text-muted); font: 800 14px var(--font-mono); }
.kl-tile-name { display: flex; align-items: center; min-width: 0; }
.kl-tile-name b { overflow: hidden; color: var(--text-strong); font-size: 14.5px; text-overflow: ellipsis; white-space: nowrap; }
.kl-tile-name .pro-badge { flex: none; }
.kl-tile small { overflow: hidden; color: var(--text-dim); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.kl-tile small em { margin-right: 4px; font-style: normal; font-weight: 700; }
.kl-tile.is-typing { border-color: #9fd8b4; background: #f2fbf5; }
.kl-tile.is-typing .kl-tile-seat { background: #2e8a4f; color: #fff; }
.kl-tile.is-typing small em { color: #2e8a4f; }
.kl-tile.is-on { border-color: #c4d6f5; background: #f5f8ff; }
.kl-tile.is-on .kl-tile-seat { background: #2f6fd6; color: #fff; }
.kl-tile.is-on small em { color: #2f6fd6; }
.kl-tile.is-idle { border-color: #f0dca8; background: #fffbf0; }
.kl-tile.is-idle .kl-tile-seat { background: #d9a441; color: #fff; }
.kl-tile.is-idle small em { color: #a87a12; }
.kl-tile.is-off, .kl-tile.is-away { opacity: .62; }
.kl-live-tasks ul { display: grid; gap: 10px; margin: 6px 0 0; padding: 0; list-style: none; }
.kl-live-tasks li { display: grid; grid-template-columns: minmax(0, 1fr) 160px 60px; gap: 12px; align-items: center; font-size: 13.5px; }
.kl-live-tasks li span { overflow: hidden; color: var(--text-strong); text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.kl-live-tasks li b { color: var(--text-muted); font: 700 12.5px var(--font-mono); text-align: right; }
.kl-live-tasks .kl-bar { margin: 0; }
.kl-live-tasks .ui-card-head { display: flex; align-items: center; justify-content: space-between; }
.kl-roster-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kl-roster-acts .btn svg { width: 15px; height: 15px; margin-right: 4px; }
.kl-roster-acts .kl-dim { margin-left: auto; font-size: 12.5px; }
.kl-settings { display: grid; gap: 12px; }
.kl-settings .ui-card-title { margin: 6px 0 0; font-size: 15px; }
.kl-set-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kl-set-acts { display: flex; justify-content: flex-end; }
.kl-settings .kl-check b { color: var(--text-strong); }
.kl-danger-zone { display: grid; gap: 8px; justify-items: start; }
.kl-danger-zone p { margin: 0; }

/* 学生的「我」卡 */
.kl-me { display: grid; gap: 16px; padding: 24px; background: linear-gradient(135deg, #f1fbf8, var(--bg-elevated) 55%); border-color: #bfe6dc; }
.kl-me-id { display: flex; gap: 16px; align-items: center; }
.kl-me-seat { display: grid; place-items: center; flex: none; width: 64px; height: 64px; border-radius: 18px; background: linear-gradient(160deg, #5fd0bb, #1f8a7a); color: #fff; font: 800 26px/1 var(--font-mono); box-shadow: 0 10px 22px -12px rgba(20, 100, 85, .7); }
.kl-me-seat small { margin-top: -6px; font: 600 11px var(--font-sans, inherit); opacity: .85; }
.kl-me h2 { display: flex; align-items: center; margin: 0; color: var(--text-strong); font-size: 26px; }
.kl-me h2 .pro-badge { width: 22px; height: 22px; margin-left: 8px; }
.kl-me .kl-status { margin-top: 6px; }
.kl-me-acts .btn-lg svg { width: 18px; height: 18px; margin-right: 6px; }
.kl-me-foot { margin: 0; color: var(--text-dim); font-size: 12.5px; }
.kl-me-foot .btn { margin: 0; }

@media (max-width: 960px) {
  .kl-shell { grid-template-columns: minmax(0, 1fr); }
  .kl-side { position: static; grid-template-columns: minmax(0, 1fr); }
  .kl-side ul { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
  .kl-side-item { width: auto; min-width: 140px; }
}
@media (max-width: 640px) {
  .kl-hero { grid-template-columns: minmax(0, 1fr); padding: 18px; }
  .kl-hero-code { justify-items: start; }
  .kl-hero-code b { font-size: 26px; }
  .kl-live-stats { grid-template-columns: 1fr 1fr; }
  .kl-live-stats .is-hero { grid-column: 1 / -1; }
  .kl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kl-live-tasks li { grid-template-columns: minmax(0, 1fr) 70px 50px; }
  .kl-set-row { grid-template-columns: minmax(0, 1fr); }
  .kl-roster-acts .kl-dim { margin-left: 0; flex-basis: 100%; }
  .kl-me { padding: 18px; }
  .kl-me h2 { font-size: 22px; }
}
.kl-settings .ui-field { display: grid; gap: 6px; }

/* ---- 付款框（assets/js/pay.js，爱发电；10-22） ---- */
.mb-buy-alt { margin: 8px 0 0; text-align: center; font-size: 12.5px; color: var(--text-dim); }
.pay-veil { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(10, 20, 40, 0); transition: background 0.18s ease; }
.pay-veil.is-open { background: rgba(10, 20, 40, 0.5); }
.pay-box { position: relative; width: min(380px, 100%); max-height: calc(100vh - 32px); overflow: auto; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 22px 18px; border-radius: 20px; background: var(--bg-elevated); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); text-align: center; opacity: 0; transform: translateY(8px) scale(0.98); transition: opacity 0.18s ease, transform 0.18s ease; }
.pay-veil.is-open .pay-box { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .pay-veil, .pay-box { transition: none; } }
.pay-x { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border: 0; border-radius: 10px; background: var(--bg-soft); color: var(--text-muted); font-size: 20px; line-height: 1; cursor: pointer; }
.pay-kicker { margin: 0; font-size: 12.5px; font-weight: var(--fw-bold); letter-spacing: 0.04em; color: var(--text-dim); }
.pay-box h3 { margin: 0; display: flex; align-items: baseline; gap: 10px; font-size: 19px; color: var(--text-strong); }
.pay-box h3 b { font-size: 24px; color: #c27a0e; font-variant-numeric: tabular-nums; }
.pay-qr { margin: 6px 0 0; padding: 8px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08); line-height: 0; }
.pay-qr svg { display: block; width: 196px; height: 196px; }
.pay-tip { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text); }
.pay-tip small { font-size: 12.5px; color: var(--text-dim); }
.pay-alt { margin: 0; font-size: 13px; }
.pay-go { width: 100%; justify-content: center; margin-top: 6px; }
.pay-status { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 4px; padding: 10px 12px; border-radius: 12px; background: var(--bg-soft); font-size: 13.5px; line-height: 1.55; color: var(--text-muted); }
.pay-status.is-ok { flex-direction: column; background: #e7f7ec; color: #1d6b3a; }
.pay-status.is-ok svg { width: 28px; height: 28px; }
.pay-status.is-ok b { display: block; font-size: 16px; }
.pay-status.is-warn { background: #fff4d6; color: #7a5412; text-align: left; }
.pay-spin { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: pay-spin 0.9s linear infinite; }
@keyframes pay-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pay-spin { animation-duration: 3s; } }
.pay-foot { margin: 4px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--text-dim); }
.pay-foot .lv-link { padding: 0 2px; border: 0; background: none; color: var(--accent, #2563eb); font: inherit; cursor: pointer; }
[data-theme="dark"] .pay-status.is-ok { background: rgba(46, 160, 90, 0.18); color: #8fe0ae; }
[data-theme="dark"] .pay-status.is-warn { background: rgba(214, 160, 40, 0.16); color: #f1cf7d; }
.pay-box.is-done .pay-qr, .pay-box.is-done .pay-tip, .pay-box.is-done .pay-alt, .pay-box.is-done .pay-go { display: none; }
.pay-steps { margin: 0; padding: 10px 14px 10px 32px; width: 100%; box-sizing: border-box; border-radius: 12px; background: var(--bg-soft); font-size: 13px; line-height: 1.75; color: var(--text-muted); text-align: left; }
.mb-buy-alt .lv-link, .kl-plan-alt { padding: 0 2px; border: 0; background: none; color: var(--accent, #2563eb); font: inherit; cursor: pointer; }
.kl-plan-alt { flex-basis: 100%; font-size: 12.5px; text-align: left; }
.pay-steps { list-style: none; counter-reset: pay-step; padding-left: 14px; }
.pay-steps li { counter-increment: pay-step; display: flex; gap: 8px; align-items: baseline; }
.pay-steps li::before { content: counter(pay-step); flex: none; width: 18px; height: 18px; border-radius: 50%; background: #f3d27a; color: #6b4a06; font-size: 11.5px; font-weight: var(--fw-bold); line-height: 18px; text-align: center; transform: translateY(-1px); }

/* ---- 成长之路 第二版（profile.js renderJourney，2026-10-22）：一个颜色讲趋势，其余都是灰 ---- */
.pj2-wrap { position: relative; }
.pj2 { font-family: var(--font-sans); }
.pj2-grid { stroke: var(--line-soft); stroke-width: 1; }
.pj2-base { stroke: var(--line); stroke-width: 1; }
.pj2-ytick, .pj2-xtick { fill: var(--text-dim); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.pj2-mine { fill: color-mix(in srgb, var(--accent) 6%, transparent); }
.pj2-lvl { stroke: color-mix(in srgb, var(--bc) 55%, transparent); stroke-width: 1; }
.pj2-lvl.is-next { stroke: var(--bc); stroke-width: 1.5; }
.pj2-bname text { fill: var(--text-muted); font-size: 12px; font-weight: var(--fw-bold); }
.pj2-bname tspan { fill: var(--text-dim); font-weight: 400; }
.pj2-bname.is-next text { fill: var(--text-strong); }
.pj2-bname .pj2-gap { fill: var(--text-dim); font-size: 11.5px; font-weight: 400; }
.pj2-here { fill: var(--accent-ink, var(--accent)); font-size: 12px; font-weight: var(--fw-bold); }
.pj2-a0 { stop-color: var(--accent); stop-opacity: 0.16; }
.pj2-a1 { stop-color: var(--accent); stop-opacity: 0; }
.pj2-area { fill: url(#pj2Area); }
.pj2-range { stroke: var(--text-dim); stroke-opacity: 0.4; stroke-width: 2; stroke-linecap: round; }
.pj2-day { fill: var(--text-dim); fill-opacity: 0.55; stroke: var(--bg-elevated); stroke-width: 2; }
.pj-line.pj2-line { stroke: var(--accent); stroke-width: 3; stroke-linejoin: round; }
.pj2-note circle { fill: var(--bg-elevated); stroke-width: 2.5; }
.pj2-note text { font-size: 12px; font-weight: var(--fw-bold); }
.pj2-note.is-start circle { stroke: var(--accent); }
.pj2-note.is-start text { fill: var(--text-muted); }
.pj2-note.is-best circle { stroke: #e0a132; }
.pj2-note.is-best text { fill: #a8740f; }
.pj2-now .pj-pulse { fill: color-mix(in srgb, var(--accent) 22%, transparent); }
.pj2-end { fill: var(--accent); stroke: var(--bg-elevated); stroke-width: 2.5; }
.pj2-now rect { fill: var(--accent); }
.pj2-now text { fill: #fff; font-size: 12px; font-weight: var(--fw-bold); }
.pj2-cross { stroke: var(--text-dim); stroke-opacity: 0.45; stroke-width: 1; pointer-events: none; }
.pj2-tip { position: absolute; z-index: 2; display: flex; flex-direction: column; gap: 2px; min-width: 120px; padding: 8px 11px; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--bg-elevated); box-shadow: 0 8px 24px -10px rgba(16, 40, 80, 0.3); font-size: 12px; color: var(--text-muted); pointer-events: none; white-space: nowrap; }
.pj2-tip b { color: var(--text-strong); font-size: 12.5px; }
.pj2-tip em { font-style: normal; font-weight: var(--fw-bold); color: var(--accent-ink, var(--accent)); font-size: 14px; }
[data-theme="dark"] .pj2-note.is-best text { fill: #f4c965; }

/* ---- 成长之路 第三版：台阶 + 平滑曲线 + 小一（2026-10-22） ---- */
.pj3 { font-family: var(--font-sans); }
.pj3-step { fill: color-mix(in srgb, var(--bc) 8%, transparent); }
.pj3-step.is-mine { fill: color-mix(in srgb, var(--bc) 15%, transparent); }
.pj3-tag rect { fill: color-mix(in srgb, var(--bc) 16%, var(--bg-elevated)); }
.pj3-tag text { fill: color-mix(in srgb, var(--bc) 70%, var(--text-strong)); font-size: 12px; font-weight: var(--fw-bold); }
.pj3-tag.is-mine rect { fill: var(--bc); }
.pj3-tag.is-mine text { fill: #fff; }
.pj3-num { fill: var(--text-dim); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.pj3-date { fill: var(--text-dim); font-size: 11.5px; }
.pj3-base { stroke: var(--line); stroke-width: 1; }
.pj3-area { fill: url(#pj3Area); }
.pj3-l1 { stop-color: var(--accent); }
.pj-line.pj3-line { stroke: url(#pj3Line); stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; filter: url(#pj3Glow); }
.pj3-day { fill: var(--accent); fill-opacity: 0.22; }
.pj3-start path { stroke: var(--text-muted); stroke-width: 1.5; fill: none; }
.pj3-start .pj3-flag { fill: #f08a24; stroke: none; }
.pj3-start circle { fill: var(--bg-elevated); stroke: var(--accent); stroke-width: 2.5; }
.pj3-start text { fill: var(--text-muted); font-size: 12px; font-weight: var(--fw-bold); }
.pj3-best path { fill: #f5b82e; stroke: var(--bg-elevated); stroke-width: 1.5; }
.pj3-best text { fill: #a8740f; font-size: 12px; font-weight: var(--fw-bold); }
.pj3-bubble { fill: var(--accent); }
.pj3-now text { fill: #fff; font-size: 12.5px; font-weight: var(--fw-bold); }
.pj3-eye { transform-box: fill-box; transform-origin: center; animation: pj3-blink 4.5s infinite; }
@keyframes pj3-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.15); } }
@media (prefers-reduced-motion: reduce) { .pj3-eye { animation: none; } }
[data-theme="dark"] .pj3-best text { fill: #f4c965; }
.pj3-tag .pj3-sub { fill: var(--text-muted); font-size: 11px; font-weight: 400; }
.pj3-tag.is-next .pj3-sub { fill: color-mix(in srgb, var(--bc) 75%, var(--text-strong)); font-weight: var(--fw-bold); }
.pj3-tag .is-in { font-size: 11px; }
.pj3-tag.is-mine .is-in { fill: color-mix(in srgb, var(--bc) 75%, var(--text-strong)); }
.pj3-tag.is-small text { font-size: 11px; }

/* ---- 成长之路分三种看法：简单（台阶）/ 曲线 / 专业（2026-10-22） ---- */
.pj-chart-head .pj-views { margin-left: auto; order: 3; }
.pj-chart-head .pj-views button { padding: 4px 11px; font-size: 12px; }
.pj-unlock { font-style: normal; font-size: 12px; font-weight: var(--fw-bold); color: #a8740f; background: color-mix(in srgb, #f5b82e 18%, transparent); padding: 2px 10px; border-radius: 999px; }
[data-theme="dark"] .pj-unlock { color: #f4c965; }

.pj4-step rect { fill: color-mix(in srgb, var(--bc) 12%, var(--bg-elevated)); stroke: color-mix(in srgb, var(--bc) 30%, transparent); stroke-width: 1; stroke-dasharray: 4 4; transform-box: fill-box; transform-origin: bottom; animation: pj4-rise .5s cubic-bezier(.2,.8,.3,1.1) both; animation-delay: var(--d); }
.pj4-step.is-done rect { fill: color-mix(in srgb, var(--bc) 32%, var(--bg-elevated)); stroke: none; }
.pj4-step.is-mine rect { fill: var(--bc); stroke: none; }
.pj4-step.is-next rect { stroke-width: 1.5; stroke: color-mix(in srgb, var(--bc) 70%, transparent); }
.pj4-name { fill: color-mix(in srgb, var(--bc) 70%, var(--text-strong)); font-size: 13px; font-weight: var(--fw-bold); }
.pj4-range { fill: var(--text-dim); font-size: 11px; font-variant-numeric: tabular-nums; }
.pj4-step.is-mine .pj4-name, .pj4-step.is-mine .pj4-range { fill: #fff; }
.pj4-flag { fill: #f08a24; stroke: var(--text-muted); stroke-width: 1.2; }
.pj4-me text { fill: #fff; font-size: 12.5px; font-weight: var(--fw-bold); }
.pj4-me { animation: pj4-hop .5s .35s both; }
.pj4.is-still .pj4-step rect, .pj4.is-still .pj4-me { animation: none; }
@keyframes pj4-rise { from { transform: scaleY(0.2); opacity: 0; } }
@keyframes pj4-hop { from { transform: translateY(-14px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pj4-step rect, .pj4-me { animation: none; } }

.pj4-h { display: block; font-size: 12.5px; color: var(--text-muted); margin-bottom: 6px; }
.pj4-bar { flex: 1 1 0; max-width: 34px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 3px; }
.pj4-bar i { display: block; width: 100%; border-radius: 6px 6px 3px 3px; background: color-mix(in srgb, var(--bc) 55%, var(--bg-elevated)); }
.pj4-bar.is-last i { background: var(--bc); }
.pj4-bar em { font-style: normal; font-size: 11px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.pj4-bar.is-last em { color: var(--text-strong); font-weight: var(--fw-bold); }
.pj4-goal-line { position: absolute; left: 0; right: 0; border-top: 1.5px dashed color-mix(in srgb, #f08a24 70%, transparent); pointer-events: none; }
.pj4-goal-line small { position: absolute; right: 0; top: -17px; font-size: 11px; color: #c86d14; font-weight: var(--fw-bold); }
.pj4-axis { display: flex; justify-content: space-between; margin-top: 4px; font-size: 11px; color: var(--text-dim); }
.pj4-goal { display: grid; gap: 5px; }
.pj4-goal > span { color: var(--text-strong); font-weight: var(--fw-semibold); }
.pj4-goal b { color: var(--accent-ink, var(--accent)); font-size: 18px; }
.pj4-prog { height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--bc) 16%, var(--bg-elevated)); overflow: hidden; }
.pj4-prog i { display: block; height: 100%; border-radius: inherit; background: var(--bc); }
.pj4-stars { color: #f5b82e; letter-spacing: 1px; font-size: 14px; }
.pj4-stars s { text-decoration: none; color: color-mix(in srgb, var(--text-dim) 45%, transparent); }

.pj-line.pj5-line { stroke: var(--accent); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.pj-chart-head { flex-wrap: nowrap; align-items: center; }
.pj-chart-head > span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-chart-head .pj-views { order: 9; flex: none; }
.pj-chart-head .pj-gain, .pj-chart-head .pj-unlock, .pj-chart-head > b { flex: none; white-space: nowrap; }
@media (max-width: 640px) { .pj-chart-head { flex-wrap: wrap; } .pj-chart-head > span { flex-basis: 100%; order: 10; white-space: normal; } }

.pj4 { display: block; width: 100%; height: auto; font-family: var(--font-sans); overflow: visible; }
.pj4-top { display: grid; grid-template-columns: 60fr 40fr; gap: 12px; align-items: stretch; margin-top: 10px; }
.pj4-top.is-stack { grid-template-columns: minmax(0, 1fr); }
.pj4-card { display: flex; flex-direction: column; padding: 12px 14px 10px; border: 1px solid var(--line-soft); border-radius: 14px; background: var(--bg-sunken); min-width: 0; }
.pj4-bars { position: relative; flex: 1 1 auto; min-height: 92px; display: flex; align-items: flex-end; gap: 6px; padding-top: 16px; }
.pj4-strip { display: flex; align-items: center; gap: 10px 22px; flex-wrap: wrap; margin-top: 10px; padding: 9px 14px; border-radius: 12px; background: var(--bg-sunken); font-size: 13px; color: var(--text-muted); }
.pj4-strip p { margin: 0; white-space: nowrap; }
.pj4-strip b { color: var(--text-strong); font-size: 15px; }
.pj4-strip .pj4-goal { flex: 1 1 260px; display: grid; grid-template-columns: auto minmax(60px, 1fr) auto; align-items: center; gap: 10px; }
.pj4-strip .pj4-goal small { color: var(--text-dim); font-size: 11.5px; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .pj4-strip .pj4-goal { grid-template-columns: minmax(0, 1fr) auto; } .pj4-strip .pj4-goal .pj4-prog { grid-column: 1 / -1; grid-row: 2; } }

.pj5-facts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; margin: 4px 0 2px; font-size: 12.5px; color: var(--text-muted); }
.pj5-facts small { color: var(--text-dim); font-size: 11.5px; }
.pj5-facts b { color: var(--text-strong); font-variant-numeric: tabular-nums; }
.pj5-facts b.is-keys { font-family: var(--font-mono); letter-spacing: 2px; }
.pj5-facts a { color: var(--accent); }