/* ============================================================
   MY DIGITAL SCRAPBOOK — Y2K / Teen Magazine Edition
   ============================================================ */

:root{
  --bg: #F5F5F7;
  --paper: #FFFFFF;
  --primary: #0071E3;
  --primary-hover: #005BB5;
  --ink: #1D1D1F;
  --border: #D2D2D7;

  /* accent play-colors used only inside decorations, kept subtle & secondary to the primary palette */
  --pink: #FFB6C9;
  --pink-deep: #FF7FA8;
  --lilac: #D9B8FF;
  --mint: #B8F1D9;
  --butter: #FFE79A;
  --sky: #AEE3FF;

  --paper-cream: #FFFDF7;
  --font-display: 'Permanent Marker', cursive;
  --font-hand: 'Caveat', cursive;
  --font-body: 'Poppins', sans-serif;

  --radius-sticker: 14px;
  --shadow-soft: 0 10px 30px rgba(29,29,31,.12);
  --shadow-lift: 0 18px 40px rgba(29,29,31,.18);
}

*,*::before,*::after{ box-sizing: border-box; }
html,body{
  margin:0; padding:0;
  width:100%; height:100%;
  overflow-x:hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-tap-highlight-color: transparent;
}
img{ max-width:100%; display:block; user-select:none; -webkit-user-drag:none; }
button{ font-family: inherit; cursor:pointer; border:none; background:none; color:inherit; }
input{ font-family:inherit; }
::selection{ background: var(--primary); color:#fff; }

.grain-overlay{
  position:fixed; inset:0; pointer-events:none; z-index:9999;
  opacity:.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* ============================================================
   LANDING SCREEN
   ============================================================ */
.landing{
  position:relative;
  width:100%; min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  padding: 40px 20px;
}
.landing-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 15% 20%, rgba(174,227,255,.55), transparent 45%),
    radial-gradient(circle at 85% 15%, rgba(255,182,201,.5), transparent 45%),
    radial-gradient(circle at 50% 90%, rgba(217,184,255,.4), transparent 50%),
    linear-gradient(180deg, #EAF3FF 0%, var(--bg) 55%, #FDF2F6 100%);
}
.landing-decor{ position:absolute; inset:0; z-index:2; pointer-events:none; }

.landing-content{
  position:relative; z-index:3;
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
  max-width:640px;
}

.landing-badge{
  font-family: var(--font-hand);
  font-size: 22px; font-weight:700;
  color: var(--primary-hover);
  background: #fff;
  border: 2px dashed var(--primary);
  padding: 4px 18px;
  border-radius: 999px;
  transform: rotate(-3deg);
  margin-bottom: 18px;
  box-shadow: var(--shadow-soft);
  animation: floaty 4s ease-in-out infinite;
}

.landing-title{
  margin: 0 0 10px;
  font-family: var(--font-display);
  line-height: 1.05;
  color: var(--ink);
  text-shadow: 3px 3px 0 rgba(255,255,255,.8);
}
.landing-title .line1{
  display:block; font-size: clamp(28px, 6vw, 44px);
  color: var(--primary);
  letter-spacing: 1px;
}
.landing-title .line2{
  display:block; font-size: clamp(44px, 10vw, 78px);
  position:relative;
}
.star-dot{
  display:inline-block; color: var(--pink-deep); margin-left:6px;
  animation: spin-slow 6s linear infinite;
  font-size: .55em; vertical-align: middle;
}

.landing-sub{
  font-family: var(--font-hand);
  font-size: 24px; font-weight:600;
  color:#4b4b52;
  margin: 0 0 28px;
}

/* ---- mini cover book preview ---- */
.cover-book{
  width: min(78vw, 300px);
  aspect-ratio: 3/3.7;
  margin-bottom: 30px;
  perspective: 1400px;
  cursor:pointer;
}
.cover-book-inner{
  position:relative; width:100%; height:100%;
  background: linear-gradient(135deg, #ffffff, #f2f2f5);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow:
    var(--shadow-lift),
    inset 0 0 0 6px #fff,
    inset 0 0 0 7px var(--border);
  transform: rotate(-2deg);
  transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s;
  overflow:hidden;
}
.cover-book:hover .cover-book-inner{
  transform: rotate(0deg) translateY(-6px) rotateX(4deg);
  box-shadow: 0 26px 50px rgba(29,29,31,.22), inset 0 0 0 6px #fff, inset 0 0 0 7px var(--border);
}
.cover-photo-stack{ position:absolute; inset:0; }
.cs-photo{
  position:absolute;
  width: 58%;
  border: 8px solid #fff;
  box-shadow: 0 8px 18px rgba(0,0,0,.22);
  object-fit:cover; aspect-ratio: 1/1.05;
}
.cs-1{ top:8%; left:6%; transform: rotate(-9deg); z-index:1; }
.cs-2{ top:14%; right:4%; width:50%; transform: rotate(7deg); z-index:2; }
.cs-3{ bottom:8%; left:20%; width:56%; transform: rotate(-4deg); z-index:3; }
.cover-tape{
  position:absolute; width:70px; height:26px;
  background: rgba(255, 230, 150, .75);
  box-shadow: 0 2px 4px rgba(0,0,0,.12);
}
.tape-1{ top:2%; left:38%; transform: rotate(-40deg); }
.tape-2{ bottom:4%; right:8%; transform: rotate(35deg); background: rgba(174,227,255,.75); }
.cover-sticky{
  position:absolute; top:6%; right:6%;
  background: var(--butter);
  font-family: var(--font-hand); font-weight:700; font-size:16px; line-height:1.1;
  padding: 8px 10px;
  transform: rotate(8deg);
  box-shadow: 0 6px 12px rgba(0,0,0,.15);
  z-index:4;
}

.open-btn{
  display:inline-flex; align-items:center; gap:8px;
  background: var(--primary);
  color:#fff;
  font-weight:700; font-size:17px;
  padding: 15px 34px;
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(0,113,227,.38);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s, background .2s;
}
.open-btn svg{ transition: transform .25s; }
.open-btn:hover{
  background: var(--primary-hover);
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 16px 30px rgba(0,113,227,.45);
}
.open-btn:hover svg{ transform: translateX(4px); }
.open-btn:active{ transform: translateY(0) scale(.98); }

.landing-credit{
  margin-top:14px;
  font-size:12px; color:#8a8a90; letter-spacing:.3px;
}

/* landing exit transition */
.landing.is-leaving{
  animation: landingLeave .7s cubic-bezier(.5,0,.2,1) forwards;
}
@keyframes landingLeave{
  0%{ opacity:1; transform: scale(1); filter: blur(0); }
  100%{ opacity:0; transform: scale(1.06); filter: blur(6px); }
}
.landing.is-hidden{ display:none; }

/* generic floaty keyframes shared by decorations */
@keyframes floaty{
  0%,100%{ transform: translateY(0) rotate(var(--r,0deg)); }
  50%{ transform: translateY(-10px) rotate(var(--r,0deg)); }
}
@keyframes floaty-rotate{
  0%,100%{ transform: translateY(0) rotate(calc(var(--r,0deg) - 4deg)); }
  50%{ transform: translateY(-12px) rotate(calc(var(--r,0deg) + 4deg)); }
}
@keyframes spin-slow{ from{ transform: rotate(0deg);} to{ transform: rotate(360deg);} }
@keyframes twinkle{ 0%,100%{ opacity:.35; transform: scale(.85);} 50%{ opacity:1; transform: scale(1.15);} }
@keyframes drift{
  0%{ transform: translate(0,0); }
  33%{ transform: translate(6px,-8px); }
  66%{ transform: translate(-6px,4px); }
  100%{ transform: translate(0,0); }
}

/* decoration sprite (emoji-based sticker) used on landing + pages */
.deco{
  position:absolute;
  font-size: 28px;
  line-height:1;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.15));
  user-select:none;
  animation: floaty 5s ease-in-out infinite;
  animation-delay: var(--d, 0s);
  will-change: transform;
}
.deco.spin{ animation: floaty-rotate 6s ease-in-out infinite; animation-delay: var(--d,0s); }
.deco.twinkle{ animation: twinkle 2.4s ease-in-out infinite; animation-delay: var(--d,0s); }
.deco.drift{ animation: drift 7s ease-in-out infinite; animation-delay: var(--d,0s); }

