/* ================================================================= */
/* 呼噜 HuLu · 手绘暖色 · iOS Safe Area · v3                        */
/* ================================================================= */

:root{
  --cream:#FFF8EC;
  --cream-2:#FCEFD7;
  --cream-3:#F7E4BF;
  --peach:#FFD9A8;
  --peach-2:#FBC68A;
  --amber:#F2A65A;
  --amber-2:#E88D3D;
  --amber-deep:#C8701F;

  --pink:#F6BFB2;
  --pink-2:#EFA598;
  --mint:#C9DEB4;
  --mint-2:#A5CF8E;
  --sky:#BDD5E3;
  --lilac:#D8CAE4;

  --line:#C48A5A;
  --line-soft:rgba(196,138,90,.3);
  --ink:#5A3A24;
  --ink-2:#8B6947;
  --ink-3:#B59B7E;

  --shadow-card:0 4px 14px rgba(196,138,90,.18);
  --shadow-soft:0 6px 20px rgba(232,141,61,.15);
  --shadow-warm:0 10px 28px rgba(232,141,61,.22);

  --safe-top:env(safe-area-inset-top, 0px);
  --safe-bottom:env(safe-area-inset-bottom, 0px);
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}

html,body{
  height:100%;width:100%;overflow:hidden;overscroll-behavior:none;
  font-family:'Nunito','PingFang SC','Hiragino Sans GB',sans-serif;
  color:var(--ink);background:var(--cream);
  user-select:none;-webkit-user-select:none;
  touch-action:manipulation;
}

img{-webkit-user-drag:none;user-drag:none;pointer-events:none}

/* ================ APP CONTAINER ================ */
#app{
  position:fixed;inset:0;overflow:hidden;
  background:var(--cream);
}

.paper-bg{
  position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.22;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.78  0 0 0 0 0.55  0 0 0 0 0.35  0 0 0 0.05 0'/></filter><rect width='150' height='150' filter='url(%23n)'/></svg>");
}
.dots-bg{
  position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle 1px, rgba(196,138,90,.18) 1px, transparent 1px);
  background-size:20px 20px;
}

/* ================ SCREENS ================ */
.screen{
  position:absolute;inset:0;
  padding-top:var(--safe-top);
  background:var(--cream);
  display:none;flex-direction:column;
  overflow:hidden;
}
.screen.active{display:flex;animation:screenIn .4s cubic-bezier(.2,.9,.3,1.05)}
.screen.leaving{animation:screenOut .3s ease forwards}

@keyframes screenIn{
  0%{opacity:0;transform:translateX(20px) scale(.98)}
  100%{opacity:1;transform:translateX(0) scale(1)}
}
@keyframes screenOut{
  0%{opacity:1}
  100%{opacity:0;transform:translateX(-14px)}
}

.screen-body{
  flex:1;overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  padding-bottom:calc(80px + var(--safe-bottom));
}
.screen-body.no-nav{padding-bottom:calc(20px + var(--safe-bottom))}

.screen-header{
  padding:14px 18px 10px;display:flex;align-items:center;gap:10px;
  flex-shrink:0;position:relative;z-index:2;
}
.scr-title{
  font-family:'Fraunces',serif;font-style:italic;font-weight:500;
  font-size:22px;flex:1;text-align:center;margin-right:44px;color:var(--ink);
}
.scr-title small{
  font-family:'Caveat',cursive;font-style:normal;color:var(--amber-2);
  font-size:14px;display:block;margin-top:-2px;font-weight:600;
}

.back-btn{
  width:38px;height:38px;border-radius:14px;background:white;
  border:1.5px solid var(--line-soft);box-shadow:var(--shadow-card);
  display:grid;place-items:center;font-size:16px;color:var(--ink);
  cursor:pointer;transition:transform .15s;
}
.back-btn:active{transform:scale(.9)}

