/* ───────────── Kits (themes follow the team shirt of the day) ───────────── */
/* Brand palette (Scorpio logo): red #e4222e · navy #1b252e · white #fbfcff · grays #a1a7ae #787f86 #554f57.
   The red/white/navy identity is constant; the kit of the day shifts the base surfaces. */
:root,
[data-kit='black'] {
  --brand-red: #e4222e;
  --bg: #121a20;
  --bg-2: #1b252e;
  --surface: #1f2a33;
  --surface-2: #28343e;
  --line: rgb(251 252 255 / 0.09);
  --text: #fbfcff;
  --muted: #a1a7ae;
  --accent: #e4222e;
  --accent-ink: #fbfcff;
  --card-1: #24303a;
  --card-2: #18222a;
  --card-hot-1: #4d1d26;
  --card-hot-2: #221c24;
  --wave: rgb(251 252 255 / 0.05);
  --shadow: 0 10px 30px -12px rgb(0 0 0 / 0.75);
  color-scheme: dark;
}

[data-kit='gray'] {
  --bg: #a1a7ae;
  --bg-2: #c4c8cd;
  --surface: #eceef0;
  --surface-2: #dcdfe2;
  --line: rgb(27 37 46 / 0.12);
  --text: #1b252e;
  --muted: #554f57;
  --accent: #e4222e;
  --accent-ink: #fbfcff;
  --card-1: #f1f3f5;
  --card-2: #cdd1d5;
  --card-hot-1: #ffe3e5;
  --card-hot-2: #eab3b8;
  --wave: rgb(251 252 255 / 0.4);
  --shadow: 0 10px 24px -14px rgb(27 37 46 / 0.55);
  color-scheme: light;
}

[data-kit='green'] {
  --bg: #00241a;
  --bg-2: #004225;
  --surface: #0a3a28;
  --surface-2: #0f4a33;
  --line: rgb(251 252 255 / 0.1);
  --text: #fbfcff;
  --muted: #a1b4aa;
  --accent: #e4222e;
  --accent-ink: #fbfcff;
  --card-1: #0d5134;
  --card-2: #003a21;
  --card-hot-1: #5c2a24;
  --card-hot-2: #1f3320;
  --wave: rgb(251 252 255 / 0.06);
  --shadow: 0 10px 30px -12px rgb(0 0 0 / 0.75);
  color-scheme: dark;
}

/* ───────────── Base ───────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  min-height: 100dvh;
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--text);
  background: radial-gradient(120% 60% at 50% 0%, var(--bg-2), var(--bg) 70%) fixed, var(--bg);
  transition: background-color 0.4s, color 0.4s;
  overscroll-behavior-y: contain;
}

button,
input {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: 0;
  background: none;
  touch-action: manipulation;
}

.muted {
  color: var(--muted);
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* ───────────── Header ───────────── */
.top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(14px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 26px
    max(16px, env(safe-area-inset-left));
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.brand-text {
  min-width: 0;
}

.logo {
  width: 48px;
  height: 48px;
  flex: none;
  color: var(--text);
  filter: drop-shadow(0 2px 6px rgb(0 0 0 / 0.25));
  animation: sting 7s ease-in-out infinite;
  transform-origin: 50% 60%;
}

@keyframes sting {
  0%, 88%, 100% { transform: rotate(0); }
  91% { transform: rotate(-9deg) scale(1.06); }
  94% { transform: rotate(6deg); }
}

.brand-text h1 {
  margin: 0;
  font-size: clamp(28px, 8.5vw, 44px);
  font-weight: 900;
  font-style: italic;
  font-stretch: 112%;
  letter-spacing: -0.02em;
  line-height: 0.95;
  text-transform: uppercase;
}

.brand-text p {
  margin: 5px 0 0;
  font-family: 'Michroma', 'Archivo', sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#totalPlays {
  display: block;
  margin-top: 3px;
  font-family: 'Archivo', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--accent);
}

