/* ===== Duet Print History ===== */
.duet-history-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
}
.duet-history-panel {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
}
.duet-history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.duet-history-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.duet-history-count {
  color: var(--text-muted);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
.duet-history-refresh-btn,
.duet-history-reprint-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-primary);
  cursor: pointer;
  font-size: 12px;
}
.duet-history-refresh-btn {
  padding: 4px 10px;
}
.duet-history-reprint-btn {
  padding: 3px 8px;
}
.duet-history-refresh-btn:disabled {
  opacity: 0.7;
  cursor: default;
}
.duet-history-state {
  color: var(--text-muted);
  font-size: 12px;
  text-align: center;
  padding: 20px;
}
.duet-history-empty-icon {
  margin-bottom: 6px;
  opacity: 0.6;
}
.duet-history-empty-sub {
  margin-top: 4px;
  font-size: 11px;
}
.duet-history-row {
  display: grid;
  grid-template-columns: 140px 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-top: 1px solid var(--border);
  font-size: 12px;
}
.duet-history-time {
  font-family: monospace;
  color: var(--text-muted);
}
.duet-history-main {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.duet-history-duration {
  color: var(--text-muted);
  margin-left: 8px;
}
.duet-history-kind {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.duet-history-kind-finish {
  background: rgba(34, 197, 94, 0.15);
  color: var(--success);
}
.duet-history-kind-cancel {
  background: rgba(239, 68, 68, 0.15);
  color: var(--error);
}
.duet-history-kind-start {
  background: rgba(80, 120, 255, 0.15);
  color: var(--accent);
}
.duet-history-kind-event {
  background: var(--bg-elevated);
  color: var(--text-muted);
}
.duet-history-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.duet-history-search-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  margin-bottom: 8px;
}
.duet-history-search-icon {
  color: var(--text-muted);
  flex-shrink: 0;
}
.duet-history-search-input {
  flex: 1;
  padding: 4px 8px;
  font-size: 12px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  outline: none;
  font-family: inherit;
}
.duet-history-search-input::placeholder {
  color: var(--text-muted);
}
.duet-history-search-input:focus {
  border-color: var(--accent);
}
.duet-history-search-clear {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
  border-radius: 3px;
}
.duet-history-search-clear:hover {
  color: var(--text-primary);
}
/* --- History Stats --- */
.duet-history-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
}
.duet-history-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-primary);
  padding: 4px 10px;
  background: var(--bg-elevated);
  border-radius: 6px;
  white-space: nowrap;
}
.duet-history-stat-icon {
  color: var(--text-muted);
  flex-shrink: 0;
}
.duet-history-stat--success .duet-history-stat-icon,
.duet-history-stat--success .duet-history-stat-value {
  color: var(--success);
}
.duet-history-stat--fail .duet-history-stat-icon,
.duet-history-stat--fail .duet-history-stat-value {
  color: var(--error);
}
.duet-history-stat--rate .duet-history-stat-icon,
.duet-history-stat--rate .duet-history-stat-value {
  color: var(--accent);
}
.duet-history-stat-value {
  font-weight: 700;
}
.duet-history-stat-label {
  color: var(--text-muted);
  font-size: 11px;
}
/* --- Load More --- */
.duet-history-load-more-wrap {
  display: flex;
  justify-content: center;
  padding: 12px 0 4px;
  border-top: 1px solid var(--border);
}
.duet-history-load-more-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-primary);
  cursor: pointer;
  font-size: 12px;
}
.duet-history-load-more-btn:hover {
  background: var(--bg-panel);
  border-color: var(--accent);
}
/* ===== Duet Notifications ===== */
.duet-toast-stack {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 2000;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  max-width: 360px;
  pointer-events: none;
}
.duet-toast {
  background: var(--duet-toast-bg);
  border: 1px solid var(--duet-toast-border);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 12px;
  color: var(--duet-toast-text);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  pointer-events: auto;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  font-family: 'Inter', 'Segoe UI', sans-serif;
  animation: duetToastSlideIn 0.2s ease-out;
}
.duet-toast-message {
  flex: 1;
  line-height: 1.4;
}
.duet-toast-close {
  background: none;
  border: none;
  color: var(--duet-toast-text);
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
  opacity: 0.7;
  flex-shrink: 0;
}
.duet-toast-close:hover {
  opacity: 1;
}
.duet-toast--recovery {
  --duet-toast-bg: rgba(245,158,11,0.16);
  --duet-toast-border: rgba(245,158,11,0.45);
  --duet-toast-text: var(--warning);
  max-width: 420px;
}
.duet-toast-action {
  border: 1px solid rgba(245,158,11,0.5);
  border-radius: 6px;
  background: rgba(245,158,11,0.12);
  color: var(--duet-toast-text);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 8px;
  flex-shrink: 0;
}
.duet-toast-action:disabled {
  cursor: wait;
  opacity: 0.65;
}
@keyframes duetToastSlideIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/* ===== Duet Custom Buttons ===== */
.duet-custom-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.duet-custom-empty {
  color: var(--text-muted);
  font-size: 12px;
  text-align: center;
  padding: 12px 0;
}
.duet-custom-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
}
.duet-custom-item {
  position: relative;
}
.duet-custom-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 8px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 600;
  min-height: 58px;
  width: 100%;
  cursor: pointer;
}
.duet-custom-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.duet-custom-btn-label {
  text-align: center;
  line-height: 1.2;
}
.duet-custom-overlay-actions {
  position: absolute;
  top: 2px;
  right: 2px;
  display: flex;
  gap: 2px;
}
.duet-custom-editor {
  margin-top: 12px;
  padding: 12px;
  background: var(--bg-elevated);
  border-radius: 6px;
  border: 1px solid var(--border);
}
.duet-custom-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.duet-custom-field-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
/* ===== Duet Status ===== */
.duet-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
  padding: 12px;
  align-items: start;
}
.duet-status-flag {
  font-weight: 600;
}
.duet-status-dim {
  color: var(--text-muted);
}
.duet-status-mono {
  font-family: monospace;
  font-size: 12px;
  font-weight: 600;
}
.duet-status-flag.success {
  color: var(--success);
}
.duet-status-flag.danger {
  color: var(--error);
}
.duet-status-block {
  margin-bottom: 12px;
}
.duet-status-board-title {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 4px;
}
.duet-status-row-gap {
  margin-bottom: 4px;
}
/* ===== Duet Dashboard ===== */
/* =================================================================
   Machine Status header  (ms-* namespace)
   ================================================================= */
.ms-root { display: flex; flex-direction: column; gap: 7px; }
.ms-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ms-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 20px;
  border: 1px solid;
  padding: 5px 14px 5px 10px;
}
.ms-status-text {
  font-size: 13px;
  font-weight: 700;
  text-transform: capitalize;
  color: var(--ms-color, rgba(200,200,220,0.85));
  letter-spacing: 0.02em;
}
.ms-uptime {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: rgba(180,180,200,0.5);
  font-family: monospace;
}
.ms-board-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: rgba(180,180,200,0.45);
}
.ms-board-name { font-weight: 600; color: rgba(200,200,220,0.6); }
.ms-sep        { color: rgba(180,180,200,0.25); }
.ms-firmware   { font-family: monospace; }
/* =================================================================
   Fan Control panel  (fan-* namespace)
   ================================================================= */
.fan-empty {
  text-align: center;
  font-size: 11px;
  color: rgba(180,180,200,0.35);
  padding: 10px 0 4px;
}
.fan-card {
  background: transparent;
  border-left: 3px solid rgba(56,189,210,0.75);
  border-radius: 0 7px 7px 0;
  padding: 9px 12px 9px 11px;
  margin-bottom: 8px;
}
.fan-header {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
}
.fan-name {
  font-size: 12px;
  font-weight: 600;
  flex: 1;
  color: rgba(220,220,235,0.9);
}
.fan-rpm {
  font-size: 10px;
  font-weight: 600;
  color: rgba(56,189,210,0.85);
  background: rgba(56,189,210,0.1);
  border: 1px solid rgba(56,189,210,0.25);
  border-radius: 4px;
  padding: 1px 6px;
  font-family: monospace;
}
.fan-pct {
  font-size: 14px;
  font-weight: 700;
  font-family: monospace;
  color: rgba(220,220,235,0.9);
  min-width: 38px;
  text-align: right;
}
.fan-slider-row {
  display: flex;
  align-items: center;
  margin-bottom: 7px;
}
.fan-range {
  flex: 1;
  accent-color: rgb(56,189,210);
  cursor: pointer;
}
.fan-presets {
  display: flex;
  gap: 3px;
}
.fan-preset-btn {
  flex: 1;
  height: 26px;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: rgba(200,200,220,0.55);
  font-size: 10px;
  font-family: monospace;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.07s;
}
.fan-preset-btn:hover {
  background: rgba(56,189,210,0.12);
  border-color: rgba(56,189,210,0.35);
  color: #4ecde0;
}
.fan-preset-btn:active { transform: scale(0.93); }
.fan-preset-btn.is-active {
  background: rgba(56,189,210,0.2);
  border-color: rgba(56,189,210,0.6);
  color: #4ecde0;
  font-weight: 700;
}
.fan-preset-btn:disabled { opacity: 0.35; cursor: not-allowed; }
@keyframes fan-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.fan-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.fan-icon-wrap--spin {
  animation-name: fan-spin;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.fan-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.fan-badge--thermo {
  background: rgba(240,170,60,0.12);
  border: 1px solid rgba(240,170,60,0.3);
  color: #f0aa3c;
}
Macro panel  (mc-* namespace)
   ================================================================= */

.mc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.mc-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.mc-count {
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, var(--bg-elevated));
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--border-light));
  color: color-mix(in srgb, var(--accent) 60%, var(--text-primary));
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
/* ── Inline search ─────────────────────────────────────────── */
.mc-search-inline {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 7px;
  border-radius: 5px;
  border: 1px solid var(--border-light);
  background: var(--bg-panel);
  min-width: 0;
  width: 88px;
  transition: width 0.18s ease, border-color 0.12s;
}
.mc-search-inline:focus-within {
  width: 130px;
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border-light));
}
.mc-search-inline__icon {
  flex-shrink: 0;
  color: var(--text-muted);
}
.mc-search-inline__input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 11px;
  outline: none;
  padding: 0;
}
.mc-search-inline__input::placeholder {
  color: var(--text-muted);
}
.mc-search-inline__clear {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
}
.mc-search-inline__clear:hover {
  color: var(--text-secondary);
}
/* ── New / action buttons ──────────────────────────────────── */
.mc-new-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 9px;
  border-radius: 5px;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border-light));
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-elevated));
  color: color-mix(in srgb, var(--accent) 52%, var(--text-primary));
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.mc-new-btn:not(:disabled):hover,
.mc-new-btn.is-active {
  background: color-mix(in srgb, var(--accent) 22%, var(--bg-elevated));
  border-color: color-mix(in srgb, var(--accent) 62%, var(--border-light));
  color: var(--text-primary);
}
.mc-new-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.mc-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 5px;
  border: 1px solid var(--border-light);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.mc-icon-btn:not(:disabled):hover {
  background: color-mix(in srgb, var(--accent) 14%, var(--bg-elevated));
  border-color: color-mix(in srgb, var(--accent) 38%, var(--border-light));
  color: var(--text-primary);
}
.mc-icon-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.mc-icon-btn--danger {
  color: var(--danger, #f87171);
  border-color: color-mix(in srgb, var(--danger, #f87171) 38%, var(--border-light));
  background: color-mix(in srgb, var(--danger, #f87171) 10%, var(--bg-elevated));
}
.mc-icon-btn--danger:not(:disabled):hover {
  background: color-mix(in srgb, var(--danger, #f87171) 22%, var(--bg-elevated));
  border-color: color-mix(in srgb, var(--danger, #f87171) 62%, var(--border-light));
  color: var(--text-primary);
}
/* ── Create form ───────────────────────────────────────────── */
.mc-create-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 7px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border-light));
  background: color-mix(in srgb, var(--accent) 5%, var(--bg-elevated));
}
.mc-input {
  width: 100%;
  height: 26px;
  padding: 0 9px;
  border-radius: 5px;
  border: 1px solid var(--border-light);
  background: var(--bg-panel);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 12px;
  outline: none;
  transition: border-color 0.12s;
  box-sizing: border-box;
}
.mc-input:focus {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border-light));
}
.mc-textarea {
  width: 100%;
  padding: 7px 9px;
  border-radius: 5px;
  border: 1px solid var(--border-light);
  background: var(--bg-panel);
  color: var(--text-primary);
  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 11px;
  line-height: 1.45;
  outline: none;
  resize: vertical;
  min-height: 64px;
  box-sizing: border-box;
  transition: border-color 0.12s;
}
.mc-textarea:focus {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border-light));
}
.mc-create-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
.mc-btn-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 10px;
  border-radius: 5px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  border: 1px solid transparent;
}
.mc-btn-action:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.mc-btn-action--cancel {
  background: var(--bg-elevated);
  border-color: var(--border-light);
  color: var(--text-secondary);
}
.mc-btn-action--cancel:not(:disabled):hover {
  border-color: var(--border);
  color: var(--text-primary);
}
.mc-btn-action--save {
  background: color-mix(in srgb, #22c55e 16%, var(--bg-elevated));
  border-color: color-mix(in srgb, #22c55e 48%, var(--border-light));
  color: color-mix(in srgb, #22c55e 72%, var(--text-primary));
}
.mc-btn-action--save:not(:disabled):hover {
  background: color-mix(in srgb, #22c55e 26%, var(--bg-elevated));
  border-color: color-mix(in srgb, #22c55e 72%, var(--border-light));
  color: var(--text-primary);
}
/* ── Breadcrumb ────────────────────────────────────────────── */
.mc-breadcrumb {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 8px;
  margin-bottom: 8px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 5%, var(--bg-elevated));
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border-light));
  font-size: 11px;
  font-weight: 600;
  overflow: hidden;
}
.mc-breadcrumb__back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 4px;
  border: 1px solid var(--border-light);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  cursor: pointer;
  margin-right: 4px;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.mc-breadcrumb__back:hover {
  background: color-mix(in srgb, var(--accent) 14%, var(--bg-elevated));
  border-color: color-mix(in srgb, var(--accent) 38%, var(--border-light));
  color: var(--text-primary);
}
.mc-breadcrumb__seg {
  border: none;
  background: transparent;
  color: color-mix(in srgb, var(--accent) 55%, var(--text-secondary));
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 0 3px;
  border-radius: 3px;
  transition: color 0.1s, background 0.1s;
}
.mc-breadcrumb__seg:hover {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.mc-breadcrumb__item {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}
.mc-breadcrumb__sep {
  color: var(--text-muted);
  flex-shrink: 0;
}
.mc-breadcrumb__current {
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* ── Section labels ────────────────────────────────────────── */
.mc-section-label {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 8px 0 4px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.mc-section-label svg {
  opacity: 0.7;
}
/* ── Empty state ───────────────────────────────────────────── */
.mc-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  padding: 18px 12px;
  border: 1px dashed var(--border-light);
  border-radius: 7px;
  background: color-mix(in srgb, var(--text-primary) 2%, transparent);
  color: var(--text-muted);
  font-size: 11px;
}
.mc-empty__icon {
  opacity: 0.35;
  margin-bottom: 2px;
}
.mc-empty strong {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
}
.mc-empty span {
  color: var(--text-muted);
  font-size: 11px;
}
.mc-empty--search {
  padding: 10px 12px;
  flex-direction: row;
  gap: 6px;
  justify-content: center;
}
.mc-empty--search strong {
  font-size: 11px;
  color: var(--text-secondary);
}
/* ── Macro grid ────────────────────────────────────────────── */
.mc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 5px;
  margin-top: 4px;
}
.mc-grid--dirs {
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
}
/* ── Macro card ────────────────────────────────────────────── */
.mc-card {
  display: flex;
  align-items: stretch;
  height: 34px;
  border-radius: 6px;
  border: 1px solid var(--border-light);
  background: var(--bg-elevated);
  overflow: hidden;
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.mc-card:not(.mc-card--dir):hover {
  background: color-mix(in srgb, var(--accent) 7%, var(--bg-elevated));
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border-light));
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 8%, transparent);
}
.mc-card.is-confirming {
  border-color: color-mix(in srgb, var(--danger, #f87171) 50%, var(--border-light));
  background: color-mix(in srgb, var(--danger, #f87171) 8%, var(--bg-elevated));
}
.mc-card.is-running {
  border-color: color-mix(in srgb, #22c55e 48%, var(--border-light));
  background: color-mix(in srgb, #22c55e 7%, var(--bg-elevated));
}
.mc-card--dir {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px 0 10px;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  font-family: inherit;
  text-align: left;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border-light));
  background: color-mix(in srgb, var(--accent) 5%, var(--bg-elevated));
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.mc-card--dir:hover {
  background: color-mix(in srgb, var(--accent) 13%, var(--bg-elevated));
  border-color: color-mix(in srgb, var(--accent) 44%, var(--border-light));
  color: var(--text-primary);
}
.mc-card--dir svg:first-child {
  color: color-mix(in srgb, var(--accent) 65%, var(--text-muted));
  flex-shrink: 0;
}
.mc-card-dir__arrow {
  margin-left: auto;
  flex-shrink: 0;
  color: var(--text-muted);
  opacity: 0;
  transition: opacity 0.12s;
}
.mc-card--dir:hover .mc-card-dir__arrow {
  opacity: 1;
}
/* ── Run button ────────────────────────────────────────────── */
.mc-card-run {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  background: none;
  border: none;
  border-right: 1px solid var(--border-light);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  min-width: 0;
  transition: color 0.12s, background 0.12s;
}
.mc-card-run:not(:disabled):hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--text-primary);
}
.mc-card-run:not(:disabled):active {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}
.mc-card-run__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 50%;
  background: color-mix(in srgb, #22c55e 14%, var(--bg-panel));
  border: 1px solid color-mix(in srgb, #22c55e 30%, var(--border-light));
  color: #4ade80;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.mc-card-run:not(:disabled):hover .mc-card-run__icon {
  background: color-mix(in srgb, #22c55e 22%, var(--bg-panel));
  border-color: color-mix(in srgb, #22c55e 52%, var(--border-light));
  color: #86efac;
}
.mc-card.is-running .mc-card-run__icon {
  background: color-mix(in srgb, #22c55e 20%, var(--bg-panel));
  border-color: color-mix(in srgb, #22c55e 55%, var(--border-light));
  color: #4ade80;
}
@keyframes mc-spin {
  to { transform: rotate(360deg); }
}
.mc-spin {
  animation: mc-spin 0.7s linear infinite;
}
.mc-card-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
/* ── Delete button ─────────────────────────────────────────── */
.mc-card-delete {
  width: 30px;
  height: auto;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--text-muted);
  opacity: 0;
  transition: opacity 0.12s, background 0.12s, color 0.12s;
}
.mc-card:hover .mc-card-delete {
  opacity: 1;
}
.mc-card-delete:not(:disabled):hover {
  background: color-mix(in srgb, var(--danger, #f87171) 16%, transparent);
  color: var(--danger, #f87171);
  opacity: 1;
}
.mc-card-confirm {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 4px;
}
.mc-card-confirm .mc-icon-btn {
  width: 24px;
  height: 24px;
}
/* ── Folder sections ───────────────────────────────────────── */
.mc-folder {
  margin-top: 6px;
}
.mc-folder--nested {
  margin-top: 4px;
  margin-left: 0;
}
.mc-folder-header {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 5px 8px;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border-light));
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-elevated));
  color: color-mix(in srgb, var(--accent) 55%, var(--text-secondary));
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  text-align: left;
  transition: background 0.14s, border-color 0.14s, color 0.14s;
}
.mc-folder-header:hover {
  background: color-mix(in srgb, var(--accent) 13%, var(--bg-elevated));
  border-color: color-mix(in srgb, var(--accent) 44%, var(--border-light));
  color: color-mix(in srgb, var(--accent) 75%, var(--text-primary));
}
.mc-folder-header.is-open {
  border-radius: 6px 6px 0 0;
  border-bottom-color: color-mix(in srgb, var(--accent) 14%, var(--border-light));
}
.mc-folder-header__icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: color-mix(in srgb, var(--accent) 70%, var(--text-muted));
}
.mc-folder-header__name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.mc-folder-header__empty {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.3px;
  text-transform: none;
  color: var(--text-muted);
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid var(--border-light);
  background: transparent;
  opacity: 0.7;
  flex-shrink: 0;
}
.mc-folder-header__chevron {
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform 0.18s ease;
  transform: rotate(0deg);
}
.mc-folder-header__chevron.is-closed {
  transform: rotate(-90deg);
}
.mc-folder-body {
  padding: 6px 6px 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border-light));
  border-top: none;
  border-radius: 0 0 6px 6px;
  background: color-mix(in srgb, var(--accent) 2%, var(--bg-panel));
}
.mc-folder-empty {
  padding: 8px 6px;
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
}
.mc-folder-loading {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 6px;
  font-size: 11px;
  color: var(--text-muted);
}
.mc-folder-header__spinner {
  flex-shrink: 0;
  color: var(--text-muted);
  margin-right: 2px;
}
.mc-card--subdir {
  border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--border-light));
  background: color-mix(in srgb, var(--accent) 3%, var(--bg-elevated));
  color: var(--text-muted);
  font-size: 11px;
  gap: 6px;
  padding: 0 8px;
  cursor: default;
  margin-bottom: 4px;
}
/* =================================================================
   Tool Selector panel  (ts-* namespace)
   ================================================================= */
.ts-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.ts-empty {
  text-align: center;
  font-size: 11px;
  color: var(--text-secondary);
  padding: 14px 0 8px;
  border: 1px dashed color-mix(in srgb, var(--accent) 24%, var(--border-light));
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 5%, var(--bg-elevated));
}
.ts-deselect-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 9px;
  border-radius: 5px;
  border: 1px solid rgba(220,80,80,0.3);
  background: rgba(220,80,80,0.08);
  color: #e06060;
  font-size: 10px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: background 0.12s, border-color 0.12s;
}
.ts-deselect-btn:hover {
  background: rgba(220,80,80,0.18);
  border-color: rgba(220,80,80,0.55);
}
.ts-tool-card {
  --ts-tool-accent: #64748b;
  position: relative;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--ts-tool-accent) 12%, transparent), transparent 72%),
    color-mix(in srgb, var(--bg-elevated) 78%, var(--bg-panel));
  border: 1px solid color-mix(in srgb, var(--ts-tool-accent) 28%, var(--border-light));
  border-left: 4px solid var(--ts-tool-accent);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.ts-tool-card--active {
  --ts-tool-accent: #14b8a6;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ts-tool-accent) 22%, transparent), 0 8px 22px rgba(0,0,0,0.12);
}
.ts-card-header {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 9px;
}
.ts-select-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  min-width: 38px;
  padding: 0 8px;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--ts-tool-accent) 34%, var(--border-light));
  background: color-mix(in srgb, var(--ts-tool-accent) 10%, var(--bg-elevated));
  color: color-mix(in srgb, var(--ts-tool-accent) 58%, var(--text-primary));
  font-size: 11px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.ts-select-btn:hover {
  background: color-mix(in srgb, var(--ts-tool-accent) 18%, var(--bg-elevated-hover));
  border-color: color-mix(in srgb, var(--ts-tool-accent) 56%, var(--border-strong));
  color: var(--text-primary);
}
.ts-select-btn--active {
  background: color-mix(in srgb, #14b8a6 22%, var(--bg-elevated));
  border-color: color-mix(in srgb, #14b8a6 68%, var(--border-strong));
  color: var(--text-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, #14b8a6 18%, transparent);
}
.ts-tool-name {
  font-size: 13px;
  font-weight: 750;
  flex: 1;
  color: var(--text-primary);
  letter-spacing: 0.01em;
}
.ts-state-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  min-height: 22px;
  padding: 0 8px;
  border: 1px solid color-mix(in srgb, var(--ts-state-color, var(--text-muted)) 34%, var(--border-light));
  border-radius: 999px;
  background: color-mix(in srgb, var(--ts-state-color, var(--text-muted)) 10%, var(--bg-elevated));
  color: color-mix(in srgb, var(--ts-state-color, var(--text-muted)) 74%, var(--text-primary));
  text-transform: capitalize;
}
.ts-state-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ts-state-color, rgba(180,180,200,0.35));
  box-shadow: 0 0 5px var(--ts-state-color, transparent);
  flex-shrink: 0;
}
.ts-section {
  margin-bottom: 10px;
}
.ts-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.ts-heater-grid {
  display: grid;
  grid-template-columns: 52px 70px 68px 68px;
  gap: 5px 7px;
  align-items: center;
  font-size: 11px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, #f59e0b 18%, var(--border-light));
  border-radius: 8px;
  background: color-mix(in srgb, #f59e0b 5%, var(--bg-panel));
}
.ts-heater-col-hdr {
  font-size: 9px;
  color: var(--text-muted);
  font-weight: 750;
  text-transform: uppercase;
}
.ts-heater-name {
  font-weight: 750;
  color: var(--ts-heater-color, rgba(200,200,220,0.7));
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
}
.ts-heater-state-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ts-heater-state, rgba(180,180,200,0.3));
  flex-shrink: 0;
}
.ts-heater-current {
  font-weight: 700;
  font-family: monospace;
  font-size: 13px;
  color: color-mix(in srgb, var(--ts-temp-color, var(--text-primary)) 76%, var(--text-primary));
  background: color-mix(in srgb, var(--ts-temp-color, var(--text-primary)) 12%, var(--bg-elevated));
  border: 1px solid color-mix(in srgb, var(--ts-temp-color, var(--text-primary)) 22%, transparent);
  border-radius: 999px;
  padding: 2px 7px;
  justify-self: start;
  box-shadow: 0 0 12px color-mix(in srgb, var(--ts-temp-color, transparent) 15%, transparent);
}
.ts-input {
  background: var(--bg-panel);
  border: 1px solid color-mix(in srgb, #3b82f6 22%, var(--border-light));
  border-radius: 5px;
  color: var(--text-primary);
  padding: 4px 6px;
  font-size: 11px;
  font-family: monospace;
  outline: none;
  width: 62px;
  transition: border-color 0.12s;
  -moz-appearance: textfield;
}
.ts-input::-webkit-outer-spin-button,
.ts-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ts-input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px color-mix(in srgb, #3b82f6 16%, transparent);
}
.ts-offsets { display: flex; gap: 6px; flex-wrap: wrap; }
.ts-offset-chip {
  background: color-mix(in srgb, #8b5cf6 8%, var(--bg-elevated));
  border: 1px solid color-mix(in srgb, #8b5cf6 22%, var(--border-light));
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 11px;
  font-family: monospace;
}
.ts-offset-axis { color: var(--text-muted); }
.ts-offset-val  { color: var(--text-primary); font-weight: 700; }
.ts-filament-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px;
  border: 1px solid color-mix(in srgb, #22c55e 18%, var(--border-light));
  border-radius: 8px;
  background: color-mix(in srgb, #22c55e 5%, var(--bg-panel));
}
.ts-select {
  flex: 1;
  background: var(--bg-panel);
  border: 1px solid color-mix(in srgb, #22c55e 22%, var(--border-light));
  border-radius: 5px;
  color: var(--text-primary);
  padding: 4px 7px;
  font-size: 11px;
  font-family: inherit;
  outline: none;
  cursor: pointer;
  transition: border-color 0.12s;
}
.ts-select:focus {
  border-color: #22c55e;
  box-shadow: 0 0 0 2px color-mix(in srgb, #22c55e 16%, transparent);
}
.ts-unload-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 26px;
  padding: 0 9px;
  border-radius: 5px;
  border: 1px solid rgba(220,80,80,0.25);
  background: rgba(220,80,80,0.08);
  color: #e06060;
  font-size: 10px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.ts-unload-btn:hover {
  background: rgba(220,80,80,0.18);
  border-color: rgba(220,80,80,0.5);
}
.ts-unload-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.ts-assigned-row { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11px; }
.ts-assigned-item {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--text-secondary);
}
.ts-assigned-item svg {
  color: var(--ts-tool-accent);
}
.ts-assigned-label { color: var(--text-muted); }
.ts-assigned-val   { color: var(--text-primary); font-weight: 650; }
/* ---- Material preset bar ---- */
.ts-presets {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-light);
}
.ts-preset-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 9px;
  border-radius: 5px;
  border: 1px solid color-mix(in srgb, var(--ts-preset-color, rgba(255,255,255,0.1)) 56%, var(--border-light));
  background: color-mix(in srgb, var(--ts-preset-color, rgba(255,255,255,0.05)) 14%, var(--bg-elevated));
  color: color-mix(in srgb, var(--ts-preset-color, rgba(210,210,230,0.8)) 70%, var(--text-primary));
  font-size: 10px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s, transform 0.07s;
  letter-spacing: 0.03em;
}
.ts-preset-btn:hover {
  background: color-mix(in srgb, var(--ts-preset-color, rgba(255,255,255,0.1)) 24%, var(--bg-elevated-hover));
  color: var(--text-primary);
}
.ts-preset-btn:active { transform: scale(0.96); }
.ts-preset-name { font-weight: 700; }
.ts-preset-temp {
  font-family: monospace;
  font-weight: 500;
  opacity: 0.7;
  font-size: 9px;
}
.ts-preset-btn--cool {
  --ts-preset-color: rgb(120,180,240);
}
/* ---- Heat progress bar (spans full heater-grid row) ---- */
.ts-heatbar {
  grid-column: 1 / -1;
  height: 6px;
  border-radius: 999px;
  background: var(--bg-elevated);
  overflow: hidden;
  margin: 1px 0 5px;
  border: 1px solid color-mix(in srgb, #f59e0b 18%, transparent);
}
.ts-heatbar-fill {
  height: 100%;
  background: linear-gradient(90deg, rgb(59,130,246), rgb(245,158,11), rgb(239,68,68));
  border-radius: inherit;
  transition: width 0.4s ease;
}
.ts-heatbar--off .ts-heatbar-fill { display: none; }
.ts-heatbar--ready .ts-heatbar-fill {
  background: rgb(34,197,94);
  box-shadow: 0 0 6px rgba(34,197,94,0.5);
}
.ts-heatbar--heating .ts-heatbar-fill {
  animation: ts-heat-pulse 1.5s ease-in-out infinite;
}
.ts-heatbar--cooling .ts-heatbar-fill {
  background: linear-gradient(90deg, rgb(100,160,255), rgb(180,200,255));
  opacity: 0.55;
}
@keyframes ts-heat-pulse {
  0%, 100% { opacity: 1; filter: brightness(1); }
  50% { opacity: 0.7; filter: brightness(1.25); }
}
.duet-dash-section-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.duet-dash-heater-grid {
  display: grid;
  grid-template-columns: 120px 80px 80px 80px 1fr 40px;
  gap: 6px 8px;
  align-items: center;
  font-size: 12px;
  margin-bottom: 12px;
  flex-shrink: 0;
}
.duet-dash-heater-col {
  color: var(--text-muted);
  font-size: 10px;
}
.duet-dash-heater-label {
  font-weight: 500;
  color: var(--duet-heater-color);
}
.duet-dash-heater-current {
  font-weight: 600;
}
.duet-dash-tempbar-wrap {
  height: 8px;
  border-radius: 4px;
  background: var(--bg-input);
  overflow: hidden;
  position: relative;
}
.duet-dash-heater-state {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--duet-heater-state);
  box-shadow: var(--duet-heater-glow);
  margin: 0 auto;
}
.duet-dash-chamber {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 4px 0 12px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, #a855f7 24%, var(--border-light));
  border-radius: 8px;
  background:
    linear-gradient(180deg, color-mix(in srgb, #a855f7 8%, transparent), transparent 60%),
    var(--bg-panel);
}
.duet-dash-chamber__header,
.duet-dash-chamber__policies {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.duet-dash-chamber__header > div {
  display: flex;
  align-items: baseline;
  gap: 9px;
}
.duet-dash-chamber__header span {
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.duet-dash-chamber__header strong {
  color: #c084fc;
  font-family: monospace;
  font-size: 15px;
}
.duet-dash-toggle,
.duet-dash-chamber__policies label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-secondary);
  font-size: 11px;
}
.duet-dash-chamber__grid {
  display: grid;
  grid-template-columns: minmax(90px, 0.8fr) minmax(160px, 1.4fr) 76px auto;
  gap: 7px;
  align-items: end;
}
.duet-dash-chamber__grid--ramp {
  grid-template-columns: repeat(3, minmax(76px, 1fr)) auto;
}
.duet-dash-chamber__grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.duet-dash-chamber__grid label span {
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.duet-dash-chamber__grid input,
.duet-dash-chamber__grid select {
  width: 100%;
  min-width: 0;
  height: 28px;
  padding: 0 8px;
  border: 1px solid color-mix(in srgb, #a855f7 24%, var(--border-light));
  border-radius: 6px;
  background: var(--bg-input);
  color: var(--text-primary);
  font: inherit;
  font-size: 11px;
}
.duet-dash-chamber__button,
.duet-dash-chamber__cool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, #a855f7 36%, var(--border-light));
  border-radius: 6px;
  background: color-mix(in srgb, #a855f7 12%, var(--bg-elevated));
  color: var(--text-primary);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.duet-dash-chamber__button:hover,
.duet-dash-chamber__cool:hover {
  background: color-mix(in srgb, #a855f7 20%, var(--bg-elevated-hover));
}
.duet-dash-chamber__policies {
  color: var(--text-muted);
  font-size: 11px;
}
.duet-dash-chamber__policies > span {
  min-width: 120px;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.duet-dash-chamber__cool {
  border-color: color-mix(in srgb, #38bdf8 36%, var(--border-light));
  background: color-mix(in srgb, #38bdf8 10%, var(--bg-elevated));
}
.duet-dash-door {
  display: grid;
  grid-template-columns: minmax(110px, 0.8fr) minmax(170px, 1.2fr) repeat(3, auto);
  gap: 7px;
  align-items: end;
  padding-top: 9px;
  border-top: 1px solid var(--border-light);
}
.duet-dash-door label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  color: var(--text-secondary);
  font-size: 11px;
}
.duet-dash-door label:has(select),
.duet-dash-door label:has(input[type='text']),
.duet-dash-door label:has(input:not([type])) {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}
.duet-dash-door label span {
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.duet-dash-door input:not([type='checkbox']),
.duet-dash-door select {
  width: 100%;
  min-width: 0;
  height: 28px;
  padding: 0 8px;
  border: 1px solid color-mix(in srgb, #38bdf8 24%, var(--border-light));
  border-radius: 6px;
  background: var(--bg-input);
  color: var(--text-primary);
  font: inherit;
  font-size: 11px;
}
.duet-dash-tempchart {
  width: 100%;
  height: auto;
  max-height: 160px;
}
.duet-dash-tempchart-shell {
  margin-top: 10px;
  border: 1px solid color-mix(in srgb, #3b82f6 18%, var(--border-light));
  border-radius: 8px;
  background:
    linear-gradient(180deg, color-mix(in srgb, #3b82f6 7%, transparent), transparent 58%),
    var(--bg-panel);
  overflow: hidden;
  flex: 1 1 190px;
  min-height: 150px;
  display: flex;
  flex-direction: column;
}
.duet-dash-tempchart-shell .duet-dash-tempchart {
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  max-height: none;
  padding: 0 4px 4px;
}
.duet-dash-tempchart-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px 4px;
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.duet-dash-tempchart-meta span:last-child {
  color: var(--text-muted);
  font-family: monospace;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.duet-dash-tempchart-empty {
  margin-top: 10px;
  padding: 18px 12px;
  border: 1px dashed color-mix(in srgb, #3b82f6 24%, var(--border-light));
  border-radius: 8px;
  background: color-mix(in srgb, #3b82f6 5%, var(--bg-panel));
  color: var(--text-secondary);
  font-size: 12px;
  text-align: center;
}
.temp-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 12px;
  padding: 5px 10px 6px;
  border-top: 1px solid var(--border-light);
}
.temp-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
}
.temp-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 4px currentColor;
}
.temp-legend-name {
  color: var(--text-secondary);
  letter-spacing: 0.2px;
}
.temp-legend-val {
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.duet-dash-root {
  height: 100%;
  overflow: auto;
  padding: 16px;
}
.duet-dash-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  max-width: 1400px;
  margin: 0 auto;
}
.duet-dash-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.duet-dash-span-full {
  grid-column: 1 / -1;
}
.duet-dash-atx-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.duet-dash-atx-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.duet-dash-macro-list { display: flex; flex-wrap: wrap; gap: 6px; }
/* legacy - unused */
.duet-dash-error-banner {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid;
  border-radius: 6px;
  padding: 8px 14px;
  margin-bottom: 12px;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.duet-dash-error-dismiss {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}
.duet-dash-tools-header-row { display: flex; align-items: center; justify-content: space-between; }
/* legacy */
/* tool card styles moved to ts-* namespace */
.aq-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.aq-empty {
  padding: 14px;
  border: 1px dashed color-mix(in srgb, #22c55e 24%, var(--border-light));
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 12px;
  text-align: center;
}
.aq-header,
.aq-pause {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.aq-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--aq-level);
  font-size: 12px;
  font-weight: 700;
}
.aq-status span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aq-toggle,
.aq-pause {
  color: var(--text-secondary);
  font-size: 11px;
}
.aq-toggle,
.aq-pause {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.aq-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.aq-sensor {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--aq-sensor) 26%, var(--border-light));
  border-radius: 8px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--aq-sensor) 8%, transparent), transparent 62%),
    var(--bg-panel);
}
.aq-sensor__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.aq-sensor__top span,
.aq-sensor label span {
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.aq-sensor__top strong {
  color: var(--aq-sensor);
  font-family: monospace;
  font-size: 15px;
}
.aq-sensor__top small {
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 600;
}
.aq-sensor label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.aq-sensor input {
  min-width: 0;
  width: 100%;
  height: 27px;
  padding: 0 7px;
  border: 1px solid color-mix(in srgb, var(--aq-sensor) 22%, var(--border-light));
  border-radius: 6px;
  background: var(--bg-input);
  color: var(--text-primary);
  font: inherit;
  font-size: 11px;
}
.aq-limits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
@media (max-width: 860px) {
  .aq-grid {
    grid-template-columns: 1fr;
  }
}
/* =================================================================
   Stepper Tuning panel  (st-* namespace)
   Two named containers:
     st-panel  — the outer flex column (controls outer grid & preset bar)
     st-axis   — each individual motor card (cqw drives fluid sizing)
   ================================================================= */
/* ── outer panel ── */
.st-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  container-type: inline-size;
  container-name: st-panel;
}
.st-empty {
  padding: 16px;
  border: 1px dashed var(--border-light);
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 12px;
  text-align: center;
}
/* ── section divider ── */
.st-section-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  user-select: none;
  margin-top: 2px;
}
.st-section-label::before,
.st-section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-light);
}
/* ── preset bar ── */
.st-preset-bar {
  display: flex;
  align-items: center;
  gap: 6px;
}
.st-name-input {
  flex: 1;
  min-width: 0;
  height: 28px;
  padding: 0 9px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-input);
  color: var(--text-primary);
  font: inherit;
  font-size: 11px;
  outline: none;
  transition: border-color 0.15s;
}
.st-name-input:focus           { border-color: var(--accent); }
.st-name-input::placeholder    { color: var(--text-muted); font-style: italic; }
.st-save-wrap {
  position: relative;
  flex-shrink: 0;
}
/* Invisible full-screen backdrop — closes the menu on outside click */
.st-save-overlay {
  position: fixed;
  inset: 0;
  z-index: 99;
}
.st-save-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 11px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.st-save-btn:hover,
.st-save-btn.is-open {
  background: var(--bg-hover);
  border-color: var(--accent);
  color: var(--accent);
}
/* ── Save options dropdown ── */
.st-save-menu {
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  z-index: 100;
  width: 250px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 9px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.14);
  overflow: hidden;
  padding: 4px;
}
.st-save-menu__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 9px 11px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s;
}
.st-save-menu__item:hover { background: var(--bg-hover); }
.st-save-menu__item svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--text-muted);
}
.st-save-menu__item span {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.st-save-menu__item strong {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}
.st-save-menu__item em {
  font-style: normal;
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.4;
}
/* ── preset chips ── */
.st-preset-row {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.st-preset {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-elevated);
  overflow: hidden;
}
.st-preset button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 26px;
  padding: 0 9px;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.12s, background 0.12s;
}
.st-preset button:hover { color: var(--text-primary); background: var(--bg-hover); }
.st-preset button + button {
  border-left: 1px solid var(--border-light);
  color: var(--text-muted);
  padding: 0 7px;
}
/* ════════════════════════════════════════════════════════
   Per-axis color tokens — set on .st-axis via data-attrs.
   Default: purple (unknown axis)
   ════════════════════════════════════════════════════════ */
.st-axis            { --ax: #8b5cf6; --ax-dim: rgba(139,  92, 246, 0.10); }
.st-axis[data-axis="X"] { --ax: #ef4444; --ax-dim: rgba(239,  68,  68, 0.10); }
.st-axis[data-axis="Y"] { --ax: #22c55e; --ax-dim: rgba( 34, 197,  94, 0.10); }
.st-axis[data-axis="Z"] { --ax: #3b82f6; --ax-dim: rgba( 59, 130, 246, 0.10); }
.st-axis[data-axis="E"] { --ax: #f59e0b; --ax-dim: rgba(245, 158,  11, 0.10); }
/* extruder motors (E0, E1 …) — higher specificity */
.st-axis[data-kind="extruder"] { --ax: #f97316; --ax-dim: rgba(249, 115,  22, 0.10); }
/* ── axis card grid — auto-fill: 1 → 2 → 3 cols based on available width ── */
.st-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}
/* ════════════════════════════════════════════════════════
   Individual axis / extruder card
   container-name: st-axis  so children can use cqw for
   fluid sizing relative to THIS card's width.
   ════════════════════════════════════════════════════════ */
.st-axis {
  /* card container — children use cqw relative to this */
  container-type: inline-size;
  container-name: st-axis;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  /* fluid card padding & gap based on the PANEL width (cqw → st-panel) */
  padding: clamp(7px, 2.5cqw, 11px);
  gap: clamp(4px, 1.4cqw, 7px);

  border: 1px solid color-mix(in srgb, var(--ax) 24%, var(--border-light));
  border-radius: 10px;
  background:
    linear-gradient(140deg, var(--ax-dim) 0%, transparent 55%),
    var(--bg-panel);
  position: relative;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.st-axis:hover {
  border-color: color-mix(in srgb, var(--ax) 42%, var(--border-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ax) 10%, transparent);
}
/* left accent bar */
.st-axis::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: 10px 0 0 10px;
  background: linear-gradient(to bottom, var(--ax), color-mix(in srgb, var(--ax) 30%, transparent));
}
/* ── head row ─────────────────────────────────── */
.st-axis__head {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: clamp(6px, 2.5cqw, 10px);
  padding-bottom: clamp(5px, 2cqw, 8px);
  border-bottom: 1px solid color-mix(in srgb, var(--ax) 14%, var(--border-light));
  margin-bottom: 2px;
}
/* axis letter badge — fluid size driven by card width (cqw → st-axis) */
.st-axis__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(28px, 10cqw, 36px);
  height: clamp(28px, 10cqw, 36px);
  padding: 0 4px;
  border-radius: clamp(6px, 2.5cqw, 9px);
  background: color-mix(in srgb, var(--ax) 14%, var(--bg-elevated));
  border: 1px solid color-mix(in srgb, var(--ax) 36%, var(--border-light));
  color: var(--ax);
  font-size: clamp(11px, 4.2cqw, 14px);
  font-weight: 800;
  font-family: monospace;
  letter-spacing: -0.02em;
  flex-shrink: 0;
  box-shadow:
    0 0 8px color-mix(in srgb, var(--ax) 16%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--ax) 18%, rgba(255,255,255,0.06));
}
/* driver index area */
.st-axis__meta {
  display: flex;
  align-items: center;
  gap: clamp(4px, 1.8cqw, 6px);
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
}
.st-drv-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  flex-shrink: 0;
}
.st-driver-input {
  width: clamp(38px, 14cqw, 46px);
  height: clamp(20px, 7.5cqw, 24px);
  padding: 0 5px;
  border: 1px solid var(--border-light);
  border-radius: 5px;
  background: var(--bg-input);
  color: var(--text-secondary);
  font: inherit;
  font-size: clamp(10px, 3.5cqw, 11px);
  font-family: monospace;
  outline: none;
  -moz-appearance: textfield;
  transition: border-color 0.12s;
}
.st-driver-input::-webkit-outer-spin-button,
.st-driver-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.st-driver-input:focus { border-color: color-mix(in srgb, var(--ax) 55%, var(--border)); }
/* filament pill — extruder cards only */
.st-filament-tag {
  display: inline-flex;
  align-items: center;
  height: clamp(16px, 6cqw, 20px);
  padding: 0 clamp(5px, 2cqw, 8px);
  border-radius: 10px;
  background: var(--ax-dim);
  border: 1px solid color-mix(in srgb, var(--ax) 30%, var(--border-light));
  color: var(--ax);
  font-size: clamp(8px, 3cqw, 9px);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: clamp(40px, 20cqw, 80px);
}
/* ── field rows ─────────────────────────────────── */
.st-field {
  display: flex;
  flex-direction: column;
  gap: clamp(3px, 1.2cqw, 4px);
  min-width: 0;
}
.st-field > span {
  font-size: clamp(8px, 3cqw, 9px);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.st-field > span em {
  font-style: normal;
  font-weight: 500;
  font-size: 8px;
  opacity: 0.65;
}
.st-field input,
.st-field select {
  min-width: 0;
  width: 100%;
  height: clamp(24px, 9cqw, 28px);
  padding: 0 clamp(5px, 2cqw, 8px);
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-input);
  color: var(--text-primary);
  font: inherit;
  font-size: clamp(10px, 3.8cqw, 11px);
  font-family: monospace;
  outline: none;
  box-sizing: border-box;
  -moz-appearance: textfield;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.st-field input::-webkit-outer-spin-button,
.st-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.st-field input:focus,
.st-field select:focus {
  border-color: color-mix(in srgb, var(--ax) 55%, var(--border));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ax) 12%, transparent);
}
.st-field.is-locked { opacity: 0.48; }
.st-field--full { grid-column: 1 / -1; }
/* ── mode pills ─────────────────────────────────── */
.st-mode-row { display: flex; gap: clamp(3px, 1.5cqw, 5px); }
.st-mode-pill {
  flex: 1;
  min-width: 0;
  height: clamp(22px, 8.5cqw, 26px);
  border-radius: 6px;
  border: 1px solid var(--border-light);
  background: var(--bg-elevated);
  color: var(--text-muted);
  font: inherit;
  font-size: clamp(8px, 3.2cqw, 10px);
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.12s, border-color 0.12s, color 0.12s, box-shadow 0.12s;
}
.st-mode-pill:not(.is-active):hover {
  background: var(--bg-hover);
  color: var(--text-secondary);
  border-color: var(--border);
}
.st-mode-pill--stealthchop.is-active {
  background: rgba(34, 197, 94, 0.13);
  border-color: rgba(34, 197, 94, 0.5);
  color: #4ade80;
  box-shadow: 0 0 7px rgba(34, 197, 94, 0.14);
}
.st-mode-pill--spreadcycle.is-active {
  background: rgba(251, 146, 60, 0.13);
  border-color: rgba(251, 146, 60, 0.5);
  color: #fb923c;
  box-shadow: 0 0 7px rgba(251, 146, 60, 0.14);
}
/* ── action buttons ─────────────────────────────── */
.st-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: clamp(4px, 1.8cqw, 6px);
  padding-top: clamp(5px, 2cqw, 8px);
  margin-top: 2px;
  border-top: 1px solid color-mix(in srgb, var(--ax) 12%, var(--border-light));
}
.st-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(3px, 1.5cqw, 5px);
  height: clamp(24px, 9cqw, 30px);
  border-radius: 6px;
  border: 1px solid transparent;
  font: inherit;
  font-size: clamp(10px, 3.5cqw, 11px);
  font-weight: 700;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, opacity 0.12s, transform 0.08s;
}
.st-btn:not(:disabled):active { transform: scale(0.96); }
.st-btn:disabled { opacity: 0.28; cursor: not-allowed; }
.st-btn--apply {
  background: rgba(86, 201, 138, 0.12);
  border-color: rgba(86, 201, 138, 0.35);
  color: #22c55e;
}
.st-btn--apply:not(:disabled):hover {
  background: rgba(86, 201, 138, 0.22);
  border-color: rgba(86, 201, 138, 0.6);
  color: #4ade80;
}
.st-btn--wiggle {
  background: rgba(100, 160, 255, 0.10);
  border-color: rgba(100, 160, 255, 0.28);
  color: #60a5fa;
}
.st-btn--wiggle:not(:disabled):hover {
  background: rgba(100, 160, 255, 0.18);
  border-color: rgba(100, 160, 255, 0.50);
  color: #93c5fd;
}
/* ════════════════════════════════════════════════════════
   Layout breakpoints — named containers for precision
   ════════════════════════════════════════════════════════ */
/* Preset bar: stack at very narrow panel */
@container st-panel (max-width: 280px) {
  .st-preset-bar { flex-direction: column; align-items: stretch; }
  .st-save-btn   { justify-content: center; }
  .st-panel      { gap: 7px; }
}
/* Axis card internal grid: collapse to 1 col when the card itself is narrow.
   Fires at ≤220px card width — happens in 3-col layout or very narrow 2-col. */
@container st-axis (max-width: 220px) {
  .st-axis { grid-template-columns: 1fr; }
  .st-field--full { grid-column: 1; }
}
/* Ultra-compact: very narrow card — drop decorative / secondary elements */
@container st-axis (max-width: 155px) {
  .st-drv-label    { display: none; }
  .st-filament-tag { display: none; }

  /* mode pills: stack */
  .st-mode-row     { flex-direction: column; }

  /* button icons — drop so text fits */
  .st-btn svg      { display: none; }
  .st-btn          { gap: 0; }
}
/* Pin bed-compensation card accent to blue regardless of grid position.
   !important is needed because the nth-child rules in 01-responsive.css
   have specificity 0-3-0 and are loaded after this file. */
[data-panel="bed-compensation"] .dc-wrapper {
  --dc-accent: #3b82f6 !important;
}
.bc-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-height: 0;
  container-type: inline-size;
}
/* ── status bar ── */
.bc-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-shrink: 0;
}
.bc-status-left {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.bc-status-icon {
  color: var(--text-muted);
  flex-shrink: 0;
}
.bc-status-icon--on {
  color: #60a5fa;
}
.bc-type-badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  border: 1px solid var(--border-light);
  border-radius: 5px;
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.bc-type-badge--on {
  border-color: color-mix(in srgb, #3b82f6 40%, var(--border-light));
  background: color-mix(in srgb, #3b82f6 12%, var(--bg-elevated));
  color: #60a5fa;
}
.bc-rms-badge {
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 600;
  font-family: monospace;
}
.bc-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 25px;
  padding: 0 9px;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  background: var(--bg-elevated);
  color: var(--text-muted);
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.bc-toggle-btn:disabled {
  opacity: 0.45;
  cursor: default;
}
.bc-toggle-btn--on {
  border-color: color-mix(in srgb, #3b82f6 40%, var(--border-light));
  background: color-mix(in srgb, #3b82f6 12%, var(--bg-elevated));
  color: #60a5fa;
}
/* ── viz row ── */
.bc-viz-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(104px, clamp(104px, 24cqw, 132px));
  grid-template-rows: minmax(clamp(92px, 32cqw, 220px), 1fr);
  align-items: stretch;
  gap: 10px;
  flex: 1;
  min-height: 0;
}
/* Column that holds the canvas + optional demo badge */
.bc-canvas-col {
  min-width: 0;
  min-height: clamp(92px, 32cqw, 220px);
  position: relative;
  display: flex;
  flex-direction: column;
}
/* Canvas wrapper fills the column and drives the ResizeObserver */
.bc-canvas-wrap {
  flex: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 1px solid color-mix(in srgb, #3b82f6 22%, var(--border-light));
  border-radius: 7px;
  overflow: hidden;
  background: var(--bg-panel);
}
.bc-scene-wrap {
  position: relative;
  flex: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 1px solid color-mix(in srgb, #3b82f6 22%, var(--border-light));
  border-radius: 7px;
  overflow: hidden;
  background:
    radial-gradient(circle at 52% 40%, color-mix(in srgb, #60a5fa 9%, transparent), transparent 58%),
    var(--bg-panel);
}
.bc-scene-hint {
  position: absolute;
  right: 7px;
  bottom: 6px;
  z-index: 2;
  padding: 2px 6px;
  border: 1px solid color-mix(in srgb, #3b82f6 18%, var(--border-light));
  border-radius: 4px;
  background: color-mix(in srgb, var(--bg-panel) 84%, transparent);
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 650;
  pointer-events: none;
  backdrop-filter: blur(4px);
}
.bc-scene-wrap .hm-3d-tooltip {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg-elevated) 95%, transparent);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28), 0 1px 4px rgba(0, 0, 0, 0.14);
  color: var(--text-primary);
  font-size: 11px;
  white-space: nowrap;
  pointer-events: none;
  backdrop-filter: blur(6px);
}
.bc-scene-wrap .hm-3d-tooltip__badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-bottom: 1px;
  padding: 1px 6px;
  border: 1px solid color-mix(in srgb, #fbbf24 40%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, #fbbf24 18%, transparent);
  color: #fbbf24;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.bc-scene-wrap .hm-3d-tooltip__badge--surface {
  border-color: color-mix(in srgb, var(--dc-accent, #3b82f6) 35%, transparent);
  background: color-mix(in srgb, var(--dc-accent, #3b82f6) 14%, transparent);
  color: var(--dc-accent, #3b82f6);
}
.bc-scene-wrap .hm-3d-tooltip__coord {
  color: var(--text-muted);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.bc-scene-wrap .hm-3d-tooltip__val {
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.bc-canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.bc-view-toggle {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 2;
  display: inline-flex;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, #3b82f6 28%, var(--border-light));
  border-radius: 5px;
  background: color-mix(in srgb, var(--bg-panel) 82%, transparent);
  backdrop-filter: blur(4px);
}
.bc-view-toggle button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 21px;
  min-width: 30px;
  padding: 0 7px;
  border: 0;
  border-right: 1px solid color-mix(in srgb, #3b82f6 20%, var(--border-light));
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
}
.bc-view-toggle button:last-child {
  border-right: 0;
}
.bc-view-toggle button.is-active {
  background: color-mix(in srgb, #3b82f6 20%, var(--bg-elevated));
  color: #93c5fd;
}
.bc-demo-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 1px 5px;
  border-radius: 4px;
  background: color-mix(in srgb, #3b82f6 18%, var(--bg-panel));
  border: 1px solid color-mix(in srgb, #3b82f6 30%, var(--border-light));
  color: color-mix(in srgb, #60a5fa 80%, var(--text-muted));
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  pointer-events: none;
}
/* Right column: fixed width, stacks stats + legend */
.bc-right-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  min-width: 0;
  min-height: 0;
}
/* ── stats ── */
.bc-stats {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 8px;
}
.bc-stat {
  display: contents;
}
.bc-stat-label {
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  align-self: baseline;
}
.bc-stat-val {
  color: var(--text-primary);
  font-size: 10px;
  font-weight: 600;
  font-family: monospace;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  align-self: baseline;
}
.bc-stat-val--low  { color: #60a5fa; }
.bc-stat-val--high { color: #f87171; }
/* ── scale legend ── */
.bc-legend {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: auto;
}
.bc-legend-step {
  display: flex;
  align-items: center;
  gap: 5px;
}
.bc-legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}
.bc-legend-label {
  color: var(--text-muted);
  font-size: 9px;
  font-family: monospace;
}
/* ── error ── */
.bc-error {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border: 1px solid color-mix(in srgb, #ef4444 30%, var(--border-light));
  border-radius: 6px;
  background: color-mix(in srgb, #ef4444 8%, var(--bg-elevated));
  color: #f87171;
  font-size: 11px;
  flex-shrink: 0;
}
/* ── file selector ── */
/* ── icon button ── */
.bc-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid color-mix(in srgb, #3b82f6 22%, var(--border-light));
  border-radius: 6px;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  cursor: pointer;
  flex-shrink: 0;
}
.bc-icon-btn:disabled {
  opacity: 0.45;
  cursor: default;
}
.bc-spin {
  animation: bc-spin 0.7s linear infinite;
}
@keyframes bc-spin {
  to { transform: rotate(360deg); }
}
/* ── actions ── */
.bc-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.bc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 27px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, #3b82f6 30%, var(--border-light));
  border-radius: 6px;
  background: color-mix(in srgb, #3b82f6 10%, var(--bg-elevated));
  color: var(--text-primary);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.bc-btn:disabled {
  opacity: 0.45;
  cursor: default;
}
.bc-btn--probe {
  border-color: color-mix(in srgb, #f59e0b 32%, var(--border-light));
  background: color-mix(in srgb, #f59e0b 10%, var(--bg-elevated));
}
.bc-btn--level {
  border-color: color-mix(in srgb, #22c55e 34%, var(--border-light));
  background: color-mix(in srgb, #22c55e 10%, var(--bg-elevated));
  color: color-mix(in srgb, #86efac 78%, var(--text-primary));
}
/* -- probe grid controls -- */
.bc-grid-card {
  display: grid;
  gap: 7px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, #3b82f6 22%, var(--border-light));
  border-radius: 7px;
  background: color-mix(in srgb, #3b82f6 5%, var(--bg-panel));
  flex-shrink: 0;
}
.bc-grid-card--modal {
  flex-shrink: 1;
}
.bc-grid-head,
.bc-grid-points-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.bc-grid-head > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.bc-grid-lock {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 6px;
  border: 1px solid color-mix(in srgb, #60a5fa 28%, var(--border-light));
  border-radius: 5px;
  background: color-mix(in srgb, #60a5fa 8%, var(--bg-elevated));
  color: #93c5fd;
  font: inherit;
  font-size: 9px;
  font-weight: 750;
  cursor: pointer;
}
.bc-grid-lock.is-unlocked {
  border-color: color-mix(in srgb, #f59e0b 35%, var(--border-light));
  background: color-mix(in srgb, #f59e0b 9%, var(--bg-elevated));
  color: #fbbf24;
}
.bc-grid-ranges {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 4px;
  align-items: center;
}
.bc-axis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 21px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 800;
}
.bc-axis--x {
  background: color-mix(in srgb, #ef4444 14%, var(--bg-elevated));
  color: #f87171;
}
.bc-axis--y {
  background: color-mix(in srgb, #22c55e 13%, var(--bg-elevated));
  color: #4ade80;
}
.bc-grid-ranges input,
.bc-grid-points-row select {
  min-width: 0;
  height: 23px;
  border: 1px solid color-mix(in srgb, #3b82f6 20%, var(--border-light));
  border-radius: 5px;
  background: var(--bg-input);
  color: var(--text-primary);
  font: inherit;
  font-size: 10px;
}
.bc-grid-ranges input {
  width: 100%;
  padding: 0 4px;
  text-align: center;
}
.bc-grid-ranges input:disabled,
.bc-grid-points-row select:disabled {
  opacity: 0.55;
  cursor: default;
}
.bc-grid-sep,
.bc-grid-points-row span {
  color: var(--text-muted);
  font-size: 10px;
  white-space: nowrap;
}
.bc-grid-points-row select {
  flex: 1;
  padding: 0 6px;
}
.bc-grid-command,
.bc-grid-source {
  display: block;
  min-width: 0;
  padding: 5px 6px;
  border-radius: 5px;
  font-family: 'Consolas', 'Cascadia Code', ui-monospace, monospace;
  font-size: 9.5px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bc-grid-command {
  border: 1px solid color-mix(in srgb, #3b82f6 20%, var(--border-light));
  background: var(--bg-panel);
  color: var(--text-secondary);
}
.bc-grid-source {
  border: 1px solid color-mix(in srgb, #60a5fa 18%, var(--border-light));
  background: color-mix(in srgb, #60a5fa 6%, var(--bg-panel));
  color: var(--text-muted);
}
.bc-grid-probe-offset-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 4px;
  background: color-mix(in srgb, #f59e0b 8%, var(--bg-panel));
  border: 1px solid color-mix(in srgb, #f59e0b 22%, var(--border-light));
  font-size: 10px;
  color: var(--text-muted);
}
.bc-grid-offset-apply {
  flex-shrink: 0;
  padding: 2px 7px;
  border-radius: 3px;
  border: 1px solid color-mix(in srgb, #f59e0b 35%, var(--border-light));
  background: color-mix(in srgb, #f59e0b 12%, var(--bg-panel));
  color: var(--text-secondary);
  font-size: 10px;
  cursor: pointer;
}
.bc-grid-offset-apply:hover:not(:disabled) {
  background: color-mix(in srgb, #f59e0b 22%, var(--bg-panel));
  color: var(--text-primary);
}
.bc-grid-offset-apply:disabled {
  opacity: 0.4;
  cursor: default;
}
/* ── probe confirm modal ── */
.bc-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
}
.bc-modal {
  display: flex;
  flex-direction: column;
  width: min(400px, calc(100vw - 48px));
  border: 1px solid color-mix(in srgb, #f59e0b 30%, var(--border));
  border-radius: 10px;
  background: var(--bg-secondary, var(--bg-panel));
  color: var(--text-primary);
  box-shadow:
    0 0 0 1px color-mix(in srgb, #f59e0b 12%, transparent),
    0 24px 64px rgba(0, 0, 0, 0.5),
    0 8px 24px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
.bc-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border-light);
}
.bc-modal-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bc-modal-warn-icon {
  color: #f59e0b;
  flex-shrink: 0;
}
.bc-modal-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}
.bc-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--border-light);
  border-radius: 5px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
}
.bc-modal-close:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
}
.bc-modal-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
}
.bc-modal-desc {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.bc-modal-steps {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: var(--bg-panel);
}
.bc-modal-step,
.bc-modal-step--toggle {
  display: flex;
  align-items: center;
  gap: 10px;
}
.bc-modal-step--toggle {
  cursor: pointer;
  border-radius: 6px;
  padding: 4px 6px;
  margin: -4px -6px;
  transition: background 0.1s;
}
.bc-modal-step--toggle:hover {
  background: color-mix(in srgb, #f59e0b 8%, transparent);
}
.bc-modal-step--toggle.is-disabled {
  opacity: 0.45;
}
.bc-modal-checkbox {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  accent-color: #f59e0b;
  cursor: pointer;
}
.bc-modal-step-icon {
  color: #f59e0b;
  flex-shrink: 0;
}
.bc-modal-step > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex: 1;
  gap: 8px;
}
.bc-modal-step-label {
  font-size: 12px;
  color: var(--text-primary);
  font-weight: 500;
}
.bc-modal-step-cmd {
  font-family: monospace;
  font-size: 11px;
  color: var(--text-muted);
}
.bc-modal-step-arrow {
  padding-left: 3px;
  color: var(--text-muted);
  font-size: 11px;
}
/* Inline badge inside a step label — e.g. "Recommended" */
.bc-modal-step-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 5px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-left: 6px;
  vertical-align: middle;
}
.bc-modal-step-badge--warn {
  background: color-mix(in srgb, #f59e0b 18%, transparent);
  border: 1px solid color-mix(in srgb, #f59e0b 40%, transparent);
  color: #f59e0b;
}
/* Hint shown below the Z datum step when auto-suggested */
.bc-modal-datum-hint {
  margin: 0 0 2px 28px;
  font-size: 11px;
  color: #f59e0b;
  line-height: 1.4;
  opacity: 0.85;
}
.bc-modal-checklist {
  margin: 0;
  padding: 0 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.bc-modal-checklist li {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.4;
}
.bc-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border-light);
  background: color-mix(in srgb, var(--bg-panel) 60%, transparent);
}
.bc-modal-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border-radius: 7px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.bc-modal-btn--cancel {
  border: 1px solid var(--border-light);
  background: var(--bg-elevated);
  color: var(--text-secondary);
}
.bc-modal-btn--cancel:hover {
  background: var(--bg-elevated-hover, var(--bg-elevated));
  color: var(--text-primary);
}
.bc-modal-btn--confirm {
  border: 1px solid color-mix(in srgb, #f59e0b 50%, var(--border));
  background: color-mix(in srgb, #f59e0b 18%, var(--bg-elevated));
  color: #fbbf24;
}
.bc-modal-btn--confirm:hover {
  background: color-mix(in srgb, #f59e0b 26%, var(--bg-elevated));
  color: #fcd34d;
}
/* Repeat row inside level bed modal */
.bc-modal-repeat-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
/* Tolerance sub-row — indented, appears only when probesPerPoint > 1 */
.bc-modal-repeat-row--sub {
  margin-top: 3px;
  padding-left: 12px;
  opacity: 0.88;
}
/* Wraps per-point + tolerance rows as a visual unit */
.bc-modal-probe-dives-group {
  margin-top: 6px;
}
.bc-modal-num-input {
  width: 52px;
  height: 24px;
  padding: 0 6px;
  border: 1px solid color-mix(in srgb, #f59e0b 30%, var(--border-light));
  border-radius: 5px;
  background: var(--bg-input);
  color: var(--text-primary);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  flex-shrink: 0;
}
.bc-modal-repeat-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}
.bc-modal-repeat-hint {
  font-size: 11px;
  color: var(--text-muted);
}
/* ── Mode toggle (Fixed / Auto-Converge) ── */
.bc-modal-mode-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.bc-modal-mode-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}
.bc-modal-mode-toggle {
  display: flex;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}
.bc-modal-mode-btn {
  padding: 3px 11px;
  background: transparent;
  border: none;
  border-right: 1px solid var(--border-light);
  color: var(--text-muted);
  font: inherit;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms, color 120ms;
  white-space: nowrap;
}
.bc-modal-mode-btn:last-child {
  border-right: none;
}
.bc-modal-mode-btn:hover {
  background: color-mix(in srgb, var(--border-light) 40%, transparent);
  color: var(--text-secondary);
}
.bc-modal-mode-btn.is-active {
  background: color-mix(in srgb, #22c55e 16%, var(--bg-elevated));
  color: #4ade80;
  font-weight: 700;
}
/* Auto-converge field group + hint text */
.bc-modal-auto-fields {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, #22c55e 22%, var(--border-light));
  border-radius: 7px;
  background: color-mix(in srgb, #22c55e 5%, var(--bg-panel));
  margin-top: 6px;
}
.bc-modal-auto-fields .bc-modal-repeat-row {
  margin-top: 4px;
}
.bc-modal-auto-hint {
  margin: 6px 0 2px;
  font-size: 10.5px;
  color: var(--text-muted);
  line-height: 1.45;
}
/* ── Converge stop-reason banner (results modal) ── */
.bc-results-converge {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 7px;
  border: 1px solid var(--border-light);
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-secondary);
  margin-bottom: 2px;
}
.bc-results-converge svg { flex-shrink: 0; margin-top: 1px; }
.bc-results-converge--target {
  border-color: color-mix(in srgb, #16a34a 35%, var(--border-light));
  background: color-mix(in srgb, #16a34a 8%, var(--bg-panel));
  color: var(--text-secondary);
}
.bc-results-converge--target svg { color: #22c55e; }
.bc-results-converge--plateaued {
  border-color: color-mix(in srgb, #60a5fa 30%, var(--border-light));
  background: color-mix(in srgb, #60a5fa 7%, var(--bg-panel));
  color: var(--text-secondary);
}
.bc-results-converge--plateaued svg { color: #60a5fa; }
.bc-results-converge--maxPasses {
  border-color: color-mix(in srgb, #fbbf24 30%, var(--border-light));
  background: color-mix(in srgb, #fbbf24 7%, var(--bg-panel));
  color: var(--text-secondary);
}
.bc-results-converge--maxPasses svg { color: #fbbf24; }
/* Level Bed confirm — green variant */
.bc-modal-btn--level {
  border: 1px solid color-mix(in srgb, #22c55e 50%, var(--border));
  background: color-mix(in srgb, #22c55e 18%, var(--bg-elevated));
  color: #4ade80;
}
.bc-modal-btn--level:hover {
  background: color-mix(in srgb, #22c55e 26%, var(--bg-elevated));
  color: #86efac;
}
.bc-modal-btn--secondary {
  border: 1px solid var(--border-light);
  background: var(--bg-elevated);
  color: var(--text-secondary);
}
.bc-modal-btn--secondary:hover {
  background: var(--bg-elevated-hover, var(--bg-elevated));
  color: var(--text-primary);
}
/* ── Level bed results modal ── */
.bc-results-pass-badge {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 7px;
  border-radius: 9px;
  border: 1px solid color-mix(in srgb, #60a5fa 35%, var(--border-light));
  background: color-mix(in srgb, #60a5fa 10%, var(--bg-elevated));
  color: #93c5fd;
  font-size: 10px;
  font-weight: 700;
  margin-left: 4px;
}
/* Empty state */
.bc-results-empty {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, #f59e0b 28%, var(--border-light));
  border-radius: 8px;
  background: color-mix(in srgb, #f59e0b 6%, var(--bg-panel));
}
.bc-results-empty-title {
  margin: 0 0 5px;
  font-size: 13px;
  font-weight: 700;
  color: #fbbf24;
}
.bc-results-empty-sub {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary);
}
/* Footnote text inside a table header */
/* "(verified)" / "(projected)" label beside "Final deviation" */
.bc-results-summary-label-note {
  font-size: 10px;
  font-weight: 400;
  opacity: 0.65;
}
/* Results table */
.bc-results-table-wrap {
  border: 1px solid var(--border-light);
  border-radius: 8px;
  overflow: hidden;
}
.bc-results-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.bc-results-table thead tr {
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border-light);
}
.bc-results-table th {
  padding: 7px 10px;
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.bc-results-table th:not(:first-child) {
  text-align: right;
}
.bc-results-table tbody tr {
  border-bottom: 1px solid color-mix(in srgb, var(--border-light) 50%, transparent);
}
.bc-results-table tbody tr:last-child {
  border-bottom: none;
}
.bc-results-table tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--bg-elevated) 40%, transparent);
}
.bc-results-table td {
  padding: 7px 10px;
  vertical-align: middle;
}
/* Run # */
.bc-results-run {
  font-weight: 700;
  color: var(--text-muted);
  font-size: 11px;
  width: 36px;
}
/* Deviation numbers */
.bc-results-num {
  font-family: 'Consolas', 'Cascadia Code', ui-monospace, monospace;
  font-size: 11.5px;
  font-weight: 600;
  text-align: right;
  color: var(--text-secondary);
  white-space: nowrap;
}
.bc-results-num.is-good { color: #22c55e; }
.bc-results-num.is-warn { color: #fbbf24; }
.bc-results-num.is-bad  { color: #f87171; }
/* Improvement % */
.bc-results-imp {
  font-size: 11px;
  font-weight: 600;
  text-align: right;
  color: var(--text-muted);
  white-space: nowrap;
  vertical-align: middle;
}
.bc-results-imp.is-positive { color: #22c55e; }
.bc-results-imp.is-positive .bc-results-imp-abs { color: #4ade80; }
/* Two-line Δ: percentage primary, absolute secondary */
.bc-results-imp-pct {
  display: block;
}
.bc-results-imp-abs {
  display: block;
  font-size: 9.5px;
  font-weight: 500;
  opacity: 0.7;
  margin-top: 1px;
}
/* Adjustments */
.bc-results-adj {
  text-align: right;
  display: flex;
  gap: 4px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.bc-results-adj-chip {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--border-light);
  background: var(--bg-elevated);
  font-family: 'Consolas', 'Cascadia Code', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}
.bc-results-adj-chip.is-zero {
  color: var(--text-muted);
  opacity: 0.6;
}
.bc-results-adj-none {
  color: var(--text-muted);
  font-size: 11px;
}
/* Summary card */
.bc-results-summary {
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--border-light);
  background: var(--bg-panel);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.bc-results-summary.is-good {
  border-color: color-mix(in srgb, #22c55e 35%, var(--border-light));
  background: color-mix(in srgb, #22c55e 6%, var(--bg-panel));
}
.bc-results-summary.is-warn {
  border-color: color-mix(in srgb, #f59e0b 35%, var(--border-light));
  background: color-mix(in srgb, #f59e0b 6%, var(--bg-panel));
}
.bc-results-summary.is-bad {
  border-color: color-mix(in srgb, #ef4444 35%, var(--border-light));
  background: color-mix(in srgb, #ef4444 6%, var(--bg-panel));
}
.bc-results-summary-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.bc-results-summary-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.bc-results-summary-val {
  font-family: 'Consolas', 'Cascadia Code', ui-monospace, monospace;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
}
.bc-results-summary.is-good .bc-results-summary-val { color: #22c55e; }
.bc-results-summary.is-warn .bc-results-summary-val { color: #d97706; }
.bc-results-summary.is-bad  .bc-results-summary-val { color: #dc2626; }
.bc-results-summary-verdict {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-left: auto;
  white-space: nowrap;
}
.bc-results-summary.is-good .bc-results-summary-verdict { color: #22c55e; }
.bc-results-summary.is-warn .bc-results-summary-verdict { color: #d97706; }
.bc-results-summary.is-bad  .bc-results-summary-verdict { color: #dc2626; }
.bc-results-summary-sub {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}
/* ── Bed-tilt setup modal — wider variant + code block ── */
.bc-modal--wide {
  width: min(540px, calc(100vw - 48px));
}
/* Code-block wrapper: relative so the copy button can float in the corner */
.bc-setup-code-wrap {
  position: relative;
  border: 1px solid var(--border-light);
  border-radius: 7px;
  background: var(--bg-panel, #111118);
  overflow: hidden;
}
.bc-setup-code {
  margin: 0;
  padding: 12px 14px 12px 14px;
  font-family: 'Consolas', 'Cascadia Code', 'Fira Code', 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  line-height: 1.55;
  color: var(--text-secondary, #b0b0c0);
  white-space: pre;
  overflow-x: auto;
  max-height: 260px;
  overflow-y: auto;
}
/* Scrollbar — slim, themed */
.bc-setup-code::-webkit-scrollbar        { width: 5px; height: 5px; }
.bc-setup-code::-webkit-scrollbar-track  { background: transparent; }
.bc-setup-code::-webkit-scrollbar-thumb  { background: var(--border-light); border-radius: 3px; }
.bc-setup-code--editable {
  display: block;
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  border: none;
  outline: none;
  background: transparent;
  white-space: pre;
  word-break: normal;
  overflow-wrap: normal;
}
.bc-setup-copy-btn {
  position: absolute;
  top: 7px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border: 1px solid var(--border-light);
  border-radius: 5px;
  background: color-mix(in srgb, var(--bg-elevated, #1e1e2e) 90%, transparent);
  color: var(--text-muted, #7a7a90);
  font: inherit;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
  backdrop-filter: blur(4px);
}
.bc-setup-copy-btn:hover {
  background: color-mix(in srgb, #60a5fa 14%, var(--bg-elevated, #1e1e2e));
  border-color: color-mix(in srgb, #60a5fa 35%, var(--border-light));
  color: #93c5fd;
}
.bc-setup-copy-btn.is-copied {
  border-color: color-mix(in srgb, #34d399 40%, var(--border-light));
  background: color-mix(in srgb, #34d399 12%, var(--bg-elevated, #1e1e2e));
  color: #34d399;
}
/* ── narrow card: stack canvas above right-col ── */
@container (max-width: 430px) {
  .bc-viz-row {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(clamp(118px, 54cqw, 220px), 1fr) auto;
  }

  .bc-canvas-col {
    min-height: clamp(118px, 54cqw, 220px);
  }

  .bc-right-col {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .bc-stats {
    flex: 1;
    min-width: 120px;
  }

  .bc-legend {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 0;
  }
}
@container (min-width: 640px) {
  .bc-viz-row {
    grid-template-columns: minmax(0, 1fr) minmax(124px, 148px);
    grid-template-rows: minmax(clamp(150px, 26cqw, 300px), 1fr);
  }

  .bc-canvas-col {
    min-height: clamp(150px, 26cqw, 300px);
  }
}
/* ── Primary button variant ── */
.bc-modal-btn--primary {
  border: 1px solid color-mix(in srgb, #60a5fa 50%, var(--border));
  background: color-mix(in srgb, #60a5fa 18%, var(--bg-elevated));
  color: #93c5fd;
}
.bc-modal-btn--primary:hover {
  background: color-mix(in srgb, #60a5fa 26%, var(--bg-elevated));
  color: #bfdbfe;
}
/* ── Probe results modal ── */
.bc-probe-result-save {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border-radius: 6px;
  background: color-mix(in srgb, #22c55e 8%, var(--bg-elevated));
  border: 1px solid color-mix(in srgb, #22c55e 25%, var(--border-light));
  font-size: 12px;
  color: var(--text-secondary);
}
.bc-probe-result-save code {
  font-family: 'Consolas', 'Cascadia Code', ui-monospace, monospace;
  font-size: 11px;
  color: var(--text-primary);
}
.bc-probe-result-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  overflow: hidden;
  background: var(--border-light);
}
.bc-probe-result-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: var(--bg-panel);
}
.bc-probe-result-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.bc-probe-result-val {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}
.bc-probe-result-val--mono {
  font-family: 'Consolas', 'Cascadia Code', ui-monospace, monospace;
  font-size: 13px;
}
.bc-probe-result-val.is-good  { color: #22c55e; }
.bc-probe-result-val.is-warn  { color: #f59e0b; }
.bc-probe-result-val.is-bad   { color: #ef4444; }
.duet-dash-offline {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 920px;
  margin: 48px auto 0;
  padding: 0 20px;
}
.duet-dash-offline__hero {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-panel);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.duet-dash-offline__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  color: var(--accent);
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
}
.duet-dash-offline__icon.is-pulsing {
  animation: duetDashOpeningPulse 1.15s ease-in-out infinite;
}
@keyframes duetDashOpeningPulse {
  0%,
  100% {
    opacity: 0.62;
    transform: scale(0.96);
  }

  50% {
    opacity: 1;
    transform: scale(1);
  }
}
.duet-dash-offline h2 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 650;
  color: var(--text-primary);
}
.duet-dash-offline p {
  max-width: 680px;
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.45;
}
.duet-dash-offline__summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.duet-dash-offline__summary > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-panel);
}
.duet-dash-offline__summary span {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
}
.duet-dash-offline__summary strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
}
.duet-dash-offline__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.duet-dash-offline__actions button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-elevated);
  color: var(--text-primary);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.duet-dash-offline__actions button:hover:not(:disabled) {
  background: var(--bg-elevated-hover);
}
.duet-dash-offline__actions button:disabled {
  cursor: default;
  opacity: 0.45;
}
.duet-dash-offline__actions .duet-dash-offline__primary {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}
.duet-dash-offline__camera {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-panel);
}
.duet-dash-offline__camera-title {
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
}
@media (max-width: 720px) {
  .duet-dash-offline {
    margin-top: 24px;
  }

  .duet-dash-offline__hero,
  .duet-dash-offline__summary {
    grid-template-columns: 1fr;
  }
}
.fleet-dashboard {
  --fleet-blue: #3b82f6;
  --fleet-teal: #14b8a6;
  --fleet-green: #22c55e;
  --fleet-amber: #f59e0b;
  --fleet-rose: #f43f5e;
  --fleet-violet: #8b5cf6;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px 14px 8px;
}
.fleet-dashboard__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.fleet-dashboard__eyebrow {
  margin-bottom: 2px;
  color: var(--fleet-teal);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}
.fleet-dashboard h2 {
  margin: 0;
  color: var(--text-primary);
  font-size: 20px;
  font-weight: 680;
}
.fleet-dashboard__header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fleet-add-printer-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--fleet-teal) 34%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--fleet-teal) 12%, var(--bg-panel));
  color: var(--fleet-teal);
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.fleet-add-printer-btn:hover {
  background: color-mix(in srgb, var(--fleet-teal) 22%, var(--bg-panel));
  border-color: color-mix(in srgb, var(--fleet-teal) 54%, var(--border));
}
.fleet-manage-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--fleet-blue) 34%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--fleet-blue) 12%, var(--bg-panel));
  color: var(--fleet-blue);
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.fleet-manage-btn:hover {
  background: color-mix(in srgb, var(--fleet-blue) 22%, var(--bg-panel));
  border-color: color-mix(in srgb, var(--fleet-blue) 54%, var(--border));
}
.fleet-dashboard__status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--fleet-teal) 34%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--fleet-teal) 10%, var(--bg-panel));
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 650;
  text-transform: capitalize;
}
.fleet-dashboard__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
}
.fleet-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.fleet-stat {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 9px 11px;
  border: 1px solid color-mix(in srgb, var(--fleet-card-color, var(--accent)) 28%, var(--border));
  border-radius: 8px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--fleet-card-color, var(--accent)) 13%, transparent), transparent 74%),
    var(--bg-panel);
  box-shadow: inset 3px 0 0 var(--fleet-card-color, var(--accent));
}
.fleet-stat:nth-child(1) { --fleet-card-color: var(--fleet-blue); }
.fleet-stat:nth-child(2) { --fleet-card-color: var(--fleet-green); }
.fleet-stat:nth-child(3) { --fleet-card-color: var(--fleet-teal); }
.fleet-stat:nth-child(4) { --fleet-card-color: var(--fleet-violet); }
.fleet-stat__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  color: var(--fleet-card-color, var(--accent));
  background: color-mix(in srgb, var(--fleet-card-color, var(--accent)) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--fleet-card-color, var(--accent)) 26%, transparent);
}
.fleet-stat__label {
  min-width: 0;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
}
.fleet-stat strong {
  color: var(--text-primary);
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}
.fleet-printer-row {
  border: 1px solid color-mix(in srgb, var(--fleet-blue) 18%, var(--border));
  border-radius: 8px;
  background: var(--bg-panel);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.fleet-printer-list {
  display: grid;
  gap: 10px;
}
.fleet-printer-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
  min-height: 164px;
  --printer-accent: var(--fleet-blue);
}
.fleet-printer-row::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--printer-accent);
  z-index: 2;
}
.fleet-printer-row.is-active {
  --printer-accent: var(--fleet-teal);
  border-color: color-mix(in srgb, var(--printer-accent) 54%, var(--border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--printer-accent) 25%, transparent), 0 10px 26px rgba(0, 0, 0, 0.1);
}
.fleet-printer-row__body {
  display: grid;
  grid-template-columns: minmax(230px, 1fr) minmax(240px, 1.1fr) minmax(220px, 0.95fr);
  gap: 10px;
  align-items: stretch;
  min-width: 0;
  padding: 10px;
}
.fleet-printer-row__main,
.fleet-printer-row__job,
.fleet-printer-row__metrics,
.fleet-printer-row__actions {
  min-width: 0;
}
.fleet-printer-row__main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
}
.fleet-printer-row__identity {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.fleet-printer-row h3 {
  margin: 0 0 3px;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 680;
}
.fleet-printer-row.is-active h3 {
  color: color-mix(in srgb, var(--fleet-teal) 72%, var(--text-primary));
}
.fleet-printer-row__identity span:not(.fleet-printer-row__state) {
  display: block;
  max-width: 180px;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fleet-printer-row__state {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  min-height: 22px;
  padding: 0 7px;
  border: 1px solid color-mix(in srgb, var(--printer-accent) 32%, var(--border-light));
  border-radius: 999px;
  background: color-mix(in srgb, var(--printer-accent) 10%, var(--bg-elevated));
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 700;
  text-transform: capitalize;
}
.fleet-printer-row__job {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--fleet-amber) 24%, var(--border-light));
  border-radius: 6px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--fleet-amber) 10%, transparent), transparent 72%),
    var(--bg-elevated);
}
.fleet-printer-row__job.is-printing {
  border-color: color-mix(in srgb, var(--fleet-green) 52%, var(--border-light));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--fleet-green) 14%, transparent), transparent 74%),
    var(--bg-elevated);
}
.fleet-printer-row__job-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.fleet-printer-row__job-top span,
.fleet-printer-row__job-meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fleet-printer-row__job-top span {
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 650;
}
.fleet-printer-row__job-top strong {
  flex-shrink: 0;
  color: var(--fleet-green);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.fleet-printer-row__job-meta {
  color: var(--text-muted);
  font-size: 11px;
}
.fleet-printer-row__job-bar {
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fleet-amber) 10%, var(--bg-panel));
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--fleet-amber) 16%, transparent);
}
.fleet-printer-row__job-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--fleet-amber), var(--fleet-green));
  transition: width 0.2s ease;
}
.fleet-printer-row__metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(92px, 1fr));
  gap: 6px;
}
.fleet-printer-row__metrics > div {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "icon label" "icon value";
  align-items: center;
  gap: 2px 7px;
  min-width: 0;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--metric-color, var(--accent)) 24%, var(--border-light));
  border-radius: 6px;
  background: color-mix(in srgb, var(--metric-color, var(--accent)) 8%, var(--bg-elevated));
}
.fleet-printer-row__metrics > div:nth-child(1) { --metric-color: var(--fleet-rose); }
.fleet-printer-row__metrics > div:nth-child(2) { --metric-color: var(--fleet-amber); }
.fleet-printer-row__metrics > div:nth-child(3) { --metric-color: var(--fleet-blue); }
.fleet-printer-row__metrics > div:nth-child(4) { --metric-color: var(--fleet-violet); }
.fleet-printer-row__metrics svg {
  grid-area: icon;
  color: var(--metric-color, var(--text-muted));
}
.fleet-printer-row__metrics span {
  grid-area: label;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 650;
  text-transform: uppercase;
}
.fleet-printer-row__metrics strong {
  grid-area: value;
  min-width: 0;
  overflow: hidden;
  color: var(--text-primary);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fleet-printer-row__actions {
  display: grid;
  align-content: center;
  gap: 6px;
  min-width: 116px;
}
.fleet-printer-row__actions--inline {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: stretch;
  min-width: 0;
}
.fleet-printer-row__actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 28px;
  padding: 0 7px;
  border: 1px solid color-mix(in srgb, var(--printer-accent) 22%, var(--border));
  border-radius: 6px;
  background: color-mix(in srgb, var(--printer-accent) 7%, var(--bg-elevated));
  color: var(--text-primary);
  font: inherit;
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
}
.fleet-printer-row__actions button:hover:not(:disabled) {
  background: color-mix(in srgb, var(--printer-accent) 15%, var(--bg-elevated-hover));
  border-color: color-mix(in srgb, var(--printer-accent) 42%, var(--border-strong));
}
.fleet-printer-row__actions button:disabled {
  cursor: default;
  opacity: 0.45;
}
.fleet-printer-row__actions button.is-connected {
  border-color: color-mix(in srgb, var(--fleet-green) 44%, var(--border-light));
  background: color-mix(in srgb, var(--fleet-green) 14%, var(--bg-elevated));
  color: color-mix(in srgb, var(--fleet-green) 74%, var(--text-primary));
  opacity: 1;
}
.fleet-camera {
  position: relative;
  min-height: 140px;
  aspect-ratio: 16 / 10;
  background:
    linear-gradient(135deg, rgba(20, 184, 166, 0.2), rgba(59, 130, 246, 0.08) 42%, rgba(5, 6, 8, 0.92)),
    #050608;
  overflow: hidden;
}
.fleet-camera::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  pointer-events: none;
}
.fleet-printer-row .fleet-camera {
  min-height: 100%;
  aspect-ratio: auto;
}
.fleet-camera img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: block;
  object-fit: cover;
}
.fleet-camera__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 100%;
  min-height: inherit;
  color: rgba(255, 255, 255, 0.68);
  font-size: 11px;
  font-weight: 650;
  text-align: center;
}
.fleet-camera__empty svg {
  color: var(--fleet-teal);
}
@media (max-width: 1180px) {
  .fleet-printer-row__body {
    grid-template-columns: minmax(210px, 1fr) minmax(240px, 1fr);
  }

  .fleet-printer-row__metrics {
    grid-column: 1 / 2;
  }

  .fleet-printer-row__actions {
    grid-column: 2 / 3;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-width: 0;
  }
}
@media (max-width: 720px) {
  .fleet-dashboard {
    padding: 10px 8px 4px;
  }

  .fleet-dashboard__header {
    align-items: flex-start;
    flex-direction: column;
  }

  .fleet-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fleet-printer-row {
    grid-template-columns: 1fr;
  }

  .fleet-printer-row__body {
    grid-template-columns: 1fr;
  }

  .fleet-printer-row__metrics,
  .fleet-printer-row__actions {
    grid-column: auto;
  }

  .fleet-printer-row .fleet-camera {
    min-height: 150px;
    aspect-ratio: 16 / 9;
  }
}
/* ── Manage Printers Dialog ──────────────────────────────────────────────── */
.fleet-manage-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
}
.fleet-manage-dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 420px;
  max-height: 80vh;
  border: 1px solid color-mix(in srgb, var(--fleet-blue) 34%, var(--border));
  border-radius: 12px;
  background: var(--bg-panel);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
.fleet-manage-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.fleet-manage-dialog__header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 680;
  color: var(--text-primary);
}
.fleet-manage-dialog__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.fleet-manage-dialog__close:hover {
  background: var(--bg-elevated-hover);
  color: var(--text-primary);
}
.fleet-manage-dialog__list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}
.fleet-manage-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  transition: background 0.1s;
}
.fleet-manage-row:hover {
  background: color-mix(in srgb, var(--fleet-blue) 6%, transparent);
}
.fleet-manage-row.is-active {
  background: color-mix(in srgb, var(--fleet-teal) 8%, transparent);
}
.fleet-manage-row.is-active::before {
  content: "";
  width: 3px;
  height: 24px;
  border-radius: 2px;
  background: var(--fleet-teal);
  flex-shrink: 0;
}
.fleet-manage-row__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fleet-manage-row__name {
  font-size: 13px;
  font-weight: 650;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fleet-manage-row__host {
  font-size: 11px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fleet-manage-row__rename {
  width: 100%;
  padding: 4px 8px;
  border: 1px solid var(--fleet-blue);
  border-radius: 4px;
  background: var(--bg-elevated);
  color: var(--text-primary);
  font: inherit;
  font-size: 13px;
  outline: none;
}
.fleet-manage-row__actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.fleet-manage-row__actions button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.fleet-manage-row__actions button:hover:not(:disabled) {
  background: var(--bg-elevated-hover);
  color: var(--text-primary);
  border-color: var(--border);
}
.fleet-manage-row__delete:hover:not(:disabled) {
  color: var(--fleet-rose) !important;
  border-color: color-mix(in srgb, var(--fleet-rose) 34%, var(--border)) !important;
  background: color-mix(in srgb, var(--fleet-rose) 10%, transparent) !important;
}
.fleet-manage-row__actions button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.fleet-manage-dialog__footer {
  display: flex;
  justify-content: center;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
}
/* ── Delete Confirmation ─────────────────────────────────────────────────── */
.fleet-manage-confirm-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  border-radius: inherit;
}
.fleet-manage-confirm {
  width: 340px;
  padding: 20px;
  border: 1px solid color-mix(in srgb, var(--fleet-rose) 34%, var(--border));
  border-radius: 10px;
  background: var(--bg-panel);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
.fleet-manage-confirm__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0 auto 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fleet-rose) 14%, transparent);
  color: var(--fleet-rose);
}
.fleet-manage-confirm h4 {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  text-align: center;
}
.fleet-manage-confirm p {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.fleet-manage-confirm__cascade {
  margin: 0 0 10px;
  padding-left: 18px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.7;
}
.fleet-manage-confirm__cascade strong {
  color: var(--fleet-rose);
}
.fleet-manage-confirm__warning {
  font-weight: 650;
  color: var(--fleet-rose) !important;
  font-size: 11px !important;
  text-align: center;
}
.fleet-manage-confirm__actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.fleet-manage-confirm__actions button {
  flex: 1;
  min-height: 32px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-elevated);
  color: var(--text-primary);
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  transition: background 0.1s;
}
.fleet-manage-confirm__actions button:hover:not(:disabled) {
  background: var(--bg-elevated-hover);
}
.fleet-manage-confirm__actions button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.fleet-manage-confirm__delete {
  background: var(--fleet-rose) !important;
  border-color: var(--fleet-rose) !important;
  color: #fff !important;
}
.fleet-manage-confirm__delete:hover:not(:disabled) {
  background: color-mix(in srgb, var(--fleet-rose) 85%, #000) !important;
}
/* =================================================================
   Axes & Movement panel cards, positions, and step controls
   ================================================================= */
.ax-card {
  background: transparent;
  border: 1px solid var(--border-light);
  border-left: 3px solid var(--card-accent, rgba(155,155,200,0.4));
  border-radius: 0 6px 6px 0;
  padding: 9px 12px 9px 11px;
  margin-bottom: 8px;
}
.ax-card--step  { --card-accent: rgba(155,143,232,0.8); }
.ax-card--jog   { --card-accent: rgba(100,160,255,0.7); }
.ax-card--qm    { --card-accent: rgba(86,201,138,0.75); }
.ax-card--baby  { --card-accent: rgba(232,184,75,0.8);  }
.ax-card-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 9px;
}
.ax-card-label::before { display: none; }
.ax-pos-row {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}
.ax-pos-card {
  flex: 1;
  min-width: 0;
  border-radius: 8px;
  padding: 8px 10px 7px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-left: 3px solid var(--ax, #888);
}
.ax-pos-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
}
.ax-pos-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--ax, #aaa);
  text-transform: uppercase;
}
.ax-pos-indicators {
  display: flex;
  align-items: center;
  gap: 4px;
}
.ax-unhomed {
  font-size: 9px;
  font-weight: 700;
  color: #e0a84a;
}
.ax-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ax-pos-value {
  font-size: 18px;
  font-weight: 700;
  font-family: monospace;
  letter-spacing: -0.5px;
  line-height: 1;
}
.ax-pos-unit {
  font-size: 9px;
  color: var(--text-muted, #666);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
}
.ax-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.ax-mesh-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid rgba(136,136,170,0.2);
  background: rgba(136,136,170,0.1);
  color: var(--text-muted, #666);
  white-space: nowrap;
}
.ax-mesh-badge--on {
  border-color: rgba(86,201,138,0.35);
  background: rgba(86,201,138,0.1);
  color: #56c98a;
}
.ax-home-row {
  display: flex;
  gap: 4px;
  flex: 1;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.ax-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 30px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-muted, #888);
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.07s;
}
.ax-btn:not(:disabled):hover {
  background: var(--bg-elevated-hover);
  border-color: var(--border-strong);
  color: var(--text-primary);
}
.ax-btn:not(:disabled):active { transform: scale(0.94); }
.ax-btn:disabled {
  opacity: 0.28;
  cursor: not-allowed;
}
.ax-btn--home-all {
  border-color: rgba(232,184,75,0.35);
  background: rgba(232,184,75,0.08);
  color: #e8b84b;
}
.ax-btn--home-all:not(:disabled):hover {
  background: rgba(232,184,75,0.18);
  border-color: rgba(232,184,75,0.55);
}
.ax-btn--home {
  border-color: var(--border-light);
  background: var(--bg-elevated);
  color: var(--ax, #aaa);
}
.ax-btn--home:not(:disabled):hover {
  background: var(--bg-elevated-hover);
  color: var(--text-primary);
}
.ax-btn--baby {
  font-family: monospace;
  font-size: 11px;
  padding: 0 12px;
}
.ax-btn--jog-neg { color: #9999cc; }
.ax-btn--jog-pos { color: #66bb80; }
.ax-step-row {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
}
.ax-step-btn {
  flex: 1;
  min-width: 44px;
  max-width: 64px;
  height: 30px;
  padding: 0 4px;
  border-radius: 6px;
  border: 1px solid var(--border-light);
  background: var(--bg-elevated);
  color: var(--text-muted, #888);
  font-size: 11px;
  font-family: monospace;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.07s;
}
.ax-step-btn:not(:disabled):hover {
  background: rgba(155,143,232,0.12);
  border-color: rgba(155,143,232,0.3);
  color: var(--text-primary);
}
.ax-step-btn:not(:disabled):active { transform: scale(0.93); }
.ax-step-btn.is-active {
  background: rgba(155,143,232,0.22);
  border-color: rgba(155,143,232,0.6);
  color: #c4bbf5;
  font-weight: 700;
  box-shadow: 0 0 0 1px rgba(155,143,232,0.25);
}
.ax-jog-sections {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: center;
}
.ax-jog-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.ax-jog-section .ax-card-label {
  margin-bottom: 0;
  justify-content: center;
}
.ax-cross {
  display: grid;
  grid-template-areas:
    ". yp ."
    "xn ct xp"
    ". yn .";
  grid-template-columns: 48px 48px 48px;
  grid-template-rows: 48px 48px 48px;
  gap: 4px;
}
.ax-cross-btn,
.ax-cross-home {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
  transition: background 0.12s, border-color 0.12s, transform 0.07s;
}
.ax-cross-btn:not(:disabled):active,
.ax-cross-home:not(:disabled):active { transform: scale(0.9); }
.ax-cross-btn:disabled,
.ax-cross-home:disabled { opacity: 0.22; cursor: not-allowed; }
.ax-cross-btn {
  border: 1px solid rgba(155,143,232,0.28);
  background: rgba(100,88,200,0.1);
  color: #b0a8f0;
}
.ax-cross-btn:not(:disabled):hover {
  background: rgba(100,88,200,0.24);
  border-color: rgba(155,143,232,0.6);
  color: #d0ccff;
}
.ax-cross-home {
  border: 1px solid rgba(232,184,75,0.35);
  background: rgba(232,184,75,0.1);
  color: #e8b84b;
}
.ax-cross-home:not(:disabled):hover {
  background: rgba(232,184,75,0.22);
  border-color: rgba(232,184,75,0.6);
}
.ax-cross-foot {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.3px;
}
.ax-z-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}
.ax-z-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 56px;
  height: 60px;
  border-radius: 8px;
  border: 1px solid rgba(86,201,138,0.28);
  background: rgba(50,160,90,0.1);
  color: #56c98a;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  padding: 0;
  transition: background 0.12s, border-color 0.12s, transform 0.07s;
}
.ax-z-btn:not(:disabled):hover {
  background: rgba(50,160,90,0.22);
  border-color: rgba(86,201,138,0.6);
  color: #80e8aa;
}
.ax-z-btn:not(:disabled):active { transform: scale(0.92); }
.ax-z-btn:disabled { opacity: 0.22; cursor: not-allowed; }
.ax-z-home {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(232,184,75,0.35);
  background: rgba(232,184,75,0.1);
  color: #e8b84b;
  cursor: pointer;
  padding: 0;
  transition: background 0.12s, border-color 0.12s;
}
.ax-z-home:not(:disabled):hover {
  background: rgba(232,184,75,0.22);
  border-color: rgba(232,184,75,0.6);
}
.ax-z-home:disabled { opacity: 0.22; cursor: not-allowed; }
.ax-qm-block {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ax-qm-row {
  display: flex;
  align-items: center;
  gap: 2px;
}
.ax-qm-label {
  width: 14px;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
  text-align: center;
  margin-right: 3px;
}
.ax-qm-sep {
  width: 6px;
  flex-shrink: 0;
  position: relative;
  align-self: stretch;
}
.ax-qm-sep::after {
  content: '';
  position: absolute;
  top: 15%;
  bottom: 15%;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  background: var(--border);
}
.ax-qm-btn {
  flex: 1;
  height: 28px;
  border-radius: 5px;
  border: 1px solid transparent;
  font-size: 10px;
  font-family: monospace;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  padding: 0;
  transition: background 0.1s, border-color 0.1s, color 0.1s, transform 0.07s;
  white-space: nowrap;
}
.ax-qm-btn:not(:disabled):active { transform: scale(0.93); }
.ax-qm-btn:disabled { opacity: 0.22; cursor: not-allowed; }
.ax-qm-btn--neg {
  background: rgba(80,70,180,0.1);
  border-color: rgba(100,90,210,0.22);
  color: #9b91dd;
}
.ax-qm-btn--neg:not(:disabled):hover {
  background: rgba(80,70,180,0.24);
  border-color: rgba(130,120,240,0.5);
  color: #c0b8ff;
}
.ax-qm-btn--pos {
  background: rgba(40,140,70,0.1);
  border-color: rgba(60,190,100,0.22);
  color: #56c98a;
}
.ax-qm-btn--pos:not(:disabled):hover {
  background: rgba(40,140,70,0.24);
  border-color: rgba(60,190,100,0.5);
  color: #88eebb;
}
.ax-extra-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ax-extra-label {
  width: 20px;
  text-align: center;
  font-weight: 700;
  font-size: 12px;
  flex-shrink: 0;
  opacity: 0.75;
}
.ax-baby-card { margin-bottom: 0; }
.ax-baby-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ax-baby-display {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  padding: 6px 0;
}
.ax-baby-num {
  font-family: monospace;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}
.ax-baby-unit {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted, #666);
}
.duet-dash-label-xs { font-size: 10px; color: var(--text-muted); margin-bottom: 4px; }
.duet-dash-comp-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.duet-dash-comp-badge {
  display: inline-flex; align-items: center;
  background: var(--duet-comp-bg); color: var(--duet-comp-color);
  font-size: 10px; font-weight: 600; padding: 3px 8px;
  border-radius: 4px; border: 1px solid var(--duet-comp-border);
}
.duet-dash-home-row { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.duet-dash-step-block { margin-bottom: 10px; }
.duet-dash-step-options { display: flex; gap: 4px; flex-wrap: wrap; }
.duet-dash-jog-grid { display: flex; flex-direction: column; gap: 5px; }
.duet-dash-label-xs {
  font-size: 10px;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.duet-dash-comp-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.duet-dash-home-row-legacy {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.duet-dash-label-sm {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 4px;
}
/* =================================================================
   Extruder panel  (ex-* namespace)
   ================================================================= */
/* Panel container — enables container queries for responsive pill layout */
.ex-panel { container-type: inline-size; }
.ex-card {
  background: transparent;
  border: 1px solid var(--border-light);
  border-left: 3px solid var(--card-accent, rgba(155,155,200,0.4));
  border-radius: 0 6px 6px 0;
  padding: 9px 12px 9px 11px;
  margin-bottom: 8px;
}
.ex-card--amount { --card-accent: rgba(232,184,75,0.8);  }
.ex-card--feed   { --card-accent: rgba(100,160,255,0.7); }
.ex-card--tool   { --card-accent: rgba(155,143,232,0.8); }
.ex-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.ex-label::before { display: none; }
/* ---- tool row with temp badge ---- */
.ex-tool-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ex-temp-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  padding: 3px 8px;
  border-radius: 20px;
  background: rgba(155,143,232,0.1);
  border: 1px solid rgba(155,143,232,0.25);
  color: rgba(155,143,232,0.85);
  font-size: 10px;
  font-family: monospace;
  font-weight: 600;
  white-space: nowrap;
}
.ex-temp-current {
  color: var(--text-secondary);
  font-weight: 700;
}
.ex-temp-target {
  opacity: 0.6;
  font-size: 9px;
}
/* ---- pills (amount + feedrate) ---- */
.ex-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  margin-bottom: 8px;
}
.ex-pill {
  flex: 1 1 28px;
  min-width: 28px;
  height: 30px;
  padding: 0 4px;
  border-radius: 6px;
  border: 1px solid var(--border-light);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-size: 11px;
  font-family: monospace;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.07s;
}
.ex-pill:not(:disabled):hover {
  background: rgba(232,184,75,0.12);
  border-color: rgba(232,184,75,0.35);
  color: var(--text-primary);
}
.ex-pill:not(:disabled):active { transform: scale(0.93); }
.ex-pill.is-active {
  background: rgba(232,184,75,0.2);
  border-color: rgba(232,184,75,0.6);
  color: #e8c870;
  font-weight: 700;
  box-shadow: 0 0 0 1px rgba(232,184,75,0.2);
}
/* Feedrate pill variant — blue accent */
.ex-pill--feed:not(:disabled):hover {
  background: rgba(100,160,255,0.12);
  border-color: rgba(100,160,255,0.35);
  color: var(--text-primary);
}
.ex-pill--feed.is-active {
  background: rgba(100,160,255,0.18);
  border-color: rgba(100,160,255,0.6);
  color: #80b8ff;
  font-weight: 700;
  box-shadow: 0 0 0 1px rgba(100,160,255,0.2);
}
/* ---- custom row ---- */
.ex-custom-row {
  display: flex;
  align-items: center;
  gap: 7px;
}
.ex-sublabel {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.ex-unit {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 600;
  flex-shrink: 0;
}
/* ---- inputs ---- */
.ex-input {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-primary);
  padding: 5px 8px;
  font-size: 12px;
  font-family: monospace;
  font-weight: 500;
  width: 72px;
  outline: none;
  transition: border-color 0.12s, background 0.12s;
  -moz-appearance: textfield;
}
.ex-input::-webkit-outer-spin-button,
.ex-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ex-input:focus       { border-color: rgba(232,184,75,0.5); }
.ex-input.is-active   { border-color: rgba(232,184,75,0.55); background: rgba(232,184,75,0.06); }
/* Feedrate custom input — wider + blue accent */
.ex-input--feed {
  flex: 1;
  min-width: 0;
  width: auto;
}
.ex-input--feed:focus     { border-color: rgba(100,160,255,0.5); }
.ex-input--feed.is-active { border-color: rgba(100,160,255,0.55); background: rgba(100,160,255,0.06); }
.ex-input--full {
  width: 100%;
  box-sizing: border-box;
}
/* ---- tool select ---- */
.ex-select {
  flex: 1;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-primary);
  padding: 5px 8px;
  font-size: 12px;
  font-family: inherit;
  outline: none;
  cursor: pointer;
  transition: border-color 0.12s;
}
.ex-select:focus { border-color: rgba(155,143,232,0.5); }
/* ---- live summary ---- */
.ex-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 8px;
  padding: 6px 12px;
  border-radius: 6px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  font-family: monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}
.ex-summary__val {
  display: flex;
  align-items: baseline;
  gap: 2px;
}
.ex-summary__unit {
  font-size: 9px;
  font-weight: 500;
  color: var(--text-muted);
  margin-left: 1px;
}
.ex-summary__sep {
  font-size: 10px;
  color: var(--text-muted);
  font-family: inherit;
  font-weight: 500;
}
/* ---- action buttons ---- */
.ex-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.ex-action-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 46px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, transform 0.08s, opacity 0.12s;
}
.ex-action-btn:not(:disabled):active { transform: scale(0.96); }
.ex-action-btn:disabled {
  opacity: 0.28;
  cursor: not-allowed;
}
.ex-action-btn--extrude {
  background: rgba(86,201,138,0.12);
  border-color: rgba(86,201,138,0.35);
  color: #56c98a;
}
.ex-action-btn--extrude:not(:disabled):hover {
  background: rgba(86,201,138,0.22);
  border-color: rgba(86,201,138,0.6);
  color: #7de8aa;
}
.ex-action-btn--retract {
  background: rgba(220,80,80,0.1);
  border-color: rgba(220,80,80,0.3);
  color: #e06060;
}
.ex-action-btn--retract:not(:disabled):hover {
  background: rgba(220,80,80,0.2);
  border-color: rgba(220,80,80,0.55);
  color: #f08080;
}
/* ---- container-query breakpoints ---- */
@container (max-width: 260px) {
  .ex-pill-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: stretch;
  }

  .ex-pill-row--feed {
    grid-template-columns: repeat(2, 1fr);
  }

  .ex-pill { flex: none; width: 100%; }

  .ex-actions {
    grid-template-columns: 1fr;
  }

  .ex-action-btn { height: 36px; }

  .ex-summary { padding: 5px 10px; font-size: 11px; }
}
.duet-dash-flow-block {
  margin-bottom: 12px;
}
.duet-dash-flow-block-last {
  margin-bottom: 8px;
}
.duet-dash-slider-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.duet-dash-range {
  flex: 1;
}
.duet-dash-slider-unit {
  font-size: 12px;
  color: var(--text-muted);
}
/* fan styles moved to fan-* namespace */
.duet-dash-atx-name {
  font-size: 13px;
  font-weight: 500;
}
.duet-dash-atx-btn {
  min-width: 60px;
}
.duet-dash-sys-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  font-size: 12px;
}
.duet-dash-sys-card {
  border-radius: 6px;
  padding: 8px 12px;
}
.duet-dash-sys-span-full {
  grid-column: 1 / -1;
}
.duet-dash-sys-label {
  font-size: 10px;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.duet-dash-sys-head-row {
  font-size: 10px;
  color: var(--text-muted);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.duet-dash-sys-strong {
  font-weight: 600;
}
.duet-dash-sys-strong-sm {
  font-weight: 600;
  font-size: 11px;
}
.duet-dash-sys-subtext {
  font-size: 10px;
  color: var(--text-muted);
}
.duet-dash-sys-subtext-tight {
  margin-top: 1px;
}
.duet-dash-sys-subtext-top {
  margin-top: 4px;
}
.duet-dash-sys-subtext-top-tight {
  margin-top: 2px;
}
.duet-dash-sys-value-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.duet-dash-sys-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--duet-sys-dot);
  box-shadow: 0 0 6px var(--duet-sys-dot);
}
.duet-dash-sys-mono-lg {
  font-weight: 700;
  font-family: monospace;
  font-size: 16px;
}
.duet-dash-sys-mono {
  font-weight: 600;
  font-family: monospace;
}
.duet-dash-sys-storage-wrap {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.duet-dash-sys-storage-item {
  min-width: 100px;
}
.duet-dash-sys-storage-name {
  font-size: 11px;
  font-weight: 500;
}
.duet-dash-sys-storage-bar {
  height: 4px;
  border-radius: 2px;
  overflow: hidden;
  margin-top: 4px;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-group label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.form-group select,
.form-group input[type="number"],
.form-group input[type="text"] {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s ease;
}
.form-group select:focus,
.form-group input[type="number"]:focus,
.form-group input[type="text"]:focus {
  border-color: var(--accent);
}
.input-with-unit {
  display: flex;
  align-items: center;
  gap: 8px;
}
.input-with-unit input {
  flex: 1;
}
.unit {
  font-size: 12px;
  color: var(--text-muted);
  min-width: 24px;
}
.distance-slider {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  outline: none;
  margin-top: 4px;
}
.distance-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: 2px solid var(--bg-primary);
}
.btn {
  padding: 8px 20px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-primary {
  background: var(--accent);
  color: white;
}
.btn-primary:hover {
  background: var(--accent-hover);
}
.btn-secondary {
  background: var(--bg-hover);
  color: var(--text-secondary);
  border-color: var(--border);
}
.btn-secondary:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}
.btn-danger {
  background: rgba(244, 67, 54, 0.1);
  color: var(--error);
  border-color: rgba(244, 67, 54, 0.3);
}
.btn-danger:hover {
  background: rgba(244, 67, 54, 0.2);
}
.btn-sm {
  padding: 6px 14px;
  font-size: 12px;
}
/* ===== Export Dialog ===== */
.export-dialog {
  min-width: 480px;
  max-width: 560px;
}
.export-body {
  max-height: 60vh;
  overflow-y: auto;
}
.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.advanced-toggle {
  width: 100%;
  text-align: center;
  font-size: 12px;
}
.print-estimate {
  background: var(--accent-light);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 12px 16px;
}
.print-estimate h4 {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.estimate-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  font-size: 12px;
}
.estimate-grid span:nth-child(odd) {
  color: var(--text-muted);
}
.estimate-grid span:nth-child(even) {
  color: var(--text-primary);
}
.printer-upload-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--bg-secondary);
  border-radius: 6px;
  border: 1px solid var(--border);
}
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
}
.checkbox-label.indent {
  margin-left: 24px;
}
.checkbox-label input[type="checkbox"] {
  accent-color: var(--accent);
}
/* ===== Printer Panel ===== */
.printer-panel {
  width: 300px;
  background: var(--bg-panel);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.printer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-light);
}
.printer-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.printer-title h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.printer-title .connected { color: var(--success); }
.printer-title .disconnected { color: var(--text-muted); }
.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.icon-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.icon-btn.danger:hover {
  background: rgba(244, 67, 54, 0.1);
  color: var(--error);
}
.printer-error {
  padding: 8px 16px;
  font-size: 11px;
  color: var(--error);
  background: rgba(244, 67, 54, 0.06);
  border-bottom: 1px solid rgba(244, 67, 54, 0.12);
}
.printer-disconnected {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  gap: 12px;
  color: var(--text-muted);
}
.printer-disconnected p {
  font-size: 13px;
}
.printer-content {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.printer-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-primary);
}
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
}
.status-dot.ready { background: var(--success); }
.status-dot.printing { background: var(--warning); animation: pulse 1.5s infinite; }
.status-dot.idle { background: var(--text-muted); }
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.printer-temps {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.temp-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.temp-icon.nozzle { color: #ff8844; }
.temp-icon.bed { color: #44aaff; }
.temp-info {
  flex: 1;
}
.temp-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.temp-value {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.temp-target {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
  margin-left: 4px;
}
.temp-bar {
  height: 3px;
  background: var(--border-light);
  border-radius: 2px;
  margin-top: 4px;
  overflow: hidden;
}
.temp-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.5s ease;
}
.temp-bar-fill.nozzle { background: #ff8844; }
.temp-bar-fill.bed { background: #44aaff; }
/* Progress */
.printer-progress {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.progress-file {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.progress-bar-container {
  display: flex;
  align-items: center;
  gap: 8px;
}
.progress-bar {
  flex: 1;
  height: 6px;
  background: var(--border-light);
  border-radius: 3px;
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--info));
  border-radius: 3px;
  transition: width 0.5s ease;
}
.progress-percent {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  min-width: 42px;
  text-align: right;
}
.progress-times {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-muted);
}
.progress-times span {
  display: flex;
  align-items: center;
  gap: 4px;
}
.print-controls {
  display: flex;
  gap: 6px;
}
.control-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}
.control-btn:hover {
  background: var(--accent-light);
  border-color: var(--accent);
}
.control-btn.success {
  color: var(--success);
  border-color: rgba(76, 175, 80, 0.3);
}
.control-btn.success:hover {
  background: rgba(76, 175, 80, 0.08);
}
.control-btn.danger {
  color: var(--error);
  border-color: rgba(244, 67, 54, 0.3);
}
.control-btn.danger:hover {
  background: rgba(244, 67, 54, 0.08);
}
/* Jog Controls */
.jog-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.jog-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.jog-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  max-width: 150px;
  margin: 0 auto;
}
.jog-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 10px;
  transition: all 0.15s ease;
}
.jog-btn:hover {
  background: var(--accent-light);
  border-color: var(--accent);
}
.jog-btn.home {
  background: var(--accent-light);
}
.jog-z {
  display: flex;
  gap: 4px;
  justify-content: center;
}
/* Webcam */
.webcam-container {
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.webcam-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
}
.webcam-feed {
  width: 100%;
  display: block;
  background: #000;
}
.printer-files {
  display: flex;
  flex-direction: column;
}
.files-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.files-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 150px;
  overflow-y: auto;
}
.files-empty {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  padding: 12px;
}
.file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  border-radius: 4px;
  transition: background 0.15s ease;
}
.file-item:hover {
  background: var(--bg-hover);
}
.file-name {
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.file-actions {
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.file-item:hover .file-actions {
  opacity: 1;
}
/* Banners */
.banner {
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.banner.success {
  background: rgba(76, 175, 80, 0.06);
  color: var(--success);
  border: 1px solid rgba(76, 175, 80, 0.15);
}
.banner.error {
  background: rgba(244, 67, 54, 0.06);
  color: var(--error);
  border: 1px solid rgba(244, 67, 54, 0.15);
}
.banner.info {
  background: var(--accent-light);
  color: var(--text-muted);
  border: 1px solid var(--border-light);
}
.connection-status-banner {
  margin-bottom: 4px;
}
/* Help section in printer settings */
.help-section {
  margin-top: 4px;
  padding: 12px;
  background: var(--bg-secondary);
  border-radius: 6px;
  border: 1px solid var(--border);
}
.help-section h4 {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--text-muted);
}
.help-section ol {
  margin: 0;
  padding-left: 20px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.8;
}
.help-note {
  margin: 8px 0 0;
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
}
.form-hint {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
}
/* Spinner */
.spin {
  animation: spin 1s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.form-group input[type="password"] {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s ease;
  width: 100%;
}
.form-group input[type="password"]:focus {
  border-color: var(--accent);
}
/* ========================================================================= */
/* DuetJobStatus                                                             */
/* ========================================================================= */
.job-section {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.job-section-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}
.job-detail-grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.printer-context-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--border);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%),
    var(--bg-panel);
  flex-shrink: 0;
}
.printer-context-strip__main {
  display: flex;
  align-items: baseline;
  gap: 9px;
  min-width: 0;
}
.printer-context-strip__label {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}
.printer-context-strip__main strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.printer-context-strip__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--text-secondary);
  font-size: 11px;
}
.printer-context-strip__meta span {
  max-width: 180px;
  overflow: hidden;
  padding: 2px 8px;
  border: 1px solid var(--border-light);
  border-radius: 999px;
  background: var(--bg-elevated);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.printer-context-strip__meta .is-connected {
  border-color: color-mix(in srgb, #22c55e 44%, var(--border-light));
  background: color-mix(in srgb, #22c55e 12%, var(--bg-elevated));
  color: #22c55e;
}
.printer-context-strip__meta .is-offline {
  border-color: color-mix(in srgb, #f43f5e 34%, var(--border-light));
  background: color-mix(in srgb, #f43f5e 10%, var(--bg-elevated));
  color: #f43f5e;
}
@media (max-width: 720px) {
  .printer-context-strip {
    align-items: flex-start;
    flex-direction: column;
  }

  .printer-context-strip__meta {
    flex-wrap: wrap;
  }
}
/* Hide tab label text, keep only icons */
.printer-panel--narrow .tab-label {
  display: none;
}
/* Prevent horizontal overflow in the content area */
.printer-panel--narrow .printer-panel__content,
.printer-panel--narrow > div {
  overflow-x: hidden;
}
/* Reduce horizontal padding in reconnecting/disconnect banners */
.printer-panel--narrow .printer-panel__banner {
  padding-left: 8px;
  padding-right: 8px;
}
/* Reduce padding in the footer bar */
.printer-panel--narrow .printer-panel__footer {
  padding-left: 8px;
  padding-right: 8px;
}
/* ===== DashboardCard (dc-*) ===== */
.duet-dash-controls-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 4px 8px 2px;
}
.duet-dash-card-list {
  --dc-grid-pad-top: 8px;
  --dc-grid-pad-right: 10px;
  --dc-grid-pad-bottom: 18px;
  --dc-grid-pad-left: 10px;
  --dc-grid-gap: 10px;
  --dc-grid-row: 90px;
  position: relative;
  min-height: calc(100vh - 112px);
  overflow: visible;
}
.duet-dash-card-list.is-edit-grid::before {
  content: '';
  position: absolute;
  top: var(--dc-grid-pad-top);
  right: var(--dc-grid-pad-right);
  bottom: var(--dc-grid-pad-bottom);
  left: var(--dc-grid-pad-left);
  pointer-events: none;
  background-image:
    linear-gradient(color-mix(in srgb, var(--accent) 28%, var(--border)) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 28%, var(--border)) 1px, transparent 1px);
  background-size:
    calc((100% - (11 * var(--dc-grid-gap))) / 12 + var(--dc-grid-gap)) calc(var(--dc-grid-row) + var(--dc-grid-gap)),
    calc((100% - (11 * var(--dc-grid-gap))) / 12 + var(--dc-grid-gap)) calc(var(--dc-grid-row) + var(--dc-grid-gap));
  border: 1px dashed color-mix(in srgb, var(--accent) 28%, var(--border));
  border-radius: 8px;
  opacity: 0.55;
  z-index: 0;
}
/* ── Page-width dead zone (edit mode only) ───────────────────────────────── */
.dc-page-dead-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  /* Opaque base covers cards and grid lines; stripes indicate out-of-bounds */
  background:
    repeating-linear-gradient(
      -45deg,
      transparent 0px,
      transparent 6px,
      rgba(0, 0, 0, 0.055) 6px,
      rgba(0, 0, 0, 0.055) 10px
    ),
    var(--bg-panel);
  pointer-events: none;
  z-index: 6;
}
/* ── Page-width drag handle (edit mode only) ─────────────────────────────── */
.dc-page-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 20px;
  transform: translateX(-50%);
  z-index: 10;
  cursor: col-resize;
  touch-action: none;
  display: flex;
  justify-content: center;
  align-items: stretch;
}
.dc-page-handle__line {
  width: 2px;
  background: var(--accent);
  opacity: 0.5;
  transition: opacity 0.12s;
  flex-shrink: 0;
}
.dc-page-handle:hover .dc-page-handle__line,
.dc-page-handle:active .dc-page-handle__line {
  opacity: 1;
}
.dc-page-handle.is-full-width .dc-page-handle__line {
  opacity: 0.2;
  background: var(--border-strong);
}
.dc-page-handle.is-full-width:hover .dc-page-handle__line {
  opacity: 0.6;
  background: var(--accent);
}
.dc-page-handle__nub {
  position: absolute;
  top: 28px;
  left: 10px;
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--accent);
  color: #fff;
  border-radius: 5px;
  padding: 4px 7px 4px 5px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  cursor: col-resize;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
  user-select: none;
  pointer-events: auto;
}
.dc-page-handle--left .dc-page-handle__nub {
  left: auto;
  right: 10px;
}
.dc-page-handle.is-full-width .dc-page-handle__nub {
  background: var(--bg-elevated);
  color: var(--text-muted);
  border: 1px solid var(--border);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14);
}
.dc-page-handle__label {
  font-variant-numeric: tabular-nums;
}
.dc-page-handle__reset {
  display: flex;
  align-items: center;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  padding: 0;
  line-height: 0;
  margin-left: 1px;
  border-radius: 2px;
  transition: color 0.1s;
}
.dc-page-handle__reset:hover {
  color: #fff;
}
.duet-dash-card-list .react-grid-item {
  z-index: 1;
}
.duet-dash-card-list .react-grid-item.react-draggable-dragging,
.duet-dash-card-list .react-grid-item.resizing {
  z-index: 5;
}
.duet-dash-card-list .react-grid-item.react-grid-placeholder {
  background: color-mix(in srgb, var(--accent) 45%, transparent);
  border: 1px dashed var(--accent);
  border-radius: 8px;
  opacity: 0.28;
}
.duet-dash-card-list .react-grid-item > .react-resizable-handle {
  opacity: 0;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  transition: opacity 0.15s, background 0.15s;
}
.duet-dash-card-list .react-grid-item:hover > .react-resizable-handle,
.duet-dash-card-list .react-grid-item.resizing > .react-resizable-handle {
  opacity: 1;
}
.duet-dash-card-list .react-grid-item > .react-resizable-handle::after {
  border-color: var(--accent);
}
/* ── Edit mode: always-visible notch handles ── */
.duet-dash-card-list.is-edit-grid .react-grid-item > .react-resizable-handle {
  background-image: none !important;
  background: var(--accent) !important;
  border: 2px solid rgba(255, 255, 255, 0.92) !important;
  border-radius: 4px !important;
  width: 14px !important;
  height: 14px !important;
  padding: 0 !important;
  opacity: 1 !important;
  box-sizing: border-box !important;
  box-shadow:
    0 0 0 1.5px var(--accent),
    0 2px 7px rgba(0, 0, 0, 0.45);
  transition: box-shadow 0.14s ease, filter 0.14s ease !important;
  z-index: 10;
}
/* Re-center the e (right-edge) and s (bottom-edge) handles for the new 14px size */
.duet-dash-card-list.is-edit-grid .react-grid-item > .react-resizable-handle-e {
  margin-top: -7px !important;
  right: -1px !important;
}
.duet-dash-card-list.is-edit-grid .react-grid-item > .react-resizable-handle-s {
  margin-left: -7px !important;
  bottom: -1px !important;
}
.duet-dash-card-list.is-edit-grid .react-grid-item > .react-resizable-handle-se {
  bottom: -1px !important;
  right: -1px !important;
}
/* Remove the default arrow chevron — solid block is enough */
.duet-dash-card-list.is-edit-grid .react-grid-item > .react-resizable-handle::after {
  display: none !important;
}
/* Hover / active glow */
.duet-dash-card-list.is-edit-grid .react-grid-item:hover > .react-resizable-handle,
.duet-dash-card-list.is-edit-grid .react-grid-item.resizing > .react-resizable-handle {
  box-shadow:
    0 0 0 2.5px var(--accent),
    0 0 14px color-mix(in srgb, var(--accent) 60%, transparent),
    0 4px 12px rgba(0, 0, 0, 0.5) !important;
  filter: brightness(1.15);
}
/* ── wrapper ── */
.dc-wrapper {
  --dc-accent: var(--accent);
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-radius: 9px;
  overflow: visible;
  border: 1px solid color-mix(in srgb, var(--dc-accent) 24%, var(--border));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--dc-accent) 6%, transparent), transparent 42%),
    var(--bg-panel);
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--dc-accent) 20%, rgba(255,255,255,0.08)) inset,
    0 10px 24px rgba(0,0,0,0.13),
    0 2px 6px rgba(0,0,0,0.08);
  transition: opacity 0.15s, outline 0.1s, box-shadow 0.2s, border-color 0.2s, transform 0.2s;
  height: 100%;
}
.dc-wrapper:not(.is-edit):not(.is-dragging) {
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--dc-accent) 18%, rgba(255,255,255,0.08)) inset,
    0 12px 26px rgba(0,0,0,0.14),
    0 3px 8px rgba(0,0,0,0.09);
}
.dc-wrapper:not(.is-edit):not(.is-dragging):hover {
  border-color: color-mix(in srgb, var(--dc-accent) 44%, var(--border-strong));
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--dc-accent) 24%, rgba(255,255,255,0.1)) inset,
    0 16px 30px rgba(0,0,0,0.18),
    0 0 0 1px color-mix(in srgb, var(--dc-accent) 14%, transparent);
  transform: translateY(-1px);
}
.react-grid-item:nth-child(6n + 1) .dc-wrapper { --dc-accent: #ef4444; }
.react-grid-item:nth-child(6n + 2) .dc-wrapper { --dc-accent: #3b82f6; }
.react-grid-item:nth-child(6n + 3) .dc-wrapper { --dc-accent: #14b8a6; }
.react-grid-item:nth-child(6n + 4) .dc-wrapper { --dc-accent: #f59e0b; }
.react-grid-item:nth-child(6n + 5) .dc-wrapper { --dc-accent: #8b5cf6; }
.react-grid-item:nth-child(6n + 6) .dc-wrapper { --dc-accent: #22c55e; }
.dc-wrapper.is-edit {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 70%, transparent) !important;
  border-width: 2px !important;
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--accent) 20%, rgba(255,255,255,0.08)) inset,
    0 10px 24px rgba(0,0,0,0.13),
    0 2px 6px rgba(0,0,0,0.08),
    0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent) !important;
  animation: dc-edit-border-pulse 2.6s ease-in-out infinite;
}
@keyframes dc-edit-border-pulse {
  0%, 100% {
    border-color: color-mix(in srgb, var(--accent) 55%, transparent) !important;
    box-shadow:
      0 1px 0 color-mix(in srgb, var(--accent) 18%, rgba(255,255,255,0.08)) inset,
      0 10px 24px rgba(0,0,0,0.13),
      0 2px 6px rgba(0,0,0,0.08),
      0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent);
  }
  50% {
    border-color: color-mix(in srgb, var(--accent) 88%, transparent) !important;
    box-shadow:
      0 1px 0 color-mix(in srgb, var(--accent) 24%, rgba(255,255,255,0.1)) inset,
      0 10px 24px rgba(0,0,0,0.13),
      0 2px 6px rgba(0,0,0,0.08),
      0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent),
      0 0 18px color-mix(in srgb, var(--accent) 20%, transparent);
  }
}
.dc-wrapper.is-edit .dc-header {
  cursor: grab;
}
.dc-wrapper.is-edit:active .dc-header {
  cursor: grabbing;
}
/* ── header strip ── */
.dc-header {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 7px 9px 7px 7px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--dc-accent) 16%, transparent), transparent 62%),
    linear-gradient(180deg, var(--bg-elevated-hover) 0%, var(--bg-elevated) 100%);
  border-bottom: 1px solid color-mix(in srgb, var(--dc-accent) 22%, var(--border-light));
  border-radius: 9px 9px 0 0;
  user-select: none;
  cursor: default;
}
.dc-header::before {
  content: '';
  width: 4px;
  align-self: stretch;
  border-radius: 999px;
  background: var(--dc-accent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--dc-accent) 55%, transparent);
  flex-shrink: 0;
}
/* ── drag grip ── */
.dc-grip {
  display: flex;
  align-items: center;
  cursor: grab;
  color: var(--text-muted);
  opacity: 0.45;
  padding: 2px;
  border-radius: 3px;
  transition: opacity 0.15s, background 0.15s;
  flex-shrink: 0;
}
.dc-grip:hover {
  opacity: 1;
  background: var(--bg-hover);
}
.dc-grip:active {
  cursor: grabbing;
}
/* ── title ── */
.dc-title {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.55px;
  color: var(--text-primary);
}
.dc-title svg {
  color: var(--dc-accent);
  opacity: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--dc-accent) 32%, transparent));
}
/* ── resize handle ── */
/* ── height resize handle (bottom edge) ── */
/* ── corner handle: bottom-right, resizes both width and height ── */
/* ── body: strip child panel's own box so dc-wrapper is the only border ── */
.dc-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 0 0 9px 9px;
  background: color-mix(in srgb, var(--bg-panel) 88%, var(--dc-accent) 4%);
}
.dc-body > div {
  flex: 1;
  height: 100%;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 10px !important;
}
/* Hide each panel's own redundant section-title row */
.dc-body .duet-dash-section-title-row {
  display: none !important;
}
/* ToolSelectorPanel ts-header contains the title row + deselect btn */
.dc-body .ts-header .duet-dash-section-title-row {
  display: none !important;
}
/* Compact overrides: tighten panel content inside dashboard cards */
/* DashboardCard already shows the panel title in dc-header — suppress the
   redundant ds-panel__head that DashboardPanel renders inside dc-body so
   the title doesn't appear twice. Standalone DashboardPanel usage outside
   a DashboardCard (e.g. duetStatus panels) is unaffected. */
.dc-body .ds-panel__head {
  display: none;
}
/* Strip the inner ds-panel's own card chrome — dc-wrapper is the sole
   border/background surface. Without this, a second border + rounded box
   appears inside the card body. */
.dc-body .ds-panel {
  border: none;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}
.dc-body .ex-card {
  padding: 7px 10px 7px 9px;
  margin-bottom: 5px;
}
.dc-body .ex-label {
  margin-bottom: 4px;
}
.dc-body .ex-pill {
  height: 26px;
}
.dc-body .ex-pill-row {
  margin-bottom: 5px;
}
.dc-body .ex-action-btn {
  height: 38px;
}
.dc-body .ex-summary {
  padding: 4px 10px;
  margin-bottom: 6px;
  font-size: 11px;
}
.dc-body .ex-custom-row {
  gap: 5px;
}
.dc-body .fan-card {
  padding: 7px 10px 7px 9px;
  margin-bottom: 6px;
}
.dc-body .fan-header {
  margin-bottom: 5px;
}
.dc-body .fan-slider-row {
  margin-bottom: 5px;
}
.dc-body .duet-dash-flow-block {
  margin-bottom: 8px;
}
.dc-body .duet-dash-flow-block-last {
  margin-bottom: 4px;
}
/* Compact axis panel inside dashboard cards */
.dc-body .ax-panel {
  container-type: size;
  gap: clamp(4px, 1.2cqh, 10px);
}
.dc-body .ax-pos-row    { gap: clamp(4px, 0.9cqw, 8px); margin-bottom: clamp(5px, 1cqh, 10px); }
.dc-body .ax-pos-card   { padding: clamp(5px, 1.1cqh, 10px) clamp(8px, 1.6cqw, 14px) clamp(4px, 0.9cqh, 8px); }
.dc-body .ax-pos-card-top { margin-bottom: 2px; }
.dc-body .ax-pos-value  { font-size: clamp(14px, 3.2cqh, 22px); }
.dc-body .ax-toolbar    { margin-bottom: 4px; gap: 4px; }
.dc-body .ax-btn        { height: 24px; padding: 0 7px; font-size: 10px; }
.dc-body .ax-card       { padding: clamp(6px, 1.2cqh, 11px) clamp(10px, 1.8cqw, 15px); margin-bottom: clamp(4px, 0.9cqh, 8px); }
.dc-body .ax-card-label { margin-bottom: 4px; font-size: 8px; }
/* Step size buttons - slightly smaller */
.dc-body .ax-step-row { gap: clamp(3px, 0.8cqw, 7px); }
.dc-body .ax-step-btn { height: clamp(24px, 5.6cqh, 34px); min-width: clamp(34px, 7cqw, 54px); max-width: none; font-size: clamp(10px, 2.1cqh, 12px); }
/* Jog cross - tighten cells and hide decorative sub-labels/footer */
.dc-body .ax-card--jog {
  flex: 1 1 132px;
  min-height: 118px;
  display: flex;
  flex-direction: column;
}
.dc-body .ax-card--jog .ax-jog-sections {
  flex: 1;
  min-height: 0;
  align-items: center;
}
.dc-body .ax-jog-sections { gap: clamp(8px, 3cqw, 24px); }
.dc-body .ax-jog-section .ax-card-label { display: none; }
.dc-body .ax-cross {
  --ax-jog-size: clamp(32px, min(12cqw, 13cqh), 66px);
  grid-template-columns: repeat(3, var(--ax-jog-size));
  grid-template-rows: repeat(3, var(--ax-jog-size));
  gap: clamp(2px, 0.8cqh, 7px);
}
.dc-body .ax-cross-foot { display: none; }
/* Z column - match XY cross height */
.dc-body .ax-cross-btn svg,
.dc-body .ax-cross-home svg {
  width: clamp(16px, 3.5cqh, 24px);
  height: clamp(16px, 3.5cqh, 24px);
}
.dc-body .ax-z-col  { gap: clamp(2px, 0.8cqh, 6px); }
.dc-body .ax-z-btn  { width: clamp(40px, 10cqw, 62px); height: clamp(36px, 12cqh, 66px); font-size: clamp(9px, 2cqh, 12px); gap: 1px; }
.dc-body .ax-z-home { width: clamp(40px, 10cqw, 62px); height: clamp(22px, 5.8cqh, 34px); }
/* Quick-move rows - tighter and shorter */
.dc-body .ax-qm-block { gap: 3px; }
.dc-body .ax-qm-row   { gap: clamp(2px, 0.6cqw, 5px); }
.dc-body .ax-qm-btn   { height: clamp(22px, 4.7cqh, 31px); font-size: clamp(9px, 1.8cqh, 11px); }
/* Baby step - compact display */
.dc-body .ax-baby-display { padding: clamp(4px, 1cqh, 8px) 0; }
.dc-body .ax-baby-num     { font-size: clamp(13px, 2.8cqh, 18px); }
/* Reset Layout button */
.dc-reset-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.dc-reset-btn:hover,
.dc-reset-btn.is-active {
  background: var(--bg-elevated-hover);
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.dc-dashboard-tabs {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  max-width: min(62vw, 860px);
  overflow-x: auto;
  padding: 2px 0;
}
.dc-dashboard-tab {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 220px;
  height: 27px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-elevated);
  color: var(--text-muted);
  overflow: hidden;
  flex: 0 0 auto;
}
.dc-dashboard-tab.is-active {
  border-color: color-mix(in srgb, var(--accent) 70%, var(--border));
  background: color-mix(in srgb, var(--accent) 14%, var(--bg-elevated));
  color: var(--text-primary);
}
.dc-dashboard-tab__select,
.dc-dashboard-add,
.dc-dashboard-tab__icon {
  height: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.dc-dashboard-tab__select {
  min-width: 0;
  max-width: 150px;
  padding: 0 9px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}
.dc-dashboard-tab__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  padding: 0;
  color: var(--text-muted);
  border-left: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
}
.dc-dashboard-tab__icon:hover,
.dc-dashboard-tab__select:hover,
.dc-dashboard-add:hover {
  background: var(--bg-elevated-hover);
  color: var(--text-primary);
}
.dc-dashboard-tab__input {
  width: 132px;
  height: 100%;
  min-width: 0;
  padding: 0 8px;
  border: 0;
  outline: 0;
  background: var(--bg-panel);
  color: var(--text-primary);
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
}
.dc-dashboard-add {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 27px;
  padding: 0 9px;
  border: 1px dashed var(--border-strong);
  border-radius: 6px;
  background: color-mix(in srgb, var(--bg-elevated) 80%, transparent);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.45px;
  flex: 0 0 auto;
}
.dc-edit-btn.is-active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.dc-edit-btn.is-active:hover {
  opacity: 0.9;
}
.dc-layout-clear {
  height: 24px;
  padding: 0 9px;
  border: 1px solid color-mix(in srgb, var(--danger, #dc5050) 45%, var(--border));
  border-radius: 5px;
  background: color-mix(in srgb, var(--danger, #dc5050) 10%, var(--bg-elevated));
  color: color-mix(in srgb, var(--danger, #dc5050) 88%, var(--text-primary));
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.45px;
  cursor: pointer;
}
.dc-layout-clear:hover:not(:disabled) {
  background: color-mix(in srgb, var(--danger, #dc5050) 18%, var(--bg-elevated-hover));
  border-color: color-mix(in srgb, var(--danger, #dc5050) 68%, var(--border-strong));
}
.dc-layout-clear:disabled {
  opacity: 0.38;
  cursor: default;
}
.dc-layout-done {
  height: 24px;
  padding: 0 9px;
  border: 1px solid var(--accent);
  border-radius: 5px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.45px;
  cursor: pointer;
}
.dc-layout-done:hover {
  opacity: 0.9;
}
.dc-layout-section {
  min-height: 44px;
  border: 1px solid var(--border-light);
  border-radius: 7px;
  background: color-mix(in srgb, var(--bg-elevated) 82%, transparent);
  overflow: hidden;
}
/* Controls bar layout */
.duet-dash-controls-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  padding: 4px 8px 2px;
}
.dc-controls-left {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1 1 auto;
}
.dc-controls-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.dc-hidden-badge {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 1px 8px;
}
.dc-edit-badge {
  font-size: 10px;
  font-weight: 500;
  color: var(--accent);
  opacity: 0.8;
}
/* Edit mode grid overlay */
.dc-wrapper.is-edit {
  z-index: 3;
}
.dc-wrapper.is-edit .dc-body {
  pointer-events: none;
}
/* View settings dropdown */
.dc-view-wrap {
  position: relative;
}
.vs-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 200;
  width: 220px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}
.vs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px 6px;
  border-bottom: 1px solid var(--border-light);
}
.vs-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
}
.vs-count {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.vs-list {
  display: flex;
  flex-direction: column;
  max-height: 320px;
  overflow-y: auto;
  padding: 4px;
}
.vs-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 5px;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background 0.12s, color 0.12s;
}
.vs-row:hover {
  background: var(--bg-hover);
}
.vs-row--hidden {
  color: var(--text-muted);
}
.vs-row-icon {
  display: flex;
  align-items: center;
  color: var(--text-muted);
  flex-shrink: 0;
}
.vs-row-label {
  flex: 1;
}
.vs-row-eye {
  display: flex;
  align-items: center;
  color: var(--text-muted);
  flex-shrink: 0;
  opacity: 0.6;
}
.vs-row:hover .vs-row-eye {
  opacity: 1;
}
.vs-row--hidden .vs-row-eye {
  color: var(--text-muted);
  opacity: 0.4;
}
/* Column shift buttons (edit mode, panel header) */
/* Empty drop zone (shown while dragging in edit mode) */
/* Per-column drop cells (own trailing gap subdivided by column) */
.dc-body .ax-motion-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(68px, clamp(76px, 18cqw, 116px));
  gap: clamp(6px, 1.4cqw, 12px);
  align-items: stretch;
}
.dc-body .ax-step-rail {
  min-width: 0;
  margin-bottom: clamp(4px, 0.9cqh, 8px);
}
.dc-body .ax-step-rail .ax-card-label {
  justify-content: center;
  text-align: center;
}
.dc-body .ax-step-rail .ax-step-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(3px, 0.8cqh, 6px);
}
.dc-body .ax-step-rail .ax-step-btn {
  width: 100%;
  height: clamp(22px, 4.7cqh, 31px);
  min-width: 0;
  max-width: none;
  font-size: clamp(9px, 1.8cqh, 11px);
}
.dc-body .ax-card--jog {
  min-width: 0;
}
.dc-body .ax-jog-sections {
  justify-content: center;
  min-width: 0;
}
.dc-body .ax-jog-section {
  min-width: 0;
}
.dc-body .ax-qm-row {
  display: grid;
  grid-template-columns: 16px repeat(4, minmax(30px, 1fr)) 5px repeat(4, minmax(30px, 1fr));
  gap: clamp(2px, 0.6cqw, 5px);
}
.dc-body .ax-qm-btn {
  min-width: 0;
  padding: 0 2px;
}
@container (max-width: 430px) {
  .dc-body .ax-motion-workspace {
    grid-template-columns: 1fr;
  }

  .dc-body .ax-step-rail .ax-step-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dc-body .ax-qm-row {
    grid-template-columns: 16px repeat(2, minmax(34px, 1fr)) 5px repeat(2, minmax(34px, 1fr));
  }

  .dc-body .ax-qm-row .ax-qm-btn:nth-of-type(3),
  .dc-body .ax-qm-row .ax-qm-btn:nth-of-type(4),
  .dc-body .ax-qm-row .ax-qm-btn:nth-of-type(7),
  .dc-body .ax-qm-row .ax-qm-btn:nth-of-type(8) {
    display: none;
  }
}
/* -- Edit-mode ribbon: matches the tools ribbon button style -- */
.dc-layout-ribbon {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 4px 8px;
  min-height: 76px;
  background: var(--bg-toolbar, var(--bg-panel));
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  flex-shrink: 0;
}
.dc-layout-ribbon::-webkit-scrollbar {
  display: none;
}
/* Section group — mirrors .ribbon-section */
.dc-layout-ribbon__section {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border-light);
  padding: 0 8px;
  flex-shrink: 0;
}
.dc-layout-ribbon__section:last-of-type {
  border-right: none;
}
/* Row of chips inside a section — mirrors .ribbon-section-content */
.dc-layout-chip-list {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  padding-bottom: 2px;
}
/* Section label at the bottom — mirrors .ribbon-section-label */
.dc-layout-ribbon__section-label {
  font-size: 9px;
  color: var(--text-muted);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 600;
  padding: 2px 0;
  border-top: 1px solid var(--border-light);
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: default;
}
/* Leading "Cards X/Y" meta section */
.dc-layout-ribbon__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0 10px;
  gap: 2px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  white-space: nowrap;
  border-right: 1px solid var(--border-light);
  margin-right: 4px;
}
.dc-layout-ribbon__count {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text-secondary);
}
/* Individual chip — mirrors .ribbon-button */
.dc-layout-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 3px 7px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
  min-width: 44px;
  height: 52px;
  position: relative;
  transition: all 0.12s ease;
}
.dc-layout-chip:hover {
  background: var(--bg-hover);
  border-color: var(--border-light);
  color: var(--text-primary);
}
/* Active (visible on dashboard) — green pulse like ribbon-button.active */
.dc-layout-chip:not(.is-hidden) {
  background: color-mix(in srgb, #22c55e 10%, var(--bg-elevated));
  border-color: color-mix(in srgb, #22c55e 45%, var(--border));
  color: #22c55e;
  animation: dc-chip-active-pulse 1.6s ease-in-out infinite;
}
.dc-layout-chip:not(.is-hidden):hover {
  background: color-mix(in srgb, #22c55e 18%, var(--bg-elevated));
  border-color: #22c55e;
  animation: none;
}
@keyframes dc-chip-active-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.30);
    transform: translateY(0);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.08);
    transform: translateY(-1px);
  }
}
/* Hidden panel chip — dimmed */
.dc-layout-chip.is-hidden {
  opacity: 0.55;
}
.dc-layout-chip.is-hidden:hover {
  opacity: 1;
}
.dc-layout-chip.is-dragging {
  opacity: 0.3;
  animation: none;
}
/* Icon area — mirrors .ribbon-button-icon */
.dc-layout-chip__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  color: inherit;
  flex-shrink: 0;
}
/* Label below icon */
.dc-layout-chip__label {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  max-width: 64px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1;
  color: inherit;
}
/* Small +/- badge in top-right corner */
.dc-layout-chip__badge {
  position: absolute;
  top: 3px;
  right: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  color: var(--text-muted);
  opacity: 0;
  transition: opacity 0.12s;
}
.dc-layout-chip:hover .dc-layout-chip__badge {
  opacity: 1;
}
.dc-layout-chip:not(.is-hidden) .dc-layout-chip__badge {
  border-color: color-mix(in srgb, #22c55e 40%, var(--border));
  color: #22c55e;
}
/* Divider between sections */
.dc-layout-ribbon__divider {
  width: 1px;
  align-self: stretch;
  margin: 4px 4px;
  background: var(--border-light);
  flex-shrink: 0;
}
/* Empty-drop-zone hint */
.dc-layout-ribbon__empty {
  font-size: 10px;
  color: var(--text-muted);
  padding: 0 6px;
  white-space: nowrap;
  font-style: italic;
  align-self: center;
}
/* Actions pushed to far right */
.dc-layout-ribbon__actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding-left: 10px;
  flex-shrink: 0;
  align-self: center;
}
.printer-mobile-tabs {
  display: none;
}
html[data-device-mode="mobile"] .printer-mobile-tabs,
html[data-device-mode="tablet"] .printer-mobile-tabs {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 900;
  display: flex;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg-panel) 94%, transparent);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
  overflow-x: auto;
}
.printer-mobile-tabs__item {
  min-width: 76px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 8px;
  font-size: 10px;
  white-space: nowrap;
  cursor: pointer;
}
.printer-mobile-tabs__item.is-active {
  color: var(--accent);
  background: var(--accent-light);
  border-color: var(--accent);
}
html[data-device-mode="mobile"] .printer-panel--narrow,
html[data-device-mode="tablet"] .printer-panel--narrow {
  padding-bottom: 78px;
}
.printer-reset-halt {
  animation: printer-reset-pulse 1.1s ease-in-out infinite;
}
/* ── Footer quick-action buttons ─────────────────────────────────────────── */
.printer-footer-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 9px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--bg-panel);
  color: var(--text-secondary);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.13s, border-color 0.13s, color 0.13s, transform 0.1s;
}
.printer-footer-btn:hover:not(:disabled) {
  background: var(--bg-hover);
  border-color: color-mix(in srgb, var(--accent, #3b82f6) 55%, var(--border));
  color: var(--text-primary);
  transform: translateY(-1px);
}
.printer-footer-btn:active:not(:disabled) { transform: translateY(0); }
.printer-footer-btn:disabled { opacity: 0.35; cursor: not-allowed; }
/* Pause button — amber when active */
.printer-footer-btn--pause {
  border-color: color-mix(in srgb, #f59e0b 35%, var(--border));
  color: #f59e0b;
}
.printer-footer-btn--pause.is-active {
  background: color-mix(in srgb, #22c55e 10%, var(--bg-panel));
  border-color: color-mix(in srgb, #22c55e 45%, var(--border));
  color: #22c55e;
}
.printer-footer-btn--pause:hover:not(:disabled) {
  border-color: #f59e0b;
  color: #fbbf24;
}
.printer-footer-btn--pause.is-active:hover:not(:disabled) {
  border-color: #22c55e;
  color: #4ade80;
}
/* Cancel button — red */
.printer-footer-btn--cancel {
  border-color: color-mix(in srgb, var(--error, #ef4444) 35%, var(--border));
  color: var(--error, #ef4444);
}
.printer-footer-btn--cancel:hover:not(:disabled) {
  background: color-mix(in srgb, var(--error, #ef4444) 10%, var(--bg-panel));
  border-color: var(--error, #ef4444);
  color: var(--error, #ef4444);
}
@keyframes printer-reset-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--error) 60%, transparent);
    border-color: var(--error);
    opacity: 1;
  }
  50% {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--error) 0%, transparent);
    border-color: color-mix(in srgb, var(--error) 50%, transparent);
    opacity: 0.7;
  }
}


.printer-alerts {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px 2px;
  pointer-events: auto;
}

.printer-alert {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.45;
  border: 1px solid transparent;
  animation: printer-alert-slide-in 0.18s ease-out;
}

@keyframes printer-alert-slide-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.printer-alert--error {
  background: rgba(220, 53, 53, 0.12);
  border-color: rgba(220, 53, 53, 0.45);
  color: #f88;
}

.printer-alert--warning {
  background: rgba(220, 160, 30, 0.12);
  border-color: rgba(220, 160, 30, 0.45);
  color: #fcc;
}

.printer-alert__icon {
  font-size: 15px;
  flex-shrink: 0;
  margin-top: 1px;
}

.printer-alert__message {
  flex: 1;
  word-break: break-word;
}

.printer-alert__dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
  font-size: 13px;
  padding: 0 2px;
  line-height: 1;
  margin-top: 1px;
  transition: opacity 0.15s;
}

.printer-alert__dismiss:hover {
  opacity: 1;
}
.live-failure-monitor {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 11px;
}

.lfm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.lfm-title {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.lfm-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px;
  border: 1px solid var(--border-light);
  border-radius: 999px;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.lfm-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
  flex-shrink: 0;
}

.lfm-pill.is-active .lfm-dot {
  background: var(--success, #4caf50);
  box-shadow: 0 0 4px var(--success, #4caf50);
}

.lfm-pill.is-running .lfm-dot {
  background: var(--accent, #4fc3f7);
  animation: lfm-pulse 1s ease-in-out infinite;
}

.lfm-pill.is-idle .lfm-dot {
  background: var(--text-muted);
}

.lfm-pill.is-disabled {
  opacity: 0.7;
}

.lfm-pill.is-error .lfm-dot {
  background: var(--danger, #ef5350);
}

@keyframes lfm-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.lfm-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 12px;
}

.lfm-summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
}

.lfm-summary-label {
  color: var(--text-muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.lfm-summary-value {
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 700;
}

.lfm-cat--spaghetti,
.lfm-cat--layer-shift,
.lfm-cat--blob-of-doom,
.lfm-cat--first-layer-adhesion,
.lfm-cat--knocked-loose-part {
  color: var(--danger, #ef5350);
}

.lfm-cat--unknown {
  color: var(--text-secondary);
}

.lfm-sev--critical {
  color: var(--danger, #ef5350);
}

.lfm-sev--warning {
  color: var(--warning, #ffa726);
}

.lfm-sev--watch {
  color: var(--accent, #4fc3f7);
}

.lfm-sev--none {
  color: var(--success, #4caf50);
}

.lfm-empty {
  margin: 0;
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.5;
}

.lfm-error {
  margin: 0;
  padding: 5px 7px;
  border: 1px solid rgba(239, 83, 80, 0.3);
  border-radius: 4px;
  background: rgba(239, 83, 80, 0.08);
  color: var(--danger, #ef5350);
  font-size: 10px;
}

.lfm-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 7px;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
}

.lfm-toggle:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.lfm-toggle input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
}

.lfm-toggle-icon {
  display: inline-flex;
  align-items: center;
  color: var(--text-muted);
}

.lfm-toggle-hint {
  margin-left: auto;
  color: var(--text-muted);
  opacity: 0.7;
}
.duet-analytics {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px 18px;
  overflow-y: auto;
  font-family: 'Inter', 'Segoe UI', sans-serif;
  color: var(--text, #e6e6f0);
}

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

.duet-analytics__toolbar-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
}

.duet-analytics__toolbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.duet-analytics__export {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #1a1a28;
  color: #e6e6f0;
  border: 1px solid #2b2b40;
  border-radius: 4px;
  padding: 4px 7px;
  font-size: 11px;
  cursor: pointer;
}

.duet-analytics__export:disabled {
  color: var(--textDim, #8a8aa3);
  cursor: not-allowed;
  opacity: 0.55;
}

.duet-analytics__window {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--textDim, #8a8aa3);
}

.duet-analytics__window select {
  background: #1a1a28;
  color: #e6e6f0;
  border: 1px solid #2b2b40;
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 11px;
  cursor: pointer;
  outline: none;
}

.duet-analytics__hint,
.duet-analytics__empty {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  padding: 30px 16px;
  font-size: 12px;
  color: var(--textDim, #8a8aa3);
  background: #1a1a28;
  border: 1px dashed #2b2b40;
  border-radius: 8px;
  text-align: center;
  max-width: 420px;
}

.duet-analytics__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
}

.duet-analytics__card {
  display: flex;
  gap: 9px;
  padding: 10px 11px;
  background: #1a1a28;
  border: 1px solid #2b2b40;
  border-radius: 8px;
  align-items: flex-start;
}

.duet-analytics__card-icon {
  color: var(--accent, #4a9eff);
  margin-top: 2px;
}

.duet-analytics__card-value {
  font-size: 18px;
  font-weight: 700;
  color: #e6e6f0;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.duet-analytics__card-label {
  font-size: 11px;
  color: var(--textDim, #8a8aa3);
  margin-top: 2px;
}

.duet-analytics__card-hint { font-style: italic; }

.duet-analytics__section-title {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--textDim, #8a8aa3);
  margin-top: 6px;
}

.duet-analytics__sparkline {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 64px;
  padding: 6px 8px;
  background: #1a1a28;
  border: 1px solid #2b2b40;
  border-radius: 8px;
}

.duet-analytics__spark-col {
  flex: 1 1 auto;
  min-width: 4px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 100%;
}

.duet-analytics__spark-bar {
  width: 100%;
  min-height: 2px;
  background: linear-gradient(0deg, var(--accent, #4a9eff),
    color-mix(in srgb, var(--accent, #4a9eff) 70%, white));
  border-radius: 2px 2px 0 0;
  transition: height 0.25s ease;
}

.duet-analytics__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  background: #1a1a28;
  border: 1px solid #2b2b40;
  border-radius: 6px;
  overflow: hidden;
}

.duet-analytics__table--compact {
  margin-top: -4px;
}

.duet-analytics__caption {
  caption-side: top;
  text-align: left;
  padding: 0 0 4px;
  color: var(--textDim, #8a8aa3);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.duet-analytics__table th,
.duet-analytics__table td {
  padding: 6px 10px;
  text-align: left;
  border-bottom: 1px solid #2b2b40;
}

.duet-analytics__table th {
  background: #22223a;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--textDim, #8a8aa3);
}

.duet-analytics__table tr:last-child td { border-bottom: none; }

.duet-analytics__file-cell {
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  font-family: 'Consolas', 'JetBrains Mono', monospace;
  font-size: 11px;
}

.duet-analytics__empty-row {
  text-align: center;
  color: var(--textDim, #8a8aa3);
  padding: 14px 0;
}

.duet-analytics__status {
  display: inline-block;
  padding: 1px 8px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 999px;
}

.duet-analytics__status--completed {
  background: color-mix(in srgb, #4caf50 30%, transparent);
  color: #9ef0a1;
}

.duet-analytics__status--cancelled {
  background: color-mix(in srgb, #d94545 30%, transparent);
  color: #ffb0b0;
}

.duet-analytics__status--in-progress {
  background: color-mix(in srgb, #ffa94d 30%, transparent);
  color: #ffcc88;
}

.duet-analytics__cost {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: #1a1a28;
  border: 1px solid #2b2b40;
  border-radius: 8px;
  font-size: 11px;
  color: var(--textDim, #8a8aa3);
}

.duet-analytics__cost label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.duet-analytics__cost input {
  width: 64px;
  background: #1a1a28;
  color: #e6e6f0;
  border: 1px solid #2b2b40;
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  outline: none;
  transition: border-color 0.15s ease;
}

.duet-analytics__cost input:focus { border-color: var(--accent, #4a9eff); }

.duet-analytics__cost-value {
  color: #e6e6f0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.duet-analytics__receipt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: #171f2a;
  border: 1px solid #2c435a;
  border-radius: 8px;
}

.duet-analytics__receipt-title {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #9fd0ff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.duet-analytics__receipt-file {
  margin-top: 4px;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #e6e6f0;
  font-family: 'Consolas', 'JetBrains Mono', monospace;
  font-size: 11px;
}

.duet-analytics__receipt-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(62px, auto));
  gap: 8px;
  align-items: center;
  text-align: right;
  color: var(--textDim, #a3a3b8);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.duet-analytics__receipt-grid strong {
  color: #e6e6f0;
  font-size: 13px;
}

.duet-analytics__tou {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.duet-analytics__tou-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}

.duet-analytics__tou-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  background: #1a1a28;
  border: 1px solid #2b2b40;
  border-radius: 8px;
}

.duet-analytics__tou-heading {
  font-size: 12px;
  font-weight: 700;
  color: #e6e6f0;
}

.duet-analytics__tou-form,
.duet-analytics__planner,
.duet-analytics__utility-config {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.duet-analytics__tou-form input,
.duet-analytics__tou-form select,
.duet-analytics__planner input,
.duet-analytics__utility-config input,
.duet-analytics__utility-config select {
  min-width: 0;
  background: #11111d;
  color: #e6e6f0;
  border: 1px solid #2b2b40;
  border-radius: 4px;
  padding: 4px 6px;
  font-size: 11px;
}

.duet-analytics__tou-form input[type="number"] {
  width: 72px;
}

.duet-analytics__day-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.duet-analytics__day-chips button,
.duet-analytics__tou-add,
.duet-analytics__schedule-btn,
.duet-analytics__tou-row button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: #22223a;
  color: #e6e6f0;
  border: 1px solid #33334d;
  border-radius: 4px;
  padding: 4px 7px;
  font-size: 11px;
  cursor: pointer;
}

.duet-analytics__day-chips button.active,
.duet-analytics__tou-add,
.duet-analytics__schedule-btn {
  border-color: var(--accent, #4a9eff);
  color: #b9dcff;
}

.duet-analytics__schedule-btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.duet-analytics__tou-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.duet-analytics__tou-row {
  display: grid;
  grid-template-columns: minmax(64px, 1fr) 64px 72px minmax(92px, auto) 28px;
  align-items: center;
  gap: 6px;
  padding: 6px 7px;
  border: 1px solid #2b2b40;
  border-radius: 6px;
  color: var(--textDim, #a3a3b8);
  font-size: 11px;
}

.duet-analytics__tou-row span:first-child {
  color: #e6e6f0;
  font-weight: 600;
}

.duet-analytics__tou-row--off-peak {
  background: color-mix(in srgb, #2b8a3e 16%, #1a1a28);
}

.duet-analytics__tou-row--peak {
  background: color-mix(in srgb, #d94545 16%, #1a1a28);
}

.duet-analytics__planner label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--textDim, #a3a3b8);
  font-size: 11px;
}

.duet-analytics__planner label input {
  width: 66px;
}

.duet-analytics__planner-result {
  display: grid;
  gap: 3px;
  padding: 8px;
  background: #11111d;
  border: 1px solid #2b2b40;
  border-radius: 6px;
  font-size: 11px;
  color: var(--textDim, #a3a3b8);
}

.duet-analytics__planner-result strong {
  color: #e6e6f0;
}

.duet-analytics__utility-config {
  padding-top: 6px;
  border-top: 1px solid #2b2b40;
}

.duet-analytics__utility-config label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--textDim, #a3a3b8);
  font-size: 11px;
}

.duet-analytics__solar-gate {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px;
  border-radius: 6px;
  border: 1px solid #2b2b40;
}

.duet-analytics__solar-gate.allowed {
  background: color-mix(in srgb, #2b8a3e 18%, #11111d);
  color: #9ef0a1;
}

.duet-analytics__solar-gate.blocked {
  background: color-mix(in srgb, #d9a445 18%, #11111d);
  color: #ffd991;
}

.duet-analytics__solar-gate div {
  display: grid;
  gap: 2px;
}

.duet-analytics__solar-gate strong {
  color: #e6e6f0;
  font-size: 12px;
}

.duet-analytics__solar-gate span {
  font-size: 11px;
  color: var(--textDim, #a3a3b8);
}

.duet-analytics__insights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
}

.duet-analytics__insight {
  padding: 10px 11px;
  background: #211d28;
  border: 1px solid #3c3146;
  border-radius: 8px;
}

.duet-analytics__insight-title {
  color: #f7d38b;
  font-size: 12px;
  font-weight: 700;
}

.duet-analytics__insight-detail {
  margin-top: 4px;
  color: var(--textDim, #a3a3b8);
  font-size: 11px;
  line-height: 1.35;
}

/* Theme refresh */

.duet-analytics {
  --da-bg: var(--bg-primary, #0f1117);
  --da-panel: var(--bg-panel, #151922);
  --da-elevated: var(--bg-elevated, #1b2130);
  --da-hover: var(--bg-hover, #232b3a);
  --da-border: var(--border, #2a3242);
  --da-border-soft: var(--border-light, #232b34);
  --da-text: var(--text-primary, var(--text, #e6e6f0));
  --da-muted: var(--text-secondary, var(--textDim, #9aa3b5));
  --da-subtle: var(--text-muted, #7f8797);
  --da-accent: var(--accent, #4a9eff);
  --da-success: #22c55e;
  --da-warn: #f59e0b;
  --da-danger: #ef4444;
  --da-purple: #a855f7;

  gap: 14px;
  padding: 16px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--da-accent) 4%, transparent), transparent 220px),
    var(--da-bg);
  color: var(--da-text);
  scrollbar-width: thin;
  scrollbar-color: var(--da-border) transparent;
}

.duet-analytics__toolbar {
  position: sticky;
  top: 0;
  z-index: 4;
  gap: 12px;
  padding: 11px 12px;
  border: 1px solid var(--da-border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--da-panel) 92%, transparent);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.duet-analytics__toolbar-title {
  color: var(--da-text);
  font-size: 14px;
  font-weight: 800;
}

.duet-analytics__toolbar-title svg {
  color: var(--da-purple);
}

.duet-analytics__toolbar-actions {
  gap: 7px;
}

.duet-analytics__export,
.duet-analytics__window select,
.duet-analytics__day-chips button,
.duet-analytics__tou-add,
.duet-analytics__schedule-btn,
.duet-analytics__tou-row button {
  min-height: 28px;
  border-color: var(--da-border);
  border-radius: 7px;
  background: var(--da-elevated);
  color: var(--da-text);
  transition: background 0.14s, border-color 0.14s, color 0.14s, transform 0.1s;
}

.duet-analytics__export:hover:not(:disabled),
.duet-analytics__day-chips button:hover,
.duet-analytics__tou-add:hover,
.duet-analytics__schedule-btn:hover:not(:disabled),
.duet-analytics__tou-row button:hover {
  background: var(--da-hover);
  border-color: color-mix(in srgb, var(--da-accent) 50%, var(--da-border));
  transform: translateY(-1px);
}

.duet-analytics__window {
  color: var(--da-muted);
}

.duet-analytics__hint,
.duet-analytics__empty {
  width: 100%;
  max-width: none;
  min-height: 140px;
  background: color-mix(in srgb, var(--da-panel) 82%, transparent);
  border-color: color-mix(in srgb, var(--da-accent) 30%, var(--da-border));
  color: var(--da-muted);
}

.duet-analytics__cards {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.duet-analytics__card,
.duet-analytics__sparkline,
.duet-analytics__table,
.duet-analytics__cost,
.duet-analytics__tou-panel,
.duet-analytics__insight,
.duet-analytics__receipt {
  border-color: var(--da-border);
  background: var(--da-panel);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03);
}

.duet-analytics__card {
  position: relative;
  min-height: 78px;
  padding: 12px;
  overflow: hidden;
}

.duet-analytics__card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: color-mix(in srgb, currentColor 60%, transparent);
  opacity: 0.35;
}

.duet-analytics__card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: color-mix(in srgb, currentColor 12%, transparent);
  flex-shrink: 0;
}

.duet-analytics__card-value {
  color: var(--da-text);
  font-size: 20px;
}

.duet-analytics__card-label,
.duet-analytics__empty-row,
.duet-analytics__caption,
.duet-analytics__receipt-grid,
.duet-analytics__cost,
.duet-analytics__planner label,
.duet-analytics__utility-config label,
.duet-analytics__solar-gate span,
.duet-analytics__insight-detail {
  color: var(--da-muted);
}

.duet-analytics__section-title {
  width: 100%;
  margin: 8px 0 -2px;
  padding: 8px 0 0;
  border-top: 1px solid var(--da-border-soft);
  color: var(--da-muted);
}

.duet-analytics__sparkline {
  height: 76px;
  padding: 10px 12px 8px;
}

.duet-analytics__spark-bar {
  background: linear-gradient(
    0deg,
    color-mix(in srgb, var(--da-accent) 88%, #111827),
    color-mix(in srgb, var(--da-success) 68%, var(--da-accent))
  );
}

.duet-analytics__table {
  border-spacing: 0;
  border-collapse: separate;
  border-radius: 8px;
}

.duet-analytics__table th {
  background: var(--da-elevated);
  color: var(--da-muted);
}

.duet-analytics__table th,
.duet-analytics__table td {
  border-bottom-color: var(--da-border-soft);
}

.duet-analytics__table tbody tr {
  transition: background 0.12s;
}

.duet-analytics__table tbody tr:hover {
  background: color-mix(in srgb, var(--da-accent) 6%, transparent);
}

.duet-analytics__file-cell {
  color: color-mix(in srgb, var(--da-text) 88%, var(--da-accent));
}

.duet-analytics__status {
  border: 1px solid transparent;
}

.duet-analytics__status--completed {
  background: color-mix(in srgb, var(--da-success) 16%, transparent);
  border-color: color-mix(in srgb, var(--da-success) 38%, transparent);
  color: #86efac;
}

.duet-analytics__status--cancelled {
  background: color-mix(in srgb, var(--da-danger) 14%, transparent);
  border-color: color-mix(in srgb, var(--da-danger) 34%, transparent);
  color: #fca5a5;
}

.duet-analytics__status--in-progress {
  background: color-mix(in srgb, var(--da-warn) 15%, transparent);
  border-color: color-mix(in srgb, var(--da-warn) 36%, transparent);
  color: #fcd34d;
}

.duet-analytics__cost {
  align-items: stretch;
  padding: 12px;
}

.duet-analytics__cost label,
.duet-analytics__planner label,
.duet-analytics__utility-config label {
  min-height: 30px;
}

.duet-analytics__cost input,
.duet-analytics__tou-form input,
.duet-analytics__tou-form select,
.duet-analytics__planner input,
.duet-analytics__utility-config input,
.duet-analytics__utility-config select {
  border-color: var(--da-border);
  border-radius: 7px;
  background: var(--da-elevated);
  color: var(--da-text);
}

.duet-analytics__cost input:focus,
.duet-analytics__tou-form input:focus,
.duet-analytics__tou-form select:focus,
.duet-analytics__planner input:focus,
.duet-analytics__utility-config input:focus,
.duet-analytics__utility-config select:focus {
  outline: none;
  border-color: var(--da-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--da-accent) 18%, transparent);
}

.duet-analytics__cost-value,
.duet-analytics__tou-heading,
.duet-analytics__receipt-grid strong,
.duet-analytics__receipt-file,
.duet-analytics__planner-result strong,
.duet-analytics__solar-gate strong,
.duet-analytics__tou-row span:first-child {
  color: var(--da-text);
}

.duet-analytics__receipt {
  background: color-mix(in srgb, var(--da-accent) 10%, var(--da-panel));
  border-color: color-mix(in srgb, var(--da-accent) 36%, var(--da-border));
}

.duet-analytics__receipt-title {
  color: color-mix(in srgb, var(--da-accent) 72%, var(--da-text));
}

.duet-analytics__tou-grid {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.duet-analytics__tou-panel {
  border-radius: 10px;
  padding: 12px;
}

.duet-analytics__tou-row {
  border-color: var(--da-border);
  background: var(--da-elevated);
}

.duet-analytics__tou-row--off-peak {
  background: color-mix(in srgb, var(--da-success) 10%, var(--da-elevated));
}

.duet-analytics__tou-row--peak {
  background: color-mix(in srgb, var(--da-danger) 9%, var(--da-elevated));
}

.duet-analytics__planner-result {
  background: var(--da-elevated);
  border-color: var(--da-border);
}

.duet-analytics__utility-config {
  border-top-color: var(--da-border-soft);
}

.duet-analytics__solar-gate {
  border-color: var(--da-border);
}

.duet-analytics__solar-gate.allowed {
  background: color-mix(in srgb, var(--da-success) 11%, var(--da-elevated));
  color: #86efac;
}

.duet-analytics__solar-gate.blocked {
  background: color-mix(in srgb, var(--da-warn) 12%, var(--da-elevated));
  color: #fcd34d;
}

.duet-analytics__insight {
  background: color-mix(in srgb, var(--da-warn) 8%, var(--da-panel));
  border-color: color-mix(in srgb, var(--da-warn) 28%, var(--da-border));
}

.duet-analytics__insight-title {
  color: #facc15;
}

@media (max-width: 760px) {
  .duet-analytics {
    padding: 10px;
  }

  .duet-analytics__toolbar {
    position: static;
    align-items: stretch;
    flex-direction: column;
  }

  .duet-analytics__toolbar-actions {
    justify-content: flex-start;
  }

  .duet-analytics__cards {
    grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
  }

  .duet-analytics__receipt,
  .duet-analytics__cost {
    align-items: flex-start;
    flex-direction: column;
  }

  .duet-analytics__receipt-grid {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    text-align: left;
  }

  .duet-analytics__table {
    display: block;
    overflow-x: auto;
  }
}
.react-grid-layout {
  position: relative;
  transition: height 200ms ease;
}
.react-grid-item {
  transition: all 200ms ease;
  transition-property: left, top, width, height;
}
.react-grid-item img {
  pointer-events: none;
  user-select: none;
}
.react-grid-item.cssTransforms {
  transition-property: transform, width, height;
}
.react-grid-item.resizing {
  transition: none;
  z-index: 1;
  will-change: width, height;
}

.react-grid-item.react-draggable-dragging {
  transition: none;
  z-index: 3;
  will-change: transform;
}

.react-grid-item.dropping {
  visibility: hidden;
}

.react-grid-item.react-grid-placeholder {
  background: red;
  opacity: 0.2;
  transition-duration: 100ms;
  z-index: 2;
  user-select: none;
}

.react-grid-item.react-grid-placeholder.placeholder-resizing {
  transition: none;
}

.react-grid-item > .react-resizable-handle {
  position: absolute;
  width: 20px;
  height: 20px;
  opacity: 0;
}

.react-grid-item:hover > .react-resizable-handle {
  opacity: 1;
}

.react-grid-item > .react-resizable-handle::after {
  content: "";
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 5px;
  height: 5px;
  border-right: 2px solid rgba(0, 0, 0, 0.4);
  border-bottom: 2px solid rgba(0, 0, 0, 0.4);
}

.react-resizable-hide > .react-resizable-handle {
  display: none;
}

.react-grid-item > .react-resizable-handle.react-resizable-handle-sw {
  bottom: 0;
  left: 0;
  cursor: sw-resize;
  transform: rotate(90deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-se {
  bottom: 0;
  right: 0;
  cursor: se-resize;
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-nw {
  top: 0;
  left: 0;
  cursor: nw-resize;
  transform: rotate(180deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-ne {
  top: 0;
  right: 0;
  cursor: ne-resize;
  transform: rotate(270deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-w,
.react-grid-item > .react-resizable-handle.react-resizable-handle-e {
  top: 50%;
  margin-top: -10px;
  cursor: ew-resize;
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-w {
  left: 0;
  transform: rotate(135deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-e {
  right: 0;
  transform: rotate(315deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-n,
.react-grid-item > .react-resizable-handle.react-resizable-handle-s {
  left: 50%;
  margin-left: -10px;
  cursor: ns-resize;
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-n {
  top: 0;
  transform: rotate(225deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-s {
  bottom: 0;
  transform: rotate(45deg);
}
.react-resizable {
  position: relative;
}
.react-resizable-handle {
  position: absolute;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-origin: content-box;
  box-sizing: border-box;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+');
  background-position: bottom right;
  padding: 0 3px 3px 0;
}
.react-resizable-handle-sw {
  bottom: 0;
  left: 0;
  cursor: sw-resize;
  transform: rotate(90deg);
}
.react-resizable-handle-se {
  bottom: 0;
  right: 0;
  cursor: se-resize;
}
.react-resizable-handle-nw {
  top: 0;
  left: 0;
  cursor: nw-resize;
  transform: rotate(180deg);
}
.react-resizable-handle-ne {
  top: 0;
  right: 0;
  cursor: ne-resize;
  transform: rotate(270deg);
}
.react-resizable-handle-w,
.react-resizable-handle-e {
  top: 50%;
  margin-top: -10px;
  cursor: ew-resize;
}
.react-resizable-handle-w {
  left: 0;
  transform: rotate(135deg);
}
.react-resizable-handle-e {
  right: 0;
  transform: rotate(315deg);
}
.react-resizable-handle-n,
.react-resizable-handle-s {
  left: 50%;
  margin-left: -10px;
  cursor: ns-resize;
}
.react-resizable-handle-n {
  top: 0;
  transform: rotate(225deg);
}
.react-resizable-handle-s {
  bottom: 0;
  transform: rotate(45deg);
}.cam-panel {
  container-type: inline-size;
  height: 100%;
  min-height: 0;
  --cam-live: #14b8a6;
  --cam-action: #3b82f6;
  --cam-record: #ef4444;
  --cam-save: #f59e0b;
  --cam-surface: color-mix(in srgb, var(--bg-panel) 92%, #0f172a);
  --cam-surface-soft: color-mix(in srgb, var(--bg-elevated) 84%, transparent);
  --cam-glass: color-mix(in srgb, var(--bg-panel) 82%, transparent);
  --cam-line: color-mix(in srgb, var(--cam-action) 20%, var(--border-light));
  position: relative;
  isolation: isolate;
}

.cam-panel--compact {
  container-type: size;
  overflow: hidden;
}

.cam-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--cam-live) 8%, transparent), transparent 30%),
    linear-gradient(300deg, color-mix(in srgb, var(--cam-save) 5%, transparent), transparent 36%);
  opacity: 0.75;
}

@keyframes cam-panel-enter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes cam-live-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cam-live) 16%, transparent);
  }
  50% {
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--cam-live) 28%, transparent);
  }
}

@keyframes cam-record-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.62;
    transform: scale(1.32);
  }
}

@keyframes cam-frame-sweep {
  from {
    transform: translateX(-120%) skewX(-12deg);
  }
  to {
    transform: translateX(220%) skewX(-12deg);
  }
}

.dc-body > .cam-panel {
  display: block;
  flex-direction: initial;
}

.dc-body > .cam-panel.cam-panel--compact {
  overflow: hidden !important;
}

.cam-panel__layout {
  display: grid;
  grid-template-columns: minmax(420px, 1fr) minmax(320px, 380px);
  align-items: stretch;
  gap: 16px;
  height: 100%;
  min-height: 0;
  padding: 2px;
}

.cam-panel--compact .cam-panel__layout {
  height: 100%;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(4px, 1.4cqh, 8px);
  padding: 0;
  overflow: hidden;
}

.cam-panel__workspace {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(260px, 1fr) auto auto auto;
  gap: 12px;
  animation: cam-panel-enter 0.22s ease-out both;
}

.cam-panel--compact .cam-panel__workspace {
  height: 100%;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(4px, 1.4cqh, 8px);
  overflow: hidden;
}

.cam-panel__topbar,
.cam-panel__bottom-panel,
.cam-panel__control-section {
  border: 1px solid color-mix(in srgb, var(--cam-action) 14%, var(--border-light));
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.035), transparent 34%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 78%, transparent), transparent 58%),
    var(--cam-glass);
  backdrop-filter: blur(10px);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.cam-panel__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px;
  border-color: color-mix(in srgb, var(--cam-live) 18%, var(--border-light));
  box-shadow: 0 10px 28px color-mix(in srgb, var(--cam-live) 7%, transparent);
}

.cam-panel--compact .cam-panel__topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 46%);
  align-items: center;
  gap: clamp(5px, 1.4cqw, 8px);
  padding: clamp(6px, 1.7cqh, 9px);
  box-shadow: none;
}

.cam-panel__status-block {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}

.cam-panel--compact .cam-panel__status-block {
  gap: 7px;
}

.cam-panel--compact .cam-panel__status-block strong {
  font-size: clamp(11px, 3cqh, 12px);
}

.cam-panel--compact .cam-panel__status-block span:not(.cam-panel__status-dot) {
  font-size: clamp(9px, 2.5cqh, 11px);
}

.cam-panel__status-block > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.cam-panel__status-block strong,
.cam-panel__section-head span {
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 800;
}

.cam-panel__status-block span:not(.cam-panel__status-dot) {
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cam-panel__status-dot {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--text-muted);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--text-muted) 15%, transparent);
}

.cam-panel__status-dot.is-online {
  background: var(--cam-live);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cam-live) 18%, transparent);
  animation: cam-live-pulse 2.6s ease-in-out infinite;
}

.cam-panel__top-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(104px, auto));
  gap: 7px;
}

.cam-panel__camera-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 0 10px;
}

.cam-panel__camera-tabs .cam-panel__button.is-active {
  border-color: var(--cam-live);
  color: var(--cam-live);
}

.cam-panel__camera-tabs small {
  color: var(--text-muted);
  font-size: 10px;
}

.cam-panel--compact .cam-panel__top-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(4px, 1cqw, 7px);
}

.cam-panel__record-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--cam-live) 18%, var(--border-light));
  border-radius: 8px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--cam-live) 7%, transparent), transparent 48%),
    color-mix(in srgb, var(--bg-panel) 78%, #020617);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.cam-panel--compact .cam-panel__record-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(3px, 0.8cqw, 6px);
  padding: clamp(5px, 1.3cqh, 7px);
  font-size: clamp(9px, 2.2cqh, 11px);
}

.cam-panel__record-strip span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cam-panel__view-tools {
  width: 100%;
  max-width: 100%;
  display: grid;
  gap: 8px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--cam-live) 18%, var(--border-light));
  border-radius: 8px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--cam-live) 7%, transparent), transparent 52%),
    color-mix(in srgb, var(--bg-panel) 80%, #020617);
}

.cam-panel__view-tools--compact {
  padding: clamp(5px, 1.3cqh, 7px);
}

.cam-panel__view-section {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--cam-live) 16%, var(--border-light));
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg-elevated) 72%, transparent);
}

.cam-panel__view-section-head,
.cam-panel__view-section .cam-panel__secondary-grid,
.cam-panel__view-section .cam-panel__view-mode,
.cam-panel__view-section .cam-panel__view-status,
.cam-panel__view-section .cam-panel__view-calibration,
.cam-panel__view-section .cam-panel__toggle,
.cam-panel__view-section .cam-panel__pose-status,
.cam-panel__view-section .cam-panel__note {
  grid-column: 1 / -1;
}

.cam-panel__view-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 900;
}

.cam-panel__view-section-head small {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cam-panel__view-section .cam-panel__secondary-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cam-panel__view-mode,
.cam-panel__view-actions,
.cam-panel__view-calibration {
  display: grid;
  gap: 7px;
}

.cam-panel__view-mode {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cam-panel__view-actions {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cam-panel__view-calibration {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cam-panel__view-status {
  min-height: 28px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 8px;
  border: 1px solid color-mix(in srgb, var(--cam-save) 28%, var(--border-light));
  border-radius: 7px;
  background: color-mix(in srgb, var(--cam-save) 8%, transparent);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 800;
}

.cam-panel__view-calibration label {
  display: grid;
  gap: 4px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
}

.cam-panel__view-section label:not(.cam-panel__toggle) {
  display: grid;
  gap: 4px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
}

.cam-panel__view-calibration input[type="range"] {
  width: 100%;
  accent-color: var(--cam-live);
}

.cam-panel__record-chip {
  color: var(--cam-live);
}

.cam-panel__record-chip.is-recording {
  color: var(--cam-record);
  text-shadow: 0 0 10px color-mix(in srgb, var(--cam-record) 42%, transparent);
}

.cam-panel__recent-strip {
  display: grid;
  grid-template-columns: auto repeat(6, minmax(88px, 1fr));
  gap: 7px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--cam-action) 18%, var(--border-light));
  border-radius: 8px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--cam-action) 7%, transparent), transparent 50%),
    color-mix(in srgb, var(--bg-panel) 76%, #020617);
  overflow: hidden;
}

.cam-panel__recent-title,
.cam-panel__recent-item,
.cam-panel__recent-empty {
  min-width: 0;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cam-panel__recent-title {
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.cam-panel__recent-empty {
  grid-column: span 2;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
}

.cam-panel__recent-item {
  border: 1px solid var(--border-light);
  border-radius: 7px;
  background: var(--cam-surface-soft);
  color: var(--text-secondary);
  font: inherit;
  font-size: 10px;
  font-weight: 750;
  cursor: pointer;
  text-align: left;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.035) inset;
}

.cam-panel__recent-item:hover,
.cam-panel__recent-item.is-selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-elevated));
  color: var(--text-primary);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 12%, transparent);
  transform: translateY(-1px);
}

.cam-panel__recent-item > span:last-child {
  min-width: 0;
  overflow: hidden;
  padding-right: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cam-panel__recent-thumb {
  width: 34px;
  height: 26px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 5px;
  background: #050505;
  color: var(--text-muted);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.055) inset;
}

.cam-panel__recent-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cam-panel__viewer {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--cam-live) 22%, var(--border-light));
  border-radius: 8px;
  background: #050505;
  overflow: hidden;
  gap: 8px;
}

.cam-panel--compact .cam-panel__viewer {
  min-height: 0;
  padding: clamp(4px, 1.2cqh, 7px);
}

.cam-panel__frame {
  position: relative;
  z-index: 1;
  width: 100%;
  max-height: 100%;
  align-self: stretch;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--cam-live) 38%, var(--border-light));
  border-radius: 8px;
  background: #050505;
  box-shadow:
    0 18px 36px rgba(0, 0, 0, 0.22),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}

.cam-panel__frame--measuring {
  cursor: crosshair;
}

.cam-panel__frame--ar-print-only img,
.cam-panel__frame--ar-print-only .cam-panel__video {
  opacity: 0.12;
}

.cam-panel--compact .cam-panel__frame {
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
  border-radius: 7px;
  box-shadow: none;
}

.cam-panel__frame img,
.cam-panel__video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #050505;
}

.cam-panel__video {
  border: 0;
}

.cam-panel__frame--grid::before,
.cam-panel__frame--crosshair::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.cam-panel__calibration {
  position: absolute;
  left: var(--cal-x);
  top: var(--cal-y);
  width: var(--cal-w);
  height: var(--cal-h);
  z-index: 2;
  pointer-events: none;
  border: 2px solid color-mix(in srgb, var(--cam-save) 78%, transparent);
  border-radius: 6px;
  box-shadow:
    0 0 0 999px rgba(2, 6, 23, 0.18),
    0 0 22px color-mix(in srgb, var(--cam-save) 28%, transparent);
}

.cam-panel__calibration::before,
.cam-panel__calibration::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, transparent calc(50% - 1px), color-mix(in srgb, var(--cam-save) 72%, transparent) calc(50% - 1px), color-mix(in srgb, var(--cam-save) 72%, transparent) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(to bottom, transparent calc(50% - 1px), color-mix(in srgb, var(--cam-save) 72%, transparent) calc(50% - 1px), color-mix(in srgb, var(--cam-save) 72%, transparent) calc(50% + 1px), transparent calc(50% + 1px));
}

.cam-panel__measurement-layer,
.cam-panel__measurement-svg {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.cam-panel__media-viewport {
  position: absolute;
  left: var(--media-left);
  top: var(--media-top);
  width: var(--media-width);
  height: var(--media-height);
  z-index: 3;
  pointer-events: none;
}

.cam-panel__measurement-layer.is-picking {
  pointer-events: auto;
}

.cam-panel__ar-overlay,
.cam-panel__ar-svg {
  position: absolute;
  inset: 0;
  z-index: 3;
}

.cam-panel__ar-overlay {
  pointer-events: auto;
}

.cam-panel__ar-svg {
  pointer-events: none;
}

.cam-panel__ar-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.65));
}

.cam-panel__ar-line {
  stroke-width: 0.28;
  stroke-linecap: round;
  opacity: 0.68;
  vector-effect: non-scaling-stroke;
}

.cam-panel__ar-line--current {
  stroke-width: 0.48;
  opacity: 0.95;
}

.cam-panel__ar-object {
  fill: color-mix(in srgb, var(--cam-action) 9%, transparent);
  stroke: color-mix(in srgb, var(--cam-action) 78%, white);
  stroke-width: 0.38;
  opacity: 0.78;
  vector-effect: non-scaling-stroke;
}

.cam-panel__ar-object--current {
  fill: color-mix(in srgb, var(--cam-live) 14%, transparent);
  stroke: color-mix(in srgb, var(--cam-live) 86%, white);
}

.cam-panel__ar-object--comparison {
  fill: color-mix(in srgb, var(--cam-record) 8%, transparent);
  stroke: color-mix(in srgb, var(--cam-record) 68%, white);
  stroke-dasharray: 2 2;
}

.cam-panel__ar-overlay--comparison .cam-panel__ar-line {
  opacity: 0.38;
}

.cam-panel__ar-badge,
.cam-panel__ar-overlay--empty span {
  position: absolute;
  top: 10px;
  right: 10px;
  max-width: calc(100% - 20px);
  padding: 6px 8px;
  border: 1px solid color-mix(in srgb, var(--cam-action) 48%, var(--border-light));
  border-radius: 8px;
  background: color-mix(in srgb, #020617 78%, transparent);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.2;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.62);
}

.cam-panel__ar-overlay--empty span {
  top: 50%;
  right: auto;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.cam-panel__measurement-svg {
  width: 100%;
  height: 100%;
}

.cam-panel__bed-polygon {
  fill: color-mix(in srgb, var(--cam-live) 14%, transparent);
  stroke: color-mix(in srgb, var(--cam-live) 86%, white);
  stroke-width: 0.45;
  vector-effect: non-scaling-stroke;
}

.cam-panel__ruler-line {
  stroke: color-mix(in srgb, var(--cam-save) 88%, white);
  stroke-width: 0.55;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.cam-panel__measure-point {
  position: absolute;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 2px solid color-mix(in srgb, var(--cam-save) 88%, white);
  border-radius: 50%;
  background: color-mix(in srgb, #020617 78%, transparent);
  color: #fff;
  cursor: grab;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.62);
  transform: translate(-50%, -50%);
  pointer-events: auto;
  touch-action: none;
}

.cam-panel__measure-point--corner {
  border-color: color-mix(in srgb, var(--cam-live) 88%, white);
}

.cam-panel__measure-point--corner:hover,
.cam-panel__measure-point--corner.is-dragging,
.cam-panel__measure-point--ruler:hover,
.cam-panel__measure-point--ruler.is-dragging {
  background: color-mix(in srgb, var(--cam-live) 28%, #020617);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--cam-live) 18%, transparent);
}

.cam-panel__measure-point--corner.is-dragging,
.cam-panel__measure-point--ruler.is-dragging {
  cursor: grabbing;
}

.cam-panel__measure-distance {
  position: absolute;
  left: 10px;
  bottom: 10px;
  max-width: calc(100% - 20px);
  padding: 6px 8px;
  border: 1px solid color-mix(in srgb, var(--cam-save) 52%, var(--border-light));
  border-radius: 8px;
  background: color-mix(in srgb, #020617 78%, transparent);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.2;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.62);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24);
}

.cam-panel__frame--measuring .cam-panel__measure-distance {
  top: 10px;
  bottom: auto;
  left: 50%;
  transform: translateX(-50%);
}

.cam-panel__pose-freeze {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 6px 8px;
  border: 1px solid color-mix(in srgb, var(--cam-action) 48%, var(--border-light));
  border-radius: 8px;
  background: color-mix(in srgb, #020617 78%, transparent);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.2;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.62);
}

.cam-panel__frame--grid::before {
  animation: none;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.16) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.16) 1px, transparent 1px);
  background-size: 25% 25%;
}

.cam-panel__frame--crosshair::after {
  background:
    linear-gradient(to right, transparent calc(50% - 1px), rgba(74, 222, 128, 0.8) calc(50% - 1px), rgba(74, 222, 128, 0.8) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(to bottom, transparent calc(50% - 1px), rgba(74, 222, 128, 0.8) calc(50% - 1px), rgba(74, 222, 128, 0.8) calc(50% + 1px), transparent calc(50% + 1px));
}

.cam-panel__health {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  padding: 4px 8px;
  border: 1px solid rgba(20, 184, 166, 0.34);
  border-radius: 999px;
  background: rgba(3, 7, 18, 0.74);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}

.cam-panel__empty {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px;
  color: var(--text-muted);
  text-align: center;
  font-size: 12px;
}

.cam-panel__empty strong {
  color: var(--text-primary);
}

.cam-panel__recording {
  position: absolute;
  left: 10px;
  top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid rgba(239, 68, 68, 0.42);
  border-radius: 999px;
  background: rgba(69, 10, 10, 0.78);
  color: #fff;
  font-size: 11px;
  font-weight: 750;
}

.cam-panel__recording-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.8);
}

.cam-panel__controls {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  padding: 0 4px 0 0;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 82%, transparent), transparent 52%),
    var(--cam-surface);
  scrollbar-width: thin;
}

.cam-panel__controls::-webkit-scrollbar {
  width: 8px;
}

.cam-panel__controls::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 28%, var(--border));
}

.cam-panel__controls::-webkit-scrollbar-track,
.cam-panel__clip-list::-webkit-scrollbar-track,
.cam-panel__bottom-panel::-webkit-scrollbar-track {
  background: transparent;
}

.cam-panel__clip-list::-webkit-scrollbar,
.cam-panel__bottom-panel::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.cam-panel__clip-list::-webkit-scrollbar-thumb,
.cam-panel__bottom-panel::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: color-mix(in srgb, var(--cam-action) 24%, var(--border));
}

.cam-panel__control-tabs {
  position: sticky;
  top: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 5px;
  padding: 4px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent),
    color-mix(in srgb, var(--bg-panel) 92%, #020617);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
}

.cam-panel__tab {
  min-width: 0;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.cam-panel__tab span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cam-panel__tab:hover,
.cam-panel__tab.is-active {
  border-color: color-mix(in srgb, var(--cam-action) 28%, var(--border-light));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--cam-action) 14%, transparent), transparent),
    color-mix(in srgb, var(--cam-action) 10%, var(--bg-elevated));
  color: var(--text-primary);
  transform: translateY(-1px);
}

.cam-panel__tab.is-active {
  box-shadow:
    0 8px 16px color-mix(in srgb, var(--cam-action) 12%, transparent),
    0 -2px 0 color-mix(in srgb, var(--cam-action) 70%, transparent) inset;
}

.cam-panel__control-section {
  display: grid;
  gap: 9px;
  padding: 10px;
  animation: cam-panel-enter 0.18s ease-out both;
}

.cam-panel__control-section--record {
  border-color: color-mix(in srgb, var(--cam-record) 24%, var(--border-light));
}

.cam-panel__control-section--library {
  min-height: 0;
}

.cam-panel__section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.cam-panel__section-head span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.cam-panel__section-head small {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cam-panel__toolbar,
.cam-panel__clip-actions {
  display: grid;
  align-items: stretch;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.cam-panel__toolbar .cam-panel__meta,
.cam-panel__toolbar .cam-panel__toggle,
.cam-panel__clip-actions .cam-panel__button:nth-last-child(1):nth-child(odd) {
  grid-column: 1 / -1;
}

.cam-panel__toggle-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.cam-panel__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid color-mix(in srgb, var(--cam-action) 18%, var(--border));
  border-radius: 7px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--cam-action) 5%, transparent), transparent),
    var(--bg-elevated);
  color: var(--text-primary);
  font: inherit;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease, transform 0.12s ease, box-shadow 0.14s ease;
}

.cam-panel__button:hover:not(:disabled) {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--cam-action) 11%, transparent), transparent),
    var(--bg-elevated-hover);
  border-color: color-mix(in srgb, var(--cam-action) 38%, var(--border-strong));
  box-shadow: 0 8px 16px color-mix(in srgb, var(--cam-action) 10%, transparent);
  transform: translateY(-1px);
}

.cam-panel__button:active:not(:disabled) {
  transform: translateY(1px);
}

.cam-panel__button:focus-visible,
.cam-panel__tab:focus-visible,
.cam-panel__clip:focus-visible,
.cam-panel__recent-item:focus-visible,
.cam-panel__danger-toggle:focus-visible,
.cam-panel__markers button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--cam-action) 58%, transparent);
  outline-offset: 2px;
}

.cam-panel__button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.cam-panel__button--record {
  border-color: color-mix(in srgb, var(--cam-record) 58%, var(--border));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--cam-record) 20%, var(--bg-elevated)), var(--bg-elevated)),
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--cam-record) 18%, transparent), transparent 70%);
  color: color-mix(in srgb, var(--cam-record) 82%, var(--text-primary));
}

.cam-panel__button--stop {
  border-color: color-mix(in srgb, var(--cam-record) 60%, var(--border));
  background: var(--cam-record);
  color: #fff;
}

.cam-panel__button--danger {
  border-color: color-mix(in srgb, #ef4444 55%, var(--border));
  color: color-mix(in srgb, #ef4444 80%, var(--text-primary));
}

.cam-panel__button--load {
  width: auto;
  min-width: 104px;
}

.cam-panel__button--compact {
  width: auto;
  min-width: 96px;
  min-height: 28px;
}

.cam-panel__button.is-active {
  border-color: var(--accent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 16%, transparent), transparent),
    color-mix(in srgb, var(--accent) 14%, var(--bg-elevated));
  color: var(--accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent) inset;
}

.cam-panel__meta {
  padding: 8px 9px;
  border: 1px solid color-mix(in srgb, var(--cam-live) 24%, var(--border-light));
  border-radius: 7px;
  background: color-mix(in srgb, var(--cam-live) 7%, var(--bg-elevated));
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.35;
}

.cam-panel__toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 0 9px;
  border: 1px solid var(--border-light);
  border-radius: 7px;
  background: var(--cam-surface-soft);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.cam-panel__toggle:hover {
  border-color: color-mix(in srgb, var(--cam-action) 28%, var(--border-light));
  background: color-mix(in srgb, var(--cam-action) 7%, var(--cam-surface-soft));
  transform: translateY(-1px);
}

.cam-panel__toggle input {
  margin: 0;
}

.cam-panel__secondary-grid,
.cam-panel__quality-tools,
.cam-panel__settings-row,
.cam-panel__filter-row,
.cam-panel__bulk-tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.cam-panel__preset-tools,
.cam-panel__issue-tools,
.cam-panel__storage-manager,
.cam-panel__timeline,
.cam-panel__calibration-tools,
.cam-panel__ptz-tools,
.cam-panel__checklist,
.cam-panel__selection-tools {
  display: grid;
  gap: 7px;
  padding: 8px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent),
    color-mix(in srgb, var(--bg-panel) 70%, transparent);
}

.cam-panel__preset-tools {
  grid-template-columns: minmax(0, 1fr) auto;
}

.cam-panel__ptz-tools {
  grid-template-columns: minmax(0, 1fr);
}

.cam-panel__ptz-tools .cam-panel__section-head {
  margin: -1px 0 0;
}

.cam-panel__ptz-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(34px, 1fr));
  gap: 7px;
  align-items: center;
}

.cam-panel__ptz-grid .cam-panel__button {
  min-height: 34px;
  justify-content: center;
  padding: 0;
}

.cam-panel__ptz-preset-form {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(54px, 0.55fr) auto;
  gap: 7px;
  align-items: center;
}

.cam-panel__ptz-preset-list {
  display: grid;
  gap: 6px;
}

.cam-panel__button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  transform: none;
}

.cam-panel__selection-tools,
.cam-panel__checklist {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cam-panel__calibration-tools {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cam-panel__calibration-tools .cam-panel__toggle {
  grid-column: 1 / -1;
}

.cam-panel__overlay-mode {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.cam-panel__measurement-readout {
  grid-column: 1 / -1;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 7px 9px;
  border: 1px solid color-mix(in srgb, var(--cam-save) 24%, var(--border-light));
  border-radius: 8px;
  background: color-mix(in srgb, var(--cam-save) 8%, var(--bg-elevated));
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 800;
}

.cam-panel__pose-status {
  grid-column: 1 / -1;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 7px 9px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg-elevated) 86%, transparent);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 800;
}

.cam-panel__pose-status--good {
  border-color: color-mix(in srgb, var(--cam-live) 34%, var(--border-light));
  color: color-mix(in srgb, var(--cam-live) 72%, var(--text-primary));
}

.cam-panel__pose-status--warning {
  border-color: color-mix(in srgb, var(--cam-save) 42%, var(--border-light));
  color: color-mix(in srgb, var(--cam-save) 78%, var(--text-primary));
}

.cam-panel__pose-status--stale {
  border-color: color-mix(in srgb, var(--cam-record) 46%, var(--border-light));
  color: color-mix(in srgb, var(--cam-record) 76%, var(--text-primary));
}

.cam-panel__calibration-tools label:not(.cam-panel__toggle) {
  display: grid;
  gap: 4px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
}

.cam-panel__calibration-tools input[type="range"] {
  width: 100%;
  accent-color: var(--cam-save);
}

.cam-panel__preset-tools .cam-panel__note {
  grid-column: 1 / -1;
}

.cam-panel__preset-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 7px;
}

.cam-panel__issue-tools {
  grid-template-columns: minmax(0, 1fr) auto;
}

.cam-panel__issue-tools span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid color-mix(in srgb, var(--cam-save) 32%, var(--border-light));
  border-radius: 999px;
  background: color-mix(in srgb, var(--cam-save) 10%, transparent);
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 800;
}

.cam-panel__storage-manager {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cam-panel__storage-manager > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 6px;
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 750;
}

.cam-panel__storage-manager span {
  min-width: 0;
  overflow: hidden;
  color: var(--text-primary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cam-panel__storage-manager strong {
  color: var(--cam-live);
}

.cam-panel__storage-manager em {
  grid-column: 1 / -1;
  color: var(--text-muted);
  font-style: normal;
}

.cam-panel__storage-manager div div {
  grid-column: 1 / -1;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 70%, transparent);
}

.cam-panel__storage-manager div div span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cam-action), var(--cam-live));
}

.cam-panel__settings-row,
.cam-panel__bulk-tools {
  align-items: end;
}

.cam-panel__quality-tools .cam-panel__button {
  justify-content: center;
  min-height: 34px;
}

.cam-panel__quality-tools .cam-panel__note {
  grid-column: 1 / -1;
}

.cam-panel__quality-select {
  grid-column: 1 / -1;
  display: grid;
  gap: 4px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
}

.cam-panel__settings-row label,
.cam-panel__bulk-tools label,
.cam-panel__slider-grid label {
  display: grid;
  gap: 4px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
}

.cam-panel__bulk-tools {
  padding: 8px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg-panel) 68%, transparent);
}

.cam-panel__danger-zone {
  display: grid;
  gap: 7px;
  padding: 7px;
  border: 1px solid color-mix(in srgb, #ef4444 22%, var(--border-light));
  border-radius: 8px;
  background: color-mix(in srgb, #ef4444 4%, var(--bg-panel));
}

.cam-panel__danger-toggle {
  min-height: 30px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  border: 0;
  background: transparent;
  color: color-mix(in srgb, #ef4444 72%, var(--text-primary));
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  text-align: left;
}

.cam-panel__danger-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  padding-top: 7px;
  border-top: 1px solid color-mix(in srgb, #ef4444 18%, var(--border-light));
}

.cam-panel__danger-actions label {
  display: grid;
  gap: 4px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
}

.cam-panel__input,
.cam-panel__select,
.cam-panel__search {
  min-width: 0;
  min-height: 30px;
  border: 1px solid var(--border-light);
  border-radius: 7px;
  background: color-mix(in srgb, var(--bg-elevated) 88%, #020617);
  color: var(--text-primary);
  font: inherit;
  font-size: 11px;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.cam-panel__input:focus,
.cam-panel__select:focus,
.cam-panel__search:focus-within {
  border-color: color-mix(in srgb, var(--cam-action) 46%, var(--border-strong));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cam-action) 12%, transparent);
  outline: 0;
}

.cam-panel__input,
.cam-panel__select {
  padding: 0 8px;
}

textarea.cam-panel__input {
  min-height: 58px;
  padding: 7px 8px;
  resize: vertical;
}

.cam-panel__search {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  color: var(--text-muted);
}

.cam-panel__search input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: inherit;
  font: inherit;
}

.cam-panel__storage {
  display: grid;
  gap: 5px;
  padding: 7px 8px;
  border: 1px solid var(--border-light);
  border-radius: 7px;
  background: var(--cam-surface-soft);
  color: var(--text-secondary);
  font-size: 11px;
}

.cam-panel__storage > div:first-child {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cam-panel__storage-bar {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 70%, transparent);
}

.cam-panel__storage-bar span {
  display: block;
  height: 100%;
  min-width: 3px;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cam-action), var(--cam-live));
  transition: width 0.24s ease;
}

.cam-panel__library-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 0 0;
  border-top: 1px solid var(--border-light);
}

.cam-panel__library-title {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 750;
}

.cam-panel__clip-list {
  flex: 0 0 auto;
  min-height: 120px;
  max-height: 260px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-right: 2px;
}

.cam-panel__clip {
  width: 100%;
  display: grid;
  grid-template-columns: auto 44px minmax(0, 1fr) auto;
  gap: 4px 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--border-light);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 42%),
    linear-gradient(90deg, color-mix(in srgb, var(--cam-action) 5%, transparent), transparent 64%),
    var(--bg-elevated);
  color: var(--text-primary);
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease;
}

.cam-panel__clip:not(:has(.cam-panel__clip-check)) {
  grid-template-columns: 44px minmax(0, 1fr) auto;
}

.cam-panel__clip-check {
  grid-row: span 2;
  width: 16px;
  height: 16px;
  accent-color: var(--cam-action);
}

.cam-panel__thumb {
  grid-row: span 2;
  width: 44px;
  height: 34px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: #080808;
  color: var(--text-muted);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 8px 16px rgba(0, 0, 0, 0.12);
}

.cam-panel__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cam-panel__clip-main {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.cam-panel__clip:hover,
.cam-panel__clip.is-selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-elevated));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 10%, transparent);
  transform: translateY(-1px);
}

.cam-panel__clip-name {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 750;
}

.cam-panel__clip-name svg {
  flex-shrink: 0;
  color: #f59e0b;
}

.cam-panel__clip-size,
.cam-panel__clip-date {
  color: var(--text-muted);
  font-size: 10px;
}

.cam-panel__clip-date {
  justify-self: end;
}

.cam-panel__clip-player {
  width: 100%;
  max-height: 220px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: #050505;
  object-fit: contain;
  transition: filter 0.14s, transform 0.14s;
}

.cam-panel__bottom-panel {
  min-height: 172px;
  max-height: 320px;
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(360px, 1.2fr);
  gap: 10px;
  padding: 10px;
  overflow: auto;
  border-color: color-mix(in srgb, var(--cam-save) 18%, var(--border-light));
  scrollbar-width: thin;
  animation: cam-panel-enter 0.2s ease-out both;
  transition: max-height 0.2s ease, min-height 0.2s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.cam-panel__bottom-panel:hover,
.cam-panel__control-section:hover,
.cam-panel__topbar:hover {
  border-color: color-mix(in srgb, var(--cam-action) 24%, var(--border-light));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--cam-action) 7%, transparent);
}

.cam-panel__bottom-panel.is-collapsed {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--cam-save) 8%, transparent), transparent 55%),
    var(--cam-glass);
}

.cam-panel__bottom-panel.is-collapsed {
  min-height: auto;
  max-height: none;
  grid-template-columns: 1fr;
}

.cam-panel__bottom-head,
.cam-panel__selected-meta {
  grid-column: 1 / -1;
}

.cam-panel__bottom-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cam-panel__bottom-head > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.cam-panel__bottom-head strong {
  overflow: hidden;
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cam-panel__bottom-head span {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cam-panel__selected-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.cam-panel__selected-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 7px;
  border: 1px solid color-mix(in srgb, var(--cam-action) 24%, var(--border-light));
  border-radius: 999px;
  background: color-mix(in srgb, var(--cam-action) 8%, transparent);
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 750;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.cam-panel__selected-meta span:hover {
  border-color: color-mix(in srgb, var(--cam-action) 42%, var(--border-light));
  background: color-mix(in srgb, var(--cam-action) 13%, transparent);
  color: var(--text-primary);
}

.cam-panel__bottom-preview,
.cam-panel__bottom-edit {
  min-width: 0;
  display: grid;
  gap: 8px;
  align-content: start;
}

.cam-panel__bottom-preview {
  position: sticky;
  top: 0;
}

.cam-panel__bottom-empty {
  grid-column: 1 / -1;
  min-height: 130px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 10px;
  padding: 12px;
  border: 1px dashed color-mix(in srgb, var(--border) 78%, transparent);
  border-radius: 7px;
  color: var(--text-muted);
  font-size: 12px;
  text-align: center;
}

.cam-panel__bottom-empty > div:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.cam-panel__empty-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(110px, 1fr));
  gap: 7px;
  width: min(100%, 480px);
}

.cam-panel__detail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  padding: 8px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent),
    color-mix(in srgb, var(--bg-panel) 72%, transparent);
}

.cam-panel__detail textarea,
.cam-panel__detail .cam-panel__meta {
  grid-column: 1 / -1;
}

.cam-panel__edit-tools,
.cam-panel__marker-editor,
.cam-panel__snapshot-editor {
  display: grid;
  gap: 7px;
}

.cam-panel__edit-tools {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cam-panel__slider-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 10px;
  padding: 8px;
  border: 1px solid var(--border-light);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent),
    color-mix(in srgb, var(--bg-elevated) 72%, transparent);
}

.cam-panel__slider-grid input[type="range"] {
  width: 100%;
  accent-color: var(--cam-live);
}

.cam-panel__compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--cam-save) 28%, var(--border-light));
  border-radius: 8px;
  background: color-mix(in srgb, var(--cam-save) 6%, var(--bg-elevated));
}

.cam-panel__compare-scrub {
  --compare-blend: 50%;
  position: relative;
  grid-column: 1 / -1;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--border-light);
  border-radius: 7px;
  background: #050505;
}

.cam-panel__compare-scrub img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cam-panel__compare-scrub img:last-child {
  clip-path: inset(0 calc(100% - var(--compare-blend)) 0 0);
}

.cam-panel__compare-scrub::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--compare-blend);
  width: 2px;
  background: var(--cam-save);
  box-shadow: 0 0 12px color-mix(in srgb, var(--cam-save) 60%, transparent);
}

.cam-panel__compare-slider {
  grid-column: 1 / -1;
  display: grid;
  gap: 5px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
}

.cam-panel__compare-slider input {
  width: 100%;
  accent-color: var(--cam-save);
}

.cam-panel__compare > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.cam-panel__compare span {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
}

.cam-panel__compare img {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  background: #050505;
  object-fit: cover;
}

.cam-panel__compare select {
  grid-column: 1 / -1;
}

.cam-panel__health-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 8px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--cam-live) 28%, var(--border-light));
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--cam-live) 10%, transparent), transparent 58%),
    color-mix(in srgb, var(--cam-live) 6%, var(--bg-elevated));
  color: var(--text-secondary);
  font-size: 11px;
}

.cam-panel__health-card.is-warning {
  border-color: color-mix(in srgb, var(--cam-save) 48%, var(--border-light));
  background: color-mix(in srgb, var(--cam-save) 9%, var(--bg-elevated));
}

.cam-panel__markers {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.cam-panel__markers span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  border: 1px solid color-mix(in srgb, var(--cam-save) 30%, var(--border-light));
  border-radius: 999px;
  background: color-mix(in srgb, var(--cam-save) 8%, transparent);
  color: var(--text-secondary);
  font-size: 10px;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.cam-panel__markers span:hover {
  border-color: color-mix(in srgb, var(--cam-save) 46%, var(--border-light));
  background: color-mix(in srgb, var(--cam-save) 12%, transparent);
  transform: translateY(-1px);
}

.cam-panel__markers button {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  margin-left: 2px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.cam-panel__markers button:hover {
  background: color-mix(in srgb, #ef4444 16%, transparent);
  color: #ef4444;
}

.cam-panel__timeline {
  position: relative;
}

.cam-panel__timeline::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 14px;
  bottom: 14px;
  width: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cam-action) 34%, var(--border));
}

.cam-panel__timeline button {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 3px 10px;
  padding: 8px 8px 8px 34px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: var(--cam-surface-soft);
  color: var(--text-secondary);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.cam-panel__timeline button::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 15px;
  width: 10px;
  height: 10px;
  border: 2px solid var(--cam-action);
  border-radius: 50%;
  background: var(--bg-panel);
}

.cam-panel__timeline button:hover {
  border-color: color-mix(in srgb, var(--cam-action) 38%, var(--border-light));
  background: color-mix(in srgb, var(--cam-action) 9%, var(--bg-elevated));
  transform: translateY(-1px);
}

.cam-panel__timeline button span {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
}

.cam-panel__timeline button strong,
.cam-panel__timeline button em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cam-panel__timeline button strong {
  color: var(--text-primary);
  font-size: 11px;
}

.cam-panel__timeline button em {
  grid-column: 2;
  color: var(--text-muted);
  font-size: 10px;
  font-style: normal;
}

.cam-panel__fullscreen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.86);
}

.cam-panel__fullscreen .cam-panel__frame {
  width: min(100%, 1200px);
  max-height: calc(100vh - 48px);
}

.cam-panel__fullscreen-close {
  position: fixed;
  right: 18px;
  top: 18px;
  z-index: 1001;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  cursor: pointer;
}

.cam-panel__note {
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--cam-live) 24%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--cam-live) 7%, var(--bg-elevated));
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.42;
}

.cam-panel__hidden-canvas {
  display: none;
}

@container (max-width: 980px) {
  .cam-panel__layout {
    grid-template-columns: minmax(300px, 1fr) minmax(260px, 320px);
    gap: 10px;
  }

  .cam-panel__topbar {
    align-items: stretch;
    flex-direction: column;
  }

  .cam-panel__top-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cam-panel__record-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cam-panel__recent-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cam-panel__recent-title {
    grid-column: 1 / -1;
  }

  .cam-panel__bottom-panel {
    grid-template-columns: 1fr;
    max-height: 360px;
  }

  .cam-panel__bottom-preview {
    position: static;
  }

  .cam-panel__controls {
    padding-right: 3px;
    gap: 8px;
  }

  .cam-panel__button {
    min-height: 28px;
  }
}

@container (max-width: 720px) {
  .cam-panel__layout {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
    height: 100%;
    overflow: hidden;
  }

  .cam-panel__workspace {
    min-height: 0;
    overflow: hidden;
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  .cam-panel__recent-strip,
  .cam-panel__bottom-panel {
    display: none;
  }

  .cam-panel__viewer {
    justify-content: center;
    padding: 8px;
  }

  .cam-panel__frame {
    width: 100%;
    aspect-ratio: auto;
  }

  .cam-panel__controls {
    max-height: min(38%, 260px);
    overflow-y: auto;
    padding: 10px;
  }

  .cam-panel__toolbar,
  .cam-panel__clip-actions,
  .cam-panel__secondary-grid,
  .cam-panel__edit-tools,
  .cam-panel__bulk-tools,
  .cam-panel__preset-tools,
  .cam-panel__issue-tools,
  .cam-panel__storage-manager,
  .cam-panel__calibration-tools,
  .cam-panel__checklist,
  .cam-panel__selection-tools,
  .cam-panel__danger-actions,
  .cam-panel__empty-actions,
  .cam-panel__recent-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cam-panel__view-actions,
  .cam-panel__view-calibration {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cam-panel__meta,
  .cam-panel__clip-list,
  .cam-panel__clip-player,
  .cam-panel__detail,
  .cam-panel__compare,
  .cam-panel__bottom-panel {
    grid-column: 1 / -1;
  }
}

@container (max-width: 440px) {
  .cam-panel__toolbar,
  .cam-panel__clip-actions,
  .cam-panel__secondary-grid,
  .cam-panel__settings-row,
  .cam-panel__filter-row,
  .cam-panel__bulk-tools,
  .cam-panel__slider-grid,
  .cam-panel__compare,
  .cam-panel__library-head,
  .cam-panel__top-actions,
  .cam-panel__toggle-grid,
  .cam-panel__detail,
  .cam-panel__record-strip,
  .cam-panel__preset-tools,
  .cam-panel__issue-tools,
  .cam-panel__storage-manager,
  .cam-panel__calibration-tools,
  .cam-panel__checklist,
  .cam-panel__selection-tools,
  .cam-panel__danger-actions,
  .cam-panel__empty-actions,
  .cam-panel__recent-strip,
  .cam-panel__view-actions,
  .cam-panel__view-calibration {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  /* Keep Camera/AR/Preview as a horizontal 3-col row — labels are short
     enough to fit even at narrow container widths. */
  .cam-panel__view-mode {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cam-panel__control-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cam-panel__bottom-head {
    align-items: stretch;
    flex-direction: column;
  }

  .cam-panel__button--load {
    width: 100%;
  }
}

.cam-panel--compact .cam-panel__topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(160px, 46%);
  align-items: center;
  flex-direction: initial;
}

.cam-panel--compact .cam-panel__top-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cam-panel--compact .cam-panel__button {
  min-height: clamp(24px, 6cqh, 30px);
  padding: 0 clamp(6px, 1.8cqw, 10px);
  font-size: clamp(9px, 2.3cqh, 11px);
}

.cam-panel--compact .cam-panel__record-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  min-height: 0;
}

@container (max-width: 430px) {
  .cam-panel--compact .cam-panel__topbar {
    grid-template-columns: 1fr;
  }

  .cam-panel--compact .cam-panel__record-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .cam-panel__workspace,
  .cam-panel__control-section,
  .cam-panel__bottom-panel,
  .cam-panel__status-dot.is-online,
  .cam-panel__recording-dot,
  .cam-panel__frame::before {
    animation: none;
  }

  .cam-panel__button,
  .cam-panel__tab,
  .cam-panel__clip,
  .cam-panel__recent-item,
  .cam-panel__markers span {
    transition-duration: 0.01ms;
  }

  .cam-panel__button:hover:not(:disabled),
  .cam-panel__tab:hover,
  .cam-panel__tab.is-active,
  .cam-panel__clip:hover,
  .cam-panel__clip.is-selected,
  .cam-panel__recent-item:hover,
  .cam-panel__recent-item.is-selected,
  .cam-panel__markers span:hover {
    transform: none;
  }
}
/* =============================================================================
   SystemInfoPanel — BEM styles
   All colour references use CSS custom properties set by themeStore.
   ============================================================================= */

/* ── Storage bar progress fill ───────────────────────────────────────────── */
/* The fill width is dynamic so width stays inline; only background is themed */
.duet-sys-panel__storage-fill {
  height: 100%;
  border-radius: 2px;
}

/* Background colours for storage fill levels come from JS via inline style
   so they can be conditional (usedPct > 90 ? danger : …). The bar track
   background is already covered by duet-dash-sys-storage-bar in the shared
   dashboard CSS, driven by COLORS.inputBg inline on the bar element itself. */
/* ===== DuetStatus dedicated stylesheet ===== */

/* Grid layout */
.ds-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 10px;
  padding: 12px;
  align-items: start;
}

/* Panel card */
.ds-panel {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

/* Panel header */
.ds-panel__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-panel) 94%);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}

.ds-panel__head > svg {
  color: var(--accent);
  flex-shrink: 0;
}

/* Panel body */
.ds-panel__body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Key/value grid */
.ds-kv {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 14px;
  font-size: 12px;
  align-items: baseline;
}

.ds-kv__key {
  color: var(--text-muted);
  font-size: 11px;
}

.ds-kv__val {
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Separator */
.ds-sep {
  border: none;
  border-top: 1px solid var(--border);
  margin: 6px 0;
}

/* Sub-section title */
.ds-sub-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
}

/* Badge pill */
.ds-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  border: 1px solid;
  white-space: nowrap;
}

.ds-badge--ok {
  color: #22c55e;
  border-color: color-mix(in srgb, #22c55e 30%, transparent 70%);
  background: color-mix(in srgb, #22c55e 10%, transparent 90%);
}

.ds-badge--warn {
  color: #f59e0b;
  border-color: color-mix(in srgb, #f59e0b 30%, transparent 70%);
  background: color-mix(in srgb, #f59e0b 10%, transparent 90%);
}

.ds-badge--err {
  color: #ef4444;
  border-color: color-mix(in srgb, #ef4444 30%, transparent 70%);
  background: color-mix(in srgb, #ef4444 10%, transparent 90%);
}

.ds-badge--info {
  color: #3b82f6;
  border-color: color-mix(in srgb, #3b82f6 30%, transparent 70%);
  background: color-mix(in srgb, #3b82f6 10%, transparent 90%);
}

.ds-badge--dim {
  color: var(--text-muted);
  border-color: var(--border);
  background: transparent;
}

/* Machine status hero */
.ds-status-hero {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 8px;
  background: color-mix(in srgb, var(--hero-color, #94a3b8) 10%, transparent 90%);
  border: 1px solid color-mix(in srgb, var(--hero-color, #94a3b8) 25%, transparent 75%);
}

.ds-status-hero__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--hero-color, #94a3b8);
  flex-shrink: 0;
}

.ds-status-hero__dot--pulse {
  animation: ds-pulse 1.8s ease-in-out infinite;
}

.ds-status-hero__label {
  font-size: 14px;
  font-weight: 800;
  color: var(--hero-color, #94a3b8);
  text-transform: capitalize;
  letter-spacing: 0.02em;
}

/* KPI row */
.ds-kpi-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ds-kpi {
  display: flex;
  flex-direction: column;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  min-width: 70px;
}

.ds-kpi__label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.ds-kpi__val {
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

/* Driver rows */
.ds-driver-row {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 6px 10px;
  align-items: center;
  font-size: 12px;
}

.ds-driver-axis {
  font-weight: 700;
}

/* GPIO row */
.ds-gpio-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}

.ds-gpio-row:last-child {
  border-bottom: none;
}

/* CSS toggle switch */
.ds-toggle {
  position: relative;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

.ds-toggle__track {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  transition: background 0.2s;
}

.ds-toggle--on .ds-toggle__track {
  background: var(--success);
}

.ds-toggle--off .ds-toggle__track {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
}

.ds-toggle__thumb {
  position: absolute;
  top: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  transition: left 0.2s;
}

.ds-toggle--on .ds-toggle__thumb {
  left: 19px;
}

.ds-toggle--off .ds-toggle__thumb {
  left: 3px;
}

/* Pulse animation for printing status dot */
@keyframes ds-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
/* =============================================================================
   DuetConsole — BEM styles
   All colour references use CSS custom properties set by themeStore.
   ============================================================================= */

/* ── Container ───────────────────────────────────────────────────────────── */
.duet-console {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
  font-size: 13px;
  position: relative;
}

/* ── Toolbar ─────────────────────────────────────────────────────────────── */
.duet-console__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-panel) 92%, var(--bg-elevated));
  flex-shrink: 0;
  flex-wrap: wrap;
}

.duet-console__toolbar-right {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.duet-console__quick-buttons {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.duet-console__quick-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 27px;
  padding: 4px 9px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.duet-console__quick-btn:hover:not(:disabled),
.duet-console__clear-btn:hover:not(:disabled),
.duet-console__filter-toggle:hover:not(:disabled) {
  border-color: color-mix(in srgb, #60a5fa 35%, var(--border));
  background: color-mix(in srgb, #60a5fa 9%, var(--bg-elevated));
  color: var(--text-primary);
}

.duet-console__quick-btn--danger {
  border-color: #7f1d1d;
  background: #450a0a;
  color: #fca5a5;
}

.duet-console__quick-btn-label {
  font-weight: 600;
}

.duet-console__clear-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 27px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  flex-shrink: 0;
}

/* ── Filter bar ──────────────────────────────────────────────────────────── */
.duet-console__clear-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.duet-console__clear-btn.is-live {
  border-color: color-mix(in srgb, #22c55e 42%, var(--border));
  color: #86efac;
}

.duet-console__clear-btn.is-paused {
  border-color: color-mix(in srgb, #f59e0b 48%, var(--border));
  color: #fbbf24;
}

.duet-console__clear-btn.is-following {
  border-color: color-mix(in srgb, #38bdf8 46%, var(--border));
  color: #bae6fd;
}

.duet-console__spin {
  animation: duet-console-spin 0.8s linear infinite;
}

@keyframes duet-console-spin {
  to { transform: rotate(360deg); }
}

.duet-console__filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-primary) 86%, var(--bg-panel));
  flex-shrink: 0;
  flex-wrap: wrap;
  font-size: 12px;
}

.duet-console__filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 25px;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-elevated);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 11px;
  font-family: inherit;
  transition: all 0.15s;
  white-space: nowrap;
}

.duet-console__filter-toggle.is-active {
  border-color: #854d0e;
  background: #422006;
  color: var(--warning);
}

.duet-console__filter-checks {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.duet-console__filter-check {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 25px;
  padding: 3px 7px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-size: 11px;
  cursor: pointer;
  user-select: none;
}

.duet-console__filter-check:has(input:checked) {
  border-color: color-mix(in srgb, #60a5fa 34%, var(--border));
  background: color-mix(in srgb, #60a5fa 8%, var(--bg-elevated));
  color: var(--text-primary);
}

.duet-console__filter-check input {
  width: 12px;
  height: 12px;
  margin: 0;
  accent-color: #60a5fa;
}

.duet-console__filter-search-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 120px;
  min-height: 25px;
  padding: 2px 7px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-primary);
}

.duet-console__filter-search-icon {
  color: var(--text-muted);
  flex-shrink: 0;
}

.duet-console__filter-search-input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 11px;
  font-family: inherit;
  outline: none;
  padding: 2px 0;
  min-width: 0;
}

.duet-console__filter-search-clear {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  padding: 0 2px;
  line-height: 1;
}

.duet-console__filter-count {
  color: var(--text-muted);
  font-size: 11px;
  white-space: nowrap;
  margin-left: auto;
  flex-shrink: 0;
}

/* ── Output area ─────────────────────────────────────────────────────────── */
.duet-console__output {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
  line-height: 1.5;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--bg-panel) 55%, transparent) 0 78px, transparent 78px),
    var(--bg-primary);
}

.duet-console__placeholder {
  color: var(--text-muted);
  font-style: italic;
  padding: 16px 0;
  text-align: center;
}

.duet-console__entry {
  display: grid;
  grid-template-columns: 44px 72px 72px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 2px 10px;
  border-left: 3px solid transparent;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: normal;
  cursor: default;
}

.duet-console__entry:hover {
  background: color-mix(in srgb, var(--bg-elevated) 48%, transparent);
}

.duet-console__entry--command {
  border-left-color: #22d3ee;
}

.duet-console__entry--response {
  border-left-color: color-mix(in srgb, var(--border) 70%, transparent);
}

.duet-console__entry--warning {
  border-left-color: #facc15;
  background: color-mix(in srgb, #facc15 4%, transparent);
}

.duet-console__entry--error {
  border-left-color: #f87171;
  background: color-mix(in srgb, #f87171 5%, transparent);
}

.duet-console__line-number {
  color: color-mix(in srgb, var(--text-muted) 48%, transparent);
  user-select: none;
  text-align: right;
  font-size: 11px;
}

.duet-console__timestamp {
  color: var(--text-muted);
  user-select: none;
  font-size: 11px;
  white-space: nowrap;
}

.duet-console__entry-type {
  align-self: start;
  justify-self: start;
  min-width: 58px;
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.5;
  text-align: center;
  text-transform: uppercase;
}

.duet-console__entry--command .duet-console__entry-type {
  border-color: color-mix(in srgb, #22d3ee 42%, var(--border));
  background: color-mix(in srgb, #22d3ee 10%, var(--bg-elevated));
  color: #67e8f9;
}

.duet-console__entry--warning .duet-console__entry-type {
  border-color: color-mix(in srgb, #facc15 45%, var(--border));
  background: color-mix(in srgb, #facc15 10%, var(--bg-elevated));
  color: #fde047;
}

.duet-console__entry--error .duet-console__entry-type {
  border-color: color-mix(in srgb, #f87171 46%, var(--border));
  background: color-mix(in srgb, #f87171 10%, var(--bg-elevated));
  color: #fca5a5;
}

.duet-console__entry-content {
  display: block;
  min-width: 0;
  max-height: 1.5em;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.duet-console__entry.is-expanded .duet-console__entry-content {
  max-height: none;
  overflow: visible;
  white-space: pre-wrap;
}

.duet-console__entry-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
  min-width: 0;
}

.duet-console__payload-pill {
  align-self: center;
  min-height: 20px;
  padding: 1px 7px;
  border: 1px solid color-mix(in srgb, #60a5fa 35%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, #60a5fa 9%, var(--bg-elevated));
  color: #93c5fd;
  font-family: inherit;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  cursor: pointer;
}

.duet-console__payload-pill:hover,
.duet-console__payload-pill.is-active {
  background: color-mix(in srgb, #60a5fa 18%, var(--bg-elevated));
  color: #bfdbfe;
}

.duet-console__payload-pill--xml {
  border-color: color-mix(in srgb, #34d399 35%, var(--border));
  background: color-mix(in srgb, #34d399 9%, var(--bg-elevated));
  color: #86efac;
}

.duet-console__payload-pill--xml:hover,
.duet-console__payload-pill--xml.is-active {
  background: color-mix(in srgb, #34d399 18%, var(--bg-elevated));
  color: #bbf7d0;
}

.duet-console__entry--command .duet-console__entry-content {
  color: #67e8f9;
}

.duet-console__entry--warning .duet-console__entry-content {
  color: #fde68a;
}

.duet-console__entry--error .duet-console__entry-content {
  color: #fecaca;
}

.duet-console__cmd-prefix {
  color: #3b82f6;
  font-weight: 700;
}

/* ── Search highlight ────────────────────────────────────────────────────── */
.duet-console__search-highlight {
  background: #854d0e;
  color: #fef08a;
  border-radius: 2px;
  padding: 0 1px;
}

.duet-console__viewer-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(2, 6, 23, 0.72);
  backdrop-filter: blur(4px);
}

.duet-console__viewer {
  display: flex;
  flex-direction: column;
  width: min(920px, 100%);
  max-height: min(760px, 88vh);
  border: 1px solid color-mix(in srgb, #60a5fa 28%, var(--border));
  border-radius: 8px;
  background: var(--bg-panel);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42);
  overflow: hidden;
}

.duet-console__viewer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-elevated) 82%, var(--bg-panel));
}

.duet-console__viewer-header > div {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.duet-console__viewer-kind {
  padding: 2px 7px;
  border: 1px solid color-mix(in srgb, #60a5fa 42%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, #60a5fa 12%, var(--bg-elevated));
  color: #93c5fd;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.duet-console__viewer-kind--xml {
  border-color: color-mix(in srgb, #34d399 42%, var(--border));
  background: color-mix(in srgb, #34d399 12%, var(--bg-elevated));
  color: #86efac;
}

.duet-console__viewer-title {
  min-width: 0;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 750;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.duet-console__viewer-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--bg-elevated);
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
}

.duet-console__viewer-close:hover {
  border-color: color-mix(in srgb, #f87171 42%, var(--border));
  color: #fecaca;
}

.duet-console__viewer-body {
  margin: 0;
  padding: 14px 0;
  background: #0b1020;
  color: #d6deeb;
  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
  font-size: 12px;
  line-height: 1.6;
  overflow: auto;
  white-space: pre;
}

.duet-console__viewer-body--xml {
  color: #d7fbe8;
}

.duet-console__json-viewer {
  flex: 1;
  padding: 16px 18px 18px;
  background: #111827;
  color: #f8fafc;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  overflow: auto;
}

.duet-console__json-group,
.duet-console__json-row {
  min-width: max-content;
}

.duet-console__json-row,
.duet-console__json-toggle {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  min-height: 30px;
  padding: 5px 8px;
  border-radius: 6px;
}

.duet-console__json-row:hover,
.duet-console__json-toggle:hover {
  background: rgba(255, 255, 255, 0.06);
}

.duet-console__json-toggle {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.duet-console__json-toggle svg {
  margin-top: 4px;
  color: #cbd5e1;
  flex-shrink: 0;
}

.duet-console__json-children {
  margin-left: 24px;
  padding-left: 12px;
  border-left: 1px solid rgba(148, 163, 184, 0.4);
}

.duet-console__json-key {
  min-width: 100px;
  color: #bfdbfe;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.duet-console__json-summary {
  color: #cbd5e1;
  font-weight: 650;
}

.duet-console__json-value {
  color: #f8fafc;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.duet-console__json-value--string {
  color: #fde68a;
}

.duet-console__json-value--number {
  color: #86efac;
  font-variant-numeric: tabular-nums;
}

.duet-console__json-value--boolean,
.duet-console__json-value--null {
  color: #f5d0fe;
}

.duet-console__viewer-body code {
  display: block;
  min-width: max-content;
}

.duet-console__viewer-line {
  display: block;
  padding: 0 16px;
}

.duet-console__viewer-line:hover {
  background: rgba(148, 163, 184, 0.08);
}

.duet-console__token--key {
  color: #9cdcfe;
}

.duet-console__token--string {
  color: #ce9178;
}

.duet-console__token--number {
  color: #b5cea8;
}

.duet-console__token--literal {
  color: #c586c0;
}

.duet-console__token--punctuation {
  color: #8b9bb4;
}

.duet-console__token--tag {
  color: #7dd3fc;
}

.duet-console__token--attribute {
  color: #f9e2af;
}

/* ── Scroll to bottom button ─────────────────────────────────────────────── */
.duet-console__scroll-bottom-btn {
  position: absolute;
  bottom: 54px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(39, 39, 42, 0.93);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 11px;
  font-family: inherit;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
}

/* ── Input area ──────────────────────────────────────────────────────────── */
.duet-console__input-area {
  position: relative;
  flex-shrink: 0;
}

/* ── Autocomplete dropdown ───────────────────────────────────────────────── */
.duet-console__suggestions-dropdown {
  position: absolute;
  bottom: 100%;
  left: 8px;
  right: 50px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 4px;
  max-height: 240px;
  overflow-y: auto;
  z-index: 20;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.5);
}

.duet-console__suggestion-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 12px;
  transition: background 0.1s;
}

.duet-console__suggestion-item.is-selected {
  background: var(--border);
}

.duet-console__suggestion-code {
  color: var(--info);
  font-weight: 700;
  min-width: 40px;
  flex-shrink: 0;
}

.duet-console__suggestion-desc {
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Input row ───────────────────────────────────────────────────────────── */
.duet-console__input-row {
  display: flex;
  gap: 6px;
  padding: 8px 10px;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-panel) 92%, var(--bg-elevated));
  flex-shrink: 0;
}

.duet-console__input {
  flex: 1;
  min-height: 32px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 13px;
  outline: none;
}

.duet-console__input--multiline {
  resize: vertical;
  min-height: 60px;
  max-height: 150px;
  line-height: 1.4;
}

/* ── G-code syntax highlight backdrop ──────────────────────────────────── */
.duet-console__input-highlight-wrap {
  position: relative;
  flex: 1;
}

.duet-console__input-highlight-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 6px 10px;
  border: 1px solid transparent; /* match textarea border width */
  border-radius: 4px;
  background: var(--bg-primary);
  color: transparent; /* hide the text; only spans are visible */
  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
  font-size: 13px;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-all;
  overflow: hidden;
  pointer-events: none;
  /* Prevent text selection on backdrop */
  user-select: none;
  /* spans inside have their own colours */
}

.duet-console__input-highlight-backdrop span {
  /* Make the span text visible against the transparent base text */
  color: inherit;
}

/* When highlighted, the textarea itself becomes transparent so the backdrop shows */
.duet-console__input--highlighted {
  background: transparent !important;
  position: relative;
  z-index: 1;
  color: transparent;
  caret-color: var(--text-primary);
}

.duet-console__send-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  min-width: 38px;
  height: 34px;
  border: 1px solid #3b82f6;
  border-radius: 4px;
  background: #1e3a5f;
  color: #60a5fa;
  cursor: pointer;
  flex-shrink: 0;
}

.duet-console__send-btn.is-disabled {
  opacity: 0.4;
}

@media (max-width: 720px) {
  .duet-console__entry {
    grid-template-columns: 38px 64px minmax(0, 1fr);
  }

  .duet-console__entry-type {
    display: none;
  }
}

@media (max-width: 520px) {
  .duet-console__toolbar,
  .duet-console__filter-bar {
    align-items: stretch;
  }

  .duet-console__quick-buttons,
  .duet-console__toolbar-right,
  .duet-console__filter-checks,
  .duet-console__filter-search-wrap {
    width: 100%;
  }

  .duet-console__quick-btn,
  .duet-console__clear-btn {
    justify-content: center;
  }

  .duet-console__entry {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 6px;
  }

  .duet-console__timestamp {
    display: none;
  }
}
/* ===== DuetJobStatus ===== */

/* --- Root container --- */
.duet-job__root {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 12px 0;
}

/* --- No-job placeholder --- */
.duet-job__no-job {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px 24px;
  color: var(--text-muted);
}

.duet-job__no-job-primary {
  margin: 0;
  font-size: 16px;
}

.duet-job__no-job-secondary {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
}

/* --- Print status header --- */
.duet-job__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--canvas-bg);
  border-radius: 8px;
  margin-bottom: 12px;
}

.duet-job__header-info {
  min-width: 0;
  flex: 1;
}

.duet-job__header-filename {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.duet-job__header-filename-icon {
  margin-right: 6px;
  vertical-align: -2px;
}

.duet-job__header-status {
  font-size: 12px;
  margin-top: 2px;
}

/* statusColor is dynamic, applied inline */
.duet-job__header-status-label {
  font-weight: 500;
}

.duet-job__header-actions {
  display: flex;
  gap: 6px;
  margin-left: 12px;
  flex-shrink: 0;
}

/* --- Progress section --- */
.duet-job__progress-bar-wrap {
  margin-bottom: 10px;
}

.duet-job__progress-bar-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
  font-size: 12px;
  color: var(--text-secondary);
}

.duet-job__progress-bar-pct {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}

.duet-job__progress-bar-track {
  height: 10px;
  background: var(--canvas-bg);
  border-radius: 5px;
  overflow: hidden;
}

/* width is dynamic — kept as inline style */
.duet-job__progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--info), var(--success));
  border-radius: 5px;
  transition: width 0.5s ease;
}

/* --- Baby stepping --- */
.duet-job__babystep-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 0;
}

.duet-job__babystep-btn {
  width: 40px;
  height: 40px;
}

.duet-job__babystep-display {
  text-align: center;
  min-width: 100px;
}

.duet-job__babystep-label {
  font-size: 10px;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.duet-job__babystep-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  font-family: monospace;
}

.duet-job__babystep-hint {
  font-size: 10px;
  color: var(--text-muted);
  text-align: center;
}

/* --- Speed/Flow override --- */
.duet-job__slider-section {
  padding: 4px 0;
}

/* --- Webcam --- */
.duet-job__webcam-wrap {
  border-radius: 6px;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--border);
}

.duet-job__webcam-img {
  width: 100%;
  display: block;
}

/* --- SVG charts (width/height 100% auto, display block) --- */
.duet-job__svg-chart {
  width: 100%;
  height: auto;
  display: block;
}

/* --- Object cancellation --- */
.duet-job__obj-map-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
}

/* SVG inline styles retained for background/border (applied via style attr on svg) */

.duet-job__obj-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Object row — background/border are dynamic based on isCurrent, kept inline */
.duet-job__obj-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  border-radius: 6px;
}

.duet-job__obj-row-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.duet-job__obj-index {
  font-size: 10px;
  color: var(--text-muted);
  font-family: monospace;
  flex-shrink: 0;
}

/* color/text-decoration/font-weight are dynamic, kept inline */
.duet-job__obj-name {
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* color/background are dynamic, kept inline */
.duet-job__obj-badge {
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}

.duet-job__obj-actions {
  flex-shrink: 0;
  margin-left: 8px;
}

.duet-job__obj-confirm-row {
  display: flex;
  gap: 4px;
  align-items: center;
}

.duet-job__obj-confirm-label {
  font-size: 10px;
  color: var(--warning);
}

.duet-job__obj-confirm-btn {
  width: 28px;
  height: 28px;
  font-size: 10px;
}

.duet-job__obj-cancel-btn {
  width: 28px;
  height: 28px;
}

/* --- JobDetailRow --- */
.duet-job__detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 0;
  font-size: 12px;
}

.duet-job__detail-label {
  color: var(--text-muted);
}

/* color/font-weight are dynamic for highlight, kept inline */
.duet-job__detail-value {
  font-family: monospace;
}

/* --- SliderRow --- */
.duet-job__slider-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
}

.duet-job__slider-label {
  font-size: 12px;
  color: var(--text-muted);
  width: 44px;
  flex-shrink: 0;
}

.duet-job__slider-input {
  flex: 1;
  accent-color: var(--info);
}

.duet-job__slider-value {
  font-size: 13px;
  color: var(--text-primary);
  font-family: monospace;
  width: 52px;
  text-align: right;
}

/* Theme refresh */
.duet-job__root {
  --dj-bg: var(--bg-primary, #f5f7fb);
  --dj-panel: var(--bg-panel, #ffffff);
  --dj-soft: var(--bg-secondary, #f8fafc);
  --dj-elevated: var(--bg-elevated, #f1f5f9);
  --dj-hover: var(--bg-hover, #eaf2ff);
  --dj-border: var(--border, #d7dee8);
  --dj-border-soft: var(--border-light, #e6ebf2);
  --dj-text: var(--text-primary, #162033);
  --dj-muted: var(--text-secondary, #5b6678);
  --dj-subtle: var(--text-muted, #7a8494);
  --dj-accent: var(--accent, #2f80ed);
  --dj-success: var(--success, #22a06b);
  --dj-warning: var(--warning, #b7791f);
  --dj-danger: var(--error, #d64545);
  --dj-purple: #8b5cf6;

  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  padding: 14px 16px 18px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--dj-accent) 5%, transparent), transparent 260px),
    var(--dj-bg);
  color: var(--dj-text);
}

.duet-job__root--idle {
  align-content: start;
}

.duet-job__header,
.duet-job__queue,
.duet-job__root .job-section {
  border: 1px solid var(--dj-border);
  background: var(--dj-panel);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}

.duet-job__header {
  gap: 12px;
  margin: 0 !important;
  padding: 12px 14px !important;
  border-radius: 10px !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--dj-accent) 8%, transparent), transparent 58%),
    var(--dj-panel) !important;
}

.duet-job__header-filename {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--dj-text) !important;
  font-size: 15px;
}

.duet-job__header-filename-icon {
  color: var(--dj-purple);
  margin: 0;
  flex-shrink: 0;
}

.duet-job__header-status {
  display: flex;
  margin-top: 6px;
}

.duet-job__header-status-label {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 9px;
  border: 1px solid var(--dj-border);
  border-radius: 999px;
  background: var(--dj-soft);
  color: var(--dj-muted) !important;
  font-size: 11px;
  font-weight: 700;
}

.duet-job__header-status-label--printing {
  border-color: color-mix(in srgb, var(--dj-success) 38%, transparent);
  background: color-mix(in srgb, var(--dj-success) 14%, var(--dj-panel));
  color: var(--dj-success) !important;
}

.duet-job__header-status-label--paused {
  border-color: color-mix(in srgb, var(--dj-warning) 38%, transparent);
  background: color-mix(in srgb, var(--dj-warning) 14%, var(--dj-panel));
  color: var(--dj-warning) !important;
}

.duet-job__header-status-label--simulating {
  border-color: color-mix(in srgb, var(--dj-accent) 38%, transparent);
  background: color-mix(in srgb, var(--dj-accent) 14%, var(--dj-panel));
  color: var(--dj-accent) !important;
}

.duet-job__header-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.duet-job__queue {
  margin: 0 !important;
  border-radius: 10px !important;
  overflow: hidden;
}

.duet-job__queue-header {
  min-height: 42px;
  padding: 10px 12px !important;
  background: var(--dj-elevated) !important;
  color: var(--dj-text) !important;
  border-bottom-color: var(--dj-border) !important;
}

.duet-job__queue-header input[type="checkbox"] {
  accent-color: var(--dj-accent);
}

.duet-job__queue-body {
  background: var(--dj-panel);
}

.duet-job__queue-quick-add {
  grid-template-columns: minmax(180px, 1.4fr) 74px minmax(130px, 0.9fr) minmax(96px, 0.7fr) minmax(86px, 0.6fr) !important;
  gap: 8px !important;
  padding: 12px !important;
  background: color-mix(in srgb, var(--dj-soft) 78%, var(--dj-panel));
}

.duet-job__queue-quick-add input,
.duet-job__queue-quick-add select,
.duet-job__queue-row select,
.duet-job__queue button,
.duet-job__queue-footer button {
  min-height: 30px;
  border: 1px solid var(--dj-border);
  border-radius: 7px;
  background: var(--dj-panel);
  color: var(--dj-text);
  font: inherit;
}

.duet-job__queue-quick-add input,
.duet-job__queue-quick-add select,
.duet-job__queue-row select {
  padding: 5px 8px;
  min-width: 0;
}

.duet-job__queue-quick-add button,
.duet-job__queue-row button,
.duet-job__queue-footer button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 5px 9px;
  cursor: pointer;
  transition: background 0.14s, border-color 0.14s, color 0.14s, transform 0.1s;
}

.duet-job__queue-quick-add button:hover:not(:disabled),
.duet-job__queue-row button:hover:not(:disabled),
.duet-job__queue-footer button:hover:not(:disabled) {
  background: var(--dj-hover);
  border-color: color-mix(in srgb, var(--dj-accent) 48%, var(--dj-border));
  color: var(--dj-text);
  transform: translateY(-1px);
}

.duet-job__queue button:disabled,
.duet-job__queue-footer button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.duet-job__queue-row {
  grid-template-columns: 28px minmax(150px, 1fr) minmax(120px, 170px) minmax(86px, 96px) minmax(132px, auto) !important;
  min-height: 56px;
  padding: 10px 12px !important;
  border-bottom-color: var(--dj-border-soft) !important;
  transition: background 0.14s;
}

.duet-job__queue-row:hover {
  background: color-mix(in srgb, var(--dj-accent) 5%, transparent);
}

.duet-job__queue-row button {
  width: 30px;
  height: 30px;
  padding: 0;
}

.duet-job__queue-footer {
  border-top-color: var(--dj-border) !important;
  background: var(--dj-soft);
}

.duet-job__root .job-section {
  position: relative;
  margin: 0;
  padding: 13px 14px;
  border-radius: 10px;
  overflow: hidden;
}

.duet-job__root .job-section::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: color-mix(in srgb, var(--dj-accent) 70%, var(--dj-purple));
  opacity: 0.24;
}

.duet-job__root .job-section-title {
  gap: 7px;
  margin-bottom: 12px;
  color: var(--dj-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.duet-job__root .job-section-title svg {
  color: var(--dj-accent);
}

.duet-job__root .job-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: 8px;
}

.duet-job__detail-row {
  align-items: flex-start;
  gap: 6px;
  min-height: 42px;
  padding: 8px 9px;
  border: 1px solid var(--dj-border-soft);
  border-radius: 8px;
  background: var(--dj-soft);
}

.duet-job__detail-label {
  color: var(--dj-muted);
}

.duet-job__detail-value {
  color: var(--dj-text);
  font-family: "Cascadia Mono", "Consolas", monospace;
  font-weight: 700;
  text-align: right;
}

.duet-job__progress-bar-wrap {
  padding: 12px;
  border: 1px solid var(--dj-border-soft);
  border-radius: 9px;
  background: var(--dj-soft);
}

.duet-job__progress-bar-row {
  align-items: baseline;
  color: var(--dj-muted);
}

.duet-job__progress-bar-pct {
  color: var(--dj-text);
  font-size: 22px;
}

.duet-job__progress-bar-track {
  height: 12px;
  border: 1px solid var(--dj-border-soft);
  border-radius: 999px;
  background: var(--dj-elevated);
}

.duet-job__progress-bar-fill {
  border-radius: inherit;
  background: linear-gradient(90deg, var(--dj-accent), var(--dj-success));
  box-shadow: 0 0 14px color-mix(in srgb, var(--dj-accent) 24%, transparent);
}

.duet-job__thumbnail {
  display: grid;
  place-items: center;
}

.duet-job__thumbnail-img {
  width: 100%;
  max-width: 260px;
  border: 1px solid var(--dj-border);
  border-radius: 8px;
  background: var(--dj-elevated);
  object-fit: contain;
}

.duet-job__thumbnail-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 96px;
  width: 100%;
  border: 1px dashed var(--dj-border);
  border-radius: 8px;
  background: var(--dj-soft);
  color: var(--dj-subtle);
  font-size: 12px;
}

.duet-job__thumbnail-state--loading {
  min-height: 128px;
  flex-direction: row;
}

.duet-job__babystep-row {
  gap: 14px;
  padding: 10px 0;
}

.duet-job__babystep-btn {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
}

.duet-job__babystep-display {
  min-width: 126px;
  padding: 8px 14px;
  border: 1px solid var(--dj-border-soft);
  border-radius: 9px;
  background: var(--dj-soft);
}

.duet-job__babystep-label {
  color: var(--dj-muted);
}

.duet-job__babystep-value {
  color: var(--dj-text);
  font-family: "Cascadia Mono", "Consolas", monospace;
}

.duet-job__babystep-hint {
  color: var(--dj-subtle);
}

.duet-job__slider-row {
  gap: 12px;
  min-height: 36px;
}

.duet-job__slider-label,
.duet-job__slider-value {
  color: var(--dj-muted);
}

.duet-job__slider-input {
  accent-color: var(--dj-accent);
}

.duet-job__webcam-wrap,
.duet-job__obj-row {
  border-color: var(--dj-border);
}

.duet-job__svg-chart {
  border: 1px solid var(--dj-border-soft);
  border-radius: 8px;
  background: var(--dj-soft);
}

.duet-job__no-job {
  min-height: 180px;
  margin: 0;
  border: 1px dashed color-mix(in srgb, var(--dj-accent) 35%, var(--dj-border));
  border-radius: 10px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--dj-accent) 8%, transparent), transparent 65%),
    var(--dj-panel);
  color: var(--dj-subtle);
}

.duet-job__no-job svg {
  color: var(--dj-accent);
}

.duet-job__no-job-primary {
  color: var(--dj-text);
  font-weight: 800;
}

.duet-job__no-job-secondary {
  color: var(--dj-muted);
  text-align: center;
}

.duet-job__root .control-btn {
  border-radius: 7px;
  background: var(--dj-soft);
  color: var(--dj-muted);
}

.duet-job__root .control-btn:hover {
  background: var(--dj-hover);
}

@media (max-width: 760px) {
  .duet-job__root {
    padding: 10px;
  }

  .duet-job__header {
    align-items: stretch;
    flex-direction: column;
  }

  .duet-job__header-actions {
    justify-content: flex-start;
    margin-left: 0;
  }

  .duet-job__queue-quick-add,
  .duet-job__queue-row {
    grid-template-columns: 1fr !important;
  }

  .duet-job__queue-row {
    gap: 7px !important;
  }

  .duet-job__queue-row > span:first-child {
    text-align: left !important;
  }

  .duet-job__queue-row > div:last-child {
    justify-content: flex-start !important;
    flex-wrap: wrap;
  }

  .duet-job__root .job-detail-grid {
    grid-template-columns: 1fr;
  }

  .duet-job__detail-row {
    min-height: 0;
  }

  .duet-job__babystep-row {
    flex-wrap: wrap;
  }
}
.fc__trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  font-size: 12px;
  border: 1px solid var(--panelBorder, #444);
  border-radius: 6px;
  background: var(--surface, #1f2030);
  color: #e6e6f0;
  cursor: pointer;
  margin: 0 14px 10px;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.fc__trigger:hover {
  border-color: #ffa94d;
  color: #ffa94d;
  background: color-mix(in srgb, #ffa94d 10%, var(--surface, #1f2030));
}

.fc__overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(3px);
  animation: fc-fade 0.15s ease;
}

.fc__dialog {
  background: #1c1c28;
  border: 1px solid #2b2b40;
  border-radius: 10px;
  width: min(520px, 92vw);
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: fc-pop 0.18s cubic-bezier(0.2, 1.0, 0.3, 1.0);
}

@keyframes fc-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fc-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.fc__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #2b2b40;
  background: linear-gradient(180deg, #232334, #1c1c28);
}

.fc__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #e6e6f0;
}

.fc__close {
  background: transparent;
  border: none;
  color: #8a8aa3;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
}

.fc__close:hover {
  color: #e6e6f0;
  background: rgba(255, 255, 255, 0.05);
}

.fc__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid #2b2b40;
}

.fc__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 6px;
  background: #252538;
  color: #8a8aa3;
  font-size: 11px;
  border: 1px solid #2b2b40;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.fc__pill.is-active {
  background: color-mix(in srgb, #ffa94d 18%, #252538);
  color: #ffcc88;
  border-color: #ffa94d;
}

.fc__pill.is-done {
  background: color-mix(in srgb, #4caf50 20%, #252538);
  color: #9ef0a1;
  border-color: #4caf50;
}

.fc__pill-num {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  font-size: 10px;
  font-weight: 700;
}

.fc__body {
  padding: 12px 16px 14px;
  overflow-y: auto;
}

.fc__intro {
  font-size: 12px;
  color: #b4b4cc;
  line-height: 1.5;
  margin-bottom: 10px;
}

.fc__mode {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
  font-size: 11px;
  color: #b4b4cc;
}

.fc__mode label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

.fc__mode code {
  font-family: 'Consolas', 'JetBrains Mono', monospace;
  background: #1a1a28;
  padding: 1px 5px;
  border-radius: 3px;
  color: #ffa94d;
}

.fc__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
  margin-bottom: 14px;
}

.fc__field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
  color: #8a8aa3;
}

.fc__field input {
  background: #1a1a28;
  color: #e6e6f0;
  border: 1px solid #2b2b40;
  border-radius: 4px;
  padding: 4px 7px;
  font-size: 12px;
  outline: none;
  font-variant-numeric: tabular-nums;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.fc__field input:focus {
  border-color: #ffa94d;
  box-shadow: 0 0 0 2px color-mix(in srgb, #ffa94d 30%, transparent);
}

.fc__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

.fc__btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  font-size: 12px;
  background: #252538;
  border: 1px solid #2b2b40;
  color: #e6e6f0;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.fc__btn:hover { border-color: #ffa94d; color: #ffa94d; }

.fc__btn--primary {
  background: #ffa94d;
  border-color: #ffa94d;
  color: #1a1a28;
  font-weight: 600;
}

.fc__btn--primary:hover {
  background: #ffc07a;
  color: #1a1a28;
}

.fc__status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #b4b4cc;
  padding: 14px 0;
}

.fc__status--success { color: #9ef0a1; }
.fc__status--error { color: #ffb0b0; }

.fc__spin { animation: fc-spin 0.8s linear infinite; }
@keyframes fc-spin { to { transform: rotate(360deg); } }
/* =============================================================================
   DuetFileManager shell, navigation, and toolbar
   ============================================================================= */

.duet-file-mgr {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-size: 13px;
  overflow: hidden;
}

.duet-file-mgr__tab-bar {
  display: flex;
  align-items: stretch;
  background-color: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  padding: 0;
  gap: 0;
}

.duet-file-mgr__tab {
  padding: 8px 18px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
  font-family: inherit;
}

.duet-file-mgr__tab.is-active {
  color: var(--text-primary);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

.duet-file-mgr__warning-banner {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background-color: rgba(255, 152, 0, 0.12);
  border-bottom: 1px solid rgba(255, 152, 0, 0.25);
  font-size: 12px;
  color: var(--warning);
}

.duet-file-mgr__warning-icon {
  font-size: 14px;
}

.duet-file-mgr__breadcrumbs {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 10px;
  background-color: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  flex-wrap: wrap;
  min-height: 32px;
}

.duet-file-mgr__breadcrumb-wrap {
  display: flex;
  align-items: center;
}

.duet-file-mgr__breadcrumb-item {
  cursor: pointer;
  color: var(--info);
  padding: 2px 4px;
  border-radius: 3px;
  border: none;
  background: none;
  font-size: 12px;
  font-family: inherit;
}

.duet-file-mgr__breadcrumb-item.is-current {
  color: var(--text-primary);
  font-weight: 600;
}

.duet-file-mgr__breadcrumb-sep {
  color: var(--text-muted);
  display: flex;
  align-items: center;
}

.duet-file-mgr__toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background-color: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
}

.duet-file-mgr__toolbar-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 12px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: var(--bg-elevated);
  color: var(--text-primary);
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
}

.duet-file-mgr__toolbar-btn--danger {
  border-color: var(--error);
  color: var(--error);
}

.duet-file-mgr__toolbar-btn--danger:hover:not(:disabled) {
  background: var(--error);
  color: #fff;
}

.duet-file-mgr__checkbox {
  cursor: pointer;
  accent-color: var(--accent);
}

.duet-file-mgr__search-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background-color: var(--bg-panel);
  border-bottom: 1px solid var(--border);
}

.duet-file-mgr__search-icon {
  color: var(--text-muted);
  flex-shrink: 0;
}

.duet-file-mgr__search-input {
  flex: 1;
  padding: 4px 8px;
  font-size: 12px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  outline: none;
  font-family: inherit;
}

.duet-file-mgr__search-input::placeholder {
  color: var(--text-muted);
}

.duet-file-mgr__search-input:focus {
  border-color: var(--accent);
}

.duet-file-mgr__search-clear {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
  border-radius: 3px;
}

.duet-file-mgr__search-clear:hover {
  color: var(--text-primary);
}

.duet-file-mgr__progress-container {
  flex: 1;
  margin-left: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.duet-file-mgr__progress-bar {
  flex: 1;
  height: 6px;
  background-color: var(--border-strong);
  border-radius: 3px;
  overflow: hidden;
}

.duet-file-mgr__progress-fill {
  height: 100%;
  background-color: var(--success);
  border-radius: 3px;
  transition: width 0.2s;
}

.duet-file-mgr__progress-text {
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.duet-file-mgr__body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.duet-file-mgr__file-list {
  flex: 1;
  overflow: auto;
  position: relative;
}

.duet-file-mgr__table {
  width: 100%;
  border-collapse: collapse;
}

.duet-file-mgr__th {
  position: sticky;
  top: 0;
  background-color: var(--bg-elevated);
  text-align: left;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-strong);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.duet-file-mgr__th--no-sort {
  cursor: default;
}

.duet-file-mgr__th-content {
  display: flex;
  align-items: center;
  gap: 4px;
}

.duet-file-mgr__td {
  padding: 5px 10px;
  border-bottom: 1px solid var(--bg-elevated);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.duet-file-mgr__td--muted {
  color: var(--text-secondary);
}

.duet-file-mgr__td--small {
  font-size: 11px;
}

.duet-file-mgr__row {
  cursor: pointer;
  transition: background-color 0.1s;
}

.duet-file-mgr__row:hover {
  background-color: var(--bg-hover);
}

.duet-file-mgr__row.is-selected {
  background-color: var(--bg-active);
}

.duet-file-mgr__name-cell {
  display: flex;
  align-items: center;
  gap: 6px;
}

.duet-file-mgr__name--dir {
  color: var(--warning);
}

.duet-file-mgr__name--file {
  color: var(--text-primary);
}

.duet-file-mgr__icon--dir {
  color: var(--warning);
}

.duet-file-mgr__icon--file {
  color: var(--text-muted);
}

.duet-file-mgr__icon--play {
  color: var(--success);
}

.duet-file-mgr__icon--simulate {
  color: var(--info);
}

.duet-file-mgr__icon--edit {
  color: var(--success);
}

.duet-file-mgr__icon--download {
  color: var(--accent);
}

.duet-file-mgr__icon--delete {
  color: var(--error);
}

/* ── Thumbnail cell ─────────────────────────────────────────────────────── */

.duet-file-mgr__td--thumb {
  padding: 3px 6px;
  width: 56px;
  text-align: center;
  vertical-align: middle;
}

.duet-file-mgr__thumb-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 38px;
}

.duet-file-mgr__thumb-img {
  max-width: 52px;
  max-height: 38px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 3px;
  display: block;
}

.duet-file-mgr__thumb-spin {
  color: var(--text-muted);
  animation: spin 1s linear infinite;
}

.duet-file-mgr__action-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
}

.duet-file-mgr__actions {
  display: flex;
  gap: 2px;
  align-items: center;
}

.duet-file-mgr__info-panel {
  width: 280px;
  border-left: 1px solid var(--border);
  background-color: var(--bg-panel);
  overflow: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
}

.duet-file-mgr__info-panel-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
  word-break: break-all;
}

.duet-file-mgr__info-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.duet-file-mgr__info-label {
  color: var(--text-muted);
  flex-shrink: 0;
}

.duet-file-mgr__info-value {
  color: var(--text-primary);
  text-align: right;
  word-break: break-all;
}

.duet-file-mgr__thumbnail {
  width: 100%;
  border-radius: 4px;
  background-color: var(--bg-primary);
  border: 1px solid var(--border);
}

.duet-file-mgr__thumbnail-center {
  text-align: center;
  margin-bottom: 4px;
}

.duet-file-mgr__thumbnail-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  color: var(--text-muted);
  gap: 6px;
}

.duet-file-mgr__thumbnail-caption {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

.duet-file-mgr__close-info-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-self: flex-end;
}

.duet-file-mgr__drop-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(33, 150, 243, 0.15);
  border: 2px dashed var(--accent);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--accent);
  font-weight: 600;
  z-index: 10;
  pointer-events: none;
}

.duet-file-mgr__drop-icon {
  margin-right: 8px;
}

.duet-file-mgr__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  color: var(--text-muted);
  gap: 8px;
}

.duet-file-mgr__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  color: var(--text-muted);
}

.duet-file-mgr__dialog-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.duet-file-mgr__dialog {
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 20px;
  min-width: 320px;
  color: var(--text-primary);
}

.duet-file-mgr__dialog-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
}

.duet-file-mgr__dialog-input {
  width: 100%;
  padding: 6px 8px;
  font-size: 13px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  outline: none;
  box-sizing: border-box;
  font-family: inherit;
}

.duet-file-mgr__dialog-btns {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 14px;
}

.duet-file-mgr__dialog-btn {
  padding: 5px 14px;
  font-size: 12px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  cursor: pointer;
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-family: inherit;
}

.duet-file-mgr__dialog-btn--primary {
  padding: 5px 14px;
  font-size: 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background: var(--accent);
  color: #fff;
  font-family: inherit;
}
/* =============================================================================
   DuetFilamentManager — BEM styles
   All colour references use CSS custom properties set by themeStore.
   ============================================================================= */

/* ── Container ───────────────────────────────────────────────────────────── */
.duet-filament-mgr {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-size: 13px;
  overflow: hidden;
}

/* ── Toolbar ─────────────────────────────────────────────────────────────── */
.duet-filament-mgr__toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background-color: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.duet-filament-mgr__toolbar-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 12px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: var(--bg-elevated);
  color: var(--text-primary);
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
}

.duet-filament-mgr__toolbar-btn--primary {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 12px;
  border: none;
  border-radius: 4px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
}

.duet-filament-mgr__error {
  color: var(--error);
  font-size: 12px;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Scroll area ─────────────────────────────────────────────────────────── */
.duet-filament-mgr__scroll-area {
  flex: 1;
  overflow: auto;
}

/* ── Empty / loading states ──────────────────────────────────────────────── */
.duet-filament-mgr__empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px 24px;
  color: var(--text-muted);
}

.duet-filament-mgr__empty-text {
  margin: 0;
  font-size: 14px;
  color: var(--text-secondary);
}

.duet-filament-mgr__empty-hint {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
}

.duet-filament-mgr__loading-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 24px 12px;
  color: var(--text-muted);
  font-size: 13px;
}

/* ── Table ───────────────────────────────────────────────────────────────── */
.duet-filament-mgr__table {
  width: 100%;
  border-collapse: collapse;
}

.duet-filament-mgr__thead {
  background-color: var(--bg-panel);
  position: sticky;
  top: 0;
  z-index: 1;
}

.duet-filament-mgr__th {
  padding: 7px 12px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.duet-filament-mgr__th--center {
  text-align: center;
}

.duet-filament-mgr__th--right {
  text-align: right;
}

.duet-filament-mgr__tr {
  border-bottom: 1px solid var(--bg-elevated);
  transition: background 0.1s;
}

.duet-filament-mgr__tr:hover {
  background-color: var(--bg-hover);
}

.duet-filament-mgr__td {
  padding: 7px 12px;
  vertical-align: middle;
}

.duet-filament-mgr__td--center {
  text-align: center;
}

.duet-filament-mgr__td--right {
  text-align: right;
}

/* ── Name cell ───────────────────────────────────────────────────────────── */
.duet-filament-mgr__name-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  color: var(--text-primary);
}

/* ── Rename form ─────────────────────────────────────────────────────────── */
.duet-filament-mgr__rename-form {
  display: flex;
  gap: 4px;
  align-items: center;
}

.duet-filament-mgr__rename-input {
  padding: 2px 6px;
  font-size: 13px;
  border: 1px solid var(--accent);
  border-radius: 3px;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  outline: none;
  width: 160px;
  font-family: inherit;
}

/* ── Icon buttons ────────────────────────────────────────────────────────── */
.duet-filament-mgr__icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 3px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--text-muted);
}

.duet-filament-mgr__icon-btn--edit {
  color: var(--info);
}

.duet-filament-mgr__icon-btn--danger {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 3px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--error);
}

/* ── Actions group ───────────────────────────────────────────────────────── */
.duet-filament-mgr__actions {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}

/* ── Confirm / cancel buttons ────────────────────────────────────────────── */
.duet-filament-mgr__confirm-btn {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px 10px;
  font-size: 12px;
  border: none;
  border-radius: 4px;
  background: var(--success);
  color: #fff;
  cursor: pointer;
  font-family: inherit;
}

.duet-filament-mgr__cancel-btn {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px 10px;
  font-size: 12px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
}

/* ── New filament bar ────────────────────────────────────────────────────── */
.duet-filament-mgr__new-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background-color: var(--bg-panel);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.duet-filament-mgr__new-input {
  flex: 1;
  padding: 4px 8px;
  font-size: 12px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  outline: none;
  font-family: inherit;
}

/* ── Loaded-in badge ────────────────────────────────────────────────────── */
.duet-filament-mgr__loaded-badge {
  display: inline-block;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 3px;
  background: var(--accent);
  color: #fff;
  white-space: nowrap;
}

.duet-filament-mgr__not-loaded {
  color: var(--text-muted);
  font-size: 12px;
}

/* ── Spool weight inputs ────────────────────────────────────────────────── */
.duet-filament-mgr__spool-input {
  width: 60px;
  padding: 2px 4px;
  font-size: 12px;
  background: var(--bg-input, var(--bg-primary));
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 3px;
  font-family: inherit;
  text-align: center;
}

.duet-filament-mgr__spool-input:focus {
  border-color: var(--accent);
  outline: none;
}

/* ── Remaining filament display ─────────────────────────────────────────── */
.duet-filament-mgr__remaining-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 90px;
}

.duet-filament-mgr__remaining-text {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}

.duet-filament-mgr__remaining-bar-track {
  width: 100%;
  height: 6px;
  background: var(--bg-elevated, #333);
  border-radius: 3px;
  overflow: hidden;
}

.duet-filament-mgr__remaining-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}
/* =============================================================================
   DuetMacros — styles for the macros browser page
   All colour references use CSS custom properties set by themeStore.
   ============================================================================= */

/* ── Root ─────────────────────────────────────────────────────────────────── */
.duet-macros {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: var(--bg-primary);
  font-size: 13px;
  color: var(--text-primary);
}

/* ── Toolbar ─────────────────────────────────────────────────────────────── */
.duet-macros-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

/* ── Macro search input ─────────────────────────────────────────────────── */
.duet-macros-search-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 100px;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-primary);
  margin-left: 4px;
}

.duet-macros-search-icon {
  color: var(--text-muted);
  flex-shrink: 0;
}

.duet-macros-search-input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 12px;
  font-family: inherit;
  outline: none;
  padding: 2px 0;
  min-width: 0;
}

.duet-macros-search-clear {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  padding: 0 2px;
  line-height: 1;
}

/* ── Breadcrumb ──────────────────────────────────────────────────────────── */
.duet-macros-breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  padding: 6px 12px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border-light);
  flex-shrink: 0;
  min-height: 32px;
}

.breadcrumb-segment {
  display: flex;
  align-items: center;
  gap: 2px;
}

.breadcrumb-sep {
  color: var(--text-muted);
  flex-shrink: 0;
}

.breadcrumb-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}

.breadcrumb-btn:hover:not(:disabled) {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.breadcrumb-btn.active,
.breadcrumb-btn:disabled {
  color: var(--text-primary);
  font-weight: 600;
  cursor: default;
  background: transparent;
}

/* ── Quick actions strip ─────────────────────────────────────────────────── */
.duet-macros-quick {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.quick-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.quick-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.quick-macro-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  white-space: nowrap;
}

.quick-macro-btn:hover:not(:disabled) {
  background: var(--bg-hover);
  border-color: var(--accent);
  color: var(--accent);
}

.quick-macro-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ── Macro list ──────────────────────────────────────────────────────────── */
.duet-macros-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;
}

/* ── Drop overlay ───────────────────────────────────────────────────────── */
.duet-macros-drop-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(33, 150, 243, 0.15);
  border: 2px dashed var(--accent);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: var(--accent);
  font-weight: 600;
  z-index: 10;
  pointer-events: none;
}

.duet-macros-drop-icon {
  margin-right: 8px;
}

.duet-macros-empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

/* ── Macro item (folder + file) ──────────────────────────────────────────── */
.macro-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border-light);
  transition: background 0.1s;
  min-height: 0;
}

.macro-item:last-child {
  border-bottom: none;
}

.macro-item.folder {
  cursor: pointer;
}

.macro-item.folder:hover {
  background: var(--bg-hover);
}

.macro-icon {
  color: var(--accent);
  flex-shrink: 0;
}

.macro-name {
  flex: 1;
  font-size: 13px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.macro-item.folder .macro-name {
  font-weight: 500;
  color: var(--text-primary);
}

.macro-chevron {
  color: var(--text-muted);
  flex-shrink: 0;
}

.macro-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.12s;
}

.macro-item:hover .macro-actions {
  opacity: 1;
}

/* ── Running indicator ───────────────────────────────────────────────────── */
.duet-macros-running {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: rgba(59, 130, 246, 0.08);
  border-top: 1px solid rgba(59, 130, 246, 0.2);
  color: var(--accent);
  font-size: 12px;
  font-weight: 500;
  flex-shrink: 0;
}

/* ── Spin animation ──────────────────────────────────────────────────────── */
@keyframes macros-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.duet-macros .spin {
  animation: macros-spin 0.8s linear infinite;
}
/* =============================================================================
   DuetObjectModelBrowser — BEM styles
   All colour references use CSS custom properties set by themeStore.
   ============================================================================= */

/* ── Outer wrapper ───────────────────────────────────────────────────────── */
.duet-obj-browser {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
}

/* ── Panel card ──────────────────────────────────────────────────────────── */
.duet-obj-browser__panel {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
}

/* ── Header row ──────────────────────────────────────────────────────────── */
.duet-obj-browser__header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}

.duet-obj-browser__header-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

/* ── Search wrapper ──────────────────────────────────────────────────────── */
.duet-obj-browser__search-wrap {
  position: relative;
  margin-bottom: 12px;
}

.duet-obj-browser__search-icon {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
}

.duet-obj-browser__search-input {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-primary);
  padding: 6px 8px 6px 28px;
  font-size: 12px;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
}

.duet-obj-browser__search-clear {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
}

/* ── Tree view area ──────────────────────────────────────────────────────── */
.duet-obj-browser__tree {
  max-height: 560px;
  overflow: auto;
  background: var(--bg-primary);
  border-radius: 4px;
  padding: 8px 4px;
  border: 1px solid var(--border);
}

/* ── Empty state ─────────────────────────────────────────────────────────── */
.duet-obj-browser__empty {
  color: var(--text-muted);
  font-size: 12px;
  text-align: center;
  padding: 16px;
}

/* ── Tree nodes ──────────────────────────────────────────────────────────── */
.duet-obj-browser__node-leaf {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: monospace;
  font-size: 12px;
  line-height: 20px;
}

.duet-obj-browser__node-leaf.is-match {
  background: rgba(80, 120, 255, 0.08);
}

.duet-obj-browser__node-spacer {
  width: 14px;
}

.duet-obj-browser__node-container-row {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font-family: monospace;
  font-size: 12px;
  line-height: 20px;
  color: var(--text-primary);
}

.duet-obj-browser__node-container-row.is-match {
  background: rgba(80, 120, 255, 0.08);
}

.duet-obj-browser__node-type {
  color: var(--text-muted);
  margin-left: 6px;
}

.duet-obj-browser__node-sep {
  color: var(--text-muted);
}

/* ── Inline edit controls ───────────────────────────────────────────────── */
.duet-obj-browser__edit-wrap {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.duet-obj-browser__edit-input {
  background: var(--bg-input, var(--bg-primary));
  border: 1px solid var(--accent, #44aaff);
  border-radius: 3px;
  color: var(--text-primary);
  padding: 1px 4px;
  font-size: 12px;
  font-family: monospace;
  outline: none;
  min-width: 80px;
}

.duet-obj-browser__edit-confirm {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  border: none;
  border-radius: 3px;
  background: var(--success, #44cc88);
  color: #fff;
  cursor: pointer;
  line-height: 1;
}

.duet-obj-browser__edit-cancel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  border: none;
  border-radius: 3px;
  background: var(--bg-elevated);
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
}

/* ── Edit status bar ────────────────────────────────────────────────────── */
.duet-obj-browser__edit-status {
  font-size: 11px;
  padding: 4px 8px;
  margin-bottom: 8px;
  border-radius: 4px;
  background: rgba(68, 170, 255, 0.1);
  color: var(--info, #44aaff);
  font-family: monospace;
}
/* =============================================================================
   DuetSettings — BEM styles
   All colour references use CSS custom properties set by themeStore.
   ============================================================================= */

/* ── Page (tab mode — no overlay) ────────────────────────────────────────── */

.duet-settings__page {
  display: flex;
  flex: 1;
  min-height: 0;
  height: 100%;
  background: var(--bg-panel);
  font-family: 'Inter', 'Segoe UI', sans-serif;
  color: var(--text-primary);
  font-size: 13px;
}

/* ── Overlay ─────────────────────────────────────────────────────────────── */

.duet-settings__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  font-family: 'Inter', 'Segoe UI', sans-serif;
  color: var(--text-primary);
  font-size: 13px;
}

/* ── Dialog ──────────────────────────────────────────────────────────────── */

.duet-settings__dialog {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  width: 760px;
  max-width: 95vw;
  height: 560px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

/* ── Header ──────────────────────────────────────────────────────────────── */

.duet-settings__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.duet-settings__header-title {
  font-weight: 600;
  font-size: 15px;
}

.duet-settings__close-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
}

.duet-settings__close-btn:hover {
  color: var(--text-primary);
}

/* ── Main layout ─────────────────────────────────────────────────────────── */

.duet-settings__main {
  display: flex;
  flex: 1;
  min-height: 0;
}

/* ── Nav sidebar ─────────────────────────────────────────────────────────── */

.duet-settings__nav {
  width: 180px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 8px 0;
  background: var(--bg-panel);
  flex-shrink: 0;
  overflow-y: auto;
}

.duet-settings__nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  text-align: left;
  font-size: 13px;
  border-left: 3px solid transparent;
}

.duet-settings__nav-item:hover {
  color: var(--text-primary);
  background: var(--bg-elevated);
}

.duet-settings__nav-item.is-active {
  color: var(--text-primary);
  background: var(--bg-elevated);
  border-left-color: var(--accent);
  font-weight: 600;
}

.duet-settings__nav-back {
  font-size: 12px;
  color: var(--text-muted);
  padding: 8px 16px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
  border-left-color: transparent !important;
}

.duet-settings__nav-back:hover {
  color: var(--accent);
}

/* ── Body / content area ─────────────────────────────────────────────────── */

.duet-settings__body {
  flex: 1;
  padding: 16px 22px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

/* ── Page title ──────────────────────────────────────────────────────────── */

.duet-settings__page-title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
}

/* Page title + inline action button (e.g. "Sync from Machine" on the Machine page) */

.ds-machine-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ── Form group ──────────────────────────────────────────────────────────── */

.duet-settings__form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.duet-settings__label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.duet-settings__input {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-primary);
  padding: 8px 12px;
  font-size: 13px;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}

.duet-settings__select {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-primary);
  padding: 8px 12px;
  font-size: 13px;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;
}

.duet-settings__hint {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

.duet-settings__hint--indented {
  margin-left: 26px;
}

.duet-settings__camera-preview {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 1040px;
  min-height: 360px;
  height: 420px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #050505;
}

.duet-settings__camera-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #050505;
}

@media (max-width: 720px) {
  .duet-settings__camera-preview {
    min-height: 220px;
    height: 260px;
  }
}

/* ── Mode selector (standalone/SBC, light/dark theme toggle) ─────────────── */

.duet-settings__mode-selector {
  display: flex;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.duet-settings__mode-btn {
  flex: 1;
  padding: 8px 12px;
  border: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--bg-input);
  color: var(--text-muted);
  text-transform: capitalize;
}

.duet-settings__mode-btn.is-active {
  background: var(--accent);
  color: #fff;
}

/* ── Banners ─────────────────────────────────────────────────────────────── */

.duet-settings__banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 12px;
}

.duet-settings__banner--success {
  background: rgba(34, 197, 94, 0.12);
  color: var(--success);
}

.duet-settings__banner--error {
  background: rgba(239, 68, 68, 0.12);
  color: var(--error);
}

.duet-settings__banner--info {
  background: rgba(80, 120, 255, 0.1);
  color: var(--accent);
}

.duet-settings__banner--warning {
  background: rgba(234, 179, 8, 0.12);
  color: var(--warning);
}

.duet-settings__banner--mt {
  margin-top: 10px;
}

/* ── Banner inner content helpers ────────────────────────────────────────── */

.duet-settings__banner-heading {
  font-weight: 600;
}

.duet-settings__banner-detail {
  margin-top: 2px;
  opacity: 0.85;
}

/* ── Checkbox / toggle row ───────────────────────────────────────────────── */

.duet-settings__checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.duet-settings__checkbox {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.duet-settings__checkbox-label {
  cursor: pointer;
  font-size: 13px;
}

/* ── Button row ──────────────────────────────────────────────────────────── */

.duet-settings__btn-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.duet-settings__btn {
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.duet-settings__btn--primary {
  background: var(--accent);
  color: #fff;
}

.duet-settings__btn--danger {
  background: var(--error);
  color: #fff;
}

.duet-settings__btn--secondary {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border);
}

.duet-settings__btn--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Extra-small variant — for inline buttons inside section title rows */

.duet-settings__btn--xs {
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 5px;
  gap: 4px;
}

/* "Sync from Machine" — appears in the Build Volume title row */

.ds-sync-btn {
  margin-left: auto;
  background: var(--bg-panel, #1e1e2e);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}

.ds-sync-btn:hover {
  color: #60a5fa;
  border-color: color-mix(in srgb, #60a5fa 40%, var(--border));
  background: color-mix(in srgb, #60a5fa 8%, var(--bg-panel, #1e1e2e));
}

/* ── Section card ────────────────────────────────────────────────────────── */

.duet-settings__section {
  background: var(--bg-elevated);
  border-radius: 8px;
  padding: 14px 16px;
  border: 1px solid var(--border);
}

.duet-settings__section-title {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 10px;
  color: var(--text-primary);
}

/* ── Info grid ───────────────────────────────────────────────────────────── */

.duet-settings__info-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 12px;
  font-size: 12px;
}

/* ── Text utilities ──────────────────────────────────────────────────────── */

.duet-settings__dim-text {
  color: var(--text-muted);
}

.duet-settings__mono {
  font-family: monospace;
  font-size: 12px;
  font-weight: 600;
}

.duet-settings__about-text {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.6;
  margin: 0;
}

.duet-settings__about-text--mb {
  margin-bottom: 10px;
}

.duet-settings__code-accent {
  color: var(--accent);
}

/* ── Footer ──────────────────────────────────────────────────────────────── */

.duet-settings__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

/* ── Hidden file input ───────────────────────────────────────────────────── */

.duet-settings__file-input-hidden {
  display: none;
}

/* ── Firmware hint (selected file info) ──────────────────────────────────── */

.duet-settings__firmware-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 8px;
}

/* =============================================================================
   Machine page (ds-* namespace)
   ============================================================================= */

/* ── Board hero card ─────────────────────────────────────────────────────── */

.ds-machine-hero {
  position: relative;
  border-radius: 10px;
  padding: 16px 18px;
  background:
    linear-gradient(135deg, rgba(120,130,240,0.10), rgba(70,190,180,0.06) 65%),
    var(--bg-elevated);
  border: 1px solid var(--border);
  overflow: hidden;
}

.ds-machine-hero::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -10%;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(120,140,240,0.10) 0%, transparent 60%);
  pointer-events: none;
}

.ds-machine-hero-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}

.ds-machine-hero-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(120,130,240,0.25), rgba(120,130,240,0.08));
  border: 1px solid rgba(120,130,240,0.3);
  color: var(--accent);
  flex-shrink: 0;
}

.ds-machine-hero-title {
  flex: 1;
  min-width: 0;
}

.ds-machine-hero-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ds-machine-hero-fw {
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', 'Consolas', monospace;
}

.ds-machine-hero-fw strong {
  color: var(--text-primary);
  font-weight: 600;
}

.ds-machine-hero-date {
  opacity: 0.7;
}

/* ── Status pill (shared) ────────────────────────────────────────────────── */

.ds-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  border: 1px solid transparent;
  flex-shrink: 0;
}

.ds-status-pill--sm {
  padding: 2px 7px;
  font-size: 10px;
  letter-spacing: 0.2px;
}

.ds-status-pill--ok {
  color: rgb(110,220,150);
  background: rgba(80,200,130,0.12);
  border-color: rgba(80,200,130,0.35);
}

.ds-status-pill--warn {
  color: rgb(240,190,100);
  background: rgba(232,184,75,0.12);
  border-color: rgba(232,184,75,0.35);
}

.ds-status-pill--off {
  color: rgba(200,200,220,0.55);
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.1);
}

.ds-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}

/* ── Metric grid inside hero ─────────────────────────────────────────────── */

.ds-metric-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px;
}

.ds-metric {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  transition: background 0.15s, border-color 0.15s;
}

.ds-metric:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
}

.ds-metric--warn {
  background: rgba(232,184,75,0.08);
  border-color: rgba(232,184,75,0.35);
}

.ds-metric-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(120,130,240,0.12);
  color: var(--accent);
  flex-shrink: 0;
}

.ds-metric--warn .ds-metric-icon {
  background: rgba(232,184,75,0.15);
  color: rgb(240,200,110);
}

.ds-metric-body {
  flex: 1;
  min-width: 0;
}

.ds-metric-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ds-metric-value {
  margin-top: 2px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  line-height: 1.1;
}

.ds-metric-value small {
  font-size: 11px;
  opacity: 0.6;
  margin-left: 2px;
  font-weight: 600;
}

/* ── Section title row with count badge ──────────────────────────────────── */

.ds-section-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ds-section-count {
  margin-left: auto;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(120,130,240,0.14);
  border: 1px solid rgba(120,130,240,0.3);
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.ds-empty-hint {
  font-size: 12px;
  color: var(--text-muted);
  padding: 14px 8px;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: 6px;
}

/* ── Axes grid ───────────────────────────────────────────────────────────── */

.ds-axes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}

.ds-axis-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  transition: border-color 0.15s, transform 0.15s;
}

.ds-axis-card:hover {
  border-color: rgba(120,130,240,0.35);
  transform: translateY(-1px);
}

.ds-axis-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ds-axis-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 9px;
  border-radius: 7px;
  background: linear-gradient(135deg, rgba(120,130,240,0.25), rgba(120,130,240,0.1));
  color: var(--accent);
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-size: 15px;
  font-weight: 700;
  border: 1px solid rgba(120,130,240,0.35);
}

/* ── Axis range bar ──────────────────────────────────────────────────────── */

.ds-axis-range {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ds-axis-range-bar {
  position: relative;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.04);
}

.ds-axis-range-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(120,130,240,0.5), rgba(120,130,240,0.9));
}

.ds-axis-range-marker {
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg-panel);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 10px rgba(120,130,240,0.6);
}

.ds-axis-range-labels {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  color: var(--text-muted);
}

.ds-axis-range-current {
  color: var(--text-primary);
  font-weight: 600;
}

/* ── Axis stats row ──────────────────────────────────────────────────────── */

.ds-axis-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.ds-axis-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.04);
  color: var(--text-muted);
  min-width: 0;
}

.ds-axis-stat svg {
  opacity: 0.55;
}

.ds-axis-stat-label {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

.ds-axis-stat-value {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ds-axis-stat-value small {
  font-size: 9px;
  font-weight: 600;
  opacity: 0.55;
  margin-left: 2px;
}

/* =============================================================================
   Firmware page (ds-fw-* namespace)
   ============================================================================= */

.ds-fw-hero {
  position: relative;
  border-radius: 10px;
  padding: 16px 18px;
  background:
    linear-gradient(135deg, rgba(232,184,75,0.10), rgba(120,130,240,0.06) 65%),
    var(--bg-elevated);
  border: 1px solid var(--border);
  overflow: hidden;
}

.ds-fw-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -15%;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(232,184,75,0.12) 0%, transparent 65%);
  pointer-events: none;
}

.ds-fw-hero-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}

.ds-fw-hero-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(232,184,75,0.25), rgba(232,184,75,0.08));
  border: 1px solid rgba(232,184,75,0.35);
  color: rgb(240,190,100);
  flex-shrink: 0;
}

.ds-fw-hero-title {
  flex: 1;
  min-width: 0;
}

.ds-fw-hero-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.ds-fw-hero-version {
  margin-top: 2px;
  font-size: 15px;
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  color: var(--text-primary);
}

.ds-fw-hero-version strong {
  color: var(--accent);
  font-weight: 700;
  font-size: 16px;
}

.ds-fw-hero-date {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', 'Consolas', monospace;
}

.ds-fw-hero-rescan {
  margin-top: 6px;
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 5px;
  border: 1px solid rgba(140,150,180,0.25);
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 10.5px;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}

.ds-fw-hero-rescan:hover:not(:disabled) {
  color: var(--text);
  border-color: rgba(140,150,180,0.45);
  background: rgba(140,150,180,0.08);
}

.ds-fw-hero-rescan:disabled {
  cursor: default;
  opacity: 0.6;
}

/* ── PanelDue firmware variant table ────────────────────────────────── */

.ds-pd-table {
  display: grid;
  grid-template-columns: minmax(110px, max-content) minmax(0, 1fr) minmax(60px, max-content);
  row-gap: 2px;
  margin-top: 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255,255,255,0.02);
}

.ds-pd-table-head,
.ds-pd-row {
  display: contents;
}

.ds-pd-table-head > span {
  padding: 6px 12px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid var(--border);
}

.ds-pd-table-head .ds-pd-col-size {
  text-align: right;
}

.ds-pd-row {
  cursor: pointer;
}

.ds-pd-row > span {
  padding: 7px 12px;
  font-size: 11px;
  display: flex;
  align-items: center;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  transition: background 0.12s, color 0.12s;
}

.ds-pd-row:not(:last-child) > span {
  border-bottom: 1px solid rgba(140,150,180,0.12);
}

.ds-pd-row:hover:not(:disabled) > span {
  background: rgba(120,130,240,0.1);
}

.ds-pd-row:disabled {
  cursor: default;
  opacity: 0.55;
}

.ds-pd-row.is-pick > span {
  background: rgba(255,170,60,0.09);
}

.ds-pd-cell-variant {
  gap: 6px;
}

.ds-pd-row-check {
  color: #ffb347;
  flex-shrink: 0;
}

.ds-pd-row-bullet {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(140,150,180,0.3);
  flex-shrink: 0;
  margin: 0 2px;
}

.ds-pd-variant-label {
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-weight: 700;
  font-size: 12px;
}

.ds-pd-row.is-pick .ds-pd-variant-label {
  color: #ffb347;
}

.ds-pd-cell-name {
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.ds-pd-cell-size {
  justify-content: flex-end;
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  color: var(--text-muted);
  font-size: 10px;
  white-space: nowrap;
}

.ds-check-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 7px;
  border: 1px solid rgba(120,130,240,0.4);
  background: linear-gradient(135deg, rgba(120,130,240,0.18), rgba(120,130,240,0.08));
  color: var(--accent);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.1s;
  flex-shrink: 0;
}

.ds-check-btn:not(:disabled):hover {
  background: linear-gradient(135deg, rgba(120,130,240,0.3), rgba(120,130,240,0.15));
  border-color: rgba(120,130,240,0.7);
  color: #fff;
  transform: translateY(-1px);
}

.ds-check-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.ds-check-btn .spin {
  animation: spin 0.9s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Update-status card ──────────────────────────────────────────────────── */

.ds-fw-update-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
}

.ds-fw-update-card--update-available {
  border-color: rgba(232,184,75,0.5);
  background: linear-gradient(135deg, rgba(232,184,75,0.08), rgba(232,184,75,0.02));
}

.ds-fw-update-card--up-to-date {
  border-color: rgba(80,200,130,0.4);
  background: linear-gradient(135deg, rgba(80,200,130,0.06), rgba(80,200,130,0.02));
}

.ds-fw-update-card--ahead {
  border-color: rgba(120,130,240,0.35);
  background: linear-gradient(135deg, rgba(120,130,240,0.06), rgba(120,130,240,0.02));
}

.ds-fw-update-card--error {
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  border-color: rgba(240,100,100,0.4);
  background: rgba(240,100,100,0.08);
  color: rgb(255,160,160);
}

.ds-fw-update-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.ds-fw-update-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  flex-shrink: 0;
}

.ds-fw-update-card--update-available .ds-fw-update-icon {
  background: rgba(232,184,75,0.18);
  color: rgb(250,210,120);
}

.ds-fw-update-card--up-to-date .ds-fw-update-icon {
  background: rgba(80,200,130,0.18);
  color: rgb(130,230,170);
}

.ds-fw-update-card--ahead .ds-fw-update-icon {
  background: rgba(120,130,240,0.18);
  color: var(--accent);
}

.ds-fw-update-info {
  flex: 1;
  min-width: 0;
}

.ds-fw-update-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.ds-fw-update-detail {
  margin-top: 3px;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}

.ds-fw-update-date {
  opacity: 0.75;
}

.ds-fw-external-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  flex-shrink: 0;
}

.ds-fw-external-btn:hover {
  background: rgba(120,130,240,0.15);
  color: #fff;
  border-color: rgba(120,130,240,0.5);
}

/* ── Firmware asset list ─────────────────────────────────────────────────── */

.ds-fw-assets {
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.ds-fw-assets-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.ds-fw-assets-label svg {
  color: var(--accent);
}

.ds-fw-assets-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ds-fw-asset {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  color: var(--text-primary);
  font-size: 11px;
  text-decoration: none;
  transition: background 0.12s, border-color 0.12s, transform 0.08s;
}

.ds-fw-asset:hover {
  background: rgba(120,130,240,0.1);
  border-color: rgba(120,130,240,0.4);
  transform: translateX(1px);
}

.ds-fw-asset.is-pick {
  border-color: rgba(255,170,60,0.55);
  background: rgba(255,170,60,0.08);
}

.ds-fw-asset.is-pick svg {
  color: #ffb347;
}

.ds-fw-asset.is-iap {
  opacity: 0.85;
}

.ds-fw-asset-tag {
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.ds-fw-asset-tag--pick {
  background: rgba(255,170,60,0.18);
  color: #ffb347;
}

.ds-fw-asset svg {
  color: var(--accent);
  flex-shrink: 0;
}

.ds-fw-asset-name {
  flex: 1;
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.ds-fw-asset-size {
  color: var(--text-muted);
  font-size: 10px;
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  flex-shrink: 0;
}

.ds-fw-asset-hint {
  margin-top: 8px;
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.45;
}

/* ── Release notes ───────────────────────────────────────────────────────── */

.ds-fw-notes-wrap {
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.ds-fw-notes-toggle {
  background: none;
  border: none;
  color: var(--accent);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ds-fw-notes-toggle:hover {
  color: #fff;
}

.ds-fw-notes {
  margin: 8px 0 0;
  padding: 10px 12px;
  max-height: 220px;
  overflow-y: auto;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.25);
  color: var(--text-muted);
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-size: 11px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.ds-pd-reply-log {
  margin: 8px 0 0;
  padding: 6px 0 0;
  max-height: 160px;
  overflow-y: auto;
  border: none;
  border-top: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-size: 10.5px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Selected-file chip (replaces firmware-hint) ─────────────────────────── */

.ds-fw-file-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  font-size: 11px;
  color: var(--text-primary);
}

.ds-fw-file-chip svg {
  color: var(--accent);
}

.ds-fw-file-chip-size {
  color: var(--text-muted);
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-size: 10px;
}

.ds-section-tag {
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ── Auto-update CTA + progress panel ────────────────────────────────────── */

.ds-fw-auto-update-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,170,60,0.3);
  background: linear-gradient(180deg, rgba(255,170,60,0.08), rgba(255,170,60,0.03));
}

.ds-fw-auto-update-row--warn {
  border-color: rgba(239,83,80,0.4);
  background: linear-gradient(180deg, rgba(239,83,80,0.1), rgba(239,83,80,0.03));
}

.ds-fw-auto-update-row--dwc {
  border-color: rgba(120,130,240,0.3);
  background: linear-gradient(180deg, rgba(120,130,240,0.08), rgba(120,130,240,0.03));
}

.ds-fw-update-action-btn--secondary {
  background: linear-gradient(180deg, #6977f0, #4b5ad4);
  border-color: rgba(120,130,240,0.5);
  color: #fff;
  box-shadow: 0 2px 8px rgba(120,130,240,0.22);
}

.ds-fw-update-action-btn--secondary:hover:not(:disabled) {
  box-shadow: 0 4px 12px rgba(120,130,240,0.32);
}

.ds-fw-auto-update-row--warn .ds-fw-auto-update-hint {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.ds-fw-auto-update-row--warn .ds-fw-auto-update-hint svg {
  color: #ef5350;
  flex-shrink: 0;
  margin-top: 2px;
}

.ds-fw-update-action-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 6px;
  border: 1px solid rgba(255,170,60,0.5);
  background: linear-gradient(180deg, #ffb347, #ef8d1f);
  color: #1b1200;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(255,170,60,0.25);
  transition: transform 0.08s ease, box-shadow 0.12s ease, filter 0.12s ease;
}

.ds-fw-update-action-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 4px 12px rgba(255,170,60,0.35);
}

.ds-fw-update-action-btn:active:not(:disabled) {
  transform: translateY(0);
}

.ds-fw-update-action-btn:disabled {
  cursor: not-allowed;
  opacity: 0.7;
  box-shadow: none;
  filter: saturate(0.85);
}

.ds-fw-auto-update-hint {
  font-size: 10.5px;
  color: var(--text-muted);
  line-height: 1.45;
}

.ds-fw-auto-status {
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ds-fw-auto-status--downloading,
.ds-fw-auto-status--uploading,
.ds-fw-auto-status--installing {
  border-color: rgba(120,130,240,0.35);
  background: linear-gradient(180deg, rgba(120,130,240,0.1), rgba(120,130,240,0.03));
}

.ds-fw-auto-status--done {
  border-color: rgba(120,130,240,0.35);
  background: linear-gradient(180deg, rgba(120,130,240,0.1), rgba(120,130,240,0.03));
}

.ds-fw-auto-status--reconnected {
  border-color: rgba(72,187,120,0.45);
  background: linear-gradient(180deg, rgba(72,187,120,0.14), rgba(72,187,120,0.04));
}

.ds-fw-auto-status--error {
  border-color: rgba(239,83,80,0.45);
  background: linear-gradient(180deg, rgba(239,83,80,0.12), rgba(239,83,80,0.04));
}

.ds-fw-auto-status-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-primary);
}

.ds-fw-auto-status-msg {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.ds-fw-auto-status-msg svg {
  flex-shrink: 0;
  color: var(--accent);
}

.ds-fw-auto-status--reconnected .ds-fw-auto-status-msg svg {
  color: #48bb78;
}

.ds-fw-auto-status--error .ds-fw-auto-status-msg svg {
  color: #ef5350;
}

.ds-fw-auto-status-dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.ds-fw-auto-status-dismiss:hover {
  background: rgba(255,255,255,0.08);
  color: var(--text-primary);
}

.ds-fw-auto-progress-bar {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: rgba(0,0,0,0.3);
  overflow: hidden;
}

.ds-fw-auto-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #8aa0ff);
  transition: width 0.18s ease;
}

.ds-fw-auto-error {
  font-size: 10.5px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ── Upload progress bar ─────────────────────────────────────────────────── */

.duet-settings__progress-wrapper {
  margin-top: 10px;
}

.duet-settings__progress-track {
  width: 100%;
  height: 6px;
  background: var(--bg-input);
  border-radius: 3px;
  overflow: hidden;
}

.duet-settings__progress-fill {
  height: 100%;
  background: var(--accent);
  transition: width 0.2s ease;
}

/* =============================================================================
   DuetSettings — visual polish layer
   Adds gradients, animations, transitions, and modernized form/nav styling
   on top of the BEM base in 01-shell.css. Keeps theme-variable based colours.
   ============================================================================= */

/* -- Animations ------------------------------------------------------------- */

@keyframes duet-spin {
  to { transform: rotate(360deg); }
}

@keyframes duet-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);    }
}

@keyframes duet-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes duet-slide-in {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0);     }
}

@keyframes duet-pulse-dot {
  0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.55); }
  50%     { box-shadow: 0 0 0 6px rgba(34,197,94,0);   }
}

@keyframes duet-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

/* Global spinner (Loader2 icons in connection / camera tabs use className="spin") */

.duet-settings__page .spin,
.duet-settings__page svg.spin {
  animation: duet-spin 0.85s linear infinite;
  transform-origin: center;
}

/* -- Page shell ------------------------------------------------------------- */

.duet-settings__page {
  background:
    radial-gradient(1100px 600px at 12% -10%, rgba(120,130,240,0.07), transparent 55%),
    radial-gradient(900px 500px at 110% 110%, rgba(70,190,180,0.05), transparent 60%),
    var(--bg-panel);
}

/* -- Nav sidebar ------------------------------------------------------------ */

.duet-settings__nav {
  width: 210px;
  padding: 10px 8px;
  gap: 2px;
  background:
    linear-gradient(180deg, rgba(120,130,240,0.04), transparent 220px),
    var(--bg-panel);
  border-right: 1px solid var(--border);
}

.duet-settings__nav-item {
  position: relative;
  border-radius: 8px;
  border-left: none;
  padding: 9px 12px;
  margin: 0;
  gap: 11px;
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease;
  overflow: hidden;
}

.duet-settings__nav-item > svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  padding: 4px;
  box-sizing: content-box;
  border-radius: 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.05);
  color: var(--text-muted);
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.duet-settings__nav-item:hover {
  background: rgba(120,130,240,0.08);
  color: var(--text-primary);
  transform: translateX(2px);
}

.duet-settings__nav-item:hover > svg {
  background: rgba(120,130,240,0.18);
  border-color: rgba(120,130,240,0.35);
  color: var(--accent);
  transform: scale(1.05);
}

.duet-settings__nav-item.is-active {
  background: linear-gradient(135deg, rgba(120,130,240,0.20), rgba(120,130,240,0.06));
  color: var(--text-primary);
  border-left: none;
  box-shadow: inset 0 0 0 1px rgba(120,130,240,0.25);
}

.duet-settings__nav-item.is-active::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 18%;
  bottom: 18%;
  width: 3px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(120,130,240,0.85);
  animation: duet-fade-in 0.25s ease;
}

.duet-settings__nav-item.is-active > svg {
  background: linear-gradient(135deg, rgba(120,130,240,0.45), rgba(120,130,240,0.18));
  border-color: rgba(120,130,240,0.55);
  color: #fff;
}

.duet-settings__nav-back {
  margin: 0 0 8px 0;
  padding: 8px 12px;
  border-radius: 8px;
  border-bottom: none;
  font-size: 12px;
  background: transparent;
  border: 1px dashed transparent;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.duet-settings__nav-back > svg {
  background: transparent;
  border-color: transparent;
  padding: 0;
  color: inherit;
}

.duet-settings__nav-back:hover {
  color: var(--accent);
  background: rgba(120,130,240,0.07);
  border-color: rgba(120,130,240,0.35);
  transform: translateX(-2px);
}

.duet-settings__nav-back:hover > svg {
  color: var(--accent);
}

/* -- Body / content area ---------------------------------------------------- */

.duet-settings__body {
  padding: 18px 24px 24px;
  gap: 14px;
  scroll-behavior: smooth;
}

/* Per-tab container: each tab content fades up when it mounts */

.duet-settings__tab-pane {
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: duet-fade-up 0.28s ease both;
  min-width: 0;
}

/* -- Page title (now a small hero row) -------------------------------------- */

.duet-settings__page-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.2px;
  margin: 0 0 4px 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
}

.duet-settings__page-title::before {
  content: '';
  width: 4px;
  height: 22px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--accent), rgba(120,130,240,0.4));
  box-shadow: 0 0 8px rgba(120,130,240,0.4);
}

/* -- Form group ------------------------------------------------------------- */

.duet-settings__form-group {
  gap: 6px;
  animation: duet-fade-up 0.32s ease both;
}

.duet-settings__label {
  font-size: 11px;
  letter-spacing: 0.6px;
  color: var(--text-muted);
}

/* -- Inputs / selects ------------------------------------------------------- */

.duet-settings__input,
.duet-settings__select {
  padding: 9px 12px;
  border-radius: 8px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease;
}

.duet-settings__input:hover:not(:disabled),
.duet-settings__select:hover:not(:disabled) {
  border-color: rgba(120,130,240,0.45);
}

.duet-settings__input:focus,
.duet-settings__select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(120,130,240,0.18);
  background: var(--bg-input);
}

.duet-settings__input:disabled,
.duet-settings__select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.duet-settings__select {
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 16px) 50%,
    calc(100% - 11px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 30px;
}

/* -- Mode selector (tab-style buttons) -------------------------------------- */

.duet-settings__mode-selector {
  border-radius: 8px;
  background: var(--bg-input);
  padding: 3px;
  gap: 2px;
  border: 1px solid var(--border);
}

.duet-settings__mode-btn {
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  padding: 7px 12px;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.18s ease,
    box-shadow 0.2s ease;
}

.duet-settings__mode-btn:hover:not(:disabled):not(.is-active) {
  color: var(--text-primary);
  background: rgba(255,255,255,0.04);
}

.duet-settings__mode-btn.is-active {
  background: linear-gradient(135deg, var(--accent), rgba(120,130,240,0.75));
  color: #fff;
  box-shadow: 0 4px 12px rgba(120,130,240,0.25);
  transform: translateY(-1px);
}

.duet-settings__mode-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* -- Buttons ---------------------------------------------------------------- */

.duet-settings__btn {
  position: relative;
  padding: 9px 16px;
  border-radius: 8px;
  font-size: 13px;
  letter-spacing: 0.2px;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.18s ease,
    box-shadow 0.2s ease,
    opacity 0.2s ease;
}

.duet-settings__btn:not(.duet-settings__btn--disabled):hover {
  transform: translateY(-1px);
}

.duet-settings__btn:not(.duet-settings__btn--disabled):active {
  transform: translateY(0);
}

.duet-settings__btn--primary {
  background: linear-gradient(135deg, var(--accent), rgba(120,130,240,0.78));
  box-shadow: 0 4px 12px rgba(120,130,240,0.22);
}

.duet-settings__btn--primary:not(.duet-settings__btn--disabled):hover {
  box-shadow: 0 8px 18px rgba(120,130,240,0.32);
  filter: brightness(1.05);
}

.duet-settings__btn--secondary {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
}

.duet-settings__btn--secondary:not(.duet-settings__btn--disabled):hover {
  border-color: rgba(120,130,240,0.5);
  color: var(--accent);
  background: rgba(120,130,240,0.08);
}

.duet-settings__btn--danger {
  background: linear-gradient(135deg, var(--error), rgba(239,68,68,0.78));
  box-shadow: 0 4px 12px rgba(239,68,68,0.22);
}

.duet-settings__btn--danger:not(.duet-settings__btn--disabled):hover {
  box-shadow: 0 8px 18px rgba(239,68,68,0.32);
  filter: brightness(1.05);
}

.duet-settings__btn--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
}

/* -- Banners ---------------------------------------------------------------- */

.duet-settings__banner {
  padding: 11px 14px;
  border-radius: 8px;
  border: 1px solid transparent;
  animation: duet-fade-up 0.28s ease both;
  align-items: flex-start;
  line-height: 1.45;
}

.duet-settings__banner > svg {
  flex-shrink: 0;
  margin-top: 1px;
}

.duet-settings__banner--success {
  background:
    linear-gradient(135deg, rgba(34,197,94,0.16), rgba(34,197,94,0.06));
  border-color: rgba(34,197,94,0.35);
}

.duet-settings__banner--success > svg:first-child {
  border-radius: 50%;
  animation: duet-pulse-dot 2.2s ease-out infinite;
}

.duet-settings__banner--error {
  background:
    linear-gradient(135deg, rgba(239,68,68,0.16), rgba(239,68,68,0.05));
  border-color: rgba(239,68,68,0.35);
}

.duet-settings__banner--info {
  background:
    linear-gradient(135deg, rgba(120,130,240,0.14), rgba(120,130,240,0.04));
  border-color: rgba(120,130,240,0.35);
}

.duet-settings__banner--warning {
  background:
    linear-gradient(135deg, rgba(234,179,8,0.16), rgba(234,179,8,0.05));
  border-color: rgba(234,179,8,0.35);
}

/* -- Section card ----------------------------------------------------------- */

.duet-settings__section {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
  animation: duet-fade-up 0.32s ease both;
  position: relative;
  overflow: hidden;
}

.duet-settings__section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(120,130,240,0.4), transparent);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.duet-settings__section:hover {
  border-color: rgba(120,130,240,0.35);
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}

.duet-settings__section:hover::before {
  opacity: 1;
}

.duet-settings__section-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px 0;
}

.duet-settings__section-title::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(120,130,240,0.7);
}

/* -- Checkbox / toggle row -------------------------------------------------- */

.duet-settings__checkbox-row {
  gap: 12px;
  padding: 6px 2px;
  cursor: pointer;
}

.duet-settings__checkbox {
  position: relative;
  width: 36px;
  height: 20px;
  appearance: none;
  -webkit-appearance: none;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  outline: none;
  transition:
    background 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease;
  flex-shrink: 0;
}

.duet-settings__checkbox::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: transform 0.22s ease, background 0.22s ease;
}

.duet-settings__checkbox:hover:not(:disabled) {
  border-color: rgba(120,130,240,0.5);
}

.duet-settings__checkbox:focus-visible {
  box-shadow: 0 0 0 3px rgba(120,130,240,0.25);
}

.duet-settings__checkbox:checked {
  background: linear-gradient(135deg, var(--accent), rgba(120,130,240,0.75));
  border-color: rgba(120,130,240,0.7);
}

.duet-settings__checkbox:checked::after {
  background: #fff;
  transform: translateX(16px);
}

.duet-settings__checkbox:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.duet-settings__checkbox-label {
  font-weight: 500;
  color: var(--text-primary);
}

.duet-settings__hint--indented {
  margin-left: 48px;
}

/* -- Camera preview --------------------------------------------------------- */

.duet-settings__camera-preview {
  border-radius: 10px;
  border: 1px solid var(--border);
  box-shadow: 0 8px 22px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(255,255,255,0.04);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.duet-settings__camera-preview:hover {
  box-shadow: 0 12px 30px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(120,130,240,0.35);
  transform: translateY(-1px);
}

/* -- Button row ------------------------------------------------------------- */

.duet-settings__btn-row {
  gap: 10px;
  margin-top: 4px;
}

/* -- USB serial port row ---------------------------------------------------- */

.duet-settings__port-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.duet-settings__port-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* -- Section spacing utilities --------------------------------------------- */

.duet-settings__section--mt {
  margin-top: 16px;
}

/* -- Color picker ---------------------------------------------------------- */

.duet-settings__color-input {
  width: 56px;
  height: 32px;
  padding: 2px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-input);
  cursor: pointer;
}

.duet-settings__color-input::-webkit-color-swatch-wrapper { padding: 0; }

.duet-settings__color-input::-webkit-color-swatch { border: none; border-radius: 6px; }

/* -- Empty state ----------------------------------------------------------- */

.duet-settings__empty {
  padding: 18px;
  text-align: center;
  color: var(--text-muted);
  border: 1px dashed var(--border);
  border-radius: 8px;
  font-size: 12px;
}

/* -- Icon-only button ----------------------------------------------------- */

.duet-settings__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-input);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.15s ease;
}

.duet-settings__icon-btn:hover {
  background: rgba(120,130,240,0.1);
  border-color: rgba(120,130,240,0.45);
  color: var(--accent);
  transform: translateY(-1px);
}

.duet-settings__icon-btn.is-active {
  background: linear-gradient(135deg, rgba(255,200,80,0.25), rgba(255,200,80,0.08));
  border-color: rgba(255,200,80,0.6);
  color: rgb(255,210,100);
}

.duet-settings__icon-btn--danger:hover {
  background: rgba(239,68,68,0.12);
  border-color: rgba(239,68,68,0.5);
  color: var(--error);
}

/* -- Filament cards ------------------------------------------------------- */

.duet-settings__filament-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}

.duet-settings__filament-card {
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
  animation: duet-fade-up 0.28s ease both;
}

.duet-settings__filament-card:hover {
  border-color: rgba(120,130,240,0.45);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.18);
}

.duet-settings__filament-card.is-default {
  border-color: rgba(255,200,80,0.55);
  box-shadow: inset 0 0 0 1px rgba(255,200,80,0.15);
}

.duet-settings__filament-swatch {
  width: 10px;
  flex-shrink: 0;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25);
}

.duet-settings__filament-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.duet-settings__filament-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.duet-settings__filament-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.duet-settings__filament-material {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(120,130,240,0.16);
  color: var(--accent);
  border: 1px solid rgba(120,130,240,0.35);
}

.duet-settings__filament-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 11px;
  color: var(--text-muted);
}

.duet-settings__filament-stats strong {
  color: var(--text-primary);
  font-weight: 600;
  margin-left: 2px;
}

.duet-settings__filament-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* -- Serial diagnostic log ------------------------------------------------ */

.duet-settings__serial-log {
  margin: 8px 0 0 0;
  padding: 10px 12px;
  height: 200px;
  overflow-y: auto;
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-size: 12px;
  line-height: 1.55;
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
}

.duet-settings__serial-line {
  display: flex;
  gap: 8px;
}

.duet-settings__serial-prefix {
  flex-shrink: 0;
  width: 12px;
  text-align: center;
  opacity: 0.55;
  user-select: none;
}

.duet-settings__serial-line--out { color: var(--accent); }

.duet-settings__serial-line--in  { color: var(--text-primary); }

.duet-settings__serial-line--sys { color: var(--text-muted); font-style: italic; }

.duet-settings__serial-line--err { color: var(--error); }

.duet-settings__serial-input-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.duet-settings__serial-input-row .duet-settings__input { flex: 1; }

/* -- Notification integrations -------------------------------------------- */

.duet-settings__integration-form {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) 160px minmax(220px, 2fr) auto;
  gap: 8px;
  align-items: center;
}

.duet-settings__integration-form--rule {
  grid-template-columns: minmax(180px, 1fr) 180px;
  justify-content: start;
}

.duet-settings__integration-form--mqtt {
  grid-template-columns: repeat(3, minmax(160px, 1fr));
}

.duet-settings__integration-url {
  min-width: 0;
}

.duet-settings__integration-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.duet-settings__integration-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-input);
}

.duet-settings__integration-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.duet-settings__integration-toggle span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.duet-settings__integration-toggle strong {
  color: var(--text-primary);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.duet-settings__integration-toggle small {
  color: var(--text-muted);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.duet-settings__integration-pick-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.duet-settings__integration-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.duet-settings__integration-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-input);
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
}

.duet-settings__integration-chip:has(input:checked) {
  border-color: rgba(120,130,240,0.55);
  background: rgba(120,130,240,0.14);
  color: var(--text-primary);
}

.duet-settings__integration-chip input {
  width: 13px;
  height: 13px;
  accent-color: var(--accent);
}

/* -- Reduced motion --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .duet-settings__body {
    scroll-behavior: auto;
  }

  .duet-settings__page *,
  .duet-settings__page *::before,
  .duet-settings__page *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* -- Compact layout for narrow viewports ------------------------------------ */

@media (max-width: 720px) {
  .duet-settings__nav { width: 64px; padding: 8px 4px; }
  .duet-settings__nav-item { justify-content: center; padding: 9px 6px; font-size: 0; gap: 0; }
  .duet-settings__nav-item > svg { width: 18px; height: 18px; }
  .duet-settings__nav-back { font-size: 0; padding: 8px 6px; }
  .duet-settings__nav-back > svg { width: 16px; height: 16px; }
  .duet-settings__body { padding: 14px 14px 18px; }
  .duet-settings__page-title { font-size: 16px; }
  .duet-settings__integration-form,
  .duet-settings__integration-form--rule,
  .duet-settings__integration-form--mqtt {
    grid-template-columns: 1fr;
  }
}
/* ============================================================ */
/* Duet Config Editor — split layout (file list | inline editor) */
/* ============================================================ */

.duet-config-editor {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--bg, #1e1e1e);
  color: var(--text, #d4d4d4);
  font-family: 'Inter', 'Segoe UI', sans-serif;
}

.duet-config-editor__toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--panelBorder, #333);
  flex-shrink: 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent, #0078d4) 6%, var(--surface, #252526)),
    var(--surface, #252526));
}

.duet-config-editor__toolbar-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  flex: 1;
}

.duet-config-editor__browse-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  font-size: 12px;
  border: 1px solid var(--panelBorder, #444);
  border-radius: 6px;
  background: var(--surface, #353535);
  color: var(--text, #ccc);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.08s ease;
}

.duet-config-editor__browse-btn:not(:disabled):hover {
  border-color: var(--accent, #0078d4);
  color: var(--accent, #0078d4);
  background: color-mix(in srgb, var(--accent, #0078d4) 10%, var(--surface, #353535));
}

.duet-config-editor__browse-btn:active { transform: translateY(1px); }

.duet-config-editor__browse-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.duet-config-editor__body {
  flex: 1;
  min-height: 0;
  display: flex;
  overflow: hidden;
}

.duet-config-editor__files {
  width: 260px;
  flex-shrink: 0;
  overflow-y: auto;
  padding: 10px 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-right: 1px solid var(--panelBorder, #333);
  background: color-mix(in srgb, var(--surface, #252526) 50%, var(--bg, #1e1e1e));
}

.duet-config-editor__group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.duet-config-editor__group-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  color: var(--textDim, #888);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 2px 4px 4px;
  user-select: none;
}

.duet-config-editor__file-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid transparent;
  color: var(--text, #d4d4d4);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.06s ease;
}

.duet-config-editor__file-row:hover {
  background: color-mix(in srgb, var(--accent, #0078d4) 8%, transparent);
}

.duet-config-editor__file-row.is-active {
  background: color-mix(in srgb, var(--accent, #0078d4) 15%, transparent);
  border-color: var(--accent, #0078d4);
  color: var(--text, #fff);
}

.duet-config-editor__file-row.is-dirty::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffab40;
  margin-left: auto;
  flex: 0 0 auto;
}

.duet-config-editor__file-row.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.duet-config-editor__file-icon {
  flex: 0 0 auto;
  color: var(--textDim, #888);
}

.duet-config-editor__file-row.is-active .duet-config-editor__file-icon { color: var(--accent, #4fc3f7); }

.duet-config-editor__file-info { flex: 1; min-width: 0; }

.duet-config-editor__file-name {
  font-size: 12px;
  font-weight: 500;
  font-family: 'Consolas', 'JetBrains Mono', monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.duet-config-editor__file-desc {
  font-size: 11px;
  color: var(--textDim, #888);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.duet-config-editor__chevron {
  flex: 0 0 auto;
  color: var(--textDim, #666);
  opacity: 0.8;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.duet-config-editor__file-row:hover .duet-config-editor__chevron {
  transform: translateX(2px);
  opacity: 1;
}

.duet-config-editor__editor-pane {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg, #1e1e1e);
}

.duet-config-editor__placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px;
  gap: 10px;
  color: var(--textDim, #888);
  font-size: 13px;
}

.duet-config-editor__placeholder-icon {
  opacity: 0.5;
  margin-bottom: 6px;
}

.duet-config-editor__not-connected {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--textDim, #888);
  font-size: 13px;
}

/* ============================================================ */
/* Insert Command dropdown                                      */
/* ============================================================ */

.duet-insert-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 9px;
  font-size: 12px;
  border: 1px solid var(--panelBorder, #555);
  border-radius: 6px;
  background: var(--surface, #353535);
  color: var(--text, #ccc);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.duet-insert-btn:hover,
.duet-insert-btn.is-open {
  border-color: var(--accent, #0078d4);
  color: var(--accent, #0078d4);
  background: color-mix(in srgb, var(--accent, #0078d4) 10%, var(--surface, #353535));
}

.duet-insert-menu {
  z-index: 3100;
  background: #252526;
  border: 1px solid #444;
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  max-height: 60vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: duet-insert-pop 0.15s cubic-bezier(0.2, 1.0, 0.3, 1.0);
}

@keyframes duet-insert-pop {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.duet-insert-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border-bottom: 1px solid #333;
  background: #2a2a2b;
}

.duet-insert-menu__title {
  font-size: 12px;
  font-weight: 600;
  color: #e0e0e0;
}

.duet-insert-menu__count {
  font-size: 11px;
  color: #888;
  font-variant-numeric: tabular-nums;
}

.duet-insert-menu__search {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid #333;
  background: #222;
}

.duet-insert-menu__search input {
  flex: 1;
  background: #1e1e1e;
  color: #d4d4d4;
  border: 1px solid #444;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 12px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.duet-insert-menu__search input:focus {
  border-color: var(--accent, #0078d4);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #0078d4) 28%, transparent);
}

.duet-insert-menu__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.duet-insert-menu__empty {
  padding: 30px 12px;
  text-align: center;
  color: #888;
  font-size: 12px;
}

.duet-insert-menu__group {
  padding: 6px 6px;
}

.duet-insert-menu__group-title {
  font-size: 10px;
  font-weight: 700;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 4px 8px;
}

.duet-insert-menu__item {
  width: 100%;
  text-align: left;
  background: #1e1e1e;
  color: #d4d4d4;
  border: 1px solid #333;
  border-radius: 6px;
  padding: 7px 9px;
  margin: 3px 0;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.08s ease;
}

.duet-insert-menu__item:hover {
  border-color: var(--accent, #0078d4);
  background: color-mix(in srgb, var(--accent, #0078d4) 10%, #1e1e1e);
}

.duet-insert-menu__item:active { transform: translateY(1px); }

.duet-insert-menu__item-label {
  font-size: 12px;
  font-weight: 600;
  color: #e0e0e0;
}

.duet-insert-menu__item-desc {
  font-size: 11px;
  color: #888;
  margin-top: 2px;
}

.duet-insert-menu__item-snippet {
  margin: 4px 0 0;
  padding: 4px 6px;
  font-family: 'Consolas', 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #9cdcfe;
  background: #111;
  border-radius: 4px;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 68px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dnf {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px 16px 20px;
  overflow-y: auto;
  font-family: 'Inter', 'Segoe UI', sans-serif;
  color: var(--text, #e6e6f0);
}

.dnf__section {
  background: #1a1a28;
  border: 1px solid #2b2b40;
  border-radius: 8px;
  padding: 12px 14px;
}

.dnf__section-header {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: #e6e6f0;
  margin-bottom: 10px;
}

.dnf__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 18px;
}

.dnf__grid--compact { gap: 3px 14px; }

.dnf__grid--form {
  grid-template-columns: 1fr;
  gap: 10px;
}

.dnf__grid--form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: var(--textDim, #8a8aa3);
}

.dnf__row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 3px 0;
}

.dnf__row-label {
  flex: 0 0 84px;
  color: var(--textDim, #8a8aa3);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.dnf__row-value {
  flex: 1;
  color: #e6e6f0;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.dnf__row-value.is-mono {
  font-family: 'Consolas', 'JetBrains Mono', monospace;
  font-size: 11px;
}

.dnf__row-inline {
  display: flex;
  gap: 8px;
  align-items: center;
}

.dnf__row-inline input,
.dnf__grid--form input {
  flex: 1;
  background: #121220;
  color: #e6e6f0;
  border: 1px solid #2b2b40;
  border-radius: 5px;
  padding: 6px 9px;
  font-size: 12px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.dnf__row-inline input:focus,
.dnf__grid--form input:focus {
  border-color: var(--accent, #4a9eff);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #4a9eff) 30%, transparent);
}

.dnf__actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.dnf__btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background: #252538;
  color: #e6e6f0;
  border: 1px solid #2b2b40;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.dnf__btn:not(:disabled):hover {
  border-color: var(--accent, #4a9eff);
  color: var(--accent, #4a9eff);
}

.dnf__btn:disabled { opacity: 0.5; cursor: not-allowed; }

.dnf__btn--primary {
  background: var(--accent, #4a9eff);
  border-color: var(--accent, #4a9eff);
  color: #0c1220;
  font-weight: 600;
}

.dnf__btn--primary:not(:disabled):hover {
  filter: brightness(1.1);
  color: #0c1220;
}

.dnf__btn--danger {
  background: #d94545;
  border-color: #d94545;
  color: #fff;
}

.dnf__btn--danger:not(:disabled):hover { filter: brightness(1.08); color: #fff; }

.dnf__empty {
  padding: 14px 6px;
  color: var(--textDim, #8a8aa3);
  font-size: 12px;
  text-align: center;
}

.dnf__hint {
  margin-top: 6px;
  font-size: 10.5px;
  color: var(--textDim, #8a8aa3);
}

.dnf__hint code {
  background: #121220;
  color: #ffa94d;
  padding: 1px 5px;
  border-radius: 3px;
  font-family: 'Consolas', 'JetBrains Mono', monospace;
}

.dnf__banner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 11.5px;
  margin: 8px 0;
}

.dnf__banner--warn {
  background: color-mix(in srgb, #c97a21 20%, transparent);
  color: #ffcc88;
  border: 1px solid #c97a21;
}

.dnf__iface {
  padding: 10px;
  background: #121220;
  border: 1px solid #2b2b40;
  border-radius: 6px;
  margin-top: 8px;
}

.dnf__iface-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.dnf__iface-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: capitalize;
}

.dnf__iface-ip {
  font-family: 'Consolas', 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--accent, #4a9eff);
  font-variant-numeric: tabular-nums;
}

.dnf__subheader {
  margin-top: 8px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--textDim, #8a8aa3);
  margin-bottom: 4px;
}

.dnf__proto-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.dnf__proto {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #1a1a28;
  color: var(--textDim, #8a8aa3);
  border: 1px solid #2b2b40;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.dnf__proto:hover { border-color: var(--accent, #4a9eff); color: var(--accent, #4a9eff); }

.dnf__proto.is-active {
  background: color-mix(in srgb, var(--accent, #4a9eff) 25%, #1a1a28);
  color: var(--accent, #4a9eff);
  border-color: var(--accent, #4a9eff);
}

.dnf__proto:disabled { opacity: 0.5; cursor: not-allowed; }

.dnf__toast {
  padding: 8px 12px;
  background: #252538;
  border: 1px solid #2b2b40;
  border-radius: 6px;
  color: #e6e6f0;
  font-size: 11.5px;
  line-height: 1.5;
}

.dnf__spin { animation: dnf-spin 0.8s linear infinite; }
@keyframes dnf-spin { to { transform: rotate(360deg); } }
.all-cameras-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
  color: var(--text-primary);
}

.all-cameras-grid__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.all-cameras-grid__title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.all-cameras-grid__title h2 {
  margin: 0;
  font-size: 18px;
}

.all-cameras-grid__title span {
  color: var(--text-muted);
  font-size: 12px;
}

.all-cameras-grid__controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.all-cameras-grid__controls button,
.all-cameras-grid__controls label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-elevated);
  color: var(--text-primary);
}

.all-cameras-grid__controls button {
  width: 32px;
  justify-content: center;
  cursor: pointer;
}

.all-cameras-grid__controls button.is-active {
  border-color: var(--accent);
  color: var(--accent);
}

.all-cameras-grid__controls label {
  padding: 0 8px;
}

.all-cameras-grid__controls select {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
}

.all-cameras-grid__tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

.all-cameras-grid--compact .all-cameras-grid__tiles {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.all-camera-tile {
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-panel);
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.all-camera-tile.is-active {
  border-color: var(--accent);
}

.all-camera-tile__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--bg-elevated);
}

.all-cameras-grid--compact .all-camera-tile__media {
  aspect-ratio: 4 / 3;
}

.all-camera-tile__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.all-camera-tile__empty {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 7px;
  color: var(--text-muted);
  font-size: 12px;
}

.all-camera-tile__overlay {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px;
  color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.2), transparent);
}

.all-camera-tile__topline,
.all-camera-tile__metrics,
.all-camera-tile__alerts {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.all-camera-tile__topline {
  justify-content: space-between;
}

.all-camera-tile__topline strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}

.all-camera-tile__topline span,
.all-camera-tile__metrics span,
.all-camera-tile__alerts span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  font-size: 12px;
}

.all-camera-tile__topline i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.all-camera-tile__metrics {
  color: rgba(255, 255, 255, 0.86);
}

.all-camera-tile__alerts span {
  max-width: 100%;
  overflow: hidden;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(226, 81, 81, 0.84);
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 620px) {
  .all-cameras-grid__toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .all-cameras-grid__controls {
    width: 100%;
    justify-content: flex-start;
  }

  .all-cameras-grid__tiles {
    grid-template-columns: 1fr;
  }
}
.layer-gallery {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
  color: var(--text-primary);
}

.layer-gallery__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.layer-gallery__title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.layer-gallery__title h2 {
  margin: 0;
  font-size: 18px;
}

.layer-gallery__title span {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.layer-gallery__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

.layer-gallery__actions button,
.layer-gallery__actions label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-elevated);
  color: var(--text-primary);
  font: inherit;
}

.layer-gallery__actions button {
  cursor: pointer;
  padding: 0 10px;
}

.layer-gallery__actions button:disabled {
  cursor: default;
  opacity: 0.5;
}

.layer-gallery__actions label {
  padding: 0 8px;
}

.layer-gallery__actions input {
  width: 70px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
}

.layer-gallery__message,
.layer-gallery__empty {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-panel);
}

.layer-gallery__message {
  padding: 10px 12px;
  color: var(--text-secondary);
  font-size: 12px;
}

.layer-gallery__empty {
  display: grid;
  min-height: 240px;
  place-items: center;
  gap: 10px;
  overflow: hidden;
  color: var(--text-muted);
  text-align: center;
}

.layer-gallery__empty img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  opacity: 0.65;
}

.layer-gallery__layers {
  display: grid;
  gap: 12px;
}

.layer-gallery__layer {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-panel);
  overflow: hidden;
}

.layer-gallery__layer header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
}

.layer-gallery__layer header span {
  color: var(--text-muted);
  font-size: 12px;
}

.layer-gallery__frames {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  padding: 10px;
}

.layer-gallery__frames figure {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-primary);
}

.layer-gallery__frames img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.layer-gallery__frames figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 8px;
  font-size: 12px;
}

.layer-gallery__frames figcaption span {
  color: var(--text-muted);
}

@media (max-width: 760px) {
  .layer-gallery__toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .layer-gallery__actions {
    justify-content: flex-start;
  }
}
.cross-printer-comparison {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
  color: var(--text-primary);
}

.comparison-toolbar,
.comparison-setup,
.comparison-summary {
  display: flex;
  align-items: center;
  gap: 10px;
}

.comparison-toolbar {
  justify-content: space-between;
}

.comparison-toolbar__title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.comparison-toolbar h2 {
  margin: 0;
  font-size: 18px;
}

.comparison-toolbar select,
.comparison-setup select,
.comparison-setup input,
.comparison-leg__controls select,
.comparison-leg textarea {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-elevated);
  color: var(--text-primary);
  font: inherit;
}

.comparison-setup {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(120px, 180px) minmax(120px, 180px) auto;
}

.comparison-setup label {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-elevated);
}

.comparison-setup input {
  min-width: 0;
  width: 100%;
  border: 0;
  background: transparent;
}

.comparison-setup button,
.comparison-leg__controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--accent);
  color: var(--accent-contrast, #fff);
  cursor: pointer;
  font: inherit;
}

.comparison-setup button:disabled {
  cursor: default;
  opacity: 0.5;
}

.comparison-summary {
  justify-content: space-between;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-panel);
  color: var(--text-secondary);
}

.comparison-summary span {
  flex: 1;
}

.comparison-legs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.comparison-leg {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-panel);
}

.comparison-leg.is-winner {
  border-color: var(--success);
}

.comparison-leg__header,
.comparison-leg__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.comparison-leg__header span {
  color: var(--text-muted);
  font-size: 11px;
  text-transform: uppercase;
}

.comparison-leg__header h3 {
  margin: 2px 0 0;
  font-size: 16px;
}

.comparison-leg__header strong {
  color: var(--text-secondary);
  text-transform: capitalize;
}

.comparison-leg__metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.comparison-leg__metrics div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-elevated);
}

.comparison-leg__metrics span {
  color: var(--text-muted);
  font-size: 11px;
}

.comparison-leg__bar {
  overflow: hidden;
  height: 7px;
  border-radius: 999px;
  background: var(--bg-elevated);
}

.comparison-leg__bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.comparison-leg__controls select {
  min-height: 32px;
}

.comparison-leg textarea {
  min-height: 70px;
  resize: vertical;
  padding: 8px;
}

.comparison-empty {
  padding: 24px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  color: var(--text-muted);
  text-align: center;
}

@media (max-width: 760px) {
  .comparison-toolbar,
  .comparison-summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .comparison-setup,
  .comparison-legs {
    grid-template-columns: 1fr;
  }
}
/* =============================================================================
   DuetHeightMap — full-page split layout with rich collapsible sidebar
   ============================================================================= */

/* ── Root ─────────────────────────────────────────────────────────────────── */
.hm-root {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-primary);
  color: var(--text-primary);
  overflow: hidden;
}

/* ── Title bar ────────────────────────────────────────────────────────────── */
.hm-topbar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.hm-topbar__icon { color: var(--accent, #3b82f6); opacity: 0.85; flex-shrink: 0; }

.hm-topbar__title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-primary);
  flex-shrink: 0;
}

.hm-topbar__demo-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  background: color-mix(in srgb, var(--accent, #3b82f6) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent, #3b82f6) 35%, transparent);
  color: var(--accent, #3b82f6);
}

.hm-topbar__probing {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--accent, #3b82f6);
  font-weight: 600;
}

/* Thin vertical separator between topbar sections */
.hm-topbar__div {
  width: 1px;
  height: 16px;
  background: var(--border);
  flex-shrink: 0;
  opacity: 0.7;
}

/* Compact toggle groups sitting directly in the topbar */
.hm-topbar__ctrl { flex-shrink: 0; }
.hm-topbar__ctrl .hm-toggle-btn { padding: 3px 8px; font-size: 11px; height: 24px; }

/* Color scale legend — floating center-bottom of canvas */
.hm-legend-overlay {
  position: absolute;
  bottom: 14px;
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}
.hm-legend-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  max-width: 380px;
  width: 100%;
  background: color-mix(in srgb, var(--bg-panel) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
  border-radius: 20px;
  backdrop-filter: blur(8px);
}
.hm-legend-gradient {
  flex: 1;
  height: 12px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  min-width: 120px;
}
.hm-legend-val {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  min-width: 44px;
  text-align: center;
}
.hm-legend-val:first-child { text-align: right; }
.hm-legend-mm {
  font-size: 10px;
  color: var(--text-muted);
  margin-left: 2px;
}

/* Camera preset cluster — top-right corner of canvas */
.hm-cam-overlay {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 3px;
}

.hm-topbar__probing--level {
  color: #a78bfa;
}

/* Compact pill badges — "Run 1/3", "Probe 2/3" */
.hm-topbar__progress-pill {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  background: color-mix(in srgb, #a78bfa 14%, transparent);
  border: 1px solid color-mix(in srgb, #a78bfa 35%, transparent);
  color: #a78bfa;
  letter-spacing: 0.3px;
}
/* When inside a plain (probe/blue) probing span, use the accent color instead of purple */
.hm-topbar__probing:not(.hm-topbar__probing--level) .hm-topbar__progress-pill {
  background: color-mix(in srgb, var(--accent, #3b82f6) 14%, transparent);
  border-color: color-mix(in srgb, var(--accent, #3b82f6) 35%, transparent);
  color: var(--accent, #3b82f6);
}

/* ── Compare banner ───────────────────────────────────────────────────────── */
.hm-compare-banner {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: color-mix(in srgb, var(--accent, #3b82f6) 8%, var(--bg-panel));
  border-bottom: 1px solid color-mix(in srgb, var(--accent, #3b82f6) 22%, var(--border-light));
  font-size: 11px;
  color: var(--accent, #3b82f6);
  flex-shrink: 0;
}
.hm-compare-banner svg { flex-shrink: 0; }
.hm-compare-banner strong { font-weight: 700; color: var(--text-primary); }
.hm-compare-banner__hint { font-size: 10px; color: var(--text-muted); font-style: italic; }

/* ── Split body ───────────────────────────────────────────────────────────── */
.hm-split {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ── Viewport ─────────────────────────────────────────────────────────────── */
.hm-viewport {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: var(--bg-canvas);
  min-width: 0;
}

.hm-viz-3d { width: 100%; height: 100%; }

/* 2D heatmap fills viewport */
.heatmap-2d-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px;
  height: 100%;
  overflow: auto;
  box-sizing: border-box;
}
.heatmap-2d-container svg { max-height: 100%; flex-shrink: 0; }

/* ── Sidebar toggle button — seam between viewport and sidebar ────────────── */
.hm-sidebar-toggle {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 48px;
  border-radius: 6px 0 0 6px;
  border: 1px solid var(--border);
  border-right: none;
  background: var(--bg-panel);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, width 0.15s;
  padding: 0;
}
.hm-sidebar-toggle:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  width: 22px;
}
/* Arrow points left (collapse) when sidebar is open, right (expand) when closed */
.hm-sidebar-toggle svg {
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}
.hm-sidebar-toggle.is-open svg {
  transform: rotate(180deg);
}

/* ── 2D hover tooltip ─────────────────────────────────────────────────────── */
.hm-2d-tooltip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  font-size: 11px;
  white-space: nowrap;
  pointer-events: none;
}
.hm-2d-tooltip__coord { color: var(--text-muted); font-weight: 500; }
.hm-2d-tooltip__val   { color: var(--text-primary); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── 3D hover tooltip ─────────────────────────────────────────────────────── */
.hm-3d-tooltip {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 11px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-elevated) 95%, transparent);
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28), 0 1px 4px rgba(0, 0, 0, 0.14);
  font-size: 11px;
  white-space: nowrap;
  pointer-events: none;
  animation: hm-tooltip-pop 0.1s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes hm-tooltip-pop {
  from { opacity: 0; transform: scale(0.92) translateY(4px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}

/* Probe point vs surface badge */
.hm-3d-tooltip__badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  background: color-mix(in srgb, #fbbf24 18%, transparent);
  border: 1px solid color-mix(in srgb, #fbbf24 40%, transparent);
  color: #fbbf24;
  align-self: flex-start;
  margin-bottom: 1px;
}
.hm-3d-tooltip__badge--surface {
  background: color-mix(in srgb, var(--accent, #3b82f6) 14%, transparent);
  border-color: color-mix(in srgb, var(--accent, #3b82f6) 35%, transparent);
  color: var(--accent, #3b82f6);
}

.hm-3d-tooltip__coord {
  color: var(--text-muted);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.hm-3d-tooltip__val {
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.2px;
  line-height: 1;
}

/* ── Empty state ──────────────────────────────────────────────────────────── */
.hm-empty {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 40px 32px; text-align: center;
}
.hm-empty__icon  { color: var(--text-muted); opacity: 0.5; margin-bottom: 4px; }
.hm-empty__title { font-size: 14px; font-weight: 600; color: var(--text-secondary); margin: 0; }
.hm-empty__sub   { font-size: 12px; color: var(--text-muted); max-width: 340px; line-height: 1.55; margin: 0; }

/* ── Demo badge on viewport ───────────────────────────────────────────────── */
.hm-demo-badge {
  position: absolute;
  top: 10px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 12px; border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--accent, #3b82f6) 35%, var(--border));
  background: color-mix(in srgb, var(--bg-panel) 88%, transparent);
  backdrop-filter: blur(4px);
  color: var(--text-muted); font-size: 11px; font-weight: 500;
  pointer-events: none; white-space: nowrap;
}

/* ── Right sidebar ────────────────────────────────────────────────────────── */
.hm-sidebar {
  width: 0;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-left: 0px solid var(--border);
  background: var(--bg-primary);
  /* smooth open/close */
  transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1),
              border-width 0.28s,
              opacity 0.22s;
  opacity: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.hm-sidebar.is-open {
  width: 360px;
  border-left-width: 1px;
  opacity: 1;
  overflow-y: auto;
}

/* Inner scroll container so sections don't clip during transition */
.hm-sidebar > * {
  min-width: 360px;
}

/* ── Section cards ────────────────────────────────────────────────────────── */
/*
   Cards use a neutral background so child elements (buttons, inputs, stat cells)
   always render against a predictable surface — no color tinting that would clash
   with their own theme-variable backgrounds.
   Visual identity comes from the accent border + a 2px top stripe (::before).
*/
.hm-side-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 13px 14px;
  margin: 5px 8px;
  border-radius: 10px;
  border: 1px solid var(--sc-border, var(--border-light));
  background: var(--bg-elevated);
  position: relative;
  overflow: hidden; /* clips the ::before accent stripe */
  transition: border-color 0.2s ease,
              box-shadow   0.2s ease;
}

/* Coloured top accent stripe — replaces background tinting */
.hm-side-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--sc-accent, transparent);
  border-radius: 10px 10px 0 0;
}

.hm-side-section:first-child { margin-top: 8px; }
.hm-side-section:last-child  { margin-bottom: 8px; }

.hm-side-section:hover {
  border-color: color-mix(in srgb, var(--sc-accent, var(--accent, #3b82f6)) 55%, var(--border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--sc-accent, var(--accent, #3b82f6)) 12%, transparent),
              0 2px 10px rgba(0, 0, 0, 0.08);
}

/* Actions — blue accent */
.hm-side-section--actions {
  --sc-accent: var(--accent, #3b82f6);
  --sc-border: color-mix(in srgb, var(--accent, #3b82f6) 30%, var(--border-light));
  gap: 8px;
}

/* Stats — green accent, tighter vertical rhythm */
.hm-side-section--stats {
  --sc-accent: #22c55e;
  --sc-border: color-mix(in srgb, #22c55e 25%, var(--border-light));
  gap: 5px;
  padding-top: 10px;
  padding-bottom: 10px;
}

/* ── Section title ────────────────────────────────────────────────────────── */
.hm-side-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--text-secondary);
  margin-bottom: 1px;
}

/* ── Connection status dot ────────────────────────────────────────────────── */
.hm-conn-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--border);
  flex-shrink: 0;
  transition: background 0.3s, box-shadow 0.3s;
}
.hm-conn-dot.is-live {
  background: #22c55e;
  animation: hm-conn-pulse 2.4s ease-in-out infinite;
}
@keyframes hm-conn-pulse {
  0%   { box-shadow: 0 0 0 0   color-mix(in srgb, #22c55e 55%, transparent); }
  60%  { box-shadow: 0 0 0 5px color-mix(in srgb, #22c55e 0%,  transparent); }
  100% { box-shadow: 0 0 0 0   color-mix(in srgb, #22c55e 0%,  transparent); }
}

/* ── Load error banner ────────────────────────────────────────────────────── */
.hm-load-error {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 8px 10px;
  border-radius: 7px;
  background: color-mix(in srgb, #ef4444 10%, var(--bg-elevated));
  border: 1px solid color-mix(in srgb, #ef4444 35%, var(--border));
  color: #fca5a5;
  font-size: 11px;
  line-height: 1.45;
  animation: hm-probe-idle 0s; /* reset — reuse slide-in from alerts */
  animation: hm-alert-in 0.16s ease-out;
}
@keyframes hm-alert-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hm-load-error__icon { flex-shrink: 0; margin-top: 1px; color: #f87171; }
.hm-load-error span  { flex: 1; word-break: break-word; }
.hm-load-error__dismiss {
  flex-shrink: 0; background: none; border: none;
  color: inherit; opacity: 0.55; cursor: pointer;
  padding: 0 2px; line-height: 1; margin-top: 1px;
  transition: opacity 0.15s;
}
.hm-load-error__dismiss:hover { opacity: 1; }

/* ── Ribbon-style action buttons ──────────────────────────────────────────── */

/* Primary row: Probe Bed + Level Bed — 2 equal columns */
.hm-ribbon-primary {
  display: grid;
  grid-template-columns: repeat(3, minmax(72px, 1fr));
  gap: 6px;
}

.hm-ribbon-primary--three {
  grid-template-columns: repeat(3, minmax(72px, 1fr));
}

/* Secondary row: Load / Export / Save As — 3 equal columns */
.hm-ribbon-secondary {
  display: grid;
  grid-template-columns: repeat(3, minmax(58px, 1fr));
  gap: 6px;
}

/* Base ribbon button — icon on top, label below */
.hm-ribbon-btn {
  --rb-accent: var(--accent, #3b82f6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px 6px 9px;
  border-radius: 9px;
  border: 1px solid color-mix(in srgb, var(--rb-accent) 35%, var(--border));
  background: color-mix(in srgb, var(--rb-accent) 8%, var(--bg-elevated));
  color: color-mix(in srgb, var(--rb-accent) 85%, var(--text-primary));
  font-family: inherit;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  min-width: 0;
  min-height: 84px;
  transition: border-color 0.16s, box-shadow 0.16s, background 0.16s, transform 0.1s;
  animation: hm-ribbon-pulse 4s ease-in-out infinite;
}

@keyframes hm-ribbon-pulse {
  0%, 100% { box-shadow: 0 0 0 0    color-mix(in srgb, var(--rb-accent) 0%,  transparent); }
  50%       { box-shadow: 0 0 10px 0 color-mix(in srgb, var(--rb-accent) 18%, transparent); }
}

.hm-ribbon-btn:hover:not(:disabled) {
  border-color: var(--rb-accent);
  background: color-mix(in srgb, var(--rb-accent) 14%, var(--bg-elevated));
  box-shadow: 0 0 0 2px  color-mix(in srgb, var(--rb-accent) 20%, transparent),
              0 3px 12px color-mix(in srgb, var(--rb-accent) 22%, transparent);
  transform: translateY(-1px);
  animation: none;
}

/* Sweep-shine on hover */
.hm-ribbon-btn::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.08) 50%, transparent 70%);
  transform: translateX(-110%);
}
.hm-ribbon-btn:hover:not(:disabled)::after {
  transform: translateX(110%);
  transition: transform 0.5s ease;
}

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

.hm-ribbon-btn.is-active {
  animation: none;
  border-color: color-mix(in srgb, var(--rb-accent) 60%, var(--border));
  box-shadow: 0 0 14px color-mix(in srgb, var(--rb-accent) 25%, transparent);
}

.hm-ribbon-btn:disabled {
  opacity: 0.32;
  cursor: not-allowed;
  animation: none;
}

/* Icon container — centred circle with tinted bg */
.hm-ribbon-btn__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--rb-accent) 18%, var(--bg-elevated));
  flex-shrink: 0;
}

/* Primary button: larger icon container */
.hm-ribbon-primary .hm-ribbon-btn .hm-ribbon-btn__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
}

.hm-ribbon-btn__label {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.1px;
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: center;
}

.hm-ribbon-btn__sub {
  font-size: 9px;
  font-weight: 500;
  opacity: 0.58;
  line-height: 1.2;
  white-space: normal;
  overflow: hidden;
  overflow-wrap: anywhere;
  max-width: 100%;
  text-align: center;
}

/* Small variant — secondary actions have slightly smaller padding */
.hm-ribbon-btn--sm {
  padding: 8px 4px 7px;
  gap: 4px;
  min-height: 62px;
  border-color: var(--border);
  background: var(--bg-panel);
  color: var(--text-secondary);
  animation: none;
}
.hm-ribbon-btn--sm .hm-ribbon-btn__icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--bg-elevated);
  color: var(--accent, #3b82f6);
}
.hm-ribbon-btn--sm .hm-ribbon-btn__label {
  font-size: 10px;
  font-weight: 600;
}
.hm-ribbon-btn--sm:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent, #3b82f6) 50%, var(--border));
  background: var(--bg-elevated);
  color: var(--text-primary);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transform: translateY(-1px);
  animation: none;
}

/* Accent colours per primary button variant */
.hm-ribbon-btn--probe { --rb-accent: #3b82f6; }
.hm-ribbon-btn--level { --rb-accent: #22c55e; }

/* ── Pill switch (comp toggle) ────────────────────────────────────────────── */
.hm-pill-switch {
  display: inline-flex; align-items: center;
  width: 28px; height: 16px; border-radius: 8px;
  background: var(--border); border: 1px solid var(--border);
  position: relative; flex-shrink: 0;
  transition: background 0.22s, border-color 0.22s;
}
.hm-pill-switch.is-on { background: #22c55e; border-color: #22c55e; }
.hm-pill-switch__thumb {
  position: absolute; left: 1px;
  width: 12px; height: 12px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hm-pill-switch.is-on .hm-pill-switch__thumb { transform: translateX(12px); }

/* ── Mesh compensation button ─────────────────────────────────────────────── */
.hm-comp-btn {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 11px; border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-panel);
  color: var(--text-secondary);
  font-size: 12px; font-weight: 600; font-family: inherit;
  cursor: pointer; width: 100%;
  min-width: 0;
  transition: background 0.14s, border-color 0.14s, color 0.14s, box-shadow 0.14s;
}
.hm-comp-btn.is-on {
  background: color-mix(in srgb, #22c55e 10%, var(--bg-elevated));
  border-color: color-mix(in srgb, #22c55e 40%, var(--border));
  color: #22c55e;
}
.hm-comp-btn:hover:not(:disabled) {
  background: var(--bg-hover);
  border-color: color-mix(in srgb, var(--accent, #3b82f6) 50%, var(--border));
  color: var(--text-primary);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.hm-comp-label {
  min-width: 0;
  line-height: 1.2;
  overflow-wrap: anywhere;
  text-align: left;
}
.hm-comp-badge {
  font-size: 9px; font-weight: 800; letter-spacing: 0.6px;
  padding: 2px 7px; border-radius: 999px;
  justify-self: end;
  background: color-mix(in srgb, var(--text-muted) 12%, transparent);
  color: var(--text-muted);
  transition: background 0.22s, color 0.22s;
}
.hm-comp-badge.is-on {
  background: color-mix(in srgb, #22c55e 20%, transparent);
  color: #22c55e;
}

/* ── Compact stat header (quality + RMS side-by-side) ────────────────────── */
.hm-stat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.hm-stat-header.is-demo { opacity: 0.45; }

/* Quality dot + label inline */
.hm-quality-inline {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* RMS value block (right-aligned) */
.hm-rms-inline {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  flex-shrink: 0;
}

/* RMS bar track + scale only (no header) */
.hm-rms-track-wrap { display: flex; flex-direction: column; gap: 3px; }
.hm-rms-track-wrap.is-demo { opacity: 0.4; }

/* 2-column stat grid */
.hm-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}
.hm-stat-grid.is-demo { opacity: 0.4; }

.hm-stat-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 8px;
  border-radius: 7px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
}

/* ── Quality card ─────────────────────────────────────────────────────────── */
.hm-quality-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--qc, #22c55e) 35%, var(--border));
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--qc, #22c55e) 12%, var(--bg-elevated)) 0%,
    color-mix(in srgb, var(--qc, #22c55e)  5%, var(--bg-elevated)) 100%
  );
  position: relative; overflow: hidden;
  animation: hm-quality-breathe 5s ease-in-out infinite;
}
@keyframes hm-quality-breathe {
  0%, 100% { box-shadow: 0 0 0 0    color-mix(in srgb, var(--qc, #22c55e) 0%,  transparent); }
  50%       { box-shadow: 0 0 12px 0 color-mix(in srgb, var(--qc, #22c55e) 28%, transparent); }
}
.hm-quality-card.is-demo { opacity: 0.45; animation: none; }

.hm-quality-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--qc, #22c55e);
  box-shadow: 0 0 8px color-mix(in srgb, var(--qc, #22c55e) 60%, transparent);
  flex-shrink: 0;
  animation: hm-quality-dot-pulse 2.5s ease-in-out infinite;
}
@keyframes hm-quality-dot-pulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%       { transform: scale(1.3); opacity: 0.75; }
}

.hm-quality-label {
  font-size: 13px; font-weight: 800;
  color: var(--qc, #22c55e); letter-spacing: -0.3px; line-height: 1;
}
.hm-quality-sub {
  font-size: 10px; color: var(--text-secondary); font-weight: 500;
  margin-top: 1px; display: block; line-height: 1;
}

/* ── RMS bar ──────────────────────────────────────────────────────────────── */
.hm-rms-wrap { display: flex; flex-direction: column; gap: 4px; }
.hm-rms-wrap.is-demo { opacity: 0.4; }
.hm-rms-header { display: flex; justify-content: space-between; align-items: baseline; }
.hm-rms-label  { font-size: 11px; color: var(--text-secondary); font-weight: 600; }
.hm-rms-val    { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; transition: color 0.3s; }
.hm-rms-track {
  height: 5px; border-radius: 4px;
  background: var(--bg-panel); border: 1px solid var(--border);
  overflow: hidden;
}
.hm-rms-fill {
  height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, #22c55e 0%, #eab308 45%, #f87171 80%, #ef4444 100%);
  transition: width 0.55s cubic-bezier(0.34, 1.2, 0.64, 1);
  min-width: 3px;
}
.hm-rms-scale {
  display: flex; justify-content: space-between;
  font-size: 9px; color: var(--text-secondary); opacity: 0.85; padding: 0 1px;
}

/* ── Min/Max chips ────────────────────────────────────────────────────────── */
.hm-minmax-row { display: flex; gap: 6px; }
.hm-minmax-row.is-demo { opacity: 0.4; }

.hm-minmax-chip {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 4px 6px; border-radius: 8px; border: 1px solid transparent;
  transition: transform 0.12s;
}
.hm-minmax-chip:hover { transform: translateY(-1px); }

.hm-minmax-chip--low {
  background: color-mix(in srgb, #60a5fa 12%, var(--bg-panel));
  border-color: color-mix(in srgb, #60a5fa 35%, var(--border));
}
.hm-minmax-chip--high {
  background: color-mix(in srgb, #f87171 12%, var(--bg-panel));
  border-color: color-mix(in srgb, #f87171 35%, var(--border));
}
.hm-minmax-chip__tag { font-size: 8px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; }
.hm-minmax-chip--low  .hm-minmax-chip__tag { color: #60a5fa; }
.hm-minmax-chip--high .hm-minmax-chip__tag { color: #f87171; }
.hm-minmax-chip__val  { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.hm-minmax-chip--low  .hm-minmax-chip__val { color: #93c5fd; }
.hm-minmax-chip--high .hm-minmax-chip__val { color: #fca5a5; }

/* ── Statistics list ──────────────────────────────────────────────────────── */
.hm-stat-list { display: flex; flex-direction: column; }
.hm-stat-list.is-demo { opacity: 0.4; }
.hm-stat-item {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 5px 0;
  border-bottom: 1px solid var(--border-light);
}
.hm-stat-item:last-child { border-bottom: none; }
.hm-stat-label { font-size: 11px; color: var(--text-secondary); font-weight: 500; }
.hm-stat-value { font-size: 12px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }

/* ── Z offset callout (stats sidebar) ────────────────────────────────────── */
.hm-z-offset-callout {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 7px 9px;
  border-radius: 6px;
  background: color-mix(in srgb, #f59e0b 9%, var(--bg-panel));
  border: 1px solid color-mix(in srgb, #f59e0b 30%, transparent);
  margin-top: 4px;
}
.hm-z-offset-callout__icon {
  color: #f59e0b;
  flex-shrink: 0;
  margin-top: 1px;
}
.hm-z-offset-callout__text {
  font-size: 10px;
  color: var(--text-secondary);
  line-height: 1.45;
}
.hm-z-offset-callout__text strong {
  color: var(--text-primary);
  font-family: ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
  font-size: 10px;
}

/* ── Visualization top row (view + color toggles side-by-side) ───────────── */
.hm-vis-top-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── Subsection label (Camera, Compare) ──────────────────────────────────── */
.hm-subsection-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* ── Camera presets — inline row ─────────────────────────────────────────── */
.hm-preset-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Reset icon-only button */
.hm-preset-btn--reset {
  margin-left: auto;
  padding: 7px 8px;
  flex-shrink: 0;
}

/* ── Camera presets ───────────────────────────────────────────────────────── */
.hm-preset-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }

.hm-preset-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 10px; border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--bg-panel);
  color: var(--text-secondary);
  font-size: 11px; font-weight: 500; font-family: inherit;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.1s, box-shadow 0.12s;
}
.hm-preset-btn:hover {
  background: var(--bg-hover); color: var(--text-primary);
  border-color: color-mix(in srgb, var(--accent, #3b82f6) 50%, var(--border));
  transform: translateY(-1px);
  box-shadow: 0 3px 7px rgba(0,0,0,0.1);
}
.hm-preset-btn:active { transform: translateY(0); box-shadow: none; }
.hm-preset-btn__icon { font-size: 13px; line-height: 1; opacity: 0.7; }

/* Mouse hint */
.hm-mouse-hint { font-size: 10px; color: var(--text-secondary); line-height: 1.8; text-align: center; }
.hm-mouse-hint span { font-weight: 700; color: var(--text-primary); }

/* ── View toggle ──────────────────────────────────────────────────────────── */
.hm-view-toggle {
  display: inline-flex; align-items: center;
  border: 1px solid var(--border); border-radius: 7px; overflow: hidden; flex-shrink: 0;
}
.hm-toggle-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 10px; border: none;
  background: transparent; color: var(--text-muted);
  font-size: 11px; font-weight: 600; font-family: inherit;
  cursor: pointer; transition: background 0.14s, color 0.14s;
}
.hm-toggle-btn:not(:last-child) { border-right: 1px solid var(--border); }
.hm-toggle-btn:hover:not(.is-active) { background: var(--bg-hover); color: var(--text-primary); }
.hm-toggle-btn.is-active { background: var(--accent, #3b82f6); color: #fff; }

/* ── Color scale ──────────────────────────────────────────────────────────── */
.hm-color-row { display: flex; gap: 5px; }
.hm-color-opt {
  flex: 1; display: inline-flex; align-items: center; justify-content: center;
  padding: 6px 8px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--bg-panel);
  color: var(--text-muted); font-size: 11px; font-weight: 500; font-family: inherit;
  cursor: pointer; transition: all 0.12s;
}
.hm-color-opt.is-active {
  background: color-mix(in srgb, var(--accent, #3b82f6) 14%, var(--bg-elevated));
  border-color: color-mix(in srgb, var(--accent, #3b82f6) 45%, var(--border));
  color: var(--accent, #3b82f6);
}
.hm-color-opt:hover:not(:disabled):not(.is-active) { transform: translateY(-1px); }
.hm-color-opt:disabled { opacity: 0.4; cursor: not-allowed; }

/* Legend */
.heightmap-legend { display: flex; align-items: center; gap: 6px; padding: 0; }
.hm-sidebar .heightmap-legend { padding: 0; border: none; }
.legend-bar {
  display: flex; flex: 1; height: 9px; border-radius: 5px; overflow: hidden;
  border: 1px solid var(--border-light);
}
.legend-segment { flex: 1; }
.legend-label { font-size: 10px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.legend-unit  { font-size: 9px; color: var(--text-muted); }

/* ── Probe grid ───────────────────────────────────────────────────────────── */

/* "from config.g" badge next to the Probe Grid section title */
.hm-probe-config-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 5px 1px 4px;
  border-radius: 3px;
  background: color-mix(in srgb, #f59e0b 12%, transparent);
  border: 1px solid color-mix(in srgb, #f59e0b 28%, transparent);
  color: #d97706;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: none;
  margin-left: auto; /* push to right edge of title row */
  min-width: 0;
  white-space: nowrap;
  user-select: none;
}

/* Lock / unlock toggle button beside the badge */
.hm-probe-lock-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--bg-panel);
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0;
  transition: background 0.14s, border-color 0.14s, color 0.14s;
  flex-shrink: 0;
}
.hm-probe-lock-btn:hover {
  background: color-mix(in srgb, var(--accent, #3b82f6) 10%, var(--bg-panel));
  border-color: color-mix(in srgb, var(--accent, #3b82f6) 35%, var(--border));
  color: var(--text-primary);
}
.hm-probe-lock-btn.is-unlocked {
  color: #f59e0b;
  border-color: color-mix(in srgb, #f59e0b 40%, var(--border));
  background: color-mix(in srgb, #f59e0b 8%, var(--bg-panel));
}

/* Reset button — sits at far right of the probe grid title row */
.hm-probe-reset-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--bg-panel);
  color: var(--text-secondary);
  font-size: 9px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.14s, border-color 0.14s, color 0.14s;
  flex-shrink: 0;
}
.hm-probe-reset-btn:hover {
  background: color-mix(in srgb, var(--accent, #3b82f6) 10%, var(--bg-panel));
  border-color: color-mix(in srgb, var(--accent, #3b82f6) 35%, var(--border));
  color: var(--text-primary);
}

/* Locked state for number inputs */
.hm-grid-input.is-locked {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--bg-panel);
  border-color: var(--border);
}

/* Raw config.g M557 source display */
.hm-probe-config-source {
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding: 4px 7px;
  border-radius: 5px;
  background: color-mix(in srgb, #f59e0b 7%, var(--bg-panel));
  border: 1px solid color-mix(in srgb, #f59e0b 22%, var(--border));
}
.hm-probe-config-source-label {
  font-size: 9px;
  font-weight: 700;
  color: #d97706;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  flex-shrink: 0;
}
.hm-probe-config-source-cmd {
  font-family: ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
  font-size: 9.5px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Origin-zero warning — fires when probeXMin or probeYMin = 0 */
.hm-probe-origin-warn {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  padding: 5px 7px;
  border-radius: 5px;
  background: color-mix(in srgb, #f97316 10%, var(--bg-panel));
  border: 1px solid color-mix(in srgb, #f97316 30%, var(--border));
  color: #ea580c;
  font-size: 10px;
  line-height: 1.45;
}
.hm-probe-origin-warn svg { flex-shrink: 0; margin-top: 1px; }
.hm-probe-origin-warn__icon { flex-shrink: 0; margin-top: 1px; }
.hm-probe-origin-warn__text { flex: 1; }
.hm-probe-origin-warn__apply {
  flex-shrink: 0;
  align-self: center;
  padding: 2px 8px;
  border-radius: 3px;
  border: 1px solid color-mix(in srgb, #f97316 40%, var(--border));
  background: color-mix(in srgb, #f97316 15%, var(--bg-panel));
  color: #ea580c;
  font-size: 10px;
  cursor: pointer;
  white-space: nowrap;
}
.hm-probe-origin-warn__apply:hover { background: color-mix(in srgb, #f97316 25%, var(--bg-panel)); }

/* X / Y range rows — one per axis */
.hm-axis-range {
  display: grid;
  grid-template-columns: 18px minmax(72px, 1fr) auto minmax(72px, 1fr) auto;
  align-items: end;
  gap: 5px;
  min-width: 0;
}

.hm-axis-label {
  font-size: 11px;
  font-weight: 800;
  width: 14px;
  text-align: center;
  flex-shrink: 0;
  letter-spacing: 0.2px;
}
.hm-axis-label--x { color: #60a5fa; }
.hm-axis-label--y { color: #34d399; }

.hm-axis-input {
  width: 100% !important;
  min-width: 0;
  height: 28px;
  font-size: 12px;
}

.hm-axis-field {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.hm-axis-field__label {
  color: var(--text-muted);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1;
  text-transform: uppercase;
}

.hm-axis-sep {
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
  opacity: 0.6;
}

.hm-axis-unit {
  font-size: 10px;
  color: var(--text-muted);
  flex-shrink: 0;
  padding-bottom: 5px;
}

/* Grid density row */
.hm-grid-density-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}

.hm-grid-density-label {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 500;
  flex-shrink: 0;
}

.hm-select--density {
  height: 28px;
  padding: 0 24px 0 8px;
  font-size: 12px;
  font-weight: 600;
  min-width: 0;
  flex: 0 0 auto;
}

.hm-grid-density-pts {
  font-size: 10px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.hm-grid-density-sep {
  font-size: 10px;
  color: var(--text-muted);
  opacity: 0.5;
  flex-shrink: 0;
}

.hm-grid-density-spacing {
  font-size: 10px;
  color: var(--text-secondary);
  font-style: italic;
  flex: 1 1 96px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* M557 command preview block with inline copy button */
.hm-m557-preview {
  display: flex;
  align-items: stretch;
  min-width: 0;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--bg-panel);
  overflow: hidden;
}

.hm-m557-preview__body {
  display: grid;
  gap: 3px;
  flex: 1;
  min-width: 0;
  padding: 7px 9px;
}

.hm-m557-preview__label {
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1;
  text-transform: uppercase;
}

.hm-m557-preview__cmd {
  font-family: ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
  font-size: 10.5px;
  color: var(--accent, #3b82f6);
  user-select: all;
  overflow-wrap: anywhere;
  line-height: 1.45;
  white-space: normal;
}

.hm-m557-preview__copy {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  border: none;
  border-left: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.14s, background 0.14s;
}
.hm-m557-preview__copy:hover {
  color: var(--accent, #3b82f6);
  background: color-mix(in srgb, var(--accent, #3b82f6) 8%, var(--bg-elevated));
}
.hm-m557-preview__copy.is-copied {
  color: #22c55e;
}

/* Display toggles row (Mirror X + Markers side by side) */
.hm-probe-toggles {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* Marker size slider row */
.hm-marker-size {
  display: flex;
  align-items: center;
  gap: 5px;
}
.hm-marker-size .hm-size-slider { flex: 1; }

/* ── M558 live settings display ───────────────────────────────────────────── */
.hm-m558-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px;
  border-radius: 5px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  font-size: 10px;
  margin-top: 4px;
}
.hm-m558-info__label {
  color: var(--text-muted);
  font-weight: 500;
}
.hm-m558-info__val {
  font-family: ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
  color: var(--accent, #3b82f6);
  font-weight: 600;
}

.hm-grid-row { display: flex; align-items: center; gap: 6px; min-height: 26px; }
.hm-grid-label { font-size: 11px; color: var(--text-secondary); font-weight: 500; width: 52px; flex-shrink: 0; }
.hm-grid-inputs { display: flex; align-items: center; gap: 3px; flex: 1; }

.hm-grid-input {
  width: 52px; padding: 4px 6px;
  border-radius: 5px; border: 1px solid var(--border);
  background: var(--bg-panel); color: var(--text-primary);
  font-size: 11px; font-family: inherit; text-align: right;
  -moz-appearance: textfield;
  transition: border-color 0.14s, box-shadow 0.14s;
}
.hm-grid-input::-webkit-outer-spin-button,
.hm-grid-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.hm-grid-input:focus {
  outline: none; border-color: var(--accent, #3b82f6);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #3b82f6) 18%, transparent);
}

.hm-grid-sep  { font-size: 11px; color: var(--text-secondary); flex-shrink: 0; }
.hm-grid-unit { font-size: 10px; color: var(--text-secondary); flex-shrink: 0; }

.hm-grid-info {
  display: flex; flex-direction: column; gap: 4px;
  padding: 7px 9px; border-radius: 6px;
  background: var(--bg-panel); border: 1px solid var(--border);
  font-size: 10px; color: var(--text-muted);
}
.hm-grid-cmd {
  font-family: ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
  font-size: 10px; color: var(--accent, #3b82f6);
  word-break: break-all; user-select: all;
}
.hm-grid-divider { height: 1px; background: var(--border-light); margin: 2px 0 4px; }

/* ── Pill toggle (markers) ────────────────────────────────────────────────── */
.hm-pill-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  flex: 1; justify-content: center;
  padding: 5px 10px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg-panel); color: var(--text-muted);
  font-size: 11px; font-weight: 600; font-family: inherit;
  cursor: pointer; transition: background 0.14s, border-color 0.14s, color 0.14s;
}
.hm-pill-toggle.is-on {
  background: color-mix(in srgb, #fbbf24 10%, var(--bg-elevated));
  border-color: color-mix(in srgb, #fbbf24 40%, var(--border));
  color: #fbbf24;
}
.hm-pill-toggle__track {
  width: 26px; height: 14px; border-radius: 7px;
  background: var(--border); position: relative; flex-shrink: 0;
  transition: background 0.22s;
}
.hm-pill-toggle.is-on .hm-pill-toggle__track { background: #fbbf24; }
.hm-pill-toggle__thumb {
  position: absolute; left: 1px; top: 1px;
  width: 12px; height: 12px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hm-pill-toggle.is-on .hm-pill-toggle__thumb { transform: translateX(12px); }
.hm-pill-toggle__label { font-size: 11px; }

/* ── Size slider ──────────────────────────────────────────────────────────── */
.hm-size-slider {
  -webkit-appearance: none; appearance: none;
  height: 5px; border-radius: 3px;
  background: var(--border); outline: none; cursor: pointer; min-width: 0;
}
.hm-size-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent, #3b82f6); cursor: pointer; border: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #3b82f6) 22%, transparent);
  transition: transform 0.12s;
}
.hm-size-slider::-webkit-slider-thumb:hover { transform: scale(1.2); }
.hm-size-slider::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent, #3b82f6); cursor: pointer; border: none;
}

/* ── Shared buttons ───────────────────────────────────────────────────────── */
.hm-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--bg-panel);
  color: var(--text-secondary);
  font-size: 11px; font-weight: 600; font-family: inherit;
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
  transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.1s;
}
.hm-btn:hover:not(:disabled) {
  background: var(--bg-hover);
  border-color: color-mix(in srgb, var(--accent, #3b82f6) 55%, var(--border));
  color: var(--text-primary); transform: translateY(-1px);
}
.hm-btn:active:not(:disabled)  { transform: translateY(0); }
.hm-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.hm-btn--warning {
  background: color-mix(in srgb, #f59e0b 10%, var(--bg-elevated));
  border-color: color-mix(in srgb, #f59e0b 45%, var(--border)); color: #f59e0b;
}
.hm-btn--warning:hover:not(:disabled) {
  background: color-mix(in srgb, #f59e0b 20%, var(--bg-elevated)); border-color: #f59e0b;
}
.hm-full-btn { width: 100%; justify-content: center; }

/* ── Select ───────────────────────────────────────────────────────────────── */
.hm-select {
  font-size: 11px; font-family: inherit; padding: 4px 6px;
  border-radius: 5px; border: 1px solid var(--border);
  background: var(--bg-panel); color: var(--text-primary); cursor: pointer;
  transition: border-color 0.14s;
}
.hm-select:focus { outline: none; border-color: var(--accent, #3b82f6); }
.hm-select--fill { flex: 1; min-width: 0; }
.hm-select:disabled { opacity: 0.45; cursor: not-allowed; }

/* ── Icon button ──────────────────────────────────────────────────────────── */
.hm-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 5px;
  border: 1px solid var(--border); background: var(--bg-panel);
  color: var(--text-muted); cursor: pointer; flex-shrink: 0;
  transition: background 0.12s, color 0.12s, transform 0.15s;
}
.hm-icon-btn:hover:not(:disabled) { background: var(--bg-hover); color: var(--text-primary); transform: rotate(18deg); }
.hm-icon-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.hm-icon-muted { color: var(--text-muted); flex-shrink: 0; }

/* ── File / Compare ───────────────────────────────────────────────────────── */
.hm-file-row { display: flex; align-items: center; gap: 5px; }
.hm-side-compare-active { display: flex; flex-direction: column; gap: 6px; }
.hm-side-compare-label  { font-size: 11px; color: var(--text-secondary); font-weight: 600; word-break: break-all; }

/* ── Spin ─────────────────────────────────────────────────────────────────── */
@keyframes hm-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.hm-spin { animation: hm-spin 0.8s linear infinite; }

/* ── Responsive — narrow / very narrow ───────────────────────────────────── */

/* When the sidebar is closed the toggle button still shows */
.hm-split--collapsed .hm-sidebar { width: 0; opacity: 0; pointer-events: none; border-left-width: 0; }

/* Below 700 px: sidebar overlays the viewport instead of pushing it */
@media (max-width: 700px) {
  .hm-sidebar.is-open {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    z-index: 20;
    box-shadow: -4px 0 24px rgba(0,0,0,0.25);
    width: min(360px, 94vw);
  }
  .hm-sidebar > * { min-width: min(360px, 94vw); }
  .hm-sidebar-toggle {
    top: 12px;
    transform: none;
  }
}

/* Very narrow (<= 400 px): shrink sidebar cards */
@media (max-width: 400px) {
  .hm-sidebar.is-open { width: min(340px, 96vw); }
  .hm-sidebar > * { min-width: min(340px, 96vw); }
  .hm-side-section { margin: 4px 6px; padding: 11px 11px; }
  .hm-ribbon-primary,
  .hm-ribbon-primary--three {
    grid-template-columns: 1fr 1fr;
  }
  .hm-ribbon-primary--three .hm-ribbon-btn--smartcal {
    grid-column: 1 / -1;
    min-height: 70px;
  }
  .hm-ribbon-secondary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .hm-ribbon-btn__label { font-size: 10px; }
  .hm-ribbon-btn--sm .hm-ribbon-btn__label { font-size: 9px; }
  .hm-ribbon-btn { min-height: 76px; padding-inline: 5px; }
  .hm-ribbon-btn--sm { min-height: 56px; }
  .hm-comp-btn {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .hm-comp-badge {
    grid-column: 2;
    justify-self: start;
  }
  .hm-range-row { flex-wrap: wrap; }
  .hm-side-title { flex-wrap: wrap; row-gap: 5px; }
  .hm-probe-config-badge { margin-left: 0; }
  .hm-axis-range {
    grid-template-columns: 18px minmax(82px, 1fr) minmax(82px, 1fr) auto;
  }
  .hm-axis-sep { display: none; }
  .hm-grid-density-label { width: 100%; }
  .hm-grid-density-spacing { flex-basis: 100%; }
}

/* ── Smart Cal ribbon button ──────────────────────────────────────────────── */
.hm-ribbon-btn--smartcal {
  --rb-accent: #a855f7;
}

/* Smart Cal topbar indicator */
.hm-topbar__probing--smartcal .hm-topbar__progress-pill {
  background:   color-mix(in srgb, #a855f7 14%, transparent);
  border-color: color-mix(in srgb, #a855f7 35%, transparent);
  color:        #a855f7;
}
.hm-topbar__probing--smartcal {
  color: color-mix(in srgb, #a855f7 80%, var(--text-secondary));
}

/* ── SmartCal modal extras ────────────────────────────────────────────────── */
.hm-smartcal-modal {
  width: min(920px, calc(100vw - 48px));
  border-color: color-mix(in srgb, #a855f7 34%, var(--border));
  box-shadow:
    0 0 0 1px color-mix(in srgb, #a855f7 12%, transparent),
    0 24px 64px rgba(0, 0, 0, 0.5),
    0 8px 24px rgba(0, 0, 0, 0.3);
}

.hm-smartcal-body {
  gap: 12px;
  max-height: min(88vh, 860px);
  overflow: auto;
}

.hm-smartcal-body > .hm-smartcal-intro,
.hm-smartcal-body > .hm-probe-opt-row,
.hm-smartcal-body > .hm-probe-opt-section-label {
  display: none;
}

.hm-smartcal-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 13px;
  border: 1px solid color-mix(in srgb, #a855f7 28%, var(--border));
  border-radius: 9px;
  background: color-mix(in srgb, #a855f7 8%, var(--bg-panel));
}

.hm-smartcal-kicker {
  margin: 0 0 4px;
  color: #c084fc;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.hm-smartcal-intro {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

.hm-smartcal-home-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 104px;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, #a855f7 34%, var(--border));
  border-radius: 7px;
  background: var(--bg-panel);
  color: var(--text-secondary);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.hm-smartcal-home-toggle.is-on {
  background: color-mix(in srgb, #22c55e 12%, var(--bg-panel));
  border-color: color-mix(in srgb, #22c55e 44%, var(--border));
  color: #22c55e;
}

.hm-smartcal-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.hm-smartcal-flow-step {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  min-height: 36px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-panel);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
}

.hm-smartcal-flow-icon {
  display: inline-flex;
  color: #a855f7;
  flex-shrink: 0;
}

.hm-smartcal-flow-arrow {
  position: absolute;
  right: -10px;
  color: var(--text-muted);
  z-index: 1;
}

.hm-smartcal-presets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.hm-smartcal-presets button {
  min-width: 0;
  min-height: 30px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg-panel);
  color: var(--text-secondary);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.hm-smartcal-presets button:hover,
.hm-smartcal-presets button.is-active {
  border-color: color-mix(in srgb, #a855f7 48%, var(--border));
  background: color-mix(in srgb, #a855f7 10%, var(--bg-panel));
  color: #c084fc;
}

.hm-smartcal-grid {
  display: grid;
  gap: 10px;
}

.hm-smartcal-grid--matrix {
  grid-template-columns: 1fr;
}

.hm-smartcal-row {
  display: grid;
  grid-template-columns: 148px repeat(3, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--smartcal-row-color, #a855f7) 24%, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--smartcal-row-color, #a855f7) 5%, var(--bg-elevated));
}

.hm-smartcal-row--level {
  --smartcal-row-color: #22c55e;
}

.hm-smartcal-row--probe {
  --smartcal-row-color: #3b82f6;
}

.hm-smartcal-row-head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  padding: 10px 8px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--smartcal-row-color, #a855f7) 10%, var(--bg-panel));
  color: color-mix(in srgb, var(--smartcal-row-color, #a855f7) 82%, var(--text-primary));
}

.hm-smartcal-row-head svg {
  flex-shrink: 0;
  margin-top: 1px;
}

.hm-smartcal-row-head div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.hm-smartcal-row-head span {
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
}

.hm-smartcal-row-head small {
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.35;
  font-weight: 500;
}

.hm-smartcal-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg-panel);
}

.hm-smartcal-card-head {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 800;
}

.hm-smartcal-card-head svg {
  color: #a855f7;
  flex-shrink: 0;
}

.hm-smartcal-row--level .hm-smartcal-card-head svg {
  color: #22c55e;
}

.hm-smartcal-row--probe .hm-smartcal-card-head svg {
  color: #3b82f6;
}

.hm-probe-opt-section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  margin: 10px 0 4px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.hm-smartcal-iter-label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 8px 0 4px;
  cursor: default;
}

.hm-smartcal-iter-row {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.hm-smartcal-iter-btn {
  width: 28px; height: 28px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-panel);
  color: var(--text-secondary);
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.hm-smartcal-iter-btn.is-on {
  background:   color-mix(in srgb, #a855f7 16%, var(--bg-panel));
  border-color: color-mix(in srgb, #a855f7 50%, transparent);
  color:        #a855f7;
}
.hm-smartcal-iter-btn:hover:not(.is-on) { background: var(--bg-hover); color: var(--text-primary); }

/* Full-width row card (Bed Leveling, Probe Quality) */
.hm-smartcal-card--full {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 14px;
  min-height: 52px;
}

.hm-smartcal-card--full .hm-smartcal-card-head {
  min-width: 108px;
  flex-shrink: 0;
}

/* Vertical hairline divider between sections in a row card */
.hm-smartcal-card-sep {
  width: 1px;
  min-height: 24px;
  align-self: stretch;
  background: var(--border);
  flex-shrink: 0;
}

/* Label + control pair inside a row card */
.hm-smartcal-inline-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hm-smartcal-inline-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* Mode toggle inside a card (native smartcal style, replaces bc-modal-mode-toggle) */
.hm-smartcal-mode-row {
  display: flex;
  gap: 4px;
}

.hm-smartcal-mode-btn {
  flex: 1;
  min-height: 28px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-panel);
  color: var(--text-secondary);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  white-space: nowrap;
}

.hm-smartcal-mode-btn.is-on {
  background: color-mix(in srgb, #a855f7 16%, var(--bg-panel));
  border-color: color-mix(in srgb, #a855f7 50%, transparent);
  color: #a855f7;
}

.hm-smartcal-mode-btn:hover:not(.is-on) {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.hm-smartcal-card-note {
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.35;
}

.hm-smartcal-quality-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.hm-smartcal-quality-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid color-mix(in srgb, var(--smartcal-row-color, #a855f7) 30%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--smartcal-row-color, #a855f7) 8%, var(--bg-elevated));
  color: color-mix(in srgb, var(--smartcal-row-color, #a855f7) 78%, var(--text-primary));
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.hm-smartcal-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.hm-smartcal-field > span:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
}

.hm-smartcal-field small {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.3;
}

.hm-smartcal-input {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 3px 6px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg-elevated);
}

.hm-smartcal-input input {
  width: 54px;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.hm-smartcal-picker {
  gap: 2px;
  padding: 2px;
}

.hm-smartcal-picker button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.hm-smartcal-picker button:hover:not(:disabled) {
  background: color-mix(in srgb, #a855f7 12%, var(--bg-panel));
  color: #c084fc;
}

.hm-smartcal-picker button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.hm-smartcal-picker input {
  width: 42px;
  padding: 0 2px;
}

.hm-smartcal-input input::-webkit-outer-spin-button,
.hm-smartcal-input input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.hm-smartcal-input input {
  -moz-appearance: textfield;
}

.hm-smartcal-input em {
  color: var(--text-muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
}

/* ── Compact probe section overrides ────────────────────────────────────── */
/* Reduce vertical footprint so the log box has more visible height */
.hm-smartcal-row--probe {
  padding: 7px;
  gap: 6px;
}

.hm-smartcal-row--probe .hm-smartcal-row-head {
  padding: 6px 7px;
}

.hm-smartcal-row--probe .hm-smartcal-row-head span {
  font-size: 11px;
}

.hm-smartcal-row--probe .hm-smartcal-row-head small {
  font-size: 9px;
}

.hm-smartcal-row--probe .hm-smartcal-card {
  padding: 7px 9px;
  gap: 6px;
}

.hm-smartcal-row--probe .hm-smartcal-card-head {
  font-size: 10px;
}

.hm-smartcal-row--probe .hm-smartcal-field {
  gap: 7px;
}

.hm-smartcal-row--probe .hm-smartcal-field > span:first-child {
  font-size: 10px;
}

.hm-smartcal-row--probe .hm-smartcal-field small {
  font-size: 9px;
}

.hm-smartcal-row--probe .hm-smartcal-picker button {
  width: 20px;
  height: 20px;
}

.hm-smartcal-row--probe .hm-smartcal-picker input {
  width: 36px;
}

.hm-smartcal-row--probe .hm-smartcal-card-note {
  font-size: 9px;
}

.hm-smartcal-row--probe .hm-smartcal-iter-btn {
  width: 24px;
  height: 24px;
  font-size: 11px;
}

/* Combined quality card — dives + spread stacked with a hairline separator */
.hm-smartcal-card--quality {
  gap: 0;
}
.hm-smartcal-card--quality .hm-smartcal-card-head {
  margin-bottom: 6px;
}
.hm-smartcal-card--quality .hm-smartcal-iter-row {
  margin-bottom: 8px;
}
.hm-smartcal-field--sub {
  padding-top: 8px;
  border-top: 1px solid var(--border);
  margin-top: 2px;
}
/* Dim the spread-limit field when dives = 1 */
.hm-smartcal-field.is-dim {
  opacity: 0.45;
  pointer-events: none;
}

@media (max-width: 760px) {
  .hm-smartcal-modal {
    width: min(560px, calc(100vw - 28px));
  }
  .hm-smartcal-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .hm-smartcal-hero {
    flex-direction: column;
  }
  .hm-smartcal-home-toggle {
    width: 100%;
  }
  .hm-smartcal-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .hm-smartcal-flow-arrow {
    display: none;
  }
  .hm-smartcal-field {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .hm-smartcal-input {
    justify-content: flex-end;
  }
}

/* ── SmartCal result modal ────────────────────────────────────────────────── */
.hm-smartcal-stop-banner {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 12px;
  background:   color-mix(in srgb, var(--scr-color, #22c55e) 10%, var(--bg-panel));
  border: 1px solid color-mix(in srgb, var(--scr-color, #22c55e) 30%, transparent);
  color:        color-mix(in srgb, var(--scr-color, #22c55e) 90%, var(--text-primary));
}

.hm-smartcal-final-stats {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.hm-smartcal-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 7px 10px;
}
.hm-smartcal-stat__label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
}
.hm-smartcal-stat__val {
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Step timeline — compact flat log rows */
.hm-smartcal-timeline {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* Each log row: colored left bar + icon badge + text */
.hm-smartcal-step {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 5px 10px 5px 0;
  border-left: 2px solid var(--step-color, var(--border));
  padding-left: 10px;
  border-radius: 0 5px 5px 0;
  background: transparent;
  transition: background 0.1s;
}
.hm-smartcal-step:hover {
  background: color-mix(in srgb, var(--step-color, var(--border)) 5%, transparent);
}

.hm-smartcal-step__icon {
  width: 18px; height: 18px;
  border-radius: 4px;
  border: 1px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

/* No connector line in compact mode */
.hm-smartcal-step__line { display: none; }

.hm-smartcal-step__body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}
.hm-smartcal-step__label {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
.hm-smartcal-step__detail {
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}

/* ── Smart Cal inline activity / log section ─────────────────────────────── */

.hm-smartcal-activity {
  margin-top: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-primary, #0d0d0d);
  /* Scrollable log box */
  max-height: 300px;
  overflow-y: auto;
  scroll-behavior: smooth;
  display: flex;
  flex-direction: column;
}

/* Sticky header — fully opaque so content never bleeds through */
.hm-smartcal-activity__header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 5px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  /* Must be fully opaque — never use alpha here */
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  border-radius: 9px 9px 0 0;
}

/* Timeline body — padded inner area below the sticky header */
.hm-smartcal-activity__body {
  padding: 8px 12px 6px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Phase spinner — shown at the tail of the log while running */
.hm-smartcal-activity__phase {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px 6px;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text-secondary);
  font-style: italic;
}

.hm-smartcal-activity__spin {
  animation: spin 1s linear infinite;
  color: #a855f7;
  flex-shrink: 0;
}

/* Result summary — outside the scroll box, always fully visible */
.hm-smartcal-result {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 2px 0;
}

.hm-smartcal-clear-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: flex-start;
  padding: 5px 11px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--bg-panel);
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
  transition: background-color 0.1s, color 0.1s;
}

.hm-smartcal-clear-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
/* Shared styles for all Klipper-specific tab panels */

.klipper-tab {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: var(--bg-primary);
  font-size: 13px;
  color: var(--text-primary);
}

/* ── Toolbar / header bar ──────────────────────────────────────────────────── */
.klipper-tab-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-panel, var(--bg-secondary));
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.klipper-tab-bar h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.klipper-tab-bar .spacer { flex: 1; }

/* ── Scrollable body ───────────────────────────────────────────────────────── */
.klipper-tab-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── Cards / sections ──────────────────────────────────────────────────────── */
.klipper-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.klipper-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-panel, var(--bg-secondary));
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.klipper-card-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Badge / status chips ──────────────────────────────────────────────────── */
.klipper-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
}

.klipper-badge.on  { background: color-mix(in srgb, #22c55e 18%, transparent); color: #22c55e; }
.klipper-badge.off { background: color-mix(in srgb, var(--text-muted) 14%, transparent); color: var(--text-muted); }
.klipper-badge.error { background: color-mix(in srgb, #ef4444 18%, transparent); color: #ef4444; }
.klipper-badge.warn  { background: color-mix(in srgb, #f59e0b 18%, transparent); color: #f59e0b; }
.klipper-badge.info  { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }

/* ── Object grid (Exclude Object) ─────────────────────────────────────────── */
.klipper-object-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}

.klipper-object-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-primary);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  word-break: break-all;
}

.klipper-object-btn:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--accent); }
.klipper-object-btn.excluded {
  background: color-mix(in srgb, #ef4444 10%, transparent);
  border-color: #ef4444;
  color: #ef4444;
  text-decoration: line-through;
  cursor: default;
  opacity: 0.7;
}

.klipper-object-btn.current {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-color: var(--accent);
  color: var(--accent);
}

/* ── Bed Mesh heat-map grid ────────────────────────────────────────────────── */
.klipper-mesh-grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
}

.klipper-mesh-row {
  display: flex;
  gap: 2px;
}

.klipper-mesh-cell {
  width: 28px;
  height: 28px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 600;
  color: rgba(0,0,0,0.7);
}

/* ── Steps / wizard ────────────────────────────────────────────────────────── */
.klipper-step {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.klipper-step-num {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.klipper-step-body {
  flex: 1;
  padding-top: 2px;
}

.klipper-step-title {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 4px;
}

.klipper-step-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.45;
  margin-bottom: 8px;
}

/* ── Table ─────────────────────────────────────────────────────────────────── */
.klipper-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.klipper-table th {
  padding: 5px 10px;
  text-align: left;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}

.klipper-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border-light, var(--border));
  color: var(--text-secondary);
  vertical-align: middle;
}

.klipper-table tr:last-child td { border-bottom: none; }
.klipper-table tr:hover td { background: color-mix(in srgb, var(--accent) 5%, transparent); }

/* ── Form row ─────────────────────────────────────────────────────────────── */
.klipper-form-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.klipper-form-row label {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

.klipper-form-row input[type='number'],
.klipper-form-row input[type='text'],
.klipper-form-row select {
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 12px;
  min-width: 80px;
}

/* ── Disconnected placeholder ─────────────────────────────────────────────── */
.klipper-disconnected {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--text-muted);
  font-size: 13px;
  padding: 40px;
  text-align: center;
}

/* ── Shared button overrides ──────────────────────────────────────────────── */
.klipper-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.klipper-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.klipper-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.klipper-btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.klipper-btn-primary:hover { filter: brightness(1.1); }

.klipper-btn-danger {
  border-color: #ef4444;
  color: #ef4444;
}

.klipper-btn-danger:hover { background: color-mix(in srgb, #ef4444 12%, transparent); }

/* ── Color legend bar (bed mesh) ──────────────────────────────────────────── */
.klipper-mesh-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-muted);
}

.klipper-mesh-legend-bar {
  width: 120px;
  height: 10px;
  border-radius: 4px;
  background: linear-gradient(to right, #3b82f6, #22c55e, #f59e0b, #ef4444);
}
.calib-camera {
  display: grid;
  gap: 10px;
}

.calib-camera__feed {
  position: relative;
}

.calib-camera__feed img,
.calib-camera__feed video {
  max-width: 100%;
  border-radius: 8px;
}

.calib-camera__feed-placeholder {
  border: 1px dashed var(--border);
  padding: 20px;
  text-align: center;
  color: var(--text-secondary);
  border-radius: 8px;
}

.calib-camera__controls {
  display: flex;
  gap: 8px;
  align-items: center;
}

.calib-camera__btn {
  min-height: 28px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-toolbar);
  color: var(--text-primary);
  padding: 0 9px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.calib-camera__btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.calib-camera__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.calib-camera__thumbnails {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.calib-camera__thumb {
  position: relative;
  width: 64px;
  height: 64px;
}

.calib-camera__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

.calib-camera__thumb-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 10px;
  line-height: 16px;
}

.calib-camera__upload {
  display: grid;
  gap: 4px;
}

.calib-camera__upload label {
  font-size: 12px;
  color: var(--text-secondary);
}

.calib-camera__error {
  color: #ef4444;
  font-size: 12px;
}
.calib-wizard {
  /* Orange used exclusively for auto-configured calibration indicators */
  --calib-auto: #f97316;

  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--bg-panel) 72%, transparent);
  padding: 18px;
}

/* ── Panel ────────────────────────────────────────────────────────────────── */

.calib-wizard__panel {
  /* Width / height come from inline style (set by the resize hook).
     These CSS values act as a safe, non-JS fallback only.           */
  width: min(660px, calc(100vw - 32px));
  max-height: min(700px, calc(100vh - 36px));
  /* Hard limits so the panel can never be too tiny or overflow viewport */
  min-width: 400px;
  min-height: 420px;
  max-width: calc(100vw - 32px);

  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-panel);
  color: var(--text-primary);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  box-shadow: 0 18px 50px color-mix(in srgb, var(--text-primary) 22%, transparent);
  /* Required so the absolutely-positioned resize handles are relative to this */
  position: relative;
  overflow: visible; /* handles protrude outside the border */
}

/* ── Resize handles ───────────────────────────────────────────────────────── */

.calib-wizard__resize {
  position: absolute;
  z-index: 10;
  /* transparent — just a hit-target */
}

/* Edge handles */
.calib-wizard__resize--n {
  top: -4px; left: 10px; right: 10px; height: 8px;
  cursor: n-resize;
}
.calib-wizard__resize--s {
  bottom: -4px; left: 10px; right: 10px; height: 8px;
  cursor: s-resize;
}
.calib-wizard__resize--e {
  right: -4px; top: 10px; bottom: 10px; width: 8px;
  cursor: e-resize;
}
.calib-wizard__resize--w {
  left: -4px; top: 10px; bottom: 10px; width: 8px;
  cursor: w-resize;
}

/* Corner handles */
.calib-wizard__resize--ne {
  top: -4px; right: -4px; width: 14px; height: 14px;
  cursor: ne-resize;
}
.calib-wizard__resize--se {
  bottom: -4px; right: -4px; width: 14px; height: 14px;
  cursor: se-resize;
}
.calib-wizard__resize--sw {
  bottom: -4px; left: -4px; width: 14px; height: 14px;
  cursor: sw-resize;
}
.calib-wizard__resize--nw {
  top: -4px; left: -4px; width: 14px; height: 14px;
  cursor: nw-resize;
}

/* Visual grip indicator on SE corner */
.calib-wizard__resize--se::after {
  content: '';
  position: absolute;
  bottom: 5px; right: 5px;
  width: 7px; height: 7px;
  border-right: 2px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-bottom: 2px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: 1px;
  pointer-events: none;
}

/* ── Header / Footer ──────────────────────────────────────────────────────── */

.calib-wizard__header,
.calib-wizard__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
}

/* Header: clean, slightly elevated, accent top stripe */
.calib-wizard__header {
  position: relative;
  background: color-mix(in srgb, var(--text-primary) 3%, var(--bg-panel));
  border-bottom: 1px solid var(--border);
  border-radius: 8px 8px 0 0;
  overflow: hidden;
}

/* Thin accent stripe at the very top of the panel */
.calib-wizard__header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent);
  opacity: 0.8;
}

/* Animated step-progress bar along the header bottom edge */
.calib-wizard__progress {
  position: absolute;
  bottom: -1px; left: 0;
  height: 2px;
  background: var(--accent);
  opacity: 0.5;
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.calib-wizard__header h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

/* "Step X of 8" — plain muted text, no pill */
.calib-wizard__header .calib-wizard__step-indicator {
  font-size: 11px;
  color: var(--text-secondary);
}

/* Test-type badge in the footer */
.calib-wizard__footer .calib-wizard__step-indicator {
  background: color-mix(in srgb, var(--text-primary) 5%, var(--bg-panel));
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 7px;
  font-size: 11px;
  font-family: monospace;
  color: var(--text-secondary);
}

.calib-wizard__step-indicator,
.calib-step__muted,
.calib-step label span {
  color: var(--text-secondary);
  font-size: 12px;
}

/* ── Body (scrollable area for each step) ─────────────────────────────────── */

.calib-wizard__body {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px;
  /* Enable container queries so steps can react to the wizard's current width */
  container-type: inline-size;
  container-name: calib-body;
}

/* ── Footer ───────────────────────────────────────────────────────────────── */

.calib-wizard__footer {
  border-top: 1px solid var(--border);
}

.calib-wizard__actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */

.calib-wizard__back,
.calib-wizard__next,
.calib-wizard__cancel,
.calib-step button {
  min-height: 30px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-panel);
  color: var(--text-primary);
  padding: 0 10px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.calib-wizard__next {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--bg-panel));
}

.calib-wizard__back:disabled,
.calib-wizard__next:disabled,
.calib-step button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

/* ── Header actions (Minimize + Cancel side-by-side) ─────────────────────── */

.calib-wizard__header-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.calib-wizard__minimize {
  min-height: 28px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
  padding: 0 10px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.calib-wizard__minimize:hover {
  background: color-mix(in srgb, var(--text-primary) 6%, var(--bg-panel));
}

/* ── Step base layout ─────────────────────────────────────────────────────── */

.calib-step {
  display: grid;
  gap: 12px;
  min-width: 0;
  width: 100%;
}

.calib-step h3 {
  margin: 0;
  font-size: 15px;
}

.calib-step p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.45;
}

/* Exclude inspect check-rows from the grid label reset — they use flex */
.calib-step label:not(.calib-inspect__check-row),
.calib-step__field {
  display: grid;
  gap: 5px;
}

.calib-step input,
.calib-step select,
.calib-step textarea {
  min-width: 0;
  min-height: 32px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-panel);
  color: var(--text-primary);
  padding: 0 8px;
  font: inherit;
  font-size: 13px;
}

.calib-step textarea {
  min-height: 86px;
  padding: 8px;
  resize: vertical;
}

.calib-step__inline-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
}

.calib-step__list,
.calib-step__checklist,
.calib-step__panel {
  border: 1px solid var(--border);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  padding: 10px;
}

.calib-step__radio {
  display: flex;
  align-items: center;
  gap: 8px;
}

.calib-step__radio input {
  min-height: 0;
}

.calib-step__warning {
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-panel));
  color: var(--text-primary);
  padding: 10px;
  font-size: 13px;
}

.calib-step__error {
  color: color-mix(in srgb, var(--accent) 35%, var(--text-primary));
  font-size: 13px;
}

.calib-step pre {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--text-primary) 6%, var(--bg-panel));
  color: var(--text-primary);
  padding: 10px;
  overflow: auto;
  font-size: 12px;
}

.calib-step ul {
  margin: 0;
  padding-left: 18px;
  color: var(--text-secondary);
  font-size: 13px;
}

/* ── Model source selector (StepLoadModel) ───────────────────────────────── */

.calib-step__model-source {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  flex-wrap: wrap;
}

.calib-step__model-source-info {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

.calib-step__model-source-name {
  font-size: 13px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calib-step__model-source-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* ── 3D model canvas (StepLoadModel) ─────────────────────────────────────── */

.calib-step__model-canvas {
  height: 220px;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-secondary, #0d0d1a);
  position: relative;
}

.calib-step__model-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  font-size: 12px;
}

/* ── Setup check rows (StepSetupCheck) ───────────────────────────────────── */

.calib-step__check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.calib-step__check-label {
  flex: 1;
  color: var(--text-primary);
}

.calib-step__check-value {
  color: var(--text-secondary);
  font-size: 12px;
  text-align: right;
}

.calib-step__ok-banner {
  border: 1px solid #22c55e;
  border-radius: 8px;
  background: color-mix(in srgb, #22c55e 10%, var(--bg-panel));
  color: #22c55e;
  padding: 10px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── Slice preview layout (StepSlicePreview) ─────────────────────────────── */

.calib-step__slice-layout {
  display: grid;
  grid-template-columns: 1fr 230px;
  gap: 10px;
  align-items: start;
}

/* Widen the settings column when there's room */
@container calib-body (min-width: 680px) {
  .calib-step__slice-layout {
    grid-template-columns: 1fr 250px;
  }
}

@container calib-body (min-width: 820px) {
  .calib-step__slice-layout {
    grid-template-columns: 1fr 290px;
  }
  .calib-step__slice-canvas,
  .calib-step__slice-settings {
    height: 360px;
  }
}

/* Collapse to single column on narrow panels */
@container calib-body (max-width: 460px) {
  .calib-step__slice-layout {
    grid-template-columns: 1fr;
  }
  .calib-step__slice-settings {
    height: auto;
    max-height: 280px;
  }
}

.calib-step__slice-canvas {
  position: relative;      /* anchors the plane-info overlay */
  height: 300px;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-secondary, #0d0d1a);
}

/* ── Tuning-plane info overlay ───────────────────────────────────────────── */

.calib-step__plane-info {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}

.calib-step__plane-info-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px 3px 6px;
  border-radius: 4px;
  font-size: 11px;
  line-height: 1;
  background: rgba(249, 115, 22, 0.13);
  color: #f97316;
  border: 1px solid rgba(249, 115, 22, 0.35);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s;
}

.calib-step__plane-info-btn:hover {
  background: rgba(249, 115, 22, 0.24);
}

.calib-step__plane-info-popup {
  background: var(--bg-primary, #111);
  border: 1px solid rgba(249, 115, 22, 0.30);
  border-radius: 6px;
  padding: 8px 10px;
  max-width: 210px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-secondary, #aaa);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}

.calib-step__plane-info-popup p {
  margin: 0;
}

/* ── Plane hover tooltip (floats over the canvas at cursor position) ───────── */

.calib-step__plane-tooltip {
  position: absolute;
  z-index: 20;
  pointer-events: none;        /* never blocks 3-D pointer events */
  background: var(--bg-primary, #111);
  border: 1px solid rgba(249, 115, 22, 0.45);
  border-radius: 5px;
  padding: 5px 9px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--text-primary, #e0e0e0);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.55);
  white-space: nowrap;
}

.calib-step__plane-tooltip__z {
  font-size: 10px;
  color: var(--text-secondary, #888);
  font-variant-numeric: tabular-nums;
}

/* Settings panel — flex column so the Reslice button is always pinned */
.calib-step__slice-settings {
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  height: 300px; /* matches canvas; overridden at larger container widths above */
}

.calib-step__slice-settings-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 2px 0;
  display: grid;
  gap: 0;
  align-content: start;
}

.calib-step__slice-settings-footer {
  border-top: 1px solid var(--border);
  padding: 8px 10px;
  flex-shrink: 0;
}

/* ── Compact-input override ───────────────────────────────────────────────────
   The generic `.calib-step input` rule (specificity 0,1,1) beats the field
   class alone (0,1,0), so min-height:32px and font-size:13px always win.
   This rule lives later in the file and targets the scroll container for a
   clean (0,2,2) override without !important.                                 */
.calib-step__slice-settings-scroll input:not([type="checkbox"]),
.calib-step__slice-settings-scroll select {
  min-height: 0;
  height: 17px;
  font-size: 11px;
  border-radius: 3px;
  padding: 0 3px;
}

/* ── Slicer-style field rows ──────────────────────────────────────────────── */

.calib-slice-section {
  display: grid;
  gap: 0;
}

/* Collapsible summary acting as the section header */
.calib-slice-section > summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 3px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--accent);
  cursor: pointer;
  user-select: none;
  list-style: none; /* Firefox */
}

/* Chromium hides the default triangle via ::-webkit-details-marker */
.calib-slice-section > summary::-webkit-details-marker {
  display: none;
}

/* Chevron icon — rotates when open */
.calib-slice-section > summary::before {
  content: '▸';
  font-size: 9px;
  opacity: 0.6;
  transition: transform 0.15s;
  display: inline-block;
}

details.calib-slice-section[open] > summary::before {
  content: '▾';
}

/* Horizontal rule extending from the section title */
.calib-slice-section > summary::after {
  content: '';
  flex: 1;
  height: 1px;
  background: color-mix(in srgb, var(--accent) 28%, var(--border));
}

/* ── Calibration script card ─────────────────────────────────────────────────
   Each post-processor is shown as a card regardless of enabled state.
   Disabled cards are dimmed; the Active/Paused pill toggles the state.        */

.calib-script-card {
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 5%, var(--bg-panel));
  display: grid;
  gap: 6px;
  transition: opacity 0.18s, border-color 0.18s, background 0.18s;
}

/* Disabled state — visually muted, still interactive */
.calib-script-card--disabled {
  opacity: 0.45;
  background: color-mix(in srgb, var(--text-primary) 2%, var(--bg-panel));
  border-color: var(--border);
}

.calib-script-card--disabled:hover {
  opacity: 0.7;
}

.calib-script-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* Title + kind badge grouped on the left */
.calib-script-card__title-group {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.calib-script-card__title {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
}

.calib-script-card__kind {
  font-size: 10px;
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--text-primary) 6%, var(--bg-panel));
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 5px;
  white-space: nowrap;
  font-family: monospace;
}

/* Active / Paused checkbox-style toggle — double-class beats .calib-step button */
.calib-script-card__enable-btn.calib-script-card__enable-btn {
  flex-shrink: 0;
  min-height: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px 3px 6px;
  border-radius: 4px;           /* square corners → reads as a form control */
  font-size: 10px;
  font-weight: 500;
  cursor: pointer;
  border: 1.5px solid var(--border);
  background: color-mix(in srgb, var(--text-primary) 4%, var(--bg-panel));
  color: var(--text-secondary);
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  white-space: nowrap;
  user-select: none;
}

/* Small checkbox square indicator */
.calib-script-card__enable-btn::before {
  content: '';
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  border: 1.5px solid currentColor;
  background: transparent;
  transition: background 0.15s, border-color 0.15s;
}

/* Hover on paused → faint fill previews what will happen on click */
.calib-script-card__enable-btn:not(.calib-script-card__enable-btn--on):hover {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  color: var(--text-primary);
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-panel));
}

.calib-script-card__enable-btn:not(.calib-script-card__enable-btn--on):hover::before {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
}

/* Active / checked state */
.calib-script-card__enable-btn--on {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-panel));
  color: var(--accent);
}

/* Filled checkbox box for active */
.calib-script-card__enable-btn--on::before {
  background: var(--accent);
  border-color: var(--accent);
}

/* Hover on active → slightly brighter to hint click will toggle off */
.calib-script-card__enable-btn--on:hover {
  background: color-mix(in srgb, var(--accent) 20%, var(--bg-panel));
}

.calib-script-card__detail {
  margin: 0;
  font-size: 11px;
  color: var(--text-primary);
  line-height: 1.5;
}

.calib-script-card__hint {
  margin: 0;
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.5;
  font-style: italic;
}

.calib-script-card__fields {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.calib-script-card__field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.calib-script-card__field-label {
  font-size: 10px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.calib-script-card__field-input {
  width: 70px;
  height: 22px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: color-mix(in srgb, var(--text-primary) 4%, var(--bg-panel));
  color: var(--text-primary);
  padding: 0 4px;
  font: inherit;
  font-size: 12px;
  text-align: right;
}

.calib-script-card__field-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
}

.calib-script-card__arrow {
  font-size: 14px;
  color: var(--accent);
  padding-bottom: 2px;
  align-self: flex-end;
}

/* ── Drive-type preset buttons (Pressure Advance card) ───────────────────── */

.calib-script-card__drive-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 0 2px;
}

.calib-script-card__drive-btns {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.calib-script-card__drive-btn {
  padding: 3px 10px;
  border-radius: 4px;
  border: 1px solid var(--border-subtle, #444);
  background: var(--bg-panel);
  color: var(--text-secondary);
  font-size: 11px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.calib-script-card__drive-btn:hover {
  border-color: var(--accent);
  color: var(--text-primary);
}

.calib-script-card__drive-btn--active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 15%, var(--bg-panel));
  color: var(--accent);
  font-weight: 600;
}

.calib-script-card__drive-btn--custom {
  border-style: dashed;
  color: var(--text-tertiary, #888);
  cursor: default;
  pointer-events: none;
}

.calib-script-card__band-info {
  font-size: 10px;
  color: var(--text-tertiary, #888);
  margin-top: 2px;
  padding: 0 1px;
}

/* ── Tuning-tower step-sequence preview ──────────────────────────────────────
   Chips showing the Z height → injected value at every step boundary.        */

.calib-script-card__steps {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 7px;
}

.calib-script-card__step-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 2px 5px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--accent) 9%, var(--bg-panel));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  font-size: 9.5px;
  line-height: 1.25;
  white-space: nowrap;
}

.calib-script-card__step-z {
  color: var(--text-secondary);
}

.calib-script-card__step-val {
  color: var(--accent);
  font-weight: 600;
}

.calib-slice-field {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 20px;
  padding: 1px 8px;
}

.calib-slice-field:hover {
  background: color-mix(in srgb, var(--accent) 5%, var(--bg-panel));
}

.calib-slice-field__label {
  flex: 1;
  font-size: 11px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.calib-slice-field__input {
  width: 50px;
  min-width: 0;
  flex-shrink: 0;
  min-height: 0;
  height: 17px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: color-mix(in srgb, var(--text-primary) 4%, var(--bg-panel));
  color: var(--text-primary);
  padding: 0 3px;
  font: inherit;
  font-size: 11px;
  text-align: right;
}

.calib-slice-field__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
}

/* Select fields fill remaining space but won't overflow the panel */
.calib-slice-field__input--select {
  width: auto;
  flex: 1;
  min-width: 0;
  max-width: 100%;
  text-align: left;
  padding: 0 3px;
  cursor: pointer;
}

/* Checkbox fields — transform keeps the rendered size in check across browsers */
.calib-slice-field__check {
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--accent);
  transform: scale(0.78);
  transform-origin: center;
}

.calib-slice-field__unit {
  width: 24px;
  font-size: 10px;
  color: var(--text-secondary);
  flex-shrink: 0;
  text-align: left;
}

/* ── Auto-set field highlight ────────────────────────────────────────────────
   Fields touched by the calibration preset get a left accent bar and a
   subtle tinted background so the user knows which settings were configured
   automatically.                                                              */

.calib-slice-field--auto {
  background: color-mix(in srgb, var(--calib-auto) 7%, var(--bg-panel));
  border-left: 2px solid color-mix(in srgb, var(--calib-auto) 70%, transparent);
  padding-left: 8px; /* compensate for the 2 px border */
  position: relative;
}

.calib-slice-field--auto:hover {
  background: color-mix(in srgb, var(--calib-auto) 12%, var(--bg-panel));
}

/* Small ✦ dot appended to the label text */
.calib-slice-field--auto .calib-slice-field__label::after {
  content: '✦';
  font-size: 8px;
  color: var(--calib-auto);
  margin-left: 5px;
  vertical-align: middle;
  opacity: 0.85;
}

/* ── Pre-configured settings bar (expandable) ────────────────────────────── */

.calib-step__preset-bar {
  display: flex;
  flex-direction: column;
  background: color-mix(in srgb, var(--calib-auto) 8%, var(--bg-panel));
  border: 1px solid color-mix(in srgb, var(--calib-auto) 22%, transparent);
  border-radius: 6px;
  font-size: 11px;
  color: var(--text-secondary);
  overflow: hidden;
}

/* Header row: toggle button flex-grows, undo button sits at the right */
.calib-step__preset-bar__header {
  display: flex;
  align-items: center;
}

/* Toggle button — double-class beats .calib-step button (0,1,1) */
.calib-step__preset-bar__toggle.calib-step__preset-bar__toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px 5px 10px;
  flex: 1;
  min-width: 0;
  min-height: 0;
  border: none;
  border-radius: 0;
  background: none;
  color: var(--text-secondary);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  text-align: left;
}

.calib-step__preset-bar__toggle:hover {
  background: color-mix(in srgb, var(--calib-auto) 6%, var(--bg-panel));
}

.calib-step__preset-bar__icon {
  color: var(--calib-auto);
  flex-shrink: 0;
}

.calib-step__preset-bar__text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calib-step__preset-bar__text strong {
  color: var(--calib-auto);
}

.calib-step__preset-bar__reason {
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.4;
  margin: 0 0 6px;
}

.calib-step__preset-bar__chevron {
  flex-shrink: 0;
  color: var(--text-secondary);
  transition: transform 0.2s ease;
}

.calib-step__preset-bar__chevron--open {
  transform: rotate(180deg);
}

/* Undo button — double-class to override .calib-step button min-height */
.calib-step__preset-bar__undo.calib-step__preset-bar__undo {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  min-height: 0;
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 6px;
  margin-right: 8px;
  font-size: 10px;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
}

.calib-step__preset-bar__undo:hover {
  border-color: var(--calib-auto);
  color: var(--calib-auto);
}

/* Undone state — bar stays visible but muted, invites Re-apply */
.calib-step__preset-bar--undone {
  background: color-mix(in srgb, var(--text-primary) 3%, var(--bg-panel));
  border-color: var(--border);
}

.calib-step__preset-bar--undone .calib-step__preset-bar__icon {
  color: var(--text-secondary);
}

.calib-step__preset-bar--undone .calib-step__preset-bar__text strong {
  color: var(--text-primary);
}

.calib-step__preset-bar--undone .calib-step__preset-bar__toggle:hover {
  background: color-mix(in srgb, var(--text-primary) 4%, var(--bg-panel));
}

.calib-step__preset-bar--undone .calib-step__preset-item__value {
  color: var(--text-secondary);
}

/* Re-apply button — accent-tinted to stand out as the action to take */
.calib-step__preset-bar__reapply.calib-step__preset-bar__reapply {
  border-color: color-mix(in srgb, var(--calib-auto) 55%, var(--border));
  color: var(--calib-auto);
}

.calib-step__preset-bar__reapply:hover {
  border-color: var(--calib-auto);
  background: color-mix(in srgb, var(--calib-auto) 12%, var(--bg-panel));
}

/* Expanded details panel — rationale text + overrides grid */
.calib-step__preset-details {
  border-top: 1px solid color-mix(in srgb, var(--calib-auto) 18%, transparent);
  padding: 8px 10px 8px;
}

.calib-step__preset-bar--undone .calib-step__preset-details {
  border-top-color: color-mix(in srgb, var(--text-secondary) 18%, transparent);
}

/* Two-column grid: label | value */
.calib-step__preset-items {
  display: grid;
  grid-template-columns: 1fr auto;
  row-gap: 1px;
}

/* display:contents collapses the wrapper so label+value are direct grid children */
.calib-step__preset-item {
  display: contents;
}

.calib-step__preset-item__label {
  padding: 2px 10px 2px 0;
  font-size: 10.5px;
  color: var(--text-secondary);
  white-space: nowrap;
  align-self: center;
}

.calib-step__preset-item__value {
  padding: 2px 0;
  font-size: 10.5px;
  color: var(--calib-auto);
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
  align-self: center;
}

/* Separator spacer between sections */
.calib-slice-separator {
  height: 1px;
  background: var(--border);
  margin: 2px 10px;
  opacity: 0.5;
}

/* ── Post-processing indicator bar (expandable) ──────────────────────────── */

.calib-step__pp-bar {
  display: flex;
  flex-direction: column;
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-panel));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: 6px;
  font-size: 11px;
  color: var(--text-secondary);
  overflow: hidden;
}

/* Toggle button row — override the generic .calib-step button rule */
.calib-step__pp-bar__toggle.calib-step__pp-bar__toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  width: 100%;
  min-height: 0;
  border: none;
  border-radius: 0;
  background: none;
  color: var(--text-secondary);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  text-align: left;
}

.calib-step__pp-bar__toggle:hover {
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-panel));
}

.calib-step__pp-bar__icon {
  color: var(--accent);
  flex-shrink: 0;
}

.calib-step__pp-bar__text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calib-step__pp-bar__text strong {
  color: var(--accent);
}

.calib-step__pp-bar__chevron {
  flex-shrink: 0;
  color: var(--text-secondary);
  transition: transform 0.2s ease;
}

.calib-step__pp-bar__chevron--open {
  transform: rotate(180deg);
}

/* Script cards container — shown when expanded */
.calib-step__pp-scripts {
  border-top: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  padding: 8px;
  display: grid;
  gap: 8px;
}

/* ── Layer controls (StepSlicePreview) ───────────────────────────────────── */

.calib-step__layer-controls {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  display: grid;
  gap: 6px;
}

.calib-step__layer-info {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--text-secondary);
  font-size: 12px;
}

/* ── Queue step actions (StepQueue) ──────────────────────────────────────── */

.calib-step__queue-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* Add-filament modal (StepPickFilament) */
.calib-step__modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--bg-panel) 72%, transparent);
  padding: 16px;
}

.calib-step__modal {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-panel);
  color: var(--text-primary);
  display: grid;
  gap: 12px;
  padding: 14px;
  box-shadow: 0 18px 50px color-mix(in srgb, var(--text-primary) 22%, transparent);
}

.calib-step__modal-header,
.calib-step__modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.calib-step__modal-header h4 {
  margin: 0;
  font-size: 15px;
}

.calib-step__modal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.calib-step__modal-field--full {
  grid-column: 1 / -1;
}

@container calib-body (max-width: 460px) {
  .calib-step__inline-field,
  .calib-step__modal-grid {
    grid-template-columns: 1fr;
  }
}

/* ── In-progress pill on calibration cards ───────────────────────────────── */

.calib-center__in-progress-pill {
  color: var(--accent, #7c70f5);
  border-color: var(--accent, #7c70f5);
  background: color-mix(in srgb, var(--accent, #7c70f5) 12%, var(--bg-panel));
}

.calib-center__card.is-in-progress {
  border-color: var(--accent, #7c70f5);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent, #7c70f5) 30%, transparent);
}

/* ── Inspect step (StepInspect) ──────────────────────────────────────────── */

.calib-inspect__section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

/* ── Health checklist ────────────────────────────────────────────────────── */

.calib-inspect__checks {
  display: grid;
  gap: 10px;
}

.calib-inspect__check-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  /* Override the grid that .calib-step label applies */
  display: flex !important;
}

.calib-inspect__check-input {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  min-height: 0 !important;
  accent-color: var(--accent);
  cursor: pointer;
}

.calib-inspect__check-text {
  display: grid;
  gap: 2px;
}

.calib-inspect__check-label {
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 500;
}

/* ── Manual measurement field rows ───────────────────────────────────────── */

.calib-inspect__fields {
  display: grid;
  gap: 6px;
}

.calib-inspect-field {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
}

.calib-inspect-field--full {
  align-items: flex-start;
  flex-direction: column;
  gap: 4px;
  min-height: auto;
}

.calib-inspect-field__label {
  flex: 1;
  font-size: 13px;
  color: var(--text-secondary);
  white-space: nowrap;
  min-width: 0;
}

.calib-inspect-field--full .calib-inspect-field__label {
  flex: none;
  width: 100%;
}

.calib-inspect-field__input {
  width: 90px;
  min-height: 0;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: color-mix(in srgb, var(--text-primary) 5%, var(--bg-panel));
  color: var(--text-primary);
  padding: 0 6px;
  font: inherit;
  font-size: 13px;
  text-align: right;
}

.calib-inspect-field__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
}

.calib-inspect-field__textarea {
  width: 100%;
  min-height: 72px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: color-mix(in srgb, var(--text-primary) 5%, var(--bg-panel));
  color: var(--text-primary);
  padding: 6px 8px;
  font: inherit;
  font-size: 13px;
  resize: vertical;
  box-sizing: border-box;
}

.calib-inspect-field__unit {
  width: 34px;
  font-size: 11px;
  color: var(--text-secondary);
  flex-shrink: 0;
}

/* ── Pressure-advance photo guidance ─────────────────────────────────────── */

.calib-inspect__tips {
  margin: 0;
  padding-left: 18px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.55;
}

.calib-inspect__pa-params {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 7%, var(--bg-panel));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  font-size: 11px;
  color: var(--text-secondary);
}

.calib-inspect__pa-params strong {
  color: var(--accent);
  font-weight: 600;
}

/* ── AI analysis action row + config CTA ─────────────────────────────────── */

.calib-inspect__ai-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.calib-inspect__ai-config-btn.calib-inspect__ai-config-btn {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-panel));
}

.calib-inspect__ai-config-btn:hover {
  background: color-mix(in srgb, var(--accent) 16%, var(--bg-panel));
}

/* ── Inline AI recommendation card ───────────────────────────────────────── */

.calib-inspect__rec {
  display: grid;
  gap: 10px;
  margin-top: 4px;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-panel));
}

.calib-inspect__rec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.calib-inspect__rec-value,
.calib-inspect__rec-confidence {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.calib-inspect__rec-confidence {
  flex: 1;
  min-width: 160px;
}

.calib-inspect__rec-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}

.calib-inspect__rec-number {
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  line-height: 1.1;
}

.calib-inspect__rec-bar {
  position: relative;
  height: 8px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--text-primary) 8%, var(--bg-panel));
  border: 1px solid var(--border);
  overflow: hidden;
}

.calib-inspect__rec-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--accent) 60%, transparent),
    var(--accent)
  );
  transition: width 0.3s ease;
}

.calib-inspect__rec-pct {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.calib-inspect__rec-summary {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-primary);
}

.calib-inspect__rec-details {
  border-radius: 6px;
  background: color-mix(in srgb, var(--text-primary) 4%, var(--bg-panel));
  border: 1px solid var(--border);
  padding: 6px 10px;
}

.calib-inspect__rec-details > summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  list-style: none;
  user-select: none;
}

.calib-inspect__rec-details > summary::-webkit-details-marker {
  display: none;
}

.calib-inspect__rec-details > summary::before {
  content: '▸';
  font-size: 10px;
  opacity: 0.6;
  display: inline-block;
  margin-right: 6px;
  transition: transform 0.15s;
}

.calib-inspect__rec-details[open] > summary::before {
  transform: rotate(90deg);
}

.calib-inspect__rec-details ul {
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.calib-inspect__rec-details--warn {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-panel));
}

.calib-inspect__rec-details--warn > summary {
  color: var(--accent);
}

.calib-inspect__rec-apply.calib-inspect__rec-apply {
  justify-self: start;
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, var(--bg-panel));
  color: var(--text-primary);
  font-weight: 600;
}

.calib-inspect__rec-apply:hover {
  background: color-mix(in srgb, var(--accent) 28%, var(--bg-panel));
}

/* ── "Run X next" suggestion slot ────────────────────────────────────────── */

.calib-inspect__rec-next {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-panel));
}

.calib-inspect__rec-next-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  font-weight: 600;
}

.calib-inspect__rec-next-reason {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-primary);
}

.calib-inspect__rec-next-target {
  font-size: 12px;
  color: var(--text-secondary);
}

.calib-inspect__rec-next-target strong {
  color: var(--text-primary);
  font-weight: 600;
}

.calib-inspect__rec-next-cta.calib-inspect__rec-next-cta {
  justify-self: start;
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 22%, var(--bg-panel));
  color: var(--text-primary);
  font-weight: 600;
}

.calib-inspect__rec-next-cta:hover {
  background: color-mix(in srgb, var(--accent) 32%, var(--bg-panel));
}
.calib-results__chart {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: color-mix(in srgb, var(--text-primary) 3%, var(--bg-panel));
}

.calib-results__chart-svg {
  display: block;
  flex: 1 1 auto;
  overflow: visible;
}

.calib-results__chart-grid {
  stroke: color-mix(in srgb, var(--text-primary) 14%, transparent);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}

.calib-results__chart-line {
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.calib-results__chart-dot {
  fill: var(--accent);
  stroke: var(--bg-panel);
  stroke-width: 1;
  transition: r 120ms ease-out;
}

.calib-results__chart-dot--active {
  fill: color-mix(in srgb, var(--accent) 80%, white);
}

.calib-results__chart-hit {
  fill: transparent;
  outline: none;
  cursor: pointer;
}

.calib-results__chart-hit:focus-visible {
  stroke: var(--accent);
  stroke-width: 1;
  stroke-dasharray: 2 2;
}

.calib-results__chart-side {
  flex: 0 0 auto;
  min-width: 48px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.calib-results__chart-current {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  padding: 3px 6px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 14%, var(--bg-panel));
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.calib-results__chart-current-value {
  font-size: 12px;
  font-weight: 600;
}

.calib-results__chart-current-label {
  font-size: 9px;
  color: color-mix(in srgb, var(--accent) 80%, var(--text-secondary));
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.calib-results__chart-pill {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--text-primary) 8%, var(--bg-panel));
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.calib-results__chart-tooltip {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translate(-50%, -100%);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-panel);
  box-shadow: 0 4px 12px color-mix(in srgb, black 25%, transparent);
  font-size: 11px;
  color: var(--text-primary);
  pointer-events: none;
  white-space: nowrap;
  z-index: 2;
}

.calib-results__chart-tooltip-date {
  color: var(--text-secondary);
  font-size: 10px;
}

.calib-results__chart-tooltip-value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.calib-results__chart-tooltip-unit {
  font-weight: 500;
  color: var(--text-secondary);
}
/*
 * Calibration photo viewer — full-resolution lightbox.
 *
 * Composes the shared `Modal` shell (bc-modal-*), so we only style the
 * viewer-specific inner regions here. Keep the `calib-viewer__` namespace
 * consistent with `calib-results__` from CalibrationResultsHistory.css.
 */

.bc-modal.calib-viewer {
  width: min(820px, calc(100vw - 48px));
}

.calib-viewer__pager-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 14%, var(--bg-panel));
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.calib-viewer__body {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(220px, 1fr);
  gap: 14px;
  padding: 14px 16px;
}

@media (max-width: 720px) {
  .calib-viewer__body {
    grid-template-columns: 1fr;
  }
}

.calib-viewer__photo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  max-height: min(72vh, 560px);
  border: 1px solid var(--border-light);
  border-radius: 7px;
  background: color-mix(in srgb, var(--text-primary) 6%, var(--bg-panel));
  overflow: hidden;
}

.calib-viewer__photo {
  display: block;
  max-width: 100%;
  max-height: min(72vh, 560px);
  width: auto;
  height: auto;
  object-fit: contain;
}

.calib-viewer__photo-loading {
  width: 100%;
  height: 100%;
  min-height: 240px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--text-primary) 5%, var(--bg-panel)) 0%,
    color-mix(in srgb, var(--text-primary) 10%, var(--bg-panel)) 50%,
    color-mix(in srgb, var(--text-primary) 5%, var(--bg-panel)) 100%
  );
  background-size: 200% 100%;
  animation: calib-viewer-shimmer 1.2s linear infinite;
}

@keyframes calib-viewer-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

.calib-viewer__photo-fallback {
  padding: 20px;
  font-size: 12px;
  color: var(--text-secondary);
}

.calib-viewer__details {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.calib-viewer__facts {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 12px;
  align-items: baseline;
  font-size: 12px;
}

.calib-viewer__fact {
  display: contents;
}

.calib-viewer__fact dt {
  color: var(--text-secondary);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.calib-viewer__fact dd {
  margin: 0;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}

.calib-viewer__fact-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
}

.calib-viewer__fact-confidence {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-panel));
  color: var(--accent);
  font-weight: 600;
}

.calib-viewer__fact-mono {
  font-family: monospace;
  font-size: 11px;
  color: var(--text-secondary);
}

.calib-viewer__note {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--border-light);
  border-radius: 7px;
  background: color-mix(in srgb, var(--text-primary) 3%, var(--bg-panel));
}

.calib-viewer__note-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}

.calib-viewer__note-body {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-primary);
  white-space: pre-wrap;
}

.calib-viewer__footer-spacer {
  flex: 1;
}
.calib-results {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-panel);
}

.calib-results__head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.calib-results__title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}

.calib-results__count {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 14%, var(--bg-panel));
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.calib-results__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.calib-results__row {
  display: grid;
  gap: 4px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: color-mix(in srgb, var(--text-primary) 3%, var(--bg-panel));
}

.calib-results__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: baseline;
  font-size: 11px;
  color: var(--text-secondary);
}

.calib-results__date {
  color: var(--text-secondary);
}

.calib-results__value {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 13px;
  color: var(--accent);
}

.calib-results__confidence {
  font-variant-numeric: tabular-nums;
  padding: 1px 6px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-panel));
  color: var(--accent);
}

.calib-results__spool {
  font-family: monospace;
  font-size: 10px;
  color: var(--text-secondary);
}

.calib-results__note {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-primary);
}

.calib-results__thumbs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.calib-results__thumb {
  width: 56px;
  height: 42px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--text-primary) 6%, var(--bg-panel));
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.calib-results__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.calib-results__thumb--loading {
  cursor: default;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--text-primary) 5%, var(--bg-panel)) 0%,
    color-mix(in srgb, var(--text-primary) 10%, var(--bg-panel)) 50%,
    color-mix(in srgb, var(--text-primary) 5%, var(--bg-panel)) 100%
  );
  background-size: 200% 100%;
  animation: calib-results-shimmer 1.2s linear infinite;
}

.calib-results__thumb--missing {
  cursor: default;
  color: var(--text-secondary);
  font-size: 14px;
}

@keyframes calib-results-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
.failure-calibration-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--text-primary);
  font-size: 12px;
  line-height: 1.4;
}

.failure-calibration-link__icon {
  flex-shrink: 0;
  color: var(--accent);
}

.failure-calibration-link__text {
  color: var(--text-secondary);
}

.failure-calibration-link__button {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
}

.failure-calibration-link__button:hover {
  text-decoration: underline;
}

.failure-calibration-link__button:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}
.vision-failure-alerts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-panel, transparent));
}

.vision-failure-alerts__row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.vision-failure-alerts__icon {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--accent);
}

.vision-failure-alerts__body {
  flex: 1;
  min-width: 0;
}

.vision-failure-alerts__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  text-transform: capitalize;
}

.vision-failure-alerts__summary {
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-secondary);
}
.print-quality-card {
  --quality-accent: var(--accent);
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 10px;
  align-items: stretch;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--quality-accent) 35%, var(--border));
  background: color-mix(in srgb, var(--quality-accent) 4%, var(--bg-panel));
  color: var(--text-primary);
  font-size: 12px;
}

.print-quality-card--ok   { --quality-accent: #22c55e; }
.print-quality-card--warn { --quality-accent: #f59e0b; }
.print-quality-card--fail { --quality-accent: #ef4444; }

.print-quality-card__thumb {
  width: 96px;
  height: 72px;
  border-radius: 6px;
  overflow: hidden;
  background: color-mix(in srgb, var(--quality-accent) 8%, var(--bg-secondary));
  border: 1px solid color-mix(in srgb, var(--quality-accent) 30%, var(--border));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.print-quality-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.print-quality-card__thumb-empty {
  color: var(--text-secondary);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.print-quality-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.print-quality-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.print-quality-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--quality-accent) 15%, var(--bg-secondary));
  border: 1px solid color-mix(in srgb, var(--quality-accent) 45%, var(--border));
  color: var(--quality-accent);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.print-quality-card__when {
  color: var(--text-secondary);
  font-size: 11px;
}

.print-quality-card__filename {
  color: var(--text-primary);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.print-quality-card__summary {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.4;
}

.print-quality-card__causes {
  margin: 4px 0 0;
  padding-left: 16px;
  display: grid;
  gap: 2px;
  color: var(--text-secondary);
}

.print-quality-card__causes li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.print-quality-card__confidence {
  font-variant-numeric: tabular-nums;
  color: var(--quality-accent);
  font-weight: 600;
}
.printer-quality-history {
  --section-accent: #10b981;
}

.print-quality-history__list {
  display: grid;
  gap: 8px;
}
.printer-calibration-panel {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
  color: var(--text-primary);
  overflow-y: auto;
}

.printer-calibration-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
}

.printer-calibration-panel__header h2 {
  margin: 0;
  font-size: 15px;
}

.printer-calibration-panel__header p {
  margin: 3px 0 0;
  color: var(--text-secondary);
  font-size: 12px;
}

.printer-calibration-panel__prepare,
.printer-calibration-panel__preset {
  border: 1px solid var(--border);
  background: var(--bg-toolbar);
  color: var(--text-primary);
}

.printer-calibration-panel__prepare {
  min-height: 30px;
  border-radius: 6px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.printer-calibration-panel__prepare:hover,
.printer-calibration-panel__preset:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-toolbar));
}

.printer-calibration-panel__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
  gap: 10px;
  flex-shrink: 0;
  padding-right: 2px;
}

.printer-calibration-panel__lifecycle {
  display: grid;
  gap: 12px;
  flex-shrink: 0;
}

.calib-center {
  margin-bottom: 14px;
}

.calib-center__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
  gap: 10px;
}

/* Category-based accent colours (set --card-accent per category class) */
.calib-center__card--system   { --card-accent: #8b5cf6; }
.calib-center__card--geometry { --card-accent: #3b82f6; }
.calib-center__card--material { --card-accent: #f97316; }
.calib-center__card--motion   { --card-accent: #10b981; }

.calib-center__card {
  border: 1px solid color-mix(in srgb, var(--card-accent, var(--accent)) 25%, var(--border));
  border-left: 3px solid var(--card-accent, var(--accent));
  border-radius: 8px;
  background: var(--bg-panel);
  padding: 12px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: box-shadow 0.15s ease, transform 0.12s ease;
}

.calib-center__card:hover {
  box-shadow: 0 4px 14px color-mix(in srgb, var(--card-accent, var(--accent)) 16%, transparent);
  transform: translateY(-1px);
}

/* Status still drives the row-color inherited by pill badges */
.calib-center__card.is-overdue { --row-color: #ef4444; }
.calib-center__card.is-upcoming { --row-color: #f59e0b; }
.calib-center__card.is-ok      { --row-color: #22c55e; }

.calib-center__card-body {
  flex: 1;
  display: grid;
  gap: 4px;
}

.calib-center__category {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--card-accent, var(--accent));
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.calib-center__title {
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}

.calib-center__desc {
  margin: 0;
  color: var(--text-secondary);
  font-size: 11.5px;
  line-height: 1.45;
}

.calib-center__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}

.printer-calibration-panel__section {
  --section-accent: var(--accent);
  border: 1px solid color-mix(in srgb, var(--section-accent) 35%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--section-accent) 4%, var(--bg-panel));
  padding: 10px;
  display: grid;
  gap: 10px;
}

.printer-calibration-panel__section--aging {
  --section-accent: #3b82f6;
}

.printer-calibration-panel__section--wear {
  --section-accent: #f59e0b;
}

.printer-calibration-panel__section--moisture {
  --section-accent: #14b8a6;
}

.printer-calibration-panel__section--tests {
  --section-accent: #8b5cf6;
}

.printer-calibration-panel__section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.printer-calibration-panel__section-head h3,
.printer-calibration-panel__section-title,
.printer-calibration-panel__subsection-head h4,
.printer-calibration-panel__service-log h4 {
  margin: 0;
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.printer-calibration-panel__section-head h3,
.printer-calibration-panel__section-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.printer-calibration-panel__section-toggle {
  min-height: 28px;
  border: 0;
  background: transparent;
  color: var(--section-accent);
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

.printer-calibration-panel__section-toggle .printer-calibration-panel__section-title {
  color: var(--section-accent);
}

.printer-calibration-panel__section-toggle svg:first-child {
  transition: transform 0.15s ease;
  transform: rotate(-90deg);
}

.printer-calibration-panel__section-toggle svg:first-child.is-open {
  transform: rotate(0deg);
}

.printer-calibration-panel__section-toggle:hover .printer-calibration-panel__section-title {
  color: color-mix(in srgb, var(--section-accent) 82%, var(--text-primary));
}

.printer-calibration-panel__subsection {
  display: grid;
  align-content: start;
  gap: 10px;
}

.printer-calibration-panel__section-body {
  display: grid;
  gap: 10px;
}

.printer-calibration-panel__subsection-head h4 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.printer-calibration-panel__section-head button,
.printer-calibration-panel__life-row button,
.printer-calibration-panel__add-component button,
.printer-calibration-panel__service-form button,
.printer-calibration-panel__component-actions button,
.printer-calibration-panel__test-actions button,
.calib-center__start {
  min-height: 28px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-toolbar);
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 9px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.printer-calibration-panel__section-head .printer-calibration-panel__section-toggle {
  min-height: 28px;
  border: 0;
  background: transparent;
  color: var(--section-accent);
  justify-content: flex-start;
  padding: 0;
}

/* Start button — full-width, accent-tinted, overrides the shared button rule */
.calib-center__card .calib-center__start {
  width: 100%;
  margin-top: auto;
  background: color-mix(in srgb, var(--card-accent, var(--accent)) 10%, var(--bg-secondary));
  border-color: color-mix(in srgb, var(--card-accent, var(--accent)) 35%, var(--border));
  color: var(--card-accent, var(--accent));
  font-weight: 600;
  justify-content: center;
  gap: 6px;
}

.calib-center__card .calib-center__start:hover {
  background: color-mix(in srgb, var(--card-accent, var(--accent)) 22%, var(--bg-secondary));
  border-color: var(--card-accent, var(--accent));
}

.printer-calibration-panel__rows {
  display: grid;
  gap: 8px;
}

.printer-calibration-panel__life-row,
.printer-calibration-panel__component,
.printer-calibration-panel__moisture,
.printer-calibration-panel__test-row {
  border: 1px solid color-mix(in srgb, var(--row-color, var(--accent)) 22%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--row-color, var(--accent)) 6%, var(--bg-toolbar));
  padding: 9px;
}

.printer-calibration-panel__life-row {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) 92px auto auto;
  align-items: center;
  gap: 9px;
}

.printer-calibration-panel__test-row {
  display: grid;
  /* info | pill | actions — the edit/confirm blocks span all three columns */
  grid-template-columns: minmax(160px, 1fr) auto auto;
  align-items: center;
  gap: 9px;
}

.printer-calibration-panel__test-row.is-active {
  --row-color: #8b5cf6;
}

.printer-calibration-panel__test-row.is-completed {
  --row-color: #22c55e;
}

.printer-calibration-panel__life-row.is-overdue,
.printer-calibration-panel__life-row.is-never,
.printer-calibration-panel__component.is-overdue,
.printer-calibration-panel__moisture.is-overdue,
.printer-calibration-panel__moisture.is-never {
  --row-color: #ef4444;
}

.printer-calibration-panel__life-row.is-upcoming,
.printer-calibration-panel__component.is-upcoming,
.printer-calibration-panel__moisture.is-upcoming {
  --row-color: #f59e0b;
}

.printer-calibration-panel__life-row.is-ok,
.printer-calibration-panel__component.is-ok,
.printer-calibration-panel__moisture.is-ok {
  --row-color: #22c55e;
}

.printer-calibration-panel__life-row strong,
.printer-calibration-panel__component strong,
.printer-calibration-panel__moisture strong,
.printer-calibration-panel__test-row strong,
.printer-calibration-panel__service-log strong {
  display: block;
  color: var(--text-primary);
  font-size: 12px;
}

.printer-calibration-panel__life-row span,
.printer-calibration-panel__component span,
.printer-calibration-panel__moisture span,
.printer-calibration-panel__test-row span,
.printer-calibration-panel__service-log span {
  color: var(--text-secondary);
  font-size: 11px;
}

.printer-calibration-panel__life-row label,
.printer-calibration-panel__test-row label,
.printer-calibration-panel__component-inputs label {
  display: grid;
  gap: 3px;
}

.printer-calibration-panel__life-row input,
.printer-calibration-panel__test-row select,
.printer-calibration-panel__component-inputs input,
.printer-calibration-panel__add-component input,
.printer-calibration-panel__add-component select,
.printer-calibration-panel__service-form input {
  min-width: 0;
  min-height: 28px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  padding: 0 7px;
  font: inherit;
  font-size: 12px;
}

.printer-calibration-panel__pill {
  justify-self: start;
  border: 1px solid color-mix(in srgb, var(--row-color, var(--accent)) 32%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--row-color, var(--accent)) 11%, transparent);
  padding: 4px 8px;
  font-weight: 700;
  white-space: nowrap;
}

.printer-calibration-panel__split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.printer-calibration-panel__test-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

/* The delete button is icon-only */
.printer-calibration-panel__test-delete {
  width: 30px;
  padding: 0 !important;
  color: var(--text-secondary);
}

.printer-calibration-panel__test-delete:hover {
  color: #ef4444;
  border-color: #ef4444;
}

/* Inline edit form — spans the full row */
.printer-calibration-panel__test-edit {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0 2px;
  border-top: 1px solid var(--border);
}

.printer-calibration-panel__test-edit label {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
}

.printer-calibration-panel__test-edit label span {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* Inline delete confirmation — spans the full row */
.printer-calibration-panel__test-confirm {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0 2px;
  border-top: 1px dashed #ef4444;
  color: #ef4444;
  font-size: 12px;
}

.printer-calibration-panel__test-confirm span {
  flex: 1;
  color: #ef4444 !important;
}

.printer-calibration-panel__test-confirm-yes {
  border-color: #ef4444 !important;
  color: #ef4444 !important;
  background: color-mix(in srgb, #ef4444 10%, var(--bg-panel)) !important;
}

.printer-calibration-panel__component {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(190px, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.printer-calibration-panel__component-inputs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.printer-calibration-panel__component-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.printer-calibration-panel__component-actions button {
  width: 30px;
  padding: 0;
}

.printer-calibration-panel__add-component,
.printer-calibration-panel__service-form {
  border-top: 1px solid var(--border);
  display: grid;
  gap: 7px;
  padding-top: 10px;
}

.printer-calibration-panel__add-component {
  grid-template-columns: minmax(120px, 1fr) minmax(92px, 0.8fr) minmax(86px, 0.6fr) minmax(86px, 0.6fr) auto;
}

.printer-calibration-panel__service-form {
  grid-template-columns: minmax(120px, 1fr) minmax(92px, 0.7fr) minmax(72px, 0.5fr) auto;
}

.printer-calibration-panel__moisture {
  display: grid;
  gap: 8px;
}

.printer-calibration-panel__moisture p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 12px;
}

.printer-calibration-panel__empty {
  border: 1px dashed var(--border);
  border-radius: 8px;
  color: var(--text-secondary);
  padding: 12px;
  font-size: 12px;
  text-align: center;
}

.printer-calibration-panel__service-log {
  border-top: 1px solid var(--border);
  display: grid;
  gap: 7px;
  margin-top: 2px;
  padding-top: 10px;
}

/* ── Preset download cards ─────────────────────────────────────────────── */

.calib-preset-card--geometry { --preset-accent: #3b82f6; }
.calib-preset-card--material { --preset-accent: #f97316; }
.calib-preset-card--motion   { --preset-accent: #10b981; }

.calib-preset-card {
  border: 1px solid color-mix(in srgb, var(--preset-accent, var(--accent)) 22%, var(--border));
  border-radius: 10px;
  background: var(--bg-panel);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.15s ease, transform 0.12s ease;
}

.calib-preset-card:hover {
  box-shadow: 0 5px 18px color-mix(in srgb, var(--preset-accent, var(--accent)) 16%, transparent);
  transform: translateY(-2px);
}

.calib-preset-card__preview {
  height: 140px;
  background: color-mix(in srgb, var(--preset-accent, var(--accent)) 7%, var(--bg-secondary));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.calib-preset-card__preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.calib-preset-card__preview-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}

.calib-preset-card__meta {
  padding: 11px 13px 8px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.calib-preset-card__category {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--preset-accent, var(--accent));
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.calib-preset-card__title {
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  margin-top: 1px;
}

.calib-preset-card__desc {
  margin: 3px 0 0;
  color: var(--text-secondary);
  font-size: 11.5px;
  line-height: 1.48;
}

.calib-preset-card__footer {
  border-top: 1px solid var(--border);
  padding: 9px 13px;
  display: flex;
  gap: 7px;
}

.calib-preset-card__action {
  flex: 1;
  min-height: 30px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}

.calib-preset-card__action--secondary {
  border: 1px solid var(--border);
  background: var(--bg-toolbar);
  color: var(--text-secondary);
}

.calib-preset-card__action--secondary:hover {
  border-color: var(--preset-accent, var(--accent));
  color: var(--preset-accent, var(--accent));
  background: color-mix(in srgb, var(--preset-accent, var(--accent)) 8%, var(--bg-toolbar));
}

.calib-preset-card__action--primary {
  border: 1px solid color-mix(in srgb, var(--preset-accent, var(--accent)) 35%, var(--border));
  background: color-mix(in srgb, var(--preset-accent, var(--accent)) 10%, var(--bg-toolbar));
  color: var(--preset-accent, var(--accent));
}

.calib-preset-card__action--primary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--preset-accent, var(--accent)) 20%, var(--bg-toolbar));
  border-color: var(--preset-accent, var(--accent));
}

.calib-preset-card__action:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

@media (max-width: 540px) {
  .printer-calibration-panel__header {
    align-items: stretch;
    flex-direction: column;
  }

  .printer-calibration-panel__prepare {
    justify-content: center;
  }

  .printer-calibration-panel__split,
  .printer-calibration-panel__life-row,
  .printer-calibration-panel__test-row,
  .printer-calibration-panel__component,
  .printer-calibration-panel__add-component,
  .printer-calibration-panel__service-form {
    grid-template-columns: 1fr;
  }
}
.print-calendar {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  color: var(--text-primary);
  background: var(--bg-primary);
}

.print-calendar__toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.print-calendar__toolbar h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  flex: 1;
}

.print-calendar__nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.print-calendar__nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-primary);
  cursor: pointer;
  font-size: 12px;
}

.print-calendar__nav-btn:hover {
  background: var(--bg-hover);
}

.print-calendar__range-label {
  font-size: 13px;
  font-weight: 500;
  min-width: 160px;
  text-align: center;
  color: var(--text-secondary);
}

.print-calendar__view-toggle {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 5px;
  overflow: hidden;
}

.print-calendar__view-btn {
  padding: 4px 10px;
  font-size: 12px;
  border: none;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  cursor: pointer;
  border-right: 1px solid var(--border);
}

.print-calendar__view-btn:last-child {
  border-right: none;
}

.print-calendar__view-btn.active {
  background: var(--accent);
  color: #fff;
}

.print-calendar__toolbar-right {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.print-calendar__icon-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-primary);
  cursor: pointer;
  font-size: 12px;
}

.print-calendar__icon-btn:hover {
  background: var(--bg-hover);
}

.print-calendar__icon-btn.primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.print-calendar__icon-btn.primary:hover {
  opacity: 0.9;
}

/* ── Body ── */

.print-calendar__body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

/* ── Week grid ── */

.print-calendar__week {
  display: grid;
  grid-template-columns: 52px repeat(7, 1fr);
  flex: 1;
  min-height: 0;
}

.print-calendar__week-header {
  display: contents;
}

.print-calendar__week-header-gutter {
  border-bottom: 1px solid var(--border);
  background: var(--bg-secondary);
}

.print-calendar__week-header-day {
  padding: 6px 4px;
  text-align: center;
  font-size: 11px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
  border-left: 1px solid var(--border);
  background: var(--bg-secondary);
  cursor: default;
  user-select: none;
}

.print-calendar__week-header-day.today {
  color: var(--accent);
  font-weight: 600;
}

.print-calendar__week-scroll {
  grid-column: 1 / -1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: subgrid;
  position: relative;
}

/* time gutter */
.print-calendar__hour-gutter {
  font-size: 10px;
  color: var(--text-muted);
  text-align: right;
  padding-right: 6px;
  padding-top: 2px;
  border-right: 1px solid var(--border);
  line-height: 1;
  user-select: none;
  position: relative;
}

.print-calendar__hour-cell {
  height: 52px;
  border-bottom: 1px solid var(--border-faint, var(--border));
  border-left: 1px solid var(--border);
  position: relative;
}

.print-calendar__hour-cell.quiet {
  background: color-mix(in srgb, var(--warning) 6%, transparent);
}

.print-calendar__hour-cell.has-event {
  background: color-mix(in srgb, var(--accent) 4%, transparent);
}

/* event chips */
.print-calendar__event {
  position: absolute;
  left: 3px;
  right: 3px;
  border-radius: 4px;
  padding: 2px 5px;
  font-size: 11px;
  cursor: pointer;
  overflow: hidden;
  line-height: 1.3;
  z-index: 1;
  border: 1px solid transparent;
  display: flex;
  flex-direction: column;
  gap: 1px;
  appearance: none;
  font-family: inherit;
  text-align: left;
}

.print-calendar__event:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.print-calendar__event--scheduled {
  background: color-mix(in srgb, var(--accent) 20%, var(--bg-primary));
  border-color: var(--accent);
  color: var(--accent);
}

.print-calendar__event--printing {
  background: color-mix(in srgb, var(--success) 20%, var(--bg-primary));
  border-color: var(--success);
  color: var(--success);
}

.print-calendar__event--done {
  background: var(--bg-secondary);
  border-color: var(--border);
  color: var(--text-muted);
}

.print-calendar__event--cancelled,
.print-calendar__event--skipped {
  background: var(--bg-secondary);
  border-color: var(--border);
  color: var(--text-muted);
  text-decoration: line-through;
  opacity: 0.7;
}

.print-calendar__event-name {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.print-calendar__event-time {
  font-size: 10px;
  opacity: 0.8;
}

/* day view */
.print-calendar__day {
  display: grid;
  grid-template-columns: 52px 1fr;
  flex: 1;
  min-height: 0;
}

.print-calendar__day-scroll {
  grid-column: 1 / -1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 52px 1fr;
  position: relative;
}

.print-calendar__day-col {
  border-left: 1px solid var(--border);
  position: relative;
}

/* ── Quiet-hours panel ── */

.print-calendar__quiet-panel {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  padding: 12px 14px;
  background: var(--bg-secondary);
}

.print-calendar__quiet-panel h3 {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
}

.print-calendar__quiet-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 160px;
  overflow-y: auto;
}

.print-calendar__quiet-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 5px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  font-size: 12px;
}

.print-calendar__quiet-row__label {
  flex: 1;
  font-weight: 500;
  color: var(--text-primary);
}

.print-calendar__quiet-row__time {
  color: var(--text-secondary);
  font-size: 11px;
}

.print-calendar__quiet-row__days {
  color: var(--text-muted);
  font-size: 10px;
  letter-spacing: 0.03em;
}

.print-calendar__quiet-row__del {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.print-calendar__quiet-row__del:hover {
  background: var(--bg-hover);
  color: var(--error);
}

/* ── Add quiet window form ── */

.print-calendar__quiet-form {
  margin-top: 8px;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-primary);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.print-calendar__quiet-form-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.print-calendar__quiet-form label {
  font-size: 11px;
  color: var(--text-secondary);
}

.print-calendar__quiet-form input[type="time"],
.print-calendar__quiet-form input[type="text"] {
  padding: 3px 6px;
  font-size: 12px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.print-calendar__day-chips {
  display: flex;
  gap: 3px;
}

.print-calendar__day-chip {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  border: 1px solid var(--border);
  font-size: 10px;
  cursor: pointer;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  user-select: none;
}

.print-calendar__day-chip.selected {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* ── Schedule event modal ── */

.sched-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sched-modal {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 10px;
  width: 400px;
  max-width: 96vw;
  display: flex;
  flex-direction: column;
  gap: 0;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.sched-modal__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border);
}

.sched-modal__title {
  font-size: 14px;
  font-weight: 600;
  flex: 1;
}

.sched-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 5px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.sched-modal__close:hover {
  background: var(--bg-hover);
}

.sched-modal__body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sched-modal__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sched-modal__field label {
  font-size: 11px;
  color: var(--text-secondary);
}

.sched-modal__field input,
.sched-modal__field select,
.sched-modal__field textarea {
  padding: 6px 8px;
  font-size: 13px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-family: inherit;
}

.sched-modal__field textarea {
  resize: vertical;
  min-height: 48px;
}

.sched-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px 14px;
  border-top: 1px solid var(--border);
}

.sched-modal__btn {
  padding: 6px 14px;
  border-radius: 5px;
  border: 1px solid var(--border);
  font-size: 13px;
  cursor: pointer;
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.sched-modal__btn:hover {
  background: var(--bg-hover);
}

.sched-modal__btn.primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.sched-modal__btn.primary:hover {
  opacity: 0.9;
}

.sched-modal__btn.danger {
  background: var(--error);
  color: #fff;
  border-color: var(--error);
}

.sched-modal__btn.danger:hover {
  opacity: 0.9;
}

/* conflict warning */
.sched-modal__conflict {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--warning) 14%, var(--bg-secondary));
  border: 1px solid color-mix(in srgb, var(--warning) 40%, var(--border));
  font-size: 12px;
  color: var(--warning);
}

/* quiet overlay on cells */
.print-calendar__quiet-badge {
  position: absolute;
  top: 2px;
  right: 3px;
  font-size: 9px;
  color: var(--warning);
  opacity: 0.7;
  pointer-events: none;
}
.bed-clear-panel {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  color: var(--text-primary);
  background: var(--bg-primary);
  overflow-y: auto;
}

.bed-clear-panel__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.bed-clear-panel__header h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.bed-clear-panel__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  flex: 1;
}

/* ── Printer card ── */

.bed-clear-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-secondary);
  overflow: hidden;
}

.bed-clear-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  user-select: none;
}

.bed-clear-card__name {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
}

.bed-clear-card__status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  border-radius: 20px;
  padding: 2px 8px;
  border: 1px solid transparent;
}

.bed-clear-card__status.clear {
  background: color-mix(in srgb, var(--success) 14%, var(--bg-secondary));
  border-color: color-mix(in srgb, var(--success) 40%, var(--border));
  color: var(--success);
}

.bed-clear-card__status.occupied {
  background: color-mix(in srgb, var(--error) 14%, var(--bg-secondary));
  border-color: color-mix(in srgb, var(--error) 40%, var(--border));
  color: var(--error);
}

.bed-clear-card__status.unknown {
  background: var(--bg-primary);
  border-color: var(--border);
  color: var(--text-muted);
}

.bed-clear-card__body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* toggle row */

.bed-clear-toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bed-clear-toggle-row__label {
  flex: 1;
  font-size: 12px;
  color: var(--text-secondary);
}

/* compact toggle switch */

.bc-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  gap: 6px;
}

.bc-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.bc-toggle__track {
  width: 34px;
  height: 18px;
  border-radius: 9px;
  background: var(--border);
  transition: background 0.15s;
  flex-shrink: 0;
}

.bc-toggle input:checked + .bc-toggle__track {
  background: var(--accent);
}

.bc-toggle__thumb {
  position: absolute;
  left: 2px;
  top: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s;
  pointer-events: none;
}

.bc-toggle input:checked ~ .bc-toggle__thumb {
  transform: translateX(16px);
}

/* number input row */

.bed-clear-number-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary);
}

.bed-clear-number-row input[type="number"] {
  width: 64px;
  padding: 3px 6px;
  font-size: 12px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--bg-primary);
  color: var(--text-primary);
  text-align: right;
}

/* action row */

.bed-clear-action-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.bed-clear-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 12px;
  cursor: pointer;
}

.bed-clear-btn:hover {
  background: var(--bg-hover);
}

.bed-clear-btn.primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.bed-clear-btn.primary:hover {
  opacity: 0.9;
}

.bed-clear-btn.success {
  background: var(--success);
  color: #fff;
  border-color: var(--success);
}

.bed-clear-btn.success:hover {
  opacity: 0.9;
}

.bed-clear-last-checked {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: auto;
}

.bed-clear-empty {
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}
.start-checklist-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 950;
  display: flex;
  align-items: center;
  justify-content: center;
}

.start-checklist-modal {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 10px;
  width: 440px;
  max-width: 96vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

.start-checklist-modal__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.start-checklist-modal__title {
  font-size: 14px;
  font-weight: 600;
  flex: 1;
}

.start-checklist-modal__subtitle {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

.start-checklist-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 5px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.start-checklist-modal__close:hover {
  background: var(--bg-hover);
}

.start-checklist-modal__body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sc-moisture-warning {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  border: 1px solid color-mix(in srgb, var(--warning, #f59e0b) 35%, var(--border));
  border-radius: 7px;
  background: color-mix(in srgb, var(--warning, #f59e0b) 10%, var(--bg-secondary));
  color: var(--text-primary);
  padding: 10px 12px;
}

.sc-moisture-warning.is-overdue {
  border-color: color-mix(in srgb, #ef4444 42%, var(--border));
  background: color-mix(in srgb, #ef4444 10%, var(--bg-secondary));
}

.sc-moisture-warning strong {
  display: block;
  font-size: 12px;
}

.sc-moisture-warning span {
  display: block;
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.35;
  margin-top: 2px;
}

/* checklist item row */

.sc-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
  user-select: none;
  transition: border-color 0.1s, background 0.1s;
}

.sc-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.sc-item.checked {
  background: color-mix(in srgb, var(--success) 8%, var(--bg-secondary));
  border-color: color-mix(in srgb, var(--success) 35%, var(--border));
}

.sc-item__checkbox {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
  transition: background 0.1s, border-color 0.1s;
}

.sc-item.checked .sc-item__checkbox {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}

.sc-item__content {
  flex: 1;
}

.sc-item__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}

.sc-item.checked .sc-item__label {
  text-decoration: line-through;
  color: var(--text-muted);
}

.sc-item__desc {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* footer */

.start-checklist-modal__footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding: 12px 16px 14px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.sc-footer-progress {
  flex: 1;
  font-size: 11px;
  color: var(--text-muted);
}

.sc-btn {
  padding: 6px 14px;
  border-radius: 5px;
  border: 1px solid var(--border);
  font-size: 13px;
  cursor: pointer;
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.sc-btn:hover {
  background: var(--bg-hover);
}

.sc-btn.primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.sc-btn.primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.sc-btn.primary:not(:disabled):hover {
  opacity: 0.9;
}

/* ── Settings panel ── */

.checklist-settings {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  color: var(--text-primary);
  background: var(--bg-primary);
  overflow-y: auto;
}

.checklist-settings__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.checklist-settings__header h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.checklist-settings__body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.checklist-settings__section-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}

.checklist-settings__global-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.checklist-settings__global-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
}

.checklist-settings__global-item__content {
  flex: 1;
}

.checklist-settings__global-item__label {
  font-size: 13px;
  font-weight: 500;
}

.checklist-settings__global-item__desc {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* per-printer accordion */

.checklist-settings__printer-card {
  border: 1px solid var(--border);
  border-radius: 7px;
  overflow: hidden;
  background: var(--bg-secondary);
}

.checklist-settings__printer-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid transparent;
  user-select: none;
}

.checklist-settings__printer-head.open {
  border-bottom-color: var(--border);
}

.checklist-settings__printer-head__name {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
}

.checklist-settings__printer-body {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.checklist-settings__override-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.checklist-settings__override-row__label {
  flex: 1;
  color: var(--text-secondary);
}

.checklist-settings__show-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary);
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}

.checklist-settings__show-toggle span {
  flex: 1;
}

/* local toggle styles */

.bc-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  gap: 6px;
}

.bc-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.bc-toggle__track {
  width: 34px;
  height: 18px;
  border-radius: 9px;
  background: var(--border);
  transition: background 0.15s;
  flex-shrink: 0;
}

.bc-toggle input:checked + .bc-toggle__track {
  background: var(--accent);
}

.bc-toggle__thumb {
  position: absolute;
  left: 2px;
  top: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s;
  pointer-events: none;
}

.bc-toggle input:checked ~ .bc-toggle__thumb {
  transform: translateX(16px);
}
/* ── GCode command toast stack ─────────────────────────────────────────────── */

.gct-stack {
  position: fixed;
  bottom: 20px;
  left: 50%;
  translate: -50% 0;
  z-index: 20000; /* above modal overlays (10000) */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
}

/* Individual toast pill */
.gct-pill {
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--border, #3a3a4a) 80%, transparent);
  background: color-mix(in srgb, var(--bg-elevated, #1e1e2e) 96%, transparent);
  backdrop-filter: blur(8px);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.35),
    0 1px 3px rgba(0, 0, 0, 0.2);
  pointer-events: auto;
  user-select: none;
  max-width: min(420px, 90vw);
  overflow: hidden;
  position: relative;

  /* Enter animation */
  animation: gct-in 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Simple (no actions) pills are clickable to dismiss */
.gct-pill:not(.has-actions) {
  cursor: pointer;
}

.gct-pill.is-exiting {
  animation: gct-out 280ms ease-in both;
}

@keyframes gct-in {
  from { opacity: 0; translate: 0 12px; scale: 0.96; }
  to   { opacity: 1; translate: 0 0;    scale: 1; }
}

@keyframes gct-out {
  from { opacity: 1; translate: 0 0;    scale: 1; }
  to   { opacity: 0; translate: 0 6px;  scale: 0.97; }
}

/* ── Main row (icon + text + X) ───────────────────────────────── */

.gct-main {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px 6px 10px;
}

/* Icon */
.gct-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0.85;
}

/* Kind-specific icon colour */
.gct-pill[data-kind="gcode"]   .gct-icon { color: #60a5fa; }
.gct-pill[data-kind="macro"]   .gct-icon { color: #a78bfa; }
.gct-pill[data-kind="info"]    .gct-icon { color: #34d399; }
.gct-pill[data-kind="warning"] .gct-icon { color: #fbbf24; }
.gct-pill[data-kind="error"]   .gct-icon { color: #f87171; }

/* Text block */
.gct-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  gap: 1px;
}

.gct-label {
  font-family: 'Consolas', 'Cascadia Code', 'Fira Code', 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary, #e0e0e0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Non-gcode toasts use the UI font */
.gct-pill[data-kind="macro"]   .gct-label,
.gct-pill[data-kind="info"]    .gct-label,
.gct-pill[data-kind="warning"] .gct-label,
.gct-pill[data-kind="error"]   .gct-label {
  font-family: inherit;
}

.gct-sub {
  font-size: 10.5px;
  color: var(--text-muted, #7a7a90);
  white-space: normal;
  line-height: 1.35;
}

/* Close X — only visible on hover */
.gct-close {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: 4px;
  padding: 2px;
  border: none;
  background: none;
  color: var(--text-muted, #7a7a90);
  cursor: pointer;
  border-radius: 3px;
  opacity: 0;
  transition: opacity 120ms, color 120ms;
}

.gct-pill:hover .gct-close {
  opacity: 1;
}

.gct-close:hover {
  color: var(--text-primary, #e0e0e0);
}

/* ── Action buttons row ───────────────────────────────────────── */

.gct-actions {
  display: flex;
  gap: 6px;
  padding: 0 10px 8px;
  justify-content: flex-end;
}

.gct-action-btn {
  padding: 3px 10px;
  border-radius: 5px;
  border: 1px solid color-mix(in srgb, var(--border, #3a3a4a) 70%, transparent);
  background: transparent;
  color: var(--text-secondary, #b0b0c0);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
}

.gct-action-btn:hover {
  background: color-mix(in srgb, var(--border, #3a3a4a) 30%, transparent);
  color: var(--text-primary, #e0e0e0);
}

/* Primary (last) action button gets the accent colour */
.gct-action-btn--primary {
  border-color: color-mix(in srgb, #60a5fa 50%, var(--border, #3a3a4a));
  color: #93c5fd;
}

.gct-action-btn--primary:hover {
  background: color-mix(in srgb, #60a5fa 16%, transparent);
  color: #bfdbfe;
}

/* Warning toasts get an amber accent on the primary button */
.gct-pill[data-kind="warning"] .gct-action-btn--primary {
  border-color: color-mix(in srgb, #fbbf24 50%, var(--border, #3a3a4a));
  color: #fcd34d;
}

.gct-pill[data-kind="warning"] .gct-action-btn--primary:hover {
  background: color-mix(in srgb, #fbbf24 16%, transparent);
}

/* ── Progress bar ─────────────────────────────────────────────── */

.gct-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  pointer-events: none;
}

.gct-pill[data-kind="gcode"]   .gct-progress { background: #60a5fa; }
.gct-pill[data-kind="macro"]   .gct-progress { background: #a78bfa; }
.gct-pill[data-kind="info"]    .gct-progress { background: #34d399; }
.gct-pill[data-kind="warning"] .gct-progress { background: #fbbf24; }
.gct-pill[data-kind="error"]   .gct-progress { background: #f87171; }

@keyframes gct-progress {
  from { width: 100%; }
  to   { width: 0%; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .gct-pill,
  .gct-pill.is-exiting {
    animation: none;
  }
}
.print-session-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--warning) 40%, var(--border));
  background: color-mix(in srgb, var(--warning) 12%, var(--bg-primary));
  color: var(--text-primary);
  flex-shrink: 0;
}

.print-session-banner__copy {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.print-session-banner__title {
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.print-session-banner__meta {
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.print-session-banner__action,
.print-session-banner__close {
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  cursor: pointer;
}

.print-session-banner__action {
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
}

.print-session-banner__action:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.print-session-banner__close {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}

.print-session-banner__action:not(:disabled):hover,
.print-session-banner__close:hover {
  background: var(--bg-hover);
}

html[data-device-mode="mobile"] .print-session-banner {
  align-items: flex-start;
  flex-wrap: wrap;
}

html[data-device-mode="mobile"] .print-session-banner__copy {
  flex-basis: calc(100% - 38px);
}

html[data-device-mode="mobile"] .print-session-banner__meta {
  white-space: normal;
}