:root {
  color-scheme: dark;
  --bg: #050711;
  --bg2: #0b1020;
  --panel: rgba(13, 18, 34, 0.92);
  --panel2: rgba(19, 27, 49, 0.84);
  --line: rgba(132, 175, 255, 0.18);
  --line2: rgba(101, 217, 245, 0.22);
  --text: #eff7ff;
  --muted: #9eb0cf;
  --accent: #65d9f5;
  --accent2: #a77dff;
  --danger: #ff5775;
  --good: #6bf2a4;
  --warn: #ffd36e;
  --shadow: 0 20px 60px rgba(0,0,0,.35);
}
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 16% 12%, rgba(101,217,245,.22), transparent 32%),
    radial-gradient(circle at 82% 18%, rgba(167,125,255,.18), transparent 30%),
    linear-gradient(160deg, var(--bg), #03040b 72%);
  color: var(--text);
}
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .5; cursor: not-allowed; }
.app-shell { min-height: 100vh; padding: 16px; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 14px; }
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: linear-gradient(140deg, rgba(18,27,50,.92), rgba(10,14,28,.78));
  box-shadow: var(--shadow);
}
.brand-block { display: flex; align-items: center; gap: 12px; min-width: 260px; }
.brand-orb {
  width: 54px; height: 54px; border-radius: 18px;
  display: grid; place-items: center;
  font-weight: 900; letter-spacing: -.05em;
  color: #00131b;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 0 26px rgba(101,217,245,.24);
}
.brand-copy h1 { margin: 0 0 4px; font-size: clamp(1.05rem, 2vw, 1.5rem); }
p { color: var(--muted); margin: 0; }
.brand-copy p { font-size: .88rem; }
.top-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.btn {
  border: 1px solid var(--line2);
  color: var(--text);
  background: rgba(255,255,255,.06);
  border-radius: 12px;
  padding: 9px 12px;
  font-weight: 800;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.btn:hover { transform: translateY(-1px); border-color: rgba(101,217,245,.56); background: rgba(255,255,255,.09); }
.btn.primary { background: linear-gradient(135deg, rgba(101,217,245,.92), rgba(167,125,255,.86)); color: #06101c; border-color: transparent; }
.btn.ghost { background: rgba(255,255,255,.045); }
.btn.danger { border-color: rgba(255,87,117,.55); color: #ffdce2; background: rgba(255,87,117,.09); }
.btn.small { padding: 6px 8px; font-size: .78rem; border-radius: 10px; }
.file-label { display: inline-flex; align-items: center; }
.workspace { display: grid; grid-template-columns: minmax(260px, 340px) minmax(420px, 1fr) minmax(320px, 390px); gap: 14px; min-height: 0; }
.panel {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--panel);
  box-shadow: var(--shadow);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.library-panel, .preview-panel, .inspector-panel { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.panel-title { display: flex; gap: 10px; align-items: flex-start; }
.panel-title > span {
  flex: 0 0 auto;
  width: 30px; height: 30px; border-radius: 11px;
  display: grid; place-items: center;
  color: #02111d; background: var(--accent);
  font-size: .8rem; font-weight: 950;
}
.panel-title h2 { margin: 0 0 3px; font-size: 1rem; }
.panel-title p { font-size: .82rem; line-height: 1.35; }
.split-title { justify-content: space-between; gap: 14px; }
.title-left { display: flex; gap: 10px; min-width: 0; }
.transport-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.drop-zone {
  display: grid;
  place-items: center;
  text-align: center;
  gap: 4px;
  min-height: 118px;
  border: 1px dashed rgba(101,217,245,.5);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(101,217,245,.1), rgba(167,125,255,.08));
  color: var(--text);
}
.drop-zone.dragover { border-color: var(--good); background: rgba(107,242,164,.1); }
.drop-zone strong { font-size: 1rem; }
.drop-zone small, small.note { color: var(--muted); font-size: .78rem; line-height: 1.35; }
.mini-row, .export-actions, .flag-grid, .transition-presets { display: flex; gap: 7px; align-items: center; }
.wrap { flex-wrap: wrap; }
.clip-list { display: flex; flex-direction: column; gap: 8px; overflow: auto; padding-right: 3px; }
.clip-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.045);
  padding: 10px;
  display: grid;
  gap: 7px;
}
.clip-card.selected { border-color: rgba(101,217,245,.72); background: rgba(101,217,245,.09); }
.clip-card.missing { border-color: rgba(255,211,110,.58); }
.clip-card.gap-card { border-color: rgba(167,125,255,.45); }
.clip-title-row { display: flex; justify-content: space-between; gap: 8px; align-items: start; }
.clip-title-row strong { font-size: .86rem; word-break: break-word; }
.clip-title-row small { color: var(--muted); }
.meta-row { display: flex; gap: 5px; flex-wrap: wrap; }
.pill {
  border: 1px solid var(--line2);
  border-radius: 999px;
  padding: 2px 7px;
  color: var(--muted);
  background: rgba(0,0,0,.18);
  font-size: .7rem;
  font-weight: 750;
}
.pill.good { color: var(--good); border-color: rgba(107,242,164,.42); }
.pill.warn { color: var(--warn); border-color: rgba(255,211,110,.45); }
.pill.danger { color: #ffd5dd; border-color: rgba(255,87,117,.45); }
.preview-panel { min-height: 640px; }
.preview-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line2);
  border-radius: 14px;
  overflow: hidden;
  background: #02040a;
  display: grid;
  place-items: center;
}
#previewCanvas { width: 100%; height: 100%; object-fit: contain; display: block; background: #02040a; }
.preview-badge {
  position: absolute;
  left: 10px; top: 10px;
  padding: 5px 8px;
  border: 1px solid rgba(101,217,245,.34);
  border-radius: 999px;
  background: rgba(0,0,0,.52);
  color: #dff8ff;
  font-size: .75rem;
  font-weight: 800;
}
.timeline-tools { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(200px, 270px) auto; align-items: end; gap: 10px; }
.timeline-head-copy h3 { font-size: .96rem; margin: 0 0 3px; }
.timeline-head-copy small { display: block; color: var(--muted); }
.tool-stack { display: grid; gap: 5px; }
.timeline-stats { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; align-items: center; }
.timeline-stats span {
  border: 1px solid var(--line2);
  border-radius: 999px;
  padding: 4px 8px;
  color: var(--muted);
  background: rgba(255,255,255,.04);
  font-size: .75rem;
  white-space: nowrap;
}
.timeline-shell {
  min-height: 230px;
  display: grid;
  grid-template-rows: 28px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--line2);
  border-radius: 14px;
  background: rgba(0,0,0,.22);
}
.timeline-ruler {
  overflow: hidden;
  white-space: nowrap;
  border-bottom: 1px solid var(--line2);
  background: rgba(255,255,255,.035);
  position: relative;
}
.ruler-track {
  position: relative;
  height: 100%;
  transform: translateX(0);
  will-change: transform;
}
.ruler-tick {
  position: absolute;
  top: 0; bottom: 0;
  border-left: 1px solid rgba(255,255,255,.12);
  padding-left: 4px;
  color: var(--muted);
  font-size: .68rem;
  line-height: 27px;
}
.timeline {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  min-width: 0;
  padding: 10px;
  scrollbar-gutter: stable;
}
.timeline-item {
  position: relative;
  flex: 0 0 auto;
  min-width: 120px;
  max-width: 520px;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 10px 10px 34px;
  background: linear-gradient(150deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
  display: grid;
  align-content: start;
  gap: 7px;
  user-select: none;
}
.timeline-item.selected { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(101,217,245,.28) inset; }
.timeline-item.dragging { opacity: .42; }
.timeline-item.missing { border-color: rgba(255,211,110,.55); }
.timeline-item.gap { background: linear-gradient(150deg, rgba(167,125,255,.13), rgba(101,217,245,.04)); }
.timeline-name { font-weight: 850; font-size: .84rem; line-height: 1.25; word-break: break-word; }
.timeline-meta { color: var(--muted); font-size: .73rem; display: flex; gap: 6px; flex-wrap: wrap; }
.timeline-transition {
  position: absolute;
  left: 8px; right: 8px; bottom: 7px;
  border-radius: 999px;
  padding: 3px 7px;
  background: rgba(0,0,0,.33);
  border: 1px solid rgba(101,217,245,.24);
  color: var(--muted);
  font-size: .68rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.timeline-transition.active { color: #eafcff; border-color: rgba(101,217,245,.52); background: rgba(101,217,245,.1); }
.inspector-panel { overflow-y: auto; }
.settings-group {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px;
  background: rgba(255,255,255,.035);
  display: grid;
  gap: 10px;
}
.settings-group h3, .settings-subgroup h4 { margin: 0; font-size: .94rem; }
.settings-subgroup { border: 1px solid var(--line); border-radius: 14px; padding: 10px; display: grid; gap: 8px; background: rgba(0,0,0,.12); }
.field { display: grid; gap: 6px; color: var(--muted); font-size: .78rem; }
.field span { display: flex; justify-content: space-between; gap: 8px; }
.field input, .field select {
  width: 100%;
  border: 1px solid var(--line2);
  border-radius: 11px;
  padding: 9px 10px;
  background: rgba(2,4,10,.72);
  color: var(--text);
  outline: none;
}
.field input[type="range"] { padding: 0; accent-color: var(--accent); }
.field input[type="color"] { padding: 2px; min-height: 39px; }
.field-grid { display: grid; gap: 8px; }
.field-grid.two { grid-template-columns: 1fr 1fr; }
.check-row { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .82rem; }
.check-row input { accent-color: var(--accent); }
.check-row.tight { justify-content: flex-end; }
.group-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.relink-status, .export-status, .empty-state {
  border: 1px solid var(--line2);
  border-radius: 12px;
  padding: 9px;
  background: rgba(0,0,0,.18);
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.35;
}
.compact-empty { padding: 7px; font-size: .76rem; }
.clip-inspector { display: grid; gap: 10px; }
.trim-strip {
  position: relative;
  height: 24px;
  border: 1px solid var(--line2);
  border-radius: 999px;
  background: rgba(0,0,0,.32);
  overflow: hidden;
}
.trim-range { position: absolute; top: 0; bottom: 0; background: linear-gradient(90deg, rgba(101,217,245,.25), rgba(167,125,255,.25)); }
.trim-handle { position: absolute; z-index: 2; top: 0; bottom: 0; width: 4px; background: var(--accent); }
.flag-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.flag-grid .active, .btn.active { border-color: var(--good); color: var(--good); background: rgba(107,242,164,.09); }
.shortcut-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.shortcut-list span { color: var(--muted); font-size: .78rem; }
.log {
  min-height: 120px;
  max-height: 180px;
  overflow: auto;
  white-space: pre-wrap;
  color: #cfefff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .72rem;
  line-height: 1.4;
}
@media (max-width: 1180px) {
  .workspace { grid-template-columns: 1fr; }
  .preview-panel { min-height: auto; }
}
@media (max-width: 740px) {
  .app-shell { padding: 10px; }
  .topbar, .split-title, .timeline-tools { grid-template-columns: 1fr; flex-direction: column; align-items: stretch; }
  .timeline-tools { display: grid; }
  .field-grid.two, .shortcut-list, .flag-grid { grid-template-columns: 1fr; }
  .top-actions, .transport-actions { justify-content: stretch; }
  .top-actions .btn, .transport-actions .btn { flex: 1; }
}


/* Phase 4 viewport lock: the app fits the window; panels scroll internally, not the page. */
html, body {
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
body { overscroll-behavior: none; }
.app-shell {
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  padding: clamp(8px, 1.1vw, 16px);
}
.topbar {
  min-height: 0;
  max-height: 25dvh;
  overflow: auto;
  scrollbar-width: thin;
}
.workspace {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.panel {
  height: 100%;
  max-height: 100%;
  min-height: 0;
}
.library-panel,
.preview-panel,
.inspector-panel {
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}
.library-panel .clip-list {
  flex: 1 1 auto;
  min-height: 0;
}
.preview-panel { min-height: 0; }
.preview-frame {
  flex: 0 1 auto;
  min-height: 180px;
  max-height: min(50dvh, 560px);
}
.timeline-shell {
  flex: 1 1 180px;
  min-height: 150px;
}
.branding-group { border-color: rgba(101,217,245,.34); background: linear-gradient(150deg, rgba(101,217,245,.075), rgba(167,125,255,.045)); }
.branding-group .file-label { justify-content: center; }
#watermarkStatus { min-height: 36px; }
.timeline-item.intro, .timeline-item.outro {
  background: linear-gradient(150deg, rgba(101,217,245,.15), rgba(167,125,255,.10));
}
.clip-card.intro-card, .clip-card.outro-card { border-color: rgba(101,217,245,.55); }
.panel::-webkit-scrollbar,
.clip-list::-webkit-scrollbar,
.timeline::-webkit-scrollbar,
.topbar::-webkit-scrollbar,
.log::-webkit-scrollbar { width: 9px; height: 9px; }
.panel::-webkit-scrollbar-thumb,
.clip-list::-webkit-scrollbar-thumb,
.timeline::-webkit-scrollbar-thumb,
.topbar::-webkit-scrollbar-thumb,
.log::-webkit-scrollbar-thumb {
  background: rgba(101,217,245,.24);
  border-radius: 999px;
}
@media (max-width: 1180px) {
  .workspace {
    grid-template-columns: minmax(260px, 320px) minmax(420px, 1fr) minmax(300px, 360px);
    overflow-x: auto;
    overflow-y: hidden;
  }
  .workspace > .panel { min-width: 0; }
}
@media (max-width: 740px) {
  .workspace {
    grid-template-columns: 280px 420px 320px;
  }
  .topbar, .split-title, .timeline-tools {
    align-items: stretch;
  }
  .brand-copy p { display: none; }
  .brand-orb { width: 44px; height: 44px; border-radius: 14px; }
}

/* Phase 5/6 timeline overflow: clips scroll horizontally inside the timeline; the page remains locked. */
.timeline-shell {
  overflow: hidden;
}
.timeline {
  max-width: 100%;
}
.timeline .empty-state {
  flex: 1 0 100%;
}

/* Phase 5/6 export reliability */
.export-reliability-group {
  border-color: rgba(101, 217, 245, 0.35);
  background: linear-gradient(180deg, rgba(101, 217, 245, 0.08), rgba(9, 13, 28, 0.72));
}
.preflight-summary {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 12px;
  background: rgba(0,0,0,.28);
  color: var(--muted);
}
.preflight-summary strong { color: var(--text); font-size: .95rem; }
.preflight-summary.good { border-color: rgba(74, 222, 128, .38); box-shadow: inset 0 0 0 1px rgba(74,222,128,.08); }
.preflight-summary.warn { border-color: rgba(250, 204, 21, .42); box-shadow: inset 0 0 0 1px rgba(250,204,21,.08); }
.preflight-summary.danger { border-color: rgba(251, 113, 133, .52); box-shadow: inset 0 0 0 1px rgba(251,113,133,.1); }
.capability-matrix, .estimate-panel, .warning-panel, .failure-guide { margin-top: 10px; }
.cap-row, .mime-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.mime-grid { margin-top: 8px; }
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: .72rem;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(255,255,255,.06);
  color: var(--muted);
}
.status-pill.good { color: #bbf7d0; border-color: rgba(74,222,128,.35); background: rgba(74,222,128,.09); }
.status-pill.danger { color: #fecdd3; border-color: rgba(251,113,133,.42); background: rgba(251,113,133,.1); }
.estimate-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.estimate-card {
  border: 1px solid rgba(255,255,255,.11);
  background: rgba(255,255,255,.05);
  border-radius: 14px;
  padding: 10px;
  min-width: 0;
}
.estimate-card b {
  display: block;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
}
.estimate-card span { display: block; color: var(--text); font-weight: 800; overflow-wrap: anywhere; }
.warning-panel ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.warning-panel li {
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  font-size: .82rem;
}
.warning-panel li.good { color: #bbf7d0; border-color: rgba(74,222,128,.28); }
.warning-panel li.warn { color: #fde68a; border-color: rgba(250,204,21,.34); }
.warning-panel li.danger { color: #fecdd3; border-color: rgba(251,113,133,.38); }
.failure-guide {
  display: grid;
  gap: 4px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(0,0,0,.25);
  border: 1px dashed rgba(101,217,245,.28);
  color: var(--muted);
  font-size: .82rem;
}
.failure-guide strong { color: var(--text); }
.failure-guide span { color: var(--muted); }


/* Phase 6/7 project packaging and relink tools */
.phase6-group {
  border-color: rgba(167, 125, 255, 0.42);
  background: linear-gradient(165deg, rgba(167,125,255,.09), rgba(101,217,245,.045));
}
.phase6-status {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 10px;
  background: rgba(0,0,0,.22);
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.4;
}
.media-fingerprint {
  color: var(--good);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .72rem;
}
.phase6-hint { color: var(--accent); font-size: .76rem; }
.relink-group .mini-row .file-label { justify-content: center; }


/* Phase 7 advanced audio tools */
.phase7-audio-group,
.phase7-clip-audio {
  border-color: rgba(107, 242, 164, 0.38);
  background: linear-gradient(155deg, rgba(107,242,164,.075), rgba(101,217,245,.045));
}
.phase7-status {
  border: 1px solid rgba(107,242,164,.24);
  border-radius: 12px;
  padding: 8px 9px;
  background: rgba(0,0,0,.2);
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.35;
}
.waveform-canvas {
  width: 100%;
  height: 84px;
  display: block;
  border: 1px solid rgba(101,217,245,.28);
  border-radius: 14px;
  background: rgba(2,4,10,.88);
}
.timeline-item .timeline-meta span:last-child {
  max-width: 100%;
}


/* Phase 8 fast-path and strict-CSP layout helpers */
.phase8-fast-group { border-color: rgba(101,217,245,.38); }
.fast-summary, .fast-guidance, .fast-matrix { border: 1px solid rgba(116, 214, 255, .22); border-radius: 14px; background: rgba(5, 9, 22, .72); padding: 12px; }
.fast-summary { display: grid; gap: 4px; margin-bottom: 10px; }
.fast-summary strong { color: #f4fbff; }
.fast-summary span { color: #a9bfdf; font-size: .9rem; }
.fast-summary.good { border-color: rgba(85, 255, 179, .45); }
.fast-summary.warn { border-color: rgba(255, 206, 102, .5); }
.fast-summary.bad { border-color: rgba(255, 103, 139, .5); }
.fast-matrix { display: grid; gap: 8px; margin-bottom: 10px; }
.fast-row { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid rgba(255,255,255,.06); padding-bottom: 6px; }
.fast-row:last-child { border-bottom: 0; padding-bottom: 0; }
.fast-row b { color: #ddecff; }
.fast-row span { color: #9fb6d9; text-align: right; }
.fast-guidance { display: grid; gap: 8px; color: #afc4e6; }
.fast-list { line-height: 1.45; }
.fast-list.good b { color: #62f2b5; }
.fast-list.warn b { color: #ffd166; }
.fast-list.bad b { color: #ff6f91; }
.timeline-ruler { overflow: hidden; }
.ruler-track { display: flex; width: max-content; min-width: 100%; }
.ruler-tick { position: relative; flex: 0 0 auto; }
.ruler-tick::before { left: 0; }
.trim-strip .trim-handle, .trim-strip .trim-range { transition: left .12s ease, right .12s ease; }
.timeline-item.tlw-130{flex-basis:130px;min-width:130px;}
.timeline-item.tlw-140{flex-basis:140px;min-width:140px;}
.timeline-item.tlw-150{flex-basis:150px;min-width:150px;}
.timeline-item.tlw-160{flex-basis:160px;min-width:160px;}
.timeline-item.tlw-170{flex-basis:170px;min-width:170px;}
.timeline-item.tlw-180{flex-basis:180px;min-width:180px;}
.timeline-item.tlw-190{flex-basis:190px;min-width:190px;}
.timeline-item.tlw-200{flex-basis:200px;min-width:200px;}
.timeline-item.tlw-210{flex-basis:210px;min-width:210px;}
.timeline-item.tlw-220{flex-basis:220px;min-width:220px;}
.timeline-item.tlw-230{flex-basis:230px;min-width:230px;}
.timeline-item.tlw-240{flex-basis:240px;min-width:240px;}
.timeline-item.tlw-250{flex-basis:250px;min-width:250px;}
.timeline-item.tlw-260{flex-basis:260px;min-width:260px;}
.timeline-item.tlw-270{flex-basis:270px;min-width:270px;}
.timeline-item.tlw-280{flex-basis:280px;min-width:280px;}
.timeline-item.tlw-290{flex-basis:290px;min-width:290px;}
.timeline-item.tlw-300{flex-basis:300px;min-width:300px;}
.timeline-item.tlw-310{flex-basis:310px;min-width:310px;}
.timeline-item.tlw-320{flex-basis:320px;min-width:320px;}
.timeline-item.tlw-330{flex-basis:330px;min-width:330px;}
.timeline-item.tlw-340{flex-basis:340px;min-width:340px;}
.timeline-item.tlw-350{flex-basis:350px;min-width:350px;}
.timeline-item.tlw-360{flex-basis:360px;min-width:360px;}
.timeline-item.tlw-370{flex-basis:370px;min-width:370px;}
.timeline-item.tlw-380{flex-basis:380px;min-width:380px;}
.timeline-item.tlw-390{flex-basis:390px;min-width:390px;}
.timeline-item.tlw-400{flex-basis:400px;min-width:400px;}
.timeline-item.tlw-410{flex-basis:410px;min-width:410px;}
.timeline-item.tlw-420{flex-basis:420px;min-width:420px;}
.timeline-item.tlw-430{flex-basis:430px;min-width:430px;}
.timeline-item.tlw-440{flex-basis:440px;min-width:440px;}
.timeline-item.tlw-450{flex-basis:450px;min-width:450px;}
.timeline-item.tlw-460{flex-basis:460px;min-width:460px;}
.timeline-item.tlw-470{flex-basis:470px;min-width:470px;}
.timeline-item.tlw-480{flex-basis:480px;min-width:480px;}
.timeline-item.tlw-490{flex-basis:490px;min-width:490px;}
.timeline-item.tlw-500{flex-basis:500px;min-width:500px;}
.timeline-item.tlw-510{flex-basis:510px;min-width:510px;}
.timeline-item.tlw-520{flex-basis:520px;min-width:520px;}
.pct-0{left:0%;}
.right-pct-0{right:0%;}
.pct-1{left:1%;}
.right-pct-1{right:1%;}
.pct-2{left:2%;}
.right-pct-2{right:2%;}
.pct-3{left:3%;}
.right-pct-3{right:3%;}
.pct-4{left:4%;}
.right-pct-4{right:4%;}
.pct-5{left:5%;}
.right-pct-5{right:5%;}
.pct-6{left:6%;}
.right-pct-6{right:6%;}
.pct-7{left:7%;}
.right-pct-7{right:7%;}
.pct-8{left:8%;}
.right-pct-8{right:8%;}
.pct-9{left:9%;}
.right-pct-9{right:9%;}
.pct-10{left:10%;}
.right-pct-10{right:10%;}
.pct-11{left:11%;}
.right-pct-11{right:11%;}
.pct-12{left:12%;}
.right-pct-12{right:12%;}
.pct-13{left:13%;}
.right-pct-13{right:13%;}
.pct-14{left:14%;}
.right-pct-14{right:14%;}
.pct-15{left:15%;}
.right-pct-15{right:15%;}
.pct-16{left:16%;}
.right-pct-16{right:16%;}
.pct-17{left:17%;}
.right-pct-17{right:17%;}
.pct-18{left:18%;}
.right-pct-18{right:18%;}
.pct-19{left:19%;}
.right-pct-19{right:19%;}
.pct-20{left:20%;}
.right-pct-20{right:20%;}
.pct-21{left:21%;}
.right-pct-21{right:21%;}
.pct-22{left:22%;}
.right-pct-22{right:22%;}
.pct-23{left:23%;}
.right-pct-23{right:23%;}
.pct-24{left:24%;}
.right-pct-24{right:24%;}
.pct-25{left:25%;}
.right-pct-25{right:25%;}
.pct-26{left:26%;}
.right-pct-26{right:26%;}
.pct-27{left:27%;}
.right-pct-27{right:27%;}
.pct-28{left:28%;}
.right-pct-28{right:28%;}
.pct-29{left:29%;}
.right-pct-29{right:29%;}
.pct-30{left:30%;}
.right-pct-30{right:30%;}
.pct-31{left:31%;}
.right-pct-31{right:31%;}
.pct-32{left:32%;}
.right-pct-32{right:32%;}
.pct-33{left:33%;}
.right-pct-33{right:33%;}
.pct-34{left:34%;}
.right-pct-34{right:34%;}
.pct-35{left:35%;}
.right-pct-35{right:35%;}
.pct-36{left:36%;}
.right-pct-36{right:36%;}
.pct-37{left:37%;}
.right-pct-37{right:37%;}
.pct-38{left:38%;}
.right-pct-38{right:38%;}
.pct-39{left:39%;}
.right-pct-39{right:39%;}
.pct-40{left:40%;}
.right-pct-40{right:40%;}
.pct-41{left:41%;}
.right-pct-41{right:41%;}
.pct-42{left:42%;}
.right-pct-42{right:42%;}
.pct-43{left:43%;}
.right-pct-43{right:43%;}
.pct-44{left:44%;}
.right-pct-44{right:44%;}
.pct-45{left:45%;}
.right-pct-45{right:45%;}
.pct-46{left:46%;}
.right-pct-46{right:46%;}
.pct-47{left:47%;}
.right-pct-47{right:47%;}
.pct-48{left:48%;}
.right-pct-48{right:48%;}
.pct-49{left:49%;}
.right-pct-49{right:49%;}
.pct-50{left:50%;}
.right-pct-50{right:50%;}
.pct-51{left:51%;}
.right-pct-51{right:51%;}
.pct-52{left:52%;}
.right-pct-52{right:52%;}
.pct-53{left:53%;}
.right-pct-53{right:53%;}
.pct-54{left:54%;}
.right-pct-54{right:54%;}
.pct-55{left:55%;}
.right-pct-55{right:55%;}
.pct-56{left:56%;}
.right-pct-56{right:56%;}
.pct-57{left:57%;}
.right-pct-57{right:57%;}
.pct-58{left:58%;}
.right-pct-58{right:58%;}
.pct-59{left:59%;}
.right-pct-59{right:59%;}
.pct-60{left:60%;}
.right-pct-60{right:60%;}
.pct-61{left:61%;}
.right-pct-61{right:61%;}
.pct-62{left:62%;}
.right-pct-62{right:62%;}
.pct-63{left:63%;}
.right-pct-63{right:63%;}
.pct-64{left:64%;}
.right-pct-64{right:64%;}
.pct-65{left:65%;}
.right-pct-65{right:65%;}
.pct-66{left:66%;}
.right-pct-66{right:66%;}
.pct-67{left:67%;}
.right-pct-67{right:67%;}
.pct-68{left:68%;}
.right-pct-68{right:68%;}
.pct-69{left:69%;}
.right-pct-69{right:69%;}
.pct-70{left:70%;}
.right-pct-70{right:70%;}
.pct-71{left:71%;}
.right-pct-71{right:71%;}
.pct-72{left:72%;}
.right-pct-72{right:72%;}
.pct-73{left:73%;}
.right-pct-73{right:73%;}
.pct-74{left:74%;}
.right-pct-74{right:74%;}
.pct-75{left:75%;}
.right-pct-75{right:75%;}
.pct-76{left:76%;}
.right-pct-76{right:76%;}
.pct-77{left:77%;}
.right-pct-77{right:77%;}
.pct-78{left:78%;}
.right-pct-78{right:78%;}
.pct-79{left:79%;}
.right-pct-79{right:79%;}
.pct-80{left:80%;}
.right-pct-80{right:80%;}
.pct-81{left:81%;}
.right-pct-81{right:81%;}
.pct-82{left:82%;}
.right-pct-82{right:82%;}
.pct-83{left:83%;}
.right-pct-83{right:83%;}
.pct-84{left:84%;}
.right-pct-84{right:84%;}
.pct-85{left:85%;}
.right-pct-85{right:85%;}
.pct-86{left:86%;}
.right-pct-86{right:86%;}
.pct-87{left:87%;}
.right-pct-87{right:87%;}
.pct-88{left:88%;}
.right-pct-88{right:88%;}
.pct-89{left:89%;}
.right-pct-89{right:89%;}
.pct-90{left:90%;}
.right-pct-90{right:90%;}
.pct-91{left:91%;}
.right-pct-91{right:91%;}
.pct-92{left:92%;}
.right-pct-92{right:92%;}
.pct-93{left:93%;}
.right-pct-93{right:93%;}
.pct-94{left:94%;}
.right-pct-94{right:94%;}
.pct-95{left:95%;}
.right-pct-95{right:95%;}
.pct-96{left:96%;}
.right-pct-96{right:96%;}
.pct-97{left:97%;}
.right-pct-97{right:97%;}
.pct-98{left:98%;}
.right-pct-98{right:98%;}
.pct-99{left:99%;}
.right-pct-99{right:99%;}
.pct-100{left:100%;}
.right-pct-100{right:100%;}
.ruler-tick.tw-40{flex-basis:40px;min-width:40px;}
.ruler-tick.tw-60{flex-basis:60px;min-width:60px;}
.ruler-tick.tw-80{flex-basis:80px;min-width:80px;}
.ruler-tick.tw-100{flex-basis:100px;min-width:100px;}
.ruler-tick.tw-120{flex-basis:120px;min-width:120px;}
.ruler-tick.tw-140{flex-basis:140px;min-width:140px;}
.ruler-tick.tw-160{flex-basis:160px;min-width:160px;}
.ruler-tick.tw-180{flex-basis:180px;min-width:180px;}
.ruler-tick.tw-200{flex-basis:200px;min-width:200px;}
.ruler-tick.tw-220{flex-basis:220px;min-width:220px;}
.ruler-tick.tw-240{flex-basis:240px;min-width:240px;}
.ruler-tick.tw-260{flex-basis:260px;min-width:260px;}
.ruler-tick.tw-280{flex-basis:280px;min-width:280px;}
.ruler-tick.tw-300{flex-basis:300px;min-width:300px;}
.ruler-tick.tw-320{flex-basis:320px;min-width:320px;}
.ruler-tick.tw-340{flex-basis:340px;min-width:340px;}
.ruler-tick.tw-360{flex-basis:360px;min-width:360px;}
.ruler-tick.tw-380{flex-basis:380px;min-width:380px;}
.ruler-tick.tw-400{flex-basis:400px;min-width:400px;}
.ruler-tick.tw-420{flex-basis:420px;min-width:420px;}
.ruler-tick.tw-440{flex-basis:440px;min-width:440px;}
.ruler-tick.tw-460{flex-basis:460px;min-width:460px;}
.ruler-tick.tw-480{flex-basis:480px;min-width:480px;}
.ruler-tick.tw-500{flex-basis:500px;min-width:500px;}
.ruler-tick.tw-520{flex-basis:520px;min-width:520px;}
.ruler-tick.tw-540{flex-basis:540px;min-width:540px;}
.ruler-tick.tw-560{flex-basis:560px;min-width:560px;}
.ruler-tick.tw-580{flex-basis:580px;min-width:580px;}
.ruler-tick.tw-600{flex-basis:600px;min-width:600px;}
.ruler-tick.tw-620{flex-basis:620px;min-width:620px;}
.ruler-tick.tw-640{flex-basis:640px;min-width:640px;}
.ruler-tick.tw-660{flex-basis:660px;min-width:660px;}
.ruler-tick.tw-680{flex-basis:680px;min-width:680px;}
.ruler-tick.tw-700{flex-basis:700px;min-width:700px;}
.ruler-tick.tw-720{flex-basis:720px;min-width:720px;}

/* Phase 8.1 split FFmpeg export controls */
.split-export-actions {
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.split-ffmpeg-status.good {
  border-color: rgba(70, 255, 167, .45);
  color: #a9ffd5;
}
.split-ffmpeg-status.warn {
  border-color: rgba(255, 210, 103, .45);
  color: #ffe19d;
}
.split-ffmpeg-status.danger {
  border-color: rgba(255, 105, 136, .55);
  color: #ffb3c1;
}
.phase8-fast-group code {
  color: #bff5ff;
  background: rgba(101, 217, 245, .08);
  border: 1px solid rgba(101, 217, 245, .18);
  border-radius: 6px;
  padding: 1px 5px;
}


/* Phase 8.4 visible Fast 5.1 export controls */
.fast51-top, .fast51-main {
  box-shadow: 0 0 0 1px rgba(107,242,164,.26), 0 0 22px rgba(107,242,164,.16);
}
.fast51-main {
  min-width: 150px;
}
.fast51-callout {
  border: 1px solid rgba(107,242,164,.38);
  background: linear-gradient(135deg, rgba(107,242,164,.10), rgba(101,217,245,.07));
  border-radius: 14px;
  padding: 10px 12px;
  margin: 8px 0 10px;
  display: grid;
  gap: 4px;
}
.fast51-callout strong { color: #b8ffd9; }
.fast51-callout span { color: var(--muted); font-size: .84rem; line-height: 1.35; }
@media (max-width: 760px) {
  .fast51-top { order: 4; flex: 1 1 100%; }
  .fast51-main { flex: 1 1 100%; }
}


/* UI Phase 1 of 10 - Orev MP4 Compilation Studio brand install
   Scope: visual trade dress, corrected title language, and transparent brand asset placement.
   Export/timeline/FFmpeg behavior remains on the Phase 8.4 functional baseline. */
:root {
  --bg: #020305;
  --bg2: #07111a;
  --panel: rgba(8, 12, 22, 0.94);
  --panel2: rgba(13, 19, 32, 0.92);
  --line: rgba(225, 180, 92, 0.22);
  --line2: rgba(73, 198, 255, 0.28);
  --text: #f7efe2;
  --muted: #b7a991;
  --accent: #50d6ff;
  --accent2: #ff8a20;
  --orev-gold: #f3c66e;
  --orev-gold2: #b6762f;
  --orev-fire: #ff5b1f;
  --orev-fire2: #b31210;
  --orev-ice: #54d7ff;
  --orev-blue: #1678ff;
  --orev-raven: #05070d;
  --shadow: 0 20px 70px rgba(0, 0, 0, .56);
}
body.orev-mp4-ui-phase1 {
  background:
    radial-gradient(circle at 7% 17%, rgba(255, 86, 31, .20), transparent 27%),
    radial-gradient(circle at 88% 15%, rgba(35, 144, 255, .22), transparent 29%),
    radial-gradient(circle at 52% -8%, rgba(243, 198, 110, .16), transparent 24%),
    linear-gradient(135deg, #020305 0%, #070b12 45%, #02040a 100%);
}
body.orev-mp4-ui-phase1::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(243,198,110,.045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(80,214,255,.035) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(circle at center, black, transparent 78%);
  opacity: .72;
}
body.orev-mp4-ui-phase1 .topbar {
  min-height: 94px;
  max-height: 148px;
  overflow: visible;
  border-color: rgba(243, 198, 110, .30);
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(255,91,31,.13), transparent 32%),
    linear-gradient(270deg, rgba(80,214,255,.12), transparent 35%),
    linear-gradient(145deg, rgba(7, 10, 18, .97), rgba(10, 16, 29, .90));
  box-shadow: 0 16px 52px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.035);
}
body.orev-mp4-ui-phase1 .orev-brand-block {
  min-width: min(52vw, 620px);
  gap: 14px;
}
body.orev-mp4-ui-phase1 .brand-logo-link {
  flex: 0 0 auto;
  width: clamp(142px, 18vw, 260px);
  max-height: 108px;
  display: grid;
  place-items: center;
  padding: 3px 0;
  text-decoration: none;
  filter: drop-shadow(0 0 18px rgba(80,214,255,.16)) drop-shadow(0 0 20px rgba(255,91,31,.12));
}
body.orev-mp4-ui-phase1 .brand-logo {
  display: block;
  width: 100%;
  max-height: 108px;
  object-fit: contain;
}
body.orev-mp4-ui-phase1 .brand-copy h1 {
  color: #fff3d6;
  letter-spacing: -.045em;
  text-shadow: 0 0 18px rgba(243,198,110,.18), 0 0 26px rgba(80,214,255,.10);
}
body.orev-mp4-ui-phase1 .brand-copy p {
  color: #d3c4aa;
  max-width: 790px;
}
body.orev-mp4-ui-phase1 .panel,
body.orev-mp4-ui-phase1 .settings-group,
body.orev-mp4-ui-phase1 .timeline-shell,
body.orev-mp4-ui-phase1 .preview-frame {
  border-color: rgba(243,198,110,.18);
  background:
    linear-gradient(150deg, rgba(255,91,31,.045), transparent 32%),
    linear-gradient(320deg, rgba(80,214,255,.055), transparent 38%),
    rgba(8, 12, 22, .92);
}
body.orev-mp4-ui-phase1 .preview-frame,
body.orev-mp4-ui-phase1 #previewCanvas {
  background: #020305;
}
body.orev-mp4-ui-phase1 .panel-title > span {
  color: #081018;
  background: linear-gradient(135deg, var(--orev-gold), var(--orev-fire) 58%, var(--orev-ice));
  box-shadow: 0 0 18px rgba(255,138,32,.20);
}
body.orev-mp4-ui-phase1 .drop-zone {
  border-color: rgba(80,214,255,.44);
  background: linear-gradient(135deg, rgba(255,91,31,.10), rgba(80,214,255,.07));
}
body.orev-mp4-ui-phase1 .btn.primary {
  color: #061018;
  background: linear-gradient(135deg, var(--orev-gold), var(--orev-fire) 52%, var(--orev-ice));
  border-color: transparent;
  box-shadow: 0 0 18px rgba(255,138,32,.14);
}
body.orev-mp4-ui-phase1 .btn:hover {
  border-color: rgba(243,198,110,.48);
  background: rgba(255,255,255,.075);
}
body.orev-mp4-ui-phase1 .btn.primary:hover {
  filter: brightness(1.05);
}
body.orev-mp4-ui-phase1 .clip-card.selected,
body.orev-mp4-ui-phase1 .timeline-item.selected {
  border-color: rgba(80,214,255,.72);
  box-shadow: 0 0 0 1px rgba(80,214,255,.18) inset, 0 0 22px rgba(80,214,255,.10);
}
body.orev-mp4-ui-phase1 .preview-badge,
body.orev-mp4-ui-phase1 .pill,
body.orev-mp4-ui-phase1 .timeline-stats span {
  border-color: rgba(243,198,110,.24);
  background: rgba(2,3,5,.48);
}
body.orev-mp4-ui-phase1 .panel::-webkit-scrollbar-thumb,
body.orev-mp4-ui-phase1 .clip-list::-webkit-scrollbar-thumb,
body.orev-mp4-ui-phase1 .timeline::-webkit-scrollbar-thumb,
body.orev-mp4-ui-phase1 .topbar::-webkit-scrollbar-thumb,
body.orev-mp4-ui-phase1 .log::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(243,198,110,.38), rgba(80,214,255,.28));
}
@media (max-width: 960px) {
  body.orev-mp4-ui-phase1 .topbar { min-height: 86px; }
  body.orev-mp4-ui-phase1 .orev-brand-block { min-width: 420px; }
  body.orev-mp4-ui-phase1 .brand-logo-link { width: 158px; }
}
@media (max-width: 740px) {
  body.orev-mp4-ui-phase1 .topbar { max-height: none; }
  body.orev-mp4-ui-phase1 .orev-brand-block { min-width: 280px; }
  body.orev-mp4-ui-phase1 .brand-logo-link { width: 138px; }
  body.orev-mp4-ui-phase1 .brand-copy h1 { font-size: 1rem; }
}

/* UI Phase 2 of 10 - Full Chrome + Topbar Overhaul
   Scope: masthead shell, grouped command deck, status chips, mobile header behavior.
   Functional IDs and export/timeline logic remain unchanged from the Phase 8.4 baseline. */
body.orev-mp4-ui-phase2 .orev-chrome-header {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(460px, 1.22fr) minmax(360px, .78fr);
  align-items: stretch;
  gap: 12px;
  min-height: 118px;
  max-height: min(22dvh, 172px);
  padding: 11px;
  overflow: auto;
  border-radius: 22px;
  border-color: rgba(243, 198, 110, .38);
  background:
    linear-gradient(90deg, rgba(255, 91, 31, .18), transparent 33%),
    linear-gradient(270deg, rgba(80, 214, 255, .16), transparent 35%),
    radial-gradient(circle at 50% -24%, rgba(243,198,110,.18), transparent 34%),
    linear-gradient(145deg, rgba(2,3,5,.98), rgba(9,14,25,.96));
  box-shadow:
    0 18px 62px rgba(0,0,0,.62),
    inset 0 0 0 1px rgba(255,255,255,.045),
    inset 0 -1px 0 rgba(80,214,255,.12);
}
body.orev-mp4-ui-phase2 .orev-chrome-header::before,
body.orev-mp4-ui-phase2 .orev-chrome-header::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
  opacity: .82;
}
body.orev-mp4-ui-phase2 .orev-chrome-header::before {
  inset: 7px;
  border-radius: 18px;
  border: 1px solid rgba(243,198,110,.13);
  background:
    linear-gradient(90deg, rgba(255,91,31,.10), transparent 31%, transparent 67%, rgba(80,214,255,.10)),
    linear-gradient(180deg, rgba(255,255,255,.035), transparent 42%);
}
body.orev-mp4-ui-phase2 .orev-chrome-header::after {
  left: 18px;
  right: 18px;
  bottom: 7px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,91,31,.0), rgba(255,91,31,.75), rgba(243,198,110,.78), rgba(80,214,255,.82), rgba(80,214,255,0));
  filter: drop-shadow(0 0 8px rgba(80,214,255,.28));
}
body.orev-mp4-ui-phase2 .chrome-main-row {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 12px;
  border: 1px solid rgba(243,198,110,.18);
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(255,91,31,.075), transparent 45%),
    linear-gradient(270deg, rgba(80,214,255,.075), transparent 52%),
    rgba(0,0,0,.18);
}
body.orev-mp4-ui-phase2 .chrome-brand {
  min-width: 0;
  flex: 1 1 auto;
  gap: 16px;
}
body.orev-mp4-ui-phase2 .brand-logo-link {
  width: clamp(154px, 16.8vw, 246px);
  max-height: 104px;
  padding: 0;
  border-radius: 16px;
  background:
    radial-gradient(circle at 22% 52%, rgba(255,91,31,.10), transparent 42%),
    radial-gradient(circle at 79% 54%, rgba(80,214,255,.12), transparent 44%);
}
body.orev-mp4-ui-phase2 .brand-logo {
  max-height: 104px;
  filter:
    drop-shadow(0 0 14px rgba(243,198,110,.16))
    drop-shadow(0 0 22px rgba(80,214,255,.12));
}
body.orev-mp4-ui-phase2 .brand-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}
body.orev-mp4-ui-phase2 .phase-eyebrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  color: #b9dfff;
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}
body.orev-mp4-ui-phase2 .phase-chip {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(243,198,110,.36);
  color: #160d04;
  background: linear-gradient(135deg, #f9d987, #ff8a20 58%, #6edfff);
  box-shadow: 0 0 15px rgba(255,138,32,.16);
}
body.orev-mp4-ui-phase2 .brand-copy h1 {
  font-size: clamp(1.12rem, 2.15vw, 1.72rem);
  line-height: 1.04;
  margin-bottom: 0;
}
body.orev-mp4-ui-phase2 .brand-copy p {
  color: #d8c6a6;
  line-height: 1.32;
  max-width: 780px;
}
body.orev-mp4-ui-phase2 .chrome-status-strip {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  min-width: 118px;
  align-self: stretch;
  align-content: center;
}
body.orev-mp4-ui-phase2 .status-node {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 25px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(0,0,0,.24);
  color: #f7efe2;
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
body.orev-mp4-ui-phase2 .status-node.fire { border-color: rgba(255,91,31,.40); color: #ffd2a5; }
body.orev-mp4-ui-phase2 .status-node.gold { border-color: rgba(243,198,110,.44); color: #ffedbc; }
body.orev-mp4-ui-phase2 .status-node.ice { border-color: rgba(80,214,255,.46); color: #c8f4ff; }
body.orev-mp4-ui-phase2 .chrome-action-deck {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  gap: 9px;
  padding: 9px;
  border: 1px solid rgba(80,214,255,.20);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(7,10,18,.80), rgba(0,0,0,.16)),
    radial-gradient(circle at 100% 0%, rgba(80,214,255,.14), transparent 42%);
}
body.orev-mp4-ui-phase2 .action-group {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 7px;
  padding: 7px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 15px;
  background: rgba(255,255,255,.035);
}
body.orev-mp4-ui-phase2 .action-group-label {
  flex: 0 0 auto;
  color: #c0a46d;
  font-size: .68rem;
  font-weight: 950;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-right: auto;
  padding: 0 5px;
}
body.orev-mp4-ui-phase2 .project-actions {
  border-color: rgba(243,198,110,.18);
}
body.orev-mp4-ui-phase2 .export-actions-top {
  border-color: rgba(80,214,255,.24);
  background: linear-gradient(90deg, rgba(255,91,31,.05), rgba(80,214,255,.06));
}
body.orev-mp4-ui-phase2 .chrome-action-deck .btn {
  min-height: 34px;
  padding: 8px 10px;
  border-radius: 11px;
}
body.orev-mp4-ui-phase2 .chrome-action-deck .btn.primary {
  box-shadow:
    0 0 0 1px rgba(0,0,0,.18),
    0 0 20px rgba(80,214,255,.12),
    0 0 18px rgba(255,91,31,.10);
}
body.orev-mp4-ui-phase2 .fast51-top {
  min-width: 126px;
}
body.orev-mp4-ui-phase2 .workspace {
  gap: 13px;
}
body.orev-mp4-ui-phase2 .panel {
  border-radius: 22px;
}
body.orev-mp4-ui-phase2 .panel-title h2 {
  letter-spacing: -.015em;
}
body.orev-mp4-ui-phase2 .panel-title > span {
  border: 1px solid rgba(255,255,255,.24);
}
body.orev-mp4-ui-phase2 .btn:focus-visible,
body.orev-mp4-ui-phase2 input:focus-visible,
body.orev-mp4-ui-phase2 select:focus-visible,
body.orev-mp4-ui-phase2 .brand-logo-link:focus-visible,
body.orev-mp4-ui-phase2 .file-label:focus-visible {
  outline: 2px solid rgba(80,214,255,.80);
  outline-offset: 2px;
}
@media (max-width: 1280px) {
  body.orev-mp4-ui-phase2 .orev-chrome-header {
    grid-template-columns: minmax(420px, 1fr) minmax(320px, .72fr);
  }
  body.orev-mp4-ui-phase2 .chrome-status-strip {
    display: none;
  }
}
@media (max-width: 1040px) {
  body.orev-mp4-ui-phase2 .orev-chrome-header {
    grid-template-columns: 1fr;
    max-height: min(34dvh, 260px);
  }
  body.orev-mp4-ui-phase2 .chrome-action-deck {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body.orev-mp4-ui-phase2 .action-group {
    justify-content: stretch;
  }
  body.orev-mp4-ui-phase2 .action-group .btn,
  body.orev-mp4-ui-phase2 .action-group .file-label {
    flex: 1 1 auto;
    justify-content: center;
  }
}
@media (max-width: 740px) {
  body.orev-mp4-ui-phase2 .orev-chrome-header {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 0;
    max-height: 42dvh;
    padding: 9px;
    gap: 8px;
  }
  body.orev-mp4-ui-phase2 .chrome-main-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 9px;
  }
  body.orev-mp4-ui-phase2 .chrome-brand {
    display: grid;
    grid-template-columns: 138px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-width: 0;
  }
  body.orev-mp4-ui-phase2 .brand-logo-link {
    width: 138px;
  }
  body.orev-mp4-ui-phase2 .brand-copy p {
    display: block;
    font-size: .76rem;
    line-height: 1.25;
  }
  body.orev-mp4-ui-phase2 .phase-eyebrow {
    font-size: .61rem;
    letter-spacing: .08em;
  }
  body.orev-mp4-ui-phase2 .chrome-action-deck {
    grid-template-columns: 1fr;
  }
  body.orev-mp4-ui-phase2 .action-group-label {
    flex-basis: 100%;
    width: 100%;
    margin-right: 0;
  }
  body.orev-mp4-ui-phase2 .action-group .btn,
  body.orev-mp4-ui-phase2 .action-group .file-label {
    flex: 1 1 calc(50% - 7px);
  }
}
@media (max-width: 520px) {
  body.orev-mp4-ui-phase2 .chrome-brand {
    grid-template-columns: 1fr;
  }
  body.orev-mp4-ui-phase2 .brand-logo-link {
    width: min(210px, 86vw);
    justify-self: start;
  }
  body.orev-mp4-ui-phase2 .action-group .btn,
  body.orev-mp4-ui-phase2 .action-group .file-label {
    flex-basis: 100%;
  }
}


/* UI Phase 3 of 10 - Panel Hierarchy + Workspace Rebalance
   Scope: Library / Preview / Inspector layout hierarchy, overview rail, panel headers,
   scroll rhythm, and Orev fire/gold/ice scan pattern. Existing functional IDs remain intact. */
body.orev-mp4-ui-phase3 .app-shell {
  gap: 12px;
}
body.orev-mp4-ui-phase3 .workspace {
  display: grid;
  grid-template-columns: minmax(270px, .72fr) minmax(520px, 1.55fr) minmax(360px, .88fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "overview overview overview"
    "library preview inspector";
  gap: 12px;
  align-items: stretch;
  min-height: 0;
}
body.orev-mp4-ui-phase3 .workspace-overview { grid-area: overview; }
body.orev-mp4-ui-phase3 .library-panel { grid-area: library; }
body.orev-mp4-ui-phase3 .preview-panel { grid-area: preview; }
body.orev-mp4-ui-phase3 .inspector-panel { grid-area: inspector; }
body.orev-mp4-ui-phase3 .workspace-overview {
  height: auto;
  max-height: none;
  min-height: 0;
  overflow: visible;
  display: grid;
  grid-template-columns: minmax(250px, .82fr) minmax(0, 2fr);
  gap: 12px;
  padding: 10px;
  border-color: rgba(243,198,110,.30);
  background:
    linear-gradient(90deg, rgba(255,91,31,.10), transparent 34%),
    linear-gradient(270deg, rgba(80,214,255,.10), transparent 38%),
    rgba(4,6,11,.84);
  box-shadow: 0 14px 42px rgba(0,0,0,.46), inset 0 0 0 1px rgba(255,255,255,.03);
}
body.orev-mp4-ui-phase3 .overview-ledger {
  min-width: 0;
  display: grid;
  gap: 5px;
  align-content: center;
  padding: 4px 6px;
}
body.orev-mp4-ui-phase3 .overview-brand-chip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
body.orev-mp4-ui-phase3 .overview-brand-chip span {
  display: inline-flex;
  align-items: center;
  min-height: 23px;
  padding: 3px 9px;
  border-radius: 999px;
  color: #120903;
  font-size: .68rem;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--orev-gold), var(--orev-fire), var(--orev-ice));
  box-shadow: 0 0 16px rgba(255,138,32,.18);
}
body.orev-mp4-ui-phase3 .overview-brand-chip strong {
  color: #fff0c6;
  font-size: .9rem;
  letter-spacing: -.01em;
}
body.orev-mp4-ui-phase3 .overview-ledger p {
  color: #d6c5a7;
  font-size: .78rem;
  line-height: 1.35;
}
body.orev-mp4-ui-phase3 .overview-map {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
body.orev-mp4-ui-phase3 .overview-card {
  position: relative;
  overflow: hidden;
  min-width: 0;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 15px;
  padding: 10px 11px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.025)),
    rgba(0,0,0,.22);
}
body.orev-mp4-ui-phase3 .overview-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  opacity: .9;
}
body.orev-mp4-ui-phase3 .overview-card b {
  display: block;
  color: #fff5dd;
  font-size: .78rem;
  margin-bottom: 4px;
}
body.orev-mp4-ui-phase3 .overview-card span {
  display: block;
  color: #bfae90;
  font-size: .72rem;
  line-height: 1.3;
}
body.orev-mp4-ui-phase3 .overview-card.fire-line::before { background: linear-gradient(180deg, var(--orev-fire), var(--orev-fire2)); }
body.orev-mp4-ui-phase3 .overview-card.gold-line::before { background: linear-gradient(180deg, var(--orev-gold), var(--orev-gold2)); }
body.orev-mp4-ui-phase3 .overview-card.ice-line::before { background: linear-gradient(180deg, var(--orev-ice), var(--orev-blue)); }
body.orev-mp4-ui-phase3 .overview-card.raven-line::before { background: linear-gradient(180deg, #7e8ba3, #101826); }
body.orev-mp4-ui-phase3 .library-panel,
body.orev-mp4-ui-phase3 .preview-panel,
body.orev-mp4-ui-phase3 .inspector-panel {
  padding: 13px;
  gap: 11px;
  border-radius: 24px;
}
body.orev-mp4-ui-phase3 .library-panel {
  border-color: rgba(255,91,31,.26);
  background:
    linear-gradient(180deg, rgba(255,91,31,.075), transparent 34%),
    linear-gradient(315deg, rgba(243,198,110,.045), transparent 48%),
    rgba(8,12,22,.93);
}
body.orev-mp4-ui-phase3 .preview-panel {
  border-color: rgba(243,198,110,.32);
  background:
    radial-gradient(circle at 50% 0%, rgba(243,198,110,.105), transparent 24%),
    linear-gradient(90deg, rgba(255,91,31,.055), transparent 28%, rgba(80,214,255,.055)),
    rgba(8,12,22,.94);
}
body.orev-mp4-ui-phase3 .inspector-panel {
  border-color: rgba(80,214,255,.28);
  background:
    linear-gradient(180deg, rgba(80,214,255,.075), transparent 30%),
    linear-gradient(45deg, rgba(243,198,110,.038), transparent 54%),
    rgba(8,12,22,.93);
}
body.orev-mp4-ui-phase3 .panel-title {
  position: sticky;
  top: -13px;
  z-index: 8;
  padding: 13px 0 10px;
  margin-top: -13px;
  border-bottom: 1px solid rgba(243,198,110,.16);
  background:
    linear-gradient(180deg, rgba(7,10,18,.96), rgba(7,10,18,.88) 78%, rgba(7,10,18,0));
  backdrop-filter: blur(12px);
}
body.orev-mp4-ui-phase3 .preview-panel .panel-title,
body.orev-mp4-ui-phase3 .library-panel .panel-title {
  top: -13px;
}
body.orev-mp4-ui-phase3 .panel-title > span {
  width: 34px;
  height: 34px;
  border-radius: 13px;
  font-size: .78rem;
}
body.orev-mp4-ui-phase3 .panel-title h2 {
  color: #fff1cf;
  font-size: 1.04rem;
}
body.orev-mp4-ui-phase3 .panel-title p {
  color: #cdbb9d;
}
body.orev-mp4-ui-phase3 .phase3-panel-kicker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 40px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: 8px 10px;
  background: rgba(0,0,0,.22);
}
body.orev-mp4-ui-phase3 .phase3-panel-kicker strong {
  color: #fff0c6;
  font-size: .72rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  white-space: nowrap;
}
body.orev-mp4-ui-phase3 .phase3-panel-kicker span {
  color: #bfae90;
  font-size: .75rem;
  line-height: 1.3;
  text-align: right;
}
body.orev-mp4-ui-phase3 .phase3-panel-kicker.fire-kicker { border-color: rgba(255,91,31,.28); }
body.orev-mp4-ui-phase3 .phase3-panel-kicker.gold-kicker { border-color: rgba(243,198,110,.28); }
body.orev-mp4-ui-phase3 .phase3-panel-kicker.ice-kicker { border-color: rgba(80,214,255,.28); }
body.orev-mp4-ui-phase3 .drop-zone {
  min-height: 104px;
  align-content: center;
}
body.orev-mp4-ui-phase3 .clip-list {
  gap: 9px;
}
body.orev-mp4-ui-phase3 .clip-card {
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(255,91,31,.040), rgba(80,214,255,.035)),
    rgba(255,255,255,.035);
}
body.orev-mp4-ui-phase3 .preview-frame {
  border-radius: 18px;
  border-color: rgba(243,198,110,.30);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.03),
    0 0 34px rgba(0,0,0,.34),
    0 0 26px rgba(80,214,255,.055);
}
body.orev-mp4-ui-phase3 .preview-frame::before {
  content: "";
  position: absolute;
  inset: 8px;
  pointer-events: none;
  border-radius: 12px;
  border: 1px solid rgba(243,198,110,.11);
  box-shadow: inset 0 0 22px rgba(0,0,0,.50);
  z-index: 2;
}
body.orev-mp4-ui-phase3 .preview-badge {
  z-index: 3;
}
body.orev-mp4-ui-phase3 .timeline-tools {
  border: 1px solid rgba(243,198,110,.16);
  border-radius: 16px;
  padding: 9px;
  background: rgba(0,0,0,.18);
}
body.orev-mp4-ui-phase3 .timeline-shell {
  border-radius: 18px;
  border-color: rgba(243,198,110,.24);
}
body.orev-mp4-ui-phase3 .settings-group {
  border-radius: 18px;
  border-color: rgba(80,214,255,.18);
  background:
    linear-gradient(155deg, rgba(80,214,255,.038), rgba(255,91,31,.025)),
    rgba(255,255,255,.030);
}
body.orev-mp4-ui-phase3 .settings-group > h3,
body.orev-mp4-ui-phase3 .settings-group .group-head h3 {
  color: #fff0c6;
  letter-spacing: -.005em;
}
body.orev-mp4-ui-phase3 .settings-group:nth-of-type(4n+1) { border-color: rgba(243,198,110,.20); }
body.orev-mp4-ui-phase3 .settings-group:nth-of-type(4n+2) { border-color: rgba(255,91,31,.20); }
body.orev-mp4-ui-phase3 .settings-group:nth-of-type(4n+3) { border-color: rgba(80,214,255,.20); }
body.orev-mp4-ui-phase3 .export-reliability-group,
body.orev-mp4-ui-phase3 .phase8-fast-group,
body.orev-mp4-ui-phase3 .phase6-group,
body.orev-mp4-ui-phase3 .phase7-audio-group,
body.orev-mp4-ui-phase3 .branding-group {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
}
body.orev-mp4-ui-phase3 .export-reliability-group,
body.orev-mp4-ui-phase3 .phase8-fast-group {
  border-color: rgba(80,214,255,.34);
}
body.orev-mp4-ui-phase3 .branding-group {
  border-color: rgba(243,198,110,.32);
}
body.orev-mp4-ui-phase3 .phase7-audio-group,
body.orev-mp4-ui-phase3 .phase6-group {
  border-color: rgba(107,242,164,.25);
}
body.orev-mp4-ui-phase3 .field input,
body.orev-mp4-ui-phase3 .field select,
body.orev-mp4-ui-phase3 .relink-status,
body.orev-mp4-ui-phase3 .export-status,
body.orev-mp4-ui-phase3 .empty-state {
  border-radius: 13px;
}
@media (max-width: 1300px) {
  body.orev-mp4-ui-phase3 .workspace {
    grid-template-columns: minmax(260px, 310px) minmax(500px, 1fr) minmax(340px, 390px);
    overflow-x: auto;
    overflow-y: hidden;
  }
  body.orev-mp4-ui-phase3 .workspace-overview {
    min-width: 1110px;
  }
}
@media (max-width: 1040px) {
  body.orev-mp4-ui-phase3 .workspace-overview {
    grid-template-columns: 1fr;
  }
  body.orev-mp4-ui-phase3 .overview-map {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 740px) {
  body.orev-mp4-ui-phase3 .workspace {
    grid-template-columns: 280px 430px 330px;
    grid-template-areas:
      "overview overview overview"
      "library preview inspector";
  }
  body.orev-mp4-ui-phase3 .workspace-overview {
    min-width: 1040px;
  }
  body.orev-mp4-ui-phase3 .phase3-panel-kicker {
    align-items: flex-start;
    flex-direction: column;
  }
  body.orev-mp4-ui-phase3 .phase3-panel-kicker span {
    text-align: left;
  }
}


/* UI Phase 4 of 10 - Preview Stage Skin
   Scope: central preview canvas shell only. All renderer IDs remain untouched:
   previewCanvas, previewVideoA, previewVideoB, and previewBadge stay in place. */
body.orev-mp4-ui-phase4 .preview-panel {
  border-color: rgba(243,198,110,.40);
  background:
    radial-gradient(circle at 50% 6%, rgba(243,198,110,.16), transparent 23%),
    radial-gradient(circle at 0% 38%, rgba(255,91,31,.12), transparent 32%),
    radial-gradient(circle at 100% 40%, rgba(80,214,255,.13), transparent 31%),
    linear-gradient(180deg, rgba(255,255,255,.035), transparent 32%),
    rgba(7,10,18,.95);
  box-shadow:
    0 22px 70px rgba(0,0,0,.56),
    inset 0 0 0 1px rgba(255,255,255,.035),
    inset 0 0 46px rgba(243,198,110,.035);
}
body.orev-mp4-ui-phase4 .phase4-stage-kicker {
  border-color: rgba(243,198,110,.34);
  background:
    linear-gradient(90deg, rgba(255,91,31,.12), transparent 42%, rgba(80,214,255,.12)),
    rgba(0,0,0,.25);
}
body.orev-mp4-ui-phase4 .orev-stage-shell {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 9px;
  padding: 12px 12px 10px;
  border: 1px solid rgba(243,198,110,.30);
  border-radius: 26px;
  background:
    radial-gradient(circle at 50% 0%, rgba(84,215,255,.12), transparent 18%),
    linear-gradient(90deg, rgba(255,91,31,.14), transparent 22%, transparent 78%, rgba(80,214,255,.16)),
    linear-gradient(180deg, rgba(243,198,110,.10), rgba(0,0,0,.18) 44%, rgba(0,0,0,.30)),
    rgba(2,3,5,.78);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.035),
    inset 0 0 34px rgba(0,0,0,.58),
    0 0 32px rgba(243,198,110,.08),
    0 0 44px rgba(80,214,255,.06);
}
body.orev-mp4-ui-phase4 .orev-stage-shell::before,
body.orev-mp4-ui-phase4 .orev-stage-shell::after {
  content: "";
  position: absolute;
  top: 58px;
  bottom: 44px;
  width: 2px;
  border-radius: 999px;
  pointer-events: none;
  opacity: .72;
  filter: blur(.1px);
}
body.orev-mp4-ui-phase4 .orev-stage-shell::before {
  left: 7px;
  background: linear-gradient(180deg, transparent, rgba(255,91,31,.90), rgba(243,198,110,.54), transparent);
  box-shadow: 0 0 18px rgba(255,91,31,.38);
}
body.orev-mp4-ui-phase4 .orev-stage-shell::after {
  right: 7px;
  background: linear-gradient(180deg, transparent, rgba(80,214,255,.92), rgba(22,120,255,.58), transparent);
  box-shadow: 0 0 20px rgba(80,214,255,.40);
}
body.orev-mp4-ui-phase4 .orev-stage-crown {
  min-height: 32px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 1px 9px 0;
}
body.orev-mp4-ui-phase4 .orev-stage-crown::before,
body.orev-mp4-ui-phase4 .orev-stage-crown::after {
  content: "";
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(243,198,110,.62), transparent);
  box-shadow: 0 0 13px rgba(243,198,110,.22);
}
body.orev-mp4-ui-phase4 .stage-sigil {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 3px 9px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 999px;
  color: #ead9b8;
  font-size: .63rem;
  font-weight: 950;
  letter-spacing: .15em;
  text-transform: uppercase;
  background: rgba(0,0,0,.28);
  white-space: nowrap;
}
body.orev-mp4-ui-phase4 .stage-sigil-fire {
  justify-self: start;
  border-color: rgba(255,91,31,.33);
  box-shadow: inset 0 0 18px rgba(255,91,31,.07);
}
body.orev-mp4-ui-phase4 .stage-sigil-ice {
  justify-self: end;
  border-color: rgba(80,214,255,.34);
  box-shadow: inset 0 0 18px rgba(80,214,255,.07);
}
body.orev-mp4-ui-phase4 .stage-crown-gem {
  width: 28px;
  height: 28px;
  display: block;
  transform: rotate(45deg);
  border: 1px solid rgba(243,198,110,.82);
  border-radius: 7px;
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,.92), transparent 17%),
    linear-gradient(135deg, #98f1ff 0%, #1678ff 50%, #05216b 100%);
  box-shadow:
    0 0 0 4px rgba(0,0,0,.38),
    0 0 20px rgba(80,214,255,.38),
    0 0 18px rgba(243,198,110,.22);
}
body.orev-mp4-ui-phase4 .preview-frame.orev-stage-frame {
  position: relative;
  border-radius: 24px;
  border: 1px solid rgba(243,198,110,.44);
  background:
    radial-gradient(circle at 30% 22%, rgba(255,91,31,.11), transparent 25%),
    radial-gradient(circle at 78% 24%, rgba(80,214,255,.13), transparent 28%),
    linear-gradient(180deg, #05070d, #010204 72%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.045),
    inset 0 0 34px rgba(0,0,0,.70),
    0 0 0 1px rgba(0,0,0,.55),
    0 0 24px rgba(255,91,31,.08),
    0 0 30px rgba(80,214,255,.08);
}
body.orev-mp4-ui-phase4 .preview-frame.orev-stage-frame::before {
  inset: 10px;
  border-radius: 17px;
  border-color: rgba(243,198,110,.16);
  box-shadow:
    inset 0 0 22px rgba(0,0,0,.58),
    inset 0 0 0 1px rgba(80,214,255,.04);
}
body.orev-mp4-ui-phase4 .preview-frame.orev-stage-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(255,91,31,.18), transparent 14%, transparent 86%, rgba(80,214,255,.18)),
    radial-gradient(circle at 50% 50%, transparent 62%, rgba(0,0,0,.44));
  mix-blend-mode: screen;
  opacity: .52;
}
body.orev-mp4-ui-phase4 #previewCanvas {
  position: relative;
  z-index: 1;
  background:
    linear-gradient(135deg, rgba(255,91,31,.035), rgba(80,214,255,.035)),
    #020305;
}
body.orev-mp4-ui-phase4 .stage-corner {
  position: absolute;
  z-index: 5;
  width: clamp(34px, 6vw, 74px);
  height: clamp(34px, 6vw, 74px);
  pointer-events: none;
  opacity: .92;
}
body.orev-mp4-ui-phase4 .stage-corner::before,
body.orev-mp4-ui-phase4 .stage-corner::after {
  content: "";
  position: absolute;
  border-color: rgba(243,198,110,.72);
  filter: drop-shadow(0 0 9px rgba(243,198,110,.16));
}
body.orev-mp4-ui-phase4 .stage-corner::before {
  inset: 0;
  border-style: solid;
  border-width: 2px 0 0 2px;
  border-radius: 11px 0 0 0;
}
body.orev-mp4-ui-phase4 .stage-corner::after {
  width: 42%;
  height: 42%;
  top: 7px;
  left: 7px;
  border-style: solid;
  border-width: 1px 0 0 1px;
  border-radius: 8px 0 0 0;
  opacity: .70;
}
body.orev-mp4-ui-phase4 .stage-corner-tl { top: 12px; left: 12px; }
body.orev-mp4-ui-phase4 .stage-corner-tr { top: 12px; right: 12px; transform: rotate(90deg); }
body.orev-mp4-ui-phase4 .stage-corner-bl { bottom: 12px; left: 12px; transform: rotate(-90deg); }
body.orev-mp4-ui-phase4 .stage-corner-br { bottom: 12px; right: 12px; transform: rotate(180deg); }
body.orev-mp4-ui-phase4 .stage-energy {
  position: absolute;
  top: 14%;
  bottom: 14%;
  width: 5px;
  z-index: 4;
  pointer-events: none;
  border-radius: 999px;
  opacity: .66;
}
body.orev-mp4-ui-phase4 .stage-energy-fire {
  left: 10px;
  background: linear-gradient(180deg, transparent, rgba(255,91,31,.95), rgba(243,198,110,.42), transparent);
  box-shadow: 0 0 20px rgba(255,91,31,.35);
}
body.orev-mp4-ui-phase4 .stage-energy-ice {
  right: 10px;
  background: linear-gradient(180deg, transparent, rgba(80,214,255,.94), rgba(22,120,255,.52), transparent);
  box-shadow: 0 0 22px rgba(80,214,255,.36);
}
body.orev-mp4-ui-phase4 .stage-watermark {
  position: absolute;
  right: 15px;
  bottom: 13px;
  z-index: 2;
  width: clamp(56px, 11vw, 112px);
  aspect-ratio: 1;
  pointer-events: none;
  opacity: .10;
  filter: saturate(1.1) drop-shadow(0 0 22px rgba(80,214,255,.28));
}
body.orev-mp4-ui-phase4 .stage-watermark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
body.orev-mp4-ui-phase4 .preview-badge {
  left: 16px;
  top: 16px;
  z-index: 8;
  border-color: rgba(243,198,110,.42);
  color: #fff0c6;
  background:
    linear-gradient(90deg, rgba(255,91,31,.18), rgba(80,214,255,.10)),
    rgba(0,0,0,.62);
  box-shadow: 0 0 18px rgba(243,198,110,.12);
}
body.orev-mp4-ui-phase4 .orev-stage-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  padding: 1px 4px 0;
}
body.orev-mp4-ui-phase4 .orev-stage-footer span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 8px;
  border: 1px solid rgba(243,198,110,.18);
  border-radius: 999px;
  color: #bfae90;
  background: rgba(0,0,0,.20);
  font-size: .68rem;
  font-weight: 800;
  white-space: nowrap;
}
body.orev-mp4-ui-phase4 .timeline-tools,
body.orev-mp4-ui-phase4 .timeline-shell {
  border-color: rgba(243,198,110,.26);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
}
@media (max-width: 740px) {
  body.orev-mp4-ui-phase4 .orev-stage-shell { padding: 9px; border-radius: 22px; }
  body.orev-mp4-ui-phase4 .orev-stage-crown { grid-template-columns: 1fr auto 1fr; gap: 6px; padding-inline: 2px; }
  body.orev-mp4-ui-phase4 .stage-sigil { font-size: .56rem; padding-inline: 6px; }
  body.orev-mp4-ui-phase4 .stage-crown-gem { width: 22px; height: 22px; border-radius: 6px; }
  body.orev-mp4-ui-phase4 .preview-frame.orev-stage-frame { border-radius: 19px; }
  body.orev-mp4-ui-phase4 .orev-stage-footer { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  body.orev-mp4-ui-phase4 .orev-stage-shell,
  body.orev-mp4-ui-phase4 .preview-frame.orev-stage-frame,
  body.orev-mp4-ui-phase4 .stage-crown-gem {
    transition: none;
    animation: none;
  }
}


/* UI Phase 5 of 10 - Timeline + Clip Card Restyle
   Scope: visual timeline cards, clip vault cards, lane guide, ruler contrast, and selected/missing states.
   No export, FFmpeg, project schema, renderer, or media-processing behavior is changed. */
body.orev-mp4-ui-phase5 .workspace-overview {
  border-color: rgba(80,214,255,.28);
  background:
    linear-gradient(90deg, rgba(255,91,31,.11), transparent 30%),
    linear-gradient(270deg, rgba(80,214,255,.13), transparent 34%),
    radial-gradient(circle at 50% 0%, rgba(243,198,110,.12), transparent 28%),
    rgba(3,5,10,.86);
}
body.orev-mp4-ui-phase5 .library-panel {
  border-color: rgba(255,91,31,.34);
  box-shadow:
    0 22px 70px rgba(0,0,0,.50),
    inset 3px 0 0 rgba(255,91,31,.22);
}
body.orev-mp4-ui-phase5 .preview-panel {
  border-color: rgba(243,198,110,.46);
}
body.orev-mp4-ui-phase5 .clip-list {
  gap: 10px;
  padding-right: 4px;
}
body.orev-mp4-ui-phase5 .phase5-clip-card {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 18px;
  border-color: rgba(243,198,110,.20);
  background:
    linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.018)),
    rgba(2,3,5,.58);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.025),
    0 10px 24px rgba(0,0,0,.22);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
body.orev-mp4-ui-phase5 .phase5-clip-card:hover {
  transform: translateY(-1px);
  border-color: rgba(243,198,110,.38);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.035),
    0 13px 28px rgba(0,0,0,.30),
    0 0 20px rgba(80,214,255,.07);
}
body.orev-mp4-ui-phase5 .phase5-clip-card.selected {
  border-color: rgba(80,214,255,.78);
  background:
    linear-gradient(135deg, rgba(80,214,255,.10), rgba(243,198,110,.045)),
    rgba(2,3,5,.70);
  box-shadow:
    inset 0 0 0 1px rgba(80,214,255,.22),
    0 0 24px rgba(80,214,255,.13),
    0 14px 32px rgba(0,0,0,.34);
}
body.orev-mp4-ui-phase5 .phase5-clip-card.missing {
  border-color: rgba(255,211,110,.60);
  box-shadow: inset 0 0 0 1px rgba(255,211,110,.12), 0 0 22px rgba(255,138,32,.08);
}
body.orev-mp4-ui-phase5 .phase5-clip-card.gap-card {
  border-color: rgba(167,125,255,.43);
}
body.orev-mp4-ui-phase5 .clip-card-rail {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100%;
  border-right: 1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(243,198,110,.22), rgba(255,91,31,.18) 48%, rgba(80,214,255,.16)),
    rgba(0,0,0,.30);
}
body.orev-mp4-ui-phase5 .tone-video .clip-card-rail { background: linear-gradient(180deg, rgba(80,214,255,.20), rgba(243,198,110,.18), rgba(255,91,31,.16)), rgba(0,0,0,.34); }
body.orev-mp4-ui-phase5 .tone-slate .clip-card-rail { background: linear-gradient(180deg, rgba(167,125,255,.26), rgba(80,214,255,.14)), rgba(0,0,0,.34); }
body.orev-mp4-ui-phase5 .tone-warn .clip-card-rail { background: linear-gradient(180deg, rgba(255,211,110,.26), rgba(255,91,31,.24)), rgba(0,0,0,.34); }
body.orev-mp4-ui-phase5 .clip-card-rail span {
  transform: rotate(-90deg);
  color: #fff4ce;
  font-size: .70rem;
  font-weight: 1000;
  letter-spacing: .18em;
  text-shadow: 0 0 10px rgba(0,0,0,.55);
}
body.orev-mp4-ui-phase5 .clip-card-main {
  min-width: 0;
  display: grid;
  gap: 7px;
  padding: 10px 11px;
}
body.orev-mp4-ui-phase5 .clip-card-topline,
body.orev-mp4-ui-phase5 .clip-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
body.orev-mp4-ui-phase5 .clip-type-chip,
body.orev-mp4-ui-phase5 .clip-duration-chip,
body.orev-mp4-ui-phase5 .clip-transition-badge {
  display: inline-flex;
  align-items: center;
  min-height: 21px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(0,0,0,.22);
  color: #e8d8ba;
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .055em;
  text-transform: uppercase;
  white-space: nowrap;
}
body.orev-mp4-ui-phase5 .clip-duration-chip {
  color: #caf5ff;
  border-color: rgba(80,214,255,.27);
}
body.orev-mp4-ui-phase5 .clip-title-row.phase5-title-row strong {
  color: #fff2d0;
  font-size: .88rem;
  line-height: 1.18;
}
body.orev-mp4-ui-phase5 .clip-title-row.phase5-title-row small {
  color: #c0ac89;
  white-space: nowrap;
}
body.orev-mp4-ui-phase5 .clip-fileline {
  min-width: 0;
  color: #89cfe3;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .69rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: .88;
}
body.orev-mp4-ui-phase5 .clip-card-footer {
  padding-top: 1px;
  color: #bba888;
  font-size: .70rem;
  font-weight: 800;
}
body.orev-mp4-ui-phase5 .clip-transition-badge.active {
  color: #bff7ff;
  border-color: rgba(80,214,255,.44);
  background: rgba(80,214,255,.10);
}
body.orev-mp4-ui-phase5 .phase5-empty-card,
body.orev-mp4-ui-phase5 .phase5-empty-timeline {
  border-style: dashed;
  border-color: rgba(243,198,110,.30);
  color: #cdbb9d;
  background: linear-gradient(135deg, rgba(255,91,31,.055), rgba(80,214,255,.050)), rgba(0,0,0,.20);
}
body.orev-mp4-ui-phase5 .timeline-tools {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border-color: rgba(243,198,110,.34);
  background:
    linear-gradient(90deg, rgba(255,91,31,.09), transparent 34%, rgba(80,214,255,.10)),
    rgba(0,0,0,.26);
}
body.orev-mp4-ui-phase5 .timeline-tools::before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(243,198,110,.58), transparent);
}
body.orev-mp4-ui-phase5 .timeline-head-copy h3 {
  color: #fff0c6;
  letter-spacing: -.02em;
}
body.orev-mp4-ui-phase5 .timeline-stats span {
  border-color: rgba(243,198,110,.23);
  background: rgba(0,0,0,.28);
  color: #d9c7a5;
}
body.orev-mp4-ui-phase5 .timeline-stats span:last-child {
  border-color: rgba(80,214,255,.30);
  color: #c9f5ff;
}
body.orev-mp4-ui-phase5 .phase5-timeline-rail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: -2px;
}
body.orev-mp4-ui-phase5 .phase5-lane {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 28px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  background: rgba(0,0,0,.20);
  color: #d6c4a6;
  font-size: .68rem;
  font-weight: 950;
  letter-spacing: .13em;
  text-transform: uppercase;
}
body.orev-mp4-ui-phase5 .phase5-lane.fire { border-color: rgba(255,91,31,.34); color: #ffd0a8; }
body.orev-mp4-ui-phase5 .phase5-lane.gold { border-color: rgba(243,198,110,.34); color: #ffe3a6; }
body.orev-mp4-ui-phase5 .phase5-lane.ice { border-color: rgba(80,214,255,.34); color: #c9f5ff; }
body.orev-mp4-ui-phase5 .phase5-timeline-shell {
  grid-template-rows: 34px minmax(0, 1fr);
  min-height: 252px;
  border-radius: 22px;
  border-color: rgba(243,198,110,.38);
  background:
    linear-gradient(90deg, rgba(255,91,31,.065), transparent 24%, transparent 76%, rgba(80,214,255,.075)),
    linear-gradient(180deg, rgba(243,198,110,.070), rgba(0,0,0,.24) 48%),
    rgba(1,2,5,.70);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.025),
    inset 0 0 38px rgba(0,0,0,.50),
    0 0 26px rgba(243,198,110,.07);
}
body.orev-mp4-ui-phase5 .timeline-ruler {
  border-bottom-color: rgba(243,198,110,.24);
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 56px),
    linear-gradient(90deg, rgba(255,91,31,.08), rgba(243,198,110,.045), rgba(80,214,255,.08)),
    rgba(0,0,0,.25);
}
body.orev-mp4-ui-phase5 .ruler-tick {
  color: #bfae90;
  border-left-color: rgba(243,198,110,.24);
  font-weight: 850;
}
body.orev-mp4-ui-phase5 .timeline {
  align-items: stretch;
  gap: 10px;
  padding: 13px 13px 15px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.028), transparent 32%),
    repeating-linear-gradient(90deg, rgba(243,198,110,.035) 0 1px, transparent 1px 68px);
}
body.orev-mp4-ui-phase5 .phase5-timeline-card {
  isolation: isolate;
  overflow: hidden;
  min-height: 172px;
  padding: 10px 10px 38px;
  border-radius: 19px;
  border-color: rgba(243,198,110,.24);
  background:
    linear-gradient(180deg, rgba(255,255,255,.072), rgba(255,255,255,.026)),
    linear-gradient(135deg, rgba(255,91,31,.060), rgba(80,214,255,.052)),
    rgba(3,5,10,.76);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.025),
    0 14px 30px rgba(0,0,0,.30);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
