/* ---------------------------------------------------------------------------
   Account pages: profile, cashback, rewards.
   Same design language as the rest of the site — white ground, graphite text,
   one restrained red accent — but laid out like a premium account interface
   rather than a dashboard. No borders where whitespace will do.
--------------------------------------------------------------------------- */
:root {
  --card: #fff;
  --surface: #f5f6f7;
  --hair: rgba(23, 26, 32, .09);
}

body.acct {
  background: var(--surface);
  padding-top: var(--nav-h);
}

.acct-main {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 64px) var(--pad) clamp(72px, 10vh, 120px);
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.4vw, 26px);
}

/* Sections rise into place once, then stay put. */
[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s cubic-bezier(.2, .7, .3, 1),
              transform .55s cubic-bezier(.2, .7, .3, 1);
}
[data-reveal].in { opacity: 1; transform: none; }

/* ------------------------------------------------------------------- hero */
.acct-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 56px);
  padding: clamp(26px, 3.4vw, 40px);
  border-radius: 10px;
  background: var(--card);
  box-shadow: 0 1px 2px rgba(23, 26, 32, .05), 0 12px 34px -26px rgba(23, 26, 32, .5);
}
.acct-hero-id { display: flex; align-items: center; gap: 18px; min-width: 0; }
.avatar {
  image-rendering: pixelated;
  width: 96px;   /* the logo carries its own margin, so it needs a little more room */
  height: auto;
  flex: none;
}
.acct-hero-name { min-width: 0; }

