:root {
  color-scheme: light;
  /* ─── PRINT SHEET (true white for clean printing) ─── */
  --paper: #FFFFFF;
  --paper-2: #FFFFFF;
  --ink: #0A0A0A;
  --muted: #666666;
  --rule: #BBBBBB;
  --red: #B91C1C;

  /* ─── CATPPUCCIN MOCHA (configurator UI) ─── */
  --ctp-base:     #1e1e2e;
  --ctp-mantle:   #181825;
  --ctp-crust:    #11111b;
  --ctp-surface0: #313244;
  --ctp-surface1: #45475a;
  --ctp-surface2: #585b70;
  --ctp-overlay0: #6c7086;
  --ctp-overlay1: #7f849c;
  --ctp-text:     #cdd6f4;
  --ctp-subtext1: #bac2de;
  --ctp-subtext0: #a6adc8;
  --ctp-mauve:    #cba6f7;
  --ctp-lavender: #b4befe;
  --ctp-blue:     #89b4fa;
  --ctp-green:    #a6e3a1;
  --ctp-peach:    #fab387;
  --ctp-yellow:   #f9e2af;
  --ctp-red:      #f38ba8;

  /* ─── SEMANTIC ALIASES (UI uses these) ─── */
  --bg:         var(--ctp-base);
  --olive:      var(--ctp-surface1);
  --olive-mid:  var(--ctp-surface2);
  --olive-dark: var(--ctp-mantle);
  --accent:     var(--ctp-mauve);
  --accent-hi:  var(--ctp-lavender);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg);
  color: var(--ctp-text);
  font-family: 'Oswald', sans-serif;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* ── APP LAYOUT ───────────────────────── */
.app {
  display: grid;
  grid-template-columns: 360px 1fr;
  height: 100vh;
}

/* ── SIDEBAR ──────────────────────────── */
aside {
  background: var(--ctp-mantle);
  border-right: 1px solid var(--ctp-crust);
  overflow-y: auto;
  display: flex; flex-direction: column;
}
aside::-webkit-scrollbar { width: 8px; }
aside::-webkit-scrollbar-track { background: var(--ctp-crust); }
aside::-webkit-scrollbar-thumb {
  background: var(--ctp-surface1);
  border-radius: 4px;
}
aside::-webkit-scrollbar-thumb:hover { background: var(--ctp-surface2); }

.brand {
  padding: 20px 22px 18px;
  border-bottom: 1px solid var(--ctp-crust);
  background:
    radial-gradient(ellipse at top right, rgba(203, 166, 247, 0.15) 0%, transparent 60%),
    var(--ctp-mantle);
  position: relative;
}
.brand::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--ctp-mauve) 50%, transparent 100%);
  opacity: 0.5;
}
.brand .badge {
  display: inline-block;
  padding: 3px 10px;
  background: var(--ctp-mauve);
  color: var(--ctp-crust);
  font-family: 'Share Tech Mono', monospace;
  font-size: 9px;
  letter-spacing: 1.5px;
  font-weight: 700;
  margin-bottom: 10px;
  border-radius: 3px;
}
.brand h1 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ctp-text);
  line-height: 1.1;
}
.brand .sub {
  font-family: 'Share Tech Mono', monospace;
  font-size: 9.5px;
  color: var(--ctp-overlay1);
  letter-spacing: 1.5px;
  margin-top: 5px;
}

