html, body {
  overscroll-behavior: none;
}

#wrapper canvas,
#vis_canvas,
#bg_canvas,
#pr_canvas,
.snap-canvas,
#UnseenCanvas,
#UnseenCanvasThr,
#UnseenCanvasMask,
#UnseenCanvasVis {
  touch-action: none;
  -webkit-touch-callout: none;
}

:-webkit-full-screen {
  background-color: rgb(41, 41, 41);
}
/* Firefox syntax */
:-moz-full-screen {
  background-color: rgb(41, 41, 41);
}
:-ms-fullscreen {
  background-color: rgb(41, 41, 41);
}
:fullscreen {
  background-color: rgb(41, 41, 41);
}

/* Table */

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

/* Set a fixed scrollable wrapper */
.tableWrap {
  height: 69vh;
}
/* Set header to stick to the top of the container (DB modal table only) */
#dbTable thead tr th {
  background: #dddddd;
  top: 0;
}

td,
th {
  border: none;
  text-align: left;
  padding: 8px;
}

td {
  max-width: 400px;
}

tbody tr:hover {
  cursor: pointer;
  background-color: rgb(41, 41, 41);
  color: white;
}

.actions_dots {
  text-align: center;
  padding: 5px;
  border-radius: 8px;
}

.actions_cell:hover .actions_dropdown {
  display: block;
  position: absolute;
}

.actions_dropdown {
  border-radius: 4px;
  z-index: 100;
  background-color: rgb(230, 230, 230);
  padding: 10px;
  box-shadow: 0 1px 1px rgb(0 0 0 / 12%), 0 2px 2px rgb(0 0 0 / 12%),
    0 4px 4px rgb(0 0 0 / 12%), 0 8px 8px rgb(0 0 0 / 12%),
    0 16px 16px rgb(0 0 0 / 12%);
  display: none;
}

.delete_btn {
  padding: 8px 10px;
  color: #dc2626;
  border-radius: 8px;
  border: 2px solid #dc2626;
  margin-bottom: 10px;
}

.delete_btn:hover {
  color: white;
  background-color: #dc2626;
}

.archive_btn {
  padding: 8px 10px;
  background-color: #059669;
  color: white;
  border-radius: 8px;
  border: 2px solid #059669;
}

.archive_btn:hover {
  color: white;
  background-color: #10b981;
  border-color: #10b981;
}

.segmentation_row:hover .segmentation_delete_btn {
  visibility: visible;
}

.segmentation_delete_btn {
  padding: 8px 10px;
  color: #dc2626;
  border-radius: 8px;
  border: 2px solid #dc2626;
  visibility: hidden;
}

.segmentation_delete_btn:hover {
  color: white;
  border-color: #dc2626;
  background-color: #dc2626;
}

.the_dropdown {
  min-width: 150px;
  padding: 0;
}

.selectedoption {
  min-width: 150px;
  height: 14px;
  padding: 5px;
  font-weight: bold;
}

ul.the_dropdown,
.the_dropdown li ul {
  list-style-type: none;
  padding: 0;
}

.the_dropdown li a {
  color: black;
  text-decoration: none;
  background-color: rgb(230, 230, 230);
  min-width: 350px;
  display: block;
  padding: 10px 10px;
}

.the_dropdown li ul {
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 4px;
  display: none;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.12),
    0 4px 4px rgba(0, 0, 0, 0.12), 0 8px 8px rgba(0, 0, 0, 0.12),
    0 16px 16px rgba(0, 0, 0, 0.12);
}

.the_dropdown ul li:nth-child(n + 3) a:hover {
  background-color: rgb(198, 196, 196);
}

.the_dropdown li:hover ul {
  /* Display the dropdown on hover */
  display: block;
  position: absolute;
}

#uidInput {
  padding: 6px;
  margin-top: 8px;
  font-size: 17px;
  border: none;
  min-width: 30%;
  max-width: 800px;
}

.search-container button {
  padding: 6px;
  margin-top: 8px;
  margin-right: 16px;
  margin-bottom: 30px;
  font-size: 17px;
  border: none;
  border-radius: 0;
  cursor: pointer;
}

/* Modal Stuff */

.modal {
  display: none;
  position: fixed;
  z-index: 10000;
  padding-top: 5vh;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
}
body.editor-modal-open {
  overflow: hidden;
}

.modal-content {
  background-color: rgb(230, 230, 230, 0.9);
  margin: auto;
  padding: 20px;
  padding-left: 40px;
  border: 3px solid #888;
  width: 80%;
  height: 80%;
  overflow: auto;
}

#controlsModalContent {
  background: rgb(28, 28, 28);
  border: 1px solid rgba(134, 205, 247, 0.35);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  color: rgb(216, 216, 216);
  padding: 24px 32px;
  font-family: Roboto, Helvetica Neue, Arial, sans-serif;
  width: 900px;
  max-width: 92%;
  height: 85%;
}

#controlsModalContent .close {
  color: rgba(216, 216, 216, 0.6);
  font-size: 24px;
  position: sticky;
  top: 0;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  border-radius: 4px;
  background: rgba(28, 28, 28, 0.92);
}
#controlsModalContent .close:hover {
  color: rgb(0, 255, 242);
}

/* Profile bar */
.kb-profile-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(134, 205, 247, 0.15);
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.kb-profile-pills {
  display: flex;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.kb-profile-pill {
  padding: 5px 14px;
  border: 1px solid rgba(134, 205, 247, 0.25);
  border-radius: 16px;
  font-size: 12px;
  color: rgba(216, 216, 216, 0.6);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}
.kb-profile-pill:hover {
  border-color: rgba(134, 205, 247, 0.5);
  color: rgb(216, 216, 216);
}
.kb-profile-pill.active {
  border-color: rgb(0, 255, 242);
  color: rgb(0, 255, 242);
  background: rgba(0, 255, 242, 0.08);
}
.kb-profile-pill.empty {
  border-style: dashed;
  opacity: 0.4;
}
.kb-profile-pill.empty:hover {
  opacity: 0.7;
}

.kb-profile-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.kb-btn {
  padding: 5px 12px;
  border: 1px solid rgba(134, 205, 247, 0.3);
  border-radius: 4px;
  background: rgb(32, 32, 32);
  color: rgb(196, 196, 196);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  font-family: inherit;
}
.kb-btn:hover {
  background: rgb(7, 109, 104);
  border-color: rgb(7, 140, 134);
  color: white;
}
.kb-btn.danger {
  border-color: rgba(220, 38, 38, 0.4);
}
.kb-btn.danger:hover {
  background: rgba(220, 38, 38, 0.3);
  border-color: #dc2626;
}

/* Keybinding sections */
.kb-section-header {
  color: rgb(0, 255, 242);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 14px 0 6px 0;
  border-bottom: 1px solid rgba(134, 205, 247, 0.1);
  margin-bottom: 2px;
}
.kb-section-header:first-child {
  padding-top: 0;
}

/* Keybinding rows */
.kb-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 8px;
  border-radius: 4px;
  transition: background 0.1s;
}
.kb-row:hover {
  background: rgba(134, 205, 247, 0.05);
}

.kb-label {
  font-size: 13px;
  color: rgba(216, 216, 216, 0.85);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kb-hint {
  color: rgba(216, 216, 216, 0.4);
  font-size: 11px;
}

.kb-key-badge {
  min-width: 90px;
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(134, 205, 247, 0.2);
  border-radius: 5px;
  color: rgb(0, 255, 242);
  font-size: 12px;
  font-family: 'Roboto Mono', monospace;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
  flex-shrink: 0;
}
.kb-key-badge:hover {
  border-color: rgb(0, 255, 242);
  background: rgba(0, 255, 242, 0.06);
}
.kb-key-badge.rebinding {
  border-color: rgb(0, 255, 242);
  background: rgba(0, 255, 242, 0.12);
  animation: kb-pulse 1s ease-in-out infinite;
}

@keyframes kb-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 255, 242, 0.3); }
  50% { box-shadow: 0 0 8px 2px rgba(0, 255, 242, 0.2); }
}

/* Mouse / static shortcut rows (used by the Essentials block) */
.kb-mouse-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 8px;
  font-size: 12px;
}
.kb-mouse-row .kb-label {
  font-size: 12px;
  color: rgba(216, 216, 216, 0.6);
}
.kb-mouse-row .kb-key-static {
  min-width: 90px;
  text-align: center;
  font-size: 11px;
  color: rgba(216, 216, 216, 0.45);
  font-family: 'Roboto Mono', monospace;
}

/* Essentials — the learn-this-first block at the top */
#kbEssentials {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(134, 205, 247, 0.15);
}
.kb-ess-title {
  padding-top: 0;
}
.kb-ess-hint {
  color: rgba(216, 216, 216, 0.5);
  font-size: 13px;
  margin: 2px 0 10px 0;
}
/* Two columns on desktop; the column-gap separates the pairs and the thin
   rule helps the eye keep them apart. Collapses to one column on phones
   (see body.layout-phone override below). */
.kb-ess-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 28px;
  row-gap: 2px;
}
/* min-height keeps the text-only rows the same height as the glyph rows;
   the trimmed padding offsets the slightly taller icon so total row height
   is unchanged. Hover tint matches the editable list (.kb-row:hover). */
#kbEssentials .kb-mouse-row {
  padding: 5px 8px;
  min-height: 34px;
  border-radius: 4px;
  transition: background 0.1s;
}
#kbEssentials .kb-mouse-row:hover {
  background: rgba(134, 205, 247, 0.05);
}
#kbEssentials .kb-mouse-row .kb-label {
  font-size: 15px;
  color: rgba(216, 216, 216, 0.85);
}
#kbEssentials .kb-mouse-row .kb-key-static {
  min-width: 110px;
  font-size: 14px;
  color: rgb(0, 255, 242);
  text-align: right;
}

