:root{font:14px Segoe UI,Arial,sans-serif;color:#182437;background:#eef1f5}*{box-sizing:border-box}body{margin:0;display:flex;flex-direction:column;height:100vh}button{font:inherit;cursor:pointer;border:1px solid #c7cfdb;background:#fff;color:inherit;border-radius:6px;padding:8px 11px}button:hover{border-color:#2863b9;color:#2863b9}button.active{background:#e32929;color:#fff;border-color:#e32929}header{display:flex;justify-content:space-between;align-items:center;background:#10243d;color:#fff;padding:10px 18px;gap:12px}header strong{display:block;font-size:18px}header small{color:#abbdd0}header nav{display:flex;gap:7px;flex-wrap:wrap}.toolbar{display:flex;gap:5px;overflow:auto;padding:8px;background:#fff;border-bottom:1px solid #d6deea;min-height:53px}.toolbar button{white-space:nowrap}main{display:flex;min-height:0;flex:1}#workspace{min-width:0;flex:1;overflow:auto;position:relative;background-color:#d9dfe8;background-image:linear-gradient(45deg,#cdd5df 25%,transparent 25%),linear-gradient(-45deg,#cdd5df 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#cdd5df 75%),linear-gradient(-45deg,transparent 75%,#cdd5df 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0}#canvas{display:none;margin:30px;box-shadow:0 7px 35px #2337;touch-action:none;cursor:crosshair;background:#fff}#welcome{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;background:#fff;border-radius:14px;padding:50px;box-shadow:0 8px 30px #1824372a;min-width:320px}#welcome h1{margin:0}aside{width:255px;background:#fff;border-left:1px solid #d6deea;padding:14px;overflow:auto;flex:none}aside h2{margin:0 0 15px;font-size:16px}label{display:flex;justify-content:space-between;align-items:center;gap:6px;margin:9px 0}label input:not([type=color]){width:94px;padding:6px;border:1px solid #bdc9d7;border-radius:4px}input[type=color]{width:46px;height:30px;border:none;background:none}.actions{display:grid;gap:6px;margin-top:14px}.hint{color:#6a7788;font-size:12px;line-height:1.5}footer{padding:7px 14px;background:#10243d;color:#fff;font-size:12px}body.dark{color:#ebf1f8;background:#142035}body.dark aside,body.dark .toolbar,body.dark #welcome{background:#1e304a}body.dark button{background:#29405e;color:#fff;border-color:#3a5577}body.dark button.active{background:#b82c32}body.dark #workspace{background-color:#20334b;background-image:none}@media(max-width:800px){aside{width:190px}header{align-items:flex-start}header nav button{padding:5px}#canvas{margin:12px}}
#queuePanel{width:230px;flex:none;background:#fff;border-right:1px solid #d6deea;padding:10px;overflow:auto}#queue{max-height:55vh;overflow:auto}.queue-head{display:flex;justify-content:space-between;align-items:center}.queue-actions{display:grid;gap:5px;margin-top:12px}.queue-item{display:flex;align-items:center;gap:8px;width:100%;text-align:left;margin:5px 0;overflow:hidden}.queue-item img{width:48px;height:35px;object-fit:contain;background:#dce3ea}.queue-item span{overflow:hidden;text-overflow:ellipsis}.queue-item.active{border:2px solid #e32929}.toolbar{flex-wrap:wrap;overflow:visible}.toolbar button{font-size:12px;padding:6px 9px}aside{width:310px}aside h2{margin-top:20px}aside input[type=range]{width:90px}aside select{max-width:140px}.preset-row{display:flex;flex-wrap:wrap;gap:3px}.preset-row button{padding:5px}.blur-setting output{min-width:32px;text-align:right}.queue-collapsed #queue,.queue-collapsed .queue-actions,.queue-collapsed label{display:none}.queue-collapsed{width:125px!important}body.dark #queuePanel{background:#1e304a}@media(max-width:900px){#queuePanel{width:155px}aside{width:240px}}
[hidden],.hide-setting{display:none!important}
#logoPreview{max-width:110px;max-height:65px;object-fit:contain;background:transparent;margin:4px 0}.logo-setting h2{font-size:15px}.logo-setting .actions{margin:4px 0 12px}.logo-setting .preset-row button{font-size:11px}#placedLogoSettings{border-top:1px solid #d5dde8;padding-top:8px}#logoStatus{font-size:12px;word-break:break-word}
:root{--navy:#0c213a;--navy2:#193653;--orange:#f28c28;--blue:#2563ae;--red:#b83b45;--panel:#fff;color:var(--navy)}header,footer{background:var(--navy)}header .brand{display:flex;align-items:center;gap:12px}.brand-logo{height:52px;max-width:155px;border-radius:7px;background:white;padding:4px;display:flex;align-items:center}.brand-logo[hidden]{display:none}.brand-logo img{max-height:44px;max-width:145px;object-fit:contain}header nav button{background:var(--navy2);border-color:#38536c;color:#fff}header nav button:hover{background:#2a4b68;border-color:var(--orange);color:#fff}#export,#exportAll{background:var(--orange);border-color:var(--orange);color:#172335;font-weight:700}.toolbar{background:#eaf0f5}.toolbar button.active{background:var(--orange);border-color:var(--orange);color:#182438;font-weight:700}.toolbar button:hover{border-color:var(--orange);color:var(--navy)}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--orange);outline-offset:1px}#queuePanel{display:flex;flex-direction:column;background:var(--navy);color:#fff}#queuePanel h3{color:var(--orange);font-size:12px;text-transform:uppercase;letter-spacing:1px;margin:14px 0 7px}.queue-item{background:var(--navy2);border-color:#3b5570;color:#edf5fc}.queue-item:hover{background:#2b4d6c;color:white}.queue-item.active{border-color:var(--orange)}.annotation-section{display:flex;flex-direction:column;min-height:100px;flex:1;overflow:hidden}#annotationSearch{width:100%;padding:7px;margin:4px 0;background:#edf3f9;border:1px solid #496785;border-radius:5px}#annotationList{min-height:70px;overflow-y:auto;flex:1}.annotation-row{display:flex;align-items:center;gap:2px;background:var(--navy2);color:#fff;border:1px solid #39536b;border-left:3px solid transparent;border-radius:4px;padding:3px;margin:3px 0;min-height:35px}.annotation-row.active{border-left-color:var(--orange);background:#294762}.annotation-row .row-label{background:transparent;border:none;color:inherit;min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}.annotation-row button{padding:3px 5px;background:transparent;border:0;color:#fff}.annotation-row .row-delete{color:#ff8e91}.annotation-row .row-delete:hover{color:#fff;background:var(--red)}.annotation-row.hidden-object{opacity:.55}#objectMenu{position:fixed;z-index:20;background:var(--navy);color:white;border:1px solid var(--orange);box-shadow:0 9px 24px #0005;min-width:150px;padding:5px;border-radius:6px}#objectMenu button{display:block;width:100%;background:transparent;color:white;border:0;text-align:left}#objectMenu button:hover{background:var(--navy2)}.stroke-setting,.rectangle-setting,.text-setting{border-top:1px solid #cad4de;margin-top:12px;padding-top:8px}#toolProperties h3{margin:6px 0;color:var(--orange);font-size:12px;text-transform:uppercase}aside input[type=range]{min-width:55px;flex:1}aside input[type=number]{width:65px!important}aside{width:300px}aside label{font-size:12px}body.dark aside,body.dark #queuePanel{background:var(--navy)}body.dark .toolbar{background:#152b43}body.dark .toolbar button.active{background:var(--orange);color:#152339}body.dark .annotation-row{background:var(--navy2)}body.dark .annotation-row.active{border-left-color:var(--orange)}body.dark aside input,body.dark aside select{background:#eaf1f7;color:#14253a}
.brand-logo{width:190px;max-width:190px;height:62px;max-height:62px;flex:none}.brand-logo img{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain}

/* Three independent vertical panes. The left panel owns wheel scrolling throughout. */
main{min-height:0;overflow:hidden}#queuePanel{min-height:0;overflow-y:auto;overscroll-behavior:contain}#queue{max-height:none;overflow:visible;flex:none}.annotation-section{display:block;min-height:0;flex:none;overflow:visible}#annotationList{min-height:0;max-height:none;overflow:visible;flex:none}aside{min-height:0;overflow-y:auto;overscroll-behavior:contain}#workspace{min-height:0;overflow:auto;overscroll-behavior:contain}
dialog{border:1px solid #3a5675;border-radius:12px;background:#f7f9fc;color:var(--navy);max-width:min(850px,95vw);max-height:92vh;overflow:auto;box-shadow:0 25px 90px #061a3180}dialog::backdrop{background:#061a31aa}.modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.modal-grid section{min-width:0}.modal-grid fieldset{border:1px solid #c8d2dd;border-radius:6px}.modal-grid label{font-size:13px;display:flex;align-items:center;justify-content:space-between;gap:8px;margin:10px 0}.modal-grid input[type=range]{width:110px}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin:15px 0}#startExport{background:var(--orange);border-color:var(--orange);font-weight:bold}#exportEstimate{padding:10px;background:#eaf0f5;border-radius:6px;line-height:1.6}#exportProgress{width:100%;accent-color:var(--orange)}#bgPreview{max-width:100%;max-height:50vh;background-image:conic-gradient(#d7dfe8 25%,#fff 0 50%,#d7dfe8 0 75%,#fff 0);background-size:20px 20px}#bgDialog{max-width:min(980px,95vw)}@media(max-width:720px){.modal-grid{grid-template-columns:1fr}}
#canvas.transparent-preview{background-image:conic-gradient(#d7dfe8 25%,#fff 0 50%,#d7dfe8 0 75%,#fff 0);background-size:20px 20px}

#exportSummary{white-space:pre-line;line-height:1.45}

/* WordPress edition: preserve desktop layout, expose panes on narrow screens. */
.quota-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:7px 12px;background:#eaf0f5;color:#0c213a;font-size:12px}.quota-bar details{position:relative}.quota-bar details[open]{max-width:720px}.quota-bar button{padding:4px 7px}.mobile-panes{display:none}body{height:100dvh}header{flex:none}header .brand{min-width:0}main{position:relative}body.dark .quota-bar{background:#193653;color:#fff}
@media(max-width:1000px){header{flex-wrap:wrap}header .brand-logo{width:125px;height:48px}header strong{font-size:16px}header small{font-size:11px}.mobile-panes{display:flex;gap:5px;padding:4px 8px;background:#eaf0f5}#queuePanel,aside{display:none;position:absolute;top:0;bottom:0;z-index:5;width:min(300px,85vw)!important}#queuePanel{left:0}aside{right:0}body.show-images #queuePanel{display:flex}body.show-properties aside{display:block}#welcome{min-width:0;width:min(92%,430px);padding:24px}.toolbar{max-height:110px;overflow:auto;flex:none}}
@media(max-width:480px){header{padding:7px}header nav{gap:4px}header nav button{font-size:11px;padding:5px}.quota-bar{gap:4px}.toolbar button{font-size:11px;padding:5px}.brand-logo{width:95px!important}}