:root {
  color-scheme: dark;
  --bg: #070814;
  --panel: #111528;
  --panel-2: #171b31;
  --ink: #eef4ff;
  --muted: #a9b4cf;
  --line: rgba(255,255,255,0.12);
  --gold: #ffc857;
  --cyan: #6ee7ff;
  --pink: #ff75c3;
  --green: #95f985;
  --red: #ff6f6f;
  --violet: #a98bff;
  --shadow: 0 16px 42px rgba(0,0,0,0.32);
  --menu-h: 34px;
  --footer-h: 30px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: radial-gradient(circle at top left, #1e2449 0, #070814 42rem); color: var(--ink); }
body { font-size: clamp(14px, 0.82vw, 16px); }
button, input, select { font: inherit; }
button { cursor: pointer; }
.app-shell { height: 100dvh; min-height: 100svh; display: flex; flex-direction: column; overflow: hidden; }
.menu-bar { position: relative; z-index: 30; flex: 0 0 var(--menu-h); display: flex; align-items: stretch; gap: 0; min-height: var(--menu-h); padding: 0 12px; background: linear-gradient(180deg, #181d33, #0e1221); border-bottom: 1px solid var(--line); box-shadow: 0 8px 20px rgba(0,0,0,0.28); }
.menu-root { color: var(--ink); border: 0; background: transparent; padding: 6px 16px; border-radius: 0; line-height: 1; }
.menu-root:hover, .menu-root:focus-visible { background: rgba(255,255,255,0.09); outline: none; }
.menu-panel { display: none; position: fixed; top: var(--menu-h); min-width: 260px; max-height: calc(100dvh - var(--menu-h) - 12px); overflow: auto; padding: 8px; border: 1px solid rgba(255,255,255,0.16); border-radius: 0 0 14px 14px; background: rgba(12,15,29,0.98); box-shadow: var(--shadow); }
.menu-root:hover + .menu-panel, .menu-root:focus + .menu-panel, .menu-panel:hover, .menu-panel:focus-within { display: grid; }
.menu-bar > .menu-panel:nth-of-type(1) { left: 12px; }
.menu-bar > .menu-panel:nth-of-type(2) { left: 74px; }
.menu-bar > .menu-panel:nth-of-type(3) { left: 170px; }
.menu-bar > .menu-panel:nth-of-type(4) { left: 298px; }
.menu-bar > .menu-panel:nth-of-type(5) { left: 366px; }
.menu-bar > .menu-panel:nth-of-type(6) { left: 428px; }
.menu-panel button { text-align: left; border: 0; border-radius: 10px; padding: 8px 10px; color: var(--ink); background: transparent; }
.menu-panel button:hover, .menu-panel button:focus-visible { background: rgba(110,231,255,0.14); outline: none; }
.menu-panel hr { width: 100%; border: 0; border-top: 1px solid var(--line); }
.desk { width: 100%; max-width: none; margin: 0; padding: 12px clamp(12px, 1.4vw, 22px); flex: 1 1 auto; min-height: 0; overflow: auto; scrollbar-gutter: stable both-edges; }
.hero-card { display: grid; grid-template-columns: minmax(180px, 360px) 1fr; gap: clamp(14px, 1.4vw, 22px); align-items: center; min-height: 0; padding: clamp(14px, 1.35vw, 20px); background: linear-gradient(135deg, rgba(23,27,49,0.95), rgba(11,13,24,0.86)); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); overflow: hidden; }
.header-logo { width: 100%; max-height: clamp(92px, 12vh, 128px); object-fit: contain; filter: drop-shadow(0 14px 32px rgba(0,0,0,0.36)); }
.hero-copy h1 { margin: 0 0 6px; font-size: clamp(1.75rem, 3.25vw, 3.65rem); line-height: 0.96; letter-spacing: -0.055em; }
.hero-copy p { max-width: 82ch; color: var(--muted); line-height: 1.42; margin: 0; }
.eyebrow { color: var(--cyan) !important; text-transform: uppercase; letter-spacing: 0.18em; font-weight: 700; font-size: 0.72rem; margin-bottom: 8px !important; }
.command-strip { display: flex; flex-wrap: wrap; gap: 9px; margin: 12px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 16px; background: rgba(7,8,20,0.62); }
.command-strip button, .primary { border: 1px solid rgba(255,255,255,0.16); border-radius: 999px; padding: 8px 14px; color: var(--ink); background: rgba(255,255,255,0.08); box-shadow: inset 0 1px rgba(255,255,255,0.08); }
.command-strip button:hover { transform: translateY(-1px); background: rgba(255,255,255,0.12); }
.command-strip .primary, button.primary { background: linear-gradient(135deg, #8167ff, #18c4ff); border-color: transparent; color: white; font-weight: 800; }
.status-grid { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 12px; margin: 0 0 12px; }
.status-card { padding: 12px 14px; border: 1px solid var(--line); border-radius: 16px; background: rgba(17,21,40,0.88); }
.status-card span { display: block; color: var(--muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; }
.status-card strong { display: block; margin: 6px 0 4px; font-size: 1.02rem; }
.status-card small { color: var(--muted); line-height: 1.34; }
.workspace-grid { display: grid; grid-template-columns: minmax(420px, 1.18fr) minmax(320px, 0.82fr); gap: 12px; align-items: start; padding-bottom: 10px; }
.window { border: 1px solid var(--line); border-radius: 18px; background: rgba(17,21,40,0.86); box-shadow: var(--shadow); overflow: hidden; }
.window.hidden { display: none; }
.window-title { padding: 10px 14px; background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)); border-bottom: 1px solid var(--line); font-weight: 800; letter-spacing: 0.02em; }
.arrangement-view, .mixer-view, .roadmap-view { padding: 12px; }
.empty-state { min-height: 180px; color: var(--muted); display: grid; place-items: center; text-align: center; }
.section-card { margin-bottom: 10px; border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; padding: 12px; background: rgba(0,0,0,0.16); }
.section-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.section-head strong { color: var(--gold); }
.tag-row { display: flex; flex-wrap: wrap; gap: 7px; }
.tag { padding: 4px 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.06); color: var(--muted); font-size: 0.78rem; }
.mixer-grid { display: grid; gap: 9px; }
.mixer-track { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 9px 10px; border: 1px solid rgba(255,255,255,0.1); border-radius: 13px; background: rgba(0,0,0,0.12); }
.meter { width: 110px; height: 8px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,0.1); }
.meter > i { display: block; height: 100%; width: var(--w, 40%); background: linear-gradient(90deg, var(--cyan), var(--gold)); }
#pianoRollWindow { grid-column: 1 / -1; }
#pianoCanvas { display: block; width: 100%; height: clamp(180px, 25vh, 300px); background: linear-gradient(180deg, rgba(3,4,9,0.9), rgba(15,18,35,0.9)); }
#roadmapWindow { grid-column: 1; }
#logWindow { grid-column: 2; }
.roadmap-list { margin: 0; padding-left: 19px; columns: 2; column-gap: 28px; color: var(--muted); }
.roadmap-list li { break-inside: avoid; margin: 0 0 7px; }
.log-view { margin: 0; padding: 12px; min-height: 210px; max-height: 300px; overflow: auto; white-space: pre-wrap; color: #d6def6; background: rgba(0,0,0,0.18); }
.app-footer { flex: 0 0 var(--footer-h); min-height: var(--footer-h); display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 5px 14px; border-top: 1px solid var(--line); color: var(--muted); background: rgba(0,0,0,0.24); font-size: 0.78rem; }
.quality-good { color: var(--green); }
.quality-warn { color: var(--gold); }
.quality-bad { color: var(--red); }
.modal-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(2,3,9,0.68); backdrop-filter: blur(4px); }
.modal-window { position: fixed; z-index: 61; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(720px, calc(100vw - 32px)); max-height: min(76dvh, 640px); display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,0.18); border-radius: 18px; background: linear-gradient(180deg, rgba(23,27,49,0.98), rgba(9,11,22,0.98)); box-shadow: 0 24px 80px rgba(0,0,0,0.48); overflow: hidden; }
.hidden { display: none !important; }
.modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.modal-header h2 { margin: 0; font-size: 1.05rem; letter-spacing: 0.02em; }
.modal-close { width: 32px; height: 32px; border: 1px solid rgba(255,255,255,0.16); border-radius: 999px; color: var(--ink); background: rgba(255,255,255,0.08); }
.modal-body { padding: 16px; overflow: auto; color: var(--muted); line-height: 1.48; }
.modal-body p { margin: 0 0 12px; }
.modal-body strong { color: var(--ink); }
.modal-body code { color: var(--cyan); }
.modal-actions { display: flex; justify-content: flex-end; padding: 12px 16px; border-top: 1px solid var(--line); }
.modal-actions button { border: 1px solid rgba(255,255,255,0.16); border-radius: 999px; padding: 8px 14px; color: var(--ink); background: rgba(255,255,255,0.08); }
.modal-open .menu-panel { display: none !important; }
@media (max-width: 980px) {
  html, body { overflow: auto; }
  .app-shell { height: auto; min-height: 100svh; overflow: visible; }
  .desk { overflow: visible; }
  .hero-card { grid-template-columns: 1fr; }
  .header-logo { max-width: 460px; }
  .status-grid, .workspace-grid { grid-template-columns: 1fr; }
  #roadmapWindow, #logWindow { grid-column: auto; }
  .roadmap-list { columns: 1; }
  .menu-panel { left: 10px !important; right: 10px; min-width: 0; }
}
@media (max-height: 820px) and (min-width: 981px) {
  .desk { padding-top: 9px; padding-bottom: 8px; }
  .hero-card { grid-template-columns: minmax(160px, 310px) 1fr; padding: 12px 16px; }
  .header-logo { max-height: 90px; }
  .hero-copy h1 { font-size: clamp(1.55rem, 2.75vw, 3rem); }
  .hero-copy p:not(.eyebrow) { font-size: 0.92rem; line-height: 1.34; }
  .command-strip { margin: 9px 0; padding: 8px 10px; }
  .status-card { padding: 10px 12px; }
  .section-card { padding: 10px; }
  #pianoCanvas { height: 190px; }
}


/* Phase 3 modal tables and audio status support */
.modal-table-wrap {
  max-height: 42dvh;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  margin: 0.6rem 0 1rem;
}
.modal-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}
.modal-body th,
.modal-body td {
  text-align: left;
  vertical-align: top;
  padding: 0.55rem 0.65rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.modal-body th {
  position: sticky;
  top: 0;
  background: rgba(17, 21, 38, 0.96);
  color: var(--cyan);
  z-index: 1;
}

/* Phase 4 preset configuration kernel */
.config-form h3 { margin: 1rem 0 0.45rem; color: var(--ink); }
.config-grid { display: grid; grid-template-columns: repeat(2, minmax(180px, 1fr)); gap: 0.75rem; margin: 0.7rem 0; }
.config-grid label { display: grid; gap: 0.32rem; color: var(--muted); font-weight: 700; }
.config-grid input,
.config-grid select { width: 100%; border: 1px solid rgba(255,255,255,0.16); border-radius: 10px; padding: 0.52rem 0.62rem; color: var(--ink); background: rgba(0,0,0,0.24); }
.config-locks { display: grid; grid-template-columns: repeat(2, minmax(180px, 1fr)); gap: 0.45rem 0.85rem; margin: 0.5rem 0 0.85rem; }
.config-check { display: flex; align-items: center; gap: 0.4rem; color: var(--muted); }
.config-check input { accent-color: var(--cyan); }
.config-note { border: 1px solid rgba(110,231,255,0.22); border-radius: 12px; padding: 0.7rem 0.8rem; background: rgba(110,231,255,0.08); }
.modal-body button.primary { background: linear-gradient(135deg, #8167ff, #18c4ff); border-color: transparent; color: white; font-weight: 800; }
.modal-body button { border: 1px solid rgba(255,255,255,0.16); border-radius: 999px; padding: 0.48rem 0.78rem; color: var(--ink); background: rgba(255,255,255,0.08); }
@media (max-width: 720px) { .config-grid, .config-locks { grid-template-columns: 1fr; } }