body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse 900px 700px at 50% -10%, rgba(212, 175, 55, 0.1), transparent 60%),
    radial-gradient(ellipse 800px 600px at 50% 110%, rgba(30, 92, 46, 0.12), transparent 60%),
    #030304;
}

.phone-frame {
  width: 430px;
  max-width: 100vw;
  height: 100vh;
  max-height: 932px;
  border: 10px solid #1a1a1f;
  border-radius: 42px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(212, 175, 55, 0.18), 0 0 70px -18px rgba(212, 175, 55, 0.35);
}
/* Desktop-preview mockup bezel, not meant for an actual phone screen
   (or the wrapped app) -- drop it entirely edge-to-edge below phone
   width instead of it reading as an ugly border. */
@media (max-width: 480px) {
  .phone-frame {
    width: 100vw;
    max-width: none;
    height: 100vh;
    max-height: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
}

.phone-screen {
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  /* Same field photo + dark overlay gradient as Draft Board/Draft
     Entry/Team Picks, instead of the plain turf pattern. */
  background-image: linear-gradient(180deg, rgba(6, 8, 12, 0.72) 0%, rgba(6, 8, 12, 0.88) 100%), url("shared/images/field-bg.jpg");
  background-size: cover;
  background-position: center 65%;
}

/* ---------------- Header ---------------- */

.setup-header {
  flex: none;
  padding: 16px 16px 14px;
}
/* Same layout as Draft Entry/Team Picks: title left, actions grouped
   on the right (space-between) -- back button and gear are normal
   flex children now instead of an absolutely-positioned back button
   plus decorative pylon icons flanking a centered title. */
.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
/* Same treatment as the other pages' titles: plain white text with a
   hard (0-blur) blue outline, no glow/drop-shadow. */
.setup-title {
  margin: 0;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: #fff;
  text-shadow:
    -1px 0 0 #2f6fed,
    1px 0 0 #2f6fed,
    0 -1px 0 #2f6fed,
    0 1px 0 #2f6fed,
    -1px -1px 0 #2f6fed,
    1px -1px 0 #2f6fed,
    -1px 1px 0 #2f6fed,
    1px 1px 0 #2f6fed;
  flex: 1;
  min-width: 0;
}

/* ---------------- Main ---------------- */

.setup-main {
  flex: 1;
  padding: 20px 16px 28px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.section-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-faint);
  margin-bottom: 10px;
}
/* Blue (same hue as the title outline) replaces gold as this screen's
   primary interactive accent -- section markers, stepper buttons,
   focus rings, toggles, and the league code all pick it up below, so
   it reads as one consistent accent instead of gold used for
   everything indiscriminately. */