/* Mouse glyph in the Essentials rows */
.kb-mouse-ctrl {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 110px;
}
.mouse-qual {
  font-size: 13px;
  color: rgba(216, 216, 216, 0.6);
  font-family: 'Roboto Mono', monospace;
  white-space: nowrap;
}
.mouse-icon {
  width: 26px;
  height: 38px;
  flex-shrink: 0;
  display: block;
}
.mouse-icon .mouse-body {
  fill: rgba(255, 255, 255, 0.03);
  stroke: rgba(216, 216, 216, 0.55);
  stroke-width: 1.4;
}
.mouse-icon .mouse-divider {
  stroke: rgba(216, 216, 216, 0.3);
  stroke-width: 1;
}
.mouse-icon .mouse-wheel {
  fill: rgb(28, 28, 28);
  stroke: rgba(216, 216, 216, 0.55);
  stroke-width: 1;
}
.mouse-icon .hl {
  fill: transparent;
}
.mouse-icon .scroll-arrow {
  fill: none;
  stroke: transparent;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Thin dark casing behind each chevron so it reads as separate from the
   wheel; only shows when the chevrons themselves do (is-scroll). */
.mouse-icon .scroll-arrow-bg {
  fill: none;
  stroke: transparent;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mouse-icon.is-scroll .scroll-arrow-bg {
  stroke: rgb(28, 28, 28);
}
.mouse-icon.is-left .hl-left,
.mouse-icon.is-right .hl-right,
.mouse-icon.is-wheel .hl-wheel,
.mouse-icon.is-scroll .hl-wheel {
  fill: rgb(0, 255, 242);
}
/* Middle button — solid wheel for both press and scroll so the icons carry
   the same visual weight; the chevrons are what mark scrolling. */
.mouse-icon.is-wheel .mouse-wheel,
.mouse-icon.is-scroll .mouse-wheel {
  fill: rgb(0, 255, 242);
  stroke: rgb(0, 255, 242);
}
.mouse-icon.is-scroll .scroll-arrow {
  stroke: rgb(0, 255, 242);
}

/* Collapsible sections (Advanced / Legacy) */
.kb-section-header.kb-collapsible {
  cursor: pointer;
  user-select: none;
}
.kb-section-header.kb-collapsible::after {
  content: "\25BE";
  float: right;
  font-size: 11px;
  opacity: 0.6;
}
.kb-section-header.kb-collapsible.collapsed::after {
  content: "\25B8";
}

/* Links footer */
.kb-links {
  display: flex;
  gap: 16px;
  padding-top: 12px;
  margin-top: 12px;
  border-top: 1px solid rgba(134, 205, 247, 0.1);
}
.kb-links a {
  color: rgba(134, 205, 247, 0.7);
  text-decoration: none;
  font-size: 12px;
  transition: color 0.15s;
}
.kb-links a:hover {
  color: rgb(0, 255, 242);
}

/* Dropdown menu for save/load */
.kb-dropdown-wrap {
  position: relative;
  display: inline-block;
}
.kb-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 300;
  min-width: 160px;
  padding: 4px 0;
  background: rgb(32, 32, 32);
  border: 1px solid rgba(134, 205, 247, 0.3);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  margin-top: 2px;
}
.kb-dropdown-menu.open {
  display: block;
}
.kb-dropdown-item {
  padding: 7px 14px;
  font-size: 12px;
  color: rgb(196, 196, 196);
  cursor: pointer;
  transition: background 0.1s;
  white-space: nowrap;
}
.kb-dropdown-item:hover {
  background: rgb(7, 109, 104);
  color: white;
}
.kb-dropdown-item.empty-slot {
  color: rgba(196, 196, 196, 0.4);
  font-style: italic;
}
.kb-dropdown-sep {
  height: 1px;
  background: rgba(134, 205, 247, 0.15);
  margin: 4px 0;
}

tr:hover .dropdown-icon {
  filter: invert(100%) sepia(0%) saturate(2625%) hue-rotate(182deg)
    brightness(116%) contrast(100%);
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus-visible {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

@keyframes animatetop {
  from { top: -300px; opacity: 0; }
  to { top: 0; opacity: 1; }
}

#splitContainer {
  position: absolute;
  left: 266px;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  overflow: hidden;
}

#mainPanel {
  flex: 1;
  position: relative;
  min-width: 200px;
  overflow: hidden;
  background: #000;
}

#wrapper {
  position: absolute;
  background: #000;
  /* The old #bg/#pr/#vis_canvas 1px border lived ON the canvas with
   * content-box sizing, which pushed the canvas 2px past the wrapper
   * and shifted the image 1px in from (0,0). Same visual cue but as an
   * OUTSET box-shadow on the wrapper itself: paints in the 4px gutter
   * around the wrapper, no overflow, no displacement. Overridden by the
   * plane-coloured ring in quad mode. */
  box-shadow: 0 0 0 1px rgb(134, 205, 247);
}

.adaptive-display-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 90;
  padding: 2px 7px;
  border: 1px solid rgba(242, 181, 68, 0.75);
  border-radius: 3px;
  color: #ffd98a;
  background: rgba(30, 20, 2, 0.78);
  font: bold 10px/1.4 "Roboto Mono", "Courier New", monospace;
  letter-spacing: 0.08em;
  pointer-events: none;
  user-select: none;
}

#divider {
  width: 6px;
  cursor: col-resize;
  touch-action: none;
  background: rgba(134, 205, 247, 0.15);
  flex-shrink: 0;
  position: relative;
  /* Above the 3D pane's positioned content so the ::after grab extension
     actually receives the pointer (the GL canvas otherwise paints over it). */
  z-index: 3;
}

/* Invisible grab extensions — the visible 6px strip is an unforgiving
   target: 3px extra on the 3D side, 2px on the MPR side. */
body:not(.layout-phone) #divider::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  width: 3px;
}

body:not(.layout-phone) #divider::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 100%;
  width: 2px;
}
#divider:hover, #divider.dragging {
  background: rgba(134, 205, 247, 0.4);
}

/* ─── Quad layout (Shift+4) ──────────────────────────────────────────────
 *
 * Single-view default: every quad-only element is display:none. In quad mode
 * mainPanel becomes a 2x2 CSS grid with four cells:
 *   TL: existing #wrapper        (active editor, behaviour unchanged — axial)
 *   TR: #quad3DHost              (3D viewer hosted via medseg3d.open())
 *   BL: snapPanel_BL             (coronal snap, .snap-wrapper)
 *   BR: snapPanel_BR             (sagittal snap, .snap-wrapper)
 * secondPanel + divider stay completely out of quad layout.
 *
 * Each .snap-wrapper mirrors the main #wrapper idiom one-for-one: a square
 * sized box (style.width/height set by SnapshotView.relayout) with bg/pr/vis
 * canvases stacked absolutely on top of each other, and a vertical slider
 * absolute on the right edge. Same shape, same handlers, just different
 * state. */
.snap-wrapper,
.quad3d-host {
  display: none;
}

body.layout-quad #mainPanel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 4px;
  padding: 2px;
  box-sizing: border-box;
}
/* #wrapper is position:absolute by default (so its canvases can stack). In
 * quad mode it joins grid placement via grid-area and JS (resizeCanvas) sizes
 * it to the cell dimensions via MultiView.cellSize, so it fills the TL cell
 * exactly — no centering needed. */
body.layout-quad #wrapper {
  grid-area: 1 / 1 / 2 / 2;
  position: relative !important;
  left: 0 !important;
  top: 0 !important;
  margin: 0 !important;
}
body.layout-quad #snapPanel_BL { grid-area: 2 / 1 / 3 / 2; }
body.layout-quad #snapPanel_BR { grid-area: 2 / 2 / 3 / 3; }
/* JS (SnapshotView.relayout) sizes the snap-wrapper to the same cell
 * dimensions as the main wrapper, so it fills its grid cell exactly. */
body.layout-quad .snap-wrapper {
  display: block;
}
/* PACS-style plane-coloured 1px ring on each cell, drawn OUTSIDE the
 * wrapper into the 4px grid gap. We had an `outline: 1px solid ... ;
 * outline-offset: -1px` here originally, but stacking-context interaction
 * with the absolutely-positioned canvases inside the wrapper made the
 * ring invisible on three of the four cells in Chrome. An outset
 * box-shadow always paints beyond the wrapper's border-box and can't be
 * obscured by positioned descendants — same visible result, no painting-
 * order quirks. --plane-color is set per pane by JS (setPlane / refresh)
 * and falls back to a neutral grey if unset. */
body.layout-quad #wrapper,
body.layout-quad .snap-wrapper {
  box-shadow: 0 0 0 1px var(--plane-color, rgba(255, 255, 255, 0.18));
}
/* 3D viewer has no MPR plane to colour by — use the same neutral fallback
 * so all four cells read as a coherent group. */
body.layout-quad #quad3DHost {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
}
body.layout-quad #quad3DHost {
  grid-area: 1 / 2 / 2 / 3;
  display: block;
  background: rgb(20, 20, 20);
  overflow: hidden;
  position: relative;
}
body.layout-quad #secondPanel { display: none !important; }
body.layout-quad #divider     { display: none !important; }
/* Both "Open 3D" entry points target secondPanel-hosted 3D, which is
 * collapsed under body.layout-quad. Hide them so the user doesn't get
 * a phantom click into a hidden panel; the 3D viewer is already
 * visible in the TR cell. */
body.layout-quad #open3dBtn,
body.layout-quad #medseg3dOpenButton { display: none !important; }
/* In quad mode the three plane buttons are meaningless (all three planes
 * are visible at once). Keep #mprQuad so the user can click to exit. */
body.layout-quad #mprButtons > .mpr-btn:not(#mprQuad):not(#rotResetBtn) { display: none; }
/* "Localizers" checkbox lives in #mprButtons so it sits in the toolbar real
 * estate the three plane buttons vacate when quad mode opens. Hidden outside
 * quad — single-view mode has no cross-plane peers to draw. */
#locLinesToggle { display: none; }
body.layout-quad #locLinesToggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 4px 0 6px;
  font-size: 11px;
  color: rgb(196, 196, 196);
  cursor: pointer;
  user-select: none;
}
#locLinesToggle input { cursor: pointer; margin: 0; }
/* Rotate toggle: same chrome as Localizers (sits next to it in quad mode). */
#rotEnableToggle { display: none; }
body.layout-quad #rotEnableToggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 4px 0 6px;
  font-size: 11px;
  color: rgb(196, 196, 196);
  cursor: pointer;
  user-select: none;
}
#rotEnableToggle input { cursor: pointer; margin: 0; }
#rotResetBtn { font-size: 11px; padding: 2px 6px; }
/* Once a plane has actually been tilted, slicing happens via the
 * localizer crosshair drag — hide the now-meaningless sliders/strip. */
body.oblique-active .slider,
body.oblique-active .snap-slider,
body.oblique-active .segmentation-strip { display: none !important; }
/* Ctrl/Cmd held → "pan armed" PACS cue (4-way move arrow) on every
 * interactive canvas: main MPR, all snap viewports, and the 3D host.
 * Ctrl+left-drag pans; Ctrl+right-drag zooms (cursor lock takes over
 * during the actual zoom drag, so 'move' is the pre-drag hint only). */
body.ctrl-armed #vis_canvas,
body.ctrl-armed .snap-vis,
body.ctrl-armed #quad3DHost,
body.ctrl-armed #quad3DHost canvas { cursor: move !important; }
/* Quad button is a layout toggle, not a plane selector — keep it the same
 * compact icon size in both states so users can toggle back and forth
 * without the button reflowing under their cursor. */
#mprQuad { flex: 0 0 auto; padding: 4px 8px; }

/* Quad-toggle icon: 2×2 grid when not in quad mode; 1×2 (return-to-single)
 * once active. Uses its own .is-quad-on class — NOT .active — so the
 * button doesn't get the selected-plane teal highlight while in quad mode.
 * (The Quad button is a layout toggle, not a plane selector — applying the
 * plane-button selected style would mislead the user into reading it as
 * "currently in this mode and you can pick a different one alongside".) */
