.chip, .paybtn, .field, .consent, .dseg { touch-action: manipulation; }
.lg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
html { scroll-behavior: smooth; }
body { padding-bottom: 170px; font-family: var(--sans); }
.wrap { max-width: 520px; margin: 0 auto; padding: 0 16px; }
.step:focus, .step .label:focus { outline: none; }
.chip:focus-visible, .field:focus-visible, .paybtn:focus-visible, .dseg:focus-visible,
#nextBtn:focus-visible, #backBtn:focus-visible {
  outline: 2px solid var(--accent-2); outline-offset: 2px;
}
:root {
  --spring: linear(0, .3 14%, .8 30%, 1.03 50%, 1);
  --settle: linear(0, .4 14%, .86 34%, 1.02 56%, 1);
  --rise: 8px;
  --shift: 14px;
  --card-shadow: 0 1px 2px rgba(var(--ink-rgb), .04), 0 14px 34px -18px rgba(var(--ink-rgb), .22);
  --glass-rim: color-mix(in srgb, #fff 50%, transparent);
  --glass-spec: color-mix(in srgb, #fff 75%, transparent);
  --glass-spec-2: color-mix(in srgb, #fff 28%, transparent);
}

.top {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(12px + env(safe-area-inset-top)) 0 6px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand img { width: 32px; height: auto; }
.brand span { display: inline-flex; flex-direction: column; gap: 1px; }
.brand b { font-family: var(--serif); font-size: 19px; line-height: 1.1; font-weight: 600; }
.brand small { font-size: 11px; font-weight: 500; color: var(--muted); white-space: nowrap; }

.wiz-head { display: flex; align-items: baseline; gap: 8px; margin-top: 14px; min-height: 22px; }
#stepName { font-size: 15px; font-weight: 600; color: var(--ink); }
#stepCounter { font-size: 13px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
#noviceBadge {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  color: var(--accent); font-size: 12.5px; font-weight: 500;
}
#noviceBadge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-2); }
#stepProgress {
  height: 4px; margin: 10px 0 14px; border-radius: 4px;
  background: var(--surface-3); overflow: hidden;
}
#stepProgress i {
  display: block; height: 100%; width: var(--progress, 0%); border-radius: 4px;
  background: var(--accent-fill); transition: width var(--slow) var(--ease);
}

.step { display: none; }
.step.current {
  display: block; position: relative; overflow: hidden; isolation: isolate;
  -webkit-backdrop-filter: blur(12px) saturate(1.55);
  backdrop-filter: blur(12px) saturate(1.55);
  backdrop-filter: url(#lgGlassB);
  border: 1px solid var(--glass-rim); border-radius: 26px;
  padding: 22px 20px 24px;
  box-shadow: var(--card-shadow);
  animation: stepIn .3s var(--ease);
}
.step.current.closing, #dock.closing {
  opacity: 0; transform: translateY(12px) scale(.98);
  transition: opacity .26s var(--ease), transform .26s var(--ease);
}
.step.current::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(260px circle at var(--mx, 50%) var(--my, -30%),
      color-mix(in srgb, #fff 36%, transparent), transparent 70%),
    color-mix(in srgb, var(--surface) 32%, transparent);
  box-shadow:
    inset 0 1.5px 1px var(--glass-spec),
    inset 1px 0 1px var(--glass-spec-2),
    inset 0 -1px 1px var(--glass-spec-2);
}
@keyframes stepIn {
  from { opacity: 0; transform: translateX(calc(var(--shift) * var(--step-dir, 1))); }
  to   { opacity: 1; transform: none; }
}
@keyframes fade {
  from { opacity: 0; transform: translateY(var(--rise)); }
  to   { opacity: 1; transform: none; }
}
@keyframes chipIn {
  from { opacity: 0; transform: translateY(var(--rise)); }
  to   { opacity: 1; transform: none; }
}

.step .label {
  font-family: var(--serif); font-size: 26px; font-weight: 600; letter-spacing: -.01em; line-height: 1.15;
  color: var(--ink); margin: 0 0 16px; text-wrap: balance;
}
.step .label.sub {
  font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .01em;
  color: var(--muted); margin: 20px 0 8px;
}
.step .label + .label.sub { margin-top: 0; }
.step .consent { margin-top: 18px; }
.muted-note { font-size: 13.5px; line-height: 1.5; color: var(--muted); margin: 0 0 10px; }
.fine { margin: 14px 4px 0; text-align: center; font-size: 11.5px; color: var(--faint); }
.fine span, .fine a { white-space: nowrap; }
.fine a { color: inherit; text-decoration: none; }
.fine[hidden] { display: none; }
#slotsHint.no-slots {
  padding: 11px 13px; border-radius: 10px;
  background: var(--warn-bg); color: var(--warn); font-weight: 500;
}
#slotsNote { margin: 10px 0 0; }
.hint-tip {
  font-size: 13px; line-height: 1.5; color: var(--ink-soft);
  background: color-mix(in srgb, var(--surface-2) 45%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius: 16px; padding: 10px 12px; margin: 0 0 12px;
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips.two, .chips.tight { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.chips.tight { gap: 8px; }
.chips.tight .chip { padding: 12px 6px; font-size: 14px; }
.chip[hidden] { display: none; }
.chip {
  padding: 13px 14px; text-align: center;
  font-size: 14.5px; font-weight: 500; color: var(--ink);
  background: color-mix(in srgb, var(--surface) 42%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); border-radius: 16px;
  box-shadow: inset 0 1px 0 var(--glass-spec-2);
  cursor: pointer; user-select: none;
  transition: background var(--base) var(--settle), color var(--base) var(--settle),
              border-color var(--base) var(--settle), box-shadow var(--base) var(--settle),
              transform var(--fast) var(--settle);
}
.chip.on {
  border-color: var(--accent-fill);
  background: color-mix(in srgb, var(--accent-fill) 12%, color-mix(in srgb, var(--surface) 55%, transparent));
  color: var(--ink); font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--accent-fill), inset 0 1px 0 var(--glass-spec-2);
}
.chip .price { display: block; font-size: 12px; font-weight: 400; color: var(--muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
.chip.on .price { color: var(--accent); }
.chip.skel { min-height: 48px; color: transparent; pointer-events: none; animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .45; } }
#slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.coach-box { display: grid; gap: 10px; }
.chip.coach.hero {
  position: relative; flex-direction: row; align-items: center; text-align: left; gap: 14px;
  padding: 16px 16px 16px 14px;
}
.chip.coach.hero .coach-ava { width: 52px; height: 52px; margin: 0; flex: 0 0 auto; font-size: 22px; background: color-mix(in srgb, var(--accent-fill) 18%, transparent); color: var(--accent); }
.chip.coach.hero.on .coach-ava { background: var(--accent-fill); color: #fff; }
.coach-hero-text { display: grid; gap: 3px; min-width: 0; }
.coach-hero-text b { font-size: 16px; }
.coach-hero-text small { white-space: normal; }
.coach-badge {
  position: absolute; top: -9px; right: 14px; padding: 3px 9px; border-radius: 999px;
  font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  background: var(--accent-fill); color: #fff;
}
.coach-toggle {
  width: 100%; min-height: 44px; border: 1px dashed color-mix(in srgb, var(--ink) 25%, transparent); border-radius: 14px;
  background: transparent; color: var(--accent); cursor: pointer;
  font-family: var(--sans); font-size: 14px; font-weight: 600;
}
.coach-toggle::after { content: " ▾"; }
.coach-toggle[aria-expanded="true"]::after { content: " ▴"; }
.coach-list { display: grid; gap: 6px; }
.coach-list[hidden] { display: none; }
.coach-list .label.sub { margin: 6px 0 2px; }
.coaches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.chip.coach { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 10px 12px; text-align: center; }
.chip.coach b { font-size: 14.5px; font-weight: 600; line-height: 1.2; }
.chip.coach small { font-size: 12px; color: var(--muted); line-height: 1.3; }
.coach-ava {
  width: 56px; height: 56px; border-radius: 50%; overflow: hidden; margin-bottom: 4px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-fill); color: #fff; font-weight: 700; font-size: 18px; letter-spacing: .5px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--surface) 80%, transparent);
}
.coach-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.coach-ava > span { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.chip.coach.any .coach-ava { background: color-mix(in srgb, var(--accent-fill) 18%, transparent); color: var(--accent); font-size: 22px; }
.chip.coach.on .coach-ava { box-shadow: 0 0 0 3px var(--accent-fill); }
#slots .chip { padding: 11px 6px; font-size: 15.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
#slots .chip.on { background: var(--accent-fill); border-color: var(--accent-fill); color: #fff; box-shadow: none; }
#slots .chip small { display: block; font-size: 10.5px; font-weight: 400; color: var(--muted); margin-top: 2px; }
#slots .chip.on small { color: #fff; opacity: .8; }
#slots .chip.in { animation: chipIn .3s var(--settle) both; }

.dur { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); scroll-margin-bottom: 12px; }
.dur-cap { font-size: 13px; font-weight: 500; color: var(--muted); margin-bottom: 8px; }
.dur-cap b { display: block; margin-top: 2px; font-size: 15px; font-weight: 600; color: var(--ink); }
.dur-cap b.swap { animation: swap .3s var(--settle); }
@keyframes swap { from { opacity: .2; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.dur-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.dseg {
  display: grid; gap: 1px; padding: 9px 4px;
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 42%, transparent);
  color: var(--ink); font-family: var(--sans); cursor: pointer;
  transition: background var(--base) var(--settle), color var(--base) var(--settle), border-color var(--base), transform var(--fast) var(--settle);
}
.dseg b { font-size: 15px; font-weight: 600; }
.dseg span { font-size: 10.5px; color: var(--muted); }
.dseg.on { background: var(--accent-fill); border-color: var(--accent-fill); color: #fff; }
.dseg.on span { color: #fff; opacity: .8; }
.dseg:disabled { opacity: .4; cursor: not-allowed; }
.dseg.more {
  border-style: dashed; border-color: color-mix(in srgb, var(--accent-2) 55%, transparent);
  color: var(--accent-2);
}
.dseg.more b { font-size: 14px; }
.dseg.more[aria-expanded="true"] { border-style: solid; background: color-mix(in srgb, var(--accent) 10%, transparent); }
.dur-note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.dur-call {
  margin: 10px 0 0; padding: 11px 13px; border-radius: 12px;
  font-size: 13px; line-height: 1.5; color: var(--ink);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.dur-call[hidden] { display: none; }
.dur-call a { color: var(--accent-2); font-weight: 700; white-space: nowrap; text-decoration: none; }

.cal {
  background: color-mix(in srgb, var(--surface-2) 34%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); border-radius: 18px;
  box-shadow: inset 0 1px 0 var(--glass-spec-2);
  padding: 10px 10px 8px;
}
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; padding: 0 2px; }
.cal-title { font-family: var(--serif); font-size: 16px; font-weight: 600; color: var(--ink); }
.cal-nav {
  width: 38px; height: 38px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--surface); color: var(--muted);
  font-size: 17px; line-height: 1; cursor: pointer;
  transition: color var(--fast), border-color var(--base), opacity var(--base), transform var(--fast);
}
.cal-nav:disabled { opacity: .3; pointer-events: none; }
.cal-week { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 2px; }
.cal-week span { text-align: center; font-size: 11px; font-weight: 500; color: var(--faint); padding: 2px 0; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-grid.slide { animation: slide .3s var(--settle); }
@keyframes slide { from { opacity: 0; transform: translateX(var(--slide-from, 0)); } to { opacity: 1; transform: none; } }
.cal-day {
  aspect-ratio: 1 / 1; min-height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%; background: transparent;
  color: var(--ink); font-size: 14.5px; font-weight: 500;
  font-variant-numeric: tabular-nums;
  cursor: pointer; transition: background var(--fast) var(--settle), color var(--fast), transform var(--fast) var(--settle);
}
.cal-day:disabled { color: var(--faint); opacity: .45; pointer-events: none; }
.cal-day.weekend:not(:disabled):not(.on) { color: var(--accent); }
.cal-day.today { box-shadow: inset 0 0 0 1.5px var(--accent-2); }
.cal-day.on { background: var(--accent-fill); color: #fff; font-weight: 600; }
.chip.on, .dseg.on, .cal-day.on { animation: pick .3s var(--settle) both; }
@keyframes pick { from { transform: scale(.97); } to { transform: none; } }

.counter { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.cnt-btn {
  width: 42px; height: 42px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--surface); color: var(--accent);
  font-size: 20px; font-weight: 500; line-height: 1; cursor: pointer;
  transition: transform var(--fast) var(--settle), border-color var(--base);
}
.cnt-btn:disabled { opacity: .35; pointer-events: none; }
.cnt-val { font-size: 18px; font-weight: 700; min-width: 24px; text-align: center; font-variant-numeric: tabular-nums; }
.cnt-cap { font-size: 13.5px; color: var(--muted); }

.field {
  width: 100%; padding: 13px 14px;
  font-family: var(--sans); font-size: 16px; font-weight: 400; color: var(--ink);
  background: color-mix(in srgb, var(--surface) 42%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); border-radius: 16px; outline: none;
  box-shadow: inset 0 1px 0 var(--glass-spec-2);
  transition: border-color var(--base) var(--settle), box-shadow var(--base) var(--settle);
}
.field::placeholder { color: var(--faint); }
.field:focus {
  background: var(--surface); border-color: var(--accent-2);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-2) 16%, transparent);
}
.fld { display: block; }
.fld + .fld { margin-top: 12px; }
.fld > label { display: block; margin: 0 0 6px 2px; font-size: 13px; font-weight: 500; color: var(--muted); }
.row-2 { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; }
.row-2 .fld { margin-top: 0; }
.row-2 .age-fld { flex: 0 0 96px; }
.row-2 .fld:last-child { flex: 1; min-width: 0; }
.row-names .fld { flex: 1 1 0; min-width: 0; }
.err {
  display: block; min-height: 16px; margin: 5px 0 0 2px;
  font-size: 12.5px; color: var(--danger); opacity: 0; visibility: hidden;
  transition: opacity var(--base) var(--ease), visibility 0s linear var(--base);
}
.err.show { opacity: 1; visibility: visible; transition-delay: 0s; }
.tg-pull {
  display: block; width: 100%; margin: 0 0 8px; padding: 12px 14px;
  font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--accent);
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; cursor: pointer;
  transition: border-color var(--base);
}
.tg-pull:hover { border-color: var(--accent-2); }
.tg-pull[hidden] { display: none; }
input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--surface) inset;
  -webkit-text-fill-color: var(--ink); caret-color: var(--ink);
  transition: background-color 99999s;
}
.consent {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); cursor: pointer;
}
.consent input {
  appearance: none; -webkit-appearance: none;
  width: 22px; height: 22px; flex-shrink: 0; margin: 1px 0 0;
  border: 1.5px solid var(--faint); border-radius: 7px; background: var(--surface);
  display: grid; place-items: center; cursor: pointer;
  transition: background var(--base) var(--settle), border-color var(--base);
}
.consent input:checked { background: var(--accent-fill); border-color: var(--accent-fill); }
.consent input:checked::after {
  content: ""; width: 10px; height: 5px;
  border: 2.2px solid #fff; border-top: none; border-right: none;
  transform: translateY(-1px) rotate(-45deg);
  animation: tick .3s var(--spring) both;
}
@keyframes tick {
  from { transform: translateY(-1px) rotate(-45deg) scale(.2); }
  to   { transform: translateY(-1px) rotate(-45deg) scale(1); }
}

#dock {
  position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 9;
  padding: 12px 14px; overflow: hidden; isolation: isolate;
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  backdrop-filter: blur(16px) saturate(1.5);
  backdrop-filter: url(#lgGlassDock);
  border: 1px solid var(--glass-rim); border-radius: 28px;
  box-shadow: var(--card-shadow);
  transition: transform var(--base) var(--ease);
}
#dock::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(200px circle at var(--mx, 50%) var(--my, -30%),
      color-mix(in srgb, #fff 32%, transparent), transparent 70%),
    color-mix(in srgb, var(--surface) 52%, transparent);
  box-shadow: inset 0 1.5px 1px var(--glass-spec);
}
#dock[hidden] { display: none; }
#dock.kb-away { transform: translateY(140%); pointer-events: none; }
.dock-wrap { max-width: 488px; margin: 0 auto; display: flex; flex-direction: column; gap: 9px; }
#dockPrice { display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: 10px; padding: 0 2px; }
#dockPrice .dp-label { font-size: 13px; font-weight: 500; color: var(--muted); }
#dockPrice .dp-total { font-family: var(--serif); font-size: 25px; line-height: 1; font-weight: 600; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
#dockPrice .cur { font-family: var(--sans); }
#dockPrice .cur { font-size: .72em; font-weight: 600; margin-left: .18em; }
.dp-save {
  grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  margin-top: 4px; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.dp-save s { color: var(--faint); margin-right: 6px; }
.dp-save em {
  display: inline-block; padding: 2px 8px; border-radius: 999px; font-style: normal; font-weight: 700; font-size: 13px;
  color: var(--ok-strong, var(--ok)); background: color-mix(in srgb, var(--ok) 12%, transparent);
}
.dp-save.bump em { animation: bump .4s var(--spring); }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
#priceVal { display: inline-block; }
.dp-total.bump #priceVal { animation: bump .4s var(--spring); }
@keyframes bump { from { transform: scale(1.08); color: var(--accent); } to { transform: none; } }
#summary {
  margin-top: 20px; padding-top: 14px; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft);
  border-top: 1px solid var(--line);
}
.sum-head { margin: 0 0 12px; font-family: var(--serif); font-size: 18px; font-weight: 600; color: var(--ink); }
.sum-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label price" "body detail";
  column-gap: 14px; row-gap: 2px; align-items: baseline;
}
.sum-row small { grid-area: label; }
.sum-row b { grid-area: price; justify-self: end; }
.sum-row span { grid-area: body; min-width: 0; overflow-wrap: break-word; font-size: 14px; line-height: 1.45; }
.sum-row i { grid-area: detail; justify-self: end; align-self: start; }
.sum-row small {
  font-size: 11px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
}
.sum-row + .sum-row { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
.sum-row i { font-style: normal; color: var(--muted); white-space: nowrap; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.sum-row b { font-weight: 600; font-size: 14.5px; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sum-row.total { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.sum-row.total b { font-size: 17px; font-weight: 700; line-height: 1; }
.sum-row.paid, .sum-row.left { margin-top: 6px; padding-top: 0; border-top: none; }
.sum-row.paid b { color: var(--ok-strong, var(--ok)); }
.sum-row.left span, .sum-row.left b { color: var(--muted); font-weight: 500; }
#lastHint { text-align: left; font-size: 13px; line-height: 1.45; color: var(--warn); padding: 2px 2px; }
#lastHint[hidden] { display: none; }
#dockPay { display: flex; flex-direction: column; gap: 8px; }
.prepay-note { margin: 0 0 2px; padding: 0 2px; text-align: left; font-size: 12.5px; color: var(--muted); }
.prepay-note b { color: var(--ink); font-weight: 600; }
.dock-nav { display: flex; align-items: center; gap: 8px; }
#backBtn {
  flex: 0 0 auto; height: 50px; padding: 0 18px; border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 45%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  box-shadow: inset 0 1px 0 var(--glass-spec-2);
  color: var(--ink-soft); font-family: var(--sans); font-size: 14.5px; font-weight: 500;
  cursor: pointer; transition: border-color var(--base), background var(--base), transform var(--fast) var(--settle);
}
#backBtn[hidden] { display: none; }
#nextBtn, .paybtn.primary {
  flex: 1 1 0; height: 50px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, #fff 25%, transparent);
  background: color-mix(in srgb, var(--accent-fill) 84%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 35%, transparent), 0 8px 20px -10px rgba(var(--accent-rgb), .5);
  color: #fff;
  font-family: var(--sans); font-size: 15.5px; font-weight: 600; cursor: pointer;
}
#nextBtn { transition: background var(--base), opacity var(--base), transform var(--fast) var(--settle); }
#nextBtn[hidden] { display: none; }
.paybtn.primary { display: flex; align-items: center; justify-content: center; gap: 9px; white-space: nowrap; padding: 0 14px; }
.paybtn.primary .sbp { width: 19px; height: 23px; flex-shrink: 0; }
#nextBtn:disabled, .paybtn:disabled { opacity: .45; pointer-events: none; }
#nextBtn.nudge { animation: nudge .42s var(--settle); }
@keyframes nudge {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-7px); }
  55% { transform: translateX(6px); }
  80% { transform: translateX(-3px); }
}
#toast { background: var(--surface); color: var(--ink); border-radius: 12px; box-shadow: 0 10px 30px rgba(var(--ink-rgb), .16); }

