:root {
  --bg: #FAFAF9;
  --surface: #FFFFFF;
  --text: #1C1C1E;
  --text-muted: #68686D;
  --border: #E4E2DF;
  --border-strong: #D3D1CD;
  --accent: #3452E0;
  --accent-soft: #EEF1FD;
  --danger: #C0392B;
  --danger-soft: #FBEAE8;
  --shadow-sm: 0 1px 2px rgba(28, 28, 30, 0.06);
  --shadow-md: 0 2px 8px rgba(28, 28, 30, 0.08);
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
}

* { box-sizing: border-box; }

/* Several elements below set `display` unconditionally on a class (e.g.
   .modal-overlay { display: flex }) so they lay out correctly once shown.
   The browser's own [hidden] { display: none } rule has the *same*
   selector specificity as a class rule but loses to it regardless of
   source order, since User-Agent-origin rules always lose to author-origin
   ones -- so those elements were staying visible (and, for anything
   position:fixed, blocking clicks on the whole page) even with the hidden
   attribute set. This one rule guarantees [hidden] always wins, everywhere,
   for anything toggled via el.hidden in JS. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
}

h1, h2, h3 { font-weight: 700; letter-spacing: -0.01em; }

/* ---------- Navbar ---------- */

.navbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 14.5px;
  color: var(--text);
}

.brand-mark {
  width: 18px;
  height: 18px;
  border-radius: var(--radius-sm);
  background: var(--text);
  flex-shrink: 0;
}

.ghost-btn {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.ghost-btn:hover { border-color: var(--border-strong); background: var(--bg); }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.username-badge {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
}

.username-badge:hover { border-color: var(--border-strong); color: var(--text); }

.danger-btn {
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  width: 100%;
  padding: 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--danger);
  background: var(--danger);
  color: white;
  cursor: pointer;
  transition: filter 0.12s ease;
}

.danger-btn:hover { filter: brightness(1.08); }

/* ---------- Username modal ---------- */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(23, 23, 26, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px;
  max-width: 360px;
  width: 100%;
  box-shadow: var(--shadow-md);
  text-align: left;
}

.modal-card h2 {
  margin: 0 0 6px;
  font-size: 17px;
}

.modal-card p {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}

.modal-card input {
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  margin-bottom: 10px;
  background: var(--surface);
  color: var(--text);
}

.modal-card input:focus {
  outline: none;
  border-color: var(--accent);
}

.modal-card .primary-btn { margin-top: 6px; }

.modal-error {
  color: var(--danger) !important;
  margin-top: 10px !important;
  margin-bottom: 0 !important;
  font-size: 12.5px !important;
}

.modal-notice {
  color: var(--text) !important;
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 10px 12px !important;
  border-radius: var(--radius-md);
  margin-top: 10px !important;
  margin-bottom: 0 !important;
  font-size: 12.5px !important;
  line-height: 1.5 !important;
}

/* ---------- Hero ---------- */

.hero {
  max-width: 640px;
  margin: 0 auto;
  padding: 48px 24px 40px;
}

.hero-title {
  font-size: 26px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}

.hero-subtitle {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 520px;
  margin: 0 0 28px;
}

/* ---------- Upload card ---------- */

.upload-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 24px;
}

.source-tabs {
  display: flex;
  gap: 4px;
  padding: 3px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 18px;
}

.source-tab {
  flex: 1;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 9px;
  border-radius: 5px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.source-tab.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

.record-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.record-preview-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #101012;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.record-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1); /* mirror, like a selfie camera */
}

.record-indicator {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(16, 16, 18, 0.7);
  color: white;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 4px 9px;
  border-radius: var(--radius-sm);
}

.record-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #E5484D;
  animation: pulse-dot 1.2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.record-controls { display: flex; }

.record-hint {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-muted);
  text-align: center;
}

.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 36px 20px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
  text-align: center;
}

.dropzone:hover,
.dropzone.dragover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.dropzone-icon {
  width: 26px;
  height: 26px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.dropzone-title {
  font-size: 14px;
  font-weight: 600;
}

.dropzone-hint {
  font-size: 12.5px;
  color: var(--text-muted);
}

.options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 20px;
}

.option-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Always take the full row on its own so the segmented picker below gets
     the whole card's width to lay out in, rather than being squeezed next
     to the sound toggle and having its longer labels (e.g. "Intelligent
     Splitter") clipped or overflow unreadably. */
  flex: 1 1 100%;
}

.option-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.segmented {
  display: flex;
  flex-wrap: wrap;
  padding: 3px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  gap: 4px;
}

.segmented button {
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 5px;
  border: 1px solid transparent;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  white-space: normal;
  text-align: center;
  line-height: 1.3;
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}

.segmented button:hover { border-color: var(--border-strong); }

.segmented button.active {
  background: var(--text);
  border-color: var(--text);
  color: white;
}

.toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}