.mpr-quad-icon { vertical-align: middle; }
.mpr-quad-icon-1x2 { display: none; }
#mprQuad.is-quad-on .mpr-quad-icon-2x2 { display: none; }
#mprQuad.is-quad-on .mpr-quad-icon-1x2 { display: inline-block; }


/* A snap-wrapper acts as a styled clone of #wrapper. It hosts its three
 * stacked canvases + slider as positioned siblings inside a sized box. JS
 * sets style.width/height on the wrapper based on cell size — same as
 * resizeCanvas does for #wrapper. */
.snap-wrapper {
  position: relative;
  background: #000;
  /* width/height set by SnapshotView.relayout */
}
.snap-canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  box-sizing: border-box;
}
.snap-bg  { z-index: 1; background: #000; image-rendering: auto; }
.snap-pr  { z-index: 2; opacity: 0.7; pointer-events: none; }
/* Default OS cursor (arrow) so it matches the main editor; the in-canvas
 * brush halo is the real "where you're pointing" indicator. */
.snap-pr, .snap-vis { image-rendering: pixelated; }
.snap-vis { z-index: 3; pointer-events: auto; }

/* Slider mirrors the main editor's .slider style/position. */
.snap-slider {
  appearance: none;
  -webkit-appearance: none;
  writing-mode: vertical-lr;
  direction: rtl;
  position: absolute;
  right: 0;
  top: 3px;
  width: 15px;
  height: calc(100% - 6px);
  margin: 0;
  background: none;
  border: none;
  outline: none;
  opacity: 0.7;
  z-index: 10;
}
.snap-slider:hover { opacity: 1; cursor: pointer; }
.snap-slider::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none;
  width: 15px; height: 30px;
  background: rgb(0, 255, 242);
  border: none; border-radius: 20px; cursor: pointer;
}
.snap-slider::-moz-range-thumb {
  width: 15px; height: 30px;
  background: rgb(0, 255, 242);
  border: none; border-radius: 20px; cursor: pointer;
}
.snap-label {
  position: absolute; top: 6px; left: 8px;
  font: 11px/1.3 "Roboto Mono", monospace;
  color: rgb(180, 200, 220);
  background: rgba(0, 0, 0, 0.55);
  padding: 2px 6px;
  border-radius: 3px;
  pointer-events: none;
  z-index: 11;
}
/* No visual "shine" on the hovered snap — the cursor halo and the
 * plane-coloured edge identify which pane the user is on without an
 * extra highlight. The .is-active class is still toggled by
 * MultiView._setActiveView so JS callers that check it still work,
 * we just don't paint anything for it. */

#secondPanel {
  flex: 0 0 35%;
  min-width: 150px;
  position: relative;
  display: flex;
  flex-direction: column;
  background: rgb(41, 41, 41);
  border-left: 1px solid rgba(134, 205, 247, 0.2);
}

/* The viewer's own toolbar (.viewer-toolbar) is now built inside its
 * overlay and styled inline by view3dAddon.js. The static
 * #secondPanelToolbar element it used to share has been removed. */
.viewer-toolbar select {
  background: rgb(40, 40, 40);
  color: rgb(200, 200, 200);
  border: 1px solid rgba(134, 205, 247, 0.3);
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 12px;
}

#secondPanelContent {
  flex: 1;
  position: relative;
  overflow: hidden;
  min-height: 100px;
}

.viewer-toolbar-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  color: #ccc;
  padding: 2px 6px;
  font-size: 13px;
  cursor: pointer;
  line-height: 1.4;
  transition: background 0.1s;
}
.viewer-toolbar-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.viewer-popover {
  position: fixed;
  z-index: 760;
  padding: 10px 12px;
  border: 1px solid rgba(134, 205, 247, 0.3);
  border-radius: 6px;
  background: rgb(28, 28, 28);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  font-size: 12px;
  color: rgb(216, 216, 216);
  /* Resizable: drag the bottom-right corner. overflow:auto (not just -y) is
     required for the native resizer to appear; the browser draws the grip at
     the visible corner even when the content scrolls, and honours the min/max
     bounds below so it can't collapse under the controls or grow off-screen. */
  resize: both;
  overflow: auto;
  min-width: 240px;
  min-height: 140px;
  max-width: 92vw;
  max-height: 80vh;
  font-family: Roboto, Helvetica Neue, Arial, sans-serif;
}
/* Subtle on-theme grip so the resize corner is discoverable on the dark panel
   (the default light diagonal lines nearly vanish against rgb(28,28,28)). */
.viewer-popover::-webkit-resizer {
  background: linear-gradient(
    -45deg,
    transparent 0 3px,
    rgba(134, 205, 247, 0.55) 3px 4px,
    transparent 4px 6px,
    rgba(134, 205, 247, 0.55) 6px 7px,
    transparent 7px
  );
}
/* Fixed-width panel: width:100% controls must include their border in that
   100% (border-box) so they don't overhang the content box and trip a
   spurious horizontal scrollbar. */
.viewer-popover select,
.viewer-popover button,
.viewer-popover input,
.viewer-popover canvas {
  box-sizing: border-box;
}
.viewer-popover.is-dragging {
  user-select: none;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.65);
}
.viewer-popover-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -4px -6px 8px;
  padding: 6px 6px 8px;
  border-bottom: 1px solid rgba(134, 205, 247, 0.16);
  background: rgb(28, 28, 28);
  cursor: move;
  touch-action: none;
}
.viewer-popover-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(216, 216, 216, 0.9);
  font-size: 12px;
  font-weight: 600;
}
.viewer-popover-controls {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.viewer-popover-icon-btn {
  height: 24px;
  min-width: 24px;
  padding: 0 7px;
  border: 1px solid rgba(134, 205, 247, 0.25);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(216, 216, 216, 0.85);
  cursor: pointer;
  font-size: 11px;
  line-height: 22px;
}
.viewer-popover-icon-btn:hover,
.viewer-popover-icon-btn.active {
  color: #fff;
  border-color: rgba(134, 205, 247, 0.55);
  background: rgba(134, 205, 247, 0.16);
}

/* Section headers inside the combined Advanced popover
   (TF / Lighting / Diagnostics). */
.viewer-popover-section {
  margin: 12px 0 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(134, 205, 247, 0.15);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(142, 202, 230);
}
.viewer-popover-section:first-child {
  margin-top: 0;
  border-top: none;
  padding-top: 0;
}

/* Labels popover (🏷 button) — one row per label with swatch, name, eye, slider, pct. */
.labels-popover-header {
  font-size: 11px;
  color: rgba(216, 216, 216, 0.6);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(134, 205, 247, 0.15);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.labels-popover-master {
  display: grid;
  grid-template-columns: 14px minmax(60px, 1fr) 28px minmax(60px, 1.4fr) 32px;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(134, 205, 247, 0.15);
}
.labels-popover-master-label {
  grid-column: 1 / span 3;
  font-size: 11px;
  font-weight: 600;
  color: rgba(216, 216, 216, 0.85);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.labels-popover-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: min(60vh, 480px);
  overflow-y: auto;
}
.labels-popover-empty {
  font-size: 11px;
  color: rgba(216, 216, 216, 0.5);
  padding: 12px 4px;
  text-align: center;
  font-style: italic;
}
.labels-popover-row {
  display: grid;
  grid-template-columns: 14px minmax(60px, 1fr) 28px minmax(60px, 1.4fr) 32px;
  align-items: center;
  gap: 8px;
  min-height: 28px;
}
.labels-popover-swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.labels-popover-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: rgb(216, 216, 216);
}
.labels-popover-eye {
  width: 28px;
  height: 24px;
  padding: 0;
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.labels-popover-slider {
  width: 100%;
  margin: 0;
  vertical-align: middle;
  accent-color: rgb(134, 205, 247);
}
.labels-popover-pct {
  text-align: right;
  font-size: 11px;
  color: rgba(216, 216, 216, 0.7);
  font-variant-numeric: tabular-nums;
}
.labels-popover-footer {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(134, 205, 247, 0.15);
}
.labels-popover-footer .viewer-toolbar-btn {
  flex: 1;
  padding: 4px 8px;
  font-size: 11px;
}

#bg_canvas,
#pr_canvas,
#vis_canvas,
#webgl_canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 0px;
  height: 0px;
  transform: none;
}

#UnseenCanvas,
#UnseenCanvasThr,
#UnseenCanvasMask,
#UnseenCanvasVis {
  width: 0px;
  height: 0px;
}

.pacs-overlay {
  position: absolute;
  z-index: 99;
  color: rgb(224, 224, 224);
  font: 12px/1.5 "Roboto Mono", "Courier New", monospace;
  background: rgba(0, 0, 0, 0.5);
  padding: 4px 8px;
  border-radius: 3px;
  pointer-events: none;
  user-select: none;
  max-width: 50%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pacs-tl { top: 8px; left: 8px; }
/* Cursor tooltip uses viewport coords (see canvasInteraction.js mouseMoves),
   so position:fixed — lets us feed evt.clientX/clientY directly into left/top
   without a getBoundingClientRect call on every touchmove. */
.pacs-cursor { position: fixed; white-space: pre-line; }
.pacs-overlay:empty { display: none; }

/* Mask-switcher chevron — appears inside pacsTopLeft only when this series
   has >1 mask. Pacs-overlay parent is pointer-events:none, so the chevron
   re-enables pointer events on itself. */
.mask-switch-chev {
  pointer-events: auto;
  background: transparent;
  border: none;
  color: inherit;
  font: inherit;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  margin: 0 0 0 4px;
  vertical-align: baseline;
  opacity: 0.8;
}
/* :hover background-color also overrides the global button:hover teal halo
   (specificity 0,1,1 beats 0,1,0) — without this the chevron lights up with
   a 6px-asymmetric green box centred to the left of the glyph. */
.mask-switch-chev:hover { opacity: 1; background: transparent; }
.mask-switch-chev[hidden] { display: none; }

.mask-switch-dropdown {
  position: absolute;
  top: 36px;
  left: 8px;
  z-index: 100;
  background: rgba(20, 20, 20, 0.95);
  color: rgb(224, 224, 224);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 3px;
  padding: 4px 0;
  font: 12px/1.6 "Roboto Mono", "Courier New", monospace;
  min-width: 200px;
  max-width: 60%;
  max-height: 60vh;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  user-select: none;
}
.mask-switch-dropdown[hidden] { display: none; }
.mask-switch-item {
  padding: 4px 12px;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}
.mask-switch-item:hover { background: rgba(255, 255, 255, 0.1); }
.mask-switch-item-current { font-weight: 600; }
.mask-switch-item-check {
  display: inline-block;
  width: 12px;
  text-align: center;
}
.mask-switch-empty {
  padding: 4px 12px;
  opacity: 0.65;
  font-style: italic;
}

#toastContainer {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  max-width: min(400px, 92vw);
}
.msg-toast {
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 13px;
  color: rgb(230, 230, 230);
  background: rgba(28, 28, 28, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
  pointer-events: auto;
  animation: msg-toast-in 0.18s ease-out;
  font-family: Roboto, Helvetica Neue, Arial, sans-serif;
}
.msg-toast-saving {
  border-color: rgba(96, 165, 250, 0.6);
  background: rgba(30, 58, 94, 0.95);
}
.msg-toast-success {
  border-color: rgba(34, 197, 94, 0.6);
  background: rgba(20, 83, 45, 0.95);
}
.msg-toast-error {
  border-color: rgba(239, 68, 68, 0.6);
  background: rgba(127, 29, 29, 0.95);
}
@keyframes msg-toast-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

#bg_canvas {
  image-rendering: auto;
}
#pr_canvas {
  image-rendering: pixelated;
  opacity: 0.7;
}
#vis_canvas {
  image-rendering: pixelated;
}