.section-label::before {
  content: "";
  width: 3px;
  height: 11px;
  border-radius: 2px;
  background: linear-gradient(180deg, #59a6f2, #2f6fed);
  flex: none;
}

/* ---------------- Steppers ---------------- */

.stepper-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #3f5f9e;
  background: var(--panel-alt);
  color: #59a6f2;
  font-size: 22px;
  font-weight: 800;
  cursor: pointer;
  line-height: 1;
}
.stepper-btn:hover { border-color: #2f6fed; }
.stepper-btn:active { transform: scale(0.95); }
.stepper-value {
  min-width: 40px;
  text-align: center;
  font-size: 24px;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.stepper-hint {
  text-align: center;
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 6px;
}

/* ---------------- League code + PIN ---------------- */

.league-code-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.league-code-display {
  flex: 1;
  text-align: center;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 6px;
  color: #59a6f2;
  background: var(--panel-grad);
  box-shadow: var(--panel-sheen), 0 0 20px -8px rgba(47, 111, 237, 0.4);
  border: 1px solid #3f5f9e;
  border-radius: var(--radius-lg);
  padding: 16px;
  font-variant-numeric: tabular-nums;
}

.copy-code-btn {
  flex: none;
  width: 48px;
  border: 1px solid #3f5f9e;
  border-radius: var(--radius-lg);
  background: var(--panel-grad);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.copy-code-btn:hover { border-color: #0076b6; }

#haveCodeBtn { margin-top: 10px; }

.pin-input {
  width: 100%;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  padding: 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--panel-grad);
  box-shadow: var(--panel-sheen);
  color: var(--text);
  outline: none;
  margin-bottom: 8px;
  font-family: inherit;
  transition: border-color 0.15s ease;
}
.pin-input:focus { border-color: #2f6fed; }

/* ---------------- Budget ---------------- */

/* Nested inside a .slot-row (see Number of Teams below), the panel
   chrome (background/border/padding) would double up with the row's
   own -- so it's stripped there and this becomes a plain control
   group, matching how .slot-row-stepper looks. Standalone uses (the
   Draft Board Name input) keep the full boxed treatment. */
.budget-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--panel-grad);
  box-shadow: var(--panel-sheen);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px 16px;
  transition: border-color 0.15s ease;
}
.budget-input-wrap:focus-within { border-color: #2f6fed; }
.budget-input-wrap .stepper-btn { width: 32px; height: 32px; font-size: 18px; flex: none; }
.budget-dollar { font-size: 20px; font-weight: 800; color: var(--text); }
.slot-row .budget-input-wrap {
  background: none;
  box-shadow: none;
  border: none;
  padding: 0;
  flex: none;
}
/* .budget-input's flex: 1 is meant for its standalone, full-width use
   (Draft Board Name) -- nested here next to a fixed-width label, that
   made this control group balloon to fill all the row's remaining
   space, squeezing "Budget per Team" down to a sliver and pushing the
   + button out of view. A fixed width (room for 3-digit dollar
   amounts) keeps it the same compact size as the Number of Teams
   stepper. */
.slot-row .budget-input-wrap .budget-input {
  flex: none;
  width: 64px;
}
.budget-input {
  flex: 1;
  min-width: 0;
  text-align: center;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-family: inherit;
}

/* ---------------- Roster slot rows ---------------- */

.slot-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.slot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--panel-grad);
  box-shadow: var(--panel-sheen);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
}
.slot-row-label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--text); flex: none; }
.slot-row-pos-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; box-shadow: 0 0 6px currentColor; }
.slot-row-stepper { display: flex; align-items: center; gap: 10px; flex: none; }
.slot-row-stepper .stepper-btn { width: 30px; height: 30px; font-size: 16px; }
.slot-row-stepper .stepper-value { min-width: 22px; font-size: 15px; }

.total-slots-row {
  margin-top: 10px;
  text-align: center;
  font-size: 13px;
  color: var(--text-dim);
}
/* Neutral white instead of gold -- same reasoning as the Team Picks
   budget chips: a plain count reads as a value, not a highlight. */
.total-slots-value { color: var(--text); font-weight: 700; }

/* ---------------- Board name + display toggles ---------------- */

.board-name-input { text-align: left; font-size: 15px; }

.toggle-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--panel-grad);
  box-shadow: var(--panel-sheen);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  cursor: pointer;
}
.toggle-row-label { font-size: 13px; font-weight: 700; color: var(--text); }
/* Pro-gated controls: badge on the label, dimmed + non-interactive row
   until unlocked. Tapping a locked row surfaces an upsell toast (see
   setup.js) instead of silently doing nothing. */
.pro-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #0d1f0e;
  background: linear-gradient(180deg, #4caf50, #2e7d32);
  border-radius: 999px;
  padding: 1px 6px;
  margin-left: 4px;
  vertical-align: middle;
}
/* Team count / budget / roster positions, once a draft has picks logged --
   distinct from .pro-locked (that's an upsell; this can't be unlocked by
   buying anything, only by not having started drafting yet). */
