/* ============================================================
   CFSync · Material Design 3  —  light, green/teal primary
   ============================================================ */

/* ── 1. MD3 Color Token System ── */
:root {
  /* Primary (green-teal) */
  --md-pri:         #006B4F;
  --md-on-pri:      #FFFFFF;
  --md-pri-c:       #A3CEBA;
  --md-on-pri-c:    #002116;

  /* Secondary */
  --md-sec:         #4C6358;
  --md-on-sec:      #FFFFFF;
  --md-sec-c:       #CFE9D8;
  --md-on-sec-c:    #092018;

  /* Tertiary (blue accent) */
  --md-ter:         #3D6373;
  --md-on-ter:      #FFFFFF;
  --md-ter-c:       #C1E8FA;
  --md-on-ter-c:    #001F29;

  /* Error */
  --md-err:         #BA1A1A;
  --md-on-err:      #FFFFFF;
  --md-err-c:       #FFDAD6;
  --md-on-err-c:    #410002;

  /* Warning (custom extension) */
  --md-wrn:         #7D5700;
  --md-wrn-c:       #FFDEAA;
  --md-on-wrn-c:    #271900;

  /* Surfaces */
  --md-bg:          #B8C4BA;
  --md-surface:     #B8C4BA;
  --md-surf-dim:    #A8B4AA;
  --md-surf-cl:     #EFF5F0;   /* surface-container-low    */
  --md-surf-c:      #E9EFEA;   /* surface-container        */
  --md-surf-ch:     #E3E9E4;   /* surface-container-high   */
  --md-surf-chh:    #DDE3DE;   /* surface-container-highest*/
  --md-surf-v:      #DBE5DC;   /* surface-variant          */

  /* On-surface */
  --md-on-surf:     #171D19;
  --md-on-surf-v:   #3F4942;   /* on-surface-variant / muted */

  /* Outline */
  --md-outline:     #6F7972;
  --md-outline-v:   #BEC9C0;

  /* Tonal elevation overlays */
  --tonal-1: rgba(0,107,79,.04);
  --tonal-2: rgba(0,107,79,.06);
  --tonal-3: rgba(0,107,79,.09);

  /* Shape scale */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   28px;
  --r-full: 9999px;

  /* Shadows (MD3 light theme — visible but gentle) */
  --shadow-1: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.08);
  --shadow-2: 0 2px 6px rgba(0,0,0,.12), 0 1px 4px rgba(0,0,0,.08);
  --shadow-3: 0 6px 16px rgba(0,0,0,.14), 0 2px 6px rgba(0,0,0,.10);
  --shadow-modal: 0 8px 40px rgba(0,0,0,.20), 0 2px 8px rgba(0,0,0,.12);

  /* ── Legacy aliases (referenced by JS-generated markup) ── */
  --text:  var(--md-on-surf);
  --muted: var(--md-on-surf-v);
  --line:  var(--md-outline-v);
  --bg:    var(--md-bg);
  --ok:    var(--md-pri);
  --bad:   var(--md-err);
  --warn:  var(--md-wrn);
}

/* ── 2. Base reset ── */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: 'Roboto', ui-sans-serif, system-ui, -apple-system, Segoe UI, Arial;
  font-size: 14px;
  line-height: 1.5;
  background: var(--md-bg);
  color: var(--md-on-surf);
  -webkit-font-smoothing: antialiased;
}
code {
  font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ── 3. Top App Bar  (MD3 Small Top App Bar) ── */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 20px;
  height: 64px;
  background: var(--md-surf-c);
  box-shadow: var(--shadow-1);
  position: sticky;
  top: 0;
  z-index: 10;
}

.brand { display: flex; gap: 12px; align-items: center; }
.logoWrap { height: 36px; flex-shrink: 0; }
.logoImg  { height: 36px; width: auto; object-fit: contain; }

/* MD3 Title Large */
.title {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--md-on-surf);
}
/* MD3 Body Small */
.subtitle {
  font-size: 12px;
  font-weight: 400;
  color: var(--md-on-surf-v);
  margin-top: 1px;
}