body {
  /* background: rgb(134, 161, 125); */
  background: rgb(41, 41, 41);
  /* font-family: 'Times New Roman', Times, serif; */
}

h2 {
  z-index: 9999999999999;
  color: rgb(155, 171, 216);
  font-size: 5px;
  float: right;
  position: relative;
  left: 3px;
  top: 14px;
}

/* During editor load, hide incomplete editor chrome from the first paint.
   #splitContainer keeps its layout box so fitToScreen can still measure real
   dimensions while the overlay is visible. */
body.editor-loading #splitContainer,
body.editor-loading #mobileTopBar,
body.editor-loading #datasetPreviewBanner {
  visibility: hidden;
  pointer-events: none;
}
body.editor-loading #allText { display: none; }

.loading-overlay {
  position: fixed;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgb(28, 28, 28);
  z-index: 9000;
}
body.editor-loading .loading-overlay,
.loading-overlay.is-visible {
  display: flex;
}
/* Translucent variant for mid-session swaps (e.g. mask-switcher) where the
   user wants to see the change land on the canvas behind the overlay. The
   overlay still blocks pointer events during the swap. */
.loading-overlay.is-translucent { opacity: 0.5; }
.loading-overlay-text {
  color: rgb(216, 216, 216);
  font-family: Roboto, sans-serif;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.4px;
  margin-bottom: 14px;
}
.loading-overlay-bar-bg {
  width: 240px;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
}
.loading-overlay-bar {
  width: 0%;
  height: 100%;
  background: rgb(0, 255, 242);
  border-radius: 2px;
  transition: width 0.2s;
}

/* Dataset / admin preview banner (built in startupConditions.js as
   #datasetPreviewBanner.dataset-preview-banner). Styled here rather than
   inline so the phone overrides below cascade. The bar is a fixed 44px flex
   row; the info text gets a single ellipsised line and the action buttons
   never shrink, so the row stays one clean line at any width instead of
   wrapping and spilling out of the bar (the old mobile bug). */
.dataset-preview-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  height: 44px;
  box-sizing: border-box;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #1d4fd6;
  color: #fff;
  font: 13px/1.4 system-ui;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}
.dataset-preview-banner .dpb-info {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dataset-preview-banner .dpb-spacer { flex: 1 1 auto; }
.dataset-preview-banner .dpb-btn {
  flex: none;
  white-space: nowrap;
  border-radius: 4px;
  cursor: pointer;
  font: inherit;
}
.dataset-preview-banner .dpb-btn-primary {
  background: #fff;
  color: #1d4fd6;
  border: 0;
  padding: 5px 12px;
  font-weight: 600;
}
.dataset-preview-banner .dpb-btn-ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  padding: 4px 10px;
}
/* Phone: drop the verbose "<slug> / <case>" detail (the longest token, and
   not essential — it's still in the copy modal + tab title) and tighten
   spacing so the title + both buttons fit one clean line on narrow screens. */
body.layout-phone .dataset-preview-banner {
  gap: 8px;
  padding: 0 10px;
  font-size: 12px;
}
body.layout-phone .dataset-preview-banner .dpb-detail { display: none; }
body.layout-phone .dataset-preview-banner .dpb-btn-primary { padding: 5px 10px; }
body.layout-phone .dataset-preview-banner .dpb-btn-ghost { padding: 4px 8px; }
/* "Open another random case" reroll button — only shown in the random-try
   flow (startupConditions adds it when ?random=1). A filled-ghost look so it
   reads as an inviting action, distinct from the plain Close ghost. */
.dataset-preview-banner .dpb-btn-random {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.5);
  padding: 4px 11px;
  font-weight: 600;
}
.dataset-preview-banner .dpb-btn-random:hover { background: rgba(255, 255, 255, 0.26); }
/* On phone, shorten the label to just "Random case" to keep the bar one line. */
body.layout-phone .dataset-preview-banner .dpb-rnd-long { display: none; }

#allText {
  zoom: 1;
  /* 1px, not 0: the MPR wrapper sits at 2px with its 1px ring painted
     outside, so the ring's outer edge is at 1px — this lines the toolbar
     border up with it exactly. */
  top: 1px;
  left: 1px;
  width: 250px;
  position: absolute;
  border: 2px solid rgb(134, 205, 247);
  padding: 5px;
  /* background: rgb(114, 173, 146); */
  background: rgb(32, 32, 32);
  /* Flex-column so #labelsSection can absorb the leftover vertical space
     and only its scrollable list overflows — the toolbar sections above
     keep their natural height, the labels-toolbar header (with add/delete/
     lock) stays pinned, and only the rows in #labelsContainer scroll. */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: calc(100% - 24px);
  color: rgb(216, 216, 216);
  font-family: Roboto, OpenSans, HelveticaNeue-Light, Helvetica Neue Light,
    Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
}

#labelsSection {
  flex: 1;
  min-height: 0; /* allow shrink below intrinsic content size */
  display: flex;
  flex-direction: column;
}
#labelsContainer {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

button {
  border: 1px solid rgb(121, 159, 182);
  border-radius: 5px 5px 5px 5px;
  margin: 2px;
  padding: 2px;
  transition-duration: 0.1s;
  background-color: rgb(32, 32, 32);
  color: rgb(196, 196, 196);
}
button:hover {
  background-color: rgb(7, 109, 104);
  cursor: pointer;
}

button::-moz-focus-inner {
  border: 0;
}

input[type="range"]::-moz-focus-outer {
  border: 0;
}

button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
.clickable:focus:not(:focus-visible),
.clickableImage:focus:not(:focus-visible),
.toolbar-icon:focus:not(:focus-visible),
.kb-key-badge:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.clickable:focus-visible,
.clickableImage:focus-visible,
.toolbar-icon:focus-visible,
.kb-key-badge:focus-visible {
  outline: 2px solid rgba(134, 205, 247, 0.75);
  outline-offset: 2px;
}

body.editor-pointer-focus button:focus,
body.editor-pointer-focus input[type="button"]:focus,
body.editor-pointer-focus input[type="checkbox"]:focus,
body.editor-pointer-focus input[type="radio"]:focus,
body.editor-pointer-focus input[type="range"]:focus,
body.editor-pointer-focus input[type="submit"]:focus,
body.editor-pointer-focus input[type="reset"]:focus,
body.editor-pointer-focus select:focus,
body.editor-pointer-focus .clickable:focus,
body.editor-pointer-focus .clickableImage:focus,
body.editor-pointer-focus .toolbar-icon:focus,
body.editor-pointer-focus .kb-key-badge:focus {
  outline: none !important;
  box-shadow: none !important;
}

.modalButton {
  border: 1px solid rgb(0, 0, 0);
  border-radius: 5px 5px 5px 5px;
  margin: 1px;
  padding: 1px;
  transition-duration: 0.1s;
  background-color: rgb(235, 235, 235);
  color: rgb(39, 3, 68);
}
.modalButton:hover {
  background-color: rgb(191, 255, 252);
}

/* Vertical slice slider on the right edge of each viewport.
   `writing-mode: vertical-lr` makes the input render vertically natively,
   replacing an older `transform: rotate(270deg)` hack that broke hit-testing
   in Firefox/Safari. `direction: rtl` flips the slider so the maximum slice
   index is at the top (matches patient-superior in axial views).
   Layout box now matches visual extent: width = track thickness, height =
   slide length. */
.slider {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  writing-mode: vertical-lr;
  direction: rtl;
  position: absolute;
  right: -2px;
  top: 2px;
  width: 15px;
  height: calc(100% - 6px);
  outline: none;
  background: none;
  border: none;
  border-radius: 20px;
  opacity: 0.7;
  z-index: 10;
}

.slider:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.1);
  cursor: pointer;
}

/* Mid-stroke the slider drops pointer events so the stroke can run across
   the right edge of the viewport. mousemove is wired to vis_canvas only,
   so without this any crossing of the slider's column severs the stroke. */
body.painting-stroke .slider {
  pointer-events: none;
}

.slider::-webkit-slider-runnable-track,
.slider::-moz-range-track {
  background: transparent;
  border: none;
}

.slider::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 15px;
  height: 30px;
  background: rgb(0, 255, 242);
  cursor: pointer;
  border: none;
  border-radius: 20px;
}
.slider::-moz-range-thumb {
  width: 15px;
  height: 30px;
  background: rgb(0, 255, 242);
  cursor: pointer;
  border: none;
  border-radius: 20px;
}

/* Segmentation strip — per-slice presence ticks for the active label, in a
   thin column immediately left of the slider track. The strip box itself
   is a passive visual region (pointer-events:none); only the ticks and
   the current-slice marker are rendered into it, and only the ticks
   capture clicks (for slice navigation). Empty space between ticks falls
   through to the canvas underneath, so the brush cursor follows correctly
   and a paint stroke can start there without panning. The strip sits
   behind the slider's z-index so the slider thumb wins hit-testing inside
   its own 15px column. */
.segmentation-strip {
  --segmentation-strip-color: rgb(0, 255, 242);
  position: absolute;
  right: 15px;
  top: 2px;
  height: calc(100% - 4px);
  width: 8px;
  pointer-events: none;
  z-index: 9;
}
.segmentation-strip .seg-tick {
  position: absolute;
  left: 0;
  right: 0;
  /* bottom + height are set in pixels by segmentationStrip.js so the tick can
     be clamped to the strip bounds when min-height (4px) exceeds the per-slice
     spacing — without clamping the topmost ticks overflow above the strip
     for high slice counts. */
  pointer-events: auto;
  cursor: pointer;
  background-color: var(--segmentation-strip-color);
  border-radius: 4px;
}
/* Hover halo via native :hover — a pseudo-element that snaps in to make the
   active tick *look* bigger. Halo extends leftward (away from the slider,
   into the canvas margin) and a little vertically. For dense segmentations
   where ticks visually overlap, multiple stacked ticks may register :hover
   simultaneously, but their halos render at the same coords and read as one
   — clicking such a stack navigates to whichever tick is topmost in DOM
   order (last to render). No fade — feels snappier. */
.segmentation-strip .seg-tick::before {
  content: "";
  position: absolute;
  left: -6px;
  right: 0;
  top: -2px;
  bottom: -2px;
  background: inherit;
  pointer-events: none;
  opacity: 0;
  border-radius: 3px;
}
.segmentation-strip .seg-tick:hover::before {
  opacity: 1;
}
/* Mid-stroke ticks defer to the canvas as well so the brush cursor doesn't
   flicker to `pointer` when the stroke crosses one. */