#totalPlays:empty {
  display: none;
}

.top-actions {
  display: flex;
  gap: 8px;
  flex: none;
}

.icon-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  transition: transform 0.15s;
}

.icon-btn:active {
  transform: scale(0.92);
}

.icon-btn svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.icon-btn.kit-btn .shirt {
  width: 30px;
  height: 30px;
  --outline: var(--text);
}

.waves {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 14px;
  fill: var(--wave);
  pointer-events: none;
}

/* ───────────── Shirt rendering ───────────── */
/* Shirt symbols are styled through inherited variables (page CSS can't reach into <use>) */
.shirt {
  --shirt: var(--surface-2);
  stroke-width: 2;
  stroke-linejoin: round;
}

[data-kit='gray'] .icon-btn.kit-btn .shirt { --shirt: #9aa0a7; }
[data-kit='black'] .icon-btn.kit-btn .shirt { --shirt: #050505; }
[data-kit='green'] .icon-btn.kit-btn .shirt { --shirt: #004225; }

/* ───────────── Grid ───────────── */
main {
  padding: 8px max(16px, env(safe-area-inset-right)) calc(110px + env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
  max-width: 1200px;
  margin: 0 auto;
}

.grid {
  --cell: clamp(96px, 28vw, 150px);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--cell), 1fr));
  grid-auto-rows: var(--cell);
  grid-auto-flow: dense;
  gap: 10px;
}

@media (min-width: 700px) {
  .grid {
    --cell: 150px;
    gap: 14px;
  }
}

.empty {
  text-align: center;
  color: var(--muted);
  margin-top: 20vh;
  font-size: 18px;
}

/* ───────────── Card ───────────── */
.card {
  --heat: 0;
  --p: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  padding: 10px 10px 10px 12px;
  border-radius: 20px;
  overflow: hidden;
  isolation: isolate;
  text-align: left;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  background:
    linear-gradient(155deg,
      color-mix(in oklab, var(--card-1), var(--card-hot-1) calc(var(--heat) * 100%)),
      color-mix(in oklab, var(--card-2), var(--card-hot-2) calc(var(--heat) * 100%)));
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  transition: transform 0.18s cubic-bezier(0.3, 1.6, 0.5, 1), box-shadow 0.2s;
  will-change: transform;
}

.card:active {
  transform: scale(0.96);
}

/* decorative wave at the bottom of every card */
.card::after {
  content: '';
  position: absolute;
  inset: auto -10% -2px -10%;
  height: 38%;
  z-index: -1;
  background: var(--wave);
  -webkit-mask: radial-gradient(60% 38px at 50% 100%, #000 98%, transparent) 0 0 / 50% 100% repeat-x;
  mask: radial-gradient(60% 38px at 50% 100%, #000 98%, transparent) 0 0 / 50% 100% repeat-x;
  opacity: 0.9;
}

/* playback progress sweep */
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--accent);
  opacity: 0.22;
  transform-origin: left;
  transform: scaleX(var(--p));
}

.card.playing {
  border-color: color-mix(in oklab, var(--accent), transparent 30%);
  box-shadow: 0 0 0 2px var(--accent), var(--shadow);
  animation: thump 0.38s cubic-bezier(0.3, 1.8, 0.5, 1);
}

@keyframes thump {
  0% { transform: scale(0.94); }
  100% { transform: scale(1); }
}

.card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 4px;
}

.count {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px 3px 6px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  background: color-mix(in oklab, var(--text), transparent 88%);
}

.count svg {
  width: 10px;
  height: 10px;
  fill: currentColor;
}

.card.hot .count {
  background: var(--accent);
  color: var(--accent-ink);
}

.count.bump {
  animation: bump 0.45s cubic-bezier(0.3, 1.8, 0.5, 1);
}

@keyframes bump {
  0% { transform: scale(1.5); }
  100% { transform: scale(1); }
}