/* ============================================================
   BOOK SCREEN — layout shell
   ============================================================ */
.book-screen{
  position:fixed; inset:0;
  z-index: 50;
  display:none;
  flex-direction:column;
  background:
    radial-gradient(circle at 20% 10%, rgba(174,227,255,.35), transparent 50%),
    radial-gradient(circle at 85% 90%, rgba(255,182,201,.3), transparent 50%),
    var(--bg);
  opacity:0;
}
.book-screen.is-active{ display:flex; }
.book-screen.is-visible{ animation: bookEnter .6s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes bookEnter{
  0%{ opacity:0; transform: scale(.97); }
  100%{ opacity:1; transform: scale(1); }
}

.book-topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 20px;
  z-index: 20;
}
.tb-btn{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; font-weight:600; color: var(--ink);
  background: rgba(255,255,255,.8);
  border: 1px solid var(--border);
  padding: 8px 14px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
  transition: transform .2s, box-shadow .2s, background .2s;
}
.tb-btn:hover{ background:#fff; transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.tb-btn:active{ transform: translateY(0); }
.tb-customize{ color: var(--primary); }

.tb-progress{
  font-family: var(--font-hand); font-weight:700; font-size:20px;
  color:#4b4b52;
  background: #fff;
  padding: 2px 16px;
  border-radius: 999px;
  border: 1.5px dashed var(--border);
}

.book-stage{
  flex:1;
  display:flex; align-items:center; justify-content:center;
  gap: 14px;
  padding: 0 14px 20px;
  min-height: 0;
}

.nav-arrow{
  flex-shrink:0;
  width:46px; height:46px;
  border-radius:50%;
  background: #fff;
  border: 1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color: var(--primary);
  box-shadow: var(--shadow-soft);
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), background .2s, color .2s;
  z-index: 30;
}
.nav-arrow:hover{ background: var(--primary); color:#fff; transform: scale(1.1); }
.nav-arrow:active{ transform: scale(.94); }
.nav-arrow:disabled{ opacity:.3; pointer-events:none; }

.page-dots{
  display:flex; justify-content:center; gap:7px;
  padding-bottom: 16px;
}
.page-dots .dot{
  width:7px; height:7px; border-radius:50%;
  background: var(--border);
  transition: all .3s;
}
.page-dots .dot.active{ background: var(--primary); width:20px; border-radius:5px; }

/* ============================================================
   DESKTOP BOOK — paired sheet flip mechanics
   ============================================================ */
.book{ position:relative; }
.book-desktop{
  width: min(1080px, 92vw);
  height: min(680px, 78svh);
  display: flex;
  perspective: 2600px;
}
.book-mobile{ display:none; }

.book-shadow-ground{
  position:absolute; left:8%; right:8%; bottom:-26px; height:36px;
  background: radial-gradient(ellipse at center, rgba(29,29,31,.28), transparent 70%);
  filter: blur(4px);
  z-index:0;
}
.book-spine{
  position:absolute; left:50%; top:2%; bottom:2%;
  width: 18px; margin-left:-9px;
  background: linear-gradient(90deg, rgba(0,0,0,.08), rgba(0,0,0,.18) 50%, rgba(0,0,0,.08));
  filter: blur(2px);
  z-index: 5;
  pointer-events:none;
  border-radius: 3px;
}

.book-panel{
  position:relative;
  width:50%; height:100%;
  background: var(--paper-cream);
  border: 1px solid var(--border);
  overflow:hidden;
  box-shadow: var(--shadow-lift);
}
.panel-left{
  border-radius: 14px 3px 3px 14px;
  z-index:1;
}
.panel-inner{
  position:absolute; inset:0;
  overflow:hidden;
}

.sheet-stack{
  position:relative;
  width:50%; height:100%;
  transform-style: preserve-3d;
  z-index: 2; /* flex items get implicit stacking contexts — must beat .panel-left (z-index:1)
                 so a flipped sheet can visually sweep over the left page */
}
.sheet{
  position:absolute; inset:0;
  width:100%; height:100%;
  transform-style: preserve-3d;
  transform-origin: left center;
  transition: transform .85s cubic-bezier(.45,.05,.15,1);
  border-radius: 3px 14px 14px 3px;
}
.sheet.flipped{ transform: rotateY(-180deg); }
.sheet .face{
  position:absolute; inset:0;
  backface-visibility:hidden;
  background: var(--paper-cream);
  border: 1px solid var(--border);
  overflow:hidden;
  box-shadow: var(--shadow-lift);
}
.sheet .face-front{
  border-radius: 3px 14px 14px 3px;
}
.sheet .face-back{
  transform: rotateY(180deg);
  border-radius: 14px 3px 3px 14px;
}
/* curl / fold shading */
.sheet .face::after{
  content:'';
  position:absolute; inset:0;
  pointer-events:none;
  background: linear-gradient(90deg, rgba(0,0,0,.10), transparent 6%, transparent 94%, rgba(0,0,0,.06));
}
.sheet.is-turning{ z-index: 500 !important; }

.page-content{
  position:relative;
  width:100%; height:100%;
  padding: 26px;
  overflow:hidden;
}

/* ============================================================
   MOBILE DECK — single-page flip
   ============================================================ */
.mobile-deck{
  position:relative;
  width: min(94vw, 420px);
  height: min(600px, 66svh);
  perspective: 2000px;
}
.m-page{
  position:absolute; inset:0;
  background: var(--paper-cream);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-lift);
  transform-origin: left center;
  transform-style: preserve-3d;
  backface-visibility:hidden;
  transition: transform .75s cubic-bezier(.45,.05,.15,1);
  overflow:hidden;
}
.m-page.flipped{ transform: rotateY(-178deg); }
.m-page.is-turning{ z-index:500 !important; }
.m-page::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(90deg, rgba(0,0,0,.08), transparent 8%, transparent 100%);
}


