/* SVGA editor page — builds on styles.css (panel, blocks, sliders, preview). */

.drop[hidden],.empty[hidden]{display:none}

.editor-sec{padding-top:clamp(28px,4vw,48px)}
.editor-title{
  margin:0;font-family:var(--display);font-weight:700;font-size:clamp(28px,3.6vw,40px);letter-spacing:-.03em;
}
.editor-title em{
  font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}

.file-info{margin:4px 0 18px}
.file-info .name{font-family:var(--display);font-weight:600;font-size:15px;word-break:break-all;margin-bottom:8px}
.info-grid{display:grid;grid-template-columns:auto 1fr;gap:5px 16px;margin:0 0 8px;font-size:13.5px}
.info-grid dt{color:var(--dim)}
.info-grid dd{margin:0;color:var(--muted);font-variant-numeric:tabular-nums}

.edit-blocks{border:0;margin:0;padding:0;min-width:0;transition:opacity .2s}
.edit-blocks:disabled{opacity:.45}
.trim-hint{margin-top:4px}
.seg-wrap{flex-wrap:wrap}
.block .hint{margin-top:8px}

.audio-pick{
  display:flex;align-items:center;gap:10px;margin-top:12px;padding:11px 13px;border-radius:12px;cursor:pointer;
  border:1.5px dashed var(--line);background:rgba(19,16,32,.55);font-size:13.5px;color:var(--muted);
  transition:border-color .16s;
}
.audio-pick:hover{border-color:var(--purple)}
.audio-pick.has-file{border-style:solid;color:var(--text)}
.audio-pick input{display:none}
.audio-pick[hidden]{display:none}

.apply-row{display:grid;grid-template-columns:1fr auto;gap:10px;margin-top:6px}

.compare-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.compare-stats .stat b{display:block}
.compare-stats .stat i{font-style:normal;color:var(--dim);font-size:11.5px}
.compare-stats .stat.better b{color:var(--live)}

@media (max-width:620px){
  .compare-stats{grid-template-columns:repeat(2,1fr)}
  .apply-row{grid-template-columns:1fr}
}

/* customize */
.cz-tabs{margin-bottom:12px}
.cz-panel[hidden],.cz-fields[hidden],.layer-edit[hidden]{display:none}
.cz-fields{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.cz-inline{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.text-in{
  background:var(--ink-3);border:1px solid var(--line);border-radius:10px;padding:9px 11px;font-size:14px;color:var(--text);
  font-family:inherit;min-width:0;
}
.text-in:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 3px rgba(167,87,210,.18)}
select.text-in{flex:1}
.color-in{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);cursor:pointer}
.color-in input{width:34px;height:34px;border:1px solid var(--line);border-radius:10px;padding:0;background:none;cursor:pointer}
.color-in input::-webkit-color-swatch-wrapper{padding:0}
.color-in input::-webkit-color-swatch{border:0;border-radius:9px}

.layer-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:8px;margin:10px 0;max-height:260px;overflow:auto;padding:2px}
.layer{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px;border-radius:12px;cursor:pointer;
  background:var(--ink-3);border:1px solid var(--line);color:var(--muted);font-size:10.5px;transition:border-color .16s;
}
.layer:hover{border-color:#3D3360}
.layer.active{border-color:var(--purple);box-shadow:0 0 0 1px rgba(167,87,210,.4)}
.layer img{width:100%;aspect-ratio:1;object-fit:contain;border-radius:8px;
  background:repeating-conic-gradient(#181428 0 25%,#100D1C 0 50%) 0 0/12px 12px}
.layer span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.layer i{position:absolute;top:4px;right:4px;font-style:normal;font-size:9.5px;font-weight:600;padding:1px 5px;border-radius:6px;
  background:var(--grad);color:#07060E}
.layer.is-hidden img{opacity:.25}
.layer.is-hidden i{background:var(--danger)}
.layer-edit{display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:14px;background:var(--ink-2);border:1px solid var(--line)}
.layer-edit-head{display:flex;gap:10px;align-items:center}
.layer-edit-head img{width:54px;height:54px;object-fit:contain;border-radius:10px;
  background:repeating-conic-gradient(#181428 0 25%,#100D1C 0 50%) 0 0/12px 12px}
.layer-edit-head b{display:block;font-family:var(--display);font-size:14px;word-break:break-all}
.layer-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.layer-row .text-in{flex:1}
.layer-actions{display:flex;gap:8px;flex-wrap:wrap}
.layer-edit code{color:var(--pink)}

/* live preview of text / logo on the phone */
.overlay-layer{position:absolute;inset:0;z-index:3;pointer-events:none}
.overlay-layer img{position:absolute;pointer-events:auto;cursor:grab;touch-action:none;user-select:none;-webkit-user-drag:none}
.overlay-layer img:active{cursor:grabbing}
.overlay-layer img:hover{outline:1px dashed rgba(255,255,255,.5)}