/* ====================================================================
   VectorStream — Design System
   Ultra-flat, line-art-first, zero skeuomorphism
   ==================================================================== */

:root {
  --bg-primary: #000000;
  --bg-panel: #141729;
  --bg-panel-hover: #1A1E35;
  --border: #2A2D45;
  --border-active: #3D4166;
  --text-primary: #E8E8F0;
  --text-secondary: #6B6F8A;
  --text-dim: #3D4166;
  --accent-pink: #FF2D78;
  --accent-cyan: #00E5FF;
  --accent-pink-dim: #FF2D7833;
  --accent-cyan-dim: #00E5FF22;
  --danger: #FF4060;
  --success: #00FF88;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', 'Consolas', monospace;
}

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

body {
  background: var(--bg-primary);
  overflow: hidden;
  font-family: var(--font-mono);
  color: var(--text-primary);
  user-select: none;
  -webkit-user-select: none;
}

/* ========== App Header ========== */

.app-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  padding: 0 16px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.app-header-left {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.app-header-sub {
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.15em;
  color: var(--text-dim);
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 2px;
}

.app-header-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.15em;
  line-height: 1;
}

.app-title-vector {
  color: var(--accent-pink);
}

.app-title-stream {
  color: var(--accent-cyan);
}

/* ========== Status Bar ========== */

.status-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 10px;
  font-weight: 400;
  color: var(--text-dim);
  letter-spacing: 0.05em;
}

.status-bar:empty {
  display: none;
}

.status-item {
  white-space: nowrap;
}

.status-val {
  color: var(--text-secondary);
}

/* ========== Preset Bar ========== */

.preset-bar {
  position: relative;
  margin-left: 24px;
  flex-shrink: 0;
}

.preset-trigger {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 0;
  color: var(--text-primary);
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: 600;
  padding: 4px 24px 4px 8px;
  cursor: pointer;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%236B6F8A'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  transition: all 150ms ease;
}

.preset-trigger:hover {
  border-color: var(--border-active);
  background-color: var(--bg-panel-hover);
}

.preset-trigger-open {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

.preset-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 240px;
  max-height: 400px;
  overflow-y: auto;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  z-index: 150;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.preset-dropdown-open {
  display: block;
}

.preset-actions {
  display: flex;
  gap: 4px;
  padding: 8px 10px;
}

.preset-action-btn {
  appearance: none;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 0;
  color: var(--text-secondary);
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 3px 10px;
  cursor: pointer;
  transition: all 150ms ease;
}

.preset-action-btn:hover {
  border-color: var(--border-active);
  color: var(--text-primary);
  background: var(--bg-panel-hover);
}

.preset-danger-btn {
  color: var(--danger);
  border-color: var(--danger);
}

.preset-danger-btn:hover {
  background: rgba(255, 64, 96, 0.12);
}

.preset-cancel-btn {
  padding: 3px 6px;
}

.preset-divider {
  height: 1px;
  background: var(--border);
  margin: 0;
}

.preset-section-label {
  font-size: 9px;
  font-weight: 700;
  font-family: var(--font-mono);
  letter-spacing: 0.15em;
  color: var(--text-dim);
  padding: 6px 10px 3px;
  text-transform: uppercase;
}

.preset-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 10px;
  cursor: pointer;
  transition: background 150ms ease;
}

.preset-row:hover {
  background: var(--bg-panel-hover);
}

.preset-row-active {
  border-left: 2px solid var(--accent-cyan);
}

.preset-row-name {
  font-size: 11px;
  font-weight: 500;
  font-family: var(--font-mono);
  color: var(--text-primary);
  letter-spacing: 0.03em;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preset-row-btns {
  display: flex;
  gap: 2px;
  margin-left: 8px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 150ms ease;
}

.preset-row:hover .preset-row-btns {
  opacity: 1;
}

.preset-row-btn {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0;
  color: var(--text-dim);
  font-size: 12px;
  font-family: var(--font-mono);
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all 150ms ease;
}

.preset-row-btn:hover {
  color: var(--text-primary);
  border-color: var(--border-active);
  background: var(--bg-panel-hover);
}

.preset-delete-btn:hover {
  color: var(--danger);
  border-color: var(--danger);
}

.preset-cat-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  cursor: pointer;
  transition: background 150ms ease;
}