.more {
  display: grid;
  place-items: center;
  width: 34px;
  height: 30px;
  margin: -6px -6px 0 0;
  border-radius: 10px;
  color: var(--muted);
}

.more svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.more:active {
  background: var(--line);
}

.card-title {
  margin: 4px 0 0;
  font-size: calc(15px + var(--heat) * 4px);
  font-weight: 800;
  font-stretch: 92%;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-wrap: balance;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card.w2 .card-title { font-size: calc(19px + var(--heat) * 4px); -webkit-line-clamp: 2; }
.card.w3 .card-title { font-size: calc(24px + var(--heat) * 6px); font-style: italic; font-weight: 900; -webkit-line-clamp: 2; }

.card-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 6px;
  min-height: 24px;
}

.chips {
  display: flex;
  gap: 4px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: -2px;
}

.chips::-webkit-scrollbar {
  display: none;
}

.card.w2 .chips {
  flex-wrap: wrap;
}

.chip {
  flex: none;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.1;
  background: color-mix(in oklab, var(--text), transparent 86%);
  border: 1px solid transparent;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chip.solo {
  background: none;
  padding-left: 0;
  color: var(--muted);
}

button.chip:active,
button.chip.on {
  background: var(--accent);
  color: var(--accent-ink);
}

.eq {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 18px;
  opacity: 0;
  transition: opacity 0.2s;
  flex: none;
}

.eq i {
  width: 3px;
  height: 100%;
  border-radius: 2px;
  background: var(--accent);
  transform-origin: bottom;
  transform: scaleY(0.25);
}

.card.playing .eq {
  opacity: 1;
}

.card.playing .eq i {
  animation: eq 0.5s ease-in-out infinite alternate;
}

.card.playing .eq i:nth-child(2) { animation-delay: -0.2s; }
.card.playing .eq i:nth-child(3) { animation-delay: -0.35s; }
.card.playing .eq i:nth-child(4) { animation-delay: -0.1s; }

@keyframes eq {
  to { transform: scaleY(1); }
}

.crown {
  position: absolute;
  top: 8%;
  right: 6px;
  height: 84%;
  aspect-ratio: 1;
  color: var(--text);
  opacity: 0.14;
  z-index: -1;
  transform: rotate(-12deg);
  pointer-events: none;
}

/* ───────────── FAB ───────────── */
.fab {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 56px;
  padding: 0 22px 0 18px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 16px;
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 12px 28px -8px color-mix(in oklab, var(--accent), black 30%), 0 2px 0 rgb(255 255 255 / 0.2) inset;
  transition: transform 0.15s;
}

.fab span {
  font-size: 28px;
  line-height: 0;
  margin-top: -2px;
}

.fab:active {
  transform: scale(0.94);
}

/* ───────────── Dialogs ───────────── */
dialog {
  color: var(--text);
  border: 0;
  padding: 0;
}

dialog::backdrop {
  background: rgb(0 0 0 / 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.sheet {
  width: min(560px, 100%);
  max-width: 100%;
  max-height: min(88dvh, 900px);
  margin: auto auto 0;
  border-radius: 26px 26px 0 0;
  background: var(--surface);
  box-shadow: 0 -10px 40px rgb(0 0 0 / 0.35);
  overscroll-behavior: contain;
}

@media (min-width: 640px) {
  .sheet {
    margin: auto;
    border-radius: 26px;
  }
}

.sheet[open] {
  animation: sheet-in 0.32s cubic-bezier(0.2, 1, 0.3, 1);
}

@keyframes sheet-in {
  from { transform: translateY(40px); opacity: 0; }
}

.sheet-inner {
  padding: 18px 18px calc(22px + env(safe-area-inset-bottom));
}

.sheet-inner::before {
  content: '';
  display: block;
  width: 42px;
  height: 5px;
  margin: -6px auto 12px;
  border-radius: 9px;
  background: var(--line);
}

.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.sheet h2 {
  margin: 0;
  font-size: 26px;
  font-weight: 900;
  font-style: italic;
  font-stretch: 105%;
  line-height: 1.05;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.sheet .close {
  flex: none;
  box-shadow: none;
  font-size: 16px;
}

.sheet-sub {
  margin: 6px 0 16px;
  color: var(--muted);
  font-size: 14px;
}

.voice {
  margin: 12px 0;
  border-radius: 18px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  overflow: hidden;
}

.voice-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 10px 12px;
}

.voice-head .name {
  flex: 1;
  min-width: 0;
  font-weight: 800;
  font-size: 17px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.voice-head .name small {
  display: block;
  font-weight: 500;
  font-size: 12px;
  color: var(--muted);
}

.play-btn {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
}

.play-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.play-btn.sm {
  width: 34px;
  height: 34px;
  background: color-mix(in oklab, var(--text), transparent 85%);
  color: var(--text);
}

.play-btn.sm svg {
  width: 14px;
  height: 14px;
}

.ghost-btn {
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  background: color-mix(in oklab, var(--text), transparent 90%);
  white-space: nowrap;
}

.ghost-btn:active {
  transform: scale(0.96);
}

.ghost-btn.danger {
  color: #ff6b6b;
}

[data-kit='gray'] .ghost-btn.danger {
  color: #b3261e;
}

.versions {
  border-top: 1px solid var(--line);
}

.versions summary {
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
}

.versions summary::-webkit-details-marker {
  display: none;
}

.versions summary::before {
  content: '▸ ';
}

.versions[open] summary::before {
  content: '▾ ';
}

.version {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-top: 1px dashed var(--line);
  font-size: 13px;
}

.version .meta {
  flex: 1;
  min-width: 0;
}

.version .meta b {
  display: block;
  font-size: 13px;
}

.version .meta span {
  color: var(--muted);
  font-size: 12px;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.badge {
  display: inline-block;
  padding: 2px 7px;
  margin-left: 4px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  vertical-align: 1px;
  background: var(--accent);
  color: var(--accent-ink);
}

.voice-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 12px 12px;
}

.sheet-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.primary-btn {
  width: 100%;
  height: 52px;
  margin-top: 16px;
  border-radius: 16px;
  font-weight: 800;
  font-size: 16px;
  background: var(--accent);
  color: var(--accent-ink);
}

.primary-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.sheet-actions .primary-btn {
  margin-top: 0;
}

/* ───────────── Upload form ───────────── */
.upload-form .muted {
  margin: 6px 0 14px;
  font-size: 14px;
}

.field {
  display: block;
  margin-bottom: 12px;
}

.field span {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}

.field input {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  font-size: 16px; /* prevents iOS zoom */
}

.seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  margin: 4px 0 12px;
  border-radius: 14px;
  background: var(--surface-2);
}

.seg button {
  height: 40px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
}

.seg button[aria-selected='true'] {
  background: var(--surface);
  box-shadow: var(--shadow);
}

.src-record {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 4px;
}

.rec-btn {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  flex: none;
  border-radius: 50%;
  border: 4px solid var(--text);
}

.rec-dot {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #e5322d;
  transition: all 0.2s;
}

.rec-btn.on .rec-dot {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  animation: pulse 1s ease-in-out infinite alternate;
}

@keyframes pulse {
  to { opacity: 0.6; }
}

.rec-meta strong {
  display: block;
  font-size: 16px;
}

.rec-meta .muted {
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}

.file-drop {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 86px;
  padding: 16px;
  border-radius: 16px;
  border: 2px dashed var(--line);
  text-align: center;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
}

.file-drop input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

#preview {
  width: 100%;
  margin-top: 12px;
}

.progress {
  height: 6px;
  margin-top: 14px;
  border-radius: 9px;
  background: var(--surface-2);
  overflow: hidden;
}

.progress i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width 0.15s;
}

.error {
  margin: 12px 0 0;
  color: #ff6b6b;
  font-weight: 700;
  font-size: 14px;
}

/* ───────────── Kit picker ───────────── */
.kit-dialog {
  width: min(520px, calc(100% - 24px));
  max-height: calc(100dvh - 24px);
  border-radius: 28px;
  background: var(--surface);
  text-align: center;
  overflow: auto;
}

.kit-dialog[open] {
  animation: pop 0.4s cubic-bezier(0.2, 1.4, 0.4, 1);
}

@keyframes pop {
  from { transform: scale(0.85); opacity: 0; }
}

.kit-dialog form {
  padding: 22px 16px 18px;
}

.kit-logo {
  width: 168px;
  aspect-ratio: 112 / 70;
  color: var(--text);
}

.kit-dialog h2 {
  margin: 4px 0 2px;
  font-size: 30px;
  font-weight: 900;
  font-style: italic;
  font-stretch: 110%;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

.kit-dialog p {
  margin: 0 0 16px;
  font-size: 14px;
}

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

.kit-row-label {
  grid-column: 1 / -1;
  margin: 6px 0 -2px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
}

.kit-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px 8px;
  border-radius: 18px;
  background: var(--surface-2);
  border: 2px solid transparent;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.15;
  transition: transform 0.15s, border-color 0.15s;
}

.kit-opt:active {
  transform: scale(0.94);
}

.kit-opt.current {
  border-color: var(--accent);
}

/* picker shirts: solid colour, no outline — details are a slightly different shade */
.kit-opt svg {
  width: 100%;
  max-width: 76px;
  aspect-ratio: 1;
  --trim: var(--detail);
}

.kit-opt[data-color='gray'] svg { --shirt: #9aa0a7; --detail: #6b7178; }
.kit-opt[data-color='black'] svg { --shirt: #0a0a0a; --detail: #45454c; }
.kit-opt[data-color='green'] svg { --shirt: #004225; --detail: #1f8052; }

/* ───────────── Install bar ───────────── */
.install-bar {
  position: fixed;
  left: max(16px, env(safe-area-inset-left));
  right: max(16px, env(safe-area-inset-right));
  bottom: calc(86px + env(safe-area-inset-bottom));
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 520px;
  margin: 0 auto;
  padding: 10px 8px 10px 12px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow), 0 16px 40px -10px rgb(0 0 0 / 0.5);
  animation: sheet-in 0.32s cubic-bezier(0.2, 1, 0.3, 1);
}

.install-bar[hidden] {
  display: none;
}

.install-bar .logo-sm {
  width: 34px;
  height: 34px;
  flex: none;
  color: var(--text);
}

.install-bar span {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
}

.install-go {
  flex: none;
  height: 38px;
  padding: 0 14px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 14px;
  background: var(--accent);
  color: var(--accent-ink);
}

.install-x {
  flex: none;
  width: 32px;
  height: 38px;
  color: var(--muted);
  font-size: 15px;
}

/* full-screen colour wipe when the kit changes */
.wipe {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  clip-path: circle(0 at var(--x) var(--y));
  animation: wipe 0.6s cubic-bezier(0.6, 0, 0.3, 1) forwards;
}

@keyframes wipe {
  70% { clip-path: circle(150vmax at var(--x) var(--y)); opacity: 1; }
  100% { clip-path: circle(150vmax at var(--x) var(--y)); opacity: 0; }
}

/* ───────────── Toast ───────────── */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(86px + env(safe-area-inset-bottom));
  z-index: 50;
  max-width: calc(100% - 32px);
  padding: 12px 18px;
  border-radius: 14px;
  background: var(--text);
  color: var(--bg);
  font-weight: 700;
  font-size: 14px;
  box-shadow: var(--shadow);
  transform: translate(-50%, 20px);
  opacity: 0;
  pointer-events: none;
  transition: all 0.25s;
}

.toast.show {
  transform: translate(-50%, 0);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}