:root{
  --navy:#0e1b33;--navy-2:#16294d;--navy-3:#22407a;
  --ink:#131c30;--muted:#67708a;--muted-2:#98a1b8;
  --bg:#eef1f7;--pitch:#1c8f47;--pitch-soft:rgba(28,143,71,.12);--surface:#ffffff;--surface-2:#f6f8fc;
  --line:#e3e7f0;--line-2:#eef1f7;
  --red:#e0233a;--red-2:#bd1a2e;--red-soft:#fce6e9;
  --blue:#0b57c4;--blue-2:#0846a3;--blue-3:#3a7ce0;--blue-soft:#e4edfb;
  --pitch:#1c8f47;--pitch-d:#16793a;--pitch-l:#26a457;--pitch-deep:#0c5a2c;
  --green:#1c8f47;--green-soft:#e2f4e9;
  --sh-sm:0 1px 2px rgba(14,27,51,.07),0 1px 3px rgba(14,27,51,.05);
  --sh:0 6px 20px rgba(14,27,51,.08),0 2px 6px rgba(14,27,51,.05);
  --sh-lg:0 24px 55px rgba(14,27,51,.18),0 8px 20px rgba(14,27,51,.09);
  --r:20px;--r-sm:14px;--r-xs:10px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{font-family:'Plus Jakarta Sans',system-ui,sans-serif;background:var(--bg);color:var(--ink);font-size:14px;line-height:1.5;overflow:hidden;-webkit-font-smoothing:antialiased}
b,strong{font-weight:700}
button{font-family:inherit;cursor:pointer}
::selection{background:rgba(11,87,196,.18)}

.field{position:absolute;inset:0;overflow:hidden;background:radial-gradient(75% 55% at 50% 2%,rgba(170,230,170,.30),transparent 60%),radial-gradient(40% 30% at 18% 28%,rgba(255,255,255,.06),transparent 60%),radial-gradient(45% 34% at 82% 72%,rgba(0,0,0,.12),transparent 60%),linear-gradient(180deg,#2a9b57 0%,#1c8a45 40%,#127038 72%,#0c5b2c 100%)}
.field .stripes{position:absolute;inset:0;mix-blend-mode:soft-light;background:repeating-linear-gradient(180deg,rgba(255,255,255,.12) 0px,rgba(255,255,255,.02) 30px,rgba(0,0,0,.03) 34px,rgba(0,0,0,.12) 64px,rgba(0,0,0,.03) 94px,rgba(255,255,255,.02) 98px,rgba(255,255,255,.12) 128px)}
.field .sheen{position:absolute;inset:0;mix-blend-mode:soft-light;background:repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(0,0,0,.05) 0 1px,transparent 1px 4px),linear-gradient(115deg,rgba(255,255,255,.12) 0%,transparent 42%,transparent 70%,rgba(0,0,0,.16) 100%)}
.field .vig{position:absolute;inset:0;background:radial-gradient(120% 80% at 50% 42%,transparent 36%,rgba(3,22,11,.72) 100%),linear-gradient(180deg,rgba(3,22,11,.48),transparent 16%,transparent 70%,rgba(3,22,11,.6))}
.field svg{position:absolute;inset:0;width:100%;height:100%;opacity:.28;filter:drop-shadow(0 0 1px rgba(255,255,255,.25))}

#login{font-family:'Inter','Plus Jakarta Sans',system-ui,sans-serif;position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:22px}
.lcard{position:relative;z-index:3;width:100%;max-width:400px;border:2.5px solid transparent;border-radius:16px;background:linear-gradient(rgba(255,255,255,.92),rgba(255,255,255,.86)) padding-box,linear-gradient(140deg,var(--red) 0%,var(--blue) 100%) border-box;backdrop-filter:blur(18px) saturate(1.08);-webkit-backdrop-filter:blur(18px) saturate(1.08);box-shadow:0 24px 60px -18px rgba(3,20,10,.5),0 6px 20px rgba(3,20,10,.22);padding:34px 32px 28px;text-align:center;animation:pop .55s cubic-bezier(.22,1,.36,1) both}
.lcard::after{content:'';position:absolute;inset:0;border-radius:16px;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.55),transparent 22%);mix-blend-mode:overlay}
@keyframes pop{from{opacity:0;transform:translateY(22px) scale(.98)}to{opacity:1;transform:none}}
.crest{width:100px;height:100px;margin:6px auto 16px;filter:drop-shadow(0 10px 20px rgba(14,27,51,.28))}
.crest img{width:100%;height:100%;object-fit:contain}
.wordmark{font-family:'Archivo',sans-serif;font-weight:900;font-size:28px;letter-spacing:-.6px;line-height:1;color:var(--navy)}
.wordmark em{font-style:normal;color:var(--red)}
.tagline{
  margin-top:9px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;

  font-size:10px;
  letter-spacing:2.2px;
  text-transform:uppercase;
  color:var(--muted-2);
  font-weight:700;
  line-height:1.35;
}
.lrule{height:1px;background:var(--line);margin:18px 0}
.field-in{text-align:left;margin-bottom:14px}
.field-in label{display:block;font-size:11px;font-weight:700;letter-spacing:.4px;color:var(--muted);margin-bottom:7px}
.field-in .wrap{position:relative}
.field-in .ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted-2);display:flex}
.field-in input{width:100%;padding:13px 14px 13px 42px;font-size:15px;font-weight:500;color:var(--ink);background:var(--surface-2);border:1.5px solid var(--line);border-radius:12px;outline:none;transition:.2s;font-family:inherit}
.field-in input::placeholder{color:var(--muted-2)}
.field-in input:focus{border-color:var(--navy);background:#fff;box-shadow:0 0 0 3px rgba(14,27,51,.10),0 1px 2px rgba(14,27,51,.05)}
/* password show/hide eye toggle */
#pw{padding-right:44px}
/* hide the browser's native password reveal (Edge/IE) so only our eye shows */
#pw::-ms-reveal,#pw::-ms-clear{display:none}
.field-in .wrap .pweye{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:auto;min-height:0;padding:6px;margin:0;background:none;border:0;border-radius:8px;color:var(--muted-2);cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:0}
.field-in .wrap .pweye:hover{color:var(--navy)}
.field-in .wrap .pweye svg{width:19px;height:19px;display:block}
.slider{margin-top:18px}
.slider .lab{font-size:11px;font-weight:700;letter-spacing:.4px;color:var(--muted);text-align:left;margin-bottom:8px}
.track{position:relative;height:58px;border-radius:29px;background:var(--navy);overflow:hidden;user-select:none;box-shadow:inset 0 1px 3px rgba(0,0,0,.3)}
.track .fill{position:absolute;left:0;top:0;bottom:0;width:58px;border-radius:29px;background:linear-gradient(90deg,var(--pitch-d),var(--pitch-l));transition:width .05s linear}
.track .txt{
  position:absolute;
  left:56px;
  right:56px;
  top:0;
  bottom:0;

  display:flex;
  align-items:center;
  justify-content:center;

  color:#ffffff;
  font-size:13px;
  font-weight:800;
  letter-spacing:2px;
  text-transform:uppercase;
  text-align:center;
  white-space:nowrap;

  pointer-events:none;
  z-index:2;
}
.knob{position:absolute;left:4px;top:4px;width:50px;height:50px;border-radius:50%;background:transparent;overflow:hidden;display:flex;align-items:center;justify-content:center;cursor:grab;box-shadow:0 6px 16px rgba(3,22,11,.45),0 1px 3px rgba(0,0,0,.3);touch-action:none;z-index:3}
.knob:active{cursor:grabbing}
.knob .ball{width:100%;height:100%;display:block;filter:drop-shadow(0 1px 1px rgba(0,0,0,.2))}
.track .goalnet{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  width:42px;
  height:28px;
  color:#ffffff;
  opacity:.82;
  pointer-events:none;
  z-index:1;
}

.track .goalnet svg{
  width:100%;
  height:100%;
}

.track.done .goalnet{
  opacity:1;
  animation:goalPulse .22s ease-out;
}

@keyframes goalPulse{
  0%{transform:translateY(-50%) scale(1)}
  45%{transform:translateY(-50%) scale(1.12)}
  100%{transform:translateY(-50%) scale(1)}
}
.track.done .fill{width:100%!important}
.track.done .txt{color:#fff}
.demo{margin-top:16px;font-size:11px;color:var(--muted-2);line-height:1.6}
.demo b{color:var(--muted);font-weight:700}
.switch-portal{margin-top:13px;font-size:12px;color:var(--muted)}
.switch-portal a{color:var(--blue);font-weight:700;text-decoration:none}
.lfoot{margin-top:16px;font-size:11px;color:var(--muted-2);text-align:center;white-space:normal;line-height:1.5;padding:0 6px}
.lfoot b{color:var(--navy)}
@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}

#app{display:none;position:fixed;inset:0;z-index:40;flex-direction:column}
.topbar{
  flex-shrink:0;
  height:60px;
  padding:0 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:var(--surface);
  border-bottom:1px solid var(--line);
}

.topbar .brand{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex:1;
}

.topbar .badge-crest{
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-left:auto;
}

.topbar .badge-crest img{
  width:100%;
  height:100%;
  object-fit:contain;
}
.topbar .wm{font-family:'Archivo',sans-serif;font-weight:800;font-size:17px;letter-spacing:-.3px;color:var(--navy)}
.topbar .wm em{font-style:normal;color:var(--red)}
.top-right{display:flex;align-items:center;gap:10px}
.role-pill{display:flex;align-items:center;gap:6px;background:var(--surface-2);border:1px solid var(--line);border-radius:20px;padding:5px 11px 5px 9px;font-size:12px;font-weight:700;color:var(--navy)}
.role-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px var(--green-soft)}
.signout{background:none;border:1px solid var(--line);border-radius:9px;padding:7px 10px;color:var(--muted);font-size:12px;font-weight:600;transition:.2s}
.signout:hover{border-color:var(--red);color:var(--red)}
.scroll{flex:1;overflow-y:auto;overflow-x:hidden;background:radial-gradient(115% 55% at 100% 0%,rgba(11,87,196,.06),transparent 55%),radial-gradient(85% 50% at 0% 100%,rgba(224,35,58,.04),transparent 60%),linear-gradient(180deg,rgba(238,242,249,.92),rgba(232,237,246,.66)),url('../assets/bg-pitch.jpg') center bottom/cover no-repeat}
.scroll::-webkit-scrollbar{width:0}
.inner{max-width:560px;margin:0 auto;padding:16px 16px 56px}

