/* Atho Pro dark theme — Buena neutral ramp, green accent, coral "my team".
   Line-divided tables, edge-to-edge, no cards. */
:root{
  --bg:#0F1115; --bg-med:#15181C; --bg-high:#1C2027; --bg-inset:#1C2027;
  --tx:#FFFFFF; --tx2:#B5B0A1; --tx3:#71736D; --tx-faint:#4a4c48;
  --line:rgba(255,255,255,.075); --line-2:rgba(255,255,255,.05); --line-strong:rgba(255,255,255,.14);
  --acc:#A7BE5A; --acc-deep:#95B83C; --acc-tint:rgba(167,190,90,.15);
  --proj:#84B0CC; --proj-tint:rgba(132,176,204,.14);
  --coral:#E8553D; --coral-2:#d64a34;
  --zero:#E8776E;
  --gut:16px;               /* page side gutter */
  --barH:58px; --tabsH:52px;
}
[data-accent="purple"]{ --dot:#D75BA1; }
[data-accent="blue"]  { --dot:#6493B0; }
[data-accent="green"] { --dot:#A7BE5A; }

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; padding:0; background:var(--bg); }
body{
  font-family:"Satoshi",system-ui,-apple-system,sans-serif;
  color:var(--tx); font-size:16px; line-height:1.35; letter-spacing:-0.01em;
  -webkit-font-smoothing:antialiased;
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}
#app{ max-width:760px; margin:0 auto; min-height:100vh; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input{ font-family:inherit; }
.gut{ padding-left:var(--gut); padding-right:var(--gut); }

/* ---------- app bar ---------- */
.bar{
  position:sticky; top:0; z-index:20; height:var(--barH);
  display:flex; align-items:center; gap:12px; padding:0 var(--gut);
  background:rgba(15,17,21,.86); backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid var(--line);
}
.bar .back{ width:34px; height:34px; margin-left:-6px; border-radius:8px; display:grid; place-items:center;
  font-size:20px; color:var(--tx2); flex:0 0 auto; }
.bar .back:active{ background:var(--bg-high); }
.bar .titles{ min-width:0; flex:1; }
.bar h1{ font-size:18px; font-weight:800; margin:0; letter-spacing:-0.03em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bar .sub{ font-size:12px; color:var(--tx3); font-weight:500; margin-top:1px; }
.bar .sub b{ color:var(--coral); font-weight:700; }
.accent-dot{ width:9px; height:9px; border-radius:50%; background:var(--dot,var(--acc)); flex:0 0 auto; }

/* ---------- home ---------- */
.home-head{ padding:26px var(--gut) 10px; }
.home-head .kicker{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--tx3); font-weight:700; }
.home-head h1{ font-size:32px; font-weight:900; letter-spacing:-0.04em; margin:8px 0 4px; }
.home-head p{ color:var(--tx2); font-size:13.5px; margin:0; max-width:46ch; line-height:1.5; }
.cards{ margin-top:12px; border-top:1px solid var(--line); }
.ecard{ position:relative; display:block; width:100%; text-align:left;
  padding:18px var(--gut) 18px calc(var(--gut) + 12px); border-bottom:1px solid var(--line); }
.ecard:active{ background:var(--bg-med); }
.ecard::before{ content:""; position:absolute; left:var(--gut); top:20px; width:8px; height:8px; border-radius:50%; background:var(--dot,var(--acc)); }
.ecard .badge{ font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--tx3); }
.ecard h2{ font-size:21px; font-weight:800; letter-spacing:-0.03em; margin:5px 0 4px; }
.ecard .meta{ color:var(--tx2); font-size:13px; font-weight:500; }
.ecard .evs{ margin-top:11px; display:flex; flex-wrap:wrap; gap:6px; }
.ecard .ev{ font-size:11.5px; font-weight:600; color:var(--tx2); background:var(--bg-high); padding:4px 9px; border-radius:6px; }
.ecard .go{ position:absolute; right:var(--gut); top:50%; transform:translateY(-50%); color:var(--tx3); font-size:22px; }

/* ---------- tabs ---------- */
.tabs{ position:sticky; top:var(--barH); z-index:15; display:flex; gap:8px; padding:11px var(--gut);
  overflow-x:auto; scrollbar-width:none; background:var(--bg); border-bottom:1px solid var(--line); height:var(--tabsH); }
.tabs::-webkit-scrollbar{ display:none; }
.tab{ flex:0 0 auto; padding:7px 14px; border-radius:8px; font-size:13.5px; font-weight:700; white-space:nowrap;
  background:transparent; color:var(--tx2); border:1px solid var(--line-strong); }
.tab:active{ background:var(--bg-high); }
.tab.on{ background:var(--tx); color:var(--bg); border-color:var(--tx); }

/* ---------- generic section ---------- */
.section{ padding:0 0 44px; }

/* ---------- event entry ---------- */
.ev-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:16px var(--gut) 12px; }
.ev-head .h{ font-size:20px; font-weight:800; letter-spacing:-0.03em; }
.ev-head .u{ font-size:12px; color:var(--tx3); font-weight:500; margin-top:1px; }
.ev-head .tablelink{ font-size:12.5px; font-weight:700; color:var(--tx); background:var(--bg-high); padding:7px 12px; border-radius:7px; flex:0 0 auto; border:1px solid var(--line-strong); }

