/* Sonic Matter Lab — main stylesheet (v3 · light cream/navy + black canvas)
   Restyle coerente con il logo e la landing:
   - Cream parchment per topbar, sidebars, panel
   - Navy come accent primario (linee del logo)
   - Copper warm + teal accenti secondari
   - SOLO il canvas centrale (.canvas-host) resta nero per dare contrasto
     alle visualizzazioni cimatiche / Chladni / WebGL */

:root {
  /* Backgrounds — light azure (sereno, giorno chiaro) */
  --bg-0: #E8F0F7;            /* azzurrino chiaro principale */
  --bg-1: #DBE7F2;            /* azzurro un po' più carico (topbar, sidebar) */
  --bg-2: #C7D8E6;            /* azzurro profondo (cards, status pills) */
  --bg-3: #B5C9DC;            /* azzurro hover */
  --bg-canvas: #050507;        /* nero per il palco visuale centrale */
  /* Text */
  --fg-0: #142944;            /* navy molto scuro (testo principale) */
  --fg-1: #344B6A;            /* navy medio */
  --fg-2: #6B7E97;            /* grigio-navy chiaro */
  --fg-on-canvas: #E8F0F7;     /* azzurro chiaro per testo sopra canvas nero */
  --fg-on-canvas-muted: #A8BFD4;
  /* Accents */
  --accent: #1F4C7F;          /* blu navy logo (un filo più carico per contrasto su azzurro) */
  --accent-2: #B0743A;        /* copper warm (contrasto su azzurro) */
  --accent-3: #2F7068;        /* teal */
  --accent-4: #9bc46f;        /* lab green */
  --accent-danger: #C45842;
  /* Borders */
  --border: #A8BFD4;          /* azure border */
  --hair: #C0D2E2;            /* azure hair line */
  --module-active: #1F4C7F;   /* navy attivo */
  --module-warn: #C45842;
  --shadow: 0 6px 18px rgba(20, 41, 68, 0.12);
  --radius: 10px;
  --font-serif: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", Menlo, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg-0);
  color: var(--fg-0);
  font-family: var(--font-sans);
  font-size: 14px;
  overflow: hidden;
}

button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; color: inherit; }

/* ---------- Top bar (light cream) ---------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 1rem;
  background: var(--bg-1);
  border-bottom: 1px solid var(--hair);
  height: 56px;
  position: relative;
  z-index: 10;
}
.brand { display: flex; align-items: center; gap: 0.6rem; }
.brand-mark { color: var(--accent); font-size: 1.4rem; }
.brand-logo-img {
  width: 36px;
  height: auto;
  display: block;
  /* Su sfondo cream il logo va naturale, senza filtro */
}
.brand-name {
  font-family: var(--font-serif);
  letter-spacing: 0.2em;
  font-size: 1.05rem;
  color: var(--fg-0);
  font-weight: 500;
}
.brand-lab-badge {
  font-family: var(--font-serif);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  font-weight: 500;
  color: var(--accent-3);
  padding: 1px 0.4rem;
  border: 1px solid var(--accent-3);
  border-radius: 2px;
}
.brand-sub {
  color: var(--fg-2);
  font-style: italic;
  font-size: 0.78rem;
  margin-left: 0.3rem;
}
.modes { display: flex; gap: 0.25rem; margin-left: auto; }
.mode-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg-1);
  padding: 0.4rem 0.7rem;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: border-color 120ms, background 120ms, color 120ms;
}
.mode-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(31, 76, 127, 0.04);
}
.mode-btn.active {
  border-color: var(--accent);
  background: var(--accent);
  color: #E8F0F7;
}
.status { display: flex; align-items: center; gap: 0.4rem; }
.status-pill {
  background: var(--bg-2);
  border: 1px solid var(--border);
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--fg-1);
}
.status-pill.ai-active { border-color: var(--accent); color: var(--accent); background: rgba(31, 76, 127, 0.06); }
.status-pill.ai-error { border-color: var(--accent-danger); color: var(--accent-danger); }
.icon-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg-1);
  width: 32px; height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center; justify-content: center;
  transition: border-color 120ms, color 120ms, background 120ms;
}
.icon-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(31, 76, 127, 0.05); }

