:root {
  color-scheme: light;
  --bg: #eef2f6;
  --panel: #ffffff;
  --panel-rgb: 255, 255, 255;
  --panel-soft: #f7f9fc;
  --text: #172033;
  --muted: #5f6b7c;
  --subtle: #8a95a6;
  --line: #d9e0ea;
  --line-strong: #b8c3d3;
  --accent: #0f6f78;
  --accent-strong: #0a5d64;
  --accent-hover: #0a5d64;
  --accent-contrast: #ffffff;
  --accent-soft: #e6f4f5;
  --open: #9a5b00;
  --open-soft: #fff4df;
  --approved: #147a45;
  --approved-hover: #0f6538;
  --approved-contrast: #ffffff;
  --approved-soft: #e5f6ed;
  --rejected: #b42318;
  --rejected-hover: #941b13;
  --rejected-contrast: #ffffff;
  --rejected-soft: #fee9e7;
  --control: #ffffff;
  --control-hover: #f7f9fc;
  --focus-ring: #8ac8ce;
  --progress-track: #e6ebf2;
  --stage-bg: #f9fbfd;
  --stage-check-a: #edf2f8;
  --stage-check-b: transparent;
  --topbar-bg: rgba(255, 255, 255, 0.96);
  --shadow: 0 18px 48px rgba(23, 32, 51, 0.12);
  --soft-shadow: 0 1px 1px rgba(23, 32, 51, 0.04);
  --hover-shadow: 0 6px 14px rgba(23, 32, 51, 0.08);
  --backdrop: rgba(23, 32, 51, 0.48);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e121b;
  --panel: #151b27;
  --panel-rgb: 21, 27, 39;
  --panel-soft: #1b2331;
  --text: #eef4ff;
  --muted: #aab6c8;
  --subtle: #8290a5;
  --line: #2a3546;
  --line-strong: #435067;
  --accent: #67d5df;
  --accent-strong: #7ee5ec;
  --accent-hover: #8fe7ee;
  --accent-contrast: #071018;
  --accent-soft: #102f36;
  --open: #f0bd62;
  --open-soft: #332713;
  --approved: #7bd69d;
  --approved-hover: #95e4af;
  --approved-contrast: #07140c;
  --approved-soft: #123522;
  --rejected: #ff8b80;
  --rejected-hover: #ffa198;
  --rejected-contrast: #1e0706;
  --rejected-soft: #3a1b1d;
  --control: #111827;
  --control-hover: #1a2433;
  --focus-ring: #4fc4cf;
  --progress-track: #253044;
  --stage-bg: #0f141d;
  --stage-check-a: #151d29;
  --stage-check-b: transparent;
  --topbar-bg: rgba(14, 18, 27, 0.94);
  --shadow: 0 18px 48px rgba(0, 0, 0, 0.46);
  --soft-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);
  --hover-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
  --backdrop: rgba(3, 7, 14, 0.68);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.45;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

a {
  color: var(--accent);
  font-weight: 700;
}

.review-shell {
  min-height: 100vh;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--line);
  background: var(--topbar-bg);
  backdrop-filter: blur(12px);
}

.topbar-inner {
  width: min(1780px, calc(100vw - 28px));
  margin: 0 auto;
  padding: 14px 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
}

.topbar-title {
  min-width: 0;
}

.topbar-actions {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.theme-toggle {
  min-width: 76px;
  white-space: nowrap;
}

.crumbs,
.meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}

.crumbs {
  margin-bottom: 5px;
}

.topbar h1 {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 21px;
  line-height: 1.16;
  letter-spacing: 0;
}

.meta-row {
  margin-top: 7px;
}

.status-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(88px, 1fr));
  gap: 8px;
}

.status-summary div {
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.status-summary span,
.brief-facts span {
  display: block;
  color: var(--subtle);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}

.status-summary strong {
  display: block;
  margin-top: 2px;
  color: var(--text);
  font-size: 16px;
  line-height: 1.1;
}

.review-workspace {
  width: min(1780px, calc(100vw - 28px));
  margin: 0 auto;
  padding: 14px 0 14px;
  display: grid;
  grid-template-columns: 320px minmax(560px, 1fr) 430px;
  gap: 14px;
  align-items: start;
  transition: grid-template-columns 180ms ease;
}

.review-workspace.queue-collapsed {
  grid-template-columns: 58px minmax(560px, 1fr) 430px;
}

.submission-footer {
  width: min(1780px, calc(100vw - 28px));
  margin: 0 auto;
  padding: 0 0 24px;
}

.sidebar,
.viewer-card,
.context-card,
.review-brief,
.sync-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--soft-shadow);
}

