:root {
  color-scheme: dark;
  --bg: #0d0f13;
  --panel: #15181f;
  --panel-2: #1c2028;
  --panel-3: #232832;
  --border: #2b313d;
  --text: #f4f6fb;
  --muted: #9aa3b3;
  --accent: #7f8cff;
  --accent-2: #5e6bea;
  --danger: #ff6f7d;
  --success: #50c878;
  --shadow: 0 18px 50px rgba(0,0,0,.22);
  --radius: 16px;
  --topbar-h: 72px;
  --sidebar-w: 220px;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f5f8;
  --panel: #ffffff;
  --panel-2: #f8f9fb;
  --panel-3: #eef1f6;
  --border: #dfe4ec;
  --text: #1a1d24;
  --muted: #657084;
  --accent: #5967e7;
  --accent-2: #4553d0;
  --danger: #d84e5d;
  --success: #22965a;
  --shadow: 0 18px 50px rgba(30,45,70,.08);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
.hidden { display: none !important; }
.mobile-only { display: none; }
.muted { color: var(--muted); }
.small { font-size: .82rem; }
.app-shell { min-height: 100vh; }
.topbar { height: var(--topbar-h); position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(14px); }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg,var(--accent),#a26bff); color: white; font-weight: 800; letter-spacing: -.03em; }
.brand-name { font-weight: 800; letter-spacing: -.02em; }
.brand-sub { font-size: .75rem; color: var(--muted); margin-top: 2px; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.save-state { font-size: .82rem; color: var(--muted); }
.local-badge { font-size: .78rem; padding: 6px 9px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); }
.workspace { display: grid; grid-template-columns: var(--sidebar-w) minmax(0,1fr); min-height: calc(100vh - var(--topbar-h)); }
.sidebar { position: sticky; top: var(--topbar-h); height: calc(100vh - var(--topbar-h)); border-right: 1px solid var(--border); padding: 18px 12px; background: var(--panel); display: flex; flex-direction: column; justify-content: space-between; }
.nav-list { display: grid; gap: 6px; }
.nav-item { border: 0; background: transparent; border-radius: 10px; padding: 11px 12px; display: flex; align-items: center; gap: 10px; cursor: pointer; color: var(--muted); text-align: left; }
.nav-item:hover { background: var(--panel-2); color: var(--text); }
.nav-item.active { background: var(--panel-3); color: var(--text); font-weight: 650; }
.sidebar-footer { padding: 12px; }
.version { font-weight: 700; margin-bottom: 5px; }
.content { padding: 28px; min-width: 0; }
.view { display: none; }
.view.active { display: block; }
.page-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 22px; }
.page-head.compact { align-items: center; }
h1,h2,h3,p { margin-top: 0; }
h1 { margin-bottom: 6px; font-size: clamp(1.55rem,2vw,2rem); letter-spacing: -.03em; }
h2 { font-size: 1.1rem; margin-bottom: 12px; }
h3 { font-size: .92rem; margin-bottom: 10px; }
.page-head p { margin: 0; color: var(--muted); }
.eyebrow { color: var(--accent); font-size: .72rem; font-weight: 800; letter-spacing: .12em; margin-bottom: 5px; }
.card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.toolbar-card { padding: 12px; display: flex; gap: 10px; margin-bottom: 18px; }
.search-wrap { flex: 1; }
input, select, textarea { width: 100%; color: var(--text); background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; outline: none; }
input, select { height: 42px; padding: 0 12px; }
textarea { padding: 18px; resize: none; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent); }
label { display: block; margin: 12px 0 6px; color: var(--muted); font-size: .82rem; font-weight: 600; }
.btn, .icon-btn { border: 0; cursor: pointer; border-radius: 10px; }
.btn { min-height: 40px; padding: 0 14px; font-weight: 700; }
.btn.primary { background: var(--accent); color: white; }
.btn.primary:hover { background: var(--accent-2); }
.btn.secondary { background: var(--panel-3); border: 1px solid var(--border); }
.btn.ghost { background: transparent; border: 1px solid var(--border); }
.btn.danger-ghost { background: transparent; border: 1px solid color-mix(in srgb,var(--danger) 45%,var(--border)); color: var(--danger); }
.btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.icon-btn { width: 38px; height: 38px; display: grid; place-items: center; background: var(--panel-2); border: 1px solid var(--border); }
.project-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(250px,1fr)); gap: 16px; }
.project-card { padding: 18px; cursor: pointer; transition: transform .15s ease,border-color .15s ease; }
.project-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb,var(--accent) 60%,var(--border)); }
.project-card .project-title { font-size: 1.08rem; font-weight: 800; margin-bottom: 5px; }
.project-card .project-sub { color: var(--muted); font-size: .86rem; min-height: 20px; }
.project-card .meta-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0; }
.chip { font-size: .72rem; border: 1px solid var(--border); background: var(--panel-2); color: var(--muted); padding: 5px 7px; border-radius: 999px; }
.project-card .project-bottom { display: flex; justify-content: space-between; gap: 8px; align-items: center; border-top: 1px solid var(--border); padding-top: 12px; color: var(--muted); font-size: .78rem; }
.project-actions { display: flex; gap: 6px; }
.mini-btn { background: transparent; border: 1px solid var(--border); border-radius: 8px; padding: 5px 8px; cursor: pointer; color: var(--muted); }
.empty-state { min-height: 340px; display: grid; place-items: center; align-content: center; text-align: center; color: var(--muted); border: 1px dashed var(--border); border-radius: var(--radius); padding: 30px; }
.empty-state h2 { color: var(--text); margin-bottom: 6px; }
.empty-icon { font-size: 2.7rem; margin-bottom: 8px; }
.editor-layout { display: grid; grid-template-columns: 210px minmax(360px,1fr) 320px; gap: 14px; align-items: start; }
.section-panel, .analysis-panel { min-height: 650px; overflow: hidden; }
.panel-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 15px; border-bottom: 1px solid var(--border); }
.section-list { padding: 8px; display: grid; gap: 5px; }
.section-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; border: 0; background: transparent; color: var(--muted); padding: 10px; border-radius: 9px; cursor: pointer; text-align: left; }
.section-item:hover { background: var(--panel-2); }
.section-item.active { background: var(--panel-3); color: var(--text); }
.section-item small { color: var(--muted); }
.lyrics-editor { overflow: hidden; }
.editor-meta-row { display: flex; align-items: end; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.editor-meta-row > div { min-width: 130px; }
.editor-meta-row .grow { flex: 1; }
.editor-meta-actions { display: flex; gap: 6px; padding-bottom: 1px; }
.lyrics-editor textarea { min-height: 520px; border: 0; border-radius: 0; background: transparent; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; line-height: 1.75; font-size: .98rem; }
.lyrics-editor textarea:focus { box-shadow: none; }
.editor-footer { min-height: 42px; border-top: 1px solid var(--border); display: flex; gap: 16px; align-items: center; padding: 0 16px; color: var(--muted); font-size: .78rem; }
.analysis-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px; }
.metric { background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; padding: 12px; text-align: center; }
.metric span { display: block; font-size: 1.45rem; font-weight: 800; }
.metric small { color: var(--muted); }
.analysis-block { padding: 12px 14px 2px; }
.line-analysis { max-height: 260px; overflow: auto; display: grid; gap: 6px; }
.line-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 8px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); font-size: .8rem; }
.line-row.warn { border-color: color-mix(in srgb,#f0b44a 55%,var(--border)); }
.line-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.syllable-badge { font-weight: 800; }
.pronounce-add { display: grid; gap: 7px; }
.pronounce-list { display: grid; gap: 6px; margin-top: 10px; max-height: 180px; overflow: auto; }
.pronounce-item { display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px; align-items: center; font-size: .8rem; background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 7px; }
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 16px; }
.form-card { padding: 18px; }
.range-row { display: grid; grid-template-columns: 1fr 90px; gap: 10px; align-items: center; }
.number-small { text-align: center; }
.button-row { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.status-card { margin-top: 16px; padding: 16px 18px; color: var(--muted); }
.status-card strong { color: var(--text); }
.version-list { padding: 10px; display: grid; gap: 8px; }
.version-item { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel-2); }
.version-item strong { display: block; margin-bottom: 4px; }
.version-actions { display: flex; gap: 6px; align-items: center; }
.export-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); gap: 16px; }
.export-card { padding: 20px; }
.export-card p { color: var(--muted); min-height: 68px; }
.modal { width: min(560px,calc(100vw - 30px)); border: 1px solid var(--border); padding: 0; border-radius: 16px; background: var(--panel); color: var(--text); box-shadow: var(--shadow); }
.small-modal { width: min(430px,calc(100vw - 30px)); }
.modal::backdrop { background: rgba(0,0,0,.62); backdrop-filter: blur(3px); }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.modal-head h2 { margin: 0; }
.modal-body { padding: 8px 18px 18px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--border); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.toast { position: fixed; right: 20px; bottom: 20px; transform: translateY(20px); opacity: 0; pointer-events: none; background: var(--text); color: var(--bg); border-radius: 10px; padding: 11px 14px; font-weight: 700; transition: .2s ease; z-index: 100; max-width: min(360px,calc(100vw - 30px)); }
.toast.show { opacity: 1; transform: translateY(0); }
@media (max-width: 1180px) {
  .editor-layout { grid-template-columns: 190px minmax(0,1fr); }
  .analysis-panel { grid-column: 1 / -1; min-height: 0; }
  .analysis-summary { grid-template-columns: 180px 180px; justify-content: start; }
}
@media (max-width: 800px) {
  .mobile-only { display: grid; }
  .topbar { padding: 0 12px; }
  .brand-sub, .save-state { display: none; }
  .workspace { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: 0; top: var(--topbar-h); width: min(280px,86vw); transform: translateX(-105%); transition: transform .2s ease; z-index: 30; box-shadow: var(--shadow); }
  .sidebar.open { transform: translateX(0); }
  .content { padding: 18px 12px 30px; }
  .page-head { align-items: flex-start; flex-direction: column; }
  .toolbar-card { flex-direction: column; }
  .editor-layout { grid-template-columns: 1fr; }
  .section-panel { min-height: 0; }
  .section-list { display: flex; overflow-x: auto; }
  .section-item { min-width: 160px; }
  .lyrics-editor textarea { min-height: 420px; }
  .editor-meta-row { flex-wrap: wrap; }
  .editor-meta-row > div { flex: 1 1 150px; }
  .editor-meta-actions { flex: 1 1 100%; }
  .analysis-panel { min-height: 0; }
  .analysis-summary { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .brand-name { font-size: .92rem; }
  .brand-mark { width: 36px; height: 36px; }
  .local-badge { display: none; }
  .project-grid { grid-template-columns: 1fr; }
  .two-col { grid-template-columns: 1fr; }
  .pronounce-item { grid-template-columns: 1fr auto; }
  .pronounce-item .alias { grid-column: 1 / -1; }
}

/* Audio-Studio 0.2.0 */
.studio-head { align-items: center; }
.transport-card { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:12px 14px; margin-bottom:12px; }
.transport-main, .transport-options { display:flex; align-items:center; gap:10px; }
.transport-btn { width:44px; height:44px; border-radius:50%; border:1px solid var(--border); background:var(--panel-2); color:var(--text); font-weight:900; cursor:pointer; }
.primary-transport { background:var(--accent); color:#fff; border-color:transparent; }
.time-display { min-width:178px; font-variant-numeric:tabular-nums; }
.time-display strong { font-size:1rem; }
.time-display span { margin-left:6px; color:var(--muted); font-size:.82rem; }
.inline-label { margin:0; }
.zoom-select { width:110px; }
.studio-info { display:flex; gap:10px; align-items:baseline; padding:11px 14px; margin-bottom:12px; font-size:.82rem; }
.studio-info span { color:var(--muted); }
.compact-empty { min-height:260px; }
.timeline-shell { display:grid; grid-template-columns:230px minmax(0,1fr); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:var(--panel); box-shadow:var(--shadow); }
.timeline-sidebar { border-right:1px solid var(--border); background:var(--panel); z-index:4; }
.timeline-controls-spacer { height:34px; display:flex; align-items:center; padding:0 12px; border-bottom:1px solid var(--border); color:var(--muted); font-size:.68rem; font-weight:800; letter-spacing:.1em; }
.track-controls { display:grid; }
.track-control { height:104px; padding:9px 10px; border-bottom:1px solid var(--border); display:grid; align-content:center; gap:7px; background:var(--panel); }
.track-control-top { display:grid; grid-template-columns:minmax(0,1fr) 32px; gap:6px; }
.track-name-input { height:32px; padding:0 8px; font-weight:700; }
.danger-mini { color:var(--danger); }
.track-button-row { display:grid; grid-template-columns:34px 34px minmax(0,1fr); gap:6px; align-items:center; }
.track-toggle { height:28px; border:1px solid var(--border); border-radius:7px; background:var(--panel-2); color:var(--muted); font-weight:900; cursor:pointer; }
.track-toggle.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.track-volume { height:auto; padding:0; border:0; background:transparent; }
.track-start-label { display:grid; grid-template-columns:48px 1fr; align-items:center; gap:6px; margin:0; font-size:.7rem; }
.track-start-label input { height:28px; padding:0 7px; }
.timeline-scroller { overflow:auto; position:relative; background:var(--panel-2); }
.timeline-inner { position:relative; min-width:100%; }
.timeline-ruler { height:34px; position:relative; border-bottom:1px solid var(--border); background:var(--panel); user-select:none; }
.ruler-tick { position:absolute; top:22px; height:12px; width:1px; background:var(--border); }
.ruler-tick.major { top:14px; height:20px; }
.ruler-tick span { position:absolute; top:-13px; left:4px; color:var(--muted); font-size:.65rem; white-space:nowrap; font-variant-numeric:tabular-nums; }
.timeline-tracks { display:grid; }
.timeline-lane { height:104px; position:relative; border-bottom:1px solid var(--border); background-image:linear-gradient(to right,color-mix(in srgb,var(--border) 55%,transparent) 1px,transparent 1px); background-size:40px 100%; }
.audio-clip { position:absolute; top:15px; height:74px; overflow:hidden; border:1px solid color-mix(in srgb,var(--accent) 65%,var(--border)); border-radius:8px; background:color-mix(in srgb,var(--accent) 10%,var(--panel)); }
.waveform { display:block; height:72px; }
.wave-error { display:grid; place-items:center; height:72px; padding:0 12px; color:var(--danger); font-size:.78rem; }
.playhead { position:absolute; top:0; bottom:0; width:1px; background:#ff496c; z-index:3; pointer-events:none; }
.playhead span { position:absolute; top:0; left:-5px; width:11px; height:9px; background:#ff496c; clip-path:polygon(0 0,100% 0,50% 100%); }

@media (max-width: 800px) {
  .transport-card { align-items:flex-start; flex-direction:column; }
  .transport-options { width:100%; justify-content:flex-end; }
  .studio-info { align-items:flex-start; flex-direction:column; }
  .timeline-shell { grid-template-columns:170px minmax(0,1fr); }
  .track-control { padding:7px; }
  .track-button-row { grid-template-columns:30px 30px minmax(0,1fr); }
}

@media (max-width: 520px) {
  .studio-head .head-actions, .studio-head .head-actions .btn { width:100%; }
  .timeline-shell { grid-template-columns:145px minmax(0,1fr); }
  .track-start-label { grid-template-columns:40px 1fr; }
  .time-display { min-width:150px; }
}

/* Audio-Editor 0.3.0 */
.audio-edit-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; margin-bottom:12px; }
.audio-history-actions, .clip-edit-actions { display:flex; flex-wrap:wrap; gap:8px; }
.clip-inspector { display:grid; grid-template-columns:minmax(190px,.8fr) minmax(0,2fr); gap:16px; align-items:center; padding:12px 14px; margin-bottom:12px; transition:opacity .16s ease; }
.clip-inspector.disabled-panel { opacity:.65; }
.clip-inspector-title { display:grid; gap:3px; min-width:0; }
.clip-inspector-title span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.8rem; }
.clip-fields { display:grid; grid-template-columns:110px minmax(150px,1fr) 110px 110px; gap:10px; align-items:end; }
.clip-fields label { margin:0; font-size:.7rem; }
.clip-fields input[type="number"] { height:34px; padding:0 8px; }
.clip-fields input[type="range"] { height:34px; padding:0; border:0; background:transparent; }
.track-meta { color:var(--muted); font-size:.68rem; }
.audio-clip { cursor:grab; touch-action:none; user-select:none; min-width:12px; }
.audio-clip:active { cursor:grabbing; }
.audio-clip.selected { border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 35%,transparent); z-index:2; }
.clip-label { position:absolute; top:3px; left:9px; right:9px; z-index:3; pointer-events:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.66rem; font-weight:800; text-shadow:0 1px 3px var(--panel); }
.clip-handle { position:absolute; top:0; bottom:0; width:9px; z-index:5; cursor:ew-resize; background:transparent; }
.clip-handle::after { content:""; position:absolute; top:22px; bottom:22px; width:2px; background:color-mix(in srgb,var(--text) 55%,transparent); opacity:.35; }
.clip-handle.left { left:0; }
.clip-handle.left::after { left:3px; }
.clip-handle.right { right:0; }
.clip-handle.right::after { right:3px; }
.audio-clip:hover .clip-handle::after, .audio-clip.selected .clip-handle::after { opacity:.85; }
.fade-visual { position:absolute; top:0; bottom:0; z-index:2; pointer-events:none; opacity:.26; }
.fade-in { left:0; background:linear-gradient(135deg,transparent 49%,var(--accent) 50%); }
.fade-out { right:0; background:linear-gradient(45deg,var(--accent) 49%,transparent 50%); }
.waveform { pointer-events:none; opacity:.9; }
.btn:disabled, .transport-btn:disabled { opacity:.42; cursor:not-allowed; }

@media (max-width: 1050px) {
  .clip-inspector { grid-template-columns:1fr; }
  .clip-fields { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .audio-edit-toolbar { align-items:flex-start; flex-direction:column; }
}
@media (max-width: 620px) {
  .clip-fields { grid-template-columns:1fr; }
  .audio-history-actions, .clip-edit-actions { width:100%; }
  .audio-history-actions .btn, .clip-edit-actions .btn { flex:1 1 135px; }
}
.master-volume { width:130px; height:auto; padding:0; border:0; background:transparent; }
@media (max-width: 520px) { .master-volume { width:100px; } }

/* Mixer 0.4.0 */
.mixer-transport { display:flex; justify-content:space-between; align-items:center; gap:18px; padding:12px 14px; margin-bottom:14px; }
.mixer-master { display:grid; grid-template-columns:auto minmax(140px,220px) 120px; align-items:center; gap:10px; min-width:min(100%,470px); }
.mixer-master label { margin:0; font-weight:800; }
.mixer-master input[type="range"] { height:auto; padding:0; border:0; background:transparent; }
.mixer-channels { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; align-items:start; }
.mixer-strip { padding:14px; display:grid; gap:13px; min-width:0; }
.mixer-strip-head { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.mixer-strip-head > div:first-child { min-width:0; display:grid; gap:3px; }
.mixer-track-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mixer-clip-count { color:var(--muted); font-size:.72rem; }
.mixer-ms { display:flex; gap:6px; }
.mixer-ms .track-toggle { width:32px; }
.level-meter { height:8px; border-radius:999px; background:var(--panel-2); border:1px solid var(--border); overflow:hidden; }
.level-meter > span { display:block; width:0; height:100%; background:linear-gradient(90deg,var(--accent),#f6c445,#ff5c7a); transition:width .06s linear; }
.master-meter { height:10px; }
.mixer-control { display:grid; gap:5px; }
.mixer-control > div { display:flex; justify-content:space-between; gap:8px; align-items:center; }
.mixer-control label { margin:0; font-size:.74rem; font-weight:700; }
.mixer-control output { color:var(--muted); font-size:.72rem; font-variant-numeric:tabular-nums; }
.mixer-control input[type="range"] { width:100%; height:auto; padding:0; border:0; background:transparent; }
.mixer-control.compact { gap:3px; }
.mixer-eq,.mixer-fx { display:grid; gap:9px; padding-top:10px; border-top:1px solid var(--border); }
.mixer-eq > strong,.mixer-fx > strong { font-size:.74rem; letter-spacing:.04em; }
.mixer-reset { width:100%; margin-top:2px; }
.wav-export-card { display:grid; align-content:start; gap:10px; }
.wav-export-card p { margin-bottom:0; }
.wav-export-card label { margin-bottom:-4px; }
.wav-export-card small { display:block; line-height:1.4; }

@media (max-width:800px) {
  .mixer-transport { flex-direction:column; align-items:stretch; }
  .mixer-master { grid-template-columns:auto minmax(100px,1fr) 100px; min-width:0; width:100%; }
}
@media (max-width:520px) {
  .mixer-master { grid-template-columns:1fr; }
  .mixer-channels { grid-template-columns:1fr; }
}

/* Piano-Roll & MIDI */
.melody-head { align-items:center; }
.melody-head .head-actions { display:flex; gap:8px; flex-wrap:wrap; }
.melody-toolbar { display:flex; flex-wrap:wrap; align-items:end; gap:12px; padding:12px 14px; margin-bottom:12px; }
.melody-tool { display:grid; gap:4px; min-width:92px; }
.melody-tool label { margin:0; font-size:.7rem; color:var(--muted); font-weight:700; }
.melody-tool strong { height:38px; display:flex; align-items:center; font-variant-numeric:tabular-nums; }
.melody-tool select { height:38px; }
.velocity-tool { min-width:190px; flex:1 1 190px; }
.velocity-tool input[type="range"] { height:38px; padding:0; border:0; background:transparent; }
.velocity-tool output { margin-left:5px; color:var(--text); font-variant-numeric:tabular-nums; }
.melody-toolbar-actions { margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; }
.melody-info { display:flex; gap:10px; align-items:baseline; padding:11px 14px; margin-bottom:12px; font-size:.82rem; }
.melody-info span { color:var(--muted); }
.piano-roll-shell { overflow:hidden; padding:0; margin-bottom:12px; }
.piano-roll-header { display:grid; grid-template-columns:86px minmax(0,1fr); height:34px; border-bottom:1px solid var(--border); overflow:hidden; background:var(--panel); }
.piano-corner { display:flex; align-items:center; padding:0 10px; border-right:1px solid var(--border); color:var(--muted); font-size:.68rem; font-weight:800; letter-spacing:.08em; z-index:3; background:var(--panel); }
.melody-ruler { position:relative; height:34px; will-change:transform; }
.melody-ruler-tick { position:absolute; top:0; bottom:0; width:1px; background:var(--border); }
.melody-ruler-tick.measure { background:color-mix(in srgb,var(--text) 32%,var(--border)); }
.melody-ruler-tick span { position:absolute; top:7px; left:5px; font-size:.66rem; color:var(--muted); white-space:nowrap; }
.piano-roll-body { display:grid; grid-template-columns:86px minmax(0,1fr); max-height:620px; overflow:hidden; }
.piano-keys { overflow:hidden; will-change:transform; border-right:1px solid var(--border); background:var(--panel); }
.piano-key { width:100%; display:flex; align-items:center; justify-content:flex-end; padding:0 7px; border:0; border-bottom:1px solid var(--border); color:var(--text); font-size:.65rem; font-weight:700; cursor:pointer; user-select:none; }
.piano-key.white { background:var(--panel); }
.piano-key.black { background:var(--panel-2); color:var(--muted); }
.piano-key:hover,.piano-key:active { background:color-mix(in srgb,var(--accent) 18%,var(--panel)); color:var(--text); }
.melody-scroller { overflow:auto; position:relative; background:var(--panel-2); }
.melody-grid { position:relative; min-width:100%; background-color:var(--panel-2); background-image:repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--row-h) - 1px),color-mix(in srgb,var(--border) 75%,transparent) calc(var(--row-h) - 1px),color-mix(in srgb,var(--border) 75%,transparent) var(--row-h)),repeating-linear-gradient(to right,color-mix(in srgb,var(--border) 36%,transparent) 0,color-mix(in srgb,var(--border) 36%,transparent) 1px,transparent 1px,transparent var(--snap-w)),repeating-linear-gradient(to right,color-mix(in srgb,var(--text) 20%,transparent) 0,color-mix(in srgb,var(--text) 20%,transparent) 1px,transparent 1px,transparent var(--measure-w)); cursor:crosshair; }
.melody-notes { position:absolute; inset:0; }
.midi-note { position:absolute; min-width:10px; border:1px solid color-mix(in srgb,var(--accent) 75%,var(--border)); border-radius:5px; background:color-mix(in srgb,var(--accent) 56%,var(--panel)); overflow:hidden; cursor:grab; touch-action:none; user-select:none; box-shadow:0 1px 3px rgba(0,0,0,.2); }
.midi-note:active { cursor:grabbing; }
.midi-note.selected { border-color:#fff; box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 48%,transparent); z-index:5; }
.midi-note-label { position:absolute; left:5px; right:10px; top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.62rem; font-weight:900; color:#fff; pointer-events:none; }
.midi-note-resize { position:absolute; top:0; bottom:0; right:0; width:8px; cursor:ew-resize; background:color-mix(in srgb,#fff 13%,transparent); }
.melody-playhead { position:absolute; top:0; bottom:0; width:2px; background:#ff496c; z-index:10; pointer-events:none; }
.melody-playhead::before { content:""; position:absolute; top:0; left:-4px; width:10px; height:8px; background:#ff496c; clip-path:polygon(0 0,100% 0,50% 100%); }
.note-inspector { display:grid; grid-template-columns:minmax(180px,.8fr) minmax(0,2fr); gap:16px; align-items:center; padding:12px 14px; }
.note-inspector > div:first-child { display:grid; gap:3px; }
.note-fields { display:grid; grid-template-columns:110px 120px 120px 110px auto; gap:10px; align-items:end; }
.note-fields label { margin:0; font-size:.7rem; }
.note-fields input { height:34px; padding:0 8px; }
.note-inspector.disabled-panel { opacity:.65; }

@media (max-width:1000px) {
  .note-inspector { grid-template-columns:1fr; }
  .note-fields { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .melody-toolbar-actions { width:100%; margin-left:0; }
}
@media (max-width:700px) {
  .melody-info { align-items:flex-start; flex-direction:column; }
  .piano-roll-header,.piano-roll-body { grid-template-columns:68px minmax(0,1fr); }
  .piano-roll-body { max-height:520px; }
  .piano-key { padding-right:4px; font-size:.58rem; }
  .note-fields { grid-template-columns:1fr; }
  .melody-head .head-actions,.melody-head .head-actions .btn { width:100%; }
  .melody-head .head-actions .btn { flex:1 1 140px; }
}

/* 0.6.x – Automatik & KI-Gesang */
.auto-compose-card { display:grid; grid-template-columns:minmax(240px,1fr) minmax(320px,1.25fr); gap:18px; align-items:center; padding:18px; margin-bottom:12px; }
.auto-compose-copy h2 { margin-bottom:7px; }
.auto-compose-copy p { margin:0; color:var(--muted); line-height:1.55; }
.auto-compose-controls { display:grid; grid-template-columns:repeat(3,minmax(120px,1fr)); gap:10px; align-items:end; }
.auto-compose-controls label { margin:0; }
.auto-compose-controls .btn { grid-column:1/-1; }
.ai-workspace { display:grid; gap:16px; }
.ai-status-card { padding:16px 18px; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.ai-status-card p { margin:6px 0 0; }
.ai-state { display:inline-flex; align-items:center; gap:7px; padding:6px 9px; border-radius:999px; border:1px solid var(--border); background:var(--panel-2); font-size:.8rem; font-weight:700; }
.ai-state::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--muted); }
.ai-state[data-state="ok"]::before { background:var(--success); }
.ai-state[data-state="warn"]::before { background:#e3b341; }
.ai-state[data-state="danger"]::before { background:var(--danger); }
.ai-login { padding:18px; display:grid; grid-template-columns:minmax(220px,1fr) minmax(300px,1fr); gap:18px; align-items:center; }
.ai-login h2 { margin-bottom:6px; }
.ai-login p { margin:0; color:var(--muted); line-height:1.5; }
.ai-login-controls { display:flex; gap:10px; }
.ai-login-controls input { flex:1; }
.ai-settings-grid { margin-top:0; }
.check-row { display:flex; gap:10px; align-items:flex-start; color:var(--text); }
.check-row input { width:18px; height:18px; flex:0 0 auto; margin-top:1px; }
.ai-generate-card { padding:20px; display:grid; grid-template-columns:minmax(250px,1fr) auto; gap:14px 18px; align-items:center; }
.ai-generate-card h2 { margin-bottom:7px; }
.ai-generate-card p { margin-bottom:7px; line-height:1.55; }
.ai-progress { grid-column:1/-1; padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:var(--panel-2); color:var(--muted); min-height:42px; display:flex; align-items:center; }
.ai-generate-card #aiLastGeneration { grid-column:1/-1; }
.midi-note .midi-note-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

@media (max-width: 980px) {
  .auto-compose-card,.ai-login { grid-template-columns:1fr; }
  .ai-generate-card { grid-template-columns:1fr; }
  .ai-generate-card .btn { width:100%; }
}
@media (max-width: 680px) {
  .auto-compose-controls { grid-template-columns:1fr; }
  .ai-status-card { align-items:flex-start; flex-direction:column; }
  .ai-login-controls { flex-direction:column; }
}

/* 0.6.x – Vollautomatik mit eigener Engine */
.automation-hero { padding:20px; display:grid; grid-template-columns:minmax(260px,1fr) auto; gap:20px; align-items:center; }
.automation-hero h2 { margin:4px 0 8px; }
.automation-hero p { margin:0; color:var(--muted); line-height:1.55; max-width:820px; }
.automation-actions { display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end; }
.instrument-card { padding:18px; }
.instrument-card .panel-head { align-items:center; gap:12px; }
.instrument-groups { display:grid; gap:14px; margin-top:14px; }
.instrument-group { padding:12px; border:1px solid var(--border); border-radius:12px; background:color-mix(in srgb,var(--panel-2) 72%,transparent); }
.instrument-group h3 { margin:0 0 9px; font-size:.82rem; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
.instrument-group .instrument-grid { margin-top:0; }
.instrument-grid { display:grid; grid-template-columns:repeat(4,minmax(150px,1fr)); gap:10px; margin-top:14px; }
.instrument-chip { margin:0; min-height:44px; display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--border); background:var(--panel-2); border-radius:10px; cursor:pointer; color:var(--text); }
.instrument-chip:hover { border-color:color-mix(in srgb,var(--accent) 52%,var(--border)); }
.instrument-chip input { width:18px; height:18px; flex:0 0 auto; }
@media (max-width:1000px){ .automation-hero{grid-template-columns:1fr}.automation-actions{justify-content:flex-start}.instrument-grid{grid-template-columns:repeat(2,minmax(140px,1fr));} }
@media (max-width:620px){ .automation-actions,.automation-actions .btn{width:100%}.instrument-grid{grid-template-columns:1fr}.instrument-card .panel-head{align-items:flex-start;flex-direction:column}.instrument-card .panel-head .btn{width:100%} }

/* 0.6.2 – bessere Instrumente & automatische Begleitung */
.instrument-preview-tool { min-width:180px; }
.arrangement-card { display:grid; grid-template-columns:minmax(260px,1fr) minmax(340px,1.2fr); gap:18px; align-items:center; padding:18px; margin-bottom:12px; }
.arrangement-copy h2 { margin:4px 0 7px; }
.arrangement-copy p { margin:0; color:var(--muted); line-height:1.55; }
.arrangement-controls { display:grid; grid-template-columns:minmax(160px,.7fr) minmax(220px,1fr); gap:10px 14px; align-items:end; }
.arrangement-controls > label { margin:0; }
.arrangement-check { min-height:42px; align-items:center; padding:0 2px 2px; }
.arrangement-actions { grid-column:1/-1; display:flex; gap:10px; flex-wrap:wrap; }
.arrangement-summary { grid-column:1/-1; border-top:1px solid var(--border); padding-top:12px; }
@media (max-width:980px){.arrangement-card{grid-template-columns:1fr}.arrangement-controls{grid-template-columns:1fr 1fr}}
@media (max-width:680px){.arrangement-controls{grid-template-columns:1fr}.arrangement-actions,.arrangement-actions .btn{width:100%}.instrument-preview-tool{min-width:100%}}

/* 0.7.1 – Produktions-KI, Warteschlange, Downloads & Trainingsbibliothek */
.ai-runtime-grid { display:grid; grid-template-columns:repeat(4,minmax(150px,1fr)); gap:10px; }
.ai-runtime-item { padding:12px 14px; display:grid; gap:4px; }
.ai-runtime-item span { color:var(--muted); font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.ai-runtime-item strong { font-size:.92rem; }
.ai-progress-track { grid-column:1/-1; height:8px; border-radius:999px; overflow:hidden; background:var(--panel-2); border:1px solid var(--border); }
.ai-progress-track span { display:block; height:100%; width:0; background:linear-gradient(90deg,var(--accent),#7dd3fc); transition:width .25s ease; }
.ai-result-actions { grid-column:1/-1; display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.ai-result-actions span { margin-left:4px; }
.training-library-card { padding:18px; display:grid; gap:14px; }
.training-library-card .panel-head { align-items:flex-start; gap:12px; }
.training-library-card p { margin:0; line-height:1.55; }
.training-upload-grid { display:grid; grid-template-columns:minmax(180px,.7fr) minmax(260px,1.3fr); gap:12px; align-items:end; }
.training-upload-grid label { margin:0; }
.training-lyrics-field { grid-column:1/-1; }
.training-lyrics-field textarea { min-height:130px; }
.training-rights { margin:0; }
.training-actions { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.training-paths { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.training-paths > div { padding:11px 12px; border:1px solid var(--border); border-radius:10px; background:var(--panel-2); display:grid; gap:6px; min-width:0; }
.training-paths span { color:var(--muted); font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; }
.training-paths code { overflow-wrap:anywhere; color:var(--text); }
.training-file-list { display:grid; gap:8px; }
.training-file-row { display:flex; justify-content:space-between; gap:12px; align-items:center; padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:var(--panel-2); }
.training-file-row > div:first-child { min-width:0; display:grid; gap:3px; }
.training-file-row strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.training-file-row > div:last-child { display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.training-status-badge { padding:4px 7px; border-radius:999px; background:color-mix(in srgb,#e3b341 16%,var(--panel)); border:1px solid color-mix(in srgb,#e3b341 50%,var(--border)); color:var(--text); font-size:.66rem; font-weight:800; }
@media (max-width:900px){.ai-runtime-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.training-paths{grid-template-columns:1fr}.training-upload-grid{grid-template-columns:1fr}.training-lyrics-field{grid-column:auto}}
@media (max-width:560px){.ai-runtime-grid{grid-template-columns:1fr 1fr}.ai-result-actions,.ai-result-actions .btn,.training-actions,.training-actions .btn{width:100%}.training-file-row{align-items:flex-start;flex-direction:column}.training-file-row>div:last-child{justify-content:flex-start}.training-library-card .panel-head{flex-direction:column}.training-library-card .panel-head .btn{width:100%}}


/* 1.1.1 Lokale Datenverwaltung */
.storage-summary{display:grid;gap:8px;padding:12px 0}
.storage-row{display:flex;justify-content:space-between;gap:18px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--panel-2,#151a24)}
.storage-row span{color:var(--muted)}
.storage-row strong{text-align:right}
.local-data-actions{flex-wrap:wrap}
.local-data-actions .btn{flex:1 1 180px}
.button-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.notice.warning{margin-top:12px}
@media(max-width:640px){.storage-row{align-items:flex-start;flex-direction:column;gap:4px}.local-data-actions .btn{flex-basis:100%}}
.compact-notice{margin:0 0 12px 0;padding:10px 12px}.notice.success{border-color:color-mix(in srgb,#2fcf83 55%,var(--border));background:color-mix(in srgb,#2fcf83 10%,var(--panel))}.notice.danger{border-color:color-mix(in srgb,#ff496c 60%,var(--border));background:color-mix(in srgb,#ff496c 10%,var(--panel))}


/* SongWerk 1.4.0: übersichtliche Projektverwaltung */
.projects-overview-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin:18px 0 14px}
.projects-overview-head h2{margin:0 0 4px;font-size:1.2rem;display:flex;align-items:center;gap:8px}
.count-badge{display:inline-flex;min-width:28px;height:24px;align-items:center;justify-content:center;padding:0 8px;border-radius:999px;background:var(--panel-2,#222630);border:1px solid var(--border);font-size:.78rem;color:var(--muted)}
.project-search-wrap{min-width:min(360px,100%)}
.project-actions-main{margin-top:14px;padding-top:12px;border-top:1px solid var(--border);display:flex;gap:8px;flex-wrap:wrap}
.small-btn{min-height:36px;padding:7px 12px}
.danger-mini{border-color:color-mix(in srgb,#d9534f 45%,var(--border));color:#ffb4b1}
.recovery-panel{margin-top:22px;padding:0;overflow:hidden}
.recovery-panel>summary{cursor:pointer;padding:15px 18px;font-weight:800;list-style:none;display:flex;align-items:center;justify-content:space-between}
.recovery-panel>summary::-webkit-details-marker{display:none}
.recovery-panel>summary::after{content:'▾';color:var(--muted)}
.recovery-panel[open]>summary::after{content:'▴'}
.recovery-panel>p{padding:0 18px;margin:0 0 10px}
.recovery-tools-grid{display:grid;gap:10px;padding:0 18px 18px}
.recovery-tool{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;padding:14px;border:1px solid var(--border);border-radius:12px;background:color-mix(in srgb,var(--panel) 82%,transparent)}
.recovery-tool p{margin:4px 0 0;color:var(--muted);font-size:.84rem;line-height:1.45}
.rescue-project-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin-bottom:14px}
.rescue-project-card{padding:16px;border:1px solid color-mix(in srgb,var(--warning,#e0a600) 45%,var(--border));border-radius:14px;background:color-mix(in srgb,var(--panel) 92%,#e0a600 8%)}
.rescue-project-title{font-size:1.05rem;font-weight:800;margin-bottom:5px}
.rescue-project-meta{font-size:.82rem;color:var(--muted);margin-bottom:12px}
.rescue-project-actions{display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:720px){.projects-overview-head{align-items:stretch;flex-direction:column}.project-search-wrap{min-width:0;width:100%}.recovery-tool{grid-template-columns:1fr}.recovery-tool .btn{width:100%}.project-actions-main .btn,.project-actions-main .mini-btn{flex:1 1 calc(50% - 8px)}}

/* SongWerk 2.0 – verbundener Arbeitsablauf */
.song-flow-bar{position:sticky;top:calc(var(--topbar-h) + 8px);z-index:14;display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 18px;padding:12px 14px;border:1px solid var(--border);border-radius:14px;background:color-mix(in srgb,var(--panel) 94%,transparent);box-shadow:var(--shadow);backdrop-filter:blur(10px)}
.song-flow-copy{display:grid;gap:3px;min-width:180px}.song-flow-copy span{color:var(--muted);font-size:.78rem}.song-flow-steps{display:flex;gap:7px;overflow-x:auto;padding:2px}.song-flow-steps button{display:flex;align-items:center;gap:6px;white-space:nowrap;border:1px solid var(--border);border-radius:999px;background:var(--panel-2);color:var(--muted);padding:7px 10px;cursor:pointer;font-weight:750}.song-flow-steps button span{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--bg);font-size:.7rem}.song-flow-steps button.active{border-color:var(--accent);color:var(--text);background:color-mix(in srgb,var(--accent) 13%,var(--panel-2))}.song-flow-steps button.active span{background:var(--accent);color:#fff}
.workflow-action-card,.melody-bridge-card,.local-acceleration-card{padding:18px;margin-top:16px}.workflow-action-card,.local-acceleration-card{display:grid;gap:14px}.workflow-action-card h2,.melody-bridge-card h2,.local-acceleration-card h2{margin:.15rem 0 .45rem}.workflow-action-card p,.melody-bridge-card p,.local-acceleration-card p{margin:.25rem 0;color:var(--muted)}.workflow-action-buttons,.melody-bridge-actions{display:flex;gap:9px;flex-wrap:wrap}.action-status{padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--panel-2);color:var(--muted);font-size:.82rem}.action-status[data-state="success"]{border-color:color-mix(in srgb,#35b779 55%,var(--border));color:#7edca9}.action-status[data-state="error"]{border-color:color-mix(in srgb,var(--danger) 55%,var(--border));color:var(--danger)}.action-status[data-state="working"]{border-color:color-mix(in srgb,var(--accent) 55%,var(--border));color:var(--text)}
.melody-bridge-card{display:grid;gap:13px}.device-badge{border:1px solid var(--border);border-radius:999px;padding:6px 9px;color:var(--muted);font-size:.72rem;white-space:nowrap}.melody-bridge-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.melody-bridge-stats span{padding:10px;border:1px solid var(--border);border-radius:10px;background:var(--panel-2);font-size:.78rem;font-weight:750;text-align:center}
.local-acceleration-card{grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr)}.local-acceleration-card>p{grid-column:1/-1}.local-acceleration-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.local-acceleration-grid>div{display:grid;gap:5px;padding:11px;border:1px solid var(--border);border-radius:10px;background:var(--panel-2)}.local-acceleration-grid span{color:var(--muted);font-size:.7rem}.local-acceleration-grid strong{font-size:.86rem}.emphasis-check{padding:10px;border:1px solid color-mix(in srgb,var(--accent) 45%,var(--border));border-radius:10px;background:color-mix(in srgb,var(--accent) 7%,var(--panel-2))}
.ai-progress-panel{display:grid;gap:8px;padding:14px;border:1px solid var(--border);border-radius:12px;background:var(--panel-2)}.ai-progress-phase{font-weight:850;color:var(--text)}.ai-progress-track span.decode-active{animation:songwerkDecodePulse 1.4s ease-in-out infinite}@keyframes songwerkDecodePulse{0%,100%{opacity:.65}50%{opacity:1}}
@media(max-width:900px){.song-flow-bar{position:relative;top:auto;align-items:flex-start;flex-direction:column}.song-flow-steps{width:100%}.local-acceleration-card{grid-template-columns:1fr}.local-acceleration-card>p{grid-column:auto}.melody-bridge-stats{grid-template-columns:1fr 1fr}.device-badge{white-space:normal}}
@media(max-width:560px){.workflow-action-buttons,.melody-bridge-actions{display:grid;grid-template-columns:1fr}.workflow-action-buttons .btn,.melody-bridge-actions .btn{width:100%}.melody-bridge-stats,.local-acceleration-grid{grid-template-columns:1fr}.song-flow-steps button{font-size:.75rem}}


/* 2.3.1 · Text-Assistent */
.lyric-assistant-card{grid-column:1/-1;padding:18px;overflow:hidden}
.lyric-assistant-grid{display:grid;grid-template-columns:minmax(280px,2fr) repeat(4,minmax(150px,1fr));gap:12px;align-items:end;margin-top:14px}
.lyric-assistant-grid label{display:grid;gap:6px}
.lyric-assistant-keywords{grid-row:span 1}
.lyric-assistant-keywords textarea{min-height:92px;resize:vertical}
.lyric-assistant-preview{min-height:260px;resize:vertical;margin-top:6px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;line-height:1.6}
.lyric-assistant-actions{margin-bottom:12px}
@media(max-width:1180px){.lyric-assistant-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.lyric-assistant-keywords{grid-column:1/-1}}
@media(max-width:680px){.lyric-assistant-grid{grid-template-columns:1fr}.lyric-assistant-keywords{grid-column:auto}.lyric-assistant-actions .btn{width:100%}}


/* SONGWERK_STYLE_TAXONOMY_V13_CSS */

.ai-style-traits-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  margin-top:.4rem;
}

.ai-style-traits-head span{
  font-size:.78rem;
  opacity:.72;
  font-weight:400;
}

.ai-style-traits{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  margin:.4rem 0 .3rem;
}

.ai-style-trait{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.4rem .55rem;
  border:1px solid rgba(127,127,127,.30);
  border-radius:.55rem;
  cursor:pointer;
  font-size:.84rem;
  line-height:1.15;
  user-select:none;
}

.ai-style-trait input{
  margin:0;
  flex:0 0 auto;
}

.ai-analysis-normalized{
  margin-top:.4rem;
  font-size:.82rem;
  line-height:1.4;
  opacity:.9;
}

.ai-analysis-normalized strong{
  font-weight:650;
}


/* SONGWERK_STYLE_SELECT_DISPLAY_FIX_V1
   Neue Stil-Auswahl exakt auf Formularbreite bringen.
   Ausschließlich Darstellung - keine Funktionslogik.
*/

#view-ai .form-card > #aiDirection,
#view-ai .form-card > #aiStyle {
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    align-self:stretch !important;
}

#view-ai .form-card > label[for="aiDirection"],
#view-ai .form-card > label[for="aiStyle"] {
    display:block !important;
    width:100% !important;
    box-sizing:border-box !important;
}

#view-ai #aiStyleTraits {
    width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
}

#view-ai .ai-style-traits-head,
#view-ai #aiStyleTraitsHint {
    width:100% !important;
    box-sizing:border-box !important;
}


/* =========================================================
   SONGWERK_STYLE_UI_FIX_V2
   Hauptrichtung und Unterstil jeweils echte volle Formularzeile
   ========================================================= */

#view-ai .form-card > .ai-style-field,
#view-ai .form-card > .ai-style-traits-block {
    grid-column:1 / -1 !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    box-sizing:border-box !important;
}

#view-ai .ai-style-field {
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:6px !important;
}

#view-ai .ai-style-field > label {
    display:block !important;
    width:100% !important;
    margin:0 !important;
}

#view-ai .ai-style-field > select {
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    box-sizing:border-box !important;
    align-self:stretch !important;
}

#view-ai .ai-style-traits-block {
    display:block !important;
}

#view-ai .ai-style-traits-head {
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    width:100% !important;
    margin-top:8px !important;
    margin-bottom:6px !important;
}

#view-ai #aiStyleTraits {
    display:flex !important;
    flex-wrap:wrap !important;
    width:100% !important;
    min-width:0 !important;
}

#view-ai #aiStyleTraitsHint {
    display:block !important;
    width:100% !important;
    margin-top:4px !important;
}


/* SONGWERK_STYLE_FIELDS_V31 */
#view-ai .ai-style-field {
  display:flex;
  flex-direction:column;
  gap:7px;
  width:100%;
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
}
#view-ai .ai-style-field > label {
  display:block;
  width:100%;
}
#view-ai .ai-style-field > select {
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  align-self:stretch !important;
}