.panel {
  border-bottom: 1px solid var(--ctp-crust);
  padding: 16px 22px 18px;
}
.panel-h {
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  color: var(--ctp-overlay1);
  letter-spacing: 2px;
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.panel-h .count {
  background: var(--ctp-mauve);
  color: var(--ctp-crust);
  padding: 2px 7px;
  font-size: 9px;
  font-weight: 700;
  border-radius: 3px;
}

/* ── DIAL ROWS ────────────────────────── */
.dials-list {
  display: flex; flex-direction: column;
  gap: 10px;
}
.dial-row {
  background: var(--ctp-surface0);
  border: 1px solid var(--ctp-surface1);
  border-radius: 6px;
  padding: 12px 14px 14px;
  position: relative;
  transition: border-color 0.15s;
}
.dial-row:hover { border-color: var(--ctp-surface2); }
.dial-row .row-h {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
}
.dial-row .row-num {
  font-family: 'Share Tech Mono', monospace;
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--ctp-overlay0);
}
.dial-row .row-actions {
  display: flex;
  gap: 5px;
}
.dial-row .row-del,
.dial-row .row-dup {
  background: transparent;
  border: 1px solid var(--ctp-surface2);
  color: var(--ctp-subtext0);
  width: 20px; height: 20px;
  cursor: pointer;
  font-family: 'Share Tech Mono', monospace;
  font-size: 12px;
  line-height: 1;
  padding: 0;
  border-radius: 3px;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dial-row .row-dup:hover,
.dial-row .row-dup:focus-visible {
  background: var(--ctp-mauve);
  color: var(--ctp-crust);
  border-color: var(--ctp-mauve);
  outline: none;
}
.dial-row .row-del:hover,
.dial-row .row-del:focus-visible {
  background: var(--ctp-red);
  color: var(--ctp-crust);
  border-color: var(--ctp-red);
  outline: none;
}
.field {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 8px;
  align-items: center;
  margin-bottom: 7px;
  cursor: text;
}
.field:last-child { margin-bottom: 0; }
.field > span:first-child {
  font-family: 'Share Tech Mono', monospace;
  font-size: 9px;
  color: var(--ctp-overlay1);
  letter-spacing: 1px;
}

/* ── PER-DIAL CUSTOM GEOMETRY ─────────── */
.custom-badge {
  display: inline-block;
  background: var(--ctp-mauve);
  color: var(--ctp-crust);
  padding: 0 4px;
  margin-left: 4px;
  border-radius: 3px;
  font-size: 8px;
  line-height: 1.4;
  font-weight: 700;
}
.custom-geom {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--ctp-surface1);
}
.custom-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
/* Visually hide the checkbox without removing it from the accessibility
   tree — keeps tab focus and screen-reader detection intact. */
.custom-toggle input,
.toggle-row input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.custom-toggle .box {
  width: 14px; height: 14px;
  border: 1px solid var(--ctp-surface2);
  background: var(--ctp-base);
  flex-shrink: 0;
  border-radius: 3px;
  position: relative;
  transition: all 0.15s;
}
.custom-toggle:hover .box { border-color: var(--ctp-mauve); }
.custom-toggle input:focus-visible + .box {
  outline: 2px solid var(--ctp-mauve);
  outline-offset: 2px;
}
.custom-toggle input:checked + .box {
  background: var(--ctp-mauve);
  border-color: var(--ctp-mauve);
}
.custom-toggle input:checked + .box::after {
  content: '✓';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--ctp-crust);
  font-size: 10px; font-weight: 700;
}
.custom-toggle span:last-child {
  font-family: 'Share Tech Mono', monospace;
  font-size: 9px;
  color: var(--ctp-subtext1);
  letter-spacing: 1px;
}
.custom-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease, margin-top 0.2s ease;
  margin-top: 0;
}
.custom-geom.open .custom-body {
  /* Five sections: geometry, number layout, cover label, pointer, window */
  max-height: 1200px;
  margin-top: 10px;
}
.custom-section {
  background: var(--ctp-mantle);
  border: 1px solid var(--ctp-surface0);
  border-radius: 6px;
  padding: 10px 12px 12px;
  margin-bottom: 8px;
}
.custom-section:last-child { margin-bottom: 0; }
.custom-h {
  font-family: 'Share Tech Mono', monospace;
  font-size: 9px;
  color: var(--ctp-overlay1);
  letter-spacing: 1.6px;
  margin-bottom: 8px;
}
.custom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
}
.custom-grid .slider-field .label-row {
  font-size: 8.5px;
}
.field input[type="text"], .field input[type="number"] {
  background: var(--ctp-base);
  border: 1px solid var(--ctp-surface1);
  color: var(--ctp-text);
  padding: 6px 9px;
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  letter-spacing: 0.5px;
  outline: none;
  border-radius: 4px;
  transition: all 0.15s;
}
.field input:focus {
  border-color: var(--ctp-mauve);
  background: var(--ctp-mantle);
  box-shadow: 0 0 0 2px rgba(203, 166, 247, 0.15);
}
.field-pair {
  display: flex; gap: 6px;
}
.field-pair input {
  width: 100%;
  text-align: center;
}
.field-pair .sep {
  align-self: center;
  color: var(--ctp-overlay0);
  font-size: 12px;
}

