:root{--bg-color: #fdf6e3;--panel-bg: #ffffff;--text-primary: #111111;--text-secondary: #444444;--primary-color: #E67E22;--primary-hover: #d35400;--danger-color: #e74c3c;--danger-hover: #c0392b;--action-color: #3498db;--action-hover: #2980b9;--block-border: 3px solid #111111;--block-shadow: 4px 4px 0px #111111;--block-shadow-hover: 2px 2px 0px #111111;--front-width: 120mm;--front-height: 120mm;--back-width: 151mm;--back-height: 118mm;--spine-width: 6.5mm}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,sans-serif;background:var(--bg-color);background-image:radial-gradient(#111 1px,transparent 1px);background-size:20px 20px;color:var(--text-primary);min-height:100vh;overflow:hidden}.app-container{display:flex;flex-direction:column;height:100vh}.block-panel{background:var(--panel-bg);border:var(--block-border)}.topbar{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;z-index:10;border-bottom:var(--block-border);background:var(--panel-bg);box-shadow:var(--block-shadow)}.logo h1{font-size:20px;font-weight:800;text-transform:uppercase;letter-spacing:-.5px;color:var(--text-primary)}.btn{background:var(--panel-bg);border:var(--block-border);color:var(--text-primary);padding:8px 16px;font-size:14px;border-radius:0;cursor:pointer;font-family:inherit;font-weight:700;text-transform:uppercase;transition:all .1s ease;box-shadow:var(--block-shadow);margin:0 4px}.btn:active{transform:translate(2px,2px);box-shadow:var(--block-shadow-hover)}.btn.active{background:var(--primary-color);color:#111}.btn-primary{background:#f1c40f}.btn-primary:active{transform:translate(2px,2px);box-shadow:var(--block-shadow-hover)}.btn-danger{background:var(--danger-color);color:#fff}.btn-sm{padding:6px 12px;font-size:12px;width:100%;margin-bottom:12px;margin-left:0;margin-right:0}.main-content{display:flex;flex:1;overflow:hidden}.sidebar{width:320px;padding:24px;border-right:var(--block-border);display:flex;flex-direction:column;overflow-y:auto;background:var(--panel-bg)}.sidebar h3{font-size:18px;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:var(--text-primary);margin-bottom:24px;padding-bottom:8px;border-bottom:3px solid #111}.form-input{background:var(--bg-color);border:2px solid #111;color:var(--text-primary);padding:8px;font-family:inherit;font-size:13px;font-weight:600;transition:all .1s;box-shadow:2px 2px #111}.form-input:focus{outline:none;box-shadow:1px 1px #111;transform:translate(1px,1px)}.tool-section{margin-bottom:24px;background:var(--bg-color);border:var(--block-border);padding:16px;box-shadow:inset 2px 2px #0000000d}.tool-section h4{font-size:14px;font-weight:800;text-transform:uppercase;color:var(--text-primary);margin-bottom:12px}.color-block-accordion{margin-bottom:16px;border:var(--block-border);background:var(--bg-color);box-shadow:var(--block-shadow);transition:all .2s}.color-block-accordion[open]{box-shadow:2px 2px #111}.color-block-accordion summary{padding:12px 16px;font-size:14px;font-weight:800;text-transform:uppercase;color:var(--text-primary);cursor:pointer;list-style:none;display:flex;align-items:center;gap:12px;border-bottom:var(--block-border)}.color-block-accordion:not([open]) summary{border-bottom:none}.color-block-accordion summary::-webkit-details-marker{display:none}.color-block-accordion .accordion-content{padding:16px;background:var(--panel-bg)}.upload-btn{display:block;width:100%;text-align:center;background:var(--primary-color);color:#fff;padding:12px;border:var(--block-border);box-shadow:var(--block-shadow);cursor:pointer;font-weight:700;text-transform:uppercase;transition:all .1s ease}.upload-btn:active{transform:translate(2px,2px);box-shadow:var(--block-shadow-hover)}.help-text{font-size:12px;color:var(--text-secondary);margin-top:8px;text-align:center;font-weight:600}.image-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}.gallery-thumb{width:100%;aspect-ratio:1;object-fit:cover;border:2px solid #111;cursor:grab;transition:transform .1s;background:#fff;box-shadow:2px 2px #111}.gallery-thumb:hover{transform:translate(-1px,-1px);box-shadow:3px 3px #111}.gallery-thumb:active{cursor:grabbing;transform:translate(1px,1px);box-shadow:1px 1px #111}.pcr-app{border:var(--block-border)!important;box-shadow:8px 8px #111!important;border-radius:0!important;background:var(--bg-color)!important;font-family:Inter,sans-serif!important;padding:16px!important}.pcr-app .pcr-interaction .pcr-save{background:var(--primary-color)!important;border:2px solid #111!important;border-radius:0!important;box-shadow:2px 2px #111!important;color:#111!important;font-weight:800!important;text-transform:uppercase!important}.pcr-app .pcr-interaction .pcr-clear{background:#fff!important;border:2px solid #111!important;border-radius:0!important;box-shadow:2px 2px #111!important;color:#111!important;font-weight:800!important}.pcr-button{width:100%!important;height:48px!important;border-radius:0!important;border:var(--block-border)!important;box-shadow:var(--block-shadow)!important;transition:all .1s}.pcr-button:active{transform:translate(2px,2px);box-shadow:var(--block-shadow-hover)!important}.workspace{flex:1;display:flex;align-items:center;justify-content:center;overflow:auto;padding:40px;position:relative}.canvas-wrapper{position:relative;border:4px solid #111;box-shadow:12px 12px #000c;background:#fff}.design-canvas{position:relative;background:#fff;overflow:visible;transition:width .3s cubic-bezier(.87,0,.13,1),height .3s cubic-bezier(.87,0,.13,1)}.canvas-mask{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;box-shadow:0 0 0 5000px #fdf6e3d9;z-index:1000}.design-canvas.dragover{outline:6px dashed var(--primary-color);outline-offset:-6px}.canvas-background{position:absolute;top:0;left:0;right:0;bottom:0;background-color:#fff;z-index:0}.design-canvas.view-front{width:var(--front-width);height:var(--front-height)}.design-canvas.view-back{width:var(--back-width);height:var(--back-height)}.spine{position:absolute;top:0;bottom:0;width:var(--spine-width);border-left:2px dashed #E67E22;border-right:2px dashed #E67E22;z-index:5;pointer-events:none;display:flex;justify-content:center;align-items:center;background:#e67e221a}.spine span{transform:rotate(90deg);font-size:10px;font-weight:800;color:#e67e22;text-transform:uppercase;letter-spacing:2px}.left-spine{left:0}.right-spine{right:0}.elements-container{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10}.draggable-item{position:absolute;cursor:move;-webkit-user-select:none;user-select:none;transform-origin:center center;overflow:hidden}.draggable-item img{width:100%;height:100%;display:block;object-fit:fill;pointer-events:none}.text-element{width:100%;height:100%;pointer-events:none;display:flex;align-items:center;justify-content:center;word-break:break-word;text-align:center}img.spine-rotated{position:absolute!important;top:50%!important;left:50%!important;transform:translate(-50%,-50%) rotate(90deg)!important}.draggable-item.active{outline:3px dashed var(--primary-color);overflow:visible}.resize-handle{position:absolute;width:16px;height:16px;background:var(--primary-color);border:3px solid #111;display:none;z-index:20}.rotate-handle{position:absolute;width:16px;height:16px;background:#1abc9c;border:3px solid #111;display:none;z-index:20;top:-32px;left:50%;transform:translate(-50%);cursor:grab}.rotate-line{position:absolute;width:3px;height:20px;background:#111;top:-20px;left:50%;transform:translate(-50%);display:none;z-index:19}.draggable-item.active .resize-handle,.draggable-item.active .rotate-handle,.draggable-item.active .rotate-line{display:block}.resize-handle.nw{top:-8px;left:-8px;cursor:nwse-resize}.resize-handle.ne{top:-8px;right:-8px;cursor:nesw-resize}.resize-handle.sw{bottom:-8px;left:-8px;cursor:nesw-resize}.resize-handle.se{bottom:-8px;right:-8px;cursor:nwse-resize}/*! Pickr 1.9.1 MIT | https://github.com/Simonwep/pickr */.pickr{position:relative;overflow:visible;transform:translateY(0)}.pickr *{box-sizing:border-box;outline:none;border:none;-webkit-appearance:none}.pickr .pcr-button{position:relative;height:2em;width:2em;padding:.5em;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;border-radius:.15em;background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" stroke="%2342445A" stroke-width="5px" stroke-linecap="round"><path d="M45,45L5,5"></path><path d="M45,5L5,45"></path></svg>') no-repeat center;background-size:0;transition:all .3s}.pickr .pcr-button:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background-size:.5em;border-radius:.15em;z-index:-1}.pickr .pcr-button:before{z-index:initial}.pickr .pcr-button:after{position:absolute;content:"";top:0;left:0;height:100%;width:100%;transition:background .3s;background:var(--pcr-color);border-radius:.15em}.pickr .pcr-button.clear{background-size:70%}.pickr .pcr-button.clear:before{opacity:0}.pickr .pcr-button.clear:focus{box-shadow:0 0 0 1px #ffffffd9,0 0 0 3px var(--pcr-color)}.pickr .pcr-button.disabled{cursor:not-allowed}.pickr *,.pcr-app *{box-sizing:border-box;outline:none;border:none;-webkit-appearance:none}.pickr input:focus,.pickr input.pcr-active,.pickr button:focus,.pickr button.pcr-active,.pcr-app input:focus,.pcr-app input.pcr-active,.pcr-app button:focus,.pcr-app button.pcr-active{box-shadow:0 0 0 1px #ffffffd9,0 0 0 3px var(--pcr-color)}.pickr .pcr-palette,.pickr .pcr-slider,.pcr-app .pcr-palette,.pcr-app .pcr-slider{transition:box-shadow .3s}.pickr .pcr-palette:focus,.pickr .pcr-slider:focus,.pcr-app .pcr-palette:focus,.pcr-app .pcr-slider:focus{box-shadow:0 0 0 1px #ffffffd9,0 0 0 3px #00000040}.pcr-app{position:fixed;display:flex;flex-direction:column;z-index:10000;border-radius:.1em;background:#fff;opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;box-shadow:0 .15em 1.5em #0000001a,0 0 1em #00000008;left:0;top:0}.pcr-app.visible{transition:opacity .3s;visibility:visible;opacity:1}.pcr-app .pcr-swatches{display:flex;flex-wrap:wrap;margin-top:.75em}.pcr-app .pcr-swatches.pcr-last{margin:0}@supports (display: grid){.pcr-app .pcr-swatches{display:grid;align-items:center;grid-template-columns:repeat(auto-fit,1.75em)}}.pcr-app .pcr-swatches>button{font-size:1em;position:relative;width:calc(1.75em - 5px);height:calc(1.75em - 5px);border-radius:.15em;cursor:pointer;margin:2.5px;flex-shrink:0;justify-self:center;transition:all .15s;overflow:hidden;background:#0000;z-index:1}.pcr-app .pcr-swatches>button:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background-size:6px;border-radius:.15em;z-index:-1}.pcr-app .pcr-swatches>button:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:var(--pcr-color);border:1px solid rgba(0,0,0,.05);border-radius:.15em;box-sizing:border-box}.pcr-app .pcr-swatches>button:hover{filter:brightness(1.05)}.pcr-app .pcr-swatches>button:not(.pcr-active){box-shadow:none}.pcr-app .pcr-interaction{display:flex;flex-wrap:wrap;align-items:center;margin:0 -.2em}.pcr-app .pcr-interaction>*{margin:0 .2em}.pcr-app .pcr-interaction input{letter-spacing:.07em;font-size:.75em;text-align:center;cursor:pointer;color:#75797e;background:#f1f3f4;border-radius:.15em;transition:all .15s;padding:.45em .5em;margin-top:.75em}.pcr-app .pcr-interaction input:hover{filter:brightness(.975)}.pcr-app .pcr-interaction input:focus{box-shadow:0 0 0 1px #ffffffd9,0 0 0 3px #4285f4bf}.pcr-app .pcr-interaction .pcr-result{color:#75797e;text-align:left;flex:1 1 8em;min-width:8em;transition:all .2s;border-radius:.15em;background:#f1f3f4;cursor:text}.pcr-app .pcr-interaction .pcr-result::-moz-selection{background:#4285f4;color:#fff}.pcr-app .pcr-interaction .pcr-result::selection{background:#4285f4;color:#fff}.pcr-app .pcr-interaction .pcr-type.active{color:#fff;background:#4285f4}.pcr-app .pcr-interaction .pcr-save,.pcr-app .pcr-interaction .pcr-cancel,.pcr-app .pcr-interaction .pcr-clear{color:#fff;width:auto}.pcr-app .pcr-interaction .pcr-save,.pcr-app .pcr-interaction .pcr-cancel,.pcr-app .pcr-interaction .pcr-clear{color:#fff}.pcr-app .pcr-interaction .pcr-save:hover,.pcr-app .pcr-interaction .pcr-cancel:hover,.pcr-app .pcr-interaction .pcr-clear:hover{filter:brightness(.925)}.pcr-app .pcr-interaction .pcr-save{background:#4285f4}.pcr-app .pcr-interaction .pcr-clear,.pcr-app .pcr-interaction .pcr-cancel{background:#f44250}.pcr-app .pcr-interaction .pcr-clear:focus,.pcr-app .pcr-interaction .pcr-cancel:focus{box-shadow:0 0 0 1px #ffffffd9,0 0 0 3px #f44250bf}.pcr-app .pcr-selection .pcr-picker{position:absolute;height:18px;width:18px;border:2px solid #fff;border-radius:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none}.pcr-app .pcr-selection .pcr-color-palette,.pcr-app .pcr-selection .pcr-color-chooser,.pcr-app .pcr-selection .pcr-color-opacity{position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;display:flex;flex-direction:column;cursor:grab;cursor:-webkit-grab}.pcr-app .pcr-selection .pcr-color-palette:active,.pcr-app .pcr-selection .pcr-color-chooser:active,.pcr-app .pcr-selection .pcr-color-opacity:active{cursor:grabbing;cursor:-webkit-grabbing}.pcr-app[data-theme=nano]{width:14.25em;max-width:95vw}.pcr-app[data-theme=nano] .pcr-swatches{margin-top:.6em;padding:0 .6em}.pcr-app[data-theme=nano] .pcr-interaction{padding:0 .6em .6em}.pcr-app[data-theme=nano] .pcr-selection{display:grid;grid-gap:.6em;grid-template-columns:1fr 4fr;grid-template-rows:5fr auto auto;align-items:center;height:10.5em;width:100%;align-self:flex-start}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-preview{grid-area:2/1/4/1;height:100%;width:100%;display:flex;flex-direction:row;justify-content:center;margin-left:.6em}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-preview .pcr-last-color{display:none}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-preview .pcr-current-color{position:relative;background:var(--pcr-color);width:2em;height:2em;border-radius:50em;overflow:hidden}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-preview .pcr-current-color:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background-size:.5em;border-radius:.15em;z-index:-1}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-palette{grid-area:1/1/2/3;width:100%;height:100%;z-index:1}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-palette .pcr-palette{border-radius:.15em;width:100%;height:100%}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-palette .pcr-palette:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background-size:.5em;border-radius:.15em;z-index:-1}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser{grid-area:2/2/2/2}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity{grid-area:3/2/3/2}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser,.pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity{height:.5em;margin:0 .6em}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser .pcr-picker,.pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity .pcr-picker{top:50%;transform:translateY(-50%)}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser .pcr-slider,.pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity .pcr-slider{flex-grow:1;border-radius:50em}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser .pcr-slider{background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity .pcr-slider{background:linear-gradient(to right,transparent,black),url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background-size:100%,.25em}