/* ============================================================
   PATCHWORK THEME — instrument-grade design system v2
   ------------------------------------------------------------
   One card. One type ladder. One control height. Restrained accents.
   Brand: oxide = "the active thing" (focus, reset, target).
          amber = "now playing / active LED" (toggle on, transport play).
   Dark default. [data-theme="light"] overrides via tokens.css.
   ============================================================ */

/* ---------- Var redirect: legacy style.css inherits brand ---------- */
:root {
  --bg-primary:      var(--pi-bg);
  --bg-secondary:    var(--pi-surface);
  --bg-card:         var(--pi-surface);
  --bg-input:        var(--pi-bg);
  --bg-toggle:       var(--pi-ink-3);
  --bg-slider:       var(--pi-ink-3);
  --text-primary:    var(--pi-fg);
  --text-secondary:  var(--pi-fg-muted);
  --text-muted:      var(--pi-fg-subtle);
  --text-label:      var(--pi-fg-subtle);
  --border-primary:  var(--pi-border);
  --border-secondary:var(--pi-border-strong);
  --accent-primary:  var(--pi-fg);
  --accent-hover:    var(--pi-accent-2);
  --shadow-color:    rgba(0, 0, 0, 0.55);

  /* System scale (used by patchwork rules below) */
  --pw-card-pad: 16px;
  --pw-card-gap: 12px;
  --pw-row-gap:  10px;
  --pw-ctrl-h:   32px;
  --pw-toggle-w: 36px;
  --pw-toggle-h: 20px;
  --pw-toggle-thumb: 14px;
  --pw-slider-track: 2px;
  --pw-slider-thumb: 12px;
}

/* ---------- Base ---------- */
body {
  background: var(--pi-bg) !important;
  color: var(--pi-fg) !important;
  font-family: var(--pi-font-body) !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
}

* { box-sizing: border-box !important; }

/* ---------- Header / lockup ---------- */
.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  padding: 8px 0;
}
.brand-lockup-img { height: 32px; width: auto; display: block; }
.brand-eyebrow {
  margin-left: 4px;
  padding-left: 12px;
  border-left: 1px solid var(--pi-border);
  font-family: var(--pi-font-display) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: var(--pi-track-eyebrow) !important;
  text-transform: uppercase !important;
  color: var(--pi-fg-subtle) !important;
}
@media (min-width: 901px) {
  .brand-lockup-img { height: 36px; }
}
.desktop-title.brand-lockup {
  background: transparent !important;
  border: none !important;
  padding: 4px 0 16px !important;
  font-weight: normal !important;
  font-size: inherit !important;
  border-bottom: 1px solid var(--pi-border) !important;
  margin-bottom: 16px !important;
  width: 100% !important;
}
@media (min-width: 901px) {
  .desktop-title.brand-lockup { display: inline-flex !important; }
}
@media (max-width: 900px) {
  .desktop-title.brand-lockup { display: none !important; }
}

/* ---------- Cards: one style everywhere ---------- */
#tz-unique-id-container {
  background: var(--pi-bg) !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
.preset-card,
.param-card,
.simulator-card,
.sidebar-transport-card,
.tz4-device-panel,
.utility-card,
.collapsible-card,
.theme-card,
.midi-learn-card,
.update-mode-card,
.lfo-card,
.neighbour-card,
.paired-sliders-card,
.loop-card,
.transport-card,
.device-card {
  background: var(--pi-surface) !important;
  border: 1px solid var(--pi-border) !important;
  border-radius: 4px !important;
  padding: var(--pw-card-pad) !important;
  box-shadow: none !important;
  transition: border-color var(--pi-dur-fast) var(--pi-ease) !important;
}
/* Force vertical stacking inside cards — overrides the base flex-flow:wrap rule */
.preset-card {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
}
.preset-card:hover,
.param-card:hover {
  border-color: var(--pi-border-strong) !important;
}

/* Card column rhythm — 12px between cards */
.preset-sidebar > * + *,
.transport-sidebar > * + *,
.main-content #formdata > * + *,
.theme-sidebar > * + * {
  margin-top: var(--pw-card-gap) !important;
}

