:root{--bg:#05080f;--panel:#0b111c;--panel2:#101827;--panel3:#141f31;--line:#1d2a3e;--text:#f6f8fb;--muted:#8d9bb0;--accent:#31e6b0;--accent2:#6b7cff;--danger:#ff617c;--warn:#ffca68;--shadow:0 24px 80px rgba(0,0,0,.38)}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font:13px/1.4 Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}body{overflow:hidden;background:radial-gradient(circle at 50% -12%,#172541 0,#070b12 34%,#05080f 70%)}button,input,select,textarea{font:inherit}button{color:inherit}.topbar{height:62px;display:grid;grid-template-columns:250px minmax(180px,1fr) auto;gap:16px;align-items:center;padding:0 14px;background:rgba(5,8,15,.93);border-bottom:1px solid var(--line);backdrop-filter:blur(18px);position:relative;z-index:10}.brand{display:flex;align-items:center;gap:10px}.mark{width:35px;height:35px;border-radius:11px;background:linear-gradient(135deg,var(--accent),var(--accent2));display:grid;place-items:center;color:#04100d;font-weight:1000}.brand strong,.brand span{display:block}.brand strong{letter-spacing:.8px}.brand span{font-size:9px;letter-spacing:2px;color:var(--muted)}.project-name{justify-self:center;width:min(420px,90%);background:transparent;border:1px solid transparent;color:var(--text);text-align:center;font-size:15px;font-weight:800;padding:8px 10px;border-radius:9px}.project-name:focus{outline:none;background:var(--panel);border-color:var(--line)}.top-actions{display:flex;gap:7px}.ghost,.primary,.accent,.danger,.icon-btn{border-radius:9px;padding:8px 11px;border:1px solid var(--line);background:#111a29;cursor:pointer}.primary{background:linear-gradient(135deg,var(--accent),#24bda9);border:0;color:#04110e;font-weight:900}.accent{background:linear-gradient(135deg,var(--accent2),#8a6dff);border:0;font-weight:900}.danger{background:#31131e;border-color:#5a2132;color:#ff9caf}.icon-btn{width:34px;height:34px;padding:0;display:grid;place-items:center}.app-shell{height:calc(100vh - 284px);min-height:390px;display:grid;grid-template-columns:72px 280px minmax(380px,1fr) 300px}.toolrail{background:#080d15;border-right:1px solid var(--line);padding:8px 6px;display:flex;flex-direction:column;gap:4px}.tool{height:56px;border:0;border-radius:11px;background:transparent;color:var(--muted);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}.tool span{font-size:18px;font-weight:900}.tool small{font-size:9px}.tool:hover,.tool.active{background:#111a29;color:var(--text)}.tool.active{box-shadow:inset 3px 0 var(--accent)}.panel{background:rgba(11,17,28,.93);padding:13px;overflow:auto}.left-panel{border-right:1px solid var(--line)}.right-panel{border-left:1px solid var(--line)}.pane{display:none}.pane.active{display:block}.pane-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px}.pane-head b,.pane-head span{display:block}.pane-head b{font-size:15px}.pane-head span{font-size:11px;color:var(--muted);margin-top:2px}.pane label,.right-panel label{display:grid;gap:5px;margin:9px 0;color:var(--muted)}input,select,textarea{width:100%;padding:9px 10px;background:#070d16;color:var(--text);border:1px solid var(--line);border-radius:8px;outline:none}input:focus,select:focus,textarea:focus{border-color:#3e5b80}.two{display:grid;grid-template-columns:1fr 1fr;gap:8px}.three{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.full{width:100%;margin:7px 0}.dropzone{border:1px dashed #355071!important;background:#0a1320;padding:18px 12px!important;text-align:center;border-radius:12px;cursor:pointer;color:#d4deec!important}.dropzone.drag{border-color:var(--accent)!important;background:#0d201c}.dropzone small{color:var(--muted)}.library-head{display:flex;justify-content:space-between;margin:14px 2px 8px;color:var(--muted)}.asset-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.asset{border:1px solid var(--line);background:#09111c;border-radius:10px;overflow:hidden;cursor:pointer}.asset-preview{aspect-ratio:1.35;background:#111a28;display:grid;place-items:center;color:var(--muted);overflow:hidden}.asset-preview img{width:100%;height:100%;object-fit:cover}.asset-meta{padding:7px}.asset-meta b,.asset-meta small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.asset-meta small{color:var(--muted);font-size:10px}.asset .asset-actions{display:grid;grid-template-columns:1fr auto;gap:4px;padding:0 7px 7px}.asset button{padding:5px;border-radius:6px;border:1px solid var(--line);background:#121d2d;cursor:pointer}.layer-list{display:grid;gap:7px;margin-top:12px}.layer-item{display:grid;grid-template-columns:1fr auto;gap:8px;padding:9px;border:1px solid var(--line);border-radius:9px;background:#09111c;cursor:pointer}.layer-item.selected{border-color:var(--accent)}.layer-item small{display:block;color:var(--muted)}.layer-item button{border:0;background:transparent;color:var(--danger);cursor:pointer}.audio-card{padding:12px;border:1px solid var(--line);border-radius:10px;background:#09111c}.audio-card.empty{color:var(--muted)}.template-card{width:100%;text-align:left;border:1px solid var(--line);background:#09111c;color:var(--text);padding:12px;border-radius:11px;margin:6px 0;cursor:pointer}.template-card:hover{border-color:#355071}.template-card b,.template-card span{display:block}.template-card span{color:var(--muted);font-size:11px;margin-top:4px}.hint{font-size:11px;color:var(--muted)}.editor{min-width:0;display:flex;flex-direction:column;background:radial-gradient(circle at center,#111a2b 0,#080d15 63%)}.editor-toolbar{height:46px;display:flex;align-items:center;gap:12px;padding:6px 12px;border-bottom:1px solid var(--line);background:#080d15}.toolbar-group{display:flex;align-items:center;gap:6px}.toolbar-group span{color:var(--muted);font-size:11px}.toolbar-group select{width:auto;padding:6px 28px 6px 8px}.status{margin-left:auto;color:var(--muted)}.stage-wrap{flex:1;min-height:0;display:grid;place-items:center;overflow:auto;padding:12px}.stage{height:min(100%,650px);max-width:90%;background:#010306;border:1px solid #263953;border-radius:12px;box-shadow:var(--shadow);overflow:hidden;display:grid;place-items:center}.stage canvas{display:block;max-width:100%;max-height:100%;background:#000}.transport{height:54px;border-top:1px solid var(--line);display:grid;grid-template-columns:auto auto auto auto minmax(120px,1fr);align-items:center;gap:9px;padding:8px 12px;background:#080d15}.play{width:38px;height:38px;border:0;border-radius:50%;background:white;color:#071018;font-weight:1000;cursor:pointer}input[type=range]{accent-color:var(--accent)}.empty-inspector{padding:22px 10px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:10px}.subhead{font-size:12px}.inspector-actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px;margin-top:12px}.right-panel hr{border:0;border-top:1px solid var(--line);margin:16px 0}.project-metrics{display:grid;grid-template-columns:1fr 1fr;gap:7px}.project-metrics div{padding:9px;background:#080e18;border:1px solid var(--line);border-radius:9px}.project-metrics span,.project-metrics b{display:block}.project-metrics span{font-size:10px;color:var(--muted)}.timeline-shell{height:222px;background:#070b12;border-top:1px solid var(--line);position:relative}.timeline-toolbar{height:44px;display:flex;justify-content:space-between;align-items:center;padding:6px 12px;border-bottom:1px solid var(--line)}.timeline-toolbar b,.timeline-toolbar span{display:block}.timeline-toolbar span{font-size:10px;color:var(--muted)}.timeline-controls{display:flex;align-items:center;gap:6px}.timeline-controls input{width:120px;padding:0}.timeline-scroll{height:178px;overflow:auto;position:relative;padding-top:24px}.timeline-ruler{height:24px;position:absolute;left:64px;top:0;right:0;border-bottom:1px solid var(--line);background:linear-gradient(90deg,transparent 0);min-width:800px}.ruler-mark{position:absolute;top:0;height:24px;border-left:1px solid #28384f;color:#728197;font-size:9px;padding-left:4px}.track-row{display:grid;grid-template-columns:64px minmax(800px,1fr);min-height:45px;border-bottom:1px solid #111b29}.track-label{position:sticky;left:0;z-index:3;background:#080d15;display:grid;place-items:center;color:#607087;font-size:9px;border-right:1px solid var(--line)}.track{position:relative;min-height:45px;background:repeating-linear-gradient(90deg,#080d15 0,#080d15 49px,#0b111c 50px);overflow:visible}.timeline-clip{position:absolute;top:4px;height:37px;border:1px solid #36516f;border-radius:7px;background:linear-gradient(135deg,#172a40,#102136);overflow:hidden;cursor:pointer;padding:5px 7px;min-width:24px}.timeline-clip.selected{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}.timeline-clip b,.timeline-clip small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.timeline-clip b{font-size:10px}.timeline-clip small{font-size:8px;color:#96a8bd}.transition-tag{position:absolute;right:3px;bottom:2px;font-size:8px;color:var(--accent)}.timeline-text{position:absolute;top:7px;height:31px;border-radius:6px;background:#302250;border:1px solid #694fa0;padding:5px 7px;cursor:pointer;overflow:hidden}.timeline-text.selected{border-color:#c7aaff}.timeline-audio{position:absolute;top:7px;height:31px;border-radius:6px;background:#153626;border:1px solid #2d7b54;padding:5px 7px;overflow:hidden}.playhead{position:absolute;top:24px;bottom:0;width:2px;background:#ff5f7c;left:64px;z-index:9;pointer-events:none}.playhead:before{content:'';position:absolute;top:-1px;left:-5px;border-left:6px solid transparent;border-right:6px solid transparent;border-top:8px solid #ff5f7c}dialog{width:min(680px,94vw);border:1px solid var(--line);background:#0c1320;color:var(--text);border-radius:16px;padding:18px;box-shadow:var(--shadow)}dialog::backdrop{background:#000a;backdrop-filter:blur(4px)}.dialog-head{display:flex;justify-content:space-between;align-items:start;margin-bottom:14px}.dialog-head b,.dialog-head span{display:block}.dialog-head b{font-size:18px}.dialog-head span{color:var(--muted);font-size:11px}.dialog-grid,.export-options{display:grid;grid-template-columns:1fr 1fr;gap:9px}.dialog-grid label,.export-options label{display:grid;gap:5px;color:var(--muted)}.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}progress{width:100%;height:15px;accent-color:var(--accent);margin-top:12px}@media(max-width:1180px){.app-shell{grid-template-columns:64px 250px minmax(340px,1fr)}.right-panel{display:none}.topbar{grid-template-columns:210px 1fr auto}}@media(max-width:820px){body{overflow:auto}.topbar{height:auto;grid-template-columns:1fr;padding:9px}.brand{display:none}.project-name{order:1}.top-actions{order:2;overflow:auto}.app-shell{height:auto;min-height:0;grid-template-columns:1fr}.toolrail{position:sticky;top:0;z-index:8;flex-direction:row;overflow:auto;border-right:0;border-bottom:1px solid var(--line)}.tool{min-width:66px;height:48px}.left-panel{border-right:0;min-height:260px}.editor{min-height:620px;order:-1}.stage-wrap{height:500px}.timeline-shell{height:240px}.timeline-scroll{height:196px}.dialog-grid,.export-options{grid-template-columns:1fr}.two,.three{grid-template-columns:1fr}.asset-grid{grid-template-columns:repeat(3,minmax(90px,1fr))}}

/* V2.1 UX / visibility patch */
@media(min-width:821px){
  body{height:100vh;overflow:hidden;display:grid;grid-template-rows:72px minmax(0,1fr) 230px}
  .topbar{height:72px;min-height:72px}
  .app-shell{height:auto;min-height:0}
  .timeline-shell{height:auto;min-height:0}
  .timeline-scroll{height:calc(100% - 44px)}
  .panel{min-height:0}
}
.topbar{padding:10px 16px;background:#050911;border-bottom:1px solid #23324a;box-shadow:0 8px 24px #0005;z-index:20}
.brand .mark{width:46px;height:46px;border-radius:13px;font-size:17px}.brand strong{font-size:16px;letter-spacing:.5px}.brand span{font-size:10px;letter-spacing:2px}
.project-name{font-size:16px;background:#0c1421;border:1px solid #263a56;padding:10px 14px;max-width:360px}
.top-actions{align-items:center;gap:9px;overflow-x:auto;padding:2px}.top-btn{min-height:44px;border-radius:12px;padding:0 15px;border:1px solid #31445f;background:#111b2a;color:#f8fbff;font-weight:800;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;cursor:pointer;box-shadow:0 4px 12px #0003;transition:transform .12s ease,border-color .12s ease,filter .12s ease}.top-btn:hover{transform:translateY(-1px);border-color:#5a79a3;filter:brightness(1.08)}.top-btn.secondary{background:#101a29}.top-btn.save{background:#123027;border-color:#276b58;color:#aaffdf}.top-btn.accent{background:linear-gradient(135deg,#695cff,#986eff);border:0;color:white}.top-btn.primary{background:linear-gradient(135deg,#36e4b8,#25cda8);border:0;color:#03120f}.btn-icon{font-size:17px;line-height:1}
.save-state{min-width:92px;display:flex;align-items:center;gap:7px;color:#92a5bd;font-size:11px;white-space:nowrap}.save-dot{width:8px;height:8px;border-radius:50%;background:#38d9ad;box-shadow:0 0 0 3px #38d9ad20}.save-state.saving .save-dot{background:#ffd166;box-shadow:0 0 0 3px #ffd16620}.save-state.error .save-dot{background:#ff627d}
.toolrail{padding-top:12px;gap:7px}.tool{height:68px;border:1px solid transparent}.tool span{font-size:22px}.tool small{font-size:11px;font-weight:700}.tool:hover,.tool.active{border-color:#263b58;background:#111c2d}.tool.active{box-shadow:inset 4px 0 #31e6b0,0 5px 14px #0002}
.left-panel,.right-panel{padding:18px 16px}.pane-head{position:sticky;top:-18px;z-index:3;background:linear-gradient(#0b111c 82%,transparent);padding:18px 0 10px;margin-top:-18px}.pane-head b{font-size:18px}.pane-head span{font-size:12px}.pane label,.right-panel label{font-size:12px;font-weight:650}input,select,textarea{min-height:42px;border-color:#263a56;background:#08101b;font-size:14px}textarea{min-height:92px}.dropzone{padding:26px 14px!important;border-width:2px!important;font-size:14px}.template-card{padding:15px}.template-card b{font-size:14px}.template-card span{font-size:12px}
.editor-toolbar{height:56px;padding:8px 14px;gap:16px}.toolbar-group span{font-size:12px}.toolbar-group select{min-height:40px;font-size:13px}.icon-btn{width:40px;height:40px;font-size:17px;border-color:#2d425f}.status{display:flex;align-items:center;gap:6px;background:#0c1522;border:1px solid #233651;padding:7px 10px;border-radius:999px}.status-dot{width:7px;height:7px;border-radius:50%;background:#31e6b0}
.stage-wrap{padding:18px}.stage{border-width:2px;border-color:#293f5e}.transport{height:60px}.play{width:42px;height:42px}
.right-panel{scrollbar-width:thin}.right-panel .pane-head{top:-18px}.empty-inspector{font-size:13px;padding:30px 12px}.inspector-actions button{min-height:42px;font-weight:750}
.timeline-shell{border-top:2px solid #20334d}.timeline-toolbar{height:48px;padding:7px 15px}.timeline-toolbar b{font-size:14px}.timeline-toolbar span{font-size:11px}.track-row{min-height:50px}.track{min-height:50px}.timeline-clip{height:41px}.timeline-text,.timeline-audio{height:35px}.track-label{font-size:10px;font-weight:800}.playhead{top:24px}
.toast{position:fixed;right:22px;bottom:250px;z-index:1000;max-width:360px;padding:12px 16px;border-radius:12px;background:#121d2c;border:1px solid #36516f;color:#f7f9fc;box-shadow:0 16px 40px #0008;opacity:0;transform:translateY(12px);pointer-events:none;transition:.2s ease;font-size:13px}.toast.show{opacity:1;transform:translateY(0)}.toast.success{border-color:#2a8f72}.toast.warn{border-color:#a47b2b}
@media(max-width:1450px){.top-btn{padding:0 11px}.top-btn .btn-icon{display:none}.save-state{display:none}.topbar{grid-template-columns:190px minmax(180px,1fr) auto}}
@media(max-width:1100px){.top-btn span:not(.btn-icon){font-size:0}.top-btn .btn-icon{display:inline;font-size:18px}.top-btn{width:44px;padding:0}.topbar{grid-template-columns:170px minmax(160px,1fr) auto}}