.dials-actions {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 6px;
}
.add-dial-btn {
  padding: 9px 12px;
  background: var(--ctp-surface0);
  border: 1px solid var(--ctp-surface1);
  color: var(--ctp-mauve);
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all 0.15s;
  width: 100%;
  border-radius: 4px;
}
.add-dial-btn:hover {
  background: var(--ctp-surface1);
  border-color: var(--ctp-mauve);
  color: var(--ctp-lavender);
}
.add-dial-btn:focus-visible {
  outline: 2px solid var(--ctp-mauve);
  outline-offset: 2px;
}
.add-dial-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.add-dial-btn.secondary {
  color: var(--ctp-subtext0);
  letter-spacing: 1.4px;
}
.add-dial-btn.secondary:hover:not(:disabled) {
  color: var(--ctp-mauve);
}

/* ── GLOBAL CONTROLS ──────────────────── */
.global-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 14px;
}
.slider-field, slider-field {
  display: flex; flex-direction: column;
  gap: 6px;
}
.slider-field .label-row, slider-field .label-row {
  display: flex; justify-content: space-between;
  font-family: 'Share Tech Mono', monospace;
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--ctp-overlay1);
}
.slider-field .val, slider-field .val {
  color: var(--ctp-text);
  font-weight: 700;
}
.slider-field .val span, slider-field .val span { color: var(--ctp-mauve); }

state-select { display: block; }

/* Hide style-specific editor sections (POINTER · RIM in window mode, WINDOW
   · APERTURE in rim mode). Scoped to .custom-section so the #styleToggle
   buttons — which also carry data-style — stay clickable in either mode. */
body[data-style="rim"]    .custom-section[data-style="window"] { display: none; }
body[data-style="window"] .custom-section[data-style="rim"]    { display: none; }
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: var(--ctp-surface0);
  border-radius: 2px;
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px; height: 14px;
  background: var(--ctp-mauve);
  cursor: pointer;
  border: 2px solid var(--ctp-mantle);
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--ctp-mauve);
  transition: transform 0.1s;
}
input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
  background: var(--ctp-lavender);
}
input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px;
  background: var(--ctp-mauve);
  cursor: pointer;
  border: 2px solid var(--ctp-mantle);
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--ctp-mauve);
}

.toggle-row {
  display: flex; align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  cursor: pointer;
  user-select: none;
  position: relative;
}
.toggle-row .box {
  width: 16px; height: 16px;
  border: 1px solid var(--ctp-surface2);
  background: var(--ctp-base);
  display: inline-block;
  position: relative;
  flex-shrink: 0;
  border-radius: 3px;
  transition: all 0.15s;
}
.toggle-row:hover .box { border-color: var(--ctp-mauve); }
.toggle-row input:focus-visible + .box {
  outline: 2px solid var(--ctp-mauve);
  outline-offset: 2px;
}
.toggle-row input:checked + .box {
  background: var(--ctp-mauve);
  border-color: var(--ctp-mauve);
}
.toggle-row input:checked + .box::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--ctp-crust);
  font-size: 11px;
  font-weight: 700;
}
.toggle-row span {
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  color: var(--ctp-subtext1);
  letter-spacing: 0.8px;
}

.font-select {
  width: 100%;
  background: var(--ctp-base);
  border: 1px solid var(--ctp-surface1);
  color: var(--ctp-text);
  padding: 8px 12px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.6px;
  outline: none;
  cursor: pointer;
  appearance: none;
  border-radius: 4px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ctp-mauve) 50%),
                    linear-gradient(135deg, var(--ctp-mauve) 50%, transparent 50%);
  background-position: calc(100% - 14px) calc(50% - 2px),
                       calc(100% - 9px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  transition: border-color 0.15s;
}
.font-select:hover { border-color: var(--ctp-surface2); }
.font-select:focus {
  border-color: var(--ctp-mauve);
  box-shadow: 0 0 0 2px rgba(203, 166, 247, 0.15);
}
.font-select option {
  background: var(--ctp-mantle);
  color: var(--ctp-text);
}

/* ── COLOR PICKERS ─────────────────────── */
.color-row {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 5px;
  margin-top: 4px;
}
.color-chip {
  aspect-ratio: 1;
  border: 2px solid var(--ctp-surface1);
  cursor: pointer;
  position: relative;
  transition: all 0.15s;
  border-radius: 5px;
  min-height: 28px;
}
.color-chip:hover {
  transform: scale(1.12);
  border-color: var(--ctp-overlay0);
}
.color-chip:focus-visible {
  outline: 2px solid var(--ctp-mauve);
  outline-offset: 2px;
}
.color-chip.active {
  border-color: var(--ctp-mauve);
  box-shadow: 0 0 0 2px rgba(203, 166, 247, 0.3);
}
input[type="color"].color-input {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 22px;
  border: 1px solid var(--ctp-surface2);
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
  background: transparent;
  overflow: hidden;
}
input[type="color"].color-input::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"].color-input::-webkit-color-swatch { border: none; border-radius: 3px; }
input[type="color"].color-input::-moz-color-swatch { border: none; border-radius: 3px; }
input[type="color"].color-input:hover { border-color: var(--ctp-mauve); }