body.painting-stroke .segmentation-strip .seg-tick {
  pointer-events: none;
}
/* Current-slice indicator: an always-present marker in the strip at the
   slider's current Y, so the indicator is visible regardless of whether
   that slice has a segmentation tick. Transparent fill + high-contrast
   double outline (white inner + black outer ring) so it stays visible on
   any underlying label color or canvas pixel behind the strip. z-index
   above ticks so the outline isn't clipped when overlapping a tick. */
.segmentation-strip .seg-current-marker {
  position: absolute;
  left: 0;
  right: 0;
  /* bottom + height set in pixels by segmentationStrip.js, same clamp as ticks. */
  pointer-events: none;
  background: transparent;
  border-radius: 2px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.6),
    0 0 0 2px rgba(0, 0, 0, 0.35);
  z-index: 2;
}
/* When the slider is on a segmented slice, the marker overlays a tick — push
   to full opacity so the ring stays distinct against the colored tick. */
.segmentation-strip .seg-current-marker.on-tick {
  box-shadow:
    0 0 0 1px rgb(255, 255, 255),
    0 0 0 2px rgb(0, 0, 0);
}

.undraggable {
  /* make non-draggable: */
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

.clickableImage {
  opacity: 0.7;
  transition: opacity 0.1s;

  /* make non-draggable: */
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
.clickableImage:hover {
  opacity: 1;
  transition: opacity 0.05s;
  cursor: pointer;
}

.clickable:hover {
  cursor: pointer;
  background-color: rgb(0, 255, 242, 0.1);
}
.pointerCursor {
  cursor: pointer;
}

label:hover {
  cursor: pointer;
}

/* Toolbar sections */
.toolbar-section {
  padding: 7px 4px;
  border-bottom: 1px solid rgba(134, 205, 247, 0.2);
}

/* Draw-mode controls expand into the applicable options without placing a
   separator between the selected mode and its settings. Size remains its own
   DOM section because the mobile More menu reparents that section. */
#drawModeSection.options-continued {
  padding-bottom: 2px;
  border-bottom: 0;
}

#pointerSizeSection.continued-options {
  padding-top: 2px;
}

.toolbar-row.draw-mode-options {
  margin: 10px 0 2px 8px;
  flex-wrap: nowrap;
}

/* The small caret grows directly out of the active Polygon button, making
   the indented row below read as its child without adding a heavy panel. */
#drawModePointer,
#drawModePolygon {
  position: relative;
}

#drawModePointer.active::after,
#drawModePolygon.active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid rgba(134, 205, 247, 0.8);
  transform: translateX(-50%);
  pointer-events: none;
}

.mpr-btn.mode-option-btn {
  flex: 0 0 auto;
  height: 21px;
  min-height: 0;
  margin: 0;
  padding: 2px 7px;
  font-size: 11px;
  line-height: 1;
}

.polygon-spline-strength {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 58px;
  flex: 1 1 92px;
  overflow: hidden;
}

#polygonSplineStrengthRange {
  min-width: 38px;
  width: 100%;
  height: 12px;
  margin: 0;
  accent-color: rgb(134, 205, 247);
}

#polygonSplineStrengthValue {
  width: 20px;
  flex: 0 0 20px;
  color: rgba(216, 216, 216, 0.72);
  font-size: 10px;
  line-height: 1;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.mode-option-btn:disabled,
.mobile-toolbar-btn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.voxel-info-control {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: auto;
  flex: 0 0 auto;
}

#pixelValChBox {
  width: 13px;
  height: 13px;
  margin: 0;
  accent-color: rgb(134, 205, 247);
}

.voxel-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: rgb(196, 196, 196);
  font: bold 11px/1 Georgia, serif;
  cursor: pointer;
  transition: color 0.1s, background-color 0.1s, box-shadow 0.1s;
}

#pixelValChBox:checked + .voxel-info-icon {
  color: rgb(134, 205, 247);
  background: rgba(134, 205, 247, 0.13);
  box-shadow: 0 0 0 1px rgba(134, 205, 247, 0.1);
}

.toolbar-section-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(216, 216, 216, 0.5);
  margin-bottom: 4px;
}

.toolbar-icon-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.toolbar-icon {
  width: 32px;
  height: 32px;
  opacity: 0.7;
  transition: opacity 0.1s;
  cursor: pointer;
  user-select: none;
  -webkit-user-drag: none;
}
.toolbar-icon:hover {
  opacity: 1;
}

.toolbar-btn-group {
  display: flex;
  gap: 4px;
}

.mpr-btn {
  flex: 1;
  padding: 4px 2px;
  font-size: 12px;
  border: 1px solid rgb(121, 159, 182);
  border-radius: 4px;
  background-color: rgb(32, 32, 32);
  color: rgb(196, 196, 196);
  cursor: pointer;
  transition: background-color 0.1s;
}
.mpr-btn:hover {
  background-color: rgb(50, 50, 50);
}
.mpr-btn.active {
  background-color: rgb(7, 109, 104);
  color: white;
  border-color: rgb(7, 140, 134);
}

.toolbar-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 3px 0;
}

.toolbar-row-label {
  font-size: 11px;
  width: auto;
  flex-shrink: 0;
  color: rgba(216, 216, 216, 0.7);
}

.toolbar-slider {
  flex: 1;
  height: 12px;
  min-width: 0;
  accent-color: rgb(134, 205, 247);
}

/* Per-label opacity: visually subordinate to the global "All opacity"
   slider above it — thin custom track + small thumb instead of the
   full-weight native control. */
#labelOpacityRange {
  -webkit-appearance: none;
  appearance: none;
  height: 12px; /* unchanged hit area */
  background: transparent;
}
#labelOpacityRange::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 2px;
  background: rgba(134, 205, 247, 0.35);
}
#labelOpacityRange::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgb(134, 205, 247);
  margin-top: -3.5px; /* center the 10px thumb on the 3px track */
}
#labelOpacityRange::-moz-range-track {
  height: 3px;
  border-radius: 2px;
  background: rgba(134, 205, 247, 0.35);
}
#labelOpacityRange::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border: 0;
  border-radius: 50%;
  background: rgb(134, 205, 247);
}

.toolbar-val {
  width: 34px;
  flex-shrink: 0;
  box-sizing: border-box;
  height: 21px;
  padding: 2px 4px;
  border: 1px solid rgba(134, 205, 247, 0.28);
  border-radius: 3px;
  background: rgba(10, 14, 16, 0.78);
  color: rgba(236, 246, 250, 0.92);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  outline: none;
}

.toolbar-val-wide {
  width: 56px;
  flex-shrink: 0;
  box-sizing: border-box;
  height: 21px;
  padding: 2px 5px;
  border: 1px solid rgba(134, 205, 247, 0.28);
  border-radius: 3px;
  background: rgba(10, 14, 16, 0.78);
  color: rgba(236, 246, 250, 0.92);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  outline: none;
}

.toolbar-val:focus-visible,
.toolbar-val-wide:focus-visible {
  border-color: rgba(134, 205, 247, 0.78);
  background: rgba(8, 18, 22, 0.96);
  box-shadow: 0 0 0 1px rgba(134, 205, 247, 0.18);
}

input[type="checkbox"] {
  accent-color: rgb(134, 205, 247);
}

.toolbar-reset {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.6;
  cursor: pointer;
  transition: opacity 0.1s;
}
.toolbar-reset:hover {
  opacity: 1;
}

.threshold-source-badge {
  margin-left: auto;
  padding: 1px 5px;
  border: 1px solid rgba(134, 205, 247, 0.25);
  border-radius: 3px;
  font-size: 10px;
  color: rgba(216, 216, 216, 0.75);
  background: rgba(255, 255, 255, 0.04);
}

.threshold-source-badge.is-override {
  color: rgb(255, 221, 140);
  border-color: rgba(255, 221, 140, 0.45);
  background: rgba(140, 95, 0, 0.18);
}

#thresholdSection.global-threshold-muted #threshChBox,
#thresholdSection.global-threshold-muted label[for="threshChBox"],
#thresholdSection.global-threshold-muted #thresholdSettingsDiv {
  opacity: 0.45;
}

#thresholdSection.global-threshold-muted input,
#thresholdSection.global-threshold-muted button {
  cursor: not-allowed;
}

.threshold-dual-control {
  position: relative;
  height: 28px;
  margin: 5px 2px 2px;
}

.threshold-track {
  position: absolute;
  left: 4px;
  right: 4px;
  top: 12px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.16);
}

.threshold-track-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 2px;
  background: rgba(134, 205, 247, 0.75);
}

.threshold-range {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  left: 0;
  top: 5px;
  width: 100%;
  height: 18px;
  margin: 0;
  background: transparent;
  pointer-events: none;
}

.threshold-range-min {
  z-index: 3;
}

.threshold-range-max {
  z-index: 4;
}

.threshold-range::-webkit-slider-runnable-track {
  height: 4px;
  background: transparent;
}

.threshold-range::-moz-range-track {
  height: 4px;
  background: transparent;
}

.threshold-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 9px;
  height: 18px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 2px;
  background: rgb(134, 205, 247);
  cursor: ew-resize;
  pointer-events: auto;
}

.threshold-range::-moz-range-thumb {
  width: 9px;
  height: 18px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 2px;
  background: rgb(134, 205, 247);
  cursor: ew-resize;
  pointer-events: auto;
}

.threshold-range-max::-webkit-slider-thumb {
  background: rgb(255, 221, 140);
}

.threshold-range-max::-moz-range-thumb {
  background: rgb(255, 221, 140);
}

.threshold-value-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto auto;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
}

.threshold-value-row label {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  font-size: 10px;
  color: rgba(216, 216, 216, 0.65);
}

.threshold-mini-btn {
  height: 20px;
  padding: 0 6px;
  font-size: 10px;
  border-radius: 3px;
}

body.threshold-wide-mode #thresholdSettingsDiv {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 14px;
  z-index: 260;
  padding: 10px 12px;
  border: 1px solid rgba(134, 205, 247, 0.35);
  border-radius: 5px;
  background: rgb(28, 28, 28);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
}

body.threshold-wide-mode #thresholdSettingsDiv .threshold-dual-control {
  height: 36px;
  margin-top: 0;
}

body.threshold-wide-mode #thresholdSettingsDiv .threshold-track {
  top: 16px;
}

body.threshold-wide-mode #thresholdSettingsDiv .threshold-range {
  top: 7px;
  height: 22px;
}

body.threshold-wide-mode #thresholdSettingsDiv .threshold-range::-webkit-slider-thumb {
  height: 22px;
}

body.threshold-wide-mode #thresholdSettingsDiv .threshold-range::-moz-range-thumb {
  height: 22px;
}