.hero{
  border-radius:20px;
  padding:15px 20px;
  margin-bottom:14px;
  color:#fff;
  position:relative;
  overflow:hidden;

  background:
    linear-gradient(
      115deg,
      rgba(6,18,38,.74) 0%,
      rgba(6,18,38,.42) 52%,
      rgba(6,18,38,.24) 100%
    ),
    url('../assets/parent_dash.jpg') center/cover no-repeat,
    linear-gradient(135deg,#0b1f3a 0%,#0e2b52 100%);

  box-shadow:
    0 14px 30px rgba(7,20,45,.22),
    0 3px 8px rgba(7,20,45,.12);
}

.hero::before{
  content:'';
  position:absolute;
  right:18px;
  top:50%;
  margin-top:-33px;
  width:66px;
  height:66px;

  background:
    url('../assets/football-outline.svg')
    center/contain no-repeat;

  opacity:.075;
  pointer-events:none;
  z-index:0;
  animation:heroBall 12s linear infinite;
}
@keyframes heroBall{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.hero::before{animation:none}}
.hero .eyebrow,
.hero h1,
.hero p{
  position:relative;
  z-index:1;
}

.hero .eyebrow{
  font-size:10px;
  letter-spacing:1.6px;
  text-transform:uppercase;
  font-weight:700;
  color:rgba(255,255,255,.76);
}

.hero h1{
  font-family:'Archivo',sans-serif;
  font-weight:800;
  font-size:24px;
  letter-spacing:-.4px;
  margin:5px 0 4px;
}

.hero p{
  font-size:13px;
  color:rgba(255,255,255,.78);
  max-width:75%;
}
.slabel{display:flex;align-items:center;gap:10px;margin:0 0 9px;font-family:'Archivo',sans-serif;font-weight:700;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
.slabel::after{content:'';flex:1;height:1px;background:var(--line)}
.slabel .tick{width:16px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--red),var(--blue));flex:none}