.sidebar {
  position: sticky;
  top: 94px;
  overflow: hidden;
  height: calc(100vh - 112px);
  min-height: 620px;
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.sidebar.collapsed {
  background: var(--panel-soft);
}

.sidebar-content {
  height: 100%;
  transition:
    opacity 160ms ease,
    transform 180ms ease,
    visibility 180ms ease;
}

.sidebar.collapsed .sidebar-content {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-12px);
  visibility: hidden;
}

.queue-toggle {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  min-height: 30px;
  padding: 5px 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--control);
  color: var(--text);
  cursor: pointer;
  font-size: 11px;
  font-weight: 850;
  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease,
    transform 140ms ease;
}

.queue-toggle:hover {
  border-color: var(--accent);
  background: var(--control-hover);
  box-shadow: var(--hover-shadow);
  transform: translateY(-1px);
}

.queue-toggle:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.sidebar.collapsed .queue-toggle {
  right: 50%;
  transform: translateX(50%);
}

.sidebar.collapsed .queue-toggle:hover {
  transform: translateX(50%) translateY(-1px);
}

.queue-collapsed-label {
  position: absolute;
  inset: 58px 0 auto;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0;
  opacity: 0;
  pointer-events: none;
  text-transform: uppercase;
  transform: translateY(8px);
  transition:
    opacity 160ms ease,
    transform 180ms ease;
}

.queue-collapsed-label strong {
  color: var(--text);
  font-size: 16px;
  line-height: 1;
}

.sidebar.collapsed .queue-collapsed-label {
  opacity: 1;
  transform: translateY(0);
}

.sidebar-header {
  padding: 12px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-soft);
}

.progress-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
  color: var(--muted);
  font-size: 12px;
}

.progress-line strong {
  color: var(--text);
  font-size: 13px;
}

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

.progress-bar {
  height: 100%;
  width: 0;
  background: var(--accent);
}

.filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 11px;
}

.filter-btn,
.btn {
  min-height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--control);
  color: var(--text);
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease,
    color 140ms ease,
    transform 140ms ease;
}

.filter-btn.active,
.segmented button.active {
  border-color: #8ac8ce;
  background: var(--accent-soft);
  color: var(--accent);
}

.filter-btn:hover:not(.active):not(:disabled),
.btn:hover:not(:disabled) {
  border-color: var(--accent);
  background: var(--control-hover);
  box-shadow: var(--hover-shadow);
  transform: translateY(-1px);
}

.filter-btn:active:not(:disabled),
.btn:active:not(:disabled) {
  box-shadow: none;
  transform: translateY(0);
}

.filter-btn:focus-visible,
.btn:focus-visible,
.snapshot-button:focus-visible,
.segmented button:focus-visible,
.annotation-edit-field:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.search,
.group-select,
.token-input,
.review-comment-field textarea,
.annotation-edit-field {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--control);
  color: var(--text);
  padding: 8px 10px;
  font-size: 13px;
}

.search,
.group-select,
.token-input {
  min-height: 38px;
}

.search {
  margin-top: 10px;
}

.group-select {
  margin-top: 8px;
}

.snapshot-list {
  height: calc(100% - 176px);
  overflow: auto;
  padding: 8px;
}

.snapshot-button {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 9px;
  align-items: start;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease,
    transform 140ms ease;
}

.snapshot-button:hover {
  border-color: var(--line);
  background: var(--panel-soft);
  box-shadow: var(--hover-shadow);
  transform: translateY(-1px);
}

.snapshot-button:active {
  box-shadow: none;
  transform: translateY(0);
}

.snapshot-button.active {
  border-color: #8ac8ce;
  background: var(--accent-soft);
}

.status-dot {
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 999px;
  background: var(--subtle);
}

.status-dot.changed,
.status-dot.new,
.status-dot.deleted {
  background: var(--open);
}

.status-dot.passed {
  background: var(--approved);
}