/* LFO card: stack child controls with consistent 10px gap */
.lfo-card .lfo-controls {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-top: 8px !important;
}
.lfo-card .lfo-controls .checkbox-group,
.lfo-card .lfo-controls .selector-group,
.lfo-card .lfo-controls .slider-group {
  margin: 0 !important;
}
/* Hide the lfo-controls sub-tree when LFO disabled, and the beats slider
 * when BPM-sync is off — set by JS via .hidden class. */
.lfo-card .hidden { display: none !important; }

/* ---------- Typography ladder (4 sizes, 3 families) ---------- */
.control-label,
.preset-field-label,
.color-scheme-label,
.info-mode-label,
.theme-label {
  font-family: var(--pi-font-display) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: var(--pi-track-eyebrow) !important;
  text-transform: uppercase !important;
  color: var(--pi-fg-subtle) !important;
  margin: 0 0 8px !important;
  display: block !important;
}
.control-help,
.preset-help,
.device-help,
.morph-help-text,
.bpm-source {
  font-family: var(--pi-font-body) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  color: var(--pi-fg-subtle) !important;
}
.preset-info {
  font-family: var(--pi-font-body) !important;
  font-size: 12px !important;
  color: var(--pi-fg-muted) !important;
  background: var(--pi-bg) !important;
  border: 1px solid var(--pi-border) !important;
  border-radius: 4px !important;
  padding: 10px 12px !important;
}
.preset-info .preset-author {
  font-family: var(--pi-font-display) !important;
  color: var(--pi-fg) !important;
  font-weight: 500 !important;
}

/* ---------- Sliders (2px track, 12px thumb) ---------- */
input[type="range"] {
  background: var(--pi-ink-3) !important;
  height: var(--pw-slider-track) !important;
  border-radius: 999px !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  background: var(--pi-fg) !important;
  width: var(--pw-slider-thumb) !important;
  height: var(--pw-slider-thumb) !important;
  border-radius: 50% !important;
  border: none !important;
  cursor: pointer !important;
  transition: transform var(--pi-dur-fast) var(--pi-ease), box-shadow var(--pi-dur-fast) var(--pi-ease) !important;
}
input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.2) !important;
  box-shadow: 0 0 0 4px rgba(179, 58, 26, 0.18) !important;
}
input[type="range"]::-moz-range-thumb {
  background: var(--pi-fg) !important;
  width: var(--pw-slider-thumb) !important;
  height: var(--pw-slider-thumb) !important;
  border-radius: 50% !important;
  border: none !important;
}

/* ---------- Number / text inputs ---------- */
.slider-value-input,
.preset-name-input,
.preset-dropdown,
.selector-dropdown,
input[type="text"],
input[type="number"] {
  background: var(--pi-bg) !important;
  border: 1px solid var(--pi-border) !important;
  color: var(--pi-fg) !important;
  border-radius: 4px !important;
  font-family: var(--pi-font-display) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  height: var(--pw-ctrl-h) !important;
  padding: 0 10px !important;
  line-height: 1 !important;
  transition: border-color var(--pi-dur-fast) var(--pi-ease) !important;
  box-shadow: none !important;
}
.slider-value-input {
  width: 56px !important;
  padding: 0 8px !important;
  text-align: right !important;
}
.slider-value-input:focus,
.preset-name-input:focus,
.preset-dropdown:focus,
.selector-dropdown:focus,
input[type="text"]:focus,
input[type="number"]:focus {
  border-color: var(--pi-accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(179, 58, 26, 0.18) !important;
}
.preset-name-input::placeholder,
input::placeholder {
  color: var(--pi-fg-subtle) !important;
  opacity: 1 !important;
}

/* ---------- Toggle switches (36×20) ---------- */
.check-btn,
.touch-toggle {
  width: var(--pw-toggle-w) !important;
  height: var(--pw-toggle-h) !important;
  background: var(--pi-ink-3) !important;
  border: 1px solid var(--pi-border) !important;
  border-radius: 999px !important;
  transition: background-color var(--pi-dur-fast) var(--pi-ease), border-color var(--pi-dur-fast) var(--pi-ease) !important;
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.4) !important;
  position: relative !important;
}
.check-btn span,
.touch-toggle span {
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  width: var(--pw-toggle-thumb) !important;
  height: var(--pw-toggle-thumb) !important;
  background: var(--pi-fg-subtle) !important;
  border-radius: 50% !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
  transition: background-color var(--pi-dur-fast) var(--pi-ease), transform var(--pi-dur-fast) var(--pi-ease) !important;
}
.checkbox-group:hover .check-btn,
.checkbox-group:hover .touch-toggle {
  border-color: var(--pi-border-strong) !important;
}
.checkbox-group input:checked + .check-btn,
.checkbox-group input:checked + .touch-toggle {
  background: var(--pi-accent-2) !important;
  border-color: var(--pi-accent-2) !important;
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.25), 0 0 8px rgba(232, 163, 60, 0.22) !important;
}
.checkbox-group input:checked + .check-btn span,
.checkbox-group input:checked + .touch-toggle span {
  background: var(--pi-ink) !important;
  transform: translateX(calc(var(--pw-toggle-w) - var(--pw-toggle-thumb) - 6px)) !important;
}

