/* STEEP STUDIO v1.6 — production-grade workspace system, layered on existing editable DAW */
:root {--bg:#080c12;--sidebar:#0c121b;--panel:#131d28;--panel2:#192534;--border:#283748;--border2:#3a4c5d;--text:#edf2f7;--muted:#98a9bc;--accent:#edb66c;--accent2:#c58b4f;--green:#63cdb3;--purple:#b1a0f4;--radius:10px}
body {background:#080c12;color:var(--text);font-size:12px}
.shell{grid-template-columns:218px minmax(0,1fr)}
.sidebar{z-index:6;background:#0c131e;padding:17px 12px;gap:11px;border-right:1px solid #2d4051;box-shadow:6px 0 30px #0002}
.brand{padding-bottom:15px;margin-bottom:5px}.brand-glyph{font-size:37px;color:#eab879}.brand-text strong{font-size:15px;font-weight:870}.brand-text small{color:#778aa1;font-size:8px}
.sidebar .sidehead{margin-top:4px;padding-top:8px;font-size:9px;letter-spacing:2.4px;color:#73869c}
.side-nav{gap:3px}.side-nav a{padding:11px 10px;font-size:11px;font-weight:680;border-radius:7px;border:1px solid transparent}.side-nav a.active{background:linear-gradient(90deg,#273b4a,#17232f)!important;color:#fff;border-color:#6b6251!important;box-shadow:inset 3px 0 #e8b475}.side-nav a:hover{border-color:#52677d;background:#172634;transform:none}
.sidebar-foot{margin-top:auto;border-top:1px solid #2b3948;padding:15px 5px 0;color:#93a9b9}.sidebar-foot p{font-size:10px;line-height:1.5}.side-actions{gap:2px}.side-actions button{font-size:10px;min-height:31px;padding:8px 9px;border:1px solid #273745;background:#14202c;border-radius:5px}.side-actions button:hover{border-color:#bc9161;background:#263140}
.topbar{height:55px;min-height:55px;background:#0d141f;border-bottom:1px solid #344356;padding:8px 23px;position:sticky;top:0;z-index:5}.breadcrumbs{font-size:10px;color:#8c9eaf;letter-spacing:1.1px}.topright .export-btn{background:#d6a363;color:#151819;border-radius:5px;font-size:11px}
.workspace{display:flex;flex-direction:column;max-width:none;min-width:0;padding:19px 21px 38px;gap:0}
.hero,.production-bar,.workspace-tabs,.console-summary,.console-actions{display:none!important}
.pro-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 13px;order:0;min-width:0}
.pro-kicker{font-size:9px;color:#eac38e;letter-spacing:1.9px;font-weight:850;display:flex;align-items:center;gap:9px}.pro-release{background:#263849;color:#b5cada;border:1px solid #456078;border-radius:4px;padding:2px 7px;letter-spacing:.7px}.pro-live-dot{width:8px;height:8px;background:#62d8bb;border-radius:50%;box-shadow:0 0 12px #62d8bb88}
.pro-head h1{font-size:30px;line-height:1.12;font-weight:850;letter-spacing:-1.2px;margin:8px 0 4px}.pro-head h1 span{color:#879fb2;font-weight:520}.pro-head p{font-size:11px;color:#8498ab;margin:0}
.pro-head-right{display:flex;align-items:center;gap:16px}.pro-metrics{display:flex;gap:5px}.pro-metrics .hero-stats{position:static;display:flex;gap:5px;margin:0}.pro-metrics .hero-stats>div{background:#151f2c;border:1px solid #35475a;border-radius:7px;padding:7px 13px;min-width:83px}.pro-metrics small{color:#8fa5b7;font-size:8px;letter-spacing:1.1px;display:block}.pro-metrics strong{font-size:19px;color:#f5d0a0;font-variant-numeric:tabular-nums}
.pro-head-actions{display:flex;flex-direction:column;gap:5px}.pro-head-actions button{white-space:nowrap;background:#172332;color:#e2ebf3;border:1px solid #374d61;border-radius:5px;padding:7px 9px;font-size:10px;font-weight:680}.pro-head-actions button:hover{border-color:#d9a56c}.pro-command-button kbd{font-size:8px;margin-left:8px;border:1px solid #526073;padding:1px 3px;color:#adbfcc}
.pro-toolbar{display:flex;gap:7px;align-items:center;flex-wrap:wrap;background:#121e2b;border:1px solid #32465a;border-radius:8px;padding:7px;margin-bottom:9px;order:1}
.pro-toolbar-label{font-size:9px;color:#97a9bc;letter-spacing:1.3px;font-weight:800;margin:0 7px}.pro-modes{display:flex;gap:4px;flex-wrap:wrap}.pro-modes button,.pro-toolbar>button{font-size:10px;font-weight:750;padding:9px 12px;border-radius:5px;border:1px solid transparent;background:#1d2b39;color:#b3c6d7}.pro-modes button.active{color:#f7d29d;border-color:#9c7650;background:#3a2e25}.pro-modes button:hover,.pro-toolbar>button:hover{border-color:#bd9b75}.pro-toolbar-gap{flex:1}.pro-toolbar .pro-action-import{background:#253c4d;color:#e5f7ff;border-color:#5b8291}.pro-toolbar .pro-action-render{background:#e6b275;color:#161d24;border-color:#e6b275}
.transport-card{order:2;margin:0 0 9px;min-height:68px;padding:10px 14px;background:#192737;border:1px solid #3f576a;border-radius:8px;box-shadow:0 5px 15px #0003}.transport-play{border-radius:6px}.digital-time{font-size:24px;font-variant-numeric:tabular-nums}
.creative-console{order:3;display:block;margin:0 0 9px}.creative-console .spectral-module{min-height:auto;height:124px;display:grid;grid-template-rows:18px minmax(0,1fr) 15px;position:relative;padding:10px 13px!important;background:#111e2c!important;border:1px solid #365268!important;border-radius:8px}.spectral-module .spectrum-top{font-size:9px}.spectral-module #masterSpectrum{height:78px;margin-top:1px}.spectral-module .spectrum-foot{font-size:8px;padding:0}
.overview-panel{order:4;margin:0 0 9px;padding:10px 12px;background:#111d29;border-radius:8px}.overview-head{margin:0 0 5px}.overview-panel #arrangementOverview{height:64px}.overview-axis{padding-top:3px}
.arranger-toolbar{order:5;margin:0 0 9px;padding:8px 10px;min-height:49px;flex-wrap:wrap;border-radius:7px;background:#172536}
.studio-grid{order:6;grid-template-columns:minmax(0,1fr) 355px!important;gap:10px;align-items:start}
.studio-grid .primary{display:flex;flex-direction:column;min-width:0;gap:9px}.studio-grid .tools{display:flex!important;flex-direction:column;min-width:0;gap:8px;position:sticky;top:65px;max-height:calc(100vh - 76px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;border:1px solid #384e61;border-radius:9px;background:#0d1823;padding:8px}
.tools .panel{margin:0;box-shadow:none;border-radius:7px}.tools .panel[hidden]{display:none!important}
.pro-rack-head{background:linear-gradient(100deg,#192c3c,#101e2b);padding:10px 11px;display:flex;align-items:center;justify-content:space-between;border-radius:5px;border:1px solid #335065}.pro-rack-head strong{font-size:15px;display:block;letter-spacing:-.4px}.pro-rack-kicker{color:#dbb681;font-size:8px;letter-spacing:1.8px;display:block;margin:0 0 3px}.pro-rack-local{font-size:9px;color:#70dcc0;border:1px solid #416759;padding:5px 7px;border-radius:3px;white-space:nowrap}
.pro-rack-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}.pro-rack-tabs button{min-width:0;background:#172537;color:#9cb4c9;border:1px solid #344c60;border-radius:5px;font-size:9.5px;padding:9px 3px;font-weight:760}.pro-rack-tabs button.active{color:#ffdfb5;border-color:#c28f53;background:#493728}.pro-rack-tabs button:hover{border-color:#a1adbc}.pro-rack-tabs button:focus-visible{outline-color:#f5c68a}
.timeline-panel{padding:12px;background:#131e2b;border:1px solid #405b6e;border-radius:8px}.timeline-panel .panel-top h2{font-size:19px}.timeline-panel .head-actions{gap:4px}.timeline-panel .head-actions button{font-size:10px;padding:7px}.timeline-help{background:#192d3c;border-left-color:#5eafd2;color:#b4c3ce;font-size:10px}.timeline-frame{border-color:#375168;min-height:340px;max-height:calc(100vh - 250px);overflow-y:auto;background:#0d1622}.ruler{background:#1a2c3d}.lane{background:#101d2a}.lane:nth-child(even){background:#142433}.clip{border-radius:5px}.clip.selected{outline:2px solid #efb66b}
.timeline-foot{color:#8ea2b6}.timeline-foot button{background:#23394c}
.panel-top h2{font-size:16px}.panel{border-color:#304658;background:#162230;border-radius:8px}.files-panel,.mixer-panel,.export-panel,.producer-panel,.inspector-panel{border-top:2px solid #7398ad}.producer-panel{border-top-color:#ddb17b}.mixer-panel{border-top-color:#73d6cb}.export-panel{border-top-color:#d1ad79}.beat-panel{border-top:2px solid #a996dc}
.beat-panel{margin-top:0;max-width:none}.beat-panel[hidden]{display:none!important}.panel .panel-top{gap:12px}.asset-list{max-height:230px;overflow:auto}.inspector-fields{grid-template-columns:repeat(2,minmax(0,1fr))}.tools .producer-panel .producer-report{max-height:410px;overflow-y:auto}
footer{order:7;margin-top:20px;border-top:1px solid #293c4d;color:#70879c}
/* Rich interface but honest semantics: no decorative fake meters; original spectrum is drawn by AudioContext */
.pro-command-dialog{width:min(610px,calc(100% - 28px));max-height:min(75vh,680px);border:1px solid #566c80;background:#101b29;color:#eef3f9;border-radius:12px;padding:0;box-shadow:0 28px 100px #000b;overflow:hidden}.pro-command-dialog::backdrop{background:#02060bd9;backdrop-filter:blur(5px)}
.pro-command-search{display:flex;align-items:center;gap:12px;padding:18px;border-bottom:1px solid #30465b}.pro-command-search>span{font-size:25px;color:#e7b476}.pro-command-search input{width:100%;flex:1;border:0;outline:0;background:none;font-size:16px;color:white}.pro-command-search button{flex-shrink:0;background:#233447;color:#b1bfd2;border:1px solid #39556c;border-radius:5px;padding:7px;font-size:10px}
.pro-command-results{max-height:420px;overflow-y:auto;padding:8px}.pro-command-item{display:flex;justify-content:space-between;align-items:center;width:100%;padding:13px 13px;color:#e1ebf3;background:transparent;border:1px solid transparent;border-radius:6px;text-align:left}.pro-command-item small{color:#8499ad}.pro-command-item:hover,.pro-command-item.selected{background:#233749;border-color:#bb905a}.pro-command-empty{padding:19px;color:#8299aa}.pro-command-foot{padding:11px 16px;color:#91a7b9;font-size:10px;display:flex;justify-content:space-between;background:#172533;border-top:1px solid #385066}
@media(min-width:1600px){.studio-grid{grid-template-columns:minmax(0,1fr) 385px!important}.sidebar{padding:18px}.shell{grid-template-columns:232px minmax(0,1fr)}.workspace{padding:20px 28px}.timeline-frame{min-height:425px}}
@media(max-width:1250px){.studio-grid{grid-template-columns:minmax(0,1fr) 315px!important}.workspace{padding:14px}.pro-head-right{gap:8px}.pro-head p{display:none}.pro-metrics .hero-stats>div{padding:6px 8px;min-width:66px}}
@media(max-width:1050px){.studio-grid{grid-template-columns:minmax(0,1fr)!important}.studio-grid .tools{position:relative;top:auto;max-height:none;overflow:visible}.pro-head{flex-wrap:wrap}.pro-head-right{width:100%;justify-content:space-between}.pro-head-actions{flex-direction:row}}
@media(max-width:860px){.shell{display:block}.sidebar{position:relative;width:100%;height:auto;padding:9px 11px;gap:6px}.sidebar .brand{padding:0 5px 7px}.sidebar .side-nav{display:flex;gap:5px;overflow-x:auto}.sidebar .side-nav a{white-space:nowrap;padding:9px;font-size:10px}.sidebar .sidehead,.sidebar-foot{display:none}.sidebar .side-actions{display:none}.topbar{position:static;min-height:49px;padding:8px 12px}.workspace{padding:10px}.pro-head{margin-bottom:9px}.pro-head h1{font-size:26px}.pro-metrics .hero-stats{gap:4px}.pro-metrics strong{font-size:16px}.pro-toolbar{padding:6px}.pro-toolbar-label{display:none}.pro-modes{width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}.pro-modes button{font-size:9px;padding:9px 4px}.pro-toolbar-gap{display:none}.pro-toolbar>button{flex:1}.timeline-frame{min-height:275px;max-height:450px}.creative-console .spectral-module{height:116px}.spectral-module #masterSpectrum{height:70px}}
@media(max-width:520px){.breadcrumbs{display:none}.pro-head h1{font-size:24px}.pro-head-right{display:grid;grid-template-columns:1fr}.pro-metrics .hero-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.pro-metrics .hero-stats>div{min-width:0}.pro-head-actions{display:grid;grid-template-columns:1fr 1fr}.pro-head-actions button{white-space:normal;font-size:10px}.pro-command-button kbd{display:none}.transport-card{padding:9px;min-height:auto}.pro-rack-tabs{grid-template-columns:repeat(4,minmax(0,1fr))}.arranger-toolbar{gap:6px}.overview-head>div{flex-wrap:wrap}.overview-panel #arrangementOverview{height:57px}.creative-console .spectral-module{height:103px}.spectral-module #masterSpectrum{height:58px}}
@media(prefers-reduced-motion:reduce){.pro-command-dialog::backdrop{backdrop-filter:none}}
/* Arrange-first workflow: a professional editor opens on the clips, not on a presentation dashboard. */
.arranger-toolbar{order:3}
.studio-grid{order:4}
.creative-console{order:5;margin-top:12px}
.overview-panel{order:6}
footer{order:7}

@media(max-width:400px){html,body{max-width:100%;overflow-x:clip}}