:root{--ink: #0a0a0a;--accent: #a8bfe8;--accent-hover: #90aee0;--action-red: #e8000d;--bg: #f5f2ed;--line: #e7e2dc;--book-page-ratio: 205 / 210;--photo-portrait-ratio: 2 / 3;--photo-landscape-ratio: 3 / 2;--ph1: linear-gradient(160deg, #c8d0d4 0%, #8898a4 100%);--ph2: linear-gradient(140deg, #d4c8c0 0%, #a89890 100%);--ph3: linear-gradient(170deg, #c4ccc8 0%, #9caca8 100%);--ph4: linear-gradient(150deg, #d0d4c8 0%, #a8ac9c 100%);--ph5: linear-gradient(165deg, #c8c4bc 0%, #a09c94 100%);--ph6: linear-gradient(145deg, #ccd0d8 0%, #a4a8b8 100%);--ph7: linear-gradient(155deg, #d4c8bc 0%, #aca098 100%);--ph8: linear-gradient(168deg, #c0c8cc 0%, #98a8ac 100%)}*{box-sizing:border-box}body{margin:0;font-family:Helvetica Neue,Arial,sans-serif;font-weight:400;color:var(--ink);background:var(--bg)}button,input{font-family:Helvetica Neue,Arial,sans-serif;font-weight:400}button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0!important}button:disabled{opacity:.55;cursor:not-allowed}.app-shell,.order-app,.preview-app{min-height:100vh}.app-shell,.order-app{height:100vh;display:flex;flex-direction:column}.topbar{height:56px;display:flex;align-items:center;gap:10px;padding:0 20px;border-bottom:1px solid var(--line);background:#fff}.logo{font-family:Georgia,serif;font-style:italic;font-size:28px;color:var(--ink)}.logo.white{color:#fff}.divider{width:1px;height:24px;background:var(--line)}.spacer{flex:1}.cursor-pointer{cursor:pointer}.btn-save,.btn-preview,.btn-order,.btn-primary,.btn-outline-white{border-radius:0!important;padding:9px 16px;text-transform:uppercase;letter-spacing:.8px;font-size:11px;font-weight:500;line-height:1;cursor:pointer;display:inline-flex;align-items:center;gap:6px}.btn-save{background:transparent;border:1.5px solid var(--ink);color:var(--ink)}.btn-save:hover{background:var(--ink);color:#fff}.btn-preview{background:var(--ink);border:1.5px solid var(--ink);color:#fff}.btn-preview:hover{background:#333;border-color:#333}.btn-order,.btn-primary{background:var(--accent);border:0;color:var(--ink)}.btn-order:hover,.btn-primary:hover{background:var(--accent-hover)}.btn-primary.full{width:100%;padding:13px}.btn-outline-white{background:transparent;border:1.5px solid #fff;color:#fff}.btn-outline-white:hover{background:#ffffff14}.main-grid{display:grid;grid-template-columns:72px 280px 1fr 130px;height:calc(100vh - 56px);min-height:0;overflow:hidden}.icon-rail,.side-panel,.right-rail{background:#fff;border-right:1px solid var(--line)}.icon-rail{display:flex;flex-direction:column;gap:8px;padding:16px 8px}.rail-item{border:0;background:transparent;color:#9a9a9a;text-transform:capitalize;padding:9px 8px;font-size:11px;font-weight:500;letter-spacing:.4px;cursor:pointer}.rail-item.active{background:#eef2fb;color:var(--ink)}.side-panel{display:flex;flex-direction:column;gap:12px;padding:16px;min-height:0;overflow-y:auto}.panel-header,.field-label{text-transform:uppercase;letter-spacing:1px;font-weight:500}.panel-header{font-size:11px}.field-label{font-size:10px;color:#969696}.field-input{border:1px solid #d5d0c9;padding:9px 10px;font-size:11px;font-weight:400;color:var(--ink);background:#fff;outline:none}.upload-zone{margin:0;border:1.5px dashed #ddd;background:#fafafa;padding:24px 16px;text-align:center;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px}.upload-zone:hover{border-color:var(--ink)}.upload-zone.drag-over{border-color:var(--ink);border-style:solid;background:#f0f4fc;transform:scale(1.02);transition:transform .15s ease,background .15s ease,border-color .15s ease}.upload-zone.drag-over .upload-icon-wrap{background:var(--accent);transition:background .15s ease}.upload-zone.drag-over .upload-main{color:var(--ink)}.upload-icon-wrap{width:36px;height:36px;margin-bottom:8px;background:#ececec;display:flex;align-items:center;justify-content:center}.upload-main{font-size:12px;font-weight:500;color:var(--ink)}.upload-sub{font-size:11px;color:#aaa;margin-bottom:12px}.from-phone{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);cursor:pointer;background:#fff}.from-phone:hover{background:#fafafa}.phone-label{font-size:11px;font-weight:500;color:#555}.upload-btn,.autofill-btn,.tiny-btn{border-radius:0!important;text-transform:uppercase;letter-spacing:.8px;font-size:11px;font-weight:500}.upload-btn{border:none;background:var(--ink);color:#fff;padding:8px 20px;cursor:pointer}.autofill-btn{border:0;background:var(--accent);color:var(--ink);padding:10px}.autofill-btn:hover{background:var(--accent-hover)}.secondary-upload-actions,.row-buttons{display:flex;gap:8px}.tiny-btn{border:1px solid var(--line);background:#fff;color:#575757;padding:7px 10px}.tiny-btn.active{border-color:var(--accent);background:#eef2fb;color:var(--ink)}.hint{margin:0;font-size:11px;font-weight:400;line-height:1.5;color:#8f8f8f}.upload-progress-wrap{display:flex;flex-direction:column;gap:6px;border:1px solid var(--line);background:#faf9f7;padding:8px}.upload-progress-row{display:flex;flex-direction:column;gap:4px}.upload-progress-head{display:flex;justify-content:space-between;align-items:center;font-size:10px;font-weight:500;letter-spacing:.8px;text-transform:uppercase;color:#6d6d6d}.upload-progress-track{width:100%;height:6px;background:#e9e4de;overflow:hidden}.upload-progress-fill{height:100%;width:0;background:var(--ink);transition:width .18s linear}.upload-progress-fill.upload{background:var(--accent)}.photo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.photo-thumb{border:0;width:100%;aspect-ratio:1;cursor:pointer;position:relative}.photo-thumb.used:after{content:"✓";position:absolute;top:4px;right:4px;width:14px;height:14px;border-radius:999px;background:#0009;color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px}.canvas-col{display:flex;flex-direction:column;background:var(--bg);min-height:0}.canvas-toolbar,.bottom-nav{height:44px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:center;gap:14px}.bottom-nav{border-top:1px solid var(--line);border-bottom:0;background:#fff}.canvas-toolbar button,.bottom-nav button,.preview-nav{border:0;background:transparent;cursor:pointer;font-size:18px}.canvas-body{flex:1;display:flex;align-items:center;justify-content:center;padding:24px;min-height:0;overflow:hidden}.book-page{width:340px;aspect-ratio:var(--book-page-ratio);height:auto;position:relative;box-shadow:6px 8px 32px #0000003d}.cover-bg{background:#0f0f0f;display:grid;place-items:center}.cover-year{color:#ffffffbf;font-family:Georgia,serif;line-height:.85;font-size:54px;display:flex;flex-direction:column;align-items:center}.badge{position:absolute;top:10px;right:10px;background:#a8bfe842;border:1px solid rgba(168,191,232,.7);color:#fff;font-size:9px;font-weight:500;letter-spacing:.8px;text-transform:uppercase;padding:4px 8px}.book-spread{position:relative;display:flex;box-shadow:6px 8px 32px #00000029}.book-spread.large .page{width:300px;aspect-ratio:var(--book-page-ratio);height:auto}.page{width:300px;aspect-ratio:var(--book-page-ratio);height:auto;background:#fff;display:grid;place-items:center;position:relative}.page-left{border-right:1px solid #ece8e2}.spine{position:absolute;top:0;bottom:0;left:50%;width:1px;background:#dfdbd5;transform:translate(-50%)}.blank-label{color:#ccc;font-size:10px;text-transform:uppercase;font-weight:400}.title-page{border:2px solid var(--accent)}.title-input-wrap{width:78%;text-align:center;border-bottom:1px solid var(--ink);padding-bottom:8px;font-family:Georgia,serif;font-size:18px;color:var(--ink)}.title-input-wrap.title-style-serif{font-family:Georgia,serif;font-style:italic}.title-input-wrap.title-style-sans{font-family:Helvetica Neue,Arial,sans-serif;font-style:normal}.title-input-wrap.title-size-s{font-size:14px}.title-input-wrap.title-size-m{font-size:18px}.title-input-wrap.title-size-l{font-size:22px}.page-col,.slot-stack{display:flex;flex-direction:column;align-items:center;gap:8px}.photo-portrait{background:#f7f4f1;width:136px;aspect-ratio:var(--photo-portrait-ratio);height:auto;display:grid;place-items:center}.photo-portrait.landscape{width:204px;aspect-ratio:var(--photo-landscape-ratio);height:auto}.photo-portrait.placeholder{border:1px dashed #dad5cf}.ph-plus{color:#bdb8b3;font-size:24px}.ph-text{color:#bdb8b3;font-size:9px;text-transform:uppercase;letter-spacing:.5px}.photo-action-bar{display:flex;gap:4px;padding-bottom:4px}.photo-action-bar button{border:1px solid #e2ddd7;background:#fff;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.8px;padding:4px 6px;cursor:pointer}.photo-action-bar .danger{color:var(--action-red)}.right-rail{border-left:1px solid var(--line);border-right:0;padding:10px;display:flex;flex-direction:column;gap:8px;min-height:0;overflow-y:auto}.thumb{border:1px solid var(--line);background:#fff;padding:6px;font-size:10px;cursor:pointer;display:flex;flex-direction:column;gap:4px;text-align:left}.thumb.active{border-color:var(--accent);background:#eef2fb}.thumb-spread{display:flex;gap:2px;width:100%}.thumb-page{flex:1;aspect-ratio:205 / 210;overflow:hidden}.thumb-photo{width:100%;height:100%;background:var(--line)}.thumb-photo-empty{background:#f0ece6}.thumb-label{font-size:9px;color:#999;letter-spacing:.5px;text-transform:uppercase;display:block}.thumb-label-only{font-size:10px;color:#666;padding:6px 0}.add-page{border:1px dashed #c9c3bc;background:#f9f7f4;padding:8px;cursor:pointer;font-size:10px;text-transform:uppercase}.field-label{font-size:10px;text-transform:uppercase;color:#999;letter-spacing:1px;font-weight:500}.field-input{border:1px solid #ccc;padding:8px 10px;font-size:11px;font-weight:400}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000073;display:grid;place-items:center}.modal{width:420px;background:#fff;padding:20px;border:1px solid var(--line);display:flex;flex-direction:column;gap:10px}.modal h3{margin:0;font-size:18px}.modal p,.modal label{margin:0;color:#666;font-size:11px;font-weight:400}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}.phone-upload-modal{width:min(460px,calc(100vw - 24px));align-items:center;text-align:center}.phone-upload-qr{width:min(280px,100%);aspect-ratio:1;border:1px solid var(--line);background:#fff}.phone-upload-url{width:100%;font-size:11px;font-weight:400;color:var(--accent);word-break:break-all;text-decoration:underline}.email-capture-form{display:flex;flex-direction:column;gap:10px}.email-capture-toast{position:fixed;right:16px;bottom:56px;width:min(360px,calc(100vw - 32px));background:#fff;border:1px solid var(--line);box-shadow:0 8px 24px #00000029;padding:12px;display:flex;flex-direction:column;gap:8px;z-index:30}.email-capture-toast h3{margin:0;font-size:13px;font-weight:500;letter-spacing:.6px;text-transform:uppercase}.email-capture-toast p{margin:0;color:#686868;font-size:11px;line-height:1.45}.email-capture-actions{display:flex;justify-content:flex-end;gap:8px}.toast{position:fixed;right:16px;bottom:16px;background:#0f0f0f;color:#fff;padding:10px 12px;font-size:11px;font-weight:400}.mobile-upload-screen{min-height:100vh;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:20px}.mobile-upload-card{width:min(460px,100%);background:#fff;border:1px solid var(--line);padding:20px;display:flex;flex-direction:column;gap:12px}.mobile-upload-card h1{margin:0;font-size:16px;text-transform:uppercase;letter-spacing:1px;font-weight:500}.mobile-upload-card p{margin:0;font-size:11px;line-height:1.5;font-weight:400;color:#686868}.preview-app{background:#0a0a0a;color:#fff}.preview-topbar{height:52px;display:flex;align-items:center;padding:0 20px;gap:10px;border-bottom:1px solid #202020}.preview-label{margin-left:auto;margin-right:auto;font-size:10px;font-weight:500;letter-spacing:1px;text-transform:uppercase;color:#ffffffb3}.preview-canvas{min-height:calc(100vh - 104px);display:flex;align-items:center;justify-content:center;gap:20px}.preview-nav{color:#fff;border:1.5px solid rgba(255,255,255,.3);width:40px;height:40px}.preview-footer{height:52px;border-top:1px solid #202020;display:flex;align-items:center;gap:12px;padding:0 20px}.note-warning,.note-success{font-size:11px;font-weight:400;letter-spacing:0;text-transform:none}.note-warning{color:#ffd2d4}.note-success{color:#c8d6f6}.order-main{display:grid;grid-template-columns:360px 1fr;min-height:calc(100vh - 56px)}.summary-col{background:#fff;border-right:1px solid var(--line);padding:20px;display:flex;flex-direction:column;gap:14px}.summary-col h3,.form-col h3{margin:0;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:1px}.book-card{display:flex;gap:12px;font-size:11px;font-weight:400;color:#7e7e7e}.book-card p{margin:2px 0}.mini-cover{width:66px;height:68px;display:grid;place-items:center;background:#0f0f0f;color:#ffffffbf;font-family:Georgia,serif}.copies-row,.line-item{display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:400}.copies-controls{display:flex;align-items:center}.copies-controls button,.copies-controls span{width:30px;height:30px;border:1px solid var(--line);display:grid;place-items:center;background:#fff}.line-item.total{border-top:1px solid var(--line);padding-top:10px;margin-top:4px}.discount-list{display:flex;align-items:center;gap:8px;padding:9px 12px;background:#eef0f8;border:1px solid #d8dae8}.discount-list p{margin:0;font-size:11px;font-weight:400}.constraint-list{display:flex;flex-direction:column;gap:6px;border:1px solid var(--line);background:#faf9f7;padding:10px}.constraint-list p{margin:0;font-size:11px;font-weight:400}.constraint-list .ok{color:#356c35}.constraint-list .warn{color:#9a3a2a}.warning-box{border:1px solid #dfb6ae;background:#fff3f1;color:#8c2f20;font-size:11px;font-weight:400;line-height:1.5;padding:10px}.form-col{padding:20px;display:flex;flex-direction:column;gap:16px;background:var(--bg)}.form-col h3{padding-bottom:10px;border-bottom:1px solid var(--line)}.form-section{display:flex;flex-direction:column;gap:12px;padding:14px;border:1px solid var(--line);background:transparent}.field-row{display:flex;gap:10px;align-items:flex-start}.field{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}.form-section .field-input{width:100%;min-height:36px}.shipping-list{display:flex;flex-direction:column;gap:8px}.ship-card{border:1px solid var(--line);background:#fff;padding:12px;display:flex;justify-content:space-between;text-align:left;cursor:pointer}.ship-card.active{border-color:var(--accent);background:#eef2fb}.ship-card small{color:#919191;font-size:11px;font-weight:400}.step-trail{display:flex;gap:8px;align-items:center;font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:1px;color:#aaa}.step.active{color:var(--ink)}@media (max-width: 1080px){.main-grid{grid-template-columns:64px 240px 1fr}.right-rail{display:none}.order-main{grid-template-columns:1fr}.summary-col{border-right:0;border-bottom:1px solid var(--line)}}@media (max-width: 760px){.main-grid{grid-template-columns:1fr}.icon-rail{flex-direction:row;border-right:0;border-bottom:1px solid var(--line);padding:10px}.side-panel{border-right:0;border-bottom:1px solid var(--line)}.canvas-body{padding:12px}.page{width:46vw;min-width:160px;max-width:220px}.photo-portrait{width:108px;aspect-ratio:var(--photo-portrait-ratio);height:auto}.photo-portrait.landscape{width:162px;aspect-ratio:var(--photo-landscape-ratio);height:auto}.field-row{flex-direction:column;gap:8px}.field{width:100%}}