/* MIDILAB 6 — modern DAW-inspired studio, intentional restraint. */
:root{color-scheme:dark;--accent:#a69aff;--accent-strong:#b8afff;--surface:#171920;--surface2:#20232d;--muted:#8f96a7;--line:#303440;--white:#f3f4f7}
body.v4-studio{background:#101115;color:#e9eaf1;font-family:Inter,'Segoe UI',Arial,sans-serif;letter-spacing:-.012em}
body.v4-studio:before{height:520px;background:radial-gradient(ellipse at 65% 0%,#5150742d,transparent 65%)}
body.v4-studio .app{max-width:1750px;padding:0 36px}
.v4-studio .site-header{height:70px;border-color:#282b35}
.v4-studio .site-brand{font-weight:820;font-size:24px;letter-spacing:-.055em}
.v4-studio .brand-symbol{background:#b8afff;color:#16141f;border-radius:10px;box-shadow:none}
.v4-studio .brand-symbol span,.v4-studio .brand-period{color:#7c6be4}
.v4-studio .site-links a{font-weight:620;font-size:12px;color:#a2a4af}
.v4-studio .site-links .current{border-color:#b6aafd;color:white}
.v4-studio .site-action{background:#272935;color:#eff0fa;border:1px solid #414356;border-radius:8px;font-weight:700;letter-spacing:.005em;box-shadow:none}
.v4-studio .site-action:hover{background:#343748;border-color:#8c81dc}
.v4-studio .studio-intro{min-height:0;padding:35px 5px 28px;display:flex;align-items:end;justify-content:space-between;gap:20px}
.v4-studio .studio-intro h1{font:750 clamp(36px,4.1vw,58px)/1 Inter,'Segoe UI',sans-serif;letter-spacing:-.065em;color:#f1f2f8;margin:11px 0 10px}
.v4-studio .studio-intro h1 .hero-sup{font-size:.32em;color:#85879a;letter-spacing:.025em;vertical-align:top;margin-left:10px;font-weight:600}
.v4-studio .studio-intro p{font-size:13px;line-height:1.6;color:#a8aab8;margin:0;max-width:720px}
.v4-studio .pretitle{color:#afa7ed;font-size:10px;letter-spacing:.17em}
.v4-studio .pretitle i{background:#9e93ec}
.v4-studio .studio-intro-meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:9px;letter-spacing:.12em;color:#7e8295;font-weight:750;white-space:nowrap;padding-bottom:4px}
.v4-studio .studio-intro-meta .meta-signal{width:7px;height:7px;border-radius:50%;background:#9bcbb8;box-shadow:0 0 0 3px #9bcbb826}
.v4-studio .meta-line{width:1px;height:12px;background:#3b3f4b;margin:0 5px}
.v4-studio .studio-window{background:#15171d;border:1px solid #343742;border-radius:14px;box-shadow:0 30px 75px #0006,0 1px 0 #ffffff0a;overflow:hidden}
.v4-studio .window-topbar{height:48px;background:#191b22;border-bottom:1px solid #343743;padding:0 22px}
.v4-studio .window-title{font-size:10px;letter-spacing:.11em;font-weight:800;gap:10px;color:#b6b8c6}
.v4-studio .session-icon{color:#b6aafd;font-size:16px}
.v4-studio .window-version{background:#262934;border-color:#393d4a;color:#8d92a7;font-size:9px;letter-spacing:.08em;padding:3px 7px;border-radius:6px}
.v4-studio .window-help{border:1px solid #3c4050;color:#b7bacd;border-radius:7px;width:25px;height:25px}
.v4-studio .saved-indicator{font-size:10px;color:#8b94a6}
.v4-studio .studio-layout{grid-template-columns:264px minmax(0,1fr)}
.v4-studio .control-panel{background:#1a1c24;padding:22px 19px;border-right:1px solid #333641}
.v4-studio .panel-title{margin-bottom:22px;gap:11px}
.v4-studio .panel-title-icon{background:#a9a3ff12;color:#a9a3ff;border:1px solid #a9a3ff30;width:37px;height:37px;border-radius:10px;font-size:22px}
.v4-studio .panel-title h2{font-size:16px;color:#f2f3fa;font-weight:760}
.v4-studio .panel-title div>span{letter-spacing:.09em;font-size:9px;color:#85899f}
.v4-studio .panel-group{padding-bottom:18px;margin-bottom:17px;border-color:#303440}
.v4-studio .field-title{color:#858a9e;font-size:9px;letter-spacing:.11em;margin-bottom:9px}
.v4-studio .genre-grid{gap:6px;grid-template-columns:repeat(3,minmax(0,1fr))}
.v4-studio .genre{background:#222530;border:1px solid #373a49;color:#a6aabb;padding:9px 3px;border-radius:7px;font-size:11px;transition:background .15s,border-color .15s,color .15s}
.v4-studio .genre.active{background:#a69aff1b;border-color:#8b83d4;color:#dfdbff;box-shadow:none}
.v4-studio .genre:hover{background:#303341;color:white;border-color:#79748b}
.v4-studio .form-select,.v4-studio .tiny-select,.v4-studio .drum-select{background-color:#252832;border:1px solid #404454;color:#d6d9e6;border-radius:7px;font-size:11px;min-height:37px;box-shadow:none}
.v4-studio .form-select{padding-left:10px}
.v4-studio .form-select:focus,.v4-studio .tiny-select:focus{border-color:#a69aff}
.v4-studio .range-value{color:#e7e3ff;font-size:15px}
.v4-studio .custom-range{background:#45445d;accent-color:#ada5fb}
.v4-studio .custom-range::-webkit-slider-thumb{background:#a69aff;border:2px solid #d8d2ff;box-shadow:0 0 0 4px #afa4ff12}
.v4-studio .range-limits,.v4-studio .register-hint{color:#7f8495}
.v4-studio .switch-name{color:#d9dae5}
.v4-studio .switch-desc{color:#7f8294}
.v4-studio .switch-ui{background:#3a3e4a}
.v4-studio .switch-row input:checked+.switch-ui{background:#8177dd}
.v4-studio .generate-button{background:#aaa0ff;color:#181521;border-radius:8px;box-shadow:none;font-size:13px;min-height:48px;letter-spacing:-.01em;font-weight:800}
.v4-studio .generate-button:hover{background:#c2baff;filter:none;transform:translateY(-1px)}
.v4-studio .generate-arrow{color:#2d254c}
.v4-studio .random-preset{color:#9194a7;font-size:10px}
.v4-studio .workspace{min-width:0;background:#171920;padding-bottom:15px}
.v4-studio .project-head{background:#171920;padding:20px 24px 15px}
.v4-studio .project-eyebrow{color:#777e92;font-size:9px;letter-spacing:.11em}
.v4-studio .project-eyebrow span:last-child{color:#a69aff}
.v4-studio .project-title-block input{color:#f0f0fa;font-size:25px;font-weight:730;letter-spacing:-.045em}
.v4-studio .project-subline{color:#9195a7;font-size:11px}
.v4-studio .light-button{background:#252833;border:1px solid #3d414e;color:#b9becc;border-radius:7px;font-size:10px;padding:9px 11px}
.v4-studio .light-button:hover{background:#343847;color:#fff;border-color:#62677b}
.v4-studio .transport{margin:0 24px 10px;background:#20232d;border:1px solid #373b49;border-radius:11px;padding:9px 13px}
.v4-studio .play-button{background:#a79efc;color:#211e36;box-shadow:none;border-radius:8px;width:42px;height:42px}
.v4-studio .play-button:hover{background:#c3baff}
.v4-studio .transport-plain,.v4-studio .checkbox-small,.v4-studio .volume-wrap{color:#a4a9b8}
.v4-studio .transport-bpm b,.v4-studio .transport-position b{color:#f0f1fc}
.v4-studio .transport-bpm small,.v4-studio .transport-position small{color:#7d8295}
.v4-studio .transport-sep{background:#404453}
.v4-studio .checkbox-small input,.v4-studio .volume-wrap input{accent-color:#a69aff}
.v4-studio .tracks{border-color:#393c49;margin:0 24px;padding-top:13px}
.v4-studio .track-tab{color:#8990a3;font-weight:710}
.v4-studio .track-tab.active{color:#f2f0ff;border-color:#a8a0fe}
.v4-studio .track-tab:hover{color:#d5d0fc}
.v4-studio .melody-dot{background:#a9a3fc}
.v4-studio .chords-dot{background:#74c5ae}
.v4-studio .bass-dot{background:#edb38d}
.v4-studio .count-bubble{background:#2b2f3a;color:#9b9eaf}
.v4-studio .track-mode{color:#808597;font-size:9px}
.v4-studio .track-mode-line{background:#444857}
.v4-studio .edit-toolbar.pro-toolbar{margin:0 24px;background:#1d2029;border:1px solid #363946;border-radius:10px 10px 0 0;border-bottom:0;padding:9px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.v4-studio .tool-left,.v4-studio .tool-right{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.v4-studio .toolbar-label,.v4-studio .step-size-label{font-size:9px;letter-spacing:.09em;color:#81869a;font-weight:790}
.v4-studio .tool-group{background:#14161d;border:1px solid #343846;border-radius:8px;display:flex;align-items:center;padding:2px;gap:2px}
.v4-studio .tool-toggle{padding:9px 10px;border-radius:6px;color:#a3a8bc;background:transparent;border:1px solid transparent;font-size:11px;font-weight:680;white-space:nowrap}
.v4-studio .tool-toggle.active{background:#3c3855;border-color:#665e9a;color:#e4deff}
.v4-studio .tool-toggle:not(.active):hover{background:#282b36;color:#e8e9f3}
.v4-studio .tool-toggle .tool-icon{font-size:14px;vertical-align:-1px;margin-right:3px}
.v4-studio .tool-divider{width:1px;height:20px;background:#3c4050;margin:0 3px}
.v4-studio .tiny-select{width:auto;min-width:64px;min-height:34px;padding:7px 23px 7px 9px}
.v4-studio .selected-count{color:#8b90a6;font-size:10px;white-space:nowrap}
.v4-studio .tool-plain{color:#a2a6b9;background:transparent;border:1px solid transparent;padding:8px 7px;font-size:10px;border-radius:6px}
.v4-studio .tool-plain:hover{background:#2f3341;color:white}
.v4-studio .zoom-button{height:31px;width:30px;border:1px solid #424555;color:#d6d5e2;background:#282b38;border-radius:6px;font-size:15px}
.v4-studio .zoom-button:hover{background:#3b3e50}
.v4-studio .zoom-label{font-size:10px;color:#aaaec0;min-width:37px;text-align:center;font-variant-numeric:tabular-nums}
.v4-studio .roll-outer{margin:0 24px;border-radius:0 0 10px 10px;border:1px solid #363a48;box-shadow:none;background:#171920;overflow:hidden}
.v4-studio .piano-scroll{height:470px;scrollbar-color:#5e6077 #181b24;scrollbar-width:thin}
.v4-studio .piano-keyboard{background:#222632}
.v4-studio .piano-key{background:#303442;color:#aaafbf;border-color:#424859}
.v4-studio .piano-key.black{background:#20232c;color:#727a8c}
.v4-studio .piano-key.c{color:#e4dfff}
.v4-studio .piano-footer{margin:8px 24px 23px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;color:#969cae;font-size:10px}
.v4-studio .shortcut-badge{background:#242834;color:#c7bedf;border:1px solid #383d50;font-size:8px;border-radius:4px}
.v4-studio #noteInfo{color:#c3bcff;font-weight:680}
.v4-studio .harmony-card{margin:0 24px 22px;background:#20232d;border:1px solid #353a49;box-shadow:none;border-radius:10px}
.v4-studio .harmony-heading strong{color:#b0b4c4}
.v4-studio .harmony-icon{color:#a8a0fc}
.v4-studio #progressionName{color:#a6a2bd}
.v4-studio .chord-pill{background:#2b2e3d;border:1px solid #3b3e55;color:#d5d0ff;border-radius:6px}
.v4-studio .drum-studio{margin:0 24px 20px;background:#1c1e26;border:1px solid #383b47;border-radius:11px;padding:18px;box-shadow:none}
.v4-studio .mini-overline{color:#8f91ad;font-size:10px}
.v4-studio .drum-head h3{color:#eff0f8;font:760 22px Inter,'Segoe UI',sans-serif;margin:5px 0}
.v4-studio .drum-head h3 em{font-style:normal;color:#f0f0f8}
.v4-studio .drum-head p{color:#979bac;font-size:11px;margin:0}
.v4-studio .drum-regenerate{background:#303448;border:1px solid #4f5272;color:#d5d1ff;border-radius:7px;padding:10px 14px;font-size:11px}
.v4-studio .drum-regenerate:hover{background:#44465e}
.v4-studio .drum-enable{color:#aeb1c1}
.v4-studio .bar-tab.active{color:#e8e2ff;background:#373551;border-color:#7772aa}
.v4-studio .drum-surface{background:#181b23;border:1px solid #343847;border-radius:8px}
.v4-studio .drum-grid-heading{color:#858a9e}
.v4-studio .drum-lane{border-color:#2d303b}
.v4-studio .drum-lane-name strong{color:#d0d3e0}
.v4-studio .drum-audition{background:#303244;color:#bdc1ec;border-radius:7px}
.v4-studio .drum-upload{background:#302c39;color:#c5b2dc;border-color:#50475b;border-radius:7px}
.v4-studio .drum-select{background-color:#252836;color:#bdc2d1;border-color:#3c4151;border-radius:7px}
.v4-studio .drum-bottom{color:#9195a4}
.v4-studio .export-panel{background:#202330;border:1px solid #43435e;margin:0 24px 12px;padding:16px 18px;border-radius:11px}
.v4-studio .export-icon{background:#a69aff!important;color:#231d39!important;border-radius:7px}
.v4-studio .export-panel-copy strong{color:#f0eef8;font-size:13px}
.v4-studio .export-panel-copy div span{color:#a4a6ba;font-size:11px}
.v4-studio .export-button{background:#a59df5;border:1px solid #a59df5;color:#181626;border-radius:7px;font-size:11px;box-shadow:none}
.v4-studio .export-button:hover{background:#c6c0ff;transform:translateY(-1px)}
.v4-studio .export-button>span{color:#59517e}
.v4-studio .export-note{color:#9297a9;margin:0 24px 17px;font-size:10px}
.v4-studio .pro-end-cta{margin:34px 0 50px;border:1px solid #303440;background:#191b23;padding:22px 28px;display:flex;align-items:center;justify-content:space-between;border-radius:11px;color:#a8adbe}
.v4-studio .pro-end-cta>span{font-size:10px;letter-spacing:.12em;font-weight:700}
.v4-studio .pro-end-cta>a{padding:11px 15px;background:#2c2d3d;border:1px solid #434359;color:#e8e7fc;border-radius:7px;font-weight:710;font-size:12px}
.v4-studio .pro-end-cta>a:hover{background:#403e5a}
.v4-studio .site-footer{border-color:#30333e;color:#8f94a5}
.v4-studio .site-footer>a:last-child{color:#a9a1f9}
.v4-studio .modal{background:#1b1e27;border:1px solid #414455;color:#e9e9f5}
.v4-studio .modal-header h2{color:#fff}
.v4-studio .modal-desc,.v4-studio .modal-eyebrow{color:#a4a7bb}
.v4-studio .saved-row{background:#262936;border-color:#3d4254}
.v4-studio .saved-row small{color:#9199a8}
.v4-studio .toast{background:#2c2c43;border:1px solid #6a629d;color:#f0edff}
.v4-studio *:focus-visible{outline:2px solid #b1a8ff;outline-offset:2px}
@media(max-width:1440px){.v4-studio .edit-toolbar.pro-toolbar{flex-wrap:wrap}.v4-studio .tool-right{width:100%;justify-content:flex-end}}
@media(max-width:1150px){body.v4-studio .app{padding:0 22px}.v4-studio .studio-layout{grid-template-columns:236px minmax(0,1fr)}.v4-studio .control-panel{padding:18px 13px}.v4-studio .drum-studio{padding:14px}}
@media(max-width:980px){.v4-studio .studio-layout{display:block}.v4-studio .control-panel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 20px;padding:18px 20px;border-right:0;border-bottom:1px solid #333641}.v4-studio .panel-title{grid-column:1/-1}.v4-studio .panel-group{margin:0;padding:0 0 14px}.v4-studio .switches,.v4-studio .generator-bottom{align-self:center}.v4-studio .tool-right{width:auto}.v4-studio .studio-intro-meta{display:none}}
@media(max-width:720px){body.v4-studio .app{padding:0 12px}.v4-studio .site-header{height:65px}.v4-studio .studio-intro{padding:23px 2px 22px}.v4-studio .studio-intro h1{font-size:42px}.v4-studio .studio-intro p{font-size:12px}.v4-studio .studio-window{border-radius:10px}.v4-studio .window-topbar{padding:0 11px}.v4-studio .control-panel{grid-template-columns:1fr 1fr;padding:14px;gap:11px}.v4-studio .panel-group:first-of-type,.v4-studio .switches,.v4-studio .generator-bottom{grid-column:1/-1}.v4-studio .project-head{padding:16px 12px}.v4-studio .project-title-block input{font-size:19px}.v4-studio .transport,.v4-studio .tracks,.v4-studio .edit-toolbar.pro-toolbar,.v4-studio .roll-outer,.v4-studio .harmony-card,.v4-studio .export-panel,.v4-studio .drum-studio{margin-left:10px;margin-right:10px}.v4-studio .tool-group{flex-wrap:wrap}.v4-studio .edit-toolbar.pro-toolbar{padding:8px}.v4-studio .tool-left{gap:5px}.v4-studio .tool-toggle{padding:8px 7px;font-size:10px}.v4-studio .tool-left .toolbar-label{display:none}.v4-studio .tool-right{width:100%;justify-content:flex-end}.v4-studio .tool-right #selectAllBtn{display:none}.v4-studio .piano-footer{margin:9px 11px 20px;font-size:9px}.v4-studio .piano-scroll{height:400px}.v4-studio .export-actions{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.v4-studio .export-button{min-width:0;padding:11px 3px}.v4-studio .pro-end-cta{margin:24px 0 35px;padding:16px;flex-wrap:wrap;gap:14px}}
@media(max-width:430px){.v4-studio .control-panel{grid-template-columns:1fr 1fr;gap:13px}.v4-studio .panel-title,.v4-studio .panel-group:first-of-type,.v4-studio .switches,.v4-studio .generator-bottom{grid-column:1/-1}.v4-studio .panel-group.mood-group{margin:0}.v4-studio .tool-left .tool-divider{display:none}.v4-studio .tool-right{gap:4px}.v4-studio .selected-count{display:none}.v4-studio .step-size-label{font-size:8px}.v4-studio .drum-head{gap:14px}}
@media(prefers-reduced-motion:reduce){.v4-studio *{animation:none!important;transition:none!important}}

.v4-studio .drum-step{background:#282b38;border-color:#3a3f4c;box-shadow:none}
.v4-studio .drum-step:nth-child(4n+1){background:#313444;border-left:2px solid #5b5e72}
.v4-studio .drum-step:hover{border-color:#a8a1f8;background:#38384e}
.v4-studio .drum-step.hit{background:#9892e8;border-color:#a99ef9;box-shadow:inset 0 -3px #746acc}
.v4-studio .drum-step.accent{background:#eab78f;border-color:#f5c69f;box-shadow:inset 0 -3px #bf8c6f}
.v4-studio .drum-step.playing:after{border-color:#edeaff}
.v4-studio .bar-tab.active{background:#383550;color:#eee9ff;border-color:#7770b4}
.v4-studio .pattern-bar .bar-tab:not(.active){background:#252836;color:#a4a6bb;border-color:#41445a}
.v4-studio .project-title-block input:focus{background:#252838;border-color:#8a82e5}
.v4-studio .mood-group{background:#242435;border:1px solid #3c3b59}
.v4-studio .mood-group .field-title{color:#a9a4cf}