/* ---------- Buttons ---------- */
.preset-btn,
.transport-btn,
.sidebar-utility-btn,
.sidebar-randomize-btn,
.sidebar-transport-btn,
.morph-action-btn,
.undo-redo-btn {
  font-family: var(--pi-font-display) !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  border-radius: 4px !important;
  height: var(--pw-ctrl-h) !important;
  padding: 0 14px !important;
  transition: all var(--pi-dur-fast) var(--pi-ease) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  box-shadow: none !important;
  border: 1px solid var(--pi-border) !important;
  background: transparent !important;
  color: var(--pi-fg-muted) !important;
}
.preset-btn:hover:not(:disabled),
.sidebar-utility-btn:hover:not(:disabled),
.morph-action-btn:hover:not(:disabled),
.undo-redo-btn:hover:not(:disabled) {
  border-color: var(--pi-border-strong) !important;
  color: var(--pi-fg) !important;
  background: var(--pi-ink-3) !important;
}
/* Primary: filled bone */
.preset-btn.load,
.sidebar-randomize-btn.primary,
.morph-action-btn.animate {
  background: var(--pi-fg) !important;
  border-color: var(--pi-fg) !important;
  color: var(--pi-bg) !important;
}
.preset-btn.load:hover:not(:disabled),
.sidebar-randomize-btn.primary:hover,
.morph-action-btn.animate:hover:not(:disabled) {
  background: var(--pi-accent-2) !important;
  border-color: var(--pi-accent-2) !important;
  color: var(--pi-bg) !important;
}
.preset-btn:disabled,
.sidebar-utility-btn:disabled,
.undo-redo-btn:disabled,
.morph-action-btn:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
}

/* ---------- Transport (.transport-btn — mobile rail) ---------- */
.transport-btn {
  padding: 0 16px !important;
  min-width: unset !important;
}
.transport-btn.play { border-color: var(--pi-accent-2) !important; color: var(--pi-accent-2) !important; }
.transport-btn.play:hover:not(:disabled),
.transport-btn.play.active { background: var(--pi-accent-2) !important; color: var(--pi-bg) !important; }
.transport-btn.pause { border-color: var(--pi-border-strong) !important; color: var(--pi-fg) !important; }
.transport-btn.pause:hover:not(:disabled) { background: var(--pi-ink-3) !important; }
.transport-btn.reset { border-color: var(--pi-accent) !important; color: var(--pi-accent) !important; }
.transport-btn.reset:hover:not(:disabled) { background: var(--pi-accent) !important; color: var(--pi-bone) !important; }

/* ---------- Sidebar transport (desktop right rail — square) ---------- */
.sidebar-transport-btn {
  width: var(--pw-ctrl-h) !important;
  height: var(--pw-ctrl-h) !important;
  padding: 0 !important;
  min-width: unset !important;
  flex: 0 0 auto !important;
}
.sidebar-transport-btn.play { border-color: var(--pi-accent-2) !important; color: var(--pi-accent-2) !important; }
.sidebar-transport-btn.play:hover:not(:disabled),
.sidebar-transport-btn.play.active { background: var(--pi-accent-2) !important; color: var(--pi-bg) !important; }
.sidebar-transport-btn.pause { border-color: var(--pi-border-strong) !important; color: var(--pi-fg) !important; }
.sidebar-transport-btn.pause:hover:not(:disabled) { background: var(--pi-ink-3) !important; }
.sidebar-transport-btn.reset { border-color: var(--pi-accent) !important; color: var(--pi-accent) !important; }
.sidebar-transport-btn.reset:hover:not(:disabled) { background: var(--pi-accent) !important; color: var(--pi-bone) !important; }
.sidebar-transport-btn:disabled {
  opacity: 0.35 !important;
  border-color: var(--pi-border) !important;
  color: var(--pi-fg-subtle) !important;
}