.preset-cat-header:hover {
  background: var(--bg-panel-hover);
}

.preset-cat-active {
  border-left: 2px solid var(--accent-cyan);
}

.preset-cat-arrow {
  font-size: 10px;
  color: var(--text-dim);
  width: 10px;
  flex-shrink: 0;
}

.preset-cat-label {
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--text-secondary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex: 1;
}

.preset-cat-header:hover .preset-cat-label {
  color: var(--text-primary);
}

.preset-cat-count {
  font-size: 9px;
  font-family: var(--font-mono);
  color: var(--text-dim);
  font-weight: 500;
}

.preset-cat-body {
  border-left: 1px solid var(--border);
  margin-left: 14px;
}

.preset-cat-body .preset-row {
  padding-left: 10px;
}

.preset-empty {
  font-size: 10px;
  color: var(--text-dim);
  padding: 6px 10px;
  font-style: italic;
}

.preset-new-btn {
  appearance: none;
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  border-radius: 0;
  color: var(--accent-cyan);
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 8px 10px;
  cursor: pointer;
  text-align: left;
  transition: background 150ms ease;
}

.preset-new-btn:hover {
  background: var(--bg-panel-hover);
}

.preset-name-input-wrap {
  display: flex;
  gap: 4px;
  padding: 6px 10px;
  align-items: center;
}

.preset-name-input {
  flex: 1;
  appearance: none;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 0;
  color: var(--text-primary);
  font-size: 11px;
  font-family: var(--font-mono);
  padding: 3px 6px;
  outline: none;
  transition: border-color 150ms ease;
}

.preset-name-input:focus {
  border-color: var(--accent-cyan);
}

.preset-unsaved-banner {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(255, 64, 96, 0.08);
  border-bottom: 1px solid var(--danger);
}

.preset-banner-msg {
  font-size: 10px;
  color: var(--danger);
  font-weight: 500;
  flex: 1;
}

.preset-confirm-row {
  gap: 6px;
  cursor: default;
}

.preset-confirm-msg {
  font-size: 10px;
  color: var(--text-secondary);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preset-rename-row {
  gap: 4px;
  cursor: default;
}

/* ========== Quadrant Grid ========== */

.quadrant-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  height: calc(100vh - 40px - 28px);
  gap: 0;
  background: var(--bg-primary);
}

.quadrant {
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
  overflow: hidden;
  position: relative;
  border: 1px solid var(--border);
  border-radius: 0;
}

/* ========== Quadrant Header ========== */

.quadrant-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  z-index: 2;
  flex-shrink: 0;
}

.quadrant-stats {
  font-size: 10px;
  font-weight: 400;
  color: var(--text-secondary);
  white-space: nowrap;
  margin-left: auto;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ========== Viz Picker ========== */

.viz-picker {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 0;
  color: var(--text-primary);
  font-size: 11px;
  font-family: var(--font-mono);
  font-weight: 500;
  padding: 4px 26px 4px 8px;
  cursor: pointer;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%236B6F8A'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  min-width: 140px;
  transition: all 150ms ease;
}

.viz-picker:hover {
  border-color: var(--border-active);
  background-color: var(--bg-panel-hover);
}

.viz-picker:focus {
  outline: none;
  border-color: var(--accent-cyan);
}

/* ========== Quadrant Buttons ========== */

.quadrant-buttons {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.quadrant-buttons button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 150ms ease;
}

.quadrant-buttons button:hover {
  border-color: var(--border-active);
  color: var(--text-primary);
  background: var(--bg-panel-hover);
}

.quadrant-buttons button:active {
  background: var(--accent-pink-dim);
}

.quadrant-buttons button.playing {
  color: var(--accent-pink);
  border-color: var(--accent-pink);
  background: var(--accent-pink-dim);
}

/* ========== Canvas ========== */

.quadrant-canvas {
  flex: 1;
  min-height: 0;
  display: block;
  width: 100%;
}

/* ========== Quadrant Controls Footer ========== */

.quadrant-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 5px 12px;
  background: var(--bg-panel);
  border-top: 1px solid var(--border);
  z-index: 2;
  flex-shrink: 0;
  min-height: 32px;
  max-height: 40%;
  overflow-y: auto;
  flex-wrap: wrap;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.quadrant-controls:empty {
  display: none;
}

.viz-controls {
  display: contents;
}

/* ========== Collision Stats ========== */

.collision-count {
  color: var(--accent-cyan);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ========== Range Slider (global) ========== */

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 70px;
  height: 2px;
  border-radius: 0;
  background: var(--border);
  outline: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-cyan);
  cursor: pointer;
  border: none;
  transition: transform 150ms ease;
}

