:root{
  --bg:#07070b;
  --bg2:#11131a;
  --card:#121520;
  --card2:#171b28;
  --text:#f4f7fb;
  --muted:#a7b0c3;
  --line:rgba(255,255,255,.09);
  --pink:#ff2f86;
  --blue:#37d7ff;
  --purple:#7b61ff;
  --green:#31d0aa;
  --shadow:0 18px 50px rgba(0,0,0,.34);
  --radius:22px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100%}
body{
  font-family:"Space Grotesk",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 15% 10%, rgba(255,176,73,.18), transparent 28%),
    radial-gradient(circle at 85% 15%, rgba(55,215,255,.18), transparent 24%),
    radial-gradient(circle at 50% 100%, rgba(255,47,134,.16), transparent 28%),
    linear-gradient(180deg, #090a10 0%, #0c1017 50%, #07080c 100%);
  overflow-x:hidden;
}

a{color:inherit}
button,input{font:inherit}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

.wrap{width:min(1240px,calc(100% - 32px));margin:0 auto}

.topbar{
  position:sticky;
  top:0;
  z-index:40;
  backdrop-filter:blur(18px);
  background:rgba(7,8,13,.7);
  border-bottom:1px solid var(--line);
}
.topbar .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:16px 0;
}
.brand{display:flex;flex-direction:column;gap:4px}
.logo{
  font-weight:900;
  font-size:30px;
  line-height:1;
  letter-spacing:.06em;
}
.logo span{color:var(--pink)}
.tag{font-size:13px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.topnav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  flex:1;
  min-width:0;
}
.nav-trigger{
  appearance:none;
  min-height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 11px;
  border:1px solid transparent;
  border-radius:999px;
  background:transparent;
  color:#dce6f5;
  font-size:13px;
  font-weight:900;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
}
.nav-trigger:hover,
.nav-trigger.active,
.nav-trigger[aria-expanded="true"]{
  border-color:rgba(55,215,255,.28);
  background:linear-gradient(135deg, rgba(55,215,255,.12), rgba(255,47,134,.08));
  color:#fff;
}
.money-trigger{
  color:#dffbf4;
}
.acct{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.pill{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
}
.pill.pro{
  background:linear-gradient(135deg, rgba(123,97,255,.28), rgba(55,215,255,.18));
  border-color:rgba(55,215,255,.28);
}

.main{padding:26px 0 42px}
.dugout-shell{
  position:fixed;
  top:var(--dugout-top, 78px);
  left:50%;
  z-index:65;
  transform:translateX(-50%);
  pointer-events:none;
}
.dugout-panel{
  width:min(100%, 760px);
  display:grid;
  gap:12px;
  margin-left:auto;
  margin-right:0;
  padding:16px;
  border-radius:18px;
  border:1px solid rgba(55,215,255,.26);
  background:
    linear-gradient(135deg, rgba(11,14,22,.96), rgba(18,21,31,.92)),
    radial-gradient(circle at 15% 0%, rgba(55,215,255,.16), transparent 42%);
  box-shadow:0 24px 70px rgba(0,0,0,.48);
  backdrop-filter:blur(18px);
  pointer-events:auto;
}
.dugout-panel[hidden]{display:none}
.dugout-panel.compact{
  width:min(100%, 690px);
}
.dugout-panel.money{
  border-color:rgba(49,208,170,.34);
  background:
    linear-gradient(135deg, rgba(10,18,22,.97), rgba(18,21,31,.92)),
    radial-gradient(circle at 18% 0%, rgba(49,208,170,.18), transparent 42%);
}
.dugout-topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.dugout-label,
.dugout-live{
  display:inline-flex;
  min-height:28px;
  align-items:center;
  padding:5px 9px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.055);
  font-size:11px;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.dugout-label{color:#ffe0b6}
.dugout-live{
  color:#d8fff4;
  border-color:rgba(49,208,170,.22);
  background:rgba(49,208,170,.09);
}
.dugout-title{
  font-size:clamp(24px,3vw,38px);
  line-height:1;
  font-family:"Bebas Neue","Space Grotesk",sans-serif;
}
.dugout-copy{
  max-width:620px;
  color:#dce6f5;
  line-height:1.45;
}
.dugout-stat-row{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.dugout-stat-row span,
.dugout-badge-grid button,
.dugout-badge-grid a,
.dugout-price-row button{
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.045);
  color:var(--text);
}
.dugout-stat-row span{
  display:grid;
  gap:4px;
  padding:11px 12px;
  color:var(--muted);
  font-size:12px;
}
.dugout-stat-row strong{
  color:#fff;
  font-size:18px;
}
.dugout-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.dugout-btn,
.dugout-badge-grid button,
.dugout-price-row button{
  appearance:none;
  cursor:pointer;
  font:inherit;
}
.dugout-btn{
  min-height:42px;
  padding:0 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);
  color:#fff;
  font-weight:900;
}
.dugout-btn.primary{
  border-color:transparent;
  background:linear-gradient(135deg, var(--pink), #ff5c4d);
}
.dugout-badge-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.dugout-badge-grid button,
.dugout-badge-grid a{
  display:grid;
  gap:7px;
  min-height:98px;
  align-content:start;
  padding:12px;
  text-align:left;
  text-decoration:none;
}
.dugout-badge-grid button:hover,
.dugout-badge-grid a:hover,
.dugout-price-row button:hover{
  border-color:rgba(55,215,255,.36);
  background:linear-gradient(180deg, rgba(55,215,255,.12), rgba(255,255,255,.045));
}
.dugout-badge-grid span,
.dugout-price-row span{
  color:var(--muted);
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.dugout-badge-grid strong{
  color:#fff;
  font-size:15px;
  line-height:1.22;
}
.dugout-price-row{
  display:grid;
  grid-template-columns:1.35fr .85fr .85fr;
  gap:10px;
}
.dugout-price-row button{
  display:grid;
  gap:8px;
  min-height:112px;
  align-content:center;
  padding:14px;
  text-align:left;
}
.dugout-price-row strong{
  color:#37d7ff;
  font-size:30px;
  line-height:1;
}
.checkout-confirmation{
  display:grid;
  gap:14px;
  margin-bottom:18px;
  padding:18px;
  border-radius:18px;
  border:1px solid rgba(55,215,255,.22);
  background:linear-gradient(135deg, rgba(49,208,170,.14), rgba(55,215,255,.08) 46%, rgba(255,255,255,.035));
  box-shadow:0 18px 44px rgba(0,0,0,.3);
}
.checkout-confirmation[hidden]{display:none}
.checkout-confirmation.cancelled{
  border-color:rgba(255,176,73,.3);
  background:linear-gradient(135deg, rgba(255,176,73,.12), rgba(255,255,255,.035));
}
.checkout-confirmation-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.checkout-pill{
  display:inline-flex;
  min-height:30px;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.08);
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.checkout-confirmation h2{
  margin:0;
  font-size:clamp(24px,3vw,34px);
  line-height:1.05;
}
.checkout-confirmation p{
  margin:0;
  max-width:820px;
  color:#dbe7f7;
  line-height:1.5;
}
.checkout-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.card{
  background:linear-gradient(180deg, rgba(20,23,34,.92), rgba(13,16,24,.96));
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.hero{
  display:grid;
  grid-template-columns:minmax(0,1.18fr) minmax(360px,.82fr);
  gap:24px;
  padding:24px;
}
.hero-left,.hero-right{min-width:0}

h1,h2,h3,p,ol,ul{margin:0}
h1,h2{font-family:"Bebas Neue","Space Grotesk",sans-serif;font-weight:400}
h1{font-size:clamp(28px,4vw,44px);line-height:1.04;letter-spacing:-.02em}
h2{font-size:24px}
h3{font-size:18px;margin-bottom:12px}
.sub,.muted{color:var(--muted)}
.sub{margin-top:8px;font-size:15px}
.arena-kicker{
  display:inline-flex;
  margin-bottom:10px;
  padding:7px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  font-size:12px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#ffe0b6;
}
.champion-banner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:16px;
  padding:16px 18px;
  border-radius:18px;
  background:linear-gradient(135deg, rgba(255,47,134,.16), rgba(55,215,255,.12));
  border:1px solid rgba(255,255,255,.08);
}
.champion-kicker{
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#ffd9e8;
}
.champion-copy{
  margin-top:6px;
  font-size:14px;
  line-height:1.5;
  color:#eff4ff;
}
.champion-btn{white-space:nowrap}
.status{
  margin:18px 0 16px;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  color:#dfe8f7;
}

.stats-row{
  display:grid;
  grid-template-columns:1.1fr repeat(3,.7fr);
  gap:12px;
  margin-top:20px;
}
.stat{
  padding:16px 16px 14px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.07);
}
.stat-label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.stat-value{margin-top:8px;font-size:34px;font-weight:900;line-height:1}
.stat.small .stat-value{font-size:24px}
.pct{font-size:.52em;color:var(--blue);margin-left:3px}

.controls{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:18px 0 16px;
}
.setup-panel{
  margin:18px 0 18px;
  padding:18px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
}
.setup-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
.setup-kicker{
  margin-bottom:6px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#ffd6b0;
}
.setup-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:16px;
}
.stack{
  align-items:flex-start;
  justify-content:flex-start;
  min-height:auto;
  flex-direction:column;
}
.stack span{
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.setup-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}
.platform-options{
  margin-top:14px;
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.025);
}
.platform-options-head{
  margin-bottom:10px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#ffd6b0;
}
.platform-choice-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.platform-choice{
  appearance:none;
  display:flex;
  min-height:112px;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  padding:13px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.035);
  color:var(--text);
  text-align:left;
  cursor:pointer;
}
.platform-choice:hover,
.platform-choice.active{
  border-color:rgba(55,215,255,.38);
  background:linear-gradient(180deg, rgba(55,215,255,.12), rgba(255,47,134,.07));
}
.platform-choice span{
  font-size:15px;
  font-weight:900;
}
.platform-choice small{
  color:var(--muted);
  font-size:12px;
  line-height:1.35;
}
.device-note{
  margin-top:10px;
  padding:11px 13px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,176,73,.07);
  color:#f2e6d6;
  font-size:13px;
  line-height:1.45;
}
.diag-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:14px;
}
.diag-chip{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:12px 14px;
  border-radius:16px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
}
.diag-label{
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
}
.preflight-list{
  display:grid;
  gap:10px;
  margin-top:14px;
}
.preflight-item{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:12px;
  align-items:flex-start;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.03);
}
.preflight-dot{
  width:12px;
  height:12px;
  margin-top:5px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.08);
}
.preflight-item.ok .preflight-dot{
  background:var(--green);
  border-color:transparent;
  box-shadow:0 0 18px rgba(49,208,170,.45);
}
.preflight-title{
  font-size:14px;
  font-weight:800;
}
.preflight-copy{
  margin-top:4px;
  font-size:13px;
  color:var(--muted);
  line-height:1.45;
}
.btn{
  appearance:none;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);
  color:var(--text);
  border-radius:14px;
  padding:12px 16px;
  font-weight:700;
  cursor:pointer;
  transition:transform .15s ease, background .15s ease, border-color .15s ease, opacity .15s ease;
}
.btn:hover:not(:disabled){transform:translateY(-1px);background:rgba(255,255,255,.08)}
.btn:disabled{opacity:.48;cursor:not-allowed}
.btn.primary{
  background:linear-gradient(135deg, var(--pink), #ff5c4d);
  border-color:transparent;
  color:#fff;
}
.btn.ghost{background:rgba(255,255,255,.025)}
.btn.full{width:100%;justify-content:center;display:flex}
.icon-btn{
  appearance:none;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:var(--text);
  width:40px;height:40px;border-radius:12px;cursor:pointer;font-size:18px
}

.toggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:0 4px 0 2px;
  min-height:44px;
  color:var(--muted);
}
.toggle input{accent-color:var(--pink)}
.select-control{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.10);
  color:var(--muted);
  font-size:13px;
}
.select-control select{
  border:0;
  background:transparent;
  color:var(--text);
  font:inherit;
  outline:none;
}
.submit-options{
  gap:8px;
  margin:0 0 16px;
  padding:14px 16px;
  border-radius:8px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
}
.submit-options-title{
  font-size:12px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.fair-play{align-items:flex-start;line-height:1.35}

.meter{margin:0}
.meter-bg{
  width:100%;height:10px;border-radius:999px;overflow:hidden;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.06)
}
.meter-fill{
  height:100%;width:0%;border-radius:999px;
  background:linear-gradient(90deg, var(--blue), var(--pink));
  box-shadow:0 0 24px rgba(55,215,255,.38)
}
.meter-note{font-size:12px;color:#dfe8f7;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.pitch-trace{
  margin:12px 0 16px;
  padding:16px 18px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.035);
}
.pitch-trace-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}
.pitch-trace-label{
  font-size:11px;
  color:rgba(223,232,247,.72);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.pitch-trace-main{
  margin-top:4px;
  font-size:22px;
  font-weight:900;
  color:#fff;
}
.pitch-trace-score{
  min-width:82px;
  text-align:right;
  font-size:36px;
  line-height:1;
  font-weight:900;
  color:var(--blue);
}
.pitch-trace-track{
  height:12px;
  margin-top:12px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.06);
}
.pitch-trace-fill{
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, var(--pink), var(--blue), var(--green));
  box-shadow:0 0 20px rgba(55,215,255,.35);
}
.pitch-trace-detail{
  margin-top:8px;
  font-size:14px;
  line-height:1.4;
  color:#cdd8ea;
}
.pitch-accuracy{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:8px;
  padding:0;
  border:0;
  background:transparent;
}
.pitch-label{
  font-size:11px;
  color:rgba(223,232,247,.72);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.pitch-help{margin-top:4px;font-size:13px;color:#fff}
.pitch-number{
  min-width:74px;
  text-align:right;
  font-size:30px;
  line-height:1;
  font-weight:900;
  color:#37d7ff;
  text-shadow:0 0 18px rgba(55,215,255,.34);
}
.pitch-accuracy-track{
  height:8px;
  margin-top:8px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.06);
}
.pitch-accuracy-fill{
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, #ff4c9a, #37d7ff);
  box-shadow:0 0 20px rgba(55,215,255,.35);
}

.lyrics-panel{
  margin:0 0 16px;
  padding:14px 16px;
  border-radius:8px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
}
.lyrics-label{
  margin-bottom:6px;
  font-size:12px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.lyrics-line{font-size:20px;font-weight:800;line-height:1.35}

.limits{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin:6px 0 14px;
}

.mobile-take-bar{
  display:none;
}
.limits-left,.limits-right{
  padding:16px;
  border-radius:18px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.07);
}
.limits-title{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.limits-value{margin:8px 0 14px;font-size:30px;font-weight:900}
.limits-note{
  margin:-6px 0 14px;
  font-size:13px;
  line-height:1.45;
  color:var(--muted);
}
.store-btn{width:100%}
.input{
  width:100%;margin-top:10px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.22);
  color:var(--text);
  border-radius:14px;
  padding:13px 14px;
  outline:none;
}
.input::placeholder{color:#96a1b8}
.input:focus{border-color:rgba(55,215,255,.45);box-shadow:0 0 0 3px rgba(55,215,255,.12)}
.label{display:block;margin-bottom:8px;font-weight:700}
.fineprint{font-size:13px;color:var(--muted)}

.stage{
  height:100%;
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:18px;
  border-radius:22px;
  background:linear-gradient(180deg, rgba(11,14,22,.98), rgba(18,22,33,.96));
  border:1px solid rgba(255,255,255,.08);
}
.stage-top,.stage-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.stage-label{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.reference-btn{
  padding:8px 10px;
  font-size:12px;
  white-space:nowrap;
}
.badge{
  padding:7px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  color:#fff;
  background:linear-gradient(135deg, rgba(123,97,255,.95), rgba(55,215,255,.85));
}
.stage-media{
  position:relative;
  display:grid;
  gap:10px;
  overflow:hidden;
  border-radius:18px;
  background:#050608;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.35);
}
.yt{
  width:100%;
  aspect-ratio:16/9;
  border:0;
  border-radius:0;
  background:#050608;
}
.selfie-preview{
  width:100%;
  max-height:320px;
  border-radius:0;
  background:#050608;
  object-fit:cover;
}
.stage.selfie-active .stage-media{
  grid-template-columns:1fr 38%;
  align-items:stretch;
}
.stage.selfie-active .yt,
.stage.selfie-active .selfie-preview{
  height:100%;
  min-height:260px;
  aspect-ratio:auto;
}
.stage-meter{
  position:absolute;
  left:12px;
  right:12px;
  bottom:12px;
  z-index:5;
  padding:12px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(180deg, rgba(5,7,12,.70), rgba(5,7,12,.42));
  box-shadow:0 14px 36px rgba(0,0,0,.34);
  backdrop-filter:blur(12px);
  pointer-events:none;
}
.stage-meter-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
}
.checkpoints{display:grid;gap:10px;width:100%}
.cp{
  display:grid;
  grid-template-columns:auto auto 1fr auto;
  gap:10px;
  align-items:center;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
}
.cp-i{font-weight:900;color:var(--blue)}
.cp-t,.cp-hz,.cp-tol{font-size:13px;color:#e6ecf6}
.cp-tol{color:var(--muted)}

.grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:24px;
  margin-top:24px;
}
.grid>.card{padding:22px}
.card-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin-bottom:16px;
}
.table{display:grid;gap:8px}
.tr{
  display:grid;
  grid-template-columns:64px 1.3fr 110px 120px;
  gap:12px;
  align-items:center;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
}
.tr.th{
  background:transparent;
  border:0;
  padding:0 8px 8px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:11px;
}
.rank{font-weight:900;color:var(--blue)}
.name{font-weight:700}
.score{font-weight:900}
.when{color:var(--muted);font-size:13px}

.featured{display:grid;gap:12px}
.guide-card{margin-top:24px;padding:22px}
.guide-top{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}
.guide-sub{max-width:760px}
.lane-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:18px;
}
.lane-card{
  padding:16px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
}
.lane-best{box-shadow:inset 0 0 0 1px rgba(49,208,170,.18)}
.lane-ok{box-shadow:inset 0 0 0 1px rgba(255,176,73,.16)}
.lane-risk{box-shadow:inset 0 0 0 1px rgba(255,47,134,.16)}
.lane-kicker{
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#ffd9e8;
}
.lane-title{
  margin-top:8px;
  font-size:18px;
  font-weight:800;
}
.lane-copy{
  margin-top:8px;
  font-size:14px;
  color:var(--muted);
  line-height:1.5;
}
.guide-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}
.guide-tab{
  appearance:none;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color:var(--text);
  border-radius:999px;
  padding:10px 14px;
  font-weight:800;
  cursor:pointer;
}
.guide-tab.active{
  border-color:transparent;
  background:linear-gradient(135deg, rgba(255,176,73,.92), rgba(255,47,134,.82));
}
.guide-content{
  margin-top:16px;
  padding:18px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.03);
}
.guide-note{
  margin-bottom:14px;
  font-size:14px;
  color:#fff;
}
.guide-body{
  display:grid;
  gap:12px;
}
.guide-section{
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.03);
}
.guide-section h3{
  margin-bottom:8px;
}
.guide-section p{
  color:var(--muted);
  line-height:1.55;
}
.reward-card{margin-top:24px;padding:22px}
.reward-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
}
.reward-grid.compact{grid-template-columns:1fr;gap:12px}
.reward-tile{
  display:grid;
  gap:8px;
  min-height:168px;
  padding:14px;
  border-radius:8px;
  background:linear-gradient(180deg, rgba(55,215,255,.075), rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.07);
}
.reward-tile.empty{
  background:rgba(255,255,255,.035);
}
.reward-label{
  width:max-content;
  max-width:100%;
  padding:5px 8px;
  border-radius:999px;
  background:rgba(255,176,73,.12);
  border:1px solid rgba(255,176,73,.24);
  color:#ffe4bd;
  font-size:10px;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.reward-title{
  font-size:16px;
  line-height:1.12;
  font-weight:800;
}
.reward-value{
  font-size:24px;
  line-height:1;
  font-weight:900;
  color:#37d7ff;
}
.reward-name{
  font-size:15px;
  font-weight:800;
  color:#fff;
  overflow-wrap:anywhere;
}
.reward-note{
  align-self:end;
  color:var(--muted);
  font-size:12px;
  line-height:1.35;
}
.feat{
  padding:16px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.07);
}
.feat-top{display:flex;justify-content:space-between;gap:12px;align-items:center}
.feat-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:30px;padding:0 10px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.08em;
  background:rgba(255,47,134,.14);color:#ffd6e8;border:1px solid rgba(255,47,134,.28)
}
.feat-score{font-size:26px;font-weight:900}
.feat-name{margin-top:10px;font-size:18px;font-weight:800}
.tiny{font-size:12px}
.small{font-size:13px}

