/* Supreme Pro — video editor */
body.ed-open{overflow:hidden}
.ed-note{font-size:.85rem;color:var(--text-faint,#8a8fa3);margin:8px 0 0;line-height:1.5}
.ed-feat{margin:0;padding-left:0;list-style:none;display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.ed-lbl{display:block;font-size:.8rem;font-weight:600;margin:0 0 6px;color:var(--text-soft,#555)}
.ed-input{width:100%;padding:10px 12px;border-radius:12px;border:1px solid rgba(120,130,160,.35);background:rgba(255,255,255,.7);color:inherit;font:inherit}
[data-theme=dark] .ed-input{background:rgba(255,255,255,.06)}
.proj-card{padding:12px;display:flex;flex-direction:column;gap:10px}
.proj-thumb{display:flex;align-items:center;justify-content:center;height:150px;border-radius:14px;background:#12141b;overflow:hidden;text-decoration:none;font-size:2.4rem}
.proj-thumb img{max-width:100%;max-height:100%;object-fit:contain}
.proj-info{display:flex;flex-direction:column;gap:2px}.proj-info small{color:var(--text-faint,#8a8fa3)}
.proj-btns{display:flex;gap:6px;flex-wrap:wrap}
.np-aspects{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
.np-asp{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 6px;border-radius:14px;border:2px solid rgba(120,130,160,.25);background:transparent;color:inherit;cursor:pointer;font:inherit}
.np-asp i{display:block;border:2px solid currentColor;border-radius:4px;opacity:.7}
.np-asp small{font-size:.66rem;color:var(--text-faint,#8a8fa3);text-align:center}
.np-asp.on{border-color:var(--accent,#4f6df5);background:rgba(79,109,245,.12)}
.exp-bar{height:10px;border-radius:99px;background:rgba(120,130,160,.25);overflow:hidden}.exp-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#4f6df5,#a855f7);transition:width .2s}

/* ---- editor shell ---- */
#edApp{position:fixed;inset:0;z-index:300;display:flex;flex-direction:column;background:#0d0f15;color:#e8eaf2;font-size:14px;-webkit-user-select:none;user-select:none}
#edApp[hidden]{display:none}
#edApp button,#edApp select,#edApp input{font-family:inherit}
.ed-top{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#141721;border-bottom:1px solid #232838;flex:none}
.ed-sp{flex:1}
.ed-name{background:transparent;border:1px solid transparent;color:#fff;font-weight:700;font-size:1rem;padding:6px 8px;border-radius:8px;min-width:0;width:200px}
.ed-name:focus{border-color:#4f6df5;outline:0;background:#0d0f15}
.ed-save{font-size:.75rem;color:#7d8399;white-space:nowrap}
.ed-btn{background:#20263a;color:#e8eaf2;border:1px solid #2c3450;border-radius:10px;padding:8px 12px;cursor:pointer;font-weight:600;font-size:.85rem;white-space:nowrap;transition:background .15s,transform .1s}
.ed-btn:hover{background:#2a3350}.ed-btn:active{transform:scale(.96)}
.ed-btn:disabled{opacity:.35;pointer-events:none}
.ed-btn.primary{background:linear-gradient(135deg,#4f6df5,#7c4dff);border-color:transparent;color:#fff}
.ed-btn.danger{color:#ff8a8a}
.ed-btn.ic{padding:8px 11px;font-size:1rem}.ed-btn.big{width:46px;height:46px;border-radius:50%;padding:0;font-size:1.15rem}
.ed-btn.wide{width:100%;margin-top:8px}
.ed-sel{background:#20263a;color:#e8eaf2;border:1px solid #2c3450;border-radius:10px;padding:8px;font-size:.85rem;max-width:190px}
.ed-sel.wide{max-width:none;width:100%}
.ed-num{width:90px;background:#0d0f15;border:1px solid #2c3450;border-radius:8px;color:#fff;padding:6px 8px}
.ed-main{flex:1;min-height:0;display:grid;grid-template-columns:250px minmax(0,1fr) 300px}
.ed-panel{background:#141721;overflow:auto;padding:10px;display:flex;flex-direction:column;gap:10px;-webkit-user-select:text;user-select:text}
.ed-media{border-right:1px solid #232838}.ed-inspector{border-left:1px solid #232838}
.ed-panel-h{font-weight:800;display:flex;justify-content:space-between;align-items:center}
.ed-x{display:none;background:none;border:0;color:#aab;font-size:1.1rem;cursor:pointer}
.ed-row{display:flex;gap:6px}.ed-row .ed-btn{flex:1}
.ed-drop{border:2px dashed #2c3450;border-radius:12px;padding:12px;text-align:center;color:#7d8399;font-size:.8rem}
.ed-drop.drag{border-color:#4f6df5;color:#fff;background:rgba(79,109,245,.12)}
.media-item{display:flex;gap:8px;align-items:center;background:#1a1f2e;border-radius:10px;padding:6px}
.mi-th{width:52px;height:38px;border-radius:6px;background:#0d0f15;display:flex;align-items:center;justify-content:center;overflow:hidden;flex:none}.mi-th img{width:100%;height:100%;object-fit:cover}
.mi-t{flex:1;min-width:0;display:flex;flex-direction:column}.mi-t b{font-size:.8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mi-t small{color:#7d8399;font-size:.7rem}
.mi-b{display:flex;gap:4px}.mi-b button{width:30px;height:30px;border-radius:8px;border:0;background:#2a3350;color:#fff;cursor:pointer}
.ed-stage{display:flex;flex-direction:column;min-width:0;min-height:0}
.ed-canvas-box{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;background:#090b10;padding:8px}
.ed-canvas-wrap{position:relative;box-shadow:0 10px 40px rgba(0,0,0,.6);background:#000}
#edCanvas{width:100%;height:100%;display:block;touch-action:none;cursor:move}
.ed-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;color:#8a90a8;pointer-events:none;font-size:.9rem}
.ed-empty[hidden]{display:none}
.ed-transport{display:flex;align-items:center;gap:10px;justify-content:center;padding:8px;background:#141721;border-top:1px solid #232838}
.ed-time{font-variant-numeric:tabular-nums;color:#b9bfd4;font-size:.85rem;min-width:130px}
/* inspector controls */
.ins-f{display:flex;flex-direction:column;gap:5px;margin-bottom:10px}
.ins-f label{display:flex;justify-content:space-between;font-size:.75rem;color:#9aa1b8;font-weight:600}.ins-f label b{color:#dfe3f2;font-weight:600}
.ins-f.row{flex-direction:row;align-items:center;justify-content:space-between}
.ins-f input[type=range]{width:100%;accent-color:#7c9bff;touch-action:pan-y}
.ins-f input[type=color]{width:44px;height:30px;border:0;background:none;padding:0}
.ins-f textarea{background:#0d0f15;color:#fff;border:1px solid #2c3450;resize:vertical}
.ins-seg{display:flex;background:#0d0f15;border-radius:10px;padding:3px;gap:3px}
.ins-seg button{flex:1;padding:7px 4px;border:0;border-radius:8px;background:transparent;color:#aab;cursor:pointer;font-size:.78rem;font-weight:600}.ins-seg button.on{background:#3a4470;color:#fff}
.ins-tabs{display:flex;gap:4px;margin:8px 0 12px;border-bottom:1px solid #232838}
.ins-tabs button{flex:1;background:none;border:0;color:#8a90a8;padding:8px 2px;font-weight:700;cursor:pointer;border-bottom:2px solid transparent}.ins-tabs button.on{color:#fff;border-color:#7c9bff}
.ins-actions{display:flex;gap:6px}.ins-actions .ed-btn{flex:1;padding:8px 4px}
.asp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.asp{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;height:64px;background:#1a1f2e;border:2px solid transparent;border-radius:10px;color:#cfd3e6;cursor:pointer;font-size:.68rem}
.asp i{display:block;border:2px solid currentColor;border-radius:3px}.asp.on{border-color:#7c9bff;background:#252c47}
.fx-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:12px}
.fx{background:none;border:2px solid transparent;border-radius:10px;padding:0;cursor:pointer;color:#cfd3e6;font-size:.7rem;overflow:hidden}.fx.on{border-color:#7c9bff}
.fx img{display:block;width:100%;height:46px;object-fit:cover;background:#333}.fx span{display:block;padding:4px}
.emoji-row{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}.emoji-row button{font-size:1.25rem;background:#1a1f2e;border:0;border-radius:8px;padding:6px;cursor:pointer}
/* timeline */
.ed-timeline{flex:none;background:#10131b;border-top:1px solid #232838;display:flex;flex-direction:column}
.tl-bar{display:flex;gap:6px;align-items:center;padding:6px 10px;overflow-x:auto}
.tl-bar input{width:110px;accent-color:#7c9bff}.tl-zoomlbl{font-size:.8rem}
.tl-wrap{display:flex}
.tl-gutter{flex:none;width:30px;background:#141721;border-right:1px solid #232838}
.g-ruler{height:24px}.tl-gutter .g{height:46px;display:flex;align-items:center;justify-content:center;color:#7d8399;font-size:.8rem;border-top:1px solid #1c2131}
.tl-scroll{flex:1;overflow-x:auto;overflow-y:hidden;position:relative;touch-action:pan-x;-webkit-overflow-scrolling:touch}
.tl-inner{position:relative;min-width:100%}
.tl-ruler{height:24px;position:relative;border-bottom:1px solid #232838;cursor:col-resize;touch-action:none}
.tl-ruler span{position:absolute;top:5px;font-size:.66rem;color:#7d8399;padding-left:4px;border-left:1px solid #2c3450;height:14px;line-height:14px}
.tl-track{height:46px;position:relative;border-top:1px solid #1c2131}
.tl-clip{position:absolute;top:4px;height:38px;border-radius:8px;overflow:hidden;display:flex;align-items:center;cursor:grab;touch-action:none;background:#2c3a72;background-size:auto 100%;background-repeat:repeat-x;border:2px solid transparent;box-sizing:border-box}
.tl-clip.main{background-color:#2f4d8f}.tl-clip.over{background-color:#7a3f9d}.tl-clip.text{background:#b7791f}.tl-clip.audio{background:#1f7a5c}
.tl-clip .lbl{position:relative;padding:0 14px;font-size:.72rem;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 3px rgba(0,0,0,.8);pointer-events:none}
.tl-clip.sel{border-color:#fff;box-shadow:0 0 0 2px #4f6df5}
.tl-clip .h{position:absolute;top:0;bottom:0;width:14px;background:rgba(255,255,255,.28);cursor:ew-resize;z-index:2;display:none}
.tl-clip.sel .h{display:block}.tl-clip .h.l{left:0}.tl-clip .h.r{right:0}
.tl-head{position:absolute;top:0;bottom:0;left:-1px;width:2px;background:#ff5d73;z-index:5;pointer-events:none}
.tl-head i{position:absolute;top:0;left:-6px;width:14px;height:14px;background:#ff5d73;border-radius:50%;pointer-events:auto;cursor:col-resize;touch-action:none}
.ed-bottombar{display:none}

@media (max-width:900px){
  .ed-name{width:120px}.ed-save{display:none}#edAspect{max-width:110px}
  .ed-main{grid-template-columns:1fr}
  .ed-panel{position:fixed;left:0;right:0;bottom:56px;max-height:52vh;z-index:40;border:0;border-top:1px solid #2c3450;border-radius:18px 18px 0 0;box-shadow:0 -12px 40px rgba(0,0,0,.6);transform:translateY(120%);transition:transform .25s ease;visibility:hidden}
  body.sheet-media .ed-media,body.sheet-inspector .ed-inspector{transform:none;visibility:visible}
  .ed-x{display:block}
  .ed-btn.primary#edExport{padding:8px 10px}
  .tl-bar .ed-btn{padding:8px 9px}
  .tl-bar #tlText,.tl-bar #tlSplit,.tl-bar #tlDel{display:none}
  .ed-transport{padding:4px}
  .ed-bottombar{display:flex;position:relative;z-index:50;height:56px;background:#141721;border-top:1px solid #232838;flex:none}
  .ed-bottombar button{flex:1;background:none;border:0;color:#cfd3e6;font-size:.68rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer}
  .ed-bottombar b{font-size:1.15rem;font-weight:400}
  .tl-track,.tl-gutter .g{height:42px}.tl-clip{height:34px}
}
@media (max-height:640px) and (max-width:900px){.tl-bar{display:none}}
#expModal,#newProjModal{z-index:400}
@media (max-width:600px){
  .ed-top{gap:6px;padding:6px 8px}
  #edBack{font-size:0;padding:8px 12px}#edBack::before{content:'←';font-size:1.05rem}
  .ed-name{display:none}.ed-sp{display:none}
  #edAspect{flex:1;max-width:none;min-width:0}
}

/* Sound FX + extra bottom-bar buttons */
.sfx-list{display:grid;gap:8px;max-height:60vh;overflow:auto}
.sfx-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;background:rgba(127,127,160,.1)}
.sfx-row span{flex:1;font-weight:600}
.sfx-row button{border:0;border-radius:10px;padding:7px 12px;cursor:pointer;font-weight:600;background:rgba(127,127,160,.25);color:inherit}
.sfx-row button.add{background:linear-gradient(135deg,#6ea8ff,#7c5cf0);color:#fff}
@media (max-width:900px){.ed-bottombar{overflow-x:auto}.ed-bottombar button{min-width:64px}}