input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.3);
}

input[type="range"]::-moz-range-thumb {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-cyan);
  cursor: pointer;
  border: none;
}

/* ========== Module Controls (shared) ========== */

.speed-control,
.shape-count-control {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 400;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.shape-count-control span {
  min-width: 18px;
  text-align: center;
  color: var(--accent-cyan);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.dm-control,
.ast-control,
.drn-control,
.arp-control,
.pac-control,
.dd-control,
.snk-control,
.mc-control,
.brk-control,
.tmp-control,
.gal-control {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 400;
  color: var(--text-secondary);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.dm-control input[type="range"],
.ast-control input[type="range"],
.drn-control input[type="range"],
.pac-control input[type="range"],
.dd-control input[type="range"],
.snk-control input[type="range"],
.mc-control input[type="range"],
.brk-control input[type="range"],
.tmp-control input[type="range"],
.gal-control input[type="range"] {
  width: 55px;
}

.arp-control input[type="range"] {
  width: 45px;
}

.dm-val {
  min-width: 20px;
  text-align: center;
  color: var(--accent-cyan);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* ========== Module Selects (shared) ========== */

.dm-select,
.ast-select,
.drn-select,
.arp-select,
.pac-select,
.dd-select,
.snk-select,
.mc-select,
.brk-select,
.tmp-select,
.gal-select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 0;
  color: var(--text-primary);
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: 500;
  padding: 3px 20px 3px 6px;
  cursor: pointer;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%236B6F8A'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 5px center;
  transition: all 150ms ease;
}

.dm-select:hover,
.ast-select:hover,
.drn-select:hover,
.arp-select:hover,
.pac-select:hover,
.dd-select:hover,
.snk-select:hover,
.mc-select:hover,
.brk-select:hover,
.tmp-select:hover,
.gal-select:hover {
  border-color: var(--border-active);
  background-color: var(--bg-panel-hover);
}

.dm-select:focus,
.ast-select:focus,
.drn-select:focus,
.arp-select:focus,
.pac-select:focus,
.dd-select:focus,
.snk-select:focus,
.mc-select:focus,
.brk-select:focus,
.tmp-select:focus,
.gal-select:focus {
  outline: none;
  border-color: var(--accent-cyan);
}

.dm-bpm-display {
  color: var(--accent-pink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ========== Asteroids Controls ========== */

.ast-auto-toggle {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: var(--font-mono);
  transition: all 150ms ease;
}

.ast-auto-toggle:hover {
  border-color: var(--border-active);
  background: var(--bg-panel-hover);
}

.ast-auto-toggle.ast-active {
  color: var(--accent-pink);
  border-color: var(--accent-pink);
  background: var(--accent-pink-dim);
}

.ast-score,
.pac-score,
.dd-score,
.dd-level,
.snk-score,
.mc-score,
.brk-score,
.tmp-score,
.gal-score {
  color: var(--accent-pink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ========== Dig Dug Controls ========== */

.dd-auto-toggle {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: var(--font-mono);
  transition: all 150ms ease;
}

.dd-auto-toggle:hover {
  border-color: var(--border-active);
  background: var(--bg-panel-hover);
}

.dd-auto-toggle.dd-active {
  color: var(--accent-pink);
  border-color: var(--accent-pink);
  background: var(--accent-pink-dim);
}

/* ========== Pac-Man Controls ========== */

.pac-auto-toggle {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: var(--font-mono);
  transition: all 150ms ease;
}

.pac-auto-toggle:hover {
  border-color: var(--border-active);
  background: var(--bg-panel-hover);
}

.pac-auto-toggle.pac-active {
  color: var(--accent-pink);
  border-color: var(--accent-pink);
  background: var(--accent-pink-dim);
}

/* ========== Snake Controls ========== */

.snk-auto-toggle {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: var(--font-mono);
  transition: all 150ms ease;
}

.snk-auto-toggle:hover {
  border-color: var(--border-active);
  background: var(--bg-panel-hover);
}

.snk-auto-toggle.snk-active {
  color: var(--accent-pink);
  border-color: var(--accent-pink);
  background: var(--accent-pink-dim);
}

/* ========== Missile Command Controls ========== */

.mc-auto-toggle {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: var(--font-mono);
  transition: all 150ms ease;
}

.mc-auto-toggle:hover {
  border-color: var(--border-active);
  background: var(--bg-panel-hover);
}

.mc-auto-toggle.mc-active {
  color: var(--accent-pink);
  border-color: var(--accent-pink);
  background: var(--accent-pink-dim);
}

/* ========== Breakout Controls ========== */

.brk-auto-toggle {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: var(--font-mono);
  transition: all 150ms ease;
}

.brk-auto-toggle:hover {
  border-color: var(--border-active);
  background: var(--bg-panel-hover);
}

.brk-auto-toggle.brk-active {
  color: var(--accent-pink);
  border-color: var(--accent-pink);
  background: var(--accent-pink-dim);
}

/* ========== Tempest Controls ========== */

.tmp-auto-toggle {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: var(--font-mono);
  transition: all 150ms ease;
}

.tmp-auto-toggle:hover {
  border-color: var(--border-active);
  background: var(--bg-panel-hover);
}

.tmp-auto-toggle.tmp-active {
  color: var(--accent-pink);
  border-color: var(--accent-pink);
  background: var(--accent-pink-dim);
}

/* ========== Galaga Controls ========== */

.gal-auto-toggle {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: var(--font-mono);
  transition: all 150ms ease;
}

.gal-auto-toggle:hover {
  border-color: var(--border-active);
  background: var(--bg-panel-hover);
}

.gal-auto-toggle.gal-active {
  color: var(--accent-pink);
  border-color: var(--accent-pink);
  background: var(--accent-pink-dim);
}

/* ========== Drone Machine Controls ========== */

.drn-voice-btn {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: var(--font-mono);
  transition: all 150ms ease;
}

.drn-voice-btn:hover {
  border-color: var(--border-active);
  background: var(--bg-panel-hover);
}

.drn-voice-count {
  color: var(--accent-cyan);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.drn-drift-toggle {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: var(--font-mono);
  transition: all 150ms ease;
}

.drn-drift-toggle:hover {
  border-color: var(--border-active);
  background: var(--bg-panel-hover);
}

.drn-drift-toggle.drn-active {
  color: var(--accent-pink);
  border-color: rgba(255, 45, 120, 0.4);
  background: rgba(255, 45, 120, 0.08);
}

/* ========== Arpeggiator Controls ========== */

.arp-note-grid {
  display: flex;
  gap: 2px;
}

.arp-note-btn {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 2px 4px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  font-family: var(--font-mono);
  transition: all 150ms ease;
}

.arp-note-btn:hover {
  border-color: var(--border-active);
  color: var(--text-secondary);
  background: var(--bg-panel-hover);
}

.arp-note-btn.arp-note-active {
  color: var(--accent-pink);
  border-color: var(--accent-pink);
  background: var(--accent-pink-dim);
  font-weight: 700;
}

.arp-chord-display {
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* ========== Ambient Sounds Controls ========== */

.amb-control {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 400;
  color: var(--text-secondary);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.amb-control input[type="range"] {
  width: 55px;
}

.amb-select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 0;
  color: var(--text-primary);
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: 500;
  padding: 3px 20px 3px 6px;
  cursor: pointer;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%236B6F8A'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 5px center;
  transition: all 150ms ease;
}

.amb-select:hover {
  border-color: var(--border-active);
  background-color: var(--bg-panel-hover);
}

.amb-select:focus {
  outline: none;
  border-color: var(--accent-cyan);
}

.amb-layer-btn {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: var(--font-mono);
  transition: all 150ms ease;
}

.amb-layer-btn:hover {
  border-color: var(--border-active);
  background: var(--bg-panel-hover);
}

.amb-layer-count {
  color: var(--accent-cyan);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ========== Mixer Panel ========== */

.mixer-panel {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transform: translateY(calc(100% - 28px));
  transition: transform 250ms ease-out;
}

.mixer-panel.mixer-open {
  transform: translateY(0);
}

.mixer-handle {
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--bg-panel);
  border-top: 1px solid var(--border);
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-mono);
  letter-spacing: 0.15em;
  color: var(--text-secondary);
  transition: all 150ms ease;
}

.mixer-handle:hover {
  color: var(--text-primary);
  background: var(--bg-panel-hover);
}

.mixer-handle-icon {
  display: inline-flex;
  color: var(--accent-cyan);
}

.mixer-open .mixer-handle {
  color: var(--accent-cyan);
}

.mixer-body {
  height: 150px;
  background: var(--bg-panel);
  border-top: 1px solid var(--border);
  padding: 10px 20px 14px;
}

.mixer-strips {
  display: flex;
  height: 100%;
  gap: 0;
  justify-content: center;
}

.mixer-strip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0 16px;
  min-width: 80px;
  transition: opacity 150ms ease;
}

.mixer-strip.mixer-strip-dim {
  opacity: 0.3;
}

.mixer-solo-fader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-left: 1px solid var(--border);
  min-width: 60px;
}

.mixer-solo-fader .mixer-label {
  font-size: 9px;
  white-space: nowrap;
}

.mixer-solo-fader-toggle {
  width: 100%;
  font-size: 10px;
  padding: 2px 6px;
}

.mixer-solo-fader-toggle.mixer-btn-active {
  color: var(--success);
  border-color: var(--success);
}

.mixer-solo-fader-time {
  display: flex;
  align-items: center;
  gap: 3px;
}

.mixer-solo-fader-input {
  width: 42px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', 'Consolas', monospace;
  font-size: 10px;
  text-align: center;
  padding: 2px;
  outline: none;
}

.mixer-solo-fader-input:focus {
  border-color: var(--border-active);
}

.mixer-solo-fader-unit {
  font-size: 9px;
  color: var(--text-secondary);
  letter-spacing: 0.1em;
}

/* -- Master FX Section -- */

.mixer-fx {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding: 4px 8px;
  border-left: 1px solid var(--border);
  min-width: 140px;
}

.mixer-fx-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  color: var(--text-secondary);
  white-space: nowrap;
}

.mixer-fx-active-label {
  color: var(--accent-pink);
}

.mixer-fx-bypass {
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  text-align: center;
  padding: 8px 0;
}

.mixer-fx-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.mixer-fx-param-label {
  font-size: 9px;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  width: 52px;
  flex-shrink: 0;
  text-align: right;
}

.mixer-fx-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 2px;
  background: var(--border);
  outline: none;
  cursor: pointer;
  min-width: 50px;
}

.mixer-fx-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 8px;
  height: 12px;
  background: var(--accent-cyan);
  border: none;
  cursor: pointer;
}

.mixer-fx-slider::-moz-range-thumb {
  width: 8px;
  height: 12px;
  background: var(--accent-cyan);
  border: none;
  cursor: pointer;
}

.mixer-fx-val {
  font-size: 9px;
  color: var(--text-primary);
  width: 36px;
  text-align: right;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.mixer-sep {
  width: 1px;
  background: var(--border);
  margin: 4px 8px;
  align-self: stretch;
}

.mixer-master-strip {
  min-width: 72px;
}

.mixer-label {
  font-size: 9px;
  font-weight: 700;
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90px;
  text-transform: uppercase;
}

.mixer-master-strip .mixer-label {
  color: var(--accent-cyan);
}

/* Meter + fader side by side */
.mixer-mf {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 70px;
  flex-shrink: 0;
}

/* Level meter */
.mixer-meter-track {
  width: 4px;
  height: 100%;
  border-radius: 0;
  background: var(--accent-cyan-dim);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.mixer-meter-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 0;
  background: var(--accent-cyan);
  transition: height 60ms linear;
  height: 0%;
}

/* Vertical fader — rotated horizontal slider */
.mixer-fader-wrap {
  width: 24px;
  height: 70px;
  position: relative;
  flex-shrink: 0;
}

.mixer-fader {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  width: 70px;
  height: 2px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  background: var(--border);
  border-radius: 0;
  outline: none;
  margin: 0;
  padding: 0;
}

.mixer-fader::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 6px;
  height: 14px;
  border-radius: 0;
  background: var(--accent-cyan);
  cursor: pointer;
  border: none;
}

.mixer-fader::-moz-range-thumb {
  width: 6px;
  height: 14px;
  border-radius: 0;
  background: var(--accent-cyan);
  cursor: pointer;
  border: none;
}

/* Mute / Solo buttons */
.mixer-btns {
  display: flex;
  gap: 3px;
}

.mixer-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 18px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--text-dim);
  font-size: 9px;
  font-weight: 700;
  font-family: var(--font-mono);
  cursor: pointer;
  transition: all 150ms ease;
}

.mixer-btn:hover {
  border-color: var(--border-active);
  color: var(--text-primary);
  background: var(--bg-panel-hover);
}

.mixer-mute.mixer-btn-active {
  color: var(--danger);
  border-color: var(--danger);
  background: rgba(255, 64, 96, 0.12);
}

.mixer-solo.mixer-btn-active {
  color: var(--success);
  border-color: var(--success);
  background: rgba(0, 255, 136, 0.1);
}

.mixer-val {
  font-size: 9px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  text-align: center;
}

/* ========== Status Pack Selector ========== */

.status-pack-select {
  appearance: none;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--accent-pink);
  font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', 'Consolas', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 16px 2px 6px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%236B6F8A'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
}

