*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:      #362013;
  --bg2:     #402813;
  --bg3:     #4d3018;
  --panel:   #3c2414;
  --border:  #7a4518;
  --accent:  #ff7a1a;
  --accent2: #e06010;
  --text:    #f5e6c8;
  --text2:   #c9a878;
  --c-servo:   #a78bfa;
  --c-led:     #fbbf24;
  --c-motor:   #34d399;
  --c-audio:   #60a5fa;
  --c-trigger: #f87171;
}

/* This block IS the "halloween" theme's palette — :root[data-theme="halloween"]
   needs no separate rule since it's identical to the bare :root default above. */
:root[data-theme="christmas"] {
  --bg:      #14261a;
  --bg2:     #1a3121;
  --bg3:     #213e29;
  --panel:   #182c1e;
  --border:  #3f7a4e;
  --accent:  #e6383f;
  --accent2: #b52830;
  --text:    #f5ead2;
  --text2:   #b9d6bd;
}

:root[data-theme="classic"] {
  --bg:      #16212c;
  --bg2:     #1c2a37;
  --bg3:     #243541;
  --panel:   #1a2733;
  --border:  #3d5b70;
  --accent:  #4da3ff;
  --accent2: #2f7fd6;
  --text:    #eaf0f5;
  --text2:   #a9c4d6;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: ui-monospace, 'SF Mono', 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
  font-size: 16px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Header ── */
header {
  background: var(--bg2);
  border-bottom: 2px solid var(--accent);
  padding: 9px 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
header h1 { font-size: 19px; color: var(--accent); letter-spacing: 1px; white-space: nowrap; }

.board-btns { display: flex; gap: 6px; }
.board-btn {
  padding: 4px 12px;
  border: 1px solid var(--border);
  background: var(--bg3);
  color: var(--text2);
  cursor: pointer;
  border-radius: 3px;
  font-family: inherit;
  font-size: 14px;
  transition: all 0.15s;
}
.board-btn.active { border-color: var(--accent); color: var(--accent); background: #3a1200; }

.btn {
  padding: 5px 13px;
  border: 1px solid var(--accent);
  background: var(--accent2);
  color: var(--text);
  cursor: pointer;
  border-radius: 3px;
  font-family: inherit;
  font-size: 15px;
  white-space: nowrap;
}
.btn:hover { background: var(--accent); }
.btn.ghost {
  border-color: var(--border);
  background: var(--bg3);
  color: var(--text2);
}
.btn.ghost:hover { border-color: var(--text2); color: var(--text); background: var(--bg3); }
.btn.danger {
  border-color: #7a2020;
  background: #3a0000;
  color: #f87171;
}
.btn.danger:hover { background: #5a0000; }

/* ── Main layout ── */
main { display: flex; flex: 1; overflow: hidden; }

/* ── Left panel ── */
.left-panel {
  width: 210px;
  flex-shrink: 0;
  background: var(--panel);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.left-panel-tabs { display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; flex-shrink:0; background:var(--panel); border-bottom:1px solid var(--border); }
.left-panel-tabs button { min-width:0; min-height:38px; padding:7px 5px; border:0; border-radius:5px; background:transparent; color:var(--text2); font:inherit; font-size:12px; font-weight:700; cursor:pointer; }
.left-panel-tabs button:hover { background:var(--bg3); color:var(--text); }
.left-panel-tabs button.active { background:var(--panel); color:var(--accent2); box-shadow:0 1px 4px rgba(39,37,34,.12); }
.left-panel-pane { min-height:0; overflow-y:auto; overflow-x:hidden; display:flex; flex-direction:column; gap:8px; }
.left-panel-pane[hidden] { display:none; }
.lp-section {
  padding: 10px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.lp-section:last-child { border-bottom: none; }
.lp-title {
  font-size: 13px;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.add-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.add-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  background: var(--bg3);
  color: var(--text);
  cursor: pointer;
  border-radius: 3px;
  font-family: inherit;
  font-size: 14px;
  transition: all 0.15s;
}
.add-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.add-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.expansion-panel { margin-top: 8px; display: flex; flex-direction: column; gap: 5px; }
.expansion-title { font-size: 12px; color: var(--text2); text-transform: uppercase; letter-spacing: 0.03em; }
.expansion-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: 13px;
  background: var(--bg3);
}

.props-scroll { flex: 1; overflow-y: auto; padding: 4px 0; }
.prop-row {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 6px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 3px;
  margin: 2px 0;
  cursor: default;
  transition: background 0.1s;
}
.prop-row:hover { background: var(--bg3); border-color: var(--border); }
.prop-row-info { flex: 1; min-width: 0; }
.prop-row-name { font-size: 14px; font-weight: bold; }
.prop-row-pin { font-size: 13px; color: var(--text2); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trigger-action-select {
  margin-top: 4px;
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 3px 6px;
  border-radius: 3px;
  font-family: inherit;
  font-size: 12px;
  width: 100%;
}
.rm-btn { background: none; border: none; color: var(--text2); cursor: pointer; font-size: 17px; line-height: 1; padding: 0 2px; flex-shrink: 0; }
.rm-btn:hover { color: #f87171; }
.prop-row-actions { display:flex; flex-basis:100%; justify-content:flex-end; align-items:center; gap:4px; margin-top:-2px; }
.clear-prop-btn { border:0; background:none; color:var(--text2); font:inherit; font-size:11px; font-weight:650; padding:5px 4px; cursor:pointer; white-space:nowrap; }
.clear-prop-btn:hover:not(:disabled) { color:var(--accent); }
.clear-prop-btn:disabled { opacity:.35; cursor:default; }
.led-remote-check {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  font-size: 12px;
  color: var(--text2);
  cursor: pointer;
}

.stepper-config { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; align-items:center; }
.stepper-config label { display:flex; align-items:center; gap:4px; color:var(--text2); font-size:12px; }
.stepper-config input { width:64px; padding:5px 6px; }
.led-remote-check input { cursor: pointer; }

.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ── Timeline area ── */
.timeline-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }

.tl-tabs { display: flex; gap: 4px; padding: 8px 12px 0; background: var(--bg2); flex-shrink: 0; }
.tl-tabs:empty { display: none; }
.tl-tab {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-bottom: none;
  color: var(--text2);
  padding: 6px 14px;
  border-radius: 4px 4px 0 0;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}
.tl-tab.active { background: var(--panel); color: var(--accent); border-color: var(--accent); }
.tl-tab:hover:not(.active) { color: var(--text); }

.tl-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 12px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.tl-toolbar label { font-size: 14px; color: var(--text2); white-space: nowrap; }
.tl-toolbar input[type=range] { width: 90px; accent-color: var(--accent); }
.tl-dur { font-size: 14px; color: var(--accent); min-width: 55px; }
.tl-hint { font-size: 13px; color: var(--text2); margin-left: auto; white-space: nowrap; }
.tl-select-btn.active { background:#fff1eb; color:var(--accent2); border-color:#f0b9a4; }
.tl-section-tools { display:flex; align-items:center; gap:4px; min-width:0; }
.tl-section-tools:empty { display:none; }
.tl-section-tools span { max-width:150px; overflow:hidden; text-overflow:ellipsis; color:var(--text2); font-size:11px; white-space:nowrap; }
.tl-section-tools button { min-height:30px; padding:4px 7px; border:1px solid var(--border); border-radius:5px; background:var(--panel); color:var(--text); font:inherit; font-size:11px; font-weight:650; cursor:pointer; white-space:nowrap; }
.tl-section-tools button:hover { background:var(--bg3); }
.tl-section-tools .tl-section-close { width:28px; padding:0; font-size:17px; }
.tl-zoom { display:flex; align-items:center; height:34px; border:1px solid var(--border); border-radius:6px; overflow:hidden; flex-shrink:0; }
.tl-zoom button { height:32px; min-width:34px; padding:0 9px; border:0; border-right:1px solid var(--border); background:var(--panel); color:var(--text); font:inherit; font-weight:700; cursor:pointer; }
.tl-zoom button:last-child { border-right:0; }
.tl-zoom button:hover { background:var(--bg3); }
.tl-zoom .tl-zoom-value { min-width:56px; font-size:12px; font-weight:650; color:var(--text2); }

.tl-scroller { flex: 1; overflow: auto; }

.tl-grid { display: flex; flex-direction: column; position: relative; }

.tl-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
  z-index: 25;
  pointer-events: none;
}

/* Sticky corner + ruler */
.tl-ruler-row { display: flex; position: sticky; top: 0; z-index: 20; }
.tl-corner {
  width: 110px;
  flex-shrink: 0;
  height: 26px;
  background: var(--bg2);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: sticky;
  left: 0;
  z-index: 30;
}
.tl-ruler {
  flex: 1;
  height: 26px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  position: relative;
}
.ruler-tick {
  position: absolute;
  bottom: 3px;
  font-size: 13px;
  color: var(--text2);
  transform: translateX(-50%);
  user-select: none;
  white-space: nowrap;
}
.ruler-vline {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: var(--border);
  pointer-events: none;
}

/* Track rows */
.tl-track-row { display: flex; }
.tl-label {
  width: 110px;
  flex-shrink: 0;
  height: 46px;
  display: flex;
  align-items: center;
  padding: 0 8px;
  gap: 6px;
  font-size: 14px;
  background: var(--panel);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: sticky;
  left: 0;
  z-index: 10;
  white-space: nowrap;
}
.tl-label-copy { min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.tl-label-copy strong { overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.tl-label-copy small { color: var(--text2); font-size: 10px; margin-top: 3px; }
.tl-track {
  flex: 1;
  height: 46px;
  border-bottom: 1px solid var(--border);
  position: relative;
  cursor: crosshair;
}
.tl-track:hover { background: rgba(255,106,0,0.03); }
.tl-range-selection { position:absolute; top:0; bottom:0; z-index:1; border:2px solid var(--accent); background:rgba(223,91,47,.12); pointer-events:none; }
.tl-range-selection ~ .ev-block { z-index:2; }

.prop-label-input {
  width: 100%;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 4px;
  background: var(--bg2);
  color: var(--text);
  font: inherit;
  font-weight: 700;
  padding: 3px 5px;
}
.prop-label-input:hover, .prop-label-input:focus {
  border-color: var(--border);
  background: var(--bg2);
  outline: none;
}
.preset-section { margin: 14px 0; }
.preset-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 7px; }
.preset-button { min-height: 38px; border: 1px solid var(--border); border-radius: 5px; background: var(--bg2); color: var(--text); font: inherit; font-weight: 650; cursor: pointer; }
.preset-button:hover { border-color: var(--accent); background: var(--panel); }
.macro-list { display:grid; gap:8px; margin-top:8px; }
.macro-item { border:1px solid var(--border); border-radius:6px; padding:10px; background:var(--bg2); }
.macro-head { display:flex; justify-content:space-between; gap:8px; align-items:flex-start; }
.macro-name { font-weight:700; line-height:1.2; }
.macro-meta { color:var(--muted); font-size:12px; margin-top:4px; }
.macro-actions { display:flex; gap:6px; margin-top:9px; }
.macro-actions button { min-height:32px; padding:5px 9px; }
.macro-event-list { display:grid; gap:7px; margin:10px 0; max-height:38vh; overflow:auto; }
.macro-event-row { display:grid; grid-template-columns:90px 1fr; gap:8px; align-items:center; border-bottom:1px solid var(--border); padding-bottom:7px; }
@media (max-width: 520px) { .preset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.track-empty-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 0 10px;
  font-size: 13px;
  color: #3a1c00;
  pointer-events: none;
}

.ev-block {
  position: absolute;
  box-sizing: border-box;
  top: 5px;
  height: 36px;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  padding: 0 6px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: none;
  min-width: 28px;
  transition: filter 0.1s, border-color 0.1s;
}
.ev-block:hover { filter: brightness(1.25); border-color: rgba(255,255,255,0.6); }
.ev-block.sel { border-color: #fff; box-shadow: 0 0 0 1px #fff; }
.ev-block.firing { filter: brightness(1.6); border-color: #fff; box-shadow: 0 0 8px rgba(255,255,255,0.7); }

.audio-files-scroll { display: flex; flex-direction: column; gap: 6px; padding: 4px 0; }
.audio-file-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 3px;
}
.audio-file-info { flex: 1; min-width: 0; }
.audio-file-track { font-size: 13px; font-weight: bold; }
.audio-file-name { font-size: 12px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.audio-file-none { font-size: 12px; color: var(--text2); font-style: italic; }
.audio-files-empty { color: var(--text2); font-size: 13px; padding: 8px 4px; }

.no-tracks-msg {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text2);
  text-align: center;
  padding: 30px;
  line-height: 1.8;
  font-size: 15px;
}

/* ── Modal ── */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.modal {
  background: var(--panel);
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 20px;
  width: 90vw;
  max-width: 440px;
  max-height: 85vh;
  overflow-y: auto;
}
.modal.wide { max-width: 680px; }
.modal h2 { font-size: 16px; color: var(--accent); margin-bottom: 14px; }
.form-row { margin-bottom: 9px; }
.form-row label { display: block; font-size: 13px; color: var(--text2); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 3px; }
.form-row input, .form-row select {
  width: 100%;
  padding: 5px 8px;
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 3px;
  font-family: inherit;
  font-size: 15px;
}
.form-row input:focus, .form-row select:focus { outline: none; border-color: var(--accent); }
.form-row input[type=number] { -moz-appearance: textfield; }
.form-actions { display: flex; gap: 8px; margin-top: 16px; justify-content: flex-end; align-items: center; }
.form-actions .left { margin-right: auto; }

/* ── Code output ── */
.code-block {
  background: #000;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 12px;
  overflow: auto;
  white-space: pre;
  font-size: 14px;
  line-height: 1.6;
  color: #90ee90;
  max-height: 260px;
}
.code-label { font-size: 13px; color: var(--text2); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 14px; margin-bottom: 5px; }
.modal a { color: var(--accent); }
.modal code { background: var(--bg3); padding: 1px 4px; border-radius: 2px; font-size: 10.5px; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent2); }

/* ── Hardware & Wiring panel ── */
.hw-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 4px;
  border-bottom: 1px solid var(--border);
}
.hw-row:last-of-type { border-bottom: none; }
.hw-row-info { flex: 1; min-width: 0; }
.hw-row-name { font-size: 15px; }
.hw-buy { font-size: 13px; padding: 4px 10px; flex-shrink: 0; text-decoration: none; }
.hw-power { font-size: 14px; line-height: 1.7; color: var(--text); }
.hw-power-rec { margin-top: 6px; padding: 8px 10px; background: var(--bg3); border: 1px solid var(--accent2); border-radius: 3px; color: var(--accent); }
.hw-wire-block { margin-bottom: 16px; }
.hw-wire-title { font-size: 15px; font-weight: bold; color: var(--accent); margin-bottom: 6px; }
.hw-wire-part { font-weight: normal; color: var(--text2); font-size: 14px; }
.hw-diagram-scroll { overflow-x: auto; padding-bottom: 4px; }
.wiring-svg { display: block; font-family: inherit; }
.hw-remote-note { margin-top: 6px; font-size: 12px; color: var(--text2); line-height: 1.5; max-width: 640px; }

/* ── Print (Hardware & Wiring → Print / Save as PDF) ──
   Isolates whatever's currently in #modalBox, lifts it out of the app's
   fixed-height flex/overflow chrome, and swaps the dark theme for a
   white-background print palette so wire colors stay legible on paper. */
@media print {
  @page { size: landscape; margin: 1.2cm; }

  /* :root[data-theme] matches the theme blocks' specificity — without it,
     a non-default theme (higher-specificity attribute selector) would beat
     this plain :root rule and leak dark colors into the printed PDF. */
  :root, :root[data-theme] {
    --bg: #fff; --bg2: #fff; --bg3: #f4f4f4; --panel: #fff;
    --border: #999; --accent: #a03d00; --accent2: #7a2e00;
    --text: #111; --text2: #444;
  }

  /* .view covers all three top-level app screens (auth/dashboard/editor).
     display:none removes them from layout entirely — visibility:hidden
     alone would leave their full-height boxes reserving space above the
     modal content, which is what was producing the blank top margin. */
  .view { display: none !important; }

  body, .overlay {
    position: static; height: auto; overflow: visible; background: #fff;
  }
  .overlay { display: block; padding: 0; }
  .modal {
    position: static; max-width: none; max-height: none; overflow: visible;
    border: none; box-shadow: none; width: 100%;
    /* @page margin below is the correct mechanism and repeats on every
       printed page. This padding is just a left/right safety net in case
       the browser's print-dialog "Margins" dropdown is set to "None"
       (Chrome remembers that choice across print jobs, overriding @page).
       Padding's top/bottom only land on the first/last page per the CSS
       fragmentation spec, so @page margin is what must be "Default" for
       correct top/bottom spacing on interior pages. */
    padding: 1.2cm;
  }

  h2 { break-after: avoid; }
  .code-label { break-after: avoid; }
  .hw-row, .hw-power { break-inside: avoid; page-break-inside: avoid; }

  /* Parts/power fit on one reference page (page 1), so .modal's own padding
     above is sufficient there. The diagrams are what actually goes to the
     workbench and there can be many of them, spanning several pages — but
     .modal and .hw-diagrams-section are each ONE box, and Chrome only
     re-applies a fragmenting box's padding to its first/last page fragment,
     not to every interior page (confirmed: only page 1 was getting margins).
     The fix is to make each diagram its own atomic, non-fragmenting page:
     break-inside:avoid means it never itself gets cut across pages, so as a
     whole, undivided box its own padding always renders in full, regardless
     of which page it lands on. One diagram per page costs more paper but is
     the only way to guarantee every page has margins. */
  .hw-diagrams-section {
    break-before: page;
    /* This is the section's first (and only relevant) fragment, so its own
       top padding lands correctly here — gives the "Wiring Diagram" label
       breathing room above the first diagram block. */
    padding: 1.2cm 1.2cm 0 1.2cm;
  }
  .hw-wire-block {
    break-inside: avoid; page-break-inside: avoid;
    break-before: page; page-break-before: always;
    padding: 1.2cm;
    margin-bottom: 0;
  }
  .hw-diagrams-section > .hw-wire-block:first-of-type {
    break-before: avoid; page-break-before: avoid;
  }

  .hw-diagram-scroll { overflow: visible; }
  .code-block { max-height: none; overflow: visible; color: #111; background: #f4f4f4; }
  .btn, .hw-buy, .form-actions, .no-print { display: none !important; }
}

/* ── Views (auth / dashboard / editor) ── */
.view { flex: 1; min-height: 0; overflow: hidden; flex-direction: column; }
.view-center { align-items: center; justify-content: center; }

.auth-card {
  text-align: center;
  padding: 40px 50px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.auth-card h1 { font-size: 22px; color: var(--accent); margin-bottom: 10px; }
.auth-tagline { color: var(--text2); font-size: 15px; margin-bottom: 18px; }

/* ── Dashboard ── */
.dash-main { display: block; flex: 1; overflow-y: auto; padding: 20px; max-width: 700px; margin: 0 auto; width: 100%; }
.dash-new { display: flex; gap: 8px; margin-bottom: 6px; }
.dash-new-caps { color: var(--text2); font-size: 13px; margin-bottom: 20px; }
.dash-new input[type="text"] {
  flex: 1;
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 10px;
  border-radius: 3px;
  font-family: inherit;
  font-size: 15px;
}
.dash-new select {
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 10px;
  border-radius: 3px;
  font-family: inherit;
  font-size: 15px;
}
.dash-empty { color: var(--text2); font-size: 15px; padding: 20px 4px; }

.theme-select {
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 10px;
  border-radius: 3px;
  font-family: inherit;
  font-size: 14px;
}
.proj-list { display: flex; flex-direction: column; gap: 8px; }
.proj-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.proj-card-info { flex: 1; min-width: 0; }
.proj-card-name { font-size: 16px; }
.proj-card-meta { font-size: 13px; color: var(--text2); margin-top: 3px; }
.proj-card-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* ── Editor header extras ── */
.editor-proj-name { font-size: 16px; color: var(--text2); white-space: nowrap; }
.save-status { font-size: 13px; color: var(--text2); white-space: nowrap; min-width: 90px; text-align: right; }

/* ── AI Assist ── */
.ai-textarea {
  width: 100%;
  resize: vertical;
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 8px;
  border-radius: 3px;
  font-family: inherit;
  font-size: 14px;
}
.ai-row { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 6px; }
.ai-status { font-size: 13px; color: var(--text2); width: 100%; word-break: break-word; }
.ai-instruction-echo { font-size: 14px; color: var(--text2); font-style: italic; margin-bottom: 8px; }
.ai-explanation { font-size: 15px; line-height: 1.6; margin-bottom: 12px; white-space: pre-wrap; }
.ai-preview-section { margin-bottom: 12px; }
.ai-list { list-style: none; font-size: 14px; line-height: 1.8; }
.ai-empty { font-size: 14px; color: var(--text2); }

/* Friendly product experience ------------------------------------------------
   The builder still contains precise controls, but the primary visual layer
   is intentionally calm and familiar. Technical setup lives behind one menu. */
:root,
:root[data-theme="halloween"],
:root[data-theme="classic"] {
  --bg: #f7f6f2;
  --bg2: #ffffff;
  --bg3: #f1f0eb;
  --panel: #ffffff;
  --border: #deddd7;
  --accent: #df5b2f;
  --accent2: #c94b25;
  --text: #272522;
  --text2: #6f6b65;
}

:root[data-theme="christmas"] {
  --bg: #f5f7f4;
  --bg2: #ffffff;
  --bg3: #edf2ed;
  --panel: #ffffff;
  --border: #d7dfd6;
  --accent: #b9363d;
  --accent2: #9e2930;
  --text: #253028;
  --text2: #657168;
}

body {
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  background: var(--bg);
  color: var(--text);
  letter-spacing: 0;
}

header {
  min-height: 64px;
  padding: 10px 24px;
  gap: 18px;
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 8px rgba(39,37,34,.04);
}
header h1 { color: var(--text); font-size: 18px; letter-spacing: 0; }

.btn {
  min-height: 40px;
  padding: 8px 16px;
  border: 0;
  border-radius: 6px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 650;
  background: var(--accent);
  color: #fff;
  box-shadow: 0 1px 2px rgba(39,37,34,.1);
}
.btn:hover { background: var(--accent2); }
.btn.ghost { color: var(--text); background: transparent; border: 1px solid var(--border); box-shadow: none; }
.btn.ghost:hover { color: var(--text); background: var(--bg3); border-color: #c7c4bd; }
.btn.soft { width: 100%; background: #fff1eb; color: #a43f1e; box-shadow: none; }
.btn.soft:hover { background: #ffe6dc; }
.btn.preview { background: var(--text); color: #fff; box-shadow: none; }
.btn.preview:hover { background: #3c3935; }
.btn-large { min-width: 180px; min-height: 48px; font-size: 16px; }
.btn.danger { color: #b23b35; background: #fff; border: 1px solid #eccbc8; }

.theme-select, .dash-new select {
  font-family: inherit;
  background: #fff;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 9px 12px;
}

/* Sign in */
.view-center { background: var(--bg); }
.auth-card { width: min(520px, calc(100vw - 40px)); padding: 54px 48px; border: 0; box-shadow: 0 18px 50px rgba(39,37,34,.09); border-radius: 8px; }
.brand-mark { font-size: 42px; margin-bottom: 20px; }
.auth-card h1 { color: var(--text); font-size: 34px; line-height: 1.15; letter-spacing: 0; margin-bottom: 14px; }
.auth-tagline { max-width: 340px; margin: 0 auto 26px; color: var(--text2); font-size: 17px; line-height: 1.5; }
.auth-footnote { margin-top: 16px; color: var(--text2); font-size: 13px; }

/* Dashboard */
.dash-main { max-width: 920px; padding: 56px 28px 80px; }
.dash-intro { margin-bottom: 28px; }
.eyebrow { color: var(--accent); font-weight: 700; font-size: 13px; text-transform: uppercase; margin-bottom: 8px; }
.dash-intro h2 { font-size: 34px; line-height: 1.18; margin-bottom: 10px; }
.dash-intro > p:last-child { color: var(--text2); font-size: 17px; }
.dash-new-wrap { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 18px; margin-bottom: 38px; box-shadow: 0 5px 18px rgba(39,37,34,.05); }
.dash-new { margin: 0; gap: 10px; }
.dash-new input[type="text"] { min-height: 42px; padding: 9px 13px; background: #fff; color: var(--text); border: 1px solid var(--border); border-radius: 6px; font-family: inherit; }
.dash-new input:focus, .dash-new select:focus { outline: 3px solid rgba(223,91,47,.15); border-color: var(--accent); }
.dash-new-caps { margin: 10px 2px 0; font-size: 13px; }
.section-heading { font-size: 17px; margin-bottom: 12px; }
.proj-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.proj-card { align-items: flex-start; flex-wrap: wrap; min-height: 130px; padding: 20px; border: 1px solid var(--border); border-radius: 8px; background: #fff; box-shadow: 0 3px 12px rgba(39,37,34,.035); }
.proj-card-name { font-size: 18px; font-weight: 700; }
.proj-card-meta { margin-top: 6px; font-size: 13px; }
.proj-card-actions { width: 100%; align-self: flex-end; justify-content: flex-end; }
.dash-empty { grid-column: 1 / -1; padding: 44px; background: #fff; border: 1px dashed var(--border); border-radius: 8px; text-align: center; }
.dash-desktop-cta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  margin-top: 32px;
  padding: 16px 20px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.dash-desktop-cta-text { color: var(--text2); font-size: 14px; }
.dash-desktop-cta-text strong { color: var(--text); }
.dash-desktop-cta-links { display: flex; flex-wrap: wrap; gap: 8px; }
/* Shown only in the browser — running inside the desktop app itself
   (app.js adds .desktop-app to <html>), there's no point offering a link
   to download the very app you're already using. */
.desktop-app .web-only { display: none !important; }

/* Editor chrome */
.icon-text-btn { display: flex; align-items: center; gap: 7px; border: 0; background: transparent; color: var(--text2); font: 600 14px inherit; cursor: pointer; padding: 8px 0; }
.icon-text-btn:hover { color: var(--text); }
.editor-title-wrap { display: flex; flex-direction: column; line-height: 1.2; }
.editor-kicker { color: var(--text2); font-size: 11px; text-transform: uppercase; font-weight: 700; }
.editor-proj-name { color: var(--text); font-size: 16px; font-weight: 700; }
.hardware-summary { display: flex; min-width: 0; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid var(--border); border-radius: 6px; background: #f8f7f3; color: var(--text); font-family: inherit; cursor: pointer; }
.hardware-summary:hover { border-color: #c5c1b9; background: #f3f1ec; }
.hardware-summary-label { color: var(--text2); font-size: 11px; }
.hardware-summary strong { font-size: 12px; white-space: nowrap; }
.hardware-summary-divider { width: 1px; height: 22px; margin: 0 3px; background: var(--border); }
.advanced-board-options { display: none; }
.save-status { min-width: 0; font-size: 12px; }
.setup-menu { position: relative; }
.setup-menu summary { list-style: none; cursor: pointer; padding: 10px 12px; color: var(--text2); font-weight: 600; }
.setup-menu summary::-webkit-details-marker { display: none; }
.setup-menu summary::after { content: "  ⌄"; }
.setup-menu-popover { position: absolute; right: 0; top: calc(100% + 8px); z-index: 80; width: 210px; padding: 7px; background: #fff; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 14px 35px rgba(39,37,34,.14); }
.setup-menu-popover button { display: block; width: 100%; padding: 10px 11px; border: 0; border-radius: 5px; background: transparent; color: var(--text); text-align: left; font: 500 14px inherit; cursor: pointer; }
.setup-menu-popover button:hover { background: var(--bg3); }
.setup-menu-popover .menu-danger { color: #b23b35; border-top: 1px solid var(--border); border-radius: 0; margin-top: 4px; padding-top: 12px; }

/* Builder */
.left-panel { width: 340px; padding: 0; gap: 0; background: #f3f2ee; border-right: 1px solid var(--border); }
.left-panel-tabs { padding:10px; background:#f3f2ee; }
.left-panel-pane { padding:0 10px 10px; }
.lp-section { position: relative; padding: 16px; border: 0; border-radius: 7px; background: #fff; }
.lp-title { margin-bottom: 5px; color: var(--text); font-size: 15px; font-weight: 700; text-transform: none; letter-spacing: 0; }
.lp-help { color: var(--text2); font-size: 13px; line-height: 1.4; margin-bottom: 12px; }
.lp-step { position: absolute; right: 14px; top: 13px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #fff1eb; color: var(--accent2); font-size: 12px; font-weight: 800; }
.add-grid { display: flex; flex-direction: column; gap: 14px; }
.component-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
.component-add { display: flex; min-height: 40px; align-items: center; gap: 7px; padding: 8px 9px; border: 1px solid var(--border); border-radius: 6px; background: #fff; color: var(--text); font-family: inherit; cursor: pointer; }
.component-add:hover:not(:disabled) { border-color: #bcb8b0; background: #fff8f4; }
.component-add:disabled { cursor: not-allowed; opacity: .48; }
.component-add span:nth-child(2) { flex: 1; text-align: left; font-size: 13px; font-weight: 650; }
.component-add strong { color: var(--accent2); font-size: 16px; }
.addon-picker { margin:12px 0; padding:10px; border:1px solid var(--border); background:#fff; }
.addon-picker label { display:block; margin-bottom:6px; font-size:12px; font-weight:750; color:var(--text2); }
.addon-picker>div { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px; }
.addon-picker select { min-width:0; border:1px solid var(--border); border-radius:4px; background:#fff; color:var(--text); padding:7px; }
.pin-map { display: flex; flex-direction: column; gap: 6px; }
.physical-pin-list { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border); border-radius: 6px; }
.physical-pin { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; min-height: 48px; align-items: center; gap: 8px; padding: 7px 9px; border-bottom: 1px solid #eeece7; background: #fff; }
.physical-pin:last-child { border-bottom: 0; }
.physical-pin.occupied { background: #f7f7f4; }
.physical-pin.reserved { background: #faf9f6; color: var(--text2); }
.physical-pin-name { font-size: 12px; font-weight: 800; }
.physical-pin-copy { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.physical-pin-copy strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.physical-pin-copy small { overflow: hidden; color: var(--text2); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.physical-pin-state { color: #27805d; font-size: 10px; font-weight: 750; }
.physical-pin.occupied .physical-pin-state { color: #77726b; }
.physical-pin.reserved .physical-pin-state { color: #9a6254; }
.add-btn { min-height: 42px; justify-content: flex-start; padding: 9px 10px; border: 1px solid var(--border); border-radius: 6px; background: #fff; color: var(--text); font: 600 14px inherit; }
.add-btn:hover:not(:disabled) { color: var(--text); border-color: #bcb8b0; background: var(--bg3); }
.dot { width: 10px; height: 10px; }
.slot-group { display: flex; flex-direction: column; gap: 6px; }
.slot-group-title { display: flex; justify-content: space-between; gap: 8px; color: var(--text2); font-size: 11px; font-weight: 750; text-transform: uppercase; }
.slot-group-title span:last-child { font-weight: 500; text-transform: none; }
.slot-list { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border); border-radius: 6px; }
.slot-row { width: 100%; min-height: 48px; display: flex; align-items: center; gap: 9px; padding: 7px 9px; border: 0; border-bottom: 1px solid #eeece7; background: #fff; color: var(--text); text-align: left; font-family: inherit; }
.slot-row:last-child { border-bottom: 0; }
button.slot-row.available { cursor: pointer; }
button.slot-row.available:hover { background: #fff8f4; }
.slot-row.occupied { background: #f7f7f4; }
.slot-dot { width: 10px; height: 10px; flex: 0 0 10px; border-radius: 50%; background: transparent; border: 2px solid var(--slot-color); }
.slot-row.occupied .slot-dot { background: var(--slot-color); }
.slot-copy { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 2px; }
.slot-copy strong { font-size: 13px; font-weight: 680; }
.slot-copy small { overflow: hidden; color: var(--text2); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.slot-status { flex-shrink: 0; color: var(--accent2); font-size: 12px; font-weight: 700; }
.slot-row.occupied .slot-status { color: #77726b; }
.expansion-panel { margin-top: 18px; }
.expansion-title { margin-bottom: 7px; color: var(--text2); font-size: 12px; font-weight: 700; text-transform: none; letter-spacing: 0; }
.expansion-row { padding: 10px; border-radius: 6px; background: var(--bg3); }
.expansion-row > div { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.expansion-row strong { font-size: 12px; }
.expansion-row span { color: var(--text2); font-size: 11px; line-height: 1.3; }
.expansion-add { display: flex; width: 100%; align-items: center; gap: 9px; padding: 10px; border: 1px dashed #c9c5bd; border-radius: 6px; background: #fff; color: var(--text); text-align: left; font-family: inherit; cursor: pointer; }
.expansion-add:hover { border-color: var(--accent); background: #fff8f4; }
.expansion-add-icon { display: grid; width: 25px; height: 25px; flex: 0 0 25px; place-items: center; border-radius: 50%; background: #fff1eb; color: var(--accent2); font-size: 18px; }
.expansion-add > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.expansion-add strong { font-size: 12px; }
.expansion-add small { color: var(--text2); font-size: 11px; line-height: 1.3; }
.props-scroll { padding: 2px 0; }
.prop-row { padding: 9px 7px; border-bottom: 1px solid #efeee9; border-radius: 0; }
.prop-row:hover { background: var(--bg3); border-color: transparent; border-bottom-color: #efeee9; }
.prop-row-name { font-size: 14px; }
.prop-row-pin { display: none; }
.trigger-action-select { font-family: inherit; background: #fff; color: var(--text); border-color: var(--border); border-radius: 5px; }
.ai-textarea { min-height: 100px; padding: 11px; resize: none; font-family: inherit; line-height: 1.45; background: #faf9f6; color: var(--text); border: 1px solid var(--border); border-radius: 6px; }
.ai-textarea:focus { outline: 3px solid rgba(223,91,47,.12); border-color: var(--accent); }
.audio-file-row { border-radius: 6px; }

.timeline-area { background: #fff; }
.tl-tabs { padding: 14px 18px 0; gap: 6px; background: #fff; }
.tl-tab { padding: 8px 14px; border: 0; border-radius: 6px; background: var(--bg3); color: var(--text2); font-family: inherit; }
.tl-tab.active { color: var(--text); background: #fff1eb; box-shadow: inset 0 0 0 1px #f5c7b6; }
.tl-toolbar { min-height: 62px; padding: 10px 18px; gap: 10px; flex-wrap:wrap; background: #fff; border-bottom: 1px solid var(--border); }
.tl-toolbar label { color: var(--text); font-weight: 650; }
.tl-toolbar input[type=range] { width: 120px; }
.tl-dur { color: var(--text2); font-size: 13px; }
.tl-hint { font-size: 13px; }
.tl-scroller { background: #fbfaf7; padding: 16px 18px; }
.tl-grid { overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.tl-corner, .tl-ruler { background: #f6f5f1; border-color: var(--border); }
.tl-corner, .tl-label { width: 132px; }
.tl-label { height: 58px; padding: 0 13px; background: #fff; border-color: #ebe9e3; font-weight: 650; }
.tl-track { height: 58px; border-color: #ebe9e3; cursor: pointer; }
.tl-track:hover { background: #fffaf7; }
.ruler-tick { color: #9a958e; font-size: 11px; }
.ruler-vline { background: #eeece6; }
.ev-block { top: 10px; height: 38px; border: 0; border-radius: 6px; padding: 0 10px; font-size: 12px; font-weight: 650; box-shadow: 0 1px 2px rgba(39,37,34,.08); }
.track-empty-hint { color: #aaa59d; }
.no-tracks-msg { color: var(--text2); font-size: 16px; }

/* Dialogs */
.overlay { background: rgba(39,37,34,.45); backdrop-filter: blur(3px); }
.modal { background: #fff; border: 0; border-radius: 8px; padding: 26px; box-shadow: 0 22px 60px rgba(39,37,34,.22); }
.modal h2 { color: var(--text); font-size: 21px; }
.deploy-intro { color: var(--text2); line-height: 1.55; margin-bottom: 20px; }
.deploy-label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 7px; }
.deploy-device-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.deploy-device-row select { min-width: 0; padding: 10px; border: 1px solid var(--border); border-radius: 5px; background: #fff; color: var(--text); }
.deploy-status { min-height: 44px; margin: 16px 0; padding: 12px; border-radius: 5px; background: var(--bg3); color: var(--text2); line-height: 1.4; }
.deploy-status.ready, .deploy-status.success { color: #27623f; background: #edf8f0; }
.deploy-status.warning { color: #7a5310; background: #fff7e5; }
.deploy-status.error { color: #9e302b; background: #fff0ef; }
.form-row label, .code-label { color: var(--text2); text-transform: none; letter-spacing: 0; font-weight: 650; }
.form-row input, .form-row select { min-height: 40px; padding: 8px 10px; font-family: inherit; background: #fff; color: var(--text); border-color: var(--border); border-radius: 6px; }

@media (max-width: 860px) {
  header { padding: 9px 14px; }
  .view-editor header .theme-select, .save-status { display: none; }
  .left-panel { width: 290px; }
  .hardware-summary .hardware-summary-divider,
  .hardware-summary .hardware-summary-label:last-of-type,
  .hardware-summary .hardware-summary-label:last-of-type + strong { display: none; }
  .tl-hint { display: none; }
  .proj-list { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  body { height: auto; min-height: 100vh; overflow: auto; }
  .view { min-height: 100vh; overflow: visible; }
  .view-editor main { display: block; overflow: visible; }
  .view-editor header { position: sticky; top: 0; z-index: 70; }
  .editor-kicker, .icon-text-btn span { display: none; }
  .hardware-summary { display: none; }
  .left-panel { width: 100%; max-height: none; overflow: visible; border-right: 0; }
  .timeline-area { min-height: 520px; }
  .tl-scroller { min-height: 420px; padding: 10px; }
  .dash-main { padding: 36px 18px; }
  .dash-new { flex-direction: column; }
  .dash-intro h2 { font-size: 29px; }
  .auth-card { padding: 42px 24px; }
  .auth-card h1 { font-size: 29px; }
}

/* Keep the established wiring print view isolated from the screen redesign. */
@media print {
  :root, :root[data-theme] {
    --bg: #fff; --bg2: #fff; --bg3: #f4f4f4; --panel: #fff;
    --border: #999; --accent: #a03d00; --accent2: #7a2e00;
    --text: #111; --text2: #444;
  }
  body, .overlay { position: static; height: auto; overflow: visible; background: #fff; }
  .modal {
    position: static; width: 100%; max-width: none; max-height: none;
    overflow: visible; border: 0; border-radius: 0; box-shadow: none;
    padding: 1.2cm;
  }
  .btn, .hw-buy, .form-actions, .no-print { display: none !important; }
}