:root{
  --bg:#101010;
  --panel:#1b1b1b;
  --panel2:#181818;
  --panel3:#222;
  --line:#303030;
  --line2:#272727;
  --text:#e7e7e7;
  --muted:#8b8b8b;
  --muted2:#626262;
  --blue:#1faee9;
  --blue2:#18bfe8;
  --clip:#242424;
  --radius:5px;
  --timelineLeft:76px;
  --pxPerSec:420px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;font-size:12px}
button,input,select,textarea{font:inherit}
button{color:inherit}
svg{display:block}
.editor{
  width:100vw;height:100vh;
  display:grid;
  grid-template-rows:36px minmax(360px,48vh) minmax(300px,1fr);
  background:#101010;
}
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 10px 0 11px;border-bottom:1px solid #202020;background:#111;
  user-select:none;
}
.brand{display:flex;align-items:center;gap:9px;min-width:180px}
.logo{
  width:14px;height:14px;border-radius:4px;background:#f2f2f2;position:relative;
  box-shadow:0 0 0 1px #fff2;
}
.logo:after{content:"";position:absolute;inset:4px;border-radius:2px;background:#151515}
.project-title{font-size:11px;color:#d4d4d4;white-space:nowrap}
.top-actions{display:flex;align-items:center;gap:8px}
.export{
  height:25px;padding:0 12px;border:0;border-radius:6px;background:linear-gradient(#23afff,#0a92e8);
  color:white;display:flex;gap:6px;align-items:center;cursor:pointer;box-shadow:inset 0 0 0 1px #ffffff20,0 0 0 1px #0485ce;
}
.export:hover{filter:brightness(1.08)}
.icon-btn{
  width:28px;height:28px;border:0;background:transparent;border-radius:5px;color:#8a8a8a;
  display:grid;place-items:center;cursor:pointer;
}
.icon-btn:hover{background:#252525;color:#ddd}
.workspace{
  min-height:0;
  display:grid;
  grid-template-columns:minmax(330px,25.2vw) minmax(480px,1fr) minmax(300px,25vw);
  gap:5px;padding:5px 6px 4px 7px;
}
.left-pane,.preview-pane,.inspector{
  border:1px solid var(--line2);border-radius:var(--radius);background:var(--panel);min-width:0;min-height:0;
}
.left-pane{display:grid;grid-template-columns:34px 1fr;overflow:hidden}
.toolrail{
  background:#171717;border-right:1px solid #262626;padding-top:2px;
  display:flex;flex-direction:column;align-items:center;gap:1px;
}
.tool{
  width:27px;height:27px;border:0;background:transparent;color:#777;border-radius:4px;display:grid;place-items:center;cursor:pointer;position:relative;
}
.tool:hover{background:#222;color:#bfbfbf}
.tool.active{background:#172735;color:#1fb0ff}
.tool.active:before{
  content:"";position:absolute;left:-3px;width:2px;height:18px;border-radius:2px;background:#11a7ff;
}
.asset-panel{min-width:0;display:flex;flex-direction:column}
.panel-head{
  height:32px;display:flex;align-items:center;justify-content:space-between;padding:0 8px 0 9px;
  border-bottom:1px solid #292929;color:#a5a5a5;
}
.panel-actions{display:flex;align-items:center;gap:6px}
.head-mini{width:23px;height:23px}
.import-btn{
  border:1px solid #383838;border-radius:5px;height:24px;padding:0 8px;background:#202020;color:#cfcfcf;cursor:pointer;
  display:flex;align-items:center;gap:5px
}
.import-btn:hover{background:#282828}
.panel-body{padding:6px;overflow:auto;min-height:0;flex:1}
.assets-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:7px;align-content:start
}
.asset{
  min-width:0;cursor:pointer;user-select:none;border-radius:4px;padding:2px;
}
.asset:hover,.asset.selected{background:#282828}
.asset-thumb{
  width:100%;aspect-ratio:16/9;border-radius:3px;background:#0a0a0a center/cover no-repeat;border:1px solid #222;
  position:relative;overflow:hidden;
}
.asset-thumb.video:after{
  content:"▶";position:absolute;left:5px;bottom:4px;font-size:9px;color:#fff;background:#0008;padding:1px 4px;border-radius:3px
}
.asset-duration{
  position:absolute;right:3px;bottom:3px;background:#080808cc;border-radius:3px;padding:1px 3px;color:#e9e9e9;font-size:9px;
}
.asset-name{
  margin-top:3px;color:#9d9d9d;font-size:9.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.empty-assets{height:100%;display:grid;place-items:center;color:#666;text-align:center;line-height:1.6}
.panel-section-title{font-size:11px;color:#bbb;margin:3px 2px 7px}
.field-row{display:flex;gap:6px;margin-bottom:7px}
.text-input,.mini-input,.ins-input,.select{
  background:#242424;border:1px solid #343434;color:#d8d8d8;border-radius:4px;outline:none
}
.text-input{width:100%;padding:7px 8px}
.text-input:focus,.mini-input:focus,.ins-input:focus{border-color:#4e4e4e}
.primary-small{
  border:0;border-radius:4px;background:#168ee0;color:white;padding:6px 9px;cursor:pointer;white-space:nowrap
}
.template-list{display:grid;gap:6px}
.template{
  padding:8px;border:1px solid #2d2d2d;border-radius:4px;background:#202020;cursor:pointer;color:#aaa
}
.template:hover{background:#282828;color:#e0e0e0}

.preview-pane{display:flex;flex-direction:column;overflow:hidden;background:#191919}
.preview-wrap{flex:1;min-height:0;display:grid;place-items:center;padding:6px 14px 2px}
.stage{
  position:relative;background:#000;max-width:100%;max-height:100%;width:min(77%,920px);aspect-ratio:16/9;
  overflow:hidden;box-shadow:0 0 0 1px #000;
}
.stage video,.stage img{
  width:100%;height:100%;object-fit:contain;background:#000;display:none;transform-origin:center center;
}
.stage .show{display:block}
.stage-empty{
  position:absolute;inset:0;display:none;place-items:center;color:#6d6d6d;text-align:center;background:#101010
}
.stage-empty.show{display:grid}
.stage-empty svg{margin:auto auto 8px;color:#555}
.text-layer{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  padding:3px 8px;color:white;font-weight:700;font-size:38px;text-shadow:0 2px 8px #000;
  white-space:pre-wrap;text-align:center;pointer-events:none;
}
.transport{
  height:34px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 8px;border-top:1px solid #202020;
}
.timecode{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:9.5px;color:#757575}
.timecode strong{color:#13aaff;font-weight:500}
.play-btn{
  width:30px;height:26px;border:0;background:transparent;color:#aaa;display:grid;place-items:center;cursor:pointer;border-radius:4px
}
.play-btn:hover{background:#252525;color:#fff}
.viewer-actions{justify-self:end;display:flex;align-items:center;gap:7px}
.fit{
  color:#a3a3a3;background:#292929;border:0;height:23px;padding:0 8px;border-radius:8px;cursor:pointer
}
.inspector{overflow:auto;background:#1b1b1b}
.empty-inspector{
  height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#747474;text-align:center;
}
.empty-inspector .empty-icon{
  width:25px;height:25px;border:1px solid #626262;border-radius:7px;margin-bottom:10px;position:relative
}
.empty-inspector .empty-icon:before,.empty-inspector .empty-icon:after{
  content:"";position:absolute;left:6px;right:6px;height:1px;background:#616161
}
.empty-inspector .empty-icon:before{top:9px}.empty-inspector .empty-icon:after{top:14px}
.empty-inspector b{font-size:11px;color:#d0d0d0;margin-bottom:5px}
.empty-inspector span{font-size:9px;color:#6f6f6f}
.inspector-content{display:none}
.inspector-content.show{display:block}
.ins-title{
  height:35px;border-bottom:1px solid #292929;padding:0 10px;display:flex;align-items:center;justify-content:space-between;color:#d3d3d3
}
.ins-section{padding:10px;border-bottom:1px solid #292929}
.ins-section h4{font-size:10px;color:#bdbdbd;margin:0 0 9px;font-weight:600}
.ins-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.ins-label{font-size:9px;color:#747474;margin-bottom:4px}
.ins-input{width:100%;height:26px;padding:0 7px}
.range-wrap{display:grid;grid-template-columns:1fr 50px;gap:7px;align-items:center}
input[type="range"]{accent-color:#1fa9f8;width:100%}
.switch-row{display:flex;align-items:center;justify-content:space-between;margin:7px 0}
.toggle{
  width:28px;height:15px;background:#393939;border-radius:10px;padding:2px;cursor:pointer
}
.toggle:after{content:"";display:block;width:11px;height:11px;border-radius:50%;background:#aaa;transition:.2s}
.toggle.on{background:#148fdc}.toggle.on:after{transform:translateX(13px);background:white}

.timeline-shell{
  min-height:0;margin:0 6px 6px 7px;border:1px solid #292929;border-radius:5px;background:#1b1b1b;overflow:hidden;
  display:flex;flex-direction:column;
}
.timeline-toolbar{
  height:31px;border-bottom:1px solid #282828;display:flex;align-items:center;justify-content:space-between;padding:0 7px;
}
.timeline-tools,.zoom-tools{display:flex;align-items:center;gap:2px}
.tl-btn{
  width:24px;height:23px;border:0;background:transparent;color:#858585;border-radius:4px;display:grid;place-items:center;cursor:pointer
}
.tl-btn:hover{background:#292929;color:#ddd}
.tl-btn.active{color:#1aa9fa;background:#173042}
.scene-pill{
  position:absolute;left:50%;transform:translateX(-50%);height:23px;border:1px solid #2c2c2c;border-radius:10px;background:#242424;
  color:#aaa;padding:0 10px;display:flex;gap:5px;align-items:center
}
.zoom-range{width:70px!important}
.timeline-scroll{position:relative;flex:1;overflow:auto;background:#191919}
.timeline-content{
  position:relative;min-height:100%;min-width:100%;
  width:max(100%,calc(var(--timelineLeft) + var(--timelineWidth,1200px) + 80px));
}
.ruler{
  position:sticky;top:0;height:27px;background:#191919;border-bottom:1px solid #202020;z-index:12;
  margin-left:var(--timelineLeft);overflow:hidden;min-width:calc(100% - var(--timelineLeft));
}
.ruler-inner{position:relative;height:100%;width:var(--timelineWidth,1200px)}
.tick{position:absolute;bottom:0;width:1px;height:5px;background:#3a3a3a}
.tick.major{height:9px;background:#484848}
.tick span{
  position:absolute;bottom:10px;left:3px;white-space:nowrap;font-size:8px;color:#696969;transform:translateX(-1px)
}
.track-area{position:relative;min-height:315px}
.track-labels{
  position:absolute;left:0;top:0;width:var(--timelineLeft);bottom:0;border-right:1px solid #252525;background:#1a1a1a;z-index:8;
}
.track-label{
  height:46px;border-bottom:1px solid #202020;display:flex;align-items:center;justify-content:flex-end;gap:5px;padding-right:8px;color:#686868
}
.track-lanes{position:absolute;left:var(--timelineLeft);top:0;right:0;min-height:315px}
.lane{
  height:46px;border-bottom:1px solid #202020;position:relative;
}
.clip{
  position:absolute;top:5px;height:36px;border-radius:4px;background:#131313;border:1px solid #252525;overflow:hidden;
  cursor:pointer;user-select:none;box-shadow:0 0 0 1px #0002;
}
.clip.selected{outline:1px solid #18a9ff;border-color:#18a9ff}
.clip.audio{background:#123528}
.clip.text{background:#342647}
.clip-strip{position:absolute;inset:0;display:flex;overflow:hidden}
.thumb{
  height:100%;min-width:66px;background-position:center;background-size:cover;background-repeat:no-repeat;border-right:1px solid #0005
}
.audio-wave{position:absolute;inset:4px 8px;opacity:.7;background:repeating-linear-gradient(90deg,#32b47e 0 2px,transparent 2px 5px)}
.clip-name{
  position:absolute;left:5px;top:3px;z-index:2;font-size:8px;color:white;text-shadow:0 1px 2px #000;max-width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.trim-handle{
  position:absolute;top:0;bottom:0;width:5px;z-index:5;cursor:ew-resize;display:none;background:#16aaff88
}
.clip.selected .trim-handle{display:block}.trim-handle.left{left:0}.trim-handle.right{right:0}
.playhead{
  position:absolute;top:0;bottom:0;width:1px;background:#14aaff;z-index:30;pointer-events:none;
}
.playhead:before{
  content:"";position:absolute;top:-3px;left:-4px;width:9px;height:9px;border-radius:50%;background:#14aaff
}
.drop-hint{
  position:absolute;inset:15px 15px auto 15px;height:50px;border:1px dashed #3a3a3a;border-radius:6px;
  display:none;align-items:center;justify-content:center;color:#666;pointer-events:none
}
.drop-hint.show{display:flex}
.context-menu{
  position:fixed;z-index:2000;display:none;min-width:145px;padding:4px;background:#242424;border:1px solid #3a3a3a;border-radius:6px;
  box-shadow:0 8px 30px #0008
}
.context-menu.show{display:block}
.context-menu button{width:100%;height:28px;text-align:left;padding:0 9px;background:transparent;border:0;border-radius:4px;color:#c9c9c9;cursor:pointer}
.context-menu button:hover{background:#333}
.context-menu hr{border:0;border-top:1px solid #353535;margin:4px}

.modal-backdrop{
  position:fixed;inset:0;background:#0009;z-index:3000;display:none;place-items:center;backdrop-filter:blur(3px)
}
.modal-backdrop.show{display:grid}
.modal{
  width:min(430px,calc(100vw - 30px));background:#222;border:1px solid #3a3a3a;border-radius:10px;box-shadow:0 20px 60px #000b;overflow:hidden
}
.modal-head{height:43px;display:flex;align-items:center;justify-content:space-between;padding:0 13px;border-bottom:1px solid #333}
.modal-body{padding:14px}
.modal-row{margin-bottom:12px}
.modal-row label{display:block;color:#8c8c8c;font-size:10px;margin-bottom:5px}
.modal-row input,.modal-row select{width:100%;height:31px;background:#292929;color:#ddd;border:1px solid #3b3b3b;border-radius:5px;padding:0 8px}
.modal-foot{display:flex;justify-content:flex-end;gap:7px;padding:11px 14px;border-top:1px solid #333}
.btn{height:30px;padding:0 12px;border-radius:5px;border:1px solid #3b3b3b;background:#2a2a2a;color:#d5d5d5;cursor:pointer}
.btn.primary{border-color:#0e91df;background:#129feF;color:#fff}
.progress{height:5px;background:#333;border-radius:3px;overflow:hidden;margin-top:10px;display:none}
.progress > i{display:block;height:100%;width:0;background:#1aa9ff}
.toast{
  position:fixed;left:50%;bottom:24px;z-index:5000;transform:translate(-50%,20px);opacity:0;pointer-events:none;
  background:#2a2a2a;border:1px solid #414141;border-radius:6px;padding:8px 12px;color:#ddd;transition:.2s
}
.toast.show{opacity:1;transform:translate(-50%,0)}
kbd{font:9px ui-monospace,monospace;background:#333;border:1px solid #444;border-radius:3px;padding:1px 4px;color:#aaa}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:#171717}
::-webkit-scrollbar-thumb{background:#343434;border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:#444}

@media(max-width:1100px){
  .workspace{grid-template-columns:300px 1fr 290px}
  .stage{width:90%}
}
@media(max-width:900px){
  .workspace{grid-template-columns:260px 1fr}
  .inspector{display:none}
  .editor{grid-template-rows:36px minmax(330px,48vh) 1fr}
}
body.editor-page{background:#0b0b0b}.topbar{height:48px;background:linear-gradient(90deg,#111111,#0d0d0d);padding:0 12px}.editor{grid-template-rows:48px minmax(350px,48vh) minmax(300px,1fr)}.brand{min-width:250px}.brand-logo{width:29px;height:29px;border-radius:9px;object-fit:cover}.brand-name{font-weight:800;font-size:13px;letter-spacing:-.02em}.release-mini{font-size:7px;padding:3px 5px;border:1px solid #237fa6;border-radius:99px;color:#9bdff7;margin-left:3px}.back-home{font-size:10px;color:#777;margin-left:8px}.back-home:hover{color:#ddd}.export{background:linear-gradient(100deg,#168fc9,#18bfe8);box-shadow:0 8px 25px #168fc933}.tool.active{background:#17252b;color:#8edcf7}.tool.active:before{background:linear-gradient(#24b7eb,#29d4f5)}.primary-small{background:linear-gradient(100deg,#168fc9,#16bde4)}.clip.selected{outline-color:#25b6ee;border-color:#25b6ee}.playhead,.playhead:before{background:#25b6ee}.template{transition:.18s transform,.18s border-color,.18s background}.template:hover{transform:translateY(-1px);border-color:#35444a}.effect-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.effect-card{min-height:62px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden}.effect-card:before{content:"";position:absolute;inset:0;background:var(--fx-preview,linear-gradient(135deg,#252525,#141414));opacity:.65}.effect-card span,.effect-card small{position:relative;z-index:1}.effect-card small{color:#888;font-size:8px;margin-top:4px}.panel-note{font-size:9px;line-height:1.6;color:#727272;margin:9px 2px}.adjust-row{margin:12px 2px}.adjust-head{display:flex;justify-content:space-between;color:#999999;font-size:9px;margin-bottom:5px}.adjust-head output{color:#d3d3d3}.editor-badge{display:flex;gap:6px;align-items:center;font-size:9px;color:#747474}.editor-badge i{width:6px;height:6px;background:#37dca4;border-radius:50%;box-shadow:0 0 10px #37dca4}.mobile-panel-toggle{display:none}.ratio-select{color:#a3a3a3;background:#292929;border:0;height:23px;padding:0 7px;border-radius:8px}.project-title{display:flex;align-items:center;gap:5px}.project-title[contenteditable="true"]:focus{outline:1px solid #365560;border-radius:4px;padding:3px 5px}.ins-section select.ins-input{appearance:auto}.setting-card{padding:9px;border:1px solid #333333;border-radius:6px;background:#202020;margin-bottom:7px}.setting-card b{display:block;font-size:10px;margin-bottom:3px}.setting-card span{font-size:8.5px;color:#777}.kbd-grid{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}.kbd-chip{background:#242424;border:1px solid #343a3d;border-radius:5px;padding:5px 7px;color:#999}.modal{background:#1d1d1d;border-color:#383838}.btn.primary{background:linear-gradient(100deg,#168fc9,#18bfe8);border:0}.stage{transition:.25s width,.25s aspect-ratio}.mobile-tip{display:none}
@media(max-width:900px){html,body{overflow:auto}.editor{height:auto;min-height:100vh;grid-template-rows:48px auto 410px}.workspace{grid-template-columns:1fr;display:flex;flex-direction:column;padding:4px}.left-pane{order:2;height:255px;grid-template-columns:48px 1fr}.preview-pane{order:1;height:310px}.inspector{display:none}.toolrail{overflow-y:auto}.timeline-shell{height:410px;margin:4px}.stage{width:min(95%,520px)!important}.mobile-tip{display:block;position:fixed;left:10px;right:10px;bottom:10px;z-index:6000;padding:10px 12px;background:#191a27;border:1px solid #33354a;border-radius:10px;color:#8f93a9;font-size:10px;text-align:center;pointer-events:none;animation:tipAway .4s 4s forwards}.brand{min-width:0}.back-home{display:none}.editor-badge{display:none}.top-actions{gap:3px}.ratio-select{max-width:80px}}@media(max-width:560px){.preview-pane{height:255px}.left-pane{height:240px}.editor{grid-template-rows:48px auto 370px}.timeline-shell{height:370px}.scene-pill{display:none}.zoom-range{width:45px!important}.topbar{padding:0 7px}.brand-name{font-size:12px}.brand-logo{width:26px;height:26px}.export{padding:0 8px}.export span{display:none}.workspace{gap:2px}.stage{width:98%!important}.left-pane{grid-template-columns:44px 1fr}.effect-grid{grid-template-columns:1fr 1fr}}@keyframes tipAway{to{opacity:0;transform:translateY(8px)}}

/* ===== VioVid — interaction & production UI ===== */
.toolrail{overflow-y:auto;overflow-x:hidden;scrollbar-width:none;padding-bottom:5px}.toolrail::-webkit-scrollbar{display:none}.tool span{font-weight:800;font-size:13px}.panel-body.list-view .assets-grid{display:flex;flex-direction:column}.panel-body.list-view .asset{display:grid;grid-template-columns:96px minmax(0,1fr);gap:8px;align-items:center}.panel-body.list-view .asset-name{margin:0}.asset{position:relative}.asset-actions{display:flex;gap:4px;margin-top:4px}.asset-action{border:1px solid #363636;background:#222222;color:#a4a4a4;border-radius:5px;padding:4px 6px;font-size:8px;cursor:pointer}.asset-action:hover{background:#303030;color:white}.asset-thumb.audio{background:linear-gradient(135deg,#1d2427,#161616)}.asset-thumb.audio:after{content:'♫';position:absolute;inset:0;display:grid;place-items:center;color:#8edcf7;font-size:22px}.panel-tip{padding:10px;border:1px dashed #343a3d;border-radius:8px;background:#191d1f;color:#8c969b;font-size:9px;line-height:1.55;margin-bottom:8px}.template-list{gap:8px}.template-card{position:relative;overflow:hidden;border:1px solid #32383b;border-radius:9px;background:#191d1f;cursor:pointer;transition:.18s}.template-card:hover{transform:translateY(-1px);border-color:#2b7794;background:#1e282c}.template-preview{height:78px;background:var(--template-bg,linear-gradient(135deg,#18333e,#181b34));position:relative;overflow:hidden}.template-preview:before,.template-preview:after{content:'';position:absolute;border-radius:50%;filter:blur(2px)}.template-preview:before{width:80px;height:80px;right:-18px;top:-25px;background:#ffffff1c}.template-preview:after{width:70px;height:70px;left:-22px;bottom:-35px;background:#25b6ee35}.template-preview b{position:absolute;left:10px;bottom:9px;color:white;font-size:11px;z-index:2;text-shadow:0 2px 10px #000}.template-meta{display:flex;align-items:center;justify-content:space-between;padding:7px 9px;color:#8e8e8e;font-size:8px}.template-meta strong{color:#c2c2c2;font-size:9px}.template-use{display:block;width:calc(100% - 16px);margin:0 8px 8px;border:0;border-radius:6px;padding:6px;background:#252525;color:#a6e2f7;cursor:pointer;font-weight:650}.template-use:hover{background:#22363e;color:#fff}.sticker-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.sticker-btn{aspect-ratio:1;border:1px solid #333333;border-radius:8px;background:#202020;font-size:23px;cursor:pointer}.sticker-btn:hover{background:#2a2a2a;transform:translateY(-1px)}.animation-grid,.transition-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.preset-btn{min-height:54px;border:1px solid #333333;border-radius:8px;background:#1f1f1f;color:#bdbdbd;padding:8px;text-align:left;cursor:pointer}.preset-btn:hover,.preset-btn.active{border-color:#2b8bb0;background:#202a2e;color:#fff}.preset-btn b{display:block;font-size:9px}.preset-btn small{display:block;color:#737f84;font-size:7.5px;margin-top:4px}.audio-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:10px}.audio-action{padding:8px;border:1px solid #32383b;background:#202426;color:#b0b0b0;border-radius:7px;cursor:pointer}.audio-action:hover{background:#2a3134;color:#fff}.ins-action{width:100%;height:27px;border:1px solid #343a3d;background:#232323;color:#a5a5a5;border-radius:5px;margin-top:8px;cursor:pointer}.ins-action:hover{background:#2c2c2c;color:#fff}.track-badge{font-size:7px;padding:3px 5px;border:1px solid #454545;border-radius:99px;color:#9eaaaf}.preview-fps{margin-left:8px;padding:2px 5px;border-radius:99px;background:#242a2d;color:#8d999e;font-size:7px}.stage-empty small{display:block;margin-top:6px;color:#5e5e5e;font-size:8px}.drop-hint.show{display:flex;border-color:#2c82a4;color:#a8dff2;background:#168fc912}.lane[data-track="overlay"]{background:linear-gradient(90deg,#14262d12,transparent)}.clip.overlay{background:#1b3038}.clip.overlay .clip-name{color:#d6f2fb}

/* direct stage editing */
.base-visual-layer{position:absolute;inset:0;transform-origin:center center}.base-visual-layer>video,.base-visual-layer>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.base-visual-layer.active-stage-layer,.overlay-media-layer.active-stage-layer,.text-layer.active-stage-layer{outline:1px solid #25b6ee;outline-offset:-1px}.stage-layer{position:absolute;transform-origin:center center;touch-action:none;user-select:none}.overlay-media-layer{position:absolute;left:50%;top:50%;width:42%;height:42%;transform:translate(-50%,-50%);touch-action:none;cursor:move;transform-origin:center center}.overlay-media-layer img,.overlay-media-layer video{display:block!important;width:100%!important;height:100%!important;object-fit:contain;background:transparent!important;pointer-events:none}.text-layer{display:block!important;pointer-events:auto;cursor:move;touch-action:none;user-select:none;z-index:30;max-width:86%;line-height:1.08}.layer-handle{position:absolute;width:11px;height:11px;background:#fff;border:2px solid #25b6ee;border-radius:50%;z-index:99;display:none;box-shadow:0 1px 6px #0008}.active-stage-layer>.layer-handle,.active-stage-layer .layer-handle{display:block}.layer-resize{right:-6px;bottom:-6px;cursor:nwse-resize}.layer-rotate{left:50%;top:-27px;transform:translateX(-50%);cursor:grab;background:#25b6ee}.layer-rotate:after{content:'';position:absolute;left:50%;top:9px;width:1px;height:15px;background:#25b6ee}.stage.dragging-layer{cursor:grabbing}.stage::after{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px #ffffff0d}.stage[data-safe-guides="on"]:before{content:'';position:absolute;inset:6%;border:1px dashed #ffffff2c;z-index:60;pointer-events:none}.base-visual-layer.active-stage-layer{cursor:move}.base-visual-layer.active-stage-layer:after{content:'TABAN';position:absolute;left:6px;top:6px;padding:2px 5px;background:#167faacc;color:white;border-radius:4px;font-size:7px;pointer-events:none}.overlay-media-layer.active-stage-layer:after{content:'BİNDİRME';position:absolute;left:5px;top:5px;padding:2px 5px;background:#167faacc;color:#fff;border-radius:4px;font-size:7px;pointer-events:none}.text-layer.active-stage-layer:after{content:'METİN';position:absolute;left:0;top:-20px;padding:2px 5px;background:#167faacc;color:#fff;border-radius:4px;font-size:7px;pointer-events:none;text-shadow:none}.stage [data-clip-id]{z-index:20}.stage #textOverlayRoot{position:absolute;inset:0;z-index:40;pointer-events:none}.stage #textOverlayRoot .text-layer{pointer-events:auto}.stage #overlayMediaRoot{position:absolute;inset:0;z-index:25;pointer-events:none}.stage #overlayMediaRoot .overlay-media-layer{pointer-events:auto}

/* Export / project / auto creator */
.export-modal{width:min(620px,calc(100vw - 30px))}.modal-head>div{display:flex;flex-direction:column;gap:2px}.modal-head small{font-size:8px;color:#777777;font-weight:400}.export-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}.export-grid .full{grid-column:1/-1}.export-info{padding:8px 10px;border:1px solid #353b3e;border-radius:7px;background:#191e20;color:#919da1;font-size:8.5px;line-height:1.5;margin-bottom:10px}.export-info.ok{border-color:#2c594b;color:#6fcca8;background:#15302455}.export-info.warn{border-color:#65522f;color:#d8b46f;background:#49391335}.project-export-box{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px;border:1px solid #333b3e;border-radius:9px;background:linear-gradient(120deg,#182329,#1c2326);margin-top:2px}.project-export-box div{display:flex;flex-direction:column;gap:3px}.project-export-box b{font-size:10px;color:#d2edf7}.project-export-box span{font-size:8px;color:#858f94}.auto-video-modal{width:min(500px,calc(100vw - 30px))}.auto-upload-box{display:flex;flex-direction:column;align-items:center;text-align:center;padding:22px 14px;border:1px dashed #3b484e;border-radius:10px;background:#1a2023;margin-bottom:12px}.auto-upload-box strong{font-size:13px}.auto-upload-box span{font-size:9px;color:#858f94;margin:5px 0 12px;line-height:1.5}.auto-upload-box small{font-size:8px;color:#6f7b80;margin-top:8px}.render-screen{position:fixed;inset:0;z-index:9000;display:none;place-items:center;background:radial-gradient(circle at 50% 28%,#152830 0,#0d1214 42%,#080a0b 100%);backdrop-filter:blur(12px)}.render-screen.show{display:grid}.render-card{width:min(460px,calc(100vw - 32px));text-align:center;padding:34px 30px;border:1px solid #343b3e;border-radius:18px;background:#151a1ce8;box-shadow:0 30px 90px #000c}.render-icon{width:58px;height:58px;margin:0 auto 12px;display:grid;place-items:center;border-radius:17px;background:linear-gradient(135deg,#168fc9,#16bddf);color:#fff;font-size:25px;font-weight:900;box-shadow:0 12px 35px #168fc94a}.render-card>span{font-size:8px;letter-spacing:.16em;color:#858585;text-transform:uppercase}.render-card h2{font-size:22px;margin:9px 0 5px}.render-card p{color:#808080;margin:0 0 18px;font-size:9px}.render-progress{height:9px;border-radius:99px;background:#242b2e;overflow:hidden}.render-progress i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#1499d4,#20c0e8);transition:.08s linear}.render-meta{display:flex;justify-content:space-between;margin:8px 1px 18px;color:#7b878c;font-size:9px}.render-meta strong{color:#b9e5f5}.render-screen .btn{min-width:130px}.modal-backdrop{animation:modalFade .16s ease}.modal-backdrop.show .modal{animation:modalPop .18s ease}.context-menu{z-index:5000}.context-menu hr{border:0;border-top:1px solid #383838;margin:4px 0}.context-menu button{white-space:nowrap}.btn:disabled,.primary-small:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.3)}

/* optional lighter editor surface */
body.editor-soft{--bg:#ececf2;--panel:#fbfbfd;--panel2:#f3f3f3;--panel3:#fff;--line:#dcdde7;--line2:#e1e2eb;--text:#20212a;--muted:#707485;background:#ececf2}.editor-soft .editor,.editor-soft .topbar{background:#f5f5f8}.editor-soft .left-pane,.editor-soft .preview-pane,.editor-soft .inspector,.editor-soft .timeline-shell{background:#fbfbfd;border-color:#dfe0e8}.editor-soft .toolrail,.editor-soft .track-labels{background:#f2f2f6;border-color:#dedede}.editor-soft .asset-panel,.editor-soft .timeline-scroll,.editor-soft .timeline-content,.editor-soft .ruler{background:#f8f8fb}.editor-soft .panel-head,.editor-soft .timeline-toolbar,.editor-soft .ins-title,.editor-soft .ins-section{border-color:#e1e2ea}.editor-soft .tool:hover,.editor-soft .tl-btn:hover,.editor-soft .icon-btn:hover{background:#e8e8ef;color:#292a33}.editor-soft .stage{box-shadow:0 0 0 1px #d8d9e0}.editor-soft .track-lanes .lane{border-color:#ececf1}.editor-soft .track-label{border-color:#e9e9ef}.editor-soft .modal{background:#fff;border-color:#dddfea;color:#22232c}.editor-soft .modal-row input,.editor-soft .modal-row select,.editor-soft .btn{background:#f4f4f8;border-color:#dcdde7;color:#353641}.editor-soft .template-card,.editor-soft .preset-btn,.editor-soft .setting-card,.editor-soft .panel-tip,.editor-soft .project-export-box{background:#f3f3f8;border-color:#ddddea}.editor-soft .toast{background:#fff;border-color:#ddd;color:#333}.editor-soft ::-webkit-scrollbar-track{background:#f2f2f5}.editor-soft ::-webkit-scrollbar-thumb{background:#c9cad2}

@keyframes modalFade{from{background:#0000}to{background:#0009}}@keyframes modalPop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@media(max-width:900px){.export-grid{grid-template-columns:1fr}.export-grid .full{grid-column:auto}.project-export-box{align-items:flex-start;flex-direction:column}.overlay-media-layer{width:46%;height:46%}.layer-handle{width:14px;height:14px}.layer-resize{right:-7px;bottom:-7px}.layer-rotate{top:-31px}}

/* Core class compatibility — stage handlers/templates/assets */
.asset-mini{border:1px solid #383838;background:#222222;color:#999999;border-radius:5px;padding:3px 5px;font-size:7.5px;cursor:pointer}.asset-mini:hover{background:#303030;color:#fff}.template-hero{padding:11px;border-radius:9px;background:linear-gradient(135deg,#18282d,#1b2a30);border:1px solid #354850;margin-bottom:9px}.template-hero b{display:block;font-size:11px;color:#eee}.template-hero span{display:block;font-size:8.5px;color:#98a4a8;line-height:1.5;margin-top:5px}.template-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.video-template{position:relative;min-height:92px;padding:10px;border:1px solid #383838;border-radius:9px;background:var(--template-bg,linear-gradient(135deg,#1b2a30,#171717));color:#fff;text-align:left;cursor:pointer;overflow:hidden}.video-template:before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#ffffff06,#0008)}.video-template>*{position:relative;z-index:1}.video-template:hover{border-color:#2aa9d8;transform:translateY(-1px)}.video-template b{display:block;font-size:10px;margin-top:20px}.video-template small{display:block;color:#c4c4c4;font-size:7px;line-height:1.35;margin-top:4px}.tpl-pill{position:absolute;left:8px;top:8px;font-size:6.5px;padding:3px 5px;border-radius:99px;background:#0b0c13a8;color:#c3eaf8;border:1px solid #ffffff12}.overlay-list{display:grid;gap:6px}.overlay-item{display:grid;grid-template-columns:50px minmax(0,1fr) auto;gap:7px;align-items:center;padding:6px;border:1px solid #32383b;border-radius:7px;background:#1f2426}.ov-thumb{width:50px;aspect-ratio:16/9;border-radius:4px;background-position:center!important;background-size:cover!important;background-repeat:no-repeat!important}.overlay-item b{display:block;font-size:8.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.overlay-item small{display:block;color:#717c81;font-size:7px;margin-top:2px}.overlay-add{border:0;border-radius:5px;background:#1c3038;color:#a9e5fa;padding:5px 6px;font-size:7.5px;cursor:pointer}.overlay-add:hover{background:#285264;color:#fff}.overlay-empty{padding:16px 10px;border:1px dashed #383838;border-radius:8px;color:#7b878c;text-align:center;font-size:8.5px;line-height:1.5}.group-mark{position:absolute;right:5px;top:3px;z-index:6;color:#a5e0f5;font-size:10px}

.base-visual-layer,.overlay-visual-layer{position:absolute;left:50%;top:50%;transform-origin:center center;touch-action:none;user-select:none}.base-visual-layer{cursor:move}.base-visual-layer>img,.base-visual-layer>video{position:absolute;inset:0;display:none;width:100%;height:100%;object-fit:contain;background:transparent;pointer-events:none}.overlay-visual-layer{z-index:25;cursor:move}.overlay-visual-layer>img,.overlay-visual-layer>video{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important;background:transparent!important;pointer-events:none}.stage-layer-selected{outline:1px solid #25b6ee;outline-offset:2px}.stage-handle{position:absolute;width:12px;height:12px;border:2px solid #25b6ee;background:white;border-radius:50%;z-index:120;box-shadow:0 2px 8px #0008}.stage-handle.resize{right:-7px;bottom:-7px;cursor:nwse-resize}.stage-handle.rotate{left:50%;top:-30px;transform:translateX(-50%);cursor:grab;background:#25b6ee}.stage-handle.rotate:after{content:'';position:absolute;left:50%;top:10px;width:1px;height:18px;background:#25b6ee;transform:translateX(-50%)}.text-layer.stage-layer-selected{outline:1px solid #25b6ee;outline-offset:4px}.stage-layer-selected:before{content:attr(data-layer-label);position:absolute;left:0;top:-18px;background:#157ca7;color:#fff;border-radius:4px;padding:2px 5px;font-size:6.5px;text-shadow:none;pointer-events:none}.base-visual-layer.stage-layer-selected:before{content:'TABAN'}.overlay-visual-layer.stage-layer-selected:before{content:'BİNDİRME'}.text-layer.stage-layer-selected:before{content:'METİN'}.stage #overlayMediaRoot,.stage #textOverlayRoot{position:absolute;inset:0}.stage #overlayMediaRoot{z-index:25;pointer-events:none}.stage #overlayMediaRoot .overlay-visual-layer{pointer-events:auto}.stage #textOverlayRoot{z-index:40;pointer-events:none}.stage #textOverlayRoot .text-layer{pointer-events:auto}

.editor-soft .asset-mini,.editor-soft .overlay-item{background:#f3f3f3;border-color:#dedede;color:#666666}.editor-soft .video-template{border-color:#d8d8d8}.editor-soft .overlay-empty{border-color:#d9d9d9;color:#808080}
@media(max-width:900px){.template-grid{grid-template-columns:1fr}.stage-handle{width:15px;height:15px}.stage-handle.resize{right:-8px;bottom:-8px}.stage-handle.rotate{top:-34px}}
.assets-grid.list-view{display:flex;flex-direction:column}.assets-grid.list-view .asset{display:grid;grid-template-columns:100px minmax(0,1fr);gap:8px;align-items:center}.assets-grid.list-view .asset-name{margin-top:0}.base-visual-layer{pointer-events:none}

/* VioVid — professional editor expansion */
html,body{font-size:13px}
.editor{grid-template-rows:52px minmax(410px,50vh) minmax(320px,1fr)}
.topbar{height:52px;padding:0 14px}
.brand-logo{width:32px;height:32px}.project-title{font-size:12px}.back-home{font-size:11px}.release-mini{font-size:8px}
.workspace{grid-template-columns:minmax(390px,28vw) minmax(500px,1fr) minmax(310px,23vw);gap:7px;padding:7px 8px 5px}
.left-pane{display:flex;flex-direction:column;overflow:hidden}
.toolrail{height:auto;min-height:62px;flex:0 0 auto;display:flex;flex-direction:row;align-items:stretch;gap:3px;overflow-x:auto;overflow-y:hidden;padding:6px 7px;border-right:0;border-bottom:1px solid #2a2a31;background:#15161e;scrollbar-width:thin}
.toolrail::-webkit-scrollbar{height:5px}.toolrail::-webkit-scrollbar-thumb{background:#333545;border-radius:99px}
.tool{min-width:66px;width:auto;height:49px;padding:5px 7px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;border-radius:7px;flex:0 0 auto}
.tool svg{width:19px;height:19px}.tool-glyph{font-size:18px!important;line-height:18px}.tool-label{font-size:8px!important;font-weight:700!important;color:inherit;white-space:nowrap;letter-spacing:.01em}
.tool.active:before{left:12px;right:12px;bottom:-6px;top:auto;width:auto;height:2px;border-radius:99px}
.asset-panel{flex:1;min-height:0}.panel-head{height:39px;padding:0 10px}.panel-head>span{font-size:11px;font-weight:700}.panel-body{padding:8px}.import-btn{height:28px;font-size:9px}.head-mini{width:27px;height:27px}
.assets-grid{grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:9px}.asset-name{font-size:10px}.asset-mini{font-size:8px;padding:4px 6px}.asset-actions{gap:5px}
.preview-wrap{padding:8px 14px 4px}.transport{height:40px;padding:0 11px}.timecode{font-size:10.5px}.play-btn{width:36px;height:31px}.fit{height:27px;font-size:9px}.ratio-select{height:30px;max-width:230px;padding:0 10px;font-size:9px;border:1px solid #323340;background:#202426}.export{height:31px;padding:0 14px;font-weight:700}.editor-badge{font-size:9.5px}
.autosave-status{display:flex;align-items:center;gap:6px;color:#7e8398;font-size:9px;white-space:nowrap}.autosave-status:before{content:'';width:7px;height:7px;border-radius:50%;background:#38d6a2;box-shadow:0 0 10px #38d6a244}.autosave-status[data-kind="busy"]:before{background:#e4b85e}.autosave-status[data-kind="error"]{color:#d99191}.autosave-status[data-kind="error"]:before{background:#e15d5d}
.ins-title{height:42px;padding:0 12px}.ins-section{padding:12px}.ins-section h4{font-size:11px}.ins-label{font-size:9.5px}.ins-input{height:30px;font-size:10px}.range-wrap{grid-template-columns:1fr 58px}.ins-action{height:31px}.text-inspector{display:none}.text-inspector.show{display:block}.text-edit-area{height:auto;min-height:64px;padding:8px;resize:vertical}.text-grid{margin:8px 0}.color-input{padding:3px;cursor:pointer}
.timeline-toolbar{height:40px;padding:0 9px}.tl-btn{width:29px;height:28px}.tl-btn.tl-wide{width:auto;min-width:48px;padding:0 7px;display:flex;align-items:center;justify-content:center;gap:4px;font-size:8px}.tl-btn.tl-wide svg{flex:0 0 auto}.scene-pill{height:27px;font-size:9px}.zoom-range{height:5px}
.context-menu{min-width:255px;padding:6px;border-radius:9px;box-shadow:0 18px 55px #000b}.context-menu button{padding:8px 10px;font-size:9px;border-radius:6px}.context-menu button:hover{background:#2d2e3c}
.text-style-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:9px}.text-style-card{min-height:78px;padding:8px;border:1px solid #353535;border-radius:9px;background:#1d1d1d;color:#cccccc;cursor:grab;text-align:left;overflow:hidden}.text-style-card:hover{border-color:#298aaf;background:#212a2e;transform:translateY(-1px)}.text-style-card span{display:block;min-height:34px;padding:7px;border-radius:6px;text-align:center;font-size:13px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.text-style-card b{display:block;margin-top:6px;font-size:8px;color:#a2a2a2}.effect-grid{gap:8px}.effect-card{min-height:70px}.effect-card span{font-size:9px}.effect-card small{font-size:7.5px}
.settings-inline{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:9px}.danger-soft{color:#f39c9c!important;border-color:#54363b!important}
.setting-card{padding:11px;margin-bottom:9px}.setting-card b{font-size:10.5px}.setting-card span{font-size:8.8px;line-height:1.55;display:block}.kbd-chip{font-size:8px;padding:6px 8px}
.stage{width:auto;height:auto;transition:.2s width,.2s height,.2s aspect-ratio;border-radius:2px}.stage-empty{font-size:11px}.stage-empty small{font-size:8.5px}.text-layer{border-radius:6px;line-height:1.08;max-width:92%}
.modal{font-size:10px}.modal-head{padding:14px 15px}.modal-body{padding:15px}.modal-foot{padding:12px 15px}.modal-row label{font-size:10px}.modal-row input,.modal-row select{height:34px}

@media(max-width:1180px){.workspace{grid-template-columns:minmax(340px,31vw) minmax(420px,1fr) minmax(280px,25vw)}.autosave-status{display:none}.tool{min-width:61px}.tool-label{font-size:7.5px!important}}
@media(max-width:900px){html,body{font-size:12px}.editor{grid-template-rows:52px auto 410px}.left-pane{height:280px;display:flex}.toolrail{min-height:58px;height:58px;overflow-x:auto;overflow-y:hidden}.tool{min-width:62px;height:46px}.tool-label{display:block}.preview-pane{height:340px}.ratio-select{max-width:150px}.timeline-shell{height:410px}.tl-btn.tl-wide span:last-child{display:none}.tl-btn.tl-wide{min-width:31px;padding:0 5px}.text-style-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.topbar{height:52px}.editor{grid-template-rows:52px auto 380px}.left-pane{height:265px}.preview-pane{height:300px}.toolrail{min-height:56px;height:56px}.tool{min-width:58px;height:44px}.tool-label{font-size:7px!important}.ratio-select{max-width:108px;font-size:8px}.timeline-shell{height:380px}.text-style-grid{grid-template-columns:1fr}.panel-head{height:36px}}
.legal-mini-links{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:9px}.legal-mini-links a{display:flex;align-items:center;justify-content:center;min-height:29px;padding:5px 7px;border:1px solid #363d40;border-radius:6px;background:#222222;color:#9da8ad;font-size:8px;text-decoration:none}.legal-mini-links a:hover{border-color:#2c88a9;color:#fff;background:#242e32}@media(max-width:560px){.legal-mini-links{grid-template-columns:1fr}}

/* =========================================================
   VioVid — dark editor, live previews, mobile pass
   ========================================================= */
:root{
  --blue:#16a9ef;
  --blue2:#20c7e8;
  --accent:#16a9ef;
  --panel:#1a1a1a;
  --panel2:#171717;
  --panel3:#222222;
  --line:#303030;
  --line2:#282828;
}
html,body,.editor,.topbar,.workspace,.left-pane,.preview-pane,.inspector,.timeline-shell,.toolrail,.panel-head,.panel-body{scrollbar-color:#454545 #171717;scrollbar-width:thin}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-track{background:#171717}
*::-webkit-scrollbar-thumb{background:#424242;border:2px solid #171717;border-radius:999px}
*::-webkit-scrollbar-thumb:hover{background:#555}
*::-webkit-scrollbar-corner{background:#171717}
.toolrail{background:#161616!important;border-color:#292929!important}
.tool:hover{background:#222!important;color:#ddd}
.tool.active{background:#20282c!important;color:#25b9f3!important}
.tool.active:before{background:#21b6f0!important}
.stage-layer-selected,.text-layer.stage-layer-selected{outline-color:#21b6f0!important}
.stage-handle{border-color:#1daee9!important}
.stage-handle.rotate{background:#1daee9!important}
.stage-handle.rotate:after{background:#1daee9!important}
.stage-layer-selected:before{background:#156d91!important}
.text-style-card:hover{border-color:#3b6f85!important;background:#23282a!important}
.overlay-add{background:#202d33!important;color:#91d7f4!important}
.overlay-add:hover{background:#293b43!important;color:#fff!important}
.group-mark{color:#56c7f4!important}
.legal-mini-links a:hover{border-color:#3b728b!important;background:#222a2e!important}
.context-menu button:hover{background:#292929!important}

.new-project-btn,.frame4k-btn{
  border:1px solid #3a3a3a;background:#202020;color:#cfcfcf;border-radius:6px;height:31px;padding:0 10px;
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;white-space:nowrap
}
.new-project-btn:hover,.frame4k-btn:hover{background:#292929;border-color:#4a4a4a;color:#fff}
.new-project-btn{height:31px}
.frame4k-btn{height:27px;font-size:9px;padding:0 8px}
.danger-btn{background:#4b2226!important;border-color:#663036!important;color:#ffd9dc!important}
.danger-btn:hover{background:#612a30!important}
.new-project-warning{padding:14px;border:1px solid #4a3032;border-radius:9px;background:#251a1b}
.new-project-warning strong{display:block;color:#ffd5d7;font-size:12px;margin-bottom:7px}
.new-project-warning span{display:block;color:#a68f91;line-height:1.6}

.preview-seek-wrap{height:28px;display:flex;align-items:center;gap:10px;padding:0 11px 7px;border-top:1px solid #202020;background:#181818}
.preview-seek-wrap input{appearance:none;-webkit-appearance:none;flex:1;height:5px;border-radius:999px;background:linear-gradient(90deg,#16a9ef 0 var(--seek-pct,0%),#343434 var(--seek-pct,0%) 100%);cursor:ew-resize;outline:none}
.preview-seek-wrap input::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#e7e7e7;border:3px solid #168ec2;box-shadow:0 1px 8px #0008}
.preview-seek-wrap input::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:#e7e7e7;border:3px solid #168ec2}
.seek-hint{font-size:8px;color:#666;white-space:nowrap}
.playhead{pointer-events:auto!important;cursor:ew-resize!important;width:2px!important}
.playhead:before{width:11px!important;height:11px!important;left:-5px!important}

.media-empty-upload{height:100%;min-height:190px;border:1px dashed #3b3b3b;border-radius:10px;background:#181818;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:18px;color:#777}
.media-empty-upload.compact{min-height:150px;height:auto}
.media-empty-upload b{color:#d0d0d0;font-size:11px;margin:4px 0}
.media-empty-upload span{font-size:9px;line-height:1.5;margin-bottom:11px}
.media-empty-upload small{font-size:7.5px;color:#5e5e5e;margin-top:8px}
.media-empty-icon{width:44px;height:44px;border:1px solid #3f3f3f;border-radius:12px;background:#202020;color:#24b7f1;display:grid;place-items:center;font-size:24px;margin-bottom:7px}
.stage-import-btn{margin-top:13px;height:30px;border:1px solid #3b3b3b;background:#202020;color:#d6d6d6;border-radius:7px;padding:0 12px;cursor:pointer}
.stage-import-btn:hover{background:#292929}

.panel-intro{padding:10px 11px;margin-bottom:10px;border:1px solid #303030;border-radius:9px;background:#1d1d1d}
.panel-intro b{display:block;color:#ddd;font-size:10px;margin-bottom:4px}
.panel-intro span{display:block;color:#777;font-size:8.5px;line-height:1.5}
.effect-preview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-content:start}
.effect-preview-card,.animation-preview-card,.template-visual-card{border:1px solid #303030;background:#1c1c1c;color:#bdbdbd;border-radius:9px;padding:6px;cursor:pointer;text-align:left;min-width:0;overflow:hidden}
.effect-preview-card:hover,.animation-preview-card:hover,.template-visual-card:hover{background:#242424;border-color:#444;transform:translateY(-1px)}
.fx-img-wrap,.anim-img-wrap{display:block;width:100%;aspect-ratio:1/1;border-radius:7px;background:#101010;overflow:hidden;position:relative}
.fx-img-wrap img,.anim-img-wrap img{width:100%;height:100%;object-fit:cover;display:block;transform-origin:center;will-change:transform,opacity}
.effect-preview-card b,.animation-preview-card b{display:block;margin-top:6px;color:#d1d1d1;font-size:9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.effect-preview-card small{display:block;color:#666;font-size:7.2px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.animation-preview-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;align-content:start}
.animation-preview-card{padding:4px;border-radius:7px}
.animation-preview-card b{font-size:7.3px;margin:4px 1px 1px;text-align:center}

.template-visual-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.template-visual-card{padding:7px}
.template-cover{display:block;position:relative;aspect-ratio:16/9;border-radius:7px;overflow:hidden;background:#111}
.template-cover img{width:100%;height:100%;object-fit:cover;display:block;transition:.25s transform}
.template-visual-card:hover .template-cover img{transform:scale(1.035)}
.template-cover i,.template-cover em{position:absolute;top:7px;border-radius:999px;background:#0c0c0ccc;border:1px solid #ffffff22;color:#fff;font-style:normal;font-size:6.8px;padding:3px 6px}
.template-cover i{left:7px}.template-cover em{right:7px}
.template-visual-card>b{display:block;color:#ddd;font-size:9.5px;margin:7px 1px 3px}
.template-visual-card>small{display:block;color:#6f6f6f;font-size:7.5px;line-height:1.4;min-height:30px}
.template-visual-card>strong{display:block;color:#54c9f5;font-size:7.5px;margin-top:6px}

.sticker-grid-plus{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.sticker-grid-plus button{aspect-ratio:1;border:1px solid #303030;border-radius:8px;background:#1d1d1d;font-size:22px;cursor:pointer}
.sticker-grid-plus button:hover{background:#292929;transform:scale(1.05)}
.graphics-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.graphics-grid button{min-height:72px;border:1px solid #303030;border-radius:8px;background:#1d1d1d;color:#ddd;cursor:pointer;overflow:hidden}
.graphics-grid button:hover{background:#282828;border-color:#444}
.graphics-grid span{display:block;font-size:24px;line-height:32px;white-space:nowrap}
.graphics-grid small{display:block;color:#6d6d6d;font-size:6.8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 3px}

.layer-list-plus{display:grid;gap:6px}
.layer-row-plus{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;border:1px solid #303030;background:#1c1c1c;border-radius:8px;overflow:hidden}
.layer-row-plus.selected{border-color:#237da2;background:#1b2529}
.layer-main{display:grid;grid-template-columns:28px minmax(0,1fr);align-items:center;gap:7px;border:0;background:transparent;text-align:left;padding:7px;cursor:pointer;min-width:0}
.layer-kind{width:26px;height:26px;border:1px solid #3b3b3b;border-radius:6px;display:grid;place-items:center;color:#55c8f4;background:#202020;font-size:9px}
.layer-main b{display:block;color:#c8c8c8;font-size:8.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.layer-main small{display:block;color:#666;font-size:6.8px;margin-top:2px}
.layer-actions-plus{display:flex;padding-right:5px;gap:2px}
.layer-actions-plus button{width:25px;height:25px;border:0;border-radius:5px;background:transparent;color:#777;cursor:pointer}
.layer-actions-plus button:hover{background:#2b2b2b;color:#ddd}

.caption-card-plus{display:grid;gap:8px;padding:10px;margin-bottom:9px;border:1px solid #303030;border-radius:9px;background:#1c1c1c}
.caption-card-plus label{font-size:9px;color:#aaa}.caption-card-plus small{font-size:7.5px;color:#646464;line-height:1.45}
.caption-inline{display:grid;grid-template-columns:1fr 74px;gap:7px}.caption-inline .select,.caption-inline input{height:30px;padding:0 7px;width:100%}
.live-caption-btn{width:100%;text-align:center}.audio-import-plus{width:100%;margin-bottom:9px;height:32px}
.sfx-list{display:grid;gap:6px}.sfx-row{display:grid;grid-template-columns:31px minmax(0,1fr) auto;gap:7px;align-items:center;padding:7px;border:1px solid #303030;border-radius:8px;background:#1c1c1c}
.sfx-play{width:30px;height:30px;border:1px solid #3a3a3a;border-radius:50%;background:#232323;color:#bbb;cursor:pointer}.sfx-play.playing{color:#4fd0ff;border-color:#2b7d9c;background:#1b2a30}
.sfx-row b{display:block;color:#cfcfcf;font-size:8.5px}.sfx-row small{display:block;color:#666;font-size:7px;margin-top:2px}.sfx-add{height:27px;border:1px solid #3b3b3b;background:#252525;color:#bdbdbd;border-radius:6px;font-size:7.5px;cursor:pointer;padding:0 7px}.sfx-add:hover{background:#303030;color:#fff}.license-note{font-size:7.2px;color:#5f5f5f;line-height:1.5;padding:9px 2px}

.context-menu-plus{z-index:10050;max-height:min(420px,80vh);overflow:auto}
.context-menu-plus .danger-menu{color:#ff9797}
.context-menu-plus button:disabled{opacity:.35;cursor:not-allowed}

/* Make timeline controls clearer and keep SVG crisp. */
.tl-btn.tl-wide{min-height:30px!important;font-size:8.5px!important}
.tl-btn.tl-wide svg{width:18px!important;height:18px!important;shape-rendering:geometricPrecision}
.timeline-scroll{overscroll-behavior:contain}

/* -------------------------- Mobile editor -------------------------- */
@media(max-width:900px){
  html,body{height:auto!important;min-height:100%;overflow-x:hidden!important;overflow-y:auto!important;background:#101010}
  .editor{display:flex!important;flex-direction:column;width:100%!important;height:auto!important;min-height:100dvh;overflow:visible!important}
  .topbar{position:sticky;top:0;z-index:500;height:54px!important;min-height:54px;padding:0 7px!important;gap:5px;background:#111}
  .brand{min-width:0!important;gap:6px;flex:1}.brand-logo{width:27px!important;height:27px!important}.project-title{max-width:110px;overflow:hidden;text-overflow:ellipsis;font-size:10px!important}.release-mini,.back-home,.editor-badge,.autosave-status{display:none!important}
  .top-actions{gap:4px;flex:0 1 auto;min-width:0}.ratio-select{max-width:112px!important;height:30px!important;padding:0 5px!important;font-size:7.5px!important}.new-project-btn,.export{height:30px!important;padding:0 8px!important}.new-project-btn span{display:none}.themeBtn{display:none}
  .workspace{display:flex!important;flex-direction:column;width:100%;grid-template-columns:none!important;gap:6px!important;padding:6px!important;overflow:visible!important}
  .preview-pane{order:1;width:100%;height:clamp(270px,64vw,390px)!important;min-height:270px!important;flex:none;border-radius:5px}
  .preview-wrap{min-height:0!important;padding:6px!important}.stage{max-width:100%!important;max-height:100%!important}.transport{height:38px!important;padding:0 7px!important}.timecode{font-size:8.5px!important}.preview-fps{display:none}.viewer-actions{gap:3px}.frame4k-btn span{display:none}.frame4k-btn{width:30px;padding:0;justify-content:center}.fit{height:26px!important;padding:0 5px!important;font-size:8px!important}.seek-hint{display:none}.preview-seek-wrap{height:26px;padding:0 8px 6px}
  .left-pane{order:2;width:100%;height:330px!important;min-height:330px;display:flex!important;flex-direction:column!important;overflow:hidden}
  .asset-panel{order:1;flex:1;min-height:0}.toolrail{order:2;flex:0 0 61px;height:61px!important;min-height:61px!important;width:100%;display:flex!important;flex-direction:row!important;overflow-x:auto!important;overflow-y:hidden!important;border-top:1px solid #292929!important;border-bottom:0!important;padding:6px!important;scroll-snap-type:x proximity}
  .tool{min-width:64px!important;height:47px!important;flex:0 0 64px!important;scroll-snap-align:start}.tool.active:before{bottom:-6px!important}
  .panel-head{height:37px!important;flex:0 0 37px}.panel-body{min-height:0;overflow:auto!important}.assets-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .inspector{order:3;width:100%;max-height:310px;min-height:180px;overflow:auto!important;flex:none}.empty-inspector{min-height:180px}.inspector-content{max-height:310px;overflow:auto}
  .timeline-shell{width:calc(100% - 12px)!important;height:360px!important;min-height:360px!important;flex:0 0 360px;margin:0 6px 8px!important;overflow:hidden}
  .timeline-toolbar{height:39px!important;overflow-x:auto;overflow-y:hidden;padding:0 5px!important}.timeline-tools,.zoom-tools{flex:0 0 auto}.scene-pill{display:none!important}.tl-btn{flex:0 0 auto}.tl-btn.tl-wide span:last-child{display:none!important}.tl-btn.tl-wide{min-width:33px!important;padding:0 6px!important}.zoom-range{width:68px!important}
  .timeline-scroll{overflow:auto!important;-webkit-overflow-scrolling:touch}.track-area{min-height:280px}.track-lanes{min-height:280px}
  .animation-preview-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:5px}.animation-preview-card{padding:3px}.animation-preview-card b{font-size:6.6px}.effect-preview-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.template-visual-grid{grid-template-columns:1fr 1fr}.sticker-grid-plus{grid-template-columns:repeat(7,minmax(0,1fr))}.graphics-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
  .context-menu{position:fixed!important;max-width:calc(100vw - 16px);min-width:min(270px,calc(100vw - 16px))!important}
  .modal{width:min(94vw,560px)!important;max-height:90dvh;overflow:auto}.modal-backdrop{position:fixed!important}
}
@media(max-width:560px){
  .topbar{height:52px!important;min-height:52px}.project-title{max-width:80px}.ratio-select{max-width:84px!important}.export{padding:0 8px!important}.export span{font-size:8px}.brand-logo{width:25px!important;height:25px!important}
  .preview-pane{height:300px!important;min-height:300px!important}.left-pane{height:315px!important;min-height:315px!important}.inspector{max-height:270px}.timeline-shell{height:335px!important;min-height:335px!important;flex-basis:335px!important}
  .assets-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px}.asset-name{font-size:8px!important}.asset-actions{display:grid;grid-template-columns:1fr}.asset-mini{font-size:6.8px!important;padding:4px 2px!important}
  .tool{min-width:58px!important;flex-basis:58px!important}.tool-label{font-size:6.6px!important}.tool svg{width:17px!important;height:17px!important}.tool-glyph{font-size:16px!important}
  .panel-actions{gap:3px}.head-mini{display:none!important}.import-btn{padding:0 7px!important;font-size:8px!important}
  .animation-preview-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}.effect-preview-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.template-visual-grid{grid-template-columns:1fr!important}.sticker-grid-plus{grid-template-columns:repeat(6,minmax(0,1fr))}.graphics-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .template-visual-card>small{min-height:0}.sfx-row{grid-template-columns:29px minmax(0,1fr) 51px;gap:5px;padding:6px}.sfx-add{padding:0 4px}.caption-inline{grid-template-columns:1fr 64px}
  .timecode{max-width:116px;overflow:hidden;white-space:nowrap}.viewer-actions .icon-btn{display:none}
}
/* Final dark-only theme normalization: no purple editor chrome. */
body.editor-page,.editor,.topbar{background:#101010!important}
.topbar{border-color:#262626!important}
.release-mini{border-color:#3b3b3b!important;color:#9b9b9b!important;background:#191919!important}
.export{background:#168ee0!important;box-shadow:inset 0 0 0 1px #ffffff18,0 0 0 1px #0c74ad!important}
.primary-small,.btn.primary{background:#168ee0!important;box-shadow:none!important}
.clip.selected{outline-color:#18a9e8!important;border-color:#18a9e8!important}
.playhead,.playhead:before{background:#18a9e8!important}
.template:hover{border-color:#444!important}
.project-title[contenteditable="true"]:focus{outline-color:#3e7187!important}
.setting-card,.kbd-chip,.modal,.project-export-box{background:#1d1d1d!important;border-color:#303030!important}
.kbd-chip{color:#969696!important}
.modal-row input,.modal-row select,.btn{background:#222!important;border-color:#393939!important;color:#d0d0d0!important}
.btn.primary{color:#fff!important}
.asset-action,.asset-mini,.audio-action,.ins-action,.preset-btn,.template-card,.video-template{background:#202020!important;border-color:#333!important;color:#a8a8a8!important}
.asset-action:hover,.asset-mini:hover,.audio-action:hover,.ins-action:hover,.preset-btn:hover,.preset-btn.active,.template-card:hover,.video-template:hover{background:#292929!important;border-color:#444!important;color:#fff!important}
.template-use{background:#252525!important;color:#9ddcf5!important}.template-use:hover{background:#303030!important;color:#fff!important}
.drop-hint.show{border-color:#287a9c!important;color:#8bdaf8!important;background:#1a2930!important}
.clip.overlay{background:#203039!important}.clip.overlay .clip-name{color:#d9f4ff!important}
.asset-thumb.audio{background:linear-gradient(135deg,#1f3330,#151b1a)!important}.asset-thumb.audio:after{color:#63d8b7!important}
.render-screen{background:radial-gradient(circle at 50% 28%,#18303a 0,#101010 44%,#090909 100%)!important}
.render-card{background:#171717ee!important;border-color:#343434!important}
.render-icon,.render-progress i{background:#168ee0!important;box-shadow:none!important}.render-meta strong{color:#6fd7ff!important}
.context-menu{background:#1b1b1b!important;border-color:#353535!important}.context-menu hr{border-color:#333!important}
.mobile-tip{display:none!important}
#themeBtn{display:none!important}


/* VioVid 5.2 — unlimited lanes, audio lab and mobile refinement */
.track-label[data-lane-index]{position:relative}.track-label[data-track-head="overlay"] span,.track-label[data-track-head="audio"] span,.track-label[data-track-head="effect"] span{max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lane[data-track="audio"]{background:linear-gradient(90deg,#17322220,transparent)}.lane[data-track="effect"]{background:linear-gradient(90deg,#34221f18,transparent)}
.clip-feature-badge{position:relative;z-index:6;display:inline-flex;align-items:center;height:14px;margin:17px 3px 0 0;padding:0 4px;border-radius:99px;background:#0d6f91;color:#e9fbff;font-size:6px;font-style:normal;font-weight:900;box-shadow:0 0 0 1px #36bdea55}
.vv-audio-pro-inspector{display:none}.vv-audio-pro-inspector.show{display:block}.audio-pro-badge-row{display:flex;justify-content:space-between;align-items:center;padding:7px 8px;margin-bottom:9px;border:1px solid #2b3d45;border-radius:7px;background:#182226;color:#8fdfff;font-size:8px}.audio-pro-badge-row b{font-size:10px;color:#fff}.vv-audio-pro-inspector output{min-width:40px;text-align:right;color:#8fdfff;font-size:8px}.audio-8d-main{border-color:#2b7794!important;color:#bcefff!important}.audio-safe-note{display:block;margin-top:8px;color:#6f777b;font-size:7px;line-height:1.45}
.vv-audio-lab{display:grid;gap:8px;margin-bottom:10px}.audio-lab-head{border-color:#29414b!important;background:linear-gradient(135deg,#182126,#15191b)!important}.audio-lab-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.audio-lab-card{min-height:65px;padding:9px;border:1px solid #303a3e;border-radius:9px;background:#1d2224;color:#b9c3c7;text-align:left;cursor:pointer}.audio-lab-card:hover{border-color:#2c86aa;background:#202b2f}.audio-lab-card.primary{grid-column:1/-1;background:linear-gradient(135deg,#173747,#1c262b);border-color:#2b7898}.audio-lab-card b{display:block;font-size:10px;color:#e7f8ff}.audio-lab-card small{display:block;margin-top:4px;color:#718087;font-size:7px;line-height:1.35}.audio-lab-tip{padding:8px 9px;border:1px dashed #334047;border-radius:8px;color:#718087;font-size:7.2px;line-height:1.45}
.text-style-card{position:relative}.text-pro{position:absolute!important;top:5px;right:5px;z-index:3}
@media(max-width:900px){.workspace{min-height:0}.asset-panel{min-width:0}.panel-body{padding-bottom:12px}.timeline-scroll{max-height:100%;overflow:auto!important}.track-labels{position:absolute!important}.audio-lab-grid{grid-template-columns:1fr 1fr}.inspector-content.show{overflow:auto}.inspector{overscroll-behavior:contain}.text-style-card span{font-size:clamp(16px,5vw,24px)!important}}
@media(max-width:560px){.editor{grid-template-rows:52px auto 350px!important}.left-pane{height:300px!important;min-height:300px!important}.preview-pane{height:280px!important;min-height:280px!important}.timeline-shell{height:350px!important;min-height:350px!important;flex-basis:350px!important}.timeline-toolbar{position:sticky;top:0;z-index:20;background:#181818}.panel-body{padding:8px!important}.asset-panel{width:100%!important}.audio-lab-card{min-height:58px;padding:8px}.track-label{padding-right:5px;font-size:7px}.clip{min-width:26px}.preview-seek-wrap{padding-inline:9px}.transport{padding-inline:8px!important}.viewer-actions .frame4k-btn span{display:none}.mobile-tip{font-size:7px;line-height:1.35;padding:7px 10px}.text-style-grid{grid-template-columns:1fr 1fr!important;gap:6px}.text-style-card{min-height:74px}.text-style-card span{font-size:18px!important}}
@media(max-width:390px){.left-pane{height:285px!important;min-height:285px!important}.preview-pane{height:260px!important;min-height:260px!important}.timeline-shell{height:330px!important;min-height:330px!important;flex-basis:330px!important}.text-style-grid{grid-template-columns:1fr!important}.audio-lab-grid{grid-template-columns:1fr}.audio-lab-card.primary{grid-column:auto}}