: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; }
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); }
: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:600; 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; }

/* ---- layout ---- */
.view{ max-width:1080px; margin:0 auto; padding:1.6rem 1.1rem 3rem; }
#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); 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: Netflix-style full-bleed video banner (CREATE) ---- */
.hero{ position:relative; width:100vw; margin-left:calc(50% - 50vw); min-height:clamp(440px,70vh,640px);
  display:flex; align-items:center; overflow:hidden; background:#1b140e; }
@media (max-width:759px){ .hero{ min-height:auto; } .hero-inner{ padding:1.6rem 1.1rem; } }
.hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-scrim{ position:absolute; inset:0; pointer-events:none; background:
  linear-gradient(90deg, rgba(20,15,10,.6) 0%, rgba(20,15,10,.3) 46%, rgba(20,15,10,.06) 100%),
  linear-gradient(0deg, rgba(20,15,10,.4), transparent 52%); }
.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:#FFD9A8; text-shadow:0 1px 8px rgba(0,0,0,.4); }
.hero-text .display{ font-size:clamp(2.1rem,1.5rem+3vw,3.5rem); margin:.5rem 0 .6rem; color:#fff; text-shadow:0 2px 18px rgba(0,0,0,.45); }
.hero .lead{ font-size:1.0625rem; color:rgba(255,255,255,.92); max-width:46ch; text-shadow:0 1px 10px rgba(0,0,0,.4); }
.hero .proof{ color:rgba(255,255,255,.86); }
.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; }
.reassure{ font-size:.82rem; margin:.6rem 0 0; }
.upload-btn{ display:inline-flex; align-items:center; gap:.3rem; cursor:pointer; color:var(--accent); 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{ 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; }
.book-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--gold); }
.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; }
.book-card .meta{ padding:.6rem .7rem; }
.book-card .meta b{ display:block; font-family:var(--font-display); }

/* ---- viewer ---- */
.viewer-head{ display:flex; justify-content:space-between; gap:1rem; align-items:center; flex-wrap:wrap; }
.title-input{ font-family:var(--font-display); font-size:1.5rem; font-weight:600; border:none; border-bottom:1.5px dashed var(--line-strong);
  background:transparent; padding:.2rem; border-radius:0; min-height:auto; min-width:0; flex:1 1 240px; max-width:100%; }
@media (max-width:600px){ .title-input{ width:100%; font-size:1.25rem; } }
.viewer-actions .danger{ margin-left:auto; }
.title-input:focus{ box-shadow:none; border-bottom-color:var(--primary); }
.byline-input{ border:none; background:transparent; color:var(--muted); padding:.2rem; min-height:auto; max-width:340px; }
.byline-input:focus{ box-shadow:none; }
.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; }
.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; }
.char-card{ border:1px solid var(--line); border-radius:var(--r-md); padding:.7rem; text-align:center; background:var(--card-warm); }
.char-thumb{ width:100%; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius:var(--r-sm); background:linear-gradient(135deg,#F3EADA,#EBE0CC); }
.char-thumb img{ max-width:100%; max-height:100%; object-fit:cover; }
.char-thumb .ph{ color:var(--muted); font-size:.78rem; }
.char-name{ font-weight:700; font-size:.85rem; margin:.4rem 0 .25rem; }
.char-note{ width:100%; font-size:.72rem; padding:.25rem .4rem; margin:.25rem 0; min-height:auto; }
.char-gen,.char-lock{ width:100%; font-size:.78rem; padding:.35rem; margin-bottom:.25rem; min-height:auto; }
.char-gen{ background:var(--primary-soft); border-color:var(--primary-soft); }

/* ---- 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.5rem 1.5rem 1.75rem; width:min(440px,96vw); max-height:92vh; overflow:auto; box-shadow:var(--shadow-lg); animation:pop .16s ease-out; }
.modal-box.wide{ width:min(640px,96vw); }
.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:var(--bg-tint); }
.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 ---- */
.flip{ position:fixed; inset:0; background:rgba(28,22,16,.94); z-index:90; display:flex; align-items:center; justify-content:center; }
.flip-stage{ text-align:center; max-width:92vw; max-height:92vh; display:flex; flex-direction:column; align-items:center; }
.flip-art img{ max-width:100%; max-height:74vh; border-radius:var(--r-md); box-shadow:0 14px 50px rgba(0,0,0,.5); }
.flip-empty{ color:#bbb; padding:80px; }
.flip-caption{ color:#FBF6EC; font-family:var(--font-display); font-style:italic; font-size:1.25rem; margin-top:1rem; max-width:760px; }
.flip-count{ color:#cbb; font-size:.8rem; margin-top:.5rem; }
.flip-nav{ background:rgba(255,255,255,.12); color:#fff; border:none; font-size:2.2rem; width:62px; height:90px; border-radius:var(--r-md); margin:0 .8rem; box-shadow:none; }
.flip-nav:hover{ background:rgba(255,255,255,.25); transform:none; }
.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:760px){ .hero-inner{ grid-template-columns:1.1fr 1fr; } }
@media (min-width:768px){
  .page-card{ grid-template-columns:minmax(220px,300px) 1fr; }
  .page-art{ max-width:none; }
  .grid{ grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); }
}
@media (min-width:980px){ .drawer-grid{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1000px){ .hero-inner{ grid-template-columns:1.2fr 1fr; } }
@media (prefers-reduced-motion:reduce){ .hero-bg{ display:none; } .hero{ background:#1b140e url(/img/hero-poster.jpg) center/cover; } }
.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); }