:root { --purple:#2f1948; --deep:#1f1232; --cream:#fff5d8; --gold:#e9bf73; --ink:#352442; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; color:var(--cream); background:#20132e url('./assets/scene.webp') center top / cover fixed; font-family:Georgia, 'PingFang SC', 'Microsoft YaHei', serif; }
body:before { content:''; position:fixed; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(35,16,55,.82),rgba(28,15,40,.94)); }
button,input { font:inherit; }
.page-shell { position:relative; width:min(100%,760px); margin:0 auto; padding:34px 20px 64px; }
.hero { text-align:center; padding:12px 0 28px; }
.brand { width:190px; max-width:55vw; filter:drop-shadow(0 5px 12px rgba(0,0,0,.35)); }
.eyebrow { margin:8px 0 12px; color:#d8b8e6; font-size:12px; letter-spacing:.18em; }
h1 { margin:0; color:#ffeab1; font-size:36px; font-size:clamp(29px,7vw,52px); line-height:1.2; text-shadow:0 3px 0 #704471,0 6px 18px #12081d; }
.hero-copy { margin:14px auto 0; max-width:430px; color:#ebdced; font-size:14px; line-height:1.8; }
.creator-card { margin:4px auto 0; padding:28px 30px; padding:28px clamp(22px,6vw,52px); border:1px solid rgba(234,191,115,.45); border-radius:22px; background:rgba(39,19,60,.86); box-shadow:0 20px 50px rgba(8,3,16,.35); }
.section-label { margin-bottom:22px; color:var(--gold); font-size:12px; letter-spacing:.16em; }
label { display:block; margin:16px 0 8px; font-size:14px; color:#fff0c4; }
.upload-label { display:flex; justify-content:space-between; align-items:baseline; }
.upload-label small { color:#bda8c7; font-size:11px; }
input[type=text] { width:100%; border:1px solid #8b638f; border-radius:11px; padding:13px 14px; color:#fff8eb; outline:none; background:#1f1232; }
input[type=text]:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(233,191,115,.16); }
input[type=file] { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.character-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.character-option { padding:8px 5px 9px; border:1px solid #644770; border-radius:13px; color:#d8c0df; background:rgba(23,11,37,.65); cursor:pointer; transition:.2s ease; }
.character-option img { display:block; width:70px; height:70px; margin:0 auto 5px; image-rendering:pixelated; }
.character-option span { display:block; font-size:11px; }
.character-option:hover,.character-option.selected { border-color:var(--gold); background:rgba(75,40,91,.95); box-shadow:inset 0 0 0 1px rgba(233,191,115,.22); }
.primary-button { width:100%; margin-top:22px; padding:14px 18px; border:0; border-radius:999px; color:#3d204c; background:linear-gradient(135deg,#ffe4a1,#dca95d); box-shadow:0 7px 0 #a06b40,0 12px 22px rgba(0,0,0,.23); cursor:pointer; font-weight:700; transition:transform .15s,box-shadow .15s; }
.primary-button span { margin-left:8px; font-size:20px; }
.primary-button:hover { transform:translateY(-2px); box-shadow:0 9px 0 #a06b40,0 16px 25px rgba(0,0,0,.28); }
.primary-button:active { transform:translateY(3px); box-shadow:0 3px 0 #a06b40; }
.privacy-note,.save-hint { margin:14px 0 0; color:#bda8c7; text-align:center; font-size:11px; }
.hidden { display:none !important; }
.offer-section { padding-top:32px; }
.offer-topline { display:flex; justify-content:space-between; align-items:center; margin-bottom:13px; color:#d8b8e6; font-size:10px; letter-spacing:.13em; }
.text-button { border:0; padding:0; color:#f1d393; background:none; cursor:pointer; font-size:12px; }
.offer-card { position:relative; overflow:hidden; padding:34px 34px 30px; padding:34px clamp(25px,7vw,62px) 30px; color:var(--ink); background:var(--cream); box-shadow:0 18px 40px rgba(8,3,16,.44); transform:rotate(-.35deg); }
.offer-card:after { content:''; position:absolute; inset:0; pointer-events:none; opacity:.17; background:repeating-linear-gradient(0deg,transparent 0 23px,#9e805d 24px,#9e805d 25px); mix-blend-mode:multiply; }
.paper-texture { position:absolute; inset:0; pointer-events:none; opacity:.16; background:radial-gradient(circle at 20% 20%,#9e805d 0 1px,transparent 1.5px) 0 0/17px 19px; }
.offer-logo,.offer-heading,.photo-frame,.offer-card p,.signature { position:relative; z-index:1; }
.offer-logo { display:block; width:135px; margin:0 auto 14px; filter:sepia(.2); }
.offer-heading { margin-bottom:20px; color:#6c3a69; text-align:center; font-size:26px; font-size:clamp(21px,5vw,34px); font-weight:900; }
.photo-frame { width:86px; height:86px; margin:0 auto 18px; padding:4px; border:2px solid #9d7049; border-radius:50%; background:#fce7ab; }
.photo-frame img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.offer-card p { margin:0 0 15px; font-size:14px; font-size:clamp(13px,2.3vw,16px); line-height:2; }
.salutation { color:#6e3a6d; }
.signature { display:flex; justify-content:space-between; margin-top:24px; color:#704471; font-weight:700; }
.social-block { position:relative; z-index:1; margin:26px auto 0; padding-top:18px; border-top:1px solid rgba(112,68,113,.35); text-align:center; }
.social-title { margin-bottom:11px; color:#704471; font-size:12px; font-weight:700; }
.social-qr-grid { display:flex; justify-content:center; }
.social-qr-grid div + div { margin-left:18px; }
.social-qr-grid div { display:flex; flex-direction:column; align-items:center; color:#704471; font-size:10px; }
.social-qr-grid span { margin-top:4px; }
.social-qr-grid img { width:55px; height:55px; image-rendering:pixelated; }
.social-block small { display:block; margin-top:10px; color:#927b79; font-size:9px; }
.community-button { margin-top:12px; padding:8px 18px; border:1px solid #9d7049; border-radius:999px; color:#704471; background:rgba(255,245,216,.7); cursor:pointer; font-size:11px; }
.new-offer-button { display:block; margin:22px auto 0; border:0; color:#f1d393; background:none; cursor:pointer; font-size:13px; }
.modal-backdrop { position:fixed; z-index:10; inset:0; display:flex; align-items:center; justify-content:center; padding:22px; background:rgba(15,7,24,.72); }
.community-modal { position:relative; width:min(100%,360px); padding:28px 24px 24px; border:1px solid rgba(233,191,115,.55); border-radius:20px; color:#352442; background:#fff5d8; text-align:center; box-shadow:0 18px 45px rgba(0,0,0,.35); }
.community-modal h2 { margin:0 0 12px; color:#704471; font-size:24px; }
.community-modal p { margin:10px 0; font-size:12px; line-height:1.7; }
.modal-close { position:absolute; top:8px; right:12px; border:0; color:#704471; background:none; cursor:pointer; font-size:26px; line-height:1; }
.modal-qr { width:150px; height:150px; image-rendering:pixelated; }
.community-url { margin:12px 0; padding:9px; border:1px dashed #9d7049; color:#704471; background:rgba(255,255,255,.55); font-family:monospace; font-size:11px; user-select:text; word-break:break-all; }
.community-modal small { display:block; color:#927b79; font-size:10px; line-height:1.6; }
.invite-tip { color:#704471; font-weight:700; }
.action-row { display:flex; max-width:460px; margin:28px auto 0; }
.action-row > * + * { margin-left:10px; }
.save-button { flex:1; margin:0; }
.secondary-button { flex:0 0 110px; border:1px solid #d5a968; border-radius:999px; color:#ffe7ac; background:rgba(47,25,72,.9); cursor:pointer; }
@media (max-width:520px) { .page-shell { padding-left:14px; padding-right:14px; } .creator-card { border-radius:18px; } .offer-card { padding-left:22px; padding-right:22px; } .character-option img { width:60px; height:60px; } .action-row { flex-direction:column; } .action-row > * + * { margin-left:0; margin-top:10px; } .secondary-button { flex-basis:auto; min-height:46px; } }
@media print { body { background:white; } body:before,.hero,.creator-card,.offer-topline,.action-row,.new-offer-button,.save-hint,.modal-backdrop { display:none !important; } .page-shell { width:100%; padding:0; } .offer-section { display:block !important; padding:0; } .offer-card { transform:none; box-shadow:none; } }