/* Settings popover panel */
.settings-panel {
  position: fixed;
  z-index: 620;
  border: 1px solid rgba(134, 205, 247, 0.4);
  border-radius: 6px;
  background: rgb(28, 28, 28);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  font-size: 11px;
  color: rgb(216, 216, 216);
  min-width: 260px;
  max-width: min(360px, calc(100vw - 16px));
  max-height: min(80vh, calc(100vh - 16px));
  overflow: hidden;
  font-family: Roboto, OpenSans, HelveticaNeue-Light, Helvetica Neue Light,
    Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
}
.settings-panel.is-dragging {
  user-select: none;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.65);
}
.settings-panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(134, 205, 247, 0.18);
  cursor: move;
  touch-action: none;
}
.settings-panel-title {
  flex: 1 1 auto;
  min-width: 0;
  color: rgba(216, 216, 216, 0.9);
  font-size: 12px;
  font-weight: 600;
}
.settings-panel-controls {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.settings-panel-icon-btn {
  height: 24px;
  min-width: 24px;
  padding: 0 7px;
  border: 1px solid rgba(134, 205, 247, 0.25);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(216, 216, 216, 0.85);
  cursor: pointer;
  font-size: 11px;
  line-height: 22px;
}
.settings-panel-icon-btn:hover,
.settings-panel-icon-btn.active {
  color: #fff;
  border-color: rgba(134, 205, 247, 0.55);
  background: rgba(134, 205, 247, 0.16);
}
.settings-panel-body {
  padding: 8px 12px 10px;
  max-height: calc(80vh - 42px);
  overflow-y: auto;
}

.settings-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 0;
}

.settings-label {
  min-width: 90px;
  flex-shrink: 0;
  color: rgba(216, 216, 216, 0.7);
}

.settings-input {
  width: 44px;
  padding: 2px 3px;
  font-size: 11px;
}

.settings-input-sm {
  width: 28px;
  padding: 2px 3px;
  font-size: 11px;
  text-align: center;
}

.settings-slider {
  width: 80px;
  height: 10px;
  accent-color: rgb(134, 205, 247);
}

.settings-actions {
  display: flex;
  gap: 6px;
  padding-top: 6px;
  margin-top: 4px;
  border-top: 1px solid rgba(134, 205, 247, 0.15);
}

/* Label rows */
/* Dense single-line rows: click anywhere selects (the whole row is the
   target — no radio); the active row is marked by tint + border and hosts
   the reparented #activeLabelPanel below its header line. */
.label-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 5px 0 3px;
  width: calc(100% - 4px);
  height: 34px;
  box-sizing: border-box;
  border: 1px solid rgba(0, 120, 155, 0.55);
  border-left-width: 3px;
  border-radius: 4px;
  margin: 3px 2px;
  cursor: pointer;
  overflow: hidden;
  background: rgba(18, 22, 24, 0.68);
}

.label-row:hover {
  background: rgba(24, 34, 38, 0.8);
}

.label-row.active-label-row {
  border-color: rgba(134, 205, 247, 0.85);
  background: rgba(30, 58, 62, 0.9);
  cursor: default;
}

.label-overlay {
  display: none;
}

.label-number {
  flex: none;
  width: 20px;
  font-size: 11px;
  font-weight: bold;
  text-align: right;
  color: rgba(255, 255, 255, 0.55);
  pointer-events: none;
  user-select: none;
}

.label-colorpicker-hidden {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  position: absolute;
}

.label-color-swatch {
  flex: none;
  height: 14px;
  width: 22px;
  border: 2px solid rgba(0, 0, 0, 0.75);
  border-radius: 3px;
  cursor: pointer;
}

.label-lock {
  flex: none;
  width: 15px;
  padding: 4px 1px;
  cursor: pointer;
  opacity: 0.8;
}

.label-name {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.78);
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.label-meta:empty {
  display: none;
}

.label-meta {
  flex: none;
  display: flex;
  align-items: center;
}

.label-flag-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e6a23c;
  opacity: 0.85;
}

/* Selection is shown by the row itself (tint + border); the radio was a
   patch over the name-click-renames conflict and is gone. */
.label-radio {
  display: none;
}

.label-name-input {
  width: 100%;
  box-sizing: border-box;
  padding: 1px 3px;
  font-family: inherit;
  font-weight: bold;
  font-size: inherit;
  color: rgb(230, 230, 230);
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(134, 205, 247, 0.55);
  border-radius: 2px;
  text-align: center;
  outline: none;
}

/* Labels toolbar */
.label-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.label-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.label-toolbar-btn {
  height: 22px;
  min-width: 22px;
  padding: 0 6px;
  font-size: 14px;
  line-height: 1;
  border: 1px solid rgba(134, 205, 247, 0.35);
  border-radius: 3px;
  background: rgb(32, 32, 32);
  color: rgb(216, 216, 216);
  cursor: pointer;
  transition: background-color 0.1s, border-color 0.1s, color 0.1s;
  user-select: none;
}
.label-toolbar-btn:hover:not(:disabled) {
  background: rgb(50, 50, 50);
  border-color: rgba(134, 205, 247, 0.6);
}
.label-toolbar-btn.active {
  background: rgba(7, 109, 104, 0.65);
  border-color: rgba(134, 205, 247, 0.65);
  color: #fff;
}
.label-toolbar-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.label-toolbar-btn-danger:hover:not(:disabled) {
  background: rgb(70, 30, 30);
  border-color: rgba(255, 100, 100, 0.6);
  color: rgb(255, 200, 200);
}
.label-toolbar-btn-icon {
  padding: 0 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.label-toolbar-btn-icon img {
  width: 14px;
  height: 14px;
  display: block;
  opacity: 0.85;
  -webkit-user-drag: none;
}

.label-global-controls {
  margin: 5px 5px 3px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(134, 205, 247, 0.12);
}

.selected-label-panel {
  position: relative;
  z-index: auto;
  margin: 2px 2px 6px;
  padding: 4px 8px 6px;
  border: 1px solid rgba(134, 205, 247, 0.3);
  border-radius: 4px;
  background: rgba(26, 50, 52, 0.55);
}

.active-label-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  min-width: 0;
}

.active-label-swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
}

.active-label-title {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  color: rgba(230, 230, 230, 0.9);
}

.label-prop-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0 0 5px;
  min-width: 0;
}

.label-prop-label {
  width: 54px;
  flex-shrink: 0;
  font-size: 10px;
  color: rgba(216, 216, 216, 0.65);
}

.label-prop-value {
  width: 34px;
  text-align: right;
  flex-shrink: 0;
  font-size: 10px;
  color: rgba(216, 216, 216, 0.72);
  font-variant-numeric: tabular-nums;
}

.label-checkbox-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  font-size: 10px;
  color: rgba(216, 216, 216, 0.72);
}

.label-checkbox-row input {
  margin: 0;
}

.label-threshold-status {
  margin-left: auto;
  color: rgba(216, 216, 216, 0.54);
}

.label-threshold-editor {
  display: none;
  margin-top: 5px;
}

.label-threshold-dual-control {
  margin: 3px 0 2px;
}

.label-threshold-edit-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto auto;
  align-items: center;
  gap: 5px;
}

.label-threshold-edit-row label {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  font-size: 10px;
  color: rgba(216, 216, 216, 0.65);
}

.selected-label-panel.label-threshold-off .label-threshold-editor {
  opacity: 0.62;
}

body.label-threshold-wide-mode #labelThresholdEditor {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 14px;
  z-index: 270;
  padding: 10px 12px;
  border: 1px solid rgba(255, 221, 140, 0.36);
  border-radius: 5px;
  background: rgb(28, 28, 28);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
}

body.label-threshold-wide-mode #labelThresholdEditor .label-threshold-dual-control {
  height: 36px;
  margin-top: 0;
}

body.label-threshold-wide-mode #labelThresholdEditor .threshold-track {
  top: 16px;
}

body.label-threshold-wide-mode #labelThresholdEditor .threshold-range {
  top: 7px;
  height: 22px;
}

body.label-threshold-wide-mode #labelThresholdEditor .threshold-range::-webkit-slider-thumb {
  height: 22px;
}

body.label-threshold-wide-mode #labelThresholdEditor .threshold-range::-moz-range-thumb {
  height: 22px;
}

/* Confirm modal */
.confirm-modal-content {
  background: rgb(28, 28, 28);
  border: 1px solid rgba(134, 205, 247, 0.35);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  color: rgb(216, 216, 216);
  padding: 20px 24px;
  font-family: Roboto, Helvetica Neue, Arial, sans-serif;
  width: 420px;
  max-width: 90%;
  height: auto;
  margin-top: 20vh;
}
.confirm-modal-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px;
}
.confirm-modal-message {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(216, 216, 216, 0.85);
  margin-bottom: 18px;
}
.confirm-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.confirm-modal-btn {
  padding: 6px 14px;
  font-size: 13px;
  border: 1px solid rgba(134, 205, 247, 0.35);
  border-radius: 4px;
  background: rgb(40, 40, 40);
  color: rgb(216, 216, 216);
  cursor: pointer;
}
.confirm-modal-btn:hover {
  background: rgb(55, 55, 55);
  border-color: rgba(134, 205, 247, 0.6);
}
.confirm-modal-btn-primary {
  background: rgb(120, 40, 40);
  border-color: rgba(255, 120, 120, 0.45);
  color: rgb(255, 220, 220);
}
.confirm-modal-btn-primary:hover {
  background: rgb(150, 50, 50);
  border-color: rgba(255, 120, 120, 0.7);
}

.prompt-modal-input {
  width: 100%;
  padding: 7px 10px;
  font-size: 14px;
  font-family: inherit;
  background: rgb(20, 20, 20);
  border: 1px solid rgba(134, 205, 247, 0.35);
  border-radius: 4px;
  color: rgb(216, 216, 216);
  margin-bottom: 8px;
  box-sizing: border-box;
}
.prompt-modal-input:focus {
  outline: none;
  border-color: rgba(134, 205, 247, 0.7);
}
.prompt-modal-error {
  font-size: 12px;
  color: rgb(255, 140, 140);
  min-height: 16px;
  margin-bottom: 10px;
}

.noselect {
  /* makes it propagate through */
  pointer-events: none;

  /* below to make not selectable, but I think it's not needed */
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently
                                        supported by Chrome, Edge, Opera and Firefox */
}

/* ============================================================
   Responsive layout (phone / tablet)
   Driven by body.layout-{desktop,tablet,phone} set in responsiveLayout.js.
   Desktop rules are the defaults above; these only apply on smaller tiers.
   ============================================================ */

#mobileTopBar {
  display: none;
}

/* Mobile toolbar buttons — share visual language with .viewer-toolbar-btn */
.mobile-toolbar-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: #d8d8d8;
  width: 42px;
  height: 42px;
  min-width: 42px;
  flex-shrink: 0;
  padding: 0;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.mobile-toolbar-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.mobile-toolbar-btn.active {
  background-color: rgb(7, 109, 104);
  color: #fff;
  border-color: rgb(7, 140, 134);
}
.mobile-toolbar-btn.danger-active {
  background-color: rgb(168, 43, 43);
  color: #fff;
  border-color: rgb(196, 70, 70);
}
.mobile-toolbar-btn .mseg-icon {
  width: 24px;
  height: 24px;
  fill: currentColor;
  pointer-events: none;
  display: block;
}
.mseg-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.mobile-toolbar-btn .mtb-label {
  font-size: 10px;
  margin-left: 4px;
}

