/* ===== Ontools editor ===== */
.ot-editor{--e-bg:#eef0f6;--e-panel:#fff;--e-line:#e5e7eb;--e-ink:#111827;--e-mute:#6b7280;--e-acc:#5b5bd6;position:relative;display:flex;flex-direction:column;height:min(86vh,860px);min-height:560px;background:var(--e-bg);border:1px solid var(--e-line);border-radius:16px;overflow:hidden;color:var(--e-ink);font:14px/1.4 Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;box-shadow:0 20px 50px -30px rgba(17,24,39,.35)}
.ot-editor *{box-sizing:border-box}
.ot-editor button{font:inherit;color:inherit;cursor:pointer}
.ot-editor svg{display:block}
.ot-topbar{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 12px;background:#fff;border-bottom:1px solid var(--e-line);z-index:5}
.ot-tb-left,.ot-tb-right{display:flex;align-items:center;gap:4px}
.ot-ib{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;border:0;background:transparent;border-radius:8px;font-size:18px}
.ot-ib:hover:not(:disabled){background:#f3f4f6}
.ot-ib:disabled{opacity:.35;cursor:default}
.ot-zoom{border:0;background:transparent;min-width:56px;height:36px;border-radius:8px;font-weight:600;font-size:13px}
.ot-zoom:hover{background:#f3f4f6}
.ot-size{color:var(--e-mute);font-size:12px;margin-left:6px;white-space:nowrap}
.ot-sep{width:1px;height:22px;background:var(--e-line);margin:0 6px}
.ot-btn{display:inline-flex;align-items:center;gap:8px;justify-content:center;height:38px;padding:0 16px;border-radius:10px;border:1px solid transparent;font-weight:600;font-size:14px;list-style:none;user-select:none;cursor:pointer;white-space:nowrap}
.ot-btn::-webkit-details-marker{display:none}
.ot-btn-primary{background:var(--e-acc);color:#fff}
.ot-btn-primary:hover{background:#4b4bc4}
.ot-btn-ghost{background:#fff;border-color:var(--e-line)}
.ot-btn-ghost:hover{background:#f9fafb}
.ot-btn-sm{height:32px;padding:0 12px;font-size:13px}
.ot-btn-block{width:100%;margin:6px 0}
.ot-menu{position:relative}
.ot-menu-list{position:absolute;top:calc(100% + 6px);left:0;min-width:240px;background:#fff;border:1px solid var(--e-line);border-radius:12px;box-shadow:0 18px 40px -12px rgba(0,0,0,.25);padding:6px;z-index:30}
.ot-menu-right{left:auto;right:0}
.ot-menu-list button{display:block;width:100%;text-align:left;border:0;background:transparent;padding:10px 12px;border-radius:8px}
.ot-menu-list button:hover{background:#f3f4f6}
.ot-menu-list b{display:block;font-size:14px}
.ot-menu-list small{color:var(--e-mute);font-size:12px}
.ot-restore{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 12px;background:#fef9c3;border-bottom:1px solid #fde68a;font-size:13px}
.ot-restore[hidden]{display:none}
.ot-body{flex:1;display:flex;min-height:0;position:relative}
.ot-rail{width:76px;flex:none;background:#fff;border-right:1px solid var(--e-line);display:flex;flex-direction:column;padding:6px 0;overflow-y:auto}
.ot-rail button{border:0;background:transparent;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 2px;font-size:11px;color:#4b5563;border-left:3px solid transparent}
.ot-rail button:hover{color:var(--e-ink);background:#f9fafb}
.ot-rail button.on{color:var(--e-acc);border-left-color:var(--e-acc);background:#f5f5ff}
.ot-panel{width:0;flex:none;background:var(--e-panel);border-right:1px solid var(--e-line);overflow:hidden;transition:width .22s ease;position:relative}
.ot-editor.panel-open .ot-panel{width:300px;overflow-y:auto}
.ot-panel-pane{padding:16px;width:300px}
.ot-panel h3{margin:0 0 8px;font-size:16px;font-weight:700}
.ot-panel-sub{margin:16px 0 8px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--e-mute)}
.ot-muted{color:var(--e-mute);font-size:12.5px;margin:6px 0 10px}
.ot-panel-close{position:absolute;top:8px;right:8px;border:0;background:transparent;font-size:22px;width:32px;height:32px;border-radius:8px;display:none}
.ot-tpl-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ot-tpl-grid .ot-panel-sub{grid-column:1/-1;margin-bottom:0}
.ot-tpl{border:1px solid var(--e-line);background:#f9fafb;border-radius:10px;padding:6px;display:flex;flex-direction:column;gap:6px;align-items:center;transition:transform .12s,box-shadow .12s}
.ot-tpl:hover{transform:translateY(-2px);box-shadow:0 8px 18px -10px rgba(0,0,0,.35);border-color:#c7c7f5}
.ot-tpl img{width:100%;height:auto;max-height:170px;object-fit:contain;border-radius:6px;background:#fff}
.ot-tpl span{font-size:11.5px;color:#374151}
.ot-add-text{display:block;width:100%;text-align:left;border:1px solid var(--e-line);background:#f9fafb;border-radius:10px;padding:12px 14px;margin:0 0 8px}
.ot-add-text:hover{border-color:#c7c7f5;background:#f5f5ff}
.ot-add-text.h{font:700 22px Poppins,sans-serif}
.ot-add-text.s{font:600 16px Poppins,sans-serif}
.ot-add-text.b{font:400 13px Inter,sans-serif}
.ot-combos{display:grid;gap:8px}
.ot-combos button{display:flex;flex-direction:column;align-items:center;gap:2px;border:1px solid var(--e-line);background:#fff;border-radius:10px;padding:12px 6px;line-height:1.1}
.ot-combos button:hover{border-color:#c7c7f5}
.ot-shapes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.ot-shapes button{border:1px solid var(--e-line);background:#f9fafb;border-radius:10px;aspect-ratio:1;display:flex;align-items:center;justify-content:center}
.ot-shapes button:hover{background:#f5f5ff;border-color:#c7c7f5}
.ot-emojis{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}
.ot-emojis button{border:0;background:transparent;font-size:24px;padding:6px 0;border-radius:8px}
.ot-emojis button:hover{background:#f3f4f6}
.ot-up-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ot-up{border:1px solid var(--e-line);background:#f9fafb;border-radius:8px;padding:0;overflow:hidden;aspect-ratio:1}
.ot-up img{width:100%;height:100%;object-fit:cover;display:block}
.ot-swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.ot-swatches button,.ot-swatch-custom{aspect-ratio:1;border-radius:50%;border:1px solid rgba(0,0,0,.12);padding:0}
.ot-swatches button:hover{transform:scale(1.08)}
.ot-swatch-custom{position:relative;display:flex;align-items:center;justify-content:center;background:conic-gradient(red,yellow,lime,aqua,blue,magenta,red);cursor:pointer;color:#fff;font-weight:700;text-shadow:0 0 3px #000}
.ot-swatch-custom input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.ot-field{display:block;margin:0 0 10px}
.ot-field span{display:block;font-size:12px;font-weight:600;color:#374151;margin-bottom:4px}
.ot-field select,.ot-field input{width:100%;height:38px;border:1px solid var(--e-line);border-radius:8px;padding:0 10px;font:inherit;background:#fff}
.ot-custom-size{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ot-custom-size[hidden]{display:none}
.ot-check{display:flex;align-items:center;gap:8px;font-size:13px;margin:6px 0}
.ot-layers{display:flex;flex-direction:column;gap:4px}
.ot-layer{display:flex;align-items:center;gap:4px;border:1px solid var(--e-line);border-radius:8px;padding:2px 4px}
.ot-layer.on{border-color:var(--e-acc);background:#f5f5ff}
.ot-layer-name{flex:1;text-align:left;border:0;background:transparent;padding:8px 6px;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ot-layer-btn{border:0;background:transparent;width:30px;height:30px;border-radius:6px;font-size:13px}
.ot-layer-btn:hover{background:#eef}
.ot-main{flex:1;display:flex;flex-direction:column;min-width:0}
.ot-props{background:#fff;border-bottom:1px solid var(--e-line);min-height:52px;overflow-x:auto;scrollbar-width:thin}
.ot-props-row{display:flex;align-items:center;gap:4px;padding:7px 10px;min-height:52px;width:max-content;min-width:100%}
.ot-p{display:none!important}
.ot-props[data-mode=none] .ot-props-hint{display:block}
.ot-props-hint{display:none;color:var(--e-mute);font-size:13px}
.ot-props[data-mode=text] .ot-p-text,.ot-props[data-mode=text] .ot-p-fill,.ot-props[data-mode=text] .ot-p-any,
.ot-props[data-mode=shape] .ot-p-shape,.ot-props[data-mode=shape] .ot-p-fill,.ot-props[data-mode=shape] .ot-p-any,
.ot-props[data-mode=image] .ot-p-image,.ot-props[data-mode=image] .ot-p-any,
.ot-props[data-mode=multi] .ot-p-fill,.ot-props[data-mode=multi] .ot-p-any{display:inline-flex!important}
.ot-props select{height:36px;border:1px solid var(--e-line);border-radius:8px;padding:0 8px;font:inherit;max-width:170px;background:#fff}
.ot-num{width:64px;height:36px;border:1px solid var(--e-line);border-radius:8px;padding:0 8px;font:inherit}
.ot-tg{border:1px solid transparent;background:transparent;min-width:34px;height:34px;border-radius:8px;padding:0 8px;align-items:center;justify-content:center;font-size:15px}
.ot-tg:hover{background:#f3f4f6}
.ot-tg.on{background:#ececff;color:var(--e-acc);border-color:#d4d4fb}
.ot-mini{align-items:center;gap:4px;color:#4b5563;font-size:14px;padding:0 4px}
.ot-mini input[type=number]{width:58px;height:32px;border:1px solid var(--e-line);border-radius:8px;padding:0 6px;font:inherit;font-size:13px}
.ot-mini input[type=range]{width:80px}
.ot-color{width:34px;height:34px;border-radius:8px;border:1px solid var(--e-line);overflow:hidden;position:relative;align-items:center;justify-content:center}
.ot-color input{position:absolute;inset:-8px;width:calc(100% + 16px);height:calc(100% + 16px);border:0;padding:0;cursor:pointer}
.ot-stroke{outline:3px solid #fff;outline-offset:-6px}
.ot-filters{align-items:center;gap:10px;font-size:12px;color:#374151}
.ot-filters label{display:flex;flex-direction:column;gap:0}
.ot-filters label.ot-check{flex-direction:row}
.ot-filters input[type=range]{width:90px}
.ot-danger:hover{background:#fee2e2!important;color:#b91c1c}
.ot-stage{flex:1;display:flex;align-items:center;justify-content:center;overflow:auto;position:relative;background-image:radial-gradient(#d9dce6 1px,transparent 1px);background-size:18px 18px}
.ot-stage.drop{outline:3px dashed var(--e-acc);outline-offset:-10px}
.ot-stage-inner{margin:auto;padding:20px;flex:none}
.ot-stage .canvas-container{box-shadow:0 12px 40px -12px rgba(15,23,42,.35);background:#fff}
.ot-toast{position:absolute;left:50%;bottom:22px;transform:translate(-50%,20px);background:#111827;color:#fff;padding:9px 16px;border-radius:999px;font-size:13px;opacity:0;pointer-events:none;transition:.2s;z-index:40}
.ot-toast.show{opacity:1;transform:translate(-50%,0)}
@media (max-width:759px){
  .ot-editor{height:calc(100svh - 70px);min-height:520px;border-radius:0;border-left:0;border-right:0}
  .ot-hide-sm{display:none!important}
  .ot-size{display:none}
  .ot-body{flex-direction:column-reverse}
  .ot-rail{width:auto;flex-direction:row;border-right:0;border-top:1px solid var(--e-line);padding:0;overflow-x:auto}
  .ot-rail button{flex:1;min-width:62px;border-left:0;border-top:3px solid transparent;padding:8px 2px}
  .ot-rail button.on{border-top-color:var(--e-acc)}
  .ot-panel{position:absolute;left:0;right:0;bottom:64px;width:auto!important;max-height:0;border-right:0;border-top:1px solid var(--e-line);box-shadow:0 -12px 30px -12px rgba(0,0,0,.25);border-radius:16px 16px 0 0;z-index:20;transition:max-height .22s ease}
  .ot-editor.panel-open .ot-panel{max-height:55%;overflow-y:auto}
  .ot-panel-pane{width:auto}
  .ot-panel-close{display:block}
  .ot-tpl-grid{grid-template-columns:repeat(3,1fr)}
  .ot-shapes{grid-template-columns:repeat(6,1fr)}
  .ot-swatches{grid-template-columns:repeat(8,1fr)}
}
.ot-props[data-mode=text] .ot-p-shape{display:inline-flex!important}
.ot-props[data-mode=qr] .ot-p-any{display:inline-flex!important}
.ot-qr-colors{display:flex;gap:14px;margin:0 0 6px;font-size:12px;font-weight:600;color:#374151}
.ot-qr-colors label{display:flex;align-items:center;gap:6px}
.ot-qr-colors input{width:34px;height:28px;border:1px solid var(--e-line);border-radius:6px;padding:0;background:#fff}
.ot-qr [hidden]{display:none}