/* The name reads as text until you click it. */
.name-field {
  display: block;
  width: 100%;
  max-width: 320px;
  padding: 2px 6px;
  margin: 0 0 6px -6px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  font-family: inherit;
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  transition: background .16s ease, border-color .16s ease;
}
.name-field:hover { background: rgba(23, 26, 32, .04); }
.name-field:focus { outline: none; background: #fff; border-color: var(--blue); }

.level-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.level {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
}
.level-note { font-size: 12px; color: var(--muted); }

.acct-hero-figures {
  display: flex;
  gap: clamp(28px, 5vw, 64px);
  flex-wrap: wrap;
}
.figure { display: flex; flex-direction: column; gap: 4px; position: relative; }
.figure-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.figure-value {
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.figure-value.accent { color: var(--ink); }
.figure-unit { font-size: 12px; color: var(--muted); }

/* A quiet deposit note after a run, not a celebration. */
.gain {
  align-self: flex-start;
  margin-top: 4px;
  padding: 3px 9px;
  border-radius: 3px;
  background: rgba(62, 106, 225, .1);
  color: var(--blue);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  white-space: nowrap;
  animation: gain-in .5s cubic-bezier(.2, .8, .3, 1) both;
}
@keyframes gain-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ panel */
.panel {
  padding: clamp(22px, 2.8vw, 34px);
  border-radius: 10px;
  background: var(--card);
  box-shadow: 0 1px 2px rgba(23, 26, 32, .05), 0 12px 34px -28px rgba(23, 26, 32, .45);
}
.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.panel-head h2 { font-size: clamp(17px, 1.8vw, 21px); font-weight: 500; }
.panel-sub, .rate { font-size: 12px; color: var(--muted); max-width: 46ch; }
.rate { font-variant-numeric: tabular-nums; }
.link {
  font-size: 13px;
  font-weight: 500;
  color: var(--blue);
  text-decoration: none;
}
.link:hover { text-decoration: underline; }

.fineprint {
  margin: 20px 0 0;
  font-size: 11px;
  line-height: 1.6;
  color: #8b8e93;
  max-width: 62ch;
}

/* ------------------------------------------------------------- progress -->*/
.track {
  height: 6px;
  border-radius: 3px;
  background: rgba(23, 26, 32, .08);
  overflow: hidden;
}
.track > span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, #5b84ec, var(--blue));
  transition: width 1.1s cubic-bezier(.2, .8, .25, 1);
}
.track-thin { height: 4px; max-width: 320px; }

.next { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.panel > .next:last-child { margin-bottom: 0; }
.next-figures {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.next-figures strong {
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.next-main { display: flex; flex-direction: column; gap: 6px; }
.next-side { display: flex; flex-direction: column; gap: 4px; text-align: right; }
.next-side span, .next-remaining { font-size: 13px; color: var(--muted); }
.next-side span:first-child { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
@media (max-width: 620px) { .next-side { text-align: left; } }

/* -------------------------------------------------------------- ladder --*/
.ladder {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--hair);
  border-radius: 8px;
  overflow: hidden;
}
.ladder-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  background: var(--card);
  transition: background .2s ease;
}
.ladder-step.is-done { background: #fbfcfd; }
.ladder-coins { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ladder-arrow {
  flex: none;
  width: 14px;
  height: 1px;
  background: var(--hair);
  position: relative;
}
.ladder-arrow::after {
  content: '';
  position: absolute;
  right: 0; top: -2px;
  width: 4px; height: 4px;
  border-top: 1px solid rgba(23, 26, 32, .25);
  border-right: 1px solid rgba(23, 26, 32, .25);
  transform: rotate(45deg);
}
.ladder-value {
  margin-left: auto;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.ladder-step.is-done .ladder-value { color: var(--red); }

/* --------------------------------------------------------------- stats --*/
.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--hair);
  border-radius: 8px;
  overflow: hidden;
}
.stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px 20px;
  background: var(--card);
}
.stat-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.stat-value {
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat-note { font-size: 12px; color: var(--muted); }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.chip {
  padding: 5px 11px;
  border-radius: 4px;
  background: var(--surface);
  font-size: 12px;
  color: var(--text);
}

/* ----------------------------------------------------------------- shop --*/
.shop-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 56px);
  flex-wrap: wrap;
  padding: clamp(30px, 4vw, 52px);
  border-radius: 10px;
  background: var(--card);
  box-shadow: 0 1px 2px rgba(23, 26, 32, .05), 0 12px 34px -26px rgba(23, 26, 32, .5);
}
.shop-hero-copy { max-width: 46ch; }
.shop-hero-copy h1 {
  margin: 0;
  font-size: clamp(26px, 3.6vw, 40px);
  font-weight: 500;
  letter-spacing: -0.015em;
}
.shop-hero-figures { display: flex; gap: clamp(24px, 4vw, 48px); flex-wrap: wrap; }
.panel-head-side {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Product presentation follows the store it comes from: big photography on a
   near-white tile, one line of type per fact, almost no borders. */
.panel-shop .panel-head { align-items: flex-start; }
.freshness { font-size: 11px; color: var(--muted); white-space: nowrap; }
.freshness.is-stale { color: #a8752a; }

.applier {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 18px 20px;
  margin-bottom: 20px;
  border-radius: 8px;
  background: var(--surface);
}
.applier-figure { display: flex; align-items: baseline; gap: 10px; }
.applier-figure strong {
  font-size: 26px;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.applier-coins, .applier-avail { font-size: 12px; color: var(--muted); }
.applier-controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.amounts { display: flex; gap: 6px; flex-wrap: wrap; }
.amount {
  min-width: 54px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--hair);
  border-radius: 4px;
  background: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease, background .16s ease;
}
.amount:hover { border-color: rgba(23, 26, 32, .3); }
.amount.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }

.shop-cats {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.shop-cat {
  padding: 6px 12px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition: background .16s ease, color .16s ease;
}
.shop-cat:hover { background: var(--surface); color: var(--text); }
.shop-cat.is-on { background: var(--surface); color: var(--ink); }

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 20px;
}
.product {
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  background: var(--card);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.2, .8, .3, 1);
  transition-delay: calc(var(--i, 0) * 35ms);
}
.product-grid.in .product { opacity: 1; transform: none; }

.product-shot {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--hair);
  border-radius: 8px;
  background: #fff;
  cursor: zoom-in;
  overflow: hidden;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s cubic-bezier(.2,.8,.3,1);
}
.product-shot img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: 12px;
  transition: transform .35s cubic-bezier(.2, .8, .3, 1);
}
.product:hover .product-shot {
  transform: translateY(-3px);
  border-color: rgba(23, 26, 32, .16);
  box-shadow: 0 18px 40px -28px rgba(23, 26, 32, .6);
}
.product:hover .product-shot img { transform: scale(1.04); }

.product-body { padding: 14px 2px 0; display: flex; flex-direction: column; flex: 1; }
.product-cat {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.product-name {
  margin: 7px 0 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink);
}
.product-price {
  margin-top: 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.product-sums { margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--hair); }
.product-sums > div, .detail-sums > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 0;
}
.product-sums dt, .detail-sums dt { font-size: 12px; color: var(--muted); }
.product-sums dd, .detail-sums dd {
  margin: 0;
  font-size: 13px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.product-sums .minus, .detail-sums .minus { color: var(--red); }
.product-sums .after, .detail-sums .is-total dd { font-weight: 500; }
.after.tick { animation: tick .45s cubic-bezier(.2, .9, .3, 1); }
@keyframes tick {
  0% { transform: translateY(-5px); opacity: .3; }
  100% { transform: none; opacity: 1; }
}
.product-link {
  margin-top: 12px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--blue);
  text-decoration: none;
}
.product-link:hover { text-decoration: underline; }

/* ------------------------------------------------------------ detail panel */
.detail {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: var(--pad);
  background: rgba(18, 20, 24, .5);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease;
}
.detail.show { opacity: 1; pointer-events: auto; }
body.detail-open { overflow: hidden; }
.detail-card {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(20px, 3vw, 40px);
  width: min(880px, 100%);
  max-height: 90vh;
  overflow: auto;
  padding: clamp(22px, 3vw, 36px);
  border-radius: 12px;
  background: #fff;
  transform: translateY(14px) scale(.98);
  transition: transform .34s cubic-bezier(.2, .9, .3, 1);
}
.detail.show .detail-card { transform: none; }
@media (max-width: 720px) { .detail-card { grid-template-columns: 1fr; } }