/* Drawer (labels bottom sheet) */
.mobile-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 500;
  display: none;
}
.mobile-drawer-backdrop.open { display: block; }
.mobile-drawer {
  position: fixed;
  z-index: 501;
  background: rgb(28, 28, 28);
  color: rgb(216, 216, 216);
  border: 1px solid rgba(134, 205, 247, 0.3);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.6);
  display: none;
  font-family: Roboto, Helvetica Neue, Arial, sans-serif;
  overflow: hidden;
}
.mobile-drawer.open { display: flex; flex-direction: column; }
.mobile-drawer-header {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(134, 205, 247, 0.2);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.mobile-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px 14px;
}
.mobile-drawer-close {
  background: none;
  border: none;
  color: #ccc;
  font-size: 22px;
  cursor: pointer;
  padding: 0 6px;
  margin: 0;
}

/* Phone: bottom-sheet drawer */
body.layout-phone .mobile-drawer {
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 65vh;
  border-radius: 14px 14px 0 0;
}

/* Tablet: right-edge drawer */
body.layout-tablet .mobile-drawer {
  top: 0;
  bottom: 0;
  right: 0;
  width: min(340px, 70vw);
  border-radius: 14px 0 0 14px;
}

/* Popover backdrop — blocks canvas interaction while a popover is open */
.mobile-popover-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 509;
  display: none;
}
.mobile-popover-backdrop.open { display: block; }

/* Popovers share visual language with .viewer-popover but anchor to the toolbar */
.mobile-popover {
  position: fixed;
  z-index: 510;
  padding: 12px 14px;
  border: 1px solid rgba(134, 205, 247, 0.3);
  border-radius: 8px;
  background: rgb(28, 28, 28);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55);
  font-size: 13px;
  color: rgb(216, 216, 216);
  max-height: 80vh;
  overflow-y: auto;
  display: none;
  font-family: Roboto, Helvetica Neue, Arial, sans-serif;
  min-width: 220px;
}
.mobile-popover.open { display: block; }
.mobile-popover .mp-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
}
.mobile-popover .mp-row label {
  flex: 0 0 60px;
  font-size: 12px;
  color: rgba(216, 216, 216, 0.7);
}
.mobile-popover .mp-row input[type="range"] {
  flex: 1;
  min-width: 0;
}
.mobile-popover .mp-row input[type="number"],
.mobile-popover .mp-row input[type="text"] {
  width: 56px;
  background: rgb(40, 40, 40);
  color: rgb(216, 216, 216);
  border: 1px solid rgba(134, 205, 247, 0.3);
  border-radius: 4px;
  padding: 2px 4px;
  font-size: 12px;
}
.mobile-popover .mp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.mobile-popover .mp-chip {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 14px;
  padding: 4px 10px;
  font-size: 12px;
  color: #ccc;
  cursor: pointer;
}
.mobile-popover .mp-chip:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}
.mobile-popover .mp-section-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(216, 216, 216, 0.55);
  margin: 10px 0 4px;
}
.mobile-popover-mini {
  min-width: 160px;
  padding: 8px 12px;
}
.mobile-popover-mini .mp-row {
  margin: 0;
}
.mp-ptr-val {
  min-width: 24px;
  text-align: center;
  font-size: 12px;
  color: rgba(216, 216, 216, 0.85);
}

/* --------- Phone tier --------- */
body.layout-phone #allText {
  display: none;
}
body.layout-phone #splitContainer {
  left: 0;
  top: 56px; /* must clear #mobileTopBar height (border-box) */
  right: 0;
  bottom: 0;
  flex-direction: column;
}
body.layout-phone #mobileTopBar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: rgb(24, 24, 24);
  border-bottom: 2px solid rgba(134, 205, 247, 0.55);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;
  box-sizing: border-box; /* height includes padding + border */
  overflow-x: auto;
  overflow-y: hidden;
  z-index: 400;
  -webkit-overflow-scrolling: touch;
}
body.layout-phone #mobileTopBar::-webkit-scrollbar {
  height: 4px;
}
body.layout-phone #mobileTopBar::-webkit-scrollbar-thumb {
  background: rgba(134, 205, 247, 0.4);
  border-radius: 2px;
}
body.layout-phone #mainPanel {
  flex: 1 1 auto;
  min-height: 200px;
}
body.layout-phone #secondPanel {
  flex: 0 0 40vh;
  min-width: 0;
  border-left: none;
  border-top: 2px solid rgba(134, 205, 247, 0.4);
}
body.layout-phone #divider {
  width: 100%;
  height: 6px;
  cursor: row-resize;
  flex-shrink: 0;
}
body.layout-phone #savingOverlay {
  width: 80vw !important;
  height: auto !important;
  top: 30vh !important;
  left: 10vw !important;
  padding: 18px !important;
}

/* --------- Tablet tier --------- */
body.layout-tablet #allText {
  display: none;
}
body.layout-tablet #splitContainer {
  left: 0;
  top: 56px; /* must clear #mobileTopBar height (border-box) */
}
body.layout-tablet #mobileTopBar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgb(24, 24, 24);
  border-bottom: 2px solid rgba(134, 205, 247, 0.55);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;
  box-sizing: border-box; /* height includes padding + border */
  overflow-x: auto;
  overflow-y: hidden;
  z-index: 400;
  -webkit-overflow-scrolling: touch;
}
body.layout-tablet #mobileTopBar::-webkit-scrollbar {
  height: 4px;
}
body.layout-tablet #mobileTopBar::-webkit-scrollbar-thumb {
  background: rgba(134, 205, 247, 0.4);
  border-radius: 2px;
}
body.layout-tablet #secondPanel {
  flex: 0 0 45%;
}

/* Touch mode: widen divider hit area for finger dragging */
body.touch-mode #divider {
  position: relative;
}
body.touch-mode #divider::before {
  content: "";
  position: absolute;
  top: -10px;
  bottom: -10px;
  left: -10px;
  right: -10px;
}
body.layout-phone.touch-mode #divider::before {
  top: -14px;
  bottom: -14px;
  left: 0;
  right: 0;
}

/* Touch mode cursors (suppress mouse hover artifacts) */
body.touch-mode #vis_canvas,
body.touch-mode #wrapper canvas {
  cursor: default;
}

/* Modal responsiveness on phone */
body.layout-phone .modal-content {
  width: 96vw !important;
  height: 90vh !important;
  padding: 12px 14px !important;
}
body.layout-phone #controlsModalContent {
  width: 96vw !important;
  height: calc(100vh - 24px) !important;
  padding: 14px 16px !important;
  max-width: 96vw !important;
  box-sizing: border-box;
}
body.layout-phone #controlsModalContent .close {
  min-width: 44px;
  height: 44px;
  margin: -6px -6px 4px 8px;
  font-size: 30px;
}
/* Essentials grid collapses to a single column on phones. */
body.layout-phone .kb-ess-grid {
  grid-template-columns: 1fr;
}
body.layout-phone .settings-panel {
  width: calc(100vw - 16px) !important;
  max-width: none !important;
  min-width: auto !important;
  left: 8px !important;
  right: 8px !important;
  top: auto !important;
  bottom: 8px !important;
  max-height: min(75vh, calc(100vh - 72px)) !important;
  border-radius: 8px;
}
body.layout-phone .settings-panel-header {
  cursor: default;
  touch-action: auto;
}
body.layout-phone .settings-panel-body {
  max-height: calc(75vh - 42px);
}
body.layout-phone .modal {
  padding-top: 2vh;
}
body.layout-phone .models-modal {
  padding-top: 0 !important;
}

/* ============================================================
   Models modal — redesigned layout (desktop + mobile)
   ============================================================ */

.models-modal {
  /* parent .modal still handles display:block via createModal; we only style the content */
  padding-top: 0;
}

.models-modal-content {
  /* Override generic .modal-content inherited styles */
  background: rgb(26, 26, 28) !important;
  color: rgb(216, 216, 216);
  border: 1px solid rgba(134, 205, 247, 0.35) !important;
  border-radius: 10px !important;
  padding: 0 !important;
  width: min(900px, 92vw) !important;
  height: min(86vh, 820px) !important;
  max-width: none;
  margin: 4vh auto !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: Roboto, Helvetica Neue, Arial, sans-serif;
  font-size: 13px;
}

.models-modal-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(134, 205, 247, 0.2);
  background: rgb(22, 22, 24);
}
.models-modal-title {
  font-size: 16px;
  font-weight: 600;
  color: rgb(230, 230, 230);
  letter-spacing: 0.3px;
}
.models-modal-header .close {
  color: rgba(216, 216, 216, 0.7);
  float: none;
  font-size: 28px;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
  transition: color 0.1s;
}
.models-modal-header .close:hover {
  color: #fff;
}

.models-modal-status {
  flex-shrink: 0;
  padding: 10px 20px;
  background: rgb(20, 20, 22);
  border-bottom: 1px solid rgba(134, 205, 247, 0.15);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.models-status-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 12px;
}
.models-status-label {
  flex: 0 0 120px;
  color: rgba(216, 216, 216, 0.55);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.6px;
}
.models-status-value {
  flex: 1;
  color: rgb(0, 255, 242);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.models-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px 24px;
  -webkit-overflow-scrolling: touch;
}
.models-modal-body::-webkit-scrollbar { width: 8px; }
.models-modal-body::-webkit-scrollbar-thumb {
  background: rgba(134, 205, 247, 0.25);
  border-radius: 4px;
}
.models-modal-body::-webkit-scrollbar-track { background: transparent; }

.models-section {
  margin-bottom: 22px;
}
.models-section:empty {
  margin: 0;
}
.models-section-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: rgba(134, 205, 247, 0.85);
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(134, 205, 247, 0.12);
  font-weight: 600;
}
.models-section-sub {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: rgba(216, 216, 216, 0.5);
  margin-left: 4px;
  font-size: 10px;
}
.models-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px;
}

.model-card {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 10px 12px;
  color: rgb(216, 216, 216);
  cursor: pointer;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: background 0.1s, border-color 0.1s, transform 0.08s;
  font-family: inherit;
  font-size: 12px;
  min-height: 62px;
  touch-action: manipulation;
}
.model-card:hover {
  background: rgba(134, 205, 247, 0.08);
  border-color: rgba(134, 205, 247, 0.4);
}
.model-card:active {
  transform: scale(0.98);
}
.model-card.active {
  background: rgba(7, 109, 104, 0.35);
  border-color: rgb(7, 140, 134);
}
.model-card-stars {
  font-size: 10px;
  color: rgba(255, 200, 64, 0.9);
  letter-spacing: 1px;
  line-height: 1;
  opacity: 0.85;
}
.model-card-stars[data-rating="1"] { color: rgba(255, 200, 64, 0.4); }
.model-card-stars[data-rating="2"] { color: rgba(255, 200, 64, 0.55); }
.model-card-stars[data-rating="3"] { color: rgba(255, 200, 64, 0.75); }
.model-card-name {
  font-size: 13px;
  font-weight: 500;
  color: rgb(230, 230, 230);
  line-height: 1.25;
}
.model-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
}
.model-card-size {
  font-size: 10px;
  color: rgba(216, 216, 216, 0.5);
  background: rgba(255, 255, 255, 0.06);
  padding: 2px 6px;
  border-radius: 3px;
}
.model-card-hint {
  font-size: 10px;
  color: rgba(216, 216, 216, 0.55);
  margin-top: 2px;
}
/* Dataset-preview lock: server/account-required models get a clear overlay stating why they're
   unavailable (log in / add to a project); only the in-browser model stays fully usable. */
