/* Vectors — the mockup's vector shelf, plus the real vector editor as a side panel when a vector is open. */
.page-heading>.btn{margin-top:30px}
.vec-tools{display:flex;align-items:center;gap:16px}
.vec-tools .demo-link{min-height:34px}
.vec-tools .save-state{font-size:10px}
.vec-layout{display:grid;grid-template-columns:1fr;gap:24px;align-items:start;padding-bottom:50px}
.vec-layout:has(#detail:not([hidden])){grid-template-columns:1fr 340px}
.vec-layout:has(#detail[hidden]) .vec-panel{display:none}
.lib-grid-wrap{position:relative;min-width:0}
.lib-grid-wrap.dragover{outline:2px dashed var(--green);outline-offset:8px;border-radius:12px}
.vector-grid{padding-bottom:0}
.vec-layout:has(#detail:not([hidden])) .vector-grid{grid-template-columns:repeat(2,1fr)}
.vectorcard{padding:0;text-align:left;display:block;width:100%;transition:border-color .2s}
.vectorcard:hover{border-color:#7a8572}
.vectorcard.on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.vectorcard .vector-art img{width:100%;height:100%;max-width:280px;object-fit:contain;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.vectorcard:hover .vector-art img{transform:scale(1.04)}
.vectorcard .vector-meta h3{font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.vectorcard.busy .vector-art{opacity:.4}
.lib-drop{margin:0}
.vec-panel{position:sticky;top:20px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px;max-height:calc(100vh - 40px);overflow:auto;animation:stageIn .45s cubic-bezier(.2,.8,.2,1)}
.vec-panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.vec-panel-head h3{margin:0;font-size:15px;font-weight:650}
.seg{display:flex;gap:2px;background:var(--soft);border-radius:30px;padding:3px;margin-bottom:12px}
.seg button{flex:1;border-radius:30px;padding:6px 10px;font-size:11px;color:var(--muted)}
.seg button.on{background:var(--ink);color:#fff}
.seg.mini{margin:0;width:fit-content}.seg.mini button{flex:none;padding:3px 11px}
.lib-stage{position:relative;aspect-ratio:1;border-radius:9px;border:1px solid var(--line);overflow:hidden;background:#fff linear-gradient(45deg,#f1f2ea 25%,transparent 25%,transparent 75%,#f1f2ea 75%) 0 0/22px 22px,linear-gradient(45deg,#f1f2ea 25%,transparent 25%,transparent 75%,#f1f2ea 75%) 11px 11px/22px 22px}
.lib-stage img,.lib-stage #vecBox{position:absolute;inset:12px;width:calc(100% - 24px);height:calc(100% - 24px);object-fit:contain}
.lib-stage #vecBox svg{width:100%;height:100%}
.lib-stage[data-view=vector] img{display:none}
.lib-stage[data-view=original] #vecBox{display:none}
.lib-stage[data-view=both] img{opacity:.35}
.lib-stage[data-view=both] #vecBox{opacity:.85}
.lib-stage.dark{background-image:none}
#fillRow input[type=color]{width:48px;height:34px;padding:0;border:1px solid var(--line);border-radius:6px;background:none}
.vec-panel .modal-actions .btn{flex:1}
.split-sheet{width:min(1100px,100%)!important;height:min(760px,100%)!important}
.split-work{grid-template-columns:1fr 320px}
.split-btns{margin-top:auto;display:grid;gap:8px}
@media(max-width:1100px){.vec-layout:has(#detail:not([hidden])){grid-template-columns:1fr 300px}.vec-layout:has(#detail:not([hidden])) .vector-grid{grid-template-columns:1fr}}
@media(max-width:800px){.vec-layout:has(#detail:not([hidden])){grid-template-columns:1fr}.vec-panel{position:static;max-height:none}.split-work{grid-template-columns:1fr}.vec-tools .save-state{display:none}}
@media(max-width:540px){.page-heading>.btn{margin-top:0}.section-head{flex-wrap:wrap}.vec-tools{width:100%}.vec-tools .search{flex:1;width:auto}}