:root {
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color: #28231f;
  background: #f5f1e9;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; }
button, a { -webkit-tap-highlight-color: transparent; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 64px;
  padding: 0 clamp(18px, 4vw, 56px);
  border-bottom: 1px solid rgba(54, 45, 38, .12);
  background: rgba(245, 241, 233, .88);
  backdrop-filter: blur(16px);
}

.back-link { color: #504940; text-decoration: none; font-size: .84rem; }
.brand { font: 700 .74rem/1 Georgia, serif; letter-spacing: .18em; }
.brand span { color: #b06d68; }
.count { justify-self: end; color: #81776d; font-size: .78rem; }

main { width: min(1420px, calc(100% - 36px)); margin: 0 auto; }
.intro { max-width: 780px; padding: clamp(72px, 10vw, 138px) 0 60px; }
.kicker { margin: 0 0 22px; color: #a05c59; font-size: .68rem; font-weight: 700; letter-spacing: .22em; }
.intro h1 { margin: 0; font: 500 clamp(2.8rem, 7vw, 6.4rem)/1.02 Georgia, "Songti SC", serif; letter-spacing: -.06em; }
.lead { max-width: 620px; margin: 30px 0 0; color: #756b62; font-size: clamp(.95rem, 2vw, 1.12rem); line-height: 1.8; }

.filters { display: flex; gap: 8px; padding: 0 0 28px; overflow-x: auto; scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
.filters button {
  flex: 0 0 auto;
  padding: 10px 15px;
  border: 1px solid #d9d1c7;
  border-radius: 999px;
  color: #625950;
  background: transparent;
  font: inherit;
  font-size: .8rem;
  cursor: pointer;
}
.filters button:hover, .filters button.active { color: #fff; border-color: #342e29; background: #342e29; }

.gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 34px); }
.template-card { min-width: 0; padding: 0; border: 0; color: inherit; background: none; text-align: left; cursor: pointer; }
.template-card > .template { box-shadow: 0 14px 38px rgba(64, 52, 43, .1); transition: transform .25s ease, box-shadow .25s ease; }
.template-card:hover > .template { transform: translateY(-7px); box-shadow: 0 22px 52px rgba(64, 52, 43, .17); }
.card-meta { display: flex; align-items: center; justify-content: space-between; padding: 14px 2px 4px; }
.card-meta > span { display: grid; gap: 4px; }
.card-meta b { font-size: .92rem; }
.card-meta small { color: #8d8379; font-size: .7rem; }
.card-meta > i { color: #8c6a63; font-size: .72rem; font-style: normal; }

.template {
  position: relative;
  aspect-ratio: 5 / 7;
  overflow: hidden;
  padding: 7.2%;
  color: var(--ink);
  background: var(--paper);
  container-type: inline-size;
  isolation: isolate;
}

/* 每一页都使用外部样式表中的固定主题，避免被网站的安全策略拦截。 */
.theme-cream-ribbon { --paper:#f8f0df; --accent:#d6b98c; --ink:#745c43; }
.theme-vanilla-window { --paper:#fff8ea; --accent:#e6cfa9; --ink:#5c5045; }
.theme-oat-morning { --paper:#eee3ce; --accent:#c7a982; --ink:#4f463c; }
.theme-blush-heart { --paper:#fde8ee; --accent:#e89aae; --ink:#7c3c54; }
.theme-rose-glow { --paper:#f9d7e1; --accent:#cb6e8d; --ink:#632a44; }
.theme-pink-confetti { --paper:#ffdce8; --accent:#ff8eae; --ink:#7c3150; }
.theme-midnight-spotlight { --paper:#10142c; --accent:#7867d7; --ink:#f1d48a; }
.theme-gold-encore { --paper:#19130f; --accent:#c79b4a; --ink:#f3e3b6; }
.theme-violet-starlight { --paper:#24133f; --accent:#9a73da; --ink:#f5cfee; }
.theme-one-polaroid { --paper:#eee7dc; --accent:#b56c55; --ink:#3c3834; }
.theme-taped-memories { --paper:#f3eadb; --accent:#7aa2a1; --ink:#4e4740; }
.theme-film-strip { --paper:#e9ddca; --accent:#313131; --ink:#9b5d45; }
.theme-three-chapters { --paper:#f1e9dc; --accent:#a87355; --ink:#4d4038; }
.theme-days-together { --paper:#e5eef0; --accent:#527f88; --ink:#29484f; }
.theme-three-stars { --paper:#182337; --accent:#c7a75a; --ink:#f1e8cf; }
.theme-ivory-letter { --paper:#fbf4e6; --accent:#b99871; --ink:#55483d; }
.theme-kraft-note { --paper:#d9bd91; --accent:#8d5b3d; --ink:#332d28; }
.theme-blue-aerogram { --paper:#eff5f1; --accent:#527fa3; --ink:#b95c63; }
.theme-editorial-serif { --paper:#f2eee5; --accent:#a96e51; --ink:#222222; }
.theme-bold-cover { --paper:#ef5a47; --accent:#f7e7ce; --ink:#202020; }
.theme-mono-profile { --paper:#eceae6; --accent:#8a8a86; --ink:#252525; }
.theme-birthday-wish { --paper:#fff0cd; --accent:#f29a72; --ink:#773e38; }
.theme-balloon-day { --paper:#dff1f2; --accent:#f39daf; --ink:#3b6c76; }
.theme-confetti-hour { --paper:#fff2dc; --accent:#f7b84a; --ink:#5a375f; }
.theme-concert-ticket { --paper:#ebe2cf; --accent:#b94e48; --ink:#292727; }
.theme-our-star-map { --paper:#111c36; --accent:#6484b7; --ink:#e8d9a8; }
.theme-memory-film { --paper:#2b1818; --accent:#b33f34; --ink:#efd7aa; }
.theme-photo-booth { --paper:#e8e0d6; --accent:#2b2b2b; --ink:#c96370; }
.template::after { content: ""; position: absolute; inset: 3.5%; z-index: -1; border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); pointer-events: none; }
.template-top { position: relative; z-index: 3; display: flex; align-items: flex-start; justify-content: space-between; font: 700 2.8cqw/1.2 Arial, sans-serif; letter-spacing: .14em; }
.template-top b { color: var(--accent); font: 500 7cqw/1 Georgia, serif; letter-spacing: 0; }
.copy { position: absolute; z-index: 3; left: 7.2%; right: 7.2%; bottom: 8.5%; }
.date { margin: 0 0 2.6cqw; color: var(--accent); font: 700 2.4cqw/1 Arial, sans-serif; letter-spacing: .15em; }
.copy h3 { margin: 0; font: 500 7.4cqw/1.08 Georgia, "Songti SC", serif; letter-spacing: -.05em; }
.message { max-width: 82%; margin: 3.2cqw 0 0; font: 400 2.8cqw/1.65 "Songti SC", serif; }
.signature { margin: 2.7cqw 0 0; font: 500 2.2cqw/1.4 Arial, sans-serif; opacity: .72; }
.page-number { position: absolute; right: 7.2%; bottom: 3.7%; font: 700 1.9cqw/1 Arial, sans-serif; letter-spacing: .12em; opacity: .5; }
.photos { position: absolute; z-index: 1; inset: 17% 8% 43%; }
.photo { position: absolute; display: grid; place-items: center; overflow: hidden; border: .8cqw solid color-mix(in srgb, var(--paper) 85%, white); background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 70%, white), color-mix(in srgb, var(--ink) 74%, var(--paper))); box-shadow: 0 2cqw 6cqw color-mix(in srgb, var(--ink) 18%, transparent); }
.photo:is(button) { padding: 0; font: inherit; cursor: pointer; }
.photo.is-active { outline: 1.2cqw solid #fff; outline-offset: -.8cqw; box-shadow: 0 0 0 1.8cqw #b55f72, 0 2cqw 6cqw color-mix(in srgb, var(--ink) 18%, transparent); }
.photo::before, .photo::after { content:""; position:absolute; border-radius: 50%; background: color-mix(in srgb, var(--paper) 34%, transparent); }
.photo::before { width: 58%; aspect-ratio: 1; left: -16%; top: -28%; }
.photo::after { width: 74%; aspect-ratio: 1; right: -25%; bottom: -45%; }
.photo i { position: relative; z-index: 1; padding:.8cqw 1.2cqw; border:1px solid color-mix(in srgb,var(--paper) 38%,transparent); border-radius:999px; color:color-mix(in srgb,var(--paper) 82%,white); background:color-mix(in srgb,var(--ink) 18%,transparent); font:700 2cqw/1 Arial,sans-serif; letter-spacing:.12em; opacity:.9; }
.photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 25%; }
.photo.has-image::before,.photo.has-image::after,.photo.has-image i { display:none; }
.photo-1 { inset: 0; }
.decor { position: absolute; z-index: 0; border-radius: 50%; background: var(--accent); opacity: .16; }
.decor-a { width: 38%; aspect-ratio: 1; right: -17%; top: 16%; }
.decor-b { width: 22%; aspect-ratio: 1; left: -10%; bottom: 12%; }

/* 让相同骨架在不同主题中呈现明确、可辨认的成品样式。 */
.theme-cream-ribbon::before { content:""; position:absolute; z-index:2; top:0; bottom:0; left:12%; width:3.2%; background:color-mix(in srgb,var(--accent) 52%,transparent); }
.theme-blush-heart .decor-a { border-radius:50% 50% 0 50%; transform:rotate(45deg); opacity:.28; }
.theme-pink-confetti { background:radial-gradient(circle at 13% 20%,#fff 0 1.1%,transparent 1.3%),radial-gradient(circle at 83% 31%,var(--accent) 0 1%,transparent 1.2%),radial-gradient(circle at 72% 9%,#fff 0 .7%,transparent .9%),var(--paper); }
.theme-midnight-spotlight::before { content:""; position:absolute; inset:-8% 18% 39%; background:linear-gradient(165deg,transparent 0 27%,color-mix(in srgb,var(--accent) 46%,transparent) 28% 62%,transparent 63%); filter:blur(1.2cqw); }
.theme-gold-encore .template-top,.theme-violet-starlight .template-top,.theme-three-stars .template-top,.theme-our-star-map .template-top,.theme-memory-film .template-top { color:var(--ink); }
.theme-gold-encore .photo,.theme-memory-film .photo { background:linear-gradient(150deg,#8f5c37,#201712 64%,#070605); }
.theme-violet-starlight { background:radial-gradient(circle at 50% 22%,#5a3b82 0,transparent 36%),var(--paper); }
.theme-three-stars .photos { inset:17% 8% 49%; display:flex; align-items:center; gap:4%; }
.theme-three-stars .photo { position:relative; inset:auto; flex:1; aspect-ratio:1; border-radius:50%; box-shadow:none; }
.theme-one-polaroid::before,.theme-taped-memories::before { content:""; position:absolute; z-index:2; width:24%; height:5%; left:38%; top:15%; background:rgba(214,188,130,.64); transform:rotate(-4deg); }
.theme-film-strip .photo i,.theme-photo-booth .photo i { padding:.45cqw; border:0; background:transparent; font-size:1.45cqw; }
.theme-ivory-letter .copy h3 { font-style:italic; }
.theme-kraft-note { background:linear-gradient(105deg,rgba(74,48,32,.08),transparent 24%),repeating-linear-gradient(0deg,transparent 0 7.2%,rgba(75,49,32,.08) 7.4%),var(--paper); }
.theme-blue-aerogram .template-top b { transform:rotate(-8deg); }
.theme-editorial-serif .copy { bottom:7%; }
.theme-editorial-serif .copy h3 { font-size:8.6cqw; }
.theme-bold-cover::before { content:"SPECIAL\A EDITION"; white-space:pre; position:absolute; z-index:2; left:5%; top:18%; color:var(--accent); font:900 10cqw/.82 Arial,sans-serif; letter-spacing:-.08em; }
.theme-bold-cover .template-top,.theme-bold-cover .copy { color:var(--ink); }
.theme-mono-profile .photo { background:linear-gradient(145deg,#d4d4d1,#5b5b59 58%,#222); }
.theme-birthday-wish { background:radial-gradient(circle at 15% 17%,#fff 0 1%,transparent 1.2%),radial-gradient(circle at 80% 22%,#f7b84a 0 1.3%,transparent 1.5%),linear-gradient(160deg,#fff8df,var(--paper)); }
.theme-balloon-day .decor-a,.theme-balloon-day .decor-b { opacity:.42; box-shadow:-5cqw 8cqw 0 color-mix(in srgb,var(--accent) 60%,#fff),-11cqw -2cqw 0 color-mix(in srgb,#6bb8c5 50%,#fff); }
.theme-confetti-hour { background:radial-gradient(circle at 18% 14%,#d66382 0 1%,transparent 1.2%),radial-gradient(circle at 82% 26%,#5a8cb8 0 1%,transparent 1.2%),radial-gradient(circle at 68% 8%,var(--accent) 0 .8%,transparent 1%),var(--paper); }
.theme-concert-ticket::before { content:"1028"; position:absolute; right:-3%; top:21%; color:color-mix(in srgb,var(--accent) 22%,transparent); font:900 22cqw/1 Arial,sans-serif; transform:rotate(90deg); }
.theme-our-star-map { background:radial-gradient(circle at 20% 12%,var(--ink) 0 .4%,transparent .6%),radial-gradient(circle at 76% 32%,var(--ink) 0 .45%,transparent .65%),radial-gradient(circle at 63% 8%,var(--ink) 0 .3%,transparent .5%),radial-gradient(circle at 33% 42%,var(--accent) 0 .35%,transparent .55%),var(--paper); }
.theme-photo-booth .photos { box-shadow:0 2cqw 7cqw rgba(30,25,22,.28); }

.notice { display:grid; grid-template-columns:1fr 3fr; gap:30px; margin:clamp(70px,10vw,140px) 0 80px; padding:32px 0; border-top:1px solid #d4ccc1; border-bottom:1px solid #d4ccc1; }
.notice p { margin:0; color:#71675e; line-height:1.8; }
.notice-label { color:#342e29 !important; font-weight:700; }
footer { padding:0 20px 36px; color:#93887d; font-size:.62rem; text-align:center; letter-spacing:.18em; }

.preview-dialog { width:min(1120px,calc(100% - 28px)); max-height:calc(100vh - 28px); padding:0; overflow:auto; border:0; border-radius:18px; color:#29241f; background:#f7f3ec; box-shadow:0 30px 100px rgba(20,16,12,.35); }
.preview-dialog::backdrop { background:rgba(25,20,17,.72); backdrop-filter:blur(8px); }
.dialog-close { position:absolute; z-index:5; top:16px; right:18px; width:38px; height:38px; border:1px solid #d1c9bf; border-radius:50%; color:#3d3732; background:rgba(255,255,255,.72); font-size:1.5rem; cursor:pointer; }
.dialog-layout { display:grid; grid-template-columns:minmax(320px,1.15fr) minmax(280px,.85fr); min-height:620px; }
.large-preview { display:grid; place-items:center; min-height:620px; padding:42px; background:#e9e2d8; }
.large-preview .template { width:min(100%,430px); box-shadow:0 20px 60px rgba(60,45,35,.2); }
.dialog-info { align-self:center; padding:52px; }
.dialog-category { margin:0 0 12px; color:#a15f5c; font-size:.7rem; font-weight:700; letter-spacing:.16em; }
.dialog-info h2 { margin:0; font:500 clamp(2rem,4vw,3.4rem)/1.1 Georgia,"Songti SC",serif; }
.dialog-quote { margin:22px 0 0; color:#756c63; line-height:1.8; }
.dialog-info > p:not(.dialog-category,.dialog-note) { margin:18px 0 32px; color:#756c63; line-height:1.75; }
dl { display:grid; gap:14px; margin:0; }
dl div { display:grid; grid-template-columns:76px 1fr; padding-bottom:12px; border-bottom:1px solid #ddd4ca; }
dt { color:#91867c; font-size:.78rem; } dd { margin:0; font-size:.82rem; }
.dialog-note { margin:32px 0 0; padding:16px; border-radius:10px; color:#766b61; background:#eee7dd; font-size:.75rem; line-height:1.7; }

.compose-steps { display:flex; flex-wrap:wrap; gap:8px; margin-top:34px; }
.compose-steps span { padding:8px 12px; border:1px solid #d8cfc4; border-radius:999px; color:#887d72; font-size:.74rem; }
.compose-steps .done { color:#6e514d; border-color:#d6b4ad; background:#f4e3df; }
.compose-steps .active { color:#fff; border-color:#342e29; background:#342e29; }
.draft-summary { position:relative; max-width:720px; margin-top:22px; padding:22px 70px 22px 24px; border-left:3px solid #b06d68; color:#5d554e; background:#eee7dd; }
.draft-summary strong { display:block; margin-bottom:8px; color:#a05c59; font-size:.78rem; }
.draft-summary p { margin:0; font:500 1rem/1.7 Georgia,"Songti SC",serif; }
.draft-summary a { position:absolute; top:20px; right:20px; color:#8c5e59; font-size:.72rem; }

.compose-controls,.final-controls,.success-controls { margin-top:26px; }
.slot-instruction { margin:0 0 12px; color:#675e56; font-size:.82rem; line-height:1.6; }
.photo-filters { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:12px; }
.photo-filters button,.photo-pagination button,.final-actions button { padding:8px 11px; border:1px solid #d6cdc2; border-radius:8px; color:#665d55; background:#fff; font:inherit; font-size:.72rem; cursor:pointer; }
.photo-filters button.active { color:#fff; border-color:#4a4038; background:#4a4038; }
.photo-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; min-height:170px; max-height:300px; padding:2px; overflow:auto; }
.photo-choice { position:relative; aspect-ratio:1; padding:0; overflow:hidden; border:2px solid transparent; border-radius:7px; background:#ded6cc; cursor:pointer; }
.photo-choice img { width:100%; height:100%; object-fit:cover; object-position:center 25%; }
.photo-choice span { position:absolute; left:4px; bottom:4px; padding:2px 5px; border-radius:999px; color:#fff; background:rgba(111,58,76,.82); font-size:.56rem; }
.photo-choice.selected { border-color:#b45e72; box-shadow:0 0 0 2px rgba(180,94,114,.2); }
.photo-loading { grid-column:1/-1; align-self:center; color:#8c8278; text-align:center; font-size:.78rem; }
.photo-pagination { display:flex; align-items:center; justify-content:space-between; margin-top:10px; color:#897e74; font-size:.7rem; }
.photo-pagination button:disabled { cursor:not-allowed; opacity:.4; }
.primary-action { width:100%; margin-top:14px; padding:13px 16px; border:0; border-radius:9px; color:#fff; background:#8a485d; font:700 .84rem/1.2 Inter,"PingFang SC","Microsoft YaHei",sans-serif; cursor:pointer; }
.primary-action:disabled { cursor:not-allowed; opacity:.42; }
.compose-status { min-height:1.4em; margin:10px 0 0; color:#6e635b; font-size:.75rem; }
.compose-status.error { color:#a2303e; }
.personal-photo { margin-bottom:20px; padding:16px; border:1px solid #dfc7ca; border-radius:12px; background:#fff8f5; }
.personal-photo > label { display:block; color:#8a485d; font-weight:700; font-size:.86rem; }
.personal-photo > label span { margin-left:6px; color:#897e74; font-size:.72rem; font-weight:400; }
.personal-photo > p { font-size:.75rem; line-height:1.7; color:#6e635b; }
.personal-photo > input { width:100%; min-width:0; font:inherit; font-size:.75rem; }
.personal-photo-selected { display:flex; align-items:center; gap:12px; margin-top:14px; }
.personal-photo-selected[hidden] { display:none; }
.personal-photo-selected img { width:76px; height:90px; object-fit:contain; background:#efe6de; border-radius:6px; }
.personal-photo-selected button { display:block; margin:6px 0; padding:8px; border:1px solid #d6cdc2; border-radius:6px; background:white; color:#76505b; cursor:pointer; font:inherit; font-size:.72rem; }
.final-controls > p { margin:0 0 18px; color:#6e645b; line-height:1.7; }
.final-actions { display:grid; grid-template-columns:1fr 1.5fr; gap:9px; }
.final-actions .primary-action { margin:0; }
.success-controls { padding:24px; border-radius:12px; background:#e8efe8; }
.success-controls strong { color:#315d45; font:600 1.3rem/1.3 Georgia,"Songti SC",serif; }
.success-controls p { color:#557061; line-height:1.7; }
.success-controls a { display:inline-block; color:#315d45; font-weight:700; }
.paper-download-result { margin-top:14px; padding:14px; border:1px solid #cbd9ce; border-radius:10px; background:#fff; }
.paper-download-result[hidden] { display:none; }
.paper-download-result img { display:block; width:min(100%,260px); margin:0 auto 12px; box-shadow:0 8px 24px rgba(43,64,50,.18); }
.paper-download-result a { display:block; padding:11px 14px; border-radius:8px; color:#fff; background:#315d45; text-align:center; text-decoration:none; }
.paper-download-result small { display:block; margin-top:10px; color:#65756a; line-height:1.6; }
.paper-receipt { margin-top:18px; padding:15px; border:1px dashed #9eb1a2; border-radius:10px; background:#f7fbf7; }
.paper-receipt[hidden] { display:none; }
.paper-receipt b { display:block; margin-bottom:8px; color:#315d45; }
.paper-receipt code { display:block; padding:10px; overflow-wrap:anywhere; border-radius:6px; color:#35473b; background:#e8efe8; font-size:.68rem; user-select:all; }
.paper-receipt button { margin-top:9px; padding:8px 12px; border:1px solid #9eb1a2; border-radius:7px; color:#315d45; background:#fff; cursor:pointer; }
.paper-receipt p { margin:9px 0 0; font-size:.72rem; }
.success-links { display:flex; flex-wrap:wrap; gap:18px; margin-top:20px; }

@media (max-width:1100px) { .gallery { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:780px) {
  .gallery { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 12px; }
  .site-header { grid-template-columns:1fr auto; }
  .brand { display:none; }
  .intro { padding-top:70px; }
  .notice { grid-template-columns:1fr; gap:12px; }
  .dialog-layout { grid-template-columns:1fr; }
  .large-preview { min-height:0; padding:48px 28px 28px; }
  .large-preview .template { width:min(78vw,360px); }
  .dialog-info { padding:30px; }
  .photo-grid { grid-template-columns:repeat(5,minmax(0,1fr)); max-height:260px; }
}
@media (max-width:460px) {
  main { width:calc(100% - 24px); }
  .intro h1 { font-size:2.65rem; }
  .gallery { grid-template-columns:1fr 1fr; }
  .card-meta > i { display:none; }
  .card-meta b { font-size:.82rem; }
  .preview-dialog { max-height:calc(100vh - 12px); }
  .draft-summary { padding-right:24px; }
  .draft-summary a { position:static; display:inline-block; margin-top:12px; }
  .photo-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
}