/* /web2 profile pages + shared profile-view components.
   1:1 transcription of ui/profile/*.kt (ProfileView, CareerStatsGrid,
   RatingProgressionCard, RaceProfileDetailScreen, SuspensionsScreen,
   TrackBreakdownScreen). Wide layout switches at 900px like the app. */

:root {
  --stat-cyan: #6FE3F0;      /* CareerStatsGrid StatCyan */
  --dr-accent: #FF4D5E;      /* RatingProgressionCard DrAccent */
  --sr-accent: #53D9C9;      /* RatingProgressionCard SrAccent */
  --pos-green: #53D769;      /* RaceProfileDetailScreen PosGreen */
  --best-purple: #C792EA;    /* BestPurple (session best lap/sectors) */
}

.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.d-pos { color: var(--skill-beginner); font-weight: 700; }
.d-neg { color: var(--class-hyper); font-weight: 700; }
.d-zero { color: var(--text-med); font-weight: 700; }
.rc-clip { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* ------------------------------------------------- page header w/ back button */
.page-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; min-width: 0; }
.page-head-col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.circle-btn {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: var(--surface1); border: 1px solid var(--outline);
  display: flex; align-items: center; justify-content: center; color: var(--text-med);
}
.circle-btn .icon { width: 20px; height: 20px; transform: rotate(180deg); }
.circle-btn:hover { background: var(--surface3); color: var(--text-high); }

.pv-msg { max-width: 460px; margin: 48px auto; text-align: center; display: flex; flex-direction: column; gap: 6px; }
.pv-empty { padding: 32px 0; text-align: center; }
.pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; }