.snapshot-name {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.snapshot-sub {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.snapshot-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}

.snapshot-meta span {
  min-height: 20px;
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--control);
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.review-state {
  min-width: 58px;
  text-align: right;
  color: var(--subtle);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.review-state.approved {
  color: var(--approved);
}

.review-state.rejected {
  color: var(--rejected);
}

.canvas-column {
  display: grid;
  min-width: 0;
  gap: 12px;
}

.viewer-card {
  min-width: 0;
  overflow: hidden;
}

.viewer-toolbar {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}

.snapshot-heading {
  min-width: 0;
}

.snapshot-heading h2 {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 18px;
  line-height: 1.24;
  letter-spacing: 0;
}

.snapshot-heading p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.toolbar-controls,
.decision-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.toolbar-controls {
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.toolbar-controls > * {
  min-width: 0;
}

.btn {
  padding: 7px 10px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn.primary {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-contrast);
}

.btn.primary:hover:not(:disabled) {
  border-color: var(--accent-hover);
  background: var(--accent-hover);
  color: var(--accent-contrast);
}

.btn:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.btn:disabled:hover {
  box-shadow: none;
  transform: none;
}

.btn.approve {
  border-color: var(--approved);
  background: var(--approved);
  color: var(--approved-contrast);
}

.btn.approve:hover:not(:disabled) {
  border-color: var(--approved-hover);
  background: var(--approved-hover);
  color: var(--approved-contrast);
}

.btn.reject {
  border-color: var(--rejected);
  background: var(--rejected);
  color: var(--rejected-contrast);
}

.btn.reject:hover:not(:disabled) {
  border-color: var(--rejected-hover);
  background: var(--rejected-hover);
  color: var(--rejected-contrast);
}

.segmented {
  display: flex;
  flex: 1 1 430px;
  flex-wrap: wrap;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--control);
}

.segmented button {
  min-height: 34px;
  flex: 1 1 118px;
  border: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 850;
  transition:
    background-color 140ms ease,
    color 140ms ease,
    transform 140ms ease;
}

.segmented.disabled {
  opacity: 0.58;
}

.segmented button:disabled {
  cursor: not-allowed;
}

.segmented button:disabled:hover {
  background: transparent;
  color: var(--muted);
}

.segmented button:disabled:active {
  transform: none;
}

.segmented button:last-child {
  border-right: 0;
}

.segmented button:nth-last-child(-n + 4) {
  border-bottom: 0;
}

.segmented button:hover:not(.active) {
  background: var(--panel-soft);
  color: var(--text);
}

.segmented button:active {
  transform: translateY(1px);
}

.range-row {
  display: flex;
  align-items: center;
  flex: 1 1 220px;
  gap: 8px;
  min-width: min(100%, 210px);
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.range-row input {
  flex: 1 1 100px;
  min-width: 86px;
}

.heatmap-controls {
  flex: 1 1 350px;
  min-height: 38px;
  min-width: min(100%, 280px);
  padding: 3px;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--control);
}

.heatmap-controls.active {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.heatmap-toggle {
  flex: 0 0 auto;
  min-width: 116px;
  gap: 8px;
  justify-content: space-between;
}

.heatmap-toggle.active {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-contrast);
  box-shadow: 0 0 0 2px var(--focus-ring);
}

.heatmap-toggle.active:hover:not(:disabled) {
  border-color: var(--accent-hover);
  background: var(--accent-hover);
  color: var(--accent-contrast);
}

.heatmap-status {
  min-width: 28px;
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
}

.heatmap-toggle.active .heatmap-status {
  border-color: rgba(255, 255, 255, 0.36);
  background: rgba(255, 255, 255, 0.22);
  color: currentColor;
}

.heatmap-intensity {
  flex: 1 1 180px;
  padding: 0 5px 0 2px;
}

.heatmap-intensity.disabled {
  opacity: 0.5;
}

.heatmap-intensity input {
  flex: 1 1 92px;
  min-width: 72px;
}

.overlay-reveal {
  flex: 1 1 300px;
  min-width: min(100%, 260px);
}

.overlay-reveal input {
  flex: 1 1 150px;
  min-width: 120px;
}

.stage-shell {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
}

.stage {
  height: calc(100vh - 286px);
  min-height: 520px;
  box-sizing: border-box;
  background:
    linear-gradient(45deg, var(--stage-check-a) 25%, var(--stage-check-b) 25%),
    linear-gradient(-45deg, var(--stage-check-a) 25%, var(--stage-check-b) 25%),
    linear-gradient(45deg, var(--stage-check-b) 75%, var(--stage-check-a) 75%),
    linear-gradient(-45deg, var(--stage-check-b) 75%, var(--stage-check-a) 75%);
  background-color: var(--stage-bg);
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
  background-size: 20px 20px;
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: none;
  user-select: none;
}

.stage[data-pannable="true"] {
  cursor: grab;
}

.stage[data-panning="true"] {
  cursor: grabbing;
}

.stage img {
  -webkit-user-drag: none;
  user-select: none;
}

.stage-control-bar {
  position: relative;
  z-index: 8;
  box-sizing: border-box;
  width: 100%;
  padding: 16px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-soft);
  display: grid;
  gap: 10px;
  justify-items: center;
}

.stage-control-bar.tools-hidden {
  padding-block: 10px;
}

.stage-control-toggle-row {
  display: flex;
  justify-content: center;
  width: 100%;
}

.tools-toggle {
  min-height: 34px;
  min-width: 104px;
  gap: 8px;
  border-radius: 999px;
}

.tools-toggle.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

.tools-status {
  min-width: 28px;
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
}

.stage-control-bar .toolbar-controls {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 6px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.stage-inner {
  width: max-content;
  min-width: max-content;
  padding: 26px 18px 18px;
  display: grid;
  place-items: start center;
  transform-origin: top left;
}

.image-grid {
  display: grid;
  gap: 14px;
  width: 100%;
}

.image-grid.two-up {
  grid-template-columns: repeat(2, minmax(320px, 1fr));
}

.image-panel,
.solo-image,
.overlay-frame,
.heatmap-frame {
  background: var(--control);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.image-panel {
  min-width: 0;
  overflow: hidden;
}

.image-panel h3 {
  margin: 0;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0;
  text-transform: uppercase;
}

.image-panel img,
.solo-image {
  display: block;
  max-width: min(100%, 1200px);
  width: auto;
  height: auto;
  margin: 0 auto;
}

.solo-image {
  overflow: hidden;
}

.heatmap-frame {
  position: relative;
  display: block;
  max-width: min(100%, 1200px);
  margin: 0 auto;
  overflow: hidden;
}

.heatmap-frame > img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0;
}

.image-panel .heatmap-frame,
.overlay-top .heatmap-frame,
.blink-frame > .heatmap-frame {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  max-width: none;
}

.heatmap-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: normal;
  opacity: var(--heat-map-opacity, 1);
}

.overlay-frame {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  overflow: hidden;
}

.overlay-frame img {
  display: block;
  width: 100%;
  height: auto;
}

.overlay-top {
  position: absolute;
  inset: 0;
  width: 100%;
  overflow: hidden;
  clip-path: inset(0 calc(100% - var(--overlay-reveal, 50%)) 0 0);
  will-change: clip-path;
}

.overlay-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--accent);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.24);
  pointer-events: none;
  transform: translateX(-1px);
}

