.editor{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}

/* ---------- Stage column ---------- */
.format-row{display:flex;align-items:center;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.format-label{font-weight:700;color:var(--ink-soft)}
.format-actions{margin-left:auto}
.seg{display:inline-flex;background:#fff;border:1px solid var(--line-2);border-radius:12px;padding:4px;gap:4px}
.seg.small{padding:3px}
.seg-btn{padding:8px 14px;border-radius:9px;font-weight:700;font-size:13px;color:var(--ink-soft);transition:.15s}
.seg.small .seg-btn{padding:6px 12px;font-size:14px}
.seg-btn.is-active{background:var(--brand);color:#fff;box-shadow:0 4px 12px rgba(124,92,255,.3)}

.stage-wrap{
  background:#0f1117;border-radius:var(--radius);overflow:hidden;
  display:grid;place-items:center;box-shadow:var(--shadow-lg);position:relative;
  width:100%;
}
.stage-wrap[data-format="16:9"]{aspect-ratio:16/9}
.stage-wrap[data-format="9:16"]{aspect-ratio:9/16;max-width:460px;margin:0 auto}

.dropzone{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  color:#cfd3e0;text-align:center;padding:24px;cursor:pointer;transition:.15s;
}
.dropzone.drag{background:rgba(124,92,255,.12);outline:2px dashed var(--brand-2);outline-offset:-14px}
.dz-icon{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;background:rgba(255,255,255,.08);color:#fff}
.dz-icon svg{width:30px;height:30px}
.dz-title{font-size:17px;font-weight:700;color:#fff}
.dz-sub{font-size:13px;color:#9aa1b3;line-height:1.6}
.btn-primary-sm{margin-top:8px;background:var(--brand);color:#fff;font-weight:700;padding:10px 20px;border-radius:11px}
.btn-primary-sm:hover{background:#6a49f0}

.canvas-host{position:absolute;inset:0;width:100%;height:100%}
.canvas-host canvas{width:100%;height:100%;display:block;touch-action:none;cursor:grab}
.layer-overlay{position:absolute;inset:0;pointer-events:none}

/* selection box drawn by JS */
.sel-box{position:absolute;border:1.5px solid var(--brand-2);border-radius:4px;pointer-events:none;box-shadow:0 0 0 1px rgba(0,0,0,.3)}
.sel-handle{position:absolute;width:14px;height:14px;background:#fff;border:2px solid var(--brand);border-radius:50%;pointer-events:auto;}
.sel-handle.se{right:-7px;bottom:-7px;cursor:nwse-resize}
.sel-rot{position:absolute;left:50%;top:-26px;transform:translateX(-50%);width:14px;height:14px;background:#fff;border:2px solid var(--brand);border-radius:50%;cursor:grab;pointer-events:auto}
.sel-del{position:absolute;right:-11px;top:-11px;width:22px;height:22px;display:grid;place-items:center;background:#e5484d;color:#fff;border:2px solid #fff;border-radius:50%;cursor:pointer;pointer-events:auto;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.sel-del:hover{background:#d3373c}
.sel-del svg{display:block}

.stage-toolbar{display:flex;align-items:center;gap:10px;margin-top:14px;flex-wrap:wrap}
.stage-toolbar .grow{flex:1}
.btn-soft{background:#fff;border:1px solid var(--line-2);color:var(--ink);font-weight:700;font-size:13px;padding:10px 14px;border-radius:11px;display:inline-flex;align-items:center;gap:7px;transition:.15s}
.btn-soft:hover{border-color:var(--brand-2);color:var(--brand)}
.btn-soft.sm{padding:8px 12px;font-size:12.5px}
.btn-soft svg{width:16px;height:16px}
.btn-accent{background:linear-gradient(135deg,var(--brand),#5b8cff);color:#fff;font-weight:700;font-size:13px;padding:10px 18px;border-radius:11px;display:inline-flex;align-items:center;gap:7px;box-shadow:0 8px 20px rgba(124,92,255,.3);transition:.15s}
.btn-accent:hover{transform:translateY(-1px)}
.btn-accent svg{width:16px;height:16px}

/* ---------- Panel column ---------- */
.panel-col{display:flex;flex-direction:column;gap:16px;position:sticky;top:72px}
.panel-block{}
.panel-hint{color:var(--muted);font-size:12.5px;line-height:1.5;margin-bottom:12px}

/* Карусель шаблонов */
.carousel-nav{display:inline-flex;gap:6px}
.cnav{width:26px;height:26px;border-radius:8px;border:1px solid var(--line-2);background:#fff;color:var(--ink-soft);font-size:16px;font-weight:700;line-height:1;display:grid;place-items:center;transition:.15s}
.cnav:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-soft)}
.carousel{
  display:flex;gap:10px;overflow-x:auto;scroll-behavior:smooth;padding:2px 2px 8px;
  scrollbar-width:thin;scrollbar-color:var(--line-2) transparent;
}
.carousel::-webkit-scrollbar{height:6px}
.carousel::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:6px}

.preset,.comp{
  flex:0 0 auto;border:1px solid var(--line-2);border-radius:12px;padding:0;background:#262a38;overflow:hidden;
  display:flex;flex-direction:column;cursor:pointer;transition:.15s;
}
.preset:hover,.comp:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--brand)}
.preset{width:96px}
.comp{width:140px}
.preset canvas,.comp canvas,.comp-prev{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover}

/* чипы категорий шаблонов */
.cat-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.cat-chip{padding:5px 11px;border:1px solid var(--line);background:#fff;border-radius:999px;font-size:12px;font-weight:700;color:var(--ink-soft);cursor:pointer;white-space:nowrap;transition:.15s}
.cat-chip:hover{border-color:var(--brand);color:var(--ink)}
.cat-chip.is-active{background:var(--brand);border-color:var(--brand);color:#fff}
.preset small,.comp small{padding:6px 4px;text-align:center;font-size:10.5px;font-weight:800;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.03em;background:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Панель фона */
.bg-bar{display:flex;align-items:center;gap:14px;margin-top:12px;flex-wrap:wrap;background:#fff;border:1px solid var(--line-2);border-radius:12px;padding:10px 14px}
.bg-hint{font-size:12.5px;color:var(--ink-soft);font-weight:600}
.bg-zoom{display:flex;align-items:center;gap:10px;flex:1;min-width:180px}
.bg-zoom span{font-size:12px;font-weight:700;color:var(--ink-soft);white-space:nowrap}
.bg-zoom input{flex:1}

/* fields */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.field>span{font-size:12px;font-weight:700;color:var(--ink-soft);display:flex;justify-content:space-between}
.field textarea,.field select,.field input[type=text]{
  width:100%;border:1px solid var(--line-2);border-radius:10px;padding:9px 11px;font-family:inherit;font-size:13px;color:var(--ink);resize:vertical;background:#fff;
}
.field textarea:focus,.field select:focus{outline:none;border-color:var(--brand-2)}
input[type=range]{width:100%;accent-color:var(--brand)}
.field.row2{flex-direction:row;gap:10px}
.mini{display:flex;flex-direction:column;gap:6px;flex:1}
.mini span{font-size:12px;font-weight:700;color:var(--ink-soft)}
.mini input[type=color]{width:100%;height:36px;border:1px solid var(--line-2);border-radius:10px;background:#fff;padding:3px;cursor:pointer}

.switch-row{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:var(--ink);margin:6px 0 12px;cursor:pointer}
.switch-row span{flex:1}
.switch-row input{display:none}
.switch{width:40px;height:22px;border-radius:20px;background:var(--line-2);position:relative;transition:.18s;flex-shrink:0}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.18s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.switch-row input:checked + .switch{background:var(--brand)}
.switch-row input:checked + .switch::after{transform:translateX(18px)}

.icon-btn{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;color:var(--muted);font-weight:700}
.icon-btn.danger:hover{background:#ffe8ec;color:#ff3b5c}

.layer-actions{display:flex;gap:8px;margin-top:6px}
.layer-actions .btn-soft{flex:1;justify-content:center}

.layers-list{display:flex;flex-direction:column;gap:8px}
.layer-row{display:flex;align-items:center;gap:8px;padding:9px 11px;border:1px solid var(--line);border-radius:10px;cursor:pointer;transition:.15s;background:#fff}
.layer-row:hover{border-color:var(--brand-2)}
.layer-row.is-active{border-color:var(--brand);background:var(--brand-soft)}
.layer-row.is-img .lr-text{color:#2a6b3a}
.layer-row .lr-text{flex:1;font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.layer-row .lr-ord{display:inline-flex;gap:2px}
.layer-row .lr-up,.layer-row .lr-down{width:22px;height:22px;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:6px;background:#fff;color:var(--ink-soft);font-size:12px;line-height:1;cursor:pointer;transition:.12s}
.layer-row .lr-up:hover,.layer-row .lr-down:hover{border-color:var(--brand);color:var(--brand)}
.layer-row .lr-up:disabled,.layer-row .lr-down:disabled{opacity:.35;cursor:default}
.layer-row .lr-del{color:var(--muted);font-weight:700;padding:2px 6px}
.layer-row .lr-del:hover{color:#ff3b5c}

/* подсветка холста при перетаскивании картинки */
.canvas-host.drop-hi::after{content:'Бросьте картинку — добавится слоем';position:absolute;inset:0;display:grid;place-items:center;background:rgba(124,92,255,.12);border:3px dashed var(--brand);border-radius:14px;color:#fff;font-weight:800;font-size:15px;text-shadow:0 1px 6px rgba(0,0,0,.6);pointer-events:none;z-index:5}

/* ---------- Modal ---------- */
.modal{position:fixed;inset:0;background:rgba(15,17,23,.6);backdrop-filter:blur(4px);display:grid;place-items:center;z-index:100;padding:20px}
.modal-card{background:#fff;border-radius:20px;padding:24px;max-width:560px;width:100%;position:relative;box-shadow:var(--shadow-lg)}
.modal-card h3{font-size:20px;font-weight:800}
.modal-card img{width:100%;border-radius:12px;margin:14px 0;border:1px solid var(--line)}
.modal-close{position:absolute;top:14px;right:16px;font-size:18px;color:var(--muted)}
.modal-actions{display:flex;gap:10px}
.modal-actions .btn-accent,.modal-actions .btn-soft{flex:1;justify-content:center;text-align:center}

@media(max-width:1080px){
  .editor{grid-template-columns:1fr}
  .panel-col{position:static}
}