.topbarRight {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Spoolman link — MD3 text button */
.spoolmanLink {
  font-size: 13px;
  font-weight: 500;
  color: var(--md-pri);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: var(--r-full);
  transition: background .15s;
}
.spoolmanLink:hover { background: rgba(0,107,79,.08); }

/* ── 4. Status badges (MD3 assist chip style) ── */
.badges { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.badge {
  font-size: 12px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: var(--r-full);
  border: 1px solid var(--md-outline-v);
  background: var(--md-surf-ch);
  color: var(--md-on-surf-v);
  transition: border-color .15s, color .15s;
}
.badge.ok {
  border-color: rgba(0,107,79,.45);
  color: var(--md-on-pri-c);
  background: rgba(163,206,186,.45);
}
.badge.bad {
  border-color: rgba(186,26,26,.4);
  color: var(--md-on-err-c);
  background: rgba(255,218,214,.7);
}
.badge.warn {
  border-color: rgba(125,87,0,.4);
  color: var(--md-on-wrn-c);
  background: rgba(255,222,170,.7);
}

/* Settings icon button — MD3 icon button */
.settingsBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-size: 18px;
  line-height: 1;
  border-radius: var(--r-full);
  border: none;
  background: transparent;
  color: var(--md-on-surf-v);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.settingsBtn:hover {
  background: rgba(0,0,0,.06);
  color: var(--md-on-surf);
}

/* ── 5. Page layout ── */
.container { max-width: 1440px; margin: 0 auto; padding: 20px; }
.printersWrap { display: flex; flex-direction: column; gap: 20px; }

/* Printer block — MD3 elevated card */
.printerBlock {
  background: var(--md-surf-c);
  border-radius: var(--r-xl);
  padding: 20px;
  box-shadow: var(--shadow-2);
}

.printerHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.printerTitleWrap { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* MD3 Title Large */
.printerName {
  font-size: 18px;
  font-weight: 500;
  color: var(--md-on-surf);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.printerMeta {
  font-size: 12px;
  color: var(--md-on-surf-v);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.printerBadges { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* ── 6. Two-column layout (main + sidebar) ── */
.layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 1100px) { .layout { grid-template-columns: 1fr; } }

.grid { display: flex; flex-direction: column; gap: 10px; }

/* Empty state */
.emptyState {
  border: 1px dashed var(--md-outline-v);
  border-radius: var(--r-lg);
  padding: 20px;
  color: var(--md-on-surf-v);
  font-size: 13px;
  text-align: center;
}

/* ── 7. CFS Box cards ── */
.boxEnvChip {
  font-size: 11px;
  color: var(--md-on-surf-v);
  text-align: center;
  border-radius: var(--r-full);
  border: 1px solid transparent;
  line-height: 1.4;
}
.boxEnvChipBtn {
  cursor: pointer;
  padding: 4px 7px;
  border-color: var(--md-outline-v);
  background: var(--md-surf-chh);
  transition: background .15s, border-color .15s, color .15s;
}
.boxEnvChipBtn:hover {
  border-color: var(--md-outline);
  color: var(--md-on-surf);
  background: rgba(0,0,0,.06);
}

/* Slot pod row inside a box card */
.boxSlots {
  display: flex;
  gap: 8px;
  padding: 4px 16px 16px;
  justify-content: space-between;
}
.boxSlots .slotPod { flex: 1; }
.boxSlotsSingle { justify-content: flex-start; }
.boxSlotsSingle .slotPod { flex: 0 0 128px; }

/* ── 8. Slot Pods  (MD3 filled card, interactive) ── */
.slotPod {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
  padding: 12px 8px 10px;
  border-radius: var(--r-lg);
  background: var(--md-surf-ch);
  cursor: pointer;
  user-select: none;
  border: none;
  position: relative;
  overflow: hidden;
  transition: background .15s;
}
/* MD3 state layer */
.slotPod::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--md-on-surf);
  opacity: 0;
  transition: opacity .15s;
  pointer-events: none;
}
.slotPod:hover::after { opacity: .08; }

/* Active: tonal primary container */
.slotPod.active {
  background: var(--md-pri-c);
}
.slotPod.active::after { background: var(--md-on-pri-c); }

.slotPodId {
  font-size: 11px;
  font-weight: 600;
  color: var(--md-on-surf-v);
  letter-spacing: .5px;
  padding: 2px 8px;
  border-radius: var(--r-full);
  background: var(--md-surf-chh);
  line-height: 1.5;
}
.slotPod.active .slotPodId {
  background: rgba(0,107,79,.12);
  color: var(--md-on-pri-c);
}

.slotPodSpool { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }
.slotPodSpool svg { width: 72px; height: 72px; }

.slotPodMaterial {
  font-size: 13px;
  font-weight: 600;
  color: var(--md-on-surf);
  text-align: center;
  min-height: 18px;
}
.slotPod.active .slotPodMaterial { color: var(--md-on-pri-c); }

.slotPodPct {
  font-size: 11px;
  color: var(--md-on-surf-v);
  text-align: center;
}
.slotPod.active .slotPodPct { color: rgba(0,33,22,.7); }

/* Spoolman link dot */
.slotPodLink {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--md-surf-chh);
  margin-top: 2px;
  transition: background .15s, box-shadow .15s;
}
.slotPodLink.linked {
  background: var(--md-pri);
  box-shadow: 0 0 6px rgba(0,107,79,.45);
}

@media (max-width: 600px) {
  .boxSlots { gap: 5px; padding: 4px 10px 12px; }
  .slotPod { padding: 10px 4px 8px; gap: 4px; }
  .slotPodSpool, .slotPodSpool svg { width: 56px; height: 56px; }
  .boxSlotsSingle .slotPod { flex-basis: 96px; }
}

/* ── 9. Cards  (MD3 filled card) ── */
.card {
  background: var(--md-surf-c);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-1);
}
.cardHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
}
/* MD3 Title Medium */
.cardTitle {
  font-size: 16px;
  font-weight: 500;
  color: var(--md-on-surf);
}
.cardExtLink {
  font-size: 13px;
  font-weight: 400;
  color: var(--md-on-surf-v);
  text-decoration: none;
  margin-left: 4px;
  opacity: .7;
}
.cardExtLink:hover { opacity: 1; color: var(--md-on-surf); }
.cardMeta {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  color: var(--md-on-surf-v);
}

