/* MICROTONE shell-only pilot. Geometry and canvas styling are forbidden here. */
#header {
  --hx-shell-app: #08090d;
  --hx-shell-panel: #101219;
  --hx-shell-raised: #1a1d27;
  --hx-shell-inset: #07080d;
  --hx-shell-border: #303440;
  --hx-shell-text: #f2f3f7;
  --hx-shell-muted: #8a91a0;
  --hx-shell-signature: #00f5ff;
  --hx-shell-signature-soft: color-mix(in srgb, var(--hx-shell-signature) 24%, transparent);
  color: var(--hx-shell-text);
  background: linear-gradient(180deg, #12141c, var(--hx-shell-app));
  border-color: var(--hx-shell-border);
  box-shadow: 0 1px rgb(255 255 255 / 5%), 0 8px 22px rgb(0 0 0 / 28%);
}

#header .app-title {
  color: var(--hx-shell-signature);
  text-shadow: 0 0 10px var(--hx-shell-signature-soft);
}

#header .midi-section label {
  color: var(--hx-shell-muted);
  letter-spacing: 0.08em;
}

#header .midi-section select,
#header #preset-select {
  color: var(--hx-shell-text);
  background: var(--hx-shell-inset);
  border-color: var(--hx-shell-border);
  box-shadow: inset 0 2px 5px rgb(0 0 0 / 50%);
}

#header .action-btn,
#header .add-module-btn {
  color: var(--hx-shell-text);
  background: linear-gradient(180deg, #202431, var(--hx-shell-raised));
  border-color: var(--hx-shell-border);
  box-shadow: inset 0 1px rgb(255 255 255 / 5%), 0 2px 5px rgb(0 0 0 / 30%);
}

#header .action-btn:hover,
#header .action-btn:focus-visible,
#header .add-module-btn:hover,
#header .add-module-btn:focus-visible {
  color: var(--hx-shell-signature);
  border-color: var(--hx-shell-signature);
  box-shadow: inset 0 0 0 1px var(--hx-shell-signature-soft);
  outline: none;
}

#header .action-btn.active,
#header .action-btn[aria-pressed='true'] {
  color: #05070a;
  background: var(--hx-shell-signature);
  border-color: var(--hx-shell-signature);
  box-shadow: inset 0 1px rgb(255 255 255 / 24%);
}

#header .danger:hover,
#header .danger:focus-visible {
  color: #ff3366;
  border-color: #ff3366;
  box-shadow: inset 0 0 0 1px rgb(255 51 102 / 24%);
}