/* SAFE-PCB Gerber Viewer — brand colors: teal #009A9C */
:root {
  --teal: #009A9C;
  --teal-dk: #007274;
  --bg: #0e1113;
  --panel: #171b1e;
  --panel-2: #1f2529;
  --line: #2a3136;
  --txt: #e6eaec;
  --txt-dim: #9aa6ac;
  --warn: #e0a800;
  --board-bg: #0a0d0f;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; } /* overrides the sections' display:flex */
html, body { height: 100%; margin: 0; }
body {
  font-family: "Roboto Condensed", Arial, system-ui, sans-serif;
  background: var(--bg);
  color: var(--txt);
  display: flex;
  flex-direction: column;
}

/* ---------- Topbar ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; background: var(--panel); border-bottom: 1px solid var(--line);
}
.brand { font-size: 16px; letter-spacing: .3px; }
.brand strong { color: var(--teal); }
.brand .dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  background: var(--teal); margin-right: 8px; vertical-align: middle;
}
.brand-loc { color: var(--txt-dim); font-size: 13px; }

/* Feedback thumbs (bottom status bar) + report dialog */
.fb-bar { display: inline-flex; gap: 2px; margin: 0 8px; }
.fb-bar button {
  cursor: pointer; background: none; border: none; font-size: 14px;
  padding: 2px 5px; border-radius: 6px; filter: grayscale(1); opacity: .65;
}
.fb-bar button:hover { filter: none; opacity: 1; background: var(--panel-2); }
.fb-bar button.voted { filter: none; opacity: 1; }
.fb-bar button:disabled { cursor: default; }
.fb-intro { margin: 0 0 10px; }
.fb-problems { display: flex; flex-direction: column; gap: 7px; margin-bottom: 12px; }
.fb-problems label {
  display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer;
  color: var(--txt);
}
.fb-problems input[type="checkbox"] { accent-color: var(--teal); width: 15px; height: 15px; }
#fbComment {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 56px;
  font-family: inherit; font-size: 13px; color: var(--txt);
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px;
}
#fbComment:focus { outline: none; border-color: var(--teal); }
.fb-note { margin: 10px 0 14px !important; font-size: 11.5px !important; color: var(--txt-dim) !important; }