.pswitch{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}
.ptab{position:relative;background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-sm);padding:14px 12px;text-align:left;display:flex;align-items:center;gap:11px;transition:.18s;box-shadow:var(--sh-sm)}
.ptab:hover{border-color:var(--blue-3)}
.ptab.on{border-color:var(--navy);box-shadow:0 0 0 3px rgba(14,27,51,.08),var(--sh-sm)}
.ptab .mono{width:40px;height:40px;border-radius:11px;flex:none;display:flex;align-items:center;justify-content:center;font-family:'Archivo',sans-serif;font-weight:800;font-size:15px;color:#fff}
.ptab .who{display:flex;flex-direction:column;min-width:0}
.ptab .who .nm{font-weight:800;font-size:14px;color:var(--ink)}
.ptab .who .ps{font-size:11px;color:var(--muted);margin-top:1px}
.ptab .lvl{position:absolute;top:-8px;right:10px;font-family:'Archivo',sans-serif;font-weight:800;font-size:10px;letter-spacing:.5px;color:#fff;background:var(--navy);border-radius:7px;padding:2px 7px;box-shadow:var(--sh-sm)}
.ptab.on .lvl{background:linear-gradient(90deg,var(--red),var(--blue))}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 18px;margin-bottom:14px;box-shadow:var(--sh)}

.pcard{background:linear-gradient(155deg,var(--navy) 0%,#132549 55%,var(--navy-2) 100%);border-radius:var(--r);padding:16px 18px;margin-bottom:14px;color:#fff;position:relative;overflow:hidden;box-shadow:var(--sh-lg)}
.pcard::before{content:'';position:absolute;top:0;left:18px;right:18px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--red),var(--blue))}
.pcard::after{content:'';position:absolute;inset:0;opacity:.4;background:repeating-linear-gradient(180deg,rgba(255,255,255,0) 0 30px,rgba(255,255,255,.035) 30px 60px)}
.pc-top{display:flex;align-items:center;gap:16px;position:relative}
.pc-ring{position:relative;width:78px;height:78px;flex:none}
.pc-ring svg{transform:rotate(-90deg)}
.pc-ring .num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.pc-ring .num .n{font-family:'Archivo',sans-serif;font-weight:900;font-size:24px;line-height:1}
.pc-ring .num .l{font-size:8px;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.6);margin-top:1px}
.pc-id .nm{font-family:'Archivo',sans-serif;font-weight:800;font-size:23px;letter-spacing:-.4px;line-height:1.05}
.pc-id .meta{font-size:12px;color:rgba(255,255,255,.68);margin-top:5px}
.pc-id .jersey{display:inline-flex;align-items:center;gap:6px;margin-top:9px;font-size:11px;font-weight:700;letter-spacing:.5px;color:#fff;background:rgba(11,87,196,.28);border:1px solid rgba(58,124,224,.5);border-radius:20px;padding:4px 11px}
.pc-xp{margin-top:18px;position:relative}
.pc-xp .row{display:flex;justify-content:space-between;font-size:11px;color:rgba(255,255,255,.66);margin-bottom:7px;font-weight:600}
.pc-xp .row b{color:#fff}
.pc-xp .bar{height:8px;background:rgba(255,255,255,.12);border-radius:6px;overflow:hidden}
.pc-xp .bar span{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--pitch-d),var(--pitch-l));transition:width .9s cubic-bezier(.22,1,.36,1)}
.pc-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px;position:relative}
.pc-stat{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.09);border-radius:var(--r-xs);padding:12px 8px;text-align:center}
.pc-stat .v{font-family:'Archivo',sans-serif;font-weight:800;font-size:22px;line-height:1}
.pc-stat .t{font-size:10px;letter-spacing:.6px;text-transform:uppercase;color:rgba(255,255,255,.6);margin-top:3px}

.next{display:flex;align-items:center;gap:15px}
.next .cal{width:50px;height:50px;flex:none;border-radius:14px;background:var(--surface-2);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center}
.next .cal .d{font-family:'Archivo',sans-serif;font-weight:800;font-size:22px;color:var(--navy);line-height:1}
.next .cal .m{font-size:9px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);font-weight:700}
.next .info{flex:1;min-width:0}
.next .info .k{font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);font-weight:700}
/*el*/.next .info .v{overflow:hidden;text-overflow:ellipsis;font-weight:700;font-size:15px;margin-top:3px;color:var(--ink)}
.next .info .loc{font-size:12px;color:var(--muted);margin-top:2px}
.next .cd{text-align:right;flex:none}
.next .cd .n{font-family:'Archivo',sans-serif;font-weight:800;font-size:20px;color:var(--navy);line-height:1}
.next .cd .t{font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);margin-top:3px}

.coach{display:flex;align-items:center;gap:14px}
.coach .av{width:46px;height:46px;flex:none;border-radius:50%;background:linear-gradient(150deg,var(--blue-2),var(--blue-3));display:flex;align-items:center;justify-content:center;font-family:'Archivo',sans-serif;font-weight:800;color:#fff;font-size:17px;border:2px solid #fff;box-shadow:var(--sh-sm)}
.coach .nm{font-weight:800;font-size:15px}
.coach .cr{font-size:12px;color:var(--muted);margin-top:2px}
.coach .grp{font-size:11px;color:var(--blue);font-weight:700;margin-top:3px}
.coach .msg{margin-left:auto;flex:none;background:var(--navy);color:#fff;border:none;border-radius:10px;padding:9px 15px;font-size:12px;font-weight:700;transition:.2s}
.coach .msg:hover{background:var(--navy-2)}

.note{background:var(--surface-2);border:1px solid var(--line);border-left:3px solid;border-image:linear-gradient(180deg,var(--red),var(--blue)) 1;border-radius:0 var(--r-sm) var(--r-sm) 0;padding:15px 17px;position:relative}
.note .k{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--navy);font-weight:800;margin-bottom:6px;display:flex;align-items:center;gap:6px}
.note p{font-size:13px;font-style:italic;color:#41485e;line-height:1.55}
.rep-item{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--line-2)}
.rep-item:first-child{padding-top:0}
.rep-item:last-child{border-bottom:none;padding-bottom:0}
.rep-item .dot{width:9px;height:9px;border-radius:50%;background:linear-gradient(180deg,var(--red),var(--blue));margin-top:5px;flex:none}
.rep-item .rd{font-family:'Archivo',sans-serif;font-weight:800;font-size:12px;color:var(--navy)}
.rep-item .rs{font-size:13px;color:#41485e;line-height:1.55;margin-top:3px;font-style:italic}

.calhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}
.calhead .mo{font-family:'Archivo',sans-serif;font-weight:800;font-size:18px;color:var(--ink)}
.calhead .rate{font-size:12px;font-weight:800;color:var(--green);background:var(--green-soft);border-radius:20px;padding:4px 11px}
.calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.cdh{text-align:center;font-size:10px;font-weight:800;color:var(--muted-2);letter-spacing:.5px;padding:2px 0}
.cd{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:9px;font-size:13px;font-weight:600;color:var(--ink);position:relative;background:var(--surface-2)}
.cd.att{background:var(--green-soft);color:var(--green)}
.cd.att::after{content:'';position:absolute;bottom:4px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:var(--green)}
.cd.miss{background:var(--red-soft);color:var(--red)}
.cd.up{background:#fff;border:1.5px dashed #ccd5e6;color:var(--muted)}
.cd.today{background:var(--navy);color:#fff;font-weight:800;box-shadow:0 0 0 2px var(--blue)}
.calleg{display:flex;flex-wrap:wrap;gap:14px;margin-top:16px}
.calleg .li{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);font-weight:600}
.calleg .sw{width:11px;height:11px;border-radius:4px}
.attsum{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:16px}
.attsum .b{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-xs);padding:12px 6px;text-align:center}
.attsum .b .n{font-family:'Archivo',sans-serif;font-weight:800;font-size:20px;color:var(--navy);line-height:1}
.attsum .b .t{font-size:10px;color:var(--muted);letter-spacing:.4px;margin-top:3px;font-weight:600}

.sitem{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line-2)}
.sitem:last-child{border-bottom:none;padding-bottom:0}
.sitem:first-child{padding-top:0}
.sitem .day{width:46px;flex:none;text-align:center;background:var(--surface-2);border:1px solid var(--line);border-radius:11px;padding:8px 0}
.sitem .day .d{font-family:'Archivo',sans-serif;font-weight:800;font-size:19px;color:var(--navy);line-height:1}
.sitem .day .m{font-size:9px;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);font-weight:700}
.sitem .body{flex:1}
.sitem .ti{font-weight:700;font-size:14px;color:var(--ink)}
.sitem .mt{font-size:12px;color:var(--muted);margin-top:3px}
.sitem .tag{display:inline-block;margin-top:8px;font-size:10px;font-weight:800;letter-spacing:.6px;color:var(--navy);background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:3px 8px}