.status-pack-select:hover {
  border-color: var(--border-active);
  background-color: var(--bg-panel-hover);
}

.status-pack-select:focus {
  outline: none;
  border-color: var(--accent-cyan);
}

/* ========== Responsive ========== */

@media (max-width: 768px) {
  .quadrant-grid {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
  }
}

/* ========== Theremin Controls ========== */

.trm-control {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 400;
  color: var(--text-secondary);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.trm-control input[type="range"] {
  width: 45px;
}

.trm-select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 0;
  color: var(--text-primary);
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: 500;
  padding: 3px 20px 3px 6px;
  cursor: pointer;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%236B6F8A'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 5px center;
  transition: all 150ms ease;
}

.trm-select:hover {
  border-color: var(--border-active);
  background-color: var(--bg-panel-hover);
}

.trm-select:focus {
  outline: none;
  border-color: var(--accent-cyan);
}

.trm-cam-toggle {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: var(--font-mono);
  transition: all 150ms ease;
}

.trm-cam-toggle:hover {
  border-color: var(--border-active);
  background: var(--bg-panel-hover);
}

/* ========== Transport Group ========== */

.transport-group {
  display: flex;
  gap: 4px;
  margin-right: 8px;
  flex-shrink: 0;
}

.transport-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: var(--font-mono);
  text-transform: uppercase;
  transition: all 150ms ease;
}