/* ── 10. Refresh controls ── */
.refreshCtl { display: flex; align-items: center; gap: 8px; }
.refreshLbl { font-size: 13px; color: var(--md-on-surf-v); }
.refreshSel {
  font-size: 12px;
  color: var(--md-on-surf);
  padding: 6px 10px;
  border-radius: var(--r-full);
  border: 1px solid var(--md-outline-v);
  background: var(--md-surf-ch);
  outline: none;
  cursor: pointer;
}
.refreshSel:focus { border-color: var(--md-pri); }
.refreshBtn {
  font-size: 12px;
  font-weight: 500;
  color: var(--md-on-surf);
  padding: 6px 12px;
  border-radius: var(--r-full);
  border: 1px solid var(--md-outline-v);
  background: var(--md-surf-ch);
  cursor: pointer;
  transition: background .15s;
}
.refreshBtn:hover { background: var(--md-surf-chh); }
.refreshBtn.paused { border-color: rgba(125,87,0,.5); color: var(--md-on-wrn-c); }

.envItem {
  font-size: 13px;
  font-weight: 600;
  color: var(--md-on-surf);
  padding: 6px 12px;
  border-radius: var(--r-full);
  border: 1px solid var(--md-outline-v);
  background: var(--md-surf-ch);
  line-height: 1;
}

/* ── 11. Slot list cards (active area) ── */
.slots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
  padding: 14px;
}

.slot {
  border: none;
  border-radius: var(--r-lg);
  padding: 12px;
  background: var(--md-surf-ch);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  transition: background .15s;
}
.slot::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--md-on-surf);
  opacity: 0;
  transition: opacity .15s;
  pointer-events: none;
}
.slot:hover::after { opacity: .06; }
.slot.active { background: var(--md-pri-c); }
.slot.spoolLow  { outline: 1.5px solid rgba(125,87,0,.45); }
.slot.spoolCrit { outline: 1.5px solid rgba(186,26,26,.45); }

