:root{
  --navy:#0f2748; --navy2:#173a67; --gold:#f5c65c; --gold2:#e3a92f;
  --pink:#dc4f92; --pink2:#f497bf; --cream:#fffaf6; --lav:#f7eff8;
  --text:#173255; --muted:#68738b; --white:#fff; --line:#e8e3eb;
  --shadow:0 14px 38px rgba(25,37,67,.13);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--text);background:#fff}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit}
.container{width:min(1180px,calc(100% - 34px));margin:auto}
.site-header{position:sticky;top:0;z-index:100;background:rgba(9,28,55,.97);color:#fff;box-shadow:0 5px 20px rgba(0,0,0,.15)}
.nav{height:72px;display:flex;align-items:center;gap:22px}
.brand{display:flex;align-items:center;gap:10px;min-width:235px}
.crown{font-size:36px;color:var(--gold)}
.brand-title{font-family:Georgia,serif;font-size:24px;font-weight:700}
.brand-sub{font-size:9px;letter-spacing:.16em;opacity:.83}
.nav-links{display:flex;gap:19px;margin-left:auto;font-size:13px}
.nav-links a:hover{color:var(--gold)}
.tools{display:flex;gap:10px;align-items:center;font-size:14px}
.menu-toggle{display:none;background:none;border:0;color:#fff;font-size:28px}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 22px;border-radius:999px;font-weight:800;border:1px solid transparent;cursor:pointer;transition:.2s}
.btn:hover{transform:translateY(-2px)}
.btn-gold{background:linear-gradient(135deg,#ffe38d,var(--gold2));color:#332300}
.btn-pink{background:linear-gradient(135deg,var(--pink2),var(--pink));color:#fff;box-shadow:0 10px 25px rgba(220,79,146,.25)}
.btn-white{background:#fff;color:var(--navy);border-color:#d7dce5}
.btn-outline{background:#fff;color:var(--navy);border-color:#cbd2df}
.hero{position:relative;overflow:hidden;background:
linear-gradient(90deg,rgba(9,20,48,.96) 0%,rgba(12,28,61,.82) 37%,rgba(29,31,57,.30) 66%,rgba(17,25,43,.22) 100%),
radial-gradient(circle at 80% 20%,#c6809d 0,#7c5d7a 20%,#4b3c58 46%,#1e2940 75%);
min-height:620px;color:#fff}
.hero:after{content:"";position:absolute;inset:0;background:
radial-gradient(circle at 18% 20%,rgba(255,200,108,.18),transparent 18%),
radial-gradient(circle at 78% 35%,rgba(255,205,125,.19),transparent 16%),
radial-gradient(circle at 88% 60%,rgba(255,255,255,.08),transparent 16%);pointer-events:none}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:38px;align-items:center;min-height:620px;position:relative;z-index:2}
.hero-copy{padding:42px 0}
.hero h1{font-family:Georgia,serif;font-size:64px;line-height:1.02;margin:0 0 16px}
.hero p{font-size:18px;line-height:1.55;max-width:570px;color:#f0edf1}
.micro{font-size:13px;color:#f4cc78;font-weight:800;letter-spacing:.02em}
.hero-features{display:flex;gap:28px;margin:24px 0 28px;flex-wrap:wrap}
.hero-features div{display:flex;flex-direction:column;align-items:flex-start;font-size:12px;gap:5px}
.hero-features b{font-size:23px}
.hero-note{font-family:Georgia,serif;font-style:italic;font-size:18px;margin-top:16px}
.hero-art{position:relative;min-height:530px}
.child-glow{position:absolute;right:10px;top:10px;width:355px;height:355px;border-radius:50%;
background:radial-gradient(circle at 48% 36%,#ffd2c4 0 7%,#9f705e 8% 19%,#5a3847 20% 34%,#2a2438 35% 100%);
box-shadow:0 0 80px rgba(255,191,153,.22)}
.child-glow:after{content:"👧🏻";position:absolute;inset:0;display:grid;place-items:center;font-size:190px;filter:drop-shadow(0 18px 16px rgba(0,0,0,.2))}
.book{position:absolute;left:8px;bottom:12px;width:300px;height:390px;border-radius:16px;background:
linear-gradient(155deg,#e8a5ce 0%,#a887dd 48%,#5d4ba8 100%);border:7px solid rgba(255,255,255,.3);box-shadow:0 28px 55px rgba(0,0,0,.34);transform:rotate(-7deg);text-align:center;padding:26px;overflow:hidden}
.book h2{font-family:Georgia,serif;font-size:40px;line-height:.92;margin:12px 0 2px;color:#fff}
.book small{font-size:21px}.book .castle{font-size:63px;opacity:.65;position:absolute;right:10px;top:120px}
.book .girl{font-size:102px;position:absolute;left:85px;bottom:44px;z-index:2}
.book .cat{font-size:54px;position:absolute;right:30px;bottom:62px;z-index:2}
.book .spark{position:absolute;color:#ffe37f;font-size:22px}
.s1{left:22px;top:58px}.s2{right:26px;top:46px}.s3{right:42px;bottom:125px}
.handnote{position:absolute;right:20px;bottom:50px;font-family:Georgia,serif;font-style:italic;font-size:19px;line-height:1.45;transform:rotate(-5deg)}
.play{position:absolute;right:98px;bottom:6px;display:flex;align-items:center;gap:10px;font-weight:700}.play span{width:52px;height:52px;border:2px solid var(--gold);border-radius:50%;display:grid;place-items:center}
.section{padding:70px 0}
.section-title{text-align:center;margin-bottom:32px}.section-title h2{font-family:Georgia,serif;font-size:38px;margin:0 0 7px;color:var(--navy)}.section-title p{margin:0;color:var(--muted)}
.universes{display:grid;grid-template-columns:repeat(8,1fr);gap:10px}
.universe{border-radius:14px;min-height:220px;padding:14px;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;box-shadow:var(--shadow);transition:.2s;overflow:hidden}
.universe:hover{transform:translateY(-5px)}
.universe .emo{font-size:74px;text-align:center;margin:auto}
.universe h3{font-family:Georgia,serif;font-size:16px;margin:0 0 6px}
.universe span{font-size:12px}
.u1{background:linear-gradient(#e9abd0,#9e4f91)} .u2{background:linear-gradient(#74a3eb,#274d8e)}
.u3{background:linear-gradient(#86cda6,#3e855b)} .u4{background:linear-gradient(#7dc6b1,#397c66)}
.u5{background:linear-gradient(#cfaa7d,#6d4a2a)} .u6{background:linear-gradient(#c08d6d,#7f5a3e)}
.u7{background:linear-gradient(#5868ac,#1f315e)} .u8{background:linear-gradient(#dd8d73,#9b4330)}
.soft{background:#fbf7fb}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;text-align:center}
.step .n{width:36px;height:36px;border-radius:50%;background:var(--pink);color:#fff;display:grid;place-items:center;margin:0 auto 12px;font-weight:800}
.step .ico{font-size:44px;margin-bottom:8px}.step h3{font-family:Georgia,serif;font-size:20px;margin:0 0 8px}.step p{color:var(--muted);font-size:14px;line-height:1.5}
.gift-band{background:linear-gradient(90deg,#243757,#4e4a71 48%,#d39c8a);color:#fff}
.gift-grid{display:grid;grid-template-columns:1fr .9fr;gap:30px;align-items:center}
.quote{font-family:Georgia,serif;font-style:italic;font-size:32px;line-height:1.25}
.gift-card{background:#fff;color:var(--navy);border-radius:22px;padding:26px;text-align:center;box-shadow:var(--shadow)}
.gift-icons{display:flex;justify-content:center;gap:22px;flex-wrap:wrap;margin:18px 0}.gift-icons div{font-size:13px}.gift-icons b{display:block;font-size:28px}
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.review{padding:22px;border:1px solid var(--line);border-radius:16px;background:#fff}.stars{color:#f3a928}.review p{font-family:Georgia,serif;font-style:italic;line-height:1.5}.review small{color:var(--muted)}
footer{background:var(--navy);color:#fff;padding:34px 0}.footer-grid{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px}.footer-links{display:flex;gap:18px;font-size:13px}.social{text-align:right;font-size:13px}
.pagehero{padding:42px 0;background:linear-gradient(135deg,#fffaf7,#f7edf7);text-align:center}.pagehero h1{font-family:Georgia,serif;color:var(--navy);font-size:45px;margin:0 0 8px}.pagehero p{color:var(--muted)}
.progress{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:720px;margin:22px auto 0}.progress div{height:6px;border-radius:999px;background:#dddbe4}.progress .on{background:var(--pink)}
.layout2{display:grid;grid-template-columns:1.08fr .92fr;gap:26px;align-items:start}.panel{background:#fff;border-radius:22px;padding:24px;box-shadow:var(--shadow)}.panel h2{font-family:Georgia,serif;color:var(--navy)}
.field{margin:16px 0}.field label{display:block;font-weight:800;margin-bottom:7px}.field input,.field select,.field textarea{width:100%;padding:13px 14px;border:1px solid #dce1e9;border-radius:11px}
.choices{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.choice{padding:13px;border:1px solid #dce1e9;border-radius:12px;text-align:center;cursor:pointer}.choice.active{background:#fff0f7;border-color:var(--pink)}
.previewbox{position:sticky;top:95px}.mini-book{height:500px;border-radius:22px;background:linear-gradient(155deg,#e8a5ce,#a887dd 48%,#5d4ba8);color:#fff;text-align:center;padding:28px;position:relative;overflow:hidden}.mini-book h3{font-family:Georgia,serif;font-size:40px;margin:18px 0 2px}.mini-book .face{font-size:125px;margin-top:70px}.mini-book .pet{font-size:58px;position:absolute;right:28px;bottom:70px}
.meta{display:grid;gap:7px;margin-top:15px;color:#667086}.meta b{color:var(--navy)}
.spread{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:#decfc3;padding:8px;border-radius:22px}.bookpage{min-height:450px;border-radius:16px;background:linear-gradient(#fffefb,#f7ebe4);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:28px}.bookpage h3{font-family:Georgia,serif;font-size:26px}.bookpage .big{font-size:105px}
.paygrid{display:grid;grid-template-columns:1fr .82fr;gap:24px}.order{border:1px solid var(--line);padding:16px;border-radius:14px}.price{font-size:28px;font-weight:900}.radio{display:flex;gap:9px;padding:12px 0;border-bottom:1px solid #eee}.success{text-align:center;padding:48px 20px}.success h1{font-family:Georgia,serif;color:var(--navy);font-size:45px}.success .icon{font-size:76px}
@media(max-width:1000px){.nav-links{display:none;position:absolute;left:0;right:0;top:72px;background:var(--navy);padding:20px;flex-direction:column}.nav-links.open{display:flex}.menu-toggle{display:block;margin-left:auto}.tools{display:none}.hero-grid,.gift-grid,.layout2,.paygrid{grid-template-columns:1fr}.hero-art{min-height:500px}.universes{grid-template-columns:repeat(4,1fr)}.steps{grid-template-columns:repeat(2,1fr)}.reviews{grid-template-columns:1fr}.previewbox{position:static}.footer-grid{grid-template-columns:1fr;text-align:center}.footer-links{justify-content:center}.social{text-align:center}}
@media(max-width:650px){.hero h1{font-size:46px}.hero-grid{min-height:auto}.hero{min-height:auto}.hero-art{min-height:430px}.child-glow{width:290px;height:290px;right:-20px}.book{width:250px;height:330px;left:0}.book h2{font-size:34px}.book .girl{font-size:85px;left:69px}.universes{grid-template-columns:repeat(2,1fr)}.steps{grid-template-columns:1fr}.choices{grid-template-columns:1fr 1fr}.spread{grid-template-columns:1fr}.quote{font-size:26px}.section-title h2{font-size:32px}}


/* =========================================================
   LITTLE LEGEND — RESPONSIVE MASTER PATCH
   Desktop / Tablet / Mobile
   ========================================================= */

html, body { max-width: 100%; overflow-x: hidden; }
body { -webkit-font-smoothing: antialiased; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }

img, video, canvas, svg {
  max-width: 100%;
  height: auto;
}

.nav, .hero-grid, .gift-grid, .layout2, .paygrid,
.universes, .steps, .reviews, .footer-grid {
  min-width: 0;
}

.nav a, .btn, .choice, .universe {
  touch-action: manipulation;
}

@media (min-width: 1181px) {
  .container { width: min(1180px, calc(100% - 48px)); }
}

/* TABLET LANDSCAPE */
@media (max-width: 1100px) {
  .container { width: min(100% - 36px, 1020px); }

  .nav {
    height: 70px;
    gap: 14px;
  }

  .brand { min-width: 190px; }
  .brand-title { font-size: 22px; }
  .nav-links { gap: 14px; font-size: 12px; }

  .hero { min-height: 570px; }
  .hero-grid { min-height: 570px; gap: 28px; }
  .hero h1 { font-size: 56px; }
  .hero p { font-size: 17px; }

  .child-glow {
    width: 320px;
    height: 320px;
    right: 0;
  }

  .book {
    width: 275px;
    height: 365px;
  }

  .universes {
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
  }

  .universe { min-height: 210px; }
  .universe .emo { font-size: 66px; }

  .layout2 { grid-template-columns: 1fr 1fr; }
}

/* TABLET PORTRAIT */
@media (max-width: 900px) {
  .site-header { position: sticky; }

  .menu-toggle {
    display: block;
    margin-left: auto;
    order: 3;
  }

  .nav {
    position: relative;
    height: 68px;
  }

  .nav > .btn-gold {
    display: none;
  }

  .tools { display: none; }

  .nav-links {
    display: none;
    position: absolute;
    top: 68px;
    left: -18px;
    right: -18px;
    background: rgba(15,39,72,.99);
    padding: 18px;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 16px 30px rgba(0,0,0,.18);
    border-top: 1px solid rgba(255,255,255,.08);
  }

  .nav-links.open { display: flex; }

  .nav-links a {
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 14px;
  }

  .nav-links a:hover {
    background: rgba(255,255,255,.06);
  }

  .hero {
    min-height: auto;
    padding: 52px 0 40px;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    min-height: auto;
    gap: 12px;
  }

  .hero-copy {
    padding: 0;
    text-align: center;
  }

  .hero-copy p { margin-inline: auto; }

  .hero h1 {
    font-size: 52px;
    line-height: 1.02;
  }

  .hero-features {
    justify-content: center;
    gap: 18px;
  }

  .hero-features div {
    align-items: center;
    text-align: center;
  }

  .hero-art {
    min-height: 470px;
    width: 100%;
    max-width: 650px;
    margin: 0 auto;
  }

  .child-glow {
    width: 330px;
    height: 330px;
    right: 30px;
  }

  .book {
    left: 60px;
    bottom: 10px;
  }

  .handnote { right: 24px; bottom: 84px; }
  .play { right: 68px; bottom: 10px; }

  .section { padding: 58px 0; }
  .section-title h2 { font-size: 34px; }

  .universes {
    grid-template-columns: repeat(4, 1fr);
  }

  .steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 22px;
  }

  .gift-grid,
  .layout2,
  .paygrid {
    grid-template-columns: 1fr;
  }

  .gift-card { max-width: 620px; margin: auto; }

  .reviews { grid-template-columns: 1fr; }

  .previewbox {
    position: static;
    max-width: 620px;
    margin: 0 auto;
    width: 100%;
  }

  .mini-book {
    height: 460px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 22px;
  }

  .footer-grid .brand { justify-content: center; }
  .footer-links { justify-content: center; flex-wrap: wrap; }
  .social { text-align: center; }

  .pagehero h1 { font-size: 40px; }
}

/* MOBILE LARGE */
@media (max-width: 640px) {
  .container { width: min(100% - 24px, 620px); }

  .site-header .nav {
    height: 64px;
  }

  .nav-links {
    top: 64px;
    left: -12px;
    right: -12px;
  }

  .brand {
    min-width: 0;
    gap: 8px;
  }

  .crown { font-size: 30px; }
  .brand-title { font-size: 20px; }
  .brand-sub { font-size: 7.5px; }

  .hero {
    padding-top: 38px;
  }

  .micro { font-size: 12px; }

  .hero h1 {
    font-size: clamp(40px, 11vw, 48px);
    margin-bottom: 14px;
  }

  .hero p {
    font-size: 16px;
    line-height: 1.5;
  }

  .hero-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  .hero-features div {
    padding: 12px 10px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    background: rgba(255,255,255,.04);
  }

  .hero-note {
    font-size: 17px;
  }

  .hero-art {
    min-height: 390px;
  }

  .child-glow {
    width: 260px;
    height: 260px;
    right: -22px;
    top: 18px;
  }

  .child-glow:after {
    font-size: 150px;
  }

  .book {
    width: 225px;
    height: 300px;
    left: 6px;
    bottom: 12px;
    padding: 20px;
  }

  .book h2 {
    font-size: 31px;
  }

  .book small { font-size: 17px; }
  .book .castle { font-size: 50px; top: 100px; }
  .book .girl { font-size: 76px; left: 62px; bottom: 35px; }
  .book .cat { font-size: 42px; right: 20px; bottom: 48px; }

  .handnote {
    right: 0;
    bottom: 52px;
    font-size: 15px;
  }

  .play { display: none; }

  .section {
    padding: 50px 0;
  }

  .section-title {
    margin-bottom: 26px;
  }

  .section-title h2 {
    font-size: 30px;
  }

  .section-title p {
    font-size: 14px;
    line-height: 1.5;
  }

  .universes {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .universe {
    min-height: 190px;
    padding: 12px;
  }

  .universe .emo { font-size: 58px; }
  .universe h3 { font-size: 16px; }

  .steps {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .step {
    background: #fff;
    border-radius: 18px;
    padding: 22px 18px;
    box-shadow: 0 8px 24px rgba(25,37,67,.07);
  }

  .quote {
    font-size: 24px;
    text-align: center;
  }

  .gift-card {
    padding: 22px 16px;
  }

  .gift-icons {
    gap: 14px;
  }

  .review { padding: 18px; }

  .pagehero {
    padding: 34px 0 22px;
  }

  .pagehero h1 {
    font-size: 34px;
    line-height: 1.08;
  }

  .progress {
    gap: 6px;
    margin-top: 18px;
  }

  .section.soft > .container,
  .section > .container {
    width: min(100% - 20px, 620px);
  }

  .panel {
    padding: 18px;
    border-radius: 18px;
  }

  .panel h2 { font-size: 24px; }

  .choices {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .choice {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 8px;
    font-size: 13px;
  }

  .field input,
  .field select,
  .field textarea {
    min-height: 48px;
    font-size: 16px;
  }

  .btn {
    min-height: 48px;
    padding: 13px 18px;
  }

  .mini-book {
    height: 400px;
  }

  .mini-book h3 {
    font-size: 34px;
  }

  .mini-book .face {
    font-size: 105px;
    margin-top: 56px;
  }

  .spread {
    grid-template-columns: 1fr;
  }

  .bookpage {
    min-height: 360px;
    padding: 22px;
  }

  .bookpage .big { font-size: 88px; }

  .radio {
    min-height: 48px;
    align-items: center;
  }

  .success {
    padding: 38px 14px;
  }

  .success h1 {
    font-size: 34px;
  }

  .success .icon {
    font-size: 64px;
  }

  .footer-links {
    gap: 12px;
    font-size: 12px;
  }
}

/* MOBILE SMALL */
@media (max-width: 390px) {
  .container { width: calc(100% - 18px); }

  .brand-title { font-size: 18px; }
  .brand-sub { display: none; }

  .hero h1 { font-size: 39px; }

  .hero-art { min-height: 350px; }

  .child-glow {
    width: 225px;
    height: 225px;
    right: -28px;
  }

  .child-glow:after { font-size: 132px; }

  .book {
    width: 195px;
    height: 270px;
  }

  .book h2 { font-size: 27px; }
  .book small { font-size: 15px; }
  .book .girl { font-size: 68px; left: 52px; }

  .handnote {
    font-size: 13px;
    right: -2px;
  }

  .universes {
    grid-template-columns: 1fr 1fr;
  }

  .universe {
    min-height: 175px;
  }

  .choices {
    grid-template-columns: 1fr;
  }

  .mini-book {
    height: 360px;
  }
}


/* ===== V4 PHOTO LAYER ===== */
.hero-photo-wrap{
  min-height:500px;display:flex;align-items:center;justify-content:center;padding:20px 0;
}
.hero-photo{
  width:100%;max-width:620px;height:430px;object-fit:cover;object-position:center;
  border-radius:28px;box-shadow:0 28px 70px rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.15);
}
.universe-photo{
  position:relative;min-height:250px;padding:0;
  background-image:linear-gradient(to top,rgba(6,22,47,.88),rgba(6,22,47,.18) 52%,rgba(6,22,47,0) 72%),var(--card);
  background-size:cover;background-position:center;overflow:hidden;
}
.universe-photo .universe-overlay{position:absolute;inset:auto 0 0;padding:18px 14px 15px;z-index:2}
.universe-photo h3{margin:0 0 6px;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.universe-photo span{color:#fff;opacity:.95}
.universe-photo:hover{transform:translateY(-6px) scale(1.01)}
.gift-band{
  background:linear-gradient(90deg,rgba(20,42,75,.93),rgba(57,54,91,.84),rgba(111,68,74,.70)),
  url("assets/gift_band.jpg") center/cover no-repeat;
}
.review-head{display:flex;gap:12px;align-items:center}
.review-head img{width:58px;height:58px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:0 5px 14px rgba(0,0,0,.12)}
.review-head small{display:block;margin-top:4px}

@media(max-width:900px){
  .hero-photo-wrap{min-height:auto}
  .hero-photo{max-width:650px;height:auto;aspect-ratio:614/410}
  .universe-photo{min-height:230px}
}
@media(max-width:640px){
  .hero-photo-wrap{padding-top:8px}
  .hero-photo{width:100%;border-radius:20px}
  .universe-photo{min-height:215px}
  .universe-photo .universe-overlay{padding:14px 11px}
}
@media(max-width:390px){.universe-photo{min-height:190px}}


/* ===== V5 DATA / UPLOAD MODULE ===== */
.helper{display:block;margin-top:7px;color:var(--muted);font-size:12px}
.upload-preview{margin-top:12px;border-radius:16px;overflow:hidden;max-width:220px;box-shadow:var(--shadow)}
.upload-preview img{width:100%;aspect-ratio:1/1;object-fit:cover}
.portrait-photo{margin:34px auto 0 !important;width:150px;height:150px;border-radius:50%;overflow:hidden;border:5px solid rgba(255,255,255,.75);box-shadow:0 12px 30px rgba(0,0,0,.18)}
.portrait-photo img{width:100%;height:100%;object-fit:cover}
.form-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.save-status{margin-top:12px;color:#2e8b57;font-weight:700}
.summary-card{margin-top:16px;padding:16px;border-radius:14px;background:#fff0f7;color:#7d3f69;font-family:Georgia,serif;font-style:italic}
.preview-photo{width:150px;height:150px;border-radius:50%;overflow:hidden;margin:14px auto !important}
.preview-photo img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.checkout-total{display:flex;justify-content:space-between;align-items:center;margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:18px}
.confirm-box{max-width:560px;margin:22px auto 0}
.admin{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.sidebar{background:var(--navy);color:#fff;padding:24px 18px}
.sidebar .brand{margin-bottom:28px}
.sidebar a{display:block;padding:11px 13px;border-radius:10px;margin:4px 0}
.sidebar a.active,.sidebar a:hover{background:#2d4a7a}
.admin-main{background:#f7f8fb;padding:26px}
.admin-main h1{color:var(--navy)}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.kpi{background:white;border-radius:16px;padding:18px;box-shadow:0 8px 24px rgba(34,40,70,.06)}
.kpi b{font-size:24px;color:var(--navy);display:block;word-break:break-word}
.kpi span{display:block;color:var(--muted);font-size:13px;margin-top:4px}
.admin-grid{display:grid;grid-template-columns:1.1fr .9fr .9fr;gap:16px}
.admin-photo-placeholder{min-height:330px;border:2px dashed #d9ddea;border-radius:18px;display:grid;place-items:center;color:var(--muted)}
.admin-photo-placeholder.has-photo{display:block;border:0;overflow:hidden}
.admin-photo-placeholder img{width:100%;height:330px;object-fit:cover;border-radius:18px}
.production-list{line-height:2}
.action-stack{display:grid;gap:10px}
.action-stack .btn{border-radius:12px}

@media(max-width:900px){
  .admin{grid-template-columns:1fr}
  .sidebar{display:none}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .admin-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
  .form-actions{display:grid}
  .form-actions .btn{width:100%}
  .kpis{grid-template-columns:1fr}
  .admin-main{padding:16px}
}


/* ===== V6 BACKEND READY ===== */
.backend-badge{
  position:fixed;right:12px;bottom:12px;z-index:200;
  padding:7px 10px;border-radius:999px;background:#5f6678;color:#fff;
  font-size:11px;font-weight:800;box-shadow:0 6px 20px rgba(0,0,0,.16)
}
.backend-badge.online{background:#218c5a}
.backend-badge.local{background:#8a6a29}
.table-wrap{overflow:auto}
.orders-table{width:100%;border-collapse:collapse;min-width:800px}
.orders-table th,.orders-table td{padding:12px 10px;text-align:left;border-bottom:1px solid #e8eaf0;font-size:13px}
.orders-table th{color:var(--navy);background:#f7f8fb;position:sticky;top:0}
.orders-table tbody tr{cursor:pointer}
.orders-table tbody tr:hover{background:#fff4f9}
.status-pill{display:inline-block;padding:5px 9px;border-radius:999px;background:#efe9ff;color:#6d46a0;font-size:11px;font-weight:800}


/* ===== V7 STORY GENERATION ===== */
.prompt-box{
  white-space:pre-wrap;
  background:#101827;
  color:#eef4ff;
  padding:16px;
  border-radius:14px;
  font-size:12px;
  line-height:1.5;
  max-height:420px;
  overflow:auto;
}
.story-pages{
  display:grid;
  gap:12px;
  max-height:720px;
  overflow:auto;
  padding-right:4px;
}
.story-page-card{
  border:1px solid var(--line);
  border-radius:14px;
  padding:15px;
  background:#fffafc;
}
.story-page-card p{line-height:1.55;margin:8px 0}
.story-page-card small{color:var(--muted)}
.page-num{
  font-weight:800;
  color:var(--pink);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.story-book-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.story-book-page{
  min-height:360px;
  box-shadow:var(--shadow);
}
.story-book-page p{
  font-family:Georgia,serif;
  font-size:17px;
  line-height:1.55;
}
.story-book-page small{
  color:var(--muted);
  margin-top:14px;
}
.story-scene{
  font-size:68px;
  margin:18px 0;
}
@media(max-width:900px){
  .story-book-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .story-book-grid{grid-template-columns:1fr}
  .story-book-page{min-height:320px}
}


/* ===== V8 ILLUSTRATIONS ===== */
.illu-toolbar{
  display:flex;
  gap:20px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  margin:16px 0;
}
.illustrations-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
}
.illustration-card{
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--shadow);
  border:1px solid #ebe7ef;
}
.illustration-thumb{
  background:linear-gradient(135deg,#f6edf7,#ece9ff);
  aspect-ratio:3/4;
}
.illustration-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.illustration-body{
  padding:14px;
}
.illustration-text{
  line-height:1.5;
  color:var(--text);
  margin:10px 0 12px;
}
.prompt-box.small{
  font-size:11px;
  max-height:240px;
}
.story-visual{
  width:100%;
  border-radius:14px;
  overflow:hidden;
  margin:14px 0 16px;
  box-shadow:0 10px 24px rgba(0,0,0,.08);
}
.story-visual img{
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  display:block;
}
@media(max-width:900px){
  .illustrations-grid{grid-template-columns:1fr;}
}


/* ===== V9 PDF + DELIVERY ===== */
.final-book-body{background:#efedf2}
.final-book-wrap{width:min(900px,calc(100% - 24px));margin:28px auto 60px}
.print-page{
  background:#fff;
  width:100%;
  aspect-ratio:3/4;
  margin:0 auto 28px;
  box-shadow:0 20px 50px rgba(20,25,50,.14);
  overflow:hidden;
  position:relative;
  page-break-after:always;
}
.cover-inner{position:relative;width:100%;height:100%;overflow:hidden}
.cover-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cover-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,27,57,.82),rgba(10,27,57,.12) 60%)}
.cover-content{position:absolute;left:7%;right:7%;bottom:8%;color:#fff;text-align:center}
.cover-brand{font-weight:800;letter-spacing:.15em;font-size:14px;color:#f7d47c}
.cover-content h1{font-family:Georgia,serif;font-size:52px;line-height:1.03;margin:16px 0}
.cover-content p{font-size:19px}
.cover-name{font-family:Georgia,serif;font-size:24px;margin-top:24px}
.story-final-page{display:grid;grid-template-rows:68% 32%}
.story-final-visual{overflow:hidden;background:#f7eef8}
.story-final-visual img{width:100%;height:100%;object-fit:cover}
.fallback-art{width:100%;height:100%;display:grid;place-items:center;font-size:130px;background:linear-gradient(#f8d8e8,#a98be0)}
.story-final-text{padding:28px 38px;display:flex;flex-direction:column;justify-content:center;text-align:center}
.story-final-text p{font-family:Georgia,serif;font-size:21px;line-height:1.55;margin:8px auto;max-width:620px}
.end-page{display:grid;place-items:center;text-align:center;padding:50px;background:linear-gradient(150deg,#fff9f6,#f5eafa)}
.end-page h2{font-family:Georgia,serif;color:var(--navy);font-size:40px}
.end-page p{font-family:Georgia,serif;font-style:italic;font-size:24px;line-height:1.5;color:#7b4b77}
.end-icon{font-size:80px;color:var(--pink)}
.production-timeline{list-style:none;padding:0;margin:0}
.production-timeline li{position:relative;padding:14px 14px 14px 42px;border-bottom:1px solid #ece9ef}
.production-timeline li:before{content:"○";position:absolute;left:12px;color:#a7acb8}
.production-timeline li.done:before{content:"✓";color:#26895c;font-weight:900}
.production-board{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.prod-card{background:#fff;border-radius:18px;padding:24px;box-shadow:var(--shadow);transition:.2s}
.prod-card:hover{transform:translateY(-5px)}
.prod-card b{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--pink);color:#fff}
.prod-card h3{font-family:Georgia,serif;color:var(--navy);font-size:22px;margin:18px 0 6px}
.prod-card span{color:var(--muted);font-size:14px}

@media(max-width:800px){
  .production-board{grid-template-columns:1fr 1fr}
  .cover-content h1{font-size:40px}
  .story-final-text p{font-size:18px}
}
@media(max-width:560px){
  .production-board{grid-template-columns:1fr}
  .final-book-wrap{width:100%;margin-top:0}
  .print-page{margin-bottom:12px;box-shadow:none}
  .cover-content h1{font-size:31px}
  .cover-content p{font-size:15px}
  .story-final-text{padding:18px}
  .story-final-text p{font-size:15px}
  .end-page h2{font-size:30px}
  .end-page p{font-size:19px}
}
@media print{
  @page{size:A4 portrait;margin:0}
  body{background:#fff !important}
  .no-print,.backend-badge{display:none !important}
  .final-book-wrap{width:100%;margin:0}
  .print-page{
    width:210mm;
    height:297mm;
    aspect-ratio:auto;
    margin:0;
    box-shadow:none;
    page-break-after:always;
    break-after:page;
  }
}


/* ===== V10 LAUNCH CANDIDATE ===== */
.legal h1,.legal h2{color:var(--navy)}
.legal h1{font-family:Georgia,serif;font-size:38px}
.legal h2{font-family:Georgia,serif;font-size:24px;margin-top:28px}
.legal p{line-height:1.7;color:#556077}
.consent-box{background:#fff7fb;border:1px solid #f0d7e5;padding:14px;border-radius:12px}
.consent-box label{display:flex;gap:10px;align-items:flex-start}
.consent-box input{width:auto;min-height:auto;margin-top:4px}


/* =========================================================
   V10 CORRECTIONS — VISUAL POLISH
   Hero / Gift / Reviews / FAQ / Spacing / Responsive
   ========================================================= */

/* --- Global rhythm --- */
.section{
  padding-top:64px;
  padding-bottom:64px;
}
.section-title{
  margin-bottom:28px;
}
.section-title h2{
  line-height:1.08;
}
.section-title p{
  max-width:720px;
  margin-inline:auto;
  line-height:1.55;
}

/* --- HERO: better proportion & alignment --- */
.hero{
  min-height:560px;
}
.hero-grid{
  min-height:560px;
  grid-template-columns:minmax(0, .92fr) minmax(460px, 1.08fr);
  gap:42px;
  align-items:center;
}
.hero-copy{
  padding:44px 0;
  max-width:560px;
}
.hero h1{
  font-size:58px;
  line-height:1.01;
  margin-bottom:18px;
  letter-spacing:-.02em;
}
.hero p{
  max-width:535px;
  margin-bottom:0;
}
.hero-features{
  margin:22px 0 26px;
  gap:24px;
}
.hero-features div{
  min-width:92px;
}
.hero-photo-wrap{
  min-height:480px !important;
  padding:18px 0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.hero-photo{
  width:100% !important;
  max-width:600px !important;
  height:410px !important;
  object-fit:cover !important;
  object-position:center center !important;
  border-radius:26px !important;
  box-shadow:0 24px 58px rgba(0,0,0,.28) !important;
}

/* --- UNIVERSES: cleaner section transition --- */
#univers{
  padding-top:58px;
  padding-bottom:66px;
}
.universes{
  gap:12px;
}
.universe-photo{
  min-height:238px !important;
}
.universe-photo .universe-overlay{
  padding:16px 13px 14px !important;
}

/* --- HOW IT WORKS: tighter and more balanced --- */
#how{
  padding-top:58px;
  padding-bottom:58px;
}
.steps{
  gap:24px;
}
.step{
  min-height:220px;
}
.step .ico{
  margin-top:2px;
}

/* --- GIFT BLOCK: remove awkward overlay feel --- */
.gift-band{
  padding-top:56px !important;
  padding-bottom:56px !important;
  background-position:center center !important;
}
.gift-grid{
  grid-template-columns:1.08fr .92fr;
  gap:44px;
  align-items:center;
}
.quote{
  max-width:560px;
  font-size:30px;
  line-height:1.28;
  margin:0;
}
.gift-card{
  position:relative;
  margin:0 !important;
  transform:none !important;
  top:auto !important;
  right:auto !important;
  width:100%;
  max-width:500px;
  justify-self:end;
  padding:28px 26px;
  border-radius:24px;
}
.gift-card h2{
  margin-top:0;
  line-height:1.15;
}
.gift-icons{
  margin:20px 0;
  gap:18px;
}
.gift-icons div{
  min-width:72px;
}

/* --- REVIEWS: reduce oversized cards and blank area --- */
#reviews{
  padding-top:58px;
  padding-bottom:54px;
}
#reviews .section-title{
  margin-bottom:24px;
}
.reviews{
  gap:18px;
  align-items:stretch;
}
.review{
  min-height:190px;
  padding:20px 20px 18px !important;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}
.review-head{
  margin-bottom:8px;
}
.review-head img{
  width:52px !important;
  height:52px !important;
}
.review p{
  margin:8px 0 0;
  font-size:15px;
  line-height:1.5;
}
.review small{
  font-size:12px;
}

/* --- FAQ: pull it closer to reviews and improve density --- */
#faq{
  padding-top:50px !important;
  padding-bottom:58px !important;
}
#faq .section-title{
  margin-bottom:20px;
}
#faq details{
  max-width:880px;
  margin:10px auto;
  padding:16px 18px;
}
#faq summary{
  font-size:15px;
}
#faq details p{
  margin:12px 0 2px;
}

/* --- Footer spacing --- */
footer{
  padding-top:30px;
  padding-bottom:30px;
}

/* --- TABLET --- */
@media(max-width:1000px){
  .hero-grid{
    grid-template-columns:1fr;
    gap:18px;
  }
  .hero-copy{
    max-width:720px;
    margin:0 auto;
    text-align:center;
    padding-bottom:18px;
  }
  .hero-copy p{
    margin-inline:auto;
  }
  .hero-features{
    justify-content:center;
  }
  .hero-photo-wrap{
    min-height:auto !important;
  }
  .hero-photo{
    max-width:680px !important;
    height:auto !important;
    aspect-ratio:614/410;
  }
  .gift-grid{
    grid-template-columns:1fr;
    gap:26px;
  }
  .quote{
    max-width:720px;
    margin:auto;
    text-align:center;
  }
  .gift-card{
    justify-self:center;
    max-width:620px;
  }
}

/* --- MOBILE --- */
@media(max-width:640px){
  .section{
    padding-top:46px;
    padding-bottom:46px;
  }

  .hero{
    padding-top:34px !important;
    padding-bottom:28px !important;
  }
  .hero h1{
    font-size:clamp(39px, 10.6vw, 47px) !important;
    line-height:1.02 !important;
  }
  .hero-copy{
    padding:0 !important;
  }
  .hero-features{
    margin-top:18px !important;
    margin-bottom:22px !important;
  }
  .hero-photo{
    border-radius:20px !important;
    box-shadow:0 18px 42px rgba(0,0,0,.24) !important;
  }

  #univers{
    padding-top:44px !important;
    padding-bottom:48px !important;
  }
  .universe-photo{
    min-height:205px !important;
  }

  #how{
    padding-top:44px !important;
    padding-bottom:46px !important;
  }
  .step{
    min-height:auto;
    padding:20px 17px;
  }

  .gift-band{
    padding-top:42px !important;
    padding-bottom:42px !important;
  }
  .quote{
    font-size:23px !important;
  }
  .gift-card{
    padding:22px 16px !important;
    border-radius:20px !important;
  }
  .gift-icons{
    display:grid !important;
    grid-template-columns:repeat(3,1fr);
    gap:14px 8px !important;
  }

  #reviews{
    padding-top:44px !important;
    padding-bottom:38px !important;
  }
  .review{
    min-height:auto;
    padding:18px !important;
  }

  #faq{
    padding-top:36px !important;
    padding-bottom:46px !important;
  }
  #faq details{
    margin:8px auto !important;
  }
}

/* --- SMALL MOBILE --- */
@media(max-width:390px){
  .gift-icons{
    grid-template-columns:repeat(2,1fr);
  }
  .review-head img{
    width:48px !important;
    height:48px !important;
  }
}


/* =========================================================
   REFERENCE-MATCH HOMEPAGE
   Applies only to body.ref-home
   ========================================================= */

.ref-home{background:#fff;color:#0f2748}
.ref-header{background:#0f2748!important}
.ref-header .nav{height:70px}
.ref-header .nav-links{gap:18px}
.ref-header .nav-links a{font-size:12.5px}
.ref-header .nav-links a.active{color:#f2c557;border-bottom:2px solid #f2c557;padding-bottom:7px}
.ref-tools{font-size:12px;white-space:nowrap}
.ref-create{padding:12px 19px;font-size:13px}

.ref-hero{
  background:linear-gradient(90deg,#101b39 0%,#18365e 48%,#665b80 100%);
  color:#fff;
  overflow:hidden;
}
.ref-hero-grid{
  min-height:410px;
  display:grid;
  grid-template-columns:42% 58%;
  align-items:center;
}
.ref-hero-copy{
  padding:38px 0 30px;
  position:relative;
  z-index:2;
}
.ref-kicker{font-size:12px;color:#f2cb74;font-weight:700;margin-bottom:12px}
.ref-hero h1{
  font-family:Georgia,serif;
  font-size:50px;
  line-height:1.01;
  margin:0 0 14px;
  color:#fff;
  letter-spacing:-.025em;
}
.ref-hero-copy>p{
  font-size:16px;
  line-height:1.45;
  max-width:430px;
  margin:0;
  color:#f6f4f6;
}
.ref-feature-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  max-width:460px;
  margin:20px 0 22px;
}
.ref-feature-row>div{text-align:center;font-size:10.5px}
.ref-feature-row .ico{font-size:24px;margin-bottom:4px}
.ref-feature-row b,.ref-feature-row span{display:block}
.ref-feature-row b{font-size:11px;color:#fff}
.ref-feature-row span{font-size:10px;color:#fff}
.ref-hero-btn{padding:14px 24px;font-size:14px}
.ref-script{
  margin-top:11px;
  font-family:Georgia,serif;
  font-style:italic;
  font-size:17px;
  line-height:1.25;
}
.ref-hero-visual{
  height:410px;
  position:relative;
  overflow:hidden;
}
.ref-hero-visual img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}
.ref-hero-visual:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(16,27,57,.8) 0%,rgba(16,27,57,.20) 24%,rgba(16,27,57,0) 48%);
}
.ref-video{
  position:absolute;
  z-index:2;
  right:28px;
  bottom:28px;
  display:flex;
  align-items:center;
  gap:10px;
  color:#fff;
  font-size:13px;
}
.ref-video:first-letter{
  color:#f5c65c;
}

.ref-universes{padding:26px 0 30px;background:#fff}
.ref-title-row{
  display:grid;
  grid-template-columns:1fr 2fr 1fr;
  align-items:end;
  margin-bottom:16px;
}
.ref-center-title{text-align:center}
.ref-center-title h2,.ref-section-head h2{
  font-family:Georgia,serif;
  color:#102449;
  font-size:28px;
  margin:0 0 5px;
}
.ref-center-title p,.ref-section-head p{
  color:#68738b;
  margin:0;
  font-size:13px;
}
.ref-title-row>a{
  justify-self:end;
  color:#174b92;
  text-decoration:underline;
  font-size:12px;
}
.ref-card-grid{
  display:grid;
  grid-template-columns:repeat(8,1fr);
  gap:7px;
}
.ref-card{
  position:relative;
  height:205px;
  overflow:hidden;
  border-radius:11px;
  box-shadow:0 6px 18px rgba(0,0,0,.09);
}
.ref-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.ref-card:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(4,20,44,.82) 0%,rgba(4,20,44,.1) 48%,transparent 70%);
}
.ref-card>div{
  position:absolute;
  z-index:2;
  left:10px;right:10px;bottom:9px;
  display:flex;
  align-items:end;
  justify-content:space-between;
  color:#fff;
  font-family:Georgia,serif;
  font-size:13px;
}
.ref-card span{width:22px;height:22px;border:1px solid rgba(255,255,255,.8);border-radius:50%;display:grid;place-items:center}

.ref-how{
  background:#fff;
  padding:18px 0 28px;
  border-top:1px solid #f2eef3;
}
.ref-section-head{text-align:center;margin-bottom:18px}
.ref-how-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
  text-align:center;
}
.ref-step{position:relative}
.ref-step-num{
  width:30px;height:30px;border-radius:50%;
  background:#d94e94;color:#fff;
  display:grid;place-items:center;
  font-size:12px;font-weight:800;
  position:absolute;left:4px;top:0;
}
.ref-step-icon{font-size:42px;margin-bottom:8px}
.ref-step h3{font-family:Georgia,serif;font-size:16px;margin:0 0 7px}
.ref-step p{font-size:12px;line-height:1.4;color:#25324a;margin:0}

.ref-gift{
  background:
    linear-gradient(90deg,rgba(20,42,75,.48),rgba(53,47,82,.30),rgba(111,68,74,.15)),
    url("assets/ref_gift_band.jpg") center/cover no-repeat;
  padding:20px 0;
}
.ref-gift-grid{
  display:grid;
  grid-template-columns:56% 44%;
  align-items:center;
  min-height:170px;
}
.ref-gift-quote{
  color:#fff;
  font-family:Georgia,serif;
  font-style:italic;
  font-size:26px;
  line-height:1.28;
  padding-left:8px;
}
.ref-gift-card{
  background:#fff;
  border-radius:17px;
  padding:18px 22px;
  text-align:center;
  box-shadow:0 12px 28px rgba(0,0,0,.12);
}
.ref-gift-card h2{
  font-family:Georgia,serif;
  font-size:22px;
  color:#102449;
  line-height:1.1;
  margin:0 0 12px;
}
.ref-gift-icons{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:7px;
  margin-bottom:13px;
  color:#27334b;
  font-size:9.5px;
}
.ref-gift-icons span{display:block;font-size:23px;margin-bottom:4px}

.ref-reviews{padding:22px 0 18px;background:#fff}
.ref-stars{color:#f1a931;letter-spacing:.07em}
.ref-review-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:13px;
}
.ref-review{
  border:1px solid #e8e5ec;
  border-radius:14px;
  padding:13px 15px;
  display:flex;
  gap:12px;
  min-height:110px;
}
.ref-review img{
  width:54px;height:54px;border-radius:50%;object-fit:cover;flex:0 0 auto
}
.ref-review p{
  font-family:Georgia,serif;
  font-style:italic;
  font-size:11.5px;
  line-height:1.35;
  margin:5px 0;
}
.ref-review small{font-size:10.5px}

.ref-faq{padding:18px 0 26px;background:#fff}
.ref-faq details{
  border-top:1px solid #e7e4eb;
  padding:11px 0;
  margin:0;
  box-shadow:none;
  border-radius:0;
}
.ref-faq details:last-child{border-bottom:1px solid #e7e4eb}
.ref-faq summary{font-size:12.5px}
.ref-faq details p{font-size:12px;margin:8px 0 0;color:#667086}

.ref-footer{background:#102449;color:#fff;padding:26px 0 14px}
.ref-footer-grid{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:20px;
}
.ref-footer-links{
  display:flex;gap:16px;font-size:11px;
}
.ref-social{text-align:right;font-size:11px}
.ref-footer-bottom{
  display:flex;justify-content:space-between;
  border-top:1px solid rgba(255,255,255,.12);
  margin-top:18px;padding-top:12px;
  font-size:9.5px;color:rgba(255,255,255,.75)
}

@media(max-width:1000px){
  .ref-tools{display:none}
  .ref-create{display:none}
  .ref-hero-grid{grid-template-columns:1fr;min-height:auto}
  .ref-hero-copy{text-align:center;padding:34px 0 18px}
  .ref-hero-copy>p{margin:auto}
  .ref-feature-row{margin-inline:auto}
  .ref-hero-visual{height:auto}
  .ref-hero-visual img{aspect-ratio:614/410;height:auto}
  .ref-title-row{grid-template-columns:1fr}
  .ref-title-row>a{justify-self:center;margin-top:8px}
  .ref-card-grid{grid-template-columns:repeat(4,1fr)}
  .ref-gift-grid{grid-template-columns:1fr;gap:16px}
  .ref-gift-quote{text-align:center;padding:0}
}
@media(max-width:640px){
  .ref-hero h1{font-size:42px}
  .ref-feature-row{grid-template-columns:repeat(2,1fr);max-width:330px}
  .ref-card-grid{grid-template-columns:repeat(2,1fr);gap:9px}
  .ref-card{height:190px}
  .ref-how-grid{grid-template-columns:1fr;gap:18px}
  .ref-step-num{position:static;margin:0 auto 6px}
  .ref-gift-icons{grid-template-columns:repeat(3,1fr)}
  .ref-review-grid{grid-template-columns:1fr}
  .ref-footer-grid{grid-template-columns:1fr;text-align:center}
  .ref-footer .brand{justify-content:center}
  .ref-footer-links{justify-content:center;flex-wrap:wrap}
  .ref-social{text-align:center}
  .ref-footer-bottom{flex-direction:column;gap:6px;text-align:center}
}


/* =========================================================
   V10 FULL MATCH — INNER PAGES VISUAL SYSTEM
   Matches approved homepage art direction
   ========================================================= */

/* Shared inner-page shell */
body:not(.ref-home){
  background:linear-gradient(180deg,#fffaf7 0%,#f8f3fa 100%);
}
body:not(.ref-home) .site-header{
  background:#0f2748;
}
body:not(.ref-home) .pagehero{
  background:
    radial-gradient(circle at 15% 20%,rgba(247,203,116,.16),transparent 20%),
    linear-gradient(135deg,#fffaf7 0%,#f8edf7 52%,#ecebff 100%);
  padding:40px 0 28px;
  border-bottom:1px solid #ece5ee;
}
body:not(.ref-home) .pagehero h1{
  font-family:Georgia,serif;
  font-size:42px;
  line-height:1.06;
  color:#102449;
  margin:0 0 8px;
}
body:not(.ref-home) .pagehero p{
  color:#6a7388;
  margin:0;
  font-size:15px;
}
body:not(.ref-home) .progress{
  margin-top:20px;
}
body:not(.ref-home) .progress div{
  height:5px;
}
body:not(.ref-home) .progress .on{
  background:linear-gradient(90deg,#e05a9e,#f2b0ce);
}

body:not(.ref-home) .panel{
  border:1px solid rgba(221,215,226,.9);
  box-shadow:0 14px 34px rgba(34,39,74,.08);
  border-radius:22px;
}
body:not(.ref-home) .panel h2{
  font-family:Georgia,serif;
  font-size:26px;
  color:#102449;
  margin-bottom:18px;
}
body:not(.ref-home) .field{
  margin:15px 0;
}
body:not(.ref-home) .field label{
  color:#173255;
  font-size:13.5px;
}
body:not(.ref-home) .field input,
body:not(.ref-home) .field select,
body:not(.ref-home) .field textarea{
  background:#fff;
  border:1px solid #dddfe7;
  border-radius:12px;
  min-height:46px;
}
body:not(.ref-home) .field textarea{
  min-height:104px;
}
body:not(.ref-home) .field input:focus,
body:not(.ref-home) .field select:focus,
body:not(.ref-home) .field textarea:focus{
  border-color:#d65c9a;
  box-shadow:0 0 0 3px rgba(214,92,154,.10);
}

/* Creation page */
#bookForm .choices{
  gap:9px;
}
#bookForm .choice{
  background:#fff;
  border:1px solid #e2dfe7;
  border-radius:13px;
  min-height:48px;
  font-weight:700;
  color:#273552;
}
#bookForm .choice.active{
  background:linear-gradient(135deg,#fff0f7,#f8eafa);
  border-color:#d95496;
  color:#8d366c;
  box-shadow:0 7px 18px rgba(217,84,150,.09);
}
#bookForm .consent-box{
  background:#fff8fb;
  border-color:#eed7e4;
}
.previewbox{
  background:linear-gradient(180deg,#fff 0%,#fff9fc 100%);
}
.previewbox .mini-book{
  height:480px;
  background:
    radial-gradient(circle at 20% 12%,rgba(255,255,255,.5),transparent 10%),
    linear-gradient(155deg,#f0afd1 0%,#aa8ae1 48%,#624dae 100%);
  border:6px solid rgba(255,255,255,.45);
  box-shadow:0 24px 50px rgba(65,45,110,.24);
}
.previewbox .mini-book h3{
  font-family:Georgia,serif;
  font-size:42px;
  color:#fff;
}
.previewbox .meta{
  background:#fff5fa;
  border:1px solid #f1dfeb;
  padding:16px;
  border-radius:15px;
}

/* Preview pages */
.spread{
  background:#dfd2c7;
  border-radius:22px;
  padding:8px;
}
.bookpage{
  background:
    radial-gradient(circle at 25% 12%,rgba(255,255,255,.8),transparent 18%),
    linear-gradient(180deg,#fffefb,#f7ece5);
  border-radius:16px;
}
.bookpage h3{
  font-family:Georgia,serif;
  color:#102449;
  line-height:1.15;
}
.summary-card{
  border:1px solid #efdbe8;
  background:#fff3f9;
  color:#7f456d;
}

/* Payment */
.paygrid .panel{
  background:#fff;
}
.order{
  background:linear-gradient(135deg,#fff7fb,#f6effb);
  border:1px solid #eadfea;
}
.order b{
  color:#102449;
}
.price{
  color:#102449;
  font-family:Georgia,serif;
}
.radio{
  padding:13px 4px;
}
.checkout-total{
  color:#102449;
}

/* Confirmation */
.success{
  background:
    radial-gradient(circle at 50% 0%,rgba(244,198,92,.18),transparent 24%),
    #fff;
}
.success .icon{
  font-size:72px;
}
.success h1{
  font-family:Georgia,serif;
  color:#102449;
}

/* Production board */
.production-board{
  gap:14px;
}
.prod-card{
  border:1px solid #e5e0e9;
  background:#fff;
}
.prod-card b{
  background:linear-gradient(135deg,#e66aa8,#cf4c8f);
}
.prod-card:hover{
  box-shadow:0 18px 40px rgba(35,40,80,.12);
}

/* Story generation */
.prompt-box{
  background:#0f2748;
  border:1px solid #243b61;
}
.story-page-card{
  background:#fffafb;
}
.story-book-page{
  border:1px solid #eae4eb;
}
.story-scene{
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.08));
}

/* Illustration generator */
.illustration-card{
  border-radius:18px;
  box-shadow:0 12px 30px rgba(31,37,71,.09);
}
.illustration-thumb{
  background:linear-gradient(135deg,#f8edf5,#ecebff);
}

/* Delivery */
.production-timeline li{
  background:#fff;
}
.production-timeline li.done{
  color:#245f48;
}

/* Admin */
.admin{
  background:#f6f7fb;
}
.sidebar{
  background:linear-gradient(180deg,#0f2748 0%,#18365e 100%);
}
.sidebar a{
  color:#f5f7fc;
}
.sidebar a.active,
.sidebar a:hover{
  background:rgba(255,255,255,.10);
}
.admin-main{
  background:#f5f6fa;
}
.kpi{
  border:1px solid #e7e8ef;
  box-shadow:0 8px 24px rgba(34,40,70,.05);
}
.orders-table th{
  background:#f4f2f7;
}
.orders-table tbody tr:hover{
  background:#fff4f9;
}

/* Final book */
.final-book-body{
  background:#eae7ee;
}
.print-page{
  border-radius:6px;
}
.cover-overlay{
  background:linear-gradient(to top,rgba(10,26,57,.82),rgba(10,26,57,.08) 62%);
}

/* Login */
body.soft .panel{
  max-width:520px;
  margin:auto;
}

/* Legal pages */
.legal{
  background:#fff;
}
.legal h1{
  line-height:1.1;
}

/* Buttons harmonized */
body:not(.ref-home) .btn-gold{
  background:linear-gradient(135deg,#ffe08a,#e6ae36);
  color:#342400;
}
body:not(.ref-home) .btn-pink{
  background:linear-gradient(135deg,#ef94be,#d54e95);
  color:#fff;
}
body:not(.ref-home) .btn-outline{
  background:#fff;
  border-color:#cbd2df;
}

/* Tablet */
@media(max-width:900px){
  body:not(.ref-home) .pagehero{
    padding:34px 0 24px;
  }
  body:not(.ref-home) .pagehero h1{
    font-size:36px;
  }
  .previewbox .mini-book{
    height:440px;
  }
}

/* Mobile */
@media(max-width:640px){
  body:not(.ref-home) .pagehero{
    padding:28px 0 20px;
  }
  body:not(.ref-home) .pagehero h1{
    font-size:31px;
  }
  body:not(.ref-home) .panel{
    border-radius:18px;
    padding:18px;
  }
  body:not(.ref-home) .panel h2{
    font-size:23px;
  }
  #bookForm .choices{
    grid-template-columns:1fr 1fr;
  }
  .previewbox .mini-book{
    height:390px;
  }
}
@media(max-width:390px){
  #bookForm .choices{
    grid-template-columns:1fr;
  }
}

.inner-nav{margin-left:auto}
@media(max-width:900px){
  .inner-nav{display:none!important}
}

button:disabled{opacity:.5;cursor:not-allowed} :focus-visible{outline:3px solid #ad6b21;outline-offset:4px} pre{overflow-wrap:anywhere} .narrow.panel{margin-inline:auto} @media(max-width:600px){.inner-nav{display:flex!important;flex-wrap:wrap;gap:12px}.form-actions{flex-wrap:wrap}.narrow.panel{margin-inline:12px}}