body,html{background:#000!important;color:#fff!important;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}
.wrap{padding:1rem;max-width:100%}

.event-select-wrap{max-width:480px;margin:3rem auto;text-align:center}
.event-select-wrap img{height:52px;margin-bottom:1.5rem}
.form-select{background:#111!important;border:1px solid #333!important;color:#fff!important;font-size:.95rem;padding:.65rem 1rem}
.form-select:focus{border-color:#555!important;box-shadow:none!important}
.form-select option{background:#111;color:#fff}

.mode-wrap{max-width:480px;margin:0 auto}
.mode-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;background:#111;border:1px solid #333;color:#aaa;border-radius:12px;padding:2rem 1rem;cursor:pointer;transition:all .2s;width:100%}
.mode-btn:hover{background:#1a1a1a;border-color:#555;color:#fff;transform:translateY(-2px)}
.mode-btn .icon{font-size:2rem}
.mode-btn .label{font-size:1rem;font-weight:700;color:#fff}
.mode-btn .desc{font-size:.75rem;color:#666}
.mode-btn.mode-ind:hover{border-color:#0d6efd}
.mode-btn.mode-par:hover{border-color:#198754}

.back-btn{background:none;border:none;color:#666;font-size:.8rem;padding:0;cursor:pointer;display:flex;align-items:center;gap:4px;margin-bottom:1rem}
.back-btn:hover{color:#aaa}
.event-header{display:flex;align-items:center;gap:.75rem;margin-bottom:1.25rem}
.event-header img{height:36px;width:auto}

.btn-gender{background:#111;border:1px solid #333;color:#aaa;font-weight:600;font-size:.9rem;transition:all .15s;padding:.6rem 1rem}
.btn-gender:hover{background:#1a1a1a;color:#fff;border-color:#555}
.btn-gender.active-f{background:#0d2b45;border-color:#0d6efd;color:#6ea8fe}
.btn-gender.active-m{background:#0d2e1e;border-color:#198754;color:#75b798}
.btn-cat{background:#111;border:1px solid #333;color:#aaa;font-size:.75rem;font-weight:500;padding:3px 12px;border-radius:100px;transition:all .15s;white-space:nowrap}
.btn-cat:hover{background:#1a1a1a;color:#fff}
.btn-cat.active-f{background:#0d2b45;border-color:#0d6efd;color:#6ea8fe}
.btn-cat.active-m{background:#0d2e1e;border-color:#198754;color:#75b798}
.btn-cat.active-group{background:#0d2e1e;border-color:#198754;color:#75b798}
.form-control{background:#111!important;border:1px solid #333!important;color:#fff!important;font-size:.9rem}
.form-control::placeholder{color:#555!important}
.form-control:focus{background:#1a1a1a!important;border-color:#555!important;box-shadow:none!important;color:#fff!important}

.stat-card{background:#111;border:1px solid #222;border-radius:8px;padding:.75rem 1rem}
.stat-card .val{font-size:1.4rem;font-weight:600;color:#fff}
.stat-card .lbl{font-size:.7rem;color:#777;text-transform:uppercase;letter-spacing:.05em}

.table-wrap{border:1px solid #222;border-radius:8px;overflow:hidden;overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:.85rem}
thead th{background:#111;color:#666;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:10px;border-bottom:1px solid #222;white-space:nowrap;cursor:pointer;user-select:none}
thead th:hover{color:#ccc}
tbody td{padding:10px;border-bottom:1px solid #1a1a1a;color:#ddd;white-space:nowrap}
tbody tr:last-child td{border-bottom:none}
.row-clickable{cursor:pointer}
.row-clickable:hover td{background:#0d0d0d}
.fullname{font-weight:600;color:#fff;text-transform:uppercase;letter-spacing:.02em}
.dorsal{font-weight:700;color:#fff}
.time-best{font-weight:700;color:#fff}

.row-team{background:#0d0d0d}
.row-team td{color:#fff;border-bottom:1px solid #222;font-weight:700}
.row-member{background:#020202;cursor:pointer}
.row-member td{color:#999;padding:6px 10px;border-bottom:1px solid #111;font-size:.78rem}
.row-member:hover td{background:#080808!important}
.team-name{font-weight:700;color:#fff;text-transform:uppercase;font-size:.88rem}
.member-name{color:#bbb;padding-left:20px!important}
.dorsal-member{color:#aaa}

.badge-f{background:#0d2b45;color:#6ea8fe;border-radius:100px;padding:2px 9px;font-size:.7rem;font-weight:600}
.badge-m{background:#0d2e1e;color:#75b798;border-radius:100px;padding:2px 9px;font-size:.7rem;font-weight:600}
.badge-masc{background:#0d2e1e;color:#75b798;border-radius:100px;padding:2px 9px;font-size:.7rem;font-weight:600}
.badge-fem{background:#0d2b45;color:#6ea8fe;border-radius:100px;padding:2px 9px;font-size:.7rem;font-weight:600}
.badge-mix{background:#2a1a2e;color:#c084fc;border-radius:100px;padding:2px 9px;font-size:.7rem;font-weight:600}

.pos-1{color:#f0b429;font-weight:700}
.pos-2{color:#9e9e9e;font-weight:700}
.pos-3{color:#cd7f32;font-weight:700}
.pos-n{color:#666}
.rank-num{display:inline-block;min-width:26px}
.sort-asc::after{content:' ↑';color:#6ea8fe}
.sort-desc::after{content:' ↓';color:#6ea8fe}

.pag-bar{display:flex;gap:8px;align-items:center;justify-content:flex-end;margin-top:.75rem;flex-wrap:wrap}
.pag-bar button{background:#111;border:1px solid #333;color:#aaa;font-size:.8rem;padding:4px 12px;border-radius:6px;cursor:pointer}
.pag-bar button:hover:not(:disabled){background:#1a1a1a;color:#fff}
.pag-bar button:disabled{opacity:.3;cursor:default}
.pag-bar span{font-size:.8rem;color:#666}

.empty-state{text-align:center;padding:3rem 1rem;color:#444}
.empty-state .icon{font-size:2.5rem;margin-bottom:.75rem}
.rank-ctx{font-size:.75rem;color:#666;margin-bottom:.75rem}
.rank-ctx strong{color:#aaa}
.live-notice{font-size:.75rem;color:#fff;text-align:center;margin-bottom:.75rem}

.modal-content{background:#444!important;border:1px solid #555!important;color:#fff!important}
.modal-header{border-color:#555!important}
.seg-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid #4a4a4a}
.seg-row:last-child{border-bottom:none}
.seg-label{font-size:.8rem;color:#bbb}
.seg-value{font-weight:600;font-size:.85rem}
.seg-value.run{color:#6ea8fe}
.seg-value.workout{color:#75b798}
.detail-total{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-top:1px solid #555;margin-top:4px}

@media(max-width:576px){
  .stat-card .val{font-size:1.1rem}
  .btn-gender{font-size:.8rem;padding:.5rem .6rem}
  .wrap{padding:.75rem}
  .event-select-wrap{margin:2rem auto}
}