body.orev-mp4-ui-phase5 .phase5-timeline-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: linear-gradient(90deg, rgba(255,91,31,.80), rgba(243,198,110,.72), rgba(80,214,255,.78));
  opacity: .76;
}
body.orev-mp4-ui-phase5 .phase5-timeline-card:hover {
  transform: translateY(-2px);
  border-color: rgba(243,198,110,.48);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.035),
    0 16px 36px rgba(0,0,0,.38),
    0 0 26px rgba(80,214,255,.08);
}
body.orev-mp4-ui-phase5 .phase5-timeline-card.selected {
  border-color: rgba(80,214,255,.82);
  background:
    linear-gradient(180deg, rgba(80,214,255,.12), rgba(255,255,255,.030)),
    linear-gradient(135deg, rgba(243,198,110,.07), rgba(255,91,31,.050)),
    rgba(3,5,10,.86);
  box-shadow:
    inset 0 0 0 1px rgba(80,214,255,.28),
    0 0 0 1px rgba(80,214,255,.10),
    0 0 26px rgba(80,214,255,.18),
    0 16px 36px rgba(0,0,0,.40);
}
body.orev-mp4-ui-phase5 .phase5-timeline-card.missing {
  border-color: rgba(255,211,110,.60);
}
body.orev-mp4-ui-phase5 .phase5-timeline-card.gap {
  background:
    linear-gradient(180deg, rgba(167,125,255,.14), rgba(255,255,255,.020)),
    linear-gradient(135deg, rgba(80,214,255,.055), rgba(243,198,110,.050)),
    rgba(3,5,10,.78);
}
body.orev-mp4-ui-phase5 .timeline-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
body.orev-mp4-ui-phase5 .timeline-index {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 11px;
  color: #130904;
  background: linear-gradient(135deg, var(--orev-gold), var(--orev-fire) 62%, var(--orev-ice));
  font-size: .70rem;
  font-weight: 1000;
  box-shadow: 0 0 16px rgba(255,138,32,.16);
}
body.orev-mp4-ui-phase5 .timeline-kind {
  min-width: 0;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #c7b692;
  border: 1px solid rgba(243,198,110,.20);
  border-radius: 999px;
  padding: 3px 7px;
  background: rgba(0,0,0,.24);
  font-size: .62rem;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}