.transport-btn:hover {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
  background: var(--accent-cyan-dim);
}

.transport-btn:active {
  background: var(--accent-pink-dim);
  border-color: var(--accent-pink);
  color: var(--accent-pink);
}

.transport-btn svg {
  display: inline-block;
  vertical-align: middle;
}

/* ========== Visualizer Overlay ========== */

.viz-trigger-btn {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: var(--font-mono);
  text-transform: uppercase;
  transition: all 150ms ease;
  margin-right: 12px;
}

.viz-trigger-btn:hover {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
  background: var(--accent-cyan-dim);
}

.viz-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 200;
  background: #000000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
}

.viz-overlay.viz-visible {
  opacity: 1;
  pointer-events: auto;
}

.viz-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.viz-control-bar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 201;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(20, 23, 41, 0.85);
  border: 1px solid var(--border);
  transition: opacity 400ms ease;
}

.viz-cursor-hidden .viz-control-bar {
  opacity: 0;
  pointer-events: none;
}

.viz-cursor-hidden {
  cursor: none;
}

.viz-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--text-secondary);
  font-size: 14px;
  cursor: pointer;
  font-family: var(--font-mono);
  transition: all 150ms ease;
}

.viz-close:hover {
  border-color: var(--accent-pink);
  color: var(--accent-pink);
  background: var(--accent-pink-dim);
}