.dur, #dockPay, #summary, #groupSizeBox, #liftExtra, #rentalExtra,
.hint-tip, #noviceBadge, #slotsNote, #durNote, #dockPrice, .dp-save {
  transition: opacity .3s var(--ease), translate .34s var(--settle), display .34s allow-discrete;
}
.dur[hidden], #dockPay[hidden], #summary[hidden], #groupSizeBox[hidden], #liftExtra[hidden], #rentalExtra[hidden],
.hint-tip[hidden], #noviceBadge[hidden], #slotsNote[hidden], #durNote[hidden], #dockPrice[hidden], .dp-save[hidden] {
  display: none; opacity: 0; translate: 0 var(--rise);
}
.paybtn.primary {
  transition: opacity .3s var(--ease), translate .34s var(--settle), display .34s allow-discrete,
              transform var(--fast) var(--settle), background var(--base);
}
.paybtn.primary[hidden] { display: none; opacity: 0; translate: 0 var(--rise); }
@starting-style {
  .dur:not([hidden]), #dockPay:not([hidden]), #summary:not([hidden]), #groupSizeBox:not([hidden]),
  #liftExtra:not([hidden]), #rentalExtra:not([hidden]), .hint-tip:not([hidden]),
  #noviceBadge:not([hidden]), #slotsNote:not([hidden]), #durNote:not([hidden]), #dockPrice:not([hidden]),
  .dp-save:not([hidden]), .paybtn.primary:not([hidden]) { opacity: 0; translate: 0 var(--rise); }
}