.slotLeft  { display: flex; gap: 10px; align-items: center; min-width: 0; }
.swatch {
  width: 36px;
  height: 36px;
  border-radius: var(--r-full);
  border: 2px solid rgba(0,0,0,.12);
  flex: 0 0 auto;
}
.slotText { min-width: 0; }
.slotName {
  font-size: 13px;
  font-weight: 600;
  color: var(--md-on-surf);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.slotSub {
  font-size: 12px;
  color: var(--md-on-surf-v);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.slotDetail {
  font-size: 11px;
  color: var(--md-on-surf-v);
  opacity: .75;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.slotRight {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex: 0 0 auto;
}
.spoolPct { font-size: 11px; color: var(--md-on-surf-v); text-align: right; }

/* Spool remaining */
.spoolRow { margin-top: 6px; }
.spoolRest { font-size: 16px; font-weight: 700; color: var(--md-on-surf); letter-spacing: .2px; line-height: 1.05; }
.spoolUsed { display: none; }

/* ── 12. Tags / Chips  (MD3 assist chip) ── */
.tag {
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: var(--r-full);
  background: var(--md-surf-chh);
  border: 1px solid var(--md-outline-v);
  color: var(--md-on-surf);
}
.tag.muted { color: var(--md-on-surf-v); }
.tag.ok {
  background: rgba(163,206,186,.5);
  border-color: rgba(0,107,79,.4);
  color: var(--md-on-pri-c);
}

/* ── 13. Active area ── */
.activeRow { padding: 14px; display: flex; gap: 12px; flex-wrap: wrap; }
.activeLive {
  padding: 0 14px 14px;
  color: var(--md-on-surf-v);
  font-size: 12px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.activeLive .pill {
  border: 1px solid var(--md-outline-v);
  background: var(--md-surf-ch);
  border-radius: var(--r-full);
  padding: 4px 10px;
  color: var(--md-on-surf);
}

/* ── 14. Buttons  (MD3 filled-tonal) ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .1px;
  padding: 10px 24px;
  border-radius: var(--r-full);
  border: none;
  background: var(--md-pri-c);
  color: var(--md-on-pri-c);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: box-shadow .15s;
  box-shadow: var(--shadow-1);
}
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--md-on-pri-c);
  opacity: 0;
  transition: opacity .15s;
  pointer-events: none;
}
.btn:hover { box-shadow: var(--shadow-2); }
.btn:hover::after { opacity: .08; }
.btn:active::after { opacity: .12; }

/* Ghost / outlined */
.btn.ghost {
  background: transparent;
  border: 1px solid var(--md-outline);
  color: var(--md-pri);
  box-shadow: none;
}
.btn.ghost::after { background: var(--md-pri); }
.btn.ghost:hover { box-shadow: none; }

/* Mini size */
.btn.mini {
  font-size: 12px;
  padding: 6px 14px;
  border-radius: var(--r-full);
  box-shadow: none;
}

/* ── 15. Footer ── */
.footer {
  margin: 20px 2px 0;
  color: var(--md-on-surf-v);
  font-size: 12px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

/* ── 16. Printer status card ── */
.printerStatusCard { margin-bottom: 12px; }
.printerStatusBody { padding: 12px 16px 16px; }
.printerTemps { display: flex; gap: 10px; margin-bottom: 14px; }
.tempWidget {
  flex: 1;
  background: var(--md-surf-ch);
  border-radius: var(--r-md);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tempLabel {
  font-size: 11px;
  color: var(--md-on-surf-v);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .6px;
}
.tempVal {
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--md-on-surf);
}
.tempVal.atTemp { color: var(--md-pri); }

.printerFilename {
  font-size: 12px;
  color: var(--md-on-surf-v);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 8px;
}
.progressBarWrap {
  height: 4px;
  border-radius: var(--r-full);
  background: var(--md-surf-chh);
  overflow: hidden;
  margin-bottom: 6px;
}
.progressBar {
  height: 100%;
  border-radius: var(--r-full);
  background: var(--md-pri);
  transition: width .5s ease;
}
.progressMeta { font-size: 11px; color: var(--md-on-surf-v); text-align: right; }

/* ── 17. Camera card ── */
.cameraCard { margin-bottom: 12px; }
.cameraWrap { padding: 0 6px 8px; }
.cameraFeed { width: 100%; border-radius: var(--r-md); display: block; background: #000; }
.cameraHint { padding: 10px 14px; font-size: 12px; color: var(--md-on-surf-v); }

/* ── 18. Status / history panel ── */
.history { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 12px; }

.spoolStatusCard { font-size: 13px; }
.spoolStatusFilament {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  margin-bottom: 6px;
}
.spoolStatusFilamentInfo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.spoolStatusFilamentName { font-weight: 600; color: var(--md-on-surf); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spoolStatusFilamentSub  { font-size: 12px; color: var(--md-on-surf-v); }
.spoolStatRow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 5px 0;
}
.spoolStatLabel { font-size: 12px; color: var(--md-on-surf-v); }
.spoolStatValue { font-size: 13px; font-weight: 500; color: var(--md-on-surf); text-align: right; }

/* ── 19. CFS stats (box/slot breakdown) ── */
.cfsBox { padding: 6px 0; }
.cfsBox + .cfsBox { margin-top: 2px; }
.cfsBoxHead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 0 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--md-on-surf);
}
.cfsBoxTotals { font-size: 11px; font-weight: 400; color: var(--md-on-surf-v); }
.cfsSlotRow {
  display: grid;
  grid-template-columns: 32px 1fr 1fr 56px;
  gap: 4px;
  align-items: baseline;
  padding: 2px 0;
  font-size: 12px;
  color: var(--md-on-surf);
}
.cfsSlotLabel  { font-size: 11px; font-weight: 700; color: var(--md-on-surf-v); font-family: 'Roboto Mono', ui-monospace, monospace; }
.cfsSlotMeters { color: var(--md-on-surf); }
.cfsSlotKg     { color: var(--md-on-surf-v); }
.cfsSlotLast   { font-size: 11px; color: var(--md-on-surf-v); text-align: right; white-space: nowrap; }

/* ── 20. Job history list ── */
.moonHist { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.moonEntry {
  border: 1px solid var(--md-outline-v);
  background: var(--md-surf-ch);
  border-radius: var(--r-md);
  padding: 10px 14px;
}
.moonRow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.moonJob  { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.moonNums { font-size: 13px; font-weight: 600; color: var(--md-on-surf); white-space: nowrap; }
.moonSub  { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--md-on-surf-v); }
.moonSpoolList { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.moonSpoolRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--md-outline-v);
  background: var(--md-surf-c);
  border-radius: var(--r-sm);
  padding: 7px 10px;
}
.moonSpoolInfo { display: flex; align-items: center; gap: 8px; min-width: 0; }
.moonSpoolSwatch {
  width: 14px;
  height: 14px;
  border-radius: var(--r-xs);
  border: 1px solid rgba(0,0,0,.15);
  background: var(--md-surf-v);
  flex-shrink: 0;
}
.moonSpoolTextWrap { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.moonSpoolLabel { font-size: 12px; font-weight: 600; color: var(--md-on-surf); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.moonSpoolMeta  { font-size: 11px; color: var(--md-on-surf-v); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.moonSpoolEmpty { font-size: 12px; color: var(--md-on-surf-v); }

.jobHistoryPager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--md-outline-v);
}
.jobHistoryPageLabel { font-size: 12px; color: var(--md-on-surf-v); }

.miniPills { display: flex; flex-wrap: wrap; gap: 6px; }
.miniPill {
  border: 1px solid var(--md-outline-v);
  background: var(--md-surf-ch);
  border-radius: var(--r-full);
  padding: 3px 9px;
  font-size: 12px;
  color: var(--md-on-surf);
}

/* ── 21. Assign / relink ── */
.assignWrap { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--md-outline-v); display: flex; flex-direction: column; gap: 10px; }
.assignTitle { font-size: 12px; color: var(--md-on-surf-v); }
.assignRows  { display: flex; flex-direction: column; gap: 8px; }
.assignRow   { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.assignSel {
  min-width: 170px;
  background: var(--md-surf-ch);
  border: 1px solid var(--md-outline-v);
  color: var(--md-on-surf);
  border-radius: var(--r-md);
  padding: 8px 12px;
  font-family: inherit;
  font-size: 13px;
  outline: none;
}
.assignSel:focus { border-color: var(--md-pri); }
.assignActions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.assignWrap.assigned .assignRows,
.assignWrap.assigned .assignActions { display: none; }

/* ── 22. Hist slot cards ── */
.histSlot {
  border: 1px solid var(--md-outline-v);
  background: var(--md-surf-c);
  border-radius: var(--r-lg);
  padding: 10px;
}
.histHead { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.histTitle { display: flex; align-items: center; gap: 10px; min-width: 0; }
.histSlotName { font-weight: 700; font-size: 13px; white-space: nowrap; }
.histMeta { font-size: 12px; color: var(--md-on-surf-v); white-space: nowrap; }
.histList { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.histEntry {
  border: 1px solid var(--md-outline-v);
  border-radius: var(--r-md);
  background: var(--md-surf-ch);
  padding: 8px 12px;
}
.histEntry summary { cursor: pointer; list-style: none; }
.histEntry summary::-webkit-details-marker { display: none; }
.histRow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.histJob  { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.histNums { font-size: 12px; color: var(--md-on-surf); white-space: nowrap; }
.histSub  { margin-top: 6px; color: var(--md-on-surf-v); font-size: 12px; display: flex; flex-wrap: wrap; gap: 10px; }

/* ── 23. Details / debug pre ── */
.details { padding: 0 14px 14px; color: var(--md-on-surf-v); }
.details summary { cursor: pointer; color: var(--md-on-surf); margin: 4px 0 10px; }
.details pre {
  background: var(--md-surf-cl);
  border: 1px solid var(--md-outline-v);
  border-radius: var(--r-md);
  padding: 10px;
  overflow: auto;
  color: var(--md-on-pri-c);
  font-size: 12px;
}

/* ── 24. Modal / Dialog  (MD3 dialog) ── */
.modal { position: fixed; inset: 0; z-index: 50; }
.modalBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.60);
  backdrop-filter: blur(4px);
}
.modalPanel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(680px, calc(100% - 32px));
  border-radius: var(--r-xl);
  background: var(--md-surf-ch);
  box-shadow: var(--shadow-modal);
}
.modalHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
}
/* MD3 Headline Small */
.modalTitle { font-size: 20px; font-weight: 500; color: var(--md-on-surf); }
.modalSub   { font-size: 12px; color: var(--md-on-surf-v); margin-top: 3px; }

/* MD3 icon button for close */
.modalClose {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-full);
  border: none;
  background: transparent;
  color: var(--md-on-surf-v);
  font-size: 16px;
  cursor: pointer;
  transition: background .15s;
  flex-shrink: 0;
}
.modalClose:hover { background: rgba(0,0,0,.06); color: var(--md-on-surf); }

.modalBody { padding: 16px 24px 24px; }
.formRow {
  display: grid;
  grid-template-columns: 160px 1fr auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}
.formRow label { font-size: 13px; color: var(--md-on-surf-v); }
.formRow input {
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--r-full);
  border: 1px solid var(--md-outline);
  background: var(--md-surf-c);
  color: var(--md-on-surf);
  font-size: 13px;
  font-family: inherit;
  outline: none;
}
.formRow input:focus { border-color: var(--md-pri); }
.modalStats {
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--md-surf-c);
  font-size: 13px;
  line-height: 1.5;
  color: var(--md-on-surf-v);
}
.modalHint { margin-top: 12px; font-size: 12px; color: var(--md-on-surf-v); }
@media (max-width: 560px) { .formRow { grid-template-columns: 1fr; } }

/* ── 25. Settings modal ── */
.settingsPanel { width: min(560px, calc(100% - 32px)); }
.settingsGroupHead {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--md-on-surf-v);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0 10px;
  margin-bottom: 10px;
}
.settingsExtLink {
  font-size: 12px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--md-pri);
  text-decoration: none;
}
.settingsExtLink:hover { text-decoration: underline; }
.settingsItem {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 0;
  border-bottom: 1px solid var(--md-outline-v);
}
.settingsItem:last-child { border-bottom: none; }
.settingsItemLabel { font-size: 12px; color: var(--md-on-surf-v); font-weight: 500; }
.settingsItemBody  { display: flex; flex-direction: column; gap: 6px; }
.settingsRadio {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--md-on-surf);
  cursor: pointer;
  line-height: 1.5;
}
.settingsRadio input[type="radio"] {
  margin-top: 3px;
  accent-color: var(--md-pri);
  flex-shrink: 0;
}
.settingsInputRow { display: flex; gap: 8px; align-items: center; }
.settingsInput {
  flex: 1;
  padding: 10px 14px;
  border-radius: var(--r-full);
  border: 1px solid var(--md-outline);
  background: var(--md-surf-c);
  color: var(--md-on-surf);
  font-size: 13px;
  font-family: inherit;
  outline: none;
}
.settingsInput:focus { border-color: var(--md-pri); }
.settingsHint { font-size: 12px; color: var(--md-on-surf-v); min-height: 16px; }

