.dml_daw_page .ma_pc_inner { padding: 0; }
#dml-daw-root { background: radial-gradient(circle at top right,#272746 0,#121217 42%,#0f1014 100%); color: #e6e6e6; border: 1px solid #2b2e43; border-radius: 14px; overflow: hidden; min-height: 85vh; box-shadow: 0 22px 50px rgba(0,0,0,.5); }
.dml-daw-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: linear-gradient(90deg,#1d1f2d,#1b1d26); border-bottom: 1px solid #33374d; }
.dml-daw-title-wrap h2 { margin: 0; font-size: 22px; font-weight: 800; color: #53d8ff; letter-spacing: .3px; }
.dml-daw-title-wrap p { margin: 3px 0 0; font-size: 12px; color: #aeb7d5; }
.dml-daw-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-neon { padding: 8px 12px; background: rgba(83,216,255,.06); border: 1px solid #53d8ff; color: #53d8ff; border-radius: 8px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .45px; transition: all .2s ease; }
.btn-neon:hover { background: #53d8ff; color: #12131a; box-shadow: 0 0 18px rgba(83,216,255,.48); }
.btn-gold { border-color: #ffcf59; color: #ffcf59; background: rgba(255,207,89,.06); }
.btn-gold:hover { background: #ffcf59; color: #171717; box-shadow: 0 0 18px rgba(255,207,89,.45); }
.dml-daw-transport { display: grid; grid-template-columns: repeat(5, minmax(120px,1fr)); gap: 10px; padding: 10px 14px; background: #171925; border-bottom: 1px solid #2b2f45; }
.dml-transport-group label { display: block; font-size: 11px; color: #9ca8cf; margin-bottom: 4px; font-weight: 700; text-transform: uppercase; }
.dml-transport-group input[type=number], .dml-transport-group input[type=text], .dml-daw-panel input[type=text], .dml-daw-panel textarea, .dml-daw-panel select { width: 100%; background: #10131e; border: 1px solid #323651; color: #ecf0ff; border-radius: 6px; padding: 7px 8px; font-size: 12px; }
.dml-transport-group input[type=range], .dml-daw-panel input[type=range] { width: 100%; }
.dml-transport-switches { display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.dml-transport-switches label { margin: 0; font-size: 12px; text-transform: none; font-weight: 600; }
.dml-daw-main { display: grid; grid-template-columns: minmax(260px,22vw) 1fr minmax(260px,21vw); min-height: 66vh; }
.dml-daw-sidebar, .dml-daw-right { border-right: 1px solid #2d3147; background: #161925; padding: 12px; display: flex; flex-direction: column; gap: 10px; overflow: auto; min-height: 0; }
.dml-daw-right { border-right: 0; border-left: 1px solid #2d3147; }
.dml-daw-center { display: flex; flex-direction: column; background: #11131c; min-width: 0; }
.dml-workspace-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-bottom: 1px solid #2f3450; background: linear-gradient(180deg,#141a2b,#101522); }
.dml-workspace-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.dml-workspace-tabs .btn-neon { padding: 6px 10px; font-size: 10px; }
.dml-workspace-tabs .btn-neon.is-active { background: #53d8ff; color: #12131a; box-shadow: 0 0 16px rgba(83,216,255,.35); }
.dml-transport-readout { display: flex; flex-direction: column; text-align: right; min-width: 145px; }
.dml-transport-readout strong { color: #f8fbff; font-size: 16px; line-height: 1; letter-spacing: .4px; }
.dml-transport-readout span { color: #93a4dd; font-size: 11px; margin-top: 2px; }
.dml-daw-panel { padding: 11px; background: #1a1e2d; border: 1px solid #2f3450; border-radius: 10px; }
.dml-daw-panel h3 { margin: 0 0 8px; font-size: 13px; color: #60ffb6; text-transform: uppercase; letter-spacing: .35px; font-weight: 800; }
.dml-daw-panel label { display: block; font-size: 11px; color: #b6c0e8; margin-top: 6px; margin-bottom: 4px; font-weight: 700; }
.dml-daw-timeline-wrap { flex: 1; display: flex; flex-direction: column; padding: 12px; background: #11131c; }
.dml-daw-timeline { position: relative; flex: 1; border: 1px solid #303650; border-radius: 10px; padding: 8px; background-color: #191d2d; background-image: linear-gradient(to right, rgba(84,214,255,.09) 1px, transparent 1px); background-size: 100px 100%; overflow: auto; }
#playhead { position: absolute; top: 0; bottom: 0; width: 2px; left: 0; background: #ff4fe1; box-shadow: 0 0 12px rgba(255,79,225,.8); z-index: 20; pointer-events: none; }
#tracks-container { position: relative; min-height: 100%; }
.dml-track-row { position: relative; height: 116px; background: rgba(255,255,255,.02); border: 1px solid #31395a; border-radius: 8px; margin-bottom: 10px; }
.dml-track-label { position: absolute; left: 10px; top: 8px; width: 190px; }
.dml-track-name { width: 100%; background: #14192a; border: 1px solid #364266; border-radius: 5px; color: #53d8ff; font-size: 11px; padding: 3px 6px; font-weight: 800; }
.dml-track-controls { position: absolute; left: 10px; top: 30px; display: flex; align-items: center; gap: 4px; }
.dml-track-controls button { border: 1px solid #3a3f5f; background: #171c2d; color: #c8d4ff; border-radius: 4px; font-size: 10px; padding: 2px 5px; }
.dml-track-controls button.is-on { background: #53d8ff; color: #111; border-color: #53d8ff; }
.dml-track-volume { position: absolute; left: 10px; bottom: 8px; width: 78px; }
.dml-track-pan { position: absolute; left: 92px; bottom: 8px; width: 66px; }
.dml-track-channel { position: absolute; left: 186px; top: 32px; width: 106px; background: #13192b; border: 1px solid #3a476f; color: #d8e4ff; border-radius: 5px; padding: 3px 6px; font-size: 10px; font-weight: 700; }
.dml-track-hp { position: absolute; left: 166px; top: 62px; width: 56px; }
.dml-track-lp { position: absolute; left: 226px; top: 62px; width: 56px; }
.dml-track-send-a { position: absolute; left: 286px; top: 62px; width: 52px; }
.dml-track-send-b { position: absolute; left: 342px; top: 62px; width: 52px; }
.dml-track-trim { position: absolute; left: 166px; bottom: 8px; width: 108px; }
.dml-track-comp-threshold { position: absolute; left: 278px; bottom: 8px; width: 102px; }
.dml-track-comp-ratio { position: absolute; left: 384px; bottom: 8px; width: 74px; }
.dml-track-color { position: absolute; left: 462px; bottom: 11px; width: 22px; height: 22px; border: 0; padding: 0; background: transparent; }
.dml-track-clip { position: absolute; top: 8px; height: 60px; min-width: 120px; border-radius: 6px; border: 1px solid rgba(96,255,182,.65); background: linear-gradient(120deg, rgba(96,255,182,.3), rgba(83,216,255,.25)); cursor: move; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; font-size: 11px; color: #f8f8f8; font-weight: 700; }
.dml-pack { border: 1px solid #353b59; background: #151a2b; border-radius: 7px; margin-bottom: 8px; padding: 8px; }
.dml-pack h4 { margin: 0 0 6px; font-size: 11px; color: #ffcf59; font-weight: 800; }
.dml-pack button { display: inline-block; margin: 2px 4px 2px 0; padding: 3px 7px; font-size: 10px; border: 1px solid #53d8ff; background: transparent; color: #53d8ff; border-radius: 4px; font-weight: 700; }
.dml-pack button:hover { background: #53d8ff; color: #12131a; }
.dml-pack-browser-tools { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin-bottom: 8px; }
.dml-pack-browser-tools input,
.dml-pack-browser-tools select { background: #0f1321; border: 1px solid #394769; color: #d7e8ff; border-radius: 6px; font-size: 11px; padding: 6px 8px; font-weight: 700; width: 100%; }
#daw-pack-count { margin: 0 0 8px; }
.dml-pack-head { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-bottom: 6px; }
.dml-pack-head button { margin: 0; padding: 3px 8px; }
.dml-pack-files { min-height: 22px; }
.dml-pack-note { color: #8fa3dc; font-size: 10px; font-weight: 700; }
.dml-daw-help { margin: 8px 2px 0; color: #a9b2d8; font-size: 11px; }
.dml-daw-status { padding: 10px 14px; background: #171a26; border-top: 1px solid #2d3147; font-size: 12px; color: #d7deff; font-weight: 600; }
.dml-sequencer-wrap { border-top: 1px solid #2f3450; padding: 10px 12px; background: #121622; }
.dml-sequencer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dml-sequencer-head h3 { margin: 0; font-size: 13px; color: #ffcf59; text-transform: uppercase; font-weight: 800; letter-spacing: .3px; }
.dml-piano-wrap { border-top: 1px solid #2f3450; padding: 10px 12px; background: #101624; }
.dml-piano-head-actions { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.dml-piano-head-actions select { background: #0f1321; border: 1px solid #394769; color: #d7e8ff; border-radius: 6px; font-size: 11px; padding: 6px 8px; min-width: 120px; font-weight: 700; }
.dml-inline-range { display: inline-flex; align-items: center; gap: 6px; background: #0f1321; border: 1px solid #394769; border-radius: 6px; padding: 5px 8px; color: #d7e8ff; font-size: 11px; font-weight: 700; }
.dml-inline-range span { color: #9fb1e8; font-size: 10px; text-transform: uppercase; letter-spacing: .3px; }
.dml-inline-range input[type=range] { width: 90px; margin: 0; }
.dml-inline-range input[type=number] { width: 62px; margin: 0; background: #0c1220; border: 1px solid #3b4a72; color: #e8f2ff; border-radius: 5px; padding: 4px 6px; font-size: 11px; font-weight: 700; }
.dml-key-detect { background: rgba(83,216,255,.12); border: 1px solid rgba(83,216,255,.45); color: #c8f5ff; font-size: 11px; font-weight: 800; border-radius: 6px; padding: 6px 8px; min-width: 110px; text-align: center; }
#daw-piano-roll { border: 1px solid #33415f; border-radius: 8px; overflow: auto; background: #111629; max-height: min(45vh,460px); resize: vertical; min-height: 220px; position: relative; }
.dml-piano-grid { display: grid; grid-template-columns: 56px repeat(var(--daw-piano-steps, 32), var(--daw-piano-cell, 20px)); width: max-content; min-width: 100%; }
.dml-piano-note-label { padding: 4px 6px; font-size: 10px; font-weight: 700; color: #9db3ef; border-right: 1px solid #2f3a59; border-bottom: 1px solid #25314f; display: flex; align-items: center; justify-content: space-between; background: #151d31; }
.dml-piano-note-label.is-in-key { background: #13253d; color: #caf8ff; }
.dml-piano-note-label.is-root-key { background: #1c3156; color: #ffe690; }
.dml-piano-cell { height: 20px; border-right: 1px solid rgba(60,76,112,.4); border-bottom: 1px solid rgba(48,62,95,.55); background: rgba(26,35,59,.55); cursor: crosshair; transition: background .15s ease; }
.dml-piano-cell:nth-child(8n+1) { border-left: 1px solid rgba(76,96,140,.4); }
.dml-piano-cell.is-black-key { background: rgba(16,24,42,.78); }
.dml-piano-cell.is-active { background: linear-gradient(160deg, rgba(255,79,225,.92), rgba(83,216,255,.82)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.dml-piano-cell.is-sustain { background: linear-gradient(160deg, rgba(164,96,255,.55), rgba(83,216,255,.52)); }
.dml-piano-cell.is-note-start { box-shadow: inset 0 0 0 1px rgba(255,255,255,.62); }
.dml-piano-cell.is-selected { box-shadow: inset 0 0 0 1px rgba(255,207,89,.96), 0 0 8px rgba(255,207,89,.42); filter: saturate(1.12); }
.dml-piano-cell:hover { background: rgba(83,216,255,.3); }
.dml-piano-marquee { position: absolute; border: 1px dashed rgba(255,207,89,.95); background: rgba(255,207,89,.16); pointer-events: none; z-index: 15; }
.dml-piano-velocity-wrap { margin-top: 10px; border: 1px solid #32405f; border-radius: 8px; background: #0f1424; overflow: hidden; }
.dml-piano-velocity-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px; border-bottom: 1px solid #2e3a58; }
.dml-piano-velocity-head strong { color: #b9c7ef; font-size: 10px; text-transform: uppercase; letter-spacing: .35px; }
#daw-piano-velocity { width: 100%; height: 92px; display: block; background: #10182b; cursor: crosshair; }
#daw-automation-canvas { width: 100%; background: #111627; border: 1px solid #303756; border-radius: 8px; height: 120px; display: block; cursor: crosshair; }
.dml-automation-wrap { border-top: 1px solid #2f3450; padding: 10px 12px 12px; background: #111622; }
#daw-sequencer { display: grid; gap: 5px; }
.dml-seq-row { display: grid; grid-template-columns: 70px repeat(16, 1fr); gap: 4px; align-items: center; }
.dml-seq-label { color: #c9d2f7; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.dml-step { width: 100%; aspect-ratio: 1/1; border: 1px solid #39405f; background: #1a1f33; border-radius: 4px; }
.dml-step.active { background: #60ffb6; border-color: #60ffb6; box-shadow: 0 0 10px rgba(96,255,182,.55); }
.dml-step.playing { outline: 1px solid #ff4fe1; }
.dml-export-actions { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 8px; }
.dml-monitor-row { display: flex; justify-content: space-between; align-items: center; margin: 6px 0; color: #adb9e8; font-size: 12px; }
.dml-monitor-row strong { color: #ecf0ff; }
#daw-visualizer { width: 100%; height: 94px; display: block; margin: 0 0 8px; border: 1px solid #33425f; border-radius: 8px; background: linear-gradient(180deg,#0f1424,#0d111d); }
#daw-cpu-hint { color: #ffe89c; }
.dml_daw_page #dml-daw-root[data-workspace="mixer"] .dml-sequencer-wrap,
.dml_daw_page #dml-daw-root[data-workspace="mixer"] .dml-piano-wrap,
.dml_daw_page #dml-daw-root[data-workspace="mixer"] .dml-automation-wrap { display: none; }
.dml_daw_page #dml-daw-root[data-workspace="piano"] .dml-sequencer-wrap,
.dml_daw_page #dml-daw-root[data-workspace="piano"] .dml-automation-wrap,
.dml_daw_page #dml-daw-root[data-workspace="piano"] .dml-daw-timeline-wrap { display: none; }
.dml_daw_page #dml-daw-root[data-workspace="browser"] .dml-sequencer-wrap,
.dml_daw_page #dml-daw-root[data-workspace="browser"] .dml-piano-wrap,
.dml_daw_page #dml-daw-root[data-workspace="browser"] .dml-automation-wrap { display: none; }
.dml_daw_page #dml-daw-root[data-workspace="browser"] .dml-daw-timeline-wrap { flex: 1; }
.dml-daw-home-widget { margin: 0 0 20px; border: 1px solid #36406b; border-radius: 14px; background: radial-gradient(circle at top left,rgba(83,216,255,.2),rgba(14,17,30,.92) 58%); box-shadow: 0 16px 38px rgba(0,0,0,.25); overflow: hidden; }
.dml-daw-home-inner { padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.dml-daw-home-title { margin: 0; color: #ebf6ff; font-size: 23px; font-weight: 800; letter-spacing: .2px; }
.dml-daw-home-text { margin: 5px 0 0; color: #b8c7ee; font-size: 13px; }
.dml-daw-home-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dml_daw_page #dml-daw-root.is-piano-focus .dml-daw-sidebar,
.dml_daw_page #dml-daw-root.is-piano-focus .dml-daw-right,
.dml_daw_page #dml-daw-root.is-piano-focus .dml-daw-timeline-wrap,
.dml_daw_page #dml-daw-root.is-piano-focus .dml-sequencer-wrap,
.dml_daw_page #dml-daw-root.is-piano-focus .dml-automation-wrap { display: none; }
.dml_daw_page #dml-daw-root.is-piano-focus .dml-daw-main { grid-template-columns: 1fr; }
.dml_daw_page #dml-daw-root.is-piano-focus .dml-piano-wrap { border-top: 0; min-height: 76vh; display: flex; flex-direction: column; }
.dml_daw_page #dml-daw-root.is-piano-focus #daw-piano-roll { flex: 1; max-height: none; min-height: 68vh; }
@media (max-width: 1400px) { .dml-daw-main { grid-template-columns: 280px 1fr; } .dml-daw-right { grid-column: 1 / -1; border-left: 0; border-top: 1px solid #2d3147; display: grid; grid-template-columns: 1fr 1fr; } }
@media (max-width: 1000px) { .dml-daw-main { grid-template-columns: 1fr; } .dml-daw-sidebar, .dml-daw-right { border: 0; border-top: 1px solid #2d3147; } .dml-daw-transport { grid-template-columns: 1fr 1fr; } }