.match-btn {
  margin-top: 14px;
  padding: 9px 12px;
  background: transparent;
  border: 1px solid var(--ctp-surface1);
  color: var(--ctp-subtext1);
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.6px;
  cursor: pointer;
  transition: all 0.15s;
  width: 100%;
  border-radius: 4px;
}
.match-btn:hover {
  border-color: var(--ctp-mauve);
  color: var(--ctp-mauve);
  background: rgba(203, 166, 247, 0.05);
}

/* ── SEGMENTED CONTROL ──────────────────── */
.segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--ctp-base);
  border: 1px solid var(--ctp-surface1);
  margin-bottom: 14px;
  border-radius: 5px;
  overflow: hidden;
  padding: 3px;
  gap: 3px;
}
.segmented button {
  background: transparent;
  border: none;
  color: var(--ctp-overlay1);
  padding: 9px 8px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.4px;
  cursor: pointer;
  transition: all 0.15s;
  border-radius: 3px;
}
.segmented button:hover {
  color: var(--ctp-text);
  background: var(--ctp-surface0);
}
.segmented button.active {
  background: var(--ctp-mauve);
  color: var(--ctp-crust);
}
.segmented .seg-icon {
  display: block;
  font-size: 14px;
  margin-bottom: 2px;
  opacity: 0.95;
}

/* ── ACTIONS ──────────────────────────── */
.actions {
  margin-top: auto;
  padding: 18px 22px 20px;
  background: var(--ctp-mantle);
  border-top: 1px solid var(--ctp-crust);
  display: flex; flex-direction: column;
  gap: 9px;
  position: relative;
}
.actions::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--ctp-mauve) 50%, transparent 100%);
  opacity: 0.4;
}
.actions button {
  padding: 11px 14px;
  background: var(--ctp-mauve);
  color: var(--ctp-crust);
  border: none;
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s;
  border-radius: 5px;
}
.actions button:hover {
  background: var(--ctp-lavender);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(203, 166, 247, 0.25);
}
.actions button.secondary {
  background: transparent;
  border: 1px solid var(--ctp-surface2);
  color: var(--ctp-subtext1);
  font-size: 10px;
  letter-spacing: 1.5px;
  padding: 8px 14px;
}
.actions button.secondary:hover {
  background: var(--ctp-surface0);
  border-color: var(--ctp-overlay0);
  color: var(--ctp-text);
  transform: none;
  box-shadow: none;
}
.actions .action-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* ── DRAG TO REORDER ──────────────────── */
.dial-row .row-h {
  cursor: grab;
  user-select: none;
}
.dial-row .row-h:active {
  cursor: grabbing;
}
.dial-row.dragging {
  opacity: 0.4;
  border-style: dashed;
}
.dial-row.drop-above {
  box-shadow: 0 -2px 0 0 var(--ctp-mauve);
}
.dial-row.drop-below {
  box-shadow: 0 2px 0 0 var(--ctp-mauve);
}
.dial-row .row-h .row-num::before {
  content: '⋮⋮ ';
  color: var(--ctp-overlay0);
  margin-right: 2px;
}
/* On mobile / no-pointer devices, hide drag affordance — fall back to delete+re-add */
@media (hover: none), (max-width: 900px) {
  .dial-row .row-h { cursor: auto; }
  .dial-row .row-h .row-num::before { content: ''; }
}