.viz-layer-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 150ms ease;
}

.viz-layer-toggle:hover {
  border-color: var(--border-active);
  color: var(--text-primary);
  background: var(--bg-panel-hover);
}

.viz-layer-toggle.active {
  color: var(--accent-cyan);
  border-color: var(--accent-cyan);
  background: var(--accent-cyan-dim);
}

.viz-layer-opacity {
  width: 50px;
}

.viz-sep {
  width: 1px;
  height: 20px;
  background: var(--border);
  margin: 0 4px;
  flex-shrink: 0;
}

.viz-master-label {
  font-size: 9px;
  font-weight: 700;
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  text-transform: uppercase;
}

.viz-master {
  width: 60px;
}

.viz-logo-toggle {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 2px 8px;
  cursor: pointer;
  transition: all 150ms ease;
}

.viz-logo-toggle:hover {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

.viz-logo-toggle-on {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
  background: rgba(0, 229, 255, 0.08);
}

/* ========== Chord Player Controls ========== */

.cp-control {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 400;
  color: var(--text-secondary);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.cp-control input[type="range"] {
  width: 45px;
}

.cp-select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 0;
  color: var(--text-primary);
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: 500;
  padding: 3px 20px 3px 6px;
  cursor: pointer;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%236B6F8A'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 5px center;
  transition: all 150ms ease;
}

.cp-select:hover {
  border-color: var(--border-active);
  background-color: var(--bg-panel-hover);
}

.cp-select:focus {
  outline: none;
  border-color: var(--accent-cyan);
}

.cp-custom-builder {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  width: 100%;
}

.cp-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

.cp-palette-btn {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 2px 5px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  font-family: var(--font-mono);
  transition: all 150ms ease;
}

.cp-palette-btn:hover {
  border-color: var(--border-active);
  color: var(--text-secondary);
  background: var(--bg-panel-hover);
}

.cp-custom-seq {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 4px 0;
}

.cp-seq-chip {
  font-size: 9px;
  font-weight: 600;
  padding: 2px 6px;
  border: 1px solid var(--accent-pink);
  color: var(--accent-pink);
  background: var(--accent-pink-dim);
  cursor: pointer;
  transition: all 150ms ease;
}

.cp-seq-chip:hover {
  background: rgba(255, 45, 120, 0.25);
}

/* ========== Lead Player Controls ========== */

.lp-control {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 400;
  color: var(--text-secondary);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.lp-control input[type="range"] {
  width: 45px;
}

.lp-select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 0;
  color: var(--text-primary);
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: 500;
  padding: 3px 20px 3px 6px;
  cursor: pointer;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%236B6F8A'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 5px center;
  transition: all 150ms ease;
}

.lp-select:hover {
  border-color: var(--border-active);
  background-color: var(--bg-panel-hover);
}

.lp-select:focus {
  outline: none;
  border-color: var(--accent-cyan);
}

.lp-manual-btn {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-mono);
  transition: all 150ms ease;
}