.switch { display: inline-flex; }
.switch input { display: none; }

.switch-track {
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background: var(--border-strong);
  position: relative;
  transition: background 0.12s ease;
}

.switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
  transition: transform 0.12s ease;
}

.switch input:checked + .switch-track { background: var(--accent); }
.switch input:checked + .switch-track .switch-thumb { transform: translateX(14px); }

.primary-btn {
  width: 100%;
  margin-top: 20px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  padding: 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--text);
  background: var(--text);
  color: white;
  cursor: pointer;
  transition: filter 0.12s ease;
}

.primary-btn:hover:not(:disabled) { filter: brightness(1.25); }

.primary-btn:disabled {
  background: var(--border);
  border-color: var(--border);
  color: var(--text-muted);
  cursor: not-allowed;
}

/* ---------- Progress ---------- */

.progress-card {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
}

.spinner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2.5px solid var(--border);
  border-top-color: var(--accent);
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}

@keyframes spin { to { transform: rotate(360deg); } }

.progress-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.progress-track {
  height: 4px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  border-radius: 999px;
  transition: width 0.3s ease;
}

.progress-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.progress-label {
  font-size: 12.5px;
  color: var(--text-muted);
}

.progress-elapsed {
  font-size: 12px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------- Error ---------- */

.error-panel {
  margin-top: 20px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--danger-soft);
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 13.5px;
}

/* ---------- Dashboard ---------- */

.dashboard-section {
  max-width: 1280px;
  margin: 0 auto;
  padding: 8px 24px 60px;
}

.dashboard-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.dashboard-header h2 {
  font-size: 17px;
  margin: 0;
}

.dashboard-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.transcript-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin: -6px 0 18px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-muted);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 260px;
  overflow-y: auto;
}

.dashboard-count {
  font-size: 12.5px;
  color: var(--text-muted);
}

.dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
  cursor: pointer;
}

.card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

.card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #EDEDEC;
  overflow: hidden;
}

.card-thumb,
.card-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.2s ease;
}

.card-video { opacity: 0; }
.card:hover .card-video { opacity: 1; }
.card:hover .card-thumb { opacity: 0; }

.card-time {
  position: absolute;
  bottom: 8px;
  left: 8px;
  font-size: 11px;
  font-weight: 600;
  color: white;
  background: rgba(16, 16, 18, 0.65);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  font-variant-numeric: tabular-nums;
  z-index: 1;
}

/* Gemini-driven engines only: flags whether this sentence's timing/text
   mapping looks trustworthy (green) or was flagged as uncertain (red). */
.anomaly-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.9);
  z-index: 1;
}

.anomaly-dot.ok { background: #2F9E5B; }
.anomaly-dot.anomaly { background: #E5484D; }

.card-body {
  padding: 12px 14px 14px;
}

.card-sentence {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text);
}

/* ---------- Results (history) page ---------- */

.results-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 36px 24px 60px;
}

.results-header { margin-bottom: 24px; }

.results-header h1 {
  font-size: 22px;
  margin: 0 0 4px;
}

.results-subtitle {
  margin: 0;
  color: var(--text-muted);
  font-size: 13.5px;
}

.state-panel {
  text-align: center;
  padding: 72px 20px;
  color: var(--text-muted);
}

.state-panel p { margin: 4px 0; }
.state-panel .hint { font-size: 13px; }
.state-panel a { color: var(--accent); font-weight: 600; text-decoration: none; }

.history-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 18px;
}

.history-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.history-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

.history-thumb-link {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #EDEDEC;
  overflow: hidden;
}

.history-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.history-count {
  position: absolute;
  bottom: 8px;
  left: 8px;
  font-size: 11px;
  font-weight: 600;
  color: white;
  background: rgba(16, 16, 18, 0.65);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
}

.history-body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.history-date {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
}

.history-date:hover { color: var(--accent); }

.history-model {
  font-size: 11.5px;
  color: var(--text-muted);
}

.history-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.history-actions a {
  font-size: 12px;
  padding: 5px 10px;
  text-decoration: none;
}

@media (max-width: 640px) {
  .nav-inner { padding: 12px 16px; }
  .hero { padding: 36px 16px 28px; }
  .hero-title { font-size: 22px; }
  .dashboard-section { padding: 8px 16px 48px; }
  .dashboard { grid-template-columns: 1fr 1fr; gap: 12px; }
  .options { flex-direction: column; align-items: flex-start; }
  .results-page { padding: 24px 16px 48px; }
  .results-header h1 { font-size: 19px; }
  .history-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .modal-card { padding: 20px; }
}

@media (max-width: 420px) {
  .dashboard { grid-template-columns: 1fr; }
  .history-grid { grid-template-columns: 1fr; }
  .dashboard-header-actions { flex-direction: column; align-items: flex-start; width: 100%; }
  .nav-actions { width: 100%; justify-content: flex-end; }
}