:root{
  --orange:#FF7900; --ink:#1A1411; --red:#A63628; --paper:#FBF6F0; --card:#FFFFFF;
  --line:#EADFD3; --line2:#F1E8DE; --muted:#6B5E55; --orange-text:#B34F00; --tan:#F2C28C;
  --display:'Barlow Condensed','Arial Narrow',sans-serif;
  --body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:#EFE6DB;font-family:var(--body);color:var(--ink);-webkit-text-size-adjust:100%}
button,input,select{font-family:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.phone{max-width:480px;margin:0 auto;min-height:100vh;min-height:100dvh;background:var(--paper);display:flex;flex-direction:column;position:relative}
.loading{margin:auto;color:var(--muted)}
.display{font-family:var(--display);font-weight:700}

/* header */
.top{display:flex;align-items:center;gap:12px;padding:calc(18px + env(safe-area-inset-top,0px)) 20px 12px}
.top .logo{width:56px;height:40px;border-radius:8px;object-fit:cover}
.top .t{flex:1;min-width:0;display:flex;flex-direction:column}
.top .t b{font-family:var(--display);font-weight:700;font-size:26px;line-height:1;letter-spacing:.02em;text-transform:uppercase}
.top .t span{font-size:12px;color:var(--muted)}
.top .heart{width:44px;height:44px}

/* chips */
.chips{display:flex;gap:8px;padding:4px 20px 0}
.chip{flex:1;min-height:44px;border-radius:999px;font-size:14px;font-weight:600;border:1.5px solid var(--line);background:var(--card);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--orange);border-color:var(--ink)}
.bar{display:flex;align-items:center;justify-content:space-between;padding:12px 20px 0;min-height:44px;gap:8px}
.bar .sub{font-size:13px;color:var(--muted)}
.bar .count{font-size:12px;color:var(--muted)}
.datesel{position:relative;display:inline-flex;align-items:center}
.datesel select{appearance:none;-webkit-appearance:none;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:8px 34px 8px 14px;min-height:40px;font-size:13px;font-weight:500;color:var(--ink)}
.datesel:after{content:'';position:absolute;right:14px;top:50%;width:7px;height:7px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:translateY(-70%) rotate(45deg);pointer-events:none}

/* podium */
.podium{display:flex;align-items:flex-end;justify-content:center;gap:10px;padding:22px 20px 0}
.pod{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px}
.pod .nm{font-size:14px;font-weight:600;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pod .pts{font-family:var(--display);font-weight:600;font-size:20px;line-height:1}
.pillar{width:100%;border-radius:12px 12px 0 0;display:flex;justify-content:center;padding-top:8px;font-family:var(--display);font-weight:700;font-size:34px;line-height:1}
.r1{background:var(--orange);color:var(--ink);height:104px}
.r2{background:var(--ink);color:#fff;height:76px}
.r3{background:var(--red);color:#fff;height:56px}

/* avatars */
.av{border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;overflow:hidden}
.av img{width:100%;height:100%;object-fit:cover}
.big{border:3px solid #fff}

/* list */
.sheet{flex:1;background:var(--card);border-radius:24px 24px 0 0;margin-top:-1px;padding:8px 20px 0;border-top:1px solid var(--line)}
.row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line2);min-height:52px}
.row .rk{width:26px;text-align:center;font-family:var(--display);font-weight:700;font-size:20px;color:var(--muted)}
.row .nm{flex:1;min-width:0;display:flex;flex-direction:column}
.row .nm b{font-size:15px;font-weight:600}
.row .nm span{font-size:12px;color:var(--muted)}
.row .pt{font-family:var(--display);font-weight:700;font-size:22px}
.empty{padding:24px 0;text-align:center;color:var(--muted);font-size:14px}

/* nav */
.spacer{flex:1}
.cols{flex:1;display:flex;flex-direction:column}
.pgrid,.pcol{display:block}
.nav{position:sticky;bottom:0;display:flex;background:var(--card);border-top:1px solid var(--line);padding:8px 20px calc(10px + env(safe-area-inset-bottom,0px))}
.nav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:44px;color:var(--muted);font-size:12px;font-weight:500}
.nav a[aria-current="page"]{color:var(--orange-text);font-weight:600}
.nav svg{stroke:currentColor}

/* login */
.login{background:var(--orange);min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.login .hero{flex:1;display:flex;align-items:center;justify-content:center;padding:40px 20px 16px}
.login .hero img{width:min(330px,100%);height:auto}
.panel{background:var(--paper);border-radius:28px 28px 0 0;padding:28px 24px calc(24px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:18px}
.panel h1{margin:0;font-family:var(--display);font-weight:700;font-size:38px;line-height:1;text-transform:uppercase;letter-spacing:.02em}
.panel p{margin:0;font-size:14px;color:var(--muted)}
.seg{display:flex;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:4px}
.seg button{flex:1;min-height:44px;border:0;border-radius:999px;font-size:14px;font-weight:600;background:transparent;color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--orange)}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:13px;font-weight:600}
.field input{height:48px;border:1.5px solid #D9CBBD;border-radius:12px;padding:0 14px;font-size:16px;background:var(--card);color:var(--ink)}
form{display:flex;flex-direction:column;gap:14px}
.cta{height:52px;background:var(--ink);color:#fff;border:0;border-radius:14px;font-size:16px;font-weight:600}
.cta[disabled]{opacity:.6}
.err{color:var(--red);font-size:14px;font-weight:600;margin:0;min-height:0}
.foot{display:flex;align-items:center;justify-content:center;gap:10px;padding-top:10px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.foot img{width:40px;height:40px}

/* profile */
.phead{background:var(--orange);padding:calc(10px + env(safe-area-inset-top,0px)) 20px 64px;display:flex;align-items:flex-start;justify-content:space-between}
.out{flex:none;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:transparent;border:0;border-radius:50%;color:var(--ink)}
.top .out{width:40px;margin-right:-8px}
.back{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:14px;font-weight:600}
.pmain{margin-top:-52px;padding:0 20px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.pmain h1{margin:6px 0 0;font-family:var(--display);font-weight:700;font-size:34px;line-height:1;text-transform:uppercase;letter-spacing:.02em}
.pmain .meta{font-size:14px;color:var(--muted)}
.stats{display:flex;gap:10px;padding:16px 20px 0}
.stat{flex:1;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:2px}
.stat span{font-size:12px;color:var(--muted)}
.stat b{font-family:var(--display);font-weight:700;font-size:32px;line-height:1}
.stat i{font-style:normal;font-size:12px;font-weight:600;color:var(--orange-text)}
.card{margin:14px 20px 0;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 16px}
.card h2{margin:0 0 10px;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.att{display:flex;gap:8px}
.att div{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--paper);border-radius:12px;padding:8px 4px}
.att b{font-family:var(--display);font-weight:700;font-size:26px;line-height:1}
.att span{font-size:11px;color:var(--muted)}
.kv{padding:4px 16px}
.kv div{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--line2);font-size:14px}
.kv div:last-child{border-bottom:0}
.kv span{color:var(--muted)}
.kv b{font-weight:600;text-align:right}
.note{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 20px;font-size:12px;color:var(--muted);text-align:center}
.note img{width:32px;height:32px}

/* equipiers page */
.gradebar{display:flex;gap:8px;padding:4px 20px 0;overflow-x:auto}
.gchip{flex:none;min-height:40px;padding:0 14px;border-radius:999px;border:1.5px solid var(--line);background:var(--card);font-size:13px;font-weight:600;color:var(--ink)}
.gchip[aria-pressed="true"]{background:var(--orange);border-color:var(--ink)}
.linkbtn{background:none;border:0;color:var(--muted);font-size:13px;text-decoration:underline;min-height:44px;padding:0 20px}

.banner{margin:16px 20px 0;background:#FFFFFF;border:1px solid var(--line);border-radius:16px;padding:14px 16px;font-size:14px;line-height:1.45}
.banner b{display:block;margin-bottom:4px}

/* ---------- wide screens (PC, tablet landscape) ---------- */
.span2{}
@media (min-width:900px){
  .phone{max-width:1040px;box-shadow:0 0 60px rgba(26,20,17,.10)}
  .phone:has(.login){max-width:none;box-shadow:none}
  .login{flex-direction:row}
  .login .hero{flex:1.2;padding:48px}
  .login .hero img{width:min(520px,100%)}
  .panel{width:460px;flex:none;border-radius:0;justify-content:center;padding:48px 40px}
  .top{padding-left:32px;padding-right:32px}
  .chips{max-width:520px;padding-left:32px;padding-right:32px}
  .bar{padding-left:32px;padding-right:32px}
  .cols{flex-direction:row;align-items:flex-start;gap:32px;padding:0 32px 32px}
  .podium{flex:0 0 440px;padding:24px 0 0}
  .cols .sheet{flex:1;min-width:0;margin-top:24px;border:1px solid var(--line);border-radius:24px;padding:8px 24px}
  .gradebar{padding-left:32px;padding-right:32px}
  .list2{display:grid;grid-template-columns:1fr 1fr;column-gap:40px;align-content:start;margin:12px 32px 32px;border:1px solid var(--line);border-radius:24px;padding:8px 24px}
  .list2 .span2{grid-column:1/-1}
  .phead{padding-left:32px;padding-right:32px}
  .pgrid{display:grid;grid-template-columns:1fr 1.3fr;gap:0 32px;padding:0 32px}
  .pgrid .pmain{padding:0}
  .pgrid .stats{padding:16px 0 0}
  .pgrid .card{margin:14px 0 0}
  .pcol:last-child .card:first-child{margin-top:16px}
  .note{padding:18px 32px}
  .banner{margin-left:32px;margin-right:32px}
  .nav{justify-content:center;gap:24px}
  .nav a{flex:0 1 180px}
}