/* ── 26. Spoolman modal section ── */
.spoolmanSection {
  margin-bottom: 16px;
  padding: 14px;
  border-radius: var(--r-lg);
  border: 1px solid var(--md-outline-v);
  background: var(--md-surf-c);
}
.spoolmanHead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.spoolmanTitle { font-size: 13px; font-weight: 600; color: var(--md-on-surf); }
.spoolmanRow   { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.spoolmanNotLinkedWrap { display: flex; flex-direction: column; gap: 10px; }
.spoolmanList {
  max-height: 200px;
  overflow-y: auto;
  border-radius: var(--r-md);
  border: 1px solid var(--md-outline-v);
  background: var(--md-surf-c);
}
.spoolmanListItem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--md-outline-v);
  font-size: 13px;
  transition: background .12s;
  color: var(--md-on-surf);
}
.spoolmanListItem:last-child  { border-bottom: none; }
.spoolmanListItem:hover        { background: rgba(0,0,0,.05); }
.spoolmanListItem.selected    {
  background: rgba(163,206,186,.6);
  color: var(--md-on-pri-c);
}
.spoolmanListItem.muted { cursor: default; color: var(--md-on-surf-v); }
.spoolmanListSwatch {
  width: 14px;
  height: 14px;
  border-radius: var(--r-xs);
  flex-shrink: 0;
  border: 1px solid rgba(0,0,0,.15);
}
.spoolmanInfo    { font-size: 13px; color: var(--md-on-surf-v); flex: 1; }
.spoolmanActions { display: flex; gap: 8px; }

