/* base.css — Variables, reset, layout, no-blur overrides, upload section */

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

:root {
  --bg: #14161f;
  --surface: #1a1d27;
  --surface-glass: rgba(26, 29, 39, 0.7);
  --surface-glass-thin: rgba(26, 29, 39, 0.5);
  --surface-hover: #242836;
  --border: #2e3345;
  --text: #e4e6ed;
  --text-muted: #8b8fa3;
  --accent: #4a7cff;
  --accent-hover: #3a6aef;
  --green: #34c759;
  --red: #ff3b5c;
  --yellow: #64b5f6;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.5;
  position: relative;
}

body.has-video {
  overflow-y: hidden;
}

#bg-blur {
  position: fixed;
  inset: -50px;
  background-size: cover;
  background-position: center;
  filter: blur(35px);
  z-index: -1;
}

/* No-blur overrides */

body.no-blur #bg-blur {
  display: none;
}

body.no-blur::before {
  filter: none;
  background: var(--bg) !important;
}

body.no-blur #blur-toggle {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: var(--surface);
}

body.no-blur #floating-brand,
body.no-blur #waveform-container,
body.no-blur #beep-banner,
body.no-blur #shot-log,
body.no-blur #shot-log-table thead,
body.no-blur #target-popover,
body.no-blur #timing-display {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: var(--surface);
}

body.no-blur .btn,
body.no-blur #play-pause-btn,
body.no-blur #speed-btn,
body.no-blur #speed-bubble,
body.no-blur #volume-track,
body.no-blur .btn-target-adjust {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body.no-blur .btn-start,
body.no-blur .btn-beep-accept { background: var(--green); }
body.no-blur .btn-clear,
body.no-blur .btn-beep-preview { background: var(--surface-hover); }
body.no-blur .btn-secondary,
body.no-blur .btn-preview,
body.no-blur .btn-export,
body.no-blur #play-pause-btn,
body.no-blur #speed-btn,
body.no-blur #speed-bubble,
body.no-blur #volume-track { background: var(--surface); }
body.no-blur .btn-confirm-shots,
body.no-blur .btn-confirm-targets,
body.no-blur .btn-play-stage { background: var(--accent); }
body.no-blur .back-step-icon { background: transparent; }
body.no-blur .btn-target-adjust { background: var(--surface-hover); }

/* Layout */

#left-column {
  flex: 0 1 900px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

main {
  max-width: 1400px;
  margin: 0 auto;
  padding: 1rem;
}

/* Upload Section */

#upload-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 140px);
}

#drop-zone {
  border: 2px dashed var(--border);
  border-radius: 12px;
  padding: 3.75rem 2.25rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
  width: 700px;
  max-width: 90%;
}

#drop-zone:hover,
#drop-zone.drag-over {
  border-color: var(--accent);
  background: rgba(74, 124, 255, 0.05);
}

.drop-zone-content svg {
  color: var(--text-muted);
  margin-bottom: 0.9rem;
  width: 45px;
  height: 45px;
}

.drop-zone-content p {
  font-size: 1.2rem;
  color: var(--text);
}

.drop-zone-content .hint {
  color: var(--text-muted);
  font-size: 1rem;
  margin-top: 0.25rem;
}

.supported-formats {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-top: 0.9rem;
}

/* Upload legal links */

.upload-legal {
  margin-top: 1rem;
  font-size: 13px;
  color: #666;
  text-align: center;
}

.upload-legal a {
  color: #888;
  text-decoration: none;
  transition: color 0.15s;
}

.upload-legal a:hover { color: #e0e0e0; }

.upload-legal .sep {
  margin: 0 8px;
  color: #444;
}

.upload-notices {
  margin-top: 1.25rem;
  font-size: 12px;
  color: #CCC;
  text-align: left;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}

.upload-notices p {
  margin: 0;
  padding-left: 1em;
  text-indent: -1em;
}

.upload-notices p::before {
  content: "\2022\00a0";
}

.upload-notices p + p {
  margin-top: 0.4em;
}

/* Mobile warning banner */

#mobile-warning {
  max-width: 540px;
  width: 90%;
  margin-bottom: 1.25rem;
  padding: 14px 18px;
  background: rgba(255, 214, 10, 0.08);
  border: 1px solid rgba(255, 214, 10, 0.25);
  border-radius: 10px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  line-height: 1.5;
}

#mobile-warning svg {
  flex-shrink: 0;
  color: var(--yellow);
  margin-top: 2px;
}

#mobile-warning p {
  font-size: 13px;
  color: #ccc;
  margin: 0;
}

@media (max-width: 768px) {
  #upload-section {
    padding-top: 100px;
    min-height: 100vh;
    justify-content: flex-start;
  }
}

/* Video type toggle */

#video-type-toggle {
  margin-top: 1.25rem;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

/* Heuristic / ML detection toggle in the staging panel */
#detect-method-toggle {
  margin: 0.85rem 0 0.25rem;
  justify-content: center;
}

.toggle-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.toggle-label {
  font-size: 0.9rem;
  color: var(--text-muted);
  transition: color 0.2s;
}

.toggle-label[data-active="true"] {
  color: var(--text);
  font-weight: 500;
}

#video-type-btn,
#ml-detect-btn {
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: 12px;
  border: none;
  background: var(--border);
  cursor: pointer;
  padding: 0;
  transition: background 0.2s;
}

#video-type-btn[aria-checked="true"],
#ml-detect-btn[aria-checked="true"] {
  background: var(--accent);
}

.toggle-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--text);
  transition: transform 0.2s;
}

#video-type-btn[aria-checked="true"] .toggle-knob,
#ml-detect-btn[aria-checked="true"] .toggle-knob {
  transform: translateX(20px);
}

.toggle-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: center;
  max-width: 420px;
  line-height: 1.4;
}

/* Cookie consent banner */

#cookie-consent {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  padding: 16px 24px;
  background: var(--surface-glass);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  font-size: 14px;
  color: var(--text-muted);
}

#cookie-consent p {
  margin: 0;
}

.cookie-consent-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.cookie-consent-actions .btn {
  padding: 8px 18px;
  font-size: 13px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.15s;
}

#cookie-accept {
  background: var(--accent);
  color: #fff;
}

#cookie-accept:hover {
  background: var(--accent-hover);
}

#cookie-decline {
  background: var(--surface-hover);
  color: var(--text-muted);
}

#cookie-decline:hover {
  background: var(--border);
}

body.no-blur #cookie-consent {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: var(--surface);
}

@media (max-width: 768px) {
  #cookie-consent {
    flex-direction: column;
    gap: 12px;
    padding: 14px 16px;
    text-align: center;
  }
}

.hidden,
.btn.hidden {
  display: none !important;
}