/* Account, leaderboard, profile and admin pages. Same quiet look as the rest of the site: dark surface cards, mint for the numbers that matter. */
.app { margin: 1.5rem 0 2.5rem; }
.app h2 { font-size: 1.5rem; font-weight: 500; margin: 0 0 .25rem; letter-spacing: -.02em; }
.app h3 { font-size: .85rem; font-weight: 500; margin: 2.4rem 0 .9rem; color: var(--sub); text-transform: uppercase; letter-spacing: .09em; }
.app h4 { font-size: 1rem; font-weight: 500; margin: 0 0 .4rem; }
.muted { color: var(--sub); }
.muted a { color: var(--text); }
.opt { color: var(--sub); font-size: .8em; margin-left: .4em; }

/* small round initial used in lists (the top bar one is in site.css) */
.av { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: 12px; font-weight: 600; line-height: 1; background: hsl(var(--h) 45% 40%); color: #fff; flex: none; }
.av.big { width: 72px; height: 72px; font-size: 32px; }

/* cards and forms */
.card { background: var(--surface); border-radius: 16px; padding: 1.4rem 1.5rem; }
.card h3 { margin-top: 0; }
.card.narrow { max-width: 460px; margin-inline: auto; padding: 1.8rem; }
.form { display: grid; gap: 1rem; }
.form label { display: grid; gap: .4rem; font-size: .95rem; color: var(--text); }
.form small { color: var(--sub); font-size: .8rem; }
.form input, .app select { width: 100%; background: var(--bg); color: var(--text); border: 2px solid transparent; border-radius: 10px; padding: 12px 14px; font: inherit; font-size: 1rem; }
.form input:focus, .app select:focus { outline: 0; border-color: var(--main); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.btn.go { justify-content: center; background: var(--main); color: var(--main-ink); }
.btn.go:hover, .btn.go:focus-visible { filter: brightness(1.08); }
.btn.busy { opacity: .6; pointer-events: none; }
.btn:disabled { opacity: .5; cursor: default; }
.msg { min-height: 1.4em; margin: 0; font-size: .92rem; }
.msg.bad { color: var(--err); }
.msg.good { color: var(--main); }
.alt { margin: 0; color: var(--sub); font-size: .9rem; }
.tabs { display: flex; gap: 6px; margin-bottom: 1.2rem; }
.tabs button { flex: 1; border: 0; background: var(--bg); color: var(--sub); padding: 11px; border-radius: 10px; cursor: pointer; font-size: .95rem; }
.tabs button[aria-selected="true"] { background: var(--main); color: var(--main-ink); }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; margin-top: 1rem; }
.row { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
.danger-zone { margin-top: 1rem; }
.empty { background: var(--surface); border-radius: 14px; padding: 1.2rem 1.4rem; color: var(--sub); }
.empty p { margin: .2rem 0; }
.empty a { color: var(--text); }

/* profile / account header card */
.hero-card { display: grid; grid-template-columns: 1fr auto auto; gap: 1.2rem 2.4rem; align-items: center; background: linear-gradient(135deg, color-mix(in srgb, var(--main) 14%, var(--surface)), var(--surface) 62%); border-radius: 20px; padding: 1.6rem 1.8rem; }
.hc-id { display: flex; align-items: center; gap: 1.2rem; min-width: 0; }
.hc-id h2 { font-size: 1.9rem; margin: 0; overflow-wrap: anywhere; }
.hc-id p { margin: .15rem 0 0; color: var(--sub); font-size: .9rem; }
.hc-id a { color: var(--text); }
.hc-best { text-align: right; display: grid; line-height: 1.05; }
.hc-best b { font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 500; color: var(--main); letter-spacing: -.03em; }
.hc-best span { color: var(--sub); font-size: .8rem; margin-top: .3rem; }
.hc-actions { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: flex-end; }
.hc-actions:empty { display: none; }
.hero-card .btn { background: var(--bg); color: var(--text); }
.hero-card .btn:hover, .hero-card .btn:focus-visible { background: var(--main); color: var(--main-ink); }
.sub-tabs { display: flex; gap: 4px; margin: 1.6rem 0 0; border-bottom: 1px solid color-mix(in srgb, var(--sub) 28%, transparent); }
.sub-tabs button { border: 0; background: none; color: var(--sub); padding: .7rem 1.1rem; cursor: pointer; font-size: .95rem; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.sub-tabs button:hover { color: var(--text); }
.sub-tabs button[aria-selected="true"] { color: var(--main); border-bottom-color: var(--main); }

/* numbers */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8rem; margin-top: 1.4rem; }
.stat { background: var(--surface); border-radius: 14px; padding: 1rem 1.1rem; display: grid; gap: .35rem; }
.stat span { color: var(--sub); font-size: .8rem; }
.stat b { font-size: 1.6rem; font-weight: 500; color: var(--text); line-height: 1.1; }

/* personal bests as cards */
.best-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .8rem; }
.best { background: var(--surface); border-radius: 16px; padding: 1.1rem 1.2rem; display: grid; gap: .5rem; transition: transform .15s; }
.best:hover { transform: translateY(-2px); }
.b-top { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; font-size: .9rem; }
.b-top em { font-style: normal; color: var(--sub); font-size: .78rem; }
.b-num { display: flex; align-items: baseline; gap: .4rem; }
.b-num b { font-size: 2.4rem; font-weight: 500; color: var(--main); line-height: 1; letter-spacing: -.03em; }
.b-num small { color: var(--sub); font-size: .8rem; }
.b-foot { display: flex; justify-content: space-between; align-items: center; color: var(--sub); font-size: .8rem; }
.rank { text-decoration: none; background: var(--bg); color: var(--text); padding: 3px 11px; border-radius: 99px; font-size: .8rem; }
.rank:hover { background: var(--main); color: var(--main-ink); }

/* recent tests: a bar shows the speed next to the others */
.recent { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.recent li { display: grid; grid-template-columns: minmax(150px, 1.3fr) 2fr 5.5rem 6rem; gap: 1rem; align-items: center; background: var(--surface); border-radius: 10px; padding: .6rem 1rem; font-size: .92rem; }
.r-test em { font-style: normal; color: var(--sub); font-size: .8rem; margin-left: .3rem; }
.r-bar { height: 6px; border-radius: 3px; background: var(--bg); overflow: hidden; }
.r-bar i { display: block; height: 100%; background: var(--main); border-radius: 3px; }
.r-num { text-align: right; } .r-num b { font-weight: 500; } .r-num small { color: var(--sub); margin-left: .5rem; font-size: .78rem; }
.r-when { color: var(--sub); font-size: .8rem; text-align: right; }

/* tables (leaderboard and admin) */
.tbl { width: 100%; border-collapse: separate; border-spacing: 0 4px; font-size: .95rem; }
.tbl th { text-align: left; font-weight: 400; color: var(--sub); font-size: .78rem; padding: .5rem .8rem; text-transform: uppercase; letter-spacing: .06em; }
.tbl td { padding: .65rem .8rem; background: var(--surface); }
.tbl tbody tr td:first-child { border-radius: 10px 0 0 10px; }
.tbl tbody tr td:last-child { border-radius: 0 10px 10px 0; }
.tbl tbody tr:hover td { background: color-mix(in srgb, var(--surface) 82%, var(--text)); }
.tbl .r { text-align: right; }
.tbl small { color: var(--sub); }
.tbl a { color: var(--text); }
.tbl tr.you td { background: color-mix(in srgb, var(--main) 18%, var(--surface)); }
.tbl tr.gap td, .tbl tr.gap:hover td { background: none; text-align: center; color: var(--sub); padding: 0; }
.tbl .rk { width: 3.2rem; color: var(--sub); }
.pl { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
.pl:hover span { text-decoration: underline; }
.medal { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 12px; font-weight: 600; color: #222; }
.medal.m1 { background: #e9c46a; } .medal.m2 { background: #cfd4d8; } .medal.m3 { background: #d49a6a; }
.note { margin-top: 1rem; font-size: .9rem; }

/* leaderboard controls */
.lb-bar { display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; align-items: end; justify-content: space-between; margin-bottom: 1rem; }
.lb-lang { display: grid; gap: .35rem; font-size: .82rem; color: var(--sub); min-width: 220px; }
.app .seg { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.lb-tests { margin-bottom: 1.2rem; }

/* admin: a side menu and a wide work area */
.adm { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 2rem; align-items: start; }
.adm-nav { position: sticky; top: 1rem; display: grid; gap: 4px; }
.adm-nav button { text-align: left; border: 0; background: none; color: var(--sub); padding: .7rem 1rem; border-radius: 10px; cursor: pointer; font-size: .95rem; border-left: 3px solid transparent; }
.adm-nav button:hover { color: var(--text); background: var(--surface); }
.adm-nav button[aria-selected="true"] { background: var(--surface); color: var(--main); border-left-color: var(--main); }
.adm-main { min-width: 0; }
.adm-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; align-items: start; margin-bottom: 1.4rem; }
.adm-head h2 { margin: 0; font-size: 1.7rem; }
.adm-head p { margin: .2rem 0 0; }
.reg { display: flex; align-items: center; gap: .8rem; }
.agrp h3 { margin: 1.6rem 0 .7rem; }
.agrp:first-child h3 { margin-top: 0; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .7rem; }
.tile { background: var(--surface); border-radius: 14px; padding: 1rem 1.1rem; display: grid; gap: .3rem; }
.tile b { font-size: 1.7rem; font-weight: 500; line-height: 1; }
.tile span { color: var(--sub); font-size: .8rem; }
.tile.big { background: linear-gradient(135deg, color-mix(in srgb, var(--main) 16%, var(--surface)), var(--surface)); }
.tile.big b { color: var(--main); font-size: 2.2rem; }
.tile.warn b { color: #e9c46a; }
.charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; margin-top: 1.6rem; }
.chart { background: var(--surface); border-radius: 16px; padding: 1.1rem 1.3rem; }
.ch-head { display: flex; justify-content: space-between; align-items: baseline; color: var(--sub); font-size: .85rem; }
.ch-head b { font-size: 1.5rem; font-weight: 500; color: var(--text); }
.spark { display: flex; align-items: end; gap: 3px; height: 110px; margin-top: .8rem; }
.spark i { flex: 1; background: color-mix(in srgb, var(--main) 55%, var(--surface)); border-radius: 3px 3px 0 0; min-height: 3px; transition: background .15s; }
.spark i:hover, .spark i.now { background: var(--main); }
.c-alt .spark i { background: color-mix(in srgb, #e9c46a 55%, var(--surface)); } .c-alt .spark i:hover, .c-alt .spark i.now { background: #e9c46a; }
.ch-axis { display: flex; justify-content: space-between; color: var(--sub); font-size: .72rem; margin-top: .5rem; }
.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.bars li { display: grid; grid-template-columns: 8rem 1fr 3rem; gap: .8rem; align-items: center; font-size: .9rem; }
.bars i { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--main) var(--w), var(--bg) var(--w)); }
.bars b { text-align: right; font-weight: 500; }
.plain { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.plain li { display: flex; align-items: center; gap: .7rem; font-size: .92rem; }
.plain li > span:last-child { margin-left: auto; color: var(--sub); font-size: .8rem; }
.plain a { color: var(--text); }
.adm-bar { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; margin-bottom: 1rem; }
.adm-bar input[type=search], .adm-bar select { width: auto; min-width: 220px; background: var(--surface); color: var(--text); border: 2px solid transparent; border-radius: 10px; padding: 10px 14px; font: inherit; }
.adm-bar input:focus, .adm-bar select:focus { outline: 0; border-color: var(--main); }
.legend { color: var(--sub); font-size: .8rem; display: flex; gap: 1rem; margin-top: .4rem; }
.chk { display: grid; grid-template-columns: 1.1rem 12rem 1fr; gap: .8rem; padding: .75rem 0; border-bottom: 1px solid color-mix(in srgb, var(--sub) 22%, transparent); align-items: baseline; font-size: .93rem; }
.chk:last-child { border-bottom: 0; }
.chk .ok { color: var(--main); } .chk .no { color: var(--err); } .chk .warn { color: #e9c46a; }
.chk small { color: var(--sub); overflow-wrap: anywhere; }
.pre { background: var(--bg); border-radius: 10px; padding: .8rem 1rem; font-size: .8rem; white-space: pre-wrap; word-break: break-word; max-height: 260px; overflow: auto; }
.tag { display: inline-block; padding: 2px 10px; border-radius: 99px; font-size: .75rem; background: var(--bg); color: var(--sub); }
.tag.bad { background: var(--err-dim); color: var(--text); }
.tag.good { background: color-mix(in srgb, var(--main) 22%, var(--bg)); color: var(--main); }
.tbl .acts { white-space: nowrap; text-align: right; }
.tbl .acts button { border: 0; background: var(--bg); color: var(--sub); padding: 5px 11px; border-radius: 8px; cursor: pointer; font-size: .8rem; margin-left: 4px; }
.tbl .acts button:hover { background: var(--main); color: var(--main-ink); }
.tbl .acts button.d:hover { background: var(--err); color: var(--bg); }
.pager { display: flex; gap: .6rem; align-items: center; margin-top: .8rem; color: var(--sub); font-size: .9rem; }

@media (max-width: 860px) {
  .adm { grid-template-columns: 1fr; gap: 1rem; }
  .adm-nav { position: static; display: flex; overflow-x: auto; gap: 4px; padding-bottom: 4px; }
  .adm-nav button { white-space: nowrap; border-left: 0; border-bottom: 3px solid transparent; }
  .adm-nav button[aria-selected="true"] { border-bottom-color: var(--main); }
  .chk { grid-template-columns: 1.1rem 1fr; } .chk small { grid-column: 2; }
}
@media (max-width: 700px) {
  .hero-card { grid-template-columns: 1fr auto; padding: 1.2rem; }
  .hc-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .av.big { width: 56px; height: 56px; font-size: 26px; }
  .hc-id h2 { font-size: 1.5rem; }
  .recent li { grid-template-columns: 1fr auto; row-gap: .4rem; }
  .r-bar { grid-column: 1 / -1; order: 3; } .r-when { text-align: left; }
  .hide-s { display: none; } .tbl td, .tbl th { padding-inline: .55rem; }
  .bars li { grid-template-columns: 6rem 1fr 2.5rem; }
}

/* admin: search & social */
.empty.warn { border-left: 3px solid #e9c46a; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.4rem; margin-bottom: 1.2rem; color: var(--text); }
.empty.warn p { margin: 0; }
.sform { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1rem; }
.sform .wide, .sform .row { grid-column: 1 / -1; }
.sform .card h3 { margin-bottom: .2rem; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.grid2.flat { margin-top: 0; }
.consent-note { color: var(--sub); font-size: .8rem; }
.copybox { display: flex; gap: .6rem; align-items: center; background: var(--bg); border-radius: 10px; padding: .5rem .5rem .5rem .9rem; margin: .6rem 0 .8rem; }
.copybox code { flex: 1; overflow-wrap: anywhere; font-size: .85rem; color: var(--text); }
.chk-g { margin: 1.4rem 0 .2rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .09em; color: var(--sub); font-weight: 400; }
.chk-sum { margin: 1rem 0 0; font-size: 1.05rem; } .chk-sum.ok { color: var(--main); } .chk-sum.warn { color: #e9c46a; } .chk-sum.no { color: var(--err); }
.card .pre { margin-top: .8rem; }

/* ---------- leaderboard ---------- */
.lb-top { display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; align-items: center; justify-content: space-between; }
.lb-ctl { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.app .seg { background: var(--surface); padding: 4px; border-radius: 12px; gap: 2px; }
.app .seg button { padding: 8px 14px; border-radius: 9px; }
.selpill { position: relative; display: inline-flex; align-items: center; gap: .55rem; background: var(--surface); border-radius: 12px; padding: 0 .5rem 0 .9rem; color: var(--sub); }
.selpill svg { width: 18px; height: 18px; flex: none; }
.selpill select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; color: var(--text); font: inherit; font-size: .95rem; padding: 12px 2rem 12px 0; cursor: pointer; width: auto; min-width: 8.5rem; }
.selpill select:focus { outline: 0; }
.selpill:focus-within { box-shadow: 0 0 0 2px var(--main); }
.selpill::after { content: ""; position: absolute; right: 1rem; top: 50%; width: 7px; height: 7px; margin-top: -6px; border-right: 2px solid var(--sub); border-bottom: 2px solid var(--sub); transform: rotate(45deg); pointer-events: none; }
.selpill select option { background: var(--surface); color: var(--text); }
.lb-sub { margin: 1.3rem 0 1.4rem; color: var(--sub); font-size: .85rem; }
.lb-you { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2.4rem; background: linear-gradient(135deg, color-mix(in srgb, var(--main) 16%, var(--surface)), var(--surface) 70%); border-radius: 16px; padding: 1rem 1.4rem; margin-bottom: 1.4rem; }
.lb-you > div { display: grid; gap: .1rem; }
.lb-you span { color: var(--sub); font-size: .8rem; }
.lb-you b { font-size: 1.7rem; font-weight: 500; color: var(--main); line-height: 1.15; }
.lb-you small { font-size: .8rem; color: var(--sub); font-weight: 400; }
.lb-you.out { justify-content: space-between; background: var(--surface); }
.lb-you.out b { font-size: 1rem; color: var(--text); }
.lb-you .btn { margin-left: auto; }
.podium { display: grid; grid-template-columns: 1fr 1.14fr 1fr; gap: .8rem; align-items: end; margin: 2rem 0 1.2rem; }
.pod { position: relative; display: grid; justify-items: center; gap: .35rem; text-align: center; text-decoration: none; background: var(--surface); border-radius: 18px; padding: 1.5rem 1rem 1.2rem; border-top: 3px solid var(--c, var(--sub)); transition: transform .15s; }
.pod:hover { transform: translateY(-3px); }
.pod.p1 { --c: #e9c46a; order: 2; padding-top: 2.2rem; padding-bottom: 1.6rem; background: linear-gradient(180deg, color-mix(in srgb, #e9c46a 14%, var(--surface)), var(--surface) 70%); }
.pod.p2 { --c: #cfd4d8; order: 1; }
.pod.p3 { --c: #d49a6a; order: 3; }
.pod .av.big { width: 60px; height: 60px; font-size: 26px; box-shadow: 0 0 0 3px var(--c); }
.pod.p1 .av.big { width: 76px; height: 76px; font-size: 32px; }
.pod .pm { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #222; font-size: .8rem; font-weight: 700; }
.pod.p1::before { content: ""; position: absolute; top: -40px; left: 50%; width: 26px; height: 20px; margin-left: -13px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18'%3E%3Cpath fill='%23f2c94c' d='M2 17h20l1.5-12-6 4.5L12 1 6.5 9.5.5 5z'/%3E%3C/svg%3E") center / contain no-repeat; }
.pod .pn { color: var(--text); font-weight: 500; font-size: 1.05rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: .3rem; }
.pod .pv { font-size: 2.3rem; font-weight: 500; color: var(--main); line-height: 1; letter-spacing: -.03em; }
.pod.p1 .pv { font-size: 3rem; }
.pod .pv small { font-size: .78rem; color: var(--sub); font-weight: 400; margin-left: .35rem; letter-spacing: 0; }
.pod em { font-style: normal; color: var(--sub); font-size: .78rem; }
.pod.you { box-shadow: 0 0 0 2px var(--main); }
.lrows { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.lrow { display: grid; grid-template-columns: 2.6rem minmax(120px, 1.4fr) minmax(60px, 2fr) 5.5rem auto; gap: 1rem; align-items: center; background: var(--surface); border-radius: 12px; padding: .6rem 1rem .6rem .8rem; transition: background .15s; }
.lrow:hover { background: color-mix(in srgb, var(--surface) 84%, var(--text)); }
.lrow.you { background: color-mix(in srgb, var(--main) 17%, var(--surface)); }
.lrow .rk { color: var(--sub); text-align: center; font-size: .9rem; }
.lrow .pl { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--text); min-width: 0; }
.lrow .pl span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lrow .pl:hover span:last-child { text-decoration: underline; }
.lrow .bar { height: 6px; border-radius: 3px; background: var(--bg); overflow: hidden; }
.lrow .bar i { display: block; height: 100%; border-radius: 3px; background: color-mix(in srgb, var(--main) 70%, var(--surface)); }
.lrow.you .bar i { background: var(--main); }
.lrow .v { text-align: right; font-weight: 500; font-size: 1.1rem; }
.lrow .v small { color: var(--sub); font-size: .7rem; font-weight: 400; margin-left: .25rem; }
.lrow .meta { color: var(--sub); font-size: .78rem; text-align: right; white-space: nowrap; }
.lgap { text-align: center; color: var(--sub); letter-spacing: .3em; line-height: .8; }
.lrow.skel { opacity: .55; height: 48px; animation: lbPulse 1.2s ease-in-out infinite; }
.lrow.skel > * { display: block; }
@keyframes lbPulse { 50% { opacity: .25; } }
.lb-empty { text-align: center; background: var(--surface); border-radius: 18px; padding: 2.4rem 1.4rem; color: var(--sub); }
.lb-empty p { margin: .3rem 0; }
.lb-empty a { color: var(--text); }
.lb-trophy { width: 44px; height: 44px; color: var(--main); opacity: .8; margin-bottom: .6rem; }
@media (max-width: 760px) {
  .lb-top, .lb-ctl { gap: .5rem; }
  .lb-ctl { width: 100%; }
  .lb-ctl .seg { flex: 1 1 auto; } .lb-ctl .seg button { flex: 1; padding: 9px 8px; }
  .selpill { flex: 1 1 100%; } .selpill select { width: 100%; }
  .podium { grid-template-columns: 1fr; gap: .5rem; margin-top: .6rem; }
  .pod { grid-template-columns: auto 1fr auto; grid-template-areas: "av name val" "av sub val"; justify-items: start; align-items: center; gap: .1rem .9rem; text-align: left; padding: .8rem 1rem .8rem .9rem; border-top: 0; border-left: 4px solid var(--c); }
  .pod.p1, .pod.p2, .pod.p3 { order: 0; padding: .8rem 1rem .8rem .9rem; background: var(--surface); }
  .pod.p1::before { display: none; }
  .pod .pm { display: none; }
  .pod .av.big, .pod.p1 .av.big { grid-area: av; width: 46px; height: 46px; font-size: 20px; }
  .pod .pn { grid-area: name; margin: 0; font-size: 1rem; } .pod em { grid-area: sub; }
  .pod .pv, .pod.p1 .pv { grid-area: val; font-size: 1.7rem; justify-self: end; text-align: right; }
  .lrow { grid-template-columns: 1.9rem 1fr auto; gap: .2rem .7rem; padding: .65rem .8rem; }
  .lrow .rk { grid-column: 1; grid-row: 1; } .lrow .pl { grid-column: 2; grid-row: 1; } .lrow .v { grid-column: 3; grid-row: 1; }
  .lrow .meta { grid-column: 2 / -1; grid-row: 2; text-align: left; } .lrow .bar { grid-column: 2 / -1; grid-row: 3; margin-top: .25rem; }
}

/* ---------- login and sign up ---------- */
.auth { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); max-width: 980px; margin: 2rem auto 3rem; border-radius: 24px; overflow: hidden; background: var(--surface); box-shadow: 0 24px 60px #0004; }
.auth.single { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
.auth-side { display: flex; flex-direction: column; justify-content: space-between; gap: 1.8rem; padding: 2.4rem 2.2rem 2rem; background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--main) 30%, var(--surface)) 0%, color-mix(in srgb, var(--main) 8%, var(--surface)) 55%, var(--surface) 100%); position: relative; overflow: hidden; }
.as-kicker { display: inline-block; font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--main); margin-bottom: .9rem; }
.auth-side h2 { font-size: 1.9rem; line-height: 1.15; letter-spacing: -.03em; margin: 0 0 .8rem; font-weight: 500; color: var(--text); }
.auth-side p { margin: 0; color: color-mix(in srgb, var(--text) 62%, var(--bg)); font-size: .92rem; max-width: 30ch; }
.as-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.as-list li { display: grid; gap: .1rem; padding-left: 1.5rem; position: relative; }
.as-list li::before { content: ""; position: absolute; left: 0; top: .35rem; width: 9px; height: 9px; border-radius: 50%; background: var(--main); box-shadow: 0 0 0 4px color-mix(in srgb, var(--main) 22%, transparent); }
.as-list b { font-weight: 500; font-size: .95rem; }
.as-list span { color: var(--sub); font-size: .82rem; }
.as-track { position: relative; height: 54px; border-radius: 14px; background: color-mix(in srgb, var(--bg) 55%, transparent); border: 1px solid color-mix(in srgb, var(--sub) 25%, transparent); }
.at-rail { position: absolute; left: 20px; right: 22px; top: 50%; height: 2px; margin-top: -1px; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--sub) 60%, transparent) 0 7px, transparent 7px 14px); }
.at-av { position: absolute; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 10px; font-weight: 600; color: #222; }
.at-av.a1 { left: 58%; background: #e08ad0; } .at-av.a2 { left: 36%; background: #8fd6b5; }
.at-av.me { left: 74%; width: 38px; height: 38px; background: var(--main); font-size: 11px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--main) 35%, transparent); animation: atMove 5s ease-in-out infinite alternate; }
.at-flag { position: absolute; right: 8px; top: 11px; bottom: 11px; width: 8px; border-radius: 2px; background: conic-gradient(var(--text) 25%, transparent 0 50%, var(--text) 0 75%, transparent 0) 0 0 / 8px 8px; opacity: .5; }
@keyframes atMove { from { left: 62%; } to { left: 88%; } }
@media (prefers-reduced-motion: reduce) { .at-av.me { animation: none; } }
.auth-main { padding: 2.4rem 2.4rem 2rem; display: grid; align-content: start; gap: 1.2rem; }
.auth-main .tabs { margin: 0; background: var(--bg); padding: 4px; border-radius: 12px; gap: 4px; }
.auth-main .tabs button { background: transparent; padding: 10px; border-radius: 9px; }
.auth-main .tabs button[aria-selected="true"] { background: var(--surface); color: var(--main); box-shadow: 0 1px 6px #0004; }
.auth-main .form { gap: 1.1rem; }
.auth-main h2 { font-size: 1.55rem; letter-spacing: -.02em; margin: .3rem 0 0; color: var(--text); }
.alede { margin: -.5rem 0 .2rem; color: var(--sub); font-size: .9rem; }
.fld { display: grid; gap: .45rem; }
.fl { font-size: .82rem; color: var(--sub); }
.auth-main .form input { background: var(--bg); border: 1.5px solid color-mix(in srgb, var(--sub) 28%, transparent); border-radius: 12px; padding: 14px 16px; font-size: 1rem; transition: border-color .15s, box-shadow .15s; }
.auth-main .form input:hover { border-color: color-mix(in srgb, var(--sub) 55%, transparent); }
.auth-main .form input:focus { border-color: var(--main); box-shadow: 0 0 0 3px color-mix(in srgb, var(--main) 22%, transparent); outline: 0; }
.pwrap { position: relative; display: block; }
.pwrap input { padding-right: 4.4rem; }
.pwtoggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--sub); font-size: .8rem; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.pwtoggle:hover { color: var(--main); }
.meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: .1rem; }
.meter i { height: 4px; border-radius: 2px; background: var(--bg); transition: background .2s; }
.meter[data-s="1"] i:nth-child(-n+1) { background: var(--err); }
.meter[data-s="2"] i:nth-child(-n+2) { background: #e9c46a; }
.meter[data-s="3"] i:nth-child(-n+3), .meter[data-s="4"] i { background: var(--main); }
.btn.go.big { padding: 15px 22px; font-size: 1rem; border-radius: 12px; margin-top: .2rem; }
.auth-main .alt { text-align: center; }
.auth-main .alt a { color: var(--text); }
@media (max-width: 820px) {
  .auth { grid-template-columns: 1fr; margin-top: 1rem; border-radius: 20px; }
  .auth-side { padding: 1.5rem 1.4rem 1.3rem; gap: 1rem; }
  .auth-side h2 { font-size: 1.4rem; margin-bottom: .4rem; }
  .as-list, .as-track { display: none; }
  .auth-main { padding: 1.5rem 1.3rem 1.6rem; }
}
.auth-main .alede { color: var(--sub); font-size: .9rem; }

/* leaderboard: the latest results of everybody */
#lb-recent { margin-top: 2.6rem; }
.lb-rh { font-size: 1.15rem; font-weight: 500; margin: 0 0 .25rem; color: var(--text); }
.lb-rs { color: var(--sub); font-size: .85rem; margin: 0 0 .8rem; }
.rrow { display: grid; grid-template-columns: minmax(120px, 1.2fr) 5.5rem minmax(0, 2.4fr); gap: 1rem; align-items: center; background: var(--surface); border-radius: 12px; padding: .55rem 1rem .55rem .9rem; }
.rrow .rm { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .3rem .7rem; }
.rrow .pl { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--text); min-width: 0; }
.rrow .pl span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rrow .pl:hover span:last-child { text-decoration: underline; }
.rrow .v { text-align: right; font-weight: 500; font-size: 1.05rem; }
.rrow .v small { color: var(--sub); font-size: .7rem; font-weight: 400; margin-left: .25rem; }
.rrow .meta { color: var(--sub); font-size: .78rem; text-align: right; white-space: nowrap; }
.rrow .tag { font-size: .7rem; color: var(--sub); border: 1px solid color-mix(in srgb, var(--sub) 35%, transparent); border-radius: 999px; padding: .1rem .55rem; white-space: nowrap; }
@media (max-width: 640px) {
  .rrow { grid-template-columns: 1fr auto; gap: .2rem .7rem; padding: .65rem .8rem; }
  .rrow .rm { grid-column: 1 / -1; justify-content: flex-start; } .rrow .meta { text-align: left; white-space: normal; }
}