:root {
  --bg: #0b0e14;
  --panel: #131826;
  --panel-2: #1b2233;
  --line: #2a3346;
  --text: #e6eaf2;
  --muted: #8a93a6;
  --accent: #5b8cff;
  --accent-2: #38e0b0;
  --danger: #ff5b6e;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html,
body,
#root {
  height: 100%;
  margin: 0;
}

body {
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
}

.app {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.app__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
  border-bottom: 1px solid var(--line);
}

.app__brand {
  background: none;
  border: 0;
  color: var(--text);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  cursor: pointer;
}
.app__brand span {
  color: var(--accent);
}

.app__nav {
  display: flex;
  align-items: center;
  gap: 10px;
}
.app__link {
  background: none;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
  padding: 7px 4px;
}
.app__link:hover {
  color: var(--accent);
}
.app__restart {
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 7px 14px;
  border-radius: 8px;
  cursor: pointer;
}
.app__restart:hover {
  border-color: var(--accent);
}

.app__main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.banner {
  padding: 10px 22px;
  font-size: 14px;
}
.banner--error {
  background: rgba(255, 91, 110, 0.12);
  color: var(--danger);
  border-bottom: 1px solid rgba(255, 91, 110, 0.3);
}

/* ---- DropZone ---- */
.dropzone {
  flex: 1;
  margin: 22px;
  border: 2px dashed var(--line);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.dropzone--hover {
  border-color: var(--accent);
  background: rgba(91, 140, 255, 0.06);
}
.dropzone--disabled {
  opacity: 0.5;
  pointer-events: none;
}
.dropzone__inner {
  max-width: 460px;
  padding: 24px;
}
.dropzone__icon {
  font-size: 42px;
  color: var(--accent);
}
.dropzone h1 {
  margin: 10px 0 8px;
  font-size: 24px;
}
.dropzone p {
  color: var(--muted);
  margin: 0 0 16px;
}
.dropzone__hint {
  font-size: 13px;
  color: var(--accent);
}

/* ---- Progress ---- */
.centered {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.progress {
  width: min(520px, 80vw);
}
.progress__label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  color: var(--muted);
}
.progress__track {
  height: 10px;
  background: var(--panel-2);
  border-radius: 999px;
  overflow: hidden;
}
.progress__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width 0.2s ease;
}
.muted {
  color: var(--muted);
}

/* ---- Trim ---- */
.trim {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 360px;
  grid-template-rows: 1fr auto;
  gap: 16px;
  padding: 18px 22px;
  min-height: 0;
}
.trim__preview {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
  background: #000;
  border: 1px solid var(--line);
  border-radius: 12px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.trim__preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  image-rendering: auto;
}
.trim__previewmeta {
  position: absolute;
  bottom: 10px;
  left: 12px;
  font-size: 12px;
  color: var(--muted);
  background: rgba(0, 0, 0, 0.5);
  padding: 4px 8px;
  border-radius: 6px;
  display: flex;
  gap: 8px;
}
.trim__tag {
  color: var(--accent-2);
}
.filmstrip {
  grid-row: 2 / 3;
  grid-column: 1 / 2;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.filmstrip__thumb {
  flex: 0 0 auto;
  width: 84px;
  height: 56px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 6px;
  overflow: hidden;
  background: #000;
  cursor: pointer;
}
.filmstrip__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.filmstrip__thumb--dim {
  opacity: 0.35;
}
.filmstrip__thumb--active {
  border-color: var(--accent);
}

.controls {
  grid-row: 1 / 3;
  grid-column: 2 / 3;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
}
.control {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
}
.control b {
  color: var(--text);
}
.control input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}
.control--check {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
/* Two range inputs overlap on one track. If the inputs themselves stay
   interactive, the top one captures every click and the other handle becomes
   undraggable (the "can only drag the end" bug). Fix: the inputs ignore pointer
   events; only their thumbs accept them, so both handles are grabbable. */
.dualrange {
  position: relative;
  height: 34px;
  display: flex;
  align-items: center;
}
.dualrange::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 2px;
  background: var(--panel-2);
}
.dualrange input[type="range"] {
  position: absolute;
  left: 0;
  width: 100%;
  height: 34px;
  margin: 0;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}