.footer-card{margin-top:24px;padding:22px}
.footgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ol,.ul{padding-left:20px;color:#dfe8f7}
.ol li,.ul li{margin:0 0 8px}
.text-link{
  color:#fff;
  font-weight:800;
}
.site-footer{
  display:grid;
  gap:22px;
  margin-top:24px;
  padding:24px 0 8px;
  border-top:1px solid rgba(255,255,255,.09);
}
.footer-brand{
  max-width:680px;
}
.footer-brand p{
  margin-top:10px;
  color:var(--muted);
  line-height:1.5;
}
.footer-columns{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.footer-columns>div{
  display:grid;
  gap:8px;
  align-content:start;
}
.footer-columns h3{
  margin-bottom:4px;
  color:#fff;
}
.footer-columns a{
  width:max-content;
  max-width:100%;
  color:var(--muted);
  text-decoration:none;
}
.footer-columns a:hover{
  color:#fff;
}
.footer-bottom{
  display:flex;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.07);
  color:#7f8aa0;
  font-size:12px;
}

.modal{
  position:fixed;inset:0;display:none;align-items:center;justify-content:center;
  padding:20px;z-index:80;background:rgba(2,4,8,.72);backdrop-filter:blur(8px)
}
.modal.show{display:flex}
.modal-card{
  width:min(560px,100%);
  background:linear-gradient(180deg, rgba(18,21,31,.98), rgba(12,15,22,.98));
  border:1px solid rgba(255,255,255,.09);
  border-radius:24px;
  box-shadow:0 22px 60px rgba(0,0,0,.45);
  overflow:hidden;
}
.modal-head{
  display:flex;justify-content:space-between;gap:16px;align-items:flex-start;
  padding:20px 22px;border-bottom:1px solid rgba(255,255,255,.07)
}
.modal-title{font-size:24px;font-weight:900}
.modal-body{padding:20px 22px 22px}
.auth-modal-body{display:grid;gap:14px}
.google-btn{
  width:100%;
  display:flex;
  align-items:center;
  gap:14px;
  min-height:46px;
  padding:8px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.16);
  background:#fff;
  color:#121520;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.google-btn:hover{transform:translateY(-1px);box-shadow:0 18px 35px rgba(0,0,0,.22)}
.google-mark{
  width:24px;
  height:24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:6px;
  background:#fff;
  color:#4285f4;
  font-weight:900;
  flex:0 0 auto;
}
.google-mark svg{width:16px;height:16px}
.google-copy{display:flex;flex-direction:column;align-items:flex-start;gap:1px;text-align:left}
.google-title{font-size:15px;font-weight:800;color:#161922;line-height:1.15}
.google-sub{font-size:11px;color:#5b6475;line-height:1.15}
.auth-divider{
  position:relative;
  text-align:center;
  color:var(--muted);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.1em;
}
.auth-divider::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:50%;
  border-top:1px solid rgba(255,255,255,.08);
}
.auth-divider span{
  position:relative;
  display:inline-block;
  padding:0 10px;
  background:linear-gradient(180deg, rgba(18,21,31,.98), rgba(12,15,22,.98));
}
.auth-note{margin-top:-2px}
.checkout-handshake{
  margin-top:12px;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(49,208,170,.08);
  border:1px solid rgba(49,208,170,.2);
  color:#d8fff4;
  font-size:13px;
  line-height:1.45;
}
.stripe-note{
  margin-top:12px;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
  font-size:13px;
  line-height:1.45;
}
.stripe-note.warn{
  color:#ffe0b6;
  border-color:rgba(255,176,73,.28);
  background:rgba(255,176,73,.08);
}
.tier-grid{display:grid;gap:12px}
.tier-btn{
  text-align:left;appearance:none;cursor:pointer;
  width:100%;padding:16px;border-radius:18px;
  border:1px solid rgba(255,255,255,.09);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
  color:var(--text)
}
.tier-btn:hover{border-color:rgba(55,215,255,.35);background:rgba(255,255,255,.07)}
.tier-top{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:8px}
.tier-name{font-size:18px;font-weight:800}
.tier-price{font-size:22px;font-weight:900;color:var(--blue)}
.reward-perks{
  margin-top:14px;
  padding:14px 16px;
  border-radius:16px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
}
.reward-perks-title{
  margin-bottom:6px;
  font-size:13px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#ffd9e8;
}
.admin-panel{
  display:grid;
  gap:14px;
  margin-top:16px;
  padding:16px;
  border-radius:18px;
  background:linear-gradient(135deg, rgba(49,208,170,.12), rgba(55,215,255,.08));
  border:1px solid rgba(49,208,170,.24);
}
.admin-panel[hidden]{display:none}
.admin-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.admin-summary{
  padding:14px 16px;
  border-radius:16px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
  font-size:14px;
  line-height:1.5;
}
.admin-actions{display:grid;gap:10px}
.admin-custom{display:grid;gap:10px}
.admin-custom .input{margin-top:0}
.admin-panel .tiny{
  min-height:18px;
  color:#dffbf4;
}
.my-scores-list{display:grid;gap:10px}
.my-score-row{
  display:grid;
  gap:8px;
  padding:12px 14px;
  border-radius:8px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
}
.my-score-top{display:flex;justify-content:space-between;gap:12px;align-items:center}
.my-score-overall{font-size:24px;font-weight:900;color:#37d7ff}
.my-score-metrics{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  font-size:13px;
  color:var(--muted);
}

[aria-hidden="true"]{pointer-events:none}

@media (max-width: 1080px){
  .hero,.grid,.footgrid,.lane-grid{grid-template-columns:1fr}
  .topnav{order:3;flex-basis:100%;justify-content:flex-start;overflow-x:auto;padding-top:2px}
  .dugout-panel,
  .dugout-panel.compact,
  .dugout-panel.money{
    width:100%;
    margin-right:auto;
  }
  .reward-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-right{order:-1}
}

@media (max-width: 760px){
  body{padding-bottom:136px}
  .wrap{width:min(100% - 20px, 1240px)}
  .topbar .wrap{padding:14px 0}
  .logo{font-size:26px}
  .hero,.grid>.card,.footer-card{padding:16px}
  .hero{gap:14px}
  .checkout-confirmation{padding:16px}
  .reward-card{padding:16px}
  .reward-grid{grid-template-columns:1fr}
  .dugout-shell{width:min(100% - 20px, 1240px)}
  .dugout-panel{padding:14px;border-radius:14px}
  .dugout-stat-row,
  .dugout-badge-grid,
  .dugout-price-row{grid-template-columns:1fr}
  .dugout-badge-grid button,
  .dugout-badge-grid a,
  .dugout-price-row button{min-height:auto}
  .stats-row{grid-template-columns:1fr 1fr}
  .setup-grid,.diag-row,.platform-choice-grid{grid-template-columns:1fr}
  .footer-columns{grid-template-columns:1fr}
  .limits{grid-template-columns:1fr}
  .card-head{align-items:flex-start;flex-direction:column}
  .champion-banner{flex-direction:column;align-items:flex-start}
  .setup-head,.guide-top{flex-direction:column}
  .stage{padding:12px;border-radius:14px}
  .stage-top{gap:8px;flex-wrap:wrap}
  .stage-label{font-size:11px}
  .stage.selfie-active .stage-media{display:block}
  .stage.selfie-active .yt{min-height:0;aspect-ratio:16/9;height:auto}
  .stage.selfie-active .selfie-preview{
    position:absolute;
    top:8px;
    right:8px;
    z-index:4;
    width:34%;
    min-width:92px;
    height:auto;
    aspect-ratio:3/4;
    border:1px solid rgba(255,255,255,.22);
    border-radius:8px;
    box-shadow:0 12px 28px rgba(0,0,0,.34);
  }
  .stage-meter{left:8px;right:8px;bottom:8px;padding:10px}
  .pitch-number{min-width:0;font-size:26px}
  .pitch-help{font-size:12px}
  .pitch-trace{padding:12px}
  .pitch-trace-main{font-size:20px}
  .pitch-trace-score{font-size:32px;min-width:74px}
  .pitch-trace-track{height:12px}
  .mobile-take-bar{
    position:fixed;
    left:10px;
    right:10px;
    bottom:10px;
    z-index:70;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:10px;
    align-items:center;
    padding:12px;
    border-radius:8px;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(9,12,19,.94);
    box-shadow:0 14px 40px rgba(0,0,0,.42);
    backdrop-filter:blur(16px);
  }
  .mobile-take-meta{min-width:0}
  .mobile-take-status{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:14px;
    font-weight:800;
    color:#fff;
  }
  .mobile-take-sub{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:4px;
    font-size:12px;
    color:#aeb8ca;
  }
  .mobile-take-sub strong{color:#fff}
  .mobile-take-bar.recording .mobile-take-status{
    font-size:18px;
    color:#37d7ff;
    text-shadow:0 0 18px rgba(55,215,255,.34);
  }
  .mobile-take-bar.recording .mobile-pitch-chip strong{
    font-size:20px;
    color:#37d7ff;
  }
  .mobile-take-actions{
    display:flex;
    gap:8px;
  }
  .mobile-take-actions .btn{
    min-height:42px;
    padding:0 12px;
    white-space:nowrap;
  }
  .my-score-top{align-items:flex-start;flex-direction:column}
  .my-score-metrics{grid-template-columns:1fr}
  .tr,.tr.th{grid-template-columns:48px 1fr 80px 88px;font-size:13px}
  .cp{grid-template-columns:auto 1fr;grid-template-areas:"i t" "hz tol"}
  .cp-i{grid-area:i}.cp-t{grid-area:t}.cp-hz{grid-area:hz}.cp-tol{grid-area:tol}
}

@media (max-width: 520px){
  body{padding-bottom:170px}
  .stats-row{grid-template-columns:1fr}
  .controls .btn,.controls .toggle{width:100%}
  .setup-actions .btn{width:100%}
  .acct{gap:8px}
  .pill,.btn{font-size:13px}
  .mobile-take-bar{
    grid-template-columns:1fr;
  }
  .mobile-take-actions .btn{flex:1}
  .tr,.tr.th{grid-template-columns:38px 1fr 70px;}
  .tr > :last-child,.tr.th > :last-child{display:none}
}