/* ============================================================
   SCRAPBOOK ELEMENTS — reusable "handmade" pieces
   ============================================================ */

/* paper texture base for every page */
.page-content.tex-grid{
  background-image:
    linear-gradient(rgba(0,113,227,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,113,227,.06) 1px, transparent 1px);
  background-size: 22px 22px;
}
.page-content.tex-notebook{
  background-image: repeating-linear-gradient(
    to bottom, transparent, transparent 27px, rgba(0,113,227,.14) 28px
  );
  background-position: 0 40px;
}
.page-content.tex-notebook::before{
  content:'';
  position:absolute; top:0; bottom:0; left:46px;
  width:2px; background: rgba(255,127,168,.35);
}
.page-content.tex-plain{ background: var(--paper-cream); }
.page-content.tex-coffee::before{
  content:'';
  position:absolute; width:120px; height:120px; border-radius:50%;
  border: 10px solid rgba(120,85,50,.10);
  top:-30px; right:-30px;
}

/* torn edge strip along the spine side for realism */
.page-content{ isolation:isolate; }

.polaroid{
  position:absolute;
  background:#fff;
  padding: 10px 10px 34px;
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s;
  z-index: 3;
}
.polaroid img{ width:100%; height:100%; object-fit:cover; display:block; }
.polaroid .cap{
  position:absolute; bottom:6px; left:0; right:0; text-align:center;
  font-family: var(--font-hand); font-size:15px; font-weight:700; color:#333;
}
.polaroid:hover{ transform: rotate(0deg) scale(1.05) translateY(-4px); box-shadow: 0 18px 30px rgba(0,0,0,.24); z-index:20; }
.polaroid.clickable{ cursor: zoom-in; }