/* ------------------------------------------------- shared small components */
/* MetaChip */
.meta-chip {
  display: inline-flex; align-items: center; border-radius: 7px;
  background: var(--surface2); padding: 4px 9px;
  font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.6px;
  color: var(--text-med); white-space: nowrap;
}
/* ClickablePill / OutlinePill — tinted 12% bg + 40% border; set --pc */
.tint-pill {
  display: inline-flex; align-items: center; gap: 4px; border-radius: 6px;
  padding: 2px 8px; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.6px;
  color: var(--pc); white-space: nowrap;
  background: color-mix(in srgb, var(--pc) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--pc) 40%, transparent);
}
a.tint-pill:hover { background: color-mix(in srgb, var(--pc) 22%, transparent); }
/* solid class pill (ClassPill) — WEC class colors; text per onBadgeText luminance */
.pill-solid {
  display: inline-flex; align-items: center; border-radius: 6px; padding: 3px 8px;
  font-size: 12px; line-height: 16px; font-weight: 700; white-space: nowrap; color: #fff;
}
.pill-solid.pill-mini { border-radius: 5px; padding: 2px 5px; font-size: 11px; }
.ps-hyper { background: var(--class-hyper); }
.ps-lmp2 { background: var(--class-lmp2); }
.ps-lmp3 { background: var(--class-lmp3); }
.ps-gt3 { background: var(--class-gt3); }
.ps-gte { background: var(--class-gte); color: var(--carbon); }
.ps-mixed { background: var(--class-mixed); color: var(--carbon); }
/* RankBadge — official two-tone DR/SR badge; set --rk */
.rank-badge {
  display: inline-flex; align-items: stretch; border-radius: 3.5px; overflow: hidden;
  border: 1.5px solid var(--rk); font-size: 11px; line-height: 16px; font-weight: 900;
}
.rank-badge .rb-l { background: #F3F4F8; color: var(--rk); padding: 3px 6px; }
.rank-badge .rb-v { background: var(--rk); color: #F3F4F8; padding: 3px 6px; }
.rank-badge.rb-mini { border-width: 1px; border-radius: 3px; }
.rank-badge.rb-mini .rb-l, .rank-badge.rb-mini .rb-v { padding: 1px 4px; }

/* ------------------------------------------------- ProfileView */
.pv { display: flex; flex-direction: column; gap: 16px; }
.pv-top { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.pv-header { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pv-namerow { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pv-flag { width: 24px; height: 18px; border-radius: 4px; border: 1px solid var(--outline); object-fit: cover; }
.pv-name { font-weight: 700; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pv-badge { height: 28px; width: auto; }
.pv-pills { display: flex; flex-wrap: wrap; gap: 8px 8px; align-items: center; }
/* UpdateProfileButton — Surface1 + amber 46% border, amber label */
.pv-update {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 44px; height: 44px;
  border-radius: 12px; background: var(--surface1);
  border: 1px solid color-mix(in srgb, var(--amber) 46%, transparent);
  color: var(--amber); padding: 0 12px; white-space: nowrap;
}
.pv-update.has-next { height: 58px; }
.pv-update-title, .pv-update-next {
  display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.pv-update-title { color: var(--amber); font-weight: 600; }
.pv-update-next { color: var(--text-low); }
.pv-update:hover { background: var(--surface2); }
.pv-sechead { color: var(--text-high); }

/* SteamAchievementsEntry - ProfileView.kt */
.ach-entry {
  container-type: inline-size;
  display: flex; align-items: center; gap: 12px; min-height: 86px;
  border-radius: 14px; background: var(--surface1);
  border: 1px solid color-mix(in srgb, var(--amber) 32%, transparent);
  padding: 12px; min-width: 0;
}
.ach-entry:hover { background: var(--surface2); }
.ach-entry-icon {
  flex: none; width: 52px; height: 52px; border-radius: 12px;
  background: color-mix(in srgb, var(--amber) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--amber) 42%, transparent);
  display: flex; align-items: center; justify-content: center; color: var(--amber);
}
.ach-entry-icon .icon { width: 28px; height: 28px; }
.ach-entry-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.ach-entry-title-row { display: flex; align-items: center; gap: 7px; min-width: 0; }
.ach-entry-title { color: var(--text-high); font-weight: 900; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ach-entry-subtitle { color: var(--text-low); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ach-entry.has-data .ach-entry-subtitle { color: var(--amber); }
.ach-steam { width: 16px; height: 16px; color: var(--text-med); flex: none; }
.ach-preview { display: none; align-items: center; gap: 4px; flex: none; }
.ach-preview-icon {
  width: 34px; height: 34px; border-radius: 8px; overflow: hidden;
  background: var(--surface3); border: 1px solid var(--outline);
  display: flex; align-items: center; justify-content: center; color: var(--text-low);
}
.ach-preview-icon.is-unlocked { border-color: color-mix(in srgb, var(--amber) 42%, transparent); }
.ach-preview-icon img { width: 34px; height: 34px; object-fit: cover; }
.ach-preview-icon .icon { width: 18px; height: 18px; }
.ach-progress {
  display: block; width: 100%; height: 5px; border-radius: 3px;
  background: var(--surface3); overflow: hidden;
}
.ach-progress span { display: block; height: 100%; border-radius: 3px; background: var(--amber); width: 0; }
@container (min-width: 420px) {
  .ach-preview { display: flex; }
  .ach-preview-icon:nth-child(n + 5) { display: none; }
}
@container (min-width: 520px) {
  .ach-preview-icon:nth-child(n + 5) { display: flex; }
}

/* RatingsRow (narrow) / RatingStatTile (wide, inside the stats card) */
.pv-ratings-row { display: flex; gap: 12px; }
.rating-card { flex: 1; border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.rating-tile { flex: 1; min-height: 118px; border-radius: 12px; background: var(--surface2); padding: 14px; display: flex; flex-direction: column; gap: 9px; }
.rt-label { font-weight: 700; }
.rt-rank { display: flex; align-items: baseline; gap: 6px; }
.rt-rank .title-l { font-weight: 900; }
.rt-bar { width: 100%; height: 7px; border-radius: 4px; background: var(--surface3); overflow: hidden; }
.rt-bar span { display: block; height: 100%; border-radius: 4px; }
.pv-stats-ratings { display: none; gap: 10px; }

/* rating progression */
.pv-chart { display: flex; flex-direction: column; gap: 10px; }
.pv-chart-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.range-chips { display: flex; gap: 6px; }
.range-chip { border-radius: 8px; padding: 5px 12px; color: var(--text-low); }
.range-chip.is-sel { background: var(--surface3); color: var(--text-high); font-weight: 600; }
.pv-chart-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.rs-card { display: flex; flex-direction: column; gap: 12px; }
.rs-title { font-weight: 900; }
.rating-chart { width: 100%; height: auto; display: block; }
.rs-empty { display: flex; align-items: center; justify-content: center; height: 120px; }

/* career stats grid */
.pv-cols { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: start; }
.pv-stats { display: flex; flex-direction: column; gap: 12px; }
.pv-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stat-tile {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 14px 6px; border-radius: 12px; background: var(--surface2); text-align: center;
}
.stat-tile .st-value { color: var(--sc); font-weight: 700; }
.stat-tile.is-link { border: 1px solid color-mix(in srgb, var(--sc) 55%, transparent); }
.stat-tile.is-link:hover { background: var(--surface3); }
.stat-tile .st-chevron {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: color-mix(in srgb, var(--sc) 70%, transparent);
}

/* favorite cars */
.pv-favs { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fav-card {
  display: flex; flex-direction: column; gap: 10px; min-height: 118px;
  border-radius: 14px; background: var(--surface1); border: 1px solid var(--outline); padding: 12px;
}
a.fav-card:hover { background: var(--surface2); }
.fav-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fav-logo {
  flex: none; width: 46px; height: 46px; border-radius: 10px; background: var(--surface2);
  border: 1px solid var(--outline); display: flex; align-items: center; justify-content: center; padding: 7px;
}
.fav-logo img { max-width: 100%; max-height: 30px; object-fit: contain; }
.fav-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.fav-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fav-badges .tint-pill { font-weight: 900; }
.fav-dist { min-width: 82px; justify-content: center; }
.fav-name { font-weight: 700; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fav-img { flex: none; width: 112px; height: 72px; object-fit: contain; border-radius: 6px; }
.fav-stats { display: flex; flex-wrap: wrap; gap: 6px; }
.fav-stat {
  display: inline-flex; align-items: center; gap: 5px; border-radius: 6px; padding: 3px 8px;
  background: color-mix(in srgb, var(--pc) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--pc) 42%, transparent);
}
.fav-stat .label-s { color: var(--pc); font-weight: 700; }
.fav-stat .label-m { color: var(--text-high); font-weight: 900; }

/* recent races + see all */
.pv-recent { display: flex; flex-direction: column; gap: 8px; }
.pv-racelist { display: flex; flex-direction: column; gap: 8px; }
.see-all {
  display: flex; align-items: center; justify-content: center; padding: 12px;
  border-radius: 12px; background: var(--surface1); border: 1px solid var(--outline); color: var(--amber);
}
.see-all:hover { background: var(--surface2); }

/* sign out / clear my data (ExitButton row) + privacy */
.pv-exit-row { display: flex; gap: 12px; margin-top: 24px; }
.pv-exit-row form { flex: 1; display: flex; }
.pv-exit-row .btn-exit { flex: 1; width: 100%; cursor: pointer; }
.pv-privacy { display: flex; justify-content: center; margin: 12px 0 32px; }
.pv-privacy a { padding: 6px 12px; border-radius: 8px; }
.pv-privacy a:hover { background: var(--surface1); }

/* ClearDataDialog */
.clear-dialog {
  background: var(--surface1); color: var(--text-high); border: 1px solid var(--outline);
  border-radius: 28px; padding: 24px; max-width: 340px; width: calc(100% - 48px);
}
.clear-dialog::backdrop { background: rgba(0, 0, 0, 0.55); }
.clear-dialog p { color: var(--text-med); margin: 16px 0 20px; }
.clear-actions { display: flex; justify-content: flex-end; gap: 8px; }
.dlg-btn { background: none; border: 0; cursor: pointer; padding: 10px 12px; border-radius: 20px; color: var(--text-med); }
.dlg-btn:hover { background: var(--surface2); }
.dlg-danger { color: var(--danger); font-weight: 700; }

/* ------------------------------------------------- race card (RaceHistoryRow) */
.rc {
  display: flex; align-items: center; gap: 12px; padding: 12px;
  border-radius: 12px; background: var(--surface1); border: 1px solid var(--outline); min-width: 0;
}
a.rc:hover { background: var(--surface2); }
.rc-left { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 52px; }
.rc-when { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.rc-time { font-size: 11px; line-height: 13px; font-weight: 600; color: var(--text-med); }
.rc-date { font-size: 8px; line-height: 10px; color: var(--text-low); }
.rc-pos {
  width: 46px; height: 46px; border-radius: 12px; background: var(--surface2); border: 1px solid var(--outline);
  display: flex; align-items: center; justify-content: center; font-weight: 900; color: var(--text-high);
}
.rc-pos.pos-1 { background: var(--rank-gold); border-color: var(--rank-gold); color: var(--carbon); }
.rc-pos.pos-2 { background: var(--rank-silver); border-color: var(--rank-silver); color: #fff; }
.rc-pos.pos-3 { background: var(--rank-bronze); border-color: var(--rank-bronze); color: #fff; }
.rc-pos-dnf { background: #000; border-color: color-mix(in srgb, var(--class-hyper) 60%, transparent); color: var(--class-hyper); }
.rc-g2f { font-weight: 600; }
.rc-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.rc-title { font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rc-carline, .rc-trackline { display: flex; align-items: center; gap: 6px; min-width: 0; }
.rc-carimg { width: 48px; height: 36px; object-fit: contain; border-radius: 4px; flex: none; }
.rc-tracklogo { height: 20px; max-width: 44px; object-fit: contain; flex: none; }
.rc-sessions { display: flex; align-items: center; gap: 8px; }
.sess-badge { display: inline-flex; align-items: stretch; border-radius: 6px; border: 1px solid var(--outline); overflow: hidden; }
.sess-badge .sb-l { background: var(--surface2); color: var(--text-low); font-weight: 700; padding: 3px 6px; }
.sess-badge .sb-v { color: var(--text-high); font-weight: 700; padding: 3px 7px; }
.rc-right { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.rc-deltas { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.rc-delta { display: inline-flex; align-items: center; gap: 4px; }

/* ------------------------------------------------- race detail */
.rd { display: flex; flex-direction: column; gap: 12px; }

/* ------------------------------------------------- race share card — "night paddock" */
.page-head > .rc-clip,
.drv-backrow > .drv-backrow-title { flex: 1; min-width: 0; }
.race-share-trigger {
  -webkit-appearance: none; appearance: none;
  position: relative; margin-left: auto; flex: none; min-height: 42px; padding: 0 16px;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 9px; border-radius: 12px; cursor: pointer;
  border: 1px solid rgba(214, 181, 107, 0.55);
  background: linear-gradient(135deg, rgba(214, 181, 107, 0.17), rgba(13, 16, 21, 0.92) 58%);
  color: #E7CF98;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 6px 20px rgba(0, 0, 0, 0.18);
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}
.race-share-trigger .icon { flex: none; width: 17px; height: 17px; }
.race-share-label {
  white-space: nowrap; font-size: 13px; line-height: 16px; font-weight: 750;
  letter-spacing: 0.015em;
}
.race-share-trigger:hover {
  transform: translateY(-1px); border-color: #D6B56B;
  background: linear-gradient(135deg, rgba(214, 181, 107, 0.24), rgba(13, 16, 21, 0.95) 62%);
}
.race-share-trigger:active { transform: translateY(0); }
.race-share-trigger:focus-visible { outline: 2px solid #E7CF98; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .race-share-trigger { transition: none; }
}
.rd-track { border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.rd-trackname { font-weight: 700; }
.rd-chips { display: flex; flex-wrap: wrap; gap: 8px 6px; align-items: center; }
.cat-chip {
  display: inline-flex; align-items: center; border-radius: 6px; padding: 3px 8px; font-weight: 700;
  color: var(--pc); background: color-mix(in srgb, var(--pc) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--pc) 55%, transparent); white-space: nowrap;
}
.rd-summary { border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.rd-carrow { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rd-mlogo { width: 40px; height: 40px; object-fit: contain; flex: none; }
.rd-carimg { width: 96px; height: 72px; object-fit: contain; border-radius: 5px; flex: none; }
.rd-carinfo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rd-carname { font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rd-stats { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.rd-stat { display: inline-flex; flex-direction: column; gap: 2px; }
.rd-stat .title-s { font-weight: 700; }
.rd-pace { display: flex; flex-direction: column; gap: 8px; }
.rd-pace-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rd-pace-title { font-weight: 700; }
.info-dot {
  width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--text-low);
  display: inline-flex; align-items: center; justify-content: center; color: var(--text-low);
  font-weight: 700; cursor: pointer; flex: none;
  background: none; padding: 0; font-size: 11px; line-height: 1; font-family: inherit;
}
/* warm-up stepper (StepButton in RaceProfileDetailScreen.kt) */
.rd-pace-stepper { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.step-btn {
  width: 20px; height: 20px; border-radius: 6px; flex: none; cursor: pointer;
  background: var(--surface2); border: 1px solid var(--outline);
  color: var(--amber); font-weight: 700; font-size: 12px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; padding: 0; font-family: inherit;
}
.rd-pace-skip-n { color: var(--text-high); font-weight: 700; min-width: 16px; text-align: center; }
/* PaceInfoDialog (AlertDialog) */
.rd-dialog {
  background: var(--surface1); color: var(--text-high);
  border: 1px solid var(--outline); border-radius: 28px;
  padding: 24px; max-width: 340px; margin: auto;
}
.rd-dialog::backdrop { background: rgba(0, 0, 0, 0.55); }
.rd-dialog-title { font-weight: 700; margin-bottom: 12px; }
.rd-dialog-body { margin: 0 0 18px; }
.rd-dialog-actions { display: flex; justify-content: flex-end; margin: 0; }
.rd-dialog-btn {
  background: none; border: 0; cursor: pointer; padding: 8px 10px;
  color: var(--amber); font-weight: 600; font-family: inherit;
}

/* tyre/fuel strategy — compact WEC timing-strip language, not dashboard cards */
.rd-strategy-grid {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0;
  padding-top: 12px; border-top: 1px solid var(--outline-soft);
}
.rd-strategy {
  --strategy-accent: var(--text-med);
  min-width: 0; padding-bottom: 16px;
}
.rd-strategy.is-qualifying { --strategy-accent: #76A9FF; }
.rd-strategy.is-race { --strategy-accent: var(--amber); }
.rd-strategy + .rd-strategy {
  padding-top: 18px; border-top: 2px solid var(--outline);
}
.rd-strategy-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 10px; padding-left: 10px;
  border-left: 3px solid var(--strategy-accent);
}
.rd-strategy-kicker { color: var(--strategy-accent); font-weight: 900; letter-spacing: 0.09em; }
.rd-strategy-counts { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.rd-stints { display: flex; align-items: end; width: 100%; min-height: 38px; }
.rd-stint {
  position: relative; flex: var(--stint-laps) 1 56px; min-width: 56px;
  padding: 0 8px;
}
.rd-stint + .rd-stint { border-left: 1px solid var(--outline); }
.rd-stint:first-child { padding-left: 0; }
.rd-stint:last-child { padding-right: 0; }
.rd-stint-meta {
  display: flex; min-height: 28px; flex-direction: column;
  align-items: center; justify-content: end; line-height: 13px;
}
.rd-stint-compound {
  color: var(--tyre-front); font-weight: 800; overflow: hidden;
  max-width: 100%; text-overflow: ellipsis; white-space: nowrap;
}
.rd-stint-bar {
  display: block; width: 100%; height: 7px; margin-top: 5px; border-radius: 1px;
  background: linear-gradient(to bottom, var(--tyre-front) 0 50%, var(--tyre-rear) 50% 100%);
}
.rd-strategy-fuel {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px;
  margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--outline-soft);
  color: var(--text-low); line-height: 16px;
}
.rd-fuel-kind { color: #F1667E; font-weight: 900; letter-spacing: 0.09em; }
.rd-fuel-stat { white-space: nowrap; }
.rd-fuel-separator { color: var(--outline); }

/* SheetLink → <details> sheets */
.rd-sheet { border-radius: 8px; }
.sheet-link { color: var(--amber); font-weight: 600; cursor: pointer; list-style: none; padding: 2px 0; display: inline-flex; gap: 4px; align-items: center; }
.sheet-link::-webkit-details-marker { display: none; }
.sheet-link span { font-weight: 700; transition: transform 0.15s; display: inline-block; }
.rd-sheet[open] .sheet-link span { transform: rotate(90deg); }
.sheet-body { margin-top: 14px; display: flex; flex-direction: column; gap: 14px; }
.ls-theo { display: flex; flex-direction: column; gap: 3px; }
.ls-theo-head { display: flex; align-items: center; justify-content: space-between; }
.ls-theo-head .label-m:first-child { font-weight: 600; }
.ls-table { border: 1px solid var(--outline); border-radius: 10px; overflow: hidden; }
.ls-row { display: flex; flex-direction: column; gap: 2px; padding: 7px 10px; }
.ls-row.alt { background: var(--surface2); }
.ls-main { display: flex; align-items: center; gap: 8px; }
.ls-num { width: 22px; font-weight: 700; flex: none; }
.ls-pos { color: var(--text-high); font-weight: 600; }
.ls-time { margin-left: auto; color: var(--text-high); }
.ls-time.t-pbest { color: var(--pos-green); font-weight: 700; }
.ls-time.t-gbest { color: var(--best-purple); font-weight: 700; }
.t-pbest { color: var(--pos-green); font-weight: 700; }
.t-gbest { color: var(--best-purple); font-weight: 700; }
.s-pbest { color: var(--pos-green); font-weight: 700; }
.s-best { color: var(--best-purple); font-weight: 700; }
.ls-sectors { display: flex; gap: 12px; }
.pit-badge {
  border-radius: 4px; background: var(--surface2); border: 1px solid var(--outline);
  color: var(--amber); font-weight: 700; padding: 1px 4px;
}
/* rating breakdown */
.bd-section { display: flex; flex-direction: column; gap: 8px; }
.bd-head { display: flex; align-items: center; gap: 8px; }
.bd-table { border: 1px solid var(--outline); border-radius: 10px; overflow: hidden; }
.bd-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; }
.bd-row.alt { background: var(--surface2); }
.bd-arrows { width: 56px; flex: none; }

/* split tabs */
.split-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.split-tab {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  border-radius: 8px; padding: 7px 12px; background: var(--surface1);
  border: 1px solid var(--outline); color: var(--text-med); font-weight: 700; white-space: nowrap;
}
a.split-tab:hover { background: var(--surface3); }
.split-tab.is-sel { background: var(--amber); border-color: var(--amber); color: var(--carbon); }
.split-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--amber); }
.split-tab.is-sel .split-dot { background: var(--carbon); }

/* session classification */
.sess { display: flex; flex-direction: column; gap: 6px; }
.sess-label { font-weight: 700; }
.cls-table { padding: 0; border-radius: 12px; overflow: hidden; }
.cls-row { display: flex; align-items: center; gap: 5px; padding: 7px 8px; min-width: 0; }
.cls-row.alt { background: var(--surface2); }
.cls-row.is-me { background: color-mix(in srgb, var(--amber) 12%, transparent); }
.cls-extra { display: none; }
.cls-check:checked + .cls-table .cls-extra { display: flex; }
.cls-check:checked + .cls-table .cls-more .when-closed { display: none; }
.cls-check:not(:checked) + .cls-table .cls-more .when-open { display: none; }
.cls-pos { width: 18px; flex: none; font-weight: 700; }
.cls-flag { width: 22px; flex: none; display: flex; justify-content: center; }
.cls-flag img { width: 21px; height: 16px; border-radius: 4px; border: 1px solid var(--outline); object-fit: cover; }
.cls-flag .cls-teamicon { width: 16px; height: 16px; border-radius: 50%; border: 0; }
.cls-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cls-name { color: var(--text-med); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cls-name.is-me { color: var(--text-high); font-weight: 600; }
.cls-badges { display: flex; flex-wrap: wrap; gap: 4px 5px; align-items: center; }
.cls-posbadge {
  display: inline-flex; align-items: center; border-radius: 5px; padding: 2px 4px;
  border: 1px solid var(--pc); color: var(--pc); font-weight: 700;
}
.cls-deltas { display: inline-flex; flex-direction: row; align-items: center; gap: 5px; font-size: 8px; line-height: 10px; font-weight: 700; }
.cls-deltas > span { display: inline-flex; align-items: center; gap: 2px; min-height: 10px; }
.rank-adjust-value {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  position: relative; width: 18px; min-width: 18px; height: 13px; vertical-align: middle; color: currentColor;
  overflow: hidden;
}
.rank-adjust-icon {
  display: block; flex: 0 0 auto; width: 18px; height: 13px; overflow: visible;
  color: currentColor; font-size: 18px; line-height: 13px; font-weight: 400; text-align: center;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.rank-adjust-down { transform: rotate(180deg); }
.rank-adjust-level-4 .rank-adjust-icon {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, calc(-50% - 2px));
}
.rank-adjust-level-4 .rank-adjust-icon + .rank-adjust-icon {
  transform: translate(-50%, calc(-50% + 2px));
}
.rd-stat .rank-adjust-value,
.bd-head .rank-adjust-value { width: 34px; min-width: 34px; height: 16px; }
.rd-stat .rank-adjust-icon,
.bd-head .rank-adjust-icon { width: 22px; height: 16px; font-size: 22px; line-height: 16px; }
.rd-stat .rank-adjust-level-4 .rank-adjust-icon,
.bd-head .rank-adjust-level-4 .rank-adjust-icon {
  transform: translate(-50%, calc(-50% - 2.5px));
}
.rd-stat .rank-adjust-level-4 .rank-adjust-icon + .rank-adjust-icon,
.bd-head .rank-adjust-level-4 .rank-adjust-icon + .rank-adjust-icon {
  transform: translate(-50%, calc(-50% + 2.5px));
}
.cls-sectors { display: flex; flex-wrap: wrap; gap: 2px 9px; }
.cls-time { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.cls-divider { background: var(--surface2); padding: 6px 10px; font-weight: 700; }
.cls-more {
  display: flex; align-items: center; justify-content: center; padding: 9px 0;
  background: var(--surface2); color: var(--amber); font-weight: 600; cursor: pointer;
}
.cls-more:hover { background: var(--surface3); }
.cls-team-details { display: block; }
.cls-team-details.cls-extra { display: none; }
.cls-check:checked + .cls-table .cls-team-details.cls-extra { display: block; }
.cls-team-summary { cursor: pointer; list-style: none; }
.cls-team-summary::-webkit-details-marker { display: none; }
.team-toggle {
  display: inline-flex; align-items: center; gap: 3px; border-radius: 5px;
  background: color-mix(in srgb, var(--amber) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--amber) 42%, transparent);
  color: var(--amber); padding: 2px 5px; font-weight: 800; white-space: nowrap;
}
.team-toggle-icon { width: 11px; height: 11px; transition: transform 0.15s ease; }
.cls-team-details[open] .team-toggle-icon { transform: rotate(90deg); }
.team-members { border-top: 1px solid var(--outline); background: rgba(0, 0, 0, 0.08); }
.team-member {
  display: flex; align-items: center; gap: 7px; min-width: 0;
  padding: 7px 10px 7px 52px;
}
.team-member.alt { background: color-mix(in srgb, var(--surface2) 55%, transparent); }
.team-member.is-me { background: color-mix(in srgb, var(--amber) 10%, transparent); }
.team-member-flag { width: 22px; flex: none; display: flex; justify-content: center; }
.team-member-flag img { width: 21px; height: 16px; border-radius: 4px; border: 1px solid var(--outline); object-fit: cover; }
.team-member-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.team-member-name { color: var(--text-med); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.team-member-name.is-me { color: var(--text-high); font-weight: 600; }
.team-member-badges { display: flex; flex-wrap: wrap; gap: 4px 5px; align-items: center; }

/* ------------------------------------------------- Steam achievements screen */
.ach-hero[hidden], .ach-empty[hidden], .ach-list[hidden], .ach-progress[hidden] { display: none !important; }
.ach-page { background: var(--carbon); }
.ach-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(286px, 1fr));
  gap: 12px; align-items: start;
}
.ach-topbar {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 0; min-width: 0;
}
.ach-topbar .circle-btn {
  width: 48px; height: 48px; border-radius: 24px; border: 0;
  background: transparent; color: var(--text-high);
}
.ach-topbar .circle-btn:hover { background: var(--surface1); }
.ach-topbar-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0; }
.ach-topbar-title .title-l { font-weight: 900; }
.ach-refresh {
  width: 48px; height: 48px; border-radius: 24px; border: 0; padding: 0;
  background: transparent; color: var(--amber); display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.ach-refresh:disabled { opacity: 0.48; cursor: default; }
.ach-refresh.is-loading .icon { display: none; }
.ach-refresh.is-loading::before {
  content: ""; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--amber) 28%, transparent);
  border-top-color: var(--amber); animation: ach-spin 0.8s linear infinite;
}
@keyframes ach-spin { to { transform: rotate(360deg); } }
.ach-hero {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; gap: 12px; padding: 14px;
  border-radius: 16px; background: var(--surface1);
  border: 1px solid color-mix(in srgb, var(--amber) 34%, transparent);
}
.ach-hero-row { display: flex; align-items: center; gap: 14px; }
.ach-hero-icon {
  width: 62px; height: 62px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center; color: var(--amber);
  background: color-mix(in srgb, var(--amber) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--amber) 42%, transparent);
}
.ach-hero-icon .icon { width: 32px; height: 32px; }
.ach-hero-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ach-hero-count { color: var(--text-high); font-weight: 900; white-space: nowrap; }
.ach-hero-pct { color: var(--amber); font-weight: 700; white-space: nowrap; }
.ach-hero .ach-progress { height: 8px; border-radius: 4px; }
.ach-hero .ach-progress span { border-radius: 4px; }
.ach-hero-note { color: var(--text-low); }
.ach-hero-note.is-error { color: var(--amber); }
.ach-list { display: contents; }
.ach-card {
  display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 12px;
  border-radius: 14px; background: var(--surface2);
  border: 1px solid var(--outline-soft); min-height: 0;
}
.ach-card.is-unlocked {
  background: var(--surface1);
  border-color: color-mix(in srgb, var(--amber) 26%, transparent);
}
.ach-card-main { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.ach-img {
  width: 64px; height: 64px; flex: none; border-radius: 12px; overflow: hidden;
  background: var(--surface3); border: 1px solid var(--outline);
  display: flex; align-items: center; justify-content: center; color: var(--text-low);
}
.ach-img img { width: 100%; height: 100%; object-fit: cover; }
.ach-img img.is-locked { opacity: 0.52; }
.ach-img .icon { width: 30px; height: 30px; }
.ach-card-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.ach-card-title {
  color: var(--text-med); font-weight: 900; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ach-card.is-unlocked .ach-card-title { color: var(--text-high); }
.ach-card-desc {
  color: var(--text-med); display: -webkit-box;
  -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.ach-card-foot { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ach-status {
  flex: none; border-radius: 6px; padding: 3px 8px;
  font-size: 11px; line-height: 16px; font-weight: 900; text-transform: uppercase;
  color: var(--text-low);
  background: color-mix(in srgb, var(--text-low) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--text-low) 40%, transparent);
}
.ach-status.is-unlocked {
  color: var(--amber);
  background: color-mix(in srgb, var(--amber) 12%, transparent);
  border-color: color-mix(in srgb, var(--amber) 40%, transparent);
}
.ach-unlock-label { flex: 1; min-width: 0; color: var(--text-low); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ach-skeleton { height: 158px; background: var(--surface1); border-color: var(--outline-soft); }
.ach-skeleton .ach-card-copy { gap: 8px; }
.sk {
  display: block; border-radius: 4px; background: var(--surface3);
}
.sk-title { width: 80%; height: 18px; }
.sk-line { width: 100%; height: 12px; }
.sk-short { width: 66%; }
.sk-pill { width: 82px; min-width: 82px; height: 22px; margin-top: auto; border-radius: 6px; }
.ach-empty {
  grid-column: 1 / -1; min-height: 420px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; text-align: center; padding: 16px;
}
.ach-empty .icon { width: 40px; height: 40px; color: var(--amber); }
.ach-error-retry { max-width: 160px; margin-top: 6px; }

/* ------------------------------------------------- track preview hero */
.tp { position: relative; width: 100%; height: 96px; background: var(--surface2); overflow: hidden; border-radius: 12px; }
.tp-tall { height: 170px; }
.tp-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tp-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.35); }
.tp-map { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); object-fit: contain; }
.tp-logo { position: absolute; top: 8px; left: 8px; height: 24px; max-width: 40%; object-fit: contain; }
.tp-tall .tp-logo { height: 28px; }
.tp-flag { position: absolute; top: 8px; right: 8px; width: 29px; height: 22px; border-radius: 4px; border: 1px solid var(--outline); object-fit: cover; }

/* ------------------------------------------------- suspensions */
.sus-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 64px 16px; text-align: center; }
.sus-ok { font-size: 36px; line-height: 44px; font-weight: 900; color: var(--skill-beginner); }
.sus-list { display: flex; flex-direction: column; gap: 12px; }
.sus-card {
  display: flex; flex-direction: column; gap: 10px; border-radius: 14px; padding: 16px;
  background: var(--surface1);
  border: 1px solid color-mix(in srgb, var(--flag-gray) 40%, transparent);
}
.sus-card.is-active { border-color: color-mix(in srgb, var(--class-hyper) 40%, transparent); }
.sus-head { display: flex; align-items: center; gap: 8px; }
.sus-status { border-radius: 6px; padding: 3px 8px; font-weight: 700; background: var(--flag-gray); color: #fff; }
.sus-card.is-active .sus-status { background: var(--class-hyper); }
.sus-dates { display: flex; flex-direction: column; gap: 4px; }
.sus-daterow { display: flex; align-items: center; gap: 8px; }
.sus-daterow .label-s { font-weight: 700; }
.sus-date { background: var(--surface3); border-radius: 4px; padding: 0 6px; }
.sus-permanent { color: var(--class-hyper); font-weight: 600; }

/* ------------------------------------------------- track breakdown grid */
.tb-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 360px) { .tb-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 800px) { .tb-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1160px) { .tb-grid { grid-template-columns: repeat(4, 1fr); } }
.tb-card {
  display: flex; flex-direction: column; border-radius: 14px; overflow: hidden;
  background: var(--surface1); border: 1px solid var(--outline);
}
.tb-card .tp { border-radius: 0; }
a.tb-card:hover { background: var(--surface2); }
.tb-body { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.tb-name {
  min-height: 40px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tb-dist { color: var(--dist-accent); font-weight: 700; }
.tb-chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* ------------------------------------------------- wide layout (>=900px, ProfileView `wide`) */
@media (min-width: 900px) {
  .pv-top { flex-direction: row; align-items: flex-start; gap: 12px; }
  .pv-header { flex: 1; }
  .pv-update { width: clamp(300px, 28vw, 360px); flex: none; }
  .pv-ratings-row { display: none; }
  .pv-stats-ratings { display: flex; }
  .pv-chart-grid { grid-template-columns: 1fr 1fr; }
  .pv-cols { grid-template-columns: 1fr 1fr; }
}