/* Version badge (topbar), opens the release notes */
.version-badge {
  font-family: inherit; cursor: pointer; margin-left: 10px; padding: 2px 9px;
  font-size: 11px; font-weight: 600; letter-spacing: .3px;
  color: var(--teal); background: rgba(0, 154, 156, .10);
  border: 1px solid rgba(0, 154, 156, .45); border-radius: 999px;
}
.version-badge:hover { background: var(--teal); color: #fff; }
/* neutral (non-warning) modal title, e.g. release notes */
.modal-box h3.neutral { color: var(--teal); }

/* Language picker (landing page) */
.lang-bar { display: flex; gap: 6px; justify-content: center; margin-bottom: 18px; }
.lang-bar button {
  font-family: inherit; cursor: pointer; padding: 6px 12px; font-size: 12.5px;
  color: var(--txt-dim); background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 8px;
}
.lang-bar button:hover { color: var(--teal); border-color: var(--teal); }
.lang-bar button.active { color: #fff; background: var(--teal); border-color: var(--teal); }

/* ---------- Drop screen ---------- */
.drop-screen { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; }
.dropzone {
  width: min(640px, 92vw); padding: 48px 32px; text-align: center;
  border: 2px dashed var(--line); border-radius: 14px; background: var(--panel);
  transition: border-color .15s, background .15s;
}
.dropzone.hover { border-color: var(--teal); background: var(--panel-2); }
.dz-icon { font-size: 46px; color: var(--teal); line-height: 1; }
.dropzone h2 { margin: 14px 0 6px; font-weight: 600; }
.dropzone p { color: var(--txt-dim); margin: 6px 0; }
.dz-note { font-size: 12px; margin-top: 18px; }
#browseBtn, .seg, .stage-toolbar button, .link-btn {
  font-family: inherit; cursor: pointer; color: var(--txt);
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px;
}
#browseBtn { margin-top: 14px; padding: 9px 20px; font-size: 14px; }
#browseBtn:hover { border-color: var(--teal); }

.status { min-height: 22px; font-size: 14px; color: var(--txt-dim); text-align: center; }
.status.error { color: #ff6b6b; }
.spinner {
  display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px;
  border: 2px solid var(--line); border-top-color: var(--teal); border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Viewer ---------- */
.viewer-screen { flex: 1; display: flex; min-height: 0; }
.sidebar {
  width: 280px; flex-shrink: 0; background: var(--panel); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; min-height: 0;
}
.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--line); font-weight: 600;
}
.link-btn { padding: 4px 8px; font-size: 12px; }
.link-btn:hover { color: var(--teal); }

.layer-actions { display: flex; gap: 6px; padding: 8px 10px 0; }
.layer-actions .link-btn { flex: 1; text-align: center; padding: 5px 0; }

.layer-list { list-style: none; margin: 0; padding: 8px; overflow-y: auto; flex: 1; }
.layer-item {
  display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px;
  margin-bottom: 4px; background: var(--panel-2); border: 1px solid transparent;
  cursor: grab;
}
.layer-item:hover { border-color: var(--line); }
.layer-item { transition: margin .12s ease; }
.layer-item.dragging { opacity: .4; cursor: grabbing; }
/* labelled separator between layer categories: line — CATEGORY — line */
.layer-cat {
  display: flex; align-items: center; gap: 8px; list-style: none;
  margin: 12px 2px 6px; color: var(--txt-dim);
  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .6px;
}
.layer-cat:first-child { margin-top: 2px; }
.layer-cat::before, .layer-cat::after { content: ''; flex: 1; height: 1px; background: var(--line); }
/* collapsible production categories (#11) */
.layer-cat-group { list-style: none; margin-top: 10px; }
.layer-cat-group:first-child { margin-top: 2px; }
.layer-cat.lc-head { cursor: pointer; justify-content: space-between; margin: 0 2px 6px; padding-bottom: 5px; border-bottom: 1px solid var(--line); }
.layer-cat.lc-head::before, .layer-cat.lc-head::after { display: none; }
.layer-cat.lc-head:hover { color: var(--teal); }
.layer-cat.lc-head .ir-toggle { flex: 0 0 auto; }
.lc-list { list-style: none; margin: 0; padding: 0; }
/* overlap blending (#13): two stacked layers read as a distinct brighter color */
#boardMirror g.layer-blend { mix-blend-mode: screen; }
/* drag & drop: open a highlighted slot with a "+" where the layer will land */
.layer-item.drop-before, .layer-item.drop-after { position: relative; }
.layer-item.drop-before { margin-top: 30px; }
.layer-item.drop-after { margin-bottom: 32px; }
.layer-item.drop-before::before, .layer-item.drop-after::after {
  content: '+'; position: absolute; left: 0; right: 0; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px dashed var(--teal); border-radius: 7px;
  background: rgba(0, 154, 156, .14); color: var(--teal);
  font-size: 16px; font-weight: 700; line-height: 1; pointer-events: none;
}
.layer-item.drop-before::before { top: -27px; }
.layer-item.drop-after::after { bottom: -27px; }
.layer-item.off { opacity: .45; }
.layer-swatch { width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0; border: 1px solid rgba(255,255,255,.25); }
.layer-meta { flex: 1; min-width: 0; }
.layer-meta .lm-type { font-size: 13px; line-height: 1.1; }
.layer-meta .lm-file { font-size: 11px; color: var(--txt-dim); }
.ellipsis, .lm-file { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.layer-item.unknown .lm-type { color: var(--warn); }

/* Collapsible layer groups (documentation, empty layers) */
.layer-group { margin-top: 10px; }
.lg-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 8px; cursor: pointer; border-top: 1px solid var(--line);
  color: var(--txt-dim); font-size: 11px; text-transform: uppercase; letter-spacing: .4px;
}
.lg-head:hover { color: var(--teal); }
.lg-head .ir-toggle { flex-shrink: 0; }
.lg-list { list-style: none; margin: 4px 0 0; padding: 0; }
.layer-item.empty { opacity: .6; }
.lm-empty {
  display: inline-block; font-size: 10px; color: #0e1113; background: var(--warn);
  border-radius: 4px; padding: 0 5px; vertical-align: middle; font-weight: 600;
}
.lm-conflict {
  display: inline-block; font-size: 10px; color: #0e1113; background: var(--warn);
  border-radius: 4px; padding: 0 5px; vertical-align: middle; font-weight: 600;
  cursor: help;
}
.layer-vis { cursor: pointer; background: none; border: none; color: var(--txt-dim); font-size: 15px; padding: 2px 4px; }
.layer-vis:hover { color: var(--teal); }
.layer-ord { display: flex; flex-direction: column; }
.layer-ord button { background: none; border: none; color: var(--txt-dim); cursor: pointer; line-height: .8; font-size: 10px; padding: 0 2px; }
.layer-ord button:hover { color: var(--teal); }

.board-info { border-top: 1px solid var(--line); padding: 12px 14px; font-size: 13px; }
.bi-row { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; }
.bi-row span { color: var(--txt-dim); }
.bi-row strong { font-weight: 600; max-width: 160px; }

/* Whole-window drop overlay (chain-loading from the viewer) */
.drop-overlay {
  position: fixed; inset: 0; z-index: 70; display: flex;
  align-items: center; justify-content: center;
  background: rgba(8, 10, 12, .72); pointer-events: none;
}
.do-box {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 38px 56px; border: 2px dashed var(--teal); border-radius: 16px;
  background: rgba(0, 154, 156, .08); color: var(--teal);
  font-size: 16px; font-weight: 600; letter-spacing: .3px;
}

/* ---------- Warning popup ---------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .55);
}
.modal-box {
  width: min(480px, 90vw); background: var(--panel); border: 1px solid var(--warn);
  border-radius: 12px; padding: 22px 24px; box-shadow: 0 12px 40px rgba(0,0,0,.5);
}
.modal-box h3 { margin: 0 0 10px; color: var(--warn); font-size: 16px; }
.modal-box p {
  margin: 0 0 18px; color: var(--txt); font-size: 13.5px; line-height: 1.55;
  white-space: pre-line; max-height: 55vh; overflow-y: auto; text-align: left;
}
.modal-btns { display: flex; flex-direction: column; gap: 8px; }
.modal-box button {
  font-family: inherit; cursor: pointer; width: 100%; padding: 10px;
  background: var(--teal); color: #fff; border: none; border-radius: 8px; font-size: 14px;
}
.modal-box button:hover { background: var(--teal-dk); }
.modal-box button.secondary {
  background: var(--panel-2); color: var(--txt); border: 1px solid var(--line);
}
.modal-box button.secondary:hover { background: var(--panel-2); border-color: var(--teal); color: var(--teal); }

/* ---------- Fab info panel (right) ---------- */
.infobar {
  width: 232px; flex-shrink: 0; background: var(--panel); border-left: 1px solid var(--line);
  display: flex; flex-direction: column; min-height: 0; overflow-y: auto;
}
/* Realistic rendering options */
.render-opts {
  padding: 10px 14px; border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 7px;
}
.render-opts label { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.render-opts label span { width: 52px; color: var(--txt-dim); text-transform: uppercase; font-size: 10.5px; letter-spacing: .4px; }
.render-opts select {
  flex: 1; font-family: inherit; font-size: 12.5px; color: var(--txt);
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 5px 6px;
}
.render-opts select:hover { border-color: var(--teal); }

.info-rows { padding: 8px 14px; }
.info-row { padding: 7px 0; border-bottom: 1px solid var(--line); }
.info-row:last-child { border-bottom: none; }
.info-row .ir-k { font-size: 11px; color: var(--txt-dim); text-transform: uppercase; letter-spacing: .4px; }
.info-row .ir-v { font-size: 14px; font-weight: 600; margin-top: 1px; }
.info-row .ir-sub { font-size: 12px; color: var(--txt-dim); }
.info-row.gold .ir-v { color: #e8c200; }
.ir-toggle {
  float: right; cursor: pointer; width: 20px; height: 20px; line-height: 1;
  background: var(--panel-2); color: var(--txt); border: 1px solid var(--line);
  border-radius: 5px; font-size: 13px; padding: 0;
}
.ir-toggle:hover { border-color: var(--teal); color: var(--teal); }
.ir-list { margin-top: 6px; }
.ir-li {
  display: flex; justify-content: space-between; font-size: 12px;
  color: var(--txt-dim); padding: 2px 0 2px 10px; border-left: 2px solid var(--line);
}
.ir-li span:last-child { color: var(--txt); }
.ir-click { cursor: pointer; }
.ir-click:hover { color: var(--teal); text-decoration: underline; }
.ir-li.ir-click:hover { border-left-color: var(--teal); color: var(--teal); }
.ir-li.ir-click:hover span:last-child { color: var(--teal); }
.info-note { font-size: 10.5px; color: var(--txt-dim); padding: 8px 14px; margin: auto 0 0; border-top: 1px solid var(--line); }

/* ---------- Stage ---------- */
.stage-wrap { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.stage-toolbar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--panel); }
/* plane 2: editing tools — visually recessed below the mode/view plane */
.stage-tools { padding: 6px 12px; background: var(--bg); border-bottom: 1px solid var(--line); }
.stage-tools[hidden] { display: none; }
.tb-label { color: var(--txt-dim); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; margin-right: 4px; }
.stage-toolbar button { padding: 6px 12px; font-size: 13px; }
.stage-toolbar .spacer { flex: 1; }
.seg.active { background: var(--teal); border-color: var(--teal); color: #fff; }
.stage-toolbar button:hover:not(.active) { border-color: var(--teal); }

.stage-host { flex: 1; position: relative; overflow: hidden; background: var(--board-bg); cursor: grab; }

/* 3D stage (three.js canvas) */
.stage-3d { flex: 1; position: relative; overflow: hidden; background: var(--board-bg); cursor: grab; }
.stage-3d:active { cursor: grabbing; }
.stage-3d canvas { display: block; }

/* 3D loading overlay */
.stage-loading {
  position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px;
  background: rgba(12, 15, 18, .72); color: var(--txt); font-size: 13px; letter-spacing: .3px;
  pointer-events: none;
}
.loader3d {
  width: 42px; height: 42px; border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .15); border-top-color: var(--teal);
  animation: spin3d .8s linear infinite;
}
@keyframes spin3d { to { transform: rotate(360deg); } }

/* Loaded archive name, shown in the sidebar header between the title and
   the "+ Nouveau" button */
.panel-head .src-name {
  flex: 1; min-width: 0; margin: 0 10px; text-align: right;
  color: var(--teal); font-size: 13.5px; font-weight: 600;
}
/* button with a small inline icon (folder...) */
.btn-ico { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.btn-ico svg { flex-shrink: 0; }

/* Layer-type icon, next to the color swatch */
.layer-ticon {
  width: 18px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  color: var(--txt-dim);
}
.layer-ticon svg { width: 14px; height: 14px; display: block; }

/* Minimap (bottom of the left sidebar) */
#minimap {
  flex-shrink: 0; margin: 8px 10px; max-height: 220px;
  background: var(--board-bg); border: 1px solid var(--line); border-radius: 8px;
  overflow: hidden; cursor: crosshair;
}
#minimap:hover { border-color: var(--teal); }
#minimap svg { width: 100%; height: 100%; display: block; }

/* Left sidebar resize handle */
.sidebar-resizer {
  width: 5px; flex-shrink: 0; cursor: ew-resize; background: transparent;
  transition: background .12s;
}
.sidebar-resizer:hover, .sidebar-resizer.active { background: var(--teal); }
.stage-host.tool-select { cursor: crosshair; }   /* selection tool */
.stage-host.tool-measure { cursor: cell; }        /* clearance measurement tool */
.stage-host.panning { cursor: grabbing !important; } /* while dragging (pan) */
.stage-host svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---- manual contour (System 1 menu + System 2 box-select) ---- */
.stage-wrap { position: relative; }
.stage-host.contour-edit { cursor: crosshair; }
.contour-box {
  position: fixed; z-index: 60; pointer-events: none;
  border: 1.5px dashed var(--teal); background: rgba(0, 154, 156, 0.12);
}
/* measurement readout that follows the cursor — dark card, teal accent */
.measure-popup {
  position: fixed; z-index: 85; pointer-events: none;
  min-width: 158px; max-width: 320px;
  background: rgba(23, 27, 30, 0.92); /* --panel, translucent */
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  border: 1px solid var(--line); border-left: 3px solid var(--teal);
  border-radius: 9px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
  padding: 9px 12px 10px; color: var(--txt);
  font-family: "Roboto Condensed", Arial, sans-serif; font-size: 13px;
}
.measure-popup[hidden] { display: none; }
.measure-popup .mp-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
}
.measure-popup .mp-label {
  color: var(--txt-dim); text-transform: uppercase;
  letter-spacing: 0.05em; font-size: 10.5px;
}
.measure-popup .mp-value {
  color: var(--teal); font-weight: 700; font-size: 16px;
  font-variant-numeric: tabular-nums;
}
.measure-popup .mp-rows {
  display: grid; grid-template-columns: auto 1fr; gap: 3px 14px;
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line);
}
.measure-popup .mp-rows[hidden] { display: none; }
.measure-popup .mp-rows .k { color: var(--txt-dim); font-size: 12px; }
.measure-popup .mp-rows .v {
  text-align: right; white-space: nowrap;
  font-variant-numeric: tabular-nums; color: var(--txt);
}
.contour-bar {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  z-index: 8; display: flex; align-items: center; gap: 10px;
  padding: 6px 12px; background: var(--panel); border: 1px solid var(--teal);
  border-radius: 10px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); font-size: 13px;
}
.contour-bar[hidden] { display: none; }
/* popup tool bars drop as a dropdown right under their tool button; left/top are
   set in JS (the button's x shifts with label width/language), so cancel the
   .contour-bar top-center anchoring here. */