/* ---------- Stage ---------- */
#stage {
  display: grid;
  grid-template-columns: 280px 1fr 320px;
  height: calc(100% - 56px);
  width: 100%;
}
.sidebar {
  background: var(--bg-1);
  border-right: 1px solid var(--hair);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.sidebar.right {
  border-right: none;
  border-left: 1px solid var(--hair);
}
.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--hair);
  position: sticky;
  top: 0;
  background: var(--bg-1);
  z-index: 1;
}
.sidebar-header h2 {
  margin: 0;
  font-family: var(--font-serif);
  letter-spacing: 0.15em;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--fg-0);
}
.module-group {
  padding: 0.5rem 1rem 1rem;
  border-bottom: 1px dashed var(--hair);
}
.module-group h3 {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin: 0.6rem 0 0.5rem;
  font-weight: 600;
}
.module-list { display: flex; flex-direction: column; gap: 0.35rem; }
.module-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.55rem;
  background: var(--bg-0);
  border: 1px solid var(--hair);
  border-radius: 8px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color 120ms, background 120ms;
  color: var(--fg-0);
}
.module-item:hover { border-color: var(--accent); background: rgba(31, 76, 127, 0.04); }
.module-item.active {
  border-color: var(--accent);
  background: rgba(31, 76, 127, 0.08);
  color: var(--fg-0);
}
.module-item.locked { opacity: 0.7; cursor: default; }
.module-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--border); flex: 0 0 auto;
}
.module-item.active .module-dot {
  background: var(--accent);
  box-shadow: 0 0 6px rgba(31, 76, 127, 0.5);
}
.module-item.error .module-dot { background: var(--accent-danger); }
.module-name { flex: 1; }
.module-id {
  color: var(--fg-2);
  font-family: var(--font-mono);
  font-size: 0.7rem;
}

.settings-block { display: flex; flex-direction: column; gap: 0.5rem; }
.settings-block label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.78rem;
  color: var(--fg-1);
}
.settings-block input,
.settings-block select,
.ensemble-block input,
.ensemble-block select,
textarea {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.4rem 0.5rem;
  color: var(--fg-0);
}
.settings-block input:focus,
.settings-block select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(31, 76, 127, 0.12); }

button.primary {
  background: var(--accent);
  color: #E8F0F7;
  border: 1px solid var(--accent);
  padding: 0.45rem 0.9rem;
  border-radius: 6px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
button.primary:hover { background: #17396B; }
button.ghost {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 0.4rem 0.7rem;
  border-radius: 6px;
}
button.ghost:hover { background: rgba(31, 76, 127, 0.06); }

/* ---------- Canvas host (palco visuale — RESTA NERO) ----------
   Solo questa zona mantiene lo sfondo scuro: le visualizzazioni
   cimatiche, Chladni, WebGL shader, particle systems hanno
   contrasto solo su nero. Tutto il resto della UI e' light. */
.canvas-host {
  position: relative;
  background: var(--bg-canvas);                    /* #050507 nero profondo */
  overflow: hidden;
  /* Bordo cream sottile per staccare dal cream della UI circostante */
  border-left: 1px solid var(--hair);
  border-right: 1px solid var(--hair);
}
#p5-host { position: absolute; inset: 0; }
#p5-host canvas { display: block; width: 100% !important; height: 100% !important; }

/* Overlay inputs DENTRO il canvas — testo chiaro su nero */
.input-overlay {
  position: absolute;
  left: 1rem; right: 1rem; bottom: 1rem;
  background: rgba(5, 5, 7, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(212, 200, 168, 0.25);
  border-radius: var(--radius);
  padding: 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  z-index: 5;
  color: var(--fg-on-canvas);
}
.overlay-row { display: flex; gap: 0.5rem; align-items: center; }
.overlay-row textarea {
  flex: 1;
  min-height: 38px;
  resize: vertical;
  font-family: var(--font-serif);
  font-size: 1rem;
  background: rgba(0, 0, 0, 0.4);
  color: var(--fg-on-canvas);
  border: 1px solid rgba(212, 200, 168, 0.2);
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
}
.overlay-row textarea::placeholder { color: var(--fg-on-canvas-muted); font-style: italic; }
.overlay-row textarea:focus { outline: none; border-color: var(--accent-2); }
.score-row input[type="range"] { flex: 1; }
.file-pick {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.3rem 0.6rem;
  cursor: pointer;
}
.file-pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file-pick-label { font-size: 0.8rem; color: var(--fg-1); }

.public-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  background: linear-gradient(180deg, rgba(10,10,15,0.0) 0%, rgba(10,10,15,0.4) 100%);
  z-index: 6;
}
.public-buttons { display: flex; gap: 2rem; }
.public-btn {
  width: 96px; height: 96px;
  border-radius: 50%;
  background: rgba(214, 168, 94, 0.1);
  border: 2px solid var(--accent);
  color: var(--accent);
  font-size: 2rem;
}
.public-btn:hover { background: rgba(214, 168, 94, 0.2); }
.public-trace-cta button {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  padding: 0.6rem 1.2rem;
  border-radius: 999px;
  font-family: var(--font-serif);
  letter-spacing: 0.1em;
}

/* ---------- Right panel ---------- */
.panel-pane {
  padding: 0.8rem 1rem;
  border-bottom: 1px dashed var(--border);
}
.panel-pane h3 {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-2);
  margin: 0.4rem 0 0.5rem;
}
.setlist-block ul {
  list-style: none;
  padding: 0;
  margin: 0 0 0.5rem;
  max-height: 200px;
  overflow-y: auto;
}
.setlist-block li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
}
.setlist-block li:hover { background: var(--bg-2); }
.setlist-block li.active { border-color: var(--accent); background: rgba(214, 168, 94, 0.08); }
.setlist-block li .piece-title { font-family: var(--font-serif); font-size: 0.95rem; }
.setlist-block li .piece-meta { font-size: 0.7rem; color: var(--fg-2); }
.setlist-controls { display: flex; gap: 0.3rem; }
.hotkeys { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.3rem; font-size: 0.78rem; color: var(--fg-1); }
.hotkeys kbd {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  background: var(--bg-2);
  border: 1px solid var(--border);
  padding: 0.05rem 0.35rem;
  border-radius: 4px;
}
.record-block { display: flex; gap: 0.5rem; }

