:root{--mat: #2f7f6f;--mat-deep: #276b5d;--mat-line: rgba(255, 255, 255, .16);--mat-line-strong: rgba(255, 255, 255, .28);--panel: #f6ead8;--panel-2: #efdcc0;--panel-3: #e7cfa9;--panel-edge: #d8bd93;--ink: #3a3026;--ink-soft: #6f6152;--ink-faint: #9a8b76;--accent: #c66a4a;--accent-deep: #a9502f;--accent-soft: #e7a184;--shadow-sm: 0 1px 2px rgba(40, 28, 16, .18);--shadow-md: 0 6px 18px rgba(30, 20, 10, .22);--shadow-lg: 0 18px 48px rgba(20, 12, 4, .32);--serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;--sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;--ruler: 26px}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:var(--sans);color:var(--ink);background:var(--mat-deep);-webkit-font-smoothing:antialiased;overflow:hidden}button{font-family:inherit;cursor:pointer}.app{display:flex;flex-direction:column;height:100%}.topbar{display:flex;align-items:center;gap:12px;padding:8px 16px;background:linear-gradient(180deg,var(--panel) 0%,var(--panel-2) 100%);border-bottom:1px solid var(--panel-edge);box-shadow:var(--shadow-sm);z-index:20}.brand{display:flex;align-items:baseline;gap:8px;font-family:var(--serif);font-weight:800;font-size:22px;color:var(--ink);letter-spacing:.2px}.brand .tag{font-family:var(--sans);font-size:11px;font-weight:600;color:var(--ink-faint);letter-spacing:.4px;text-transform:uppercase}.topbar .spacer{flex:1}.btn{border:1px solid var(--panel-edge);background:#fff8ec;color:var(--ink);border-radius:10px;padding:7px 12px;font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:6px;box-shadow:var(--shadow-sm);transition:transform .08s ease,background .12s ease,box-shadow .12s ease}.btn:hover{background:#fffdf6;transform:translateY(-1px)}.btn:active{transform:translateY(0)}.btn:disabled{opacity:.45;cursor:default;transform:none}.btn.primary{background:var(--accent);border-color:var(--accent-deep);color:#fff6ef}.btn.primary:hover{background:var(--accent-deep)}.btn.ghost{background:transparent;box-shadow:none}.btn.icon{padding:7px 9px}.seg{display:inline-flex;background:var(--panel-3);border-radius:11px;padding:3px;border:1px solid var(--panel-edge)}.seg button{border:none;background:transparent;border-radius:8px;padding:6px 14px;font-size:13px;font-weight:700;color:var(--ink-soft)}.seg button.active{background:#fff8ec;color:var(--ink);box-shadow:var(--shadow-sm)}.studio{position:relative;flex:1;display:flex;min-height:0}.sidebar{width:288px;flex-shrink:0;background:linear-gradient(180deg,var(--panel) 0%,var(--panel-2) 100%);border-right:1px solid var(--panel-edge);display:flex;flex-direction:column;z-index:15;box-shadow:2px 0 12px #140c041f}.sidebar-tabs{display:flex;padding:10px 10px 0;gap:4px}.sidebar-tabs button{flex:1;border:1px solid transparent;border-bottom:none;background:transparent;padding:8px 4px;font-size:12px;font-weight:700;color:var(--ink-soft);border-radius:9px 9px 0 0}.sidebar-tabs button.active{background:#fff8ec;border-color:var(--panel-edge);color:var(--ink)}.sidebar-body{flex:1;overflow-y:auto;padding:14px;background:#fff8ec;border-top:1px solid var(--panel-edge);margin:0 10px 10px;border-radius:0 0 10px 10px}.field{display:flex;gap:6px}.input{flex:1;border:1px solid var(--panel-edge);border-radius:9px;padding:9px 11px;font-size:13px;background:#fffdf7;color:var(--ink);min-width:0}.input:focus{outline:2px solid var(--accent-soft);outline-offset:0}.help{font-size:11.5px;color:var(--ink-faint);line-height:1.5;margin:10px 2px 0}.help a{color:var(--accent-deep)}.dropzone{border:2px dashed var(--panel-edge);border-radius:14px;padding:26px 16px;text-align:center;background:repeating-linear-gradient(45deg,#fffdf7,#fffdf7 10px,#fbf3e2 10px,#fbf3e2 20px);color:var(--ink-soft);transition:border-color .15s ease,background .15s ease}.dropzone.hot{border-color:var(--accent);background:#fff3ea}.dropzone .big{font-family:var(--serif);font-size:17px;font-weight:700;color:var(--ink);margin-bottom:4px}.results{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.result{position:relative;border:1px solid var(--panel-edge);border-radius:10px;overflow:hidden;background:#fffdf7;padding:0;aspect-ratio:1 / 1;box-shadow:var(--shadow-sm)}.result img{width:100%;height:100%;object-fit:cover;display:block}.result:hover{outline:2px solid var(--accent)}.result .cap{position:absolute;left:0;right:0;bottom:0;font-size:9px;line-height:1.25;padding:3px 5px;color:#fff;background:linear-gradient(180deg,transparent,rgba(0,0,0,.72));text-align:left;pointer-events:none}.muted{color:var(--ink-faint);font-size:12px}.spinner{width:18px;height:18px;border:3px solid var(--panel-edge);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;margin:20px auto}@keyframes spin{to{transform:rotate(360deg)}}.stage-wrap{position:relative;flex:1;min-width:0;overflow:hidden;background-color:var(--mat);background-image:linear-gradient(var(--mat-line) 1px,transparent 1px),linear-gradient(90deg,var(--mat-line) 1px,transparent 1px),linear-gradient(var(--mat-line-strong) 1px,transparent 1px),linear-gradient(90deg,var(--mat-line-strong) 1px,transparent 1px);background-size:20px 20px,20px 20px,100px 100px,100px 100px;background-position:var(--ruler) var(--ruler)}.ruler{position:absolute;background:var(--mat-deep);color:#ffffffb8;z-index:6;overflow:hidden;pointer-events:none;font-size:8px}.ruler.top{top:0;left:var(--ruler);right:0;height:var(--ruler);border-bottom:1px solid rgba(0,0,0,.25);background-image:repeating-linear-gradient(90deg,transparent 0,transparent 19px,rgba(255,255,255,.32) 19px,rgba(255,255,255,.32) 20px)}.ruler.left{top:0;left:0;bottom:0;width:var(--ruler);border-right:1px solid rgba(0,0,0,.25);background-image:repeating-linear-gradient(180deg,transparent 0,transparent 19px,rgba(255,255,255,.32) 19px,rgba(255,255,255,.32) 20px)}.ruler.corner{top:0;left:0;width:var(--ruler);height:var(--ruler);z-index:7;border-right:1px solid rgba(0,0,0,.25);border-bottom:1px solid rgba(0,0,0,.25)}.ruler .tick-label{position:absolute;font-weight:600;letter-spacing:.3px}.stage-host{position:absolute;inset:var(--ruler) 0 0 var(--ruler)}.stage-host.panning{cursor:grab}.stage-host.panning.active{cursor:grabbing}.sel-toolbar{position:absolute;z-index:12;display:flex;flex-direction:column;gap:3px;padding:4px;background:var(--panel);border:1px solid var(--panel-edge);border-radius:12px;box-shadow:var(--shadow-md);transform:translate(-50%,-120%)}.sel-toolbar .sel-row{display:flex;align-items:center;gap:2px}.sel-toolbar button{border:none;background:transparent;border-radius:8px;padding:6px 8px;font-size:13px;color:var(--ink);display:inline-flex;align-items:center;gap:4px;font-weight:600}.sel-toolbar button:hover{background:var(--panel-3)}.sel-toolbar button.danger:hover{background:#f2c3b2}.sel-toolbar .divider{width:1px;background:var(--panel-edge);margin:2px}.sel-toolbar .sel-credit{display:flex;align-items:center;gap:4px;max-width:260px;padding:3px 4px 1px;border-top:1px solid var(--panel-edge);margin-top:1px;font-size:10.5px;color:var(--ink-soft)}.sel-toolbar .sel-credit a,.sel-toolbar .sel-credit>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sel-toolbar .sel-credit a{color:var(--accent-deep);text-decoration:none;font-weight:600}.sel-toolbar .sel-credit a:hover{text-decoration:underline}.sel-toolbar .sel-credit .copy{flex-shrink:0;margin-left:auto;padding:2px 5px;font-size:11px}.bottom-bar{position:absolute;bottom:0;left:50%;transform:translate(-50%);z-index:14;display:flex;align-items:center;gap:10px;padding:10px 18px 12px;background:linear-gradient(180deg,var(--panel) 0%,var(--panel-2) 100%);border:1px solid var(--panel-edge);border-bottom:none;border-radius:16px 16px 0 0;box-shadow:0 -6px 20px #140c043d}.bottom-bar .chip{border:1px solid var(--panel-edge);background:#fff8ec;border-radius:10px;padding:7px 12px;font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:8px;color:var(--ink)}.bottom-bar .chip .swatch-dot{width:16px;height:16px;border-radius:5px;border:1px solid rgba(0,0,0,.2)}.zoom{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--panel-edge);background:#fff8ec;border-radius:10px;padding:3px}.zoom button{border:none;background:transparent;border-radius:7px;padding:5px 9px;font-size:14px;font-weight:700;color:var(--ink)}.zoom button:hover{background:var(--panel-3)}.zoom .pct{min-width:46px;text-align:center;font-size:12px;font-weight:700;color:var(--ink-soft)}.popover{position:absolute;bottom:calc(100% + 8px);left:0;z-index:30;background:var(--panel);border:1px solid var(--panel-edge);border-radius:14px;box-shadow:var(--shadow-lg);padding:14px;width:264px}.popover h4{margin:0 0 8px;font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--ink-faint)}.preset-list{display:grid;gap:4px}.preset-list button{text-align:left;border:1px solid transparent;background:transparent;border-radius:8px;padding:8px 10px;font-size:13px;font-weight:600;color:var(--ink);display:flex;justify-content:space-between}.preset-list button:hover{background:#fff8ec}.preset-list button.active{background:#fff8ec;border-color:var(--panel-edge)}.preset-list button .dim{color:var(--ink-faint);font-weight:500}.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.swatch{aspect-ratio:1;border-radius:9px;border:2px solid rgba(0,0,0,.14);position:relative}.swatch.active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}.pos-anchor{position:relative}.popover-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:25}.drop-overlay{position:absolute;inset:calc(var(--ruler) + 14px) 14px 14px calc(var(--ruler) + 14px);z-index:9;pointer-events:none;display:flex;align-items:center;justify-content:center}.drop-overlay:after{content:"drop to add ✦";font-family:var(--serif);font-size:20px;color:var(--accent-deep)}.pages-rail{width:128px;flex-shrink:0;background:linear-gradient(180deg,var(--panel) 0%,var(--panel-2) 100%);border-left:1px solid var(--panel-edge);z-index:15;display:flex;flex-direction:column;box-shadow:-2px 0 12px #140c041a}.pages-rail .rail-head{padding:10px 10px 6px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--ink-faint)}.pages-list{flex:1;overflow-y:auto;padding:4px 10px 10px;display:flex;flex-direction:column;gap:10px}.page-thumb{border:2px solid var(--panel-edge);border-radius:8px;overflow:hidden;background:#fff;cursor:pointer;position:relative;box-shadow:var(--shadow-sm)}.page-thumb.active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft),var(--shadow-sm)}.page-thumb .thumb-canvas{display:block;width:100%}.page-thumb .lbl{font-size:10px;font-weight:700;color:var(--ink-soft);padding:3px 6px;background:var(--panel);display:flex;justify-content:space-between;align-items:center}.page-thumb .del{border:none;background:transparent;color:var(--ink-faint);font-size:12px;padding:0 2px;line-height:1}.page-thumb .del:hover{color:var(--accent-deep)}.add-page{border:2px dashed var(--panel-edge);border-radius:8px;background:transparent;color:var(--ink-soft);padding:14px 4px;font-size:12px;font-weight:700}.add-page:hover{border-color:var(--accent);color:var(--accent-deep)}.footer{padding:6px 16px;font-size:11px;color:#ffffffd1;background:var(--mat-deep);display:flex;gap:14px;align-items:center;z-index:20}.footer .spacer{flex:1}.footer a{color:#ffe9d8}.modal-scrim{position:fixed;top:0;right:0;bottom:0;left:0;background:#1810089e;z-index:100;display:flex;align-items:center;justify-content:center;padding:24px}.modal{background:var(--panel);border:1px solid var(--panel-edge);border-radius:18px;box-shadow:var(--shadow-lg);max-width:min(920px,96vw);max-height:92vh;display:flex;flex-direction:column;overflow:hidden}.modal-head{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--panel-edge);background:linear-gradient(180deg,var(--panel) 0%,var(--panel-2) 100%)}.modal-head h3{margin:0;font-family:var(--serif);font-size:18px}.modal-head .spacer{flex:1}.modal-body{padding:16px;overflow:auto;background:var(--mat);background-image:linear-gradient(var(--mat-line) 1px,transparent 1px),linear-gradient(90deg,var(--mat-line) 1px,transparent 1px);background-size:20px 20px;display:flex;justify-content:center;align-items:center}.trim-canvas-host{position:relative;line-height:0;box-shadow:var(--shadow-lg)}.trim-toggle{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--ink-soft)}.gallery{flex:1;overflow-y:auto;background:#f4ecdd;background-image:radial-gradient(rgba(0,0,0,.045) 1px,transparent 1px);background-size:18px 18px;padding:32px}.gallery-inner{max-width:1100px;margin:0 auto}.gallery h1{font-family:var(--serif);font-size:30px;margin:0 0 4px;color:var(--ink)}.gallery .sub{color:var(--ink-soft);font-size:14px;margin-bottom:24px}.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:22px}.gcard{background:#fff;border-radius:4px;padding:12px 12px 16px;box-shadow:var(--shadow-md);transform:rotate(var(--tilt, 0deg));transition:transform .15s ease,box-shadow .15s ease;cursor:pointer;border:1px solid #eadfca}.gcard:hover{transform:rotate(0) translateY(-3px);box-shadow:var(--shadow-lg)}.gcard img{width:100%;display:block;background:#f2ece0;border-radius:2px}.gcard .meta{padding-top:10px}.gcard .meta .t{font-family:var(--serif);font-weight:700;font-size:15px;color:var(--ink)}.gcard .meta .d{color:var(--accent-deep);font-size:13px;margin-top:2px}.gcard-add{border:3px dashed #c9b891;border-radius:4px;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:220px;color:var(--ink-soft);font-weight:700;gap:6px}.gcard-add:hover{border-color:var(--accent);color:var(--accent-deep)}.gcard-add .plus{font-size:34px;line-height:1}.lightbox{position:fixed;top:0;right:0;bottom:0;left:0;z-index:120;background:#181008c7;display:flex;align-items:center;justify-content:center;padding:32px}.lightbox .frame{background:#fff;padding:18px;border-radius:6px;box-shadow:var(--shadow-lg);max-width:92vw;max-height:92vh;display:flex;flex-direction:column;gap:12px}.lightbox img{max-width:100%;max-height:72vh;object-fit:contain;border-radius:3px}.lightbox .cap{text-align:center}.lightbox .cap .t{font-family:var(--serif);font-weight:700;font-size:20px}.lightbox .cap .d{color:var(--accent-deep);font-size:16px;margin-top:2px}.toasts{position:fixed;bottom:18px;right:18px;z-index:200;display:flex;flex-direction:column;gap:8px;max-width:320px}.toast{background:var(--ink);color:#fff6ec;padding:10px 14px;border-radius:10px;font-size:13px;box-shadow:var(--shadow-lg);animation:toast-in .18s ease}.toast.error{background:var(--accent-deep)}@keyframes toast-in{0%{opacity:0;transform:translateY(8px)}}.form-row{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}.form-row label{font-size:12px;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.4px}.modal-foot{display:flex;gap:8px;justify-content:flex-end;padding:12px 16px;border-top:1px solid var(--panel-edge);background:var(--panel-2)}.credits-box{margin-top:12px;padding:10px 12px;border:1px solid var(--panel-edge);border-radius:10px;background:#fffdf7}.credits-box .credits-head{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--ink-faint);margin-bottom:6px}.credits-box ul{margin:0;padding-left:16px;display:flex;flex-direction:column;gap:3px;max-height:120px;overflow-y:auto}.credits-box li{font-size:12px;color:var(--ink)}.credits-box li a{color:var(--accent-deep)}.credits-box li .src{color:var(--ink-faint)}.loading-screen{height:100%;display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--serif);font-size:20px}