/* -------------------------------------------------------- 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 24px 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 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg-soft);
}

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

.pg-card-body {
  padding: 18px;
}

.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 {
  box-shadow: inset 3px 0 0 var(--gold);
}

.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 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-card);
  color: var(--text-muted);
  font-size: 12.5px;
  cursor: pointer;
  list-style: none;
}

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

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

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

.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);
}

.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: block;
  margin-bottom: 7px;
  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 18px 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-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-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: inset 4px 0 0 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-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 {
    grid-template-columns: 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);
}

.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;
}

/* ---- podium ------------------------------------------------------------
   Three plates on a stepped base. Each plate gets its metal twice: a rim
   painted as a multi-stop gradient into the border box (a plain border-color
   cannot show metal), and a wash of the same metal fading down the inside.
   The medal hangs above the avatar, over the player's head. */

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

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

.lb-step {
  display: flex;
  flex-direction: column;
  min-width: 0;
  --metal-a: #c9ced6;
}

.lb-plate {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  margin: 0 6px -1px;
  padding: 12px 10px 16px;
  border: 1.5px solid transparent;
  border-radius: 18px 18px 6px 6px;
  text-align: center;
}

.lb-step.is-1 .lb-plate {
  padding-top: 16px;
  padding-bottom: 20px;
  background:
    linear-gradient(180deg, rgba(233, 199, 90, 0.26), rgba(233, 199, 90, 0) 62%) 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 10px 28px -8px rgba(160, 124, 26, 0.35);
}

.lb-step.is-2 .lb-plate {
  background:
    linear-gradient(180deg, rgba(170, 182, 196, 0.28), rgba(170, 182, 196, 0) 62%) 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 8px 22px -8px rgba(110, 122, 136, 0.3);
}

.lb-step.is-3 .lb-plate {
  background:
    linear-gradient(180deg, rgba(217, 154, 99, 0.26), rgba(217, 154, 99, 0) 62%) 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 8px 22px -8px rgba(140, 88, 44, 0.3);
}

.lb-step.is-me .lb-plate::after {
  content: '你';
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: var(--fw-bold);
}

.lb-medal {
  width: 46px;
  height: 51px;
  margin-bottom: -4px;
  overflow: visible;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.18));
}

.lb-step.is-1 .lb-medal {
  width: 56px;
  height: 62px;
}

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

.lb-av {
  position: relative;
  display: inline-block;
  padding: 3px;
  border-radius: 50%;
}