.blink-frame img + img,
.blink-frame img + .heatmap-frame {
  position: absolute;
  inset: 0;
  animation: visualBlink 1.1s steps(1) infinite;
}

.blink-frame > .heatmap-frame {
  width: 100%;
  max-width: none;
  margin: 0;
}

@keyframes visualBlink {
  0%,
  49% {
    opacity: 0;
  }
  50%,
  100% {
    opacity: 1;
  }
}

.review-panel {
  position: sticky;
  top: 94px;
  display: grid;
  max-height: calc(100vh - 112px);
  min-height: 620px;
  gap: 12px;
  overflow: auto;
}

.review-brief,
.sync-panel,
.context-card {
  padding: 14px;
}

.brief-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.decision-pill {
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--muted);
}

.decision-pill.open {
  border-color: #f0c67a;
  background: var(--open-soft);
  color: var(--open);
}

.decision-pill.approved {
  border-color: #a7dcbf;
  background: var(--approved-soft);
  color: var(--approved);
}

.decision-pill.rejected {
  border-color: #f7b7b0;
  background: var(--rejected-soft);
  color: var(--rejected);
}

.review-brief h2 {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 20px;
  line-height: 1.22;
  letter-spacing: 0;
}

.brief-description {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.metadata-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.metadata-chip {
  min-height: 22px;
  padding: 3px 8px;
  border: 1px solid #8ac8ce;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11px;
  font-weight: 850;
}

.brief-section {
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
}

.brief-section h3,
.review-sequence-heading h3,
.review-step h4,
.sync-main strong {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.25;
}

.brief-section p,
.review-sequence-heading p,
.review-step p,
.sync-main p,
.keyboard-help {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.review-sequence {
  margin-top: 16px;
}

.review-sequence-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.review-sequence-heading p {
  margin: 0;
  font-weight: 850;
}

.review-step-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.review-step {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}

.review-step:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.decision-step {
  margin-top: 2px;
  padding: 15px 0 2px;
}

.review-step.decision-step:last-child {
  padding-bottom: 2px;
}

.step-number {
  display: inline-flex;
  width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: 12px;
  font-weight: 900;
}

.step-body {
  min-width: 0;
}

.step-body > p:first-of-type {
  margin-top: 5px;
}

.review-link-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.review-link-row .btn {
  min-width: 0;
  min-height: 32px;
  overflow-wrap: anywhere;
  text-align: center;
}

.decision-rule {
  font-weight: 750;
}

.review-focus-list {
  display: grid;
  gap: 8px;
  margin: 9px 0 0;
  padding: 0;
  list-style: none;
}

.review-focus-list li {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-soft);
  color: var(--text);
  font-size: 13px;
}

.brief-facts {
  display: grid;
  gap: 8px;
  margin-top: 9px;
}

.review-step .brief-facts {
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--control);
}