/* ---------- Status indicators ---------- */
.status-indicator {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: var(--pi-fg-subtle) !important;
  box-shadow: none !important;
  flex: 0 0 auto !important;
}
.status-indicator.playing { background: var(--pi-accent-2) !important; box-shadow: 0 0 6px var(--pi-accent-2) !important; }
.status-indicator.paused  { background: var(--pi-fg-muted) !important; }
.status-indicator.stopped { background: var(--pi-fg-subtle) !important; }
.status-text {
  font-family: var(--pi-font-display) !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--pi-fg-muted) !important;
}
.sidebar-transport-status {
  background: var(--pi-bg) !important;
  border: 1px solid var(--pi-border) !important;
  border-radius: 4px !important;
  padding: 0 10px !important;
  height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* ---------- Mode pills (Manual / Sync to BPM) ---------- */
.loop-mode-btn,
.interval-mode-btn {
  height: 28px !important;
  padding: 0 12px !important;
  border-radius: 4px !important;
  font-family: var(--pi-font-display) !important;
  font-size: 11px !important;
  letter-spacing: var(--pi-track-eyebrow) !important;
  text-transform: uppercase !important;
  background: transparent !important;
  border: 1px solid var(--pi-border) !important;
  color: var(--pi-fg-subtle) !important;
  transition: all var(--pi-dur-fast) var(--pi-ease) !important;
  cursor: pointer !important;
}
.loop-mode-btn:hover:not(.active),
.interval-mode-btn:hover:not(.active) {
  border-color: var(--pi-border-strong) !important;
  background: var(--pi-ink-3) !important;
  color: var(--pi-fg) !important;
}
.loop-mode-btn.active,
.interval-mode-btn.active {
  background: var(--pi-fg) !important;
  border-color: var(--pi-fg) !important;
  color: var(--pi-bg) !important;
}

/* ---------- Icon toggles (info mode, dark/light) ---------- */
.info-mode-toggle,
.quick-theme-toggle {
  width: var(--pw-ctrl-h) !important;
  height: var(--pw-ctrl-h) !important;
  border-radius: 4px !important;
  border: 1px solid var(--pi-border) !important;
  background: transparent !important;
  color: var(--pi-fg-muted) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: border-color var(--pi-dur-fast) var(--pi-ease), color var(--pi-dur-fast) var(--pi-ease) !important;
}
.info-mode-toggle:hover,
.quick-theme-toggle:hover {
  border-color: var(--pi-accent-2) !important;
  color: var(--pi-accent-2) !important;
}
.sun-icon svg { stroke: var(--pi-accent-2) !important; }
.moon-icon svg { stroke: var(--pi-fg) !important; }

.color-scheme-section,
.info-mode-section {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 0 !important;
  border: none !important;
}
.color-scheme-section + .info-mode-section,
.info-mode-section + .color-scheme-section {
  margin-top: 10px !important;
  padding-top: 10px !important;
  border-top: 1px solid var(--pi-border) !important;
}

/* ---------- Piano keys (scale buttons) ---------- */
.keys .key {
  border-radius: 50% !important;
  border: 1px solid var(--pi-border) !important;
  transition: transform var(--pi-dur-fast) var(--pi-ease), box-shadow var(--pi-dur-fast) var(--pi-ease) !important;
}
.keys .key.white { background: var(--pi-surface) !important; }
.keys .key.black { background: var(--pi-bg) !important; }
.keys .key.white .note-label,
.keys .key.black .note-label {
  font-family: var(--pi-font-display) !important;
  color: var(--pi-fg-subtle) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
}
.keys .key:hover { border-color: var(--pi-fg-subtle) !important; }
.keys .key.active,
.mini-piano .key.active { transform: scale(1.05) !important; }

#C.active        { box-shadow: 0 0 0 6px hsl(0,100%,50%),   inset 0 0 12px hsla(0,100%,50%,0.3) !important; }
#G.active        { box-shadow: 0 0 0 6px hsl(30,100%,50%),  inset 0 0 12px hsla(30,100%,50%,0.3) !important; }
#D.active        { box-shadow: 0 0 0 6px hsl(60,100%,50%),  inset 0 0 12px hsla(60,100%,50%,0.3) !important; }
#A.active        { box-shadow: 0 0 0 6px hsl(90,100%,50%),  inset 0 0 12px hsla(90,100%,50%,0.3) !important; }
#E.active        { box-shadow: 0 0 0 6px hsl(120,100%,50%), inset 0 0 12px hsla(120,100%,50%,0.3) !important; }
#B.active        { box-shadow: 0 0 0 6px hsl(150,100%,50%), inset 0 0 12px hsla(150,100%,50%,0.3) !important; }
#Fsharp.active   { box-shadow: 0 0 0 6px hsl(180,100%,50%), inset 0 0 12px hsla(180,100%,50%,0.3) !important; }
#Csharp.active   { box-shadow: 0 0 0 6px hsl(210,100%,50%), inset 0 0 12px hsla(210,100%,50%,0.3) !important; }
#Gsharp.active   { box-shadow: 0 0 0 6px hsl(240,100%,50%), inset 0 0 12px hsla(240,100%,50%,0.3) !important; }
#Dsharp.active   { box-shadow: 0 0 0 6px hsl(270,100%,50%), inset 0 0 12px hsla(270,100%,50%,0.3) !important; }
#Asharp.active   { box-shadow: 0 0 0 6px hsl(300,100%,50%), inset 0 0 12px hsla(300,100%,50%,0.3) !important; }
#F.active        { box-shadow: 0 0 0 6px hsl(330,100%,50%), inset 0 0 12px hsla(330,100%,50%,0.3) !important; }

.keys .key:not(.active) {
  box-shadow: 0 0 0 1.5px hsl(var(--key-hue, 0), 100%, 50%) !important;
}

/* ---------- ADSR ---------- */
.envelope-visual {
  background: var(--pi-bg) !important;
  border: 1px solid var(--pi-border) !important;
  border-radius: 4px !important;
}
#adsr-canvas {
  background: linear-gradient(180deg, var(--pi-surface) 0%, var(--pi-bg) 100%) !important;
  border-radius: 4px !important;
}
.adsr-slider-group,
.adsr-toggles {
  background: var(--pi-bg) !important;
  border: 1px solid var(--pi-border) !important;
  border-radius: 4px !important;
  padding: 10px 12px !important;
}
.adsr-slider-group label {
  font-family: var(--pi-font-display) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--pi-fg-subtle) !important;
  letter-spacing: var(--pi-track-eyebrow) !important;
  text-transform: uppercase !important;
}