body.orev-mp4-ui-phase5 .timeline-name {
  color: #fff3d6;
  font-size: .86rem;
  line-height: 1.18;
  min-height: 2.1em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.orev-mp4-ui-phase5 .timeline-source {
  min-width: 0;
  color: #87dff7;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .65rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: .86;
}
body.orev-mp4-ui-phase5 .timeline-clip-meter {
  height: 8px;
  overflow: hidden;
  border: 1px solid rgba(243,198,110,.18);
  border-radius: 999px;
  background: rgba(0,0,0,.28);
}
body.orev-mp4-ui-phase5 .timeline-clip-meter span {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, rgba(255,91,31,.58), rgba(243,198,110,.48), rgba(80,214,255,.58));
  opacity: .72;
}
body.orev-mp4-ui-phase5 .timeline-meta {
  gap: 5px;
}
body.orev-mp4-ui-phase5 .timeline-meta span,
body.orev-mp4-ui-phase5 .timeline-flags span {
  display: inline-flex;
  align-items: center;
  min-height: 19px;
  padding: 2px 6px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 999px;
  background: rgba(0,0,0,.21);
  color: #cbb999;
  font-size: .66rem;
  font-weight: 850;
  white-space: nowrap;
}
body.orev-mp4-ui-phase5 .timeline-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
body.orev-mp4-ui-phase5 .timeline-flags span {
  color: #ffe1a6;
  border-color: rgba(255,211,110,.25);
}
body.orev-mp4-ui-phase5 .timeline-transition {
  left: 10px;
  right: 10px;
  bottom: 8px;
  padding: 5px 8px;
  border-color: rgba(243,198,110,.24);
  color: #c5b08e;
  background: rgba(0,0,0,.36);
  font-weight: 900;
  letter-spacing: .03em;
}
body.orev-mp4-ui-phase5 .timeline-transition.active {
  color: #d7f8ff;
  border-color: rgba(80,214,255,.55);
  background: linear-gradient(90deg, rgba(80,214,255,.14), rgba(243,198,110,.060));
  box-shadow: 0 0 15px rgba(80,214,255,.12);
}
body.orev-mp4-ui-phase5 .timeline-edge {
  position: absolute;
  top: 42px;
  bottom: 44px;
  width: 3px;
  border-radius: 999px;
  opacity: .62;
  pointer-events: none;
}
body.orev-mp4-ui-phase5 .timeline-edge-in {
  left: 5px;
  background: linear-gradient(180deg, transparent, rgba(255,91,31,.86), transparent);
  box-shadow: 0 0 14px rgba(255,91,31,.30);
}
body.orev-mp4-ui-phase5 .timeline-edge-out {
  right: 5px;
  background: linear-gradient(180deg, transparent, rgba(80,214,255,.86), transparent);
  box-shadow: 0 0 14px rgba(80,214,255,.30);
}
body.orev-mp4-ui-phase5 .timeline-item.dragging {
  opacity: .48;
  transform: scale(.985);
}
@media (max-width: 900px) {
  body.orev-mp4-ui-phase5 .phase5-timeline-rail { grid-template-columns: 1fr; }
  body.orev-mp4-ui-phase5 .phase5-lane { justify-content: flex-start; padding-inline: 10px; }
}
@media (max-width: 740px) {
  body.orev-mp4-ui-phase5 .phase5-clip-card { grid-template-columns: 36px minmax(0, 1fr); }
  body.orev-mp4-ui-phase5 .phase5-timeline-shell { min-height: 224px; }
  body.orev-mp4-ui-phase5 .phase5-timeline-card { min-height: 160px; }
}
@media (prefers-reduced-motion: reduce) {
  body.orev-mp4-ui-phase5 .phase5-clip-card,
  body.orev-mp4-ui-phase5 .phase5-timeline-card {
    transition: none;
  }
}


