*{ -webkit-tap-highlight-color: transparent; box-sizing:border-box; }

:root{
  --bg:#f6f7fb;
  --card:#fff;
  --text:#0f172a;
  --muted:#64748b;
  --line:#e5e7eb;

  --pri:#2563eb;      --pri-rgb:37 99 235;
  --pro:#f97316;      --pro-rgb:249 115 22;
  --sch:#16a34a;      --sch-rgb:22 163 74;

  --shadow:0 10px 26px rgba(2,6,23,.08);
  --r:10px;
}

body{ margin:0; font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial; background:var(--bg); color:var(--text); }

.page{ max-width:540px; margin:0 auto; padding:14px 14px 96px; }

body.mode-pre{ --accent:var(--pri); --accent-rgb:var(--pri-rgb); }
body.mode-pro{ --accent:var(--pro); --accent-rgb:var(--pro-rgb); }
body.mode-school{ --accent:var(--sch); --accent-rgb:var(--sch-rgb); }

/* topbar */
.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:10px;
  padding:12px 12px;
  background:rgba(246,247,251,.92);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(229,231,235,.7);
}
.back{
  width:40px;height:40px; display:grid; place-items:center;
  text-decoration:none; color:var(--text);
  background:#fff; border:1px solid var(--line);
  border-radius:14px; box-shadow:var(--shadow);
  font-size:18px; font-weight:1000;
}
.twrap{ flex:1; line-height:1.1; }
.t1{ font-size:12px; color:var(--muted); font-weight:900; }
.t2{ font-size:16px; font-weight:1000; }
.iconBtn{
  width:40px;height:40px; border-radius:14px;
  border:1px solid var(--line); background:#fff;
  box-shadow:var(--shadow);
  cursor:pointer; font-weight:1000;
}

/* tabs */
.segWrap{
  margin-top:10px; background:#fff;
  border:1px solid var(--line);
  border-radius:16px; padding:6px;
  box-shadow:var(--shadow);
  display:flex; gap:8px;
}
.seg{
  flex:1; border:0; background:transparent;
  padding:10px 12px; border-radius:14px;
  font-weight:1000; color:var(--muted);
  cursor:pointer;
}
.seg.active{
  background: rgba(var(--accent-rgb), .10);
  color: var(--accent);
}

/* hint */
.rankHint{
  margin:12px 0 10px;
  text-align:center;
  font-weight:900;
  color:var(--muted);
}

/* podium card */
.podium{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  padding:14px;
}
.podRow{
  display:grid;
  grid-template-columns:1fr 1.22fr 1fr;
  gap:12px;
  align-items:end;
}
.pod{
  text-align:center;
  display:flex; flex-direction:column;
  align-items:center; gap:8px;
}
.pod .pos{ font-size:12px; font-weight:1000; color:var(--muted); }

.ring{
  width:80px; height:80px;
  border-radius:999px;
  background:#eef2ff;
  border:3px solid #cbd5e1;
  overflow:hidden; position:relative;
  display:grid; place-items:center;
  font-weight:1000; color:#64748b;
}
.pod.first .ring{
  width:96px; height:96px;
  background:#fff7ed; border-color:#f59e0b;
}
.pod.second .ring{ background:#f1f5f9; border-color:#9ca3af; }
.pod.third  .ring{ background:#fff7ed; border-color:#b45309; }

.ring img{ width:100%; height:100%; object-fit:cover; }

.medal{
  position:absolute;
  bottom:-10px; left:50%;
  transform:translateX(-50%);
  font-size:20px;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.15));
}

.name{ font-weight:750; font-size:12px; }
.place{ margin-top:-6px; font-size:12px; color:var(--muted); font-weight:900; }
.orders{ display:none; font-size:12px; font-weight:1000; color:#0b1220; opacity:.9; }

/* my rank bar */
.meBar{
  margin-top:12px;
  border-radius:16px;
  background:rgba(34,197,94,.12);
  border:1px solid rgba(34,197,94,.22);
  padding:10px 12px;
  display:flex; align-items:center; gap:10px;
}
.meRank{
  width:92px;
  font-weight:1000;
  color:#0b1220;
  display:flex; flex-direction:column;
}
.meRank small{ font-size:11px; color:rgba(15,23,42,.65); }
.meRank span{ font-size:18px; }
.meMain{ flex:1; display:flex; align-items:center; gap:10px; }
.meAvatar{
  width:42px;height:42px;border-radius:999px;
  background:#e5e7eb; overflow:hidden;
  display:grid;place-items:center;
  font-weight:1000;color:#64748b;
}
.meAvatar img{ width:100%; height:100%; object-fit:cover; }
.meName{ font-weight:1000; }
.meLoc{ font-size:12px; color:var(--muted); font-weight:900; }

/* list */
.listCard{
  margin-top:12px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.listHead{
  display:flex; gap:10px;
  padding:10px 12px;
  background:#0b1220; color:#fff;
  font-weight:750;
  font-size: 15px;
}
.lhRank{ width:84px; opacity:.95; }
.lhTitle{ flex:1; opacity:.95; }
.lhTotal{ display:none; width:74px; text-align:right; opacity:.95; }

.row{
  display:flex; gap:10px;
  align-items:center;
  padding:12px;
  border-top:1px solid var(--line);
}
.rRank{ width:84px; font-weight:750; display:flex; align-items:center; gap:8px; }
.rMain{ flex:1; display:flex; align-items:center; gap:10px; }
.avatar{
  width:36px;height:36px;border-radius:999px;
  background:#e5e7eb; overflow:hidden;
  display:grid; place-items:center;
  font-weight:750; color:#64748b;
}
.avatar img{ width:100%; height:100%; object-fit:cover; }
.rName{ font-weight:750;font-size:15px; }
.rLoc{ margin-top:2px; font-size:12px; color:var(--muted); font-weight:900; }
.rTotal{ display:none; width:74px; text-align:right; font-weight:750; color:#0b1220; }

.mutedBox{ padding:14px; text-align:center; color:var(--muted); font-weight:900; }

.bottomNav{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  display:flex; background:#ffffffcc;
  backdrop-filter:blur(10px);
  border-top:1px solid rgba(15,23,42,.06);
  padding:8px 6px;
}
.navItem{
  flex:1; text-decoration:none;
  color:rgba(15,23,42,.65);
  display:flex; flex-direction:column;
  align-items:center; gap:4px;
  padding:6px 0; border-radius:14px;
  font-weight:1000; font-size:11px;
}
.navItem.active{
  color:var(--accent);
  background:rgba(var(--accent-rgb), .10);
}
.navIco{ font-size:18px; }

.space{ height:14px; }