.detail-close {
  position: absolute;
  top: 10px; right: 12px;
  width: 32px; height: 32px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
}
.detail-close:hover { background: var(--surface); color: var(--ink); }
.detail-shot {
  border: 1px solid var(--hair);
  border-radius: 8px;
  background: #fff;
  display: grid;
  place-items: center;
  padding: 14px;
}
.detail-shot img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  opacity: 0;
  transform: scale(.98);
  transition: opacity .45s ease, transform .45s cubic-bezier(.2, .8, .3, 1);
}
.detail-shot img.in { opacity: 1; transform: none; }
.detail-body { display: flex; flex-direction: column; }
.detail-body h3 {
  margin: 8px 0 0;
  font-size: clamp(19px, 2.2vw, 25px);
  font-weight: 500;
  line-height: 1.25;
}
.detail-sums { margin: 22px 0 22px; }
.detail-sums .is-total {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--hair);
}
.detail-sums .is-total dd { font-size: 19px; }
.detail-body .btn { min-width: 0; width: 100%; }
.detail-note { margin: 12px 0 0; font-size: 11px; line-height: 1.55; color: #8b8e93; }

/* -------------------------------------------------------------- history --*/
.runs { margin: 0; padding: 0; list-style: none; }
.run {
  display: grid;
  grid-template-columns: 90px 1fr auto auto 74px;
  align-items: center;
  gap: 14px;
  padding: 14px 4px;
  border-top: 1px solid var(--hair);
  font-size: 13px;
}
.run:first-child { border-top: 0; }
.run-id { font-weight: 500; color: var(--ink); }
.run-meta { color: var(--muted); font-size: 12px; }
.run-kills { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.run-coins { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.run-reward { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
  .run { grid-template-columns: 1fr auto; grid-auto-rows: min-content; row-gap: 4px; }
  .run-meta { grid-column: 1 / -1; order: 3; }
  .run-kills { display: none; }
}

.empty { margin: 0; padding: 18px 0; font-size: 13px; color: var(--muted); }

/* ------------------------------------------------------- cashback page --*/
.balance-hero {
  padding: clamp(34px, 5vw, 64px) clamp(24px, 4vw, 48px);
  border-radius: 10px;
  background: var(--card);
  box-shadow: 0 1px 2px rgba(23, 26, 32, .05), 0 12px 34px -26px rgba(23, 26, 32, .5);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
}
.balance-figure { display: flex; align-items: center; gap: 16px; }
.balance-coin { image-rendering: pixelated; width: 42px; height: auto; }
.balance-value {
  font-size: clamp(46px, 8vw, 82px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.balance-unit {
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.balance-reward {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--hair);
  width: min(320px, 100%);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.balance-hero .gain { align-self: center; margin-top: 12px; }

/* -------------------------------------------------------- rewards page --*/
.rewards-hero {
  padding: clamp(30px, 4vw, 52px);
  border-radius: 10px;
  background: var(--card);
  box-shadow: 0 1px 2px rgba(23, 26, 32, .05), 0 12px 34px -26px rgba(23, 26, 32, .5);
}
.eyebrow-plain {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}
.rewards-hero h1 {
  margin: 0;
  font-size: clamp(26px, 3.6vw, 40px);
  font-weight: 500;
  letter-spacing: -0.015em;
}
.rewards-lede {
  margin: 14px 0 0;
  max-width: 56ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}
.rewards-figures {
  display: flex;
  gap: clamp(28px, 5vw, 64px);
  flex-wrap: wrap;
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--hair);
}

.acct-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: clamp(22px, 3vw, 32px) clamp(24px, 3vw, 36px);
  border-radius: 10px;
  background: var(--ink);
}
.acct-cta p { margin: 0; color: #c9ccd1; font-size: 15px; }

[data-summary] { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
  .ladder { grid-template-columns: repeat(2, 1fr); }
  [data-summary] { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .ladder { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
  .track > span, .reward, .reward-art img { transition: none; }
}

/* --------------------------------------------------- Tesla account (soon)
   Placeholder for a future sign-in. It is deliberately inert: no handler, no
   href, disabled — nothing here talks to Tesla. */
.acct-hero-link {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  padding-top: clamp(18px, 2.4vw, 26px);
  border-top: 1px solid var(--line);
}
.tesla-login {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .02em;
  cursor: not-allowed;
}
/* Dim the label, not the mark — an opacity on the button would wash the logo. */
.tesla-login-text { color: #5c5e62; }
.tesla-mark {
  width: 16px;
  height: auto;
  flex: none;
  fill: #e82127;          /* Tesla red, traced from the official mark */
}
.soon-pill {
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(23, 26, 32, .08);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}