/* UI Phase 6 of 10 - Inspector + Form Refinement
   Scope: CSS/HTML command-rail polish for inspector sections, field rhythm, focus states,
   selected item hierarchy, and export readability. Functional IDs, FFmpeg, recorder,
   project schema, cache, relink, and export logic remain unchanged. */
body.orev-mp4-ui-phase6 .workspace-overview {
  border-color: rgba(80,214,255,.28);
  background:
    linear-gradient(90deg, rgba(80,214,255,.060), transparent 30%, rgba(243,198,110,.055)),
    rgba(8,12,22,.92);
}
body.orev-mp4-ui-phase6 .chrome-status-strip .status-node.ice,
body.orev-mp4-ui-phase6 .phase-chip {
  box-shadow: 0 0 18px rgba(80,214,255,.16);
}
body.orev-mp4-ui-phase6 .inspector-panel {
  border-color: rgba(80,214,255,.36);
  background:
    radial-gradient(circle at 100% 4%, rgba(80,214,255,.11), transparent 20%),
    linear-gradient(180deg, rgba(80,214,255,.075), transparent 26%),
    linear-gradient(45deg, rgba(243,198,110,.044), transparent 58%),
    rgba(7,10,18,.96);
  scrollbar-color: rgba(80,214,255,.36) rgba(0,0,0,.18);
}
body.orev-mp4-ui-phase6 .phase6-inspector-kicker {
  border-color: rgba(80,214,255,.38);
  background:
    linear-gradient(90deg, rgba(80,214,255,.105), transparent 52%, rgba(243,198,110,.06)),
    rgba(0,0,0,.26);
}
body.orev-mp4-ui-phase6 .phase6-inspector-map {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
body.orev-mp4-ui-phase6 .phase6-map-node {
  position: relative;
  overflow: hidden;
  min-height: 58px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 16px;
  padding: 9px 10px 9px 13px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.018)),
    rgba(0,0,0,.22);
}
body.orev-mp4-ui-phase6 .phase6-map-node::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,.30);
}
body.orev-mp4-ui-phase6 .phase6-map-node b {
  display: block;
  color: #fff2d3;
  font-size: .76rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}