.dualrange input[type="range"]::-webkit-slider-runnable-track,
.dualrange input[type="range"]::-moz-range-track {
  background: transparent;
  border: none;
}
.dualrange input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent-2);
  border: 2px solid var(--bg);
  cursor: grab;
}
.dualrange input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent-2);
  border: 2px solid var(--bg);
  cursor: grab;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 16px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover {
  border-color: var(--accent);
}
.btn--primary {
  background: linear-gradient(90deg, var(--accent), #6f7cff);
  border-color: transparent;
  color: #fff;
}
.btn:disabled {
  opacity: 0.5;
  cursor: default;
}

/* ---- Viewer ---- */
.viewer {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 320px;
  min-height: 0;
}
.viewer__canvas {
  position: relative;
  min-height: 0;
}
.viewer__error {
  position: absolute;
  z-index: 2;
  top: 12px;
  left: 12px;
  color: var(--danger);
  background: rgba(0, 0, 0, 0.6);
  padding: 6px 10px;
  border-radius: 6px;
}
.viewer__panel {
  border-left: 1px solid var(--line);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.viewer__panel h2 {
  margin: 0;
}
.stats {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.stats > div {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
}
.stats dt {
  color: var(--muted);
}
.stats dd {
  margin: 0;
  font-weight: 600;
}
.viewer__actions {
  display: flex;
  gap: 10px;
}
.viewer__hint {
  color: var(--muted);
  font-size: 12px;
  margin-top: auto;
}
.seg {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.seg__label {
  font-size: 13px;
  color: var(--muted);
}
.seg__btns {
  display: flex;
  gap: 6px;
}
.seg__btn {
  flex: 1;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
}
.seg__btn--on {
  border-color: var(--accent);
  color: var(--text);
  background: rgba(91, 140, 255, 0.15);
}
.viewer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.viewer__top h2 {
  margin: 0;
}
.adjust {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--panel);
}
.adjust summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 14px;
}
.adjust[open] summary {
  color: var(--text);
  margin-bottom: 10px;
}
.adjust .control {
  margin-bottom: 12px;
}

/* ---- Camera diagnostics ---- */
.camera {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 18px;
  padding: 18px 22px;
  min-height: 0;
}
.camera__left {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
}
.camera__video {
  position: relative;
  background: #000;
  border: 1px solid var(--line);
  border-radius: 12px;
  flex: 1;
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.camera__video video {
  max-width: 100%;
  max-height: 100%;
}
.camera__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.camera__controls {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}
.camera__controls .control {
  flex: 1;
}
.camera__controls select {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 10px;
}
.camera__right {
  border-left: 1px solid var(--line);
  padding-left: 18px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.camera__right h2 {
  margin: 0;
}
.modes {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.modes th,
.modes td {
  text-align: left;
  padding: 7px 8px;
  border-bottom: 1px solid var(--line);
}
.modes th {
  color: var(--muted);
  font-weight: 500;
}
.fps-high {
  color: var(--accent-2);
  font-weight: 700;
}
.fps-normal {
  color: var(--text);
}
.btn--sm {
  padding: 5px 10px;
  font-size: 13px;
}
.camera__rejected,
.camera__caps {
  font-size: 13px;
  color: var(--muted);
}
.camera__rejected summary,
.camera__caps summary {
  cursor: pointer;
  padding: 4px 0;
}
.camera__caps pre {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  overflow-x: auto;
  font-size: 12px;
}
.camera__note {
  font-size: 12px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

/* Phones: stack the preview and results into one scrollable column. */
@media (max-width: 760px) {
  .app__main {
    overflow-y: auto;
  }
  .camera {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .camera__video {
    min-height: 50vw;
  }
  .camera__right {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--line);
    padding-top: 14px;
    overflow: visible;
  }
  .app__link {
    font-size: 13px;
  }
}