.grid-head, .row{
  display:grid; grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(64px,.85fr));
  gap:10px; align-items:center;
}
.grid-head{ padding:0 var(--gut) 8px; }
.grid-head .col{ font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; color:var(--tx3); text-align:center; }
.grid-head .col.athlete{ text-align:left; }
.grid-head .col.res{ color:var(--acc); }

.row{ padding:11px var(--gut); border-bottom:1px solid var(--line); }
.row.mine{ box-shadow:inset 3px 0 0 var(--coral); background:rgba(232,85,61,.07); }
.ath{ min-width:0; }
.ath .nm{ font-size:14px; font-weight:700; letter-spacing:-0.02em; line-height:1.2; }
.row.mine .ath .nm{ color:#fff; }
.ath .tm{ font-size:11px; color:var(--tx3); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
.ath .gr{ display:inline-block; font-size:10px; font-weight:800; color:var(--tx2); background:var(--bg-high); border-radius:4px; padding:1px 5px; margin-right:5px; }

.perf{ display:flex; flex-direction:column; align-items:stretch; gap:3px; }
.perf input{
  width:100%; text-align:center; font-size:15px; font-weight:700; color:var(--tx);
  background:var(--bg-med); border:1px solid var(--line-strong); border-radius:7px;
  padding:8px 4px; outline:none; transition:border-color .12s, background .12s; -moz-appearance:textfield;
}
.perf input::-webkit-outer-spin-button,.perf input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.perf input::placeholder{ color:var(--tx-faint); font-weight:500; }
.perf input:focus{ border-color:var(--acc); background:var(--bg-high); }
.perf.ro{ justify-content:center; }
.perf .roval{ text-align:center; font-size:15px; font-weight:700; color:var(--tx); padding:8px 4px; line-height:1.2; }
.perf .roval .dash{ color:var(--tx-faint); font-weight:500; }
.grid-head .col:nth-child(2){ color:var(--tx3); }
.pts{ font-size:11.5px; font-weight:800; text-align:center; color:var(--tx-faint); letter-spacing:.01em; }
.pts.has{ color:var(--acc); }
.pts.res.has{ color:var(--acc); }
.pts.zero{ color:var(--zero); }

.hint{ padding:14px var(--gut) 0; color:var(--tx3); font-size:12px; line-height:1.5; }

/* ---------- standings ---------- */
.sort{ display:flex; gap:8px; padding:12px var(--gut) 14px; align-items:center; overflow-x:auto; scrollbar-width:none; }
.sort::-webkit-scrollbar{ display:none; }
.sort .lbl{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--tx3); margin-right:2px; flex:0 0 auto; }
.sort button{ flex:0 0 auto; font-size:12.5px; font-weight:700; padding:6px 14px; border-radius:8px; background:transparent; color:var(--tx2); border:1px solid var(--line-strong); }
.sort button.on{ background:var(--tx); color:var(--bg); border-color:var(--tx); }

.st-head{ display:grid; grid-template-columns:24px minmax(0,1fr) repeat(4,minmax(38px,50px)); gap:7px; padding:0 var(--gut) 9px; border-bottom:1px solid var(--line-strong); }
.st-head .c{ font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--tx3); text-align:right; }
.st-head .c.a{ text-align:left; } .st-head .c.r{ color:var(--tx2); } .st-head .c.e{ color:var(--acc); } .st-head .c.p{ color:var(--proj); }