.lp-manual-btn:hover {
  border-color: var(--border-active);
  background: var(--bg-panel-hover);
}

/* ========== Piano Controls ========== */

.pno-control {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 400;
  color: var(--text-secondary);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.pno-control input[type="range"] {
  width: 45px;
}

.pno-select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 0;
  color: var(--text-primary);
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: 500;
  padding: 3px 20px 3px 6px;
  cursor: pointer;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%236B6F8A'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 5px center;
  transition: all 150ms ease;
}

.pno-select:hover {
  border-color: var(--border-active);
  background-color: var(--bg-panel-hover);
}

.pno-select:focus {
  outline: none;
  border-color: var(--accent-cyan);
}

.pno-stats-display {
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* ========== Profile Picker Overlay ========== */

.profile-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 250;
  background: var(--bg-primary);
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-overlay.profile-visible {
  opacity: 1;
  pointer-events: auto;
}

.profile-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.profile-wave-logo {
  width: min(270px, 45vw);
  height: min(270px, 45vw);
  position: relative;
}

.profile-wave-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.profile-logo {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 4px;
  font-family: var(--font-mono);
  line-height: 1;
  margin-top: -4px;
}

.profile-logo-vector {
  font-weight: 500;
  transition: color 1s ease;
}

.profile-logo-stream {
  font-weight: 300;
  transition: color 1s ease;
}

.profile-subtitle {
  font-size: 8px;
  font-family: var(--font-mono);
  font-weight: 400;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-top: -6px;
}

.profile-cat-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.profile-title {
  font-size: 12px;
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-top: 12px;
}

.profile-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
  max-width: 700px;
}

.profile-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 12px;
  cursor: pointer;
}

.profile-avatar {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: var(--bg-panel);
  font-size: 28px;
  font-family: var(--font-mono);
  font-weight: 700;
  transition: all 150ms ease;
}

