/* public/css/style.css */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: #0e1116; color: #e8eaf0;
  font-family: "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
  min-height: 100vh;
}
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 24px; background: #161b24;
  border-bottom: 1px solid #232b38;
}
.topbar h1 { font-size: 20px; letter-spacing: 1px; }
.topbar .status { font-size: 14px; color: #8b93a5; }
main { max-width: 1200px; margin: 24px auto; padding: 0 16px; }
.card {
  background: #161b24; border: 1px solid #232b38; border-radius: 10px;
  padding: 20px; margin-bottom: 20px;
}
.card h2 { font-size: 17px; margin-bottom: 12px; color: #4fc3f7; }
.card-link {
  display: block; text-decoration: none; color: inherit;
  background: #161b24; border: 1px solid #232b38; border-radius: 10px;
  padding: 28px; margin-bottom: 16px; transition: border-color .15s;
}
.card-link:hover { border-color: #4fc3f7; }
.card-link h2 { color: #4fc3f7; margin-bottom: 6px; }
.card-link p { color: #8b93a5; font-size: 14px; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
label { font-size: 13px; color: #8b93a5; display: block; margin-bottom: 4px; }
input[type=text], input[type=number], input[type=password], input[type=datetime-local], textarea, select {
  background: #0e1116; color: #e8eaf0; border: 1px solid #2a3342;
  border-radius: 6px; padding: 8px 10px; font-size: 14px;
}
textarea { width: 100%; min-height: 120px; font-family: inherit; }
button {
  background: #1d6fa5; color: #fff; border: none; border-radius: 6px;
  padding: 8px 16px; font-size: 14px; cursor: pointer;
}
button:hover { background: #2586c5; }
button.secondary { background: #2a3342; }
button.danger { background: #a5342f; }
button:disabled { opacity: .45; cursor: not-allowed; }
.badge {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 12px; background: #232b38; color: #8b93a5; margin-left: 8px;
}
.badge.live { background: #1e5c3a; color: #7ee2a8; }
.badge.warn { background: #6b4f16; color: #ffd166; }
.badge.done { background: #4a3a6b; color: #c9a8ff; }
.map-wrap { position: relative; width: 100%; user-select: none; touch-action: none; }
.map-img { display: block; width: 100%; border-radius: 8px; border: 1px solid #232b38; }
.marker {
  position: absolute; transform: translate(-50%, -50%);
  width: 30px; height: 30px; border-radius: 50%;
  background: #2a3342; color: #fff; font-size: 11px; line-height: 1.15; font-weight: 700;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 2px solid #fff; cursor: pointer; z-index: 2;
}
.marker.picked { border-width: 2px; border-color: #0e1116; box-shadow: 0 0 0 2px rgba(255,255,255,.35); }
.marker.dragging { opacity: .7; }
.marker.selected { outline: 3px solid #4fc3f7; }
.map-remove-btn { margin-top: 8px; background: #2a3342; }
.countdown { font-size: 40px; font-weight: 800; font-variant-numeric: tabular-nums; }
.countdown.urgent { color: #ff6b6b; }
.team-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: #1a2029; border-radius: 999px; padding: 4px 12px; margin: 3px;
  font-size: 13px;
}
.team-chip .dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.team-chip.offline { opacity: .45; }
.banner {
  padding: 14px 20px; border-radius: 10px; margin-bottom: 16px;
  background: #1a2029; border: 1px solid #232b38; font-size: 15px;
}
.banner.turn { border-color: #4fc3f7; }
.banner.warn { border-color: #ffd166; }
.banner.done { border-color: #c9a8ff; }
.list { list-style: none; }
.list li { padding: 8px 0; border-bottom: 1px solid #232b38; display: flex; justify-content: space-between; gap: 12px; }
.hidden { display: none !important; }
.error-text { color: #ff6b6b; font-size: 14px; margin-top: 8px; }
.ok-text { color: #7ee2a8; font-size: 14px; margin-top: 8px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } }
.pick-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pick-table th, .pick-table td { padding: 6px 10px; text-align: left; border-bottom: 1px solid #232b38; }
.team-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.team-row .row-no { width: 24px; text-align: right; color: #8b93a5; font-size: 13px; flex: none; }
.team-row input { flex: 1; }
.tpl-thumb { width: 56px; height: 36px; object-fit: cover; border-radius: 6px; border: 1px solid #232b38; }
.marker > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.marker .marker-no { font-size: 9px; opacity: .85; }
.badge.ok { background: #1e5c3a; color: #7ee2a8; }

/* v0.5.0:三端左图右表布局 + 右侧队伍列表 */
.layout-split { display: flex; gap: 20px; align-items: flex-start; }
.layout-split > .split-map { flex: 1; min-width: 0; }
.layout-split > .split-list { width: 320px; flex: none; }
@media (max-width: 900px) {
  .layout-split { flex-direction: column; }
  .layout-split > .split-list { width: 100%; }
}
.tp-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px; border-bottom: 1px solid #232b38; font-size: 14px;
}
.tp-row.turn { background: #1d6fa5; border-radius: 8px; }
.tp-point { color: #7ee2a8; font-size: 13px; }
.tp-empty { color: #8b93a5; }
.tp-cd { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tp-cd.urgent { color: #ff6b6b; }
.tpl-name-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.tpl-name-row input { flex: 1; }
.tpl-name-row input.invalid { border-color: #ff6b6b; }

/* v0.6.0:地图页签(多图场次可切换查看各图选点结果) */
.map-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.map-tab {
  display: inline-flex; align-items: center; gap: 6px;
  background: #2a3342; color: #c8d3e0; border-radius: 8px;
  padding: 6px 12px; font-size: 13px; max-width: 240px;
}
.map-tab:hover { background: #354052; }
.map-tab.active { background: #1d6fa5; color: #fff; }
.map-tab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-tab-dot { width: 8px; height: 8px; border-radius: 50%; background: #7ee2a8; flex: none; animation: map-tab-pulse 1.2s ease-in-out infinite; }
.map-tab-done { color: #7ee2a8; font-size: 12px; flex: none; }
@keyframes map-tab-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }