/* ===== builder v4: panel "+ Add" buttons, drag-drop from the picker, floating toolbar, inline editor, phone tabs ===== */
.cm-canvas{position:relative;margin:0 auto}
.cm-ovl{position:absolute;inset:0;pointer-events:none}
.cm .plus{position:absolute;pointer-events:auto;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:3px 12px 3px 6px;font:700 .95rem var(--sans);color:var(--pencil);background:#fff;border:2px solid var(--pencil);border-radius:999px;box-shadow:2px 2px 0 rgba(43,45,49,.25);cursor:pointer;z-index:2}
.cm .plus b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#1A56DB;color:#fff;font:700 1.35rem/1 var(--sans)}
.cm .plus:not(:disabled):hover{background:var(--marker)}
.cm-ovl.busy .plus,.cm .plus.dim{opacity:.2;pointer-events:none}
#strip.sw-l{animation:swl .22s ease-out}#strip.sw-r{animation:swr .22s ease-out}
@keyframes swl{from{transform:translateX(36px);opacity:.3}to{transform:none;opacity:1}}
@keyframes swr{from{transform:translateX(-36px);opacity:.3}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){#strip.sw-l,#strip.sw-r{animation:none}}
/* floating toolbar */
.ftb{position:fixed;left:0;top:0;z-index:6;display:flex;gap:3px;padding:4px;background:#fff;border:2px solid var(--pencil);border-radius:12px;box-shadow:3px 3px 0 rgba(43,45,49,.28)}
.ftb[hidden]{display:none}
.cm .ftb button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:52px;min-height:52px;padding:3px 5px;font:700 .75rem/1.1 var(--sans);color:var(--pencil);background:#fff;border:2px solid transparent;border-radius:9px;box-shadow:none;white-space:nowrap}
.cm .ftb button[hidden]{display:none}
.cm .ftb button svg{width:22px;height:22px;flex:none}
.cm .ftb button:not(:disabled):hover{background:var(--marker);border-color:var(--pencil)}
.cm .ftb button.danger{color:var(--redpen)}
.cm .ftb button.danger:not(:disabled):hover{background:#FDECEC;border-color:var(--redpen)}
.cm .ftb button:disabled{color:#555C68;background:#F1F3F6;border:2px dashed #8A93A0}
/* inline bubble editor */
.cm-ed{position:fixed;z-index:7;resize:none;text-align:center;font-family:KalamC,Kalam,ZKLFull,"PingFang SC","Microsoft YaHei",sans-serif;line-height:1.25;color:var(--pencil);background:#fff;border:3px solid #1A56DB;border-radius:14px;padding:6px 8px;box-shadow:0 0 0 4px #fff,0 4px 14px rgba(43,45,49,.25);outline:none}
.cm-ed[hidden]{display:none}
/* picker: target label, bubble shortcuts, drag tip, drag ghost */
.pk-to{margin:6px 0 10px}
.pk-to span{display:inline-block;font:700 .95rem var(--sans);color:#fff;background:#1A56DB;border-radius:8px;padding:5px 12px}
.pk-bub{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:12px 0 0;font:700 .95rem var(--sans)}
.pk-tip{margin:10px 0 0;color:var(--soft);font-size:.95rem}
@media (pointer:fine){.pk{cursor:grab}}
.pk{user-select:none;-webkit-user-select:none}
.dnd-ghost{position:fixed;left:0;top:0;width:110px;z-index:60;pointer-events:none;opacity:.9;background:#fff;border:2px solid #1A56DB;border-radius:12px;padding:4px;box-shadow:4px 6px 16px rgba(43,45,49,.3)}
.dnd-ghost[hidden]{display:none}.dnd-ghost svg{width:100%;height:auto;display:block}
body.dnd,body.dnd *{cursor:grabbing!important}
/* phone tabs + hint (hidden on desktop, where all panels show) */
.cm-tabs,.cm-mhint{display:none}
@media (max-width:720px){
 .cm{padding-bottom:140px}
 .cm-tabs:not([hidden]){display:flex;align-items:center;gap:8px;margin:0 0 10px}
 #ptabs{display:flex;gap:8px}
 .cm #ptabs button{min-width:48px;min-height:46px;padding:2px 10px;font:700 1.15rem var(--sans);color:var(--pencil);background:#fff;border:2px solid var(--pencil);border-radius:10px}
 .cm #ptabs button[aria-selected=true]{background:var(--pencil);color:#fff;box-shadow:none}
 .cm #ptabs button[aria-selected=true]::before{content:"✓ ";font-size:.95rem}
 .cm-mhint{display:block;margin:0 0 10px;font-size:.9rem;color:var(--soft)}
 #props{position:static;max-height:none;overflow:visible;border:2px dashed var(--line);border-radius:10px;background:#fff;padding:8px 12px 12px;margin-top:4px}
 #props .row-lab{display:block}
 .cm .plus{min-height:44px;padding-right:14px}
 .cm .ftb button{min-width:46px;min-height:50px;padding:3px 3px;font-size:.72rem}
 .ftb{gap:2px;padding:3px}
}
/* picker: built-in vs "My figures" tabs */
.pk-tabs{display:flex;gap:8px;margin:14px 0 0}
.cm .pk-tabs button{min-height:44px;padding:4px 16px;font:700 1rem var(--sans);border-radius:10px}
.cm .pk-tabs button[aria-selected=true]{background:var(--pencil);color:#fff;border-color:var(--pencil);box-shadow:none}
.cm .pk-tabs button[aria-selected=true]::before{content:"✓ "}
.pk-empty{margin:14px 0 4px;padding:14px;background:#fff;border:2px dashed var(--line);border-radius:10px}
.pk-empty a{font-weight:700;color:#1A56DB;margin-left:4px}
/* picker: character filter chips + group headings */
.pk-chips{margin:12px 0 0}
.cm .pk-chips button{min-height:40px}
.pk-h{grid-column:1/-1;font:700 1.15rem var(--hand);margin:10px 0 0;padding-bottom:2px;border-bottom:2px dashed var(--grid)}
.pk-h:first-child{margin-top:0}
@media (max-width:720px){.pk-chips{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px;scrollbar-width:thin}.pk-chips button{flex:none}}
/* item 4: character filter is a grouped <select> (135 characters) */
.pk-sel{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0 0}
.pk-sel label{font:700 .95rem var(--sans);color:var(--soft)}
.pk-sel select{font:1rem var(--sans);min-height:44px;padding:6px 10px;border:2px solid var(--pencil);border-radius:10px;background:#fff;color:var(--pencil);max-width:100%}
.pk-art img{width:100%;height:auto;display:block}