:root {
  color-scheme: light;
  --ink: #201518;
  --muted: #746a6c;
  --line: #ece5e6;
  --brand: #9b111b;
  --brand-deep: #58070d;
  --gold: #e7b65b;
  --cream: #fff9f2;
  --paper: #ffffff;
  --page: #f7f4f4;
  --shadow: 0 16px 42px rgba(63, 22, 26, .11);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--page); }
body { margin: 0; min-width: 320px; color: var(--ink); background: var(--page); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }

.app-shell { width: min(100%, 520px); min-height: 100vh; margin: 0 auto; background: #fff; box-shadow: 0 0 60px rgba(36, 22, 24, .08); }
.view { display: none; min-height: 100vh; }
.view.is-active { display: block; }
.topbar { height: 64px; padding: calc(12px + env(safe-area-inset-top)) 20px 8px; display: flex; align-items: center; justify-content: space-between; background: linear-gradient(135deg, #6e0810, #b7202b); }
.brand-logo { width: 128px; height: auto; display: block; }
.icon-button { display: grid; place-items: center; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.13); color: white; width: 36px; height: 36px; padding: 0; border-radius: 50%; }
.icon-button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.icon-button .info-dot { fill: currentColor; stroke: none; }
.icon-button:focus-visible, .about-close:focus-visible { outline: 3px solid rgba(255,255,255,.62); outline-offset: 2px; }
.intro { padding: 28px 20px 34px; color: white; background: radial-gradient(circle at 92% 10%, rgba(255,212,135,.35), transparent 31%), linear-gradient(150deg, #70080f 0%, #a91521 68%, #5f070d 100%); }
.intro .eyebrow { margin: 0 0 8px; color: #f6cf8b; font-size: 14px; font-weight: 700; letter-spacing: 4px; }
.intro h1 { margin: 0; max-width: 360px; font-size: clamp(28px, 8vw, 38px); line-height: 1.18; letter-spacing: -.5px; }
.intro p:last-child { margin: 12px 0 0; color: rgba(255,255,255,.76); font-size: 15px; line-height: 1.6; }
.section-heading { padding: 24px 20px 14px; display: flex; align-items: end; justify-content: space-between; }
.section-heading h2 { margin: 0; font-size: 20px; }
.section-heading p { margin: 5px 0 0; color: var(--muted); font-size: 13px; }
.count { color: var(--muted); font-size: 13px; }
.template-list { padding: 0 16px 40px; display: grid; gap: 14px; }
.template-card { min-height: 184px; display: grid; grid-template-columns: 116px 1fr; gap: 16px; padding: 12px; border: 1px solid var(--line); border-radius: 20px; background: white; box-shadow: 0 8px 24px rgba(73,42,44,.06); }
.template-card.featured { border-color: #dfc1c3; box-shadow: 0 12px 30px rgba(129, 19, 28, .11); }
.template-card.is-locked { opacity: .72; }
.template-card.is-selectable { transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.template-card.is-selectable:focus-visible { outline: 3px solid rgba(155,17,27,.2); outline-offset: 2px; }
.poster-mini { position: relative; overflow: hidden; min-height: 160px; border-radius: 13px; background-size: cover; background-position: center; }
.poster-red { color: #fff4df; background: #8f0b13 url('./assets/poster-red-approved-bg.png') center/cover no-repeat; box-shadow: inset 0 0 0 1px rgba(255,229,176,.35); }
.poster-blue { color: white; background: #071434 url('./assets/poster-tech-approved-bg.png') center/cover no-repeat; }
.poster-photo-demo { background: #eaf2fa url('./assets/poster-photo-empty-demo.png') center/cover no-repeat; border: 1px solid #d5e1ec; }
.template-meta { align-self: center; min-width: 0; }
.tag-row { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; }
.tag-row span:first-child { color: #8c0c15; background: #fff0ee; border-radius: 999px; padding: 4px 8px; font-weight: 700; }
.tag-row .muted-tag { color: #65717a !important; background: #eff2f4 !important; }
.tag-row .tech-tag { color: #5539c8 !important; background: #efecff !important; }
.template-meta h3 { margin: 12px 0 6px; font-size: 17px; }
.template-meta p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.primary { width: 100%; min-height: 50px; border: 0; border-radius: 14px; color: white; background: linear-gradient(135deg, #ad1621, #72080f); font-weight: 750; box-shadow: 0 8px 18px rgba(139, 13, 23, .23); }
.primary.small { width: auto; min-height: 36px; margin-top: 14px; padding: 0 18px; border-radius: 10px; font-size: 13px; box-shadow: none; }

.editor { background: #f6f3f3; }
.editor-bar { position: sticky; top: 0; z-index: 20; min-height: 66px; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; display: grid; grid-template-columns: 42px 1fr 42px; gap: 8px; align-items: center; background: rgba(255,255,255,.95); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(230,222,223,.8); }
.editor-bar p { margin: 0 0 2px; color: var(--muted); font-size: 11px; text-align: center; }
.editor-bar h1 { margin: 0; font-size: 17px; text-align: center; }
.back-button, .text-button { min-width: 42px; min-height: 42px; border: 0; background: transparent; }
.back-button { font-size: 34px; line-height: 1; }
.text-button { color: var(--brand); font-size: 13px; }
.preview-stage { padding: 20px 18px 24px; background: linear-gradient(180deg, #ece5e5, #f6f3f3); }
.stage-label { margin: 0 0 12px; color: #776d6f; font-size: 12px; font-weight: 700; letter-spacing: 1px; }
.poster-wrap { width: min(72vw, 280px); margin: 0 auto; padding: 7px; border-radius: 22px; background: rgba(255,255,255,.58); box-shadow: var(--shadow); }
.poster { --photo-title-size: 8.4cqw; --photo-copy-size: 4.2cqw; --photo-subtitle-size: 4.8cqw; --photo-slogan-size: 3.4cqw; --photo-date-size: 4cqw; position: relative; container-type: inline-size; aspect-ratio: 9/16; overflow: hidden; border-radius: 17px; color: #fff7e7; background-size: 100% 100%; background-position: center; }
.poster::before { content: ""; position: absolute; inset: 0; pointer-events: none; }
.poster--red { background-image: url('./assets/poster-red-approved-bg.png'); }
.poster--red::before { background: linear-gradient(180deg, rgba(93,0,5,.03), transparent 44%, rgba(65,0,4,.16)); }
.poster--tech { background-image: url('./assets/poster-tech-approved-bg.png'); }
.poster--tech::before { background: linear-gradient(180deg, rgba(0,4,26,.03), rgba(0,8,40,.03) 32%, rgba(0,4,26,.14) 75%, rgba(0,2,20,.25)); }
.poster-logo { position: absolute; z-index: 2; top: 3.3%; left: 50%; transform: translateX(-50%); width: 31%; filter: drop-shadow(0 2px 5px rgba(0,0,0,.35)); }
.poster-title-image { position: absolute; z-index: 2; top: 9.5%; left: 50%; transform: translateX(-50%); width: 82%; height: 37%; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(91,0,3,.38)); }
.poster-content { position: absolute; z-index: 2; inset: 0; text-align: center; }
.poster-kicker, .poster-department, .poster-metric, .poster-amount, .poster-slogan { position: absolute; left: 50%; width: 90%; transform: translateX(-50%); margin: 0; }
.poster-kicker { display: none; top: 34.8%; color: #f5f8ff; font-size: clamp(8px, 3.4cqw, 37px); font-weight: 800; letter-spacing: .28em; padding-left: .28em; line-height: 1; }
.poster-department { top: 55.7%; color: #fff2cf; font-size: clamp(11px, 4.9cqw, 53px); font-weight: 800; line-height: 1.15; white-space: nowrap; text-shadow: 0 2px 8px rgba(83,0,5,.46); }
.poster-department::before, .poster-department::after { content: ""; display: inline-block; width: 1.7em; height: 1px; margin: 0 .6em .28em; background: rgba(255,220,151,.72); }
.poster-metric { top: 63.7%; color: #fff3d4; font-size: clamp(15px, 5.6cqw, 60px); font-weight: 850; line-height: 1.12; white-space: nowrap; text-shadow: 0 3px 10px rgba(43,0,3,.5); }
.poster-amount { top: 69.4%; color: #ffe49f; font-size: clamp(48px, 18.4cqw, 199px); font-weight: 900; line-height: .96; letter-spacing: -.04em; white-space: nowrap; text-shadow: 0 2px 0 #a9570e, 0 5px 16px rgba(73,0,5,.5); }
.amount-mark { display: inline-block; font-size: .42em; letter-spacing: 0; vertical-align: .28em; }
.amount-mark--currency { margin-right: .05em; }
.amount-mark--suffix { margin-left: .04em; }
.poster-slogan { top: 88.8%; color: #fff3dc; font-size: clamp(12px, 4.25cqw, 46px); font-weight: 800; line-height: 1.15; letter-spacing: .12em; padding-left: .12em; white-space: nowrap; text-shadow: 0 3px 10px rgba(40,0,3,.55); }
.poster-department.fit--tight { font-size: clamp(10px, 4.35cqw, 47px); }
.poster-metric.fit--tight { font-size: clamp(13px, 4.9cqw, 53px); }
.poster-amount.fit--tight { font-size: clamp(43px, 16.5cqw, 178px); }
.poster-slogan.fit--tight { font-size: clamp(11px, 3.8cqw, 41px); }
.poster-date { position: absolute; z-index: 2; bottom: 3.1%; width: 100%; margin: 0; text-align: center; color: rgba(255,241,215,.86); font-size: clamp(8px, 2.5vw, 11px); font-weight: 700; letter-spacing: .16em; text-shadow: 0 2px 8px rgba(0,0,0,.45); }
.poster--tech .poster-logo { width: 29%; }
.poster--tech .poster-title-image { top: 13.8%; width: 84%; height: auto; filter: drop-shadow(0 0 10px rgba(81,166,255,.28)); }
.poster--tech .poster-kicker { display: block; }
.poster--tech .poster-department { top: 40.7%; color: #f1f7ff; font-size: clamp(12px, 5cqw, 54px); text-shadow: 0 2px 4px #07142e, 0 0 9px rgba(76,165,255,.48); }
.poster--tech .poster-department::before, .poster--tech .poster-department::after { width: 1.5em; background: #73dcff; box-shadow: 0 0 5px #47cfff; }
.poster--tech .poster-metric { top: 48.9%; color: #f1f8ff; font-size: clamp(12px, 4.35cqw, 47px); letter-spacing: .09em; text-shadow: 0 2px 4px #07142e, 0 0 10px rgba(63,140,255,.62); }
.poster--tech .poster-amount { top: 55.1%; color: transparent; background: linear-gradient(180deg,#fff 0%,#f5fbff 34%,#87dcff 70%,#af84ff 100%); -webkit-background-clip: text; background-clip: text; text-shadow: none; filter: drop-shadow(0 2px 0 #173d8d) drop-shadow(0 0 11px rgba(80,177,255,.68)); font-size: clamp(48px, 18.3cqw, 198px); }
.poster--tech .poster-amount .amount-mark { color: #8fe9ff; -webkit-text-stroke: 0; }
.poster--tech .poster-department.fit--tight { font-size: clamp(11px, 4.45cqw, 48px); }
.poster--tech .poster-metric.fit--tight { font-size: clamp(11px, 3.85cqw, 42px); }
.poster--tech .poster-amount.fit--tight { font-size: clamp(43px, 16.2cqw, 175px); }
.poster--tech .poster-slogan { display: none; }
.poster--tech .poster-date { color: rgba(218,235,255,.95); }
.poster--tech .poster-slogan { display: block; top: 83.2%; color: #e8f5ff; font-size: clamp(11px, 3.7cqw, 40px); letter-spacing: .12em; text-shadow: 0 0 10px rgba(68,164,255,.7); }

.poster--photo { background-image: url('./assets/poster-photo-empty-demo.png'); background-size: cover; background-position: center; }
.poster--photo::before { background: linear-gradient(180deg, transparent 42%, rgba(0,19,51,.1) 56%, rgba(0,23,63,.84) 100%); }
.poster--photo .poster-logo { top: 4.5%; left: 6%; width: 27%; transform: none; opacity: .92; }
.poster--photo .poster-title-image, .poster--photo .poster-kicker { display: none; }
.poster--photo .poster-department { top: 67.8%; left: 7%; width: 78%; transform: none; color: white; font-family: "Songti SC", STSong, serif; font-size: clamp(18px, var(--photo-title-size), 91px); font-weight: 700; line-height: 1.1; text-align: left; text-shadow: 0 3px 12px rgba(0,22,58,.65); }
.poster--photo .poster-department::before, .poster--photo .poster-department::after { display: none; }
.poster--photo .poster-amount { top: 75.6%; left: 7%; width: 72%; transform: none; color: white; font-family: "Songti SC", STSong, serif; font-size: clamp(13px, var(--photo-subtitle-size), 52px); font-weight: 700; line-height: 1.2; letter-spacing: .02em; text-align: left; text-shadow: 0 2px 9px rgba(0,18,48,.72); }
.poster--photo .poster-metric { top: 84.2%; left: 7%; width: 72%; transform: none; color: white; font-family: "Songti SC", STSong, serif; font-size: clamp(11px, var(--photo-copy-size), 45px); font-weight: 600; line-height: 1.5; letter-spacing: 0; white-space: normal; text-align: left; text-shadow: 0 2px 9px rgba(0,18,48,.72); }
.poster--photo .poster-slogan { display: block; top: 94%; left: 7%; width: 72%; transform: none; color: rgba(255,255,255,.82); font-family: "Songti SC", STSong, serif; font-size: clamp(10px, var(--photo-slogan-size), 37px); font-weight: 500; line-height: 1.2; letter-spacing: .04em; text-align: left; }
.poster--photo .poster-date { top: 69%; right: 3.5%; bottom: auto; left: auto; width: auto; color: rgba(255,255,255,.62); font-family: Georgia, "Times New Roman", serif; font-size: clamp(10px, var(--photo-date-size), 43px); letter-spacing: .08em; line-height: 1; text-align: left; writing-mode: vertical-rl; text-shadow: 0 2px 8px rgba(0,18,48,.55); }
.form-card { margin: 0 12px; padding: 20px 16px 8px; border-radius: 20px; background: white; box-shadow: 0 7px 24px rgba(60,34,36,.07); }
.form-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.form-heading h2 { margin: 0; font-size: 18px; }
.form-heading p { margin: 0; color: var(--muted); font-size: 12px; }.required-dot { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #c01822; }
label { position: relative; display: block; margin-bottom: 18px; color: #3b3032; font-size: 14px; font-weight: 650; }
label > span { margin-left: 3px; color: #bd1722; }
input, textarea { display: block; width: 100%; margin-top: 8px; padding: 13px 44px 13px 13px; border: 1px solid #ddd5d6; border-radius: 11px; outline: none; background: #fff; color: #251b1d; font-size: 16px; line-height: 1.45; resize: none; transition: .2s; }
input:focus, textarea:focus { border-color: #a51620; box-shadow: 0 0 0 3px rgba(165,22,32,.09); }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: #d13039; background: #fff8f8; }
label small { position: absolute; right: 11px; bottom: 14px; color: #aaa0a2; font-size: 11px; font-weight: 400; } label small b, label small em { font-style: normal; font-weight: 500; }
.date-input-wrap { position: relative; width: 100%; min-width: 0; margin-top: 8px; overflow: hidden; border-radius: 11px; }
.date-input-wrap input[type="date"] { width: 100%; min-width: 0; max-width: 100%; margin-top: 0; padding-right: 48px; -webkit-appearance: none; appearance: none; text-align: left; }
.date-input-wrap input[type="date"]::-webkit-date-and-time-value { min-width: 0; text-align: left; }
.date-input-wrap input[type="date"]::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
.date-input-wrap::after { content: ""; position: absolute; top: 50%; right: 15px; width: 17px; height: 16px; transform: translateY(-45%); border: 2px solid #3d3234; border-radius: 3px; background: linear-gradient(#3d3234 0 2px, transparent 2px); pointer-events: none; }
.upload-help { display: block; margin: 7px 2px 0; color: #8f8587; font-size: 12px; font-weight: 400; line-height: 1.5; }
#background-upload { padding: 10px; }
.size-controls { margin: 2px 0 20px; padding: 14px 14px 2px; border: 1px solid #e5dfe0; border-radius: 14px; background: #faf8f8; }
.size-controls h3 { margin: 0 0 14px; font-size: 14px; }
.size-controls label { margin-bottom: 14px; font-size: 13px; }
.size-controls output { float: right; color: var(--brand); font-weight: 700; }
.size-controls input[type="range"] { height: 30px; margin-top: 6px; padding: 0; accent-color: var(--brand); }
.toggle-row { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 4px; }
.toggle-row > span { margin: 0; color: #3b3032; }
.toggle-row input { width: 22px; height: 22px; margin: 0; padding: 0; accent-color: var(--brand); }
.safe-space { height: 112px; }
.bottom-action { position: fixed; z-index: 30; left: 50%; bottom: 0; transform: translateX(-50%); width: min(100%, 520px); padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.95); border-top: 1px solid var(--line); backdrop-filter: blur(16px); }
.bottom-action p { margin: 0 0 8px; color: var(--muted); font-size: 11px; text-align: center; }
.sheet { position: fixed; z-index: 60; inset: 0; display: none; }.sheet.is-open { display: block; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(30,12,14,.48); backdrop-filter: blur(3px); }
.sheet-panel { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: min(100%, 520px); max-height: 94vh; overflow-y: auto; padding: 10px 24px calc(24px + env(safe-area-inset-bottom)); border-radius: 26px 26px 0 0; background: white; text-align: center; }
.sheet-handle { width: 42px; height: 4px; margin: 0 auto 22px; border-radius: 4px; background: #ded6d7; }
.success-mark { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto 14px; border-radius: 50%; color: white; background: #aa1520; font-size: 24px; }
.sheet-panel h2 { margin: 0; font-size: 21px; }.sheet-panel p { margin: 10px auto 22px; color: var(--muted); line-height: 1.65; font-size: 14px; max-width: 360px; }
.generated-poster-wrap { width: min(52vw, 230px); margin: 0 auto 18px; padding: 5px; border-radius: 17px; background: #f1eeee; box-shadow: 0 12px 30px rgba(47,20,24,.16); }
.generated-poster-wrap img { display: block; width: 100%; height: auto; border-radius: 13px; }
.download-button { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.secondary { width: 100%; min-height: 48px; margin-top: 10px; border: 1px solid #ddd3d5; border-radius: 14px; color: #4b3d40; background: white; font-weight: 700; }
.about-overlay { position: fixed; z-index: 80; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(38,13,17,.48); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.about-card { position: relative; width: min(100%, 360px); padding: 38px 28px 30px; overflow: hidden; border: 1px solid rgba(255,255,255,.7); border-radius: 28px; background: linear-gradient(145deg, rgba(255,255,255,.88), rgba(255,245,246,.7)); box-shadow: 0 24px 70px rgba(48,9,14,.3), inset 0 1px 0 rgba(255,255,255,.92); text-align: center; -webkit-backdrop-filter: blur(22px) saturate(135%); backdrop-filter: blur(22px) saturate(135%); }
.about-card::before { content: ""; position: absolute; width: 180px; height: 180px; top: -92px; right: -72px; border-radius: 50%; background: rgba(181,24,35,.13); filter: blur(2px); pointer-events: none; }
.about-close { position: absolute; z-index: 1; top: 14px; right: 14px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; color: #725f62; background: rgba(255,255,255,.55); font-size: 25px; line-height: 1; }
.about-avatar { position: relative; display: block; width: 92px; height: 92px; margin: 0 auto 18px; object-fit: cover; border: 4px solid rgba(255,255,255,.85); border-radius: 50%; box-shadow: 0 10px 28px rgba(104,14,22,.24); }
.about-label { margin: 0 0 14px; color: var(--brand); font-size: 16px; font-weight: 750; line-height: 1.3; letter-spacing: .18em; }
.about-copy { margin: 0; color: #4f3f42; font-size: 15px; line-height: 1.7; }
.about-powered { margin: 22px 0 0; color: #96878a; font-size: 12px; line-height: 1.4; letter-spacing: .04em; }
.about-overlay.is-open .about-card { animation: about-in .22s ease-out; }
.sheet.is-loading .success-mark { color: transparent; background: #eee7e8; }
.sheet.is-loading .success-mark::after { content: ""; width: 20px; height: 20px; border: 3px solid #cdbfc1; border-top-color: #aa1520; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes about-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }

@media (min-width: 700px) {
  body { padding: 24px 0; }
  .app-shell { min-height: calc(100vh - 48px); border-radius: 26px; overflow: hidden; }
  .view { min-height: calc(100vh - 48px); }
}

@media (prefers-reduced-motion: no-preference) {
  .template-card.featured:active { transform: scale(.985); }
  .view.is-active { animation: fade .25s ease-out; }
  @keyframes fade { from { opacity: 0; transform: translateY(4px); } }
}