:root{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#24252a;background:#f3f3f4;font-size:13px}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.4;cursor:not-allowed}.top{height:64px;background:#fff;border-bottom:1px solid #e7e7e9;display:flex;justify-content:space-between;align-items:center;padding:0 26px}.brand{font-size:25px;font-weight:800;letter-spacing:-1.4px}.mark{display:inline-grid;place-items:center;background:#282a30;color:#fff;border-radius:7px;font-size:23px;width:34px;height:34px;margin-right:8px;vertical-align:middle}.subbrand{font-size:12px;letter-spacing:0;color:#aaa;font-weight:500;margin-left:12px}.topright{display:flex;gap:12px;align-items:center}.privacy{font-size:10px;font-weight:750;color:#98999d;letter-spacing:1px;margin-right:14px}.primary{background:#25272d;color:white;border:1px solid #25272d;border-radius:7px;padding:11px 16px;font-weight:650}.quiet,.secondary{background:white;border:1px solid #dedee2;border-radius:7px;padding:10px 12px;color:#4a4b50}.quiet{border:0}.layout{display:flex;height:calc(100vh - 64px);min-height:550px}.sidebar{width:330px;flex:none;background:#fff;border-right:1px solid #e7e7e9;overflow-y:auto;padding:24px 20px 30px}.sidehead,.sectiontitle{font-size:10px;font-weight:800;letter-spacing:1.15px;color:#8b8d95}.sidehead{display:flex;justify-content:space-between;align-items:center;margin-bottom:17px}#stateBadge{background:#f2f2f4;padding:5px 7px;border-radius:4px;font-size:9px}.upload{border:1.5px dashed #c8c9d0;border-radius:9px;text-align:center;padding:21px 8px;position:relative;display:flex;flex-direction:column;gap:7px;cursor:pointer;background:#fbfbfc}.upload.drag{border-color:#6465e9;background:#f0f0ff}.uploadicon{font-size:26px;font-weight:200}.upload strong{font-size:13px}.upload small{color:#92949b}.upload span{font-size:10px;color:#b2b3b8;margin-top:7px}.upload input{position:absolute;inset:0;opacity:0;cursor:pointer}.filename{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#777984;font-size:11px;margin-top:11px}section{border-top:1px solid #ececef;padding-top:23px;margin-top:24px}.sectiontitle{margin-bottom:18px;color:#53545b}label{display:block;color:#666870;font-size:11px;font-weight:600;margin-bottom:14px}input[type=number],select{display:block;width:100%;border:1px solid #dddde1;border-radius:6px;background:#fff;padding:10px;margin-top:7px;color:#2e3037;outline:none}input:focus,select:focus{border-color:#7879d5}.pair{display:grid;grid-template-columns:1fr 1fr;gap:11px}.linkbutton{border:0;background:none;padding:0;color:#5959bd;font-size:11px;font-weight:650}.hint{color:#a0a1a8;font-size:11px;line-height:1.6;margin-top:10px}.segmented{display:flex;border:1px solid #dddde2;border-radius:7px;padding:3px;gap:3px}.segmented button{flex:1;border:0;background:transparent;border-radius:5px;padding:10px;color:#777881}.segmented .selected{background:#272930;color:#fff}.metric{display:flex;justify-content:space-between;align-items:center;margin-top:17px;padding:13px;background:#f6f6f7;border-radius:6px;font-size:11px}.metric span{color:#85868e}.metric strong{font-size:12px}.rangeRow{display:flex;align-items:center;gap:12px;margin-top:12px}.rangeRow input{flex:1;accent-color:#363842}.rangeRow output{min-width:42px;text-align:right;color:#25262a}.buttonrow{display:flex;gap:7px}.buttonrow button{flex:1;padding:9px 5px;font-size:11px}.check{display:inline-flex;gap:7px;align-items:center;margin:0;color:#73757d;font-size:11px;white-space:nowrap}.check input{accent-color:#33353c}.full{width:100%;margin-top:20px}.workspace{flex:1;min-width:0;display:flex;flex-direction:column}.workspacebar{height:58px;background:#fafafb;border-bottom:1px solid #e7e7eb;display:flex;align-items:center;justify-content:space-between;padding:0 26px;gap:12px}.workspacebar>div:first-child{display:flex;align-items:center;gap:14px}.workspacebar strong{font-size:12px}.workspacebar span{font-size:11px;color:#9698a0}.tools{display:flex;align-items:center;gap:12px}.tools button{border:1px solid #dedee2;background:white;border-radius:5px;padding:5px 10px}.tools #zoomLabel{min-width:40px;text-align:center;color:#555}.viewport{flex:1;min-height:0;overflow:hidden;position:relative;background-color:#eeeef0;background-image:radial-gradient(#d4d4d8 0.8px,transparent .8px);background-size:18px 18px;display:flex;align-items:center;justify-content:center}.empty{text-align:center;max-width:360px;color:#34363d;padding:25px}.emptyIcon{font-size:48px;color:#b6b7be}.empty h1{font-size:23px;letter-spacing:-.7px;margin:15px 0 10px}.empty p{color:#90919b;line-height:1.7;margin-bottom:22px}.stage{flex:none;box-shadow:0 8px 40px #0002;line-height:0;touch-action:none;cursor:grab}.stage:active{cursor:grabbing}.stage canvas{display:block;max-width:none}.hidden{display:none}.status{height:40px;border-top:1px solid #e1e1e5;background:#fafafb;display:flex;align-items:center;justify-content:space-between;padding:0 23px;color:#858690;font-size:10px;letter-spacing:.2px}#toast{position:fixed;bottom:56px;right:25px;background:#292b32;color:white;padding:12px 17px;border-radius:8px;opacity:0;transition:opacity .2s;pointer-events:none;max-width:360px;z-index:20}#toast.show{opacity:1}@media(max-width:850px){.sidebar{width:275px;padding:18px 14px}.subbrand,.privacy{display:none}.workspacebar{padding:0 12px}.tools{gap:5px}.workspacebar>div:first-child span{display:none}}@media(max-width:650px){.layout{height:auto;display:block}.sidebar{width:100%;max-height:none}.workspace{height:70vh}.top{padding:0 12px}.topright{gap:3px}.status #sizeReadout{display:none}}

.viewport.pan-mode,.viewport.pan-mode .stage{cursor:grab!important}.viewport.pan-mode:active,.viewport.pan-mode:active .stage{cursor:grabbing!important}.stage{will-change:transform}

.status-guides{display:flex;align-items:center;gap:17px;flex-shrink:0}.status{gap:12px}.status #statusText{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.status-guides .check{font-size:11px}@media(max-width:750px){.status #statusText{font-size:9px}.status-guides{gap:9px}}

#undo{font-weight:600;white-space:nowrap}#undo:disabled{opacity:.35}

/* WQR-style compact toolbar and guide toggles */
.tools{gap:12px;flex-shrink:0}.tools .zoom-slider{width:130px;accent-color:#202024;cursor:pointer;height:4px}.tools #zoomLabel{min-width:46px;text-align:center;font-size:12px;color:#34343a}.tools #zoomFit{padding:7px 12px;border-radius:9px}.tools #undo{margin-left:14px;display:inline-flex;align-items:center;justify-content:center;width:37px;height:35px;padding:0;border-radius:9px;color:#26262a}.tools #undo:disabled{opacity:.3}.status-guides{gap:19px}.status-guides .check{font-size:11px;display:inline-flex;align-items:center;gap:8px;cursor:pointer}.status-guides input[type=checkbox]{appearance:none;-webkit-appearance:none;width:29px;height:17px;border-radius:20px;background:#d5d5d9;position:relative;margin:0;cursor:pointer;transition:background .15s;border:0;flex:none}.status-guides input[type=checkbox]::after{content:"";position:absolute;left:2px;top:2px;width:13px;height:13px;border-radius:50%;background:white;box-shadow:0 1px 2px #0002;transition:transform .15s}.status-guides input[type=checkbox]:checked{background:#222226}.status-guides input[type=checkbox]:checked::after{transform:translateX(12px)}@media(max-width:1100px){.workspacebar{padding:0 12px}.tools{gap:7px}.tools .zoom-slider{width:85px}.status-guides{gap:10px}}

/* v36: match the existing WQR scale slider exactly */
.tools input.zoom-slider[type="range"]{appearance:none;-webkit-appearance:none;display:block;width:130px;height:28px;margin:0;padding:0;border:0;background:transparent;outline:none;cursor:pointer;accent-color:initial}
.tools input.zoom-slider[type="range"]::-webkit-slider-runnable-track{height:3px;border:0;border-radius:3px;background:linear-gradient(to right,#1d1d1f 0 var(--range-fill,10.26%),#d5dbe4 var(--range-fill,10.26%) 100%)}
.tools input.zoom-slider[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:12px;margin-top:-4.5px;border:0;border-radius:50%;background:#1d1d1f;box-shadow:none}
.tools input.zoom-slider[type="range"]::-moz-range-track{height:3px;border:0;border-radius:3px;background:#d5dbe4}
.tools input.zoom-slider[type="range"]::-moz-range-progress{height:3px;border-radius:3px;background:#1d1d1f}
.tools input.zoom-slider[type="range"]::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:#1d1d1f}
.workspacebar .tools{margin-left:auto}
.workspacebar .tools .crop-toggle{margin-right:auto;display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:11px}
.workspacebar .tools .crop-toggle input[type=checkbox]{appearance:none;-webkit-appearance:none;width:29px;height:17px;border-radius:20px;background:#d5d5d9;position:relative;margin:0;cursor:pointer;transition:background .15s;border:0;flex:none}
.workspacebar .tools .crop-toggle input[type=checkbox]::after{content:"";position:absolute;left:2px;top:2px;width:13px;height:13px;border-radius:50%;background:#fff;box-shadow:0 1px 2px #0002;transition:transform .15s}
.workspacebar .tools .crop-toggle input[type=checkbox]:checked{background:#222226}
.workspacebar .tools .crop-toggle input[type=checkbox]:checked::after{transform:translateX(12px)}
.workspacebar .tools #undo{margin-left:14px;background:transparent;border:0;width:33px;height:33px;border-radius:8px;padding:0;color:#25252a}
.workspacebar .tools #undo:hover:not(:disabled){background:#f2f2f4}
@media(max-width:1100px){.tools input.zoom-slider[type="range"]{width:85px}}

/* Crop marks live in Export, using the same switch as the guide controls. */
.sidebar .export-crop-toggle{display:inline-flex;align-items:center;gap:9px;cursor:pointer;margin:1px 0 18px;font-size:12px;color:#575960;font-weight:550}
.sidebar .export-crop-toggle input[type=checkbox]{appearance:none;-webkit-appearance:none;width:29px;height:17px;border-radius:20px;background:#d5d5d9;position:relative;margin:0;cursor:pointer;transition:background .15s;border:0;flex:none}
.sidebar .export-crop-toggle input[type=checkbox]::after{content:"";position:absolute;left:2px;top:2px;width:13px;height:13px;border-radius:50%;background:#fff;box-shadow:0 1px 2px #0002;transition:transform .15s}
.sidebar .export-crop-toggle input[type=checkbox]:checked{background:#222226}
.sidebar .export-crop-toggle input[type=checkbox]:checked::after{transform:translateX(12px)}

/* Physical-size preview control, matched to existing toolbar buttons. */
.workspacebar .tools #actualSize{white-space:nowrap;width:auto;min-width:0;height:35px;padding:0 12px;border:1px solid #dedee2;border-radius:9px;background:#fff;color:#34343a;font-size:12px;font-weight:600;flex:none}.workspacebar .tools #actualSize.active{background:#222226;border-color:#222226;color:#fff}@media(max-width:1050px){.workspacebar .tools #actualSize{padding:0 8px;font-size:11px}}


.tools .preview-scale-label{font-size:12px;font-weight:500;color:#666970;white-space:nowrap;margin-left:8px;margin-right:0}
@media(max-width:1100px){.tools .preview-scale-label{font-size:11px;margin-left:4px}}

/* High-density source artwork and crisp guides over the generated raster bleed. */
#sharpArtworkLayer{position:absolute;inset:0;pointer-events:none;display:block;max-width:none;max-height:none;}
#stage{position:relative;}

/* Pass 82: compact preview zoom control */
.tools input.zoom-slider[type=range]{width:82px}
@media(max-width:1100px){.tools input.zoom-slider[type=range]{width:66px}}

/* Pass 84: clearer bleed presets and clean extension selector focus. */
#bleedButtons button{font-size:16px;font-weight:700;line-height:1.35;letter-spacing:0;}
#extensionMode:focus,#extensionMode:focus-visible{outline:none!important;outline-offset:0!important;box-shadow:none!important;border-color:#dddde1!important;}

/* Inline artwork scale control */
.scaleInline{display:flex;align-items:center;gap:14px;margin-bottom:16px;min-width:0}.scaleInline>label{margin:0;flex:0 0 auto;white-space:nowrap}.scaleInline .rangeRow{margin:0;flex:1;min-width:0}.scaleInline .rangeRow input{min-width:0}