:root{
  --bg:#0e1013; --panel:#15181d; --panel2:#1a1e24; --line:#262b33; --line2:#333a44;
  --tx:#e7eaef; --tx2:#9aa3b0; --tx3:#6c7480;
  --acc:#4d8dff; --acc2:#2f6bff; --ok:#3ecf8e; --warn:#ffb020; --err:#ff5c5c;
  --r:8px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--tx);
  font:13px/1.45 -apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;
  overflow:hidden; -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font:inherit;color:inherit}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#2b313a;border-radius:5px;border:2px solid var(--panel)}
::-webkit-scrollbar-track{background:transparent}

/* ── шапка ── */
header{
  height:44px; display:flex; align-items:center; gap:14px; padding:0 12px;
  background:var(--panel); border-bottom:1px solid var(--line); flex:0 0 auto;
}
.logo{font-weight:700;letter-spacing:.02em}
.logo span{color:var(--acc)}
.tabs{display:flex;gap:2px;background:var(--panel2);border-radius:var(--r);padding:3px}
.tabs button{
  background:none;border:0;padding:5px 14px;border-radius:6px;cursor:pointer;color:var(--tx2);
}
.tabs button.on{background:var(--acc2);color:#fff}
header .sp{flex:1}
.ghost{background:var(--panel2);border:1px solid var(--line2);border-radius:6px;padding:5px 12px;cursor:pointer;color:var(--tx2)}
.ghost:hover{border-color:var(--acc);color:var(--tx)}

/* ── раскладка ── */
#app{height:100vh;display:flex;flex-direction:column}
.view{flex:1;display:none;min-height:0}
.view.on{display:flex}
.col{overflow-y:auto;overflow-x:hidden;background:var(--panel);border-right:1px solid var(--line);flex:0 0 auto}
.col.right{border-right:0;border-left:1px solid var(--line)}
#left{width:290px} #right{width:310px}
.stage{flex:1;display:flex;flex-direction:column;min-width:0;background:#0a0c0e}

/* ── группы контролов ── */
.grp{border-bottom:1px solid var(--line)}
.grp>h3{
  margin:0;padding:9px 12px;font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--tx3);cursor:pointer;display:flex;align-items:center;gap:6px;user-select:none
}
.grp>h3::before{content:'▾';font-size:9px;color:var(--tx3);transition:transform .15s}
.grp.closed>h3::before{transform:rotate(-90deg)}
.grp.closed .body{display:none}
.body{padding:0 12px 12px;display:flex;flex-direction:column;gap:9px}

.row{display:flex;align-items:center;gap:8px}
.row>label{flex:0 0 78px;color:var(--tx2);font-size:12px}
.row.wide>label{flex:0 0 100px}
.grow{flex:1;min-width:0}
input[type=text],input[type=number],select,textarea{
  background:var(--panel2);border:1px solid var(--line2);border-radius:6px;padding:6px 8px;width:100%;outline:none
}
input:focus,select:focus,textarea:focus{border-color:var(--acc)}
textarea{resize:vertical;min-height:74px;font-size:14px;line-height:1.35}
input[type=range]{-webkit-appearance:none;background:none;height:18px;width:100%}
input[type=range]::-webkit-slider-runnable-track{height:3px;background:var(--line2);border-radius:2px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:var(--acc);margin-top:-5px;cursor:pointer}
input[type=color]{-webkit-appearance:none;border:1px solid var(--line2);border-radius:6px;width:34px;height:26px;padding:0;background:none;cursor:pointer}
input[type=color]::-webkit-color-swatch-wrapper{padding:2px}
input[type=color]::-webkit-color-swatch{border:0;border-radius:4px}
.num{flex:0 0 52px;text-align:right;color:var(--tx2);font-variant-numeric:tabular-nums;font-size:11px}
.seg{display:flex;background:var(--panel2);border:1px solid var(--line2);border-radius:6px;overflow:hidden}
.seg button{flex:1;background:none;border:0;padding:5px 0;cursor:pointer;color:var(--tx2);font-size:12px}
.seg button.on{background:var(--acc2);color:#fff}
.chk{display:flex;align-items:center;gap:7px;cursor:pointer;color:var(--tx2)}
.chk input{accent-color:var(--acc);width:14px;height:14px}
.hint{color:var(--tx3);font-size:11px;line-height:1.35}

/* ── сцена ── */
.toolbar{
  height:38px;display:flex;align-items:center;gap:10px;padding:0 12px;
  background:var(--panel);border-bottom:1px solid var(--line);flex:0 0 auto
}
.canvasWrap{flex:1;display:flex;align-items:center;justify-content:center;padding:16px;min-height:0;position:relative}
#preview{max-width:100%;max-height:100%;box-shadow:0 8px 40px rgba(0,0,0,.6);border-radius:2px}
.transport{
  height:46px;display:flex;align-items:center;gap:10px;padding:0 12px;
  background:var(--panel);border-top:1px solid var(--line);flex:0 0 auto
}
.play{width:30px;height:30px;border-radius:50%;border:0;background:var(--acc2);color:#fff;cursor:pointer;font-size:12px}
.time{font-variant-numeric:tabular-nums;color:var(--tx2);font-size:12px;min-width:82px}

/* ── пресеты ── */
.pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.pcard{
  background:var(--panel2);border:1px solid var(--line2);border-radius:7px;padding:8px 7px;cursor:pointer;
  text-align:left;font-size:11.5px;line-height:1.25;color:var(--tx2);transition:.12s
}
.pcard:hover{border-color:var(--acc);color:var(--tx)}
.pcard.on{background:var(--acc2);border-color:var(--acc);color:#fff}
.pcard i{display:block;font-style:normal;font-size:9.5px;color:var(--tx3);margin-top:2px;text-transform:uppercase;letter-spacing:.05em}
.pcard.on i{color:rgba(255,255,255,.7)}

/* ── SFX ── */
.sfxlist{display:flex;flex-direction:column;gap:3px;max-height:290px;overflow-y:auto}
.sfxrow{display:flex;align-items:center;gap:6px;padding:5px 7px;border-radius:6px;background:var(--panel2);font-size:11.5px}
.sfxrow:hover{background:#1f242c}
.sfxrow .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mini{background:none;border:1px solid var(--line2);border-radius:5px;color:var(--tx2);cursor:pointer;padding:2px 7px;font-size:11px}
.mini:hover{border-color:var(--acc);color:var(--tx)}
.mini.acc{background:var(--acc2);border-color:var(--acc2);color:#fff}
.tag{font-size:9.5px;color:var(--tx3);text-transform:uppercase;letter-spacing:.06em}

/* ── кнопки экспорта ── */
.btn{
  background:var(--acc2);border:0;border-radius:7px;padding:9px 14px;cursor:pointer;color:#fff;font-weight:600;width:100%
}
.btn:hover{background:#3b78ff}
.btn:disabled{opacity:.45;cursor:default}
.btn.sec{background:var(--panel2);border:1px solid var(--line2);color:var(--tx2);font-weight:500}
.btn.sec:hover{border-color:var(--acc);color:var(--tx)}
.bar{height:4px;background:var(--panel2);border-radius:2px;overflow:hidden}
.bar>i{display:block;height:100%;background:var(--acc);width:0;transition:width .2s}
.log{font-size:11px;color:var(--tx3);white-space:pre-wrap;max-height:120px;overflow:auto}
.done{color:var(--ok)} .err{color:var(--err)}

/* ── цветокор ── */
.gradeWrap{flex:1;display:flex;min-height:0}
.gview{flex:1;display:flex;flex-direction:column;min-width:0;background:#0a0c0e}
.cmp{flex:1;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:16px}
.cmpBox{position:relative;max-width:100%;max-height:100%;line-height:0;box-shadow:0 8px 40px rgba(0,0,0,.6)}
.cmpBox img{max-width:100%;max-height:calc(100vh - 220px);display:block}
.cmpBox .after{position:absolute;inset:0;overflow:hidden;width:50%}
.cmpBox .after img{max-width:none;height:100%}
.cmpBox .handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;cursor:ew-resize;box-shadow:0 0 8px rgba(0,0,0,.6)}
.cmpBox .handle::after{content:'';position:absolute;top:50%;left:-9px;width:20px;height:20px;margin-top:-10px;border-radius:50%;background:#fff}
.badge{position:absolute;top:8px;padding:2px 8px;border-radius:4px;background:rgba(0,0,0,.6);font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.vlist{display:flex;flex-direction:column;gap:2px;max-height:220px;overflow:auto}
.vrow{padding:6px 8px;border-radius:6px;background:var(--panel2);cursor:pointer;font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vrow:hover{background:#1f242c}
.vrow.on{background:var(--acc2);color:#fff}
code.vf{display:block;background:var(--panel2);border:1px solid var(--line2);border-radius:6px;padding:8px;font-size:10.5px;word-break:break-all;color:var(--tx2);max-height:110px;overflow:auto}
/* ── окно выгрузки ── */
.busy{
  position:fixed;inset:0;background:rgba(8,10,13,.82);backdrop-filter:blur(3px);
  z-index:60;display:flex;align-items:center;justify-content:center
}
.busy[hidden]{display:none}
.busyBox{
  background:var(--panel);border:1px solid var(--line2);border-radius:12px;padding:20px;
  width:330px;display:flex;flex-direction:column;gap:12px;box-shadow:0 20px 60px rgba(0,0,0,.6)
}
.busyTitle{font-weight:600;font-size:14px}
.busySub{color:var(--tx2);font-size:12px;font-variant-numeric:tabular-nums;min-height:16px}
#busyPreview{width:100%;max-height:260px;object-fit:contain;background:#0c0e12;border-radius:6px}

.toast{
  position:fixed;bottom:16px;left:50%;transform:translateX(-50%);background:var(--panel2);
  border:1px solid var(--line2);border-radius:8px;padding:9px 16px;z-index:50;box-shadow:0 8px 30px rgba(0,0,0,.5)
}

/* ── веб-версия: телефоны и планшеты ── */
.hideSmall{display:inline}
@media (max-width:900px){
  body{overflow:auto}
  #app{height:auto;min-height:100vh}
  header{position:sticky;top:0;z-index:20;flex-wrap:wrap;height:auto;padding:8px 10px;gap:8px}
  .hideSmall{display:none}
  #templates{width:100%!important;order:3}
  .view.on{flex-direction:column}
  .col{width:100%!important;max-height:none;border-right:0;border-top:1px solid var(--line)}
  .stage{order:-1;position:sticky;top:52px;z-index:10;background:#0a0c0e}
  .canvasWrap{height:46vh;padding:8px}
  #preview{max-height:46vh}
  .toolbar{flex-wrap:wrap;height:auto;padding:6px 8px;gap:6px}
  .toolbar .seg{width:100%!important}
  .transport{flex-wrap:wrap;height:auto;padding:8px;gap:8px}
  .transport .grow{order:-1;width:100%;flex:1 0 100%}
  #btnExportMain{flex:1}
  .pgrid{grid-template-columns:repeat(2,1fr)}
  .busyBox{width:calc(100vw - 32px)}
  .row>label{flex:0 0 84px}
}
@media (max-width:420px){
  .pgrid{grid-template-columns:1fr}
  .canvasWrap{height:40vh}
  #preview{max-height:40vh}
}