.sticky-note{
  position:absolute;
  background: var(--butter);
  padding: 12px 14px;
  font-family: var(--font-hand); font-weight:700; font-size:16px; line-height:1.25;
  color:#4a4020;
  box-shadow: 0 8px 16px rgba(0,0,0,.14);
  z-index:4;
  transition: transform .25s;
}
.sticky-note.pink{ background: var(--pink); color:#6b2440; }
.sticky-note.mint{ background: var(--mint); color:#1e5c3f; }
.sticky-note.sky{ background: var(--sky); color:#0b3f5c; }
.sticky-note:hover{ transform: scale(1.06) rotate(0deg); z-index:22; }

.tape{
  position:absolute;
  width: 64px; height:24px;
  background: rgba(255,255,255,.55);
  box-shadow: 0 2px 5px rgba(0,0,0,.12);
  z-index: 6;
}
.tape.washi-stripe{
  background: repeating-linear-gradient(45deg, rgba(0,113,227,.5), rgba(0,113,227,.5) 6px, rgba(255,255,255,.55) 6px, rgba(255,255,255,.55) 12px);
}
.tape.pink-tape{ background: rgba(255,127,168,.55); }
.tape.mint-tape{ background: rgba(184,241,217,.75); }

.pin{
  position:absolute; width:16px; height:16px; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, #fff, var(--pink-deep) 60%, #b3325a 100%);
  box-shadow: 0 3px 5px rgba(0,0,0,.3);
  z-index:7;
}
.pin.blue{ background: radial-gradient(circle at 35% 30%, #fff, var(--primary) 60%, #004a94 100%); }
.pin.mint{ background: radial-gradient(circle at 35% 30%, #fff, #4CC393 60%, #257a56 100%); }

.paperclip{
  position:absolute; width:22px; height:38px;
  z-index:7;
  filter: drop-shadow(0 3px 3px rgba(0,0,0,.25));
}
.paperclip svg{ width:100%; height:100%; }

.label-tag{
  position:absolute;
  background: #fff;
  border: 1.5px dashed var(--primary);
  color: var(--primary-hover);
  font-family: var(--font-body); font-weight:700; font-size:11px;
  letter-spacing:.5px; text-transform:uppercase;
  padding: 5px 10px;
  border-radius: 6px;
  z-index:6;
}

.doodle-arrow{
  position:absolute;
  font-family: var(--font-hand); color: var(--pink-deep);
  font-size: 30px; font-weight:700;
  z-index:5;
  transform: rotate(var(--r,0deg));
}

.handwrite{
  position:absolute;
  font-family: var(--font-hand); font-weight:700;
  color: var(--primary-hover);
  z-index:5;
}

.film-strip{
  position:absolute;
  display:flex; gap:4px;
  background:#1D1D1F;
  padding: 6px 6px;
  border-radius: 4px;
  box-shadow: 0 10px 20px rgba(0,0,0,.25);
  z-index:4;
}
.film-strip img{ width:56px; height:56px; object-fit:cover; border:2px solid #1D1D1F; }
.film-strip.clickable img{ cursor: zoom-in; }

.ticket{
  position:absolute;
  background: repeating-linear-gradient(135deg,#fff,#fff 4px, #FDF7EA 4px, #FDF7EA 8px);
  border: 1.5px dashed var(--primary);
  border-radius: 8px;
  padding: 8px 12px;
  font-family: var(--font-hand); font-weight:700; color: var(--primary-hover);
  font-size:14px;
  box-shadow: 0 6px 14px rgba(0,0,0,.14);
  z-index:5;
}

.cutout{
  position:absolute;
  background: #fff;
  font-family: var(--font-body); font-weight:800; font-size: 13px;
  padding: 6px 12px;
  border-radius: 3px;
  box-shadow: 0 6px 12px rgba(0,0,0,.15);
  color: var(--ink);
  z-index:5;
}
.cutout.accent{ background: var(--primary); color:#fff; }

.magazine-photo{
  position:absolute;
  overflow:hidden;
  box-shadow: 0 10px 20px rgba(0,0,0,.16);
  z-index:3;
}
.magazine-photo img{ width:100%; height:100%; object-fit:cover; cursor:zoom-in; }

.torn-strip{
  position:absolute;
  background: #fff;
  clip-path: polygon(0% 4%, 8% 0%, 18% 5%, 30% 1%, 42% 6%, 55% 0%, 68% 5%, 80% 1%, 92% 6%, 100% 0%, 100% 96%, 90% 100%, 78% 95%, 65% 100%, 52% 94%, 40% 100%, 27% 95%, 15% 100%, 5% 96%, 0% 100%);
  box-shadow: 0 8px 16px rgba(0,0,0,.12);
  z-index:2;
}

.page-heading{
  position:absolute; top:16px; left:22px;
  font-family: var(--font-display);
  color: var(--primary);
  font-size: 22px;
  z-index: 8;
  text-shadow: 2px 2px 0 rgba(255,255,255,.7);
}

/* mini decos placed inside pages reuse .deco */


/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox{
  position:fixed; inset:0; z-index: 200;
  display:none; align-items:center; justify-content:center;
}
.lightbox.is-open{ display:flex; animation: lbFade .25s ease; }
@keyframes lbFade{ from{ opacity:0;} to{ opacity:1; } }
.lightbox-blur{
  position:absolute; inset:0;
  background: rgba(20,20,24,.72);
  backdrop-filter: blur(10px);
}
.lb-stage{
  position:relative; z-index:2;
  max-width: min(84vw, 700px);
  max-height: 82svh;
  animation: lbZoom .35s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes lbZoom{ from{ transform: scale(.85); opacity:0; } to{ transform: scale(1); opacity:1; } }
.lb-stage img{
  max-width: 100%; max-height: 82svh;
  border: 10px solid #fff;
  border-radius: 4px;
  box-shadow: 0 30px 60px rgba(0,0,0,.5);
  object-fit:contain;
}
.lb-close{
  position:absolute; top:22px; right:26px; z-index:3;
  width:42px; height:42px; border-radius:50%;
  background: rgba(255,255,255,.15); color:#fff; font-size:26px;
  display:flex; align-items:center; justify-content:center;
  transition: background .2s, transform .2s;
}
.lb-close:hover{ background: rgba(255,255,255,.3); transform: rotate(90deg); }
.lb-nav{
  position:relative; z-index:3;
  width:48px; height:48px; border-radius:50%;
  background: rgba(255,255,255,.15); color:#fff;
  display:flex; align-items:center; justify-content:center;
  margin: 0 18px;
  transition: background .2s, transform .2s;
}
.lb-nav:hover{ background: rgba(255,255,255,.3); transform: scale(1.1); }

/* ============================================================
   CUSTOMIZE PANEL
   ============================================================ */
.customize-panel{
  position:fixed; top:0; right:0; bottom:0;
  width: min(340px, 88vw);
  background:#fff;
  box-shadow: -12px 0 40px rgba(0,0,0,.15);
  z-index: 300;
  transform: translateX(105%);
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
  display:flex; flex-direction:column;
}
.customize-panel.is-open{ transform: translateX(0); }
.cp-header{
  display:flex; align-items:center; justify-content:space-between;
  padding: 20px 22px; border-bottom: 1px solid var(--border);
}
.cp-header h3{ margin:0; font-family: var(--font-display); color: var(--primary); font-size:20px; }
.cp-header button{ font-size:24px; color:#888; }
.cp-body{ padding: 20px 22px; display:flex; flex-direction:column; gap:16px; overflow-y:auto; }
.cp-body label{ display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:600; color:#555; }
.cp-body input[type=text]{
  padding: 10px 12px; border:1px solid var(--border); border-radius:8px; font-size:14px;
}
.cp-body input[type=color]{ width:100%; height:40px; border:1px solid var(--border); border-radius:8px; padding:2px; }
.cp-hint{ font-size:12px; color:#888; line-height:1.5; background:#F5F5F7; padding:10px; border-radius:8px; }
.cp-hint code{ background:#e8e8ea; padding:1px 5px; border-radius:4px; }
.cp-apply{
  background: var(--primary); color:#fff; font-weight:700; padding: 12px; border-radius:10px;
  transition: background .2s, transform .2s;
}
.cp-apply:hover{ background: var(--primary-hover); transform: translateY(-2px); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 860px){
  .book-desktop{ display:none; }
  .book-mobile{ display:flex; align-items:center; justify-content:center; }
  .page-content{ padding: 20px; }

  .book-stage{ position:relative; gap:0; padding: 0 6px 20px; }
  .nav-arrow{
    position:absolute; top:50%; transform: translateY(-50%);
    z-index: 40;
    background: rgba(255,255,255,.85);
  }
  .nav-prev{ left:2px; }
  .nav-next{ right:2px; }
}
@media (min-width: 861px){
  .book-mobile{ display:none; }
}

@media (max-width: 520px){
  .landing-title .line1{ font-size: 24px; }
  .landing-title .line2{ font-size: 40px; }
  .landing-sub{ font-size:19px; }
  .book-topbar{ padding: 10px 12px; }
  .tb-btn span{ display:none; }
  .nav-arrow{ width:40px; height:40px; }
  .polaroid, .sticky-note, .magazine-photo{ transform: scale(.92); }
}

@media (max-width: 380px){
  .cover-book{ width: 84vw; }
}