/* ── SHORTCUTS MODAL ──────────────────── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(17, 17, 27, 0.85);
  backdrop-filter: blur(4px);
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
}
.modal-backdrop.open { display: flex; }
.modal {
  background: var(--ctp-mantle);
  border: 1px solid var(--ctp-surface1);
  border-radius: 10px;
  padding: 24px 28px 22px;
  max-width: 420px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  color: var(--ctp-text);
}
.modal h3 {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ctp-mauve);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ctp-surface1);
}
.modal table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
}
.modal td {
  padding: 7px 0;
  color: var(--ctp-subtext1);
  letter-spacing: 0.5px;
}
.modal td:first-child {
  width: 110px;
}
.modal kbd {
  display: inline-block;
  padding: 2px 8px;
  background: var(--ctp-surface0);
  border: 1px solid var(--ctp-surface2);
  border-bottom-width: 2px;
  border-radius: 3px;
  color: var(--ctp-mauve);
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  font-weight: 700;
}
.modal-close {
  margin-top: 18px;
  width: 100%;
  padding: 9px 14px;
  background: var(--ctp-mauve);
  color: var(--ctp-crust);
  border: none;
  border-radius: 5px;
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
}
.modal-close:hover { background: var(--ctp-lavender); }

/* ── DARK SHEET MODE (printed black-on-page) ── */
.sheet.dark-sheet {
  background: #0A0A0A !important;
  color: #FFFFFF;
}
.sheet.dark-sheet .sheet-header {
  border-bottom-color: #FFFFFF;
}
.sheet.dark-sheet .sheet-header h2 { color: #FFFFFF; }
.sheet.dark-sheet .sheet-header .badge {
  background: #FFFFFF; color: #0A0A0A;
}
.sheet.dark-sheet .sheet-header .meta { color: #999; }
.sheet.dark-sheet .unit { border-color: #555; }
.sheet.dark-sheet .unit .meta { border-bottom-color: #555; }
.sheet.dark-sheet .unit .meta .name { color: #FFFFFF; }
.sheet.dark-sheet .unit .meta .range,
.sheet.dark-sheet .unit .desc { color: #AAA; }
.sheet.dark-sheet .unit .desc { border-top-color: #555; }
.sheet.dark-sheet .sheet-footer {
  border-top-color: #555; color: #AAA;
}

/* ── PREVIEW PANE ─────────────────────── */
main {
  overflow: auto;
  padding: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  background:
    radial-gradient(ellipse at top, rgba(203, 166, 247, 0.08) 0%, transparent 55%),
    radial-gradient(ellipse at bottom right, rgba(137, 180, 250, 0.05) 0%, transparent 50%),
    var(--ctp-base);
}
.preview-info {
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  color: var(--ctp-overlay1);
  letter-spacing: 1.5px;
  display: flex;
  gap: 18px;
  align-items: center;
}
.preview-info .dot {
  width: 7px; height: 7px;
  background: var(--ctp-green);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--ctp-green);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ── PRINT SHEET ──────────────────────── */
.sheet {
  color-scheme: light;
  forced-color-adjust: none;
  width: 210mm;
  min-height: 297mm;
  background: #FFFFFF;
  color: #0A0A0A;
  padding: 12mm 12mm 8mm;
  box-shadow: 0 8mm 30mm rgba(0,0,0,0.6);
  display: flex;
  flex-direction: column;
  page-break-after: always;
}
.sheet:last-child { page-break-after: auto; }

.sheet-header {
  border-bottom: 0.4mm solid var(--ink);
  padding-bottom: 3mm; margin-bottom: 5mm;
  display: flex; justify-content: space-between; align-items: flex-end;
}
.sheet-header h2 {
  font-family: 'Oswald', sans-serif;
  font-size: 16pt;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--ink);
}
.sheet-header .badge {
  background: var(--ink);
  color: var(--paper);
  padding: 1mm 3mm;
  font-size: 7pt;
  letter-spacing: 1.5px;
  font-weight: 700;
  display: inline-block;
  margin-bottom: 1mm;
}
.sheet-header .meta {
  font-family: 'Share Tech Mono', monospace;
  font-size: 8pt;
  color: var(--muted);
  letter-spacing: 1.2px;
  text-align: right;
}

.dials-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4mm 8mm;
  justify-items: center;
}
.unit {
  display: flex; flex-direction: column;
  align-items: center; gap: 1mm;
  padding: 1.5mm 1mm 1.5mm;
  border: 0.15mm dashed var(--rule);
  /* width is set inline by the renderer based on dial size */
}
.unit .pieces {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2mm;
}
.unit-v .pieces {
  flex-direction: column;
}
.unit-h .pieces {
  flex-direction: row;
}
.unit .meta {
  display: flex; justify-content: space-between; align-items: baseline;
  width: 100%;
  border-bottom: 0.1mm solid var(--rule);
  padding-bottom: 0.6mm;
}
.unit .meta .name {
  font-size: 8.5pt; font-weight: 700;
  letter-spacing: 1.6px; color: var(--ink);
}
.unit .meta .range {
  font-family: 'Share Tech Mono', monospace;
  font-size: 6pt; color: var(--muted); letter-spacing: 0.5px;
}
.unit .desc {
  font-family: 'Share Tech Mono', monospace;
  font-size: 5.4pt; color: var(--muted);
  letter-spacing: 0.3px; line-height: 1.35;
  text-align: center;
  border-top: 0.1mm solid var(--rule);
  padding-top: 0.8mm;
  width: 100%;
}
.unit svg { display: block; }

/* ── ASSEMBLY PREVIEW OVERLAY ────────────────────────
   Floating panel docked to the preview area. Shows the currently-focused
   dial assembled (cover stacked on disc). Click a unit to focus it; click
   the close button or anywhere outside a unit to dismiss.
   Hidden completely on print. */
.assembly-overlay {
  position: fixed;
  top: 76px;
  right: 28px;
  width: 180px;
  background: var(--ctp-mantle);
  border: 1px solid var(--ctp-surface1);
  border-radius: 8px;
  padding: 14px 14px 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4), 0 0 0 1px rgba(203, 166, 247, 0.1);
  z-index: 50;
  opacity: 0;
  transform: translateY(-6px) scale(0.96);
  pointer-events: none;
  transition: opacity 0.18s, transform 0.18s;
}
.assembly-overlay.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.assembly-overlay .ov-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ctp-surface0);
}
.assembly-overlay .ov-title {
  font-family: 'Share Tech Mono', monospace;
  font-size: 9px;
  letter-spacing: 1.6px;
  color: var(--ctp-mauve);
  font-weight: 700;
}
.assembly-overlay .ov-close {
  background: transparent;
  border: none;
  color: var(--ctp-overlay1);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0 4px;
  border-radius: 3px;
}
.assembly-overlay .ov-close:hover { color: var(--ctp-red); }
.assembly-overlay .ov-svg-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
}
.assembly-overlay .ov-svg-wrap svg {
  width: 100%;
  height: auto;
  max-width: 150px;
  max-height: 150px;
}
.assembly-overlay .ov-name {
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  letter-spacing: 2px;
  text-align: center;
  margin-top: 8px;
  color: var(--ctp-text);
  font-weight: 700;
}
.assembly-overlay .ov-range {
  font-family: 'Share Tech Mono', monospace;
  font-size: 9px;
  color: var(--ctp-overlay1);
  text-align: center;
  margin-top: 2px;
  letter-spacing: 0.8px;
}
/* Make units appear clickable to communicate "click for preview" */
.unit { cursor: pointer; transition: outline 0.15s; }
.unit:hover { outline: 1px solid rgba(203, 166, 247, 0.4); outline-offset: 2px; }
.unit.focused { outline: 1px solid var(--ctp-mauve); outline-offset: 2px; }

@media print {
  .assembly-overlay { display: none !important; }
  .unit { cursor: default; outline: none !important; }
  /* The cap safe-zone guide is "pure visual" — useful for design but not for
     cutting. Hide it when actually printing the sheet. */
  .pin-safe-zone { display: none !important; }
}

.sheet-footer {
  margin-top: auto;
  padding-top: 2mm;
  display: flex; justify-content: space-between;
  font-family: 'Share Tech Mono', monospace;
  font-size: 5.5pt; color: var(--muted);
  letter-spacing: 0.6px;
  border-top: 0.15mm solid var(--rule);
}

/* ── EMPTY STATE ──────────────────────── */
.empty-state {
  grid-column: 1 / -1;
  padding: 30mm 10mm;
  text-align: center;
  border: 0.3mm dashed var(--rule);
  color: var(--muted);
}
.empty-state .lg {
  font-family: 'Oswald', sans-serif;
  font-size: 14pt;
  letter-spacing: 3px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 2mm;
}
.empty-state .sm {
  font-family: 'Share Tech Mono', monospace;
  font-size: 8pt;
  letter-spacing: 1px;
}

/* ── PRINT ─────────────────────────────── */
@page { size: A4; margin: 0; }
@media print {
  /* Force pure white everywhere — defeat any inherited Catppuccin / dark-mode tint */
  :root { color-scheme: light only; }
  html, body {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    background-image: none !important;
  }
  .app, main {
    background: #FFFFFF !important;
    background-image: none !important;
  }
  .sheet {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    box-shadow: none !important;
  }
  .app { display: block; height: auto; }
  aside, main > .preview-info { display: none !important; }
  main { padding: 0; gap: 0; overflow: visible; }
}

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; height: auto; }
  aside { max-height: 60vh; }
}