@font-face{font-family:AlbumScript;src:url('/assets/print-studio-v4/fonts/script.ttf') format('truetype');font-display:swap}@font-face{font-family:AlbumHand;src:url('/assets/print-studio-v4/fonts/hand.ttf') format('truetype');font-display:swap}@font-face{font-family:AlbumDisplay;src:url('/assets/print-studio-v4/fonts/display.ttf') format('truetype');font-display:swap}@font-face{font-family:AlbumCondensed;src:url('/assets/print-studio-v4/fonts/condensed.ttf') format('truetype');font-display:swap}
@font-face{font-family:AlbumSans;src:url('/assets/print-studio-v4/fonts/sans.ttf') format('truetype');font-weight:400;font-display:swap}@font-face{font-family:AlbumSans;src:url('/assets/print-studio-v4/fonts/sans-bold.ttf') format('truetype');font-weight:700;font-display:swap}@font-face{font-family:AlbumSerif;src:url('/assets/print-studio-v4/fonts/serif.ttf') format('truetype');font-style:normal;font-display:swap}@font-face{font-family:AlbumSerif;src:url('/assets/print-studio-v4/fonts/serif-italic.ttf') format('truetype');font-style:italic;font-display:swap}
.album-admin .admin-scene-review{margin:16px 0 24px}.album-admin .admin-scene-main{max-width:520px;margin:0 auto 14px}.album-admin .admin-scene-main .page-paper{width:100%;height:auto;max-height:none;box-shadow:0 8px 25px #0002}.album-admin .admin-scene-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:7px;max-height:180px;overflow-y:auto}.album-admin .admin-scene-thumbs button{min-width:0;border:1px solid #e8e1da;background:#fff;padding:4px;border-radius:6px;overflow:hidden}.album-admin .admin-scene-thumbs button.active{border-color:#845c52}.album-admin .admin-scene-thumbs .page-paper{width:100%;height:auto;max-height:none;box-shadow:none}.album-admin .admin-scene-thumbs small{display:block;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}.album-admin .admin-scene-review .album-scene-text{max-width:none}
.album-app .pack-preview .mock-page{position:relative;display:block;flex:0 0 30%;height:auto;max-height:78px;overflow:hidden}.album-app .pack-preview .mock-slot{position:absolute;background:linear-gradient(145deg,#bfae9f,#d7cbc0 52%,#a99685);box-shadow:inset 0 0 0 1px #ffffffb0}.album-app .pack-preview .mock-title{position:absolute;max-width:90%;font-family:AlbumSerif,serif;font-size:5px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transform:translateX(-50%)}
.album-app{font-family:AlbumSans,Arial,sans-serif;background:#f8f5f1;color:#302a28;min-height:100dvh}.album-admin .admin-intro{margin-bottom:22px}.album-admin .admin-section-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.album-admin .admin-section-head h2{margin:0}.album-admin .product-picker{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:18px 0;max-height:180px;overflow-y:auto}.album-admin .product-picker button,.album-admin .order-row{border:1px solid #e8e1da;background:#fff;border-radius:8px;padding:10px;text-align:left}.album-admin .product-picker button.active{border-color:#845c52;background:#fbf5f0}.album-admin .product-picker strong,.album-admin .product-picker small,.album-admin .order-row strong,.album-admin .order-row small{display:block}.album-admin .product-picker small,.album-admin .order-row small{font-size:11px;color:#77706b;margin-top:4px}.album-admin .form-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}.album-admin .order-list{max-height:210px;overflow-y:auto}.album-admin .order-row{display:flex;align-items:center;justify-content:space-between;width:100%;margin:5px 0;gap:12px}.album-admin .order-row b{white-space:nowrap}.album-admin .admin-order-detail{border-top:1px solid #e8e1da;margin-top:24px;padding-top:20px}.album-admin .order-summary{display:grid;grid-template-columns:1fr 1fr;gap:8px}.album-admin .order-summary p{font-size:12px;margin:0}.album-admin .order-summary strong{display:block;color:#77706b}.album-admin .order-pages{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:12px;margin:12px 0 24px}.album-admin .order-page-art{position:relative;background:#fff;border:1px solid #e8e1da;overflow:hidden;box-shadow:0 3px 8px #0002}.album-admin .order-page-cell{position:absolute;display:flex;align-items:center;justify-content:center;text-align:center;font-size:8px;background:#e9e3dc;color:#77706b;overflow:hidden}.album-admin .order-page-cell img{width:100%;height:100%;object-fit:cover}.album-admin .order-page-text{position:absolute;max-width:95%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.album-admin .order-page small{display:block;font-size:10px;line-height:1.3}.album-admin details pre{max-height:300px;overflow:auto;background:#f6f3f0;padding:10px;font-size:10px}.album-admin .album-product-form .check{display:flex;align-items:center;gap:7px}.album-admin .album-product-form .check input{width:auto}.album-admin #order-action-form{border-top:1px solid #e8e1da;padding-top:15px}@media(max-width:700px){.album-admin .form-columns,.album-admin .order-summary{grid-template-columns:1fr}}
:root{--ink:#302a28;--muted:#77706b;--line:#e8e1da;--paper:#fff;--wash:#f8f5f1;--accent:#845c52;--accent-deep:#6c4339;--page-scale:1}*{box-sizing:border-box}html,body{margin:0;min-height:100%;overflow-x:hidden}.album-app{font-family:AlbumSans,Arial,sans-serif;background:var(--wash);color:var(--ink)}button,input,textarea,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.42;cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #ae877a;outline-offset:2px}a{color:var(--accent-deep)}.album-top{height:64px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:18px;padding:0 24px;position:relative;z-index:3}.album-brand{text-decoration:none;font-family:AlbumSerif,Georgia,serif;font-size:22px;color:var(--ink);white-space:nowrap}.album-brand span{font-family:AlbumSans,Arial,sans-serif;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;margin-left:12px;color:var(--accent)}#save-state{font-size:12px;color:var(--muted);margin-left:auto;text-align:right}#save-state[data-kind=error]{color:#a13129}#save-state[data-kind=ok]{color:#4e7656}h1,h2,h3,p{margin-top:0}h1{font-family:AlbumSerif,Georgia,serif;font-weight:400}h2{font-family:AlbumSerif,Georgia,serif;font-weight:400}.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--accent);background:#fff;color:var(--accent-deep);border-radius:9px;padding:11px 16px;font-weight:700;text-decoration:none}.button:hover{background:#f4e9e4}.button.primary{background:var(--accent-deep);border-color:var(--accent-deep);color:#fff}.button.primary:hover{background:#59342c}.button.subtle{border-color:var(--line);color:var(--ink)}.button.small{padding:7px 12px;font-size:12px}.button.full{width:100%}.eyebrow{text-transform:uppercase;letter-spacing:.19em;font-size:11px;font-weight:700;color:var(--accent)}.hint,.empty{font-size:12px;color:var(--muted);line-height:1.5}.loading,.error{padding:12vh 24px;text-align:center}.landing{max-width:1280px;margin:auto;display:grid;grid-template-columns:minmax(280px,.8fr) minmax(430px,1.2fr);gap:60px;padding:7vh 28px}.landing-copy{padding-top:42px}.landing h1{font-size:clamp(48px,5vw,84px);line-height:1.02;margin:20px 0}.landing-copy p{max-width:430px;font-size:17px;line-height:1.65;color:var(--muted)}.landing-panel,.checkout-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px;box-shadow:0 18px 50px #46332a0a}.landing-panel h2{font-size:26px;margin:6px 0 18px}.product-option{display:flex;align-items:center;gap:12px;padding:15px;border:1px solid var(--line);border-radius:12px;margin:10px 0;cursor:pointer}.product-option:has(input:checked){border-color:var(--accent);background:#fbf5f0}.product-option span{display:grid;gap:4px;flex:1}.product-option small{font-size:11px;color:var(--muted)}.product-option b{font-size:14px}.pack-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.pack-card{border:1px solid var(--line);background:#fff;border-radius:12px;padding:12px;text-align:left;display:grid;gap:6px;min-width:0}.pack-card:hover{border-color:var(--accent);transform:translateY(-2px)}.pack-card strong{font-family:AlbumSerif;font-size:18px;font-weight:400}.pack-card small{font-size:11px;line-height:1.35;color:var(--muted)}.pack-pages{font-size:10px;color:var(--accent);font-weight:700}.pack-preview{height:90px;background:#f2e9e2;border-radius:8px;display:flex;align-items:center;justify-content:center;gap:0;overflow:hidden}.mock-page{width:48px;height:64px;background:#fff;border:1px solid #e0d0c7;box-shadow:2px 3px 8px #4d2e241c;transform:rotate(-8deg)}.mock-page:nth-child(2){transform:translateY(-5px)}.mock-page:nth-child(3){transform:rotate(8deg)}.draft-list{max-width:1224px;margin:0 auto 80px;padding:0 28px}.draft-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}.draft-cards a{display:grid;gap:8px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px;text-decoration:none;color:var(--ink)}.draft-cards small{color:var(--muted)}.draft-cards span{color:var(--accent);font-size:12px;font-weight:700}.studio{display:grid;grid-template-columns:260px minmax(0,1fr) 260px;height:calc(100dvh - 64px);min-height:550px}.studio-side,.inspector{background:#fff;overflow-y:auto;padding:20px;border-right:1px solid var(--line)}.inspector{border-right:0;border-left:1px solid var(--line)}.side-head h1{font-size:25px;margin:8px 0 4px;line-height:1.08}.side-head small{color:var(--muted);font-size:11px}.side-tabs{display:flex;margin:24px 0 16px;border-bottom:1px solid var(--line)}.side-tabs button{flex:1;border:0;background:none;padding:10px;color:var(--muted)}.side-tabs button.active{border-bottom:2px solid var(--accent);color:var(--ink);font-weight:700}.side-panel[hidden]{display:none}.upload{width:100%;cursor:pointer}.photo-tray,.layout-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:16px}.tray-photo{border:1px solid var(--line);border-radius:8px;background:#fff;padding:3px;text-align:left;overflow:hidden}.tray-photo.chosen{border:2px solid var(--accent)}.tray-photo img{width:100%;aspect-ratio:1;object-fit:cover;display:block;border-radius:5px}.tray-photo span{font-size:9px;color:var(--muted)}.layout-choice{min-height:80px;border:1px solid var(--line);border-radius:8px;background:#faf8f5;display:grid;gap:1px;justify-items:center;padding:8px}.layout-choice:hover{border-color:var(--accent)}.layout-choice strong{font-size:11px}.layout-choice small{font-size:9px;color:var(--muted)}.layout-icon{font-size:23px;color:var(--accent)}.studio-work{display:flex;flex-direction:column;min-width:0;overflow:hidden}.work-toolbar{display:flex;gap:5px;align-items:center;justify-content:center;padding:10px;background:#fff;border-bottom:1px solid var(--line);flex-wrap:wrap}.work-toolbar button{font-size:11px;border:1px solid var(--line);border-radius:7px;background:#fff;padding:7px 9px;color:var(--ink)}.work-toolbar button:hover{background:#f7efea}.canvas-area{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:20px;overflow:hidden;background:radial-gradient(circle,#e8e0d8,#e1d8d0)}.page-paper{height:auto;width:min(100%,min(62vh,760px));max-height:100%;position:relative;overflow:hidden;box-shadow:0 16px 38px #382d2b3d;background:#fff}.page-inner{position:absolute;left:0;top:0}.photo-cell{position:absolute;overflow:hidden;border:1px solid #ffffff80;cursor:crosshair}.photo-cell.selected{outline:6px solid #9c6e59;outline-offset:-6px}.photo-cell img{position:absolute;max-width:none;pointer-events:none}.empty-cell{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:12px;color:#746c66;font-size:34px}.text-layer{position:absolute;line-height:1.2;pointer-events:none}.page-strip{height:112px;display:flex;align-items:center;gap:10px;padding:10px 16px;overflow-x:auto;overflow-y:hidden;background:#f5f1ed;border-top:1px solid var(--line);scrollbar-width:none}.page-strip::-webkit-scrollbar{display:none}.page-thumb{min-width:76px;width:76px;border:1px solid transparent;background:none;padding:2px;text-align:center}.page-thumb.active{border-color:var(--accent);border-radius:5px}.page-thumb .page-paper{width:52px;height:65px;margin:auto;box-shadow:0 2px 5px #0002}.page-thumb span{font-size:9px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:4px}.inspector h2{font-size:22px;margin:6px 0 14px}.inspector label,.checkout label,.admin-wrap label,.unlock label{display:grid;gap:6px;font-size:12px;font-weight:700;margin:12px 0}.inspector input:not([type=range]),.inspector select,.inspector textarea,.checkout input,.checkout select,.checkout textarea,.admin-wrap input,.admin-wrap select,.admin-wrap textarea,.unlock input{border:1px solid #d9d0c8;border-radius:7px;padding:9px;width:100%;color:var(--ink);background:#fff}.inspector textarea{min-height:66px}.inspector input[type=range]{width:100%;accent-color:var(--accent)}.inspector hr{border:0;border-top:1px solid var(--line);margin:22px 0}.notice{position:fixed;bottom:14px;left:50%;transform:translateX(-50%);max-width:min(560px,90vw);padding:14px 18px;background:#fff;border:1px solid #e4b6ab;box-shadow:0 12px 30px #0002;border-radius:10px;z-index:10;font-size:12px}.notice button{display:block;margin-top:8px;border:0;background:none;text-decoration:underline;color:var(--accent-deep)}.checkout,.confirmation,.unlock,.admin-wrap{max-width:1100px;margin:0 auto;padding:48px 24px}.checkout h1,.confirmation h1,.unlock h1,.admin-wrap h1{font-size:clamp(38px,4vw,56px);margin:14px 0 24px}.checkout-grid,.admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.checkout-card h2{font-size:27px}.checkout .price{font-size:28px;color:var(--accent-deep)}.checkout textarea,.admin-wrap textarea{min-height:80px}.checkout .check{display:flex;align-items:flex-start;gap:8px;line-height:1.4}.checkout .check input{width:auto}.text-button{border:0;background:none;color:var(--accent-deep);padding:0}.unlock{max-width:480px}.unlock form{background:#fff;border:1px solid var(--line);padding:22px;border-radius:12px}.admin-wrap #catalog-json{min-height:400px;font-family:monospace;font-size:11px}.admin-order{display:grid;grid-template-columns:1fr auto;gap:5px;border-bottom:1px solid var(--line);padding:12px 0}.admin-order small{grid-column:1/-1;color:var(--muted)}.admin-order button{grid-column:1/-1;justify-self:start;border:0;background:none;color:var(--accent);padding:0;text-decoration:underline}
@media(max-width:1050px){.studio{grid-template-columns:210px minmax(0,1fr) 220px}.studio-side,.inspector{padding:14px}.work-toolbar{justify-content:flex-start}.canvas-area{padding:10px}}@media(max-width:760px){.album-top{padding:0 14px;height:58px}.album-brand{font-size:18px}.album-brand span{font-size:10px;margin-left:5px}.landing{display:block;padding:35px 16px}.landing-copy{padding:0}.landing h1{font-size:50px}.landing-panel{padding:18px}.studio{height:auto;display:flex;flex-direction:column}.studio-side,.inspector{overflow:visible;border:0}.studio-side{order:2}.studio-work{order:1;min-height:68vh}.inspector{order:3}.canvas-area{min-height:52vh;max-height:72vh}.page-paper{width:min(100%,54vh)}.page-strip{height:100px}.side-panel .photo-tray{grid-template-columns:repeat(4,minmax(0,1fr))}.side-panel .layout-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.checkout-grid,.admin-grid{grid-template-columns:1fr}.checkout,.confirmation,.unlock,.admin-wrap{padding:28px 16px}.pack-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:420px){.pack-grid{grid-template-columns:1fr 1fr}.album-top{gap:7px}.album-brand span{display:none}.work-toolbar button{font-size:10px;padding:6px}.canvas-area{min-height:45vh}}

.photo-cell{touch-action:none}.order-pages{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.order-pages .page-paper{width:100%}.inspector fieldset{border:0;border-bottom:1px solid var(--line);padding:0 0 12px}.page-strip{flex-wrap:wrap;height:auto;max-height:180px;overflow-x:hidden;overflow-y:auto}.page-thumb .page-paper{height:auto}
/* Album ordering refresh 2026-10-07 */
.canvas-area .page-paper{max-height:none;flex:0 0 auto}
.page-strip{height:auto;min-height:104px;gap:14px;align-items:flex-end}
.page-strip .spread{display:flex;gap:1px;padding:4px;border-radius:7px;background:#e9e2db;flex:0 0 auto}
.page-strip .spread.cover{background:#e2d6cb}
.page-thumb{min-width:0;width:auto}
.page-thumb .page-paper{width:auto;height:58px;margin:auto}
.page-thumb.ghost{display:flex;align-items:center;justify-content:center;width:46px;height:58px;font-size:9px;color:#a0958d;border:1px dashed #cbbfb5;border-radius:3px;margin-bottom:17px}
.page-meter{margin-top:12px;padding:9px 11px;border-radius:9px;font-size:13px;background:#f1f6ef;color:#33502c}
.page-meter span{color:#77706b;font-size:11px}
.page-meter em{display:block;font-style:normal;font-size:12px;margin-top:4px}
.page-meter.warn{background:#fdf3e6;color:#7a4a12}
.hint.warn{color:#9a5a12}
.size-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 10px}
.size-option{min-height:76px}
.size-shape{flex:0 0 auto;display:block;border:2px solid #b49b8a;border-radius:3px;background:linear-gradient(145deg,#efe6de,#dccbbd);margin:0 6px}
.size-option:has(input:checked) .size-shape{border-color:var(--accent);background:linear-gradient(145deg,#e9d6c8,#c9a894)}
.size-option input{position:absolute;opacity:0;pointer-events:none}
.size-option{position:relative}
.landing-panel h2+.hint{margin-top:-10px}
.pack-card[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.how-steps{margin:26px 0 0;padding:0;list-style:none;counter-reset:s;display:grid;gap:12px;max-width:430px}
.how-steps li{counter-increment:s;display:flex;gap:12px;align-items:center;font-size:15px;color:#4a413d}
.how-steps li::before{content:counter(s);flex:0 0 30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1px solid var(--line);color:var(--accent);font-weight:700}
.quote-note{padding:12px 14px;border-radius:10px;background:#fbf5f0;border:1px solid #ecdcd0;font-size:14px;line-height:1.5}
.confirmation .button{margin:8px 6px 0 0;display:inline-block}
@media(max-width:760px){.size-grid{grid-template-columns:1fr}.how-steps{margin-bottom:24px}}
.size-option .size-shape{flex:0 0 auto;display:block}
/* ===== Album Studio motion & spread editing 2026-10-07 ===== */
@keyframes fb-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes fb-pop{0%{opacity:0;transform:scale(.85)}60%{opacity:1;transform:scale(1.04)}100%{transform:scale(1)}}
@keyframes fb-slide-next{from{opacity:0;transform:translateX(46px) rotateY(-8deg)}to{opacity:1;transform:none}}
@keyframes fb-slide-prev{from{opacity:0;transform:translateX(-46px) rotateY(8deg)}to{opacity:1;transform:none}}
@keyframes fb-pulse{0%,100%{box-shadow:inset 0 0 0 0 #c58f6f00,0 0 0 0 #c58f6f00}50%{box-shadow:inset 0 0 0 9999px #fff3,0 0 0 0 #c58f6f}}
@keyframes fb-glow{0%,100%{outline-color:#c58f6f}50%{outline-color:#f2c9a8}}
@keyframes fb-toast{from{opacity:0;transform:translate(-50%,16px) scale(.96)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes fb-shimmer{from{background-position:-200px 0}to{background-position:200px 0}}
@keyframes fb-confetti{0%{transform:translate(0,-20px) rotate(0);opacity:0}10%{opacity:1}100%{transform:translate(var(--dx),120px) rotate(540deg);opacity:0}}
@keyframes fb-dots{0%{content:''}33%{content:'.'}66%{content:'..'}100%{content:'...'}}
.pack-card,.size-option,.layout-card,.draft-cards a{animation:fb-rise .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 45ms)}
.pack-card,.layout-card,.tray-photo,.button,.work-toolbar button,.chip,.size-option{transition:transform .18s ease,box-shadow .2s ease,border-color .2s ease,background .2s ease}
.button:active,.work-toolbar button:active,.chip:active,.layout-card:active,.tray-photo:active{transform:scale(.96)}
.pack-card:hover,.layout-card:hover{transform:translateY(-3px);box-shadow:0 10px 22px #4a33281a}
.size-option:has(input:checked){animation:fb-pop .35s ease}
/* spread canvas */
.canvas-area{position:relative;perspective:1600px}
.spread-view{display:flex;align-items:center;justify-content:center;gap:2px;filter:drop-shadow(0 18px 30px #382d2b40)}
.spread-view.enter-next{animation:fb-slide-next .38s cubic-bezier(.2,.8,.2,1)}
.spread-view.enter-prev{animation:fb-slide-prev .38s cubic-bezier(.2,.8,.2,1)}
.spread-page{position:relative;display:flex;flex-direction:column;align-items:center;cursor:pointer}
.spread-page .page-paper{box-shadow:none;transition:filter .25s ease}
.spread-view.n2 .spread-page:first-child .page-paper{background-image:linear-gradient(to left,#0000001a,#0000 7%)}
.spread-view.n2 .spread-page:last-child .page-paper{background-image:linear-gradient(to right,#0000001f,#0000 7%)}
.spread-page:not(.is-selected) .page-paper{filter:saturate(.9) brightness(.97)}
.spread-page.is-selected .page-paper{outline:2px solid #c58f6f;outline-offset:3px}
.spread-label{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#7b6e66;margin-top:8px;height:14px}
.spread-page.is-selected .spread-label{color:var(--accent-deep);font-weight:700}
.nav-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:38px;height:38px;border-radius:50%;border:1px solid #fff;background:#ffffffd9;font-size:24px;line-height:1;color:var(--accent-deep);box-shadow:0 6px 18px #0002;transition:transform .2s ease,opacity .2s}
.nav-arrow.prev{left:10px}.nav-arrow.next{right:10px}
.nav-arrow:hover:not([disabled]){transform:translateY(-50%) scale(1.1)}
.nav-arrow[disabled]{opacity:0;pointer-events:none}
.photo-cell{transition:box-shadow .2s ease}
.photo-cell.selected{outline:8px solid #c58f6f;outline-offset:-8px;animation:fb-glow 1.6s ease-in-out infinite}
.photo-cell.dragging{cursor:grabbing}
.studio.placing .canvas-area .photo-cell,.studio.swapping .canvas-area .photo-cell{cursor:copy;animation:fb-pulse 1.4s ease-in-out infinite}
.photo-cell.drop-hover{outline:10px dashed #c58f6f!important;outline-offset:-10px}
.place-banner{position:absolute;top:12px;left:50%;transform:translateX(-50%);background:var(--accent-deep);color:#fff;padding:8px 10px 8px 16px;border-radius:99px;font-size:12px;font-weight:700;display:flex;gap:10px;align-items:center;box-shadow:0 8px 20px #0003;animation:fb-rise .3s ease;z-index:3}
.place-banner button{border:0;border-radius:99px;background:#ffffff2b;color:#fff;padding:4px 10px;font-size:11px}
/* strip */
.page-strip{scroll-behavior:smooth}
.page-strip .spread{transition:background .25s ease,transform .25s ease}
.page-strip .spread.current{background:#d9c3b2;transform:translateY(-3px)}
button.page-thumb.ghost{cursor:pointer;background:transparent}
button.page-thumb.ghost:hover{border-color:var(--accent);color:var(--accent)}
/* side panels */
.page-meter .meter-bar{display:block;height:4px;border-radius:4px;background:#0000000f;margin-bottom:7px;overflow:hidden}
.page-meter .meter-bar i{display:block;height:100%;background:currentColor;border-radius:4px;transition:width .45s cubic-bezier(.2,.8,.2,1)}
.button.magic{background:linear-gradient(120deg,#fff 0%,#fbefe6 40%,#fff 80%);background-size:400px 100%;border-color:#e2c3ad}
.button.magic:not([disabled]):hover{animation:fb-shimmer 1.2s linear infinite;border-color:var(--accent)}
.button[disabled],.work-toolbar button[disabled]{opacity:.45;cursor:not-allowed}
.button.is-busy{background:linear-gradient(90deg,#fff,#f4e4d9,#fff);background-size:200px 100%;animation:fb-shimmer 1s linear infinite}
.side-panel .button+.button{margin-top:8px}
.tray-photo{position:relative;padding:0;border-width:2px}
.tray-photo img{border-radius:6px}
.tray-photo.used img{opacity:.55}
.tray-photo.chosen{border-color:var(--accent);transform:scale(1.04);box-shadow:0 8px 18px #845c5240}
.tray-photo.fresh{animation:fb-pop .5s ease both;animation-delay:calc(var(--i,0) * 40ms)}
.used-badge{position:absolute;right:5px;top:5px;width:18px;height:18px;border-radius:50%;background:#3f8d68;color:#fff;font-style:normal;font-size:11px;display:grid;place-items:center;box-shadow:0 2px 6px #0003}
.chip-row{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0 12px}
.chip{border:1px solid var(--line);background:#fff;border-radius:99px;padding:6px 11px;font-size:11px;font-weight:700;color:var(--muted)}
.chip.active{background:var(--accent-deep);border-color:var(--accent-deep);color:#fff}
.layout-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.layout-card{border:1px solid var(--line);background:#faf8f5;border-radius:10px;padding:6px;display:grid;gap:5px;text-align:center;min-width:0}
.layout-card.wide{grid-column:1/-1}
.layout-card strong{font-family:AlbumSerif,serif;font-weight:400;font-size:15px}
.layout-card small{font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.layout-card[disabled]{opacity:.4;cursor:not-allowed;transform:none!important}
.album-app .pack-preview{gap:4px;padding:6px}
.album-app .pack-preview.single,.album-app .pack-preview.spread-preview{height:auto;min-height:70px;background:#efe6de}
.album-app .pack-preview.single .mock-page{flex:0 1 auto;width:72%;max-height:none;box-shadow:0 3px 8px #0002}
.album-app .pack-preview.spread-preview{gap:1px}
.album-app .pack-preview.spread-preview .mock-page{flex:0 0 48%;max-height:none;box-shadow:0 3px 8px #0002}
.album-app .pack-preview .mock-shape{position:absolute}
.loading-dots::after{content:'';animation:fb-dots 1s steps(1) infinite}
/* inspector */
.inspector-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.inspector h3{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:22px 0 4px}
.inspector section{border-top:1px solid var(--line);margin-top:14px}
.inspector section:first-of-type{border-top:0}
.inspector .row2{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:end}
.inspector input[type=color]{height:38px;padding:3px}
.text-card{border:1px solid var(--line);border-radius:10px;padding:4px 10px 10px;margin:10px 0;animation:fb-rise .3s ease both}
.cell-tools.appear{animation:fb-rise .3s ease both}
.button.subtle.active{background:var(--accent-deep);color:#fff}
.order-box{padding-top:8px}
/* toast */
.studio-toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:#2f2826;color:#fff;border-radius:99px;padding:10px 12px 10px 18px;font-size:13px;display:flex;gap:12px;align-items:center;box-shadow:0 14px 34px #0004;z-index:20;animation:fb-toast .35s cubic-bezier(.2,.8,.2,1);max-width:92vw}
.studio-toast.leaving{opacity:0;transform:translate(-50%,10px);transition:all .25s ease}
.studio-toast button{border:0;background:#ffffff26;color:#fff;border-radius:99px;padding:5px 12px;font-weight:700}
.notice .notice-close{position:absolute;right:8px;top:2px;margin:0;font-size:18px;text-decoration:none}
.notice{padding-right:34px}
.tb-sep{width:1px;height:20px;background:var(--line);margin:0 3px}
/* confirmation */
.confirmation{position:relative;overflow:hidden}
.confetti{position:absolute;inset:0;pointer-events:none}
.confetti i{position:absolute;top:0;left:calc(5% + var(--i) * 5%);width:8px;height:12px;border-radius:2px;background:hsl(calc(var(--i) * 37),70%,70%);--dx:calc((var(--i) - 9) * 6px);animation:fb-confetti 2.4s ease-out both;animation-delay:calc(var(--i) * 60ms)}
@media(max-width:760px){
  .spread-page:not(.is-selected){display:none}
  .spread-view.n2 .spread-page .page-paper{background-image:none}
  .nav-arrow{width:32px;height:32px;font-size:20px}
  .layout-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .studio-toast{bottom:12px;font-size:12px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.page-strip{flex-wrap:nowrap}
.album-app .pack-preview.spread-preview .mock-page,.album-app .pack-preview.single .mock-page{transform:none!important;margin:0!important}
.album-app .pack-preview.spread-preview .mock-page,.album-app .pack-preview.single .mock-page{height:auto;border:0}.album-app .pack-preview.single .mock-page{width:auto;max-width:78%;max-height:150px;height:auto}
/* shapes & decorations */
.shape-picks{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin:10px 0 4px}
.shape-pick{aspect-ratio:1;border:1px solid var(--line);background:#fff;border-radius:7px;padding:5px;color:#9d8f80;display:grid;place-items:center;transition:transform .15s ease,border-color .2s,color .2s}
.shape-pick svg{width:100%;height:100%}
.shape-pick:hover{transform:scale(1.08);color:var(--accent)}
.shape-pick.active{border-color:var(--accent-deep);color:var(--accent-deep);background:#fbf3ee}
.decor-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.decor-pick{border:1px solid var(--line);background:#faf8f5;border-radius:10px;padding:8px 6px 6px;display:grid;gap:4px;justify-items:center;color:#5a4f46;animation:fb-rise .4s ease both;animation-delay:calc(var(--i,0)*30ms);transition:transform .15s ease,border-color .2s}
.decor-pick svg{width:46px;height:46px}
.decor-pick small{font-size:9px;color:var(--muted);text-align:center;line-height:1.2}
.decor-pick:hover{transform:translateY(-2px);border-color:var(--accent)}
.photo-cell.shaped{border:0}
@media(max-width:760px){.decor-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* ================= App-style editor (one screen) ================= */
body.album-app-open{overflow:hidden;overscroll-behavior:none}
.app{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;background:#ece6df;color:var(--ink);font-family:AlbumSans,Arial,sans-serif;-webkit-tap-highlight-color:transparent;user-select:none}
.app .ic{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.app-top{display:flex;align-items:center;gap:4px;padding:8px 10px;padding-top:max(8px,env(safe-area-inset-top));background:#fff;border-bottom:1px solid var(--line);z-index:3}
.ib{width:40px;height:40px;border:0;background:none;border-radius:12px;display:grid;place-items:center;color:var(--ink);transition:background .2s,transform .15s;text-decoration:none}
.ib:hover:not([disabled]){background:#f3ece6}.ib:active{transform:scale(.92)}.ib[disabled]{opacity:.3}
.app-title{flex:1;min-width:0;display:grid;line-height:1.15;padding:0 4px}
.app-title b{font-family:AlbumSerif,serif;font-weight:400;font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-title small{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-title .warn,.app-save[data-kind=warn]{color:#a2611a}.app-save[data-kind=error]{color:#b4462f}.app-save[data-kind=ok]{color:#3f8d68}
.cta{display:flex;align-items:center;gap:6px;border:0;border-radius:12px;background:var(--accent-deep);color:#fff;font-weight:700;padding:9px 14px;margin-left:4px;box-shadow:0 6px 14px #6c433933;transition:transform .15s}
.cta:active{transform:scale(.95)}.cta[data-blocked]{background:#a89a90;box-shadow:none}
.app-stage{flex:1;min-height:0;position:relative;display:flex;flex-direction:column}
.app .canvas-area{flex:1;min-height:0;padding:14px 46px 6px;background:radial-gradient(circle at 50% 40%,#f3eee9,#e2d9d0)}
.app .spread-page .page-paper{outline-offset:2px}
.app.placing .canvas-area .photo-cell,.app.swapping .canvas-area .photo-cell{cursor:copy;animation:fb-pulse 1.4s ease-in-out infinite}
.page-pill{align-self:center;display:flex;align-items:center;gap:6px;margin:4px 0 8px;border:1px solid #fff;background:#ffffffcc;backdrop-filter:blur(6px);border-radius:99px;padding:6px 14px;font-size:12px;font-weight:700;color:var(--ink);box-shadow:0 4px 12px #0000000f}
.page-pill .ic{width:16px;height:16px}.page-pill small{color:var(--muted);font-weight:400}
.stage-warn{position:absolute;left:50%;bottom:44px;transform:translateX(-50%);margin:0;background:#fdf3e6;color:#7a4a12;font-size:11px;padding:5px 10px;border-radius:99px;white-space:nowrap;max-width:94%;overflow:hidden;text-overflow:ellipsis}
/* hit boxes for text & decorations */
.hit-layer{position:absolute;inset:0;pointer-events:none}
.hit{position:absolute;pointer-events:auto;cursor:move;border-radius:4px;touch-action:none}
.hit:hover{outline:6px dashed #c58f6f99;outline-offset:6px}
.hit.on{outline:8px solid #c58f6f;outline-offset:8px;background:#c58f6f14}
/* drag feedback: a text or decoration lifts while held, then settles into place on release */
.hit.lift{outline:3px solid #c58f6f;outline-offset:4px;background:#c58f6f1c;box-shadow:0 18px 28px -12px #5a3b2c80;cursor:grabbing;transition:box-shadow .18s ease}
@keyframes fb-settle{0%{transform:scale(1.035)}55%{transform:scale(.992)}100%{transform:none}}
.hit.settle{animation:fb-settle .36s cubic-bezier(.2,.85,.25,1)}
.app .photo-cell{touch-action:none}
/* tools */
.tools{display:flex;justify-content:space-around;gap:2px;padding:6px 6px;padding-bottom:max(6px,env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line);z-index:3;overflow-x:auto;scrollbar-width:none}
.tools::-webkit-scrollbar{display:none}
.tools.ctx{background:#2f2826;border-color:#2f2826;animation:fb-rise .25s ease}
.tool{flex:1 0 56px;max-width:92px;border:0;background:none;border-radius:12px;padding:6px 2px;display:grid;justify-items:center;gap:3px;color:#4a413d;font-size:10.5px;font-weight:600;transition:background .2s,transform .15s,color .2s}
.tools.ctx .tool{color:#f3eee8}
.tool:active{transform:scale(.9)}.tool[aria-pressed=true]{background:#f4e9e2;color:var(--accent-deep)}.tools.ctx .tool[aria-pressed=true]{background:#ffffff26;color:#fff}
/* sheet */
/* one motion timing for every panel, sheet and tool change */
.app{--ease-ui:cubic-bezier(.2,.85,.25,1);--dur-ui:.28s}
.sheet{position:relative;z-index:2;background:#fff;border-top-left-radius:18px;border-top-right-radius:18px;box-shadow:0 -10px 30px #0000001f;max-height:46vh;display:flex;flex-direction:column;animation:fb-sheet var(--dur-ui) var(--ease-ui)}
/* content-only refresh (same panel still open): no entrance replay */
.app.still .sheet,.app.still .card,.app.still .decor-pick,.app.still .tools.ctx,.app.still .overview{animation:none}
@keyframes fb-sheet{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.sheet>header{display:flex;align-items:center;justify-content:space-between;padding:6px 8px 0 18px}
.sheet>header::before{content:'';position:absolute;left:50%;top:6px;width:38px;height:4px;border-radius:4px;background:#ddd;transform:translateX(-50%)}
.sheet>header b{font-size:14px;letter-spacing:.02em}
.sheet-body{overflow-y:auto;padding:4px 16px 14px;overscroll-behavior:contain;user-select:text}
.sheet-hint{font-size:12px;color:var(--muted);margin:8px 0}
.sheet-hint.warn{color:#a2611a}
.sheet-row{display:flex;gap:8px;margin-top:6px}
.pill-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);background:#fff;border-radius:12px;padding:10px;font-weight:700;font-size:13px;color:var(--ink);cursor:pointer}
.pill-btn .ic{width:18px;height:18px}
.pill-btn.primary{background:var(--accent-deep);border-color:var(--accent-deep);color:#fff}
.pill-btn.magic{background:linear-gradient(120deg,#fff,#fbefe6 45%,#fff);border-color:#e2c3ad}
.pill-btn[disabled]{opacity:.45}
.tray{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:6px}
.tray .tray-photo{aspect-ratio:1;padding:0}.tray .tray-photo img{width:100%;height:100%;object-fit:cover;aspect-ratio:auto}
.seg{display:flex;background:#f3eee9;border-radius:12px;padding:3px;gap:3px;margin:6px 0 10px;overflow-x:auto;scrollbar-width:none}
.seg button{flex:1 0 auto;border:0;background:none;border-radius:9px;padding:8px 10px;font-size:12px;font-weight:700;color:var(--muted);white-space:nowrap}
.seg button.on{background:#fff;color:var(--ink);box-shadow:0 2px 6px #0000001a}
.seg.small button{font-size:16px;padding:4px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.cards-wide{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.card{border:1px solid var(--line);background:#faf8f5;border-radius:12px;padding:5px;display:grid;gap:4px;text-align:center;min-width:0;animation:fb-rise .35s ease both;animation-delay:calc(var(--i,0)*25ms);transition:transform .15s,border-color .2s}
.card:active{transform:scale(.95)}.card:hover{border-color:var(--accent)}
.card small{font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .pack-preview{height:84px;background:#efe6de}
.swatches{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.sw{width:32px;height:32px;border-radius:50%;border:2px solid #fff;background:var(--c);box-shadow:0 0 0 1px #0000001f;transition:transform .15s}
.sw.on{box-shadow:0 0 0 2px var(--accent-deep);transform:scale(1.1)}
.sw.custom{background:conic-gradient(red,yellow,lime,cyan,blue,magenta,red);position:relative;overflow:hidden;cursor:pointer}
.sw.custom input{position:absolute;inset:0;opacity:0;cursor:pointer}
.slider{display:flex;align-items:center;gap:10px;margin:10px 0;font-size:12px}
.slider b{min-width:38px;color:var(--muted)}.slider input{flex:1;accent-color:var(--accent-deep)}
.text-input{width:100%;border:1px solid #d9d0c8;border-radius:12px;padding:10px;font-size:16px;resize:vertical;font-family:inherit}
.font-row{display:flex;gap:6px;overflow-x:auto;padding:8px 0;scrollbar-width:none}
.font-chip{flex:0 0 auto;border:1px solid var(--line);background:#fff;border-radius:10px;padding:8px 12px;font-size:17px;color:var(--ink)}
.font-chip.on{border-color:var(--accent-deep);background:#fbf3ee}
.list{display:grid;gap:4px}.list button,.list a{display:flex;gap:10px;align-items:center;border:0;background:none;padding:12px 6px;font-size:14px;color:var(--ink);text-decoration:none;border-radius:10px;text-align:left}.list button:hover,.list a:hover{background:#f6f1ec}
.sheet .shape-picks{grid-template-columns:repeat(auto-fill,minmax(44px,1fr))}
/* page sorter */
.overview{position:absolute;inset:0;z-index:5;background:#f6f2ee;display:flex;flex-direction:column;animation:fb-sheet .3s ease}
.overview>header{display:flex;align-items:center;gap:10px;padding:10px 10px 4px 18px;padding-top:max(10px,env(safe-area-inset-top))}
.overview>header b{font-family:AlbumSerif,serif;font-weight:400;font-size:22px}
.overview>header small{flex:1;font-size:12px;color:var(--muted)}.overview>header small.warn{color:#a2611a}
.overview .sheet-hint{padding:0 18px}
.ov-grid{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;padding:6px 16px 16px;align-content:start}
.ov-spread{display:flex;gap:2px;justify-content:center;padding:6px;border-radius:12px;background:#e9e1d9}
.ov-page{flex:1;min-width:0;max-width:110px;display:grid;gap:3px;justify-items:center;cursor:pointer;touch-action:pan-y;transition:transform .2s,opacity .2s}
.ov-page .page-paper{width:100%!important;height:auto;box-shadow:0 2px 6px #0002}
.ov-page span{font-size:10px;font-weight:700;color:var(--muted)}
.ov-page.on .page-paper{outline:3px solid var(--accent-deep);outline-offset:2px}
.ov-page.lifting{opacity:.3}.ov-page.target{transform:scale(1.06)}.ov-page.target .page-paper{outline:3px dashed #c58f6f;outline-offset:3px}
.ov-ghost{position:fixed;left:0;top:0;z-index:2000;pointer-events:none;opacity:.92;filter:drop-shadow(0 14px 24px #0005)}
.ov-ghost .page-paper{width:100%!important}
.ov-add{flex:1;max-width:110px;border:2px dashed #cbbfb5;border-radius:6px;background:none;color:#a0958d;font-size:22px;aspect-ratio:var(--ov-ar,1)}
.overview footer{display:flex;gap:2px;justify-content:space-around;background:#fff;border-top:1px solid var(--line);padding:6px;padding-bottom:max(6px,env(safe-area-inset-bottom));overflow-x:auto}
.overview footer button{flex:1 0 60px;max-width:96px;border:0;background:none;display:grid;justify-items:center;gap:3px;font-size:10.5px;font-weight:600;color:#4a413d;padding:6px 2px;border-radius:12px}
.overview footer button[disabled]{opacity:.3}.overview footer .ic{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.app ~ .studio-toast,.app .studio-toast{bottom:86px;z-index:1100}
body.album-app-open .studio-toast{bottom:86px;z-index:1100}
body.album-app-open .notice{z-index:1100;bottom:90px}
/* desktop: sheet docks as a side panel */
@media(min-width:900px){
  .app{display:grid;grid-template-columns:1fr 0;grid-template-rows:auto 1fr auto;grid-template-areas:'top top' 'stage side' 'tools tools'}
  .app.sheet-open{grid-template-columns:1fr 380px}
  .app-top{grid-area:top}.app-stage{grid-area:stage}.tools{grid-area:tools;justify-content:center}.tool{flex:0 0 78px}
  .sheet{grid-area:side;max-height:none;border-radius:0;box-shadow:none;border-left:1px solid var(--line);animation:fb-side .3s cubic-bezier(.2,.85,.25,1)}
  @keyframes fb-side{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}
  .sheet>header{padding:12px 10px 4px 18px}.sheet>header::before{display:none}
  .app .canvas-area{padding:24px 70px 8px}
  .overview{grid-column:1/-1;grid-row:1/-1}
  .ov-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
}
@media(max-width:899px){.app .spread-page:not(.is-selected){display:none}.app .canvas-area{padding:10px 40px 4px}}
body.album-app-open .studio-toast{top:max(62px,calc(env(safe-area-inset-top) + 56px));bottom:auto;animation:fb-toast-top .35s cubic-bezier(.2,.8,.2,1)}
@keyframes fb-toast-top{from{opacity:0;transform:translate(-50%,-12px) scale(.96)}to{opacity:1;transform:translate(-50%,0)}}
.tool{flex:1 0 46px}
@media(max-width:420px){.tool span{font-size:9.5px}.app .ic{width:20px;height:20px}}