.research-cols { display: flex; flex-direction: column; gap: 0.6rem; }
.research-col h3 { margin-top: 0; }
.trace-feed, .telemetry {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.4rem 0.5rem;
  max-height: 220px;
  overflow-y: auto;
  white-space: pre-wrap;
}
.trace-feed .ev { padding: 0.1rem 0; border-bottom: 1px dotted var(--border); }
.trace-feed .ev:last-child { border-bottom: none; }
.trace-feed .ev .t-time { color: var(--fg-2); }
.trace-feed .ev .t-actor { color: var(--accent); }
.trace-feed .ev .t-type { color: var(--accent-2); }
.research-tools { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.6rem 0; }
.repro-hash { font-family: var(--font-mono); font-size: 0.7rem; color: var(--fg-2); }

.ensemble-block { display: flex; flex-direction: column; gap: 0.45rem; }
.ensemble-block label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.78rem; color: var(--fg-1); }
.ensemble-actions { display: flex; gap: 0.4rem; }
.agent-roster { display: flex; flex-direction: column; gap: 0.3rem; }
.agent-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.4rem 0.5rem;
  font-size: 0.8rem;
}
.agent-color { width: 10px; height: 10px; border-radius: 50%; }
.agent-name { flex: 1; }
.agent-row button { font-size: 0.7rem; padding: 0.15rem 0.45rem; }

/* ---------- Modal ---------- */
.modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
}
.modal.hidden { display: none; }
.modal-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  width: min(720px, 92vw);
  max-height: 88vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
}
.modal-card.narrow { width: min(480px, 92vw); }
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--border);
}
.modal-body { padding: 1rem; overflow-y: auto; }
.modal-body h3 {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-2);
  margin-top: 1.2rem;
}
.modal-body h3:first-child { margin-top: 0; }
.mapping-block {
  background: var(--bg-2);
  border: 1px solid var(--border);
  padding: 0.6rem;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  white-space: pre-wrap;
}
.modal-actions { display: flex; justify-content: flex-end; margin-top: 0.6rem; }

/* ---------- Toasts ---------- */
.toasts {
  position: fixed;
  right: 1rem; bottom: 1rem;
  display: flex; flex-direction: column; gap: 0.4rem;
  z-index: 200;
}
.toast {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  padding: 0.5rem 0.7rem;
  border-radius: 6px;
  font-size: 0.82rem;
  max-width: 360px;
  box-shadow: var(--shadow);
}
.toast.error { border-left-color: var(--accent-3); }
.toast.success { border-left-color: var(--accent-4); }

/* ---------- Trace gallery (Installation) ---------- */
.trace-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.4rem;
  max-height: 280px;
  overflow-y: auto;
}
.trace-gallery .trace-tile {
  aspect-ratio: 1 / 1;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}
.trace-gallery .trace-tile img { width: 100%; height: 100%; object-fit: cover; }
.trace-gallery .trace-tile .caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 0.2rem 0.4rem;
  background: rgba(0,0,0,0.55);
  font-size: 0.7rem;
}