/* ── 27. Env chart modal ── */
.envModalPanel { width: min(920px, calc(100% - 32px)); }
.envChartMeta {
  font-size: 12px;
  color: var(--md-on-surf-v);
  margin-bottom: 10px;
}
.envChartBody {
  border: 1px solid var(--md-outline-v);
  border-radius: var(--r-md);
  background: var(--md-surf-c);
  min-height: 320px;
  padding: 10px;
}
.envChartEmpty {
  min-height: 298px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--md-on-surf-v);
  font-size: 13px;
}
.envChartSvg   { display: block; width: 100%; height: auto; }
.envGridLine   { stroke: var(--md-outline-v); stroke-width: 1; }
.envAxisText   { fill: var(--md-on-surf-v); font-size: 11px; }
.envLineTemp   { stroke: #ff8a3d; fill: none; stroke-width: 2.5; }
.envLineHum    { stroke: var(--md-ter); fill: none; stroke-width: 2.5; }
.envAreaTemp   { fill: rgba(255,138,61,.13); }
.envAreaHum    { fill: rgba(141,206,240,.11); }
.envPoint      { fill: var(--md-surf-c); stroke-width: 2; }

/* ── 28. Native form inputs ── */
select,
input[type=text],
input[type=number],
input[type=url] {
  background: var(--md-surf-ch);
  border: 1px solid var(--md-outline);
  color: var(--md-on-surf);
  border-radius: var(--r-md);
  padding: 9px 12px;
  font-family: inherit;
  font-size: 13px;
  outline: none;
}
select:focus,
input[type=text]:focus,
input[type=number]:focus,
input[type=url]:focus { border-color: var(--md-pri); }

input[type=color] {
  width: 100%;
  height: 40px;
  border-radius: var(--r-md);
  border: 1px solid var(--md-outline-v);
  background: transparent;
  padding: 0;
  cursor: pointer;
}

/* ── 29. Scrollbars (WebKit) ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--md-surf-v); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--md-outline); }

/* ── 30. Hamburger / menu button ── */
.menuBtn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 8px 10px;
  border-radius: var(--r-full);
  border: none;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s;
}
.menuBtn:hover { background: rgba(0,0,0,.06); }
.menuBtn span {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--md-on-surf-v);
  transition: background .15s;
}
.menuBtn:hover span { background: var(--md-on-surf); }

/* ── 31. Navigation Drawer (MD3 modal navigation drawer) ── */
.navDrawer {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0s linear .3s;
}
.navDrawer--open {
  pointer-events: auto;
  visibility: visible;
  transition-delay: 0s;
}

.navDrawerBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .3s cubic-bezier(.2,0,0,1);
}
.navDrawer--open .navDrawerBackdrop { opacity: 1; }

.navDrawerPanel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(380px, 88vw);
  background: var(--md-surf-ch);
  box-shadow: var(--shadow-3);
  transform: translateX(-100%);
  transition: transform .3s cubic-bezier(.2,0,0,1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.navDrawer--open .navDrawerPanel { transform: translateX(0); }

/* Drawer header */
.navDrawerHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px 0 20px;
  height: 64px;
  flex-shrink: 0;
}
.navDrawerTitle {
  font-size: 18px;
  font-weight: 500;
  color: var(--md-on-surf);
}
.navDrawerClose {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-full);
  border: none;
  background: transparent;
  color: var(--md-on-surf-v);
  font-size: 15px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.navDrawerClose:hover { background: rgba(0,0,0,.06); color: var(--md-on-surf); }

/* Drawer body — scrollable */
.navDrawerBody {
  flex: 1;
  overflow-y: auto;
  padding: 0 0 24px;
}

/* ── Nav items (MD3 navigation drawer destination) ── */
.navItems {
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.navItem {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--r-full);
  border: none;
  background: transparent;
  color: var(--md-on-surf-v);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  position: relative;
  overflow: hidden;
  transition: background .15s, color .15s;
}
.navItem::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--md-on-surf);
  opacity: 0;
  transition: opacity .15s;
  pointer-events: none;
}
.navItem:hover { color: var(--md-on-surf); }
.navItem:hover::after { opacity: .08; }

/* Active indicator — MD3 tonal container pill */
.navItem--active {
  background: var(--md-pri-c);
  color: var(--md-on-pri-c);
}
.navItem--active::after { background: var(--md-on-pri-c); }
.navItem--active:hover::after { opacity: .08; }

.navItemIcon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.navItem--active .navItemIcon {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.navItemLabel { flex: 1; }

/* ── 33. Pages ── */
.page { animation: pageFadeIn .18s ease; }
@keyframes pageFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.pageHeader {
  margin-bottom: 20px;
}
.pageTitle {
  margin: 0;
  font-size: 24px;
  font-weight: 500;
  color: var(--md-on-surf);
  letter-spacing: -.2px;
}

/* Jobs page — strip the outer printerBlock chrome */
#jobsPageWrap .printerBlock {
  background: transparent;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
  margin-bottom: 8px;
}
#jobsPageWrap .printerHead { margin-bottom: 8px; }

