:root{
  --bg:#FBF6EC; --bg-tint:#F3EADA; --card:#FFFFFF; --card-warm:#FFFDF8;
  --ink:#2A2320; --ink-soft:#4A413A; --muted:#6F6557;
  --line:#EBE0CC; --line-strong:#DCCDB0;
  --primary:#D96A34; --primary-ink:#B5521F; --primary-soft:#FCEDE1;
  --accent:#2E8B7B; --accent-ink:#1F6A5D; --accent-soft:#E2F1ED;
  --gold:#C8A24B; --gold-soft:#F6EDD4;
  --buy:#2F8F46; --buy-ink:#266F38; --danger:#C0432F; --danger-soft:#FBE6E1;
  --magic-1:#FFD9A8; --magic-2:#F7B6C2; --magic-3:#BFE3DA; --magic-4:#CBC2F0;
  --shadow-sm:0 1px 2px rgba(74,56,38,.06),0 1px 3px rgba(74,56,38,.05);
  --shadow-md:0 4px 14px rgba(74,56,38,.10);
  --shadow-lg:0 18px 50px -12px rgba(74,56,38,.28);
  --font-display:'Fraunces','Georgia',serif;
  --font-ui:'Nunito','Trebuchet MS',system-ui,sans-serif;
  --r-sm:9px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px; --tap:44px;
}
*{ box-sizing:border-box; }
html,body{ overflow-x:clip; max-width:100vw; }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-ui); font-weight:500; line-height:1.55;
  display:flex; flex-direction:column; min-height:100vh; }   /* sticky footer: push .site-footer to the real bottom */