.brief-facts div {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-soft);
}

.review-step .brief-facts div {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 10px;
  padding: 8px 10px;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.review-step .brief-facts div:first-child {
  border-top: 0;
}

.brief-facts strong {
  display: block;
  margin-top: 3px;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 12px;
  font-weight: 750;
}

.review-step .brief-facts strong {
  margin-top: 0;
}

.decision-actions {
  margin-top: 10px;
}

.decision-actions .btn {
  flex: 1 1 130px;
}

.decision-progress {
  color: var(--muted);
  font-weight: 800;
}

.review-comment-field {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.review-comment-field span,
.inline-comment-target span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.review-comment-field textarea {
  width: 100%;
  min-height: 64px;
  resize: vertical;
  line-height: 1.45;
}

.inline-comment-target {
  display: grid;
  gap: 4px;
  margin-top: 10px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--control);
}

.inline-comment-target strong {
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 12px;
}

.inline-comment-target a {
  color: var(--accent);
  font-size: 12px;
  font-weight: 850;
}

.inline-comment-target p {
  margin-top: 0;
}

.inline-comment-target.missing {
  border-color: #f0c67a;
  background: var(--open-soft);
}

.inline-comment-actions {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.inline-comment-actions .btn {
  width: 100%;
}

.comment-status {
  min-height: 20px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.4;
}

.comment-status.ready {
  color: var(--approved);
}

.comment-status.error {
  color: var(--rejected);
}

.comment-status.loading {
  color: var(--accent);
}

.sync-panel.ready {
  border-color: #a7dcbf;
}

.sync-panel.loading {
  border-color: #8ac8ce;
  background: var(--accent-soft);
}

.sync-panel.error {
  border-color: #f7b7b0;
  background: var(--rejected-soft);
}

.submission-footer .sync-panel {
  padding: 16px;
  display: grid;
  grid-template-columns: minmax(300px, 0.95fr) minmax(360px, 1fr) minmax(380px, 0.95fr);
  gap: 14px;
  align-items: start;
}

.submission-overview {
  min-width: 0;
  display: grid;
  gap: 12px;
  align-content: start;
}

.sync-main {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.sync-kicker {
  display: block;
  margin-bottom: 3px;
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.sync-description {
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.sync-badge {
  flex: 0 0 auto;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--control);
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.submission-readiness,
.sync-submit-column {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--control);
}

.submission-readiness > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.submission-readiness > strong {
  display: block;
  margin-top: 3px;
  color: var(--text);
  font-size: 16px;
  line-height: 1.2;
}

.submission-readiness p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.submission-readiness.ready {
  border-color: #a7dcbf;
  background: var(--approved-soft);
}

.submission-readiness.open {
  border-color: #f0c67a;
  background: var(--open-soft);
}

.submission-readiness.blocked {
  border-color: #f7b7b0;
  background: var(--rejected-soft);
}

.submission-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.submission-metrics div {
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(var(--panel-rgb), 0.72);
}

.submission-metrics span {
  display: block;
  color: var(--subtle);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.submission-metrics strong {
  display: block;
  margin-top: 2px;
  color: var(--text);
  font-size: 16px;
  line-height: 1.1;
}

.sync-status-line {
  display: grid;
  gap: 3px;
  margin-top: 12px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--control);
}

.sync-submit-column .sync-status-line {
  margin-top: 0;
}

.sync-status-line span,
.token-field span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.sync-status-line strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.35;
}

.sync-steps {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sync-steps li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
}

.sync-steps li > span {
  display: inline-flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 900;
}

.sync-steps p {
  margin: 1px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.sync-steps strong {
  color: var(--text);
}

.token-field {
  display: grid;
  gap: 6px;
  margin-top: 12px;
}

.token-input {
  width: 100%;
}

.token-field small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.sync-action-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.sync-action-group .btn {
  flex: 1 1 calc(50% - 4px);
}

.sync-action-group-final .btn {
  flex-basis: 100%;
}

.submission-footer .sync-action-group-final {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.context-card {
  color: var(--muted);
}

.context-card .keyboard-help {
  margin: 0;
}

kbd {
  display: inline-flex;
  min-width: 20px;
  justify-content: center;
  padding: 1px 5px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: var(--control);
  color: var(--text);
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
}

.empty-list {
  padding: 28px 14px;
  color: var(--muted);
  text-align: center;
  font-size: 14px;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: var(--backdrop);
}

.token-help-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 20px;
  pointer-events: none;
}

.token-help-card {
  width: min(720px, 100%);
  max-height: min(720px, calc(100vh - 40px));
  overflow: auto;
  padding: 18px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
  pointer-events: auto;
}

.token-help-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.token-help-kicker {
  margin: 0 0 4px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}

.token-help-header h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: 0;
}

.token-help-intro,
.token-help-direct,
.token-help-note {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.token-help-direct a {
  color: var(--accent);
  font-weight: 850;
}

.token-help-steps {
  display: grid;
  gap: 8px;
  margin: 14px 0 0;
  padding-left: 22px;
}

.token-help-steps li {
  padding-left: 4px;
  color: var(--text);
  font-size: 14px;
}

.token-help-permissions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.token-help-permissions div {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-soft);
}

.token-help-permissions span {
  display: block;
  color: var(--subtle);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}

.token-help-permissions strong {
  display: block;
  margin-top: 3px;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 13px;
}

.token-help-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.annotation-shell {
  min-height: 100vh;
  background: var(--bg);
}

.annotation-topbar {
  z-index: 40;
}

.annotation-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.annotation-workspace {
  width: min(1780px, calc(100vw - 28px));
  margin: 0 auto;
  padding: 14px 0 24px;
  display: grid;
  grid-template-columns: minmax(640px, 1fr) 430px;
  gap: 14px;
  align-items: start;
}

.annotation-canvas,
.annotation-review-panel {
  min-width: 0;
}

.annotation-review-panel {
  position: sticky;
  top: 94px;
  display: grid;
  max-height: calc(100vh - 112px);
  gap: 12px;
  overflow: auto;
}

.annotation-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--soft-shadow);
}

.annotation-card h2,
.annotation-card h3 {
  margin: 0;
  color: var(--text);
  line-height: 1.25;
}

.annotation-card h2 {
  font-size: 20px;
}

.annotation-card h3 {
  font-size: 14px;
}

.annotation-card kbd {
  display: inline-flex;
  min-width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: var(--control);
  color: var(--text);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.annotation-steps {
  margin-top: 12px;
}

.annotation-viewer-card {
  min-height: calc(100vh - 112px);
}

.annotation-stage {
  height: calc(100vh - 188px);
}

.annotation-stage-inner {
  min-width: 100%;
  place-items: start center;
}

.annotation-image-target {
  max-width: none;
}

.annotation-image-frame {
  position: relative;
  display: inline-block;
  line-height: 0;
}

.annotation-image-marker-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.annotation-image-marker {
  position: absolute;
  z-index: 2;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: #107e85;
  box-shadow: var(--hover-shadow);
  color: #ffffff;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.annotation-image-marker.posted {
  background: #2f7c49;
}

[data-agentation-root] [data-annotation-marker] {
  display: none !important;
}

.annotation-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.annotation-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.annotation-section-header .btn {
  flex: 0 0 auto;
}

.annotation-note {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(110px, auto);
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.annotation-note.posted {
  border-color: #a7dcbf;
  background: var(--approved-soft);
}

.annotation-note.failed {
  border-color: #f7b7b0;
  background: var(--rejected-soft);
}

.annotation-note-main,
.annotation-note-side {
  min-width: 0;
}

.annotation-note strong,
.annotation-note p {
  overflow-wrap: anywhere;
}

.annotation-note strong {
  color: var(--text);
  font-size: 13px;
}

.annotation-note p,
.annotation-note a,
.annotation-muted {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.annotation-note-side > span {
  color: var(--subtle);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.annotation-note-side {
  display: grid;
  justify-items: end;
  align-content: start;
  gap: 8px;
}

.annotation-note-actions {
  display: grid;
  gap: 6px;
  justify-items: stretch;
}

.annotation-note-actions .btn {
  min-width: 112px;
  min-height: 30px;
  padding: 5px 8px;
  white-space: nowrap;
}

.annotation-edit-form {
  display: grid;
  gap: 6px;
}

.annotation-edit-form span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.annotation-edit-field {
  min-height: 82px;
  resize: vertical;
  line-height: 1.45;
}

.annotation-empty {
  width: min(960px, calc(100vw - 28px));
  margin: 0 auto;
  padding: 28px 0;
}

.annotation-empty h1 {
  margin: 0;
  color: var(--text);
  font-size: 24px;
}

.annotation-empty p {
  color: var(--muted);
}

.agentation-review-toolbar {
  z-index: 100;
}

@media (max-width: 1320px) {
  .review-workspace {
    grid-template-columns: 310px minmax(0, 1fr);
  }

  .review-workspace.queue-collapsed {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .review-panel {
    position: static;
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
    max-height: none;
    min-height: auto;
    overflow: visible;
  }

  .submission-footer .sync-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sync-submit-column {
    grid-column: 1 / -1;
  }

  .annotation-workspace {
    grid-template-columns: 1fr;
  }

  .annotation-review-panel {
    position: static;
    max-height: none;
    overflow: visible;
  }
}

@media (max-width: 980px) {
  .topbar-inner,
  .review-workspace,
  .annotation-workspace,
  .submission-footer {
    width: min(100vw - 20px, 100%);
  }

  .topbar-inner,
  .review-workspace,
  .review-panel,
  .annotation-workspace,
  .viewer-toolbar {
    grid-template-columns: 1fr;
  }

  .submission-footer .sync-panel {
    grid-template-columns: 1fr;
  }

  .sync-submit-column {
    grid-column: auto;
  }

  .status-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sidebar {
    position: static;
    height: auto;
    min-height: auto;
  }

  .sidebar.collapsed {
    height: 78px;
  }

  .snapshot-list {
    height: 360px;
  }

  .stage {
    height: clamp(460px, 64vh, 680px);
    min-height: 460px;
  }

}

@media (max-width: 700px) {
  .status-summary,
  .token-help-permissions,
  .image-grid.two-up {
    grid-template-columns: 1fr;
  }

  .toolbar-controls,
  .decision-actions {
    justify-content: flex-start;
  }

  .stage-control-toggle-row {
    justify-content: flex-start;
  }

  .review-link-row {
    grid-template-columns: 1fr;
  }

  .segmented {
    width: 100%;
  }

  .segmented button {
    flex: 1 1 0;
    padding-inline: 7px;
  }

  .range-row {
    width: 100%;
  }

  .range-row input {
    flex: 1;
  }

  .annotation-section-header,
  .annotation-note {
    grid-template-columns: 1fr;
  }

  .annotation-section-header {
    display: grid;
  }

  .annotation-section-header .btn,
  .annotation-note-actions .btn {
    width: 100%;
  }

  .annotation-note-side {
    justify-items: stretch;
  }

  .token-help-modal {
    padding: 12px;
  }

  .token-help-card {
    max-height: calc(100vh - 24px);
    padding: 14px;
  }

  .token-help-header {
    grid-template-columns: 1fr;
  }

  .token-help-actions {
    justify-content: flex-start;
  }
}