:root{
  --bg:#F7F9FC;
  --card:#FFFFFF;
  --text:#0F172A;
  --muted:#64748B;
  --primary:#2563EB;
  --primary-2:#1D4ED8;
  --success:#16A34A;
  --danger:#EF4444;
  --warn:#F59E0B;
  --shadow:0 6px 20px rgba(17,24,39,0.08);
  --radius:16px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg);
  color:var(--text);
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px;
  background:linear-gradient(135deg, var(--primary), var(--primary-2));
  color:#fff;
}
.title{margin:0;font-size:20px;font-weight:700;letter-spacing:0.5px}
.badge{
  background:rgba(255,255,255,0.2);
  padding:6px 10px;
  border-radius:999px;
  font-size:14px;
}

.container{padding:16px}
.section{margin-bottom:16px}
.section-title{font-size:16px;color:var(--muted);margin:0 0 8px}

.segmented{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.segmented button{
  flex:1;
  min-width:72px;
  padding:12px 14px;
  border:none;
  border-radius:999px;
  background:#E2E8F0;
  color:#0F172A;
  font-weight:600;
}
.segmented button.active{
  background:var(--primary);
  color:#fff;
  box-shadow:var(--shadow);
}

.controls{
  display:flex;
  gap:10px;
  position:sticky;
  top:8px;
  z-index:10;
  align-items:center;
  justify-content:center; /* 居中显示按钮组 */
}
.btn{
  border:none;
  padding:14px 16px;
  border-radius:14px;
  font-size:16px;
  font-weight:700;
  box-shadow:var(--shadow);
}
.btn-primary{background:var(--primary); color:#fff}
.btn-primary:disabled{opacity:0.5}
.btn-secondary{background:#E5E7EB; color:#111827}
.btn-danger{background:var(--danger); color:#fff}
.btn-success{background:var(--success); color:#fff}
.btn:disabled{opacity:0.6}

.sticky-controls{position:sticky; top:0; background:var(--bg); padding-bottom:8px}

.add-row{
  display:flex;
  gap:8px;
  margin-bottom:12px;
}
.add-row input{
  flex:1;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid #E5E7EB;
  background:#fff;
}

.grid{
  display:grid;
  grid-template-columns: repeat(1, 1fr);
  gap:12px;
}
@media(min-width:480px){
  .grid{grid-template-columns: repeat(2, 1fr);}
}
@media(min-width:768px){
  .grid{grid-template-columns: repeat(3, 1fr);}
}

.card{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.card-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.card-title{font-size:20px;font-weight:700}
.card-title-wrap{display:flex;align-items:center;gap:8px}
.lane-badge{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:28px;padding:0 10px;border-radius:6px;background:var(--primary);color:#fff;font-size:14px;font-weight:700;cursor:pointer;user-select:none;transition:transform .15s ease, background-color .2s ease, color .2s ease}
.status-tag{
  font-size:12px;
  padding:4px 8px;
  border-radius:999px;
  color:#fff;
}
.status-running{background:var(--primary)}
.status-finished{background:var(--success)}
.status-idle{background:#9CA3AF}

.time{
  font-size:28px;
  font-weight:800;
  letter-spacing:1px;
}

.card-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.card-actions .btn{padding:10px 12px; font-size:14px}

.footer{
  text-align:center;
  padding:16px;
  color:var(--muted);
}

/* 跑道徽标交互动画 */
.lane-badge:active{ transform: scale(0.96); }
@keyframes pop {
  0% { transform: scale(0.90); }
  60% { transform: scale(1.06); }
  100% { transform: scale(1.00); }
}
.lane-badge.pop{
  animation: pop .18s ease;
}

.results-list{
  /* 行内采用三列：姓名（自适应）、距离（自适应居中）、时间（自适应靠右） */
}
.results-list .result-item{
  background:#fff;
  border-radius:12px;
  box-shadow:var(--shadow);
  padding:10px;
  display:grid;
  grid-template-columns: 1fr auto 1fr; /* 姓名 1fr，距离 auto，时间 1fr */
  column-gap:12px;
  align-items:center;
  margin-bottom:8px;
}
.results-list .result-item > div:nth-child(2){ /* 距离列 */
  justify-self:center; /* 居中显示在姓名与时间之间 */
  text-align:center;
}
.results-list .result-item > div:nth-child(3){ /* 时间列 */
  justify-self:end; /* 靠右对齐 */
  text-align:right;
}

.race-status{
  margin-top:8px;
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--muted);
}
.dot{
  width:10px;height:10px;border-radius:50%;
  background:#9CA3AF;
}
.dot.running{background:var(--primary)}
.dot.paused{background:var(--warn)}
.dot.idle{background:#9CA3AF}

/* 运动员库样式 */
.library{margin-top:8px; margin-bottom:12px;}
.library-title{font-size:14px; color:var(--muted); margin-bottom:6px}
.chips{display:flex; gap:8px; flex-wrap:wrap}
.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  background:#EEF2FF;
  color:#1E3A8A;
  border-radius:999px;
  box-shadow:var(--shadow);
  font-size:14px;
  cursor:pointer;
}
.chip.selected{
  background:var(--primary);
  color:#fff;
}

/* 成绩标题右侧日期时间 */
.section-title-line{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
}
.muted{ color: var(--muted); font-size:14px; }

/* 卡片左右布局与大号完成按钮 */
.card-content{
  display:flex;
  gap:12px;
  align-items:stretch;
}
.card-body{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.card-side{
  width:110px;
  display:flex;
  align-items:center;
  justify-content:center;
}
@media(max-width:380px){
  .card-side{ width:96px; }
}
.finish-btn{
  min-width:96px;
  height:64px;
  font-size:18px;
  padding:0 12px;
  border-radius:14px;
  box-shadow:var(--shadow);
}
/* 顶部按钮与完成按钮保持一致尺寸 */
.big-btn{
  min-width:96px;
  height:64px;
  font-size:18px;
  padding:0 12px;
  border-radius:14px;
  box-shadow:var(--shadow);
}

/* Toast 提示样式 */
.toast{
  position:fixed;
  left:50%;
  bottom:20px;
  transform:translateX(-50%);
  background:#111827;
  color:#fff;
  padding:10px 14px;
  border-radius:10px;
  box-shadow:var(--shadow);
  font-size:14px;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease, bottom .2s ease;
  z-index:9999;
}
.toast.show{
  opacity:0.95;
  bottom:28px;
  pointer-events:auto;
}

/* 授权模态框 */
.modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,0.55);
  /* 背景模糊：对背后内容进行模糊处理 */
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);

  display:flex;
  align-items:center;
  justify-content:center;
  z-index:10000;

  /* 平滑显隐过渡 */
  opacity:0;
  transition: opacity .2s ease;
}
.modal-backdrop.show{
  opacity:1;
}
.modal{
  width:min(92vw, 360px);
  background:#fff;
  border-radius:14px;
  box-shadow:var(--shadow);
  padding:16px;
}
.modal-title{
  margin:0 0 8px;
  font-size:18px;
  font-weight:800;
}
.modal-body{
  margin-bottom:12px;
}
.modal-body input{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid #E5E7EB;
  font-size:16px;
}
.modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
}
.modal-hint{
  margin-top:8px;
  font-size:12px;
  color:var(--muted);
}