.draft-locked { opacity: 0.5; }
.draft-locked .stepper-btn,
.draft-locked .budget-input,
.draft-locked input { pointer-events: none; }
.draft-locked-hint { color: var(--gold-bright, #e8c14a); }

[data-pro="1"].pro-locked { opacity: 0.5; }
[data-pro="1"].pro-locked .toggle-switch,
[data-pro="1"].pro-locked .stepper-btn,
[data-pro="1"].pro-locked .budget-input,
[data-pro="1"].pro-locked input { pointer-events: none; }
.setup-section[data-pro="1"].pro-locked .pro-badge,
.toggle-row[data-pro="1"].pro-locked .pro-badge { opacity: 1; }
/* A locked Pro toggle should visibly read as "off", not "on but
   greyed out" -- even if the league's saved value underneath is
   actually true (e.g. it was turned on back when Pro was unlocked).
   This only changes what it looks like; the real stored value is
   untouched, so it's exactly where it was left once Pro unlocks
   again. */
.toggle-row[data-pro="1"].pro-locked .toggle-switch:checked,
.setup-section[data-pro="1"].pro-locked .toggle-switch:checked {
  background: var(--panel-alt);
  border-color: var(--border);
}
.toggle-row[data-pro="1"].pro-locked .toggle-switch:checked::before,
.setup-section[data-pro="1"].pro-locked .toggle-switch:checked::before {
  transform: none;
  background: var(--text-faint);
}
.inline-stepper { display: flex; align-items: center; gap: 10px; flex: none; }
.inline-stepper .stepper-btn { width: 30px; height: 30px; font-size: 16px; }
.inline-stepper .stepper-value { min-width: 20px; font-size: 15px; }
.toggle-switch {
  appearance: none;
  -webkit-appearance: none;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  position: relative;
  cursor: pointer;
  flex: none;
  margin: 0;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.toggle-switch::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--text-faint);
  transition: transform 0.15s ease, background 0.15s ease;
}
.toggle-switch:checked {
  background: linear-gradient(180deg, #59a6f2, #2f6fed);
  border-color: #3f5f9e;
}
.toggle-switch:checked::before {
  transform: translateX(18px);
  background: #0c1830;
}

/* ---------------- Team names ---------------- */

.team-names-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
  padding-right: 2px;
}
.team-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--panel-grad);
  box-shadow: var(--panel-sheen);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  transition: border-color 0.15s ease;
}
.team-name-row:focus-within { border-color: #2f6fed; }
.tn-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; box-shadow: 0 0 6px currentColor; }
.tn-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}

/* ---------------- Warning + save ---------------- */

/* Warnings keep a warm caution color (reusing the TE position's
   orange), distinct from the blue used everywhere else on this
   screen -- a warning shouldn't blend in as just another accent. */
.warning-box {
  background: linear-gradient(155deg, rgba(217, 130, 43, 0.14) 0%, rgba(217, 130, 43, 0.05) 100%);
  border: 1px solid #a5651f;
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-size: 12.5px;
  color: #f2a541;
  line-height: 1.5;
}

.status-msg {
  font-size: 13px;
  color: #f28b82;
  text-align: center;
  padding: 4px 8px;
}

/* Green for the primary create/save action -- a distinct "go" color
   from the blue used for the screen's general interactive chrome, so
   the one button that actually commits changes still stands out. */
.save-btn {
  width: 100%;
  padding: 16px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(180deg, #4caf50, #2e7d32);
  color: #0d1f0e;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 1px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(46, 125, 50, 0.35);
}
.save-btn:disabled {
  background: var(--panel-alt);
  color: var(--text-faint);
  box-shadow: none;
  cursor: not-allowed;
}
.save-btn:not(:disabled):active { transform: translateY(1px); }

/* ---------------- Pro account box (Google Sign-In) ---------------- */
/* Deliberately its own visually distinct card, not blended into the
   surrounding explainer text -- this gates real money/purchases, so
   it needs to read as a clearly separate, important control. */
.pro-account-box {
  border: 1.5px solid #0076b6;
  background: linear-gradient(155deg, rgba(0, 118, 182, 0.14) 0%, rgba(0, 118, 182, 0.04) 100%);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin: 14px 0;
}
.pro-account-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #59c2f0;
  margin-bottom: 6px;
}
.pro-account-hint {
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.5;
  margin: 0 0 12px;
}
.google-signin-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px;
  border-radius: 999px;
  border: 1.5px solid #0076b6;
  background: #0b1622;
  color: var(--text);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}
.google-signin-btn:active { transform: translateY(1px); }
.google-signin-btn .g-icon { font-size: 16px; }
.pro-account-signedin {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  color: var(--text);
}
.pro-account-signedin b { color: #59c2f0; }
.pro-account-signout {
  font-size: 11.5px;
  color: var(--text-faint);
  background: none;
  border: none;
  text-decoration: underline;
  cursor: pointer;
  padding: 4px;
}
.pro-account-native-note {
  font-size: 12.5px;
  color: #f2a541;
  line-height: 1.5;
  margin: 0;
}

/* ---------------- Pro explainer ---------------- */

.pro-explainer {
  border: 1px solid #2e7d32;
  background: linear-gradient(155deg, rgba(76, 175, 80, 0.08) 0%, rgba(76, 175, 80, 0.02) 100%);
}
.pro-explainer-intro {
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.55;
  margin: 0 0 12px;
}
.pro-feature-list {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pro-feature-list li {
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.5;
}
.pro-feature-list li b { color: var(--text); }