.model-card-locked { position: relative; }
.model-card-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: rgba(8, 10, 14, 0.66);
  border-radius: inherit;
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
  cursor: pointer;
}
.model-card-overlay .lock-ic { font-size: 13px; opacity: 0.9; }
/* Attribution / license footer under a featured model card. */
.model-card-about {
  font-size: 10px;
  color: rgba(216, 216, 216, 0.4);
  margin-top: 6px;
  padding: 0 4px;
  line-height: 1.5;
}
.model-card-about a { color: rgba(216, 216, 216, 0.7); text-decoration: underline; }
.model-card-about a:hover { color: #fff; }
.model-card-hint kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  padding: 1px 4px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  margin: 0 1px;
}

.nni-featured-card:hover {
  background: rgba(0, 204, 204, 0.12) !important;
  border-color: rgba(0, 204, 204, 0.6) !important;
}
/* MedSeg-interactive card: same hover shine as nnInteractive, in its purple accent. The !important
   is needed because the card pins its border/background via inline style, which would otherwise beat
   the plain .model-card:hover rule (leaving it dead on hover). */
.medseg-featured-card:hover {
  background: rgba(201, 156, 255, 0.12) !important;
  border-color: rgba(201, 156, 255, 0.6) !important;
}
.models-legacy-toggle {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: rgba(216, 216, 216, 0.45);
  cursor: pointer;
  padding: 8px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  list-style: none;
  user-select: none;
}
.models-legacy-toggle::-webkit-details-marker { display: none; }
.models-legacy-toggle::before {
  content: "\25B6";
  display: inline-block;
  margin-right: 6px;
  font-size: 8px;
  transition: transform 0.15s;
}
details[open] > .models-legacy-toggle::before {
  transform: rotate(90deg);
}
.models-legacy-toggle:hover {
  color: rgba(216, 216, 216, 0.7);
}
.models-legacy-toggle .models-section-sub {
  font-size: 10px;
}

/* Phone & small tablet overrides for the models modal */
@media (max-width: 720px) {
  .models-modal-content {
    width: 94vw !important;
    height: 88vh !important;
    height: 88dvh !important;
    border-radius: 10px !important;
    max-width: none !important;
    margin: 6vh auto !important;
  }
  .models-modal { padding-top: 0; }
  .models-modal-header {
    padding: 12px 14px;
    padding-top: max(12px, env(safe-area-inset-top));
  }
  .models-modal-title { font-size: 15px; }
  .models-modal-header .close {
    font-size: 32px;
    padding: 0 8px;
  }
  .models-modal-status {
    padding: 8px 14px;
  }
  .models-status-label { flex: 0 0 90px; }
  .models-modal-body {
    padding: 14px 14px 20px;
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }
  .models-grid {
    grid-template-columns: 1fr;
  }
  .model-card {
    min-height: 56px;
  }
}
body.layout-phone .models-modal { padding-top: 0; }


/* Label context menu (labelContextMenu.js) — per-label operations appear
   at the moment of need instead of occupying toolbar/settings space. */
.label-ctx-menu {
  position: fixed;
  z-index: 4000;
  min-width: 180px;
  max-height: 60vh;
  overflow-y: auto;
  background: rgba(28, 32, 36, 0.97);
  border: 1px solid rgba(134, 205, 247, 0.35);
  border-radius: 6px;
  padding: 4px 0;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
  font-size: 12px;
}

.label-ctx-item {
  padding: 5px 14px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.label-ctx-item:hover {
  background: rgba(134, 205, 247, 0.15);
}

.label-ctx-danger {
  color: rgb(235, 120, 120);
}

.label-ctx-danger:hover {
  background: rgba(200, 60, 60, 0.3);
}

.label-ctx-has-sub::after {
  content: "\203A";
  float: right;
  opacity: 0.6;
  margin-left: 14px;
}

.label-ctx-sep {
  height: 1px;
  margin: 4px 8px;
  background: rgba(255, 255, 255, 0.12);
}

/* Submenu operation header — says whether the label list merges or swaps.
   The list is placed so its first ROW aligns with the parent item; the
   header extends upward from there. */
.label-ctx-subheader {
  padding: 4px 14px 5px;
  margin-bottom: 3px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(134, 205, 247, 0.9);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  white-space: nowrap;
  cursor: default;
}

.label-ctx-chip {
  display: inline-block;
  width: 12px;
  height: 9px;
  margin-right: 7px;
  border: 1px solid rgba(0, 0, 0, 0.6);
  border-radius: 2px;
}

/* Min/Max inputs shrink with the toolbar instead of overflowing their
   grid cells (the labels are flex rows inside 1fr columns). */
.threshold-value-row label,
.label-threshold-edit-row label {
  min-width: 0;
}
.threshold-value-row .toolbar-val-wide,
.label-threshold-edit-row .toolbar-val-wide {
  flex: 1 1 32px;
  width: auto;
  min-width: 0;
}

/* Grow/Shrink control panel (labelMorphology.js) — settings-panel family */
.morph-panel {
  width: 235px;
}
.morph-target {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 2px 0 8px;
  font-size: 12.5px;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.85);
}
.morph-target-swatch {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(0, 0, 0, 0.75);
  border-radius: 3px;
  flex: none;
}
.morph-target-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.morph-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0;
}
.morph-lbl {
  font-size: 11px;
  color: rgba(216, 216, 216, 0.7);
  flex: none;
}
.morph-radius-range {
  flex: 1;
  min-width: 0;
}
.morph-actions button {
  flex: 1;
}
.morph-status {
  min-height: 15px;
  font-size: 11px;
  color: rgba(216, 216, 216, 0.75);
  margin-top: 4px;
}
.morph-thr-note {
  font-size: 10px;
  color: #e6a23c;
  margin-top: 2px;
}

/* Morph panel buttons — toolbar family (dark + blue border), teal primary */
.morph-btn {
  border: 1px solid rgb(121, 159, 182);
  border-radius: 5px;
  margin: 0;
  padding: 6px 0;
  font-size: 12.5px;
  background-color: rgb(32, 32, 32);
  color: rgb(205, 205, 205);
  cursor: pointer;
}
.morph-btn:hover {
  background-color: rgb(51, 51, 51);
  color: #fff;
  border-color: rgb(160, 195, 220);
}
.morph-btn:active {
  background-color: rgb(24, 24, 24);
}
.morph-btn-primary {
  background-color: rgb(7, 109, 104);
  border-color: rgb(7, 140, 134);
  color: #fff;
  font-weight: 600;
}
.morph-btn-primary:hover {
  background-color: rgb(9, 131, 125);
  border-color: rgb(10, 165, 158);
}
.morph-btn-small {
  padding: 4px 0;
  font-size: 11.5px;
  color: rgb(180, 180, 180);
}

/* Pin toggle: upright + teal = pinned, tilted outline = unpinned. */
.panel-pin-btn svg {
  display: block;
}
.panel-pin-btn.pinned-on {
  color: rgb(10, 165, 158);
}
.panel-pin-btn:not(.pinned-on) svg {
  transform: rotate(45deg);
  opacity: 0.55;
}

/* Label statistics panel */
.stats-panel {
  width: 245px;
}
.stats-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 12px;
  margin: 4px 0 10px;
  font-size: 11.5px;
}
.stats-k {
  color: rgba(216, 216, 216, 0.6);
  white-space: nowrap;
}
.stats-v {
  color: rgba(255, 255, 255, 0.85);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.stats-hist {
  display: block;
  width: 100%;
  height: 96px;
  background: rgba(10, 14, 16, 0.6);
  border: 1px solid rgba(134, 205, 247, 0.18);
  border-radius: 3px;
}
.stats-hist-axis {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: rgba(216, 216, 216, 0.55);
  margin: 2px 1px 0;
}


/* "updating…" indicator overlaid on the stats histogram */
.stats-hist-wrap {
  position: relative;
}
.stats-hist-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 14, 16, 0.55);
  color: rgba(255, 255, 255, 0.92);
  font-size: 12.5px;
  border-radius: 3px;
  pointer-events: none;
}

/* Shrink is filled like Grow but in a subtractive warm tone, so the pair
   reads add/remove rather than primary/secondary. */
.morph-btn-shrink {
  background-color: rgb(122, 48, 48);
  border-color: rgb(160, 72, 72);
  color: #fff;
  font-weight: 600;
}
.morph-btn-shrink:hover {
  background-color: rgb(145, 58, 58);
  border-color: rgb(190, 90, 90);
}

/* "..." on the selected-label card — visible entry to the label menu */
.label-card-menu-btn {
  flex: none;
  width: 24px;
  height: 20px;
  border: 1px solid rgba(134, 205, 247, 0.35);
  border-radius: 4px;
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  font-size: 14px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}
.label-card-menu-btn:hover {
  background: #333;
  color: #fff;
  border-color: rgba(160, 195, 220, 0.7);
}

/* The ⌖ glyph (U+2316) hangs below the baseline in system fonts, so it
   renders below the button's optical center; nudge it up. The ⋯ menu
   button next to it centers fine and stays untouched. Amber = the color
   of the locate rings the button triggers. margin-left:auto on the FIRST
   button of the pair (only) packs ⌖ and ⋯ together at the right edge —
   on both, flexbox split the free space between them. */
#activeLabelLocateBtn {
  margin-left: auto;
  padding-bottom: 3px;
  color: rgb(255, 200, 60);
}

/* Tighten the pair below the header's 6px gap. */
#activeLabelMenuBtn {
  margin-left: -3px;
}

/* Locate beacon rings — short-lived halos around each island of the label.
   Fully visible for the first 60% (1.2s), then fade out; JS removes the
   element when the 2s animation ends. */
.locate-ring {
  position: absolute;
  /* border-box: left/top place the ring at center − r, so the border must
     count toward width/height or the visible circle sits border-width
     (2.5px) low-right of the island center. */
  box-sizing: border-box;
  border: 2.5px solid rgb(255, 200, 60);
  border-radius: 50%;
  pointer-events: none;
  z-index: 40;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.6), inset 0 0 6px rgba(0, 0, 0, 0.4);
  animation: locate-ring-fade 2s linear forwards;
}

@keyframes locate-ring-fade {
  0%, 60% { opacity: 1; }
  100% { opacity: 0; }
}