/* Settings page — cards */
.settingsPage {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 640px;
}
.settingsCard {
  background: var(--md-surf-c);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  padding: 0 0 4px;
}
.settingsCardHead {
  font-size: 13px;
  font-weight: 600;
  color: var(--md-on-surf);
  padding: 16px 20px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.settingsCard .settingsItem {
  padding: 10px 20px;
}
#settingsSpoolmanSection .settingsItem {
  border-bottom: none;
  padding-bottom: 0;
}

/* ── 32. MD3 Switch (toggle) ── */
.mdSwitch {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
}
.mdSwitch input { display: none; }
.mdSwitchTrack {
  width: 52px;
  height: 32px;
  border-radius: var(--r-full);
  background: var(--md-surf-chh);
  border: 2px solid var(--md-outline);
  position: relative;
  transition: background .2s, border-color .2s;
  flex-shrink: 0;
}
.mdSwitchTrack::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 4px;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--md-outline);
  transition: left .2s, width .2s, background .2s;
}
.mdSwitch input:checked + .mdSwitchTrack {
  background: var(--md-pri-c);
  border-color: var(--md-pri-c);
}
.mdSwitch input:checked + .mdSwitchTrack::after {
  left: calc(100% - 28px);
  width: 24px;
  background: var(--md-pri);
}

.settingsCameraRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ── 33. Camera disabled compact state ── */
.cameraDisabled {
  padding: 10px 14px;
  font-size: 12px;
  color: var(--md-on-surf-v);
}

/* ── 34. Camera card — fixed-height layout (no reflow on show/hide) ── */
.cameraWrap { padding: 4px 6px 8px; }

.cameraFeed {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-md);
  display: block;
  background: #000;
  object-fit: cover;
}
.cameraPlaceholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-md);
  background: var(--md-surf-chh);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--md-on-surf-v);
  font-size: 12px;
  letter-spacing: .2px;
}

/* ══════════════════════════════════════════════════════════
   Responsive breakpoints
   ══════════════════════════════════════════════════════════ */

/* ── 768px — tablet / large-phone landscape ── */
@media (max-width: 768px) {
  /* Topbar: allow two-row wrap */
  .topbar {
    height: auto;
    min-height: 56px;
    padding: 6px 12px;
    flex-wrap: wrap;
    row-gap: 4px;
  }
  .brand { gap: 8px; }
  .logoWrap, .logoImg { height: 30px; }
  .title    { font-size: 18px; }
  .subtitle { font-size: 11px; }
  .topbarRight {
    width: 100%;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 6px;
  }

  /* Tighten layout */
  .container    { padding: 12px; }
  .printerBlock { padding: 16px; }
  .cardHead     { padding: 12px 16px 10px; }
  .modalBody    { padding: 14px 18px 20px; }
  .printerTemps { gap: 8px; }
}

/* ── 480px — phone portrait ── */
@media (max-width: 480px) {
  /* Topbar */
  .topbar  { padding: 6px 8px; }
  .subtitle { display: none; }
  .title    { font-size: 15px; }
  .logoWrap, .logoImg { height: 26px; }
  .refreshLbl { display: none; }
  .refreshSel { font-size: 11px; padding: 4px 8px; }
  .refreshBtn { font-size: 11px; padding: 4px 10px; }
  .topbarRight .spoolmanLink { display: none !important; }
  .topbar .badges .badge     { font-size: 10px; padding: 3px 8px; }

  /* Layout */
  .container    { padding: 8px; }
  .printerBlock { padding: 12px; border-radius: var(--r-lg); }

  /* Printer head: stack title + badges */
  .printerHead {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 10px;
  }
  .printerBadges { justify-content: flex-start; flex-wrap: wrap; }
  .printerBadges .badge { font-size: 10px; padding: 3px 7px; }

  /* CFS box cards: compact slots on small screens */
  .boxSlots       { gap: 3px; padding: 4px 8px 10px; }
  .boxEnvChip     { font-size: 9px; }
  .boxEnvChipBtn  { padding: 2px 4px; }
  .boxSlots       { gap: 3px; }
  .slotPod        { padding: 6px 2px 5px; gap: 3px; }
  .slotPodSpool, .slotPodSpool svg { width: 44px; height: 44px; }
  .slotPodMaterial { font-size: 11px; }
  .slotPodPct      { font-size: 10px; }
  .slotPodId       { font-size: 9px; padding: 1px 4px; }
  .slotPodLink     { width: 6px; height: 6px; margin-top: 1px; }
  .boxSlotsSingle .slotPod { flex-basis: 70px; }

  /* Stats card */
  .history { padding: 10px 12px 12px; }
  .cfsSlotRow {
    grid-template-columns: 26px 1fr 1fr 42px;
    gap: 3px;
    font-size: 11px;
  }
  .cfsSlotLabel { font-size: 10px; }
  .cfsSlotLast  { font-size: 10px; }

  /* Jobs page */
  .moonSpoolRow { flex-wrap: wrap; gap: 6px; }
  .moonSpoolRow .btn.mini { align-self: flex-start; }
}

/* ── 360px — very small screens ── */
@media (max-width: 360px) {
  /* Drop grams column in stats, keep meters + last-used */
  .cfsSlotRow { grid-template-columns: 26px 1fr 42px; }
  .cfsSlotKg  { display: none; }
}