.bar-under-btn { left: 0; top: 0; bottom: auto; transform: none; }
/* background grid (board-mm lattice behind the artwork) */
.grid-minor { stroke: rgba(120, 150, 180, 0.16); stroke-width: 1; }
.grid-major { stroke: rgba(120, 150, 180, 0.34); stroke-width: 1; }
/* grid toggle + pitch input in the plane-1 toolbar */
.grid-ctl { display: inline-flex; align-items: center; gap: 4px; margin-right: 6px; }
.grid-ctl #gridPitch {
  width: 52px; background: var(--bg); color: var(--txt);
  border: 1px solid var(--line); border-radius: 6px; padding: 5px 6px;
  font: inherit; font-size: 12px; text-align: right;
}
.grid-ctl #gridPitch:focus { outline: none; border-color: var(--teal); }
.grid-ctl .grid-unit { color: var(--txt-dim); font-size: 12px; }
.contour-bar .cb-title { color: var(--teal); font-weight: 600; }
.contour-bar .cb-count { color: var(--txt-dim); font-variant-numeric: tabular-nums; }
.layer-menu {
  position: fixed; z-index: 80; background: var(--panel);
  border: 1px solid var(--line); border-radius: 8px; padding: 4px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5); min-width: 200px;
}
.layer-menu button {
  display: block; width: 100%; text-align: left; padding: 8px 10px;
  background: none; border: none; border-radius: 6px; color: var(--txt);
  font-family: inherit; font-size: 13px; cursor: pointer;
}
.layer-menu button:hover:not(:disabled) { background: var(--panel-2); color: var(--teal); }
.layer-menu button:disabled { color: var(--txt-dim); cursor: not-allowed; opacity: 0.6; }
/* nested reassign flyouts (type -> side), CSS-hover driven */
.layer-menu .lm-item { position: relative; }
.layer-menu .lm-sub-head::after { content: '\25B8'; float: right; opacity: 0.55; padding-left: 8px; }
.layer-submenu {
  display: none; position: absolute; left: 100%; top: -5px; margin-left: 2px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: 4px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5); min-width: 150px;
}
.layer-menu .lm-item:hover > .layer-submenu,
.layer-menu .lm-item:focus-within > .layer-submenu { display: block; }
.lm-manual {
  display: inline-block; font-size: 10px; color: #0e1113; background: var(--teal);
  border-radius: 4px; padding: 0 5px; vertical-align: middle; font-weight: 600; cursor: help;
}