.pterm{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px}
.pterm .k{font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:4px}
.pterm .plan{font-size:13px;font-weight:700;color:var(--ink);max-width:200px}
.statusbadge{font-size:10px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;border-radius:20px;padding:5px 12px}
.statusbadge.paid{color:var(--green);background:var(--green-soft)}
.statusbadge.due{color:var(--red);background:var(--red-soft)}
.pamount{font-family:'Archivo',sans-serif;font-weight:900;font-size:40px;color:var(--ink);line-height:1;letter-spacing:-1px}
.pamount .cur{font-size:20px;color:var(--muted);font-weight:700;margin-right:3px}
.psub{font-size:12px;color:var(--muted);margin:4px 0 16px}
.pay-alert{background:var(--red-soft);border:1px solid #f4c6cf;border-radius:var(--r-sm);padding:14px 16px;margin-bottom:18px;font-size:12px;color:#8f1f33;line-height:1.6}
.pay-alert b{color:var(--ink);font-weight:700}
.pay-btn{width:100%;background:var(--navy);color:#fff;border:none;border-radius:12px;padding:14px;font-family:'Archivo',sans-serif;font-weight:700;font-size:14px;letter-spacing:.5px;margin-bottom:18px;transition:.2s}
.pay-btn:hover{background:var(--navy-2)}
.prow{display:flex;align-items:center;justify-content:space-between;padding:13px 14px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-xs);margin-bottom:9px}
.prow:last-child{margin-bottom:0}
.prow .lft{display:flex;align-items:center;gap:12px}
.prow .ic{width:34px;height:34px;flex:none;border-radius:10px;display:flex;align-items:center;justify-content:center}
.prow .ic.ok{background:var(--green-soft);color:var(--green)}
.prow .ic.pend{background:var(--red-soft);color:var(--red)}
.prow .desc{font-size:13px;font-weight:700;color:var(--ink)}
.prow .date{font-size:11px;color:var(--muted);margin-top:1px}
.prow .amt{font-family:'Archivo',sans-serif;font-weight:800;font-size:15px}
.prow .amt.ok{color:var(--green)}
.prow .amt.pend{color:var(--red)}

.lvlbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.lvlbar .nm{font-family:'Archivo',sans-serif;font-weight:800;font-size:22px;color:var(--ink);letter-spacing:-.3px}
.lvlbar .sub{font-size:12px;color:var(--muted);margin-top:2px}
.lvlbar .xp{text-align:right}
.lvlbar .xp .v{font-family:'Archivo',sans-serif;font-weight:800;font-size:20px;color:var(--navy)}
.lvlbar .xp .t{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.skill{margin-bottom:15px}
.skill:last-child{margin-bottom:0}
.skill .top{display:flex;justify-content:space-between;font-size:13px;margin-bottom:6px}
.skill .top .s{font-weight:700;color:var(--ink)}
.skill .top .v{font-family:'Archivo',sans-serif;font-weight:800;color:var(--navy)}
.skill .bar{height:8px;background:var(--line-2);border-radius:6px;overflow:hidden}
.skill .bar span{display:block;height:100%;border-radius:6px;transition:width .9s cubic-bezier(.22,1,.36,1)}
.ach{display:flex;align-items:center;gap:13px;padding:13px 15px;border:1px solid var(--line);border-radius:var(--r-sm);margin-bottom:9px;background:var(--surface-2)}
.ach:last-child{margin-bottom:0}
.ach.earned{background:var(--blue-soft);border-color:#c7dcf7}
.ach .em{font-size:24px;flex:none}
.ach.locked .em{filter:grayscale(1);opacity:.5}
.ach .nm{font-size:14px;font-weight:800;color:var(--ink)}
.ach .st{font-size:11px;color:var(--muted);margin-top:2px}
.ach.earned .st{color:var(--blue);font-weight:700}

.bnav{display:none}
.nb{flex:1;background:none;border:none;padding:11px 4px 9px;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--muted-2);position:relative;transition:color .18s}
.nb.on{color:var(--navy)}
.nb.on::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:26px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--red),var(--blue))}
.nb svg{width:22px;height:22px}
.nb .nl{font-size:10px;font-weight:700;letter-spacing:.3px}
.nb .pip{position:absolute;top:9px;right:calc(50% - 16px);width:7px;height:7px;border-radius:50%;background:var(--red);border:1.5px solid var(--surface)}

