* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #1a1a2e;
  color: #eee;
  min-height: 100vh;
}

#app {
  max-width: 960px;
  margin: 0 auto;
  padding: 20px;
}

h1 {
  text-align: center;
  margin-bottom: 16px;
  font-size: 1.5rem;
  color: #e94560;
}

#controls {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

#video-file {
  display: none;
}

#file-label,
#webcam-btn,
#play-btn,
#mode-btn,
#direction-btn,
#roi-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.2s;
}

#file-label {
  background: #0f3460;
  color: #eee;
}

#file-label:hover {
  background: #16498a;
}

#webcam-btn {
  background: #533483;
  color: #eee;
}

#webcam-btn:hover {
  background: #6b44a0;
}

#play-btn {
  background: #e94560;
  color: #fff;
}

#play-btn:hover:not(:disabled) {
  background: #ff6b81;
}

#play-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

#mode-btn {
  background: #6c5ce7;
  color: #eee;
}

#mode-btn:hover {
  background: #a29bfe;
}

#direction-btn {
  background: #0a3d62;
  color: #eee;
}

#direction-btn:hover {
  background: #1e6fa0;
}

#roi-btn {
  background: #2d6a4f;
  color: #eee;
}

#roi-btn:hover {
  background: #40916c;
}

#roi-btn.active {
  background: #e94560;
}

#status {
  text-align: center;
  margin-bottom: 12px;
  font-size: 0.85rem;
  color: #aaa;
}

#video-container {
  position: relative;
  width: 100%;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

#video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

#overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#overlay.roi-mode {
  pointer-events: auto;
  cursor: crosshair;
}

#finish-line-control {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  justify-content: center;
  font-size: 0.9rem;
}

#finish-slider {
  width: 200px;
  accent-color: #e94560;
}

#finish-value {
  min-width: 36px;
}

#min-size-control {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  justify-content: center;
  font-size: 0.9rem;
}

#min-size-slider {
  width: 200px;
  accent-color: #2d6a4f;
}

#min-size-value {
  min-width: 36px;
}