/* ---------- BPM display ---------- */
.bpm-section {
  background: var(--pi-bg) !important;
  border: 1px solid var(--pi-border) !important;
  border-radius: 4px !important;
  padding: 10px 12px !important;
}
.bpm-value {
  font-family: var(--pi-font-display) !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  color: var(--pi-fg) !important;
  letter-spacing: var(--pi-track-tight) !important;
}
.bpm-label  {
  font-family: var(--pi-font-display) !important;
  font-size: 11px !important;
  letter-spacing: var(--pi-track-eyebrow) !important;
  text-transform: uppercase !important;
  color: var(--pi-fg-subtle) !important;
}

/* ---------- Simulator ---------- */
.simulator-container {
  background: var(--pi-bg) !important;
  border: 1px solid var(--pi-border) !important;
  border-radius: 4px !important;
}
.simulator-status {
  font-family: var(--pi-font-display) !important;
  font-size: 11px !important;
  letter-spacing: var(--pi-track-eyebrow) !important;
  color: var(--pi-fg-subtle) !important;
  border-bottom: 1px solid var(--pi-border) !important;
  padding-bottom: 8px !important;
}
.simulator-status #sim-count {
  color: var(--pi-accent-2) !important;
  font-weight: 500 !important;
}

/* ---------- Neighbour viz (brand mapping) ---------- */
.neighbour-viz-container .hex-cell { fill: var(--pi-ink-3) !important; stroke: var(--pi-border) !important; }
.neighbour-viz-container .hex-cell.center { fill: rgba(179, 58, 26, 0.45) !important; stroke: var(--pi-accent) !important; }
.neighbour-viz-container .hex-cell.inner  { fill: var(--pi-ink-3) !important; stroke: var(--pi-border) !important; }
.neighbour-viz-container .hex-cell.outer  { fill: var(--pi-ink-2) !important; stroke: var(--pi-border) !important; }
.neighbour-viz-container .hex-cell.active,
.neighbour-viz-container .hex-cell.inner.active,
.neighbour-viz-container .hex-cell.outer.active {
  fill: rgba(232, 163, 60, 0.7) !important; stroke: var(--pi-accent-2) !important;
}
.neighbour-viz-container .hex-cell.greyed-out,
.neighbour-viz-container .hex-cell.inner.greyed-out,
.neighbour-viz-container .hex-cell.outer.greyed-out {
  fill: var(--pi-ink) !important; stroke: var(--pi-border) !important; opacity: 0.35 !important;
}
.neighbour-viz-container .center-indicator { fill: var(--pi-bone) !important; opacity: 0.95 !important; }

