#wspd-modal {}
/* Overlay */
#wspd-modal{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:999999;display:none}
#wspd-modal.wspd-open{display:block}
/* Shell */
#wspd-modal #wspd-shell{position:absolute;inset:0;display:flex;flex-direction:column;background:#f7f7f7;color:#111;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
/* Header */
#wspd-modal #wspd-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#ffffff;border-bottom:1px solid #e5e5e5}
#wspd-modal #wspd-title{font-size:16px;margin:0}
#wspd-modal #wspd-close{background:#ffffff;border:1px solid #e5e5e5;color:#111;border-radius:8px;padding:6px 10px;cursor:pointer}
/* Body layout: stage + right panel */
#wspd-modal #wspd-body{flex:1;display:grid;grid-template-columns:1fr 380px;gap:0;min-height:0;background:#f7f7f7}
/* Stage */
#wspd-modal #wspd-stage{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;position:relative;background:#f7f7f7}
#wspd-modal #wspd-canvas-wrap{position:relative;background:transparent;border:none;border-radius:0;padding:0;box-shadow:none;width:90%;max-width:1600px;margin:0 auto}
#wspd-modal #wspd-side-label{position:absolute;top:8px;left:12px;background:#1118;color:#111;padding:4px 8px;border-radius:6px;font-size:12px}
#wspd-modal #wspd-canvas{display:block;width:100%;height:auto;max-height:80vh}
/* Right Panel */
#wspd-modal #wspd-right{background:#f9f9f9;border-left:1px solid #e5e5e5;display:flex;flex-direction:column;min-width:340px}
#wspd-modal .wspd-panel{border-bottom:1px solid #e9e9e9}
#wspd-modal .wspd-panel h4{margin:0;padding:12px 14px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;background:#f3f3f3}
#wspd-modal .wspd-panel h4 .chev{transition:transform .2s}
#wspd-modal .wspd-panel.open h4 .chev{transform:rotate(90deg)}
#wspd-modal .wspd-panel .wspd-content{padding:12px 14px;display:none;background:#ffffff}
#wspd-modal .wspd-panel.open .wspd-content{display:block}
#wspd-modal .control label{font-size:12px;opacity:.8;margin-bottom:4px;display:block}
#wspd-modal .control input[type=text],.control input[type=number],.control input[type=color],.control select{width:100%;padding:8px;border-radius:8px;border:1px solid #dadada;background:#ffffff;color:#111}
#wspd-modal .wspd-row{display:flex;gap:8px}.wspd-row>*{flex:1}
#wspd-modal .wspd-btn{padding:8px 10px;border-radius:8px;border:1px solid #dadada;background:#ffffff;color:#111;cursor:pointer}
#wspd-modal .wspd-btn.primary{background:#111;color:#fff;border-color:#111}
#wspd-modal .wspd-btn.danger{background:#ffeceb;border-color:#ffc9c5;color:#9a2a2a}
/* Price card look */
#wspd-modal .wspd-price-lines{display:flex;flex-direction:column;gap:6px}
#wspd-modal .wspd-price-line{display:flex;justify-content:space-between}
/* Handles */
#wspd-modal .wspd-handle{position:absolute;width:10px;height:10px;background:#fff;border:2px solid #58a6ff;border-radius:2px;box-sizing:border-box}
#wspd-modal .wspd-handle.hidden{display:none}
/* Sizes modal */
#wspd-modal #wspd-sizes{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:1000000;align-items:center;justify-content:center}
#wspd-modal #wspd-sizes.open{display:flex}
#wspd-modal #wspd-sizes .box{background:#fff;border-radius:12px;width:520px;padding:16px;border:1px solid #eee}
#wspd-modal #wspd-sizes table{width:100%;border-collapse:collapse}
#wspd-modal #wspd-sizes th,#wspd-sizes td{border:1px solid #eee;padding:6px;text-align:center}
#wspd-modal @media (max-width: 1100px){
#wspd-modal   #wspd-body{grid-template-columns:1fr 320px}
}

/* Placement bar under canvas */
#wspd-modal #wspd-placement-bar{display:flex;justify-content:center;padding:10px 0;background:transparent}
#wspd-modal #wspd-placement-bar #placement-list{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:center}
#wspd-modal .placement{padding:6px 10px;border-radius:999px;border:1px solid #dadada;background:#fff;cursor:pointer;font-size:12px}
#wspd-modal .placement.active{background:#111;color:#fff;border-color:#111}