* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: linear-gradient(165deg, #ffd9e8 0%, #f3d9ff 45%, #e3e8ff 100%);
  min-height: 100vh;
  color: #333;
}

.page {
  max-width: 480px;
  margin: 0 auto;
  padding: 20px 16px 110px; /* 底部留出导航栏空间 */
}

.tab-page { animation: fadeIn .25s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- 首页 hero ---------- */

.hero {
  text-align: center;
  padding: 26px 0 20px;
  position: relative;
  overflow: hidden;
}
.hero-title {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: 2px;
  background: linear-gradient(90deg, #f06595, #9775fa);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-sub { margin-top: 8px; color: #8a7590; font-size: 15px; }
.hero-couple { font-size: 76px; margin: 18px 0 4px; line-height: 1.2; }

.float-heart { position: absolute; font-size: 26px; opacity: .85; animation: floaty 4s ease-in-out infinite; }
.float-heart.h1 { left: 8%; top: 30%; }
.float-heart.h2 { left: 4%; top: 58%; font-size: 20px; animation-delay: 1s; }
.float-heart.h3 { right: 8%; top: 26%; animation-delay: .5s; }
.float-heart.h4 { right: 4%; top: 56%; font-size: 20px; animation-delay: 1.5s; }
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.btn-hero {
  border: none;
  margin-top: 14px;
  padding: 15px 44px;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  border-radius: 32px;
  background: linear-gradient(90deg, #f783ac, #9775fa);
  box-shadow: 0 8px 22px rgba(151, 117, 250, .35);
  cursor: pointer;
}
.btn-hero:active { transform: scale(.97); }

/* ---------- 功能卡片 ---------- */

.feature-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, .88);
  border-radius: 18px;
  padding: 16px;
  margin-bottom: 14px;
  box-shadow: 0 6px 20px rgba(151, 117, 250, .10);
}
.feat-icon {
  flex: 0 0 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}
.feat-icon.pink { background: #ffe3ee; }
.feat-icon.blue { background: #e3ecff; }
.feat-body { flex: 1; min-width: 0; }
.feat-body h3 { font-size: 16px; }
.feat-body p { font-size: 12.5px; color: #999; margin-top: 3px; }
.feat-btn {
  border: 1.5px solid;
  border-radius: 20px;
  padding: 7px 16px;
  font-size: 14px;
  font-weight: 600;
  background: #fff;
  cursor: pointer;
  white-space: nowrap;
}
.feat-btn.pink { color: #e64980; border-color: #f8b4cd; }
.feat-btn.blue { color: #5c7cfa; border-color: #b6c6ff; }
.feat-btn:active { transform: scale(.96); }

/* ---------- 通用卡片 ---------- */

.card {
  background: rgba(255, 255, 255, .92);
  border-radius: 16px;
  padding: 22px 18px;
  margin-bottom: 16px;
  box-shadow: 0 6px 24px rgba(151, 117, 250, .10);
}

.hidden { display: none !important; }

.field { display: block; margin-bottom: 16px; position: relative; }
.label { display: block; font-size: 14px; color: #666; margin-bottom: 8px; }

input, textarea {
  width: 100%;
  border: 1.5px solid #eee;
  border-radius: 10px;
  padding: 12px;
  font-size: 16px;
  outline: none;
  transition: border-color .2s;
  background: #fafafa;
}
input:focus, textarea:focus { border-color: #e64980; background: #fff; }
textarea { resize: none; }

.counter {
  position: absolute;
  right: 10px;
  bottom: -18px;
  font-size: 12px;
  color: #aaa;
}
.field:has(textarea) { margin-bottom: 30px; }
.counter em { font-style: normal; color: #e64980; }

.billing-hint {
  font-size: 12px;
  color: #9775fa;
  margin: -20px 0 14px 2px;
}

/* ---------- 协议文档弹窗 ---------- */

#doc-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .4);
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
}
.doc-modal-card {
  width: 100%;
  max-width: 440px;
  max-height: 78vh;
  background: #fff;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.doc-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  font-size: 16px;
  font-weight: 700;
  border-bottom: 1px solid #f0f0f0;
}
.doc-modal-head button {
  border: none; background: #f1f3f5; border-radius: 50%;
  width: 28px; height: 28px; cursor: pointer; color: #666;
  flex: 0 0 28px;
}
.doc-modal-body {
  overflow-y: auto;
  padding: 16px;
  font-size: 13px;
  line-height: 1.9;
  color: #444;
}
.doc-modal-body h1 { font-size: 17px; text-align: center; margin-bottom: 12px; }
.doc-modal-body h2 { font-size: 14px; margin: 16px 0 6px; color: #e64980; text-align: left; }
.doc-modal-body ol { padding-left: 18px; }
.doc-modal-body li, .doc-modal-body p { font-size: 13px; }

.btn-primary {
  width: 100%;
  border: none;
  border-radius: 12px;
  padding: 14px;
  font-size: 17px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(90deg, #f783ac, #e64980);
  cursor: pointer;
}
.btn-primary:disabled { opacity: .6; cursor: not-allowed; }

.btn-outline {
  width: 100%;
  margin-top: 14px;
  border: 1.5px solid #f8b4cd;
  border-radius: 12px;
  padding: 12px;
  font-size: 15px;
  color: #e64980;
  background: #fff;
  cursor: pointer;
}

.hint { font-size: 12px; color: #999; text-align: center; margin-top: 12px; }
.hint-big { font-size: 15px; color: #666; margin: 10px 0 16px; }

.agree-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #999;
  margin: -4px 0 12px;
}
.agree-row input { width: auto; margin: 0; }
.agree-row a { color: #e64980; text-decoration: none; }

.center-card { text-align: center; padding: 34px 18px; }
.big-icon { font-size: 46px; }

.amount { text-align: center; font-size: 34px; color: #e64980; font-weight: 700; margin: 8px 0 14px; }
.qr { display: block; width: 220px; height: 220px; margin: 0 auto; border-radius: 8px; }
.status { text-align: center; margin-top: 14px; color: #f08c00; font-size: 15px; }

.result-icon { font-size: 52px; text-align: center; }
h2 { text-align: center; font-size: 20px; margin: 10px 0 6px; }
.order-no { text-align: center; font-size: 13px; color: #888; margin: 14px 0; word-break: break-all; }

/* ---------- 信箱 / 我的 ---------- */

.mini-hero { text-align: center; padding: 18px 0 16px; }
.mini-hero h2 {
  font-size: 24px;
  margin: 0;
  background: linear-gradient(90deg, #f06595, #9775fa);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.mini-hero p { margin-top: 6px; color: #8a7590; font-size: 13px; }

.query-row { display: flex; gap: 8px; margin-top: 12px; }
.query-row input { flex: 1; min-width: 0; }
.query-row button {
  border: none;
  border-radius: 10px;
  padding: 0 18px;
  background: linear-gradient(90deg, #f783ac, #e64980);
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  white-space: nowrap;
}
.query-row button:disabled { opacity: .55; }

.my-order {
  background: #fdf0f6;
  border-radius: 10px;
  padding: 10px 12px;
  margin-top: 10px;
  font-size: 13px;
  color: #555;
  line-height: 1.6;
}
.my-order .mo-head { display: flex; justify-content: space-between; color: #999; font-size: 12px; }
.my-order .mo-content { margin-top: 4px; color: #333; word-break: break-all; white-space: pre-wrap; }

.about-card { font-size: 13px; color: #666; line-height: 1.7; }
.about-title { font-size: 15px; margin-bottom: 8px; }
.about-line { margin-top: 10px; }
.about-line.muted { color: #aaa; font-size: 12px; }

/* ---------- 模板库 ---------- */

.tpl-bar { margin: -14px 0 16px; }
.tpl-label { font-size: 12px; color: #999; }
.tpl-cats { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.tpl-cat {
  border: 1px solid #f3c2d4; color: #e64980; background: #fff;
  border-radius: 16px; padding: 4px 14px; font-size: 13px; cursor: pointer;
}
.tpl-cat.active { background: #e64980; color: #fff; border-color: #e64980; }
.tpl-list { overflow-y: auto; padding: 0 16px 16px; }
.tpl-item {
  background: #fdf0f5; border-radius: 10px; padding: 10px 12px;
  font-size: 13px; color: #555; margin-bottom: 8px; cursor: pointer; line-height: 1.5;
}
.tpl-item:active { background: #f8d7e4; }

/* 模板选择弹窗（底部弹起，宽屏居中） */
#tpl-modal {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .4);
  z-index: 85; display: flex; align-items: flex-end; justify-content: center;
}
.tpl-modal-card {
  width: 100%; max-width: 480px; max-height: 72vh;
  background: #fff; border-radius: 16px 16px 0 0;
  display: flex; flex-direction: column; overflow: hidden;
}
.tpl-modal-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px 8px; font-size: 16px; font-weight: 700;
}
.tpl-modal-head button {
  border: none; background: #f1f3f5; border-radius: 50%;
  width: 28px; height: 28px; cursor: pointer; color: #666; flex: 0 0 28px;
}
#tpl-modal .tpl-cats { padding: 0 16px; margin-top: 0; }
@media (min-width: 560px) {
  #tpl-modal { align-items: center; padding: 20px 16px; }
  .tpl-modal-card { border-radius: 16px; }
}
[data-theme="dark"] .tpl-modal-card { background: #241d31; }
[data-theme="dark"] .tpl-modal-head { color: #e8dff5; }
[data-theme="dark"] .tpl-modal-head button { background: #33293f; color: #b3a6c2; }

/* ---------- 底部导航 ---------- */

.tabbar {
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  width: min(440px, calc(100% - 32px));
  display: flex;
  background: rgba(255, 255, 255, .96);
  border-radius: 26px;
  box-shadow: 0 8px 30px rgba(120, 80, 160, .18);
  padding: 8px 10px;
  z-index: 50;
}
.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  border: none;
  background: none;
  padding: 6px 0;
  font-size: 12px;
  color: #9aa0ab;
  cursor: pointer;
  border-radius: 18px;
}
.tab-item svg { width: 24px; height: 24px; }
.tab-item.active { color: #e64980; }
.tab-item.active svg {
  background: #ffe3ee;
  border-radius: 50%;
  padding: 6px;
  width: 36px;
  height: 36px;
  margin-top: -14px;
  box-shadow: 0 4px 10px rgba(230, 73, 128, .25);
}

/* ---------- 公告弹窗 ---------- */

#announce-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .4);
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 24px;
}
.announce-card {
  width: 100%;
  max-width: 400px;
  background: #fff;
  border-radius: 18px;
  padding: 26px 22px 22px;
  text-align: center;
  box-shadow: 0 12px 40px rgba(120, 80, 160, .25);
  animation: popIn .25s ease;
}
@keyframes popIn { from { transform: scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }
.announce-icon { font-size: 40px; }
.announce-title {
  font-size: 18px;
  margin: 8px 0 12px;
  background: linear-gradient(90deg, #f06595, #9775fa);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.announce-text {
  font-size: 14px;
  color: #444;
  line-height: 1.9;
  text-align: left;
  white-space: pre-wrap;
  word-break: break-all;
  background: #fdf0f6;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 16px;
  max-height: 50vh;
  overflow-y: auto;
}

/* ---------- 客服浮窗 ---------- */

#service-fab {
  position: fixed;
  right: 18px;
  bottom: 108px;
  width: 52px;
  height: 52px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, #f783ac, #9775fa);
  color: #fff;
  font-size: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(151, 117, 250, .4);
  z-index: 55;
}
#service-fab span { font-size: 10px; margin-top: 1px; }
#service-fab:active { transform: scale(.94); }

#service-pop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .35);
  z-index: 70;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.service-pop-card {
  width: min(440px, calc(100% - 32px));
  background: #fff;
  border-radius: 16px 16px 0 0;
  padding: 18px 18px 30px;
  margin-bottom: 0;
}
.service-pop-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 12px;
}
.service-pop-head button {
  border: none; background: #f1f3f5; border-radius: 50%;
  width: 28px; height: 28px; cursor: pointer; color: #666;
}
.service-pop-text {
  font-size: 14px;
  color: #333;
  line-height: 1.8;
  white-space: pre-wrap;
  word-break: break-all;
  background: #fdf0f6;
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 12px;
}
#service-copy { padding: 10px; font-size: 14px; }

/* ---------- toast ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 110px;
  transform: translateX(-50%) translateY(20px);
  background: rgba(0, 0, 0, .75);
  color: #fff;
  padding: 10px 20px;
  border-radius: 20px;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: all .25s;
  max-width: 80%;
  z-index: 60;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- 体验优化（2026-10-08） ---------- */

/* 信箱骨架屏 */
.skel {
  height: 64px; border-radius: 12px; margin-bottom: 10px;
  background: linear-gradient(90deg, #f1f3f5 25%, #fafbfc 50%, #f1f3f5 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
}
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* 模板搜索框（模板选择弹窗内） */
#tpl-search {
  width: auto; margin: 0 16px 4px; padding: 8px 12px;
  border: 1.5px solid #eee; border-radius: 10px; font-size: 13px;
  background: #fafafa; font-family: inherit;
}
#tpl-search:focus { border-color: #e64980; background: #fff; outline: none; }

/* 深色模式开关（右上角） */
#theme-toggle {
  position: fixed; top: 14px; right: 14px; z-index: 55;
  width: 40px; height: 40px; border: none; border-radius: 50%;
  background: rgba(255, 255, 255, .9); font-size: 18px; cursor: pointer;
  box-shadow: 0 4px 12px rgba(120, 80, 160, .18);
}

/* iPhone 底部安全区 */
.tabbar { bottom: calc(14px + env(safe-area-inset-bottom)); }
#service-fab { bottom: calc(108px + env(safe-area-inset-bottom)); }

/* 减少动态偏好：关闭浮动与弹窗动画（低配机/省电） */
@media (prefers-reduced-motion: reduce) {
  .float-heart, .skel { animation: none !important; }
  .announce-card { animation: none !important; }
  * { transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- 深色模式 ---------- */
[data-theme="dark"] body {
  background: linear-gradient(165deg, #2b2233 0%, #241f2e 45%, #1c2233 100%);
  color: #e9e3ee;
}
[data-theme="dark"] .hero-sub { color: #b3a6c2; }
[data-theme="dark"] .feature-card,
[data-theme="dark"] .card,
[data-theme="dark"] .announce-card,
[data-theme="dark"] .doc-modal-card,
[data-theme="dark"] .service-pop-card {
  background: rgba(42, 35, 52, .94); color: #e9e3ee;
}
[data-theme="dark"] .feat-body p,
[data-theme="dark"] .hint, [data-theme="dark"] .about-line { color: #9a8fae; }
[data-theme="dark"] .label { color: #b3a6c2; }
[data-theme="dark"] input, [data-theme="dark"] textarea {
  background: #241f2e; border-color: #443a52; color: #eee;
}
[data-theme="dark"] input:focus, [data-theme="dark"] textarea:focus { background: #2c2538; }
[data-theme="dark"] .counter { color: #77688c; }
[data-theme="dark"] .tpl-item { background: #33293f; color: #cfc6da; }
[data-theme="dark"] .tpl-item:active { background: #443255; }
[data-theme="dark"] .tpl-cat { background: #33293f; color: #cfc6da; border-color: #443a52; }
[data-theme="dark"] .announce-text { background: #33293f; color: #cfc6da; }
[data-theme="dark"] .tabbar { background: rgba(42, 35, 52, .96); }
[data-theme="dark"] .tab-item { color: #77688c; }
[data-theme="dark"] .my-order { background: #33293f; }
[data-theme="dark"] .mo-head { color: #9a8fae; border-color: #443a52; }
[data-theme="dark"] .mo-content { color: #cfc6da; }
[data-theme="dark"] .btn-outline { border-color: #77688c; color: #b3a6c2; }
[data-theme="dark"] .skel {
  background: linear-gradient(90deg, #2c2538 25%, #38304a 50%, #2c2538 75%);
  background-size: 200% 100%;
}
[data-theme="dark"] .toast { background: rgba(20, 16, 28, .92); }
[data-theme="dark"] #theme-toggle { background: rgba(42, 35, 52, .9); }
[data-theme="dark"] .order-no { color: #9a8fae; }
[data-theme="dark"] #doc-close, [data-theme="dark"] #service-close { background: #443a52; color: #cfc6da; }

/* ---------- 首页落地页（2026-10-08 改版） ---------- */

/* 模拟手机收到短信 */
.sms-demo { margin: 18px 0 6px; text-align: center; }
.sms-phone {
  background: rgba(255, 255, 255, .92); border-radius: 20px;
  padding: 16px 18px; max-width: 320px; margin: 0 auto; text-align: left;
  box-shadow: 0 10px 30px rgba(120, 80, 160, .15);
}
.sms-head { font-size: 12px; color: #999; margin-bottom: 10px; }
.sms-bubble {
  background: #f1f3f5; border-radius: 4px 16px 16px 16px;
  padding: 12px 14px; font-size: 14.5px; color: #333; line-height: 1.7;
}
.sms-tail { font-size: 12px; color: #aaa; margin-top: 8px; text-align: right; }
.sms-caption { margin-top: 10px; font-size: 13px; color: #8a7590; }

/* 三步流程 */
.steps {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; margin: 20px 0;
}
.step-item { text-align: center; }
.step-item p { font-size: 12.5px; color: #8a7590; margin-top: 6px; }
.step-no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, #f783ac, #9775fa); color: #fff;
  font-weight: 700; font-size: 15px;
}
.step-arrow { color: #d8b4c8; font-size: 16px; }

/* 绿色卖点图标 */
.feat-icon.green { background: #d3f9d8; }

/* 价格行 + 底部 CTA */
.price-line { text-align: center; font-size: 13px; color: #8a7590; margin: 18px 0 12px; }
.btn-hero-bottom { display: block; margin: 0 auto 30px; }

/* 写信页顶栏 */
.composer-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 2px 14px; font-size: 16px; font-weight: 600; color: #555;
}
.composer-top i { width: 36px; }
#btn-back {
  width: 36px; height: 36px; border: none; border-radius: 50%;
  background: rgba(255, 255, 255, .9); font-size: 22px; line-height: 1;
  color: #e64980; cursor: pointer; box-shadow: 0 2px 8px rgba(120, 80, 160, .12);
}

/* 深色模式适配落地页 */
[data-theme="dark"] .sms-phone { background: rgba(42, 35, 52, .94); }
[data-theme="dark"] .sms-bubble { background: #33293f; color: #e0d8ec; }
[data-theme="dark"] .sms-head, [data-theme="dark"] .sms-tail { color: #77688c; }
[data-theme="dark"] .sms-caption, [data-theme="dark"] .step-item p,
[data-theme="dark"] .price-line { color: #9a8fae; }
[data-theme="dark"] .composer-top { color: #cfc6da; }
[data-theme="dark"] #btn-back { background: #33293f; }
[data-theme="dark"] .feat-icon.green { background: #1f3d2b; }
[data-theme="dark"] .feat-icon.pink { background: #40222f; }
[data-theme="dark"] .feat-icon.blue { background: #232c45; }

/* ---------- 首页主视觉卡片（参考图2 风格） ---------- */
.hero-mini { padding-bottom: 6px; }
.hero-mini .hero-title { font-size: 30px; }

.greet-card {
  background: rgba(255, 255, 255, .95);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(120, 80, 160, .15);
  overflow: hidden;
  margin: 10px 0 6px;
}
.greet-banner {
  margin: 14px 16px 0;
  padding: 9px 14px;
  border-radius: 10px;
  background: linear-gradient(90deg, #ffe8d9, #ffd8c2);
  color: #f76707;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: .5px;
}
.greet-body {
  display: flex; align-items: center; gap: 8px;
  padding: 16px 18px 18px;
}
.greet-left { flex: 1.2; min-width: 0; }
.greet-left p {
  font-size: 13.5px; color: #555; line-height: 1.5; margin-bottom: 6px;
}
.greet-left .btn-hero {
  display: block; width: 100%; margin-top: 12px;
  background: linear-gradient(90deg, #ffa94d, #ff922b);
  box-shadow: 0 6px 16px rgba(255, 146, 43, .35);
}
.btn-human {
  display: block; width: 100%; margin-top: 10px; padding: 11px 0;
  border: none; border-radius: 32px; cursor: pointer;
  background: #fff3e6; color: #f76707; font-size: 15px; font-weight: 600;
  font-family: inherit;
}
.btn-human:active { transform: scale(.97); }
.greet-art { flex: 1; text-align: center; }
.greet-art svg { width: 100%; max-width: 170px; height: auto; }
.greet-art .beat { transform-origin: center; animation: heartbeat 2.2s ease-in-out infinite; }
.greet-art .beat.b2 { animation-delay: .6s; }
.greet-art .beat.b3 { animation-delay: 1.2s; }
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  30% { transform: scale(1.18); }
}

/* 深色模式适配主视觉卡 */
[data-theme="dark"] .greet-card { background: rgba(42, 35, 52, .95); }
[data-theme="dark"] .greet-banner { background: #3d2c1e; color: #ffa94d; }
[data-theme="dark"] .greet-left p { color: #cfc6da; }
[data-theme="dark"] .btn-human { background: #3d2c1e; color: #ffa94d; }
[data-theme="dark"] .greet-art circle, [data-theme="dark"] .greet-art path[fill="#fff"] { fill: #2b2233; }
[data-theme="dark"] .greet-art [stroke="#333"] { stroke: #cfc6da; }
@media (prefers-reduced-motion: reduce) {
  .greet-art .beat { animation: none !important; }
}

/* 超小屏（≤360px，如 iPhone SE 一代/小屏安卓）兜底缩放 */
@media (max-width: 360px) {
  .page { padding: 14px 12px 110px; }
  .hero-title { font-size: 28px; letter-spacing: 1px; }
  .hero-mini .hero-title { font-size: 25px; }
  .greet-banner { font-size: 13px; padding: 8px 10px; }
  .greet-left p { font-size: 13px; }
  .btn-hero { font-size: 15px; padding: 11px 20px; }
  .qr { width: 190px; height: 190px; }
  .tpl-cat { font-size: 12px; padding: 6px 10px; }
  .tpl-item { font-size: 13px; }
}

/* ---------- 节日预约 ---------- */

#holiday-section { margin: 16px 0 14px; }
.holiday-head {
  font-size: 15px; font-weight: 700; color: #e64980;
  margin: 0 2px 10px;
}
.holiday-card {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255, 255, 255, .92);
  border-radius: 16px; padding: 13px 14px; margin-bottom: 10px;
  box-shadow: 0 6px 18px rgba(230, 73, 128, .10);
}
.holiday-emoji {
  flex: 0 0 44px; height: 44px; border-radius: 14px;
  background: #ffe3ee; display: flex; align-items: center;
  justify-content: center; font-size: 22px;
}
.holiday-info { flex: 1; min-width: 0; }
.holiday-name { font-size: 15px; font-weight: 700; color: #333; }
.holiday-meta { font-size: 12px; color: #999; margin-top: 2px; }
.holiday-countdown { color: #e64980; font-weight: 600; }
.holiday-btn {
  border: none; border-radius: 18px; padding: 8px 16px;
  font-size: 13px; font-weight: 600; color: #fff;
  background: linear-gradient(90deg, #f783ac, #e64980);
  cursor: pointer; white-space: nowrap; font-family: inherit;
}
.holiday-btn:active { transform: scale(.95); }

/* 写信页顶部的节日预约横幅 */
#holiday-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: linear-gradient(90deg, #fff0e6, #ffe3ee);
  border: 1px solid #ffd0a8;
  border-radius: 12px; padding: 10px 12px; margin-bottom: 16px;
  font-size: 13px; color: #d9480f; font-weight: 600;
}
#holiday-banner button {
  flex: 0 0 auto; border: none; background: none; color: #d9480f;
  font-size: 16px; cursor: pointer; padding: 0 2px;
}

[data-theme="dark"] .holiday-card { background: rgba(42, 35, 52, .94); }
[data-theme="dark"] .holiday-name { color: #e9e3ee; }
[data-theme="dark"] .holiday-meta { color: #9a8fae; }
[data-theme="dark"] .holiday-emoji { background: #40222f; }
[data-theme="dark"] #holiday-banner {
  background: #3d2c1e; border-color: #5c4226; color: #ffa94d;
}
[data-theme="dark"] #holiday-banner button { color: #ffa94d; }

/* ---------- 信箱 / 我的 增强 ---------- */

.inbox-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mini-btn {
  border: 1px solid #f0d0e0; background: #fff; color: #d6336c;
  border-radius: 14px; padding: 4px 12px; font-size: 12.5px; cursor: pointer; white-space: nowrap;
}
.mini-btn:active { transform: scale(.95); }

.inbox-stats { display: flex; gap: 8px; margin: 10px 0; }
.inbox-stat { flex: 1; background: #faf3f8; border-radius: 12px; text-align: center; padding: 9px 4px; }
.inbox-stat b { font-size: 17px; color: #d6336c; font-weight: 700; }
.inbox-stat span { display: block; font-size: 11px; color: #999; margin-top: 2px; }

.inbox-chips { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.inbox-chips button {
  border: 1px solid #eee; background: #fff; border-radius: 14px;
  padding: 4px 12px; font-size: 12.5px; color: #666; cursor: pointer; font-family: inherit;
}
.inbox-chips button.active { background: #d6336c; color: #fff; border-color: #d6336c; }

.o-badge { font-size: 11px; padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.o-sent { background: #e7f7ec; color: #2b8a3e; }
.o-failed { background: #ffe9e9; color: #c92a2a; }
.o-doing { background: #fff3e0; color: #e8890c; }
.o-closed { background: #f1f1f1; color: #999; }

.my-order { cursor: pointer; }
.mo-meta { margin-top: 3px; font-size: 12px; color: #b0879f; }
.mo-error { margin-top: 4px; font-size: 12px; color: #c92a2a; }
.mo-detail { margin-top: 6px; padding-top: 6px; border-top: 1px dashed #eccfdd; font-size: 12px; color: #999; }
.mo-oid { user-select: all; word-break: break-all; margin-bottom: 2px; }

.empty-box { text-align: center; padding: 26px 0 20px; }
.empty-box .btn-primary { margin-top: 6px; }

.menu-list { margin: 2px 0; }
.menu-row {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 4px; font-size: 14.5px; cursor: pointer;
  border-top: 1px solid #f6e9f1;
}
.menu-row:first-child { border-top: none; }
.menu-row:active { opacity: .7; }
.menu-ico { font-size: 17px; }
.menu-arrow { margin-left: auto; color: #d9b3c6; font-size: 17px; }

[data-theme="dark"] .mini-btn { background: #33293f; border-color: #4a3d55; color: #f783ac; }
[data-theme="dark"] .inbox-stat { background: #33293f; }
[data-theme="dark"] .inbox-stat b { color: #f783ac; }
[data-theme="dark"] .inbox-stat span { color: #9a8fae; }
[data-theme="dark"] .inbox-chips button { background: #33293f; border-color: #4a3d55; color: #b3a6c2; }
[data-theme="dark"] .inbox-chips button.active { background: #d6336c; color: #fff; border-color: #d6336c; }
[data-theme="dark"] .o-sent { background: #1f3a2a; color: #69db7c; }
[data-theme="dark"] .o-failed { background: #3d2226; color: #ff8787; }
[data-theme="dark"] .o-doing { background: #3d3018; color: #ffc078; }
[data-theme="dark"] .o-closed { background: #33293f; color: #9a8fae; }
[data-theme="dark"] .mo-meta { color: #8a7590; }
[data-theme="dark"] .mo-detail { border-color: #4a3d55; color: #9a8fae; }
[data-theme="dark"] .menu-row { color: #e9e3ee; border-color: #3a3044; }

/* ---------- 登录页 / 个人中心（2026-10-15 重设计） ---------- */

/* 登录卡：顶部渐变品牌区 + 下方表单 */
.login-card { padding: 0; overflow: hidden; }
.login-hero {
  background: linear-gradient(135deg, #f783ac 0%, #e64980 55%, #9775fa 100%);
  color: #fff;
  text-align: center;
  padding: 30px 20px 24px;
}
.login-logo {
  width: 64px; height: 64px;
  margin: 0 auto 12px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .22);
  display: flex; align-items: center; justify-content: center;
  font-size: 32px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}
.login-title { color: #fff; margin: 0; font-size: 22px; }
.login-sub { margin: 8px 0 0; font-size: 13px; opacity: .92; }
.login-body { padding: 20px 16px 14px; }
.login-field { margin-bottom: 14px; }
.login-field label { display: block; font-size: 13px; font-weight: 600; color: #8a7590; margin-bottom: 6px; }
.login-field input {
  background: #fdf7fa;
  border: 1.5px solid #f0d9e5;
  border-radius: 12px;
  padding: 13px 14px;
}
.login-field input:focus { border-color: #e64980; background: #fff; box-shadow: 0 0 0 3px rgba(230, 73, 128, .12); }
.login-code-row { display: flex; gap: 8px; }
.login-code-row input { flex: 1; min-width: 0; letter-spacing: 4px; font-weight: 600; }
#btn-send-code {
  flex: none;
  border: 1.5px solid #f8b4cd;
  background: #fff;
  color: #e64980;
  border-radius: 12px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
#btn-send-code:disabled { opacity: .55; cursor: not-allowed; }
.login-body .btn-primary { margin-top: 4px; letter-spacing: 2px; }

/* 个人中心资料卡 */
.profile-card { padding: 0; overflow: hidden; }
.profile-head {
  display: flex; align-items: center; gap: 14px;
  padding: 22px 18px;
  background: linear-gradient(135deg, #fff0f6 0%, #f3f0ff 100%);
}
.profile-avatar {
  width: 58px; height: 58px; flex: none;
  border-radius: 50%;
  background: linear-gradient(135deg, #f783ac, #9775fa);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  box-shadow: 0 4px 12px rgba(230, 73, 128, .28);
}
.profile-info h2 { text-align: left; margin: 0; font-size: 19px; color: #333; }
.profile-badge {
  display: inline-block; margin-top: 6px;
  font-size: 11px; color: #2b8a3e;
  background: #d3f9d8;
  border-radius: 8px; padding: 2px 8px;
}
.profile-body { padding: 14px 16px 16px; }
.btn-logout {
  width: 100%; margin-top: 6px;
  border: none; border-radius: 12px;
  padding: 12px;
  font-size: 14px;
  color: #c92a2a;
  background: #fdf0f2;
  cursor: pointer;
}
.btn-logout:active { opacity: .75; }

/* 功能菜单：彩色图标块 + 主副标题 */
.menu-ico {
  width: 38px; height: 38px; flex: none;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}
.mi-pink { background: #ffe3ec; }
.mi-purple { background: #e5dbff; }
.mi-blue { background: #d0ebff; }
.menu-text { display: flex; flex-direction: column; font-size: 15px; color: #333; }
.menu-text em { font-style: normal; font-size: 12px; color: #aaa; margin-top: 3px; }
.menu-row { gap: 12px; padding: 14px 6px; border-radius: 10px; }
.menu-row:active { background: #fdf0f6; opacity: 1; }

/* 深色模式 */
[data-theme="dark"] .login-hero { background: linear-gradient(135deg, #a61e4d 0%, #9c2255 55%, #5f3dc4 100%); }
[data-theme="dark"] .login-field label { color: #9a8fae; }
[data-theme="dark"] .login-field input { background: #241d2e; border-color: #4a3d55; color: #e9e3ee; }
[data-theme="dark"] .login-field input:focus { border-color: #f783ac; background: #2b2438; box-shadow: 0 0 0 3px rgba(247, 131, 172, .15); }
[data-theme="dark"] #btn-send-code { background: #33293f; border-color: #4a3d55; color: #f783ac; }
[data-theme="dark"] .profile-head { background: linear-gradient(135deg, #33293f 0%, #2b2340 100%); }
[data-theme="dark"] .profile-info h2 { color: #e9e3ee; }
[data-theme="dark"] .profile-badge { background: #1f3a2a; color: #69db7c; }
[data-theme="dark"] .btn-logout { background: #3d2226; color: #ff8787; }
[data-theme="dark"] .menu-text { color: #e9e3ee; }
[data-theme="dark"] .menu-text em { color: #8a7590; }
[data-theme="dark"] .mi-pink { background: #4a2b3a; }
[data-theme="dark"] .mi-purple { background: #37305c; }
[data-theme="dark"] .mi-blue { background: #263a4d; }
[data-theme="dark"] .menu-row:active { background: #33293f; }