:root{--bg:#1b101f;--bg2:#2b1531;--panel:rgba(44,24,52,.97);--panel-dark:#211327;--pink:#fa37c8;--pink-dark:#b71d91;--bright:#ee9ddc;--blue:#378bff;--text:#fff4fd;--muted:#bba6c0;--border:rgba(250,171,238,.16)}
*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:#120e17;color:var(--text);font-family:system-ui,-apple-system,'Segoe UI',Arial,sans-serif;-webkit-tap-highlight-color:transparent;overflow:hidden}button,input{font:inherit}button{cursor:pointer;color:inherit}button:focus-visible,input:focus-visible{outline:3px solid #77d7ff;outline-offset:2px}button:disabled{opacity:.4;cursor:default}svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.svg-sprite{position:absolute;height:0;width:0;overflow:hidden}.hidden{display:none!important}#app{height:100%;width:100%}.screen{height:100%;width:100%;position:relative}
.gallery-screen{overflow:auto;padding:clamp(22px,4vw,58px);background:radial-gradient(ellipse 65% 85% at 80% 0%,#4c1a54 0%,transparent 68%),radial-gradient(ellipse 70% 70% at 0% 85%,#341638 0%,transparent 70%),#1b1020}.gallery-header{display:flex;justify-content:space-between;align-items:flex-start;gap:22px;max-width:1340px;margin:0 auto 36px}.overline{color:var(--bright);font-size:11px;letter-spacing:.18em;font-weight:800}.title-block h1{font-size:clamp(46px,5vw,74px);margin:0;letter-spacing:-.065em;line-height:1.3}.title-block h1 span{color:var(--pink);font-size:.65em}.title-block p{color:var(--muted);margin:0}.header-actions{display:flex;align-items:center;gap:12px;padding-top:14px}.round-button,.primary-button,.secondary-button,.action-button{border:1px solid var(--border);border-radius:16px;min-height:45px;padding:10px 16px;background:#3a2041;display:inline-flex;align-items:center;justify-content:center;gap:8px}.round-button{width:48px;padding:0;border-radius:50%}.round-button:hover,.secondary-button:hover,.action-button:hover{background:#503056}.primary-button{background:linear-gradient(135deg,#3099ff,#0964ec);border-color:#64b5ff;font-weight:800;box-shadow:0 3px 18px #0057c83d}.primary-button:hover{filter:brightness(1.1)}.gallery-topline{max-width:1340px;margin:0 auto 18px;display:flex;align-items:center;justify-content:space-between;gap:16px;color:#fce6fb;font-weight:700}.hint{font-size:12px;color:var(--muted);font-weight:400}.gallery-grid{max-width:1340px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(215px,100%),1fr));gap:24px}.art-card{background:#2d1934;border:2px solid transparent;border-radius:18px;overflow:hidden;min-width:0;transition:transform .16s,border-color .16s}.art-card:hover{transform:translateY(-3px);border-color:#dc3db2}.art-card.active{border-color:var(--pink)}.art-thumb{display:block;width:100%;aspect-ratio:1.18;object-fit:cover;background:#fdf9ff;cursor:pointer}.art-details{padding:12px 13px 14px;display:flex;justify-content:space-between;gap:8px;align-items:center}.art-details strong{display:block;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:230px}.art-details small{display:block;color:var(--muted);font-size:11px;margin-top:3px}.card-menu{font-size:21px;background:transparent;border:0;width:36px;height:36px;border-radius:10px}.card-menu:hover{background:#55305d}.gallery-footer{max-width:1340px;margin:50px auto 0;color:#926e9b;font-size:12px}.empty-state{text-align:center;margin:100px auto}.empty-glyph{font-size:60px;color:var(--pink)}.small-menu{position:fixed;z-index:25;right:30px;top:110px;width:215px;background:#392343;border:1px solid #8d577d;border-radius:14px;padding:5px;box-shadow:0 18px 42px #0009}.small-menu button{display:block;width:100%;text-align:left;border:0;background:none;border-radius:8px;padding:12px}.small-menu button:hover{background:#633765}
.editor-screen{background:#241927;display:flex;flex-direction:column}.editor-header{height:78px;min-height:78px;background:linear-gradient(180deg,#231028,#2c1430);border-bottom:1px solid #723666;display:flex;align-items:center;gap:12px;padding:0 16px;z-index:12}.home-button{height:49px;display:flex;align-items:center;gap:9px;padding:0 15px;background:#48204b;border:1px solid var(--border);border-radius:14px;white-space:nowrap;font-weight:650}.home-button:hover{background:#693468}.editor-divider{width:1px;height:37px;background:#563451}.toolbar{display:flex;align-items:center;gap:5px;min-width:0}.tool-button{display:flex;align-items:center;flex-direction:column;gap:2px;background:none;border:1px solid transparent;padding:8px 12px;border-radius:13px;font-size:11px;min-width:58px}.tool-button svg{width:25px;height:25px}.tool-button.selected{color:#ffc0ef;background:#6e2761;border-color:#91347e}.tool-button:hover{background:#583154}.editor-right{margin-left:auto;display:flex;gap:9px;align-items:center;min-width:0}.project-name{background:transparent;border:0;font-weight:650;color:#e5c9e4;overflow:hidden;max-width:200px;text-overflow:ellipsis;white-space:nowrap}.color-button{background:none;border:0;min-width:61px;display:flex;flex-direction:column;align-items:center;gap:2px;touch-action:none}.color-button span{background:#f438c7;border:3px solid #fff2ff;box-shadow:0 0 0 2px #5a2d63;width:38px;height:38px;border-radius:50%;display:block}.color-button small{font-size:11px}.workspace{position:relative;flex:1;min-height:0;overflow:hidden;background-color:#29232c;background-image:radial-gradient(#3a303e 1px,transparent 1px);background-size:14px 14px}#drawingCanvas{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}.workspace-tip{position:absolute;top:12px;left:50%;transform:translateX(-50%);border-radius:100px;padding:7px 12px;background:#241b2ccf;color:#d6cbd8;font-size:11px;pointer-events:none;white-space:nowrap;max-width:90%;overflow:hidden;text-overflow:ellipsis}.floating-panel{position:absolute;z-index:15;background:var(--panel);border:1px solid #804078;box-shadow:0 14px 35px #08040b99;border-radius:18px;padding:14px}.panel-top{display:flex;align-items:center;gap:10px;margin-bottom:12px}.panel-top h2{font-size:16px;margin:0;flex:1}.icon-close,.icon-add{border:none;background:#512c52;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center}.icon-close svg,.icon-add svg{width:17px;height:17px}.colors-panel{top:12px;right:16px;width:305px;max-height:calc(100% - 24px);overflow-y:auto}.color-tabs{display:flex;padding:3px;background:#442343;border-radius:100px;margin-bottom:10px}.color-tab{border:0;background:none;padding:8px;flex:1;font-size:12px;border-radius:100px}.color-tab.active{background:#e83bba;font-weight:750;color:#260f29}.colors-panel canvas{width:min(100%,264px);height:auto;aspect-ratio:1;margin:auto;display:block;touch-action:none;cursor:crosshair}.wheel-helper{text-align:center;color:#b88ab4;font-size:10px;margin:2px 0 12px}.swatches-heading{display:flex;justify-content:space-between;gap:5px;font-size:11px;margin-top:7px;margin-bottom:8px}.hint-small{color:var(--muted);font-size:10px}.recent-swatches{display:flex;gap:5px;flex-wrap:wrap}.swatch{border:2px solid #d9a4d6;border-radius:7px;width:30px;height:30px;touch-action:none}.swatch:hover{transform:scale(1.06)}.color-drag-row{margin-top:13px;display:flex;justify-content:center}.drag-color{display:flex;align-items:center;gap:10px;background:#512344;border:1px solid #9c4a8d;border-radius:10px;padding:9px 12px;touch-action:none;font-size:12px}.drag-color-disc{width:22px;height:22px;border:2px solid white;border-radius:50%;background:#f438c7}.color-drag-dot{position:fixed;z-index:100;pointer-events:none;border:3px solid white;box-shadow:0 2px 12px #000b;width:36px;height:36px;border-radius:50%;transform:translate(-50%,-50%)}#colorValueArea label{font-size:12px;display:block;margin-bottom:13px}#colorValueArea output{float:right}#colorValueArea input[type=range]{width:100%;display:block;margin:7px 0}#hexValue{float:right;width:90px;color:white;background:#27132c;border:1px solid #7b4578;border-radius:7px;padding:5px}
.presets-panel{top:12px;left:15px;width:220px}.preset-list{display:grid;gap:6px}.preset{border:1px solid #694065;background:#3a2243;border-radius:11px;padding:10px;display:flex;justify-content:space-between;text-align:left}.preset.selected{border-color:#ff6bcb;background:#6a2a5d}.preset .preview-mark{width:24px;height:18px;border-radius:9px;background:#fcd7ed}.layers-panel{right:16px;bottom:18px;width:264px;max-height:min(345px,60%);overflow:auto}.layers-list{display:flex;flex-direction:column;gap:5px}.layer-row{border:1px solid transparent;border-radius:10px;background:#39243f;display:flex;align-items:center;gap:7px;padding:5px 7px}.layer-row.active{border-color:#fa46c4;background:#5c2651}.layer-thumb{width:32px;height:28px;background:#fdf8ff;border:1px solid #866e87;border-radius:5px;object-fit:cover}.layer-name{font-size:12px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}.layer-eye,.layer-handle,.layer-actions{border:0;background:transparent;display:flex;align-items:center;justify-content:center;padding:2px}.layer-eye svg{width:18px;height:18px}.layer-handle{font-size:19px;touch-action:none;cursor:grab}.layer-actions{font-size:19px}.layers-help{font-size:10px;color:#bca2bc;margin-top:10px}.control-dock{left:16px;bottom:18px;width:218px;z-index:16}.dock-drag{display:flex;justify-content:space-between;align-items:center;cursor:grab;padding:0 2px 9px;font-size:11px;color:#eec1e7;touch-action:none}.dock-move{font-size:15px}.control-dock label{display:block;font-size:12px;margin:8px 0 14px}.control-dock output{float:right;color:#e4b2db}.control-dock input[type=range]{display:block;width:100%;margin-top:9px;accent-color:var(--pink)}.undo-row{display:flex;gap:5px}.action-button{font-size:11px;padding:8px;min-height:35px;flex:1;border-radius:10px}.action-button svg{width:16px;height:16px}.zoom-controls{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);z-index:10;display:flex;align-items:center;background:#2e2032ef;border:1px solid #76516c;border-radius:40px;overflow:hidden;box-shadow:0 5px 22px #0006}.zoom-controls button{background:none;border:0;min-width:38px;min-height:38px;padding:6px;color:#fff;font-size:22px;display:flex;gap:5px;align-items:center;justify-content:center}.zoom-controls #zoomFit{font-size:11px}.zoom-controls svg{width:16px;height:16px}.zoom-controls button:hover{background:#563153}.toast{position:absolute;z-index:50;top:60px;left:50%;transform:translateX(-50%);border:1px solid #d26ba9;border-radius:14px;padding:12px 20px;max-width:min(400px,90%);background:#3c2740;color:white;text-align:center;font-size:13px;box-shadow:0 8px 25px #0008}.modal{background:#321c38;color:white;border:1px solid #ac6098;border-radius:18px;max-width:420px;padding:25px;box-shadow:0 20px 50px #000a}.modal::backdrop{background:#050208a8}.modal p{line-height:1.5;color:#e0c6da}.dialog-buttons{display:flex;justify-content:flex-end;gap:10px}
@media(max-width:840px){.gallery-screen{padding:20px}.gallery-header{margin-bottom:24px}.editor-header{height:66px;min-height:66px;gap:4px;padding:0 5px}.home-button{padding:0 9px;height:42px;font-size:11px}.home-button svg{width:17px}.editor-divider{display:none}.toolbar{gap:0}.tool-button{min-width:42px;padding:7px 4px;font-size:9px}.tool-button svg{width:22px;height:22px}.project-name{display:none}.color-button{min-width:44px}.color-button span{width:29px;height:29px}.color-button small{font-size:9px}.colors-panel{right:7px;top:7px;width:min(305px,75vw)}.presets-panel{left:7px;top:7px}.layers-panel{right:7px;bottom:7px}.control-dock{left:7px;bottom:7px}.workspace-tip{display:none}}
@media(max-width:510px){.gallery-header{flex-direction:column}.header-actions{align-self:stretch;padding-top:0}.header-actions .primary-button{margin-left:auto}.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.art-details{padding:8px}.art-details strong{font-size:12px}.art-details small{font-size:10px}.hint{display:none}.home-button span{display:none}.home-button{min-width:37px}.tool-button{min-width:39px}.tool-button span{font-size:8px}.control-dock{width:165px;padding:9px}.layers-panel{width:200px}.zoom-controls{bottom:5px}}
@media(max-height:540px){.colors-panel{width:260px}.colors-panel canvas{width:185px}.layers-panel{max-height:45%}.control-dock{width:172px;padding:9px}.control-dock label{margin:4px 0 6px}.control-dock .undo-row svg{display:none}.workspace-tip{display:none}}

/* Mofohani v2 — landscape tablet, vertical compact sliders */
.gallery-header .title-block h1,.header-brand strong {color:#ff56cb}
.gallery-navigation{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.gallery-topline{gap:10px}
.gallery-grid{grid-template-columns:repeat(auto-fill,minmax(min(185px,100%),1fr));gap:17px}
.art-card{position:relative;touch-action:pan-y}
.art-card.drag-over{outline:4px dashed #ff54c6;outline-offset:3px}
.art-card .stack-preview{position:relative;aspect-ratio:1.18;margin:8px 10px 0 16px}
.stack-preview img{position:absolute;width:93%;height:93%;object-fit:cover;border:2px solid white;border-radius:11px;box-shadow:0 3px 8px #0008}
.stack-preview img:nth-child(1){transform:translate(-7px,4px) rotate(-7deg)}
.stack-preview img:nth-child(2){transform:translate(3px,-1px) rotate(4deg)}
.stack-preview img:nth-child(3){transform:translate(0,-5px)}
.stack-open-bar{display:flex;align-items:center;gap:8px}
.gallery-screen {padding-top:24px}
.editor-header{gap:7px;height:76px;min-height:76px}
.header-brand{display:flex;flex-direction:column;white-space:nowrap;min-width:100px}
.header-brand strong{font-size:17px;line-height:1.1;font-family:Georgia,serif}
.header-brand small{font-size:9px;color:#e9b0db;margin-top:3px}
.home-button{padding:0 10px}
.mode-button,.new-compact,.small-plain{border:1px solid #945084;background:#4a2350;border-radius:11px;height:41px;white-space:nowrap;padding:0 10px;font-weight:650;font-size:11px}
.new-compact,.mode-button.active{background:#db2fb4}
.small-plain{font-size:21px}
.toolbar{margin-left:auto;gap:0}
.tool-button{min-width:49px;padding:6px 3px}
.tool-button svg{width:21px;height:21px}
.editor-right{margin-left:0}
.project-name{max-width:100px;font-size:11px}
.control-dock{position:absolute;top:16px;bottom:auto;left:15px;width:81px;height:330px;padding:8px 7px 9px;resize:none}
.control-dock label{font-size:10px;margin:10px 0 0;display:flex;align-items:center;flex-direction:column;gap:6px;white-space:nowrap}
.control-dock output{float:none;font-size:10px}
.control-dock input[type=range]{margin:5px 0 0;width:22px;height:95px;writing-mode:vertical-lr;direction:rtl;appearance:slider-vertical;accent-color:#ef4ccd;touch-action:none}
.control-dock .dock-drag{font-size:10px;display:flex;flex-direction:column;padding:0;gap:3px}
.control-dock .undo-row{margin-top:5px}
.control-dock .action-button{padding:2px;min-height:30px;font-size:20px}
.floating-panel:not(.control-dock){resize:both;min-width:190px;min-height:100px;max-width:min(85vw,600px);max-height:calc(100% - 24px);overflow:auto}
.floating-panel:not(.control-dock) .panel-top{cursor:move;touch-action:none;user-select:none;position:sticky;top:-14px;background:#34203b;z-index:2;padding:8px 0}
.colors-panel{top:12px;right:16px;bottom:auto;left:auto;width:305px}
.layers-panel{top:12px;right:16px;bottom:auto;left:auto;width:260px}
.presets-panel{top:12px;right:16px;bottom:auto;left:auto;width:235px}
.shapes-panel{top:12px;right:16px;width:245px}
.shape-list{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.shape-list button{background:#493051;border:1px solid #90618e;border-radius:11px;padding:14px 4px;font-size:12px}
.shape-list button.selected{background:#922773;border-color:#ff64c9}
.shape-hint{font-size:11px;color:#e3bde0;line-height:1.4}
.shape-keep{font-size:11px;margin-top:14px;display:flex;gap:8px;align-items:center}
.sample-bubble{position:absolute;pointer-events:none;width:56px;height:56px;border:5px solid #fff;border-radius:50%;z-index:40;box-shadow:0 5px 20px #000b}
.new-dialog{width:min(520px,95vw);max-width:520px}
.new-dialog h3{font-size:14px;border-top:1px solid #75516d;padding-top:15px}
.new-buttons,.format-options{display:flex;gap:8px;flex-wrap:wrap}
.new-buttons button{font-size:12px;padding:9px 12px}
.format-options .format{flex:1;background:#482d50;border:2px solid #7a4372;border-radius:12px;padding:13px;display:flex;align-items:center;gap:15px;font-size:25px}
.format-options .format.selected{border-color:#ff5bd0;background:#66285b}
.format span{display:flex;flex-direction:column;font-size:14px;text-align:left}
.format small{font-size:11px;color:#d1accb;margin-top:6px}
#printImage{display:none}
@media print{#app,.modal{display:none!important}body{margin:0!important;background:white!important}#printImage{display:block!important;max-width:100%;max-height:100%;width:auto;height:auto;margin:auto;object-fit:contain}@page{margin:10mm}}
@media(max-width:1080px){.editor-header{height:66px;min-height:66px;padding:0 6px}.header-brand small{display:none}.header-brand{min-width:0}.header-brand strong{font-size:13px}.home-button span,.project-name{display:none}.home-button{padding:0 7px;height:37px}.mode-button,.new-compact,.small-plain{padding:0 7px;height:37px}.tool-button{min-width:41px}.tool-button span{font-size:9px}.editor-right{gap:2px}.color-button{min-width:40px}.color-button span{width:31px;height:31px}}
@media(max-width:700px){.editor-header{gap:2px}.header-brand{display:none}.mode-button{font-size:0}.mode-button::first-letter{font-size:13px}.small-plain{font-size:18px}.new-compact{font-size:10px}.toolbar{overflow-x:auto;max-width:60vw}.tool-button{min-width:36px;padding:4px 2px}.tool-button span{font-size:8px}.tool-button svg{width:19px;height:19px}.control-dock{top:8px;left:8px}.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-height:500px){.control-dock{height:275px;width:72px}.control-dock input[type=range]{height:70px}.gallery-header{margin-bottom:12px}.colors-panel canvas{width:170px}.editor-header{height:58px;min-height:58px}}

.resize-grip{position:absolute;right:2px;bottom:2px;width:27px;height:27px;z-index:5;cursor:nwse-resize;touch-action:none;background:linear-gradient(135deg,transparent 55%,#e98bd0 55% 62%,transparent 62% 71%,#e98bd0 71% 78%,transparent 78%);border-bottom-right-radius:15px}
.layer-row button{touch-action:manipulation}
/* Nauwkeurig passend zwevend schuifblok */
.control-dock{height:auto;min-height:0;padding-bottom:7px}
.control-dock label{margin:7px 0 2px;gap:3px}
.control-dock input[type=range]{height:78px;margin:0}
.control-dock .undo-row{margin:7px 0 0;gap:3px}
.control-dock .action-button{min-height:30px;padding:2px 1px}

/* Mofohani v3 — iconische liggende editor */
.editor-header{height:66px;min-height:66px;padding:0 11px;gap:5px;flex-wrap:nowrap}
.app-mark{width:34px;height:34px;flex:0 0 34px;display:flex;align-items:center}
.app-mark svg{width:34px;height:34px;stroke:none}
.head-icon{width:39px;height:39px;flex:0 0 39px;display:grid;place-items:center;padding:7px;background:transparent;border:1px solid transparent;border-radius:11px;color:#f7dcef}
.head-icon:hover,.head-icon.is-active,.head-icon[aria-pressed="true"]{background:#633156;border-color:#995183}
.head-icon svg{width:23px;height:23px}
.project-name{display:block!important;flex:0 1 152px;min-width:65px;max-width:152px;text-align:left;font-weight:700;font-size:12px;padding:9px 4px;line-height:1.2;color:#fff2fc}
.head-left-actions{display:flex;gap:1px;align-items:center;flex:0 0 auto}
.head-pop-parent{position:relative}
.head-pop{position:absolute;top:calc(100% + 7px);left:0;z-index:38;background:#3f2447;border:1px solid #9c598e;border-radius:13px;box-shadow:0 12px 30px #000a;padding:5px;min-width:128px;display:flex;flex-direction:column;gap:4px}
.head-pop button{border:0;background:transparent;color:#fff4fd;border-radius:9px;padding:9px;min-height:35px;display:flex;align-items:center;gap:9px;text-align:left;font-size:13px;white-space:nowrap}
.head-pop button:hover{background:#61315d}
.head-pop button:disabled{opacity:.4}
.head-pop button svg{width:20px;height:20px}
.toolbar{margin-left:auto;flex:0 1 auto;justify-content:flex-end;gap:3px;white-space:nowrap}
.tool-button{min-width:38px;min-height:42px;padding:8px 7px;display:grid;place-items:center;border-radius:11px}
.tool-button svg{width:24px;height:24px}
.tool-button span{display:none!important}
.color-button{min-width:42px;width:42px;padding:0 3px;display:flex;justify-content:center}
.color-button span{width:32px;height:32px;border-width:3px}
.color-button small{display:none!important}
.control-dock{top:12px;left:10px;bottom:auto;width:68px;height:auto;min-height:0;max-height:calc(100% - 15px);border-radius:14px;padding:6px 5px 10px}
.control-dock .dock-drag{height:18px;display:flex;justify-content:center;align-items:center;margin:0;padding:0;touch-action:none}
.drag-handle-dots{font-size:18px;letter-spacing:1px;line-height:16px;opacity:.75}
.dock-shape{display:flex;align-items:center;justify-content:center;margin:3px auto;background:transparent;border:1px solid transparent;border-radius:10px;width:45px;height:41px}
.dock-shape svg{width:25px;height:25px}
.dock-shape.is-active,.dock-shape:hover{background:#71315f;border-color:#ce64aa}
.dock-separator{height:1px;background:#9f6799;margin:8px 5px}
.control-dock label{font-size:9px;display:flex;align-items:center;flex-direction:column;gap:4px;margin:8px 0 12px}
.control-dock label span{font-size:9px}
.control-dock label output{font-size:10px;color:#f9d1ec}
.control-dock input[type=range]{writing-mode:vertical-lr;direction:rtl;appearance:slider-vertical;margin:0;width:23px;height:clamp(48px,12vh,100px);touch-action:none}
.shapes-panel{width:58px;min-width:58px!important;max-width:58px!important;height:auto!important;max-height:calc(100% - 15px);min-height:0!important;resize:none!important;overflow:visible!important;padding:5px;z-index:19;border-radius:13px}
.shape-list{display:flex;flex-direction:column;gap:4px}
.shape-list button{padding:7px;margin:0;width:46px;height:45px;border-radius:10px;display:grid;place-items:center}
.shape-list button svg{width:24px;height:24px}
.shapes-panel .resize-grip{display:none!important}
.zoom-controls.hidden{display:none!important}
.gallery-back-row{max-width:1340px;margin:-6px auto 20px;display:flex;align-items:center;gap:15px;color:#baa7c4;font-size:12px}
.new-blank-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:18px}
#newSaveQuestion .new-buttons{margin-top:12px}
@media(max-width:1020px){
  .editor-header{padding:0 5px;gap:2px}
  .project-name{flex-basis:100px;max-width:100px;font-size:11px}
  .head-icon{width:35px;height:38px;flex-basis:35px}
  .head-icon svg{width:20px;height:20px}
  .tool-button{min-width:33px;padding:6px 4px}
  .tool-button svg{width:22px;height:22px}
  .app-mark,.app-mark svg{width:28px;height:28px}.app-mark{flex-basis:28px}
}
@media(max-width:760px){
  .editor-header{height:58px;min-height:58px}
  .project-name{flex:0 1 72px;max-width:72px}
  .head-icon{width:31px;flex-basis:31px;padding:4px}
  .tool-button{min-width:29px;padding:3px 2px}.tool-button svg{width:20px;height:20px}
  .color-button{min-width:28px;width:30px}.color-button span{width:25px;height:25px}
  .app-mark{display:none}
  .control-dock{width:61px}
}
@media(max-height:570px){.control-dock input[type=range]{height:48px}.control-dock label{margin:4px 0}.control-dock{padding:3px 4px}}

/* Versie 4: vaste breedte, inhoudsafhankelijke hoogte, geen handmatig vergroten */
.floating-panel:not(.control-dock):not(.shapes-panel){width:min(308px,calc(100vw - 90px))!important;height:auto!important;min-height:0!important;max-height:calc(100% - 16px)!important;min-width:0!important;max-width:308px!important;resize:none!important;overflow-y:auto!important;overscroll-behavior:contain}
.floating-panel:not(.control-dock) .resize-grip{display:none!important}
.floating-panel:not(.control-dock):not(.shapes-panel){right:12px;top:8px;bottom:auto}
.colors-panel canvas{width:min(100%,232px)}
.swatch{width:29px;height:29px}
.recent-swatches{display:grid;grid-template-columns:repeat(8,1fr);gap:5px}
.recent-swatches .swatch{width:100%;height:28px}
#fillTool{position:relative;touch-action:none}
.bucket-color{position:absolute;bottom:4px;right:5px;width:11px;height:11px;border-radius:50%;border:1px solid #fff;background:#f438c7;pointer-events:none;box-shadow:0 0 3px #0008}
.dock-shape{margin:0 auto;width:45px;height:34px}
#pointerToolButton.is-active{background:#74325f;border-color:#ec92ce}
.gallery-navigation{display:flex;align-items:center;gap:15px}
.gallery-navigation #returnEditor{order:2}
.gallery-back-row{margin-top:-5px}
.art-details strong{cursor:text}
#galleryMenu hr{border:0;border-top:1px solid #705073;margin:4px 7px}
#galleryMenu{max-height:80vh;overflow:auto}
#newFormatStep h3{border-top:0}
#drawingCanvas.tool-select{cursor:default}
@media(max-height:540px){.colors-panel canvas{width:min(100%,165px)}.color-tabs{margin-bottom:4px}.color-drag-row{margin-top:6px}.floating-panel{padding:9px}.swatches-heading{margin-top:3px}.swatch{height:22px!important}}

/* 4.1: rustige werkbalk en duidelijke lagen */
.gallery-header .app-version{font-size:.52em;font-weight:650;vertical-align:middle;color:#dcb8d9}
#fillTool>svg{color:#fff!important;stroke:#fff!important}
/* Kleuren binnen de emmer, niet als los stipje ernaast */
#fillTool .bucket-color{position:absolute;left:50%;top:50%;transform:translate(-50%,-36%) rotate(45deg);bottom:auto;right:auto;width:11px;height:11px;border-radius:1px;border:0;box-shadow:none;z-index:0;opacity:.95}
#fillTool>svg{position:relative;z-index:1}
.control-dock .dock-separator{margin:5px 7px;background:#8b5488}
#pointerToolButton,#handToolButton{margin:1px auto}
.layer-row{gap:5px;user-select:none}
.layer-row .layer-name{background:transparent;border:0;display:block;text-align:left;min-width:0;cursor:pointer;flex:1;font-size:12px;padding:5px 0}
.layer-row .layer-name:hover{text-decoration:underline}
.layer-rename,.layer-lock{flex:0 0 25px;width:25px;height:28px;border:0;background:transparent;display:grid;place-items:center;border-radius:6px}
.layer-rename:hover{background:#76405d}
.layer-rename svg,.layer-lock svg{width:17px;height:17px}
.layer-lock{color:#e5badd;opacity:.78;pointer-events:none}
.layer-row.active .layer-lock{color:#9affba;opacity:1}
.layer-row .layer-handle{min-width:27px;min-height:31px;font-size:21px;cursor:grab;touch-action:none;user-select:none;color:#f2c2e4}
.layer-row.is-dragging{border-color:#97c9ff!important;opacity:.66}
.layer-row.drop-target{outline:2px dashed #ff7dcf;outline-offset:1px}
@media(max-width:780px){.head-icon{width:30px;flex-basis:30px;padding:4px}.head-icon svg{width:20px;height:20px}.project-name{flex-basis:80px;max-width:80px}}

/* Mofohani v4.1 — aanvullende galerij- en selectiebediening */
.gallery-header .header-actions .gallery-add{width:48px;min-width:48px;height:48px;border-radius:50%;background:#3a2041;color:#fff;box-shadow:none;padding:0}
.gallery-header .header-actions .gallery-add:hover{background:#633156}
.gallery-add svg,.gallery-start #goAll svg{width:22px;height:22px;flex-shrink:0}
.gallery-start{display:flex;align-items:center;gap:16px;min-width:0;flex-wrap:wrap}
.gallery-start #goAll{display:inline-flex;gap:8px;align-items:center;order:-1;white-space:nowrap}
.gallery-topline .gallery-navigation{margin-left:auto}
#drawingCanvas.tool-select{cursor:default}
#drawingCanvas.tool-select.shape-grab{cursor:grab}
#drawingCanvas.tool-select.shape-grabbing{cursor:grabbing}
@media(max-width:720px){.gallery-topline{align-items:flex-start}.gallery-start{gap:8px}.gallery-start #goAll{min-height:40px;padding:7px 9px}.gallery-start #goAll svg{width:17px;height:17px}}

/* v4.2 — inhoud van de emmer gekleurd, rand permanent wit */
#fillTool svg{overflow:visible}#fillTool .bucket-interior{fill:var(--bucket-fill,#f438c7)!important;stroke:none!important}#fillTool .bucket-outline{fill:none!important;stroke:#fff!important;stroke-width:1.6!important;stroke-linejoin:round;stroke-linecap:round}
#fillTool{--bucket-fill:#f438c7}
/* Meerkeuze, tekst en hulp */
.dock-text{font:700 24px/1 Arial,sans-serif;color:#fff1fa}.dock-multi{height:35px}
.text-panel{top:8px;right:12px;width:308px}.text-choices{display:flex;align-items:center;justify-content:space-between;gap:6px}.text-choices button{flex:1;height:64px;border:1px solid #8d578a;border-radius:10px;background:#4d2b4e;color:#fff3fb;font-family:Arial,sans-serif}.text-choices button:first-child{font-size:35px}.text-choices button:nth-child(2){font-size:24px}.text-choices button:last-child{font-size:17px}.text-choices button.selected{border-color:#ff65ce;background:#742c66}.text-panel small{font-size:11px;display:block;margin-top:9px;color:#dbbdd7}
#drawingCanvas.tool-select{cursor:default}#drawingCanvas.shape-grab{cursor:grab}#drawingCanvas.shape-grabbing{cursor:grabbing}#drawingCanvas.tool-shapes{cursor:crosshair}#drawingCanvas.tool-text{cursor:text}
.editor-trash{position:absolute;bottom:15px;left:16px;width:49px;height:49px;z-index:14;border:1px solid #bd7da9;border-radius:13px;background:#382338ec;display:grid;place-items:center;color:#fff8fd;box-shadow:0 4px 17px #0007}.editor-trash svg{width:24px;height:24px}.editor-trash:hover,.editor-trash.trash-over{background:#8c2a63;border-color:#fff;transform:scale(1.1)}
#multiSelectButton.is-active{background:#792f68;border-color:#ff8cd4}
.gallery-screen.inside-stack .gallery-start{flex-direction:column;align-items:flex-start;gap:5px}.gallery-screen.inside-stack #galleryCount{padding-left:34px;font-size:15px;font-weight:700;color:#f7d4ed}.gallery-start #goAll{order:initial}
.info-dialog{max-width:470px}.info-dialog p{font-size:13px}.text-dialog label{display:block;margin-bottom:8px;font-size:13px}.text-dialog input{width:100%;font:18px Arial,sans-serif;background:#24172c;border:1px solid #b974aa;border-radius:9px;color:#fff;padding:12px;margin-bottom:18px}
@media(max-height:650px){.dock-shape{height:28px}.control-dock input[type=range]{height:clamp(35px,10vh,74px)}.editor-trash{width:42px;height:42px;bottom:6px}}