body.orev-mp4-ui-phase6 .phase6-map-node small {
  display: block;
  color: #b9aa90;
  font-size: .70rem;
  line-height: 1.28;
  margin-top: 3px;
}
body.orev-mp4-ui-phase6 .phase6-map-node.fire::before { background: linear-gradient(180deg, var(--orev-fire), var(--orev-gold)); }
body.orev-mp4-ui-phase6 .phase6-map-node.gold::before { background: linear-gradient(180deg, var(--orev-gold), var(--orev-gold2)); }
body.orev-mp4-ui-phase6 .phase6-map-node.ice::before { background: linear-gradient(180deg, var(--orev-ice), var(--orev-blue)); }
body.orev-mp4-ui-phase6 .phase6-map-node.raven::before { background: linear-gradient(180deg, #9aa7bd, #151b29); }

body.orev-mp4-ui-phase6 .settings-group.phase6-section {
  position: relative;
  overflow: hidden;
  gap: 11px;
  padding: 13px;
  border-radius: 20px;
  border-color: rgba(80,214,255,.22);
  background:
    linear-gradient(150deg, rgba(80,214,255,.045), transparent 34%),
    linear-gradient(330deg, rgba(243,198,110,.038), transparent 50%),
    rgba(255,255,255,.030);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.025),
    0 10px 28px rgba(0,0,0,.18);
}
body.orev-mp4-ui-phase6 .settings-group.phase6-section::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 3px;
  opacity: .78;
  background: linear-gradient(90deg, rgba(255,91,31,.78), rgba(243,198,110,.68), rgba(80,214,255,.78));
}
body.orev-mp4-ui-phase6 .phase6-section-label {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  grid-template-areas: "num title" "num detail";
  gap: 0 8px;
  align-items: center;
  margin-bottom: -2px;
}
body.orev-mp4-ui-phase6 .phase6-section-label span {
  grid-area: num;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(243,198,110,.35);
  border-radius: 11px;
  color: #140b04;
  background: linear-gradient(135deg, var(--orev-gold), var(--orev-fire) 58%, var(--orev-ice));
  font-size: .68rem;
  font-weight: 1000;
}
body.orev-mp4-ui-phase6 .phase6-section-label strong {
  grid-area: title;
  color: #fff2d1;
  font-size: .76rem;
  font-weight: 1000;
  letter-spacing: .10em;
  line-height: 1;
  text-transform: uppercase;
}
body.orev-mp4-ui-phase6 .phase6-section-label em {
  grid-area: detail;
  color: #aebacf;
  font-style: normal;
  font-size: .68rem;
  line-height: 1.25;
}
body.orev-mp4-ui-phase6 .settings-group.phase6-section > h3,
body.orev-mp4-ui-phase6 .settings-group.phase6-section .group-head h3 {
  color: #fff6dd;
  font-size: .98rem;
  letter-spacing: -.01em;
  text-shadow: 0 0 16px rgba(243,198,110,.11);
}
body.orev-mp4-ui-phase6 .phase6-project-group { border-color: rgba(243,198,110,.30); }
body.orev-mp4-ui-phase6 .phase6-audio-group,
body.orev-mp4-ui-phase6 .phase6-relink-cache-group { border-color: rgba(107,242,164,.30); }
body.orev-mp4-ui-phase6 .phase6-branding-group,
body.orev-mp4-ui-phase6 .phase6-builder-group { border-color: rgba(243,198,110,.34); }
body.orev-mp4-ui-phase6 .phase6-fastpath-group,
body.orev-mp4-ui-phase6 .phase6-reliability-group,
body.orev-mp4-ui-phase6 .phase6-export-group { border-color: rgba(80,214,255,.38); }
body.orev-mp4-ui-phase6 .phase6-selected-item-group {
  border-color: rgba(80,214,255,.46);
  background:
    linear-gradient(135deg, rgba(80,214,255,.078), transparent 44%),
    linear-gradient(315deg, rgba(255,91,31,.044), transparent 55%),
    rgba(255,255,255,.032);
}
body.orev-mp4-ui-phase6 .field {
  gap: 7px;
  color: #c7bda8;
  font-weight: 800;
  letter-spacing: .01em;
}
body.orev-mp4-ui-phase6 .field span {
  color: #d5c7aa;
}
body.orev-mp4-ui-phase6 .field span b {
  color: #c9f6ff;
  font-weight: 1000;
}
body.orev-mp4-ui-phase6 .field input,
body.orev-mp4-ui-phase6 .field select {
  min-height: 42px;
  border-radius: 14px;
  border-color: rgba(80,214,255,.26);
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)),
    rgba(1,3,8,.78);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
}
body.orev-mp4-ui-phase6 .field input:hover,
body.orev-mp4-ui-phase6 .field select:hover {
  border-color: rgba(243,198,110,.42);
}
body.orev-mp4-ui-phase6 .field input:focus,
body.orev-mp4-ui-phase6 .field select:focus,
body.orev-mp4-ui-phase6 .btn:focus-visible,
body.orev-mp4-ui-phase6 .check-row input:focus-visible {
  outline: 2px solid rgba(80,214,255,.84);
  outline-offset: 2px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 0 0 4px rgba(80,214,255,.12),
    0 0 22px rgba(80,214,255,.16);
}
body.orev-mp4-ui-phase6 .field input[type="color"] {
  min-height: 44px;
  padding: 4px;
  border-color: rgba(243,198,110,.32);
  background: rgba(0,0,0,.32);
}
body.orev-mp4-ui-phase6 .field input[type="range"] {
  min-height: 26px;
  accent-color: var(--orev-ice);
  background: transparent;
  box-shadow: none;
}
body.orev-mp4-ui-phase6 .check-row {
  min-height: 40px;
  align-items: center;
  padding: 8px 9px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
  background:
    linear-gradient(90deg, rgba(80,214,255,.040), transparent),
    rgba(0,0,0,.16);
  color: #d4c6aa;
}
body.orev-mp4-ui-phase6 .check-row input {
  width: 17px;
  height: 17px;
  accent-color: var(--orev-ice);
}
body.orev-mp4-ui-phase6 .field-grid.two {
  gap: 9px;
}
body.orev-mp4-ui-phase6 .group-head {
  align-items: center;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(255,255,255,.075);
}
body.orev-mp4-ui-phase6 .settings-subgroup {
  border-radius: 17px;
  border-color: rgba(243,198,110,.20);
  background:
    linear-gradient(135deg, rgba(243,198,110,.042), rgba(80,214,255,.030)),
    rgba(0,0,0,.18);
}
body.orev-mp4-ui-phase6 .settings-subgroup h4 {
  color: #ffe9b8;
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
body.orev-mp4-ui-phase6 .empty-state,
body.orev-mp4-ui-phase6 .relink-status,
body.orev-mp4-ui-phase6 .export-status,
body.orev-mp4-ui-phase6 .phase6-status,
body.orev-mp4-ui-phase6 .phase7-status,
body.orev-mp4-ui-phase6 .fast-summary,
body.orev-mp4-ui-phase6 .fast-guidance,
body.orev-mp4-ui-phase6 .preflight-summary,
body.orev-mp4-ui-phase6 .failure-guide,
body.orev-mp4-ui-phase6 .estimate-panel,
body.orev-mp4-ui-phase6 .warning-panel {
  border-radius: 15px;
  border-color: rgba(80,214,255,.22);
  background:
    linear-gradient(135deg, rgba(80,214,255,.045), rgba(255,91,31,.025)),
    rgba(0,0,0,.24);
  color: #c4b89f;
}
body.orev-mp4-ui-phase6 #clipInspector {
  gap: 11px;
}
body.orev-mp4-ui-phase6 #clipInspector:not([hidden]) {
  display: grid;
}
body.orev-mp4-ui-phase6 .trim-strip {
  border-color: rgba(243,198,110,.24);
  background:
    linear-gradient(90deg, rgba(255,91,31,.12), rgba(80,214,255,.12)),
    rgba(0,0,0,.26);
}
body.orev-mp4-ui-phase6 .trim-range {
  background: linear-gradient(90deg, rgba(243,198,110,.58), rgba(80,214,255,.52));
}
body.orev-mp4-ui-phase6 .trim-handle {
  border-color: rgba(243,198,110,.70);
  background: #ffe3a3;
  box-shadow: 0 0 16px rgba(243,198,110,.22);
}
body.orev-mp4-ui-phase6 .transition-presets,
body.orev-mp4-ui-phase6 .flag-grid,
body.orev-mp4-ui-phase6 .mini-row.wrap,
body.orev-mp4-ui-phase6 .export-actions {
  gap: 8px;
}
body.orev-mp4-ui-phase6 .transition-presets .btn,
body.orev-mp4-ui-phase6 .flag-grid .btn,
body.orev-mp4-ui-phase6 .mini-row.wrap .btn {
  border-radius: 12px;
}
body.orev-mp4-ui-phase6 .fast51-callout {
  border-radius: 17px;
  border-color: rgba(107,242,164,.46);
  background:
    linear-gradient(135deg, rgba(107,242,164,.13), rgba(80,214,255,.075)),
    rgba(0,0,0,.18);
}
body.orev-mp4-ui-phase6 .split-export-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.orev-mp4-ui-phase6 .split-export-actions .fast51-main,
body.orev-mp4-ui-phase6 .split-export-actions #autoExportBtn {
  min-height: 46px;
}
body.orev-mp4-ui-phase6 .log {
  border-radius: 16px;
  border-color: rgba(243,198,110,.20);
  background:
    linear-gradient(180deg, rgba(243,198,110,.040), transparent),
    rgba(0,0,0,.28);
}
@media (max-width: 1300px) {
  body.orev-mp4-ui-phase6 .phase6-inspector-map { grid-template-columns: 1fr; }
}
@media (max-width: 740px) {
  body.orev-mp4-ui-phase6 .phase6-inspector-map,
  body.orev-mp4-ui-phase6 .split-export-actions,
  body.orev-mp4-ui-phase6 .field-grid.two { grid-template-columns: 1fr; }
  body.orev-mp4-ui-phase6 .phase6-section-label { grid-template-columns: 26px minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  body.orev-mp4-ui-phase6 .field input,
  body.orev-mp4-ui-phase6 .field select,
  body.orev-mp4-ui-phase6 .btn {
    transition: none;
  }
}


/* UI Phase 7 of 10 - Export Workflow Command Layer
   Scope: CSS/HTML-only command-route polish for preflight, Auto Export, Fast 5.1 MP4,
   Split FFmpeg Stitch, Record Stitch, package artifacts, and export status hierarchy.
   Functional IDs, JS bindings, FFmpeg, recorder, project schema, relink, and cache logic remain unchanged. */
body.orev-mp4-ui-phase7 .topbar.orev-chrome-header {
  border-color: rgba(243,198,110,.34);
  box-shadow:
    0 18px 60px rgba(0,0,0,.40),
    inset 0 -1px 0 rgba(80,214,255,.13),
    0 0 34px rgba(255,91,31,.065);
}
body.orev-mp4-ui-phase7 .phase-chip {
  background: linear-gradient(135deg, rgba(255,91,31,.30), rgba(243,198,110,.24), rgba(80,214,255,.24));
  border-color: rgba(243,198,110,.42);
}
body.orev-mp4-ui-phase7 .phase7-export-ribbon {
  display: grid;
  grid-template-columns: repeat(7, auto);
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 9px 10px;
  border: 1px solid rgba(243,198,110,.18);
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(255,91,31,.075), rgba(243,198,110,.060), rgba(80,214,255,.075)),
    rgba(0,0,0,.22);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
}
body.orev-mp4-ui-phase7 .phase7-route-node {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  color: #f6f0df;
  font-size: .70rem;
  font-weight: 1000;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  background: rgba(255,255,255,.045);
}
body.orev-mp4-ui-phase7 .phase7-route-node.fire { border-color: rgba(255,91,31,.38); box-shadow: inset 3px 0 0 rgba(255,91,31,.56); }
body.orev-mp4-ui-phase7 .phase7-route-node.gold { border-color: rgba(243,198,110,.42); box-shadow: inset 3px 0 0 rgba(243,198,110,.60); }
body.orev-mp4-ui-phase7 .phase7-route-node.ice { border-color: rgba(80,214,255,.42); box-shadow: inset 3px 0 0 rgba(80,214,255,.60); }
body.orev-mp4-ui-phase7 .phase7-route-node.raven { border-color: rgba(154,167,189,.28); box-shadow: inset 3px 0 0 rgba(154,167,189,.45); }
body.orev-mp4-ui-phase7 .phase7-route-arrow {
  color: rgba(243,198,110,.72);
  font-weight: 1000;
}
body.orev-mp4-ui-phase7 .workspace-overview {
  border-color: rgba(243,198,110,.32);
  background:
    radial-gradient(circle at 4% 0%, rgba(255,91,31,.13), transparent 24%),
    radial-gradient(circle at 96% 4%, rgba(80,214,255,.12), transparent 25%),
    linear-gradient(90deg, rgba(243,198,110,.07), transparent 48%, rgba(80,214,255,.05)),
    rgba(7,10,18,.94);
}
body.orev-mp4-ui-phase7 .overview-brand-chip strong {
  color: #fff0cb;
  text-shadow: 0 0 18px rgba(243,198,110,.16);
}
body.orev-mp4-ui-phase7 .overview-card {
  min-height: 78px;
}
body.orev-mp4-ui-phase7 .phase7-export-kicker {
  border-color: rgba(243,198,110,.38);
  background:
    linear-gradient(90deg, rgba(255,91,31,.12), rgba(243,198,110,.08), rgba(80,214,255,.10)),
    rgba(0,0,0,.26);
}
body.orev-mp4-ui-phase7 .phase7-map-node {
  min-height: 64px;
  background:
    linear-gradient(135deg, rgba(243,198,110,.055), rgba(80,214,255,.035)),
    rgba(0,0,0,.24);
}
body.orev-mp4-ui-phase7 .phase7-preflight-group {
  border-color: rgba(255,91,31,.38);
  background:
    radial-gradient(circle at 0% 8%, rgba(255,91,31,.10), transparent 28%),
    linear-gradient(135deg, rgba(255,91,31,.060), rgba(243,198,110,.034)),
    rgba(255,255,255,.030);
}
body.orev-mp4-ui-phase7 .phase7-export-command-group {
  border-color: rgba(80,214,255,.50);
  background:
    radial-gradient(circle at 100% 8%, rgba(80,214,255,.13), transparent 28%),
    radial-gradient(circle at 0% 100%, rgba(243,198,110,.085), transparent 30%),
    linear-gradient(180deg, rgba(80,214,255,.060), transparent 34%),
    rgba(255,255,255,.033);
}
body.orev-mp4-ui-phase7 .phase7-command-layer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: 2px 0 2px;
}
body.orev-mp4-ui-phase7 .phase7-command-card {
  position: relative;
  overflow: hidden;
  min-height: 116px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 18px;
  padding: 12px 12px 11px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.058), rgba(255,255,255,.018)),
    rgba(0,0,0,.24);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.024),
    0 12px 26px rgba(0,0,0,.18);
}
body.orev-mp4-ui-phase7 .phase7-command-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 3px;
  background: rgba(255,255,255,.26);
}
body.orev-mp4-ui-phase7 .phase7-command-card.fire::before { background: linear-gradient(90deg, var(--orev-fire), var(--orev-gold)); }
body.orev-mp4-ui-phase7 .phase7-command-card.gold::before { background: linear-gradient(90deg, var(--orev-gold), var(--orev-gold2)); }
body.orev-mp4-ui-phase7 .phase7-command-card.ice::before { background: linear-gradient(90deg, var(--orev-ice), var(--orev-blue)); }
body.orev-mp4-ui-phase7 .phase7-command-card.raven::before { background: linear-gradient(90deg, #7f8ca4, #1a2230); }
body.orev-mp4-ui-phase7 .phase7-command-card b {
  display: block;
  color: #fff4d8;
  font-size: .80rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
body.orev-mp4-ui-phase7 .phase7-command-card span {
  display: block;
  margin-top: 7px;
  color: #c7b99e;
  font-size: .75rem;
  line-height: 1.42;
}
body.orev-mp4-ui-phase7 .phase7-command-card em {
  display: inline-flex;
  margin-top: 9px;
  padding: 5px 7px;
  border: 1px solid rgba(80,214,255,.20);
  border-radius: 999px;
  color: #c9f7ff;
  background: rgba(80,214,255,.06);
  font-size: .66rem;
  font-style: normal;
  font-weight: 900;
}
body.orev-mp4-ui-phase7 .fast51-callout {
  border-color: rgba(107,242,164,.60);
  box-shadow: 0 0 18px rgba(107,242,164,.075), inset 0 0 0 1px rgba(255,255,255,.03);
}
body.orev-mp4-ui-phase7 .split-export-actions {
  gap: 10px;
  padding: 9px;
  border: 1px solid rgba(80,214,255,.16);
  border-radius: 19px;
  background:
    linear-gradient(135deg, rgba(80,214,255,.050), rgba(243,198,110,.032)),
    rgba(0,0,0,.16);
}
body.orev-mp4-ui-phase7 .split-export-actions #autoExportBtn,
body.orev-mp4-ui-phase7 .split-export-actions .fast51-main {
  min-height: 52px;
  border-color: rgba(80,214,255,.48);
  box-shadow: 0 0 22px rgba(80,214,255,.10);
}
body.orev-mp4-ui-phase7 .split-export-actions #exportSplitFfmpegBtn,
body.orev-mp4-ui-phase7 .split-export-actions #exportCaptureBtn {
  border-color: rgba(243,198,110,.28);
}
body.orev-mp4-ui-phase7 .split-export-actions #cancelExportBtn {
  grid-column: 1 / -1;
  min-height: 42px;
}
body.orev-mp4-ui-phase7 #splitFfmpegStatus,
body.orev-mp4-ui-phase7 #exportStatus {
  border-color: rgba(80,214,255,.32);
  background:
    linear-gradient(90deg, rgba(80,214,255,.064), rgba(0,0,0,.20)),
    rgba(0,0,0,.24);
}
body.orev-mp4-ui-phase7 .phase7-package-strip {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(243,198,110,.19);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(243,198,110,.060), rgba(80,214,255,.040)),
    rgba(0,0,0,.20);
}
body.orev-mp4-ui-phase7 .phase7-package-strip span {
  color: #c2b69e;
  font-size: .73rem;
  line-height: 1.35;
}
body.orev-mp4-ui-phase7 .phase7-package-strip b {
  color: #ffe9b0;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-right: 5px;
}
body.orev-mp4-ui-phase7 .phase7-package-actions {
  padding: 9px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 17px;
  background: rgba(0,0,0,.14);
}
body.orev-mp4-ui-phase7 .phase7-package-actions .btn,
body.orev-mp4-ui-phase7 .phase7-package-actions .file-label {
  border-color: rgba(243,198,110,.22);
  background: rgba(255,255,255,.040);
}
@media (max-width: 1180px) {
  body.orev-mp4-ui-phase7 .phase7-export-ribbon {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  body.orev-mp4-ui-phase7 .phase7-route-arrow { display: none; }
  body.orev-mp4-ui-phase7 .phase7-route-node { width: 100%; white-space: normal; text-align: center; }
}
@media (max-width: 740px) {
  body.orev-mp4-ui-phase7 .phase7-export-ribbon,
  body.orev-mp4-ui-phase7 .phase7-command-layer {
    grid-template-columns: 1fr;
  }
  body.orev-mp4-ui-phase7 .phase7-command-card { min-height: auto; }
}


/* UI Phase 8 of 10 - Responsive + Accessibility Hardening
   Scope: layout resilience, keyboard/focus visibility, touch target sizing, reduced motion,
   high-contrast handling, and compact-screen readability. Functional IDs, JS bindings,
   export/FFmpeg/MediaRecorder logic, project schema, cache, and relink behavior remain unchanged. */
body.orev-mp4-ui-phase8 {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
body.orev-mp4-ui-phase8 .skip-links {
  position: fixed;
  left: 12px;
  top: 12px;
  z-index: 9999;
  display: grid;
  gap: 6px;
  pointer-events: none;
}
body.orev-mp4-ui-phase8 .skip-links a {
  transform: translateY(-160%);
  opacity: 0;
  pointer-events: auto;
  width: max-content;
  max-width: min(88vw, 420px);
  padding: 10px 13px;
  border: 2px solid rgba(243,198,110,.90);
  border-radius: 12px;
  color: #10141d;
  background: linear-gradient(135deg, #fff0c5, #79e7ff);
  box-shadow: 0 14px 34px rgba(0,0,0,.45);
  font-size: .82rem;
  font-weight: 1000;
  letter-spacing: .04em;
  text-decoration: none;
  transition: transform .15s ease, opacity .15s ease;
}
body.orev-mp4-ui-phase8 .skip-links a:focus,
body.orev-mp4-ui-phase8 .skip-links a:focus-visible {
  transform: translateY(0);
  opacity: 1;
  outline: 3px solid rgba(80,214,255,.90);
  outline-offset: 3px;
}
body.orev-mp4-ui-phase8 .phase-chip {
  background: linear-gradient(135deg, rgba(243,198,110,.34), rgba(80,214,255,.30), rgba(255,91,31,.22));
  border-color: rgba(80,214,255,.48);
}
body.orev-mp4-ui-phase8 .phase8-accessibility-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 9px;
  padding: 8px;
  border: 1px solid rgba(80,214,255,.20);
  border-radius: 16px;
  background:
    linear-gradient(90deg, rgba(80,214,255,.075), rgba(243,198,110,.050), rgba(255,91,31,.055)),
    rgba(0,0,0,.22);
}
body.orev-mp4-ui-phase8 .phase8-access-chip {
  min-width: 0;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  color: #f7efe2;
  background: rgba(255,255,255,.045);
  font-size: .68rem;
  font-weight: 1000;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
}
body.orev-mp4-ui-phase8 .phase8-access-chip.gold { border-color: rgba(243,198,110,.42); color: #ffefbf; }
body.orev-mp4-ui-phase8 .phase8-access-chip.ice { border-color: rgba(80,214,255,.45); color: #c9f7ff; }
body.orev-mp4-ui-phase8 .phase8-access-chip.fire { border-color: rgba(255,91,31,.40); color: #ffd1b3; }
body.orev-mp4-ui-phase8 .phase8-access-chip.raven { border-color: rgba(154,167,189,.38); color: #dfe7f8; }
body.orev-mp4-ui-phase8 a:focus-visible,
body.orev-mp4-ui-phase8 button:focus-visible,
body.orev-mp4-ui-phase8 input:focus-visible,
body.orev-mp4-ui-phase8 select:focus-visible,
body.orev-mp4-ui-phase8 textarea:focus-visible,
body.orev-mp4-ui-phase8 [tabindex]:focus-visible,
body.orev-mp4-ui-phase8 .file-label:focus-visible,
body.orev-mp4-ui-phase8 .drop-zone:focus-visible {
  outline: 3px solid rgba(80,214,255,.92);
  outline-offset: 3px;
  box-shadow:
    0 0 0 6px rgba(243,198,110,.18),
    0 0 28px rgba(80,214,255,.18) !important;
}
body.orev-mp4-ui-phase8 .btn,
body.orev-mp4-ui-phase8 .file-label,
body.orev-mp4-ui-phase8 .field input,
body.orev-mp4-ui-phase8 .field select {
  min-height: 42px;
}
body.orev-mp4-ui-phase8 .btn.small {
  min-height: 38px;
  padding-inline: 10px;
}
body.orev-mp4-ui-phase8 .drop-zone {
  min-height: 124px;
  outline-offset: 4px;
}
body.orev-mp4-ui-phase8 .panel-title h2,
body.orev-mp4-ui-phase8 .settings-group h3,
body.orev-mp4-ui-phase8 .settings-subgroup h4 {
  color: #fff5db;
}
body.orev-mp4-ui-phase8 .panel-title p,
body.orev-mp4-ui-phase8 .phase3-panel-kicker span,
body.orev-mp4-ui-phase8 .phase7-command-card span,
body.orev-mp4-ui-phase8 .phase7-package-strip span,
body.orev-mp4-ui-phase8 small.note {
  color: #d4c4a7;
}
body.orev-mp4-ui-phase8 .timeline-name,
body.orev-mp4-ui-phase8 .clip-title-row strong {
  overflow-wrap: anywhere;
}
body.orev-mp4-ui-phase8 .timeline-item,
body.orev-mp4-ui-phase8 .clip-card,
body.orev-mp4-ui-phase8 .phase7-command-card,
body.orev-mp4-ui-phase8 .settings-group {
  scroll-margin: 14px;
}
@media (pointer: coarse) {
  body.orev-mp4-ui-phase8 .btn,
  body.orev-mp4-ui-phase8 .file-label,
  body.orev-mp4-ui-phase8 .field input,
  body.orev-mp4-ui-phase8 .field select,
  body.orev-mp4-ui-phase8 .check-row {
    min-height: 46px;
  }
  body.orev-mp4-ui-phase8 .timeline-item { min-width: 156px; }
}
@media (max-width: 1280px) {
  body.orev-mp4-ui-phase8 .orev-chrome-header {
    max-height: 38dvh;
  }
  body.orev-mp4-ui-phase8 .phase8-accessibility-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body.orev-mp4-ui-phase8 .workspace {
    grid-template-columns: minmax(260px, .80fr) minmax(480px, 1.32fr);
    grid-template-areas:
      "overview overview"
      "library preview"
      "inspector inspector";
    overflow-x: hidden;
    overflow-y: auto;
    padding-bottom: 4px;
  }
  body.orev-mp4-ui-phase8 .workspace-overview {
    min-width: 0;
  }
  body.orev-mp4-ui-phase8 .inspector-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
  }
  body.orev-mp4-ui-phase8 .inspector-panel > .panel-title,
  body.orev-mp4-ui-phase8 .inspector-panel > .phase3-panel-kicker,
  body.orev-mp4-ui-phase8 .inspector-panel > .phase6-inspector-map {
    grid-column: 1 / -1;
  }
}
@media (max-width: 980px) {
  html:has(body.orev-mp4-ui-phase8),
  body.orev-mp4-ui-phase8 {
    height: auto;
    min-height: 100%;
    overflow: auto;
  }
  body.orev-mp4-ui-phase8 .app-shell {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
    grid-template-rows: auto auto;
  }
  body.orev-mp4-ui-phase8 .topbar,
  body.orev-mp4-ui-phase8 .orev-chrome-header {
    max-height: none;
    overflow: visible;
  }
  body.orev-mp4-ui-phase8 .chrome-main-row {
    display: grid;
    grid-template-columns: 1fr;
  }
  body.orev-mp4-ui-phase8 .chrome-status-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  body.orev-mp4-ui-phase8 .workspace {
    height: auto;
    grid-template-columns: 1fr;
    grid-template-areas:
      "overview"
      "library"
      "preview"
      "inspector";
    overflow: visible;
  }
  body.orev-mp4-ui-phase8 .panel,
  body.orev-mp4-ui-phase8 .library-panel,
  body.orev-mp4-ui-phase8 .preview-panel,
  body.orev-mp4-ui-phase8 .inspector-panel {
    height: auto;
    max-height: none;
    overflow: visible;
  }
  body.orev-mp4-ui-phase8 .workspace-overview {
    grid-template-columns: 1fr;
  }
  body.orev-mp4-ui-phase8 .overview-map,
  body.orev-mp4-ui-phase8 .phase6-inspector-map,
  body.orev-mp4-ui-phase8 .phase7-command-layer,
  body.orev-mp4-ui-phase8 .field-grid.two,
  body.orev-mp4-ui-phase8 .split-export-actions,
  body.orev-mp4-ui-phase8 .inspector-panel {
    grid-template-columns: 1fr;
  }
  body.orev-mp4-ui-phase8 .panel-title {
    position: relative;
    top: auto;
    margin-top: 0;
    padding-top: 0;
  }
  body.orev-mp4-ui-phase8 .preview-frame,
  body.orev-mp4-ui-phase8 .orev-stage-frame {
    max-height: none;
  }
  body.orev-mp4-ui-phase8 .timeline-shell {
    min-height: 236px;
  }
}
@media (max-width: 740px) {
  body.orev-mp4-ui-phase8 .app-shell {
    padding: 8px;
    gap: 9px;
  }
  body.orev-mp4-ui-phase8 .orev-chrome-header,
  body.orev-mp4-ui-phase8 .panel,
  body.orev-mp4-ui-phase8 .workspace-overview {
    border-radius: 18px;
  }
  body.orev-mp4-ui-phase8 .chrome-brand {
    grid-template-columns: minmax(128px, 180px) minmax(0, 1fr);
  }
  body.orev-mp4-ui-phase8 .brand-logo-link {
    width: min(180px, 42vw);
  }
  body.orev-mp4-ui-phase8 .brand-copy h1 {
    font-size: clamp(1rem, 6vw, 1.38rem);
  }
  body.orev-mp4-ui-phase8 .brand-copy p {
    font-size: .76rem;
  }
  body.orev-mp4-ui-phase8 .phase7-export-ribbon,
  body.orev-mp4-ui-phase8 .phase8-accessibility-bar,
  body.orev-mp4-ui-phase8 .chrome-action-deck,
  body.orev-mp4-ui-phase8 .action-group,
  body.orev-mp4-ui-phase8 .transport-actions,
  body.orev-mp4-ui-phase8 .export-actions,
  body.orev-mp4-ui-phase8 .mini-row,
  body.orev-mp4-ui-phase8 .timeline-tools {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  body.orev-mp4-ui-phase8 .action-group .btn,
  body.orev-mp4-ui-phase8 .action-group .file-label,
  body.orev-mp4-ui-phase8 .mini-row .btn,
  body.orev-mp4-ui-phase8 .mini-row .file-label,
  body.orev-mp4-ui-phase8 .transport-actions .btn,
  body.orev-mp4-ui-phase8 .export-actions .btn {
    flex: 1 1 100%;
    justify-content: center;
    width: 100%;
  }
  body.orev-mp4-ui-phase8 .phase3-panel-kicker {
    align-items: flex-start;
    flex-direction: column;
  }
  body.orev-mp4-ui-phase8 .phase3-panel-kicker span {
    text-align: left;
  }
  body.orev-mp4-ui-phase8 .preview-badge {
    left: 8px;
    top: 8px;
    max-width: calc(100% - 16px);
  }
  body.orev-mp4-ui-phase8 .orev-stage-footer {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 520px) {
  body.orev-mp4-ui-phase8 .chrome-brand {
    grid-template-columns: 1fr;
  }
  body.orev-mp4-ui-phase8 .brand-logo-link {
    width: min(230px, 88vw);
  }
  body.orev-mp4-ui-phase8 .panel-title,
  body.orev-mp4-ui-phase8 .title-left {
    gap: 8px;
  }
  body.orev-mp4-ui-phase8 .panel-title > span {
    width: 30px;
    height: 30px;
  }
  body.orev-mp4-ui-phase8 .panel-title h2 {
    font-size: .98rem;
  }
  body.orev-mp4-ui-phase8 .drop-zone small,
  body.orev-mp4-ui-phase8 small.note {
    font-size: .76rem;
  }
  body.orev-mp4-ui-phase8 .timeline-item {
    min-width: 148px;
    max-width: min(82vw, 360px);
  }
}
@media (prefers-reduced-motion: reduce) {
  body.orev-mp4-ui-phase8 *,
  body.orev-mp4-ui-phase8 *::before,
  body.orev-mp4-ui-phase8 *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
  body.orev-mp4-ui-phase8 .btn:hover,
  body.orev-mp4-ui-phase8 .timeline-item.dragging,
  body.orev-mp4-ui-phase8 .phase5-timeline-card:hover,
  body.orev-mp4-ui-phase8 .phase5-clip-card:hover {
    transform: none !important;
  }
}
@media (forced-colors: active) {
  body.orev-mp4-ui-phase8 .btn,
  body.orev-mp4-ui-phase8 .file-label,
  body.orev-mp4-ui-phase8 .panel,
  body.orev-mp4-ui-phase8 .settings-group,
  body.orev-mp4-ui-phase8 .clip-card,
  body.orev-mp4-ui-phase8 .timeline-item,
  body.orev-mp4-ui-phase8 .phase7-command-card,
  body.orev-mp4-ui-phase8 .phase8-access-chip {
    forced-color-adjust: none;
    border: 1px solid CanvasText;
    color: CanvasText;
    background: Canvas;
  }
  body.orev-mp4-ui-phase8 .btn:focus-visible,
  body.orev-mp4-ui-phase8 input:focus-visible,
  body.orev-mp4-ui-phase8 select:focus-visible,
  body.orev-mp4-ui-phase8 a:focus-visible {
    outline: 3px solid Highlight;
    box-shadow: none !important;
  }
}


/* UI Phase 9 Repair - Compact Dropdown Masthead
   Rebased from Phase 8, then removes the oversized status/command rail from the failed Phase 9.
   Project/export commands stay functional via their original IDs, but now live in native dropdown menus. */
body.orev-mp4-ui-phase9-dropdown-fix .orev-chrome-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 104px;
  max-height: none;
  overflow: visible;
  gap: 12px;
  padding: 10px 12px;
}
body.orev-mp4-ui-phase9-dropdown-fix .chrome-main-row {
  min-height: 86px;
  overflow: hidden;
}
body.orev-mp4-ui-phase9-dropdown-fix .brand-logo-link {
  width: clamp(150px, 14vw, 214px);
  max-height: 86px;
}
body.orev-mp4-ui-phase9-dropdown-fix .brand-logo {
  max-height: 86px;
}
body.orev-mp4-ui-phase9-dropdown-fix .brand-copy h1 {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.orev-mp4-ui-phase9-dropdown-fix .brand-copy p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.orev-mp4-ui-phase9-dropdown-fix .chrome-status-strip {
  flex: 0 0 auto;
  align-content: center;
}
body.orev-mp4-ui-phase9-dropdown-fix .chrome-dropdown-deck {
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(2, minmax(154px, 176px));
  gap: 8px;
  align-self: center;
  justify-content: end;
  min-width: 326px;
  padding: 8px;
  border: 1px solid rgba(80,214,255,.18);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(80,214,255,.08), rgba(255,91,31,.055)),
    rgba(0,0,0,.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
}
body.orev-mp4-ui-phase9-dropdown-fix .chrome-menu {
  position: relative;
  min-width: 0;
}
body.orev-mp4-ui-phase9-dropdown-fix .chrome-menu summary {
  list-style: none;
  min-height: 42px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(243,198,110,.23);
  border-radius: 13px;
  color: #fff5dc;
  background:
    linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.025)),
    rgba(0,0,0,.24);
  box-shadow: 0 10px 20px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.02);
  cursor: pointer;
  user-select: none;
}
body.orev-mp4-ui-phase9-dropdown-fix .chrome-menu summary::-webkit-details-marker { display: none; }
body.orev-mp4-ui-phase9-dropdown-fix .chrome-menu summary::after {
  content: "▾";
  color: #79e7ff;
  font-size: .78rem;
  font-weight: 1000;
  transition: transform .14s ease;
}
body.orev-mp4-ui-phase9-dropdown-fix .chrome-menu[open] summary::after { transform: rotate(180deg); }
body.orev-mp4-ui-phase9-dropdown-fix .chrome-menu summary span {
  min-width: 0;
  color: #ffeab2;
  font-size: .70rem;
  font-weight: 1000;
  letter-spacing: .12em;
  text-transform: uppercase;
}
body.orev-mp4-ui-phase9-dropdown-fix .chrome-menu summary b {
  min-width: 0;
  max-width: 100%;
  color: #d3f7ff;
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .035em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.orev-mp4-ui-phase9-dropdown-fix .chrome-menu summary:hover,
body.orev-mp4-ui-phase9-dropdown-fix .chrome-menu[open] summary {
  border-color: rgba(80,214,255,.48);
  background:
    linear-gradient(135deg, rgba(255,91,31,.12), rgba(80,214,255,.10)),
    rgba(0,0,0,.28);
  box-shadow: 0 0 18px rgba(80,214,255,.10), inset 0 0 0 1px rgba(255,255,255,.035);
}
body.orev-mp4-ui-phase9-dropdown-fix .chrome-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 90;
  min-width: 240px;
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(80,214,255,.30);
  border-radius: 16px;
  background:
    radial-gradient(circle at 100% 0%, rgba(80,214,255,.16), transparent 32%),
    radial-gradient(circle at 0% 100%, rgba(255,91,31,.13), transparent 34%),
    linear-gradient(145deg, rgba(9,14,24,.98), rgba(3,5,10,.98));
  box-shadow: 0 22px 44px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.035);
}
body.orev-mp4-ui-phase9-dropdown-fix .chrome-menu-panel .btn,
body.orev-mp4-ui-phase9-dropdown-fix .chrome-menu-panel .file-label {
  width: 100%;
  justify-content: center;
  min-height: 40px;
}
body.orev-mp4-ui-phase9-dropdown-fix .compact-route-panel {
  grid-template-columns: 1fr;
  min-width: 230px;
}
body.orev-mp4-ui-phase9-dropdown-fix .phase9-route-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 7px 9px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  color: #f6f0df;
  background: rgba(255,255,255,.045);
  font-size: .68rem;
  font-weight: 1000;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-align: center;
}
body.orev-mp4-ui-phase9-dropdown-fix .phase9-route-pill.fire { border-color: rgba(255,91,31,.42); color: #ffd5bf; }
body.orev-mp4-ui-phase9-dropdown-fix .phase9-route-pill.gold { border-color: rgba(243,198,110,.42); color: #ffefbf; }
body.orev-mp4-ui-phase9-dropdown-fix .phase9-route-pill.ice { border-color: rgba(80,214,255,.48); color: #caf7ff; }
body.orev-mp4-ui-phase9-dropdown-fix .phase9-route-pill.raven { border-color: rgba(154,167,189,.42); color: #dfe7f8; }
body.orev-mp4-ui-phase9-dropdown-fix .workspace {
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "library preview inspector";
}
body.orev-mp4-ui-phase9-dropdown-fix .phase7-export-ribbon,
body.orev-mp4-ui-phase9-dropdown-fix .phase8-accessibility-bar,
body.orev-mp4-ui-phase9-dropdown-fix .workspace-overview {
  display: none !important;
}
body.orev-mp4-ui-phase9-dropdown-fix .btn:hover,
body.orev-mp4-ui-phase9-dropdown-fix .file-label:hover,
body.orev-mp4-ui-phase9-dropdown-fix .clip-card:hover,
body.orev-mp4-ui-phase9-dropdown-fix .timeline-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 18px rgba(80,214,255,.08);
}
body.orev-mp4-ui-phase9-dropdown-fix .btn:active,
body.orev-mp4-ui-phase9-dropdown-fix .file-label:active {
  transform: translateY(0) scale(.99);
}
@media (max-width: 1340px) {
  body.orev-mp4-ui-phase9-dropdown-fix .orev-chrome-header {
    grid-template-columns: 1fr;
  }
  body.orev-mp4-ui-phase9-dropdown-fix .chrome-dropdown-deck {
    width: 100%;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-width: 0;
  }
  body.orev-mp4-ui-phase9-dropdown-fix .chrome-menu-panel {
    left: 0;
    right: auto;
  }
}
@media (max-width: 1280px) {
  body.orev-mp4-ui-phase9-dropdown-fix .workspace {
    grid-template-columns: minmax(260px, .80fr) minmax(480px, 1.32fr);
    grid-template-areas:
      "library preview"
      "inspector inspector";
  }
}
@media (max-width: 980px) {
  body.orev-mp4-ui-phase9-dropdown-fix .workspace {
    grid-template-columns: 1fr;
    grid-template-areas:
      "library"
      "preview"
      "inspector";
  }
  body.orev-mp4-ui-phase9-dropdown-fix .chrome-main-row {
    overflow: visible;
  }
}
@media (max-width: 740px) {
  body.orev-mp4-ui-phase9-dropdown-fix .chrome-brand {
    grid-template-columns: minmax(116px, 158px) minmax(0, 1fr);
  }
  body.orev-mp4-ui-phase9-dropdown-fix .brand-logo-link {
    width: min(158px, 42vw);
  }
  body.orev-mp4-ui-phase9-dropdown-fix .chrome-dropdown-deck {
    grid-template-columns: 1fr 1fr;
  }
  body.orev-mp4-ui-phase9-dropdown-fix .chrome-menu-panel {
    min-width: min(286px, calc(100vw - 36px));
  }
  body.orev-mp4-ui-phase9-dropdown-fix .route-menu .chrome-menu-panel,
  body.orev-mp4-ui-phase9-dropdown-fix .access-menu .chrome-menu-panel {
    left: auto;
    right: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.orev-mp4-ui-phase9-dropdown-fix .chrome-menu summary::after,
  body.orev-mp4-ui-phase9-dropdown-fix .btn,
  body.orev-mp4-ui-phase9-dropdown-fix .file-label,
  body.orev-mp4-ui-phase9-dropdown-fix .clip-card,
  body.orev-mp4-ui-phase9-dropdown-fix .timeline-item {
    transition: none !important;
    animation: none !important;
  }
  body.orev-mp4-ui-phase9-dropdown-fix .btn:hover,
  body.orev-mp4-ui-phase9-dropdown-fix .file-label:hover,
  body.orev-mp4-ui-phase9-dropdown-fix .clip-card:hover,
  body.orev-mp4-ui-phase9-dropdown-fix .timeline-item:hover {
    transform: none;
  }
}

/* UI Phase 9.1 Hotfix - Dropdown stacking + non-floating inspector title
   Fixes the bad Phase 9 dropdown layering and the sticky inspector title overlay.
   Functional IDs and export/media logic are unchanged. */
body.orev-mp4-ui-phase9-dropdown-fix .app-shell {
  isolation: isolate;
}
body.orev-mp4-ui-phase9-dropdown-fix .topbar,
body.orev-mp4-ui-phase9-dropdown-fix .orev-chrome-header {
  position: relative !important;
  z-index: 5000 !important;
  overflow: visible !important;
  max-height: none !important;
}
body.orev-mp4-ui-phase9-dropdown-fix .chrome-main-row {
  position: relative;
  z-index: 1;
  overflow: hidden;
}
body.orev-mp4-ui-phase9-dropdown-fix .chrome-dropdown-deck {
  position: relative !important;
  z-index: 5100 !important;
  overflow: visible !important;
  align-self: center;
}
body.orev-mp4-ui-phase9-dropdown-fix .chrome-menu {
  position: relative !important;
  z-index: 1;
}
body.orev-mp4-ui-phase9-dropdown-fix .chrome-menu[open] {
  z-index: 5200 !important;
}
body.orev-mp4-ui-phase9-dropdown-fix .chrome-menu[open] summary {
  position: relative;
  z-index: 5201;
}
body.orev-mp4-ui-phase9-dropdown-fix .chrome-menu-panel {
  z-index: 5300 !important;
  max-width: min(360px, calc(100vw - 32px));
  pointer-events: auto;
}
body.orev-mp4-ui-phase9-dropdown-fix .workspace {
  position: relative;
  z-index: 1;
  overflow: hidden;
}
body.orev-mp4-ui-phase9-dropdown-fix .workspace > .panel,
body.orev-mp4-ui-phase9-dropdown-fix .workspace-overview {
  position: relative;
  z-index: 1;
}
body.orev-mp4-ui-phase9-dropdown-fix .inspector-panel {
  position: relative;
  z-index: 1;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scroll-padding-top: 12px;
}
body.orev-mp4-ui-phase9-dropdown-fix .inspector-panel > .panel-title,
body.orev-mp4-ui-phase9-dropdown-fix .inspector-panel > .phase3-panel-kicker,
body.orev-mp4-ui-phase9-dropdown-fix .inspector-panel > .phase6-inspector-map {
  position: relative !important;
  top: auto !important;
  z-index: 1 !important;
  margin-top: 0 !important;
  transform: none !important;
}
body.orev-mp4-ui-phase9-dropdown-fix .inspector-panel > .panel-title {
  padding: 0 0 10px !important;
  border-bottom: 1px solid rgba(243,198,110,.16);
  background: transparent !important;
  backdrop-filter: none !important;
}
body.orev-mp4-ui-phase9-dropdown-fix .inspector-panel .settings-group.phase6-section {
  position: relative;
  z-index: 1;
  overflow: visible;
}
body.orev-mp4-ui-phase9-dropdown-fix .phase6-inspector-map {
  margin-bottom: 2px;
}
body.orev-mp4-ui-phase9-dropdown-fix .phase6-map-node {
  min-height: 52px;
}
body.orev-mp4-ui-phase9-dropdown-fix .chrome-menu summary {
  overflow: hidden;
}
body.orev-mp4-ui-phase9-dropdown-fix .chrome-menu summary span,
body.orev-mp4-ui-phase9-dropdown-fix .chrome-menu summary b {
  line-height: 1.1;
}
@media (max-width: 1340px) {
  body.orev-mp4-ui-phase9-dropdown-fix .chrome-menu-panel {
    left: auto;
    right: 0;
  }
  body.orev-mp4-ui-phase9-dropdown-fix .project-menu .chrome-menu-panel,
  body.orev-mp4-ui-phase9-dropdown-fix .route-menu .chrome-menu-panel {
    left: 0;
    right: auto;
  }
}
@media (max-width: 980px) {
  body.orev-mp4-ui-phase9-dropdown-fix .workspace,
  body.orev-mp4-ui-phase9-dropdown-fix .panel,
  body.orev-mp4-ui-phase9-dropdown-fix .library-panel,
  body.orev-mp4-ui-phase9-dropdown-fix .preview-panel,
  body.orev-mp4-ui-phase9-dropdown-fix .inspector-panel {
    overflow: visible !important;
  }
}


/* UI Phase 10 - Final Brand QA + Exclusive Dropdown Menu Guard
   Keeps the compact Phase 9.1 repair, then hardens dropdown behavior and final release polish.
   Menu logic is in js/app.js and preserves all project/export IDs. */
body.orev-mp4-ui-phase10-final .phase-chip {
  background: linear-gradient(135deg, rgba(243,198,110,.92), rgba(80,214,255,.72));
  color: #071019;
  box-shadow: 0 0 18px rgba(80,214,255,.12), inset 0 0 0 1px rgba(255,255,255,.28);
}
body.orev-mp4-ui-phase10-final .chrome-dropdown-deck {
  z-index: 6100 !important;
}
body.orev-mp4-ui-phase10-final .chrome-menu {
  contain: layout style;
}
body.orev-mp4-ui-phase10-final .chrome-menu[open] {
  z-index: 6400 !important;
}
body.orev-mp4-ui-phase10-final .chrome-menu[open] summary,
body.orev-mp4-ui-phase10-final .chrome-menu.is-open summary {
  border-color: rgba(243,198,110,.58);
  box-shadow: 0 0 0 1px rgba(80,214,255,.20), 0 0 22px rgba(80,214,255,.13), inset 0 0 0 1px rgba(255,255,255,.05);
}
body.orev-mp4-ui-phase10-final .chrome-menu-panel {
  z-index: 6600 !important;
  animation: phase10MenuIn .12s ease-out;
}
body.orev-mp4-ui-phase10-final .chrome-menu-panel::before {
  content: "One menu active";
  display: block;
  margin-bottom: 2px;
  color: rgba(255,239,191,.72);
  font-size: .60rem;
  font-weight: 1000;
  letter-spacing: .14em;
  text-transform: uppercase;
}
body.orev-mp4-ui-phase10-final .chrome-menu summary:focus-visible {
  outline: 3px solid rgba(80,214,255,.72);
  outline-offset: 3px;
}
body.orev-mp4-ui-phase10-final .status-node.ice {
  border-color: rgba(80,214,255,.54);
  background: linear-gradient(135deg, rgba(80,214,255,.16), rgba(243,198,110,.10));
}
body.orev-mp4-ui-phase10-final .inspector-panel {
  scroll-behavior: smooth;
}
@keyframes phase10MenuIn {
  from { opacity: 0; transform: translateY(-4px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  body.orev-mp4-ui-phase10-final .chrome-menu-panel {
    animation: none !important;
  }
}


/* UI Phase 10.1 - Export Toast + Long Recording Audio Guard
   Adds a minimal bottom-right notification surface for export details.
   Also keeps dropdown/inspector fixes from Phase 10. No layout-driving controls live here. */
body.orev-mp4-ui-phase10-export-guard .phase-chip {
  background: linear-gradient(135deg, rgba(255,122,45,.94), rgba(80,214,255,.78));
}
.export-toast {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  width: min(360px, calc(100vw - 32px));
  z-index: 12000;
  padding: 12px 13px 13px;
  border: 1px solid rgba(80,214,255,.34);
  border-radius: 18px;
  background:
    radial-gradient(circle at 14% 0%, rgba(255,122,45,.22), transparent 42%),
    radial-gradient(circle at 100% 100%, rgba(80,214,255,.18), transparent 46%),
    linear-gradient(145deg, rgba(8,13,20,.96), rgba(16,20,27,.94));
  box-shadow: 0 18px 42px rgba(0,0,0,.42), 0 0 0 1px rgba(243,198,110,.12), inset 0 0 24px rgba(80,214,255,.05);
  color: var(--text, #f8ead0);
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
  transition: opacity .16s ease, transform .16s ease;
}
.export-toast.is-hidden {
  opacity: 0;
  transform: translateY(12px) scale(.985);
  pointer-events: none;
}
.export-toast__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
}
.export-toast__kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255,231,176,.82);
  font-size: .66rem;
  font-weight: 1000;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.export-toast__kicker::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #50d6ff;
  box-shadow: 0 0 12px rgba(80,214,255,.7);
}
.export-toast.is-good .export-toast__kicker::before { background: #74ffb2; box-shadow: 0 0 12px rgba(116,255,178,.68); }
.export-toast.is-warn .export-toast__kicker::before { background: #f3c66e; box-shadow: 0 0 12px rgba(243,198,110,.68); }
.export-toast.is-danger .export-toast__kicker::before { background: #ff6a4a; box-shadow: 0 0 12px rgba(255,106,74,.72); }
.export-toast__close {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(243,198,110,.24);
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  color: rgba(255,239,210,.88);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.export-toast__close:hover,
.export-toast__close:focus-visible {
  border-color: rgba(80,214,255,.62);
  box-shadow: 0 0 0 3px rgba(80,214,255,.16);
  outline: none;
}
.export-toast__title {
  display: block;
  color: #fff4dc;
  font-size: .95rem;
  line-height: 1.25;
  margin-bottom: 4px;
  text-shadow: 0 0 12px rgba(243,198,110,.18);
}
.export-toast__message {
  margin: 0 0 6px;
  color: rgba(255,239,210,.82);
  font-size: .82rem;
  line-height: 1.35;
}
.export-toast__detail {
  color: rgba(164,225,255,.82);
  font-size: .72rem;
  line-height: 1.35;
  min-height: 1em;
}
.export-toast__bar {
  height: 5px;
  margin-top: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
.export-toast__bar span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff7a2d, #f3c66e 46%, #50d6ff);
  box-shadow: 0 0 14px rgba(80,214,255,.34);
  transition: width .18s ease;
}
.export-toast.is-active .export-toast__bar span {
  animation: exportToastPulse 1.8s ease-in-out infinite;
}
@keyframes exportToastPulse {
  0%, 100% { filter: brightness(.95); }
  50% { filter: brightness(1.25); }
}
@media (max-width: 640px) {
  .export-toast {
    left: 16px;
    right: 16px;
    bottom: max(14px, env(safe-area-inset-bottom));
    width: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .export-toast,
  .export-toast__bar span {
    transition: none !important;
    animation: none !important;
  }
}