.profile-avatar:hover {
  border-color: currentColor;
  transform: scale(1.08);
}

.profile-avatar-new {
  position: relative;
  border-style: dashed;
  color: var(--text-dim);
  font-size: 28px;
  overflow: hidden;
  background-image: url('cat-avatar.png');
  background-size: 100%;
  background-position: center calc(55% + 5px);
  background-repeat: no-repeat;
}

.profile-avatar-new:hover {
  border-color: var(--text-dim);
}


.profile-avatar-wrap {
  position: relative;
  width: 80px;
  height: 80px;
}

.profile-delete-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--text-dim);
  font-size: 12px;
  font-family: var(--font-mono);
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 150ms ease;
  z-index: 1;
}

.profile-card:hover .profile-delete-btn {
  opacity: 1;
}

.profile-delete-btn:hover {
  color: var(--profile-color);
}

.profile-name {
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

.profile-pack-label {
  font-size: 9px;
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
  color: var(--text-dim);
  cursor: pointer;
  transition: all 150ms ease;
  text-align: center;
  margin-top: -4px;
}

.profile-pack-label:hover {
  opacity: 0.7;
}

.profile-create-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.profile-create-label {
  font-size: 14px;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.profile-create-input {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 0;
  color: var(--text-primary);
  font-size: 14px;
  font-family: var(--font-mono);
  padding: 8px 12px;
  text-align: center;
  outline: none;
  transition: border-color 150ms ease;
}

.profile-create-input:focus {
  border-color: var(--accent-cyan);
}

.profile-create-btns {
  display: flex;
  gap: 12px;
}

.profile-create-ok,
.profile-create-cancel {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  padding: 6px 16px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: var(--font-mono);
  text-transform: uppercase;
  transition: all 150ms ease;
}

.profile-create-ok:hover {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
  background: var(--accent-cyan-dim);
}

.profile-create-cancel:hover {
  border-color: var(--border-active);
  color: var(--text-primary);
  background: var(--bg-panel-hover);
}

.profile-delete-warning {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-dim);
  text-align: center;
  max-width: 280px;
  line-height: 1.5;
}

.profile-delete-confirm {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  padding: 6px 16px;
  border: 1px solid var(--danger);
  border-radius: 0;
  background: transparent;
  color: var(--danger);
  cursor: pointer;
  font-family: var(--font-mono);
  text-transform: uppercase;
  transition: all 150ms ease;
}

.profile-delete-confirm:hover {
  background: rgba(255, 64, 96, 0.15);
}

.profile-switch-btn {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: var(--font-mono);
  text-transform: uppercase;
  transition: all 150ms ease;
  margin-right: 12px;
}

.profile-switch-btn:hover {
  border-color: var(--accent-pink);
  color: var(--accent-pink);
  background: var(--accent-pink-dim);
}

/* ========== Unsaved Session Prompt ========== */

.unsaved-prompt {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 300;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 200ms ease;
}

.unsaved-prompt-visible {
  opacity: 1;
}

.unsaved-prompt-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 24px 32px;
  border: 1px solid var(--border);
  background: var(--bg-panel);
}

.unsaved-prompt-msg {
  font-size: 12px;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--danger);
  text-transform: uppercase;
  text-align: center;
}

.unsaved-prompt-btns {
  display: flex;
  gap: 12px;
}

.unsaved-prompt-btn {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  padding: 6px 16px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: var(--font-mono);
  text-transform: uppercase;
  transition: all 150ms ease;
}

.unsaved-prompt-save {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

.unsaved-prompt-save:hover {
  background: var(--accent-cyan-dim);
}

.unsaved-prompt-discard {
  border-color: var(--danger);
  color: var(--danger);
}

.unsaved-prompt-discard:hover {
  background: rgba(255, 64, 96, 0.15);
}

.unsaved-prompt-cancel:hover {
  border-color: var(--border-active);
  color: var(--text-primary);
  background: var(--bg-panel-hover);
}

@media (max-width: 400px) {
  .quadrant-header {
    padding: 4px 8px;
    gap: 6px;
  }

  .quadrant-controls {
    padding: 3px 8px;
    gap: 8px;
  }

  .viz-picker {
    min-width: 110px;
    font-size: 10px;
  }

  input[type="range"] {
    width: 50px;
  }
}