.tp{display:none}
.tp.on{display:block;animation:fade .32s ease}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:768px){.inner{padding:14px 16px 56px}}
@media(max-width:480px){.hero{padding:20px 18px}.hero h1{font-size:22px}}
@media(max-width:430px){
  .pswitch{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  .ptab{padding:11px 10px;gap:9px}
  .ptab .mono{width:34px;height:34px;font-size:13px}
  .attsum{grid-template-columns:repeat(2,1fr)}
  .next{gap:10px}
  .next .info .v{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
@media(max-width:390px){
  .topbar{padding:12px 14px}
  .topbar .wm{font-size:15px}
  .role-pill{padding:4px 9px;font-size:11px}
  .signout{padding:7px 11px}
}
@media(max-width:360px){
  .topbar{gap:8px}
  .top-right{gap:7px}
  .hero h1{font-size:20px}
}
/* touch targets + safe area */
.bnav .nb{min-height:52px}
.signout,.pswitch .pcard,.forgot,.switch-portal a{min-height:0}
.next .cal,.next .cd{flex:none}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

.notif{display:flex;align-items:center;gap:12px;border-radius:14px;padding:13px 14px;margin-bottom:10px;background:var(--surface);border:1px solid var(--line);box-shadow:0 2px 8px rgba(14,27,51,.05);cursor:pointer;animation:notifin .35s ease both;transition:box-shadow .15s,transform .15s}
.notif:hover{box-shadow:0 6px 16px rgba(14,27,51,.09);transform:translateY(-1px)}
@keyframes notifin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.notif .ni{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex:none}
.notif .nt b{font-family:'Archivo',sans-serif;font-weight:800;font-size:13.5px;color:var(--ink)}
.notif .nt span{font-size:12px;color:var(--muted);margin-top:1px}
.notif .nt{display:flex;flex-direction:column;line-height:1.3}
.notif .nt b{font-family:'Archivo',sans-serif;font-weight:800;font-size:14px}
.notif .nt span{font-size:12px;opacity:.92;margin-top:1px}

.lrow{display:flex;align-items:center;justify-content:space-between;margin:2px 0 18px;font-size:12.5px}
.remember{display:inline-flex;align-items:center;gap:8px;color:var(--muted);cursor:pointer;user-select:none}
.remember input{width:15px;height:15px;accent-color:var(--navy);cursor:pointer}
.remember span{font-weight:500}
.forgot{color:var(--navy);font-weight:500;text-decoration:none;transition:opacity .15s}
.forgot:hover{opacity:.65;text-decoration:underline}
.switch-portal a{transition:opacity .15s}
.switch-portal a:hover{opacity:.7}
.knob{transition:box-shadow .2s}
.knob:hover{box-shadow:0 8px 20px rgba(3,22,11,.5),0 2px 4px rgba(0,0,0,.3)}
.lspin{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;vertical-align:-2px;margin-right:8px;animation:lspin .6s linear infinite}
@keyframes lspin{to{transform:rotate(360deg)}}


/* ===== Real football on the sign-in slider (green fully masked) ===== */
.knob{ background: var(--navy); }
.knob .ball{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.18);
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}
.track .fill{
  left: 4px;
  top: 4px;
  bottom: auto;
  width: 50px;
  height: 50px;
  border-radius: 25px;
}


/* ===== Home "at a glance" summary strip ===== */
.glance-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:4px 0 6px}
.gtile{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 13px 15px;text-align:left;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease;box-shadow:0 1px 2px rgba(14,27,51,.05)}
@media (hover:hover){.gtile:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(14,27,51,.10)}}
.gtile .gv{font-family:'Archivo',sans-serif;font-weight:800;font-size:23px;line-height:1}
.gtile .gt{font-size:11px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);margin-top:6px}
.gtile .gs{font-size:10px;color:var(--muted-2);margin-top:3px;line-height:1.3;min-height:26px}
.gchip{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;margin-bottom:11px}
.gchip img{
  width:26px;
  height:26px;
  display:block;
  object-fit:contain;
}
.gchip.green{background:rgba(26,157,90,.12);color:var(--green)}
.gchip.blue{background:rgba(11,87,196,.10);color:var(--blue)}
.gchip.red{background:rgba(224,35,58,.10);color:var(--red)}
.gchip.navy{background:rgba(14,27,51,.08);color:var(--navy)}
/* RSVP buttons */
.rsvp-btn{flex:1;padding:8px 4px;border:1px solid var(--line);background:#fff;border-radius:9px;font-weight:700;font-size:12px;color:var(--muted);cursor:pointer;transition:transform .08s ease}
.rsvp-btn:active{transform:scale(.94)}
.rsvp-btn.on-yes{background:#e6f7ee;border-color:#1a9d5a;color:#1a9d5a}
.rsvp-btn.on-maybe{background:#fff6e5;border-color:#c98a12;color:#c98a12}
.rsvp-btn.on-no{background:#fdecee;border-color:#e0233a;color:#e0233a}

/* ---- Button loading spinner (async action feedback) ---- */
@keyframes ek-btn-spin{ to{ transform:rotate(360deg); } }
.is-loading{ position:relative !important; color:transparent !important; pointer-events:none !important; }
.is-loading > *{ opacity:0 !important; }
.is-loading::after{
  content:""; position:absolute; top:50%; left:50%;
  width:14px; height:14px; margin:-7px 0 0 -7px; box-sizing:border-box;
  border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%;
  animation:ek-btn-spin .6s linear infinite;
}
/* light RSVP buttons get a navy spinner instead of white */
.rsvp-btn.is-loading::after{
  border-color:rgba(14,27,51,.25); border-top-color:#0e1b33;
}

/* ---- Mobile: 16px inputs so iOS Safari does not zoom in on focus ---- */
@media (max-width: 768px){
  input, select, textarea { font-size: 16px !important; }
}

/* Home dashboard snapshot "View all" links */
.snap-link{display:inline-block;margin-top:11px;font-size:12.5px;font-weight:700;color:var(--blue);cursor:pointer;text-decoration:none}
.snap-link:hover{text-decoration:underline}

/* ===== Parent desktop app shell (sidebar) - mirrors admin, desktop only ===== */
.pmain{display:flex;flex-direction:column;flex:1;min-width:0;overflow:hidden}
.psidebar{position:fixed;top:0;left:0;bottom:0;width:272px;max-width:82vw;background:var(--navy);padding:20px 14px;display:flex;flex-direction:column;transform:translateX(-100%);transition:transform .25s ease;z-index:71;overflow-y:auto}
.psidebar.open{transform:translateX(0)}
.pdrawer-bg{position:fixed;inset:0;background:rgba(6,12,24,.5);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease;z-index:70}
.pdrawer-bg.open{opacity:1;visibility:visible}
.pburger{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:none;background:none;color:var(--navy);cursor:pointer;border-radius:10px;flex:none;padding:0}
.pburger:hover{background:rgba(14,27,51,.06)}
.psb-brand{display:flex;align-items:center;gap:11px;padding:2px 8px 18px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:14px}
.psb-brand .c{width:40px;height:40px;flex:none;display:flex;align-items:center;justify-content:center}
.psb-brand .c img{width:100%;height:100%;object-fit:contain}
.psb-brand .wm{font-family:'Archivo',sans-serif;font-weight:800;font-size:16px;letter-spacing:-.3px;line-height:1.05;color:#fff}
.psb-brand .wm em{font-style:normal;color:#ff6b7d}
.psb-brand .wm .r{display:block;font-size:9px;letter-spacing:1.5px;color:rgba(255,255,255,.5);font-weight:700}
.psb-item{display:flex;align-items:center;gap:12px;width:100%;padding:11px 12px;border:0;background:none;border-radius:11px;color:rgba(255,255,255,.72);font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;text-align:left;transition:.16s;margin-bottom:2px}
.psb-item svg{width:20px;height:20px;flex:none}
.psb-item:hover{background:rgba(255,255,255,.06);color:#fff}
.psb-item.on{background:rgba(255,255,255,.10);color:#fff}
.psb-foot{margin-top:auto;border-top:1px solid rgba(255,255,255,.08);padding-top:14px}
.psb-user{display:flex;align-items:center;gap:11px;padding:6px 8px}
.psb-user .av{width:38px;height:38px;border-radius:11px;flex:none;background:linear-gradient(150deg,var(--blue),var(--navy));display:flex;align-items:center;justify-content:center;font-family:'Archivo',sans-serif;font-weight:800;color:#fff;font-size:14px}
.psb-user .nm{font-weight:700;font-size:13px;color:#fff}
.psb-user .rl{font-size:11px;color:rgba(255,255,255,.5)}
.psb-user .out{margin-left:auto;background:none;border:none;color:rgba(255,255,255,.5);display:flex;padding:6px;border-radius:8px;cursor:pointer;transition:.2s}
.psb-user .out:hover{color:var(--red);background:rgba(255,255,255,.06)}

@media (min-width:900px){
  #app{flex-direction:row}
  .psidebar{display:flex;flex-direction:column;width:240px;max-width:none;flex:none;background:var(--navy);padding:20px 14px;position:relative;transform:none;z-index:2}
  .pdrawer-bg{display:none}
  .pburger{display:none}
  .psidebar::after{content:'';position:absolute;top:0;right:0;bottom:0;width:1px;background:linear-gradient(180deg,transparent,rgba(58,124,224,.4),var(--red),transparent)}
  .topbar{display:none}
  .bnav{display:none}
  .inner{max-width:1320px;margin:0;padding:22px 34px 40px}
}

#pp-file{width:100%;font-size:13px;padding:9px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2,#f4f7fb);cursor:pointer;box-sizing:border-box}
#pp-file::file-selector-button{margin-right:10px;padding:7px 12px;border:none;border-radius:8px;background:var(--navy);color:#fff;font-weight:700;font-size:12px;cursor:pointer}

/* ===== Desktop only: trim wasted vertical padding on dashboard cards. Mobile/iPhone untouched. ===== */
@media (min-width:900px){
  /* Desktop only. Home is compact; other tabs use the full available width. Mobile/tablet untouched. */
  /* Note: .inner stays wide (see the layout block above) so Attendance / Payments / Progress are not squeezed. */
  /* All tabs left-align at the same left edge after the sidebar (consistent alignment). */

  /* HOME: constrained, left-aligned width */
  #tp-home{max-width:980px;margin:0}

  /* Welcome banner */
  #tp-home .hero{padding:11px 20px}

  /* Top 3 summary cards: narrower + shorter, not stretched full width */
  #tp-home .glance-strip{max-width:560px;gap:8px;margin:2px 0 4px}
  #tp-home .gtile{padding:10px 12px 9px}
  #tp-home .gtile .gt{margin-top:4px}
  #tp-home .gtile .gs{min-height:0;margin-top:2px}
  #tp-home .gchip{width:38px;height:38px;margin-bottom:6px}

  /* Your players cards: compact, only as wide as needed */
  #tp-home .pswitch{max-width:520px;gap:8px;margin-bottom:11px}
  #tp-home .ptab{padding:9px 12px}
  #tp-home .ptab .mono{width:36px;height:36px}

  /* Player performance (dark) card: shorter and less stretched */
  #tp-home .pcard{padding:11px 16px 12px;margin-bottom:9px}
  #tp-home .pc-xp{margin-top:10px}
  #tp-home .pc-stats{margin-top:10px;gap:8px}
  #tp-home .pc-stat{padding:7px 8px}

  /* Home generic cards + labels (scoped to Home so other tabs keep their normal size) */
  #tp-home .card{padding:10px 16px;margin-bottom:9px}
  #tp-home .notif{padding:9px 14px}
  #tp-home .slabel{margin:0 0 6px}

  /* Home next-session + head-coach rows */
  #tp-home .next{gap:12px}
  #tp-home .next .cal{width:42px;height:42px}
  #tp-home .coach .av{width:40px;height:40px}

  /* PAYMENTS: wider desktop layout, left-aligned with its heading */
  #tp-pay{max-width:1100px;margin:0}

  /* ATTENDANCE + PROGRESS: use the full available desktop width (no extra cap) */
}

/* ============================================================
   Batch A - parent mobile fixes (desktop untouched)
   ============================================================ */

/* Item 3: slider label one line on very small screens */
@media(max-width:420px){ .track .txt{font-size:11px;letter-spacing:1px;left:48px;right:48px} }

/* Item 9: compact next-session date + countdown block on mobile */
@media(max-width:480px){
  .next{gap:12px}
  .next .cal{width:44px;height:44px;border-radius:12px}
  .next .cal .d{font-size:19px}
  .next .cal .m{font-size:8.5px}
  .next .cd .n{font-size:17px}
  .next .cd .t{font-size:9px}
}

/* ============================================================
   Batch C - payment status + RSVP
   ============================================================ */

/* Item 12: Under review status badge (amber) */
.statusbadge.review{color:#b7791f;background:rgba(230,160,20,.14)}

/* Item 10: compact upcoming-session date block on mobile */
@media(max-width:480px){
  .sitem .day{width:40px;padding:6px 0}
  .sitem .day .d{font-size:17px}
  .sitem .day .m{font-size:8.5px}
}

/* Item 14: Up-to-date (not due yet) status badge */
.statusbadge.notdue{color:var(--navy);background:var(--surface-2)}

/* Login: gently spinning football in the slide-to-sign-in knob (keeps its 1.18 scale while rotating) */
@keyframes ekBallSpin{ from{ transform:rotate(0deg) scale(1.18); } to{ transform:rotate(360deg) scale(1.18); } }
.knob .ball{ animation:ekBallSpin 6s linear infinite; will-change:transform; }
@media(prefers-reduced-motion:reduce){ .knob .ball{ animation:none; } }

/* ============================================================
   Item 4: compact summary strip (replaces the 3 oversized tiles)
   ============================================================ */
.gstrip{display:flex;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;margin:4px 0 8px;box-shadow:0 2px 10px rgba(14,27,51,.05)}
.gcell{flex:1;display:flex;align-items:center;gap:9px;padding:12px 13px;background:none;border:0;border-right:1px solid var(--line-2);cursor:pointer;text-align:left;min-width:0}
.gcell:last-child{border-right:none}
.gcell-ic{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex:none;background:var(--surface-2)}
.gcell-ic img{width:23px;height:23px}
.gcell-ic.navy{background:rgba(14,27,51,.08)}
.gcell-ic.green{background:var(--green-soft)}
.gcell-ic.blue{background:rgba(47,126,240,.12)}
.gcell-ic.red{background:var(--red-soft)}
.gcell-tx{display:flex;flex-direction:column;justify-content:center;min-width:0}
.gcell-main{font-size:13px;color:var(--muted);font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gcell-main b{color:var(--navy);font-weight:800}
.gcell-sub{font-size:11px;color:var(--muted-2);font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px}

/* ============================================================
   Item 5: compact upcoming-session row
   ============================================================ */
.srow{display:flex;align-items:center;gap:11px;flex-wrap:wrap;padding:11px 0;border-bottom:1px solid var(--line-2)}
.srow:last-child{border-bottom:none}
.srow-date{font-size:12px;color:var(--muted);white-space:nowrap;font-weight:700;letter-spacing:.3px}
.srow-date b{font-family:'Archivo',sans-serif;font-weight:800;font-size:16px;color:var(--navy);margin-right:3px}
.srow-squad{font-size:11px;font-weight:800;letter-spacing:.3px;color:var(--navy);background:var(--surface-2);border-radius:7px;padding:3px 8px;white-space:nowrap}
.srow-when{font-size:12px;color:var(--muted);flex:1;min-width:120px}
.srow-tag{font-size:10px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;color:var(--muted);background:var(--surface-2);border:1px solid var(--line);border-radius:20px;padding:4px 9px;white-space:nowrap}
.srow-tag.cx{color:var(--red);background:var(--red-soft);border-color:transparent}
.srow-rsvp{display:flex;gap:6px}
.srow-reason{flex-basis:100%;font-size:12px;color:var(--red);background:var(--red-soft);border-radius:9px;padding:7px 10px;line-height:1.4}

/* Mobile: stack the strip and let the row wrap responsively */
@media(max-width:560px){
  .gstrip{flex-direction:column}
  .gcell{border-right:none;border-bottom:1px solid var(--line-2)}
  .gcell:last-child{border-bottom:none}
  .srow-when{flex-basis:100%;order:5}
  .srow-rsvp{flex-basis:100%;order:6}
  .srow-rsvp .rsvp-btn{flex:1}
}

/* Desktop: keep the summary strip compact, not stretched */
@media (min-width:900px){
  #tp-home .gstrip{max-width:640px}
}

/* Mobile drawer: disable horizontal page scroll while the drawer is open */
body.ek-drawer-open{overflow-x:hidden}

/* Credit system status badges */
.statusbadge.notdue{color:var(--green);background:var(--green-soft)}
.statusbadge.due{color:#8a5a00;background:rgba(230,160,20,.16)}
.statusbadge.overdue{color:#fff;background:var(--red)}

/* ============================================================
   Login card - phone sizing (right-size on large Android/iPhone,
   16px inputs to stop iOS zoom, footer wraps cleanly).
   ============================================================ */
@media(max-width:520px){
  #login{padding:16px}
  .lcard{max-width:344px;padding:26px 22px 22px;border-radius:18px}
  .crest{width:78px;height:78px;margin:2px auto 10px}
  .wordmark{font-size:23px}
  .tagline{margin-top:7px;font-size:9.5px;letter-spacing:1.9px}
  .field-in input{font-size:16px}
  .lfoot{white-space:normal;font-size:9.5px;letter-spacing:0}
}
@media(max-width:380px){
  .lcard{padding:22px 18px 18px}
  .wordmark{font-size:22px}
  .track .txt{font-size:11px;letter-spacing:1px}
}

/* ============================================================
   2026 desktop home dashboard refinement
   Mobile remains the original single-column flow.
   ============================================================ */
@media (min-width: 900px){
  .psidebar{width:242px}
  .pmain{margin-left:0}
  .inner{max-width:1180px;padding:22px 28px 64px}

  #tp-home .hero{padding:18px 22px;margin-bottom:14px}
  #tp-home .hero h1{font-size:25px}
  #tp-home .hero p{max-width:70%}

  #tp-home .gstrip{max-width:none;margin-bottom:14px}
  #tp-home .pswitch{grid-template-columns:repeat(2,minmax(220px,260px));justify-content:start;gap:10px;margin-bottom:16px}
  #tp-home .ptab{padding:11px 12px}
  #tp-home .ptab .mono{width:36px;height:36px}

  .home-desktop-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(300px,.85fr);gap:18px;align-items:start;margin-bottom:16px}
  .home-player-col,.home-side-col{min-width:0}
  .home-side-col{display:grid;gap:14px;align-content:start}
  .home-side-section .slabel{margin-bottom:7px}
  .home-compact-card{margin-bottom:0;padding:16px}

  #tp-home .pcard{margin-bottom:0;min-height:100%;padding:18px 20px}
  #tp-home .pc-ring{width:68px;height:68px}
  #tp-home .pc-id .nm{font-size:22px}
  #tp-home .pc-xp{margin-top:14px}
  #tp-home .pc-stats{margin-top:14px}
  #tp-home .pc-stat{padding:10px 8px}

  .home-side-col .next{gap:11px;align-items:center}
  .home-side-col .next .cal{width:46px;height:46px;border-radius:12px}
  .home-side-col .next .cal .d{font-size:19px}
  .home-side-col .next .info .v{font-size:13px;line-height:1.35}
  .home-side-col .next .cd .n{font-size:17px}

  #home-pay-snap .pay-btn{margin:10px 0 0;padding:11px}
  #home-pay-snap .pamount{font-size:30px}
  #home-pay-snap .psub{margin-bottom:10px}

  #home-att-snap{padding:15px 18px}
  #tp-home > .slabel{margin-top:2px}

  /* Coach is useful but secondary, so keep it visually compact. */
  #tp-home .coach{min-height:46px}
}

@media (min-width: 900px) and (max-width: 1080px){
  .inner{padding-left:20px;padding-right:20px}
  .home-desktop-grid{grid-template-columns:minmax(0,1.45fr) minmax(280px,.9fr)}
}

@media (max-width: 899px){
  .home-desktop-grid{display:block}
  .home-side-col{display:block}
}


/* ===== Final desktop home alignment + lower two-column row ===== */
@media (min-width:900px){
  /* Sidebar already participates in #app flex layout. No second offset. */
  .pmain{margin-left:0 !important}

  /* Use available desktop width without the artificial 980px home cap. */
  #tp-home{max-width:none;margin:0}
  .inner{width:100%;max-width:1180px;margin:0 auto;padding:22px 28px 64px}

  /* Attendance + coach share the final desktop row. */
  .home-bottom-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(300px,.85fr);gap:18px;align-items:start}
  .home-bottom-section{min-width:0}
  .home-bottom-section .slabel{margin:0 0 7px}
  .home-bottom-section .card{margin-bottom:0}
  .home-coach-card{padding:15px 16px}
  .home-coach-card .coach{min-height:52px}
}

@media (min-width:900px) and (max-width:1080px){
  .home-bottom-grid{grid-template-columns:minmax(0,1.45fr) minmax(280px,.9fr)}
}

@media (max-width:899px){
  .home-bottom-grid{display:block}
  .home-bottom-section .card{margin-bottom:14px}
}


/* ============================================================
   Desktop reference composition - 16 Sep 2026
   Matches approved wide desktop visual. Mobile remains untouched.
   ============================================================ */
@media (min-width: 900px){
  /* Wider, premium desktop shell */
  .inner{width:100%;max-width:1320px;margin:0 auto;padding:26px 28px 64px}
  #tp-home{max-width:none;width:100%;margin:0}

  /* Desktop reference intentionally uses the selected player profile itself
     as the player identity, avoiding a duplicated player-selector row. */
  #tp-home .players-label,
  #tp-home #switch-home{display:none !important}

  #tp-home .hero{padding:18px 26px;margin-bottom:18px;border-radius:18px}
  #tp-home .hero h1{font-size:27px}
  #tp-home .glance-strip{margin:0 0 28px;gap:0;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff;box-shadow:var(--sh-sm)}
  #tp-home .gtile{border:0;border-right:1px solid var(--line);border-radius:0;box-shadow:none;padding:13px 18px;min-height:66px}
  #tp-home .gtile:last-child{border-right:0}

  /* Main two-column dashboard: strong player feature + utility rail */
  .home-desktop-grid{grid-template-columns:minmax(0,1.72fr) minmax(390px,1fr);gap:28px;align-items:start;margin-bottom:28px}
  .home-side-col{gap:22px}
  .home-side-section .slabel{margin:8px 0 10px}
  .home-compact-card{padding:18px 18px;border-radius:18px}

  #tp-home .pcard{border-radius:18px;padding:20px 22px 18px;min-height:236px;display:flex;flex-direction:column;justify-content:center}
  #tp-home .pc-ring{width:82px;height:82px}
  #tp-home .pc-id .nm{font-size:27px}
  #tp-home .pc-id .meta{font-size:14px}
  #tp-home .pc-stats{margin-top:16px;gap:10px}
  #tp-home .pc-stat{padding:13px 8px}

  .home-side-col .next .cal{width:52px;height:52px}
  .home-side-col .next .info .v{font-size:14px}
  #home-pay-snap .pay-btn{padding:12px;margin:12px 0 0}

  /* Lower row follows exactly the same column tracks as the upper row. */
  .home-bottom-grid{grid-template-columns:minmax(0,1.72fr) minmax(390px,1fr);gap:28px;align-items:start}
  .home-bottom-section .slabel{margin:0 0 10px}
  #home-att-snap{padding:16px 20px;border-radius:18px}
  .home-coach-card{padding:16px 20px;border-radius:18px}
  .home-coach-card .coach{min-height:54px}
}

@media (min-width: 1200px){
  .psidebar{width:300px}
}

@media (min-width:900px) and (max-width:1199px){
  .psidebar{width:250px}
  .inner{max-width:1100px;padding-left:22px;padding-right:22px}
  .home-desktop-grid,
  .home-bottom-grid{grid-template-columns:minmax(0,1.5fr) minmax(320px,.9fr);gap:20px}
}

@media (max-width:899px){
  #tp-home .players-label{display:flex}
  #tp-home #switch-home{display:grid}
}

/* ============================================================
   Home 2026 additions - both kids together, quick actions,
   attendance ring, upcoming classes. Mobile-first; desktop safe.
   ============================================================ */

/* Both children shown together; the cards double as the selector */
#tp-home #switch-home{display:none!important}
.player-cards-grid{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:560px){.player-cards-grid{grid-template-columns:1fr 1fr}}
.pcard-multi{cursor:pointer;margin-bottom:0;transition:box-shadow .15s ease,transform .12s ease}
.pcard-multi:hover{transform:translateY(-2px)}
.pcard-multi.on{box-shadow:0 0 0 2px var(--blue-3),var(--sh-lg)}

/* Compact 4-segment credit indicator (parent home glance, credit cell only) */
.credbar{display:flex;gap:4px;align-items:center;margin-left:auto;padding-left:8px;flex:none}
.credseg{width:12px;height:6px;border-radius:3px;background:var(--line-2)}
.credseg.on{background:var(--blue)}
/* Subtle football watermark behind the player card content */
.pc-ball{position:absolute;right:-30px;top:50%;transform:translateY(-50%);width:180px;height:180px;opacity:.05;pointer-events:none;z-index:0}
.pc-ball svg{width:100%;height:100%;display:block}
.pcard .pc-top,.pcard .pc-stats{z-index:2}

/* Quick actions tiles */
.home-quick{margin-bottom:16px}
.qa-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.qa-tile{display:flex;flex-direction:column;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:15px 8px;cursor:pointer;box-shadow:var(--sh-sm);transition:transform .12s ease,box-shadow .12s ease;color:var(--navy);font-weight:700;font-size:12px}
.qa-tile:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(14,27,51,.10)}
.qa-tile .qa-ic{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex:none}
.qa-tile .qa-ic svg{width:20px;height:20px}
.qa-ic.green{background:var(--green-soft);color:var(--green)}
.qa-ic.red{background:var(--red-soft);color:var(--red)}
.qa-ic.blue{background:rgba(47,126,240,.12);color:var(--blue)}
.qa-ic.navy{background:rgba(14,27,51,.08);color:var(--navy)}
/* thin red-to-blue gradient border on the quick-action tiles (like the player card accent) */
.qa-tile{border-color:transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(120deg,var(--red),var(--blue)) border-box}
@media(max-width:480px){
  .qa-grid{grid-template-columns:repeat(2,1fr)}
  .next .info .v{font-size:13px}
  .calhead .mo{font-size:15px}
}

/* Attendance ring (home snapshot) */
.attring-wrap{display:flex;align-items:center;gap:18px}
.attring{position:relative;width:84px;height:84px;flex:none}
.attring-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.attring-c .p{font-family:'Archivo',sans-serif;font-weight:800;font-size:15px;color:var(--navy);line-height:1;white-space:nowrap}
.attring-c .l{font-size:9px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted-2);margin-top:2px}
.attleg{flex:1;display:flex;flex-direction:column;gap:9px;min-width:0}
.attleg-row{display:flex;align-items:center;gap:10px;font-size:13px}
.attleg-dot{width:10px;height:10px;border-radius:50%;flex:none}
.attleg-lab{color:var(--muted);font-weight:600;flex:1}
.attleg-n{font-family:'Archivo',sans-serif;font-weight:800;color:var(--navy)}

/* Upcoming classes on home reuse the .srow rows inside a .card */
.home-upcoming-sec{margin-bottom:14px}

/* Desktop only: taller hero strip so the court photo has more presence. Mobile untouched. */
@media (min-width:900px){
  #tp-home .hero{
    min-height:200px;
    padding:40px 32px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    margin-bottom:18px;
  }
  #tp-home .hero h1{font-size:30px}
}

/* Home "Upcoming classes": keep each row on a single line (scoped to home only) */
#home-upcoming .srow{flex-wrap:nowrap;gap:10px}
#home-upcoming .srow-date{flex:none}
#home-upcoming .srow-squad{flex:none;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#home-upcoming .srow-when{flex:1;min-width:0;order:0;flex-basis:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#home-upcoming .srow-tag{flex:none;order:0;margin-left:auto}

/* Desktop only: left-align parent content next to the sidebar (remove the centered gap). Mobile untouched. */
@media (min-width:900px){
  .inner{margin-left:0;margin-right:0}
}

/* Desktop: Upcoming classes narrower + tighter; attendance now sits in the left column */
@media (min-width:900px){
  .home-upcoming-sec{max-width:760px}
  #home-upcoming{padding:8px 18px}
  .home-attendance-section .slabel{margin:2px 0 10px}
}

/* Desktop: row-aligned home pairs (Players|Next, Updates|Payments, Attendance|Coach) */
.home-row{margin-bottom:14px}
@media (min-width:900px){
  .home-row{display:grid;grid-template-columns:minmax(0,1.72fr) minmax(360px,1fr);gap:28px;align-items:start;margin-bottom:22px}
  .home-row > *{min-width:0}
  .home-row > .home-row-main{grid-column:1}
  .home-row > .home-side-section{grid-column:2}
  .home-row .home-compact-card,.home-row .card{margin-bottom:0}
  .home-row .home-side-section .slabel,.home-row .home-attendance-section .slabel{margin:0 0 10px}
  /* No Updates -> that row's left cell is empty and leaves a big gap under the player card.
     Collapse the row so Payments uses the space instead of a hole. */
  .home-row:has(> #notif-sec[style*="none"]){grid-template-columns:1fr}
  .home-row:has(> #notif-sec[style*="none"]) > .home-side-section{grid-column:1;max-width:760px}
}

/* Short desktop viewports (e.g. a 150%-scaled 1080p laptop, ~1280x800): shrink the
   sign-in card so it is not oversized. Phones (<641px) keep their own mobile layout. */
@media (min-width:641px) and (max-height:860px){
  #login{padding:16px}
  #login .lcard{padding:22px 30px 18px}
  #login .crest{width:70px;height:70px;margin:2px auto 10px}
  #login .wordmark{font-size:23px}
  #login .tagline{margin-top:6px}
  #login .lrule{margin:12px 0}
  #login .slider{margin-top:12px}
  #login .lfoot{font-size:10px;margin-top:12px;white-space:nowrap}
}