/* V322: isolated design editor UI; loaded only when ?designEditor=1 */
#cs-design-editor, #cs-design-editor * { box-sizing: border-box; }
#cs-design-editor { position: fixed; z-index: 2147483000; top: 12px; right: 12px; width: 320px; max-height: calc(100vh - 24px); overflow: auto; color: #eaf2ff; background: rgba(14,22,36,.97); border: 1px solid #2d4565; border-radius: 14px; box-shadow: 0 18px 55px rgba(0,0,0,.45); font: 13px/1.4 system-ui,-apple-system,Segoe UI,sans-serif; padding: 12px; direction: rtl; }
#cs-design-editor .csde-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; }
#cs-design-editor .csde-title { font-weight:800; font-size:15px; }
#cs-design-editor button, #cs-design-editor input, #cs-design-editor select { font: inherit; }
#cs-design-editor button { cursor:pointer; border:1px solid #3c5b82; border-radius:8px; color:#fff; background:#1c3555; padding:7px 9px; }
#cs-design-editor button.primary { background:#087cf0; border-color:#38a3ff; }
#cs-design-editor button:focus-visible, #cs-design-editor input:focus-visible, #cs-design-editor select:focus-visible { outline:2px solid #69c4ff; outline-offset:1px; }
#cs-design-editor .csde-actions { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0; }
#cs-design-editor .csde-note { color:#b7c9e2; font-size:11px; margin:6px 0 10px; }
#cs-design-editor .csde-selected { font-size:11px; overflow-wrap:anywhere; color:#9fdbff; padding:7px; background:#0b1728; border-radius:7px; margin:7px 0; direction:ltr; text-align:left; }
#cs-design-editor .csde-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
#cs-design-editor label { display:flex; flex-direction:column; gap:4px; color:#cbd9ec; font-size:11px; }
#cs-design-editor input, #cs-design-editor select { width:100%; min-width:0; padding:7px; border:1px solid #344c6d; border-radius:7px; background:#0b1728; color:#fff; }
#cs-design-editor input[type=color] { height:34px; padding:3px; }
#cs-design-editor .csde-section { border-top:1px solid #2a3b54; padding-top:9px; margin-top:9px; font-weight:700; }
.csde-target-highlight { outline: 2px solid #00a6ff !important; outline-offset: 2px !important; box-shadow: 0 0 0 5px rgba(0,166,255,.16) !important; }
#csde-hidden { display:none !important; }
@media(max-width:700px) { #cs-design-editor { width:min(300px, calc(100vw - 20px)); top:8px; right:8px; max-height:calc(100vh - 16px); } }

/* V323 usability upgrade: direct manipulation handles and quick controls */
#cs-design-editor .csde-main-actions button { flex: 1 1 44%; min-height: 38px; }
#cs-design-editor .csde-quick-tools { display:grid; grid-template-columns:repeat(4,minmax(34px,1fr)); gap:5px; margin:8px 0; }
#cs-design-editor .csde-quick-tools button { min-height:34px; padding:5px; }
#cs-design-editor .csde-quick-tools #csde-center-x, #cs-design-editor .csde-quick-tools #csde-center-y { grid-column:span 2; }
#cs-design-editor .csde-advanced { border:1px solid #2a3b54; border-radius:9px; padding:7px; margin-top:8px; }
#cs-design-editor .csde-advanced summary { cursor:pointer; font-weight:750; padding:4px 2px 8px; color:#eaf2ff; }
#cs-design-editor .csde-grid { padding-top:4px; }
#cs-design-editor { width:340px; }
#csde-handles-overlay { position:fixed; display:none; z-index:2147482999; border:2px solid #00a6ff; outline:1px dashed rgba(255,255,255,.85); pointer-events:none; box-sizing:border-box; }
#csde-handles-overlay button { position:absolute; pointer-events:auto; padding:0; border:2px solid #fff; box-shadow:0 1px 8px #00152b; background:#087cf0; color:#fff; display:flex; align-items:center; justify-content:center; cursor:grab; touch-action:none; }
#csde-handles-overlay .csde-move-handle { width:30px; height:30px; border-radius:50%; left:50%; top:-17px; transform:translateX(-50%); font-size:20px; line-height:1; }
#csde-handles-overlay .csde-resize { width:13px; height:13px; border-radius:50%; }
#csde-handles-overlay .csde-resize.nw { left:-7px; top:-7px; cursor:nwse-resize; }
#csde-handles-overlay .csde-resize.ne { right:-7px; top:-7px; cursor:nesw-resize; }
#csde-handles-overlay .csde-resize.sw { left:-7px; bottom:-7px; cursor:nesw-resize; }
#csde-handles-overlay .csde-resize.se { right:-7px; bottom:-7px; cursor:nwse-resize; }
@media(max-width:700px) { #cs-design-editor { width:min(320px,calc(100vw - 16px)); } #csde-handles-overlay .csde-move-handle { width:34px;height:34px;top:-19px; } #csde-handles-overlay .csde-resize { width:16px;height:16px; } }

/* V326: clearer independent alignment and flex controls in the visual editor */
#cs-design-editor #csde-align-items, #cs-design-editor #csde-justify-content, #cs-design-editor #csde-flex-mode { min-height: 34px; }


/* V327: reversible visual deletion list */
#cs-design-editor .csde-deleted-list { display:flex; flex-direction:column; gap:6px; padding-top:5px; }
#cs-design-editor .csde-deleted-item { display:flex; align-items:center; gap:6px; justify-content:space-between; padding:6px; border:1px solid #344c6d; border-radius:7px; background:#0b1728; }
#cs-design-editor .csde-deleted-item span { min-width:0; overflow-wrap:anywhere; direction:ltr; text-align:left; font-size:10px; color:#cbd9ec; }
#cs-design-editor .csde-deleted-item button { flex:0 0 auto; background:#176b45; border-color:#2e9d70; }