/* KIDOORY create.css — shared stylesheet, cached across all 14 languages */
@import url('tokens.css'); /* canonical design tokens — single source of truth */
:root{--shadow:0 8px 40px rgba(26,21,16,0.09);} /* create-flow keeps its deeper shadow */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:'DM Sans',sans-serif;background:var(--cream);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;}
.nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(253,250,244,0.94);backdrop-filter:blur(16px);border-bottom:1px solid var(--border);}
.nav-inner{display:flex;align-items:center;justify-content:space-between;width:100%;}
.nav-right{display:flex;align-items:center;gap:10px;}
.btn-theme{background:var(--warm);border:1px solid var(--border);border-radius:8px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;transition:background .2s;}
.nav a{text-decoration:none;}
.nav-logo img{height:52px;width:auto;display:block;}
.nav-back{font-size:14px;color:var(--muted);display:flex;align-items:center;gap:5px;transition:color 0.2s;}
@media(max-width:900px){.nav-logo img{height:46px;}}
@media(max-width:680px){.nav-logo img{height:40px;}}
.nav-back:hover{color:var(--ink);}
.progress{display:flex;align-items:center;justify-content:center;padding:88px 20px 0;gap:0;}
.ps{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);}
.ps.active{color:var(--ink);font-weight:500;}
.ps.done{color:var(--teal);}
.pd{width:30px;height:30px;border-radius:50%;border:2px solid var(--border2);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:500;background:white;flex-shrink:0;}
.ps.active .pd{background:var(--ink);border-color:var(--ink);color:white;}
.ps.done .pd{background:var(--teal);border-color:var(--teal);color:white;}
.pl{width:56px;height:1.5px;background:var(--border);margin:0 6px;flex-shrink:0;}
.pl.done{background:var(--teal);}
.screen{display:none;max-width:1140px;margin:0 auto;padding:32px 20px 100px;margin-top:60px;}
.screen.show{display:block;}
.card{background:white;border:1px solid var(--border);border-radius:22px;padding:40px;box-shadow:var(--shadow);}
.card-h{font-family:'Fraunces',serif;font-size:30px;font-weight:300;letter-spacing:-1px;margin-bottom:6px;}
.card-h em{font-style:italic;color:var(--gold);}
.card-sub{font-size:15px;color:var(--muted);margin-bottom:28px;line-height:1.6;}
.sec-hd{margin:28px 0 14px;padding-top:4px;border-top:1px solid var(--border);}
.sec-hd:first-of-type{border:none;margin-top:0;padding-top:0;}
.sec-title{font-size:11px;text-transform:uppercase;letter-spacing:2.5px;color:var(--gold);font-weight:500;margin-bottom:3px;}
.sec-desc{font-size:13px;color:var(--muted);}
.fg{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-bottom:15px;}
.full{grid-column:1/-1;}
.fl{display:flex;flex-direction:column;gap:6px;}
.fl label{font-size:13px;font-weight:500;color:var(--soft);display:flex;align-items:center;gap:4px;}
.req{color:var(--coral);font-size:11px;}
.opt{color:var(--muted);font-size:11px;}
.fl input,.fl select,.fl textarea{padding:12px 15px;border:1.5px solid var(--border);border-radius:10px;font-size:15px;font-family:'DM Sans',sans-serif;color:var(--ink);background:var(--cream);outline:none;width:100%;transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;}
.fl input:focus,.fl select:focus,.fl textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(200,134,42,.1);background:white;}
.fl input::placeholder,.fl textarea::placeholder{color:var(--muted);}
.fl textarea{resize:none;height:80px;}
.upload-area{border:2px dashed var(--border2);border-radius:14px;padding:28px 20px;text-align:center;cursor:pointer;transition:all .2s;background:var(--warm);position:relative;margin-top:12px;}
.upload-area:hover,.upload-area.drag{border-color:var(--gold);background:var(--gold-pale);}
.upload-area input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;}
.upload-icon{font-size:32px;margin-bottom:8px;}
.upload-title{font-size:15px;font-weight:500;margin-bottom:3px;}
.upload-sub{font-size:13px;color:var(--muted);}
.upload-limit{font-size:12px;color:var(--gold);margin-top:4px;font-weight:500;}
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:8px;margin-top:14px;}
.pt{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;border:2px solid var(--border);}
.pt img{width:100%;height:100%;object-fit:cover;}
.pt .rm{position:absolute;top:3px;right:3px;width:20px;height:20px;background:rgba(0,0,0,.65);color:white;border:none;border-radius:50%;cursor:pointer;font-size:11px;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s;}
.pt:hover .rm{opacity:1;}
.pc-label{font-size:12px;color:var(--muted);text-align:center;margin-top:6px;}
.privacy-box{display:flex;align-items:flex-start;gap:12px;background:var(--teal-lt);border:1px solid rgba(42,122,106,.2);border-radius:10px;padding:14px 18px;margin:22px 0;font-size:13px;color:var(--teal);line-height:1.6;}
.btn{width:100%;padding:17px;border:none;border-radius:100px;font-size:17px;font-weight:500;font-family:'DM Sans',sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:transform .2s,box-shadow .2s;}
.btn-dark{background:var(--ink);color:var(--cream);box-shadow:0 4px 20px rgba(26,21,16,.18);}
.btn-dark:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(26,21,16,.24);}
.btn-gold{background:var(--gold);color:white;box-shadow:0 4px 20px rgba(200,134,42,.28);}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(200,134,42,.38);}
.btn-out{background:transparent;color:var(--muted);border:1.5px solid var(--border2);box-shadow:none;margin-top:10px;font-size:14px;}
.btn-out:hover{background:var(--warm);color:var(--ink);}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none !important;}
.err{color:var(--coral);font-size:13px;text-align:center;margin-top:10px;display:none;}
.gen-center{text-align:center;padding:44px 0;}
.gen-icon{font-size:72px;display:inline-block;animation:fb 2s ease-in-out infinite;margin-bottom:18px;}
@keyframes fb{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.gen-h{font-family:'Fraunces',serif;font-size:30px;font-weight:300;letter-spacing:-1px;margin-bottom:8px;}
.gen-sub{font-size:15px;color:var(--muted);margin-bottom:28px;}
.prg-track{height:6px;background:var(--border);border-radius:3px;overflow:hidden;max-width:380px;margin:0 auto 8px;}
.prg-fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-lt));border-radius:3px;transition:width .6s ease;width:0%;}
.prg-pct{font-size:13px;color:var(--muted);}
.gen-steps{display:flex;flex-direction:column;gap:7px;max-width:300px;margin:22px auto 0;}
.gst{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);padding:7px 12px;border-radius:8px;transition:all .3s;}
.gst.act{background:var(--gold-pale);color:var(--gold);font-weight:500;}
.gst.dn{color:var(--teal);}
.gst-ico{font-size:15px;width:18px;}
.book-cover{background:linear-gradient(145deg,#1A3D5C,#0D2438);padding:48px 36px;text-align:center;border-radius:18px 18px 0 0;}
.bc-stars{color:var(--gold-lt);letter-spacing:6px;font-size:13px;margin-bottom:16px;}
.bc-for{font-size:10px;text-transform:uppercase;letter-spacing:3px;color:rgba(255,255,255,.4);margin-bottom:9px;}
.bc-title{font-family:'Fraunces',serif;font-size:28px;font-weight:300;font-style:italic;color:white;line-height:1.2;margin-bottom:9px;}
.bc-name{font-size:13px;color:rgba(255,255,255,.5);}
.bc-badge{display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.1);color:rgba(255,255,255,.7);font-size:11px;padding:5px 14px;border-radius:100px;margin-top:16px;}
.book-dedit{padding:26px 36px;border-bottom:1px solid var(--border);font-style:italic;font-size:14px;color:var(--muted);text-align:center;line-height:1.8;background:white;}
.book-chaps{padding:28px 36px;background:white;border-radius:0;}
.chap{margin-bottom:26px;padding-bottom:26px;border-bottom:1px solid var(--border);}
.chap:last-child{border:none;margin:0;padding:0;}
.chap-num{font-size:10px;text-transform:uppercase;letter-spacing:2px;color:var(--gold);margin-bottom:5px;font-weight:500;}
.chap-title{font-family:'Fraunces',serif;font-size:19px;font-weight:400;margin-bottom:9px;}
.chap-text{font-size:15px;color:var(--soft);line-height:1.8;}
.chap-fade{position:relative;overflow:hidden;max-height:130px;}
.chap-illus{width:100%;border-radius:14px;margin-bottom:16px;box-shadow:0 8px 28px rgba(26,21,16,.14);aspect-ratio:1/1;object-fit:cover;animation:illus-in .5s ease;}
@keyframes illus-in{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.book-cover-img{background-size:cover;background-position:center;position:relative;min-height:340px;display:flex;align-items:flex-end;padding:0;border-radius:18px 18px 0 0;overflow:hidden;}
.book-cover-overlay{width:100%;background:linear-gradient(transparent,rgba(13,20,36,.85));padding:48px 36px 28px;text-align:center;}
/* ====== LIVE 3D BOOK PREVIEW ====== */
.book3d-stage{perspective:1800px;display:flex;justify-content:center;align-items:center;padding:40px 20px 28px;background:radial-gradient(ellipse at 50% 40%,rgba(200,134,42,.10),transparent 70%);border-radius:20px 20px 0 0;}
.book3d{position:relative;width:230px;height:300px;transform-style:preserve-3d;transform:rotateY(-28deg) rotateX(6deg);transition:transform .25s ease;animation:book3d-float 5s ease-in-out infinite;cursor:grab;}
.book3d:active{cursor:grabbing;}
@keyframes book3d-float{0%,100%{transform:rotateY(-28deg) rotateX(6deg) translateY(0)}50%{transform:rotateY(-22deg) rotateX(6deg) translateY(-10px)}}
.book3d.spinning{animation:none;}
.book3d-face{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:4px 8px 8px 4px;overflow:hidden;backface-visibility:hidden;}
/* Front cover */
.book3d-front{background:linear-gradient(145deg,#1A3D5C,#0D2438);transform:translateZ(18px);box-shadow:inset -8px 0 18px rgba(0,0,0,.25);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:26px 20px;color:#fff;background-size:cover;background-position:center;}
.book3d-front-overlay{position:absolute;inset:0;background:linear-gradient(transparent 40%,rgba(13,20,36,.82));display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:22px 18px;}
.b3d-stars{color:#F0B756;font-size:11px;letter-spacing:2px;margin-bottom:6px;}
.b3d-title{font-family:'Fraunces',serif;font-size:18px;line-height:1.15;font-weight:600;margin-bottom:6px;text-shadow:0 2px 8px rgba(0,0,0,.5);}
.b3d-name{font-size:11px;color:#F0B756;letter-spacing:.5px;}
.b3d-foil{position:absolute;top:14px;left:50%;transform:translateX(-50%);font-size:9px;letter-spacing:2px;color:rgba(255,255,255,.6);text-transform:uppercase;}
/* Spine */
.book3d-spine{width:36px;height:100%;background:linear-gradient(90deg,#0A1C2E,#15324A,#0A1C2E);transform:rotateY(90deg) translateZ(18px);left:-18px;display:flex;align-items:center;justify-content:center;}
.book3d-spine span{writing-mode:vertical-rl;color:#F0B756;font-family:'Fraunces',serif;font-size:11px;letter-spacing:2px;transform:rotate(180deg);}
/* Back */
.book3d-back{background:linear-gradient(145deg,#15324A,#0A1C2E);transform:translateZ(-18px) rotateY(180deg);}
/* Pages (right edge) */
.book3d-pages{position:absolute;top:3px;right:-1px;width:36px;height:294px;background:repeating-linear-gradient(to right,#fff,#fff 1px,#e8e2d6 2px,#fff 3px);transform:rotateY(90deg) translateZ(212px);}
.book3d-hint{text-align:center;font-size:12px;color:var(--muted);margin-top:4px;}
.book3d-cta{display:flex;gap:10px;justify-content:center;margin-top:14px;flex-wrap:wrap;}
.book3d-btn{font-size:12px;padding:7px 14px;border-radius:100px;border:1px solid var(--border);background:var(--warm);cursor:pointer;color:var(--ink);transition:all .15s;}
.book3d-btn:hover{border-color:var(--gold);background:var(--gold-pale);}
.chap-fade::after{content:'';position:absolute;bottom:0;left:0;right:0;height:70px;background:linear-gradient(transparent,var(--cream,white));}
.chap-more{text-align:center;font-size:13px;color:var(--gold);font-weight:500;margin-top:6px;}
.chap + .chap{border-top:1px solid var(--border,rgba(26,21,16,.08));padding-top:28px;margin-top:28px;}
.s3-flipbook-divider{display:flex;align-items:center;gap:16px;padding:32px 36px 8px;background:var(--cream,#FDFAF4);}
.s3-divider-line{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold-lt,#E5C28A),transparent);}
.s3-divider-text{font-family:'Fraunces',serif;font-size:13px;color:var(--muted,#7A6F62);letter-spacing:1.5px;text-transform:uppercase;white-space:nowrap;}
[data-theme=dark] .s3-flipbook-divider{background:#1C1915;}
[data-theme=dark] .s3-divider-line{background:linear-gradient(90deg,transparent,rgba(200,134,42,.35),transparent);}
[data-theme=dark] .s3-divider-text{color:rgba(255,255,255,.45);}
[data-theme=dark] .book-dedit{background:#1C1915;color:rgba(255,255,255,.55);border-color:rgba(255,255,255,.06);}
[data-theme=dark] .book-chaps{background:#1C1915;}
[data-theme=dark] .chap-text{color:rgba(255,255,255,.7);}
[data-theme=dark] .chap-title{color:rgba(255,255,255,.9);}
[data-theme=dark] .chap-fade::after{background:linear-gradient(transparent,#1C1915);}
.preview-wrap{border:1px solid var(--border);border-radius:20px;overflow:hidden;box-shadow:var(--shadow);margin-bottom:22px;}
.order-card{background:white;border:1px solid var(--border);border-radius:20px;padding:32px;box-shadow:var(--shadow);}
/* ===== GIFT & BUNDLE ===== */
.audience-pick{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:8px;}
.aud-opt{border:2px solid var(--border);border-radius:14px;padding:18px 14px;text-align:center;cursor:pointer;transition:all .15s;background:var(--warm);}
.aud-opt:hover{border-color:var(--gold);}
.aud-opt.sel{border-color:var(--gold);background:var(--gold-pale);}
.aud-emoji{font-size:28px;display:block;margin-bottom:6px;}
.aud-label{font-size:15px;font-weight:600;color:var(--ink);}
.aud-sub{font-size:12px;color:var(--muted);margin-top:2px;}
.gift-section{margin-top:18px;border-top:1px solid var(--border);padding-top:18px;}
.gift-toggle{display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none;}
.gift-toggle input{position:absolute;opacity:0;}
.gift-toggle-box{width:22px;height:22px;border:2px solid var(--border2);border-radius:6px;flex-shrink:0;transition:all .15s;position:relative;}
.gift-toggle input:checked+.gift-toggle-box{background:var(--gold);border-color:var(--gold);}
.gift-toggle input:checked+.gift-toggle-box::after{content:'✓';position:absolute;color:#fff;font-size:14px;top:-1px;left:3px;}
.gift-toggle-label{font-size:15px;font-weight:500;color:var(--ink);}
.gift-panel{margin-top:14px;background:var(--gold-pale);border-radius:12px;padding:16px;animation:gen-tip-fade .3s ease;}
.gift-line{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:14px;color:var(--ink);margin:6px 0;}
.gift-line input{width:16px;height:16px;accent-color:var(--gold);}
.gift-add{color:var(--gold);font-weight:600;}
.gift-hint{font-size:12px;color:var(--muted);margin:2px 0 10px 26px;line-height:1.5;}
.gift-field{margin:12px 0;}
.gift-field label{display:block;font-size:13px;font-weight:500;margin-bottom:5px;color:var(--soft);}
.gift-field textarea{width:100%;border:1px solid var(--border);border-radius:10px;padding:10px 12px;font-size:14px;font-family:inherit;resize:vertical;background:#fff;color:var(--ink);}
.gift-count{text-align:right;font-size:11px;color:var(--muted);margin-top:3px;}
.bundle-section{margin-top:18px;border-top:1px solid var(--border);padding-top:18px;}
.bundle-head{font-size:14px;font-weight:500;margin-bottom:12px;color:var(--ink);}
.bundle-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.bundle-opt{border:2px solid var(--border);border-radius:12px;padding:12px 8px;text-align:center;cursor:pointer;transition:all .15s;}
.bundle-opt:hover{border-color:var(--gold);}
.bundle-opt.sel{border-color:var(--gold);background:var(--gold-pale);}
.bundle-qty{font-size:14px;font-weight:600;color:var(--ink);}
.bundle-save{font-size:12px;color:var(--gold);font-weight:500;margin-top:2px;}
.bundle-hint{font-size:12px;color:var(--muted);margin-top:10px;line-height:1.5;}
.order-total{display:flex;justify-content:space-between;align-items:center;margin-top:18px;padding:14px 18px;background:var(--ink);color:var(--cream);border-radius:12px;font-family:'Fraunces',serif;font-size:18px;}
.order-h{font-family:'Fraunces',serif;font-size:22px;font-weight:400;margin-bottom:5px;}
.order-sub{font-size:14px;color:var(--muted);margin-bottom:22px;}
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:22px;}
@media(min-width:641px) and (max-width:900px){.plans{grid-template-columns:repeat(2,1fr);}}
.plan-video-badge{position:relative;} /* Video card is now active */
.plan-soon{position:absolute;top:-9px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#2A7A6A,#3A9A8A);color:white;padding:2px 12px;border-radius:100px;font-size:10px;font-weight:700;white-space:nowrap;letter-spacing:.03em;box-shadow:0 2px 8px rgba(42,122,106,.3);}
.plan{border:1.5px solid var(--border);border-radius:13px;padding:16px 12px;cursor:pointer;transition:all .2s;text-align:center;position:relative;}
.plan:hover{border-color:var(--gold);background:var(--gold-pale);}
.plan.sel{border-color:var(--gold);background:var(--gold-pale);border-width:2px;}
.plan.pop{border-color:var(--gold);border-width:2px;}
.plan-pop{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--gold);color:white;font-size:10px;padding:2px 11px;border-radius:100px;white-space:nowrap;font-weight:500;}
.plan-name{font-family:'Fraunces',serif;font-size:14px;font-weight:400;margin-bottom:2px;}
.plan-price{font-size:24px;font-weight:700;color:var(--ink);margin-bottom:3px;}
.plan-feat{font-size:11px;color:var(--muted);line-height:1.5;}
.guarantee{display:flex;align-items:center;gap:10px;background:#F0FFF8;border:1px solid rgba(42,122,106,.2);border-radius:10px;padding:12px 15px;margin-top:14px;font-size:13px;color:var(--teal);}
.spin{width:20px;height:20px;border-radius:50%;border:2px solid rgba(255,255,255,.3);border-top-color:white;animation:sp .7s linear infinite;display:inline-block;}
/* ====== PREMIUM CIRCULAR LOADING RING ====== */
.gen-ring-wrap{position:relative;width:140px;height:140px;margin:0 auto 28px;}
.gen-ring{transform:rotate(-90deg);}
.gen-ring-bg{fill:none;stroke:var(--border);stroke-width:6;}
.gen-ring-fg{fill:none;stroke:url(#gradnone);stroke:var(--gold);stroke-width:6;stroke-linecap:round;stroke-dasharray:326.7;stroke-dashoffset:326.7;transition:stroke-dashoffset .5s ease;filter:drop-shadow(0 0 6px rgba(200,134,42,.4));}
.gen-ring-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;}
.gen-ring-emoji{font-size:38px;animation:gen-pulse 1.8s ease-in-out infinite;}
.gen-ring-pct{font-family:'Fraunces',serif;font-size:18px;font-weight:400;color:var(--gold);}
@keyframes gen-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.gen-orbit{position:absolute;font-size:16px;top:50%;left:50%;animation:gen-orbit-spin 6s linear infinite;}
.gen-orbit-1{animation-duration:6s;}
.gen-orbit-2{animation-duration:8s;animation-direction:reverse;font-size:13px;}
.gen-orbit-3{animation-duration:10s;font-size:11px;}
@keyframes gen-orbit-spin{from{transform:translate(-50%,-50%) rotate(0deg) translateX(78px) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg) translateX(78px) rotate(-360deg)}}
.gen-tip{margin-top:22px;font-size:13px;color:var(--muted);background:var(--gold-pale);border-radius:10px;padding:12px 18px;display:inline-block;animation:gen-tip-fade .6s ease;}
@keyframes gen-tip-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes sp{to{transform:rotate(360deg)}}
@media(max-width:640px){
  .nav{padding:13px 16px;}.card{padding:22px 16px;}.fg{grid-template-columns:1fr;}
  .plans{grid-template-columns:1fr;}.book-cover{padding:32px 18px;}
  .book-chaps,.book-dedit{padding:20px 16px;}.order-card{padding:22px 16px;}.s3-flipbook-divider{padding:24px 16px 6px;}
  .progress{padding-top:78px;}.pl{width:24px;}.ps span{display:none;}
}

/* ====== INTERACTIVE FLIPBOOK PREVIEW ====== */
.flipbook-wrap{margin-bottom:0;background:linear-gradient(160deg,#1a1208 0%,#0d0a05 100%);border-radius:0 0 20px 20px;padding:28px 24px 32px;position:relative;overflow:hidden;}
.flipbook-wrap::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(200,134,42,.18),transparent 65%);pointer-events:none;}
.flipbook-title{text-align:center;font-family:'Fraunces',serif;font-size:13px;font-weight:300;color:rgba(255,255,255,.45);letter-spacing:3px;text-transform:uppercase;margin-bottom:20px;}
.flipbook-stage{position:relative;max-width:660px;margin:0 auto;}
.flipbook-book{position:relative;width:100%;aspect-ratio:2/1.35;border-radius:4px 12px 12px 4px;box-shadow:0 32px 80px rgba(0,0,0,.7),-6px 0 20px rgba(0,0,0,.4);overflow:hidden;background:#fff;}
.flipbook-spine{position:absolute;left:0;top:0;bottom:0;width:14px;background:linear-gradient(90deg,#0a0705,#1a1208,#0a0705);z-index:10;border-radius:4px 0 0 4px;}
.flipbook-spine-line{position:absolute;top:0;left:7px;bottom:0;width:1px;background:rgba(255,255,255,.06);}
.flipbook-pages-edge{position:absolute;right:0;top:4px;bottom:4px;width:10px;background:repeating-linear-gradient(to bottom,#f5f0e8,#f5f0e8 1px,#e8e2d6 2px,#f5f0e8 3px);border-radius:0 3px 3px 0;}
/* Page container */
.flipbook-page{position:absolute;inset:0 10px 0 14px;display:flex;transform-origin:left center;backface-visibility:hidden;-webkit-backface-visibility:hidden;}
/* 3D page-curl: pages rotate around their left spine like a real book */
.flipbook-stage{perspective:2200px;perspective-origin:center center;}
.flipbook-book{transform-style:preserve-3d;}
.flipbook-page{transition:transform .72s cubic-bezier(.32,.04,.32,1),opacity .42s ease,box-shadow .72s ease;}
.flipbook-page.active{transform:rotateY(0) translateZ(0);opacity:1;box-shadow:0 0 0 transparent;}
/* Going FORWARD: outgoing page curls left (rotateY negative, on its right spine) */
.flipbook-page.leaving-left{transform-origin:left center;transform:rotateY(-178deg);opacity:1;box-shadow:-10px 0 30px rgba(0,0,0,.15);z-index:10;}
.flipbook-page.entering-right{transform:rotateY(0);opacity:1;}
/* Going BACKWARD: incoming page un-curls from the left */
.flipbook-page.leaving-right{transform-origin:left center;transform:rotateY(0);opacity:0;}
.flipbook-page.entering-left{transform-origin:left center;transform:rotateY(-178deg);opacity:1;box-shadow:-10px 0 30px rgba(0,0,0,.15);}
/* Paper texture on the back of the curled page */
.flipbook-page::after{content:'';position:absolute;inset:0;background:linear-gradient(to right,rgba(0,0,0,.04),rgba(0,0,0,.01) 50%,transparent);border-radius:0 8px 8px 0;pointer-events:none;opacity:0;transition:opacity .4s;}
.flipbook-page.leaving-left::after,.flipbook-page.entering-left::after{opacity:1;}
/* ── StPageFlip drag-flip mode (premium page-turn, same engine as /read) ──
   Scoped to #s5-reader.fb-stpf so it ONLY applies when StPageFlip mounts.
   Neutralises the legacy single-page engine (absolute pages, rotateY curl,
   ancestor perspective/preserve-3d) so StPageFlip fully controls the pages. */
#s5-reader.fb-stpf .flipbook-stage{perspective:none;}
#s5-reader.fb-stpf .flipbook-book{transform-style:flat;perspective:none;overflow:visible;background:transparent;box-shadow:none;}
#s5-reader.fb-stpf .flipbook-spine,#s5-reader.fb-stpf .flipbook-pages-edge{display:none;}
#s5-reader.fb-stpf #fb-pages{position:relative;width:100%;height:100%;}
#s5-reader.fb-stpf .flipbook-page{
  position:relative;inset:auto;width:100%;height:100%;
  transform:none!important;transition:none!important;opacity:1!important;
  box-shadow:none!important;backface-visibility:visible;-webkit-backface-visibility:visible;
}
#s5-reader.fb-stpf .flipbook-page::after{display:none;}
#s5-reader.fb-stpf .stf__item{background:#FDFAF4;overflow:hidden;border-radius:3px;box-shadow:0 6px 24px rgba(0,0,0,.28);}
/* Left panel — illustration */
.fp-left{flex:1;position:relative;overflow:hidden;background:#1a2535;}
.fp-left img{width:100%;height:100%;object-fit:cover;display:block;}
.fp-left-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:56px;background:linear-gradient(145deg,#1a3d5c,#0d2438);}
/* Right panel — text */
.fp-right{flex:1;background:#FDFAF4;display:flex;flex-direction:column;justify-content:center;padding:28px 26px;position:relative;overflow:hidden;}
.fp-right::before{content:'';position:absolute;top:0;left:0;bottom:0;width:1px;background:linear-gradient(to bottom,transparent,rgba(26,21,16,.08) 20%,rgba(26,21,16,.08) 80%,transparent);}
.fp-page-eyebrow{font-size:9px;text-transform:uppercase;letter-spacing:2.5px;color:var(--gold);font-weight:500;margin-bottom:8px;}
.fp-page-title{font-family:'Fraunces',serif;font-size:clamp(15px,2.5vw,21px);font-weight:400;line-height:1.2;margin-bottom:12px;color:#1A1510;letter-spacing:-.3px;}
.fp-page-text{font-size:clamp(11px,1.5vw,13.5px);color:#5A4A3A;line-height:1.75;overflow:hidden;display:-webkit-box;-webkit-line-clamp:9;-webkit-box-orient:vertical;}
.fp-page-num{position:absolute;bottom:14px;right:18px;font-size:10px;color:rgba(26,21,16,.3);letter-spacing:1px;}
/* Cover page (full-width) */
.flipbook-page.cover-page .fp-left{flex:none;width:100%;}
.flipbook-page.cover-page .fp-right{display:none;}
.fp-cover-overlay{position:absolute;inset:0;background:linear-gradient(transparent 35%,rgba(13,20,36,.88));display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:28px 24px;text-align:center;color:#fff;}
.fp-cover-stars{color:#F0C870;font-size:11px;letter-spacing:3px;margin-bottom:8px;}
.fp-cover-title{font-family:'Fraunces',serif;font-size:clamp(16px,3vw,26px);font-weight:300;font-style:italic;line-height:1.15;margin-bottom:6px;text-shadow:0 2px 12px rgba(0,0,0,.4);}
.fp-cover-name{font-size:11px;color:#F0C870;letter-spacing:.5px;}
.fp-cover-badge{display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.8);font-size:9px;padding:4px 12px;border-radius:100px;margin-top:10px;letter-spacing:1px;text-transform:uppercase;}
/* Full-page chapter illustration (its own leaf, drawn to the page edges) */
.flipbook-page.illus-page{display:block;}
.fp-illus{position:absolute;inset:0;background:#1a2535;overflow:hidden;}
.fp-illus>img{width:100%;height:100%;object-fit:cover;display:block;}
.fp-illus-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:64px;background:linear-gradient(145deg,#1a3d5c,#0d2438);}
.fp-illus-cap{position:absolute;left:0;right:0;bottom:0;padding:30px 26px 22px;background:linear-gradient(transparent,rgba(13,20,36,.55) 45%,rgba(13,20,36,.9));display:flex;flex-direction:column;gap:5px;text-align:left;pointer-events:none;}
.fp-illus-eyebrow{font-size:9px;text-transform:uppercase;letter-spacing:2.6px;color:#F0C870;font-weight:600;}
.fp-illus-title{font-family:'Fraunces',serif;font-size:clamp(16px,2.6vw,23px);font-weight:400;line-height:1.18;letter-spacing:-.3px;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.35);}
.flipbook-page.illus-page .fp-page-num{color:rgba(255,255,255,.55);}
/* Full-page chapter text (its own leaf; long chapters span several) */
.flipbook-page.text-page{display:block;}
.fp-chaptertext{position:absolute;inset:0;background:#FDFAF4;display:flex;flex-direction:column;justify-content:flex-start;padding:34px 34px 42px;overflow:hidden;}
.fp-chaptertext .fp-page-eyebrow{margin-bottom:8px;}
.fp-chaptertext .fp-page-title{margin-bottom:14px;}
.fp-tp-body{flex:1 1 auto;overflow:hidden;}
/* Generous picture-book body text: larger + airier so chapters fill the page
   beautifully and longer chapters flow to a "continued" leaf. Measurement in
   fbSplitChapterParts reads these live values, so pagination adapts automatically. */
.fp-tp-para{font-size:clamp(15px,2vw,19px);color:#3E3326;line-height:1.95;margin:0 0 16px;}
.fp-tp-para:last-child{margin-bottom:0;}
.fp-chaptertext.fp-firstpage .fp-tp-para:first-child::first-letter{font-family:'Fraunces',serif;font-size:2.9em;line-height:.78;float:left;margin:5px 10px 0 0;color:var(--gold,#C9A24B);font-weight:500;}
.fp-tp-more{flex:0 0 auto;margin-top:12px;font-size:11px;color:#B7791F;font-style:italic;text-align:right;letter-spacing:.3px;}
.fp-tp-body::-webkit-scrollbar{width:4px;}
.fp-tp-body::-webkit-scrollbar-thumb{background:rgba(183,121,31,.35);border-radius:3px;}
.fp-tp-body::-webkit-scrollbar-track{background:transparent;}
/* Lock page */
.fp-lock-overlay{position:absolute;inset:0;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);background:rgba(253,250,244,.88);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;}
.fp-lock-icon{font-size:32px;margin-bottom:12px;}
.fp-lock-title{font-family:'Fraunces',serif;font-size:clamp(14px,2vw,18px);font-weight:400;color:#1A1510;margin-bottom:6px;letter-spacing:-.3px;}
.fp-lock-sub{font-size:12px;color:#7A6F62;line-height:1.55;margin-bottom:16px;max-width:200px;}
.fp-lock-btn{background:#C8862A;color:#fff;border:none;border-radius:100px;font-size:13px;font-weight:500;padding:10px 22px;cursor:pointer;font-family:'DM Sans',sans-serif;transition:transform .15s,box-shadow .15s;box-shadow:0 4px 16px rgba(200,134,42,.3);}
.fp-lock-btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(200,134,42,.4);}
/* Navigation */
.flipbook-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:16px;}
.fb-nav-btn{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:rgba(255,255,255,.7);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;flex-shrink:0;}
.fb-nav-btn:hover:not(:disabled){background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.35);}
.fb-nav-btn:disabled{opacity:.28;cursor:not-allowed;}
.fb-dots{display:flex;align-items:center;gap:6px;}
.fb-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.25);transition:all .2s;cursor:pointer;}
.fb-dot.active{background:#C8862A;width:18px;border-radius:3px;}
.fb-page-label{font-size:11px;color:rgba(255,255,255,.45);letter-spacing:.5px;min-width:60px;text-align:center;}
/* Mobile: stack pages vertically */
@media(max-width:560px){
  .flipbook-book{aspect-ratio:unset;min-height:380px;}
  .flipbook-page{flex-direction:column;}
  .flipbook-page.cover-page .fp-left{width:100%;flex:none;min-height:220px;}
  .fp-left{min-height:180px;flex:none;}
  .fp-right{padding:18px 16px;flex:1;}
  .fp-page-text{-webkit-line-clamp:6;}
}

/* ─── DARK MODE VARIABLES + OVERRIDES ─── */
[data-theme=dark]{
  --cream:#0F0D0A;--warm:#171410;--ink:#F5F0E8;--soft:#C8BFB4;--muted:#8A7F76;
  --border:rgba(255,255,255,.07);--border2:rgba(255,255,255,.13);
  --shadow:0 2px 16px rgba(0,0,0,.2);--shadow-md:0 8px 40px rgba(0,0,0,.28);
  --gold-pale:#1A1510;--teal-lt:#0A1E1A;
}
[data-theme=dark] .nav{background:rgba(15,13,10,.96);}
[data-theme=dark] .card{background:#1C1915;border-color:rgba(255,255,255,.08);}
[data-theme=dark] .fl input,
[data-theme=dark] .fl select,
[data-theme=dark] .fl textarea{background:#1C1915;border-color:rgba(255,255,255,.1);color:var(--ink);}
[data-theme=dark] .fl input:focus,
[data-theme=dark] .fl select:focus,
[data-theme=dark] .fl textarea:focus{background:#221E18;border-color:var(--gold);}
[data-theme=dark] .upload-area{background:#171410;border-color:rgba(255,255,255,.15);}
[data-theme=dark] .upload-area:hover,[data-theme=dark] .upload-area.drag{background:var(--gold-pale);}
[data-theme=dark] .privacy-box{background:#0A1E1A;border-color:rgba(42,122,106,.25);}
[data-theme=dark] .book-sel{background:#1C1915;border-color:rgba(255,255,255,.08);}
[data-theme=dark] .btn-theme{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.15);}


/* ═══ Multi-card s1 layout ═══ */
.s1-wrap{display:flex;flex-direction:column;gap:16px;}
.form-card{background:white;border:1px solid var(--border);border-radius:20px;padding:32px;box-shadow:0 2px 16px rgba(26,21,16,.06);}
.form-card-hd{display:flex;align-items:center;gap:10px;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--border);}
.form-card-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
.form-card-icon.gold{background:var(--gold-pale);color:var(--gold);}
.form-card-icon.teal{background:var(--teal-lt);color:var(--teal);}
.form-card-icon.warm{background:var(--warm);color:var(--soft);font-size:16px;}
.form-card-title{font-size:15px;font-weight:600;color:var(--ink);}
.form-card-sub{font-size:12px;color:var(--muted);margin-top:1px;}
/* Adult-only / child-only optional field visibility */
.opt-child{display:flex;}
.opt-adult{display:none;}
.audience-adult .opt-child{display:none;}
.audience-adult .opt-adult{display:flex;}
/* Photo smart info strip */
.photo-smart-strip{display:none;align-items:center;gap:12px;background:var(--teal-lt);border:1px solid rgba(42,122,106,.2);border-radius:10px;padding:12px 16px;margin-top:12px;}
.photo-smart-strip.show{display:flex;}
.photo-smart-strip span{font-size:13px;color:var(--teal);line-height:1.55;}
/* Language hint */
.lang-hint{font-size:12px;color:var(--muted);margin-top:6px;display:flex;align-items:center;gap:5px;}
/* Generate btn wrapper */
.gen-wrap{margin-top:4px;}
/* Responsive */
@media(max-width:560px){
  .form-card{padding:22px 18px;}
  .form-card-hd{margin-bottom:16px;padding-bottom:12px;}
}
[data-theme=dark] .form-card{background:#1C1915;border-color:rgba(255,255,255,.08);}
[data-theme=dark] .form-card-icon.gold{background:rgba(200,134,42,.15);}
[data-theme=dark] .form-card-icon.teal{background:rgba(42,122,106,.15);}
[data-theme=dark] .form-card-icon.warm{background:rgba(26,21,16,.4);}
[data-theme=dark] .photo-smart-strip{background:rgba(42,122,106,.1);border-color:rgba(42,122,106,.2);}

/* ═══ Admin bypass UI ═══ */
#admin-pill{position:fixed;top:72px;left:50%;transform:translateX(-50%);background:var(--gold);color:white;padding:5px 18px;border-radius:100px;font-size:12px;font-weight:600;z-index:199;display:none;box-shadow:0 2px 12px rgba(200,134,42,.35);white-space:nowrap;pointer-events:none;}
.admin-modal-overlay{position:fixed;inset:0;background:rgba(26,21,16,.72);z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px;}
.admin-modal-box{background:white;border-radius:20px;padding:32px;max-width:380px;width:100%;box-shadow:0 24px 64px rgba(0,0,0,.35);}
.admin-modal-title{font-family:'Fraunces',serif;font-size:22px;font-weight:300;color:var(--ink);margin-bottom:5px;}
/* ═══ Character World — Colour Swatches ═══ */
.colour-picker-wrap{margin-top:6px;}
/* ── Colour swatches: 20 colours in a clean grid ──
   Desktop (≥1024px):       10 per row × 2 rows
   Tablet (561–1023px):     10 per row × 2 rows
   Mobile (≤560px):          5 per row × 4 rows */
.colour-swatches{display:grid;grid-template-columns:repeat(10,1fr);gap:10px;margin-bottom:6px;justify-items:center;align-items:center;max-width:560px;}
@media (max-width: 560px){
  .colour-swatches{grid-template-columns:repeat(5,1fr);gap:8px;max-width:none;}
}
.colour-swatch{position:relative;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border-radius:50%;border:2px solid var(--border);background:transparent;cursor:pointer;transition:all .15s;user-select:none;-webkit-user-select:none;overflow:visible;}
.colour-swatch .sw-dot{width:24px;height:24px;border-radius:50%;display:block;box-shadow:inset 0 1px 2px rgba(0,0,0,.15),0 1px 3px rgba(0,0,0,.1);}
.colour-swatch .sw-check{position:absolute;color:white;font-weight:700;font-size:13px;opacity:0;text-shadow:0 1px 2px rgba(0,0,0,.4);transition:opacity .15s;}
.colour-swatch .sw-name{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:#1A1510;color:#fff;padding:4px 10px;border-radius:6px;font-size:11px;font-weight:500;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s;letter-spacing:.2px;z-index:5;}
.colour-swatch:hover{transform:translateY(-2px);border-color:var(--gold);}
.colour-swatch:hover .sw-name,
.colour-swatch.sw-touched .sw-name{opacity:1;}
.colour-swatch.sw-sel{border-color:var(--gold);box-shadow:0 0 0 2px rgba(200,134,42,.2),0 4px 10px rgba(200,134,42,.25);}
.colour-swatch.sw-sel .sw-check{opacity:1;}
.colour-swatch.sw-disabled{opacity:.32;pointer-events:none;}
.colour-swatch.hidden{display:none;}
.colour-more-btn{font-size:12px;color:var(--gold);background:none;border:none;cursor:pointer;font-family:'DM Sans',sans-serif;font-weight:500;padding:6px 10px;border-radius:8px;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px;}
.colour-more-btn:hover{background:var(--gold-pale);}
.sw-dot{width:15px;height:15px;border-radius:50%;border:1.5px solid rgba(0,0,0,.1);flex-shrink:0;}
.sw-check{font-size:11px;font-weight:700;display:none;}
.sw-sel .sw-check{display:inline;}
.sw-sel .sw-dot{display:none;}
.colour-limit-msg{font-size:12px;color:var(--muted);transition:color .2s;}
.colour-limit-msg.at-max{color:var(--gold);}

/* ═══ Animal Tag Input ═══ */
.tag-input-wrap{border:1.5px solid var(--border);border-radius:10px;padding:8px 10px;background:var(--cream);transition:border-color .2s,box-shadow .2s;min-height:46px;cursor:text;}
.tag-input-wrap:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px rgba(200,134,42,.1);background:white;}
.tags-row{display:flex;flex-wrap:wrap;gap:5px;align-items:center;}
.tag-chip{display:inline-flex;align-items:center;gap:5px;background:var(--ink);color:var(--cream);padding:5px 8px 5px 12px;border-radius:100px;font-size:13px;white-space:nowrap;animation:chip-in .15s ease;}
@keyframes chip-in{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}
.tag-chip-rm{background:none;border:none;color:rgba(255,255,255,.6);cursor:pointer;font-size:14px;line-height:1;padding:0 2px;transition:color .15s;}
.tag-chip-rm:hover{color:#fff;}
#fanimal-in{border:none;outline:none;font-size:14px;font-family:'DM Sans',sans-serif;color:var(--ink);background:transparent;min-width:100px;padding:3px 4px;line-height:1.4;}
#fanimal-in::placeholder{color:var(--muted);}
.animal-suggestions{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px;}
.animal-pill{font-size:12px;padding:4px 11px;border-radius:100px;border:1px solid var(--border);background:white;cursor:pointer;color:var(--soft);transition:all .15s;font-family:'DM Sans',sans-serif;}
.animal-pill:hover{border-color:var(--gold);color:var(--gold);background:var(--gold-pale);}
.animal-pill.used{opacity:.35;pointer-events:none;}

/* ═══ Extra Friends ═══ */
.extra-friends-wrap{display:flex;flex-direction:column;gap:8px;margin-top:6px;}
.extra-friend-row{display:flex;gap:8px;align-items:center;}
.extra-friend-row input{flex:1;padding:10px 13px;border:1.5px solid var(--border);border-radius:10px;font-size:14px;font-family:'DM Sans',sans-serif;color:var(--ink);background:var(--cream);outline:none;transition:border-color .2s;}
.extra-friend-row input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(200,134,42,.1);background:white;}
.rm-efriend{background:var(--warm);border:1.5px solid var(--border2);border-radius:8px;width:34px;height:38px;cursor:pointer;font-size:15px;flex-shrink:0;color:var(--muted);transition:all .15s;}
.rm-efriend:hover{background:var(--coral);border-color:var(--coral);color:white;}
.add-friend-btn{font-size:12px;color:var(--gold);background:none;border:none;cursor:pointer;font-family:'DM Sans',sans-serif;font-weight:600;padding:0;display:inline-flex;align-items:center;gap:5px;margin-top:4px;text-decoration:none;transition:opacity .15s;}
.add-friend-btn:hover{opacity:.7;}
[data-theme=dark] .tag-input-wrap{background:#1C1915;border-color:rgba(255,255,255,.1);}
[data-theme=dark] .tag-input-wrap:focus-within{background:#221E18;}
[data-theme=dark] #fanimal-in{color:var(--ink);}
[data-theme=dark] .animal-pill{background:#1C1915;border-color:rgba(255,255,255,.1);color:var(--soft);}
[data-theme=dark] .colour-swatch{background:#1C1915;border-color:rgba(255,255,255,.1);}
[data-theme=dark] .colour-swatch:hover{background:#221E18;}
[data-theme=dark] .extra-friend-row input{background:#1C1915;border-color:rgba(255,255,255,.1);color:var(--ink);}

/* ═══════════ CHARACTER STUDIO ═══════════ */
.cs-card{background:white;border:1px solid var(--border);border-radius:20px;padding:0;box-shadow:0 2px 16px rgba(26,21,16,.06);overflow:hidden;}
[data-theme=dark] .cs-card{background:#1C1915;border-color:rgba(255,255,255,.08);}
.cs-hd{display:flex;align-items:center;gap:12px;padding:24px 28px 18px;}
.cs-hd-icon{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,#C8862A,#F0C870);display:flex;align-items:center;justify-content:center;font-size:21px;flex-shrink:0;box-shadow:0 3px 12px rgba(200,134,42,.3);}
.cs-hd-title{font-family:'Fraunces',serif;font-size:21px;font-weight:400;color:var(--ink);letter-spacing:-.3px;}
.cs-hd-title em{font-style:italic;color:var(--gold);}
.cs-hd-sub{font-size:13px;color:var(--muted);margin-top:2px;}
.cs-body{display:grid;grid-template-columns:1fr 0.85fr;gap:0;}
@media(max-width:760px){.cs-body{grid-template-columns:1fr;}}
.cs-controls{padding:8px 28px 28px;}
.cs-stage{background:linear-gradient(160deg,#FDF6E8 0%,#FBEFD6 100%);padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;border-left:1px solid var(--border);position:relative;}
[data-theme=dark] .cs-stage{background:linear-gradient(160deg,#221E18,#1A1712);border-color:rgba(255,255,255,.06);}
.cs-stage-label{font-size:10px;text-transform:uppercase;letter-spacing:2px;color:var(--gold);font-weight:600;margin-bottom:14px;}
/* Character tabs */
.cs-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px;border-bottom:1px solid var(--border);padding-bottom:0;}
.cs-tab{padding:9px 16px;font-size:13px;font-weight:500;color:var(--muted);cursor:pointer;border-radius:10px 10px 0 0;border:1px solid transparent;border-bottom:none;transition:all .15s;position:relative;top:1px;background:transparent;white-space:nowrap;display:flex;align-items:center;gap:6px;}
.cs-tab:hover{color:var(--ink);background:var(--warm);}
.cs-tab.active{color:var(--gold);background:white;border-color:var(--border);font-weight:600;}
[data-theme=dark] .cs-tab.active{background:#1C1915;}
.cs-tab .cs-tab-rm{background:none;border:none;color:var(--muted);cursor:pointer;font-size:14px;padding:0 2px;line-height:1;border-radius:50%;}
.cs-tab .cs-tab-rm:hover{color:var(--coral);}
.cs-tab-add{padding:9px 14px;font-size:13px;font-weight:600;color:var(--gold);cursor:pointer;border:1px dashed var(--border2);border-radius:10px;background:transparent;transition:all .15s;white-space:nowrap;}
.cs-tab-add:hover{background:var(--gold-pale);border-color:var(--gold);}
.cs-tab-add:disabled{opacity:.4;cursor:not-allowed;}
/* Trait rows */
.cs-row{margin-bottom:16px;}
.cs-row-label{font-size:12px;font-weight:600;color:var(--soft);margin-bottom:8px;display:flex;align-items:center;gap:6px;}
.cs-name-input{width:100%;padding:11px 14px;border:1.5px solid var(--border);border-radius:10px;font-size:14px;font-family:'DM Sans',sans-serif;color:var(--ink);background:var(--cream);outline:none;transition:border-color .2s;margin-bottom:16px;}
.cs-name-input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(200,134,42,.1);background:white;}
[data-theme=dark] .cs-name-input{background:#1C1915;border-color:rgba(255,255,255,.1);color:var(--ink);}
/* Gender pills */
.cs-gender{display:flex;gap:8px;}
.cs-gender-opt{flex:1;padding:10px;border:1.5px solid var(--border);border-radius:10px;background:var(--warm);cursor:pointer;text-align:center;font-size:13px;font-weight:500;color:var(--soft);transition:all .15s;display:flex;align-items:center;justify-content:center;gap:6px;}
.cs-gender-opt:hover{border-color:var(--gold);}
.cs-gender-opt.sel{border-color:var(--gold);background:var(--gold-pale);color:var(--gold);font-weight:600;}
[data-theme=dark] .cs-gender-opt{background:#221E18;border-color:rgba(255,255,255,.1);}
/* Swatch dots */
.cs-swatches{display:flex;gap:9px;flex-wrap:wrap;}
.cs-dot{width:32px;height:32px;border-radius:50%;cursor:pointer;border:3px solid transparent;transition:all .15s;position:relative;box-shadow:0 1px 4px rgba(0,0,0,.12);}
.cs-dot:hover{transform:scale(1.12);}
.cs-dot.sel{border-color:var(--gold);transform:scale(1.1);}
.cs-dot.sel::after{content:'✓';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:white;font-size:14px;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.4);}
/* Hair style grid */
.cs-hairstyles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.cs-hair-opt{aspect-ratio:1;border:1.5px solid var(--border);border-radius:12px;background:var(--warm);cursor:pointer;padding:5px;transition:all .15s;display:flex;align-items:center;justify-content:center;}
.cs-hair-opt:hover{border-color:var(--gold);background:white;}
.cs-hair-opt.sel{border-color:var(--gold);background:var(--gold-pale);box-shadow:0 2px 8px rgba(200,134,42,.18);}
.cs-hair-opt svg{width:100%;height:100%;}
[data-theme=dark] .cs-hair-opt{background:#221E18;border-color:rgba(255,255,255,.1);}
/* Avatar preview */
.cs-avatar-frame{width:190px;height:200px;background:white;border-radius:50%/48%;box-shadow:0 8px 28px rgba(26,21,16,.12),inset 0 0 0 6px rgba(255,255,255,.6);overflow:hidden;display:flex;align-items:flex-end;justify-content:center;position:relative;border:1px solid rgba(200,134,42,.15);}
[data-theme=dark] .cs-avatar-frame{background:#2A2520;}
.cs-avatar-frame .kd-avatar-svg{width:100%;height:100%;display:block;}
.cs-cast{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:16px;max-width:240px;}
.cs-cast-chip{display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;opacity:.6;transition:opacity .15s;}
.cs-cast-chip.active{opacity:1;}
.cs-cast-mini{width:46px;height:46px;border-radius:50%;background:white;overflow:hidden;border:2px solid var(--border);display:flex;align-items:flex-end;justify-content:center;}
.cs-cast-chip.active .cs-cast-mini{border-color:var(--gold);}
.cs-cast-mini .kd-avatar-svg{width:100%;height:100%;}
.cs-cast-name{font-size:10px;color:var(--muted);max-width:54px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;}
.cs-stage-hint{font-size:11.5px;color:var(--muted);text-align:center;margin-top:14px;line-height:1.5;max-width:220px;}
/* Animals + foods picker */
.cs-things{padding:0 28px 24px;border-top:1px solid var(--border);}
.cs-things-hd{font-size:12px;text-transform:uppercase;letter-spacing:1.5px;color:var(--gold);font-weight:600;margin:20px 0 12px;}
.cs-emoji-grid{display:flex;flex-wrap:wrap;gap:7px;}
.cs-emoji-pill{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border:1.5px solid var(--border);border-radius:100px;background:var(--warm);cursor:pointer;font-size:13px;color:var(--soft);transition:all .15s;user-select:none;}
.cs-emoji-pill:hover{border-color:var(--gold);background:white;}
.cs-emoji-pill.sel{border-color:var(--gold);background:var(--gold-pale);color:var(--gold);font-weight:500;}
.cs-emoji-pill .em{font-size:16px;}
[data-theme=dark] .cs-emoji-pill{background:#221E18;border-color:rgba(255,255,255,.1);}
.cs-custom-add{display:flex;gap:8px;margin-top:10px;}
.cs-custom-add input{flex:1;padding:9px 13px;border:1.5px solid var(--border);border-radius:10px;font-size:13px;font-family:inherit;background:var(--cream);color:var(--ink);outline:none;}
.cs-custom-add input:focus{border-color:var(--gold);}
.cs-custom-add button{padding:9px 16px;border:none;border-radius:10px;background:var(--ink);color:var(--cream);font-size:13px;font-weight:500;cursor:pointer;font-family:inherit;}
[data-theme=dark] .cs-custom-add input{background:#1C1915;border-color:rgba(255,255,255,.1);}




/* ════════════════════════════════════════════════════════════════════
   PREMIUM 3-TIER AVATAR PICKER — Visual Design System
   ════════════════════════════════════════════════════════════════════ */
.avatar-picker-card{grid-column:1/-1;}

/* Tier selector cards */
.tier-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:8px;}
@media(max-width:780px){.tier-grid{grid-template-columns:1fr;}}
.tier-card{position:relative;background:white;border:2px solid var(--border);border-radius:18px;padding:24px 18px 22px;text-align:center;cursor:pointer;font-family:inherit;transition:all .25s cubic-bezier(.34,1.56,.64,1);overflow:hidden;}
.tier-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(200,134,42,.06) 0%,transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none;}
.tier-card:hover{border-color:var(--gold-lt);transform:translateY(-3px);box-shadow:0 12px 32px rgba(26,21,16,.10);}
.tier-card:hover::before{opacity:1;}
.tier-card.active{border-color:var(--gold);background:linear-gradient(180deg,#FFFCF5 0%,white 100%);box-shadow:0 8px 28px rgba(200,134,42,.18);}
.tier-card.active::before{opacity:1;}
.tier-card.active .tier-emoji{transform:scale(1.1);}
.tier-emoji{font-size:42px;margin-bottom:10px;transition:transform .3s;}
.tier-label{font-family:'Fraunces',serif;font-size:19px;font-weight:500;color:var(--ink);margin-bottom:6px;letter-spacing:-0.3px;}
.tier-desc{font-size:13px;color:var(--muted);line-height:1.45;margin-bottom:12px;}
.tier-count{font-size:11px;color:var(--gold);font-weight:500;letter-spacing:0.5px;text-transform:uppercase;}
.tier-badge{position:absolute;top:12px;right:12px;font-size:10px;font-weight:600;padding:3px 9px;border-radius:99px;letter-spacing:0.5px;text-transform:uppercase;}
.tier-badge-free{background:var(--teal-lt);color:var(--teal);}
.tier-badge-popular{background:linear-gradient(135deg,#FFE5B4 0%,#FFCB80 100%);color:#8B5A1F;animation:tier-pulse 2.4s ease-in-out infinite;}
@keyframes tier-pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.04);}}

/* Tier panels */
.tier-panel{margin-top:24px;padding-top:24px;border-top:1px solid var(--border);animation:tier-fadein .4s ease;}
@keyframes tier-fadein{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

/* Selected banner */
.ap-selected-banner{display:flex;align-items:center;gap:16px;background:linear-gradient(135deg,#FFFCF5 0%,#FDF3DC 100%);border:1.5px solid var(--gold-lt);border-radius:16px;padding:16px 20px;margin-bottom:20px;animation:tier-fadein .35s ease;}
.ap-selected-avatar{width:72px;height:72px;border-radius:50%;background:white;border:2px solid var(--gold);overflow:hidden;flex-shrink:0;box-shadow:0 4px 12px rgba(200,134,42,.25);}
.ap-selected-avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.ap-selected-info{flex:1;min-width:0;}
.ap-selected-label{font-size:11px;color:var(--gold);font-weight:600;letter-spacing:1px;text-transform:uppercase;margin-bottom:2px;}
.ap-selected-name{font-family:'Fraunces',serif;font-size:18px;color:var(--ink);font-weight:500;line-height:1.2;}
.ap-selected-meta{font-size:12px;color:var(--muted);margin-top:2px;}
.ap-selected-clear{background:white;border:1.5px solid var(--border2);color:var(--soft);padding:8px 14px;border-radius:99px;font-size:13px;font-weight:500;font-family:inherit;cursor:pointer;transition:all .2s;flex-shrink:0;}
.ap-selected-clear:hover{border-color:var(--ink);color:var(--ink);background:var(--cream);}

/* Filter pills */
.ap-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;}
.ap-filter-pill{display:inline-flex;align-items:center;gap:6px;background:white;border:1.5px solid var(--border);border-radius:99px;padding:8px 14px;font-family:inherit;font-size:13px;color:var(--soft);cursor:pointer;transition:all .2s;font-weight:500;}
.ap-filter-pill:hover{border-color:var(--gold-lt);color:var(--ink);}
.ap-filter-pill.active{background:var(--ink);border-color:var(--ink);color:white;}
.ap-pill-emoji{font-size:14px;}
.ap-pill-count{font-size:11px;background:rgba(0,0,0,.08);padding:1px 6px;border-radius:99px;font-weight:600;}
.ap-filter-pill.active .ap-pill-count{background:rgba(255,255,255,.18);}

/* Sub-filters */
.ap-subfilters{display:flex;flex-wrap:wrap;gap:18px;align-items:center;padding:12px 16px;background:var(--warm);border-radius:12px;margin-bottom:16px;}
.ap-subfilter-group{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.ap-subfilter-label{font-size:12px;color:var(--muted);font-weight:500;margin-right:2px;text-transform:uppercase;letter-spacing:0.5px;}
.ap-sub-pill{background:white;border:1px solid var(--border);border-radius:99px;padding:4px 12px;font-family:inherit;font-size:12px;color:var(--soft);cursor:pointer;transition:all .15s;}
.ap-sub-pill:hover{border-color:var(--gold);}
.ap-sub-pill.active{background:var(--gold);border-color:var(--gold);color:white;font-weight:500;}
.ap-skin-swatch{width:26px;height:26px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:all .15s;padding:0;}
.ap-skin-swatch:hover{transform:scale(1.12);}
.ap-skin-swatch.active{border-color:var(--ink);box-shadow:0 0 0 2px white,0 0 0 4px var(--gold);transform:scale(1.08);}

/* Gallery grid */
.ap-grid-status{font-size:13px;color:var(--muted);margin-bottom:14px;text-align:center;padding:8px;}
.ap-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(126px,1fr));gap:12px;margin-bottom:16px;}
@media(max-width:680px){.ap-grid{grid-template-columns:repeat(auto-fill,minmax(102px,1fr));gap:8px;}}
.ap-tile{position:relative;background:white;border:2px solid var(--border);border-radius:14px;padding:8px;cursor:pointer;transition:all .2s cubic-bezier(.34,1.56,.64,1);overflow:hidden;aspect-ratio:1;}
.ap-tile::before{content:'';position:absolute;inset:0;background:repeating-conic-gradient(#F5EFE3 0% 25%,white 0% 50%) 50%/14px 14px;border-radius:12px;opacity:.3;z-index:0;pointer-events:none;}
.ap-tile img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;display:block;}
.ap-tile:hover{border-color:var(--gold-lt);transform:translateY(-2px);box-shadow:0 8px 20px rgba(26,21,16,.08);}
.ap-tile.selected{border-color:var(--gold);background:linear-gradient(180deg,#FFFCF5 0%,white 100%);box-shadow:0 0 0 3px rgba(200,134,42,.18),0 6px 16px rgba(200,134,42,.20);}
.ap-tile.selected::after{content:'✓';position:absolute;top:6px;right:6px;background:var(--gold);color:white;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;z-index:2;box-shadow:0 2px 6px rgba(200,134,42,.4);animation:tile-check-pop .3s cubic-bezier(.34,1.56,.64,1);}
@keyframes tile-check-pop{from{transform:scale(0);opacity:0;}to{transform:scale(1);opacity:1;}}

.ap-load-more{display:block;margin:0 auto;background:white;border:1.5px solid var(--border);color:var(--soft);padding:10px 22px;border-radius:99px;font-family:inherit;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;}
.ap-load-more:hover{border-color:var(--gold);color:var(--ink);background:var(--gold-pale);}

/* Coming-soon panels */
.tier-coming-soon{text-align:center;background:linear-gradient(180deg,var(--warm) 0%,white 100%);border:1.5px dashed var(--border2);border-radius:18px;padding:36px 28px;}
.tcs-icon{font-size:56px;margin-bottom:12px;}
.tcs-title{font-family:'Fraunces',serif;font-size:24px;font-weight:500;color:var(--ink);margin-bottom:6px;}
.tcs-sub{font-size:14px;color:var(--muted);margin-bottom:20px;}
.tcs-features{list-style:none;padding:0;max-width:480px;margin:0 auto 22px;text-align:left;}
.tcs-features li{padding:8px 12px;background:white;border:1px solid var(--border);border-radius:10px;margin-bottom:6px;font-size:14px;color:var(--soft);line-height:1.5;}
.tcs-features li strong{color:var(--gold);}
.tcs-back-btn{background:var(--ink);border:none;color:white;padding:11px 22px;border-radius:99px;font-family:inherit;font-size:14px;font-weight:500;cursor:pointer;transition:opacity .2s;}
.tcs-back-btn:hover{opacity:.85;}

[data-theme=dark] .tier-card{background:#1C1915;border-color:rgba(255,255,255,.10);}
[data-theme=dark] .tier-card.active{background:linear-gradient(180deg,#252018 0%,#1C1915 100%);}
[data-theme=dark] .ap-selected-banner{background:linear-gradient(135deg,#252018 0%,#2A2418 100%);}
[data-theme=dark] .ap-tile{background:#1C1915;}
[data-theme=dark] .ap-filter-pill{background:#1C1915;}
[data-theme=dark] .ap-sub-pill{background:#1C1915;}
[data-theme=dark] .ap-subfilters{background:rgba(255,255,255,.04);}
[data-theme=dark] .tier-coming-soon{background:linear-gradient(180deg,#1C1915 0%,#15120E 100%);}
[data-theme=dark] .tcs-features li{background:#1C1915;}



/* ════════════════════════════════════════════════════════════════════
   TIER 3 — DESIGN YOUR OWN — Layered Builder UI
   ════════════════════════════════════════════════════════════════════ */
.t3-builder{display:grid;grid-template-columns:340px 1fr;gap:24px;margin-top:6px;}
@media(max-width:780px){.t3-builder{grid-template-columns:1fr;gap:18px;}}

/* Live preview frame */
.t3-preview-wrap{position:sticky;top:88px;align-self:start;}
@media(max-width:780px){.t3-preview-wrap{position:relative;top:0;}}
.t3-preview-label{font-size:11px;text-transform:uppercase;letter-spacing:1.5px;color:var(--gold);font-weight:600;margin-bottom:10px;text-align:center;}
.t3-preview{position:relative;aspect-ratio:1;background:linear-gradient(180deg,#FFFCF5 0%,#FDF3DC 100%);border:2px solid var(--gold-lt);border-radius:24px;overflow:hidden;box-shadow:0 12px 36px rgba(200,134,42,.15);}
.t3-preview::before{content:'';position:absolute;inset:0;background:repeating-conic-gradient(rgba(200,134,42,.04) 0% 25%,transparent 0% 50%) 50%/22px 22px;pointer-events:none;}
.t3-preview-stack{position:absolute;inset:0;}
.t3-preview-stack img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;animation:t3-layer-fade .25s ease;}
@keyframes t3-layer-fade{from{opacity:0;transform:scale(.97);}to{opacity:1;transform:scale(1);}}
.t3-preview-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:14px;font-style:italic;padding:24px;text-align:center;}
.t3-preview-hint{font-size:12px;color:var(--muted);text-align:center;margin-top:10px;}
.t3-reset-btn{display:block;margin:8px auto 0;background:transparent;border:1px solid var(--border);color:var(--muted);padding:6px 14px;border-radius:99px;font-family:inherit;font-size:12px;cursor:pointer;transition:all .2s;}
.t3-reset-btn:hover{border-color:var(--coral);color:var(--coral);}

/* Saved banner */
.t3-saved-banner{display:flex;align-items:center;gap:16px;background:linear-gradient(135deg,#FFFCF5 0%,#FDF3DC 100%);border:1.5px solid var(--gold-lt);border-radius:16px;padding:16px 20px;margin-bottom:20px;animation:tier-fadein .35s ease;}
.t3-saved-avatar{width:84px;height:84px;border-radius:50%;background:white;border:2px solid var(--gold);overflow:hidden;flex-shrink:0;box-shadow:0 4px 14px rgba(200,134,42,.30);}
.t3-saved-avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.t3-saved-info{flex:1;min-width:0;}
.t3-saved-label{font-size:11px;color:var(--gold);font-weight:600;letter-spacing:1px;text-transform:uppercase;margin-bottom:2px;}
.t3-saved-name{font-family:'Fraunces',serif;font-size:18px;color:var(--ink);font-weight:500;line-height:1.2;}
.t3-saved-meta{font-size:12px;color:var(--muted);margin-top:2px;}

/* Steps column */
.t3-steps{display:flex;flex-direction:column;gap:18px;}
.t3-step{background:white;border:1px solid var(--border);border-radius:16px;padding:18px 18px 16px;transition:border-color .2s;}
.t3-step.locked{opacity:.45;pointer-events:none;filter:grayscale(.4);}
.t3-step-hd{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.t3-step-num{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--ink);color:white;font-size:14px;font-weight:600;font-family:'DM Sans',sans-serif;flex-shrink:0;}
.t3-step.done .t3-step-num{background:var(--teal);}
.t3-step.done .t3-step-num::after{content:'✓';}
.t3-step.done .t3-step-num{color:transparent;font-size:0;}
.t3-step.done .t3-step-num::after{color:white;font-size:16px;}
.t3-step-title{font-family:'Fraunces',serif;font-size:17px;font-weight:500;color:var(--ink);}
.t3-step-sub{font-size:12px;color:var(--muted);margin-top:1px;}

/* Tiles */
.t3-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:8px;}
.t3-tiles-skin{grid-template-columns:repeat(7,1fr);gap:8px;}
.t3-tiles-eyes{grid-template-columns:repeat(4,1fr);}
@media(max-width:480px){
  .t3-tiles{grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:6px;}
  .t3-tiles-skin{grid-template-columns:repeat(4,1fr);}
}
.t3-tile{position:relative;background:white;border:2px solid var(--border);border-radius:12px;padding:6px;cursor:pointer;transition:all .18s cubic-bezier(.34,1.56,.64,1);overflow:hidden;font-family:inherit;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.t3-tile::before{content:'';position:absolute;inset:0;background:repeating-conic-gradient(#F5EFE3 0% 25%,white 0% 50%) 50%/10px 10px;border-radius:10px;opacity:.25;z-index:0;pointer-events:none;}
.t3-tile img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;display:block;}
.t3-tile:hover{border-color:var(--gold-lt);transform:translateY(-2px);box-shadow:0 6px 14px rgba(26,21,16,.08);}
.t3-tile.active{border-color:var(--gold);background:linear-gradient(180deg,#FFFCF5 0%,white 100%);box-shadow:0 0 0 3px rgba(200,134,42,.18),0 4px 12px rgba(200,134,42,.20);}
.t3-tile.active::after{content:'✓';position:absolute;top:4px;right:4px;background:var(--gold);color:white;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;z-index:2;box-shadow:0 2px 4px rgba(200,134,42,.4);animation:tile-check-pop .25s cubic-bezier(.34,1.56,.64,1);}
.t3-tile-label{font-size:9.5px;color:var(--muted);text-align:center;line-height:1.2;margin-top:auto;letter-spacing:0;text-transform:none;font-weight:500;}
.t3-tile.active .t3-tile-label{color:var(--gold);font-weight:600;}

/* Skin swatch tile (no image — just color) */
.t3-tile-skin{display:flex;align-items:center;justify-content:center;}
.t3-tile-skin .t3-swatch{width:100%;height:100%;border-radius:8px;position:relative;z-index:1;}
.t3-tile-skin::before{opacity:0;}

/* Eye color swatch tile */
.t3-tile-eye{display:flex;align-items:center;justify-content:center;}
.t3-tile-eye .t3-eye-dot{width:42%;height:42%;border-radius:50%;position:relative;z-index:1;box-shadow:inset 0 -3px 6px rgba(0,0,0,.35),inset 0 3px 6px rgba(255,255,255,.4);}
.t3-tile-eye::before{opacity:0;}

/* "None" tile */
.t3-tile-none{}
.t3-tile-none-icon{font-size:24px;color:var(--muted);position:relative;z-index:1;line-height:1;}
.t3-tile-none::before{opacity:0;}
.t3-tile-none.active .t3-tile-none-icon{color:var(--gold);}

/* Save bar */
.t3-save-bar{margin-top:8px;padding-top:18px;border-top:1px solid var(--border);text-align:center;}
.t3-save-btn{display:inline-flex;align-items:center;gap:10px;background:var(--ink);border:none;color:white;padding:14px 28px;border-radius:99px;font-family:inherit;font-size:15px;font-weight:500;cursor:pointer;transition:all .25s cubic-bezier(.34,1.56,.64,1);box-shadow:0 6px 20px rgba(26,21,16,.18);}
.t3-save-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 28px rgba(26,21,16,.25);background:var(--gold);}
.t3-save-btn:disabled{opacity:.4;cursor:not-allowed;background:var(--muted);}
.t3-save-icon{font-size:18px;}
.t3-save-arrow{font-size:20px;transition:transform .2s;}
.t3-save-btn:hover:not(:disabled) .t3-save-arrow{transform:translateX(4px);}
.t3-save-hint{font-size:12px;color:var(--muted);margin-top:8px;}
.t3-save-bar.ready .t3-save-hint{color:var(--teal);font-weight:500;}

/* Dark mode */
[data-theme=dark] .t3-preview{background:linear-gradient(180deg,#252018 0%,#1C1915 100%);}
[data-theme=dark] .t3-step{background:#1C1915;border-color:rgba(255,255,255,.08);}
[data-theme=dark] .t3-saved-banner{background:linear-gradient(135deg,#252018 0%,#2A2418 100%);}
[data-theme=dark] .t3-tile{background:#1C1915;}
[data-theme=dark] .t3-save-btn:hover:not(:disabled){background:var(--gold);}



/* ════════════════════════════════════════════════════════════════════
   TIER 2 — PHOTO → AI AVATAR — Premium Upload + Generate Flow
   ════════════════════════════════════════════════════════════════════ */
.t2-stage{display:flex;flex-direction:column;gap:18px;}
.t2-step-block{animation:tier-fadein .4s ease;}

/* Pricing card up top */
.t2-pricing-card{display:flex;align-items:center;gap:18px;background:linear-gradient(135deg,#FFFCF5 0%,#FDF3DC 100%);border:1.5px solid var(--gold-lt);border-radius:16px;padding:18px 22px;}
.t2-price-tag{font-family:'Fraunces',serif;font-size:32px;font-weight:500;color:var(--gold);letter-spacing:-1px;flex-shrink:0;}
.t2-price-info{flex:1;}
.t2-price-title{font-family:'Fraunces',serif;font-size:18px;font-weight:500;color:var(--ink);margin-bottom:3px;letter-spacing:-0.3px;}
.t2-price-desc{font-size:13px;color:var(--soft);line-height:1.5;}

/* Privacy note */
.t2-privacy-note{display:flex;gap:14px;align-items:flex-start;background:var(--teal-lt);border:1px solid rgba(42,122,106,.2);border-radius:14px;padding:14px 18px;}
.t2-privacy-icon{font-size:22px;flex-shrink:0;line-height:1;margin-top:1px;}
.t2-privacy-text{font-size:13px;color:var(--soft);line-height:1.55;}
.t2-privacy-text strong{color:var(--teal);font-weight:600;}

/* Upload area */
.t2-upload-area{position:relative;border:2px dashed var(--border2);border-radius:18px;padding:42px 24px;text-align:center;cursor:pointer;background:var(--cream);transition:all .25s;}
.t2-upload-area:hover{border-color:var(--gold);background:var(--gold-pale);}
.t2-upload-area.drag{border-color:var(--gold);background:var(--gold-pale);transform:scale(1.01);}
.t2-upload-icon{font-size:48px;margin-bottom:10px;}
.t2-upload-title{font-family:'Fraunces',serif;font-size:18px;font-weight:500;color:var(--ink);margin-bottom:4px;}
.t2-upload-sub{font-size:13px;color:var(--muted);}

/* Tips list */
.t2-tips{background:white;border:1px solid var(--border);border-radius:14px;padding:14px 18px;}
.t2-tips-hd{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:8px;}
.t2-tips ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:6px;}
@media(max-width:560px){.t2-tips ul{grid-template-columns:1fr;}}
.t2-tips li{font-size:13px;color:var(--soft);line-height:1.5;}

/* Preview row (photo → result) */
.t2-preview-row{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center;}
@media(max-width:680px){
  .t2-preview-row{grid-template-columns:1fr;}
  .t2-preview-arrow{transform:rotate(90deg);justify-self:center;}
}
.t2-preview-side{display:flex;flex-direction:column;align-items:center;gap:10px;}
.t2-preview-label{font-size:11px;text-transform:uppercase;letter-spacing:1.5px;color:var(--gold);font-weight:600;}
.t2-preview-frame{position:relative;width:100%;max-width:280px;aspect-ratio:1;background:white;border:2px solid var(--border);border-radius:18px;overflow:hidden;}
.t2-preview-frame img{width:100%;height:100%;object-fit:cover;display:block;}
.t2-result-frame{background:linear-gradient(180deg,#FFFCF5 0%,#FDF3DC 100%);border-color:var(--gold-lt);}
.t2-result-frame img{object-fit:contain;}
.t2-result-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--muted);font-size:13px;text-align:center;padding:20px;}
.t2-result-emoji{font-size:42px;}
.t2-preview-arrow{font-size:42px;color:var(--gold);font-weight:300;}

/* Loading overlay on result frame */
.t2-loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:linear-gradient(180deg,#FFFCF5 0%,#FDF3DC 100%);}
.t2-spinner{width:40px;height:40px;border:3px solid rgba(200,134,42,.2);border-top-color:var(--gold);border-radius:50%;animation:t2-spin .8s linear infinite;}
@keyframes t2-spin{to{transform:rotate(360deg);}}
.t2-loading-text{font-size:13px;color:var(--soft);text-align:center;line-height:1.5;}
.t2-loading-text span{color:var(--muted);font-size:12px;}

/* Actions */
.t2-actions{text-align:center;padding-top:8px;}
.t2-generate-btn{display:inline-flex;align-items:center;gap:10px;background:var(--ink);border:none;color:white;padding:14px 28px;border-radius:99px;font-family:inherit;font-size:15px;font-weight:500;cursor:pointer;transition:all .25s cubic-bezier(.34,1.56,.64,1);box-shadow:0 6px 20px rgba(26,21,16,.18);}
.t2-generate-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 28px rgba(26,21,16,.25);background:var(--gold);}
.t2-generate-btn:disabled{opacity:.5;cursor:not-allowed;}
.t2-generate-arrow{transition:transform .2s;font-size:20px;}
.t2-generate-btn:hover:not(:disabled) .t2-generate-arrow{transform:translateX(4px);}
.t2-generate-hint{font-size:12px;color:var(--muted);margin-top:10px;}

/* Confirm card */
.t2-confirm-card{text-align:center;background:linear-gradient(180deg,#FFFCF5 0%,white 100%);border:1.5px solid var(--gold-lt);border-radius:18px;padding:28px 22px;}
.t2-confirm-icon{font-size:48px;margin-bottom:10px;}
.t2-confirm-title{font-family:'Fraunces',serif;font-size:22px;font-weight:500;color:var(--ink);margin-bottom:6px;letter-spacing:-0.3px;}
.t2-confirm-sub{font-size:14px;color:var(--soft);max-width:480px;margin:0 auto;line-height:1.55;}
.t2-confirm-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px;}
.t2-secondary-btn{background:white;border:1.5px solid var(--border2);color:var(--soft);padding:11px 20px;border-radius:99px;font-family:inherit;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;}
.t2-secondary-btn:hover{border-color:var(--ink);color:var(--ink);}
.t2-save-btn{display:inline-flex;align-items:center;gap:10px;background:var(--gold);border:none;color:white;padding:13px 24px;border-radius:99px;font-family:inherit;font-size:14px;font-weight:500;cursor:pointer;transition:all .25s cubic-bezier(.34,1.56,.64,1);box-shadow:0 6px 20px rgba(200,134,42,.25);}
.t2-save-btn:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(200,134,42,.35);}
.t2-save-btn strong{color:white;text-decoration:underline;text-decoration-color:rgba(255,255,255,.55);text-underline-offset:3px;}
.t2-save-arrow{transition:transform .2s;font-size:20px;}
.t2-save-btn:hover .t2-save-arrow{transform:translateX(4px);}
.t2-confirm-fineprint{font-size:12px;color:var(--muted);text-align:center;margin-top:14px;max-width:520px;margin-left:auto;margin-right:auto;}

/* Saved banner */
.t2-saved-banner{display:flex;align-items:center;gap:16px;background:linear-gradient(135deg,#FFFCF5 0%,#FDF3DC 100%);border:1.5px solid var(--gold-lt);border-radius:16px;padding:16px 20px;margin-bottom:20px;animation:tier-fadein .35s ease;}
.t2-saved-avatar{width:84px;height:84px;border-radius:50%;background:white;border:2px solid var(--gold);overflow:hidden;flex-shrink:0;box-shadow:0 4px 14px rgba(200,134,42,.30);}
.t2-saved-avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.t2-saved-info{flex:1;min-width:0;}
.t2-saved-label{font-size:11px;color:var(--gold);font-weight:600;letter-spacing:1px;text-transform:uppercase;margin-bottom:2px;}
.t2-saved-name{font-family:'Fraunces',serif;font-size:18px;color:var(--ink);font-weight:500;line-height:1.2;}
.t2-saved-meta{font-size:12px;color:var(--muted);margin-top:2px;}

/* Error state */
.t2-error{background:rgba(212,94,60,.08);border:1px solid rgba(212,94,60,.3);border-radius:12px;padding:12px 16px;color:var(--coral);font-size:13px;text-align:center;}

/* Dark mode */
[data-theme=dark] .t2-pricing-card{background:linear-gradient(135deg,#252018 0%,#2A2418 100%);}
[data-theme=dark] .t2-privacy-note{background:rgba(42,122,106,.10);border-color:rgba(42,122,106,.25);}
[data-theme=dark] .t2-upload-area{background:#1C1915;}
[data-theme=dark] .t2-tips{background:#1C1915;}
[data-theme=dark] .t2-preview-frame{background:#1C1915;}
[data-theme=dark] .t2-result-frame{background:linear-gradient(180deg,#252018 0%,#1C1915 100%);}
[data-theme=dark] .t2-confirm-card{background:linear-gradient(180deg,#252018 0%,#1C1915 100%);}
[data-theme=dark] .t2-saved-banner{background:linear-gradient(135deg,#252018 0%,#2A2418 100%);}


/* ════ ATELIER LAYOUT (v4) ════ */
/* ════════════════════════════════════════════════════════════════════
   ATELIER LAYOUT FIX — overrides the legacy .screen{max-width:800px}
   that was crushing the new 2-column layout into 800px on desktop.
   ONLY applies to #s1 (the create form). s2 (generating) and s3 (preview)
   keep their original 800px max-width — they don't have the atelier shell.
   ════════════════════════════════════════════════════════════════════ */
#s1.screen{
  max-width: 1280px;
  padding: 16px 0 80px;   /* atelier already has its own inner padding */
}
@media (max-width: 880px){
  #s1.screen{
    max-width: 100%;
    padding: 8px 0 60px;
  }
}

/* The atelier shell must take the FULL width of #s1 — no further constraint */
#s1 .atelier{
  width: 100%;
  max-width: 1280px;
}

/* Defensive: ensure the right column actually shows the book.
   The sticky+max-height combo had calc(100vh - 90px) which on a short
   viewport could collapse the column. Lock a sensible min-height. */
.atelier-right{
  min-height: 460px;
}
@media (max-width: 880px){
  .atelier-right{
    min-height: auto;
  }
}

/* Live book stage must have explicit dimensions and not collapse.
   (perspective + transform-style on the book require non-zero height.) */
.live-book-wrap{
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
}

/* The .lb-stage already has width/height, but make doubly sure with
   important — defensive against any future regression in legacy CSS. */
.lb-stage{
  display: block !important;
}

/* The .lb-book uses transform-style: preserve-3d. If a parent has
   overflow:hidden it can clip the 3D book. Guard the wrap. */
.live-book-wrap{
  overflow: visible !important;
}


/* ════════════════════════════════════════════════════════════════════
   ATELIER LAYOUT — Live Book Create Page (v4)
   2-column on desktop/laptop · stacked on tablet/mobile
   Preserves every form-card; adds sticky live book on the right.
   ════════════════════════════════════════════════════════════════════ */

/* Wrap the existing s1 content in a 2-column atelier shell */
.atelier{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 24px 80px;
  align-items: start;
}
@media (max-width: 1100px){
  .atelier{ grid-template-columns: 1fr 0.85fr; gap: 22px; padding: 20px 18px 60px; }
}
@media (max-width: 880px){
  .atelier{ grid-template-columns: 1fr; gap: 18px; padding: 14px 14px 56px; }
}

.atelier-left{ min-width: 0; }
.atelier-right{
  min-width: 0;
  position: sticky;
  top: 78px;
  align-self: start;
  max-height: calc(100vh - 90px);
}
@media (max-width: 880px){
  .atelier-right{
    position: relative;
    top: auto;
    z-index: 1;
    max-height: none;
    background: transparent;
    padding-bottom: 0;
    margin-bottom: 0;
  }
}

/* On mobile, the book sits ABOVE the form for instant emotional connection */
@media (max-width: 880px){
  .atelier{ grid-auto-flow: row; }
  .atelier-right{ order: 1; }
  .atelier-left { order: 2; }
}

/* Compact form cards in atelier mode */
.atelier .form-card{
  padding: 22px 22px 20px;
  border-radius: 18px;
  margin-bottom: 16px;
}
.atelier .form-card .card-h{ font-size: 24px; margin-bottom: 4px; }
.atelier .form-card .card-sub{ font-size: 13px; margin-bottom: 18px; }
.atelier .sec-hd{ margin: 16px 0 8px; padding-top: 14px; }
.atelier .sec-hd:first-of-type{ padding-top: 0; }
.atelier .fg{ gap: 12px; margin-bottom: 12px; }
.atelier .fl input,
.atelier .fl select,
.atelier .fl textarea{ padding: 10px 12px; font-size: 14px; }
.atelier .fl label{ font-size: 12px; }

@media (max-width: 880px){
  .atelier .form-card{ padding: 18px 16px 16px; border-radius: 16px; }
  .atelier .form-card .card-h{ font-size: 20px; }
}

/* ════════════════════════════════════════════════════════════════════
   LIVE BOOK — 3D realistic preview
   ════════════════════════════════════════════════════════════════════ */
.live-book-wrap{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 14px 22px;
  border-radius: 22px;
  background: linear-gradient(180deg, #FAF7F0 0%, #FDFAF4 100%);
  border: 1px solid var(--border);
  box-shadow: 0 2px 16px rgba(26,21,16,.04);
}
[data-theme=dark] .live-book-wrap{ background: linear-gradient(180deg,#1C1915 0%,#15120E 100%); border-color: rgba(255,255,255,.08); }

.lb-label{
  font-size: 10px;
  letter-spacing: 2.5px;
  color: var(--gold);
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.lb-label-pulse{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold);
  animation: lb-pulse-dot 1.8s ease-in-out infinite;
}
@keyframes lb-pulse-dot{
  0%,100%{ opacity: .35; transform: scale(.85); }
  50%{ opacity: 1; transform: scale(1.15); }
}

.lb-stage{
  position: relative;
  width: 240px;
  height: 380px;
  perspective: 1800px;
  perspective-origin: 50% 50%;
  margin: 0 auto;
}
@media (max-width: 480px){
  .lb-stage{ width: 220px; height: 348px; }
}

.lb-book{
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateY(-14deg);
  transition: transform .8s cubic-bezier(.4,.0,.2,1);
}
.lb-book.flipping{ pointer-events: none; }

/* Front cover (also acts as page 0) */
.lb-page{
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  border-radius: 4px 14px 14px 4px;
  background: var(--cream);
  transition: transform .85s cubic-bezier(.55,.0,.25,1);
  overflow: hidden;
}
.lb-page-back{
  position: absolute;
  inset: 0;
  border-radius: 4px 14px 14px 4px;
  background: var(--cream);
  transform: rotateY(180deg);
  backface-visibility: hidden;
  overflow: hidden;
}

/* The cover (front) — premium hardcover look */
.lb-cover{
  background: linear-gradient(135deg, var(--gold) 0%, #8B5A1F 100%);
  color: white;
  box-shadow:
    -3px 6px 32px rgba(26,21,16,.22),
    inset -10px 0 0 -6px rgba(255,255,255,.18),
    inset 0 0 0 1px rgba(0,0,0,.12);
}
.lb-cover::before{
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 16px;
  background: linear-gradient(90deg, #5C2E0A 0%, #8B5A1F 100%);
  border-radius: 4px 0 0 4px;
}
.lb-cover-spine-text{
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  pointer-events: none;
}
.lb-cover-spine-text span{
  transform: rotate(-90deg);
  white-space: nowrap;
  font-family: 'Fraunces', serif;
  font-size: 8px;
  color: var(--gold-pale);
  letter-spacing: 5px;
  font-weight: 400;
}
.lb-cover-inner{
  position: absolute;
  inset: 16px 16px 16px 28px;
  background: var(--cream);
  border-radius: 0 8px 8px 0;
  padding: 22px 18px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: var(--ink);
  overflow: hidden;
}
[data-theme=dark] .lb-cover-inner{ background: #FDFAF4; color: #1A1510; }

.lb-prelabel{
  font-family: 'Fraunces', serif;
  font-size: 9px;
  letter-spacing: 3px;
  color: var(--gold);
  font-weight: 400;
  margin-bottom: 6px;
  text-transform: uppercase;
}
.lb-title{
  font-family: 'Fraunces', serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.3px;
  margin-bottom: 2px;
}
.lb-title-name{
  font-family: 'Fraunces', serif;
  font-size: 26px;
  font-style: italic;
  font-weight: 400;
  color: var(--gold);
  margin-bottom: 12px;
  letter-spacing: -0.5px;
  line-height: 1;
  max-width: 100%;
  overflow-wrap: break-word;
}
.lb-cover-avatar{
  width: 124px;
  height: 124px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--gold-pale) 0%, #FFE0B5 100%);
  border: 2px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  transition: all .35s ease;
}
.lb-cover-avatar img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.lb-cover-avatar-placeholder{
  font-family: 'Fraunces', serif;
  font-size: 38px;
  color: var(--gold);
  opacity: .55;
  font-style: italic;
}
.lb-tagline{
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  color: var(--muted);
  line-height: 1.5;
  max-width: 170px;
  margin-bottom: 10px;
}
.lb-cover-footer{
  margin-top: auto;
  padding-top: 6px;
  font-family: 'Fraunces', serif;
  font-size: 10px;
  letter-spacing: 3.5px;
  color: var(--gold);
  font-weight: 400;
}

/* Cover colour-accent ribbon — appears when favourite colours picked */
.lb-cover-ribbon{
  position: absolute;
  left: 28px; right: 16px;
  top: 0;
  height: 6px;
  display: flex;
  z-index: 1;
}
.lb-cover-ribbon span{ flex: 1; }

/* Inside pages — cream paper */
.lb-page-inner{
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #FDFAF4 0%, #F5EFE3 100%);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  font-family: 'Fraunces', serif;
  overflow: hidden;
}
[data-theme=dark] .lb-page-inner{ background: #FDFAF4; color: #1A1510; }
.lb-page-inner::before{
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.08) 30%, rgba(0,0,0,.08) 70%, transparent 100%);
}

.lb-page-hd{
  font-size: 9px;
  letter-spacing: 3px;
  color: var(--gold);
  font-weight: 400;
  text-transform: uppercase;
  margin-bottom: 14px;
  text-align: center;
}
.lb-page-title{
  font-size: 18px;
  font-weight: 400;
  font-style: italic;
  color: var(--ink);
  text-align: center;
  margin-bottom: 18px;
  line-height: 1.25;
}
.lb-belongs-avatar{
  width: 100px; height: 100px;
  border-radius: 50%;
  background: var(--gold-pale);
  border: 2px solid var(--gold);
  margin: 0 auto 16px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  flex-shrink: 0;
}
.lb-belongs-avatar img{ width: 100%; height: 100%; object-fit: cover; }
.lb-belongs-name{
  font-size: 22px;
  font-style: italic;
  font-weight: 400;
  text-align: center;
  color: var(--gold);
  margin-bottom: 8px;
  letter-spacing: -0.3px;
  word-break: break-word;
}
.lb-belongs-line{
  text-align: center;
  font-size: 10px;
  color: var(--muted);
  font-family: 'DM Sans', sans-serif;
  letter-spacing: 1.5px;
  margin-top: 12px;
}
.lb-dedication{
  margin: auto 0;
  text-align: center;
  font-style: italic;
  font-size: 13px;
  line-height: 1.7;
  color: var(--soft);
  padding: 0 8px;
}
.lb-dedication-quote{
  font-family: 'Fraunces', serif;
  font-size: 36px;
  color: var(--gold);
  line-height: 0;
  display: block;
  margin-bottom: 6px;
}
.lb-chapter-body{
  flex: 1;
  font-size: 11.5px;
  line-height: 1.65;
  color: var(--soft);
  font-family: 'Fraunces', serif;
  overflow: hidden;
  position: relative;
}
.lb-chapter-body p{ margin-bottom: 8px; }
.lb-chapter-body.skeleton::after{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(0,0,0,.04) 0%,
    rgba(0,0,0,.04) 30%,
    rgba(0,0,0,.02) 60%,
    transparent 100%);
  pointer-events: none;
}
.lb-skel-line{
  height: 8px;
  background: rgba(26,21,16,.08);
  border-radius: 4px;
  margin-bottom: 8px;
  animation: lb-skel 1.6s ease-in-out infinite;
}
.lb-skel-line:nth-child(2){ width: 92%; animation-delay: .1s; }
.lb-skel-line:nth-child(3){ width: 84%; animation-delay: .2s; }
.lb-skel-line:nth-child(4){ width: 96%; animation-delay: .3s; }
.lb-skel-line:nth-child(5){ width: 70%; animation-delay: .4s; }
@keyframes lb-skel{ 0%,100%{ opacity: .5; } 50%{ opacity: .9; } }
.lb-page-number{
  position: absolute;
  bottom: 12px;
  left: 0; right: 0;
  text-align: center;
  font-size: 9px;
  color: var(--muted);
  font-family: 'DM Sans', sans-serif;
  letter-spacing: 2px;
}

/* Back cover */
.lb-backcover{
  background:
    linear-gradient(to top, rgba(12,6,2,.93) 0%, rgba(12,6,2,.62) 42%, rgba(0,0,0,.08) 100%),
    url('/images/cover-maya.jpg') center top/cover no-repeat;
  color: white;
  display: flex;
  flex-direction: column;
  padding: 20px 22px 26px;
  text-align: center;
  align-items: center;
  justify-content: flex-end;
}
.lb-backcover-quote{
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 14px;
  line-height: 1.55;
  color: var(--cream);
  margin-bottom: 18px;
  max-width: 170px;
}
.lb-backcover-mark{
  font-family: 'Fraunces', serif;
  font-size: 11px;
  letter-spacing: 4px;
  color: var(--gold-pale);
  margin-bottom: 6px;
}
.lb-backcover-sub{
  font-size: 9px;
  color: rgba(253,243,220,.7);
  letter-spacing: 1.5px;
  font-family: 'DM Sans', sans-serif;
}
.lb-isbn{
  margin-top: 14px;
  padding: 4px 8px;
  background: rgba(0,0,0,.15);
  border-radius: 3px;
  font-family: 'DM Sans', sans-serif;
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--gold-pale);
}

/* Navigation arrows */
.lb-nav{
  margin-top: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.lb-arrow{
  width: 36px; height: 36px;
  border-radius: 50%;
  background: white;
  border: 1.5px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 14px;
  color: var(--ink);
  font-family: inherit;
  transition: all .2s;
  position: relative;
  z-index: 2;
}
.lb-arrow:hover:not(:disabled){
  border-color: var(--gold);
  color: var(--gold);
  transform: scale(1.06);
}
.lb-arrow:disabled{
  opacity: .35;
  cursor: not-allowed;
}
.lb-arrow.pulse{
  animation: lb-arrow-pulse 1.6s ease-in-out infinite;
}
@keyframes lb-arrow-pulse{
  0%,100%{ transform: scale(1); box-shadow: 0 2px 8px rgba(200,134,42,.0); border-color: var(--gold); }
  50%{ transform: scale(1.12); box-shadow: 0 4px 14px rgba(200,134,42,.35); border-color: var(--gold); }
}
[data-theme=dark] .lb-arrow{ background: #1C1915; color: var(--gold-pale); border-color: rgba(255,255,255,.18); }

.lb-dots{
  display: flex;
  gap: 5px;
  align-items: center;
}
.lb-dot{
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(26,21,16,.20);
  transition: all .3s;
}
.lb-dot.active{
  width: 22px;
  border-radius: 3px;
  background: var(--gold);
}
[data-theme=dark] .lb-dot{ background: rgba(255,255,255,.20); }

.lb-pagelabel{
  margin-top: 10px;
  font-size: 11px;
  color: var(--muted);
  text-align: center;
}
.lb-hint{
  margin-top: 6px;
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  max-width: 220px;
  line-height: 1.55;
  margin-left: auto;
  margin-right: auto;
}

/* Reduced motion: smooth-slide fallback */
@media (prefers-reduced-motion: reduce){
  .lb-page,
  .lb-book{ transition: opacity .3s ease, transform .3s ease !important; }
}

/* ════════════════════════════════════════════════════════════════════
   "MAGICAL EXTRAS" — collapsed chips that expand on tap
   ════════════════════════════════════════════════════════════════════ */
.magic-chips-wrap{
  background: var(--gold-pale);
  border: 1px dashed rgba(200,134,42,.4);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 12px;
  transition: all .3s;
}
[data-theme=dark] .magic-chips-wrap{ background: rgba(200,134,42,.10); border-color: rgba(200,134,42,.3); }
.magic-chips-hd{
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--soft);
  margin-bottom: 8px;
  line-height: 1.4;
}
.magic-chips-hd-icon{ color: var(--gold); }
.magic-chips{
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.magic-chip{
  padding: 6px 11px;
  border-radius: 99px;
  background: white;
  border: 1px solid var(--border);
  font-family: inherit;
  font-size: 12px;
  color: var(--soft);
  cursor: pointer;
  transition: all .2s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.magic-chip:hover{
  border-color: var(--gold);
  color: var(--ink);
  background: var(--cream);
}
.magic-chip.active{
  border-color: var(--gold);
  background: var(--gold);
  color: white;
}
.magic-chip.active::before{ content: '✓ '; }
[data-theme=dark] .magic-chip{ background: #1C1915; }

/* Magic field reveal panels */
.magic-field-panel{
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  margin-top: 10px;
  display: none;
  animation: magic-reveal .3s ease;
}
.magic-field-panel.show{ display: block; }
@keyframes magic-reveal{ from{ opacity: 0; transform: translateY(-4px); } to{ opacity: 1; transform: translateY(0); } }
[data-theme=dark] .magic-field-panel{ background: #1C1915; border-color: rgba(255,255,255,.08); }

/* ════════════════════════════════════════════════════════════════════
   SHOW-MORE pattern (theme cards, lang pills, colours, avatars)
   ════════════════════════════════════════════════════════════════════ */
.show-more-link{
  display: block;
  margin: 8px auto 0;
  background: none;
  border: none;
  color: var(--gold);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  padding: 4px 10px;
  border-radius: 99px;
  transition: background .2s;
}
.show-more-link:hover{ background: var(--gold-pale); }

/* The compact 8-avatar default grid (shown before "Show all") */
.atelier #avatar-picker-card .ap-grid{
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  gap: 8px;
}
.atelier #avatar-picker-card.collapsed .ap-filters,
.atelier #avatar-picker-card.collapsed .ap-subfilters,
.atelier #avatar-picker-card.collapsed .ap-load-more{ display: none !important; }
.atelier #avatar-picker-card.collapsed .ap-grid > .ap-tile:nth-child(n+9){ display: none; }
.atelier #avatar-picker-card.collapsed .ap-grid-status{ display: none; }

/* Sticky CTA bar at bottom of left column on mobile */
.atelier .gen-wrap{
  position: sticky;
  bottom: 0;
  margin: 0 -22px -20px;
  padding: 14px 22px 18px;
  background: linear-gradient(180deg, rgba(253,250,244,0) 0%, var(--cream) 30%);
  z-index: 5;
}
[data-theme=dark] .atelier .gen-wrap{ background: linear-gradient(180deg, rgba(26,21,16,0) 0%, var(--ink) 30%); }
@media (max-width: 880px){
  .atelier .gen-wrap{
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    margin: 0;
    padding: 12px 0;
  }
}
.atelier .gen-wrap .btn-dark{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  font-size: 15px;
  border-radius: 99px;
  box-shadow: 0 6px 24px rgba(26,21,16,.20);
}
@media (max-width: 880px){
  .atelier .gen-wrap .btn-dark{ font-size: 14px; padding: 13px; }
}

/* ════════════════════════════════════════════════════════════════════
   COLLAPSED-BY-DEFAULT optional fields inside .atelier
   The Make-It-More-Magical card hides all .opt-* and .fancestry fields
   by default; chips reveal them with the .magic-revealed class.
   ════════════════════════════════════════════════════════════════════ */
.atelier #s1-magic-card .opt-child,
.atelier #s1-magic-card .opt-adult{
  display: none;
}
/* When audience matches and a field is revealed, show it */
.atelier #s1-magic-card .opt-child.magic-revealed,
.atelier.audience-adult #s1-magic-card .opt-adult.magic-revealed{
  display: flex;
  animation: magic-reveal .3s ease;
}
.atelier #s1-magic-card .opt-adult{ display: none; }
.atelier.audience-adult #s1-magic-card .opt-child{ display: none; }

/* Ancestry field collapsed by default (revealed by chip) */
.atelier #s1-magic-card .fl:has(#fancestry){ display: none; }
.atelier #s1-magic-card .fl.magic-revealed:has(#fancestry){
  display: block;
  animation: magic-reveal .3s ease;
}

/* Adult-vs-child chip visibility uses the existing audience-adult class on .atelier */
.atelier .magic-chip.opt-child{ display: inline-flex; }
.atelier .magic-chip.opt-adult{ display: none; }
.atelier.audience-adult .magic-chip.opt-child{ display: none; }
.atelier.audience-adult .magic-chip.opt-adult{ display: inline-flex; }

/* Colours stay visible — they paint the live cover */
.atelier #s1-magic-card .fl:has(#colour-swatches-wrap){ display: block !important; }


/* ════ WIZARD CSS (v5) ════ */
/* ════════════════════════════════════════════════════════════════════
   WIZARD CSS — 5-step flow with progress bar, hero cards, memory photos
   Replaces the prior atelier 2-column shell with a step-based wizard.
   ════════════════════════════════════════════════════════════════════ */

/* Override the legacy .screen{max-width:800px} for #s1 only */
#s1.screen{
  max-width: 1280px;
  padding: 0 0 80px;
}
@media (max-width: 880px){
  #s1.screen{ padding: 0 0 60px; }
}

/* ── Progress bar ──────────────────────────────────────────────────── */
.wiz-progress{
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(253, 250, 244, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  padding: 14px 20px;
}
[data-theme=dark] .wiz-progress{ background: rgba(26,21,16,0.92); }
.wiz-progress-inner{
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
}
.wiz-step-pill{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 99px;
  background: transparent;
  border: 1.5px solid transparent;
  font-family: inherit;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
}
.wiz-step-pill:hover:not(:disabled){
  background: var(--gold-pale);
  color: var(--ink);
}
.wiz-step-pill.active{
  background: var(--ink);
  color: white;
  border-color: var(--ink);
}
.wiz-step-pill.completed{
  color: var(--teal);
}
.wiz-step-pill.completed::after{
  content: ' ✓';
  font-weight: 600;
}
.wiz-step-pill:disabled{
  cursor: not-allowed;
  opacity: .55;
}
.wiz-step-num{
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(0,0,0,0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}
.wiz-step-pill.active .wiz-step-num{ background: var(--gold); color: white; }
.wiz-step-pill.completed .wiz-step-num{ background: var(--teal); color: white; }
.wiz-arrow-sep{
  color: var(--muted);
  font-size: 13px;
  user-select: none;
}
@media (max-width: 720px){
  .wiz-progress{ padding: 10px 12px; }
  .wiz-step-pill{ padding: 6px 8px; font-size: 11.5px; gap: 5px; }
  .wiz-step-label{ display: none; }
  .wiz-step-pill.active .wiz-step-label{ display: inline; }
  .wiz-arrow-sep{ font-size: 11px; }
}

/* ── Step container ────────────────────────────────────────────────── */
.wiz-step{
  display: none;
  animation: wiz-fadein .4s ease;
}
.wiz-step.active{ display: block; }
@keyframes wiz-fadein{
  from{ opacity: 0; transform: translateY(8px); }
  to{ opacity: 1; transform: translateY(0); }
}

.wiz-step-inner{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 28px 24px 0;
  align-items: start;
}
@media (max-width: 1080px){
  .wiz-step-inner{ grid-template-columns: 1.1fr 0.9fr; gap: 24px; padding: 22px 18px 0; }
}
@media (max-width: 880px){
  .wiz-step-inner{
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 16px 14px 0;
  }
}

/* Full-width steps (e.g. Step 2 — cards on their own page) */
.wiz-step-full{
  max-width: 1080px;
  margin: 0 auto;
  padding: 28px 24px 0;
}
@media (max-width: 880px){ .wiz-step-full{ padding: 18px 14px 0; } }

.wiz-left{ min-width: 0; }
.wiz-right{
  min-width: 0;
  position: sticky;
  top: 90px;
  align-self: start;
}
@media (max-width: 880px){
  .wiz-right{
    position: relative;
    top: auto;
    z-index: 1;
    order: 1;
    background: transparent;
    padding-bottom: 0;
    margin-bottom: 0;
  }
  .wiz-left{ order: 2; }
  .wiz-step-inner{ grid-auto-flow: row; }
}

/* ── Step header ───────────────────────────────────────────────────── */
.wiz-step-hd{
  margin-bottom: 18px;
}
.wiz-step-eyebrow{
  font-size: 11px;
  letter-spacing: 2.5px;
  color: var(--gold);
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.wiz-step-title{
  font-family: 'Fraunces', serif;
  font-size: 30px;
  font-weight: 300;
  letter-spacing: -0.7px;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 4px;
}
.wiz-step-title em{ color: var(--gold); font-style: italic; font-weight: 400; }
.wiz-step-sub{
  font-size: 14px;
  color: var(--soft);
  line-height: 1.55;
  max-width: 540px;
}
@media (max-width: 720px){
  .wiz-step-title{ font-size: 22px; }
  .wiz-step-sub{ font-size: 13px; }
}

/* ── Audience toggle ───────────────────────────────────────────────── */
.wiz-audience-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}
.wiz-aud-card{
  padding: 14px 16px;
  border: 1.5px solid var(--border2);
  background: white;
  border-radius: 14px;
  cursor: pointer;
  transition: all .2s;
  text-align: center;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
[data-theme=dark] .wiz-aud-card{ background: #1C1915; }
.wiz-aud-card:hover{ border-color: var(--gold); }
.wiz-aud-card.active{
  border-color: var(--gold);
  background: var(--gold-pale);
}
.wiz-aud-emoji{ font-size: 22px; }
.wiz-aud-title{ font-weight: 500; font-size: 14px; color: var(--ink); }
.wiz-aud-sub{ font-size: 11.5px; color: var(--muted); }

/* ── Field section labels ──────────────────────────────────────────── */
.wiz-sec{
  margin-bottom: 16px;
}
.wiz-sec-label{
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--gold);
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.wiz-fields{
  display: grid;
  gap: 12px;
}
.wiz-fields.row2{ grid-template-columns: 1fr 1fr; }
@media (max-width: 600px){ .wiz-fields.row2{ grid-template-columns: 1fr; } }

.wiz-fl{ display: flex; flex-direction: column; gap: 5px; }
.wiz-fl label{
  font-size: 12px;
  font-weight: 500;
  color: var(--soft);
}
.wiz-fl label .opt-tag{ color: var(--muted); font-weight: 400; }
.wiz-fl input,
.wiz-fl select,
.wiz-fl textarea{
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--border2);
  border-radius: 12px;
  background: white;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  transition: border-color .2s;
}
[data-theme=dark] .wiz-fl input,
[data-theme=dark] .wiz-fl select,
[data-theme=dark] .wiz-fl textarea{ background: #1C1915; }
.wiz-fl input:focus,
.wiz-fl select:focus,
.wiz-fl textarea:focus{ outline: none; border-color: var(--gold); }
.wiz-fl textarea{ resize: vertical; min-height: 80px; }

/* ── Magic chips (collapsed optional fields) ───────────────────────── */
.wiz-magic-wrap{
  background: var(--gold-pale);
  border: 1px dashed rgba(200,134,42,.4);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 20px;
}
[data-theme=dark] .wiz-magic-wrap{ background: rgba(200,134,42,.10); border-color: rgba(200,134,42,.3); }
.wiz-magic-hd{
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--soft);
  margin-bottom: 10px;
  line-height: 1.4;
}
.wiz-magic-chips{
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
.wiz-magic-chip{
  padding: 7px 13px;
  border-radius: 99px;
  background: white;
  border: 1px solid var(--border);
  font-family: inherit;
  font-size: 12.5px;
  color: var(--soft);
  cursor: pointer;
  transition: all .2s;
}
.wiz-magic-chip:hover{ border-color: var(--gold); color: var(--ink); }
.wiz-magic-chip.active{
  border-color: var(--gold);
  background: var(--gold);
  color: white;
}
.wiz-magic-chip.active::before{ content: '✓ '; }
[data-theme=dark] .wiz-magic-chip{ background: #1C1915; }

.wiz-magic-panels{
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}
.wiz-magic-panel{
  display: none;
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  animation: wiz-reveal .3s ease;
}
.wiz-magic-panel.show{ display: block; }
@keyframes wiz-reveal{ from{ opacity: 0; transform: translateY(-4px); } to{ opacity: 1; transform: translateY(0); } }
[data-theme=dark] .wiz-magic-panel{ background: #1C1915; border-color: rgba(255,255,255,.08); }

/* ── Step nav (Back / Continue buttons) ────────────────────────────── */
.wiz-step-nav{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}
.wiz-back-btn{
  background: none;
  border: none;
  font-family: inherit;
  font-size: 14px;
  color: var(--soft);
  cursor: pointer;
  padding: 10px 4px;
  transition: color .2s;
}
.wiz-back-btn:hover{ color: var(--ink); }
.wiz-back-btn.hidden{ visibility: hidden; }

.wiz-continue-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ink);
  color: white;
  border: none;
  padding: 13px 28px;
  border-radius: 99px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all .25s cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 6px 22px rgba(26,21,16,.18);
}
.wiz-continue-btn:hover:not(:disabled){
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(26,21,16,.28);
  background: var(--gold);
}
.wiz-continue-btn:disabled{
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
}
.wiz-continue-arrow{
  font-size: 18px;
  transition: transform .2s;
}
.wiz-continue-btn:hover:not(:disabled) .wiz-continue-arrow{ transform: translateX(4px); }

/* ── STEP 2 — 3 HERO CARDS (Tier 1 / 2 / 3) ───────────────────────── */
.wiz-tier-cards{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 24px;
}
.wiz-tier-cards.wiz-tier-cards-2{
  grid-template-columns: repeat(2, 1fr);
  max-width: 680px;
  gap: 28px;
}
@media (max-width: 880px){
  .wiz-tier-cards{ grid-template-columns: 1fr; gap: 16px; }
  .wiz-tier-cards.wiz-tier-cards-2{ max-width: 100%; }
}

.wiz-tier-card{
  position: relative;
  background: white;
  border: 1.5px solid var(--border);
  border-radius: 22px;
  padding: 32px 24px 26px;
  cursor: pointer;
  transition: all .3s cubic-bezier(.34,1.2,.64,1);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 320px;
}
[data-theme=dark] .wiz-tier-card{ background: #1C1915; border-color: rgba(255,255,255,.10); }
.wiz-tier-card:hover{
  border-color: var(--gold);
  transform: translateY(-4px);
  box-shadow: 0 14px 38px rgba(26,21,16,.10);
}
.wiz-tier-card.popular{
  border: 2px solid var(--gold);
  background: linear-gradient(180deg, #FFFCF5 0%, white 100%);
}
[data-theme=dark] .wiz-tier-card.popular{ background: linear-gradient(180deg, #252018 0%, #1C1915 100%); }
.wiz-tier-popular-badge{
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: white;
  font-size: 10px;
  letter-spacing: 1.5px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 99px;
  white-space: nowrap;
}
.wiz-tier-price{
  font-size: 11px;
  letter-spacing: 2px;
  font-weight: 600;
  margin-bottom: 14px;
  padding: 4px 12px;
  border-radius: 99px;
}
.wiz-tier-price.free{
  color: var(--teal);
  background: var(--teal-lt);
}
.wiz-tier-price.paid{
  color: var(--gold);
  background: var(--gold-pale);
}
.wiz-tier-icon{
  font-size: 48px;
  line-height: 1;
  margin-bottom: 14px;
}
.wiz-tier-title{
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.3px;
  margin-bottom: 8px;
  color: var(--ink);
}
.wiz-tier-desc{
  font-size: 13px;
  color: var(--soft);
  line-height: 1.55;
  margin-bottom: 18px;
  max-width: 220px;
}
.wiz-tier-features{
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12.5px;
  color: var(--soft);
  text-align: left;
  width: 100%;
  max-width: 240px;
}
.wiz-tier-features li{
  display: flex;
  align-items: flex-start;
  gap: 7px;
  line-height: 1.45;
}
.wiz-tier-features li::before{
  content: '✓';
  color: var(--gold);
  font-weight: 600;
  flex-shrink: 0;
}
.wiz-tier-cta{
  margin-top: auto;
  width: 100%;
  background: var(--ink);
  color: white;
  border: none;
  padding: 11px 22px;
  border-radius: 99px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all .2s;
}
.wiz-tier-card:hover .wiz-tier-cta{ background: var(--gold); }



/* ════════════════════════════════════════════════════════════════════
   MULTI-AVATAR SYSTEM (ma-*)
   ════════════════════════════════════════════════════════════════════ */

/* Summary banner after saves */
.ma-summary-banner{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,#FFFCF5 0%,#FDF3DC 100%);border:1.5px solid var(--gold-lt);border-radius:16px;padding:14px 18px;margin-bottom:20px;animation:tier-fadein .35s ease;}
.ma-summary-avatars{display:flex;flex-shrink:0;}
.ma-summary-avatars img{width:44px;height:44px;border-radius:50%;border:2px solid white;object-fit:cover;margin-left:-8px;box-shadow:0 2px 8px rgba(200,134,42,.20);}
.ma-summary-avatars img:first-child{margin-left:0;}
.ma-summary-info{flex:1;min-width:0;}
.ma-summary-label{font-size:11px;color:var(--gold);font-weight:600;letter-spacing:1px;text-transform:uppercase;margin-bottom:2px;}
.ma-summary-meta{font-family:'Fraunces',serif;font-size:16px;color:var(--ink);font-weight:500;}

/* Slot grid */
.ma-slots{display:flex;flex-direction:column;gap:16px;}

/* Individual slot card */
.ma-slot{border:1.5px solid var(--border);border-radius:20px;overflow:hidden;background:white;transition:border-color .2s,box-shadow .2s;}
.ma-slot.ma-slot-main{border-color:var(--gold-lt);background:linear-gradient(180deg,#FFFCF5 0%,white 100%);}
.ma-slot.ma-slot-saved{border-color:var(--gold);box-shadow:0 4px 18px rgba(200,134,42,.12);}
[data-theme=dark] .ma-slot{background:#1C1915;border-color:rgba(255,255,255,.10);}
[data-theme=dark] .ma-slot.ma-slot-main{background:linear-gradient(180deg,#252018 0%,#1C1915 100%);}

/* Slot header */
.ma-slot-header{display:flex;align-items:center;gap:12px;padding:16px 18px 14px;}
.ma-slot-emoji{font-size:26px;flex-shrink:0;line-height:1;}
.ma-slot-info{flex:1;min-width:0;}
.ma-slot-label{font-family:'Fraunces',serif;font-size:17px;font-weight:500;color:var(--ink);letter-spacing:-0.2px;}
.ma-slot-sublabel{font-size:12px;color:var(--soft);margin-top:1px;}
.ma-slot-badge{font-size:10px;font-weight:700;letter-spacing:1.2px;padding:4px 10px;border-radius:99px;flex-shrink:0;}
.ma-slot-badge.required{background:var(--gold-pale);color:var(--gold);}
.ma-slot-badge.optional{background:var(--cream);color:var(--soft);}
.ma-slot-badge.saved{background:rgba(42,122,106,.10);color:var(--teal);letter-spacing:.8px;}

/* Slot body — the upload/paint/result area */
.ma-slot-body{padding:0 18px 18px;}

/* Upload row: upload button + paint button side by side */
.ma-upload-row{display:flex;gap:10px;align-items:stretch;}
.ma-upload-btn{flex:1;display:flex;align-items:center;gap:10px;background:var(--cream);border:1.5px dashed var(--border2);border-radius:14px;padding:13px 16px;cursor:pointer;transition:all .2s;font-family:inherit;font-size:14px;color:var(--soft);}
.ma-upload-btn:hover{border-color:var(--gold);background:var(--gold-pale);color:var(--ink);}
.ma-upload-btn .ma-upload-icon{font-size:20px;flex-shrink:0;}
.ma-upload-btn .ma-upload-text{flex:1;text-align:left;line-height:1.3;}
.ma-upload-btn .ma-upload-name{font-weight:500;color:var(--ink);font-size:13px;display:block;}
.ma-upload-btn .ma-upload-hint{font-size:11px;color:var(--muted);display:block;margin-top:1px;}
.ma-paint-btn{display:inline-flex;align-items:center;gap:8px;background:var(--ink);border:none;color:white;padding:13px 18px;border-radius:14px;font-family:inherit;font-size:13.5px;font-weight:500;cursor:pointer;transition:all .25s cubic-bezier(.34,1.56,.64,1);white-space:nowrap;box-shadow:0 4px 14px rgba(26,21,16,.15);}
.ma-paint-btn:hover:not(:disabled){background:var(--gold);transform:translateY(-2px);box-shadow:0 8px 22px rgba(200,134,42,.28);}
.ma-paint-btn:disabled{opacity:.5;cursor:not-allowed;transform:none;background:#5a4f43;box-shadow:none;font-size:12.5px;letter-spacing:.1px;}
.ma-paint-btn .ma-paint-arrow{font-size:16px;transition:transform .2s;}
.ma-paint-btn:hover:not(:disabled) .ma-paint-arrow{transform:translateX(3px);}

/* Result area — shows painted watercolor */
.ma-result-area{margin-top:12px;display:none;}
.ma-result-area.visible{display:block;animation:tier-fadein .35s ease;}
.ma-result-row{display:flex;gap:14px;align-items:flex-start;}
.ma-result-frame{position:relative;width:110px;height:110px;flex-shrink:0;border-radius:14px;overflow:hidden;border:2px solid var(--gold-lt);background:linear-gradient(180deg,#FFFCF5 0%,#FDF3DC 100%);cursor:zoom-in;}
.ma-result-frame img{width:100%;height:100%;object-fit:cover;display:block;user-select:none;-webkit-user-drag:none;pointer-events:none;}
.ma-result-frame:hover .ma-zoom-overlay{opacity:1;}
.ma-zoom-overlay{position:absolute;inset:0;background:rgba(26,21,16,.45);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s;font-size:22px;color:white;pointer-events:none;}

/* Loading spinner inside result frame */
.ma-result-loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:linear-gradient(180deg,#FFFCF5 0%,#FDF3DC 100%);}
.ma-result-spinner{width:28px;height:28px;border:2.5px solid rgba(200,134,42,.2);border-top-color:var(--gold);border-radius:50%;animation:t2-spin .8s linear infinite;}
.ma-result-loading-text{font-size:11px;color:var(--muted);text-align:center;}

.ma-result-actions{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;justify-content:center;}
.ma-result-name{font-family:'Fraunces',serif;font-size:15px;color:var(--ink);font-weight:500;}
.ma-result-status{font-size:12px;color:var(--soft);}
.ma-save-btn{display:inline-flex;align-items:center;gap:8px;background:var(--gold);border:none;color:white;padding:10px 18px;border-radius:99px;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:all .25s cubic-bezier(.34,1.56,.64,1);box-shadow:0 4px 14px rgba(200,134,42,.22);width:fit-content;}
.ma-save-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(200,134,42,.35);}
.ma-repaint-btn{display:inline-flex;align-items:center;gap:6px;background:white;border:1.5px solid var(--border2);color:var(--soft);padding:8px 14px;border-radius:99px;font-family:inherit;font-size:12px;cursor:pointer;transition:all .2s;width:fit-content;}
.ma-repaint-btn:hover:not(:disabled){border-color:var(--ink);color:var(--ink);}
.ma-repaint-btn:disabled{opacity:.35;cursor:not-allowed;}
.ma-saved-tick{color:var(--teal);font-weight:600;font-size:13px;display:flex;align-items:center;gap:5px;}

/* Warning note for non-main slots */
.ma-no-repaint-note{font-size:11.5px;color:var(--muted);background:rgba(200,134,42,.05);border:1px solid rgba(200,134,42,.12);border-radius:8px;padding:7px 10px;margin-top:8px;line-height:1.4;}

/* Zoom lightbox */
.ma-lightbox{position:fixed;inset:0;z-index:99998;background:rgba(0,0,0,.82);display:flex;align-items:center;justify-content:center;animation:tier-fadein .2s ease;cursor:zoom-out;}
.ma-lightbox img{max-width:min(90vw,520px);max-height:min(90vh,520px);border-radius:18px;box-shadow:0 24px 64px rgba(0,0,0,.6);display:block;user-select:none;-webkit-user-drag:none;pointer-events:none;}
.ma-lightbox-close{position:absolute;top:22px;right:26px;color:white;font-size:28px;cursor:pointer;line-height:1;opacity:.7;transition:opacity .15s;background:none;border:none;}
.ma-lightbox-close:hover{opacity:1;}
.ma-lightbox-label{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.7);font-size:13px;letter-spacing:.5px;white-space:nowrap;}

/* Dark mode */
[data-theme=dark] .ma-upload-btn{background:#252018;border-color:rgba(255,255,255,.15);}
[data-theme=dark] .ma-result-frame{background:linear-gradient(180deg,#252018 0%,#1C1915 100%);}
[data-theme=dark] .ma-repaint-btn{background:#1C1915;border-color:rgba(255,255,255,.15);}
[data-theme=dark] .ma-no-repaint-note{background:rgba(200,134,42,.08);}

/* ── Tier-3 tab bar (Browse Gallery / Build from Scratch) ── */
.t3-tab-bar{
  display: flex;
  gap: 0;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--border);
}
.t3-tab{
  flex: 1;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  padding: 12px 18px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--soft);
  cursor: pointer;
  transition: all .2s;
  text-align: center;
  letter-spacing: 0.1px;
}
.t3-tab:hover{ color: var(--ink); }
.t3-tab.active{
  color: var(--gold);
  border-bottom-color: var(--gold);
  font-weight: 600;
}
[data-theme=dark] .t3-tab{ color: rgba(255,255,255,.5); }
[data-theme=dark] .t3-tab.active{ color: var(--gold); }

/* When a tier is chosen, this banner replaces the cards */
.wiz-tier-chosen-banner{
  display: none;
  align-items: center;
  gap: 14px;
  background: linear-gradient(135deg, #FFFCF5 0%, #FDF3DC 100%);
  border: 1.5px solid var(--gold-lt);
  border-radius: 16px;
  padding: 14px 18px;
  margin-bottom: 18px;
  animation: wiz-reveal .4s ease;
}
.wiz-tier-chosen-banner.show{ display: flex; }
.wiz-tier-chosen-icon{ font-size: 28px; }
.wiz-tier-chosen-info{ flex: 1; min-width: 0; }
.wiz-tier-chosen-label{ font-size: 11px; color: var(--gold); font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; }
.wiz-tier-chosen-name{ font-family: 'Fraunces', serif; font-size: 17px; color: var(--ink); margin-top: 2px; }
.wiz-tier-chosen-switch{
  background: white;
  border: 1.5px solid var(--border2);
  color: var(--soft);
  padding: 7px 14px;
  border-radius: 99px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}
.wiz-tier-chosen-switch:hover{ border-color: var(--ink); color: var(--ink); }

/* ── STEP 2 — ROLE FILTERS (replaces existing avatar picker filters) ── */
.wiz-role-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 7px;
  margin-bottom: 14px;
}
.wiz-role-pill{
  padding: 8px 10px;
  border: 1.5px solid var(--border2);
  border-radius: 99px;
  background: white;
  font-family: inherit;
  font-size: 12px;
  color: var(--soft);
  cursor: pointer;
  text-align: center;
  transition: all .2s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wiz-role-pill:hover{ border-color: var(--gold); color: var(--ink); }
.wiz-role-pill.active{
  background: var(--ink);
  color: white;
  border-color: var(--ink);
}
[data-theme=dark] .wiz-role-pill{ background: #1C1915; }

/* ── STEP 3 — Memory photos uploader ──────────────────────────────── */
.wiz-mem-wrap{
  margin-bottom: 22px;
}
.wiz-mem-drop{
  border: 2px dashed var(--border2);
  border-radius: 18px;
  padding: 38px 22px;
  text-align: center;
  cursor: pointer;
  background: var(--cream);
  transition: all .25s;
}
[data-theme=dark] .wiz-mem-drop{ background: #1C1915; }
.wiz-mem-drop:hover{ border-color: var(--gold); background: var(--gold-pale); }
.wiz-mem-drop.drag{ border-color: var(--gold); background: var(--gold-pale); transform: scale(1.005); }
.wiz-mem-drop.full{
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}
.wiz-mem-icon{ font-size: 42px; margin-bottom: 8px; }
.wiz-mem-title{ font-family: 'Fraunces', serif; font-size: 18px; color: var(--ink); margin-bottom: 4px; }
.wiz-mem-sub{ font-size: 13px; color: var(--muted); }
.wiz-mem-count{
  display: inline-block;
  margin-top: 6px;
  padding: 3px 10px;
  background: white;
  border-radius: 99px;
  font-size: 11px;
  color: var(--gold);
  font-weight: 600;
}

.wiz-mem-thumbs{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.wiz-mem-thumb{
  position: relative;
  aspect-ratio: 1;
  border-radius: 14px;
  overflow: hidden;
  background: var(--cream);
  border: 1.5px solid var(--border);
}
.wiz-mem-thumb img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.wiz-mem-thumb-remove{
  position: absolute;
  top: 6px; right: 6px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(0,0,0,.65);
  color: white;
  border: none;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
}
.wiz-mem-thumb-remove:hover{ background: var(--coral); }

.wiz-mem-privacy{
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--teal-lt);
  border: 1px solid rgba(42,122,106,.2);
  border-radius: 14px;
  padding: 12px 16px;
  margin-top: 14px;
}
.wiz-mem-privacy-icon{ font-size: 20px; flex-shrink: 0; }
.wiz-mem-privacy-text{ font-size: 12.5px; color: var(--soft); line-height: 1.55; }
.wiz-mem-privacy-text strong{ color: var(--teal); }

.wiz-mem-skip{
  text-align: center;
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--muted);
}
.wiz-mem-skip a{ color: var(--gold); cursor: pointer; }

/* ── STEP 4 — Theme cards (use existing theme-cards-wrap but adjust grid) ── */
.wiz-theme-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
@media (max-width: 720px){
  .wiz-theme-grid{ grid-template-columns: repeat(3, 1fr); gap: 8px; }
}
@media (max-width: 480px){
  .wiz-theme-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* ── STEP 5 — Language pills ──────────────────────────────────────── */
.wiz-lang-grid{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.wiz-lang-pill{
  padding: 10px 16px;
  border: 1.5px solid var(--border2);
  border-radius: 99px;
  background: white;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: all .2s;
  color: var(--soft);
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
[data-theme=dark] .wiz-lang-pill{ background: #1C1915; }
.wiz-lang-pill:hover{ border-color: var(--gold); color: var(--ink); }
.wiz-lang-pill.active{
  border-color: var(--gold);
  background: var(--gold-pale);
  color: var(--ink);
}
.wiz-lang-pill-native{ font-size: 16px; color: var(--ink); }
.wiz-lang-pill-name{ font-size: 11.5px; color: var(--muted); }
.wiz-lang-pill.active .wiz-lang-pill-name{ color: var(--gold); }
.wiz-lang-show-all{
  background: none;
  border: none;
  color: var(--gold);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  padding: 10px 4px;
  margin-left: 4px;
}

/* ── Hide festivals category from picker ──────────────────────────── */
.wiz-mode #ap-filter-festivals{ display: none !important; }

/* ── Final touch: make existing picker fit inside wizard step 2 ───── */
.wiz-mode #avatar-picker-card{
  border: none;
  padding: 0;
  background: transparent;
  box-shadow: none;
  margin: 0;
}
.wiz-mode #avatar-picker-card .ap-card-header{ display: none; }
.wiz-mode #avatar-picker-card .tier-grid{ display: none; }
.wiz-mode #avatar-picker-card .tier-panel{ background: transparent; padding: 0; box-shadow: none; }

/* ── Sticky CTA bar on mobile ─────────────────────────────────────── */
@media (max-width: 880px){
  .wiz-step-nav{
    position: sticky;
    bottom: 0;
    background: linear-gradient(180deg, transparent 0%, var(--cream) 30%);
    padding: 14px 14px 18px;
    margin: 28px -14px 0;
    z-index: 5;
    border-top: 1px solid var(--border);
  }
  [data-theme=dark] .wiz-step-nav{ background: linear-gradient(180deg, transparent 0%, var(--ink) 30%); }
  .wiz-continue-btn{ padding: 12px 22px; font-size: 14px; }
}



/* ─── */


      @keyframes kdFadeIn{from{opacity:0}to{opacity:1}}
      @keyframes kdBounce{0%{transform:scale(0) rotate(-15deg);opacity:0}55%{transform:scale(1.18) rotate(8deg)}100%{transform:scale(1) rotate(0);opacity:1}}
      @keyframes kdShimmer{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
      @keyframes kdGlow{0%,100%{box-shadow:0 0 24px rgba(201,168,92,0.3)}50%{box-shadow:0 0 36px rgba(201,168,92,0.55)}}
      .kd-confetti{position:absolute;width:8px;height:8px;border-radius:50%;animation:kdShimmer 2.4s ease-in-out infinite;}
    

/* ─── */


  /* ===== Privacy Receipt — responsive, clean, always-English ===== */
  @keyframes receipt-in{from{opacity:0;transform:scale(.94) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}
  #privacy-receipt-overlay .pr-card{
    background:#fff;border-radius:24px;width:100%;max-width:540px;
    max-height:92vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding:36px;box-shadow:0 24px 80px rgba(26,21,16,.28);
    animation:receipt-in .35s cubic-bezier(.34,1.56,.64,1);
    font-family:'Inter',system-ui,sans-serif;
  }
  #privacy-receipt-overlay .pr-head{text-align:center;margin-bottom:22px;}
  #privacy-receipt-overlay .pr-lock{
    width:60px;height:60px;background:linear-gradient(135deg,#E0F0EC,#2A7A6A);
    border-radius:50%;display:flex;align-items:center;justify-content:center;
    font-size:26px;margin:0 auto 14px;
  }
  #privacy-receipt-overlay .pr-title{
    font-family:'Fraunces',serif;font-size:25px;font-weight:300;
    letter-spacing:-.5px;margin:0 0 8px;color:#1A1510;line-height:1.15;
  }
  #privacy-receipt-overlay .pr-sub{
    font-size:14px;color:#7A6F62;line-height:1.55;margin:0 auto;max-width:42ch;
  }
  #privacy-receipt-overlay .pr-block{border-radius:14px;padding:18px 18px 16px;margin-bottom:16px;}
  #privacy-receipt-overlay .pr-block-green{background:#F4F8F6;}
  #privacy-receipt-overlay .pr-block-gold{background:#FDF6E6;border:1px solid rgba(200,134,42,.2);}
  #privacy-receipt-overlay .pr-label{
    font-size:11px;text-transform:uppercase;letter-spacing:1.8px;
    color:#C8862A;font-weight:600;margin-bottom:12px;
  }
  #privacy-receipt-overlay .pr-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
  #privacy-receipt-overlay .pr-list li{
    display:flex;align-items:flex-start;gap:11px;
    font-size:14px;line-height:1.5;color:#3D3529;
  }
  #privacy-receipt-overlay .pr-text{flex:1;min-width:0;}
  #privacy-receipt-overlay .pr-text strong{color:#1A1510;font-weight:600;}
  #privacy-receipt-overlay .pr-muted{color:#7A6F62;}
  #privacy-receipt-overlay .pr-tick{
    width:21px;height:21px;background:#E0F0EC;color:#2A7A6A;border-radius:50%;
    display:flex;align-items:center;justify-content:center;font-size:10px;
    font-weight:700;flex-shrink:0;margin-top:1px;
  }
  #privacy-receipt-overlay .pr-arrow{color:#C8862A;font-size:15px;flex-shrink:0;line-height:1.4;width:16px;text-align:center;}
  #privacy-receipt-overlay .pr-divider{padding-top:11px;border-top:1px solid rgba(200,134,42,.22);margin-top:3px;}
  #privacy-receipt-overlay .pr-note{
    font-size:12px;color:#7A6F62;text-align:center;line-height:1.55;margin:0 0 18px;
  }
  #privacy-receipt-overlay .pr-note a{color:#C8862A;text-decoration:none;font-weight:500;white-space:nowrap;}
  #privacy-receipt-overlay .pr-cta{
    width:100%;padding:15px;background:#1A1510;color:#fff;border:none;
    border-radius:100px;font-size:16px;font-weight:500;cursor:pointer;
    font-family:'Inter',sans-serif;transition:transform .15s,background .2s;
  }
  #privacy-receipt-overlay .pr-cta:hover{background:#2c2419;transform:translateY(-1px);}
  #privacy-receipt-overlay .pr-skip{
    text-align:center;font-size:12px;color:#7A6F62;margin:10px 0 0;cursor:pointer;
  }
  #privacy-receipt-overlay .pr-skip:hover{color:#3D3529;}

  /* Tablet */
  @media (max-width:680px){
    #privacy-receipt-overlay .pr-card{padding:28px 22px;border-radius:20px;}
    #privacy-receipt-overlay .pr-title{font-size:23px;}
  }
  /* Mobile */
  @media (max-width:430px){
    #privacy-receipt-overlay{padding:10px;}
    #privacy-receipt-overlay .pr-card{padding:22px 16px;border-radius:18px;max-height:94vh;}
    #privacy-receipt-overlay .pr-lock{width:52px;height:52px;font-size:22px;}
    #privacy-receipt-overlay .pr-title{font-size:21px;}
    #privacy-receipt-overlay .pr-sub{font-size:13px;}
    #privacy-receipt-overlay .pr-list li{font-size:13.5px;}
    #privacy-receipt-overlay .pr-block{padding:15px 14px;}
    #privacy-receipt-overlay .pr-cta{font-size:15px;padding:14px;}
  }

/* ═══ Multi-card s1 layout ═══ */
.s1-wrap{display:flex;flex-direction:column;gap:16px;}
.form-card{background:white;border:1px solid var(--border);border-radius:20px;padding:32px;box-shadow:0 2px 16px rgba(26,21,16,.06);}
.form-card-hd{display:flex;align-items:center;gap:10px;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--border);}
.form-card-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
.form-card-icon.gold{background:var(--gold-pale);color:var(--gold);}
.form-card-icon.teal{background:var(--teal-lt);color:var(--teal);}
.form-card-icon.warm{background:var(--warm);color:var(--soft);font-size:16px;}
.form-card-title{font-size:15px;font-weight:600;color:var(--ink);}
.form-card-sub{font-size:12px;color:var(--muted);margin-top:1px;}
/* Adult-only / child-only optional field visibility */
.opt-child{display:flex;}
.opt-adult{display:none;}
.audience-adult .opt-child{display:none;}
.audience-adult .opt-adult{display:flex;}
/* Photo smart info strip */
.photo-smart-strip{display:none;align-items:center;gap:12px;background:var(--teal-lt);border:1px solid rgba(42,122,106,.2);border-radius:10px;padding:12px 16px;margin-top:12px;}
.photo-smart-strip.show{display:flex;}
.photo-smart-strip span{font-size:13px;color:var(--teal);line-height:1.55;}
/* Language hint */
.lang-hint{font-size:12px;color:var(--muted);margin-top:6px;display:flex;align-items:center;gap:5px;}
/* Generate btn wrapper */
.gen-wrap{margin-top:4px;}
/* Responsive */
@media(max-width:560px){
  .form-card{padding:22px 18px;}
  .form-card-hd{margin-bottom:16px;padding-bottom:12px;}
}
[data-theme=dark] .form-card{background:#1C1915;border-color:rgba(255,255,255,.08);}
[data-theme=dark] .form-card-icon.gold{background:rgba(200,134,42,.15);}
[data-theme=dark] .form-card-icon.teal{background:rgba(42,122,106,.15);}
[data-theme=dark] .form-card-icon.warm{background:rgba(26,21,16,.4);}
[data-theme=dark] .photo-smart-strip{background:rgba(42,122,106,.1);border-color:rgba(42,122,106,.2);}

/* ═══ Admin bypass UI ═══ */
#admin-pill{position:fixed;top:72px;left:50%;transform:translateX(-50%);background:var(--gold);color:white;padding:5px 18px;border-radius:100px;font-size:12px;font-weight:600;z-index:199;display:none;box-shadow:0 2px 12px rgba(200,134,42,.35);white-space:nowrap;pointer-events:none;}
.admin-modal-overlay{position:fixed;inset:0;background:rgba(26,21,16,.72);z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px;}
.admin-modal-box{background:white;border-radius:20px;padding:32px;max-width:380px;width:100%;box-shadow:0 24px 64px rgba(0,0,0,.35);}
.admin-modal-title{font-family:'Fraunces',serif;font-size:22px;font-weight:300;color:var(--ink);margin-bottom:5px;}
/* ═══════════ CHARACTER GATE CTA ═══════════ */
.char-gate-card{background:linear-gradient(135deg,#FDF6E8 0%,#FBEFD6 100%);border:1px solid var(--border);border-radius:20px;padding:32px 28px;text-align:center;box-shadow:0 2px 16px rgba(26,21,16,.06);}
[data-theme=dark] .char-gate-card{background:linear-gradient(135deg,#221E18,#1A1712);border-color:rgba(255,255,255,.08);}
.char-gate-icon{font-size:36px;margin-bottom:8px;}
.char-gate-title{font-family:'Fraunces',serif;font-size:24px;font-weight:400;color:var(--ink);margin-bottom:6px;letter-spacing:-.4px;}
.char-gate-title em{font-style:italic;color:var(--gold);}
.char-gate-sub{font-size:14px;color:var(--soft);max-width:480px;margin:0 auto 24px;line-height:1.55;}
.char-gate-actions{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:680px;margin:0 auto 16px;}
@media(max-width:620px){.char-gate-actions{grid-template-columns:1fr;}}
.char-gate-btn{display:flex;flex-direction:column;align-items:center;gap:6px;padding:22px 18px;border:1.5px solid var(--border);border-radius:16px;background:white;cursor:pointer;font-family:'DM Sans',sans-serif;color:var(--ink);transition:all .18s;text-align:center;}
[data-theme=dark] .char-gate-btn{background:#1C1915;border-color:rgba(255,255,255,.1);color:var(--ink);}
.char-gate-btn:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:0 8px 22px rgba(200,134,42,.18);}
.char-gate-btn.primary{background:linear-gradient(135deg,#C8862A,#E0A647);color:white;border-color:transparent;}
.char-gate-btn.primary:hover{box-shadow:0 10px 28px rgba(200,134,42,.4);}
.char-gate-btn .cgb-icon{font-size:26px;margin-bottom:4px;}
.char-gate-btn .cgb-label{font-size:15px;font-weight:600;}
.char-gate-btn .cgb-sub{font-size:11.5px;opacity:.85;font-weight:400;}
.char-gate-btn.primary .cgb-sub{opacity:.95;}
.char-skip-btn{font-size:13px;color:var(--muted);background:none;border:none;cursor:pointer;font-family:'DM Sans',sans-serif;padding:8px 16px;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px;}
.char-skip-btn:hover{color:var(--soft);}

/* Mode toggle in studio header */
.cs-mode-toggle{background:var(--warm);border:1px solid var(--border);border-radius:8px;padding:7px 12px;font-size:12px;font-weight:500;color:var(--soft);cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .15s;white-space:nowrap;}
.cs-mode-toggle:hover{border-color:var(--gold);color:var(--gold);background:var(--gold-pale);}
[data-theme=dark] .cs-mode-toggle{background:#221E18;border-color:rgba(255,255,255,.1);}

/* Role picker dropdown */
.cs-role-select{width:100%;padding:9px 12px;border:1.5px solid var(--border);border-radius:9px;font-size:13px;font-family:'DM Sans',sans-serif;color:var(--ink);background:var(--cream);outline:none;margin-bottom:12px;cursor:pointer;}
.cs-role-select:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(200,134,42,.1);}
[data-theme=dark] .cs-role-select{background:#1C1915;border-color:rgba(255,255,255,.1);color:var(--ink);}

/* Name-only mode: simple text fields layout */
.cs-name-only{padding:0 28px 24px;}
.cs-name-only .nm-row{display:grid;grid-template-columns:140px 1fr;gap:12px;align-items:center;margin-bottom:12px;}
.cs-name-only .nm-row label{font-size:13px;color:var(--soft);font-weight:500;}
.cs-name-only .nm-row input,.cs-name-only .nm-row select{padding:10px 13px;border:1.5px solid var(--border);border-radius:9px;font-size:14px;font-family:'DM Sans',sans-serif;color:var(--ink);background:var(--cream);outline:none;}
.cs-name-only .nm-row input:focus,.cs-name-only .nm-row select:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(200,134,42,.1);background:white;}
[data-theme=dark] .cs-name-only .nm-row input,[data-theme=dark] .cs-name-only .nm-row select{background:#1C1915;border-color:rgba(255,255,255,.1);color:var(--ink);}

/* ═══════════ LANGUAGE GREETING PILLS ═══════════ */
.lang-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px;}
.lang-pill{display:inline-flex;align-items:center;gap:7px;padding:10px 16px;border:1.5px solid var(--border);border-radius:100px;background:var(--warm);cursor:pointer;font-size:14px;color:var(--ink);transition:all .15s;font-family:'DM Sans',sans-serif;user-select:none;}
.lang-pill:hover{border-color:var(--gold);background:white;transform:translateY(-1px);}
.lang-pill.sel{border-color:var(--gold);background:var(--gold-pale);color:var(--gold);font-weight:600;box-shadow:0 2px 8px rgba(200,134,42,.2);}
.lang-pill .lp-greet{font-weight:500;}
.lang-pill .lp-name{font-size:11px;color:var(--muted);}
.lang-pill.sel .lp-name{color:var(--gold);opacity:.8;}
.lang-pill.hidden{display:none;}
.lang-more-btn{font-size:13px;color:var(--gold);background:none;border:none;cursor:pointer;padding:8px 0;margin-top:8px;font-family:'DM Sans',sans-serif;font-weight:500;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px;}
.lang-more-btn:hover{opacity:.7;}
[data-theme=dark] .lang-pill{background:#221E18;border-color:rgba(255,255,255,.1);color:var(--ink);}

/* ═══════════ THEME BOOK-COVER CARDS ═══════════ */
/* Responsive grid:
   • Mobile (≤560px):  2 columns
   • Tablet  (561–1023px):  4 columns
   • Desktop (≥1024px): 3 columns (book-cover proportions stay readable) */
.theme-cards-wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:6px;}
@media (max-width: 1023px) and (min-width: 561px){
  .theme-cards-wrap{grid-template-columns:repeat(4,1fr);gap:12px;}
}
@media (max-width: 560px){
  .theme-cards-wrap{grid-template-columns:repeat(2,1fr);gap:10px;}
}
/* Premium book-mockup cards — square hardcover that floats off the page, with
   an elegant caption below (matches the home-page theme presentation). */
.theme-card{position:relative;display:flex;flex-direction:column;cursor:pointer;border:none;padding:0;background:transparent;text-align:center;transition:transform .35s cubic-bezier(.2,.8,.2,1);}
.theme-card .tc-cover{position:relative;width:100%;aspect-ratio:1/1;border-radius:12px;overflow:hidden;background-color:#888;background-size:cover;background-position:center;background-repeat:no-repeat;box-shadow:0 14px 30px -12px rgba(26,21,16,.26),0 24px 48px -18px rgba(26,21,16,.16);transition:box-shadow .35s,transform .35s;}
.theme-card:hover{transform:translateY(-7px);}
.theme-card:hover .tc-cover{box-shadow:0 22px 44px -12px rgba(26,21,16,.34),0 38px 70px -18px rgba(200,134,42,.18);}
.theme-card.sel .tc-cover{box-shadow:0 0 0 3px var(--gold),0 14px 30px -10px rgba(200,134,42,.42);}
.theme-card .tc-spine{position:absolute;top:0;left:0;bottom:0;width:6px;background:linear-gradient(to right,rgba(0,0,0,.32),rgba(0,0,0,0));}
.theme-card .tc-emoji{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:42px;filter:drop-shadow(0 3px 8px rgba(0,0,0,.3));pointer-events:none;opacity:0;transition:opacity .25s;}
/* Show emoji only when no background image (graceful fallback) */
.theme-card:not([data-theme-img]) .tc-emoji,
.theme-card[data-theme-img=""] .tc-emoji{opacity:1;}
.theme-card .tc-title{display:block;margin-top:11px;padding:0 2px;font-family:'Fraunces',serif;font-size:14px;font-weight:500;line-height:1.25;letter-spacing:.1px;color:var(--ink);}
.theme-card.sel .tc-title{color:var(--gold);}
.theme-card .tc-check{position:absolute;top:8px;right:8px;width:24px;height:24px;background:var(--gold);color:white;border-radius:50%;display:none;align-items:center;justify-content:center;font-size:14px;font-weight:700;box-shadow:0 2px 6px rgba(0,0,0,.3);z-index:2;}
.theme-card.sel .tc-check{display:flex;}
.theme-card.hidden{display:none;}
.theme-more-btn{font-size:13px;color:var(--gold);background:none;border:none;cursor:pointer;padding:10px 0 4px;margin-top:6px;font-family:'DM Sans',sans-serif;font-weight:500;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px;}
.theme-more-btn:hover{opacity:.7;}
.theme-selected-label{font-size:13px;color:var(--gold);margin-top:8px;font-weight:500;min-height:18px;}



/* ═══════ Autocomplete suggestions dropdown ═══════ */
.kd-ac-wrap{position:relative;}
.kd-ac-dropdown{position:absolute;left:0;right:0;top:calc(100% + 4px);background:white;border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 32px rgba(26,21,16,.15);max-height:280px;overflow-y:auto;z-index:50;display:none;}
[data-theme=dark] .kd-ac-dropdown{background:#1C1915;border-color:rgba(255,255,255,.1);}
.kd-ac-dropdown.show{display:block;animation:kdAcSlide .18s ease-out;}
@keyframes kdAcSlide{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:translateY(0);}}
.kd-ac-item{padding:10px 14px;font-size:13.5px;color:var(--ink);cursor:pointer;transition:background .12s;border-bottom:1px solid rgba(0,0,0,.04);display:flex;align-items:center;gap:8px;}
.kd-ac-item:last-child{border-bottom:none;}
.kd-ac-item:hover,.kd-ac-item.kd-ac-active{background:var(--gold-pale);color:var(--gold);}
[data-theme=dark] .kd-ac-item:hover,[data-theme=dark] .kd-ac-item.kd-ac-active{background:rgba(200,134,42,.15);color:var(--gold);}
.kd-ac-item .kd-ac-icon{font-size:14px;flex:none;opacity:.7;}
.kd-ac-item .kd-ac-text{flex:1;line-height:1.4;}
.kd-ac-hint{padding:8px 14px;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;background:var(--warm);border-bottom:1px solid var(--border);}
[data-theme=dark] .kd-ac-hint{background:#221E18;}

/* ═══════ Avatar studio v3 additions ═══════ */
.cs-presets-wrap{margin-bottom:24px;padding-bottom:20px;border-bottom:1px dashed var(--border);}
.cs-presets-label{font-size:11px;text-transform:uppercase;letter-spacing:1.5px;color:var(--gold);font-weight:600;margin-bottom:12px;}
.cs-presets-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
@media(max-width:680px){.cs-presets-grid{grid-template-columns:repeat(3,1fr);}}
.cs-preset{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;border:1.5px solid var(--border);border-radius:12px;background:var(--warm);cursor:pointer;transition:all .15s;}
.cs-preset:hover{border-color:var(--gold);background:white;transform:translateY(-2px);box-shadow:0 4px 12px rgba(200,134,42,.15);}
[data-theme=dark] .cs-preset{background:#221E18;}
.cs-preset-thumb{width:54px;height:64px;display:flex;align-items:flex-end;justify-content:center;}
.cs-preset-thumb svg{width:100%;height:100%;}
.cs-preset-name{font-size:10px;font-weight:500;color:var(--soft);text-align:center;line-height:1.2;}

/* Smaller emoji-pill variant for outfit/expression/accessory rows */
.cs-emoji-grid-small{gap:6px;}
.cs-emoji-grid-small .cs-emoji-pill{font-size:11px;padding:5px 9px;}
.cs-emoji-grid-small .cs-emoji-pill .em{font-size:13px;}

/* Themed scene background in the preview stage */
.cs-stage{background:linear-gradient(160deg,#FDF6E8 0%,#FBEFD6 100%);position:relative;}
.cs-stage::before{content:'';position:absolute;inset:0;background-image:
  radial-gradient(circle at 15% 25%,rgba(200,134,42,.08) 0%,transparent 30%),
  radial-gradient(circle at 85% 75%,rgba(247,114,169,.05) 0%,transparent 35%);
  pointer-events:none;border-radius:inherit;}
.cs-stage > *{position:relative;z-index:1;}
.cs-avatar-frame{width:220px;height:280px;border-radius:50%/45%;}
.cs-avatar-frame .kd-avatar-svg{width:100%;height:100%;}
.cs-cast-mini{width:54px;height:60px;}

/* Magical companion pills already handled by .cs-emoji-pill */


/* ═══════════════════════════════════════════════════════════════════
   KIDOORY DECORATIONS — Hand-crafted SVG ornaments + ambient magic
   Pure CSS animations, zero APIs, zero dependencies, never breaks
   ═══════════════════════════════════════════════════════════════════ */

/* —— Decorative SVG ornaments —— */
.kd-corner-orn{position:absolute;width:48px;height:48px;opacity:.55;pointer-events:none;z-index:2;}
.kd-corner-orn.tl{top:10px;left:10px;}
.kd-corner-orn.tr{top:10px;right:10px;transform:scaleX(-1);}
.kd-corner-orn.bl{bottom:10px;left:10px;transform:scaleY(-1);}
.kd-corner-orn.br{bottom:10px;right:10px;transform:scale(-1,-1);}

.kd-chapter-divider{display:flex;align-items:center;justify-content:center;gap:14px;margin:10px 0 14px;opacity:.7;}
.kd-chapter-divider .kd-cd-line{flex:1;height:1px;max-width:80px;background:linear-gradient(to right,transparent,#C8862A,transparent);}
.kd-chapter-divider .kd-cd-orn{flex:none;width:36px;height:18px;}

.kd-end-medallion{display:flex;flex-direction:column;align-items:center;gap:8px;margin:18px 0 4px;}
.kd-end-medallion svg{width:60px;height:60px;animation:kdMedallionGlow 4s ease-in-out infinite;}
@keyframes kdMedallionGlow{0%,100%{filter:drop-shadow(0 0 4px rgba(200,134,42,.3));}50%{filter:drop-shadow(0 0 14px rgba(200,134,42,.7));}}

/* —— Ken Burns: gentle zoom & pan on illustrations —— */
.flipbook-page.active .fp-left img{animation:kdKenBurns 22s ease-in-out infinite alternate;}
@keyframes kdKenBurns{
  0%{transform:scale(1) translate(0,0);}
  100%{transform:scale(1.06) translate(-1.5%,-1%);}
}

/* —— Soft sparkle drift on cover —— */
.kd-ambient{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:inherit;z-index:3;}
.kd-spark{position:absolute;width:4px;height:4px;border-radius:50%;background:radial-gradient(circle,#fff8d6 0%,rgba(255,221,120,.7) 40%,transparent 70%);filter:blur(.4px);animation:kdSparkDrift linear infinite;opacity:0;}
@keyframes kdSparkDrift{
  0%{transform:translateY(110%) translateX(0) scale(.5);opacity:0;}
  10%{opacity:1;}
  90%{opacity:1;}
  100%{transform:translateY(-20%) translateX(var(--kd-drift,15px)) scale(1);opacity:0;}
}

/* —— Theme: Space — twinkling stars + slow shooting star —— */
.kd-theme-space .kd-spark{background:radial-gradient(circle,#fff 0%,#a8c4ff 50%,transparent 70%);}
.kd-twinkle{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:0 0 6px #fff,0 0 12px rgba(255,255,255,.6);animation:kdTwinkle 3s ease-in-out infinite;}
@keyframes kdTwinkle{0%,100%{opacity:.2;transform:scale(.7);}50%{opacity:1;transform:scale(1.3);}}
.kd-shooting{position:absolute;width:80px;height:1.5px;background:linear-gradient(to right,transparent,#fff,transparent);transform:rotate(-25deg);opacity:0;animation:kdShoot 8s ease-out infinite;}
@keyframes kdShoot{
  0%,85%{opacity:0;transform:translate(-100px,-50px) rotate(-25deg);}
  90%{opacity:1;}
  100%{opacity:0;transform:translate(400px,200px) rotate(-25deg);}
}

/* —— Theme: Ocean / underwater — rising bubbles —— */
.kd-bubble{position:absolute;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.7),rgba(173,216,230,.3) 60%,transparent);border:1px solid rgba(255,255,255,.25);animation:kdBubbleRise linear infinite;}
@keyframes kdBubbleRise{
  0%{transform:translateY(110%) scale(.4);opacity:0;}
  10%{opacity:.7;}
  90%{opacity:.7;}
  100%{transform:translateY(-20%) scale(1) translateX(var(--kd-sway,20px));opacity:0;}
}

/* —— Theme: Princess / Fairy / Magic — drifting petals + glow —— */
.kd-petal{position:absolute;width:10px;height:14px;background:radial-gradient(ellipse,#FFB3D9 30%,#FF85B3 100%);border-radius:50% 0 50% 0;opacity:0;animation:kdPetalFall linear infinite;}
@keyframes kdPetalFall{
  0%{transform:translateY(-20%) rotate(0deg);opacity:0;}
  10%{opacity:.9;}
  90%{opacity:.9;}
  100%{transform:translateY(120%) rotate(720deg) translateX(var(--kd-sway,30px));opacity:0;}
}

/* —— Theme: Bedtime / Dreams — soft glowing moons & stars —— */
.kd-theme-bedtime .kd-spark{background:radial-gradient(circle,#FFF3B0 0%,#E0C870 50%,transparent 70%);width:5px;height:5px;}
.kd-theme-bedtime .kd-twinkle{box-shadow:0 0 10px #FFE0A0,0 0 20px rgba(255,200,120,.4);}

/* —— Theme: Christmas / Winter — falling snowflakes —— */
.kd-snowflake{position:absolute;color:#fff;font-size:14px;animation:kdSnowFall linear infinite;opacity:0;text-shadow:0 0 6px rgba(255,255,255,.6);}
@keyframes kdSnowFall{
  0%{transform:translateY(-15%) rotate(0deg);opacity:0;}
  10%{opacity:.85;}
  90%{opacity:.85;}
  100%{transform:translateY(120%) rotate(360deg) translateX(var(--kd-sway,15px));opacity:0;}
}

/* —— Theme: Forest / Fairies — fireflies —— */
.kd-firefly{position:absolute;width:5px;height:5px;border-radius:50%;background:#FFEE99;box-shadow:0 0 10px #FFE45C,0 0 20px rgba(255,228,92,.5);animation:kdFireflyFloat ease-in-out infinite;}
@keyframes kdFireflyFloat{
  0%,100%{opacity:.2;transform:translate(0,0);}
  25%{opacity:1;transform:translate(20px,-15px);}
  50%{opacity:.6;transform:translate(35px,8px);}
  75%{opacity:.9;transform:translate(10px,20px);}
}

/* —— Theme: Pirates / Adventure — warm dust motes —— */
.kd-theme-pirates .kd-spark{background:radial-gradient(circle,#FFE0A0 0%,#C8862A 50%,transparent 70%);}

/* —— Cover-specific premium glow —— */
.flipbook-page.cover-page .fp-left::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 30%,rgba(255,220,140,.18),transparent 65%);pointer-events:none;animation:kdCoverPulse 5s ease-in-out infinite;border-radius:inherit;z-index:2;}
@keyframes kdCoverPulse{0%,100%{opacity:.5;}50%{opacity:1;}}

/* —— Subtle page-curl shimmer on entry —— */
@keyframes kdPageCurl{
  0%{box-shadow:0 0 0 transparent;}
  50%{box-shadow:6px 0 18px rgba(200,134,42,.15);}
  100%{box-shadow:0 0 0 transparent;}
}
.flipbook-page.active{animation:kdPageCurl 1.2s ease-out;}

/* —— Respect motion preferences (accessibility) —— */
@media (prefers-reduced-motion:reduce){
  .flipbook-page.active .fp-left img,
  .kd-spark,.kd-twinkle,.kd-shooting,.kd-bubble,.kd-petal,
  .kd-snowflake,.kd-firefly,.flipbook-page.cover-page .fp-left::after,
  #s5-ring-wrap::before,.s5-ld-spark,.s5-emoji-pop,.s5-dot-pulse{
    animation:none !important;
  }
}

/* —— Step-5 "Creating your magical book" loading screen: premium ambient
   motion (soft ring glow, drifting sparkles, gentle text/emoji transitions).
   Reuses the same kdGlow/kdSparkDrift language as the flipbook cover so the
   whole site feels like one hand. Pure CSS — no new copy, no new languages. —— */
#s5-ring-wrap{position:relative;}
#s5-ring-wrap::before{
  content:'';position:absolute;inset:-16px;border-radius:50%;
  background:radial-gradient(circle,rgba(201,168,92,.32),transparent 70%);
  animation:kdGlow 2.6s ease-in-out infinite;pointer-events:none;z-index:0;
}
.s5-ld-spark{position:absolute;width:4px;height:4px;border-radius:50%;
  background:radial-gradient(circle,#fff8d6 0%,rgba(255,221,120,.8) 40%,transparent 70%);
  filter:blur(.3px);animation:kdSparkDrift linear infinite;opacity:0;pointer-events:none;z-index:1;}
#s5-emoji{display:inline-block;}
.s5-emoji-pop{animation:s5EmojiPop .5s cubic-bezier(.34,1.56,.64,1);}
@keyframes s5EmojiPop{0%{transform:scale(.5) rotate(-10deg);opacity:0;}60%{transform:scale(1.15) rotate(4deg);}100%{transform:scale(1) rotate(0);opacity:1;}}
.s5-txt-fade{animation:gen-tip-fade .45s ease;}
.s5-dot-pulse{animation:s5DotPulse .6s ease;}
@keyframes s5DotPulse{0%{box-shadow:0 0 0 0 rgba(201,168,92,.55);}100%{box-shadow:0 0 0 9px rgba(201,168,92,0);}}


/* PUSH 1 FIX — Premium first step */
.wiz-step-nav.wiz-step-nav-first { justify-content: flex-end; }
.wiz-step-nav.wiz-step-nav-first .wiz-continue-btn { margin-left: auto; min-width: 240px; }
.wiz-lang-show-all { display: none !important; }
.wiz-lang-more { display: grid !important; }
body.rtl .wiz-step-title em { font-style: normal; }
body.rtl .wiz-continue-arrow { transform: scaleX(-1); }


/* ═══════════════════════════════════════════════════════════════════════
   PUSH 1+2: Premium language dropdown at top of Character step
   ═══════════════════════════════════════════════════════════════════════ */
.kdy-lang-row {
  margin: 24px 0 32px;
  padding: 22px 24px;
  background: linear-gradient(135deg, #fffaf0 0%, #fff5e1 100%);
  border: 1.5px solid #d4b97a;
  border-radius: 18px;
  box-shadow: 0 4px 18px rgba(180, 145, 90, 0.10);
  position: relative;
  overflow: hidden;
}
.kdy-lang-row::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #c9a96e 0%, #f5c97a 50%, #c9a96e 100%);
}
.kdy-lang-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #8c6e3d;
  margin-bottom: 12px;
}
.kdy-lang-icon { font-size: 18px; }
.kdy-lang-select-wrap {
  position: relative;
  display: block;
}
.kdy-lang-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  padding: 16px 48px 16px 20px;
  font-size: 17px;
  font-weight: 600;
  font-family: inherit;
  background: white;
  color: #3d2b1f;
  border: 1.5px solid #d4b97a;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(180, 145, 90, 0.08);
}
.kdy-lang-select:hover {
  border-color: #b8923f;
  box-shadow: 0 4px 14px rgba(180, 145, 90, 0.18);
}
.kdy-lang-select:focus {
  outline: none;
  border-color: #b8923f;
  box-shadow: 0 0 0 3px rgba(212, 185, 122, 0.35);
}
.kdy-lang-chevron {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 10px;
  color: #b8923f;
  transition: transform 0.2s ease;
}
.kdy-lang-select:focus + .kdy-lang-chevron {
  transform: translateY(-50%) rotate(180deg);
}
.kdy-lang-hint {
  margin-top: 12px;
  font-size: 13px;
  color: #6e5236;
  font-style: italic;
  line-height: 1.5;
}
@media (max-width: 640px) {
  .kdy-lang-row { padding: 18px 16px; margin: 16px 0 24px; }
  .kdy-lang-select { padding: 14px 42px 14px 16px; font-size: 16px; }
  .kdy-lang-hint { font-size: 12px; }
}
/* RTL */
body.rtl .kdy-lang-select { padding: 16px 20px 16px 48px; }
body.rtl .kdy-lang-chevron { right: auto; left: 20px; }


/* ═══════════════════════════════════════════════════════════════════════
   PUSH 2 — Premium oval magic cards + book name field
   ═══════════════════════════════════════════════════════════════════════ */
.kdy-book-icon {
  display: inline-block;
  margin-right: 6px;
  font-size: 16px;
  vertical-align: -2px;
}

.kdy-magic-grid-wrap {
  margin: 28px 0 12px;
  padding: 24px;
  background: linear-gradient(180deg, #fff9ec 0%, #fffaf3 100%);
  border-radius: 22px;
  border: 1px solid #e8d8b6;
  position: relative;
}
.kdy-magic-grid-wrap::before {
  content: '';
  position: absolute;
  top: -1px; left: 24px; right: 24px;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #c9a96e 30%, #f5c97a 50%, #c9a96e 70%, transparent 100%);
  border-radius: 2px;
}

.kdy-magic-intro {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  font-size: 14px;
  color: #6e5236;
  font-weight: 500;
}
.kdy-magic-intro-icon {
  font-size: 20px;
}

.kdy-magic-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.kdy-magic-card {
  background: #ffffff;
  border-radius: 28px;
  padding: 16px 20px;
  border: 1.5px solid #ead7b0;
  box-shadow: 0 2px 6px rgba(180, 145, 90, 0.04);
  transition: all 0.22s cubic-bezier(.4, 0, .2, 1);
  position: relative;
  overflow: hidden;
}
.kdy-magic-card:hover {
  border-color: #c9a96e;
  box-shadow: 0 6px 20px rgba(180, 145, 90, 0.14);
  transform: translateY(-1px);
}
.kdy-magic-card:focus-within {
  border-color: #b8923f;
  box-shadow: 0 0 0 3px rgba(212, 185, 122, 0.30);
}

.kdy-magic-card .kdy-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.kdy-magic-card .kdy-card-emoji {
  font-size: 18px;
  line-height: 1;
}
.kdy-magic-card .kdy-card-label {
  font-size: 13px;
  font-weight: 600;
  color: #6e5236;
  letter-spacing: 0.2px;
  margin: 0;
}

.kdy-magic-card .kdy-card-input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #f0e3c7;
  border-radius: 14px;
  background: #fffdf7;
  font-size: 14px;
  font-family: inherit;
  color: #3d2b1f;
  transition: all 0.18s ease;
}
.kdy-magic-card .kdy-card-input:focus {
  outline: none;
  border-color: #c9a96e;
  background: #ffffff;
}
.kdy-magic-card .kdy-card-input::placeholder {
  color: #b8a07e;
  opacity: 0.6;
}

/* Audience visibility — JS toggles body.audience-adult class */
body:not(.audience-adult) .kdy-card-adult { display: none; }
body.audience-adult .kdy-card-child { display: none; }

/* Progressive disclosure — extra "magic" fields stay hidden until the
   "✨ Add more magic" button is tapped (keeps step-1 light, less overwhelming).
   When .show-extra is set, the existing audience rules above still govern which
   cards actually appear, so child/adult logic is untouched. */
.kdy-magic-grid:not(.show-extra) .kdy-card-extra { display: none !important; }
.kdy-more-magic {
  display: block; margin: 14px auto 2px; background: transparent;
  border: 1px dashed var(--gold, #C8862A); color: var(--gold, #C8862A);
  font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 500;
  padding: 11px 24px; border-radius: 100px; cursor: pointer;
  transition: background .2s, border-color .2s;
}
.kdy-more-magic:hover { background: var(--gold-pale, #FDF3DC); border-style: solid; }
.kdy-magic-grid.show-extra ~ .kdy-more-magic { display: none; }

/* Mobile: 2 columns, smaller padding */
@media (max-width: 640px) {
  .kdy-magic-grid-wrap { padding: 18px 14px; margin: 22px 0 12px; }
  .kdy-magic-grid { gap: 10px; grid-template-columns: 1fr; }
  .kdy-magic-card { padding: 14px 16px; border-radius: 22px; }
  .kdy-magic-card .kdy-card-input { padding: 9px 12px; font-size: 14px; }
}

/* Tablet+: 2 cols (form area is constrained by book preview, so 2 cols max) */
@media (min-width: 641px) {
  .kdy-magic-grid { grid-template-columns: repeat(2, 1fr); }
}

/* RTL */
body.rtl .kdy-magic-grid { direction: rtl; }
body.rtl .kdy-card-head { direction: rtl; }


/* ── PUSH FINAL POLISH ── */
.kdy-magic-card .kdy-card-input {
  padding: 12px 16px;
  font-size: 14.5px;
}
.kdy-magic-card .kdy-card-input::placeholder {
  font-size: 13.5px;
  color: #b8a07e;
  opacity: 0.85;
  font-style: italic;
}
.kdy-magic-card {
  padding: 18px 20px;
}
.kdy-magic-card .kdy-card-label {
  font-size: 14px;
}
@media (min-width: 1100px) {
  .kdy-magic-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   PUSH 3 v2 — Open-book preview (book stays centered, stage gets wider sides)
   + bottom-spanning Continue button
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Continue button — spans both columns at the bottom ── */
.wiz-step-nav.wiz-step-nav-bottom {
  /* All screens: left-aligned below the form */
  margin-top: 20px;
  padding: 18px 0 8px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 14px;
}
.wiz-step-nav-bottom .wiz-back-btn:not(.hidden) {
  margin-right: auto;
}
.wiz-step-nav-bottom .wiz-continue-btn {
  /* Wider, prominent, left-aligned under form column */
  min-width: 320px;
  padding: 16px 40px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 999px;
  box-shadow: 0 8px 28px rgba(26,21,16,.22);
  letter-spacing: 0.2px;
  margin: 0;
}
.wiz-step-inner > .wiz-step-nav-bottom .wiz-continue-btn:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 36px rgba(26,21,16,.28);
}

.wiz-step-inner > .wiz-step-nav-bottom.wiz-step-nav-first {
  justify-content: center;
}

/* ── OPEN-BOOK PREVIEW — stage wider on both sides, book stays centered ── */
.live-book-wrap {
  max-width: 560px !important;
  padding: 24px 26px 28px !important;
  position: relative;
}

/* Stage becomes a wider "spread" container — book sits centered, with
   decorative LEFT page rendered as a pseudo-element to the left of the book. */
.lb-stage {
  width: 480px !important;
  height: 320px !important;
  perspective: 2200px !important;
  position: relative;
  /* Use a flex layout so the book naturally sits on the right of the spine */
  display: flex !important;
  align-items: stretch;
  justify-content: flex-end;
  padding-left: 248px;  /* leave room for the decorative left page */
}

/* The actual book — restore original positioning (relative to flex container) */
.lb-book {
  position: relative !important;
  width: 232px;
  height: 320px;
  inset: auto !important;
  transform-style: preserve-3d;
  transform: rotateY(-4deg) !important;  /* gentle open-book tilt */
}

/* Pages inside the book keep their original inset:0 → fill the book area */

/* DECORATIVE LEFT-SIDE PAGE — visible "previous page" of the open book */
.lb-stage::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 0;
  width: 232px;
  height: 320px;
  background: linear-gradient(135deg, #FDFAF4 0%, #F5EFE3 100%);
  border-radius: 14px 4px 4px 14px;
  box-shadow:
    -2px 4px 18px rgba(26,21,16,.10),
    inset -8px 0 14px -10px rgba(0,0,0,.18);
  background-image:
    linear-gradient(135deg, #FDFAF4 0%, #F5EFE3 100%),
    repeating-linear-gradient(0deg, rgba(180,150,100,.04) 0px, rgba(180,150,100,.04) 1px, transparent 1px, transparent 36px);
  z-index: 1;
}

/* CENTER SPINE — binding between the two pages */
.lb-stage::after {
  content: '';
  position: absolute;
  left: 240px;  /* between left page (8 + 232 = 240) and right book */
  top: 6px;
  bottom: 6px;
  width: 4px;
  background: linear-gradient(90deg,
    rgba(0,0,0,0) 0%,
    rgba(101,73,38,.32) 35%,
    rgba(101,73,38,.45) 50%,
    rgba(101,73,38,.32) 65%,
    rgba(0,0,0,0) 100%);
  border-radius: 2px;
  z-index: 60;
  pointer-events: none;
}

[data-theme=dark] .lb-stage::before {
  background: linear-gradient(135deg, #2a2218 0%, #1f1a13 100%);
  box-shadow:
    -2px 4px 18px rgba(0,0,0,.30),
    inset -8px 0 14px -10px rgba(0,0,0,.50);
}
[data-theme=dark] .lb-stage::after {
  background: linear-gradient(90deg,
    rgba(0,0,0,0) 0%,
    rgba(255,255,255,.10) 35%,
    rgba(255,255,255,.18) 50%,
    rgba(255,255,255,.10) 65%,
    rgba(0,0,0,0) 100%);
}

/* ── Responsive sizing ── */
@media (max-width: 1080px) {
  .lb-stage { width: 420px !important; height: 290px !important; padding-left: 218px; }
  .lb-stage::before { width: 210px; height: 290px; left: 4px; }
  .lb-stage::after { left: 214px; }
  .lb-book { width: 206px; height: 290px; }
  
}

@media (max-width: 720px) {
  .live-book-wrap { max-width: 420px !important; padding: 18px 14px 22px !important; }
  .lb-stage { width: 380px !important; height: 260px !important; padding-left: 196px; }
  .lb-stage::before { width: 188px; height: 260px; left: 4px; border-radius: 10px 3px 3px 10px; }
  .lb-stage::after { left: 192px; }
  .lb-book { width: 184px; height: 260px; }
  .wiz-step-inner > .wiz-step-nav-bottom { padding: 22px 0 8px; margin-top: 24px; }
  .wiz-step-inner > .wiz-step-nav-bottom .wiz-continue-btn {
    min-width: 0; width: 100%; max-width: 320px; padding: 14px 24px;
  }
}

@media (max-width: 480px) {
  .live-book-wrap { max-width: 340px !important; padding: 14px 10px 18px !important; }
  .lb-stage { width: 308px !important; height: 220px !important; padding-left: 158px; }
  .lb-stage::before { width: 150px; height: 220px; left: 4px; }
  .lb-stage::after { left: 154px; }
  .lb-book { width: 150px; height: 220px; }
}

/* RTL — mirror so the book is on the left, decorative page on right */
body.rtl .lb-stage { justify-content: flex-start; padding-left: 0; padding-right: 248px; }
body.rtl .lb-book { transform: rotateY(4deg) !important; }
body.rtl .lb-stage::before { left: auto; right: 8px; border-radius: 4px 14px 14px 4px; box-shadow: 2px 4px 18px rgba(26,21,16,.10), inset 8px 0 14px -10px rgba(0,0,0,.18); }
body.rtl .lb-stage::after { left: auto; right: 240px; }


/* PUSH 3 — Make sure Continue button appears LAST on stacked mobile layout */
@media (max-width: 1080px) {
  .wiz-step-inner > .wiz-step-nav.wiz-step-nav-bottom { order: 3; }
}



/* On stacked layouts (tablet + mobile), Continue spans full width again */
@media (max-width: 1080px) {
  .wiz-step-inner > .wiz-step-nav.wiz-step-nav-bottom {
    grid-column: 1 / -1 !important;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
  }
}



/* PUSH-i18n: Hide empty heading suffix spans (multi-language support) */
span[data-i18n$=".heading_suffix"]:empty,
span[data-i18n$=".heading_prefix"]:empty {
  display: none !important;
}

/* ── i18n fix v20251204c: ensure Continue button never overlaps book preview ── */
.wiz-right { padding-bottom: 32px; }
@media (max-width: 880px){
  .wiz-step-nav { position: static !important; bottom: auto !important; margin: 28px 0 0 !important; }
  .wiz-step-nav.wiz-step-nav-bottom { padding-top: 24px !important; }
}

/* ════════════════════════════════════════════════════════════════════
   DESIGN YOUR OWN — picker overlay + summary banner (mirrors ma-*)
   ════════════════════════════════════════════════════════════════════ */

/* Summary banner — visually identical to ma-summary-banner */
.dy-summary-banner{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,#FFFCF5 0%,#FDF3DC 100%);border:1.5px solid var(--gold-lt);border-radius:16px;padding:14px 18px;margin-bottom:20px;animation:tier-fadein .35s ease;}
.dy-summary-avatars{display:flex;flex-shrink:0;}
.dy-summary-avatars img{width:44px;height:44px;border-radius:50%;border:2px solid white;object-fit:cover;margin-left:-8px;box-shadow:0 2px 8px rgba(200,134,42,.20);background:white;}
.dy-summary-avatars img:first-child{margin-left:0;}
.dy-summary-info{flex:1;min-width:0;}
.dy-summary-label{font-size:11px;color:var(--gold);font-weight:600;letter-spacing:1px;text-transform:uppercase;margin-bottom:2px;}
.dy-summary-meta{font-family:'Fraunces',serif;font-size:16px;color:var(--ink);font-weight:500;}

/* Picker overlay */
.dy-picker{position:fixed;inset:0;z-index:99999;background:rgba(20,16,11,.78);display:flex;align-items:center;justify-content:center;padding:20px;animation:tier-fadein .2s ease;}
.dy-picker-inner{background:#FCF8EE;border-radius:24px;width:min(900px,100%);max-height:88vh;display:flex;flex-direction:column;box-shadow:0 32px 80px rgba(0,0,0,.5);overflow:hidden;}
[data-theme=dark] .dy-picker-inner{background:#1C1915;}

.dy-picker-header{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:20px 24px 14px;border-bottom:1px solid rgba(200,134,42,.18);}
.dy-picker-title{font-family:'Fraunces',serif;font-size:20px;font-weight:500;color:var(--ink);letter-spacing:-0.3px;line-height:1.2;}
.dy-picker-count{font-size:12px;color:var(--muted);margin-top:3px;letter-spacing:.3px;}
.dy-picker-close{background:white;border:1.5px solid var(--border2);color:var(--soft);width:36px;height:36px;border-radius:50%;font-size:16px;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.dy-picker-close:hover{border-color:var(--ink);color:var(--ink);transform:rotate(90deg);}
[data-theme=dark] .dy-picker-close{background:#252018;border-color:rgba(255,255,255,.15);}

.dy-picker-searchbar{padding:14px 24px;border-bottom:1px solid rgba(200,134,42,.12);}
.dy-picker-searchbar input{width:100%;background:white;border:1.5px solid var(--border2);border-radius:99px;padding:10px 18px;font-family:inherit;font-size:14px;color:var(--ink);transition:border-color .2s;}
.dy-picker-searchbar input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(200,134,42,.12);}
[data-theme=dark] .dy-picker-searchbar input{background:#252018;border-color:rgba(255,255,255,.15);}

.dy-picker-grid{flex:1;overflow-y:auto;padding:18px 24px 24px;display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;}
@media (max-width:560px){.dy-picker-grid{grid-template-columns:repeat(auto-fill,minmax(95px,1fr));gap:8px;padding:14px 16px 20px;}}

.dy-picker-tile{background:white;border:2px solid var(--border);border-radius:14px;padding:8px;cursor:pointer;transition:all .2s cubic-bezier(.34,1.56,.64,1);overflow:hidden;aspect-ratio:1;display:flex;align-items:center;justify-content:center;}
.dy-picker-tile:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:0 8px 22px rgba(200,134,42,.18);}
.dy-picker-tile img{width:100%;height:100%;object-fit:contain;display:block;}
[data-theme=dark] .dy-picker-tile{background:#252018;border-color:rgba(255,255,255,.10);}

.dy-picker-empty{grid-column:1/-1;text-align:center;padding:40px 20px;color:var(--muted);font-size:14px;}

/* "Show more" — pages the avatar grid in instead of rendering 80+ tiles at once */
.dy-picker-more{grid-column:1/-1;display:block;margin:8px auto 4px;background:white;border:1.5px solid var(--border);color:var(--soft);padding:10px 22px;border-radius:99px;font-family:inherit;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;}
.dy-picker-more:hover{border-color:var(--gold);color:var(--ink);background:var(--gold-pale);}
[data-theme=dark] .dy-picker-more{background:#252018;border-color:rgba(255,255,255,.15);}

/* Mobile: full-screen picker */
@media (max-width:560px){
  .dy-picker{padding:0;}
  .dy-picker-inner{max-height:100vh;height:100vh;border-radius:0;}
  .dy-picker-header{padding:16px 18px 12px;}
  .dy-picker-title{font-size:17px;}
}


/* ── Design Your Own — picker loader (shown briefly while images load) ── */
.dy-loader-wrap{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:60px 20px 80px;transition:opacity .25s ease;position:relative;}
.dy-loader-wrap.dy-loader-fade{opacity:0;}
.dy-loader-ring{width:52px;height:52px;border:3px solid rgba(200,134,42,.12);border-top-color:var(--gold);border-right-color:var(--gold);border-radius:50%;animation:dy-loader-spin 1s cubic-bezier(.5,0,.5,1) infinite;position:relative;z-index:1;}
@keyframes dy-loader-spin{to{transform:rotate(360deg);}}
.dy-loader-text{font-family:'Fraunces',serif;font-size:15px;color:var(--muted);letter-spacing:.2px;font-style:italic;animation:dy-loader-pulse 1.6s ease-in-out infinite;}
@keyframes dy-loader-pulse{0%,100%{opacity:.55;}50%{opacity:1;}}
/* ── Twinkling stars around the spinner ── */
.dy-loader-stars{position:absolute;width:140px;height:140px;top:50%;left:50%;margin-top:-100px;margin-left:-70px;animation:dy-stars-rotate 5s linear infinite;pointer-events:none;}
@keyframes dy-stars-rotate{to{transform:rotate(360deg);}}
.dy-star{position:absolute;color:var(--gold,#C8862A);animation:dy-star-twinkle 1.4s ease-in-out infinite;font-size:16px;text-shadow:0 0 8px rgba(200,134,42,.5);}
.dy-s1{top:0;left:50%;transform:translateX(-50%);animation-delay:0s;font-size:18px;}
.dy-s2{top:22%;right:0;animation-delay:.28s;font-size:12px;}
.dy-s3{bottom:0;left:50%;transform:translateX(-50%);animation-delay:.56s;font-size:16px;}
.dy-s4{top:22%;left:0;animation-delay:.84s;font-size:12px;}
.dy-s5{bottom:22%;right:0;animation-delay:1.12s;font-size:14px;}
@keyframes dy-star-twinkle{0%,100%{opacity:.15;transform:scale(.5);}50%{opacity:1;transform:scale(1.2);}}
/* ── Skeleton shimmer for tiles while images load ── */
.dy-tile-loading{background:linear-gradient(110deg,#f0ebe3 30%,#faf6ef 50%,#f0ebe3 70%);background-size:200% 100%;animation:dy-shimmer 1.4s ease-in-out infinite;border-color:transparent !important;}
.dy-tile-loading img{opacity:0;transition:opacity .3s ease;}
@keyframes dy-shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}


/* ══════════════════════════════════════════════════════════════════════════
   STEP 5 — PREMIUM BOOK READER (Phase 1)
   Triggered by .kdy-s5-active on #s3. Hides the old messy scroll layout
   and replaces it with a clean two-column book reader + checkout panel.
   ══════════════════════════════════════════════════════════════════════════ */

/* Hide old s3 elements when step-5 is active */
#s3.kdy-s5-active .book3d-stage,
#s3.kdy-s5-active .book3d-hint,
#s3.kdy-s5-active .book3d-cta,
#s3.kdy-s5-active .book-dedit,
#s3.kdy-s5-active .book-chaps,
#s3.kdy-s5-active .s3-flipbook-divider,
#s3.kdy-s5-active .order-card,
#s3.kdy-s5-active #mem-section,
#s3.kdy-s5-active #save-story-banner { display: none !important; }

#s3.kdy-s5-active { padding: 0; background: var(--cream,#FDFAF4); }

/* ── CRITICAL FIX: reset #pw .preview-wrap styling in s5 mode ──
   Without this, the legacy .preview-wrap{border;border-radius;overflow:hidden;
   box-shadow;margin-bottom} clips the new full-page Step-5 loading + book reader
   inside a small rounded box. This rule restores full-width visibility. */
#s3.kdy-s5-active #pw,
#s3.kdy-s5-active .preview-wrap {
  border: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: calc(100vh - 60px) !important;
  height: auto !important;
}

/* ─── Step 5 wrapper ─── */
/* CRITICAL: width:100% + height:auto with min-height as floor.
   Without explicit width, the flex container can collapse to 0
   when its content's natural size is unknown at layout time. */
#s5-wrap {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: auto !important;
  min-height: 100vh !important;
  box-sizing: border-box !important;
}

/* ─── Sticky top header ─── */
#s5-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 28px; border-bottom: 1px solid rgba(26,21,16,.08);
  background: var(--cream,#FDFAF4); gap: 12px; flex-wrap: wrap;
  position: sticky; top: 0; z-index: 200;
}
#s5-title {
  font-family: 'Fraunces', serif; font-size: 17px; font-weight: 400;
  color: var(--text,#1A1510); letter-spacing: -.02em; line-height: 1.2;
}
#s5-header-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.s5-hdr-btn {
  font-size: 12px; padding: 7px 15px; border: 1px solid rgba(26,21,16,.15);
  border-radius: 999px; background: transparent; color: var(--soft,#5A4C3F);
  cursor: pointer; font-family: inherit; transition: all .15s; white-space: nowrap;
}
.s5-hdr-btn:hover { background: rgba(26,21,16,.05); border-color: rgba(26,21,16,.25); }

/* ─── Two-column layout ─── */
#s5-layout {
  display: grid !important;
  grid-template-columns: 1fr 340px;
  width: 100% !important;
  min-height: calc(100vh - 54px);
  box-sizing: border-box !important;
}

/* ─── Left: dark reader pane ─── */
#s5-reader {
  background: #1A1510; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start;
  padding: 36px 24px 40px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Override flipbook styles when inside s5 reader */
#s5-reader .flipbook-wrap {
  background: transparent; border-radius: 0; padding: 0;
  margin-bottom: 0; width: 100%; max-width: 680px;
}
#s5-reader .flipbook-title { display: none; } /* hidden — header replaces it */

/* ─── Chapter breadcrumb pills ─── */
#s5-breadcrumbs {
  display: flex; gap: 6px; flex-wrap: wrap; justify-content: center;
  margin-top: 20px; max-width: 680px; width: 100%;
}
.s5-crumb {
  font-size: 11px; padding: 5px 11px; border-radius: 999px;
  cursor: pointer; transition: all .15s; font-family: inherit;
  border: none; outline: none; white-space: nowrap; font-weight: 500;
  letter-spacing: .01em;
}
.s5-crumb.unlocked {
  background: rgba(201,168,92,.15); color: #C9A85C;
  border: 1px solid rgba(201,168,92,.3);
}
.s5-crumb.unlocked:hover { background: rgba(201,168,92,.25); }
.s5-crumb.locked {
  background: rgba(255,255,255,.04); color: rgba(255,255,255,.28);
  border: 1px solid rgba(255,255,255,.08); cursor: default;
}
.s5-crumb.current {
  background: #C9A85C !important; color: #1A1510 !important;
  border-color: #C9A85C !important;
}

/* ─── Right: checkout panel ─── */
#s5-checkout {
  background: var(--cream,#FDFAF4); border-left: 1px solid rgba(26,21,16,.08);
  padding: 28px 24px 36px; display: flex; flex-direction: column;
  gap: 16px; position: sticky; top: 54px;
  max-height: calc(100vh - 54px); overflow-y: auto;
}
#s5-checkout-title {
  font-family: 'Fraunces', serif; font-size: 20px; font-weight: 400;
  color: var(--text,#1A1510); letter-spacing: -.025em; line-height: 1.3; margin: 0;
}
#s5-price-card {
  background: var(--gold-pale,#FFF8E8); border: 1.5px solid rgba(201,168,92,.35);
  border-radius: 14px; padding: 16px 18px;
}
#s5-price-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted,#7A6F62); font-weight: 700; margin-bottom: 4px;
}
#s5-price-amount {
  font-family: 'Fraunces', serif; font-size: 32px; font-weight: 400;
  color: var(--text,#1A1510); letter-spacing: -.03em; line-height: 1;
  margin-bottom: 3px;
}
#s5-price-desc { font-size: 12px; color: var(--muted,#7A6F62); line-height: 1.45; }

/* ─── Email input in s5 ─── */
.s5-field-lbl {
  display: block; font-size: 11px; font-weight: 700; color: var(--soft,#5A4C3F);
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px;
}
#s5-email {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--border2,#D9CFB8);
  border-radius: 10px; font-size: 14px; font-family: inherit; box-sizing: border-box;
  background: var(--surface,#fff); color: var(--text,#1A1510);
  outline: none; transition: border-color .2s;
}
#s5-email:focus { border-color: #C9A85C; }
#s5-email.s5-err { border-color: var(--coral,#E07B54) !important; }
.s5-email-hint { font-size: 11px; color: var(--muted,#7A6F62); margin-top: 4px; line-height: 1.4; }

/* ─── Age confirmation in s5 ─── */
.s5-age-wrap {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 11.5px; color: var(--soft,#5A4A3A); line-height: 1.55; cursor: pointer;
}
#s5-age-check { margin-top: 2px; accent-color: #C9A85C; width: 14px; height: 14px; flex-shrink: 0; cursor: pointer; }

/* ─── Main order button ─── */
#s5-order-btn {
  width: 100%; background: #1A1510; color: #F5EFE0; border: none;
  border-radius: 999px; padding: 15px 20px; font-size: 15px; font-weight: 700;
  font-family: inherit; cursor: pointer; letter-spacing: .015em;
  transition: background .15s, transform .1s, opacity .2s;
}
#s5-order-btn:hover:not(:disabled) { background: #2A2218; transform: translateY(-1px); }
#s5-order-btn:active:not(:disabled) { transform: translateY(0); }
#s5-order-btn:disabled { opacity: .6; cursor: not-allowed; }
[data-theme=dark] #s5-order-btn { background: #C9A85C; color: #1A1510; }
[data-theme=dark] #s5-order-btn:hover:not(:disabled) { background: #D4B870; }

/* ─── Divider ─── */
.s5-div { height: 1px; background: rgba(26,21,16,.08); }

/* ─── Upgrade note (hardcover) ─── */
#s5-upgrade-note {
  font-size: 12px; color: var(--muted,#7A6F62); line-height: 1.65;
  padding: 11px 14px; background: rgba(26,21,16,.03);
  border-radius: 10px; border: 1px solid rgba(26,21,16,.06);
}
#s5-guarantee { font-size: 11.5px; color: var(--muted,#7A6F62); line-height: 1.55; display: flex; align-items: flex-start; gap: 5px; }
.s5-ai-disc {
  font-size: 11px; color: var(--muted,#7A6F62); line-height: 1.5;
  padding: 10px 12px; border-radius: 8px;
  background: rgba(255,183,77,.05); border: 1px solid rgba(255,183,77,.12);
}
.s5-ai-disc a { color: var(--teal,#2A7A6A); text-decoration: none; }
.s5-paypal-wrap { display: none; margin-top: 6px; }
.s5-paypal-wrap.show { display: block; }

/* ─── Locked page CTA — scroll to checkout panel ─── */
.fp-lock-btn { background: #C8862A; } /* keep existing, just override onclick below */

/* ─── Mobile responsive ─── */
@media (max-width: 800px) {
  #s5-layout { grid-template-columns: 1fr; }
  #s5-reader { padding: 20px 12px 28px; }
  #s5-checkout {
    position: static; max-height: none; border-left: none;
    border-top: 1px solid rgba(26,21,16,.08); padding: 24px 16px 36px;
  }
  #s5-header { padding: 11px 16px; }
  .s5-hdr-btn { font-size: 11px; padding: 6px 12px; }
  #s5-checkout-title { font-size: 18px; }
}

/* ─── Dark mode ─── */
[data-theme=dark] #s5-reader { background: #100D09; }
[data-theme=dark] #s5-header, [data-theme=dark] #s5-checkout { background: #1C1915; }
[data-theme=dark] #s5-header { border-bottom-color: rgba(255,255,255,.08); }
[data-theme=dark] #s5-checkout { border-left-color: rgba(255,255,255,.08); }
[data-theme=dark] #s5-price-card { background: rgba(201,168,92,.08); border-color: rgba(201,168,92,.22); }
[data-theme=dark] #s5-email { background: #252018; border-color: rgba(255,255,255,.12); }
[data-theme=dark] #s5-upgrade-note { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.06); }
[data-theme=dark] .s5-div { background: rgba(255,255,255,.08); }
[data-theme=dark] .s5-hdr-btn { border-color: rgba(255,255,255,.15); color: rgba(255,255,255,.65); }
[data-theme=dark] .s5-hdr-btn:hover { background: rgba(255,255,255,.06); }


/* ══ s2 LOADING SCREEN — full-page premium, no cramped 800px box ══ */
#s2.screen.show {
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  max-width: 100%;
  padding: 40px 20px;
  background: var(--cream,#FDFAF4);
}
#s2 .card {
  max-width: 500px;
  width: 100%;
  border-radius: 24px;
}

/* ══ s3 STEP-5 — also full-width, no 800px cap ══ */
#s3.screen.show {
  max-width: 100% !important;
  padding: 0 !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   STEP 5 — IN-PAGE LOADING (Phase 4)
   When generate is clicked, this loading view appears INSIDE #pw (the s5
   container). When complete, s5HideLoading() removes it and renderPreview
   populates the same #pw with the book reader. ONE continuous Step-5 page.
   ══════════════════════════════════════════════════════════════════════════ */

#s5-loading-wrap {
  width: 100% !important;
  min-height: calc(100vh - 80px);
  display: flex; align-items: center; justify-content: center;
  background: var(--cream,#FDFAF4);
  padding: 40px 24px;
  box-sizing: border-box;
}
#s5-loading-inner {
  max-width: 480px; width: 100%; text-align: center;
}
.s5-load-ring-wrap {
  position: relative; width: 160px; height: 160px; margin: 0 auto 28px;
}
.s5-load-ring { transform: rotate(-90deg); }
.s5-load-ring-bg {
  fill: none; stroke: rgba(201,168,92,.15); stroke-width: 7;
}
.s5-load-ring-fg {
  fill: none; stroke: #C9A85C; stroke-width: 7; stroke-linecap: round;
  stroke-dasharray: 326.7; stroke-dashoffset: 326.7;
  transition: stroke-dashoffset .6s cubic-bezier(.4,0,.2,1);
}
.s5-load-emoji {
  position: absolute; left: 50%; top: 38%; transform: translate(-50%,-50%);
  font-size: 38px;
}
.s5-load-pct {
  position: absolute; left: 50%; top: 62%; transform: translate(-50%,-50%);
  font-family: 'Fraunces', serif; font-size: 22px; color: #C9A85C; font-weight: 700;
}
.s5-load-bar {
  height: 4px; background: rgba(201,168,92,.15); border-radius: 999px;
  overflow: hidden; margin: 0 auto 22px; max-width: 360px;
}
.s5-load-bar-fill {
  height: 100%; background: linear-gradient(90deg, #C9A85C, #D4B870);
  width: 0%; transition: width .6s cubic-bezier(.4,0,.2,1);
}
.s5-load-title {
  font-family: 'Fraunces', serif; font-size: clamp(22px, 4vw, 28px);
  font-weight: 400; color: var(--ink,#1A1510); margin: 0 0 8px;
  letter-spacing: -.02em; line-height: 1.25;
}
.s5-load-sub {
  font-size: 14px; color: var(--muted,#7A6F62); margin: 0 0 28px;
  font-style: italic;
}
.s5-load-steps {
  display: flex; justify-content: center; gap: 22px; flex-wrap: wrap;
  font-size: 12px; color: var(--muted,#7A6F62);
}
.s5-load-step {
  display: flex; align-items: center; gap: 6px;
  opacity: .5; transition: opacity .3s, color .3s;
}
.s5-load-step.act { opacity: 1; color: #C9A85C; font-weight: 600; }
.s5-load-step.dn { opacity: .9; color: var(--soft,#5A4C3F); }
.s5-load-step-dot {
  width: 6px; height: 6px; border-radius: 50%; background: currentColor;
  opacity: .6;
}
.s5-load-step.act .s5-load-step-dot { animation: s5pulse 1.2s ease-in-out infinite; }
@keyframes s5pulse {
  0%,100% { transform: scale(1); opacity: .6; }
  50%     { transform: scale(1.5); opacity: 1; }
}
[data-theme=dark] #s5-loading-wrap { background: #1A1510; }
[data-theme=dark] .s5-load-title   { color: #F5EFE0; }
[data-theme=dark] .s5-load-bar     { background: rgba(255,255,255,.08); }


/* ══════════════════════════════════════════════════════════════════════════
   STEP 5 — PREMIUM BOOK PAGES (Phase 4)
   New flipbook page types: titlepage, dedication, characters,
   memory, end, backcover. Match the real PDF layout 1:1.
   ══════════════════════════════════════════════════════════════════════════ */

/* ─── P2: Inner Title Page ─── */
.fp-titlepage {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #FBF6E8 0%, #F5EFE0 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 36px 28px; color: #1A1510;
  border-radius: 4px;
}
.fp-tp-frame {
  border: 1.5px solid #C9A85C; border-radius: 6px;
  padding: 40px 28px; max-width: 92%; width: 100%; text-align: center;
  position: relative; background: rgba(255,255,255,.35);
}
.fp-tp-ornament { color: #C9A85C; font-size: 18px; margin: 4px 0; letter-spacing: .2em; }
.fp-tp-for {
  font-family: 'Fraunces', serif; font-style: italic; font-size: 14px;
  color: #5A4C3F; margin: 14px 0 6px;
}
.fp-tp-name {
  font-family: 'Fraunces', serif; font-size: clamp(28px, 5vw, 42px);
  font-weight: 700; color: #C9A85C; font-style: italic;
  letter-spacing: -.01em; line-height: 1.1; margin: 6px 0 14px;
}
.fp-tp-divider {
  width: 50%; height: 1px; background: #C9A85C; margin: 14px auto;
  opacity: .6;
}
.fp-tp-title {
  font-family: 'Fraunces', serif; font-size: clamp(18px, 3.5vw, 24px);
  font-weight: 500; color: #1A1510; margin: 10px 0;
  letter-spacing: -.01em; line-height: 1.25;
}
.fp-tp-theme {
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: 13px; color: #7A6F62; margin: 4px 0 12px;
}
.fp-tp-brand {
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 700;
  font-size: 16px; color: #C9A85C; margin: 12px 0 2px;
}
.fp-tp-url { font-size: 11px; color: #B89860; opacity: .75; }

/* ─── P3: Dedication ─── */
.fp-dedication {
  position: absolute; inset: 0; background: #FBF6E8;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 60px 36px; border-radius: 4px;
}
.fp-ded-rule {
  width: 60%; height: 1px; background: #C9A85C; opacity: .5; margin: 16px 0;
}
.fp-ded-label {
  font-family: 'Fraunces', serif; font-style: italic; font-size: 14px;
  color: #C9A85C; letter-spacing: .08em; margin: 12px 0 20px;
}
.fp-ded-text {
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: clamp(16px, 2.5vw, 19px); color: #1A1510; line-height: 1.65;
  text-align: center; max-width: 460px; margin: 0;
}

/* ─── P4: Meet the Characters ─── */
/* Cast + magic-detail rows are now paginated to fit (fbSplitCastPages), so
   this should never need to scroll — hidden is the deliberate, premium
   choice; fbAutoFitPages remains as a defensive fallback for the rare case
   where leaf geometry isn't available during measurement. */
.fp-characters {
  position: absolute; inset: 0; background: #FBF6E8;
  display: flex; flex-direction: column; align-items: center;
  padding: 36px 24px; border-radius: 4px; overflow: hidden;
}
.fp-ch-title {
  font-family: 'Fraunces', serif; font-size: clamp(20px, 3vw, 26px);
  font-weight: 500; color: #1A1510; margin: 8px 0 4px;
  letter-spacing: -.01em;
}
.fp-ch-sub {
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: 13px; color: #7A6F62; margin: 0 0 22px;
}
.fp-ch-grid {
  display: grid; gap: 18px; width: 100%; justify-items: center;
  align-content: start; max-width: 540px;
}
.fp-ch-grid.g2 { grid-template-columns: repeat(2, 1fr); }
.fp-ch-grid.g4 { grid-template-columns: repeat(2, 1fr); }
.fp-ch-grid.g6 { grid-template-columns: repeat(3, 1fr); }
.fp-char-cell { text-align: center; max-width: 130px; }
.fp-char-ring {
  width: 72px; height: 72px; border-radius: 50%;
  border: 2px solid #C9A85C; padding: 3px;
  background: #FFF8E8; margin: 0 auto 8px;
  overflow: hidden; position: relative;
  box-shadow: 0 2px 8px rgba(201,168,92,.2);
}
.fp-char-ring img {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block;
}
.fp-char-placeholder {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-size: 28px; background: rgba(201,168,92,.1); border-radius: 50%;
}
/* Gold-initial fallback when an avatar image fails (CORS/404) — always premium */
.fp-char-ring.fp-char-noimg { background: #D4AF37; }
.fp-char-ring.fp-char-noimg::after {
  content: attr(data-initial); position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', serif; font-weight: 700; color: #FAF7F0;
  font-size: 30px; line-height: 1;
}
.fp-char-name {
  font-family: 'Fraunces', serif; font-size: 13px; font-weight: 600;
  color: #1A1510; line-height: 1.2; margin-bottom: 2px;
}
.fp-char-role {
  font-size: 11px; color: #7A6F62; line-height: 1.3;
}
@media (max-width: 500px) {
  .fp-ch-grid.g4, .fp-ch-grid.g6 { grid-template-columns: repeat(2, 1fr); }
  .fp-char-ring { width: 60px; height: 60px; }
}
/* Cast page — "All about" profile panel (everything the parent filled in) */
.fp-char-profile {
  width: 100%; max-width: 420px; margin: 22px auto 4px; text-align: left;
  background: #FFFBF0; border: 1px solid rgba(201,168,92,.35); border-radius: 14px;
  padding: 14px 18px 16px; box-shadow: 0 2px 10px rgba(201,168,92,.12);
}
.fp-cp-head {
  font-family: 'Fraunces', serif; font-size: 13px; font-weight: 600; color: #9A6A1A;
  letter-spacing: .01em; margin-bottom: 8px; text-align: center;
}
.fp-cp-row {
  display: flex; gap: 12px; align-items: baseline; padding: 7px 0;
  border-top: 1px solid rgba(201,168,92,.16);
}
.fp-cp-row:first-of-type { border-top: none; }
.fp-cp-key { flex: 0 0 44%; font-size: 11.5px; font-weight: 600; color: #7A6F62; }
.fp-cp-val { flex: 1; font-size: 12.5px; color: #1A1510; line-height: 1.5; }

/* ─── P5/P6/P20/P21: Memory Photos (polaroid) ─── */
.fp-memory {
  position: absolute; inset: 0; background: #FBF6E8;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 32px 28px; border-radius: 4px;
}
.fp-mem-title {
  font-family: 'Fraunces', serif; font-size: clamp(20px, 3vw, 24px);
  font-weight: 500; color: #1A1510; margin: 0 0 4px;
  letter-spacing: -.01em;
}
.fp-mem-sub {
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: 12px; color: #7A6F62; margin: 0 0 28px;
}
.fp-mem-polaroid {
  background: #fff; padding: 14px 14px 24px;
  border: 1px solid rgba(201,168,92,.25);
  box-shadow: 0 12px 28px rgba(0,0,0,.12), 0 0 0 1px rgba(201,168,92,.08);
  max-width: 320px; width: 90%;
  transform: rotate(-1.5deg);
  position: relative;
}
.fp-mem-polaroid img {
  width: 100%; height: auto; max-height: 320px; object-fit: cover; display: block;
  border-radius: 1px;
}
.fp-mem-caption {
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: 13px; color: #5A4C3F; margin-top: 12px;
  text-align: center;
}

/* ─── P19: The End ─── */
.fp-end {
  position: absolute; inset: 0; background: #FBF6E8;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 60px 36px; border-radius: 4px;
}
.fp-end-ornament { color: #C9A85C; font-size: 22px; letter-spacing: .25em; margin: 10px 0; }
.fp-end-title {
  font-family: 'Fraunces', serif; font-size: clamp(36px, 6vw, 48px);
  font-weight: 400; font-style: italic; color: #C9A85C;
  margin: 18px 0; letter-spacing: -.02em;
}
.fp-end-msg {
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: clamp(14px, 2.3vw, 17px); color: #1A1510;
  line-height: 1.65; max-width: 440px; text-align: center;
  margin: 12px 0 20px;
}
.fp-end-love {
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: 13px; color: #7A6F62; margin: 16px 0;
}

/* ─── P22: Theme-aware Back Cover ─── */
.fp-backcover {
  position: absolute; inset: 0; border-radius: 4px;
  overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px 30px;
}
.fp-bc-deco {
  position: absolute; opacity: .22; pointer-events: none;
}
.fp-bc-inner { text-align: center; position: relative; z-index: 2; }
.fp-bc-brand {
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 700;
  font-size: clamp(36px, 7vw, 52px); margin: 0 0 14px;
  letter-spacing: -.02em;
}
.fp-bc-tagline {
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: clamp(13px, 2vw, 15px); margin: 0 0 28px;
  max-width: 320px; line-height: 1.5;
}
.fp-bc-url {
  font-size: 12px; letter-spacing: .08em; margin: 0 0 18px;
}
.fp-bc-personalised {
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: 12px; margin: 0;
}
.fp-bc-mark {
  position: absolute; bottom: 14px; left: 18px;
  font-size: 9px; letter-spacing: .25em; font-weight: 700; z-index: 2;
}

/* Page number — shared by all premium pages */
.fp-page-num {
  position: absolute; bottom: 14px; right: 18px;
  font-size: 10px; color: rgba(122,111,98,.55); font-family: 'Fraunces', serif;
}


/* ══════════════════════════════════════════════════════════════════════════
   PREMIUM RATE-LIMIT MODAL (Phase 5)
   Clean, calm, full-screen modal for fair-use limit + cooldown messages.
   ══════════════════════════════════════════════════════════════════════════ */

.kdy-rl-backdrop {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(15, 12, 8, 0); /* fade in */
  backdrop-filter: blur(0px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity .24s ease, background .24s ease, backdrop-filter .24s ease;
  pointer-events: none;
}
.kdy-rl-backdrop.show {
  background: rgba(15, 12, 8, .55);
  backdrop-filter: blur(8px);
  opacity: 1;
  pointer-events: auto;
}

.kdy-rl-card {
  background: var(--cream, #FDFAF4);
  border-radius: 22px;
  max-width: 440px; width: 100%;
  padding: 40px 36px 32px;
  box-shadow:
    0 24px 60px rgba(0,0,0,.28),
    0 4px 12px rgba(0,0,0,.12),
    inset 0 0 0 1px rgba(201, 168, 92, .15);
  text-align: center;
  position: relative;
  transform: scale(.95) translateY(8px);
  transition: transform .24s cubic-bezier(.4, 0, .2, 1);
}
.kdy-rl-backdrop.show .kdy-rl-card {
  transform: scale(1) translateY(0);
}

.kdy-rl-close {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px;
  border: none; background: rgba(26,21,16,.04);
  border-radius: 50%;
  font-size: 20px; line-height: 1;
  color: var(--muted, #7A6F62);
  cursor: pointer;
  transition: background .15s, color .15s;
  font-family: inherit;
}
.kdy-rl-close:hover {
  background: rgba(26,21,16,.08);
  color: var(--ink, #1A1510);
}

.kdy-rl-icon {
  font-size: 52px;
  line-height: 1;
  margin: 0 0 18px;
  animation: kdyRlIconPop .4s cubic-bezier(.34, 1.56, .64, 1) .1s both;
}
@keyframes kdyRlIconPop {
  0%   { transform: scale(.5); opacity: 0; }
  100% { transform: scale(1);  opacity: 1; }
}

.kdy-rl-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(20px, 4vw, 24px);
  font-weight: 500;
  color: var(--ink, #1A1510);
  letter-spacing: -.015em;
  line-height: 1.25;
  margin: 0 0 12px;
}

.kdy-rl-body {
  font-size: 14.5px;
  color: var(--soft, #5A4C3F);
  line-height: 1.65;
  margin: 0 0 24px;
  font-family: inherit;
}

.kdy-rl-actions {
  display: flex; flex-direction: column; gap: 10px;
  margin: 0 0 18px;
}
.kdy-rl-btn-primary {
  display: block;
  background: var(--ink, #1A1510);
  color: #F5EFE0;
  text-decoration: none;
  padding: 13px 22px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14.5px;
  font-family: inherit;
  letter-spacing: .015em;
  transition: background .15s, transform .1s;
  border: none;
  cursor: pointer;
}
.kdy-rl-btn-primary:hover { background: #2A2218; transform: translateY(-1px); }
.kdy-rl-btn-primary:active { transform: translateY(0); }

.kdy-rl-btn-secondary {
  display: block;
  background: transparent;
  color: var(--muted, #7A6F62);
  border: 1px solid rgba(26,21,16,.12);
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 13.5px;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.kdy-rl-btn-secondary:hover {
  background: rgba(26,21,16,.04);
  border-color: rgba(26,21,16,.2);
}

.kdy-rl-footnote {
  font-size: 12.5px;
  color: var(--muted, #7A6F62);
  margin: 6px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(26,21,16,.08);
  line-height: 1.5;
}

/* ─── Cooldown ring ─── */
.kdy-rl-countdown-wrap {
  position: relative;
  width: 120px; height: 120px;
  margin: 4px auto 20px;
}
.kdy-rl-countdown-ring { transform: rotate(-90deg); }
.kdy-rl-cd-bg {
  fill: none; stroke: rgba(201,168,92,.15); stroke-width: 6;
}
.kdy-rl-cd-fg {
  fill: none; stroke: #C9A85C; stroke-width: 6; stroke-linecap: round;
  stroke-dasharray: 326.7; stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s linear;
}
.kdy-rl-countdown-num {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', serif; font-size: 38px; font-weight: 700;
  color: var(--ink, #1A1510);
}

/* ─── Dark mode ─── */
[data-theme=dark] .kdy-rl-card {
  background: #1F1B16;
  box-shadow: 0 24px 60px rgba(0,0,0,.6), 0 4px 12px rgba(0,0,0,.4), inset 0 0 0 1px rgba(201,168,92,.2);
}
[data-theme=dark] .kdy-rl-title { color: #F5EFE0; }
[data-theme=dark] .kdy-rl-body  { color: rgba(245,239,224,.78); }
[data-theme=dark] .kdy-rl-btn-primary { background: #C9A85C; color: #1A1510; }
[data-theme=dark] .kdy-rl-btn-primary:hover { background: #D4B870; }
[data-theme=dark] .kdy-rl-btn-secondary {
  border-color: rgba(255,255,255,.12);
  color: rgba(255,255,255,.65);
}
[data-theme=dark] .kdy-rl-btn-secondary:hover {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.2);
}
[data-theme=dark] .kdy-rl-footnote {
  color: rgba(245,239,224,.55);
  border-top-color: rgba(255,255,255,.08);
}
[data-theme=dark] .kdy-rl-close { background: rgba(255,255,255,.06); color: rgba(255,255,255,.55); }
[data-theme=dark] .kdy-rl-close:hover { background: rgba(255,255,255,.12); color: #F5EFE0; }
[data-theme=dark] .kdy-rl-countdown-num { color: #F5EFE0; }

/* ─── Mobile ─── */
@media (max-width: 500px) {
  .kdy-rl-card { padding: 32px 24px 26px; }
  .kdy-rl-icon { font-size: 42px; }
  .kdy-rl-title { font-size: 20px; }
}

/* ════ Premium reader polish — mockup parity (appended · additive · #s5-reader-scoped) ════ */
#s5-reader .fp-right{
  background:linear-gradient(180deg,#FFFDF8 0%,#FBF5E9 62%,#F6EEDB 100%);
}
#s5-reader .fp-page-text{ color:#3E3326; }
#s5-reader .fp-page-text::first-letter{
  font-family:'Fraunces',serif; font-weight:600; font-size:1.95em; color:#B7791F; line-height:1;
}
#s5-reader .fp-page-eyebrow{ letter-spacing:2.8px; }
/* soft book spine in the gutter — ONLY on true two-panel chapter spreads
   (image + text side by side). Single-content pages (title, dedication,
   cast, end, back cover) and locked teasers must NOT show a centre line. */
#s5-reader .flipbook-page.chapter-page::before{
  content:''; position:absolute; top:6%; bottom:6%; left:50%; width:22px; transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(42,29,18,.12) 46%,rgba(42,29,18,.12) 54%,transparent);
  z-index:4; pointer-events:none; border-radius:50%;
}
@media (max-width:640px){ #s5-reader .flipbook-page.chapter-page::before{ display:none; } }

/* ════ #8 — free chapters shown complete, with elegant in-page scroll ════ */
#s5-reader .chapter-page .fp-right{ justify-content:flex-start; }
#s5-reader .fp-page-text.fp-full{
  -webkit-line-clamp:unset; display:block; white-space:pre-line;
  flex:1 1 auto; min-height:0; overflow-y:auto; padding-right:8px; margin-top:2px;
  scrollbar-width:thin; scrollbar-color:rgba(183,121,31,.4) transparent;
}
#s5-reader .fp-page-text.fp-full::-webkit-scrollbar{ width:5px; }
#s5-reader .fp-page-text.fp-full::-webkit-scrollbar-thumb{ background:rgba(183,121,31,.38); border-radius:3px; }
#s5-reader .fp-page-text.fp-full::-webkit-scrollbar-track{ background:transparent; }

/* ════ #3 — premium loading ring on free-avatar gallery thumbnails (graceful; covered once image loads) ════ */
.ap-tile:not(.selected)::after{
  content:''; position:absolute; top:50%; left:50%; width:24px; height:24px; margin:-12px 0 0 -12px;
  border-radius:50%; border:3px solid rgba(183,121,31,.20); border-top-color:rgba(183,121,31,.78);
  animation:apThumbSpin .8s linear infinite; z-index:0; pointer-events:none;
}
@keyframes apThumbSpin{ to{ transform:rotate(360deg); } }

/* ════ #6 — illustrated themed back cover + Book ID ════ */
#s5-reader .fp-backcover.fp-bc-illus{ display:flex; flex-direction:column; padding:0; align-items:stretch; justify-content:flex-start; overflow:hidden; }
#s5-reader .fp-bc-art{ position:relative; flex:0 0 46%; overflow:hidden; }
#s5-reader .fp-bc-art img{ width:100%; height:100%; object-fit:cover; display:block; }
#s5-reader .fp-bc-art-fade{ position:absolute; left:0; right:0; bottom:0; height:42%; pointer-events:none; }
#s5-reader .fp-bc-body{ flex:1; display:flex; flex-direction:column; padding:18px 22px 16px; text-align:left; min-height:0; }
#s5-reader .fp-bc-blurb{ font-family:'Fraunces',serif; font-style:italic; font-size:clamp(12px,1.7vw,15px); line-height:1.46; }
#s5-reader .fp-bc-illus .fp-bc-personalised{ margin-top:12px; font-family:'Fraunces',serif; font-size:12.5px; opacity:.9; position:static; left:auto; bottom:auto; transform:none; }
#s5-reader .fp-bc-foot{ margin-top:auto; display:flex; align-items:flex-end; justify-content:space-between; gap:12px; padding-top:14px; }
#s5-reader .fp-bc-illus .fp-bc-brand{ font-family:'Fraunces',serif; font-weight:600; font-size:17px; line-height:1.05; position:static; display:flex; flex-direction:column; gap:2px; }
#s5-reader .fp-bc-illus .fp-bc-url{ font-family:'DM Sans',sans-serif; font-weight:400; font-size:8.5px; letter-spacing:.14em; opacity:.6; position:static; }
#s5-reader .fp-bc-isbn{ display:flex; flex-direction:column; align-items:flex-end; gap:3px; }
#s5-reader .fp-bc-barcode{ width:72px; height:24px; background:repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 4px); opacity:.5; border-radius:1px; }
#s5-reader .fp-bc-id{ font-family:'DM Sans',sans-serif; font-size:10px; letter-spacing:.12em; opacity:.85; font-weight:500; }
/* subtle published-book gold frame on the front cover */
#s5-reader .flipbook-page.cover-page .fp-cover-overlay::after{
  content:''; position:absolute; inset:11px; border:1.5px solid rgba(240,200,112,.42); border-radius:4px; pointer-events:none; z-index:1;
}

/* ═══════════════════════════════════════════════════════════════════════
   TASK 1 — PREMIUM IMMERSIVE PREVIEW READER (redesign · additive overrides)
   Scoped to #s5-* so nothing outside the preview is affected. StPageFlip,
   checkout, chapter-locking and every JS hook are preserved untouched.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Minimal premium top bar: Kidoory logo left · actions right ── */
#s5-logo{
  font-family:'Fraunces',serif; font-size:22px; font-weight:600;
  color:var(--ink,#1A1510); letter-spacing:-.01em; text-decoration:none;
  display:inline-flex; align-items:center; gap:7px; line-height:1;
}
#s5-logo::before{ content:'✦'; color:#C8862A; font-size:15px; }
#s5-logo:hover{ opacity:.85; }
[data-theme=dark] #s5-logo{ color:#F5EFE0; }

/* ── Immersive dark reader stage (deep warm, never pure black) ── */
#s5-reader{
  position:relative;
  background:
    radial-gradient(ellipse 70% 58% at 50% 40%, rgba(212,175,55,.11), transparent 70%),
    linear-gradient(160deg,#1F160C 0%,#150E07 58%,#0F0A05 100%) !important;
  justify-content:center !important;
  padding:clamp(22px,4vh,52px) clamp(14px,4vw,64px) !important;
  min-height:calc(100vh - 56px);
}
#s5-reader .flipbook-wrap{
  max-width:none !important; width:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
#s5-reader .flipbook-stage{
  max-width:min(560px,92vw); width:100%;
  height:min(80vh,780px); max-height:80vh;
}
/* Book fills the stage; StPageFlip stretches into it (min 80% viewport height) */
#s5-reader.fb-stpf .flipbook-book,
#s5-reader.fb-stpf #fb-pages{ height:100% !important; width:100% !important; }

/* Soft golden glow + depth around the live page(s) */
#s5-reader.fb-stpf .stf__item{
  box-shadow:0 0 80px rgba(212,175,55,.30), 0 24px 60px rgba(0,0,0,.45) !important;
  border-radius:4px;
}
/* Same glow for the legacy fallback engine */
#s5-reader:not(.fb-stpf) .flipbook-book{
  box-shadow:0 0 80px rgba(212,175,55,.26), 0 24px 60px rgba(0,0,0,.5) !important;
}

/* ── Remove ALL navigation pills ── */
#s5-breadcrumbs{ display:none !important; }
#s5-reader .fb-dots{ display:none !important; }

/* ── Elegant floating gold arrows ── */
#s5-reader .flipbook-nav{ margin-top:16px; gap:10px; position:static; }
#fb-prev, #fb-next{
  position:absolute; top:50%; transform:translateY(-50%);
  width:58px; height:58px; border-radius:50%; z-index:60;
  background:linear-gradient(145deg,#EBC967,#C8862A);
  color:#1A1208; border:1px solid rgba(255,236,182,.55);
  font-size:22px; line-height:1; display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 28px rgba(0,0,0,.45), 0 0 0 6px rgba(212,175,55,.08);
  transition:transform .18s, box-shadow .18s, opacity .22s; cursor:pointer;
}
#fb-prev{ left:clamp(6px,3vw,40px); }
#fb-next{ right:clamp(6px,3vw,40px); }
#fb-prev:hover:not(:disabled), #fb-next:hover:not(:disabled){
  transform:translateY(-50%) scale(1.08);
  box-shadow:0 12px 36px rgba(0,0,0,.5), 0 0 0 8px rgba(212,175,55,.16);
}
#fb-prev:disabled, #fb-next:disabled{ opacity:0; pointer-events:none; }

/* ── Page indicator — gold, centred ── */
#fb-label{
  display:block; margin:0 auto; color:#EBC967 !important;
  font-family:'Fraunces',serif; font-size:14px; letter-spacing:.06em;
  text-align:center; min-width:auto !important; opacity:.9;
}

/* ── Floating premium checkout sidebar ── */
#s5-layout{ background:var(--cream,#FDFAF4); }
#s5-checkout{
  background:#FAF7F0 !important; border-left:none !important;
  border:1px solid rgba(201,168,92,.20);
  margin:22px 22px 22px 0; border-radius:20px;
  box-shadow:0 14px 44px rgba(26,21,16,.10), 0 2px 8px rgba(26,21,16,.05);
  top:22px; max-height:calc(100vh - 44px);
}
#s5-checkout-title{ font-size:22px; }
#s5-price-amount{ font-size:38px; font-weight:500; }

/* ── Responsive: mobile = full-width book + bottom premium checkout card ── */
@media (max-width:800px){
  #s5-reader{ padding:16px 6px 24px !important; min-height:auto; }
  #s5-reader .flipbook-stage{ max-width:96vw; height:min(72vh,640px); }
  #fb-prev,#fb-next{ width:46px; height:46px; font-size:18px; }
  #fb-prev{ left:5px; } #fb-next{ right:5px; }
  #s5-checkout{
    margin:0 !important; border-radius:22px 22px 0 0 !important;
    box-shadow:0 -10px 34px rgba(26,21,16,.14) !important; border-top:1px solid rgba(201,168,92,.25);
  }
}

/* Reader is always immersive-dark; only the checkout flips with theme */
[data-theme=dark] #s5-checkout{ background:#1C1915 !important; border-color:rgba(201,168,92,.18); }

/* ── Enticing premium chapter lock (gold badge on the blurred page) ── */
#s5-reader .fp-lock-icon{
  width:62px; height:62px; margin:0 auto 14px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:26px;
  background:radial-gradient(circle at 50% 34%,#F2DC92,#C8862A);
  box-shadow:0 8px 26px rgba(200,134,42,.45), 0 0 0 8px rgba(212,175,55,.14);
}
#s5-reader .fp-lock-title{ font-family:'Fraunces',serif; }
#s5-reader .fp-lock-btn{
  background:linear-gradient(145deg,#D89A33,#C8862A);
  box-shadow:0 6px 22px rgba(200,134,42,.4);
}

/* ═══════════════════════════════════════════════════════════════════════
   PREVIEW BOOK — PRECISE SIZING & LAYOUT (supersedes earlier sizing)
   Shared by ALL 5 languages (one create.css). StPageFlip/JS untouched.
   FIX1 100vh dark area · FIX2 responsive · FIX3 glow · FIX4 arrows
   ═══════════════════════════════════════════════════════════════════════ */

/* ── FIX 1: full-viewport immersive layout; #s5-header covers the fixed .nav ── */
#s5-wrap{ height:100vh !important; min-height:100vh !important; overflow:hidden; }
#s5-header{
  flex-shrink:0; min-height:60px; z-index:200;
  background:linear-gradient(180deg,#1F160C,#1A1208) !important;
  border-bottom:1px solid rgba(212,175,55,.14) !important;
}
#s5-logo{ color:#F5EFE0 !important; }
.s5-hdr-btn{ color:#EBC967 !important; border-color:rgba(212,175,55,.32) !important; background:transparent !important; }
.s5-hdr-btn:hover{ background:rgba(212,175,55,.12) !important; border-color:rgba(212,175,55,.55) !important; }

#s5-layout{ flex:1; min-height:0; height:auto !important; grid-template-columns:1fr 360px; }
/* Dark reader = exactly the area below the header; book centred, side padding = arrow gutters */
#s5-reader{
  height:100%; min-height:0 !important; overflow:hidden;
  justify-content:center !important;
  padding:clamp(14px,3vh,40px) clamp(76px,8vw,108px) !important;
}
#s5-reader.fb-stpf .flipbook-wrap{ position:static; }   /* arrows resolve to #s5-reader */
#s5-reader .flipbook-wrap{ flex:1; min-height:0; height:100%; justify-content:center; }
#s5-reader .flipbook-stage{
  flex:1; min-height:0; width:100% !important; max-width:100% !important;
  height:auto !important; max-height:none !important;
  display:flex; align-items:center; justify-content:center;
}
#s5-reader.fb-stpf .flipbook-book,
#s5-reader.fb-stpf #fb-pages{ width:100% !important; height:100% !important; }

/* Full-height premium checkout sidebar (excluded from the dark area) */
#s5-checkout{
  margin:0 !important; border-radius:0 !important; top:0 !important;
  height:100%; max-height:100% !important; overflow-y:auto;
  border-left:1px solid rgba(201,168,92,.22) !important;
  box-shadow:-14px 0 44px rgba(26,21,16,.05) !important;
}

/* ── FIX 3: exact golden glow (per visible page → merges across the spread) ── */
#s5-reader.fb-stpf .stf__item{
  box-shadow:0 0 120px rgba(212,175,55,0.4), 0 0 40px rgba(212,175,55,0.2), 0 20px 60px rgba(0,0,0,0.5) !important;
  border-radius:4px;
}
#s5-reader:not(.fb-stpf) .flipbook-book{
  box-shadow:0 0 120px rgba(212,175,55,0.4), 0 0 40px rgba(212,175,55,0.2), 0 20px 60px rgba(0,0,0,0.5) !important;
}

/* ── FIX 4: gold arrows OUTSIDE the book, in the side gutters, vertically centred ── */
#fb-prev{ left:clamp(12px,3vw,40px) !important; right:auto !important; }
#fb-next{ right:clamp(12px,3vw,40px) !important; left:auto !important; }

/* ── FIX 2: LAPTOP (1280–1439) ── */
@media (max-width:1439px){
  #s5-layout{ grid-template-columns:1fr 340px; }
  #s5-reader{ padding-left:clamp(66px,7vw,96px) !important; padding-right:clamp(66px,7vw,96px) !important; }
}

/* ── FIX 2: TABLET (768–1279) — sidebar stacks BELOW the book, full width ── */
@media (max-width:1279px){
  #s5-wrap{ height:auto !important; min-height:100vh !important; overflow:visible; }
  #s5-layout{ grid-template-columns:1fr !important; height:auto; }
  #s5-reader{ height:auto; min-height:80vh;
    padding-left:clamp(56px,7vw,90px) !important; padding-right:clamp(56px,7vw,90px) !important; }
  #s5-reader .flipbook-stage{ flex:none; height:min(64vh,520px); }
  #s5-checkout{
    height:auto; max-height:none !important; overflow:visible; width:100%;
    border-left:none !important; border-top:1px solid rgba(201,168,92,.22) !important;
    box-shadow:0 -12px 40px rgba(26,21,16,.07) !important;
  }
}

/* ── FIX 2: MOBILE (<768) — single page, full width + arrows below + sticky CTA ── */
@media (max-width:767px){
  #s5-reader{ min-height:auto; padding:14px 10px 18px !important; }
  #s5-reader .flipbook-stage{ flex:none; height:auto; width:100%; }
  #s5-reader .flipbook-nav{ position:static; margin-top:14px; display:flex; align-items:center; justify-content:center; gap:18px; }
  #fb-prev, #fb-next{ position:static !important; transform:none !important; width:48px; height:48px; font-size:19px; opacity:1 !important; }
  #fb-prev:disabled, #fb-next:disabled{ opacity:.35 !important; }
  #fb-prev:hover:not(:disabled), #fb-next:hover:not(:disabled){ transform:scale(1.06) !important; }
  #s5-checkout{ padding-bottom:88px !important; }
  #s5-mobile-cta{ display:flex !important; }
}

/* ── Mobile sticky bottom CTA bar (price + Order → scrolls to the full form) ── */
#s5-mobile-cta{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:300;
  height:70px; align-items:center; justify-content:space-between; gap:14px;
  padding:0 18px; background:#FAF7F0; border-top:1px solid rgba(201,168,92,.30);
  box-shadow:0 -8px 30px rgba(26,21,16,.16);
}
#s5-mcta-price{ font-family:'Fraunces',serif; font-size:24px; font-weight:600; color:var(--ink,#1A1510); white-space:nowrap; }
#s5-mcta-btn{
  flex:1; max-width:64%; background:#1A1510; color:#F5EFE0; border:none;
  border-radius:999px; padding:13px 16px; font-size:14px; font-weight:700;
  font-family:inherit; cursor:pointer; letter-spacing:.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
[data-theme=dark] #s5-mobile-cta{ background:#1C1915; border-top-color:rgba(201,168,92,.25); }
[data-theme=dark] #s5-mcta-price{ color:#F5EFE0; }

/* ═══════════════════════════════════════════════════════════════
   SPINE REMOVAL — DO NOT REMOVE
   Hides every STATIC centre line/shadow between the two pages of a
   chapter spread so the pages flow seamlessly together. The premium
   gold glow and the page-turn (animation) shadows are intentionally
   KEPT. Scoped to the preview reader (#s5-reader) so /read and other
   StPageFlip instances are unaffected.
   Flipbook is built by js/create.js (fbCreatePageEl) + styled here —
   NOT in book-flow.css (which only styles the .bf-* wizard panel).
   ═══════════════════════════════════════════════════════════════ */
/* 1. The deliberate 22px "soft spine" gutter pseudo-element (main culprit) */
#s5-reader .flipbook-page.chapter-page::before{ display:none !important; }
/* 2. The 1px gutter line on the left edge of the chapter text page */
#s5-reader .fp-right::before{ display:none !important; }
/* 3. Legacy fake-spine bars (already hidden in StPageFlip mode — reinforced) */
#s5-reader .flipbook-spine,
#s5-reader .flipbook-spine-line{ display:none !important; }
/* 4. Belt-and-braces: no seam borders on any StPageFlip element.
      (box-shadow is intentionally NOT cleared — it is the premium gold
       glow, not a spine. Removing it would flatten the book.) */
#s5-reader .stf__item,
#s5-reader [class*="stf"]{ border-left:none !important; border-right:none !important; }
#s5-reader .stf__page{ border-left:none !important; border-right:none !important; }

/* ═══════════════════════════════════════════════════════════════
   SCROLLABLE CHAPTER TEXT — premium gold scrollbar
   The header (CHAPTER N + title) stays fixed; only the body scrolls.
   Reinforces the flex height-chain so long chapters never clip.
   ═══════════════════════════════════════════════════════════════ */
/* Text PAGE container = full-height flex column that clips overflow */
#s5-reader .chapter-page .fp-right{
  display:flex !important; flex-direction:column !important;
  height:100% !important; overflow:hidden !important; box-sizing:border-box !important;
  justify-content:flex-start !important;
}
/* Header pieces stay fixed (do not grow or shrink) */
#s5-reader .chapter-page .fp-page-eyebrow,
#s5-reader .chapter-page .fp-page-title{ flex:0 0 auto !important; }
/* Body text takes the remaining space and scrolls */
#s5-reader .chapter-page .fp-page-text.fp-full{
  flex:1 1 auto !important; min-height:0 !important;
  overflow-y:auto !important; overflow-x:hidden !important;
  padding-right:6px !important; box-sizing:border-box !important;
  scrollbar-width:thin !important;
  scrollbar-color:rgba(212,175,55,0.5) transparent !important;
}
#s5-reader .chapter-page .fp-page-text.fp-full::-webkit-scrollbar{ width:3px !important; }
#s5-reader .chapter-page .fp-page-text.fp-full::-webkit-scrollbar-track{ background:transparent !important; }
#s5-reader .chapter-page .fp-page-text.fp-full::-webkit-scrollbar-thumb{ background:rgba(212,175,55,0.6) !important; border-radius:10px !important; }
#s5-reader .chapter-page .fp-page-text.fp-full::-webkit-scrollbar-thumb:hover{ background:rgba(212,175,55,0.9) !important; }

/* ═══════════════════════════════════════════════════════════════
   ISSUE 2 — COVER FILLS FULL PAGE HEIGHT (no blank cream box beneath)
   The cover is a single box (.cover-page .fp-left); when it didn't fill
   the page height, the cream .stf__item background showed through below
   it and read as an empty second box. Force it to fill the whole page.
   ═══════════════════════════════════════════════════════════════ */
#s5-reader .flipbook-page.cover-page,
#s5-reader .flipbook-page.cover-page .fp-left{
  height:100% !important; min-height:100% !important;
}
#s5-reader .flipbook-page.cover-page .fp-left{
  flex:1 1 auto !important; width:100% !important; display:block !important;
}
#s5-reader .flipbook-page.cover-page .fp-left > img{
  width:100% !important; height:100% !important;
  object-fit:cover !important; object-position:center !important; display:block !important;
}
#s5-reader .flipbook-page.cover-page .fp-left-placeholder{ height:100% !important; }

/* ═══════════════════════════════════════════════════════════════
   CAST PAGE — never scrolls. The grid + "All about" card can't be
   paginated, so fbAutoFitPages() scales the whole card down to fit its
   leaf (transform:scale). Overflow is hidden; no scrollbar affordance.
   ═══════════════════════════════════════════════════════════════ */
#s5-reader .fp-characters{ overflow:hidden !important; }
#s5-reader .fp-char-profile{ overflow:visible; flex:0 0 auto; }