.view:not(.hidden){ flex:1 0 auto; }   /* the visible view fills remaining height so the footer never floats mid-page */
.site-footer{ flex-shrink:0; }
h2,h3{ font-family:var(--font-display); }
.display{ font-family:var(--font-display); font-weight:600; line-height:1.08; letter-spacing:-.01em; }
.muted{ color:var(--muted); }
.center{ text-align:center; }
.hidden{ display:none !important; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
.label{ font-size:.75rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin:.6rem 0 .25rem; display:block; }
a{ color:var(--accent-ink); }
:focus-visible{ outline:2.5px solid var(--primary-ink); outline-offset:2px; }

/* ---- top bar + tabs ---- */
.topbar{ display:flex; align-items:center; gap:.9rem; padding:.6rem 1.1rem; background:#fff;
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20; box-shadow:var(--shadow-sm); flex-wrap:wrap; }
.brand{ font-family:var(--font-display); font-weight:700; font-size:1.15rem; margin:0; cursor:pointer; flex-shrink:0; display:flex; gap:.35rem; align-items:center; }
@media (max-width:520px){ .brand{ font-size:1.05rem; } .tab{ padding:.5rem .55rem; font-size:.82rem; } }
@media (max-width:600px){ .crumb{ display:none; } }
.tabs{ display:flex; gap:.25rem; flex-shrink:1; min-width:0; }
.tab{ border:none; background:none; padding:.5rem .8rem; border-radius:var(--r-pill); color:var(--ink-soft); font-weight:700; font-size:.9rem; cursor:pointer; min-height:var(--tap); box-shadow:none; }
.tab:hover{ background:var(--bg-tint); transform:none; box-shadow:none; }
.tab.on{ background:var(--primary-soft); color:var(--primary-ink); }
.crumb{ color:var(--muted); flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--font-display); }
.userbar{ margin-left:auto; flex-shrink:0; display:flex; align-items:center; gap:.6rem; font-size:.9rem; }
.userbar .who{ color:var(--ink-soft); max-width:34vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* header "Log in" button (shown when logged out) */
.userbar-login{ min-height:auto; padding:.4rem 1rem; border-radius:var(--r-pill); font-size:.86rem; font-weight:700;
  background:var(--primary); color:#fff; border:none; cursor:pointer; box-shadow:var(--shadow-sm); }
.userbar-login:hover{ filter:brightness(1.06); transform:translateY(-1px); }
/* credits chip in the header (metered users only) */
.credits-chip{ min-height:auto; padding:.28rem .7rem; border-radius:var(--r-pill); font-size:.82rem; font-weight:700;
  background:var(--primary-soft); color:var(--primary-ink); border:1px solid var(--line-strong); cursor:pointer; }
.credits-chip:hover{ background:var(--primary); color:#fff; transform:none; }
.credits-chip.empty{ background:#FBE3E3; color:#9B2C2C; border-color:#E9B8B8; }
/* buy-credits packs */
.credits-packs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:.7rem; margin:.4rem 0 .6rem; }
.credits-packs .pack{ display:flex; flex-direction:column; align-items:center; gap:.1rem; padding:1rem .6rem; min-height:auto;
  border:1.5px solid var(--line-strong); border-radius:var(--r-md); background:var(--card-warm); cursor:pointer; }
.credits-packs .pack:hover{ border-color:var(--primary); transform:translateY(-1px); box-shadow:var(--shadow-md); }
.credits-packs .pack b{ font-size:1.25rem; color:var(--ink); }
.credits-packs .pack span{ font-size:.74rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.credits-packs .pack em{ font-style:normal; font-weight:700; color:var(--primary-ink); margin-top:.3rem; }
.credits-packs .pack.covers{ position:relative; border-color:var(--primary); box-shadow:0 0 0 2px var(--primary-soft); }
.credits-packs .pack .pack-tag{ position:absolute; top:-9px; right:-6px; background:var(--primary); color:#fff;
  font-size:.6rem; font-weight:700; letter-spacing:.02em; text-transform:uppercase; padding:2px 6px; border-radius:var(--r-pill); }
.credits-need{ background:var(--primary-soft); border:1px solid var(--line-strong); border-radius:var(--r-md);
  padding:.7rem .85rem; margin:.2rem 0 .6rem; font-size:.92rem; color:var(--ink); }
.credits-need b{ color:var(--primary-ink); }
/* "what credits buy" — outcome framing on packs + legends */
.credits-packs .pack .pack-sub{ font-size:.7rem; color:var(--muted); font-weight:600; margin-top:.15rem; text-transform:none; letter-spacing:0; }
.credits-legend{ grid-column:1/-1; margin:.1rem 0 .3rem; font-size:.82rem; }
.credits-legend b{ color:var(--primary-ink); }
.credits-packs .credits-cta{ grid-column:1/-1; margin-top:.3rem; font-size:.85rem; color:var(--muted); }
.bal-value{ font-size:.85rem; margin:-.2rem 0 .6rem; }
.bal-value b{ color:var(--primary-ink); }
/* '~N cr' estimate hints on action buttons — secondary weight, inherits the button's color */
.cost-hint{ font-size:.82em; font-weight:600; color:var(--ink-soft); margin-left:.15em; white-space:nowrap; }
.shared-badge{ position:absolute; top:8px; left:8px; background:var(--primary); color:#fff; font-size:.66rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.03em; padding:3px 8px; border-radius:var(--r-pill); box-shadow:var(--shadow-sm); }
/* read/flip view: text-only pages (inside front + back cover) */
.flip-textpage{ width:100%; height:100%; min-height:60vh; background:#fff; border-radius:var(--r-md);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.5rem; padding:2rem; box-sizing:border-box; }
.flip-textpage .ftp-msg{ font-family:var(--font-display); font-size:clamp(1.1rem, 1rem + 1vw, 1.6rem); color:#1a1a1a; text-align:center; max-width:32ch; line-height:1.5; }
.flip-textpage .bc-brand{ margin-top:auto; }
/* permanent back-cover page */
.back-cover-card .page-head{ display:flex; justify-content:space-between; align-items:baseline; gap:.5rem; }
.back-cover-preview{ background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:1.3rem; margin-top:.6rem;
  display:flex; flex-direction:column; min-height:300px; }
.back-cover-preview .bc-label{ font-size:.8rem; color:var(--muted); font-weight:700; }
.back-cover-preview .bc-text{ border:1px dashed var(--line-strong); border-radius:var(--r-sm); margin:.35rem 0 auto; color:#1a1a1a;
  font-size:1rem; resize:vertical; background:#fff; }
.bc-brand{ text-align:center; margin-top:1.4rem; padding-top:1.1rem; border-top:1px solid var(--line); }
.bc-brand .bc-logo{ font-family:var(--font-display); font-size:1.5rem; font-weight:700; color:var(--ink); }
.bc-brand .bc-url{ font-weight:700; color:var(--primary-ink); margin:.15rem 0; }
.bc-brand .bc-line{ font-size:.82rem; color:var(--muted); max-width:42ch; margin:.2rem auto 0; line-height:1.45; }
/* menubar "Gift Inkling" call-to-action */
.gift-cta{ margin-left:auto; min-height:auto; padding:.42rem .8rem; border-radius:var(--r-pill); font-weight:700; font-size:.9rem;
  color:var(--primary-ink); background:var(--primary-soft); border:1px solid var(--line-strong); cursor:pointer; white-space:nowrap; }
.gift-cta:hover{ background:var(--primary); color:#fff; border-color:var(--primary); transform:translateY(-1px); }
/* gift modal pitch */
.modal-box.gift-box{ width:min(680px,94vw); max-width:680px; }
.gift-form{ display:grid; grid-template-columns:1fr 1fr; gap:.15rem .9rem; margin-top:.2rem; }
.gift-form .gf-full{ grid-column:1/-1; }
.gift-form label{ margin-top:.5rem; }
.gift-explain{ font-size:.8rem; line-height:1.5; background:var(--gold-soft); border-radius:var(--r-sm); padding:.5rem .65rem; margin:.4rem 0 0; }
@media (max-width:560px){ .gift-form{ grid-template-columns:1fr; } }
.gift-pitch h2{ margin:0 0 .4rem; }
.gift-pitch p{ color:var(--ink-soft); line-height:1.6; }
.gift-why{ list-style:none; padding:0; margin:.7rem 0 1.1rem; display:flex; flex-direction:column; gap:.35rem; color:var(--ink-soft); font-size:.95rem; }
#gift-price{ margin:.3rem 0 .6rem; }
@media (max-width:640px){ .gift-cta{ order:3; margin-left:0; } }
/* account dropdown menu in the header */
.acct-menu{ position:relative; }
.acct-btn{ min-height:auto; padding:.35rem .7rem; border-radius:var(--r-pill); font-size:.86rem; font-weight:700;
  background:var(--card-warm); border:1px solid var(--line-strong); color:var(--ink); cursor:pointer; }
.acct-btn:hover{ border-color:var(--primary); transform:none; }
.acct-btn .caret{ color:var(--muted); font-size:.72rem; }
.acct-dropdown{ position:absolute; right:0; top:calc(100% + .4rem); background:#fff; border:1px solid var(--line-strong);
  border-radius:var(--r-md); box-shadow:var(--shadow-lg); padding:.35rem; min-width:210px; z-index:60; display:flex; flex-direction:column; }
.acct-dropdown button{ text-align:left; background:none; border:none; box-shadow:none; padding:.5rem .7rem; border-radius:var(--r-sm); font-size:.9rem; min-height:auto; color:var(--ink); font-weight:600; }
.acct-dropdown button:hover{ background:var(--bg-tint); transform:none; }
.acct-dropdown hr{ border:none; border-top:1px solid var(--line); margin:.25rem .3rem; width:auto; }
/* account / billing / orders cards */
.acct-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.2rem; align-items:start; }
.acct-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); padding:1.2rem 1.3rem; margin-bottom:1.2rem; }
.acct-card h3{ margin:0 0 .6rem; }
.acct-card .row{ margin-top:.9rem; align-items:center; }
.addr-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
.bal-big{ font-family:var(--font-display); font-size:2rem; font-weight:700; color:var(--ink); margin-bottom:.4rem; }
.bal-big .muted{ font-size:.95rem; font-weight:500; }
.tx-tbl .tx-pos{ color:var(--buy-ink); font-weight:700; }
.tx-tbl .tx-neg{ color:var(--ink-soft); }
/* saved cards + add-card (Payment Element) */
.pm-list{ display:flex; flex-direction:column; gap:.5rem; margin-bottom:.8rem; }
.pm-row{ display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; padding:.55rem .8rem; border:1px solid var(--line); border-radius:var(--r-sm); }
.pm-brand{ font-weight:700; text-transform:capitalize; }
.pm-default{ font-size:.72rem; font-weight:700; color:var(--accent-ink); background:var(--accent-soft); padding:.12rem .5rem; border-radius:var(--r-pill); }
.pm-row .link.danger{ color:var(--danger); margin-left:auto; }
.add-card-panel{ margin-top:.9rem; padding:.9rem; border:1px solid var(--line); border-radius:var(--r-md); background:var(--card-warm); }
.pe-loading{ display:flex; align-items:center; gap:.5rem; color:var(--muted); font-size:.9rem; padding:.6rem .2rem; }
#payment-element{ margin-bottom:.8rem; }
.ar-row{ margin:.7rem 0; font-size:.92rem; color:var(--ink-soft); }
.ar-row input{ width:84px; display:inline-block; min-height:auto; padding:.3rem .5rem; margin:0 .25rem; }
.credits-cta{ grid-column:1/-1; font-size:.82rem; color:var(--muted); margin-top:.5rem; }
@media (max-width:560px){ .addr-grid{ grid-template-columns:1fr; } }

/* ---- layout ---- */
.view{ max-width:min(1080px,100%); margin:0 auto; padding:1.6rem 1.1rem 3rem; }   /* cap at viewport so wide tables (admin/orders) scroll inside their sections instead of forcing the flex column wide + clipping on mobile */
#auth{ padding-top:0; }   /* hero sits flush against the header (no gap) */
.view-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.1rem; flex-wrap:wrap; }
.view-head h2{ margin:0; }
.row{ display:flex; gap:.6rem; margin-top:.8rem; flex-wrap:wrap; align-items:center; }
.card{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-md); }

/* ---- buttons ---- */
button{ font:inherit; font-weight:600; font-size:.9375rem; padding:.6rem 1.05rem; border-radius:var(--r-sm);
  border:1.5px solid var(--line-strong); background:#fff; color:var(--ink); cursor:pointer; min-height:var(--tap);
  box-shadow:var(--shadow-sm); transition:transform .08s, box-shadow .12s, background .12s, border-color .12s; }
button:hover{ border-color:var(--primary); transform:translateY(-1px); box-shadow:var(--shadow-md); }
button:active{ transform:translateY(0); }
button.primary{ background:linear-gradient(180deg,#C95E2B,#B5521F); color:#fff; border-color:var(--primary-ink); box-shadow:inset 0 1px 0 rgba(255,255,255,.22),var(--shadow-sm); }
button.primary:hover{ background:var(--primary-ink); }
button.big{ width:100%; padding:.85rem 1.2rem; font-size:1.05rem; margin-top:.4rem; }
button.buy{ background:linear-gradient(180deg,#37A052,#2F8F46); color:#fff; border-color:var(--buy-ink); }
button.buy:hover{ background:var(--buy-ink); }
button.danger{ color:var(--danger); border-color:var(--danger); background:#fff; }
button.danger:hover{ background:var(--danger-soft); border-color:var(--danger); }
button.link, .link{ background:none; border:none; box-shadow:none; color:var(--accent-ink); cursor:pointer; padding:.35rem .25rem; min-height:auto; text-decoration:underline; font-weight:700; font-size:.9rem; }
button.link:hover{ transform:none; box-shadow:none; color:var(--accent-ink); }

/* ---- inputs ---- */
textarea, input, select{ width:100%; font:inherit; font-weight:500; padding:.65rem .8rem; border-radius:var(--r-sm);
  border:1.5px solid var(--line-strong); background:#fff; color:var(--ink); min-height:var(--tap); }
textarea{ resize:vertical; }
textarea:focus, input:focus, select:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(217,106,52,.16); }
.lang-select{ width:auto; min-width:9rem; }
.check{ display:flex; align-items:center; gap:.5rem; font-weight:600; margin-top:.6rem; }
.check input{ width:auto; min-height:auto; }

/* ---- hero: warm flat banner (CREATE) ---- */
.hero{ position:relative; width:100vw; margin-left:calc(50% - 50vw);
  display:flex; align-items:center; overflow:hidden; }
@media (max-width:759px){ .hero-inner{ padding:1.6rem 1.1rem; } }
.hero-inner{ position:relative; z-index:1; width:100%; max-width:1080px; margin:0 auto; padding:2.4rem 1.1rem;
  display:grid; grid-template-columns:1fr; gap:1.6rem; align-items:center; }
.eyebrow{ font-weight:800; font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; color:var(--primary-ink); }
.hero .proof{ color:var(--muted); }
/* flat warm hero — big dark text */
.hero-flat{ background:linear-gradient(165deg,#FFF8EE 0%, #FCEEDB 52%, #F7E0C4 100%); min-height:auto; }
.hero-flat .eyebrow{ color:var(--primary-ink); text-shadow:none; }
.mega{ font-family:var(--font-display); font-weight:700; line-height:1.03; letter-spacing:-.02em;
  font-size:clamp(2.4rem, 1.3rem + 5vw, 4.6rem); color:var(--ink); margin:.45rem 0 .7rem; }
.hero-flat .lead{ color:var(--ink-soft); text-shadow:none; font-size:clamp(1.02rem, .95rem + .45vw, 1.22rem); max-width:62ch; }
.hero-flat .hero-inner{ padding:clamp(2rem,4.5vw,3.8rem) 1.2rem; }
/* photo -> book pairs */
/* hero is single-column now (composer pops in a modal) */
.hero-single{ display:block; max-width:1060px; text-align:center; margin:0 auto; }
.hero-single .hero-text{ max-width:980px; margin:0 auto; }
.hero-single .lead{ margin-left:auto; margin-right:auto; }
.hero-showcase{ width:100%; margin:clamp(1.3rem,3.2vw,2.4rem) auto .2rem; }
.hero-cta{ display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap; margin:1.2rem 0 .5rem; }
.hero-cta .big{ width:auto; margin-top:0; padding:.85rem 1.5rem; }
button.ghost{ background:#fff; color:var(--primary-ink); border:1.5px solid var(--line-strong); }
button.ghost:hover{ border-color:var(--primary); color:var(--primary); }
.hero-flat .reassure{ text-align:center; }

/* hero showcase: photos -> books scrolling continuously on a seamless loop */
.marquee{ width:100%; overflow:hidden;
  -webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.marquee-track{ display:flex; width:max-content; align-items:center; padding:1.6rem 0; animation:marquee 48s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.pair{ display:flex; flex:0 0 auto; align-items:center; gap:clamp(1rem,2.2vw,1.8rem); margin-right:clamp(2.2rem,5vw,4rem); }
@media (prefers-reduced-motion:reduce){ .marquee-track{ animation:none; } }
/* the inspiring photo, shown as a tilted snapshot (no shadow) */
.ex-photo{ position:relative; flex:0 0 auto; width:min(34vw,300px); transform:rotate(-2deg); }
.ex-photo img{ width:100%; aspect-ratio:4/5; object-fit:cover; display:block; border-radius:4px; border:7px solid #fff; outline:1px solid rgba(0,0,0,.06); }
.ex-arrow{ flex:0 0 auto; font-size:2rem; color:var(--primary); font-weight:800; }
/* 3D printed hardcover mockup */
.book-mock{ position:relative; flex:0 0 auto; width:min(34vw,290px); transform:perspective(2000px) rotateY(-12deg); transform-style:preserve-3d; transition:transform .45s ease; }
.book-mock:hover{ transform:perspective(2000px) rotateY(-6deg); }
.book-mock img{ display:block; width:100%; border-radius:2px 6px 6px 2px; }
.book-mock::before{ content:''; position:absolute; top:0; bottom:0; left:0; width:13px; border-radius:2px 0 0 2px; pointer-events:none;
  background:linear-gradient(90deg, rgba(0,0,0,.34), rgba(0,0,0,.10) 52%, rgba(255,255,255,.26) 90%, rgba(0,0,0,.04)); }
.book-mock::after{ content:''; position:absolute; top:5px; bottom:5px; right:-8px; width:9px; border-radius:0 2px 2px 0; pointer-events:none;
  background:repeating-linear-gradient(180deg,#fff,#fdf8ee 1px,#e1d6bf 2px,#fdf8ee 3px); }

/* lifestyle "moments" band (real stock imagery) */
.moments{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem; margin-top:1.2rem; }
.moment{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; }
.moment-img{ aspect-ratio:3/2; overflow:hidden; }
.moment-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.moment-text{ padding:1rem 1.1rem 1.2rem; }
.moment-text b{ display:block; font-family:var(--font-display); margin-bottom:.25rem; color:var(--ink); }
.moment-text span{ color:var(--muted); font-size:.88rem; line-height:1.5; }
@media (max-width:820px){ .moments{ grid-template-columns:1fr; max-width:430px; margin:1.2rem auto 0; } }
@media (max-width:640px){
  .marquee-track{ animation-duration:34s; padding:1.1rem 0; }
  .ex-photo{ width:min(42vw,210px); }
  .book-mock{ width:min(42vw,200px); }
  .ex-arrow{ font-size:1.5rem; }
}
/* features grid */
.features{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:1.1rem; }
.feature{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.15rem; box-shadow:var(--shadow-sm); }
.feature .feat-ic{ font-size:1.7rem; line-height:1; }
.feature b{ display:block; margin:.45rem 0 .2rem; font-family:var(--font-display); }
.feature span{ color:var(--muted); font-size:.86rem; line-height:1.5; }
@media (max-width:980px){ .features{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .features{ grid-template-columns:1fr; } }
.below{ padding-top:1.4rem; }
.lead{ font-size:1.0625rem; color:var(--ink-soft); max-width:46ch; }
.steps{ display:grid; grid-template-columns:1fr; gap:.7rem; margin:1.3rem 0; }
.step{ background:var(--card-warm); border:1px solid var(--line); border-radius:var(--r-md); padding:.8rem .9rem; }
.step .medallion{ width:30px; height:30px; border-radius:50%; background:var(--primary-soft); color:var(--primary-ink);
  font-weight:800; display:flex; align-items:center; justify-content:center; margin-bottom:.4rem; }
.step b{ display:block; }
.step span{ color:var(--muted); font-size:.9rem; }
.proof{ display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; color:var(--muted); font-size:.85rem; }
.proof span+span::before{ content:"•"; color:var(--gold); margin-right:1.1rem; }
.hero-photo{ margin:1.4rem 0 0; max-width:380px; }
.hero-photo img{ width:100%; border-radius:var(--r-lg); box-shadow:var(--shadow-lg); border:4px solid #fff; transform:rotate(-1.2deg); }
.hero-photo figcaption{ font-family:var(--font-display); font-style:italic; color:var(--muted); margin-top:.5rem; font-size:.92rem; }
.showcase{ margin-top:2.4rem; text-align:center; }
.showcase h3{ font-size:clamp(1.3rem, 1.1rem + 1vw, 1.7rem); margin:0 0 1.1rem; }
.showcase-photos{ display:grid; grid-template-columns:1fr; gap:1rem; }
.showcase-photos figure{ margin:0; }
.showcase-photos img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r-md); box-shadow:var(--shadow-md); }
.showcase-photos figcaption{ font-family:var(--font-display); color:var(--ink-soft); margin-top:.5rem; }
.photo-credit{ font-size:.72rem; margin-top:1rem; }
@media (min-width:640px){ .showcase-photos{ grid-template-columns:repeat(3,1fr); } }
.composer{ padding:1.3rem; align-self:start; }
.composer h3{ margin:0 0 .7rem; font-size:1.25rem; }
.composer textarea{ font-size:1.02rem; }
.composer-row{ display:flex; gap:.6rem; align-items:center; margin-top:.6rem; flex-wrap:wrap; }
/* the same composer, hosted inside the "Start a new book" modal — drop its card chrome */
#create-modal .modal-box{ width:min(860px,94vw); max-width:860px; }
#create-modal-slot .composer{ padding:0; margin:0; border:none; box-shadow:none; background:transparent; align-self:stretch; }
/* prominent photo dropzone — the primary way to start a book */
.dropzone{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.3rem;
  text-align:center; cursor:pointer; padding:1.6rem 1rem; margin:.2rem 0 .8rem;
  border:2.5px dashed var(--line-strong); border-radius:var(--r-lg);
  background:var(--primary-soft); transition:border-color .15s, background .15s, transform .1s; }
.dropzone:hover{ border-color:var(--primary); background:#FBE7D8; }
.dropzone.drag{ border-color:var(--primary-ink); background:#F9DEC9; transform:scale(1.01); }
.dropzone .dz-icon{ font-size:2rem; line-height:1; }
.dropzone .dz-main{ font-size:1.05rem; font-weight:700; color:var(--ink); }
.dropzone .dz-main b{ color:var(--primary-ink); }
.dropzone .dz-sub{ font-size:.85rem; }
.reassure{ font-size:.82rem; margin:.6rem 0 0; }
.upload-btn{ display:inline-flex; align-items:center; gap:.3rem; cursor:pointer; color:var(--accent-ink); font-weight:700; font-size:.9rem; }
.upload-btn.ghost{ border:1.5px dashed var(--line-strong); border-radius:var(--r-sm); padding:.55rem .8rem; color:var(--ink-soft); min-height:var(--tap); }
.upload-btn:hover{ color:var(--accent-ink); }
.divider{ text-align:center; border-top:1px solid var(--line); margin:1.1rem 0 .6rem; }
.divider span{ position:relative; top:-.7rem; background:#fff; padding:0 .6rem; color:var(--muted); font-size:.85rem; font-weight:700; }
.auth-box{ margin-top:.4rem; }
.auth-box input{ margin:.4rem 0; }

/* ---- chips ---- */
.chip-row{ display:flex; flex-wrap:wrap; gap:.5rem; margin:.6rem 0; }
.chip{ padding:.5rem .9rem; border-radius:var(--r-pill); border:1.5px solid var(--line-strong); background:#fff;
  cursor:pointer; font-size:.875rem; font-weight:700; min-height:auto; box-shadow:none; }
.chip:hover{ border-color:var(--primary); transform:none; box-shadow:none; }
.chip.on{ background:linear-gradient(180deg,#C95E2B,#B5521F); color:#fff; border-color:var(--primary-ink); }
.chip.on::after{ content:" ✓"; }

/* ---- grids / cards ---- */
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:1rem; }
.grid.small{ grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:.7rem; max-height:60vh; overflow:auto; }
.book-card{ position:relative; background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; cursor:pointer;
  box-shadow:var(--shadow-sm); transition:transform .1s, box-shadow .12s, border-color .12s; }
.lib-empty{ grid-column:1/-1; text-align:center; padding:2.5rem 1rem; display:flex; flex-direction:column; align-items:center; gap:.9rem; }
.book-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--gold); }
/* delete (✕) button on book / asset cards — appears on hover */
.card-del{ position:absolute; top:6px; right:6px; width:26px; height:26px; min-height:auto; padding:0; border-radius:50%;
  background:rgba(0,0,0,.55); color:#fff; border:none; font-size:.78rem; line-height:1; cursor:pointer; z-index:3;
  opacity:0; transition:opacity .12s, background .12s; }
.book-card:hover .card-del{ opacity:1; }
.card-del:hover{ background:#C0392B; transform:none; }
/* Make-a-copy button — top-left circle, appears on hover */
.card-copy{ position:absolute; top:6px; left:6px; width:26px; height:26px; min-height:auto; padding:0; border-radius:50%;
  background:rgba(0,0,0,.55); color:#fff; border:none; font-size:.82rem; line-height:1; cursor:pointer; z-index:3;
  opacity:0; transition:opacity .12s, background .12s; }
.book-card:hover .card-copy{ opacity:1; }
.card-copy:hover{ background:var(--primary); transform:none; }
/* Edit button (open in edit mode) — bottom-left, appears on hover */
.card-edit{ position:absolute; bottom:6px; left:6px; min-height:auto; padding:4px 10px; border-radius:var(--r-pill);
  background:rgba(0,0,0,.55); color:#fff; border:none; font-size:.72rem; font-weight:700; cursor:pointer; z-index:3;
  opacity:0; transition:opacity .12s, background .12s; }
.book-card:hover .card-edit{ opacity:1; }
.card-edit:hover{ background:var(--primary); transform:none; }
.card-share{ position:absolute; bottom:6px; right:6px; min-height:auto; padding:4px 10px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.92); border:1px solid var(--line-strong); color:var(--ink); font-size:.78rem; font-weight:600; opacity:0; transition:opacity .15s; }
.book-card:hover .card-share{ opacity:1; }
.card-share:hover{ background:var(--primary); color:#fff; border-color:var(--primary); transform:none; }
/* "📖 Read" hint on a rendered cover (the cover click opens the reader) */
.card-hint{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:.3rem;
  background:rgba(20,15,11,.32); color:#fff; font-weight:800; font-size:1rem; letter-spacing:.02em; opacity:0; transition:opacity .15s; }
.book-card:hover .card-hint{ opacity:1; }
.book-card .cover{ aspect-ratio:1/1; background:linear-gradient(135deg,#F3EADA,#EBE0CC) center/cover no-repeat;
  display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:1.6rem; padding:.8rem; text-align:center; }
.cover-title{ font-family:var(--font-display); font-weight:600; font-size:1.05rem; color:var(--ink-soft); line-height:1.2; }
/* Characters & Elements tiles: fit the WHOLE image (contain) on a clean white background */
#asset-grid .book-card .cover{ background-color:#fff; background-size:contain; background-repeat:no-repeat; background-position:center; }
.book-card .meta{ padding:.6rem .7rem; }
.book-card .meta b{ display:block; font-family:var(--font-display); }

/* editable book title in the menubar: "🪶 Inkling | <title>" (shown only on the book view) */
.book-titlebar{ display:inline-flex; align-items:center; gap:.45rem; min-width:0; flex-shrink:1; }
.bt-sep{ color:var(--line-strong); font-size:1.15rem; font-weight:300; }
.bt-title{ font-family:var(--font-display); font-weight:600; font-size:1.05rem; color:var(--ink);
  border:none; border-bottom:1.5px dashed transparent; background:transparent; border-radius:0; padding:.1rem .15rem;
  min-height:auto; width:auto; field-sizing:content; min-width:6ch; max-width:42vw;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bt-title:hover{ border-bottom-color:var(--line-strong); }
.bt-title:focus{ outline:none; box-shadow:none; border-bottom-color:var(--primary); }
@media (max-width:560px){ .bt-title{ max-width:48vw; font-size:.98rem; } }
/* ---- viewer ---- */
.viewer-head{ display:flex; justify-content:flex-start; gap:.55rem 1rem; align-items:center; flex-wrap:wrap; }
.viewer-actions .danger{ margin-left:auto; }
.byline-input{ font-family:var(--font-display); font-size:1.15rem; color:var(--ink-soft); border:none; border-bottom:1.5px dashed transparent;
  background:transparent; padding:.2rem; min-height:auto; border-radius:0; width:auto; field-sizing:content; min-width:14ch; max-width:60vw; }
.byline-input:hover{ border-bottom-color:var(--line-strong); }
.byline-input:focus{ outline:none; box-shadow:none; border-bottom-color:var(--primary); }
.viewer-actions{ display:flex; gap:.45rem; flex-wrap:wrap; }
.drawer{ background:var(--card-warm); border:1px solid var(--line); border-radius:var(--r-md); padding:1.1rem; margin-top:1rem; box-shadow:var(--shadow-sm); }
.drawer-grid{ display:grid; grid-template-columns:1fr; gap:1rem; }
.drawer-sec textarea, .drawer-sec input{ margin-bottom:.4rem; }

.page-card{ display:grid; grid-template-columns:1fr; gap:1rem; background:var(--card-warm); border:1px solid var(--line);
  border-radius:var(--r-md); padding:1.1rem; margin-top:1rem; box-shadow:var(--shadow-sm); }
.page-art{ aspect-ratio:1/1; max-width:380px; background:linear-gradient(135deg,#F3EADA,#EBE0CC); border-radius:var(--r-md); overflow:hidden;
  display:flex; align-items:center; justify-content:center; color:var(--muted); }
.page-art img{ width:100%; height:100%; object-fit:contain; }
.art-empty{ display:flex; flex-direction:column; align-items:center; gap:.3rem; color:var(--muted); font-size:1.8rem; }
.art-empty span{ font-size:.82rem; }
.page-card.cover-card{ background:linear-gradient(160deg,var(--card),var(--gold-soft)); border-color:var(--line-strong); }
.page-card.cover-card .page-num{ background:var(--gold-soft); color:#8a6d1f; }
.page-body label{ font-size:.8rem; color:var(--muted); display:block; margin:.5rem 0 .2rem; font-weight:700; }
.page-num{ display:inline-block; font-family:var(--font-display); font-weight:600; background:var(--primary-soft); color:var(--primary-ink);
  border-radius:var(--r-pill); padding:.15rem .7rem; font-size:.85rem; }
.page-actions{ display:flex; gap:.45rem; margin-top:.6rem; flex-wrap:wrap; }
.feedback{ margin-top:.5rem; }

/* ---- characters ---- */
.characters{ margin:1.1rem 0; }
/* library group headers (Characters / Elements) — span the whole grid row */
.lib-group-head{ grid-column:1/-1; font-family:var(--font-display); font-weight:800; font-size:1.05rem; color:var(--ink); margin:.5rem 0 0; }
.lib-group-head:first-child{ margin-top:0; }
/* book-page sub-labels when both groups are shown */
.char-group-label{ font-weight:700; font-size:.8rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); margin:.7rem 0 .3rem; }
.char-head{ margin-bottom:.6rem; display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.char-head b{ font-family:var(--font-display); }
.char-row{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:.8rem; }
/* minimal book character/element tile — full artwork scaled to fit (no crop) */
.char-name{ font-weight:700; font-size:.85rem; margin:.4rem 0 .25rem; }

/* ---- modals ---- */
.modal{ position:fixed; inset:0; background:rgba(42,35,32,.5); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; z-index:60; padding:1rem; }
.modal-box{ position:relative; background:#fff; border-radius:var(--r-lg); padding:1.6rem 1.7rem 1.85rem; width:min(480px,94vw); max-height:92vh; overflow:auto; box-shadow:var(--shadow-lg); animation:pop .16s ease-out; }
.modal-box.wide{ width:min(720px,94vw); }
.modal-box.confirm-box{ width:min(420px,94vw); }
.confirm-box .muted{ margin:.2rem 0 1.3rem; }
.confirm-actions{ display:flex; gap:.6rem; justify-content:flex-end; }
.confirm-actions button{ min-width:5.5rem; }
.modal-box::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px; border-radius:var(--r-lg) var(--r-lg) 0 0; background:linear-gradient(90deg,var(--gold),var(--primary)); }
.modal-box h2{ margin:.2rem 0 .3rem; }
.modal-box h3{ margin:1rem 0 .35rem; font-size:1.05rem; }
.modal-box input, .modal-box textarea, .modal-box select{ margin-bottom:.6rem; }
.modal-x{ position:absolute; top:.7rem; right:.7rem; width:34px; height:34px; min-height:auto; border-radius:50%; padding:0; border:1px solid var(--line); background:#fff; }
@keyframes pop{ from{ opacity:0; transform:translateY(8px) scale(.98);} to{ opacity:1; transform:none;} }
.radio{ display:block; padding:.7rem .8rem; border:1.5px solid var(--line); border-radius:var(--r-sm); margin-bottom:.5rem; cursor:pointer; font-weight:600; }
.radio:has(input:checked){ border-color:var(--primary); background:var(--primary-soft); }
.radio input{ width:auto; min-height:auto; margin-right:.5rem; }

/* ---- thumbs (asset library) ---- */
.thumb-row{ display:flex; flex-wrap:wrap; gap:.6rem; margin:.6rem 0; }
.thumb{ position:relative; width:100px; height:100px; border-radius:var(--r-sm); overflow:hidden; border:1px solid var(--line); background:#fff; }
.thumb img{ width:100%; height:100%; object-fit:cover; }
.thumb .tl{ position:absolute; left:0; right:0; bottom:0; font-size:.62rem; background:rgba(0,0,0,.55); color:#fff; padding:2px 4px; text-align:center; }
.thumb .x{ position:absolute; top:2px; right:2px; min-height:auto; width:22px; height:22px; padding:0; border-radius:50%; background:rgba(0,0,0,.6); color:#fff; border:none; font-size:.7rem; }

/* ---- job bar / toast / spinner ---- */
.job-bar{ margin-top:1rem; padding:.7rem 1rem; border-radius:var(--r-md); background:var(--gold-soft); border-left:3px solid var(--gold); }
.job-bar.err{ background:var(--danger-soft); border-left-color:var(--danger); }
.status{ margin-top:.7rem; color:var(--muted); }
.toast{ position:fixed; bottom:1.2rem; left:50%; transform:translateX(-50%); background:var(--ink); color:var(--bg); padding:.6rem 1rem; border-radius:var(--r-md); z-index:80; box-shadow:var(--shadow-lg); }
.spinner{ display:inline-block; width:14px; height:14px; border:2px solid var(--primary); border-top-color:transparent; border-radius:50%; animation:spin .8s linear infinite; vertical-align:-2px; margin-right:6px; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---- read / flip ---- */
/* ===== In-app book reader — realistic page turn, phone → TV ===== */
.reader{ position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(120% 120% at 50% 18%, #3a2f27 0%, #221b15 55%, #140f0b 100%);
  -webkit-tap-highlight-color:transparent; touch-action:none; user-select:none; overflow:hidden; }
.reader-x{ position:absolute; top:max(14px,env(safe-area-inset-top)); right:18px; z-index:8; min-height:auto;
  width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.12); color:#fff; border:none; font-size:1.1rem; backdrop-filter:blur(6px); }
.reader-x:hover{ background:rgba(255,255,255,.24); transform:none; }
.reader-stage{ perspective:2600px; perspective-origin:50% 48%; width:100%; height:100%;
  display:flex; align-items:center; justify-content:center; padding:clamp(10px,3vh,40px); box-sizing:border-box; }
/* open-book spread (size set in JS so it always fits). Single-sided: left page is the blank white back. */
.book{ position:relative; transform-style:preserve-3d; width:var(--pw,40vw); height:var(--ph,70vh);
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.6));
  transition:width .38s cubic-bezier(.2,.85,.25,1), transform .44s cubic-bezier(.2,.85,.25,1); }
.book .page{ position:absolute; top:0; width:var(--pw); height:var(--ph); overflow:hidden; background:#fff; }
.book .page.left{ left:0; border-radius:5px 2px 2px 5px; box-shadow:inset -14px 0 26px -20px rgba(0,0,0,.45); }
.book .page.right{ right:0; border-radius:2px 9px 9px 2px; box-shadow:inset 14px 0 26px -20px rgba(0,0,0,.45); }
.book .page .composed, .book .page .page-art{ width:100%; height:100%; }
.book .page img{ width:100%; height:100%; object-fit:cover; }
.book .page:empty{ background:#fff; }
.spine{ display:none; }
/* closed book (cover / back cover): one page, thicker boards + a stacked page edge on the right */
.book.closed{ box-shadow:8px 0 0 -2px #efe7d6, 10px 0 0 -2px #e2d7bf, 12px 1px 5px -1px rgba(0,0,0,.4);
  filter:drop-shadow(0 34px 66px rgba(0,0,0,.65)); }
.book.closed .page.right{ border-radius:4px 10px 10px 4px; box-shadow:inset 10px 0 24px -18px rgba(0,0,0,.4); }
/* back cover = the closed book seen from behind: mirror the boards + page edge to the left */
.book.closed.back{ box-shadow:-8px 0 0 -2px #efe7d6, -10px 0 0 -2px #e2d7bf, -12px 1px 5px -1px rgba(0,0,0,.4); }
.book.closed.back .page.right{ border-radius:10px 4px 4px 10px; box-shadow:inset -10px 0 24px -18px rgba(0,0,0,.4); }
/* the turning leaf: one page on the right half, hinged at the spine; its back is blank white */
.turn-leaf{ position:absolute; top:0; right:0; width:var(--pw); height:var(--ph); transform-origin:left center;
  transform-style:preserve-3d; transition:transform .82s cubic-bezier(.4,.06,.18,1); z-index:5; will-change:transform; }
.turn-leaf.at-left{ transform:rotateY(-180deg); }
.turn-leaf.go-next{ transform:rotateY(-180deg); }
.turn-leaf.go-prev{ transform:rotateY(0deg); }
.turn-face{ position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; overflow:hidden; background:#fff; }
.turn-face.front{ border-radius:2px 9px 9px 2px; box-shadow:inset 14px 0 26px -20px rgba(0,0,0,.45); }
.turn-face.back{ transform:rotateY(180deg); background:#fff; border-radius:5px 2px 2px 5px; box-shadow:inset -14px 0 26px -20px rgba(0,0,0,.35); }
.turn-face .composed, .turn-face .page-art{ width:100%; height:100%; } .turn-face img{ width:100%; height:100%; object-fit:cover; }
.turn-leaf::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0; transition:opacity .82s;
  background:linear-gradient(100deg, rgba(0,0,0,0) 42%, rgba(0,0,0,.12) 60%, rgba(255,255,255,.14) 74%); }
.turn-leaf.go-next::after, .turn-leaf.go-prev::after{ opacity:1; }
/* text-only pages (inside-front + back cover) */
.flip-textpage{ width:100%; height:100%; background:linear-gradient(135deg,#fffdf7,#f5ecda); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:1.4rem; padding:9% 10%; box-sizing:border-box; }
.flip-textpage .ftp-msg{ font-family:var(--book-font,var(--font-display)); font-size:clamp(1.1rem, .7rem + 1.6vw, 1.8rem); color:#1a1a1a; text-align:center; max-width:30ch; line-height:1.5; }
.flip-textpage .bc-brand{ margin-top:auto; text-align:center; }
.flip-textpage .bc-logo{ font-family:var(--font-display); font-weight:700; font-size:1.3rem; color:var(--ink); }
.flip-textpage .bc-url{ color:var(--primary-ink); font-weight:700; margin:.1rem 0; }
.flip-textpage .bc-line{ color:var(--muted); font-size:.8rem; max-width:34ch; margin:0 auto; line-height:1.45; }
/* big invisible tap/click zones for next/prev (great on touch + TV remotes) */
.reader-edge{ position:absolute; top:0; bottom:0; width:30%; min-height:auto; background:transparent; border:none;
  display:flex; align-items:center; z-index:7; cursor:pointer; opacity:0; transition:opacity .2s; }
.reader-edge.prev{ left:0; justify-content:flex-start; padding-left:2vw; }
.reader-edge.next{ right:0; justify-content:flex-end; padding-right:2vw; }
.reader-edge span{ font-size:2.4rem; color:#fff; width:58px; height:88px; border-radius:14px; background:rgba(0,0,0,.35);
  display:flex; align-items:center; justify-content:center; }
.reader:hover .reader-edge, .reader-edge:focus-visible{ opacity:.85; }
.reader-edge[hidden]{ display:none; }
.reader-foot{ position:absolute; bottom:max(14px,env(safe-area-inset-bottom)); left:0; right:0; text-align:center; z-index:8; pointer-events:none; }
.reader-count{ color:#e9ddc8; font-size:.82rem; letter-spacing:.04em; background:rgba(0,0,0,.3); padding:5px 12px; border-radius:var(--r-pill); }
/* entrance: animate the book up to full screen */
.reader{ transition:opacity .3s ease; }
.reader.opening{ opacity:0; }
.reader .book{ transition:transform .44s cubic-bezier(.2,.85,.25,1), filter .3s; }
.reader.opening .book{ transform:scale(.82); }
@media (max-width:760px), (orientation:portrait){
  .reader-edge span{ display:none; }   /* phones: swipe, no chevrons */
}
.flip-close{ position:absolute; top:1.1rem; right:1.4rem; background:none; border:none; color:#fff; font-size:1.6rem; box-shadow:none; }

/* ---- responsive tiers ---- */
@media (min-width:560px){ .steps{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){ .flip-nav{ width:44px; height:64px; font-size:1.6rem; margin:0 .25rem; } .flip-stage{ max-width:80vw; } }
@media (min-width:680px) and (max-width:979px){ .drawer-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:768px){
  .grid{ grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); }
}
@media (min-width:980px){ .drawer-grid{ grid-template-columns:repeat(3,1fr); } }
.drawer .lang-select, .composer-row .lang-select{ min-width:0; flex:1 1 8rem; }
@media (min-width:1200px){
  .view{ max-width:1160px; }
  .grid{ grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); }
}
@media (max-width:559px){
  .modal .row{ flex-direction:column; align-items:stretch; }
  .modal .row input, .modal .row button{ width:100%; }
}
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } }
/* suggested ideas */
.idea-list{ display:flex; flex-direction:column; gap:.4rem; margin:.6rem 0; }
.idea-list .label{ margin:.2rem 0; }
.idea{ text-align:left; background:var(--accent-soft); border:1.5px solid var(--accent-soft); border-radius:var(--r-md); padding:.6rem .8rem; cursor:pointer; font-weight:600; color:var(--accent-ink); min-height:auto; }
.idea:hover{ border-color:var(--accent); background:#fff; transform:none; box-shadow:var(--shadow-sm); }
.magic-btn{ width:100%; background:var(--accent-soft); border:1.5px solid var(--accent-soft); color:var(--accent-ink); font-weight:700; }
.magic-btn:hover{ border-color:var(--accent); background:#fff; }
/* auth: email+magic primary, password collapsible below */
.pw-details{ margin-top:.8rem; border-top:1px solid var(--line); padding-top:.6rem; }
.pw-details summary{ cursor:pointer; color:var(--muted); font-weight:700; font-size:.85rem; list-style:none; text-align:center; padding:.3rem; }
.pw-details summary::-webkit-details-marker{ display:none; }
.pw-details summary:hover{ color:var(--accent-ink); }
.pw-details input{ margin:.4rem 0; }
/* composer: thumbnails of attached photos */
.photo-preview{ display:flex; flex-wrap:wrap; gap:.5rem; margin:.6rem 0 0; }
.photo-preview .thumb{ width:64px; height:64px; object-fit:cover; border-radius:var(--r-sm);
  border:2px solid #fff; box-shadow:var(--shadow-sm); }
.photo-preview .thumb-ph{ display:flex; align-items:center; justify-content:center; font-size:1.5rem;
  background:var(--bg-tint); color:var(--muted); }
.radio.disabled{ opacity:.55; cursor:not-allowed; }
.radio.disabled .muted{ font-size:.85rem; }
/* ---- admin: usage & cost dashboard ---- */
.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.7rem; margin-bottom:1.4rem; }
.stat{ background:var(--card-warm); border:1px solid var(--line); border-radius:var(--r-md); padding:.9rem 1rem; }
.stat-n{ display:block; font-family:var(--font-display); font-size:1.5rem; font-weight:600; color:var(--primary-ink); }
.stat-l{ display:block; font-size:.8rem; color:var(--muted); margin-top:.15rem; }
.admin-cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.4rem; }
#admin section{ margin:1.4rem 0; }
#admin h3{ margin:0 0 .5rem; font-size:1.05rem; }
.usage-tbl{ width:100%; border-collapse:collapse; font-size:.9rem; }
.usage-tbl th,.usage-tbl td{ text-align:left; padding:.4rem .5rem; border-bottom:1px solid var(--line); }
.usage-tbl th{ color:var(--muted); font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.03em; }
.usage-tbl td:last-child,.usage-tbl th:last-child{ text-align:right; font-variant-numeric:tabular-nums; }
/* admin: per-account billing table */
.acct-tbl input[type=number]{ width:62px; min-height:auto; padding:.2rem .35rem; font-size:.85rem; }
.acct-tbl td:last-child,.acct-tbl th:last-child{ text-align:left; }
.acct-acts{ white-space:nowrap; display:flex; gap:.6rem; }
.acct-acts .link{ padding:.1rem 0; font-size:.82rem; }
.bill-config{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; margin:.2rem 0 .8rem; font-size:.86rem; color:var(--ink-soft); }
.bill-config input[type=number]{ width:80px; min-height:auto; padding:.2rem .35rem; }
.bars{ display:flex; flex-direction:column; gap:.3rem; }
.bar-row{ display:grid; grid-template-columns:48px 1fr 64px; align-items:center; gap:.5rem; font-size:.82rem; }
.bar-d{ color:var(--muted); }
.bar{ background:var(--bg-tint); border-radius:var(--r-pill); height:14px; overflow:hidden; }
.bar-fill{ display:block; height:100%; background:linear-gradient(90deg,var(--gold),var(--primary)); }
.bar-v{ text-align:right; font-variant-numeric:tabular-nums; color:var(--ink-soft); }
/* asset editor refinements */
.hint{ font-size:.82rem; margin:.3rem 0 .2rem; }
hr.sep{ border:none; border-top:1px solid var(--line); margin:1.3rem 0 .9rem; }
#a-photos .muted, #a-renders .muted{ font-size:.88rem; align-self:center; }
/* "new version available" banner */
.update-banner{ background:var(--gold-soft); color:var(--ink); border-bottom:1px solid var(--line-strong);
  text-align:center; padding:.5rem .8rem; font-size:.9rem; font-weight:600; position:sticky; top:0; z-index:30; }
.update-banner .link{ font-size:.9rem; }
/* Characters & Elements: prominent add actions */
.add-actions{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; margin:.3rem 0 1.3rem; }
@media (max-width:560px){ .add-actions{ grid-template-columns:1fr; } }
.add-card{ display:flex; flex-direction:column; align-items:flex-start; gap:.1rem; text-align:left;
  background:var(--card-warm); border:1.5px solid var(--line-strong); border-radius:var(--r-lg);
  padding:1rem 1.1rem; cursor:pointer; box-shadow:var(--shadow-sm); min-height:auto; width:100%; }
.add-card:hover{ border-color:var(--primary); transform:translateY(-1px); box-shadow:var(--shadow-md); }
.add-card .add-emoji{ font-size:1.7rem; line-height:1.2; }
.add-card .add-title{ font-weight:800; font-size:1.05rem; color:var(--ink); }
.add-card .add-sub{ font-size:.85rem; color:var(--muted); font-weight:500; }
/* ---- Characters & Elements editor ---- */
.modal-box.asset-editor{ width:min(1180px,95vw); }
.ae-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.6rem; margin-top:.4rem; }
@media (max-width:740px){ .ae-grid{ grid-template-columns:1fr; gap:1.1rem; } }
.ae-col{ min-width:0; }
.ae-newart{ background:var(--card-warm); border:1px solid var(--line); border-radius:var(--r-md); padding:.8rem .9rem; margin-top:.9rem; }
.ae-newart .label{ margin-top:0; }
.render-list{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
@media (max-width:420px){ .render-list{ grid-template-columns:1fr; } }
.render-card{ border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; background:#fff; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; }
.render-img{ aspect-ratio:1/1; background:#fff; }
.render-img img{ width:100%; height:100%; object-fit:contain; background:#fff; display:block; }
.render-meta{ padding:.45rem .55rem; }
.render-label{ font-weight:800; font-size:.85rem; color:var(--ink); }
.render-instr{ font-size:.74rem; color:var(--muted); margin-top:.15rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.render-acts{ display:flex; gap:.5rem; margin-top:.35rem; }
.render-acts .link{ font-size:.78rem; padding:.15rem 0; }
.render-notes{ width:100%; font-size:.78rem; padding:.35rem .45rem; margin-top:.35rem; border-radius:var(--r-sm);
  border:1.5px solid var(--line); min-height:auto; resize:vertical; }
.render-notes:focus{ border-color:var(--primary); }
.render-fix{ margin-top:.4rem; padding-top:.4rem; border-top:1px dashed var(--line); }
.render-fixtext{ width:100%; font-size:.78rem; padding:.35rem .45rem; border-radius:var(--r-sm); border:1.5px solid var(--primary-soft); min-height:auto; }
.render-fix .hint{ font-size:.72rem; margin:.25rem 0 0; }
.render-fix .row .primary{ padding:.35rem .7rem; min-height:auto; font-size:.82rem; }
/* per-book character artwork picker */
.char-links{ display:flex; flex-direction:column; gap:.1rem; margin:.2rem 0; }
.char-links .link{ font-size:.76rem; padding:.1rem 0; text-decoration:none; }
.char-links .link:hover{ text-decoration:underline; }
.char-picker{ margin-top:.4rem; width:100%; background:var(--card-warm); border:1px solid var(--line); border-radius:var(--r-md); padding:.5rem; }
.char-picker .label{ margin:.1rem 0 .35rem; }
.pick-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(64px,1fr)); gap:.4rem; }
.pick-item{ padding:0; border:1.5px solid var(--line-strong); border-radius:var(--r-sm); overflow:hidden; background:#fff; cursor:pointer; display:flex; flex-direction:column; min-height:auto; }
.pick-item:hover{ border-color:var(--primary); }
.pick-item img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block; }
.pick-item span{ font-size:.66rem; padding:.15rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* book viewer: minimal character/element cards (just thumb + name; opens library) */
.char-open{ display:block; width:100%; padding:0; border:1.5px solid var(--line-strong); border-radius:var(--r-md);
  overflow:hidden; background:#fff; cursor:pointer; box-shadow:var(--shadow-sm); min-height:auto; }
.char-open:hover{ border-color:var(--primary); transform:translateY(-1px); box-shadow:var(--shadow-md); }
.char-open .char-thumb{ width:100%; aspect-ratio:1/1; background:#fff;
  display:flex; align-items:center; justify-content:center; overflow:hidden; }
.char-open .char-thumb img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block; }
.char-open .char-thumb .ph{ display:flex; align-items:center; justify-content:center; height:100%; color:var(--muted); font-size:.8rem; }
.char-open .char-name{ padding:.4rem .3rem; font-weight:700; font-size:.85rem; text-align:center; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bookpick-note{ background:var(--accent-soft); color:var(--accent-ink); border-radius:var(--r-sm); padding:.5rem .7rem; font-size:.85rem; margin:.2rem 0 .6rem; }
.render-img{ position:relative; }
.in-book{ position:absolute; top:.3rem; left:.3rem; background:var(--accent); color:#fff; font-size:.66rem; font-weight:800; padding:.1rem .35rem; border-radius:var(--r-pill); }
.use-in-book{ font-size:.82rem; padding:.4rem; }
/* lock only the SAME target's generate actions while it's in flight (concurrent OK) */
/* book-level actions disabled while THIS book is generating */
body.book-busy #build-btn,
body.book-busy #regen-stale-btn,
body.book-busy .stale-regen,
body.book-busy [data-act="regen"]{
  opacity:.5; pointer-events:none; filter:grayscale(.3);
}
/* asset-modal generate actions disabled while THIS character is generating */
#asset-modal.busy .use-in-book,
#asset-modal.busy .fix-go,
#asset-modal.busy .render-acts .redo,
#asset-modal.busy #a-gen-btn{
  opacity:.5; pointer-events:none; filter:grayscale(.3);
}
/* remove-from-book control on a character card */
.char-card{ position:relative; }
.char-rm{ position:absolute; top:-7px; right:-7px; z-index:3; width:22px; height:22px; min-height:auto;
  padding:0; border-radius:50%; background:#fff; border:1.5px solid var(--line-strong); color:var(--danger);
  font-size:.7rem; font-weight:800; line-height:1; box-shadow:var(--shadow-sm); display:flex; align-items:center; justify-content:center; }
.char-rm:hover{ background:var(--danger-soft); border-color:var(--danger); transform:none; }

/* global art-style bar at top of a book */
.style-bar{ background:var(--card-warm); border:1px solid var(--line); border-radius:var(--r-md); padding:.8rem .9rem; margin:.8rem 0 1rem; }
.style-bar .label{ margin-top:0; }
#style-saved{ font-size:.82rem; }
/* always-visible format bar (page size + artwork layout) */
.format-bar{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:.7rem 1.1rem; margin:0 0 1rem;
  background:var(--card-warm); border:1px solid var(--line); border-radius:var(--r-md); padding:.7rem .9rem; }
.format-bar .fb-field{ display:flex; flex-direction:column; gap:.2rem; }
.format-bar .fb-label{ font-size:.74rem; font-weight:700; color:var(--ink-soft); }
.format-bar .lang-select{ min-height:auto; padding:.35rem .5rem; font-size:.86rem; }
.format-bar .fb-inline{ display:flex; align-items:center; gap:.4rem; }
.format-bar .fb-inline input[type=color]{ width:30px; height:30px; min-height:auto; padding:1px; border:none; }
.format-bar .fb-hint{ font-size:.76rem; align-self:center; margin-left:auto; max-width:240px; }
@media (max-width:560px){ .format-bar .fb-hint{ margin-left:0; max-width:100%; } }
/* per-page character/element chips */
.page-cast{ display:flex; flex-wrap:wrap; gap:.35rem; margin:.2rem 0 .5rem; }
.cast-chip{ font-size:.78rem; padding:.2rem .55rem; min-height:auto; border-radius:var(--r-pill);
  border:1.5px solid var(--line-strong); background:#fff; color:var(--ink-soft); }
.cast-chip:hover{ border-color:var(--primary); transform:none; }
.cast-chip.on{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent-ink); font-weight:700; }
.cast-chip.on::before{ content:"✓ "; }
/* out-of-date (stale) page indicators */
.stale-summary{ background:#FBEFD7; border:1px solid var(--gold); color:var(--ink); border-radius:var(--r-md);
  padding:.6rem .9rem; margin:.2rem 0 1rem; display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; }
.stale-summary .primary{ padding:.4rem .8rem; min-height:auto; font-size:.85rem; }
.page-card.is-stale{ box-shadow:0 0 0 2px var(--gold), var(--shadow-md); }
.page-art{ position:relative; }
.stale-tag{ position:absolute; top:.4rem; left:.4rem; background:var(--gold); color:#3a2d10; font-size:.66rem;
  font-weight:800; padding:.12rem .4rem; border-radius:var(--r-pill); text-transform:uppercase; letter-spacing:.03em; }
.stale-banner{ background:#FBEFD7; border:1px solid var(--gold); border-radius:var(--r-sm); padding:.4rem .55rem;
  font-size:.8rem; margin:.1rem 0 .5rem; color:var(--ink-soft); }
.stale-banner .stale-regen{ font-size:.8rem; }
/* ---- AI assistant ---- */
.asst-launch{ position:fixed; right:1rem; bottom:1rem; z-index:70; border-radius:var(--r-pill);
  background:linear-gradient(180deg,#C95E2B,#B5521F); color:#fff; border-color:var(--primary-ink);
  font-weight:800; box-shadow:var(--shadow-lg); padding:.6rem 1rem; }
/* small "report a problem" launcher — on every page, subtle, below modals (z 55 < 60) */
.report-launch{ position:fixed; left:1rem; bottom:1rem; z-index:55; border-radius:var(--r-pill);
  background:#fff; color:var(--ink-soft); border:1px solid var(--line-strong);
  font-weight:600; font-size:.82rem; box-shadow:var(--shadow-md); padding:.5rem .8rem; opacity:.92; min-height:auto; }
.report-launch:hover{ opacity:1; color:var(--ink); border-color:var(--primary); transform:translateY(-1px); }
.report-shot-preview{ display:block; max-width:100%; max-height:220px; border:1px solid var(--line);
  border-radius:var(--r-sm); margin:.5rem 0; }
.report-diag{ margin:.5rem 0; }
.report-diag summary{ cursor:pointer; font-size:.82rem; }
.report-diag-pre{ white-space:pre-wrap; word-break:break-word; font-size:.72rem; color:var(--ink-soft);
  background:var(--bg); border:1px solid var(--line); border-radius:var(--r-sm); padding:.5rem .6rem;
  margin:.4rem 0 0; max-height:160px; overflow:auto; }
@media (max-width:560px){ .report-launch .rl-text{ display:none; } .report-launch{ left:.6rem; bottom:.6rem; padding:.55rem .7rem; } }

/* ---- site footer (landing + policy pages) ---- */
.site-footer{ border-top:1px solid var(--line); background:#fff; padding:1.6rem 1.2rem; text-align:center; margin-top:2rem; }
.site-footer .sf-links{ font-size:.9rem; line-height:2; color:var(--ink-soft); }
.site-footer .sf-links a{ color:var(--ink-soft); text-decoration:none; }
.site-footer .sf-links a:hover{ color:var(--primary-ink); }
.site-footer .sf-copy{ color:var(--muted); font-size:.8rem; margin:.7rem 0 0; }

/* ---- admin analytics ---- */
.analytics-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:.8rem; margin:.6rem 0; }
.analytics-grid .acct-card b{ display:block; margin-bottom:.5rem; }
.fnl-row{ display:flex; align-items:center; gap:.5rem; margin:.25rem 0; font-size:.85rem; }
.fnl-l{ flex:0 0 8.5rem; color:var(--ink-soft); }
.fnl-bar{ flex:1; height:14px; background:var(--bg-tint); border-radius:7px; overflow:hidden; }
.fnl-bar span{ display:block; height:100%; background:linear-gradient(90deg,var(--gold),var(--primary)); }
.fnl-n{ flex:0 0 auto; min-width:2.5rem; text-align:right; }
.ev-list{ list-style:none; padding:0; margin:0; font-size:.82rem; display:flex; flex-direction:column; gap:.2rem; }
.ev-list li{ color:var(--ink-soft); }
.ev-list .src-name{ font-weight:600; color:var(--ink); margin-right:.4rem; }

/* ---- affiliate dashboard ---- */
.aff-link-row{ display:flex; gap:.5rem; margin:.5rem 0; }
.aff-link-row input{ flex:1; font-family:ui-monospace,monospace; font-size:.85rem; padding:.5rem .6rem;
  border:1px solid var(--line,#e0d8cc); border-radius:8px; background:var(--bg-tint,#faf7f2); }

/* ---- hero trust badges ---- */
.trust-row{ list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem 1.1rem;
  padding:0; margin:.7rem auto 0; max-width:680px; font-size:.86rem; color:var(--ink-soft); font-weight:600; }
.trust-row li{ white-space:nowrap; }
@media (max-width:560px){ .trust-row{ font-size:.8rem; gap:.3rem .8rem; } }

/* ---- guided tour (spotlight overlay) ---- */
#tour-root{ position:fixed; inset:0; z-index:1000; }
.tour-mask{ position:fixed; inset:0; z-index:1000; background:transparent; }     /* swallows page clicks */
.tour-hole{ position:fixed; z-index:1001; border-radius:10px; pointer-events:none;
  box-shadow:0 0 0 9999px rgba(20,15,11,.62); transition:top .25s ease, left .25s ease, width .25s ease, height .25s ease; }
.tour-pop{ position:fixed; z-index:1002; width:min(340px,92vw); background:#fff; border:1px solid var(--line-strong);
  border-radius:var(--r-lg); box-shadow:var(--shadow-lg); padding:1.1rem 1.15rem .9rem; animation:pop .18s ease-out; }
.tour-pop h3{ margin:.1rem 1.6rem .4rem 0; font-family:var(--font-display); font-size:1.15rem; }
.tour-pop p{ margin:0 0 .85rem; color:var(--ink-soft); line-height:1.55; font-size:.92rem; }
.tour-x{ position:absolute; top:.5rem; right:.5rem; width:30px; height:30px; min-height:auto; border-radius:50%;
  padding:0; border:1px solid var(--line); background:#fff; }
.tour-x:hover{ transform:none; }
.tour-foot{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.tour-prog{ color:var(--muted); font-size:.78rem; }
.tour-btns{ display:flex; gap:.4rem; align-items:center; }
.tour-btns button{ min-height:auto; padding:.4rem .7rem; }
.assistant{ position:fixed; right:1rem; bottom:1rem; z-index:75; width:min(380px,94vw); height:min(560px,80vh);
  background:#fff; border:1px solid var(--line-strong); border-radius:var(--r-lg); box-shadow:var(--shadow-lg);
  display:flex; flex-direction:column; overflow:hidden; }
.asst-head{ display:flex; align-items:center; justify-content:space-between; padding:.6rem .8rem;
  background:var(--card-warm); border-bottom:1px solid var(--line); }
.asst-log{ flex:1; overflow:auto; padding:.8rem; display:flex; flex-direction:column; gap:.5rem; background:var(--bg); }
.asst-msg{ max-width:85%; padding:.5rem .7rem; border-radius:var(--r-md); font-size:.9rem; line-height:1.45; white-space:pre-wrap; }
.asst-msg.asst-user{ align-self:flex-end; background:var(--primary-soft); color:var(--primary-ink); border-bottom-right-radius:4px; }
.asst-msg.asst-bot{ align-self:flex-start; background:#fff; border:1px solid var(--line); border-bottom-left-radius:4px; }
.asst-bar{ display:flex; gap:.4rem; padding:.6rem; border-top:1px solid var(--line); background:#fff; }
.asst-bar input{ flex:1; }
.asst-bar .primary{ padding:.5rem .9rem; }
@media (max-width:520px){ .assistant{ right:.4rem; left:.4rem; width:auto; bottom:.4rem; height:78vh; } }
/* ---- page layout / text editor ---- */
.layout-editor{ position:fixed; inset:0; z-index:85; background:rgba(28,22,16,.96); display:flex; flex-direction:column; }
.le-head{ display:flex; align-items:center; justify-content:space-between; padding:.7rem 1rem; background:#fff; border-bottom:1px solid var(--line); }
.le-head-actions{ display:flex; gap:.5rem; align-items:center; }
.le-body{ flex:1; display:flex; gap:1rem; padding:1rem; overflow:auto; }
@media (max-width:760px){ .le-body{ flex-direction:column; } }
.le-stage-wrap{ flex:1; display:flex; flex-direction:column; align-items:center; gap:.6rem; min-width:0; }
.le-stage{ position:relative; width:min(70vh,100%); aspect-ratio:1/1; background:#111; border-radius:var(--r-md); overflow:hidden; box-shadow:var(--shadow-lg); --le-w:600px; }
.le-art{ width:100%; height:100%; object-fit:cover; display:block; }
.le-noart{ display:flex; align-items:center; justify-content:center; color:#bbb; }
.le-box{ position:absolute; padding:.4em .6em; border-radius:.5em; cursor:move; line-height:1.35; user-select:none;
  box-shadow:0 1px 6px rgba(0,0,0,.15); outline:2px dashed transparent; transition:outline-color .1s; }
.le-box:hover{ outline-color:rgba(255,255,255,.5); }
.le-box.sel{ outline:2px solid var(--gold); }
.le-stage-tools{ display:flex; gap:.7rem; align-items:center; flex-wrap:wrap; color:#e8ddcc; font-size:.82rem; }
.le-stage-tools button{ font-size:.85rem; }
.le-panel{ width:300px; flex-shrink:0; background:#fff; border-radius:var(--r-md); padding:.9rem; overflow:auto; }
@media (max-width:760px){ .le-panel{ width:auto; } }
.le-sec{ border-bottom:1px solid var(--line); padding-bottom:.8rem; margin-bottom:.8rem; }
.le-row{ display:flex; align-items:center; gap:.5rem; margin:.45rem 0; font-size:.85rem; }
.le-row label{ width:84px; color:var(--muted); font-weight:700; font-size:.78rem; }
.le-row input[type=range]{ flex:1; }
.le-row input[type=color]{ width:42px; height:30px; padding:2px; min-height:auto; }
.le-row select{ flex:1; min-height:auto; padding:.3rem; }
/* ---- composed page (art + positioned/styled text) — shown on cards + read mode ---- */
/* .composed = the TRIMMED bound page (what Lulu prints). It clips the bleed. */
.composed{ position:relative; width:100%; aspect-ratio:1/1; overflow:hidden; border-radius:inherit; --cp-w:360px; background:linear-gradient(135deg,#FFFDF8,#F3EADA); }
/* .composed-bleed = the full uploaded 8.75" file, inset -1.43% so its edges (the bleed) fall
   outside the trim frame — the visible area is the center 97.14%, exactly like the printed page. */
.composed-bleed{ position:absolute; inset:-1.43%; }
/* art is positioned within the page by inline left/top/width/height (the art frame); the
   .composed-bleed background shows wherever the art doesn't reach (e.g. a text band below). */
.composed-art{ position:absolute; object-fit:cover; }
.composed-empty{ position:absolute; left:0; top:0; width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.3rem; color:var(--muted); font-size:.85rem; }
/* the page art is a movable/resizable object: drag to move (off-edge crops), corner to resize */
.composed.editable .composed-art.art-editable{ cursor:move; }
/* no z-index: DOM order keeps it above the art img but below the text boxes (appended after) */
.art-resize-h{ position:absolute; width:18px; height:18px; border-radius:50%; cursor:nwse-resize;
  background:var(--gold); border:2px solid #fff; box-shadow:var(--shadow-sm); opacity:0; transition:opacity .12s; }
.composed.editable:hover .art-resize-h{ opacity:1; }
.composed-box{ position:absolute; padding:.4em .6em; border-radius:.5em; line-height:1.35; box-shadow:0 1px 5px rgba(0,0,0,.12); }
/* page card art area now holds the composed page at true square proportions */
.page-art{ aspect-ratio:1/1; width:100%; max-width:440px; margin:0 auto; background:none; border-radius:var(--r-md); overflow:hidden; }
/* read mode: composed page fills the stage */
.flip-art{ width:min(80vh,92vw); max-width:680px; }
.flip-art .composed{ border-radius:var(--r-md); box-shadow:0 14px 50px rgba(0,0,0,.5); }
/* safe-area guide in the layout editor: text inside the dashed box is safe from trimming */
.le-safe{ position:absolute; inset:5.7%; border:1.5px dashed rgba(255,255,255,.55); border-radius:4px; pointer-events:none; z-index:1; }
.le-box{ z-index:2; }
/* ---- inline on-page text editing ---- */
.composed.editable{ cursor:default; }
.page-edit-hint{ font-size:.74rem; text-align:center; margin:.3rem 0 0; }
/* no borders on text boxes — only a subtle ring while actively editing the selected one */
.composed-box.editbox{ outline:none; cursor:text; min-height:1em; }
.composed-box.editbox.sel{ outline:2px solid rgba(200,162,75,.85); outline-offset:2px; }
/* handles sit INSIDE the box corners so the frame's overflow:hidden never clips them */
.composed-box .box-handle{ position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%;
  background:var(--gold); border:2px solid #fff; cursor:move; box-shadow:var(--shadow-sm); display:none; z-index:4; }
.composed-box.sel .box-handle{ display:block; }
/* "Add text" lives BELOW the page art, not over it */
.page-edit-row{ display:flex; align-items:center; gap:.6rem; justify-content:center; margin:.5rem auto 0; max-width:440px; }
.page-addtext{ font-size:.82rem; padding:.35rem .8rem; min-height:auto; border-radius:var(--r-pill); }
.page-addtext.on{ background:var(--primary); color:#fff; border-color:var(--primary); }
/* inline artwork controls in the page edit row (backdrop / reset / apply-to-all) */
.art-edit-controls{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.art-edit-controls .art-bg-label{ display:inline-flex; align-items:center; gap:.3rem; font-size:.78rem; }
.art-edit-controls input[type=color]{ width:26px; height:24px; min-height:auto; padding:1px; border:none; vertical-align:middle; }
.art-edit-controls .link{ font-size:.8rem; padding:.1rem 0; }
.page-edit-row .page-edit-hint{ font-size:.74rem; margin:0; }
.page-edit-row{ flex-wrap:wrap; }
.box-toolbar{ position:absolute; z-index:95; display:none; gap:.15rem; background:#fff; border:1px solid var(--line-strong);
  border-radius:var(--r-pill); padding:.25rem .35rem; box-shadow:var(--shadow-lg); align-items:center; }
.box-toolbar.show{ display:flex; }
.box-toolbar button{ min-height:auto; padding:.2rem .4rem; font-size:.8rem; border:none; background:none; box-shadow:none; border-radius:var(--r-sm); }
.box-toolbar button:hover{ background:var(--bg-tint); transform:none; }
.box-toolbar button.on{ background:var(--primary-soft); color:var(--primary-ink); }
.box-toolbar input[type=color]{ width:26px; height:24px; min-height:auto; padding:1px; border:none; }
.box-toolbar select{ min-height:auto; padding:.15rem; font-size:.78rem; width:auto; border:1px solid var(--line); }
/* toolbar colour swatches (text + background pickers) */
.box-toolbar .tb-color{ position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:24px; border-radius:var(--r-sm); cursor:pointer; font-weight:800; font-size:.8rem; overflow:hidden; }
.box-toolbar .tb-color input[type=color]{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; padding:0; border:none; }
.box-toolbar .tb-color:hover{ background:var(--bg-tint); }
.box-toolbar .tb-bg{ border:1.5px solid var(--line-strong); }
.box-toolbar .tb-bg.off{ opacity:.55; }
/* resize handle (bottom-right) for reshaping a text box */
.composed-box .box-resize{ position:absolute; right:2px; bottom:2px; width:15px; height:15px; border-radius:3px; z-index:4;
  background:var(--gold); border:2px solid #fff; cursor:nwse-resize; box-shadow:var(--shadow-sm); display:none; }
.composed-box.sel .box-resize{ display:block; }
.composed-box .box-text{ display:block; white-space:pre-wrap; outline:none; }

/* ---- single-line icon format toolbar ---- */
.box-toolbar{ position:absolute; z-index:95; display:none; align-items:center; gap:.1rem; background:#fff;
  border:1px solid var(--line-strong); border-radius:var(--r-pill); padding:.25rem .4rem; box-shadow:var(--shadow-lg); white-space:nowrap; }
.box-toolbar.show{ display:flex; }
.box-toolbar .tbi{ position:relative; display:inline-flex; align-items:center; justify-content:center; min-width:28px; height:28px;
  padding:0 .35rem; border:none; background:none; box-shadow:none; border-radius:var(--r-sm); cursor:pointer; font-size:.9rem; color:var(--ink); min-height:auto; }
.box-toolbar .tbi:hover{ background:var(--bg-tint); transform:none; box-shadow:none; }
.box-toolbar .tbi.on{ background:var(--primary-soft); color:var(--primary-ink); }
.box-toolbar .tbsep{ width:1px; height:20px; background:var(--line); margin:0 .15rem; }
.box-toolbar .tbmenu{ padding-right:.9rem; }
.box-toolbar .tbmenu::after{ content:'▾'; position:absolute; right:.2rem; font-size:.6rem; color:var(--muted); }
.box-toolbar .tbmenu select{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; border:none; padding:0; min-height:auto; }
.box-toolbar .tbcolor .tci{ font-weight:800; text-shadow:0 0 1px rgba(0,0,0,.4); }
.box-toolbar .tbcolor .tci2{ width:18px; height:18px; border-radius:4px; border:1.5px solid var(--line-strong);
  background-image:linear-gradient(45deg,#ccc 25%,transparent 25%,transparent 75%,#ccc 75%),linear-gradient(45deg,#ccc 25%,#fff 25%,#fff 75%,#ccc 75%); background-size:8px 8px; background-position:0 0,4px 4px; }
.box-toolbar .tbbg .tci2{ display:inline-block; }
.box-toolbar .tbcolor input[type=color]{ position:absolute; inset:0; opacity:0; width:100%; height:100%; cursor:pointer; border:none; padding:0; }
.bg-menu{ position:absolute; z-index:97; background:#fff; border:1px solid var(--line-strong); border-radius:var(--r-md);
  box-shadow:var(--shadow-lg); padding:.4rem; display:flex; flex-direction:column; gap:.3rem; min-width:160px; }
.bg-menu .bg-transp, .bg-menu .bg-pick{ display:flex; align-items:center; gap:.5rem; padding:.4rem .5rem; border-radius:var(--r-sm);
  border:1px solid var(--line); background:#fff; cursor:pointer; font-size:.85rem; min-height:auto; font-weight:600; position:relative; }
.bg-menu .bg-pick .sw{ width:18px; height:18px; border-radius:4px; border:1.5px solid var(--line-strong); }
.bg-menu .bg-pick input[type=color]{ position:absolute; inset:0; opacity:0; width:100%; cursor:pointer; }
/* shadow / outline picker popover with live previews */
.sh-menu{ position:absolute; z-index:97; background:#fff; border:1px solid var(--line-strong); border-radius:var(--r-md);
  box-shadow:var(--shadow-lg); padding:.35rem; display:grid; grid-template-columns:1fr 1fr; gap:.3rem; width:230px; }
.sh-opt{ display:flex; flex-direction:column; align-items:center; gap:.2rem; padding:.4rem; border:1px solid var(--line);
  border-radius:var(--r-sm); background:#fff; cursor:pointer; min-height:auto; }
.sh-opt.on{ border-color:var(--primary); background:var(--primary-soft); }
.sh-opt .sh-prev{ display:inline-block; padding:.15rem .4rem; border-radius:4px; color:#fff; font-weight:800;
  background:linear-gradient(135deg,#7aa,#586); font-size:1rem; }
.sh-opt .sh-lab{ font-size:.72rem; color:var(--muted); font-weight:700; }
.sh-prev.sh-none{ text-shadow:none; }
.sh-prev.sh-soft{ text-shadow:.02em .04em .1em rgba(0,0,0,.55); }
.sh-prev.sh-strong{ text-shadow:.035em .055em .02em rgba(0,0,0,.85); }
.sh-prev.sh-outline{ text-shadow:-.045em -.045em 0 #201610,.045em -.045em 0 #201610,-.045em .045em 0 #201610,.045em .045em 0 #201610,0 .045em 0 #201610,0 -.045em 0 #201610,.045em 0 0 #201610,-.045em 0 0 #201610; }
.sh-prev.sh-outline_bold{ text-shadow:-.08em -.08em 0 #201610,.08em -.08em 0 #201610,-.08em .08em 0 #201610,.08em .08em 0 #201610,0 .08em 0 #201610,0 -.08em 0 #201610,.08em 0 0 #201610,-.08em 0 0 #201610; }
.sh-prev.sh-auto{ text-shadow:-.045em -.045em 0 #201610,.045em -.045em 0 #201610,-.045em .045em 0 #201610,.045em .045em 0 #201610; }

/* ============================================================================
   Responsive + consistency sweep — phone / tablet / desktop
   ========================================================================== */
/* Tables scroll horizontally at ALL widths instead of being clipped (body is overflow-x:clip);
   the multi-column admin/orders tables otherwise lose their right columns on tablets/laptops. */
#admin-body section, #orders-body, #billing-body .acct-card, #account-body{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.usage-tbl{ white-space:nowrap; }
@media (max-width:760px){
  .usage-tbl{ font-size:.84rem; }
  .acct-tbl input[type=number]{ width:54px; }
}
/* ---- mobile hamburger menu (collapses nav + account when they don't fit) ---- */
.hamburger{ display:none; min-height:auto; width:40px; height:38px; padding:0; font-size:1.2rem; line-height:1;
  border-radius:var(--r-md); border:1px solid var(--line-strong); background:#fff; color:var(--ink); }
.hamburger:hover{ border-color:var(--primary); transform:none; }
.mobile-menu{ position:absolute; top:calc(100% + .3rem); right:.6rem; z-index:65; min-width:215px;
  background:#fff; border:1px solid var(--line-strong); border-radius:var(--r-md); box-shadow:var(--shadow-lg);
  padding:.35rem; display:flex; flex-direction:column; }
.mobile-menu.hidden{ display:none; }
.mobile-menu button{ text-align:left; background:none; border:none; box-shadow:none; padding:.6rem .7rem;
  border-radius:var(--r-sm); font-size:.95rem; min-height:auto; color:var(--ink); font-weight:600; }
.mobile-menu button:hover{ background:var(--bg-tint); transform:none; }
.mobile-menu hr{ border:none; border-top:1px solid var(--line); margin:.25rem .3rem; width:auto; }
@media (min-width:761px){ .mobile-menu{ display:none !important; } }   /* desktop never shows the panel */
@media (max-width:760px){
  .hamburger{ display:inline-flex; align-items:center; justify-content:center; }
  #nav-tabs, .acct-menu, .gift-cta{ display:none; }    /* collapsed into the hamburger */
  .topbar{ flex-wrap:nowrap; }                          /* keep the bar to one tidy row */
}
/* Topbar tidies as it narrows */
@media (max-width:760px){ .topbar{ gap:.45rem .7rem; padding:.55rem .85rem; } .userbar{ gap:.45rem; }
  .bt-title{ max-width:34vw; } }
@media (max-width:640px){
  .bt-title{ max-width:30vw; font-size:1rem; }
  .credits-chip{ padding:.24rem .55rem; font-size:.76rem; }
  .acct-btn{ padding:.3rem .55rem; font-size:.82rem; }
  .userbar .who{ max-width:22vw; }
}
@media (max-width:380px){ .book-titlebar{ display:none; } }   /* truly tiny screens — title shows truncated above this */
/* Comfortable mobile padding + headings, single-column cards */
@media (max-width:640px){
  .view{ padding:1.1rem .8rem 2.4rem; }
  .view-head h2{ font-size:1.45rem; }
  .acct-grid{ grid-template-columns:1fr; gap:.9rem; }
  .acct-card{ padding:1rem; }
  .credits-packs{ grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); }
  .stat-grid{ grid-template-columns:1fr 1fr; }
  .bal-big{ font-size:1.7rem; }
}
/* Full-width modals on phones */
/* phones: modals become full-screen sheets (edge-to-edge, no wasted chrome) */
@media (max-width:560px){
  .modal{ padding:0; align-items:stretch; justify-content:stretch; }
  .modal-box, .modal-box.wide, #create-modal .modal-box, .modal-box.asset-editor{
    width:100%; max-width:100%; min-height:100%; height:100%; max-height:none;
    border-radius:0; box-shadow:none; overflow:auto; animation:sheetup .24s ease-out;
    padding:1.35rem 1.1rem calc(1.5rem + env(safe-area-inset-bottom));
    padding-top:calc(1.35rem + env(safe-area-inset-top)); box-sizing:border-box; }
  .modal-box::before{ border-radius:0; }
  .modal-x{ top:calc(.7rem + env(safe-area-inset-top)); right:.8rem; }
}
@keyframes sheetup{ from{ transform:translateY(100%);} to{ transform:none;} }
/* Account dropdown never overflows the right edge on tiny screens */
@media (max-width:420px){ .acct-dropdown{ right:-.3rem; min-width:185px; } }
/* Bigger tap area for small link-buttons on touch devices */
@media (hover:none){ .acct-acts .link, .pm-row .link, .char-links .link, .page-edit-row .link{ padding:.45rem .15rem; } }
/* Inline text-editing toolbar wraps to stay on-screen on phones */
@media (max-width:640px){
  .box-toolbar{ max-width:94vw; flex-wrap:wrap; justify-content:center; }
  .format-bar{ gap:.5rem .7rem; }
}

/* ===== landing: how-it-works / gallery / connect / gift / pricing ===== */
.composer-sub{ font-size:.9rem; margin:-.35rem 0 .85rem; }
.section-head{ text-align:center; margin:2.6rem 0 1.1rem; }
.section-head h3, .pricing h3{ font-family:var(--font-display); font-size:clamp(1.5rem, 1.2rem + 1.6vw, 2rem); margin:0 0 .25rem; color:var(--ink); }
.sec-lead{ max-width:62ch; margin:0 auto 1.3rem; line-height:1.6; }
.art-gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1.1rem; }
.art-gallery figure{ margin:0; }
.art-gallery img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--r-lg); box-shadow:var(--shadow-md); background:#fff; }
.art-gallery figcaption{ margin-top:.5rem; font-weight:700; color:var(--ink-soft); font-size:.9rem; }
.pricing{ text-align:center; margin:3rem 0 1.5rem; }
.price-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin:1.4rem 0; text-align:left; }
.price-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.3rem; box-shadow:var(--shadow-sm); }
.price-card .pc-big{ font-family:var(--font-display); font-size:1.7rem; font-weight:700; color:var(--primary-ink); }
.price-card b{ display:block; margin:.35rem 0; }
.price-card span{ color:var(--muted); font-size:.92rem; line-height:1.5; }
.pricing-cta{ margin:1.6rem 0 .6rem; display:flex; flex-direction:column; align-items:center; gap:.4rem; }
.pricing-cta .big{ width:auto; max-width:360px; }
@media (max-width:760px){
  .price-cards{ grid-template-columns:repeat(2,1fr); }   /* 2-up tablet tier (was 1) */
  .art-gallery{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:520px){ .price-cards{ grid-template-columns:1fr; } }
@media (max-width:480px){ .art-gallery{ grid-template-columns:1fr; } }
/* shorten the long nav tab on tablets so the sticky topbar stays one line */
@media (max-width:860px){ .tab-ext{ display:none; } }
/* touch: bump overlay tap targets to ~44px and keep hover-reveal card actions visible */
@media (hover:none){
  .modal-x, .thumb .x, .char-rm, .card-del{ width:44px; height:44px; }
  .box-toolbar .tbi{ min-height:40px; }
  .card-del, .card-edit, .card-share, .char-rm{ opacity:1; }
}