/* ================ BUTTONS ================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border-radius:100px;font-family:'Nunito',sans-serif;font-weight:800;
  padding:15px 26px;text-align:center;cursor:pointer;
  font-size:15px;letter-spacing:.3px;position:relative;
  transition:transform .15s ease, box-shadow .15s ease;
  border:none;color:var(--ink);
}
.btn:active{transform:scale(.96)}
.btn-primary{
  background:linear-gradient(180deg,#FFB84D 0%,#F2A65A 55%,#E88D3D 100%);
  color:white;text-shadow:0 1px 2px rgba(138,66,20,.3);
  box-shadow:
    0 8px 20px rgba(232,141,61,.4),
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -2px 0 rgba(138,66,20,.18);
}
.btn-primary:active{box-shadow:0 4px 10px rgba(232,141,61,.4), inset 0 1px 0 rgba(255,255,255,.3)}
.btn-cream{
  background:linear-gradient(180deg,#FFFBEE,#FCEFD7);color:var(--ink);
  box-shadow:var(--shadow-card), inset 0 1px 0 rgba(255,255,255,.8);
  border:1.5px solid var(--line-soft);
}
.btn-pink{background:linear-gradient(180deg,#FBD4CB,#F6BFB2);color:var(--ink);box-shadow:0 6px 16px rgba(239,165,152,.35)}
.btn-full{width:100%}

/* ================ CARDS ================ */
.card{
  background:white;border:1.5px solid var(--line-soft);
  border-radius:24px;box-shadow:var(--shadow-card);
}
.card-cream{
  background:linear-gradient(180deg,#FFFBEE,#FCEFD7);
  border:1.5px solid rgba(196,138,90,.22);border-radius:26px;
  box-shadow:0 6px 18px rgba(232,141,61,.12);
}

/* ================ CHIPS ================ */
.chip{
  display:inline-flex;align-items:center;gap:4px;
  background:white;border:1.5px solid var(--line-soft);border-radius:100px;
  padding:6px 13px;font-size:12px;font-weight:700;color:var(--ink-2);
  box-shadow:0 2px 6px rgba(196,138,90,.1);
  cursor:pointer;transition:all .18s;
}
.chip:active{transform:scale(.94)}
.chip.on{
  background:linear-gradient(180deg,#FFD9A8,#F2A65A);color:white;
  border-color:var(--amber-2);text-shadow:0 1px 1px rgba(138,66,20,.25);
  box-shadow:0 4px 12px rgba(232,141,61,.3);
}

/* ================ BOTTOM NAVBAR ================ */
.navbar{
  position:absolute;bottom:0;left:0;right:0;height:calc(74px + var(--safe-bottom));
  padding-bottom:var(--safe-bottom);
  background:rgba(255,248,236,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line-soft);
  display:flex;padding-left:12px;padding-right:12px;padding-top:8px;gap:4px;
  z-index:20;
}
.navbar .tab{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  font-size:10px;font-weight:700;color:var(--ink-3);cursor:pointer;
  padding:6px 0;border-radius:16px;
}
.navbar .tab .icw{
  width:40px;height:40px;border-radius:14px;display:grid;place-items:center;
  font-size:20px;transition:all .25s cubic-bezier(.2,.9,.3,1.2);
}
.navbar .tab.active{color:var(--amber-deep)}
.navbar .tab.active .icw{
  background:linear-gradient(180deg,#FFD9A8,#F2A65A);color:white;
  box-shadow:0 6px 14px rgba(232,141,61,.35), inset 0 1px 0 rgba(255,255,255,.4);
  transform:translateY(-4px) scale(1.05);
}
.navbar .tab:active .icw{transform:translateY(-2px) scale(.95)}

/* =========================================================== */
/* ===== 陪伴页 · 免费用户顶部解锁提醒条 · F1a · F2 ========== */
/* =========================================================== */
.pet-lock-banner{
  position:absolute;
  top:calc(var(--safe-top,env(safe-area-inset-top)) + 8px);
  left:12px;right:12px;z-index:30;
  display:flex;align-items:center;gap:10px;
  padding:10px 12px 10px 14px;
  border-radius:100px;
  background:linear-gradient(180deg,rgba(255,227,176,.95),rgba(250,176,104,.94));
  -webkit-backdrop-filter:blur(12px) saturate(160%);
  backdrop-filter:blur(12px) saturate(160%);
  box-shadow:
    0 8px 22px rgba(232,141,61,.35),
    inset 0 1px 0 rgba(255,255,255,.5);
  color:#5A3A24;
  animation:petLockSlideIn .35s cubic-bezier(.25,1,.5,1);
}
.pet-lock-banner.fading-out{
  animation:petLockSlideOut .28s cubic-bezier(.4,0,.2,1) forwards;
}
.pet-lock-banner .plb-text{
  flex:1;font-size:12.5px;font-weight:700;line-height:1.3;
  letter-spacing:.2px;
}
.pet-lock-banner .plb-cta{
  flex-shrink:0;border:none;cursor:pointer;
  padding:6px 12px;border-radius:100px;
  background:rgba(255,255,255,.82);color:var(--amber-deep);
  font-size:12px;font-weight:800;
  box-shadow:0 2px 6px rgba(150,80,20,.25);
}
.pet-lock-banner .plb-cta:active{transform:scale(.95)}
.pet-lock-banner .plb-close{
  flex-shrink:0;width:22px;height:22px;border-radius:50%;
  border:none;cursor:pointer;
  background:rgba(90,58,36,.18);color:#5A3A24;
  font-size:11px;font-weight:700;line-height:1;
  display:grid;place-items:center;
}
.pet-lock-banner .plb-close:active{transform:scale(.9)}
@keyframes petLockSlideIn{
  0%{opacity:0;transform:translateY(-12px)}
  100%{opacity:1;transform:translateY(0)}
}
@keyframes petLockSlideOut{
  0%{opacity:1;transform:translateY(0)}
  100%{opacity:0;transform:translateY(-14px)}
}

/* 免费模式下保留 tap zones，用于提示解锁后的互动能力 */
#s-pet.free-mode .sparkle-layer{display:none !important}

/* =========================================================== */
/* ===== 3-tab 版导航 · 中间凸起的陪伴按钮（方案 X）======== */
/* =========================================================== */
.navbar.nav3{
  padding-left:24px;padding-right:24px;gap:18px;
}
.navbar.nav3 .tab-center{
  position:relative;flex:0 0 auto;overflow:visible;
}
.navbar.nav3 .tab-center span{
  color:var(--amber-deep);font-weight:800;font-size:10.5px;
  margin-top:6px;letter-spacing:.5px;
}

/* 凸起的 陪伴气泡按钮（72 直径 · 上浮 24px）*/
.nav-pet-bubble{
  width:72px;height:72px;border-radius:50%;
  margin-top:-36px;                                /* 一半在 bar 上方 */
  background:linear-gradient(180deg,#FFD9A8 0%,#F2A65A 60%,#E88D3D 100%);
  box-shadow:
    0 10px 28px rgba(232,141,61,.45),
    0 4px 10px rgba(232,141,61,.35),
    inset 0 1.5px 0 rgba(255,255,255,.55),
    inset 0 -2px 4px rgba(150,80,20,.25);
  position:relative;overflow:hidden;
  border:3px solid rgba(255,248,236,.98);          /* 白边让它"浮"在背景上 */
  display:grid;place-items:center;
  transition:transform .2s cubic-bezier(.2,.9,.3,1.3);
}
.navbar.nav3 .tab-center:active .nav-pet-bubble{
  transform:scale(.94);
}
.navbar.nav3 .tab-center.active .nav-pet-bubble,
.navbar.nav3 .tab-center[data-active='1'] .nav-pet-bubble{
  transform:scale(1.04);
  box-shadow:
    0 14px 32px rgba(232,141,61,.55),
    0 6px 14px rgba(232,141,61,.4),
    inset 0 2px 0 rgba(255,255,255,.6),
    inset 0 -3px 6px rgba(150,80,20,.3);
}

/* bubble 内部：video（付费）或 img（免费）或兜底 emoji */
.nav-pet-bubble .nav-pet-vid,
.nav-pet-bubble .nav-pet-img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 30%;                       /* 把焦点锁在头部 */
  border-radius:50%;
}
.nav-pet-bubble .nav-pet-fallback{
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:30px;color:#fff;
  text-shadow:0 2px 6px rgba(150,80,20,.4);
}
.nav-pet-bubble.has-media .nav-pet-fallback{display:none}
.nav-pet-bubble .nav-pet-vid.hidden{display:none}
.nav-pet-bubble .nav-pet-img.hidden{display:none}

/* 柔光呼吸动画（不点击也有生命感）*/
.nav-pet-bubble::before{
  content:'';position:absolute;inset:-6px;border-radius:50%;
  background:radial-gradient(circle,rgba(242,166,90,.35) 0%,transparent 65%);
  animation:navPetGlow 2.8s ease-in-out infinite;
  pointer-events:none;z-index:-1;
}
@keyframes navPetGlow{
  0%,100%{opacity:.55;transform:scale(1)}
  50%{opacity:.85;transform:scale(1.08)}
}

/* =========================================================== */
/* =============== SPLASH SCREEN ============================= */
/* =========================================================== */
#s-splash{
  background:
    radial-gradient(ellipse at 50% 110%, #FFE5C6 0%, transparent 55%),
    radial-gradient(circle at 50% 20%, #FFF3DE 0%, transparent 55%),
    linear-gradient(180deg,#FFFBEE 0%, #FFDFA8 100%);
}
.splash-inner{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:40px 30px calc(40px + var(--safe-bottom));gap:22px;text-align:center;
  position:relative;z-index:2;
}
.splash-icon{
  width:200px;height:200px;border-radius:48px;
  background:linear-gradient(160deg,#FFFBEE,#FFE9C9);
  padding:8px;position:relative;
  box-shadow:0 18px 48px rgba(232,141,61,.32), inset 0 2px 0 rgba(255,255,255,.6);
  border:2px solid rgba(242,166,90,.3);
  animation:floatSlow 4s ease-in-out infinite;
}
.splash-icon img,
.splash-icon video{
  width:100%;height:100%;border-radius:42px;display:block;
  object-fit:cover;pointer-events:none;
  filter:drop-shadow(0 4px 10px rgba(200,112,31,.15));
  background:#FFF3DE;
}
.splash-icon::before{
  content:"";position:absolute;inset:-3px;border-radius:52px;
  background:radial-gradient(circle at 30% 10%, rgba(255,255,255,.6), transparent 40%);
  pointer-events:none;z-index:1;
}
@keyframes floatSlow{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-10px) rotate(-1deg)}
}
.splash h1{
  font-family:'Fraunces',serif;font-style:italic;font-weight:500;
  font-size:68px;color:var(--ink);letter-spacing:-2px;line-height:1;
}
.splash h1 span{color:var(--amber)}
.splash .zh-sub{
  font-family:'ZCOOL XiaoWei',serif;font-size:18px;color:var(--amber-deep);
  letter-spacing:10px;margin-left:10px;
}
.splash .tagline{
  font-family:'Caveat',cursive;font-size:20px;color:var(--amber-2);
  transform:rotate(-2deg);font-weight:700;
}
.splash .btn-primary{width:75%;max-width:280px;padding:17px}
.splash-footer{font-size:11px;color:var(--ink-2);font-weight:600}
.splash-footer b{color:var(--amber-deep);font-weight:800;margin-left:4px}

.sparkle{position:absolute;z-index:1;color:var(--amber);opacity:.6;font-weight:900;pointer-events:none}
.sparkle.s1{top:8%;left:10%;font-size:22px;animation:twinkle 3s infinite}
.sparkle.s2{top:14%;right:14%;font-size:14px;animation:twinkle 3s infinite .5s}
.sparkle.s3{bottom:28%;left:12%;font-size:18px;animation:twinkle 3s infinite 1s}
.sparkle.s4{bottom:35%;right:10%;font-size:24px;animation:twinkle 3s infinite 1.5s}
.sparkle.s5{top:40%;left:6%;font-size:12px;animation:twinkle 3s infinite .8s}
@keyframes twinkle{
  0%,100%{opacity:.2;transform:scale(.7)}
  50%{opacity:.8;transform:scale(1.1)}
}

/* =========================================================== */
/* =============== AUTH SCREENS ============================== */
/* =========================================================== */
.auth-wrap{
  padding:28px 28px calc(20px + var(--safe-bottom));height:100%;
  position:relative;overflow-y:auto;
}
.auth-wrap::before{
  content:"";position:absolute;top:-40px;right:-40px;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,#FFE5C6,transparent 70%);pointer-events:none;
}
.auth-wrap h2{
  font-family:'Fraunces',serif;font-style:italic;font-weight:500;
  font-size:44px;line-height:1;color:var(--ink);margin:22px 0 4px;
}
.auth-wrap .h-zh{
  font-family:'Caveat',cursive;font-size:22px;color:var(--amber-2);
  margin-bottom:26px;transform:rotate(-1deg);display:inline-block;font-weight:700;
}
.field{
  background:white;border:1.5px solid var(--line-soft);border-radius:18px;
  padding:10px 14px;margin-bottom:12px;display:flex;align-items:center;gap:12px;
  box-shadow:0 3px 10px rgba(196,138,90,.08);transition:all .2s;
}
.field:focus-within{border-color:var(--amber);box-shadow:0 0 0 3px rgba(242,166,90,.15), 0 3px 10px rgba(196,138,90,.1)}
.field .ic-l{
  width:36px;height:36px;border-radius:12px;
  background:linear-gradient(160deg,#FFE9C9,#FFD9A8);
  display:grid;place-items:center;font-size:16px;flex-shrink:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
}
.field-wrap{flex:1;min-width:0}
.field .lb{font-size:10px;color:var(--ink-3);font-weight:700;letter-spacing:.5px;text-transform:uppercase}
.field input{
  background:none;border:0;outline:0;
  font-family:inherit;font-size:14px;color:var(--ink);font-weight:700;
  width:100%;margin-top:2px;
}
.field input::placeholder{color:var(--ink-3);font-weight:600}
.row-mini{display:flex;justify-content:space-between;font-size:11px;font-weight:700;color:var(--ink-2);margin:6px 2px 20px}
.row-mini b{color:var(--amber-deep)}
.row-mini span{cursor:pointer;padding:4px 2px}

/* 注册页 · 协议勾选 */
.consent-row{
  display:flex;align-items:flex-start;gap:10px;
  font-size:12px;color:var(--ink-2);font-weight:600;line-height:1.55;
  margin:14px 2px 16px;cursor:pointer;user-select:none;
}
.consent-row input[type=checkbox]{
  margin-top:2px;flex-shrink:0;width:16px;height:16px;
  accent-color:var(--amber-deep);
  cursor:pointer;
}
.consent-row b{color:var(--amber-deep);cursor:pointer;font-weight:800}
.consent-row .sep{color:var(--ink-3);margin:0 2px;font-style:normal}
.btn.btn-primary:disabled,
.btn.btn-primary[disabled]{opacity:.45;pointer-events:none;filter:grayscale(.3)}

/* 短信验证码发送按钮 */
.sms-btn{
  flex-shrink:0;white-space:nowrap;
  background:linear-gradient(160deg,#FFD9A8,#F2A65A);
  color:#3E2A1E;border:0;border-radius:12px;
  font-family:inherit;font-size:12px;font-weight:800;
  padding:7px 12px;cursor:pointer;transition:opacity .2s;
}
.sms-btn:disabled{opacity:.45;pointer-events:none;}

/* 找回密码弹层 */
.modal-overlay{
  position:fixed;inset:0;z-index:9000;
  background:rgba(62,42,30,.45);
  display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:var(--safe-bottom,0);
}
.modal-card{
  background:#FFF8F0;border-radius:24px 24px 0 0;
  width:100%;max-width:480px;
  padding:20px 24px calc(28px + var(--safe-bottom,0));
  box-shadow:0 -8px 30px rgba(62,42,30,.15);
}
.modal-head{
  display:flex;align-items:center;justify-content:space-between;
  font-family:'Fraunces',serif;font-style:italic;font-size:20px;
  color:var(--ink);margin-bottom:20px;
}
.modal-close{
  background:none;border:0;font-size:16px;color:var(--ink-3);
  cursor:pointer;padding:4px 8px;font-family:inherit;
}

/* =========================================================== */
/* =============== SETUP / ONBOARDING ======================== */
/* =========================================================== */
.prog-seg{display:flex;gap:6px;padding:4px 20px 16px}
.prog-seg.setup-two{padding-bottom:10px}
.prog-seg .s{flex:1;height:6px;border-radius:100px;background:rgba(196,138,90,.18)}
.prog-seg .s.on{background:linear-gradient(90deg,#FFD9A8,#F2A65A);box-shadow:0 2px 6px rgba(232,141,61,.3)}
.setup-steps.setup-two{grid-template-columns:repeat(2,1fr);padding-bottom:10px}

.setup-panel.hidden{display:none}
#s-setup .screen-body{overflow-y:auto}
.setup-panel-photo{
  min-height:calc(100vh - 252px - var(--safe-top) - var(--safe-bottom));
  display:flex;flex-direction:column;justify-content:flex-start;padding-top:0;
}
.photo-guide{
  margin:0 20px 8px;padding:10px 12px;border-radius:18px;
  background:rgba(255,255,255,.72);border:1px solid var(--line-soft);
  box-shadow:0 8px 22px rgba(196,138,90,.1);
}
.photo-guide b{display:block;color:var(--ink);font-size:16px;margin-bottom:3px;letter-spacing:0}
.photo-guide>span{display:block;color:var(--ink-3);font-size:11px;line-height:1.4;font-weight:800}
.guide-preview-compact{display:none}
.guide-stage{display:contents}
.guide-main{position:relative;aspect-ratio:9/16;border-radius:16px;overflow:hidden;border:2px solid #F2A65A;background:#FFF8EC;box-shadow:0 8px 18px rgba(138,66,20,.12)}
.guide-main img{width:100%;height:100%;object-fit:cover;display:block}
.guide-caption{position:absolute;left:6px;right:6px;bottom:6px;border-radius:999px;background:rgba(255,248,236,.92);color:var(--amber-deep);font-size:9px;font-weight:900;text-align:center;padding:4px 5px;box-shadow:0 4px 12px rgba(60,38,24,.1)}
.guide-thumbs{display:none}
.photo-example-link{
  margin:0 20px 8px;border:0;background:transparent;color:var(--amber-deep);
  font-size:12px;font-weight:900;text-decoration:underline;text-underline-offset:3px;
  align-self:center;padding:8px 10px;
}
.guide-tags{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0}
.guide-tags span{border-radius:999px;background:#FFF4E2;border:1px solid rgba(242,166,90,.36);color:var(--amber-deep);font-size:11px;font-weight:900;text-align:center;padding:7px 4px;white-space:nowrap}
.photo-check{
  margin:0 20px 6px;padding:9px 11px;border-radius:14px;
  border:1px solid rgba(242,166,90,.45);background:#FFF8EC;color:var(--ink-3);
  font-size:11px;font-weight:800;line-height:1.45;
}
.photo-check.bad{border-color:#E4A15E;background:#FFF3DE;color:#8A4214}
.photo-check.good{border-color:rgba(127,194,122,.55);background:#F5FFE9;color:#5D7D3E}
.pet-status-row .chip{font-size:12px;padding:9px 11px}
.photo-up{
  height:168px;border-radius:24px;
  background:radial-gradient(circle at 50% 40%, #FFF3DE, #FFE5C6);
  border:2px dashed var(--amber);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  color:var(--ink);font-weight:700;margin:0 20px 16px;position:relative;
  cursor:pointer;overflow:hidden;transition:transform .2s;
}
.photo-up.setup-photo-primary{
  height:auto;min-height:0;aspect-ratio:9/16;
  flex:1;margin-bottom:8px;max-height:54vh;border-radius:28px;
}
.photo-up:active{transform:scale(.98)}
.photo-up .cam{
  width:54px;height:54px;border-radius:50%;background:white;
  border:1.5px solid var(--line-soft);display:grid;place-items:center;font-size:24px;
  box-shadow:0 4px 12px rgba(232,141,61,.2);
}
.photo-up .sub{
  font-family:'Caveat',cursive;font-size:14px;color:var(--amber-2);font-weight:700;
}
.photo-up img.preview{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:26px;
}
.photo-up::before,.photo-up::after{
  content:"";position:absolute;width:8px;height:8px;background:var(--amber);border-radius:50%;opacity:.4;
}
.photo-up::before{top:18px;left:20px}
.photo-up::after{bottom:20px;right:24px}

.label{
  font-family:'Caveat',cursive;font-weight:700;font-size:17px;
  color:var(--amber-deep);margin:14px 0 8px;padding:0 24px;display:flex;align-items:center;gap:6px;
}
.label::before{content:"\2726";color:var(--amber)}

.chips-wrap{display:flex;flex-wrap:wrap;gap:6px;padding:0 20px}
.setup-panel-info{padding-top:0}
.setup-panel-info .label{margin-top:8px;margin-bottom:6px;font-size:16px}
.setup-panel-info .chips-wrap{gap:5px}
.setup-panel-info .chip{padding:8px 10px;font-size:12px}
.field-plain{
  background:white;border:1.5px solid var(--line-soft);border-radius:16px;
  padding:12px 16px;margin:0 20px 10px;font-size:14px;font-weight:700;color:var(--ink);
  box-shadow:0 3px 10px rgba(196,138,90,.08);
}
.field-plain input{background:none;border:0;outline:0;width:100%;font:inherit;color:var(--ink)}

.text-area{
  background:#FFFBEE;border:1.5px solid var(--line-soft);border-radius:18px;padding:14px;
  min-height:90px;font-family:'Ma Shan Zheng',cursive;font-size:14px;color:var(--ink);line-height:1.8;
  box-shadow:inset 0 2px 6px rgba(196,138,90,.06), 0 3px 10px rgba(196,138,90,.08);
  margin:0 20px 14px;width:calc(100% - 40px);outline:0;resize:none;
}

.bottom-fixed{
  position:absolute;bottom:calc(16px + var(--safe-bottom));left:20px;right:20px;z-index:5;
}

.photo-guide-sheet{padding-top:18px}
.photo-guide-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 12px;
}
.photo-guide-card{
  min-width:0;border:1.5px solid var(--line-soft);border-radius:18px;
  background:rgba(255,255,255,.78);padding:6px;text-align:center;
  color:var(--ink-3);font-weight:900;box-shadow:0 6px 18px rgba(196,138,90,.1);
}
.photo-guide-card.good{border-color:#F2A65A;color:var(--amber-deep)}
.photo-guide-card img{
  width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:12px;display:block;
  background:#FFF8EC;margin-bottom:6px;
}
.photo-guide-card b{display:block;font-size:13px;color:inherit;line-height:1.1}
.photo-guide-card span{display:block;font-size:10px;line-height:1.25;margin-top:3px;color:var(--ink-3)}
.photo-guide-copy{
  margin:0 2px 14px;color:var(--ink-3);font-size:12px;line-height:1.55;font-weight:800;
}
.photo-guide-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.photo-guide-actions.tips{grid-template-columns:1fr}
.photo-guide-actions .btn{height:46px}

/* =========================================================== */
/* =============== AWAKENING  ================================ */
/* =========================================================== */
#s-progress.awakening{
  background:
    radial-gradient(ellipse at 50% 45%, #FFE9C9 0%, transparent 60%),
    radial-gradient(circle at 20% 20%, #FFD9A8 0%, transparent 45%),
    radial-gradient(circle at 80% 85%, #FBD4CB 0%, transparent 50%),
    linear-gradient(180deg, #FFF8EC 0%, #FFE5C6 100%);
  overflow:hidden;
}
.awaken-bg{position:absolute;inset:0;pointer-events:none;z-index:0}
.breath-glow{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-55%);
  width:360px;height:360px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,240,210,.9), transparent 65%);
  animation:glowBreathe 5s ease-in-out infinite;
  filter:blur(20px);
}
@keyframes glowBreathe{
  0%,100%{transform:translate(-50%,-55%) scale(.85);opacity:.6}
  50%{transform:translate(-50%,-55%) scale(1.12);opacity:.95}
}
.awaken-dust{
  position:absolute;color:var(--amber-2);font-weight:900;opacity:.55;font-size:18px;
  animation:dustFloat 8s ease-in-out infinite;
}
.awaken-dust.d1{top:18%;left:18%;font-size:14px;animation-delay:0s}
.awaken-dust.d2{top:28%;right:20%;font-size:20px;animation-delay:1.3s}
.awaken-dust.d3{bottom:32%;left:22%;font-size:12px;animation-delay:2.6s}
.awaken-dust.d4{bottom:22%;right:26%;font-size:18px;animation-delay:3.9s}
.awaken-dust.d5{top:60%;left:8%;font-size:14px;animation-delay:5.2s}
@keyframes dustFloat{
  0%,100%{transform:translateY(0) rotate(0);opacity:.2}
  50%{transform:translateY(-20px) rotate(180deg);opacity:.75}
}

.awaken-inner{
  position:relative;z-index:2;flex:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:40px 28px calc(30px + var(--safe-bottom));gap:16px;text-align:center;
}

.pet-halo{position:relative;width:200px;height:200px;display:grid;place-items:center;margin-bottom:10px}
.halo{
  position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(242,166,90,.45);
  animation:haloPulse 3.4s ease-in-out infinite;
}
.halo-1{transform:scale(.6);animation-delay:0s;opacity:.9}
.halo-2{transform:scale(.85);animation-delay:.7s;opacity:.55}
.halo-3{transform:scale(1.1);animation-delay:1.4s;opacity:.3}
@keyframes haloPulse{
  0%,100%{opacity:.15;transform:scale(.6)}
  50%{opacity:.85;transform:scale(1.25)}
}
.halo-core{
  width:132px;height:132px;border-radius:42px;overflow:hidden;
  background:linear-gradient(160deg,#FFE9C9,#FFD9A8);
  border:3px solid white;
  box-shadow:0 14px 36px rgba(232,141,61,.4), inset 0 2px 0 rgba(255,255,255,.6);
  position:relative;z-index:2;
  animation:coreBreathe 5s ease-in-out infinite;
}
.halo-core img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.85) brightness(1.02);
  transition:filter 3s;
}
@keyframes coreBreathe{
  0%,100%{transform:scale(.98)}
  50%{transform:scale(1.04)}
}

.awaken-title{
  font-family:'Fraunces',serif;font-style:italic;font-weight:500;
  font-size:24px;color:var(--ink);line-height:1.3;
  animation:textFade .6s ease;
  min-height:60px;display:flex;align-items:center;
}
@keyframes textFade{
  0%{opacity:0;transform:translateY(8px)}
  100%{opacity:1;transform:translateY(0)}
}
.awaken-sub{
  font-family:'Caveat',cursive;font-size:18px;color:var(--amber-deep);font-weight:700;
  transform:rotate(-1deg);
}
.awaken-hint{
  font-family:'Caveat',cursive;font-size:15px;color:var(--ink-3);font-weight:700;
  margin-top:10px;opacity:.8;
}

.breath-bar{
  width:78%;max-width:300px;height:6px;border-radius:100px;margin-top:8px;
  background:rgba(196,138,90,.18);overflow:hidden;position:relative;
  box-shadow:inset 0 1px 2px rgba(138,66,20,.1);
}
.breath-fill{
  height:100%;width:0%;
  background:linear-gradient(90deg, #FFD9A8 0%, #F2A65A 50%, #FFD9A8 100%);
  background-size:200% 100%;
  border-radius:100px;
  animation:shimmer 2.2s linear infinite;
  transition:width 1.2s cubic-bezier(.25,.8,.3,1);
  box-shadow:0 0 12px rgba(242,166,90,.55);
}
@keyframes shimmer{
  0%{background-position:200% 50%}
  100%{background-position:-200% 50%}
}

/* 进度后期 core 更清晰 */
.halo-core.clear img{filter:saturate(1.1) brightness(1.05)}

/* progress ring (legacy, 保留以防别的地方还用) */
.prog-wrap{
  flex:1;padding:24px 22px 20px;display:flex;flex-direction:column;align-items:center;
  overflow-y:auto;text-align:center;
}
.prog-wrap h3{
  font-family:'Fraunces',serif;font-style:italic;font-weight:500;font-size:28px;color:var(--ink);
}
.prog-wrap .p-sub{font-family:'Caveat',cursive;font-size:17px;color:var(--amber-2);margin-top:4px;font-weight:700}
.prog-ring{
  width:176px;height:176px;border-radius:50%;
  display:grid;place-items:center;margin:20px 0 24px;position:relative;
  box-shadow:0 12px 28px rgba(232,141,61,.22);
  background:conic-gradient(#F2A65A var(--p, 0deg), #F7E4BF 0);
  transition:background .6s ease;
}
.prog-ring::before{
  content:"";position:absolute;width:142px;height:142px;border-radius:50%;
  background:var(--cream);box-shadow:inset 0 2px 8px rgba(196,138,90,.1);
}
.prog-ring .in{position:relative;text-align:center;z-index:1}
.prog-ring .pct{
  font-family:'Fraunces',serif;font-style:italic;font-size:44px;color:var(--ink);
  line-height:1;font-weight:500;
}
.prog-ring .pct b{color:var(--amber-deep);font-weight:700}
.prog-ring .lb{font-size:10px;color:var(--ink-2);font-weight:800;letter-spacing:2px;margin-top:2px}
.stages{width:100%;max-width:320px}
.stage{
  display:flex;align-items:center;gap:12px;padding:11px 14px;margin-bottom:8px;
  background:white;border:1.5px solid var(--line-soft);border-radius:18px;
  box-shadow:0 3px 10px rgba(196,138,90,.08);
  opacity:.5;transition:opacity .3s;
}
.stage.done,.stage.active{opacity:1}
.stage .d{
  width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  font-weight:800;font-size:11px;flex-shrink:0;background:#F7E4BF;color:var(--ink-3);
}
.stage.done .d{background:linear-gradient(180deg,#D4E8C3,#A5CF8E);color:white;box-shadow:0 3px 8px rgba(127,194,122,.3)}
.stage.active .d{
  background:linear-gradient(180deg,#FFD9A8,#F2A65A);color:white;
  box-shadow:0 3px 8px rgba(232,141,61,.35);
  animation:pulseRing 1.4s infinite;
}
@keyframes pulseRing{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.15)}
}
.stage .nm{font-size:13px;font-weight:700;flex:1;color:var(--ink);text-align:left}
.stage .t{font-size:10px;color:var(--ink-3);font-weight:700}

/* =========================================================== */
/* =============== HOME ====================================== */
/* =========================================================== */
#s-home{
  background:
    radial-gradient(ellipse at 50% 0%, #FFE5C6 0%, transparent 50%),
    linear-gradient(180deg, #FFF3DE 0%, #FFF8EC 50%, #FFF8EC 100%);
}
.home-scroll{padding:0 20px;position:relative;z-index:2}
.greet-row{display:flex;align-items:flex-start;justify-content:space-between;padding:16px 2px 14px}
.greet-row h2{
  font-family:'Fraunces',serif;font-style:italic;font-weight:500;font-size:34px;
  color:var(--ink);line-height:1;
}
.greet-row .sub{
  font-family:'Caveat',cursive;font-size:20px;color:var(--amber-2);
  margin-top:2px;transform:rotate(-1deg);display:inline-block;font-weight:700;
}
.user-av{
  width:48px;height:48px;border-radius:16px;
  background:linear-gradient(160deg,#FFD9A8,#F2A65A);
  display:grid;place-items:center;font-size:22px;flex-shrink:0;
  box-shadow:0 6px 14px rgba(232,141,61,.3), inset 0 1px 0 rgba(255,255,255,.4);
  cursor:pointer;
}
.wave{display:inline-block;animation:wave 2.4s infinite;transform-origin:70% 70%}
@keyframes wave{
  0%,100%{transform:rotate(0)}
  10%,30%{transform:rotate(14deg)}
  20%{transform:rotate(-8deg)}
  40%{transform:rotate(10deg)}
  50%{transform:rotate(0)}
}

/* hero illustration card — embedding the real icon */
.hero-illus{
  position:relative;margin-bottom:16px;border-radius:26px;overflow:hidden;
  background:linear-gradient(160deg,#FFF3DE,#FFE5C6);
  border:1.5px solid rgba(196,138,90,.2);
  padding:16px 18px;
  box-shadow:0 8px 22px rgba(232,141,61,.14);
  display:flex;align-items:center;gap:14px;
}
.hero-illus::before{
  content:"";position:absolute;top:-20px;right:-20px;width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.5),transparent 65%);pointer-events:none;
}
.hero-illus .hi-img{
  width:110px;height:110px;flex-shrink:0;border-radius:28px;
  overflow:hidden;position:relative;z-index:2;
  background:radial-gradient(circle at 40% 30%, rgba(255,255,255,.7), transparent 60%);
  -webkit-mask-image:radial-gradient(ellipse at center, black 70%, transparent 100%);
  mask-image:radial-gradient(ellipse at center, black 70%, transparent 100%);
}
.hero-illus .hi-img img{width:100%;height:100%;object-fit:cover;display:block}
.hero-illus .hi-tx{flex:1;z-index:2;position:relative}
.hero-illus .hi-tx h3{
  font-family:'Fraunces',serif;font-style:italic;font-weight:500;font-size:19px;color:var(--ink);line-height:1.3;
}
.hero-illus .hi-tx p{font-family:'Caveat',cursive;font-size:16px;color:var(--amber-deep);margin-top:4px;font-weight:700}

.banner{
  background:linear-gradient(135deg,#FBD4CB 0%,#F6BFB2 100%);
  border-radius:22px;padding:14px 18px;margin-bottom:14px;
  box-shadow:0 6px 18px rgba(239,165,152,.28);
  display:flex;align-items:center;gap:12px;position:relative;overflow:hidden;
  border:1.5px solid rgba(196,138,90,.15);
  cursor:pointer;transition:transform .2s;
}
.banner:active{transform:scale(.98)}
.banner::after{content:"";position:absolute;top:-20px;right:-20px;width:80px;height:80px;border-radius:50%;background:rgba(255,255,255,.3)}
.banner .bi{
  width:46px;height:46px;border-radius:14px;background:white;
  display:grid;place-items:center;font-size:22px;flex-shrink:0;z-index:1;
  box-shadow:0 3px 8px rgba(196,138,90,.15);
}
.banner .tx{flex:1;z-index:1;color:#7A4640}
.banner .tx h4{font-family:'Fraunces',serif;font-style:italic;font-weight:500;font-size:15px}
.banner .tx p{font-family:'Caveat',cursive;font-size:14px;margin-top:1px;opacity:.9;font-weight:700}
.banner .cd{
  font-family:'Fraunces',serif;font-style:italic;font-weight:700;font-size:22px;color:white;
  z-index:1;text-shadow:0 2px 4px rgba(122,70,64,.3);
}

.pet-card{
  background:white;border:1.5px solid var(--line-soft);border-radius:24px;padding:16px;
  box-shadow:var(--shadow-card);margin-bottom:16px;position:relative;overflow:hidden;
  cursor:pointer;transition:transform .2s;
}
.pet-card:active{transform:scale(.98)}
.pet-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.25;
  background-image:radial-gradient(circle 1px, rgba(196,138,90,.5) 1px, transparent 1px);
  background-size:16px 16px;
}
.pet-card .hd{display:flex;align-items:center;gap:14px;margin-bottom:14px;position:relative}
.pet-av{
  width:66px;height:66px;border-radius:22px;flex-shrink:0;
  background:linear-gradient(160deg,#FFF3DE,#FFD9A8);
  border:2px solid var(--peach-2);
  box-shadow:0 5px 12px rgba(232,141,61,.22);
  display:grid;place-items:center;position:relative;overflow:hidden;
}
.pet-av img{width:100%;height:100%;object-fit:cover}
.pet-card h3{font-family:'Fraunces',serif;font-style:italic;font-weight:500;font-size:22px;color:var(--ink);line-height:1}
.pet-card .sub-in{font-family:'Caveat',cursive;font-size:15px;color:var(--amber-2);margin-top:3px;font-weight:700}
.pet-card .arr{
  width:36px;height:36px;border-radius:50%;background:linear-gradient(160deg,#FFD9A8,#F2A65A);
  display:grid;place-items:center;color:white;font-weight:800;font-size:16px;
  box-shadow:0 4px 10px rgba(232,141,61,.35);
}
.stats-row{display:flex;gap:8px;position:relative}
.stat{
  flex:1;background:linear-gradient(180deg,#FFFBEE,#FCEFD7);
  border-radius:14px;padding:10px 6px;text-align:center;
  border:1px solid rgba(196,138,90,.15);
}
.stat .n{font-family:'Fraunces',serif;font-style:italic;font-weight:700;font-size:19px;color:var(--amber-deep);line-height:1}
.stat .l{font-size:10px;color:var(--ink-2);font-weight:700;margin-top:3px}

.tools-heading{display:flex;align-items:center;gap:10px;margin:4px 4px 12px}
.tools-heading h4{font-family:'Fraunces',serif;font-style:italic;font-weight:500;font-size:18px;color:var(--ink)}
.tools-heading .sub{font-family:'Caveat',cursive;font-size:14px;color:var(--amber-2);flex:1;font-weight:700}
.tools-heading .more{font-size:10px;font-weight:700;color:var(--ink-3)}

/* =========================================================== */
/* ===== 首页 H1 信息流布局 ================================= */
/* =========================================================== */

/* 今日纸条 hero */
.hm-hero{
  margin:16px 4px 18px;
  position:relative;overflow:hidden;
  border-radius:24px;cursor:pointer;
  background:linear-gradient(160deg,#FFEFD4 0%,#FBD4A4 55%,#F2A65A 115%);
  box-shadow:0 10px 26px rgba(232,141,61,.28), inset 0 1px 0 rgba(255,255,255,.55);
  transition:transform .18s ease;
}
.hm-hero:active{transform:scale(.985)}
.hm-hero-inner{padding:18px 20px 18px}
.hm-hero-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.hm-hero-pill{
  display:inline-block;padding:4px 10px;border-radius:100px;
  background:rgba(255,255,255,.6);color:#8B4F1E;
  font-size:11px;font-weight:800;letter-spacing:.3px;
}
.hm-hero-date{font-family:'Caveat',cursive;font-size:15px;font-weight:700;color:rgba(90,58,36,.75)}
.hm-hero-title{
  font-family:'Fraunces',serif;font-style:italic;font-weight:500;
  font-size:22px;color:#5A3A24;line-height:1.3;margin:2px 0 4px;
}
.hm-hero-sub{
  font-family:system-ui,-apple-system,"PingFang SC",sans-serif;
  font-size:12.5px;color:rgba(90,58,36,.75);line-height:1.5;font-weight:500;
  margin:0 0 12px;
}
.hm-hero-cta{
  display:inline-block;padding:8px 16px;border-radius:100px;
  background:rgba(255,255,255,.85);color:var(--amber-deep);
  font-size:12px;font-weight:800;
  box-shadow:0 4px 10px rgba(150,80,20,.2);
}
.hm-hero-deco{
  position:absolute;top:-6px;right:12px;
  font-family:'Caveat',cursive;font-size:18px;color:rgba(255,255,255,.75);
  display:flex;flex-direction:column;gap:2px;line-height:1;
}
.hm-hero-deco .sp:nth-child(1){font-size:20px;animation:heroSparkle 2.8s ease-in-out infinite}
.hm-hero-deco .sp:nth-child(2){font-size:14px;animation:heroSparkle 2.8s ease-in-out infinite .4s}
.hm-hero-deco .sp:nth-child(3){font-size:18px;animation:heroSparkle 2.8s ease-in-out infinite .8s}
@keyframes heroSparkle{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.2)}}

/* 已抽取样式（JS 加 .opened）*/
.hm-hero.opened{
  background:linear-gradient(160deg,#FFF5E0 0%,#FFE5BE 55%,#FACB86 115%);
}
.hm-hero.opened .hm-hero-cta{display:none}
.hm-hero:not(.opened) .hm-hero-lucky{display:none !important}

/* 三件幸运小物 · 横排 */
.hm-hero-lucky{
  display:flex;gap:8px;margin-top:4px;
}
.hm-hero-lucky .lx{
  flex:1;
  background:rgba(255,255,255,.58);
  border-radius:14px;padding:10px 8px 9px;
  text-align:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
}
.hm-hero-lucky .lx .l{
  font-size:10px;font-weight:700;color:rgba(150,80,20,.7);
  letter-spacing:.3px;margin-bottom:3px;
}
.hm-hero-lucky .lx .v{
  font-family:'Fraunces',serif;font-style:italic;font-weight:500;
  font-size:14.5px;color:#5A3A24;line-height:1.25;
  word-break:break-all;
}

/* 横滑回忆 */
.hm-row-head{display:flex;justify-content:space-between;align-items:baseline;margin:0 4px 10px}
.hm-row-head h4{
  font-family:'Fraunces',serif;font-style:italic;font-weight:500;
  font-size:17px;color:var(--ink);letter-spacing:.3px;
}
.hm-more{font-size:12px;color:var(--amber-deep);font-weight:700;cursor:pointer}

.hm-mem-scroll{
  display:flex;gap:10px;overflow-x:auto;padding:2px 4px 12px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  margin:0 -20px;padding-left:20px;padding-right:20px;
}
.hm-mem-scroll::-webkit-scrollbar{display:none}
.hm-mem-item{
  flex-shrink:0;width:116px;height:140px;border-radius:18px;
  overflow:hidden;cursor:pointer;position:relative;
  box-shadow:0 6px 16px rgba(120,70,30,.2);
  scroll-snap-align:start;
}
.hm-mem-item img{width:100%;height:100%;object-fit:cover;display:block}
.hm-mem-item .cap{
  position:absolute;left:0;right:0;bottom:0;
  padding:16px 8px 6px 8px;
  font-size:10.5px;font-weight:600;color:#fff;
  background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.55) 100%);
  text-overflow:ellipsis;overflow:hidden;white-space:nowrap;
}
.hm-mem-item:active{transform:scale(.96)}
.hm-mem-empty{
  padding:26px;text-align:center;color:var(--ink-3);
  background:rgba(255,255,255,.5);border-radius:18px;
  border:1.5px dashed rgba(196,138,90,.35);
  font-family:'Caveat',cursive;font-size:14px;font-weight:700;
}
.hm-mem-empty .em{font-size:28px;margin-bottom:6px;opacity:.6}

/* 2x2 feat grid */
.hm-feat-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;
  margin:14px 4px 14px;
}
.hm-feat{
  background:#fff;border-radius:20px;padding:18px 16px 18px;cursor:pointer;
  position:relative;overflow:hidden;
  box-shadow:0 5px 14px rgba(120,70,30,.12), inset 0 1px 0 rgba(255,255,255,.8);
  border:1.5px solid rgba(196,138,90,.14);
  transition:transform .18s ease;
}
.hm-feat:active{transform:scale(.97)}
.hm-feat-em{font-size:30px;line-height:1;margin-bottom:8px}
.hm-feat-nm{
  font-family:'Fraunces',serif;font-style:italic;font-weight:500;
  font-size:17px;color:var(--ink);margin-bottom:2px;
}
.hm-feat-sub{font-size:11px;color:var(--ink-3);font-weight:600;letter-spacing:.2px}
.hm-feat.comic{background:linear-gradient(160deg,#FFE5C6 0%,#FFCF94 100%);border-color:rgba(232,141,61,.25)}
.hm-feat.diary{background:linear-gradient(160deg,#E8F0D4 0%,#C4DBA2 100%);border-color:rgba(120,180,70,.25)}
.hm-feat.letter{background:linear-gradient(160deg,#FBE0DC 0%,#F6C2BA 100%);border-color:rgba(219,120,110,.25)}
.hm-feat.card{background:linear-gradient(160deg,#E4D4F0 0%,#C3A8DC 100%);border-color:rgba(160,115,200,.25)}

/* 时光册 · 全行 */
.hm-timeline{
  display:flex;align-items:center;gap:14px;
  margin:0 4px 0;padding:16px 18px;
  background:#fff;border-radius:20px;cursor:pointer;
  box-shadow:0 5px 14px rgba(120,70,30,.1), inset 0 1px 0 rgba(255,255,255,.8);
  border:1.5px solid rgba(196,138,90,.14);
}
.hm-timeline:active{transform:scale(.98)}
.hm-tl-em{
  width:48px;height:48px;border-radius:15px;display:grid;place-items:center;
  background:linear-gradient(160deg,#FFD9A8,#F2A65A);
  font-size:22px;color:#fff;flex-shrink:0;
  box-shadow:0 4px 10px rgba(232,141,61,.25), inset 0 1px 0 rgba(255,255,255,.5);
}
.hm-tl-txt{flex:1}
.hm-tl-nm{
  font-family:'Fraunces',serif;font-style:italic;font-weight:500;
  font-size:17px;color:var(--ink);line-height:1.2;
}
.hm-tl-sub{font-size:12px;color:var(--ink-3);margin-top:3px;font-weight:500}
.hm-tl-arr{color:var(--amber-deep);font-weight:700;font-size:20px}

.tools-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tool{
  background:white;border:1.5px solid rgba(196,138,90,.18);border-radius:20px;padding:14px 6px 12px;
  text-align:center;box-shadow:0 4px 12px rgba(196,138,90,.1);
  cursor:pointer;transition:all .2s;
}
.tool:active{transform:scale(.93);box-shadow:0 2px 6px rgba(196,138,90,.15)}
.tool .ic3{
  width:46px;height:46px;margin:0 auto 6px;border-radius:15px;
  display:grid;place-items:center;font-size:20px;position:relative;
  box-shadow:0 5px 12px rgba(138,70,20,.2), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,0,0,.08);
}
.tool .nm{font-size:11px;font-weight:800;color:var(--ink)}
.t-a{background:linear-gradient(160deg,#FFD9A8,#F2A65A)}
.t-b{background:linear-gradient(160deg,#D4E8C3,#A5CF8E)}
.t-c{background:linear-gradient(160deg,#FBD4CB,#F6BFB2)}
.t-d{background:linear-gradient(160deg,#CFE3F0,#A5C9DE)}
.t-e{background:linear-gradient(160deg,#FFE9A8,#FFD54A)}
.t-f{background:linear-gradient(160deg,#DFCFED,#B89BD3)}
.t-g{background:linear-gradient(160deg,#FFD4B8,#FFA878)}
.t-h{background:linear-gradient(160deg,#E6D8BE,#C4AE87)}
.t-i{background:linear-gradient(160deg,#FFE5C6,#FFCE99)}

/* =========================================================== */
/* =============== PET INTERACTION =========================== */
/* =========================================================== */
#s-pet{
  background:
    radial-gradient(ellipse at 50% 35%, #FFE9C9 0%, transparent 55%),
    linear-gradient(180deg, #FFF3DE 0%, #FFCE99 100%);
  padding-bottom:0;
}
.pet-top-row{
  position:absolute;top:calc(12px + var(--safe-top));left:0;right:0;
  padding:0 20px;display:flex;justify-content:space-between;align-items:center;z-index:10;
}
.pet-name-pill{
  background:rgba(255,255,255,.88);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1.5px solid var(--line-soft);border-radius:100px;padding:6px 14px 6px 10px;
  display:flex;align-items:center;gap:8px;box-shadow:var(--shadow-card);
}
.pet-name-pill .dot-on{
  width:8px;height:8px;border-radius:50%;background:#A5CF8E;
  box-shadow:0 0 0 3px rgba(165,207,142,.3);
  animation:heartbeat 1.6s infinite;
}
@keyframes heartbeat{
  0%,100%{box-shadow:0 0 0 3px rgba(165,207,142,.3)}
  50%{box-shadow:0 0 0 6px rgba(165,207,142,.15)}
}
.pet-name-pill b{font-family:'Fraunces',serif;font-style:italic;font-size:17px;color:var(--ink);font-weight:500}
.pet-name-pill .sx{font-size:10px;color:var(--ink-2);font-weight:700;display:block}
.pet-top-icons{display:flex;gap:8px}
.pt-ic{
  width:38px;height:38px;border-radius:13px;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);
  border:1.5px solid var(--line-soft);box-shadow:var(--shadow-card);
  display:grid;place-items:center;font-size:16px;cursor:pointer;
}
.pt-ic:active{transform:scale(.9)}
.pt-ic.mood{background:linear-gradient(160deg,#FBD4CB,#F6BFB2);color:#7A4640}

.pet-stage{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-52%);
  width:260px;height:460px;   /* 9:16 舞台 */
  display:grid;place-items:center;z-index:1;
}
.pet-media{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
}
.pet-media video, .pet-media img{
  width:100%;height:100%;border-radius:28px;
  filter:drop-shadow(0 14px 22px rgba(232,141,61,.3));
  object-fit:cover;
  background:#FFF8EC;
}
.pet-media.fade-out{opacity:0;transition:opacity .5s}
.pet-media.fade-in{opacity:1;transition:opacity .5s}

.ripple{position:absolute;border-radius:50%;border:2px solid rgba(242,166,90,.35);top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}
.ripple.r1{width:240px;height:240px;animation:rippleExpand 3s infinite}
.ripple.r2{width:320px;height:320px;opacity:.55;border-style:dashed;animation:rippleExpand 3s infinite .3s}
.ripple.r3{width:400px;height:400px;opacity:.3;animation:rippleExpand 3s infinite .6s}
@keyframes rippleExpand{
  0%,100%{transform:translate(-50%,-50%) scale(.95);opacity:.4}
  50%{transform:translate(-50%,-50%) scale(1.02);opacity:.2}
}

.pet-tap-zones{position:absolute;inset:0;z-index:2;display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr}
.tap-zone{cursor:pointer}

.speech{
  position:absolute;top:calc(150px + var(--safe-top));left:24px;
  background:white;border:1.5px solid var(--line-soft);border-radius:20px;
  padding:10px 14px;font-family:'Caveat',cursive;font-weight:700;font-size:16px;
  color:var(--ink);max-width:190px;z-index:5;
  box-shadow:0 5px 14px rgba(196,138,90,.15);
  animation:bubbleIn .5s cubic-bezier(.2,.9,.3,1.2);
}
.speech::before{
  content:"";position:absolute;bottom:-8px;left:22px;width:14px;height:14px;background:white;
  border-right:1.5px solid var(--line-soft);border-bottom:1.5px solid var(--line-soft);
  transform:rotate(45deg);
}
@keyframes bubbleIn{
  0%{opacity:0;transform:scale(.6) translateY(10px)}
  100%{opacity:1;transform:scale(1) translateY(0)}
}
.speech.hide{animation:bubbleOut .4s forwards}
@keyframes bubbleOut{
  to{opacity:0;transform:scale(.8) translateY(5px)}
}

.fab-col{
  position:absolute;bottom:calc(110px + var(--safe-bottom));right:20px;
  display:flex;flex-direction:column;gap:12px;z-index:10;
}
.fab{
  width:56px;height:56px;border-radius:50%;background:white;
  border:1.5px solid var(--line-soft);box-shadow:0 6px 18px rgba(196,138,90,.2);
  display:grid;place-items:center;font-size:22px;cursor:pointer;transition:transform .2s;
}
.fab:active{transform:scale(.9)}
.fab.mic{background:linear-gradient(160deg,#FFD9A8,#F2A65A);color:white;box-shadow:0 8px 20px rgba(232,141,61,.4), inset 0 1px 0 rgba(255,255,255,.4)}
.fab.mic.listening{animation:micPulse 1s infinite}
@keyframes micPulse{
  0%,100%{box-shadow:0 8px 20px rgba(232,141,61,.4), 0 0 0 0 rgba(242,166,90,.6)}
  50%{box-shadow:0 8px 20px rgba(232,141,61,.4), 0 0 0 18px rgba(242,166,90,0)}
}
.fab.chat{background:linear-gradient(160deg,#CFE3F0,#A5C9DE);color:#3C5D71;box-shadow:0 8px 20px rgba(165,201,222,.4), inset 0 1px 0 rgba(255,255,255,.4)}

.pet-hint{
  position:absolute;bottom:calc(92px + var(--safe-bottom));left:20px;right:92px;z-index:5;
  background:rgba(255,255,255,.85);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1.5px solid var(--line-soft);border-radius:100px;
  padding:8px 14px;text-align:center;font-family:'Caveat',cursive;font-weight:700;
  font-size:15px;color:var(--ink);box-shadow:0 4px 12px rgba(196,138,90,.12);
}

/* floating hearts when tapping */
.tap-heart{
  position:absolute;font-size:22px;color:#EFA598;pointer-events:none;z-index:20;
  animation:floatUp 1.2s cubic-bezier(.3,.8,.4,1) forwards;
}
@keyframes floatUp{
  0%{opacity:0;transform:translate(-50%,0) scale(.5)}
  20%{opacity:1;transform:translate(-50%,-10px) scale(1.2)}
  100%{opacity:0;transform:translate(-50%,-80px) scale(.8)}
}

/* =========================================================== */
/* =============== CHAT ====================================== */
/* =========================================================== */
#s-chat{background:var(--cream)}
.chat-head{
  padding:14px 18px 14px;display:flex;align-items:center;gap:10px;
  background:linear-gradient(180deg,#FFE9C9,#FFF3DE);
  border-bottom:1px solid var(--line-soft);position:relative;z-index:2;flex-shrink:0;
}
.chat-av{
  width:46px;height:46px;border-radius:16px;overflow:hidden;
  background:linear-gradient(160deg,#FFE5C6,#F2A65A);
  border:1.5px solid var(--peach-2);display:grid;place-items:center;flex-shrink:0;
  box-shadow:0 4px 10px rgba(232,141,61,.25);
}
.chat-av img{width:100%;height:100%;object-fit:cover}
.chat-head h4{font-family:'Fraunces',serif;font-style:italic;font-weight:500;font-size:18px;color:var(--ink);line-height:1}
.chat-head .st{font-family:'Caveat',cursive;font-size:14px;color:var(--mint-2);font-weight:700}
.chat-body{
  flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:16px;display:flex;flex-direction:column;gap:10px;
}
.date-div{
  align-self:center;background:white;border:1px solid var(--line-soft);border-radius:100px;
  padding:3px 12px;font-family:'Caveat',cursive;font-size:13px;color:var(--ink-2);font-weight:700;
}
.msg{max-width:78%;padding:10px 14px;border-radius:18px;font-size:14px;line-height:1.55;font-weight:600;animation:msgIn .4s cubic-bezier(.2,.9,.3,1.2)}
@keyframes msgIn{0%{opacity:0;transform:translateY(8px) scale(.96)}100%{opacity:1;transform:translateY(0) scale(1)}}
.msg.pet{background:white;color:var(--ink);align-self:flex-start;border-bottom-left-radius:4px;box-shadow:0 3px 10px rgba(196,138,90,.1);border:1px solid var(--line-soft)}
.msg.me{background:linear-gradient(160deg,#FFD9A8,#F2A65A);color:white;align-self:flex-end;border-bottom-right-radius:4px;box-shadow:0 4px 10px rgba(232,141,61,.25)}
.msg .t{font-size:9px;opacity:.6;margin-top:4px;font-weight:700}
.typing{display:flex;gap:4px;padding:10px 14px}
.typing span{width:6px;height:6px;border-radius:50%;background:var(--ink-3);animation:typing 1.4s infinite}
.typing span:nth-child(2){animation-delay:.2s}
.typing span:nth-child(3){animation-delay:.4s}
@keyframes typing{0%,60%,100%{opacity:.3;transform:scale(.8)}30%{opacity:1;transform:scale(1.1)}}

.chat-lock-hint{
  margin:0 16px 8px;padding:10px 12px;border-radius:14px;
  background:rgba(255,229,198,.92);border:1px solid var(--peach-2);
  color:#7A4A22;font-size:12px;font-weight:800;text-align:center;
  box-shadow:0 4px 12px rgba(232,141,61,.12);
}
.chat-quota-hint{
  padding:0 18px 8px;color:var(--ink-3);font-size:12px;font-weight:700;text-align:center;
  background:rgba(255,248,236,.95);
}
.chat-inp{
  padding:12px 16px calc(12px + var(--safe-bottom));
  background:rgba(255,248,236,.95);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-top:1px solid var(--line-soft);display:flex;gap:8px;align-items:center;flex-shrink:0;
}
.chat-inp .mi{width:38px;height:38px;border-radius:13px;background:white;border:1.5px solid var(--line-soft);box-shadow:var(--shadow-card);display:grid;place-items:center;font-size:16px;flex-shrink:0;cursor:pointer}
.chat-inp .inp{flex:1;background:white;border:1.5px solid var(--line-soft);border-radius:100px;padding:10px 16px;font-size:14px;color:var(--ink);font-weight:600;outline:0;min-width:0}
.chat-inp .sd{width:42px;height:42px;border-radius:50%;background:linear-gradient(160deg,#FFD9A8,#F2A65A);display:grid;place-items:center;color:white;font-weight:800;font-size:17px;flex-shrink:0;box-shadow:0 4px 12px rgba(232,141,61,.3), inset 0 1px 0 rgba(255,255,255,.4);cursor:pointer}
.chat-inp .sd:active{transform:scale(.92)}
.label-sub{font-size:12px;color:var(--ink-3);font-weight:700}

/* =========================================================== */
/* =============== PAGE HEAD (generic) ======================= */
/* =========================================================== */
.pg-head{padding:20px 20px 14px;position:relative;flex-shrink:0}
.pg-head h2{font-family:'Fraunces',serif;font-style:italic;font-weight:500;font-size:32px;color:var(--ink);line-height:1}
.pg-head .sub{font-family:'Caveat',cursive;font-size:17px;color:var(--amber-2);margin-top:4px;transform:rotate(-1deg);display:inline-block;font-weight:700}

/* =========================================================== */
/* =============== ALBUM ===================================== */
/* =========================================================== */
.album-grid{padding:0 18px;display:grid;grid-template-columns:1fr 1fr;gap:10px;position:relative;z-index:2}
.photo{
  aspect-ratio:1/1.15;border-radius:20px;position:relative;overflow:hidden;
  border:1.5px solid rgba(196,138,90,.2);box-shadow:0 5px 14px rgba(196,138,90,.14);
  display:grid;place-items:center;cursor:pointer;
  background:linear-gradient(160deg,#FFE5C6,#F2A65A);
}
.photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.3))}
.photo img{width:100%;height:100%;object-fit:cover}
.photo .cap{position:absolute;bottom:8px;left:10px;right:10px;color:white;font-family:'Caveat',cursive;font-size:14px;font-weight:700;z-index:2;text-shadow:0 1px 3px rgba(0,0,0,.3);pointer-events:none}
.photo .emoji-ph{font-size:50px}
.photo.big{grid-column:span 2;aspect-ratio:2.4/1;background:linear-gradient(135deg,#FFD9A8 0%,#F2A65A 70%,#E88D3D 100%);padding:14px;color:white;display:flex;align-items:center;gap:12px}
.photo.big::after{display:none}
.photo.big .bi{width:54px;height:54px;border-radius:16px;background:white;display:grid;place-items:center;font-size:24px;box-shadow:0 4px 10px rgba(138,66,20,.2);color:var(--amber-deep);flex-shrink:0}
.photo.big .tx h4{font-family:'Fraunces',serif;font-style:italic;font-weight:500;font-size:17px;text-shadow:0 1px 3px rgba(138,66,20,.25)}
.photo.big .tx p{font-family:'Caveat',cursive;font-size:15px;margin-top:2px;opacity:.92;font-weight:700}

.fab-add{
  position:absolute;bottom:calc(94px + var(--safe-bottom));right:20px;
  width:56px;height:56px;border-radius:50%;
  background:linear-gradient(160deg,#FFD9A8,#F2A65A);
  display:grid;place-items:center;color:white;font-size:28px;font-weight:800;z-index:10;
  box-shadow:0 10px 22px rgba(232,141,61,.4), inset 0 1px 0 rgba(255,255,255,.4);
  cursor:pointer;transition:transform .2s;
}
.fab-add:active{transform:scale(.9)}

/* photo viewer modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.85);backdrop-filter:blur(10px);z-index:100;display:none;flex-direction:column;animation:fadeIn .3s}
.modal.active{display:flex}
@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}
.modal-close{position:absolute;top:calc(16px + var(--safe-top));right:16px;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.15);backdrop-filter:blur(8px);display:grid;place-items:center;color:white;font-size:18px;cursor:pointer;z-index:10}
.modal img{max-width:90%;max-height:70%;margin:auto;border-radius:16px}
.modal-caption{padding:20px;color:white;font-family:'Ma Shan Zheng',cursive;font-size:16px;text-align:center;line-height:1.7}

/* =========================================================== */
/* =============== COMIC ===================================== */
/* =========================================================== */
.comic-form{padding:0 20px}
.comic-list{padding:6px 20px 0}
.comic-panel{
  background:white;border:1.5px solid var(--line-soft);border-radius:18px;padding:6px;
  box-shadow:0 5px 14px rgba(196,138,90,.14);margin-bottom:10px;position:relative;
  animation:panelIn .5s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes panelIn{0%{opacity:0;transform:translateY(20px) scale(.96)}100%{opacity:1;transform:translateY(0) scale(1)}}
.comic-panel .idx{
  position:absolute;top:-10px;left:12px;
  width:24px;height:24px;border-radius:50%;
  background:linear-gradient(160deg,#FFD9A8,#F2A65A);
  display:grid;place-items:center;color:white;
  font-family:'Fraunces',serif;font-style:italic;font-weight:700;font-size:13px;
  box-shadow:0 3px 8px rgba(232,141,61,.3);
}
.comic-panel .img{aspect-ratio:3/4;border-radius:12px;display:grid;place-items:center;font-size:52px;overflow:hidden;background:linear-gradient(160deg,#FFE5C6,#F2A65A)}
.comic-panel .img img{width:100%;height:100%;object-fit:cover}
.comic-panel .tx{padding:8px 6px 4px;font-family:'Ma Shan Zheng',cursive;font-size:14px;color:var(--ink);text-align:center}

/* comic generation progress */
.gen-steps{padding:20px;display:flex;flex-direction:column;gap:8px}

/* =========================================================== */
/* =============== TIMELINE ================================== */
/* =========================================================== */
.tl-row{padding:0 20px}
.tl-date{font-family:'Fraunces',serif;font-style:italic;font-weight:500;font-size:16px;color:var(--ink);margin:16px 2px 10px;display:flex;align-items:center;gap:10px}
.tl-date .b{
  font-family:'Caveat',cursive;font-weight:700;
  background:linear-gradient(160deg,#FFD9A8,#F2A65A);color:white;
  padding:2px 10px;border-radius:100px;font-size:14px;
  box-shadow:0 3px 8px rgba(232,141,61,.3);
}
.tl-date::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line-soft),transparent)}
.tl-item{
  background:white;border:1.5px solid var(--line-soft);border-radius:18px;
  padding:12px;margin-bottom:10px;box-shadow:0 4px 12px rgba(196,138,90,.1);
  display:flex;gap:10px;align-items:flex-start;
}
.tl-ic{
  width:38px;height:38px;border-radius:13px;display:grid;place-items:center;font-size:18px;flex-shrink:0;
  box-shadow:0 3px 8px rgba(138,66,20,.15), inset 0 1px 0 rgba(255,255,255,.4);color:white;
}
.tl-item h5{font-size:13px;font-weight:800;color:var(--ink)}
.tl-item p{font-size:11px;color:var(--ink-2);font-weight:600;margin-top:3px;line-height:1.5}
.tl-item .ts{font-family:'Caveat',cursive;font-size:13px;color:var(--ink-3);font-weight:700;margin-top:4px}

/* =========================================================== */
/* =============== DIARY ===================================== */
/* =========================================================== */
.mood-row{display:flex;gap:8px;padding:0 20px 14px}
.mood{
  flex:1;background:white;border:1.5px solid var(--line-soft);border-radius:18px;
  padding:10px 4px;text-align:center;box-shadow:0 3px 10px rgba(196,138,90,.1);
  cursor:pointer;transition:all .2s;
}
.mood:active{transform:scale(.95)}
.mood .ic{font-size:24px;line-height:1;margin-bottom:4px}
.mood .nm{font-size:11px;font-weight:800;color:var(--ink)}
.mood.on{background:linear-gradient(160deg,#FFD9A8,#F2A65A);color:white;border-color:var(--amber-2);box-shadow:0 5px 14px rgba(232,141,61,.3)}
.mood.on .nm{color:white;text-shadow:0 1px 2px rgba(138,66,20,.25)}

.diary-item{
  background:white;border:1.5px solid var(--line-soft);border-radius:20px;padding:14px;
  box-shadow:0 4px 12px rgba(196,138,90,.1);margin:0 20px 12px;position:relative;
}
.diary-item .head-r{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.diary-item .dt{font-family:'Fraunces',serif;font-style:italic;font-weight:500;font-size:14px;color:var(--amber-deep)}
.diary-item .tag{font-family:'Caveat',cursive;font-size:14px;font-weight:700;background:linear-gradient(160deg,#FBD4CB,#EFA598);color:white;border-radius:100px;padding:2px 10px;box-shadow:0 2px 6px rgba(239,165,152,.3)}
.diary-item p{font-family:'Ma Shan Zheng',cursive;font-size:15px;color:var(--ink);line-height:1.85}
.diary-reply{
  background:linear-gradient(160deg,#FFF3DE,#FFE9C9);
  border:1.5px solid rgba(196,138,90,.2);
  border-radius:16px;padding:10px 12px 10px 30px;margin-top:10px;
  font-family:'Ma Shan Zheng',cursive;font-size:14px;color:var(--ink-2);line-height:1.75;position:relative;
  box-shadow:0 3px 8px rgba(196,138,90,.1);
}
.diary-reply::before{
  content:"";position:absolute;top:-10px;left:10px;
  background-color:white;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='8' cy='5' rx='2.5' ry='3' fill='%23D4874B'/%3E%3Cellipse cx='16' cy='5' rx='2.5' ry='3' fill='%23D4874B'/%3E%3Cellipse cx='4.5' cy='11' rx='2' ry='2.8' fill='%23D4874B'/%3E%3Cellipse cx='19.5' cy='11' rx='2' ry='2.8' fill='%23D4874B'/%3E%3Cellipse cx='12' cy='17' rx='5' ry='4' fill='%23D4874B'/%3E%3C/svg%3E");
  background-size:14px 14px;background-repeat:no-repeat;background-position:center;
  border:1.5px solid var(--line-soft);border-radius:50%;
  width:22px;height:22px;display:block;
  box-shadow:0 3px 8px rgba(196,138,90,.15);
}

/* =========================================================== */
/* =============== LETTER ==================================== */
/* =========================================================== */
.letter{
  background:
    linear-gradient(transparent 22px, rgba(196,138,90,.15) 23px, rgba(196,138,90,.15) 24px, transparent 24px),
    linear-gradient(180deg,#FFFBEE,#FFF3DE);
  background-size:100% 24px;
  border:1.5px solid var(--line-soft);border-radius:18px;padding:20px 18px;
  box-shadow:0 5px 14px rgba(196,138,90,.14);margin:0 20px 14px;position:relative;
}
.letter::before{
  content:"";position:absolute;top:-8px;right:20px;
  width:34px;height:34px;border-radius:10px;
  background:linear-gradient(160deg,#EFA598,#C87B6D);
  display:grid;place-items:center;color:white;font-size:14px;
  box-shadow:0 4px 10px rgba(200,123,109,.35);
}
.letter .h{font-family:'Fraunces',serif;font-style:italic;font-weight:500;font-size:16px;color:var(--ink);margin-bottom:10px;line-height:1.2}
.letter p{font-family:'Ma Shan Zheng',cursive;font-size:15px;color:var(--ink);line-height:1.9}
.letter .sig{text-align:right;font-family:'Ma Shan Zheng',cursive;font-size:14px;color:var(--amber-deep);margin-top:12px}
.letter.reply{background-color:#FFE9C9;background-image:linear-gradient(transparent 22px, rgba(200,112,31,.2) 23px, rgba(200,112,31,.2) 24px, transparent 24px)}
.letter.reply::before{content:"";background-color:white;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='8' cy='5' rx='2.5' ry='3' fill='%23D4874B'/%3E%3Cellipse cx='16' cy='5' rx='2.5' ry='3' fill='%23D4874B'/%3E%3Cellipse cx='4.5' cy='11' rx='2' ry='2.8' fill='%23D4874B'/%3E%3Cellipse cx='19.5' cy='11' rx='2' ry='2.8' fill='%23D4874B'/%3E%3Cellipse cx='12' cy='17' rx='5' ry='4' fill='%23D4874B'/%3E%3C/svg%3E");background-size:20px 20px;background-repeat:no-repeat;background-position:center;border:1.5px solid var(--line-soft)}

/* =========================================================== */
/* =============== FORTUNE =================================== */
/* =========================================================== */
#s-fortune{
  background:
    radial-gradient(circle at 50% 20%, #FFE9C9 0%, transparent 55%),
    linear-gradient(180deg,#FFF3DE,#FFD9A8);
}
.fortune-inner{padding:20px}
.fortune-inner h2{font-family:'Fraunces',serif;font-style:italic;font-weight:500;font-size:32px;text-align:center;color:var(--ink);line-height:1}
.fortune-inner .sub{font-family:'Caveat',cursive;font-size:17px;text-align:center;color:var(--amber-deep);margin:4px 0 18px;font-weight:700}
.envelope{
  background:linear-gradient(160deg,#D89C5E,#B07A3E);
  border:1.5px solid #A96D3B;border-radius:18px;padding:24px 14px 18px;
  box-shadow:0 14px 32px rgba(138,66,20,.28);position:relative;
  cursor:pointer;transition:transform .3s;
}
.envelope.opened{transform:scale(1)}
.envelope-unopened{
  background:linear-gradient(160deg,#D89C5E,#B07A3E);
  border:1.5px solid #A96D3B;border-radius:18px;padding:80px 20px;
  box-shadow:0 14px 32px rgba(138,66,20,.28);position:relative;text-align:center;cursor:pointer;
  margin:20px 0;
}
.envelope-unopened .big-seal{
  font-size:60px;margin-bottom:14px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.2));
  animation:floatSlow 3s infinite;
}
.envelope-unopened h3{font-family:'Fraunces',serif;font-style:italic;font-weight:500;color:white;font-size:20px;margin-bottom:6px}
.envelope-unopened p{font-family:'Caveat',cursive;color:rgba(255,255,255,.9);font-size:16px;font-weight:700}
.env-seal{
  position:absolute;top:-18px;left:50%;transform:translateX(-50%);
  width:42px;height:42px;border-radius:50%;background:linear-gradient(160deg,#EFA598,#C87B6D);
  display:grid;place-items:center;color:white;font-size:15px;font-weight:800;
  box-shadow:0 6px 14px rgba(200,123,109,.4), inset 0 1px 0 rgba(255,255,255,.3);
}
.note{
  background:#FFFBEE;border:1px solid rgba(196,138,90,.2);border-radius:12px;
  padding:16px 14px;font-family:'Ma Shan Zheng',cursive;font-size:15px;color:var(--ink);
  line-height:1.9;min-height:170px;
  background-image:linear-gradient(transparent 23px, rgba(196,138,90,.15) 24px, rgba(196,138,90,.15) 25px, transparent 25px);
  background-size:100% 25px;
  animation:slideUp .6s cubic-bezier(.2,.9,.3,1.1);
}
@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}
.note .q{text-align:center;font-size:18px;color:var(--amber-deep);margin-bottom:10px;letter-spacing:1px}
.note .sig-sm{text-align:right;font-size:13px;color:var(--ink-2);margin-top:10px}
.lucky-row{display:flex;gap:6px;margin-top:12px}
.lucky{flex:1;background:rgba(255,255,255,.7);border:1px solid rgba(196,138,90,.2);border-radius:12px;padding:8px 4px;text-align:center}
.lucky .l{font-size:9px;color:var(--ink-2);font-weight:700}
.lucky .v{font-family:'Fraunces',serif;font-style:italic;font-size:13px;color:var(--ink);font-weight:500;margin-top:2px}

/* =========================================================== */
/* =============== PROFILE =================================== */
/* =========================================================== */
.prof-hero{height:210px;position:relative;flex-shrink:0;
  background:
    radial-gradient(ellipse at 50% 90%, #FFE9C9, transparent 70%),
    linear-gradient(180deg,#FFE5C6 0%, #FFD9A8 100%);
}
.prof-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.4;overflow:hidden;
  background-image:radial-gradient(circle 1.5px, rgba(196,138,90,.3) 1px, transparent 1px);
  background-size:20px 20px;
}
.prof-hero .nav-l{position:absolute;top:calc(14px + var(--safe-top));left:18px;z-index:3}
.prof-hero .nav-r{position:absolute;top:calc(14px + var(--safe-top));right:18px;z-index:3}
.prof-hero .pv-big{
  position:absolute;bottom:-44px;left:50%;transform:translateX(-50%);
  width:110px;height:110px;border-radius:34px;
  background:linear-gradient(160deg,#FFE5C6,#F2A65A);
  border:3px solid white;overflow:hidden;
  box-shadow:0 10px 28px rgba(232,141,61,.35);
  display:grid;place-items:center;z-index:3;
}
.prof-hero .pv-big img{width:100%;height:100%;object-fit:cover}
.prof-body{padding:72px 20px 20px;text-align:center}    /* 头像悬浮增加下方 padding */
.prof-body h2{font-family:'Fraunces',serif;font-style:italic;font-weight:500;font-size:30px;color:var(--ink);line-height:1}
.prof-tags{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-top:10px}
.prof-stats-row{display:flex;gap:8px;margin:16px 20px;padding:0}
.p-stat{flex:1;background:white;border:1.5px solid var(--line-soft);border-radius:16px;padding:12px 4px;text-align:center;box-shadow:0 4px 10px rgba(196,138,90,.1)}
.p-stat .n{font-family:'Fraunces',serif;font-style:italic;font-weight:700;font-size:24px;color:var(--amber-deep);line-height:1}
.p-stat .l{font-size:10px;color:var(--ink-2);font-weight:700;margin-top:3px}
.info-block{margin:0 20px;padding:16px;background:white;border:1.5px solid var(--line-soft);border-radius:20px;box-shadow:0 4px 12px rgba(196,138,90,.1)}
.info-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px dashed rgba(196,138,90,.2);font-size:13px;font-weight:700}
.info-row:last-child{border:0}
.info-row .k{color:var(--ink-2)}
.info-row .v{color:var(--ink);font-family:'Fraunces',serif;font-style:italic;font-weight:500}

/* =========================================================== */
/* =============== CARD ====================================== */
/* =========================================================== */
.card-prev{
  margin:10px 20px 16px;aspect-ratio:3/4;border-radius:24px;
  box-shadow:0 14px 36px rgba(232,141,61,.35);
  position:relative;overflow:hidden;color:#fff;
  border:1.5px solid rgba(138,66,20,.15);
  background:#FFF3DE;
}
/* 宠物照片铺满整张卡 */
.card-prev .c-bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
}
/* 下半深色渐变蒙版 → 让文字可读 */
.card-prev .c-mask{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) 40%,
    rgba(0,0,0,.35) 65%,
    rgba(138,66,20,.7) 100%);
}
/* 文字层紧贴底部 */
.card-prev .c-text{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:18px 22px 22px;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  text-align:center;
}
.card-prev h3{
  font-family:'Fraunces',serif;font-style:italic;font-weight:500;font-size:32px;
  text-shadow:0 2px 8px rgba(0,0,0,.5);line-height:1.1;
}
.card-prev .dates{
  font-family:'Fraunces',serif;font-style:italic;font-size:13px;opacity:.95;
  letter-spacing:3px;text-shadow:0 1px 4px rgba(0,0,0,.5);
}
.card-prev .msg-cn{
  font-family:'Ma Shan Zheng',cursive;font-size:17px;line-height:1.6;letter-spacing:2px;
  text-shadow:0 1px 6px rgba(0,0,0,.5);margin-top:4px;
}
.card-prev .brand{
  font-family:'Fraunces',serif;font-style:italic;font-weight:500;font-size:11px;letter-spacing:4px;
  background:rgba(255,255,255,.22);backdrop-filter:blur(8px);
  padding:3px 14px;border-radius:100px;margin-top:6px;
}
/* 模板切换：改 mask 色调，不遮照片 */
.card-prev.tpl-a .c-mask{background:linear-gradient(180deg, transparent 0%, transparent 40%, rgba(242,166,90,.35) 65%, rgba(200,112,31,.85) 100%);}
.card-prev.tpl-b .c-mask{background:linear-gradient(180deg, transparent 0%, transparent 40%, rgba(108,168,214,.35) 65%, rgba(60,93,113,.85) 100%);}
.card-prev.tpl-c .c-mask{background:linear-gradient(180deg, transparent 0%, transparent 40%, rgba(200,123,109,.35) 65%, rgba(122,70,64,.85) 100%);}
.card-prev.tpl-d .c-mask{background:linear-gradient(180deg, transparent 0%, transparent 40%, rgba(127,194,122,.35) 65%, rgba(66,108,64,.85) 100%);}
.card-prev.tpl-e .c-mask{background:linear-gradient(180deg, transparent 0%, transparent 40%, rgba(159,127,212,.35) 65%, rgba(96,76,140,.85) 100%);}
.tpl-row{display:flex;gap:8px;padding:0 20px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tpl-row::-webkit-scrollbar{display:none}
.tpl{width:52px;height:68px;border-radius:14px;flex-shrink:0;box-shadow:0 4px 10px rgba(138,66,20,.15);border:2px solid transparent;position:relative;cursor:pointer;transition:all .2s}
.tpl.on{border-color:var(--amber);transform:translateY(-3px);box-shadow:0 7px 14px rgba(232,141,61,.3)}
.tpl-a{background:linear-gradient(180deg,#F2A65A,#E88D3D)}
.tpl-b{background:linear-gradient(180deg,#A5C9DE,#6CA8D6)}
.tpl-c{background:linear-gradient(180deg,#EFA598,#C87B6D)}
.tpl-d{background:linear-gradient(180deg,#A5CF8E,#7FC27A)}
.tpl-e{background:linear-gradient(180deg,#B89BD3,#9F7FD4)}

/* =========================================================== */
/* =============== SETTINGS ================================== */
/* =========================================================== */
.set-user{display:flex;align-items:center;gap:12px;padding:16px 20px 22px}
.set-user .av{
  width:58px;height:58px;border-radius:20px;
  background:linear-gradient(160deg,#FFD9A8,#F2A65A);
  display:grid;place-items:center;font-size:26px;
  box-shadow:0 6px 14px rgba(232,141,61,.3), inset 0 1px 0 rgba(255,255,255,.4);
  overflow:hidden;position:relative;flex-shrink:0;cursor:pointer;
}
.set-user .av img{
  position:absolute !important;inset:0 !important;
  width:100% !important;height:100% !important;
  object-fit:cover !important;
  border-radius:inherit;pointer-events:none;
}
.set-user h4{font-family:'Fraunces',serif;font-style:italic;font-weight:500;font-size:19px;color:var(--ink)}
.set-user p{font-family:'Caveat',cursive;font-size:15px;color:var(--ink-2);margin-top:2px;font-weight:700}
.set-group{background:white;border:1.5px solid var(--line-soft);border-radius:20px;margin:0 20px 12px;overflow:hidden;box-shadow:0 4px 12px rgba(196,138,90,.08)}
.set-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px dashed rgba(196,138,90,.15);cursor:pointer}
.set-row:last-child{border:0}
.set-row:active{background:rgba(255,233,201,.5)}
.set-row .sic{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;font-size:16px;flex-shrink:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.4);color:white}
.set-row .nm{flex:1;font-size:13px;font-weight:800;color:var(--ink)}
.set-row .vl{font-size:11px;color:var(--ink-3);font-weight:700;margin-right:4px}

/* =========================================================== */
/* =============== TOAST ===================================== */
/* =========================================================== */
.toast{
  position:fixed;top:calc(20px + var(--safe-top));left:50%;transform:translateX(-50%);
  background:rgba(90,58,36,.94);backdrop-filter:blur(10px);
  color:white;padding:12px 22px;border-radius:100px;font-size:13px;font-weight:700;
  box-shadow:0 10px 30px rgba(0,0,0,.3);z-index:1000;
  animation:toastIn .3s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes toastIn{0%{opacity:0;transform:translateX(-50%) translateY(-20px)}100%{opacity:1;transform:translateX(-50%) translateY(0)}}
.toast.hide{animation:toastOut .3s forwards}
@keyframes toastOut{to{opacity:0;transform:translateX(-50%) translateY(-10px)}}

/* =========================================================== */
/* =============== LOADING =================================== */
/* =========================================================== */
.loader{
  display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;
  border:3px solid rgba(242,166,90,.25);border-top-color:var(--amber);
  animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.full-loader{
  position:fixed;inset:0;background:rgba(255,248,236,.85);backdrop-filter:blur(4px);
  z-index:200;display:none;align-items:center;justify-content:center;flex-direction:column;gap:16px;
}
.full-loader.active{display:flex}
.full-loader .loader{width:48px;height:48px;border-width:4px}
.full-loader .tip{font-family:'Caveat',cursive;color:var(--amber-deep);font-size:18px;font-weight:700}

/* =========================================================== */
/* =============== SPARKLE / FLOAT =========================== */
/* =========================================================== */
.bg-spark{position:absolute;z-index:1;color:var(--amber);opacity:.6;font-weight:900;pointer-events:none}
.leaf-bg{position:absolute;z-index:1;opacity:.5;pointer-events:none;font-size:20px}

.sparkle-layer{position:absolute;inset:0;pointer-events:none;z-index:15;overflow:hidden}
.float-sparkle{
  position:absolute;font-size:14px;color:var(--amber);
  animation:floatSpark 3s linear forwards;pointer-events:none;
}
@keyframes floatSpark{
  0%{opacity:0;transform:translateY(20px) scale(.3)}
  30%{opacity:.9;transform:translateY(-20px) scale(1) rotate(20deg)}
  100%{opacity:0;transform:translateY(-140px) scale(.5) rotate(40deg)}
}

/* utilities */
.hidden{display:none !important}
.center-text{text-align:center}

/* =========================================================== */
/* === v4 OVERRIDES · 全屏宠物 + 玻璃浮层 + 安全区一致 ====== */
/* =========================================================== */

/* 1. 安全区背景统一为奶油色（修橙色条 — 配合 capacitor backgroundColor=#FFF8EC） */
html,body,#app{background:#FFF8EC;}

/* 2. 陪伴页：宠物回应铺满整个 viewport（C 布局） */
#s-pet{
  background:#FFF8EC;
  padding-top:0;            /* 让回应延伸到 status bar 下 */
  padding-bottom:0;
  position:absolute;inset:0;
  overflow:hidden;
}
.pet-stage{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;height:100% !important;
  transform:none !important;
  display:block !important;
  z-index:1 !important;
}
.pet-media{
  position:absolute;inset:0;
}
.pet-media.hidden{display:none !important;}
.pet-media video,
.pet-media img{
  width:100% !important;height:100% !important;
  border-radius:0 !important;
  filter:none !important;
  object-fit:cover !important;
  background:#FFF8EC;
}
/* 涟漪改成更柔和、不抢戏 */
.ripple{display:none}

/* 3. 顶部 + 底部柔光遮罩 */
#s-pet::before{
  content:"";position:absolute;top:0;left:0;right:0;
  height:calc(180px + var(--safe-top));
  background:linear-gradient(180deg, rgba(255,243,222,.55) 0%, rgba(255,243,222,.15) 60%, transparent 100%);
  pointer-events:none;z-index:3;
}
#s-pet::after{
  content:"";position:absolute;bottom:0;left:0;right:0;
  height:calc(220px + var(--safe-bottom));
  background:linear-gradient(0deg, rgba(60,38,18,.32) 0%, rgba(60,38,18,.12) 50%, transparent 100%);
  pointer-events:none;z-index:3;
}

/* 4. 玻璃浮层 · 公共质感 */
:root{
  --glass-bg:rgba(255,255,255,.18);
  --glass-bg-strong:rgba(255,255,255,.28);
  --glass-border:rgba(255,255,255,.35);
  --glass-blur:blur(22px) saturate(180%);
  --glass-shadow:0 8px 24px rgba(60,38,18,.18);
}

/* 顶部名字胶囊 + 图标按钮 → 玻璃 */
.pet-name-pill{
  background:var(--glass-bg) !important;
  backdrop-filter:var(--glass-blur) !important;
  -webkit-backdrop-filter:var(--glass-blur) !important;
  border:1px solid var(--glass-border) !important;
  box-shadow:var(--glass-shadow) !important;
  color:#fff;
}
.pet-name-pill b{color:#fff !important;text-shadow:0 1px 4px rgba(0,0,0,.25)}
.pet-name-pill .sx{color:rgba(255,255,255,.85) !important;text-shadow:0 1px 3px rgba(0,0,0,.25)}
.pt-ic{
  background:var(--glass-bg) !important;
  backdrop-filter:var(--glass-blur) !important;
  -webkit-backdrop-filter:var(--glass-blur) !important;
  border:1px solid var(--glass-border) !important;
  box-shadow:var(--glass-shadow) !important;
  color:#fff;
}
.pt-ic.mood{
  background:linear-gradient(160deg, rgba(251,212,203,.55), rgba(246,191,178,.55)) !important;
  color:#fff !important;
}

/* speech 气泡 → 玻璃 */
.speech{
  background:var(--glass-bg-strong) !important;
  backdrop-filter:var(--glass-blur) !important;
  -webkit-backdrop-filter:var(--glass-blur) !important;
  border:1px solid var(--glass-border) !important;
  color:#fff !important;
  text-shadow:0 1px 4px rgba(0,0,0,.3);
  box-shadow:var(--glass-shadow) !important;
}
.speech::before{
  background:rgba(255,255,255,.28) !important;
  border-right-color:rgba(255,255,255,.35) !important;
  border-bottom-color:rgba(255,255,255,.35) !important;
}

/* 浮动按钮 (FAB) → 玻璃 */
.fab{
  background:var(--glass-bg-strong) !important;
  backdrop-filter:var(--glass-blur) !important;
  -webkit-backdrop-filter:var(--glass-blur) !important;
  border:1px solid var(--glass-border) !important;
  box-shadow:var(--glass-shadow) !important;
  color:#fff !important;
}
.fab.mic{
  background:linear-gradient(160deg, rgba(255,217,168,.55), rgba(242,166,90,.55)) !important;
  color:#fff !important;
}
.fab.chat{
  background:linear-gradient(160deg, rgba(207,227,240,.55), rgba(165,201,222,.55)) !important;
  color:#fff !important;
}

/* hint pill → 玻璃 */
.pet-hint{
  background:var(--glass-bg-strong) !important;
  backdrop-filter:var(--glass-blur) !important;
  -webkit-backdrop-filter:var(--glass-blur) !important;
  border:1px solid var(--glass-border) !important;
  color:#fff !important;
  text-shadow:0 1px 4px rgba(0,0,0,.3);
  box-shadow:var(--glass-shadow) !important;
}

/* 底部 tab bar 在陪伴页变玻璃（其他页保持原样可读） */
#s-pet .navbar{
  background:rgba(255,248,236,.35) !important;
  backdrop-filter:var(--glass-blur) !important;
  -webkit-backdrop-filter:var(--glass-blur) !important;
  border-top:1px solid rgba(255,255,255,.25) !important;
}
#s-pet .navbar .tab{color:rgba(255,255,255,.85) !important;}
#s-pet .navbar .tab.active{color:#fff !important;}

/* === v5: 新首页 + 玻璃 FAB 动效 + 卡片交互 === */

/* 首页顶部留白收紧（按 mockup 对齐） */
.home-body-tight{padding-top:calc(var(--safe-top) - 38px) !important;}

/* 顶部宠物窄条 · 无头像版 · 称呼+问候 */
.pet-greet-bar{
  margin:0 18px 14px;
  background:linear-gradient(160deg, rgba(255,232,197,.78), rgba(255,217,168,.62));
  border:1.2px solid rgba(196,138,90,.22);
  border-radius:18px;
  padding:11px 16px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  box-shadow:0 4px 14px rgba(196,138,90,.10);
  cursor:pointer;
  transition:transform .25s cubic-bezier(.2,.9,.3,1.2);
}
.pet-greet-bar:active{transform:scale(.98)}
.pet-greet-bar .pgb-msg{flex:1;min-width:0;line-height:1.25}
.pet-greet-bar .pgb-name{
  font-family:'Fraunces',serif;font-style:italic;font-weight:500;
  font-size:14px;color:var(--ink-2);
}
.pet-greet-bar .pgb-text{
  font-family:'Caveat','Ma Shan Zheng',cursive;font-weight:700;font-size:19px;
  color:var(--ink);letter-spacing:.3px;
  text-overflow:ellipsis;white-space:nowrap;overflow:hidden;
  transition:opacity .25s, transform .25s;
}
.pet-greet-bar .pgb-text.swap{opacity:0;transform:translateY(-4px)}
.pet-greet-bar .pgb-text .heart{color:var(--pink-2);font-size:13px;margin-left:3px;vertical-align:1px}
.pet-greet-bar .pgb-user{
  width:36px;height:36px;border-radius:12px;flex-shrink:0;
  background:linear-gradient(160deg,#FFE5C6,#FFCE99);
  display:grid;place-items:center;font-size:17px;
  box-shadow:var(--shadow-card);transition:transform .2s;
}
.pet-greet-bar .pgb-user:active{transform:scale(.9)}

/* 工具卡片轻微悬停效果 */
.tools-grid .tool{transition:transform .2s cubic-bezier(.2,.9,.3,1.2)}
.tools-grid .tool:active{transform:translateY(2px) scale(.96)}

/* 宠物卡片按下反馈 */
.pet-card{transition:transform .2s cubic-bezier(.2,.9,.3,1.2)}
.pet-card:active{transform:scale(.985)}

/* === 陪伴页 FAB 强化动效 === */
.fab{transition:transform .2s cubic-bezier(.2,.9,.3,1.4), box-shadow .25s !important;}
.fab:active{transform:scale(.86) !important;}

/* 麦克风听见时的双层光环脉动 */
.fab.mic.listening{
  animation:micPulseGlass 1.4s infinite cubic-bezier(.2,.9,.3,1) !important;
}
@keyframes micPulseGlass{
  0%,100%{
    box-shadow:
      var(--glass-shadow),
      0 0 0 0 rgba(242,166,90,.55),
      0 0 0 0 rgba(242,166,90,.3);
  }
  50%{
    box-shadow:
      var(--glass-shadow),
      0 0 0 14px rgba(242,166,90,0),
      0 0 0 28px rgba(242,166,90,0);
  }
}

/* FAB 按下波纹 */
@keyframes fabRipple{
  0%{transform:scale(0);opacity:.5}
  100%{transform:scale(2.2);opacity:0}
}
.fab .ripple-fx{
  position:absolute;inset:0;border-radius:50%;
  background:rgba(255,255,255,.45);pointer-events:none;
  animation:fabRipple .6s ease-out;
}
.fab{position:relative;overflow:hidden}

/* 进入陪伴页时浮层依次淡入 */
#s-pet.active .pet-name-pill{animation:floatIn .5s .1s both}
#s-pet.active .pt-ic{animation:floatIn .5s .15s both}
#s-pet.active .pet-hint{animation:floatIn .6s .35s both}
#s-pet.active .fab.mic{animation:floatIn .6s .25s both}
#s-pet.active .fab.chat{animation:floatIn .6s .3s both}
@keyframes floatIn{
  0%{opacity:0;transform:translateY(8px) scale(.95)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}

/* 触摸反馈：陪伴页所有玻璃图标按下 */
.pt-ic, .pet-name-pill{transition:transform .2s cubic-bezier(.2,.9,.3,1.2)}
.pt-ic:active{transform:scale(.88)}
.pet-name-pill:active{transform:scale(.97)}

/* === v6: 极简陪伴页（头顶气泡 + 单麦 + 返回） === */
/* 彻底去 iOS tap 高亮闪屏 */
#s-pet, #s-pet *{ -webkit-tap-highlight-color: transparent !important; }
#s-pet .tap-zone{-webkit-user-select:none;-webkit-touch-callout:none;}

/* v8 · 回到单 video 全屏 stage · object-position 让主体下移（不是整个回应下移） */
.pet-minimal .pet-stage{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;height:100% !important;
  transform:none !important;
  display:block !important;
  z-index:1 !important;
  background:#FFF8EC;
  overflow:hidden;
}
.pet-minimal .pet-media video,
.pet-minimal .pet-media img{
  object-position: center 85% !important;    /* 主体重心下移到 85%，上方空出给气泡 */
}

/* === v9 · 多 video 零闪方案 + 底图兜底 === */
.pet-minimal .pet-stage{overflow:hidden;}
.pet-minimal .pet-still,
.pet-minimal .pet-vid{
  position:absolute !important;inset:0 !important;
  width:100% !important;height:100% !important;
  object-fit:cover !important;
  object-position:center 85% !important;
  border-radius:0 !important;
  filter:none !important;
  background:#FFF8EC;
}
.pet-minimal .pet-still{z-index:0;display:block;}              /* 底层宠物照片，永远显示 */
.pet-minimal .pet-vid{z-index:1;opacity:0;pointer-events:none;} /* 所有 video 默认透明 */
.pet-minimal .pet-vid.show{opacity:1;z-index:2;}               /* 只有 show 的可见 */

/* ===================================================================== */
/* v8 · 弥散玻璃主题（Aurora / Dispersion UI）                             */
/* ===================================================================== */

/* 1. 全局弥散背景（像雾一样晕开） */
body, #app{
  background:
    radial-gradient(ellipse 90% 60% at 20% 15%, rgba(255,219,184,.6) 0%, transparent 65%),
    radial-gradient(ellipse 80% 55% at 80% 10%, rgba(254,203,202,.45) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 50% 90%, rgba(226,207,237,.35) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 10% 80%, rgba(201,222,180,.3) 0%, transparent 55%),
    linear-gradient(180deg, #FFF8EC 0%, #FCE9D3 100%) !important;
}

/* 每个 screen 透明让弥散背景透出 */
.screen, .screen-body{background:transparent !important;}
#s-home, #s-album, #s-settings, #s-profile, #s-chat{background:transparent !important;}

/* 2. 陪伴小物 9 格：玻璃质感统一 */
.tool{
  background: rgba(255,255,255,.45) !important;
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(255,255,255,.55) !important;
  box-shadow: 0 8px 22px rgba(196,138,90,.18), inset 0 1px 0 rgba(255,255,255,.7) !important;
}
.tool:active{transform:scale(.93);box-shadow:0 2px 6px rgba(196,138,90,.15) !important;}

.tool .ic3{
  width:48px !important;height:48px !important;border-radius:16px !important;
  margin:0 auto 6px !important;
  display:grid !important;place-items:center !important;font-size:22px !important;
  position:relative;
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border:1px solid rgba(255,255,255,.55) !important;
  box-shadow:
    0 6px 16px rgba(138,70,20,.18),
    inset 0 1px 0 rgba(255,255,255,.8),
    inset 0 -1px 0 rgba(255,255,255,.2) !important;
  animation: toolIcBreath 3.5s ease-in-out infinite;
}
@keyframes toolIcBreath{
  0%,100%{ transform:translateY(0); box-shadow:0 6px 16px rgba(138,70,20,.18), inset 0 1px 0 rgba(255,255,255,.8), inset 0 -1px 0 rgba(255,255,255,.2); }
  50%    { transform:translateY(-2px); box-shadow:0 10px 22px rgba(138,70,20,.22), inset 0 1px 0 rgba(255,255,255,.85), inset 0 -1px 0 rgba(255,255,255,.2); }
}

/* 每格用半透明弥散渐变，保留各自色系调性 */
.t-a{background:linear-gradient(160deg, rgba(255,217,168,.65), rgba(242,166,90,.55)) !important;}
.t-b{background:linear-gradient(160deg, rgba(212,232,195,.65), rgba(165,207,142,.55)) !important;}
.t-c{background:linear-gradient(160deg, rgba(251,212,203,.65), rgba(246,191,178,.55)) !important;}
.t-d{background:linear-gradient(160deg, rgba(207,227,240,.65), rgba(165,201,222,.55)) !important;}
.t-e{background:linear-gradient(160deg, rgba(255,233,168,.65), rgba(255,213,74,.55)) !important;}
.t-f{background:linear-gradient(160deg, rgba(223,207,237,.65), rgba(184,155,211,.55)) !important;}
.t-g{background:linear-gradient(160deg, rgba(255,212,184,.65), rgba(255,168,120,.55)) !important;}
.t-h{background:linear-gradient(160deg, rgba(230,216,190,.65), rgba(196,174,135,.55)) !important;}
.t-i{background:linear-gradient(160deg, rgba(255,229,198,.65), rgba(255,206,153,.55)) !important;}

/* 3. 设置页每行的彩色 icon（.sic）也玻璃化 */
.set-row{
  background: rgba(255,255,255,.5) !important;
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid rgba(255,255,255,.5);
}
.set-row .sic{
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255,255,255,.45);
  box-shadow: 0 4px 10px rgba(138,70,20,.15), inset 0 1px 0 rgba(255,255,255,.6) !important;
}

/* 4. 底部 navbar 玻璃化（全页面一致） */
.navbar{
  background: rgba(255,248,236,.5) !important;
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  border-top: 1px solid rgba(255,255,255,.4) !important;
}
.navbar .tab.active .icw{
  background:linear-gradient(180deg, rgba(255,217,168,.85), rgba(242,166,90,.85)) !important;
  backdrop-filter: blur(10px);
  border:1px solid rgba(255,255,255,.5);
}

/* 5. 顶部宠物问候条玻璃化 */
.pet-greet-bar{
  background: linear-gradient(160deg, rgba(255,232,197,.55), rgba(255,217,168,.4)) !important;
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border:1px solid rgba(255,255,255,.5) !important;
}
.pgb-user{
  background: rgba(255,255,255,.4) !important;
  backdrop-filter: blur(14px);
  border:1px solid rgba(255,255,255,.5) !important;
}

/* 6. 宠物信息卡玻璃化 */
.pet-card{
  background: rgba(255,255,255,.55) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,.55) !important;
}

/* 7. 相册故事连环画 hero + 相册卡玻璃化 */
.ai-hero{
  background: rgba(255,255,255,.55) !important;
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255,255,255,.55) !important;
}
.alb-card{
  background: rgba(255,255,255,.55) !important;
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(255,255,255,.55) !important;
}

/* 左上返回按钮（替代原 pet-name-pill） */
.pet-top-left{
  position:absolute;top:calc(12px + var(--safe-top));left:14px;z-index:20;
}
.pt-back{
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.18);
  backdrop-filter:blur(22px) saturate(180%);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  border:1px solid rgba(255,255,255,.35);
  box-shadow:0 6px 18px rgba(60,38,18,.18);
  color:#fff;font-size:20px;font-weight:500;
  display:grid;place-items:center;cursor:pointer;
  transition:transform .18s;
}
.pt-back:active{transform:scale(.88)}

/* 气泡左上角小块 · 远离宠物（宠物只占下 3/4，上方 1/4 空白留给气泡） */
.pet-minimal .speech{
  top: calc(70px + var(--safe-top)) !important;
  left: 18px !important;
  right: auto !important;
  max-width: 72% !important;
  min-width: 0;
}
.pet-minimal .speech::before{display:none !important;}

/* 单麦克风 FAB · 底部正中 · 全透明玻璃 · 与背景协调 */
.fab.mic-only{
  position:absolute;
  bottom:calc(36px + var(--safe-bottom));
  left:50%;transform:translateX(-50%);
  z-index:15;
  width:56px;height:56px;border-radius:50%;
  background:rgba(255,255,255,.18) !important;
  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  border:1px solid rgba(255,255,255,.35);
  color:#fff;font-size:22px;
  display:grid;place-items:center;cursor:pointer;
  box-shadow:0 8px 24px rgba(60,38,18,.22), inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform .18s, background .25s;
}
.fab.mic-only:active{transform:translateX(-50%) scale(.9)}
.fab.mic-only.listening{
  animation:micPulseGlass 1.4s infinite cubic-bezier(.2,.9,.3,1);
  background:rgba(255,232,197,.35) !important;
}

/* 聊天 FAB · 右下角 · 与 mic-only 配合 */
.fab.chat-only{
  position:absolute;
  bottom:calc(36px + var(--safe-bottom));
  right:28px;
  z-index:15;
  width:52px;height:52px;border-radius:50%;
  background:rgba(255,255,255,.18) !important;
  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  border:1px solid rgba(255,255,255,.35);
  color:#fff;font-size:20px;
  display:grid;place-items:center;cursor:pointer;
  box-shadow:0 8px 24px rgba(60,38,18,.22), inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform .18s, background .25s;
}
.fab.chat-only:active{transform:scale(.9)}
#s-pet.active .fab.chat-only{animation:floatIn .6s .35s both}

/* 隐藏 pet 页原来的 hint-pill / navbar / old fab-col / name-pill / top-icons （HTML 已删但保留兜底） */
#s-pet .pet-hint,
#s-pet > .navbar,
#s-pet > .fab-col,
#s-pet > .pet-top-row{display:none !important}

/* === 新相册页 === */
.album-head-tight{padding:0 18px 2px !important}
.album-head-tight h2{font-size:30px !important;letter-spacing:-1px !important}
.album-head-tight .sub{font-size:13.5px !important;margin-top:1px !important}
#s-album .screen-body{padding-top:calc(var(--safe-top) - 30px) !important;}

/* 故事连环画 hero */
.ai-hero{
  margin:8px 18px 18px;border-radius:22px;overflow:hidden;
  background:#fff;border:1.5px solid var(--line-soft);
  box-shadow:0 12px 28px rgba(196,138,90,.22);cursor:pointer;
  transition:transform .25s cubic-bezier(.2,.9,.3,1.2), box-shadow .3s;
}
.ai-hero:active{transform:scale(.985);box-shadow:0 6px 18px rgba(196,138,90,.18)}
.ai-hero .preview{
  width:100%;aspect-ratio:600/300;background:#FFF3DE;overflow:hidden;
  position:relative;
}
.ai-hero .preview img{width:100%;height:100%;object-fit:cover;display:block;}
.ai-hero .preview .badge{
  position:absolute;top:10px;left:10px;
  background:rgba(255,255,255,.85);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.6);border-radius:100px;
  padding:4px 10px;font-family:'Nunito',sans-serif;
  font-weight:800;font-size:10.5px;color:var(--amber-deep);letter-spacing:.4px;
}
.ai-hero .body{padding:14px 16px 16px;display:flex;align-items:center;gap:12px;}
.ai-hero .body .tx{flex:1;line-height:1.25;}
.ai-hero .body .tx h3{
  font-family:'Fraunces',serif;font-style:italic;font-weight:500;
  font-size:21px;color:var(--ink);letter-spacing:-.3px;
}
.ai-hero .body .cta{
  flex-shrink:0;background:linear-gradient(160deg,#FFD9A8,#F2A65A);
  color:#fff;padding:9px 14px;border-radius:100px;
  font-family:'Nunito',sans-serif;font-weight:800;font-size:12px;
  box-shadow:0 4px 12px rgba(232,141,61,.4);display:flex;align-items:center;gap:5px;
}
.ai-hero .body .cta b{font-size:13.5px}

/* 4 默认相册 + 自建 */
.alb-section-title{
  margin:4px 18px 12px;font-family:'Fraunces',serif;font-style:italic;
  font-weight:500;font-size:17px;color:var(--ink);
  display:flex;align-items:baseline;gap:8px;
}
.alb-section-title small{
  font-family:'Caveat',cursive;font-weight:700;color:var(--ink-3);font-size:12.5px;
}
.alb-grid{padding:0 18px;display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.alb-card{
  background:#fff;border-radius:18px;border:1.2px solid var(--line-soft);
  overflow:hidden;box-shadow:var(--shadow-card);position:relative;cursor:pointer;
  transition:transform .25s cubic-bezier(.2,.9,.3,1.2), box-shadow .3s;
}
.alb-card:active{transform:scale(.96);box-shadow:0 2px 8px rgba(196,138,90,.15)}
.alb-cover{
  aspect-ratio:1/1;background:linear-gradient(160deg,#FFE5C6,#FFCE99);
  position:relative;overflow:hidden;
}
.alb-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.alb-cover .label-overlay{display:none !important;}   /* 干净的橘猫封面 · 不叠文字 */
.alb-meta{padding:9px 12px 11px;display:flex;justify-content:space-between;align-items:baseline}
.alb-meta .nm{
  font-family:'Fraunces',serif;font-style:italic;font-weight:500;font-size:13.5px;color:var(--ink);
}
.alb-meta .ct{font-family:'Caveat',cursive;font-size:12px;color:var(--ink-2);font-weight:700}
.alb-card.add{
  background:rgba(255,255,255,.45);border-style:dashed;border-color:rgba(196,138,90,.4);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:var(--amber-2);min-height:200px;
}
.alb-card.add .pl{font-size:38px;line-height:1;font-weight:300}
.alb-card.add .nm2{font-family:'Caveat',cursive;font-weight:700;font-size:14px;margin-top:6px;color:var(--ink-2)}
.alb-card.removing{animation:cardOut .3s forwards}
@keyframes cardOut{
  to{transform:scale(.7);opacity:0}
}

.longpress-hint{
  text-align:center;font-family:'Caveat',cursive;font-size:12px;color:var(--ink-3);font-weight:700;
  margin:18px 0 12px;
}

/* 长按弹出菜单 */
.alb-actions{
  position:fixed;inset:0;background:rgba(0,0,0,.4);
  display:none;align-items:center;justify-content:center;z-index:200;
  backdrop-filter:blur(4px);
}
.alb-actions.show{display:flex;animation:fadeIn .25s}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.alb-actions .menu{
  background:#fff;border-radius:20px;width:78%;max-width:300px;overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.3);animation:popIn .3s cubic-bezier(.2,.9,.3,1.4);
}
@keyframes popIn{
  from{opacity:0;transform:scale(.92) translateY(20px)}
  to{opacity:1;transform:scale(1) translateY(0)}
}
.alb-actions .item{
  padding:16px;text-align:center;font-family:'Nunito',sans-serif;font-weight:700;
  font-size:15px;color:var(--ink);cursor:pointer;
  border-bottom:1px solid rgba(196,138,90,.12);
}
.alb-actions .item:last-child{border-bottom:0}
.alb-actions .item:active{background:rgba(255,232,197,.5)}
.alb-actions .item.danger{color:#D1574A}
.alb-actions .item.cancel{color:var(--ink-3);font-size:14px}

/* === 单相册详情页 === */
.alb-photos-grid{
  padding:0 18px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;
}
.alb-photo{
  aspect-ratio:1/1;border-radius:10px;overflow:hidden;
  background:linear-gradient(160deg,#FFE5C6,#FFCE99);position:relative;cursor:pointer;
  transition:transform .2s;
}
.alb-photo:active{transform:scale(.94)}
.alb-photo img{width:100%;height:100%;object-fit:cover;display:block}
.alb-photo.empty{
  display:grid;place-items:center;color:var(--ink-3);font-size:24px;
  background:rgba(255,255,255,.4);border:1.5px dashed rgba(196,138,90,.3);
}

.album-empty{
  text-align:center;padding:60px 30px;
  font-family:'Caveat',cursive;font-weight:700;color:var(--ink-2);
}
.album-empty .em{font-size:54px;margin-bottom:14px;opacity:.6}
.album-empty p{font-size:15px;line-height:1.5}
.album-empty .sub{font-size:13px;color:var(--ink-3);margin-top:6px}

/* ===== 法律条款内嵌查看器（privacy/terms · 离线可用）===== */
.legal-sheet{
  position:fixed;inset:0;z-index:9000;
  background:#FFF8EC;
  display:flex;flex-direction:column;
  transform:translateY(100%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  visibility:hidden;
}
.legal-sheet.show{
  transform:translateY(0);
  visibility:visible;
}
.legal-bar{
  padding:calc(10px + var(--safe-top,env(safe-area-inset-top))) 14px 10px;
  display:flex;align-items:center;gap:10px;
  background:rgba(255,248,236,.96);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(196,138,90,.14);
  flex-shrink:0;
}
.legal-close{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;
  background:rgba(255,255,255,.65);
  border:1px solid rgba(196,138,90,.18);
  color:#5A3A24;font-size:20px;font-weight:700;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:transform .15s ease, background .15s ease;
}
.legal-close:active{transform:scale(.92);background:rgba(255,255,255,.85)}
.legal-title{
  flex:1;text-align:center;
  font-size:15.5px;font-weight:700;color:#5A3A24;
  font-family:system-ui,-apple-system,"PingFang SC",sans-serif;
  letter-spacing:.3px;
}
#legal-frame{
  flex:1;border:0;width:100%;background:#FFF8EC;
  -webkit-overflow-scrolling:touch;
}

/* ===== 通用空状态（timeline / diary / letter / ...）===== */
.empty-state{
  text-align:center;padding:48px 28px 36px;
  color:var(--ink-2);
}
.empty-state .em{
  font-size:56px;margin-bottom:14px;opacity:.72;
  display:inline-block;animation:emptyBreath 3.2s ease-in-out infinite;
  filter:drop-shadow(0 6px 14px rgba(242,166,90,.22));
}
.empty-state h4{
  font-family:'Caveat','PingFang SC',cursive;font-weight:700;
  font-size:20px;line-height:1.35;margin:0 0 6px;color:var(--ink-1);
  letter-spacing:.3px;
}
.empty-state .hint{
  font-family:system-ui,-apple-system,"PingFang SC",sans-serif;
  font-size:12.5px;color:var(--ink-3);line-height:1.65;
  margin:0 auto;max-width:260px;font-weight:500;
}
.empty-state .cta{
  margin-top:22px;display:inline-block;
  padding:10px 24px;border-radius:100px;border:none;
  background:linear-gradient(180deg,#FFD9A8 0%,#F2A65A 100%);
  color:#fff;font-size:13px;font-weight:700;letter-spacing:.5px;
  font-family:system-ui,-apple-system,"PingFang SC",sans-serif;
  cursor:pointer;box-shadow:0 8px 18px rgba(242,166,90,.28);
  transition:transform .15s ease;
}
.empty-state .cta:active{transform:scale(.96)}
.empty-state .cta-ghost{
  margin-top:14px;display:inline-block;font-size:12px;color:var(--amber-deep);
  font-weight:700;cursor:pointer;padding:6px 10px;
  font-family:system-ui,-apple-system,"PingFang SC",sans-serif;
}
@keyframes emptyBreath{
  0%,100%{transform:translateY(0) rotate(-2deg);opacity:.72}
  50%{transform:translateY(-6px) rotate(2deg);opacity:.95}
}

/* === 连环画方向选择 === */
.orient-wrap{padding:10px 20px 30px;display:flex;flex-direction:column;gap:14px}
.orient-card{
  background:#fff;border-radius:22px;border:1.5px solid var(--line-soft);
  overflow:hidden;box-shadow:0 10px 24px rgba(196,138,90,.18);cursor:pointer;
  transition:transform .25s cubic-bezier(.2,.9,.3,1.2), box-shadow .3s;
}
.orient-card:active{transform:scale(.985)}
.orient-card.selected{
  border:2.5px solid var(--amber-2);
  box-shadow:0 14px 32px rgba(232,141,61,.35), 0 0 0 6px rgba(242,166,90,.12);
}
.orient-card .preview-wrap{
  background:#FFF3DE;display:flex;align-items:center;justify-content:center;
  padding:14px;
}
.orient-card.h .preview-wrap{aspect-ratio:600/280}
.orient-card.v .preview-wrap{aspect-ratio:400/420}
.orient-card .preview-wrap img{
  max-width:100%;max-height:100%;object-fit:contain;
  border-radius:10px;box-shadow:0 6px 14px rgba(0,0,0,.12);
}
.orient-card .meta{
  padding:14px 18px;display:flex;align-items:center;justify-content:space-between;
}
.orient-card .meta .tx{line-height:1.3}
.orient-card .meta h4{
  font-family:'Fraunces',serif;font-style:italic;font-weight:500;
  font-size:17px;color:var(--ink);
}
.orient-card .meta p{
  font-family:'Caveat',cursive;font-weight:700;font-size:13px;color:var(--ink-2);margin-top:2px;
}
.orient-card .meta .pick{
  width:24px;height:24px;border-radius:50%;border:2px solid var(--line-soft);
  display:grid;place-items:center;color:#fff;background:#fff;flex-shrink:0;
  transition:all .25s;
}
.orient-card.selected .meta .pick{
  background:linear-gradient(160deg,#FFD9A8,#F2A65A);border-color:transparent;
}
.orient-card.selected .meta .pick::after{content:"\2713";font-size:14px;font-weight:800;color:#fff}

.orient-cta-wrap{padding:6px 20px calc(20px + var(--safe-bottom));}
.orient-cta-wrap .price-note{
  text-align:center;font-family:'Caveat',cursive;font-weight:700;font-size:13px;
  color:var(--ink-2);margin-bottom:10px;
}

/* === v6: Paywall + Redeem + Coin UI === */
.paywall, .redeem{
  position:fixed;inset:0;z-index:300;display:none;
  align-items:flex-end;justify-content:center;
}
.paywall.show, .redeem.show{display:flex;animation:fadeIn .3s}
.pw-mask, .rd-mask{
  position:absolute;inset:0;background:rgba(40,20,10,.55);backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.pw-card, .rd-card{
  position:relative;background:#FFF8EC;width:100%;max-width:480px;
  border-radius:28px 28px 0 0;padding:18px 22px calc(22px + var(--safe-bottom));
  z-index:1;animation:slideUpModal .35s cubic-bezier(.2,.9,.3,1.2);
  max-height:92vh;overflow-y:auto;
  box-shadow:0 -10px 40px rgba(0,0,0,.3);
}
@keyframes slideUpModal{
  from{transform:translateY(40px);opacity:.4}
  to{transform:translateY(0);opacity:1}
}
.pw-close, .rd-close{
  position:absolute;top:14px;right:16px;width:30px;height:30px;border-radius:50%;
  background:rgba(0,0,0,.06);color:var(--ink-2);
  display:grid;place-items:center;font-size:14px;cursor:pointer;
  transition:transform .2s;
}
.pw-close:active, .rd-close:active{transform:scale(.85)}

.pw-hero{
  position:relative;border-radius:18px;overflow:hidden;margin:8px 0 14px;
  aspect-ratio:600/280;background:#FFF3DE;
  box-shadow:0 8px 22px rgba(196,138,90,.25);
}
.pw-hero img{width:100%;height:100%;object-fit:cover;display:block}
.pw-hero .pw-tag{
  position:absolute;top:12px;left:12px;
  background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.6);border-radius:100px;
  padding:5px 12px;font-family:'Nunito',sans-serif;font-weight:800;
  font-size:11px;color:var(--amber-deep);letter-spacing:.4px;
}
.pw-title{
  font-family:'Ma Shan Zheng','Caveat',cursive;font-weight:700;font-size:26px;
  color:var(--ink);text-align:center;margin:0 0 4px;line-height:1.25;
}
.pw-tagline{
  font-family:'Caveat',cursive;font-weight:700;font-size:14px;
  color:var(--ink-2);text-align:center;margin:0 0 14px;
}
.pw-bullets{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.pw-bullet{
  display:flex;align-items:flex-start;gap:10px;
  background:rgba(255,255,255,.7);border:1px solid rgba(217,175,135,.25);
  border-radius:14px;padding:10px 12px;
  font-family:'Nunito',sans-serif;font-size:13px;line-height:1.4;color:var(--ink);
}
.pw-bullet .em{font-size:18px;flex-shrink:0;line-height:1;margin-top:1px}
.pw-bullet b{color:var(--amber-2);font-weight:800}
.pw-cta{
  width:100%;padding:15px;border:none;border-radius:18px;
  background:linear-gradient(180deg,#F2A65A 0%,#E88D3D 100%);
  color:white;font-size:15px;font-weight:700;letter-spacing:.5px;
  box-shadow:0 8px 22px rgba(232,141,61,.45);font-family:'Nunito',sans-serif;
  cursor:pointer;transition:transform .2s;
}
.pw-cta:active{transform:scale(.98)}
.pw-hint{
  font-size:11.5px;color:var(--ink-3);text-align:center;margin-top:10px;line-height:1.5;
}

/* Redeem modal */
.rd-card{padding-bottom:calc(28px + var(--safe-bottom))}
.rd-title{
  font-family:'Fraunces',serif;font-style:italic;font-weight:500;font-size:22px;
  color:var(--ink);margin:8px 0 4px;text-align:center;
}
.rd-tagline{
  font-family:'Caveat',cursive;font-weight:700;font-size:13px;
  color:var(--ink-2);text-align:center;margin:0 0 16px;
}
.rd-input{
  width:100%;padding:14px 16px;border:1.5px solid var(--line-soft);border-radius:14px;
  font-family:'Nunito',monospace;font-size:16px;font-weight:700;
  color:var(--ink);background:#fff;letter-spacing:1.5px;text-align:center;
  text-transform:uppercase;
}
.rd-input:focus{outline:none;border-color:var(--amber-2);box-shadow:0 0 0 4px rgba(242,166,90,.15)}
.rd-submit{
  width:100%;margin-top:14px;padding:14px;border:none;border-radius:14px;
  background:linear-gradient(180deg,#F2A65A 0%,#E88D3D 100%);
  color:white;font-size:15px;font-weight:700;font-family:'Nunito',sans-serif;
  box-shadow:0 6px 18px rgba(232,141,61,.4);cursor:pointer;
}
.rd-submit:active{transform:scale(.98)}
.rd-msg{
  margin-top:10px;text-align:center;font-family:'Caveat',cursive;font-weight:700;font-size:14px;
  color:var(--ink-2);min-height:18px;
}
.rd-msg.ok{color:var(--mint-2)}
.rd-msg.err{color:#D1574A}

/* 设置页：宠物币条 + 签到 */
.coin-card{
  margin:14px 18px;background:linear-gradient(135deg,#FFE5C6 0%,#F2A65A 100%);
  border-radius:22px;padding:16px 18px;color:#fff;
  box-shadow:0 12px 28px rgba(232,141,61,.32);position:relative;overflow:hidden;
}
.coin-card .lbl{
  font-family:'Caveat',cursive;font-weight:700;font-size:13px;opacity:.92;
}
.coin-card .num{
  font-family:'Fraunces',serif;font-style:italic;font-weight:500;font-size:36px;
  letter-spacing:-.5px;line-height:1.1;margin-top:2px;
}
.coin-card .num small{font-size:14px;opacity:.85;margin-left:4px;font-style:normal}
.coin-card .row{display:flex;gap:10px;margin-top:12px}
.coin-card .btn-x{
  flex:1;padding:11px;background:rgba(255,255,255,.25);
  backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.4);
  border-radius:14px;color:#fff;font-family:'Nunito',sans-serif;
  font-weight:800;font-size:13px;cursor:pointer;text-align:center;
  transition:transform .2s, background .2s;
}
.coin-card .btn-x:active{transform:scale(.96);background:rgba(255,255,255,.35)}
.coin-card .btn-x.done{background:rgba(255,255,255,.12);opacity:.65;color:rgba(255,255,255,.85)}
.coin-card .pro-badge{
  position:absolute;top:14px;right:14px;
  background:rgba(255,255,255,.92);color:var(--amber-deep);
  border-radius:100px;padding:4px 10px;font-family:'Nunito',sans-serif;
  font-weight:800;font-size:10.5px;letter-spacing:.3px;
}

/* 配额错误 toast 强化 */
.toast.warn{background:linear-gradient(160deg,#FFD9A8,#F2A65A);color:#fff;font-weight:800}

/* === 连环画单图结果页 === */
.comic-single-wrap{padding:8px 20px 16px}
.comic-single-title{
  font-family:'Ma Shan Zheng','Caveat',cursive;
  font-weight:700;font-size:24px;color:var(--ink);
  text-align:center;margin:6px 0 12px;letter-spacing:1.5px;
}
.comic-single-img{
  width:100%;display:block;border-radius:18px;
  box-shadow:0 12px 32px rgba(196,138,90,.25);
  border:1px solid rgba(255,255,255,.6);
  background:#FFF3DE;
}
.comic-caps{
  margin-top:14px;display:flex;flex-direction:column;gap:8px;
  padding:14px 16px;border-radius:16px;
  background:rgba(255,255,255,.5);
  backdrop-filter:blur(16px) saturate(180%);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
  border:1px solid rgba(255,255,255,.5);
}
.comic-caps .c-cap{
  display:flex;align-items:baseline;gap:10px;
  font-family:'Caveat','Ma Shan Zheng',cursive;font-weight:700;font-size:15px;
  color:var(--ink);line-height:1.4;
}
.comic-caps .c-cap .idx{
  font-family:'Fraunces',serif;font-style:italic;color:var(--amber-2);
  font-size:14px;font-weight:700;min-width:22px;flex-shrink:0;
}

.about-sheet{position:fixed;inset:0;z-index:120;display:none;align-items:flex-end;background:rgba(60,38,24,.36);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.about-sheet.show{display:flex}
.about-card{width:100%;padding:24px 22px calc(28px + var(--safe-bottom));border-radius:24px 24px 0 0;background:linear-gradient(180deg,#FFF8EC,#FFF3DE);box-shadow:0 -16px 36px rgba(80,48,24,.18);position:relative;color:var(--ink)}
.about-close{position:absolute;right:16px;top:14px;width:34px;height:34px;border-radius:50%;border:1px solid var(--line-soft);background:white;color:var(--ink-2);font-weight:800}
.about-logo{width:58px;height:58px;border-radius:18px;background:linear-gradient(160deg,#FFD9A8,#F2A65A);display:grid;place-items:center;color:white;font-family:'Ma Shan Zheng',cursive;font-size:21px;box-shadow:0 8px 20px rgba(232,141,61,.28)}
.about-card h3{margin:14px 0 8px;font-family:'Fraunces',serif;font-style:italic;font-size:22px}.about-card p{margin:0 0 16px;color:var(--ink-2);font-size:14px;line-height:1.7;font-weight:600}.about-lines{display:grid;gap:8px}.about-lines div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line-soft);font-size:13px}.about-lines span{color:var(--ink-3);font-weight:700}.about-lines b{color:var(--ink);text-align:right}
.empty-state .letter-empty-cta{box-shadow:0 0 0 5px rgba(242,166,90,.12),0 8px 18px rgba(232,141,61,.22)}

.splash-story{width:100%;display:grid;gap:8px;margin:6px 0 14px}.splash-card{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;background:rgba(255,255,255,.68);border:1px solid var(--line-soft);box-shadow:0 4px 12px rgba(196,138,90,.1);font-size:13px;color:var(--ink);font-weight:700}.splash-card b{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(160deg,#FFD9A8,#F2A65A);color:white;font-size:12px;flex-shrink:0}.auth-note,.soft-help,.reg-consent-hint{margin:0 20px 12px;color:var(--ink-3);font-size:12px;font-weight:700;line-height:1.55}.reg-consent-hint{margin-top:-4px;text-align:center;color:#B46A2A}.setup-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:0 20px 12px;color:var(--ink-3);font-size:11px;font-weight:800;text-align:center}.date-pair{display:grid;grid-template-columns:1fr;gap:8px;padding:0 20px}.date-pair label{display:grid;gap:5px;color:var(--ink-3);font-size:11px;font-weight:800}.date-pair input{width:100%;border:1.5px solid var(--line-soft);border-radius:14px;background:white;padding:11px 12px;color:var(--ink);font-weight:700}.profile-chip{border:1px solid var(--line-soft);background:rgba(255,255,255,.85);color:var(--amber-deep);border-radius:999px;padding:6px 10px;font-size:12px;font-weight:800;flex-shrink:0}.stats-row .stat{cursor:pointer;border-radius:8px}.stats-row .stat:active{background:rgba(255,255,255,.55);transform:scale(.98)}.diary-compose{margin:0 0 14px;padding-top:8px;background:rgba(255,255,255,.38);border-bottom:1px solid var(--line-soft)}.diary-history{padding-top:8px}.mood-row{overflow-x:auto;-webkit-overflow-scrolling:touch}.mood{min-width:66px}.btn:disabled{opacity:.55;pointer-events:none}

/* Style chip selected state */
.style-chip.selected{
  background:linear-gradient(180deg,#FFD9A8,#F2A65A);color:white;
  border-color:var(--amber-2);text-shadow:0 1px 1px rgba(138,66,20,.25);
  box-shadow:0 4px 12px rgba(232,141,61,.3);
}