/* ---------- Helpers ---------- */
.hidden { display: none !important; }
body.ui-hidden #modules-panel,
body.ui-hidden #right-panel,
body.ui-hidden #topbar,
body.ui-hidden .input-overlay { display: none !important; }
body.ui-hidden #stage { grid-template-columns: 1fr; height: 100%; }

body.public-mode .input-overlay { display: none; }

/* Collapsed sidebars */
body.modules-collapsed #modules-panel { display: none; }
body.modules-collapsed #stage { grid-template-columns: 0 1fr 320px; }
body.right-collapsed #right-panel { display: none; }
body.right-collapsed #stage { grid-template-columns: 280px 1fr 0; }
body.modules-collapsed.right-collapsed #stage { grid-template-columns: 1fr; }

/* ═══════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE  ·  fallback per smartphone / tablet
   Interview emergency: laptop instabile, demo dal telefono.
   ═══════════════════════════════════════════════════════════════════ */

/* Tablet portrait + smartphone landscape — sidebars in drawer */
@media (max-width: 900px) {
  /* Topbar: compatta i bottoni icona, nascondi alcuni labels */
  .topbar { padding: 0.4rem 0.7rem; flex-wrap: wrap; gap: 0.4rem; }
  .brand-name { display: none; }                    /* solo logo + LAB badge */
  .brand-sub { display: none; }                     /* nasconde 'Symbolic Jazz · Co-Performer' */
  .modes { gap: 0.2rem; }
  .mode-btn .mode-label { display: none; }          /* solo emoji per i 3 modi */
  .mode-btn { padding: 0.4rem 0.6rem; }
  .status { gap: 0.3rem; flex-wrap: wrap; }
  .status-pill { font-size: 0.7rem; padding: 0.15rem 0.4rem; }

  /* Stage: layout a 1 colonna (solo canvas), sidebar diventano overlay drawer */
  #stage {
    grid-template-columns: 1fr;
    position: relative;
  }
  .sidebar {
    position: fixed;
    top: 56px; bottom: 0;
    width: 80vw; max-width: 320px;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    box-shadow: 4px 0 24px rgba(15, 38, 64, 0.18);
  }
  .sidebar.right { left: auto; right: 0; transform: translateX(100%); }
  body.modules-open #modules-panel { transform: translateX(0); }
  body.right-open #right-panel { transform: translateX(0); }

  /* Default collapsed on mobile (override desktop defaults) */
  body #modules-panel { transform: translateX(-100%); }
  body #right-panel  { transform: translateX(100%); }

  /* Input overlay: touch-friendly, bottoni larghi */
  #input-overlay {
    padding: 0.5rem;
    gap: 0.4rem;
  }
  .overlay-row { flex-direction: column; gap: 0.3rem; }
  .overlay-row button { width: 100%; padding: 0.8rem; font-size: 0.95rem; }
  #symbolic-text { font-size: 1rem; padding: 0.7rem; }

  /* Auth widget compatto */
  #auth-widget { gap: 0.25rem; }
  #auth-widget button { padding: 0.4rem 0.5rem !important; font-size: 0.78rem; }
}

/* Smartphone portrait — riduce ancora */
@media (max-width: 600px) {
  .topbar { padding: 0.35rem 0.5rem; }
  .brand-logo-img { width: 28px; height: 28px; }
  .brand-lab-badge { font-size: 0.62rem; padding: 0.1rem 0.35rem; }
  .mode-btn { padding: 0.35rem 0.45rem; font-size: 0.92rem; }
  .icon-btn { width: 32px; height: 32px; padding: 0.3rem; }
  .status-pill { font-size: 0.66rem; }

  /* Modal: full-width, full-height on phone */
  .modal-card {
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    border-radius: 0;
  }
  .modal-card.narrow {
    width: 100vw !important; max-width: 100vw !important;
  }
  .modal-body { padding: 0.7rem; }
  .modal-header { padding: 0.6rem 0.8rem; }
  .modal-header h2 { font-size: 0.95rem; }

  /* Tabelle dei pannelli admin: scroll orizzontale invece di rompere */
  .rv-table, .app-list, table {
    display: block; overflow-x: auto; white-space: nowrap;
  }

  /* Schema canvas: scroll orizzontale (lo schema e' largo per natura) */
  #schema-svg-wrap { overflow-x: auto; }

  /* Auth widget: nascondi etichette dei bottoni meno critici, tieni emoji */
  #auth-widget button { font-size: 0.72rem; padding: 0.35rem 0.4rem !important; }
  #status-citations, #status-style { font-size: 0.62rem; }
}

