:root{--bg:#e7e1d7;--panel:#fbfaf7;--panel-2:#fff;--line:#d5cec1;--ink:#211c18;--muted:#74695d;--gold:#d9a441;--gold-2:#f5ca63;--danger:#9d2f2f;--success:#1c7c54;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{color:var(--ink);background:var(--bg);margin:0}button,input,select{font:inherit}.app-shell{grid-template-rows:56px minmax(0,1fr) 184px;grid-template-columns:270px minmax(0,1fr) 300px;height:100vh;display:grid;overflow:hidden}.topbar{color:#fff;z-index:5;background:#3f3934;grid-column:1/-1;justify-content:space-between;align-items:center;padding:0 16px;display:flex;box-shadow:0 2px 18px #0000002e}.brand{align-items:center;gap:12px;display:flex}.logo{background:var(--gold-2);color:#2c2218;border-radius:12px;place-items:center;width:34px;height:34px;font-size:18px;font-weight:900;display:grid}.brand strong{letter-spacing:.02em;font-size:15px;display:block}.brand span{color:#d7d0c5;margin-top:2px;font-size:12px;display:block}.top-actions{gap:8px;display:flex}.left-panel,.right-panel{background:var(--panel);border-right:1px solid var(--line);padding:12px;overflow:auto}.right-panel{border-right:0;border-left:1px solid var(--line)}.panel-card{background:var(--panel-2);border:1px solid var(--line);border-radius:16px;margin-bottom:12px;padding:12px;box-shadow:0 8px 24px #2b23190a}.panel-card h3{text-transform:uppercase;letter-spacing:.1em;color:#5a5046;margin:0 0 10px;font-size:13px}.panel-card label{color:var(--muted);margin:12px 0 5px;font-size:12px;font-weight:800;display:block}select,input[type=text]{border:1px solid var(--line);width:100%;color:var(--ink);background:#fff;border-radius:12px;outline:none;padding:9px 10px}select:focus,input:focus{border-color:var(--gold);box-shadow:0 0 0 3px #d9a4412e}.spec-grid{grid-template-columns:1fr 1fr;gap:8px;margin-top:12px;display:grid}.spec-grid div,.status-list li{background:#f7f2ea;border:1px solid #eee4d6;border-radius:12px;padding:8px}.spec-grid span,.status-list span{color:var(--muted);margin-bottom:2px;font-size:11px;display:block}.spec-grid strong,.status-list strong{font-size:12px}.status-list{gap:7px;margin:0;padding:0;list-style:none;display:grid}.status-list li{justify-content:space-between;align-items:center;display:flex}.status-list span{margin:0}.btn{color:#fff;cursor:pointer;white-space:nowrap;background:#2c2824;border:0;border-radius:12px;padding:9px 12px;font-size:12px;font-weight:850;transition:transform .12s,box-shadow .12s,background .12s}.btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px #0000001f}.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}.btn.secondary{color:#2c2824;background:#eee8df}.btn.warning{background:var(--gold-2);color:#251b0b}.btn.danger{color:var(--danger);background:#f3dfdf}.btn.ghost{color:var(--muted);box-shadow:none;background:0 0;padding-left:0;padding-right:0}.btn.active{color:var(--gold-2);background:#251b0b}.button-grid{grid-template-columns:1fr 1fr;gap:8px;display:grid}.hint{color:var(--muted);margin:10px 0 0;font-size:12px;line-height:1.45}.workspace{background:radial-gradient(circle,#f4efe7 0%,#d8d0c5 100%);grid-template-rows:58px minmax(0,1fr);min-width:0;display:grid;overflow:hidden}.workspace-toolbar{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#ffffff94;border-bottom:1px solid #5a504640;justify-content:space-between;align-items:center;gap:12px;padding:10px 14px;display:flex}.workspace-toolbar strong{font-size:14px;display:block}.workspace-toolbar span{color:var(--muted);margin-top:1px;font-size:12px;display:block}.toolbar-actions{flex-wrap:wrap;justify-content:flex-end;gap:7px;display:flex}.stage-holder{justify-content:center;align-items:center;min-height:0;padding:18px 24px;display:flex;overflow:auto}.stage{width:min(96%, calc((100vh - 330px) * var(--aspect,2)));background:#fff;max-width:100%;max-height:calc(100vh - 336px);position:relative;overflow:hidden;box-shadow:0 20px 70px #1f181247,0 0 0 1px #00000029}.stage.cover{width:min(96%,980px)}.stage.spread{width:min(96%,920px)}.cover-layout,.spread-layout{background:#fff;display:flex;position:absolute;inset:0}.cover-back,.cover-spine,.cover-front{height:100%;position:relative;overflow:hidden}.cover-back,.cover-spine{color:#ffffffc7;text-shadow:0 1px 2px #0006;place-items:center;font-size:12px;font-weight:900;display:grid;box-shadow:inset 0 0 38px #00000026}.cover-back:after,.cover-spine:after{content:"";mix-blend-mode:overlay;background-image:repeating-linear-gradient(45deg,#ffffff14 0 1px,#0000 1px 8px);position:absolute;inset:0}.cover-spine{writing-mode:vertical-rl;text-orientation:mixed;border-left:1px solid #0003;border-right:1px solid #0003}.cover-front{background:#eee;border-left:1px solid #0000002e}.cover-front img,.frame img{object-fit:cover;transform-origin:50%;-webkit-user-select:none;user-select:none;pointer-events:none;width:100%;height:100%}.cover-empty,.empty-photo{color:#7c7064;background:linear-gradient(135deg,#f8f4ed,#ded5c8);border:2px dashed #78645059;place-items:center;width:100%;height:100%;font-weight:900;display:grid}.cover-safe,.spread-safe{z-index:6;pointer-events:none;color:#ca3737c7;border:2px dashed #ca373794;justify-content:flex-end;align-items:flex-start;padding:6px;font-size:11px;font-weight:900;display:flex;position:absolute;inset:3%}.spread-layout{background:#fff;display:block}.spread-layout:before{content:"";background-image:linear-gradient(90deg,#00000006 1px,#0000 1px),linear-gradient(0deg,#00000005 1px,#0000 1px);background-size:5% 10%;position:absolute;inset:0}.center-fold{z-index:7;background:linear-gradient(#0000,#00000059,#0000);width:2px;position:absolute;top:0;bottom:0;left:50%;transform:translate(-1px)}.page-label{z-index:8;color:#6c6258;background:#ffffffbf;border:1px solid #00000014;border-radius:999px;padding:5px 10px;font-size:11px;font-weight:900;position:absolute;top:10px}.page-label.left{left:12px}.page-label.right{right:12px}.blank-spread-message{color:#8b8076;text-align:center;border:2px dashed #d6c9b7;border-radius:20px;place-items:center;padding:18px;font-weight:900;display:grid;position:absolute;inset:12%}.frame{cursor:pointer;background:#eee;border:0;padding:0;position:absolute;overflow:hidden;box-shadow:0 6px 18px #00000024}.frame.selected{outline:4px solid var(--gold-2);outline-offset:3px;z-index:20}.frame span{z-index:3;background:#ffffffe6;border-radius:999px;padding:2px 6px;font-size:10px;font-weight:900;position:absolute;top:5px;left:5px}.text-box{z-index:30;text-shadow:0 2px 8px #00000047;pointer-events:none;font-weight:900;position:absolute;transform:translate(-50%,-50%)}.crop-preview{aspect-ratio:1.45;background:#eee;border-radius:14px;width:100%;margin-bottom:10px;overflow:hidden}.crop-preview img{object-fit:contain;width:100%;height:100%}.crop-controls strong{margin-bottom:6px;display:block}.crop-controls input[type=range]{width:100%;accent-color:var(--gold)}.empty-state{border:1px dashed var(--line);color:var(--muted);background:#faf7f2;border-radius:14px;padding:14px;line-height:1.4}.filmstrip{color:#fff;background:#3f3934;border-top:1px solid #ffffff1f;grid-column:1/-1;grid-template-rows:64px minmax(0,1fr);display:grid;overflow:hidden}.spread-strip{border-bottom:1px solid #ffffff1f;align-items:center;gap:8px;padding:9px 12px;display:flex;overflow-x:auto}.thumb-nav{color:#fff;text-align:left;cursor:pointer;background:#ffffff12;border:1px solid #ffffff2e;border-radius:13px;min-width:132px;height:46px;padding:6px 10px}.thumb-nav.on{border-color:var(--gold-2);box-shadow:inset 0 0 0 1px var(--gold-2);background:#f5ca632e}.thumb-nav span{font-size:12px;font-weight:900;display:block}.thumb-nav small{color:#d7d0c5;font-size:11px}.photo-strip{align-items:center;gap:8px;padding:10px 12px 14px;display:flex;overflow-x:auto}.photo-tile{cursor:pointer;background:#222;border:2px solid #ffffff47;border-radius:10px;flex:none;width:78px;height:58px;padding:0;position:relative;overflow:hidden}.photo-tile img{object-fit:cover;width:100%;height:100%;display:block}.photo-tile.selected{border-color:var(--gold-2);box-shadow:0 0 0 3px #f5ca634d}.photo-tile.used{opacity:.82}.photo-index{color:#2c2824;background:#ffffffe6;border-radius:999px;padding:1px 5px;font-size:10px;font-weight:900;position:absolute;top:4px;left:4px}.photo-tile b{background:var(--gold-2);color:#251b0b;border-radius:50%;place-items:center;width:22px;height:22px;font-size:11px;display:grid;position:absolute;top:4px;right:4px}.photo-tile small{color:#fff;background:#0000009e;border-radius:999px;padding:1px 5px;font-size:9px;font-weight:900;position:absolute;bottom:4px;right:4px}.filmstrip-empty{color:#d7d0c5;border:1px dashed #ffffff38;border-radius:12px;padding:18px 22px;font-weight:800}.modal-backdrop{z-index:100;background:#14100c9e;place-items:center;padding:24px;display:grid;position:fixed;inset:0}.modal-card{background:#fff;border-radius:22px;width:min(760px,96vw);max-height:86vh;padding:22px;overflow:auto;box-shadow:0 24px 80px #00000057}.modal-card h2{margin:0 0 10px}.modal-card p{color:var(--muted);line-height:1.55}.preview-img{border:1px solid var(--line);background:#f2ede4;border-radius:16px;width:100%}.warning-box{background:#fff4f2;border:1px solid #eab2a9;border-radius:15px;padding:10px 14px}.warning-box p{color:#7d241b;margin:5px 0;font-weight:800}.success-box{background:#f2fff6;border:1px solid #a9dfc0;border-radius:15px;padding:12px;font-weight:900;color:#1c7c54!important}.confirm-check{align-items:center;gap:8px;margin-top:14px;font-weight:850;display:flex}.modal-actions{justify-content:flex-end;gap:8px;margin-top:18px;display:flex}.file-list{border:1px solid var(--line);background:#f7f2ea;border-radius:16px;gap:7px;padding:12px;display:grid}.file-list code{color:#2c2824;font-size:13px;display:block}@media (width<=1180px){.app-shell{grid-template-columns:230px minmax(0,1fr) 260px}.toolbar-actions .btn{padding:8px 9px}}@media (width<=980px){.app-shell{grid-template-rows:56px auto minmax(360px,1fr) auto 184px;grid-template-columns:1fr;height:auto;min-height:100vh;overflow:auto}.left-panel,.right-panel{border:0;grid-template-columns:1fr 1fr;gap:12px;display:grid}.panel-card{margin:0}.workspace{min-height:520px}.filmstrip{min-height:184px}}.cover-front.needs-photo{place-items:center;display:grid}.cover-upload-zone{z-index:4;background:linear-gradient(135deg,#f8f4ed,#ded5c8);border:2px dashed #78645061;place-items:center;gap:10px;padding:20px;display:grid;position:absolute;inset:0}.cover-upload-button,.cover-selected-button,.cover-change-button{cursor:pointer;border:0;border-radius:18px;box-shadow:0 10px 28px #00000024}.cover-upload-button{color:#3f3934;text-align:center;background:#fff;place-items:center;gap:6px;min-width:220px;padding:22px 24px;display:grid}.cover-upload-button span{background:var(--gold-2);color:#2c2824;border-radius:50%;place-items:center;width:54px;height:54px;font-size:30px;line-height:1;display:grid}.cover-upload-button strong{font-size:15px}.cover-upload-button small{color:var(--muted);font-size:12px}.cover-selected-button{color:#fff;background:#2c2824;padding:11px 18px;font-weight:850}.cover-change-button{z-index:40;color:#2c2824;background:#ffffffeb;padding:8px 12px;font-size:12px;font-weight:900;position:absolute;top:10px;right:10px}.text-box.selected{z-index:60}.text-box [contenteditable=true]{outline:none}.text-box [contenteditable=true]:focus{box-shadow:inset 0 -2px #f5ca63f2}.text-controls small{color:var(--muted);margin-bottom:8px;font-size:12px;display:block}.text-controls .btn.danger{width:100%;margin-top:8px}.frame,.cover-front{touch-action:none}.text-box{z-index:30;text-shadow:0 2px 8px #00000047;-webkit-user-select:none;user-select:none;min-width:54px;box-shadow:none;border-radius:2px;outline:1px dashed #0000;padding:5px 8px;line-height:1.05;position:absolute;transform:translate(-50%,-50%);background:0 0!important}.text-box.selected{z-index:80;outline-offset:0;box-shadow:none;outline:3px solid #ffe600;background:0 0!important}.text-content{white-space:pre-wrap;overflow-wrap:break-word;cursor:text;-webkit-user-select:text;user-select:text;outline:none;width:100%;min-width:40px;min-height:1em;display:block}.text-content:focus{outline:none;box-shadow:inset 0 -2px #ffe600e6}.text-drag-layer{cursor:move;z-index:5;background:#ffe600;border:2px solid #665900;border-radius:999px;width:42px;height:18px;position:absolute;top:-26px;left:50%;transform:translate(-50%);box-shadow:0 3px 8px #00000040}.text-drag-layer:before{content:"";background:#0000006b;height:2px;position:absolute;top:4px;left:10px;right:10px;box-shadow:0 4px #0000006b}.text-resize-handle{z-index:6;background:#ffe600;border:2px solid #665900;border-radius:50%;width:14px;height:14px;padding:0;position:absolute;box-shadow:0 2px 7px #00000047}.text-resize-handle.handle-nw{cursor:nwse-resize;top:-8px;left:-8px}.text-resize-handle.handle-n{cursor:ns-resize;top:-8px;left:50%;transform:translate(-50%)}.text-resize-handle.handle-ne{cursor:nesw-resize;top:-8px;right:-8px}.text-resize-handle.handle-e{cursor:ew-resize;top:50%;right:-8px;transform:translateY(-50%)}.text-resize-handle.handle-se{cursor:nwse-resize;bottom:-8px;right:-8px}.text-resize-handle.handle-s{cursor:ns-resize;bottom:-8px;left:50%;transform:translate(-50%)}.text-resize-handle.handle-sw{cursor:nesw-resize;bottom:-8px;left:-8px}.text-resize-handle.handle-w{cursor:ew-resize;top:50%;left:-8px;transform:translateY(-50%)}