@font-face { font-family:"HB Title"; src:url(fonts/kuaile.woff) format("woff"); font-display:swap; }
@font-face { font-family:"HB Text"; src:url(fonts/wenkai.woff) format("woff"); font-display:swap; }
:root { --bg:#f7efe2; --card:#fffaf2; --ink:#4a2f1f; --muted:#8f7d68; --line:#ecdcc6; --accent:#ff7d5c; --accent2:#f2a65a; color-scheme:light; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.65 "HB Text","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif; overflow-x:hidden; }
a { color:var(--accent); }
h1,h2,h3,.brand,.btn { font-family:"HB Title","PingFang SC",sans-serif; font-weight:normal; letter-spacing:.04em; }
.top { padding:12px 16px; padding-top:calc(12px + env(safe-area-inset-top)); }
.brand { color:var(--ink); text-decoration:none; font-size:20px; }
.wrap { max-width:560px; margin:0 auto; padding:0 16px 24px; }
.hero { text-align:center; padding:20px 0 8px; }
.hero h1 { font-size:36px; line-height:1.3; margin:0 0 10px; }
.hero h1 span { color:var(--accent); }
.lead { margin:0 0 20px; color:#6b4e38; }
.hint { color:var(--muted); font-size:14px; margin:8px 0; }
.center { text-align:center; }
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 22px; border-radius:26px; border:0;
  font-size:18px; text-decoration:none; cursor:pointer; color:var(--ink); background:#f3e6d3; -webkit-tap-highlight-color:transparent; }
.btn.primary { background:linear-gradient(180deg,#ff906f,#ff7553); color:#fff; box-shadow:0 6px 16px rgba(255,117,83,.35); }
.btn.ghost { background:#fff; border:2px dashed #e8c9a8; color:#a0704a; font-size:16px; text-align:center; line-height:1.3; padding:6px 16px; }
.btn.big { min-height:56px; font-size:20px; padding:0 28px; }
.btn.block { display:flex; width:100%; margin:12px 0; }
.btn[disabled] { opacity:.5; pointer-events:none; }
.btn.alipay { background:#1677ff; color:#fff; }
.btn.wechat { background:#07c160; color:#fff; }
.sample { margin:12px -4px 4px; aspect-ratio:4/3.4; border-radius:16px; overflow:hidden; background:#e9e1d4; }
.sample iframe { width:100%; height:100%; border:0; display:block; }
.cap { text-align:center; color:var(--muted); font-size:13px; margin:4px 0 16px; }
.card { background:var(--card); border-radius:18px; padding:18px 18px 16px; margin:16px 0; box-shadow:0 2px 0 var(--line); }
.card h2 { font-size:21px; margin:0 0 10px; }
.card h2 small { font-family:"HB Text",sans-serif; font-size:14px; color:var(--muted); }
.card h3 { font-size:16px; margin:12px 0 6px; }
.steps { list-style:none; padding:0; margin:0; counter-reset:s; }
.steps li { counter-increment:s; position:relative; padding:0 0 12px 44px; }
.steps li::before { content:counter(s); position:absolute; left:0; top:2px; width:32px; height:32px; border-radius:16px; background:var(--accent);
  color:#fff; font-family:"HB Title"; display:flex; align-items:center; justify-content:center; }
.steps b, .themes b { display:block; font-family:"HB Title"; font-weight:normal; font-size:17px; }
.steps span, .themes span { color:#7a6450; font-size:15px; }
.themes { list-style:none; padding:0; margin:0; }
.themes li { padding:8px 0; border-top:1px dashed var(--line); }
.themes li:first-child { border-top:0; }
.plan { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-top:1px dashed var(--line); }
.plan:first-of-type { border-top:0; }
.plan b { display:block; font-family:"HB Title"; font-weight:normal; font-size:17px; }
.plan span { font-size:14px; color:#7a6450; }
.plan em { font-style:normal; font-family:"HB Title"; font-size:30px; color:var(--accent); white-space:nowrap; }
.plan.muted b { color:#7a6450; }
.faq details { border-top:1px dashed var(--line); padding:4px 0; }
.faq details:first-of-type { border-top:0; }
.faq summary { min-height:44px; display:flex; align-items:center; cursor:pointer; font-size:16px; list-style:none; }
.faq summary::after { content:"＋"; margin-left:auto; color:var(--muted); }
.faq details[open] summary::after { content:"－"; }
.faq p { margin:0 0 10px; color:#6b5440; font-size:15px; }
.foot { color:var(--muted); font-size:12.5px; line-height:1.6; text-align:center; padding:16px 4px 8px; }
.foot p { margin:4px 0; }
.foot a { color:var(--muted); }
.icp { opacity:.7; }
/* 表单 */
.text { width:100%; min-height:48px; border:2px solid var(--line); border-radius:12px; padding:0 14px; font:inherit; font-size:17px;
  background:#fff; color:var(--ink); }
.text:focus { outline:none; border-color:var(--accent2); }
select.text { appearance:none; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238f7d68' stroke-width='2' fill='none'/%3E%3C/svg%3E") no-repeat right 14px center; }
.row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.seg { display:flex; gap:6px; }
.seg label { flex:1; }
.seg input, .theme input { position:absolute; opacity:0; pointer-events:none; }
.seg span { display:flex; min-height:48px; align-items:center; justify-content:center; border:2px solid var(--line); border-radius:12px; background:#fff; cursor:pointer; }
.seg input:checked + span { border-color:var(--accent); background:#fff1ea; color:#d4563a; }
.theme-list { display:grid; gap:8px; }
.theme { position:relative; display:block; }
.theme span { display:block; min-height:56px; padding:10px 14px; border:2px solid var(--line); border-radius:14px; background:#fff; cursor:pointer; }
.theme b { display:block; font-family:"HB Title"; font-weight:normal; font-size:17px; }
.theme small { color:#8a735e; font-size:14px; }
.theme input:checked + span { border-color:var(--accent); background:#fff1ea; }
.photos { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:8px 0; }
.photos:empty { display:none; }
.ph { position:relative; aspect-ratio:1; border-radius:12px; overflow:hidden; background:#eee; }
.ph img { width:100%; height:100%; object-fit:cover; display:block; }
.ph button { position:absolute; top:2px; right:2px; width:44px; height:44px; border:0; background:none; cursor:pointer; padding:0; }
.ph button::before { content:"×"; display:flex; align-items:center; justify-content:center; width:26px; height:26px; margin:auto;
  border-radius:13px; background:rgba(0,0,0,.55); color:#fff; font-size:18px; line-height:1; }
.err { color:#d4412a; min-height:1.2em; margin:12px 0 0; font-size:15px; }
/* 订单页 */
.spin { width:44px; height:44px; margin:12px auto; border-radius:50%; border:4px solid #f3dcc6; border-top-color:var(--accent); animation:sp 1s linear infinite; }
@keyframes sp { to { transform:rotate(360deg); } }
.prev { width:100%; border-radius:14px; display:block; margin:8px 0; background:#f3e6d3; }
.bar { height:12px; border-radius:6px; background:#f3e6d3; overflow:hidden; margin:14px 0 6px; }
.bar i { display:block; height:100%; background:linear-gradient(90deg,#ffb27c,#ff7d5c); transition:width .6s; }
.qr { display:block; width:220px; max-width:70vw; margin:8px auto; border-radius:8px; background:#fff; padding:6px; }
.tabs { display:flex; gap:8px; margin:8px 0; }
.tabs .btn { flex:1; padding:0 10px; font-size:16px; }
.tabs .btn.on { outline:3px solid rgba(255,125,92,.45); }
.prose p { margin:0 0 10px; font-size:15px; }
@media (min-width:760px) { .wrap { max-width:640px; } .hero h1 { font-size:44px; } }