.lb-step.is-1 .lb-av { background: linear-gradient(155deg, #fbf1c0, #dcb748 30%, #8f6d16 55%, #f0da95); }
.lb-step.is-2 .lb-av { background: linear-gradient(155deg, #ffffff, #ccd6e0 30%, #7d8896 55%, #eef2f7); }
.lb-step.is-3 .lb-av { background: linear-gradient(155deg, #f6d3ad, #d99a63 30%, #8b5225 55%, #f0c69b); }

.lb-step .lb-avatar {
  width: 52px;
  height: 52px;
  border: 2px solid var(--bg-elevated);
  font-size: 20px;
}

.lb-step.is-1 .lb-avatar {
  width: 66px;
  height: 66px;
}

.lb-step .lb-name {
  justify-content: center;
  margin-top: 2px;
}

.lb-step .lb-val {
  font-size: 26px;
}

.lb-step.is-1 .lb-val {
  font-size: 32px;
  color: #8f6d16;
}

html[data-theme='dark'] .lb-step.is-1 .lb-val { color: #f0d27a; }

/* The base: a real podium, stepped, in the same metal, with the place cut
   into its face. */
.lb-base {
  display: grid;
  place-items: center;
  border-radius: 6px 6px 0 0;
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--font-mono);
  font-weight: var(--fw-bold);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}

.lb-step.is-1 .lb-base {
  height: 64px;
  font-size: 30px;
  background: linear-gradient(180deg, #e6c35a 0%, #c79b2a 55%, #a37f1c 100%);
}

.lb-step.is-2 .lb-base {
  height: 44px;
  font-size: 24px;
  background: linear-gradient(180deg, #c7d0da 0%, #9aa7b6 60%, #7d8896 100%);
}

.lb-step.is-3 .lb-base {
  height: 30px;
  font-size: 20px;
  background: linear-gradient(180deg, #e0a574 0%, #b8773f 60%, #8b5225 100%);
}

.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-step .lb-val {
  color: var(--accent-ink);
  font-size: 26px;
}

.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-stage { gap: 0 4px; }
  .lb-plate { margin: 0 2px -1px; padding: 8px 4px 12px; }
  .lb-step .lb-avatar { width: 40px; height: 40px; }
  .lb-step.is-1 .lb-avatar { width: 50px; height: 50px; }
  .lb-medal { width: 36px; height: 40px; }
  .lb-step.is-1 .lb-medal { width: 42px; height: 47px; }
  .lb-step.is-1 .lb-val { font-size: 22px; }
  .lb-step .lb-val {
    font-size: 20px;
  }
  .lb-step .lb-sub,
  .lb-step .lb-tag {
    display: none;
  }
  .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-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); }

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

@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'] {
  background: var(--accent);
  color: #fff;
}

.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); }
}

.lb-step.is-2 .lb-val { color: #5b6776; }
.lb-step.is-3 .lb-val { color: #8b5225; }
html[data-theme='dark'] .lb-step.is-2 .lb-val { color: #d5dde6; }
html[data-theme='dark'] .lb-step.is-3 .lb-val { color: #f0c69b; }

/* Round 7: square plates. Tall rectangles of three different heights read
   as uneven; three squares (the winner's larger) on a stepped base read as
   one podium. */
.lb-stage {
  grid-template-columns: minmax(0, 188px) minmax(0, 220px) minmax(0, 188px);
  justify-content: center;
  gap: 0 14px;
}

.lb-stage[data-count='2'] { grid-template-columns: minmax(0, 188px) minmax(0, 220px); }
.lb-stage[data-count='1'] { grid-template-columns: minmax(0, 220px); }

.lb-plate {
  aspect-ratio: 1 / 1;
  justify-content: center;
  gap: 4px;
  margin: 0 0 10px;
  padding: 10px 10px 12px;
  border-radius: 24px;
}

.lb-step.is-1 .lb-plate {
  padding: 10px 10px 12px;
}

.lb-step .lb-sub {
  font-size: 11.5px;
}

.lb-base {
  margin: 0 -4px;
  border-radius: 10px 10px 0 0;
}

.lb-step .lb-avatar { width: 46px; height: 46px; }
.lb-step.is-1 .lb-avatar { width: 56px; height: 56px; }
.lb-medal { width: 40px; height: 44px; margin-bottom: -6px; }
.lb-step.is-1 .lb-medal { width: 46px; height: 51px; }
.lb-step .lb-val { font-size: 24px; line-height: 1.1; }
.lb-step.is-1 .lb-val { font-size: 28px; }

@media (max-width: 720px) {
  .lb-stage { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 6px; }
  .lb-plate { aspect-ratio: auto; border-radius: 16px; }
}
.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-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;
}

.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-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-direction: column; gap: 3px; min-width: 0; }
.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; }

@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(). */

.cc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
.cc-main { min-width: 0; }
.cc-side { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 16px; }

.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)); }

.cc-hero {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  border: 1px solid color-mix(in srgb, var(--ca) 22%, var(--line-soft));
  border-radius: 22px;
  background: var(--bg-elevated);
  box-shadow: 0 22px 44px -30px color-mix(in srgb, var(--ca) 80%, transparent);
}
.cc-hero-art { display: block; min-height: 200px; overflow: hidden; border-radius: 21px 0 0 21px; }
.cc-hero-art svg { display: block; width: 100%; height: 100%; }
.cc-hero-main { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 24px 28px; min-width: 0; }
.cc-hero-eyebrow { margin: 0; color: var(--ca-deep); font-size: 12.5px; font-weight: 800; letter-spacing: 0.04em; }
.cc-hero h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 0; color: var(--text-strong); font-size: 26px; line-height: 1.25; }
.cc-hero-no { padding: 3px 10px; border-radius: 99px; background: var(--ca-soft); color: var(--ca-deep); font-size: 13px; font-weight: 800; }
.cc-hero-next { margin: 0; color: var(--text-muted); font-size: 13.5px; line-height: 1.6; }
.cc-hero-bar { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.cc-hero-bar b { color: var(--text-muted); font-size: 12.5px; white-space: nowrap; }
.cc-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 14px; }

.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-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.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 / 8; overflow: hidden; }
.cc-cover svg { display: block; width: 100%; height: 100%; }
.cc-card.is-locked .cc-cover svg.ca { filter: grayscale(0.8) brightness(1.08); opacity: 0.75; }
.cc-lock { position: absolute; inset: 0; display: grid; place-items: center; }
.cc-lock svg { width: 44px; height: 44px; padding: 11px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--text-muted); box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.35); }
.cc-badge { position: absolute; top: 12px; left: 12px; padding: 4px 10px; 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-body { display: flex; flex-direction: column; gap: 6px; padding: 14px 18px 16px; }
.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: 18px; }
.cc-sub { min-height: 42px; color: var(--text-muted); font-size: 13px; line-height: 1.6; }
.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: 12px; margin-top: 6px; }
.cc-state { display: inline-flex; align-items: center; gap: 4px; color: var(--ca-deep); font-size: 13px; font-weight: 800; white-space: nowrap; }
.cc-state svg { width: 14px; height: 14px; }
.cc-card.is-locked .cc-state { color: var(--text-muted); font-weight: 600; }
.cc-card.is-soon { cursor: default; }
.cc-card.is-soon:hover { transform: none; box-shadow: none; border-color: var(--line-soft); }

.cc-panel { padding: 18px; border: 1px solid var(--line-soft); border-radius: 18px; background: var(--bg-elevated); }
.cc-panel h3 { margin: 0 0 12px; color: var(--text-strong); font-size: 15px; }
.cc-today { display: flex; align-items: center; gap: 14px; }
.cc-today svg { width: 64px; height: 64px; 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: 17px; }
.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); }

@media (max-width: 1100px) {
  .cc-layout { grid-template-columns: 1fr; }
  .cc-side { position: static; display: grid; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .cc-hero { grid-template-columns: 1fr; }
  .cc-hero-art { min-height: 0; aspect-ratio: 16 / 8; border-radius: 21px 21px 0 0; }
  .cc-hero h2 { font-size: 21px; }
  .cc-grid, .cc-side { grid-template-columns: 1fr; }
}

/* ==================================================== 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; }
.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-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; }

.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: 270px; }

.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; }
}

/* ---- 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%; }
@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 { 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; }

/* 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)); }
.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 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-top.has-scene { min-height: 0; padding-bottom: 36px; }
}
.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); }