:root {
  --bg: #0f1115;
  --panel: #171a21;
  --panel-2: #1f242d;
  --border: #2b313c;
  --text: #e6e9ef;
  --muted: #95a0b3;
  --accent: #4c9aff;
  --red: #ff5a5a;
  --green: #36c46b;
  --amber: #f0b429;
  --checker: #2a2f38;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font: 13px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* ---- top bar ---- */
#topbar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 8px 14px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
  flex-wrap: wrap;
}

#topbar label { color: var(--muted); }

select {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 8px;
  font: inherit;
  max-width: 320px;
}

.pickers { display: flex; align-items: center; gap: 8px; }
.pickers .vs,
.pickers .sep { color: var(--muted); }

.nav {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  justify-content: center;
  min-width: 300px;
}

.nav .current {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 260px;
  max-width: 60vw;
}
.counter { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 11px; }
.path {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.badges { display: flex; gap: 6px; margin-top: 2px; min-height: 16px; }
.badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 1px 6px;
  border-radius: 10px;
}
.badge.score { font-variant-numeric: tabular-nums; }
.badge.pass { background: rgba(54,196,107,.18); color: var(--green); }
.badge.warn { background: rgba(240,180,41,.18); color: var(--amber); }
.badge.fail { background: rgba(255,90,90,.18); color: var(--red); }
.badge.missing { background: rgba(149,160,179,.18); color: var(--muted); }

button {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 10px;
  font: inherit;
  cursor: pointer;
}
button:hover:not(:disabled) { border-color: var(--accent); }
button:disabled { opacity: .4; cursor: default; }

.tools { display: flex; align-items: center; gap: 12px; }
.toggle { display: flex; align-items: center; gap: 5px; color: var(--muted); cursor: pointer; }

/* ---- layout ---- */
#layout {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 300px 1fr;
  min-height: 0;
}

/* ---- sidebar tree ---- */
#sidebar {
  background: var(--panel);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
#treeFilter {
  margin: 8px;
  padding: 6px 8px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font: inherit;
}
.tree { overflow: auto; padding: 0 4px 12px; flex: 1 1 auto; }

.tree ul { list-style: none; margin: 0; padding-left: 14px; }
.tree > ul { padding-left: 4px; }

.folder > .row, .leaf {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 6px;
  border-radius: 5px;
  cursor: pointer;
  white-space: nowrap;
}
.folder > .row:hover, .leaf:hover { background: var(--panel-2); }
.folder > .row .twisty { width: 12px; color: var(--muted); transition: transform .12s; }
.folder.collapsed > .row .twisty { transform: rotate(-90deg); }
.folder.collapsed > ul { display: none; }
.folder > .row .name { color: var(--muted); }

.leaf .label { overflow: hidden; text-overflow: ellipsis; }
.leaf.current { background: var(--accent); color: #fff; }
.leaf.current .dot { outline: 1px solid #fff; }

.dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: transparent; }
.dot.pass { background: var(--green); }
.dot.warn { background: var(--amber); }
.dot.fail { background: var(--red); }
.dot.missing { background: var(--muted); }
.dot.neutral { background: rgba(149,160,179,.4); }

.hidden { display: none !important; }

/* ---- viewer panes ---- */
.panes {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1px;
  background: var(--border);
  min-height: 0;
}
.panes.no-diff { grid-template-columns: 1fr 1fr; }
.panes.no-diff .pane-diff { display: none; }

.pane {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  min-width: 0;
  min-height: 0;
}
.pane-label {
  flex: 0 0 auto;
  padding: 5px 10px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pane-sub { color: var(--muted); font-weight: 400; opacity: .8; }

/* When a script comparison exists, tint the set titles to match the diff colours. */
.pane-label.diff-red { color: var(--red); box-shadow: inset 0 -2px 0 var(--red); }
.pane-label.diff-green { color: var(--green); box-shadow: inset 0 -2px 0 var(--green); }

.pane-viewport {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
  min-height: 0;
  cursor: grab;
  background-color: var(--checker);
  background-image:
    linear-gradient(45deg, #20242c 25%, transparent 25%),
    linear-gradient(-45deg, #20242c 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #20242c 75%),
    linear-gradient(-45deg, transparent 75%, #20242c 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
}
.pane-viewport.grabbing { cursor: grabbing; }

.pane-canvas {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  will-change: transform;
}
.pane-canvas img {
  display: block;
  image-rendering: -webkit-optimize-contrast;
  /* prevent the browser from dragging the image instead of panning */
  -webkit-user-drag: none;
  user-select: none;
}

.pane-missing {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-style: italic;
  pointer-events: none;
}
.pane.empty .pane-canvas { display: none; }
.pane.empty .pane-missing { display: flex; }

/* On-demand generation block (opt-in): shown in the diff pane when no comparison exists. */
.pane-generate {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  text-align: center;
  color: var(--muted);
}
.pane-generate[hidden] { display: none; }
.pane-generate #genBtn { font-size: 13px; padding: 6px 12px; }
.pane-generate #genBtn:disabled { opacity: .6; cursor: default; }

/* ---- status toast ---- */
.status {
  position: fixed;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
  z-index: 10;
}
.status.show { opacity: 1; }
.status.error { border-color: var(--red); color: var(--red); }