/* ══════════════════════════════════════════════════════════
   Dark theme  (MD3 dark scheme — green/teal primary)
   Applied via <html data-theme="dark">
   ══════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  /* Primary */
  --md-pri:         #6DDBAD;
  --md-on-pri:      #00382A;
  --md-pri-c:       #00513D;
  --md-on-pri-c:    #A3CEBA;

  /* Secondary */
  --md-sec:         #B3CCBC;
  --md-on-sec:      #1F352B;
  --md-sec-c:       #354C41;
  --md-on-sec-c:    #CFE9D8;

  /* Tertiary */
  --md-ter:         #A5CCDD;
  --md-on-ter:      #073543;
  --md-ter-c:       #234C5B;
  --md-on-ter-c:    #C1E8FA;

  /* Error */
  --md-err:         #FFB4AB;
  --md-on-err:      #690005;
  --md-err-c:       #93000A;
  --md-on-err-c:    #FFDAD6;

  /* Warning */
  --md-wrn:         #FFB951;
  --md-wrn-c:       #3D2B00;
  --md-on-wrn-c:    #FFDEAA;

  /* Surfaces */
  --md-bg:          #0F1411;
  --md-surface:     #0F1411;
  --md-surf-dim:    #0F1411;
  --md-surf-cl:     #1A2020;
  --md-surf-c:      #1E2422;
  --md-surf-ch:     #282E2C;
  --md-surf-chh:    #333937;
  --md-surf-v:      #3F4942;

  /* On-surface */
  --md-on-surf:     #DEE4DF;
  --md-on-surf-v:   #BEC9C0;

  /* Outline */
  --md-outline:     #899489;
  --md-outline-v:   #3F4942;

  /* Tonal overlays */
  --tonal-1: rgba(109,219,173,.04);
  --tonal-2: rgba(109,219,173,.06);
  --tonal-3: rgba(109,219,173,.09);

  /* Shadows — more prominent on dark backgrounds */
  --shadow-1: 0 1px 3px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 2px 6px rgba(0,0,0,.5), 0 1px 4px rgba(0,0,0,.4);
  --shadow-3: 0 6px 16px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.45);
  --shadow-modal: 0 8px 40px rgba(0,0,0,.7), 0 2px 8px rgba(0,0,0,.5);
}

/* ── Dark mode: override hardcoded rgba() colours ── */

/* Transparent "hover ink" overlays — light bg needs dark ink; dark bg needs light ink */
[data-theme="dark"] .settingsBtn:hover,
[data-theme="dark"] .boxEnvChipBtn:hover,
[data-theme="dark"] .modalClose:hover,
[data-theme="dark"] .menuBtn:hover,
[data-theme="dark"] .navDrawerClose:hover  { background: rgba(255,255,255,.08); }
[data-theme="dark"] .menuBtn:hover span    { background: var(--md-on-surf); }
[data-theme="dark"] .spoolmanLink:hover    { background: rgba(109,219,173,.08); }
[data-theme="dark"] .spoolmanListItem:hover { background: rgba(255,255,255,.06); }

/* Chip / badge colours */
[data-theme="dark"] .badge.ok {
  border-color: rgba(109,219,173,.45);
  color: var(--md-on-pri-c);
  background: rgba(0,81,61,.5);
}
[data-theme="dark"] .badge.bad {
  border-color: rgba(255,180,171,.4);
  color: var(--md-on-err-c);
  background: rgba(147,0,10,.5);
}
[data-theme="dark"] .badge.warn {
  border-color: rgba(255,185,81,.4);
  color: var(--md-on-wrn-c);
  background: rgba(61,43,0,.7);
}
[data-theme="dark"] .tag.ok {
  background: rgba(0,81,61,.5);
  border-color: rgba(109,219,173,.4);
  color: var(--md-on-pri-c);
}

/* Slot pod active state */
[data-theme="dark"] .slotPod.active .slotPodId  { background: rgba(109,219,173,.15); }
[data-theme="dark"] .slotPod.active .slotPodPct { color: rgba(163,206,186,.8); }
[data-theme="dark"] .slotPodLink.linked          { box-shadow: 0 0 6px rgba(109,219,173,.5); }

/* Swatch border — lighten instead of darken */
[data-theme="dark"] .swatch         { border-color: rgba(255,255,255,.15); }
[data-theme="dark"] .spoolmanListSwatch,
[data-theme="dark"] .moonSpoolSwatch { border-color: rgba(255,255,255,.15); }

/* Slot outline warnings */
[data-theme="dark"] .slot.spoolLow  { outline-color: rgba(255,185,81,.5); }
[data-theme="dark"] .slot.spoolCrit { outline-color: rgba(255,180,171,.5); }

/* Refresh button paused state */
[data-theme="dark"] .refreshBtn.paused { border-color: rgba(255,185,81,.5); }

/* Spoolman spool selector selected item */
[data-theme="dark"] .spoolmanListItem.selected {
  background: rgba(0,81,61,.65);
  color: var(--md-on-pri-c);
}

/* Backdrop overlays — slightly heavier in dark for legibility */
[data-theme="dark"] .modalBackdrop   { background: rgba(0,0,0,.72); }
[data-theme="dark"] .navDrawerBackdrop { background: rgba(0,0,0,.68); }