:root{
  --bg:#ffffff;
  --text:#111;
  --muted:#666;
  --line:#e6e6e6;
  --panel:#f7f7f7;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background:var(--bg);
  color:var(--text);
}
.wrap{
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 18px 28px;
}
h1{
  margin: 6px 0 14px;
  font-size: 34px;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.panel{
  background: var(--panel);
  border-left: 4px solid #444;
  padding: 12px 14px;
  margin: 10px 0;
}
.panel-row{display:flex; gap:12px; align-items:flex-start}
.icon{font-size:20px; line-height:1.2; margin-top:2px}
.panel-title{font-size:14px; color:var(--muted)}
.panel-value{font-size:18px; font-weight:600}

.controls{
  display:flex;
  gap: 18px;
  align-items:flex-end;
  flex-wrap: wrap;
  margin: 14px 0 10px;
}
.controls label{display:flex; flex-direction:column; gap:6px}
.controls span{font-size:14px; color:var(--text)}
select,input{
  font-size:16px;
  padding: 8px 10px;
  border:1px solid #cfcfcf;
  border-radius: 8px;
  background:#fff;
}
.status{
  margin-left:auto;
  font-size:14px;
  color: var(--muted);
}

.table-wrap{overflow:auto; border:1px solid var(--line); border-radius: 12px}

table{width:100%; border-collapse:collapse; min-width: 920px}

thead th{
  text-align:left;
  font-size:16px;
  padding: 10px 12px;
  background: #f3f3f3;
  border-bottom:1px solid var(--line);
}

tbody td{
  font-size:16px;
  padding: 10px 12px;
  border-bottom:1px solid var(--line);
  vertical-align: top;
}

tbody tr:last-child td{border-bottom:none}

.hint{margin:10px 0 0; font-size:12px; color:var(--muted)}

.badge{
  display:inline-flex;
  align-items:center;
  padding: 3px 8px;
  border-radius: 999px;
  border:1px solid var(--line);
  font-size: 13px;
  font-weight:600;
}
.badge.paid{background:#eaffea}
.badge.wait{background:#fff6dd}
.badge.none{background:#f3f3f3}
@media (max-width: 700px){
  h1{font-size:34px}
  .status{margin-left:0; width:100%}
}

@media (max-width: 600px) {
  h1 { font-size: 28px; }
  .stats { font-size: 14px; }
}

/* -------- Distance row highlighting (subtle) -------- */
tbody tr.dist-berni td { background: #fff7e6; }
tbody tr.dist-5km td { background: #eefaf0; }
tbody tr.dist-10km td { background: #eef6ff; }

tbody tr.dist-berni:hover td,
tbody tr.dist-5km:hover td,
tbody tr.dist-10km:hover td {
  filter: brightness(0.98);
}