.chip:active, .dseg:active:not(:disabled), .cal-day:active, #backBtn:active, #nextBtn:active, .paybtn.primary:active {
  transition-duration: .08s; transform: scale(.98);
}
@media (hover: hover) {
  .chip:hover:not(.on) { border-color: var(--faint); }
  .dseg:hover:not(.on):not(:disabled) { border-color: var(--faint); }
  .cal-day:not(:disabled):not(.on):hover { background: var(--surface-3); }
  .cal-nav:hover:not(:disabled) { color: var(--ink); border-color: var(--faint); }
  .cnt-btn:hover:not(:disabled) { border-color: var(--accent-2); }
  .field:hover { border-color: var(--faint); }
  .consent:hover input:not(:checked) { border-color: var(--accent-2); }
  #backBtn:hover { border-color: var(--faint); }
  #nextBtn:hover:not(:disabled), .paybtn.primary:hover:not(:disabled) {
    background: color-mix(in srgb, var(--accent-fill) 88%, #000);
  }
}

.arrive {
  position: fixed; inset: 0; z-index: 99; pointer-events: none; background: var(--paper);
  opacity: 0; transition: opacity .38s ease .05s;
}
.arrive:target, html.arriving .arrive { opacity: 1; transition: none; }

#doneScreen, #failScreen { text-align: center; }
#doneScreen > *, #failScreen > * { animation: doneIn .6s var(--settle) both; }
#doneScreen > :nth-child(1), #failScreen > :nth-child(1) { animation-delay: .42s; }
#doneScreen > :nth-child(2), #failScreen > :nth-child(2) { animation-delay: .54s; }
#doneScreen > :nth-child(3), #failScreen > :nth-child(3) { animation-delay: .66s; }
#doneScreen > :nth-child(4), #failScreen > :nth-child(4) { animation-delay: .78s; }
#doneScreen > :nth-child(5), #failScreen > :nth-child(5) { animation-delay: .88s; }
#doneScreen > :nth-child(6), #failScreen > :nth-child(6) { animation-delay: .96s; }
#failScreen[hidden] { display: none; }
@keyframes doneIn {
  from { opacity: 0; transform: translateY(16px) scale(.985); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: none; }
}
.pay-morph {
  position: fixed; z-index: 98; pointer-events: none;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-fill) 84%, transparent);
  border: 1px solid color-mix(in srgb, #fff 30%, transparent);
  box-shadow: 0 10px 24px -10px rgba(var(--accent-rgb), .45);
  transition: left .48s var(--settle), top .48s var(--settle), width .48s var(--settle),
              height .48s var(--settle), background .48s var(--ease),
              box-shadow .48s var(--ease), opacity .24s ease;
}
.pay-morph.to-check {
  background: color-mix(in srgb, var(--ok) 55%, transparent);
  box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--ok) 55%, transparent);
}
.done-check {
  width: 84px; height: 84px; margin: 36px auto 0; border-radius: 50%;
  position: relative;
  color: var(--ok-strong, var(--ok));
  background:
    radial-gradient(120% 120% at 32% 22%,
      color-mix(in srgb, #fff 72%, transparent),
      color-mix(in srgb, #fff 18%, transparent) 62%),
    color-mix(in srgb, var(--ok) 15%, color-mix(in srgb, var(--surface) 74%, transparent));
  border: 1px solid color-mix(in srgb, #fff 55%, transparent);
  display: flex; align-items: center; justify-content: center;
  box-shadow:
    inset 0 1.5px 1px var(--glass-spec),
    inset 0 -1px 1px var(--glass-spec-2),
    0 0 26px 8px color-mix(in srgb, var(--ok) 16%, transparent),
    0 14px 30px -14px color-mix(in srgb, var(--ok) 45%, transparent);
  animation: pop .55s var(--spring) both .1s;
}
.done-check svg { width: 42px; height: 42px; }
.done-check svg path { stroke-dasharray: 34; stroke-dashoffset: 34; animation: draw .45s ease-out forwards .95s; }
.done-check::after { content: ""; position: absolute; border-radius: 50%; }
.done-check::after {
  inset: -5px; border: 2px solid color-mix(in srgb, var(--ok) 45%, transparent);
  opacity: 0; animation: ring 2.4s ease-out infinite 1.5s;
}
@keyframes pop { from { transform: scale(.3); opacity: 0; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes ring {
  0%        { transform: scale(.92); opacity: .7; }
  70%, 100% { transform: scale(1.4); opacity: 0; }
}
.done-title { margin: 22px 0 0; font-family: var(--serif); font-size: 28px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.fail-check {
  color: var(--danger);
  background:
    radial-gradient(120% 120% at 32% 22%,
      color-mix(in srgb, #fff 72%, transparent),
      color-mix(in srgb, #fff 18%, transparent) 62%),
    color-mix(in srgb, var(--danger) 13%, color-mix(in srgb, var(--surface) 74%, transparent));
  box-shadow:
    inset 0 1.5px 1px var(--glass-spec),
    inset 0 -1px 1px var(--glass-spec-2),
    0 0 26px 8px color-mix(in srgb, var(--danger) 14%, transparent),
    0 14px 30px -14px color-mix(in srgb, var(--danger) 45%, transparent);
}
.fail-check::after { border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.done-check .p-wait, .wait-check .p-ok { display: none; }
.wait-check .p-wait { display: block; }
.wait-check {
  color: var(--warn);
  background:
    radial-gradient(120% 120% at 32% 22%,
      color-mix(in srgb, #fff 72%, transparent),
      color-mix(in srgb, #fff 18%, transparent) 62%),
    color-mix(in srgb, var(--warn) 13%, color-mix(in srgb, var(--surface) 74%, transparent));
  box-shadow:
    inset 0 1.5px 1px var(--glass-spec),
    inset 0 -1px 1px var(--glass-spec-2),
    0 0 26px 8px color-mix(in srgb, var(--warn) 14%, transparent),
    0 14px 30px -14px color-mix(in srgb, var(--warn) 45%, transparent);
}
.wait-check::after { border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.fail-actions { display: flex; flex-direction: column; gap: 10px; max-width: 360px; margin: 24px auto 0; }
.fail-btn {
  display: flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 18px;
  border-radius: 999px; text-decoration: none;
  font-size: 15px; font-weight: 600; color: var(--ink);
  background: color-mix(in srgb, var(--surface) 45%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  box-shadow: inset 0 1px 0 var(--glass-spec-2);
  transition: background var(--base), transform var(--fast) var(--settle);
}
.fail-btn.main {
  color: #fff; border-color: color-mix(in srgb, #fff 25%, transparent);
  background: color-mix(in srgb, var(--accent-fill) 84%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 35%, transparent), 0 8px 20px -10px rgba(var(--accent-rgb), .5);
}
.fail-btn:active { transform: scale(.98); }
.fail-btn.main:hover { background: color-mix(in srgb, var(--accent-fill) 92%, #000); }
.fail-btn:not(.main):hover { background: color-mix(in srgb, var(--surface) 70%, transparent); }
.fail-back {
  margin: 18px 0 36px; border: 0; background: none; padding: 8px 10px; cursor: pointer;
  font: inherit; font-size: 13.5px; color: var(--muted); text-decoration: underline;
  text-underline-offset: 4px;
}
.fail-back:hover { color: var(--ink); }
.done-card {
  margin-top: 20px; padding: 20px 20px 22px; text-align: left;
  position: relative; overflow: hidden; isolation: isolate;
  -webkit-backdrop-filter: blur(12px) saturate(1.55);
  backdrop-filter: blur(12px) saturate(1.55);
  backdrop-filter: url(#lgGlassB);
  border: 1px solid var(--glass-rim); border-radius: 26px;
  box-shadow: var(--card-shadow);
}
.done-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(260px circle at var(--mx, 50%) var(--my, -30%),
      color-mix(in srgb, #fff 36%, transparent), transparent 70%),
    color-mix(in srgb, var(--surface) 32%, transparent);
  box-shadow:
    inset 0 1.5px 1px var(--glass-spec),
    inset 1px 0 1px var(--glass-spec-2),
    inset 0 -1px 1px var(--glass-spec-2);
}
.done-card .sum-head { font-size: 15px; margin-bottom: 10px; }
.done-note { margin: 16px auto 0; max-width: 420px; font-size: 13px; line-height: 1.55; color: var(--muted); }
.done-note b { color: var(--ink); white-space: nowrap; }
.done-video {
  position: relative; overflow: hidden;
  margin: 20px auto 0; aspect-ratio: 16 / 9; border-radius: 14px; background: #000;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
}
.done-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.done-video.playing video { display: block; }
.done-video.playing .dv-play { display: none; }
.done-video.playing .dv-cap {
  position: absolute; left: 0; right: 0; top: 10px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .8);
}
.dv-play {
  width: 54px; height: 54px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .5);
  display: flex; align-items: center; justify-content: center;
}
.dv-play::after {
  content: ""; margin-left: 5px; border-style: solid; border-width: 8px 0 8px 14px;
  border-color: transparent transparent transparent #fff;
}
.dv-cap { color: #fff; font-size: 14px; font-weight: 600; opacity: .92; }
.done-call { margin: 24px 0 36px; font-size: 13.5px; color: var(--muted); }
.done-call a {
  display: inline-block; margin-top: 6px; font-family: var(--serif); font-size: 23px; font-weight: 600;
  color: var(--ink); text-decoration: none; font-variant-numeric: tabular-nums;
  transition: color var(--base) var(--ease);
}
.done-call a:hover { color: var(--accent); }
.wiz-head[hidden], #dock[hidden] { display: none; }

@media (max-width: 360px) {
  .wrap { padding: 0 12px; }
  .dock-nav { gap: 8px; }
  #backBtn { padding: 0 12px; font-size: 14px; }
  #nextBtn, .paybtn.primary { font-size: 14.5px; }
  .paybtn.primary { gap: 8px; padding: 0 10px; }
  .paybtn.primary .sbp { width: 17px; height: 21px; }
  .step.current { padding: 16px 14px 18px; }
  .cal { padding: 8px 6px 6px; }
  .cal-grid { gap: 2px; }
  .cal-day { min-height: 30px; font-size: 14px; }
  .step .label { font-size: 19px; }
}
@media (max-height: 640px) {
  #dock { padding-top: 10px; }
  .dock-wrap { gap: 6px; }
  .prepay-note { margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  :root { --rise: 0px; --shift: 0px; }
  .cal-grid.slide, .done-check::after { animation: none; }
}

.done-coach {
  margin: 16px auto 0; display: flex; align-items: center; gap: 14px; text-align: left;
  padding: 14px 20px; border-radius: 26px;
  position: relative; overflow: hidden; isolation: isolate;
  -webkit-backdrop-filter: blur(12px) saturate(1.55);
  backdrop-filter: blur(12px) saturate(1.55);
  border: 1px solid var(--glass-rim);
  box-shadow: var(--card-shadow);
}
.done-coach::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit;
  background: color-mix(in srgb, var(--surface) 32%, transparent);
  box-shadow: inset 0 1.5px 1px var(--glass-spec), inset 0 -1px 1px var(--glass-spec-2);
}
.done-coach[hidden] { display: none; }
.done-coach .coach-ava {
  margin: 0; flex: 0 0 auto;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--surface) 80%, transparent), 0 0 0 4px var(--glass-rim);
}
.done-coach .dc-text { min-width: 0; }
.done-coach .dc-text small {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--accent);
}
.done-coach .dc-text b { display: block; margin-top: 2px; font-size: 17px; font-weight: 700; color: var(--ink); }
.done-coach .dc-text span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }