.page-wrap{
  width: 100%;
  max-width: 1240px;
  margin: 0 auto 64px;
  padding: 0 16px;
  box-sizing: border-box;
}
.page-title{
  margin-top: 14px;
}
.page-title{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:14px 0 10px;width:100%;}
.page-title h1{margin:0;font-size:22px;font-weight:900;color:#0f172a;letter-spacing:-.02em;}
.page-title .back{font-weight:750;text-decoration:none;color:#1d4ed8;background:#eef2ff;border:1px solid rgba(29,78,216,.16);padding:8px 14px;border-radius:999px;transition:background .12s ease,box-shadow .12s ease;white-space:nowrap;}
.page-title .back:hover{background:#e0e7ff;box-shadow:0 4px 12px rgba(29,78,216,.12);}
.page-sub{margin:6px 0 0;color:rgba(15,23,42,.58);font-weight:650;font-size:13px;line-height:1.35;}

.card{background:#fff;border:1px solid rgba(15,23,42,.07);border-radius:18px;box-shadow:0 4px 16px rgba(15,23,42,.06),0 1px 4px rgba(15,23,42,.04);padding:14px;margin:10px 0;}

.controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin:12px 0;}
.controls .left,.controls .right{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.chip{border:1px solid rgba(15,23,42,.10);background:#f8fafc;border-radius:999px;padding:7px 12px;font-weight:700;font-size:13px;color:#0f172a;display:inline-flex;align-items:center;gap:6px;}
.chip input,.chip select{border:none;outline:none;font-weight:700;font-size:13px;background:transparent;color:#0f172a;cursor:pointer;}
.btn{border:none;border-radius:999px;padding:9px 16px;font-weight:800;background:#1d4ed8;color:#fff;cursor:pointer;transition:background .12s ease,box-shadow .12s ease,transform .1s ease;}
.btn:hover{background:#1e40af;box-shadow:0 6px 16px rgba(29,78,216,.28);transform:translateY(-1px);}
.btn:active{transform:translateY(0);box-shadow:none;}
.btn:disabled{opacity:.55;cursor:default;transform:none;box-shadow:none;}

.forme-status{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;background:rgba(15,23,42,.04);border:1px solid rgba(15,23,42,.08);font-size:13px;font-weight:800;color:#334155;}
.howbox-intro{margin:0 0 10px;}
.th-score{text-align:right;}
.sep-dot{opacity:.35;}

/* --- Table desktop --- */
.rank-table{width:100%;border-collapse:separate;border-spacing:0 8px;}
.rank-table thead th{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:rgba(15,23,42,.45);text-align:left;padding:0 12px;font-weight:900;}
.rank-row{background:#fff;border:1px solid rgba(15,23,42,.07);box-shadow:0 2px 10px rgba(15,23,42,.04);}
.rank-row td{padding:12px 14px;border-top:1px solid rgba(15,23,42,.07);border-bottom:1px solid rgba(15,23,42,.07);vertical-align:middle;transition:background .12s ease;}
.rank-row td:first-child{border-left:1px solid rgba(15,23,42,.07);border-top-left-radius:14px;border-bottom-left-radius:14px;width:46px;font-weight:800;text-align:center;}
.rank-row td:last-child{border-right:1px solid rgba(15,23,42,.07);border-top-right-radius:14px;border-bottom-right-radius:14px;width:82px;text-align:right;font-weight:800;}
.rank-row:hover td{background:#f4f7ff;}
.p-cell{display:flex;align-items:center;gap:12px;min-width:220px;}
.p-ava{width:44px;height:44px;border-radius:999px;object-fit:cover;border:1px solid rgba(148,163,184,.20);background:rgba(15,23,42,.04);filter:drop-shadow(0 2px 6px rgba(15,23,42,.10));}
.p-meta{display:flex;flex-direction:column;gap:3px;}
.p-name{font-weight:800;color:#0f172a;text-decoration:none;transition:color .12s ease;}
.p-name:hover{color:#1d4ed8;text-decoration:underline;text-underline-offset:2px;}
.p-subline{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:rgba(15,23,42,.55);}
.team-logo{width:18px;height:18px;border-radius:4px;object-fit:contain;vertical-align:middle;}

.statbox{display:flex;flex-direction:column;align-items:flex-start;gap:2px;}
.statval{font-weight:850;color:#0f172a}
.delta{font-size:11px;font-weight:700;opacity:.9}
.delta.pos{color:#16a34a}
.delta.neg{color:#dc2626}
.delta.neu{color:rgba(15,23,42,.55)}

.wl-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;font-weight:750;font-size:12px;background:rgba(15,23,42,.05);border:1px solid rgba(15,23,42,.08);white-space:nowrap;}
.score{font-weight:900;font-variant-numeric:tabular-nums;}
.score.score-pos{color:#16a34a;}
.score.score-neg{color:#dc2626;}
.score.score-neu{color:#334155;}

.rank-badge{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:999px;font-weight:900;font-size:14px;box-shadow:0 2px 8px rgba(15,23,42,.10);}
.rank-badge.r1{background:linear-gradient(145deg,#fef3c7,#f59e0b);color:#78350f;}
.rank-badge.r2{background:linear-gradient(145deg,#f1f5f9,#cbd5e1);color:#374151;}
.rank-badge.r3{background:linear-gradient(145deg,#fed7aa,#f97316);color:#7c2d12;}
.rank-num{font-weight:800;color:#94a3b8;font-size:14px;}

.rank-mobile{display:none;}
.m-card{background:#fff;border:1px solid rgba(15,23,42,.07);border-radius:18px;box-shadow:0 2px 12px rgba(15,23,42,.06);padding:14px;margin:10px 0;display:flex;flex-direction:column;gap:12px;}
.m-top{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.m-left{display:flex;align-items:center;gap:10px;}
.m-rank{width:34px;height:34px;border-radius:999px;background:linear-gradient(145deg,#e0e7ff,#c7d2fe);color:#3730a3;display:flex;align-items:center;justify-content:center;font-weight:950;font-size:14px;}
.m-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;}
.m-box{background:rgba(15,23,42,.03);border:1px solid rgba(15,23,42,.06);border-radius:12px;padding:9px 6px;text-align:center;line-height:1.05;}
.m-box b{display:block;font-size:15px;font-weight:950;color:#0f172a;}
.m-box span{font-size:11px;font-weight:900;color:rgba(15,23,42,.55);}
.m-box .delta{display:block;margin-top:4px;}
.mobile-meta-row{display:flex;justify-content:space-between;align-items:center;gap:10px;}
.mobile-meta-n{font-weight:800;font-size:12px;color:#64748b;}

details.how{margin-top:10px;}
details.how summary{cursor:pointer;list-style:none;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:space-between;gap:10px;color:#334155;padding:2px 0;}
details.how summary::-webkit-details-marker{display:none;}
details.how summary:hover{color:#1d4ed8;}
.how-chevron{display:inline-block;transition:transform .2s ease;font-style:normal;}
details.how[open] .how-chevron{transform:rotate(180deg);}

.howbox{margin-top:10px;color:rgba(15,23,42,.78);font-weight:650;font-size:13px;line-height:1.5}
.how-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:10px;}
.how-card{background:#fff;border:1px solid rgba(15,23,42,.07);border-radius:14px;padding:12px 14px;box-shadow:0 4px 14px rgba(15,23,42,.05);transition:transform .14s ease,box-shadow .14s ease;}
.how-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(15,23,42,.08);}
.how-title{font-weight:850;color:#0f172a;margin-bottom:6px;}
.how-line{font-weight:650;color:rgba(15,23,42,.82);}
.how-sub{margin-top:6px;font-size:12px;font-weight:650;color:rgba(15,23,42,.55);}
.how-formula{margin-top:10px;display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:14px;background:rgba(15,23,42,.03);border:1px solid rgba(15,23,42,.06);}
.how-pill{flex:0 0 auto;font-weight:850;color:#1d4ed8;background:rgba(29,78,216,.10);border:1px solid rgba(29,78,216,.16);padding:4px 8px;border-radius:999px;}
.how-math{font-size:12px;font-weight:650;color:rgba(15,23,42,.70);}
.metric-note{font-size:11px;font-weight:700;color:rgba(15,23,42,.55);margin-top:2px;}
.how-card.eval{background:linear-gradient(180deg,rgba(59,130,246,.06),rgba(59,130,246,.02));border-color:rgba(59,130,246,.16);}
.how-card.gs{background:linear-gradient(180deg,rgba(139,92,246,.06),rgba(139,92,246,.02));border-color:rgba(139,92,246,.16);}
.how-card.rankscore{background:linear-gradient(180deg,rgba(16,185,129,.06),rgba(16,185,129,.02));border-color:rgba(16,185,129,.16);}
.how-card.eval .how-title{color:#2563eb;}
.how-card.gs .how-title{color:#7c3aed;}
.how-card.rankscore .how-title{color:#059669;}
.eval-val{color:#2563eb;}
.gs-val{color:#7c3aed;}
.eval-note{color:rgba(37,99,235,.72);}
.gs-note{color:rgba(124,58,237,.72);}

@media (max-width:900px){
  .how-grid{grid-template-columns:1fr;}
}

@media (max-width:860px){
  .rank-desktop{display:none;}
  .rank-mobile{display:block;}
  .controls .left,.controls .right{width:100%;}
  .chip input{width:100px}
}