/* ---- safe-pcb integration ---- */
.validate-btn { background: var(--teal); border-color: var(--teal); color: #fff; font-weight: 600; }
.validate-btn:hover:not(:disabled) { filter: brightness(1.08); border-color: var(--teal); }
.validate-btn:disabled { opacity: 0.6; cursor: default; }
/* in integration mode the user reviews ONE board from safe-pcb — no free reload */
body.integration #newFileBtn { display: none; }

.stage-status {
  display: flex; gap: 18px; padding: 6px 12px; border-top: 1px solid var(--line);
  background: var(--panel); font-size: 12px; color: var(--txt-dim); font-variant-numeric: tabular-nums;
}
.stage-status .warn { color: var(--warn); cursor: pointer; }
.stage-status .warn:hover { text-decoration: underline; }
.stage-status .spacer { flex: 1; }
.sel-info { color: var(--txt); }
.tb-sep { width: 1px; height: 20px; background: var(--line); margin: 0 4px; align-self: center; }

/* Unit selector (bottom right) */
.unit-sel { display: inline-flex; gap: 2px; }
.unit-sel button {
  font-family: inherit; cursor: pointer; background: var(--panel-2); color: var(--txt-dim);
  border: 1px solid var(--line); border-radius: 6px; padding: 2px 9px; font-size: 11px;
}
.unit-sel button.active { background: var(--teal); border-color: var(--teal); color: #fff; }
.unit-sel button:hover:not(.active) { border-color: var(--teal); }

/* Editable color swatch */
.layer-swatch { position: relative; cursor: pointer; overflow: hidden; }
.layer-swatch input { position: absolute; inset: 0; opacity: 0; cursor: pointer; border: 0; padding: 0; }

/* Animated percentage bar (archive load + 3D build) */
.prog {
  width: 280px; max-width: 70vw; height: 6px; border-radius: 3px;
  background: rgba(127, 127, 127, .28); overflow: hidden; margin: 10px auto 0;
}
.prog > i { display: block; height: 100%; width: 0; background: var(--teal); border-radius: 3px; }

/* Send-confirmation summary (safe-pcb) */
.send-summary { text-align: left; margin-top: 4px; }
.send-summary .ss-head {
  font-weight: 600; color: var(--teal); margin-bottom: 10px; padding-bottom: 8px;
  border-bottom: 1px solid rgba(127, 127, 127, .25); word-break: break-all;
}
.send-summary .ss-row {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 4px 0; border-bottom: 1px solid rgba(127, 127, 127, .12); font-size: 13px;
}
.send-summary .ss-row:last-child { border-bottom: 0; }
.send-summary .ss-k { color: var(--muted, #9aa); }
.send-summary .ss-v { font-weight: 600; text-align: right; }
/* inner-copper ratios: collapsed by default so the long In1…InN list doesn't flood the popup */
.send-summary .ss-details { font-size: 13px; padding: 4px 0; }
.send-summary .ss-details > summary {
  cursor: pointer; color: var(--muted, #9aa); list-style: none;
  display: flex; align-items: center; gap: 6px; user-select: none;
}
.send-summary .ss-details > summary::-webkit-details-marker { display: none; }
.send-summary .ss-details > summary::before { content: '▸'; color: var(--teal); font-size: 11px; }
.send-summary .ss-details[open] > summary::before { content: '▾'; }
.send-summary .ss-inner { margin-top: 6px; line-height: 1.7; font-weight: 600; }

/* Current-job badge (top bar): ID + gerber name, highly visible */
.job-badge { display: flex; align-items: baseline; gap: 10px; min-width: 0; font-size: 14px; }
.job-badge .jb-id {
  font-weight: 700; color: var(--teal); background: rgba(0, 154, 156, .15);
  padding: 3px 10px; border-radius: 6px; white-space: nowrap; letter-spacing: .3px;
}
.job-badge .jb-name { color: var(--txt-dim); max-width: 42vw; }

/* Big actions pinned at the bottom of the "Infos fab" panel (integration) */
.info-actions {
  margin-top: auto; position: sticky; bottom: 0; display: flex; flex-direction: column; gap: 8px;
  padding: 12px; background: var(--panel); border-top: 1px solid var(--line);
}
.big-btn {
  width: 100%; padding: 14px 12px; font-size: 15px; font-weight: 600; border-radius: 8px;
  cursor: pointer; border: 1px solid var(--line); background: rgba(127, 127, 127, .16); color: inherit;
}
.big-btn:hover:not(:disabled) { filter: brightness(1.12); }
.big-btn:disabled { opacity: .6; cursor: default; }
.big-btn.validate-btn { background: var(--teal); border-color: var(--teal); color: #fff; }