/* ---------- Pattern viz under Update Mode ---------- */
.pattern-viz-container .hex-cell,
.pattern-viz-container svg polygon {
  fill: var(--pi-ink-3) !important; stroke: var(--pi-border) !important;
}
.pattern-viz-container .hex-cell.active,
.pattern-viz-container svg polygon.active {
  fill: rgba(232, 163, 60, 0.75) !important; stroke: var(--pi-accent-2) !important;
}
.pattern-viz-container .hex-cell.center {
  fill: rgba(179, 58, 26, 0.45) !important; stroke: var(--pi-accent) !important;
}

/* ---------- Morph slider ---------- */
.morph-slider-section {
  background: var(--pi-bg) !important;
  border: 1px solid var(--pi-border) !important;
  border-radius: 4px !important;
  padding: 10px 12px !important;
}
.morph-label-a {
  font-family: var(--pi-font-display) !important;
  font-size: 11px !important;
  letter-spacing: var(--pi-track-eyebrow) !important;
  text-transform: uppercase !important;
  color: var(--pi-accent-2) !important;
}
.morph-label-b {
  font-family: var(--pi-font-display) !important;
  font-size: 11px !important;
  letter-spacing: var(--pi-track-eyebrow) !important;
  text-transform: uppercase !important;
  color: var(--pi-accent) !important;
}
.morph-slider {
  background: linear-gradient(to right, var(--pi-accent-2), var(--pi-fg) 50%, var(--pi-accent)) !important;
  height: 3px !important;
  border-radius: 999px !important;
}
.morph-slider::-webkit-slider-thumb,
.morph-slider::-moz-range-thumb {
  background: var(--pi-fg) !important;
  border: 2px solid var(--pi-fg) !important;
  width: 14px !important; height: 14px !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) !important;
}

/* ---------- Undo / Redo counter ---------- */
#history-count {
  font-family: var(--pi-font-display) !important;
  color: var(--pi-fg) !important;
  font-weight: 500 !important;
}

/* ---------- TZ4 device panel ---------- */
.tz4-device-panel {
  background: var(--pi-surface) !important;
  border: 1px solid var(--pi-border) !important;
  border-radius: 4px !important;
}

/* ---------- Misc ---------- */
.morph-toggle-section,
.color-scheme-section { border-color: var(--pi-border) !important; }

.ext-link-icon, .extlink {
  color: var(--pi-fg-subtle) !important;
  transition: color var(--pi-dur-fast) var(--pi-ease) !important;
}
.ext-link-icon:hover, .extlink:hover { color: var(--pi-fg) !important; }

/* ---------- Responsive ---------- */
@media screen and (max-width: 900px) {
  .keys .key { width: 40px !important; height: 40px !important; }
  .keys .key .note-label { font-size: 10px !important; }
  .brand-lockup-img { height: 28px; }
}
@media screen and (max-width: 600px) {
  .keys .key { width: 32px !important; height: 32px !important; }
  .brand-lockup-img { height: 24px; }
  :root { --pw-card-pad: 12px; }
}

/* ---------- Light-mode lockup variant swap ---------- */
[data-theme="light"] .brand-lockup-img {
  content: url("../brand-pack/assets/lockup-horizontal-light.svg");
}