/* Tap-target friendly per ogni touch device */
@media (hover: none) and (pointer: coarse) {
  button, .icon-btn, .mode-btn, .module-item, a.nav-cta {
    min-height: 44px;            /* Apple HIG minimum tap target */
    min-width: 44px;
  }
  /* Disabilita hover-only states */
  *:hover { transition: none; }
}

/* Floating hamburger to toggle the modules drawer on mobile */
@media (max-width: 900px) {
  body::before {
    content: '☰';
    position: fixed;
    top: 0.4rem; left: 0.4rem;
    z-index: 60;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent, #1F4C7F); color: #fff;
    border-radius: 8px;
    font-size: 1.3rem;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(15, 38, 64, 0.2);
    pointer-events: auto;
  }
  body.modules-open::before { content: '✕'; }
}

/* ═══════════════════════════════════════════════════════════════════
   DESKTOP POLISH  ·  laptop 13"-15" + monitor 1080p+
   ═══════════════════════════════════════════════════════════════════ */

/* Laptop intermedio 901-1280px: comprimi widget topbar leggermente */
@media (min-width: 901px) and (max-width: 1280px) {
  #auth-widget button {
    padding: 0 0.45rem !important;
    font-size: 0.78rem !important;
  }
  /* Status pills piu' compatte per non spingere fuori i bottoni */
  .status-pill { font-size: 0.72rem; padding: 0.2rem 0.5rem; }
  /* Stage 3-col leggermente piu' stretto per dare spazio al canvas */
  #stage { grid-template-columns: 250px 1fr 290px; }
}

/* Desktop standard 1281px+: layout ottimizzato */
@media (min-width: 1281px) {
  /* Topbar widget puo' restare a 1 riga */
  .topbar { flex-wrap: nowrap; }
  #auth-widget { flex-wrap: nowrap; overflow-x: auto; max-width: 70vw; }
  #auth-widget::-webkit-scrollbar { height: 4px; }
  #auth-widget::-webkit-scrollbar-thumb { background: var(--accent, #1F4C7F); border-radius: 2px; }
}

/* Wide desktop 1600px+: contenuti centrali respirano */
@media (min-width: 1600px) {
  #stage { grid-template-columns: 320px 1fr 360px; }
}

/* Focus rings accessibili su tastiera (no mouse) */
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent, #1F4C7F);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Hover micro-interactions desktop only (non touch) */
@media (hover: hover) and (pointer: fine) {
  .icon-btn:hover { background: var(--bg-3, #B5C9DC); transition: background 0.12s; }
  .module-item:hover { background: var(--bg-2, #C7D8E6); transition: background 0.12s; }
  .mode-btn:hover { background: var(--bg-2, #C7D8E6); transition: background 0.12s; }
  /* primary buttons piu' vivi sull'hover */
  .primary:hover { filter: brightness(1.08); transition: filter 0.15s; }
}

/* Scrollbar piu' sottile su tutti i pannelli scrollabili */
.sidebar::-webkit-scrollbar,
.modal-body::-webkit-scrollbar,
#schema-host::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb,
#schema-host::-webkit-scrollbar-thumb {
  background: var(--bg-3, #B5C9DC); border-radius: 4px;
}
.sidebar::-webkit-scrollbar-track,
.modal-body::-webkit-scrollbar-track { background: transparent; }

/* Hamburger SOLO sotto i 900px — sicurezza, non leakare su desktop */
@media (min-width: 901px) {
  body::before { content: none !important; display: none !important; }
  #modules-panel, #right-panel { transform: none !important; }
}

/* Score Studio + altri pannelli a 2-col → 1-col su mobile */
@media (max-width: 600px) {
  .studio-body, .studio-cols, .ws-cols, [class*="-cols"],
  .score-studio-grid, .score-studio-body {
    grid-template-columns: 1fr !important;
    display: block !important;
  }
  /* Voice/Whisper buttons full-width come AI now */
  #btn-voice-toggle, #btn-whisper-toggle, #btn-open-studio {
    width: 100%;
    padding: 0.75rem !important;
    min-height: 48px;
    font-size: 0.95rem;
  }
  /* Symbol packs grid: 2 colonne max su mobile per Adinkra/Alchemical/Geometric */
  [class*="symbol-grid"], [class*="symbols-grid"], [class*="packs-grid"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}