.strow{
  display:grid; grid-template-columns:24px minmax(0,1fr) repeat(4,minmax(38px,50px)); gap:7px; align-items:center;
  padding:12px var(--gut); width:100%; text-align:left; border-bottom:1px solid var(--line);
}
.strow:active{ background:var(--bg-med); }
.strow .rk{ font-size:15px; font-weight:800; color:var(--tx3); text-align:center; font-variant-numeric:tabular-nums; }
.strow.top .rk{ color:var(--tx); }
.strow .who{ min-width:0; }
.strow .who .nm{ font-size:14.5px; font-weight:700; letter-spacing:-0.02em; line-height:1.15; }
.strow .who .tm{ font-size:11px; color:var(--tx3); display:flex; align-items:center; gap:6px; margin-top:2px; }
.strow .who .tm .tn{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.strow .v{ text-align:right; font-variant-numeric:tabular-nums; }
.strow .v .n{ font-size:14.5px; font-weight:700; }
.strow .v.pr .n{ color:var(--tx2); font-weight:600; }
.strow .v.res .n{ color:var(--tx); }
.strow .v.est .n{ color:var(--acc); font-weight:800; }
.strow .v.pest .n{ color:var(--proj); font-weight:700; }
.strow .v .z{ color:var(--tx-faint); font-weight:600; }

/* my team (coral, full-bleed like Atho) */
.strow.mine{ background:var(--coral); border-bottom-color:var(--coral-2); }
.strow.mine:active{ background:var(--coral-2); }
.strow.mine .rk{ color:rgba(255,255,255,.7); }
.strow.mine .who .nm{ color:#fff; }
.strow.mine .who .tm, .strow.mine .who .tm .tn{ color:rgba(255,255,255,.82); }
.strow.mine .v .n, .strow.mine .v.pr .n, .strow.mine .v.res .n, .strow.mine .v.est .n{ color:#fff; }
.strow.mine .v .z{ color:rgba(255,255,255,.6); }
.strow.mine .prog{ color:#fff !important; background:rgba(255,255,255,.22) !important; }

.strow .who .prog{ flex:0 0 auto; font-size:9.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  color:var(--acc); background:var(--acc-tint); border-radius:4px; padding:1px 6px; }
.strow .who .prog.full{ color:var(--bg); background:var(--acc); }

.estnote{ margin:14px var(--gut) 4px; padding:12px 14px; background:var(--bg-med); border:1px solid var(--line); border-radius:9px; font-size:12px; color:var(--tx2); line-height:1.5; }
.estnote b{ color:var(--acc); font-weight:800; }
.estnote b.pj{ color:var(--proj); }

/* breakdown */
.break{ background:var(--bg-med); border-bottom:1px solid var(--line); padding:4px var(--gut) 10px; }
.break .brow{ display:grid; grid-template-columns:minmax(0,1fr) repeat(3,minmax(48px,64px)); gap:9px; padding:7px 0; border-bottom:1px solid var(--line-2); align-items:center; }
.break .brow:last-child{ border-bottom:none; }
.break .brow.h .e{ font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--tx3); }
.break .brow .e{ font-size:12.5px; font-weight:600; color:var(--tx2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.break .brow .m{ text-align:right; font-size:12px; font-variant-numeric:tabular-nums; color:var(--tx2); }
.break .brow .m .mk{ color:var(--tx3); font-weight:600; }
.break .brow .m .pp{ font-weight:800; color:var(--tx); }
.break .brow.h .m{ font-size:10px; font-weight:800; text-transform:uppercase; color:var(--tx3); }
.break .brow.h .m.r{ color:var(--tx2); }
.break .brow.h .m.p{ color:var(--proj); }
.break .brow .m.p .pp{ color:var(--proj); }
.break .brow .m .tag{ font-size:8.5px; font-weight:800; letter-spacing:.04em; color:var(--tx3); background:var(--bg-high); border-radius:3px; padding:1px 4px; vertical-align:1px; }
.break .brow.tot{ border-top:1px solid var(--line-strong); border-bottom:none; padding-top:9px; margin-top:2px; }
.break .brow.tot .e{ font-weight:900; color:var(--tx); }
.break .brow.tot .m .pp{ font-weight:900; }
.break .scen{ display:flex; align-items:center; justify-content:space-between; padding:8px 0 0; }
.break .scen .lab{ font-size:12px; font-weight:800; color:var(--tx); }
.break .scen .lab em{ font-style:normal; font-weight:500; color:var(--tx3); font-size:11px; }
.break .scen .val{ font-size:15px; font-weight:900; font-variant-numeric:tabular-nums; }
.break .scen .val.e{ color:var(--acc); } .break .scen .val.p{ color:var(--proj); }

/* ---------- toolbar ---------- */
.toolbar{ display:flex; gap:10px; padding:16px var(--gut) 4px; }
.toolbar button{ flex:1; font-size:13px; font-weight:700; padding:11px; border-radius:8px; background:var(--bg-high); color:var(--tx2); border:1px solid var(--line-strong); }
.toolbar button.danger{ color:var(--zero); }

/* ---------- modal ---------- */
.overlay{ position:fixed; inset:0; z-index:50; background:rgba(0,0,0,.6); display:flex; align-items:flex-end; justify-content:center; animation:fade .15s; }
@keyframes fade{ from{opacity:0} } @keyframes up{ from{transform:translateY(100%)} }
.sheet{ background:var(--bg-med); width:100%; max-width:600px; max-height:84vh; border-radius:18px 18px 0 0; border:1px solid var(--line); border-bottom:none; display:flex; flex-direction:column; animation:up .22s cubic-bezier(.2,.9,.3,1); }
.sheet .sh-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 20px 14px; border-bottom:1px solid var(--line); }
.sheet .sh-head h3{ margin:0; font-size:18px; font-weight:800; letter-spacing:-0.03em; }
.sheet .sh-head .x{ width:32px; height:32px; border-radius:8px; background:var(--bg-high); font-size:16px; display:grid; place-items:center; color:var(--tx2); border:1px solid var(--line-strong); }
.sheet .sh-body{ overflow:auto; padding:8px 16px 24px; }
.sheet .note{ font-size:12px; color:var(--tx3); padding:8px 4px 12px; line-height:1.5; }
.sheet.confirm{ max-width:460px; }
.sheet.confirm .cbody{ font-size:14.5px; line-height:1.55; color:var(--tx2); margin:6px 4px 20px; }
.sheet.confirm .cbody b{ color:var(--tx); font-weight:800; }
.sheet.confirm .cbtns{ display:flex; gap:10px; padding:0 4px 4px; }
.sheet.confirm .cbtn{ flex:1; padding:13px; border-radius:9px; font-size:14px; font-weight:800; border:1px solid var(--line-strong); }
.sheet.confirm .cbtn.cancel{ background:var(--bg-high); color:var(--tx); }
.sheet.confirm .cbtn.danger{ background:var(--zero); color:#2A0906; border-color:transparent; }
.ptable{ column-count:2; column-gap:16px; }
.ptable .pr{ display:flex; justify-content:space-between; padding:5px 8px; border-radius:6px; font-variant-numeric:tabular-nums; break-inside:avoid; }
.ptable .pr:nth-child(odd){ background:var(--bg-high); }
.ptable .pr .mk{ font-weight:700; color:var(--tx); } .ptable .pr .pp{ font-weight:800; color:var(--acc); }

.foot{ text-align:center; color:var(--tx-faint); font-size:11px; padding:20px var(--gut) 30px; line-height:1.6; border-top:1px solid var(--line); margin-top:4px; }