/* ============================================================
   朝夕契约 · 视觉系统 V3
   风格：梦幻霓虹 + 玻璃拟态（清透渐变 / 活力社交感）
   主色：粉 #FF4F97、紫 #7C5CFF、青 #3FC8F5
   ============================================================ */
:root {
  --zx-pink: #FF4F97;
  --zx-violet: #7C5CFF;
  --zx-cyan: #3FC8F5;
  --grad-main: linear-gradient(135deg, #7C5CFF 0%, #FF4F97 55%, #FF9A62 100%);
  --grad-pink: linear-gradient(135deg, #FF8DBB 0%, #FF4F97 100%);
  --grad-blue: linear-gradient(135deg, #7CC4FF 0%, #5B8CFF 100%);
  --glass: rgba(255, 255, 255, .72);
  --line: rgba(124, 92, 255, .12);
  --shadow-card: 0 12px 34px -14px rgba(91, 64, 160, .28);
}

html { -webkit-tap-highlight-color: transparent; }
body {
  min-height: 100vh;
  color: #2E2545;
  background:
    radial-gradient(circle at 10% 6%, #FFD9E8 0%, transparent 36%),
    radial-gradient(circle at 90% 10%, #E2DBFF 0%, transparent 42%),
    radial-gradient(circle at 50% 102%, #DCF4FF 0%, transparent 46%),
    linear-gradient(165deg, #FFF8FC 0%, #F6F3FF 46%, #EFF9FF 100%);
  background-attachment: fixed;
}
#app { min-height: 100vh; position: relative; z-index: 1; }

/* ---------- 背景光晕 ---------- */
.zx-aurora { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.zx-aurora .blob {
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5;
  animation: auroraDrift 18s ease-in-out infinite alternate;
}
.zx-aurora .b1 { width: 42vw; height: 42vw; background: #FFB9D5; top: -10vw; left: -8vw; }
.zx-aurora .b2 { width: 38vw; height: 38vw; background: #C9BBFF; top: 12vh; right: -10vw; animation-delay: -6s; }
.zx-aurora .b3 { width: 34vw; height: 34vw; background: #A8E9FF; bottom: -8vw; left: 22vw; animation-delay: -12s; }
@keyframes auroraDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(3vw, -2vh, 0) scale(1.08); }
  100% { transform: translate3d(-2vw, 3vh, 0) scale(.96); }
}

/* 滚动条 */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: linear-gradient(#FFB9D5, #C9BBFF); border-radius: 3px; }

/* ---------- 卡片：玻璃拟态 ---------- */
.zx-card {
  background: var(--glass);
  border: 1px solid rgba(255, 255, 255, .92);
  border-radius: 1.4rem;
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  transition: box-shadow .25s, transform .25s;
}

/* ---------- 按钮 ---------- */
.zx-btn { transition: transform .2s, box-shadow .25s, background-position .4s, filter .2s; }
.zx-btn:hover { transform: translateY(-1px); }
.zx-btn:active { transform: scale(.965); }
.zx-btn-primary {
  background: var(--grad-main);
  background-size: 160% 160%;
  color: #fff;
  box-shadow: 0 10px 24px -10px rgba(255, 79, 151, .7);
}
.zx-btn-primary:hover { background-position: 100% 0; box-shadow: 0 14px 30px -10px rgba(124, 92, 255, .65); }
.zx-btn-blue {
  background: var(--grad-blue);
  background-size: 160% 160%;
  color: #fff;
  box-shadow: 0 10px 24px -10px rgba(91, 140, 255, .7);
}
.zx-btn-blue:hover { background-position: 100% 0; }
.zx-btn-ghost {
  background: rgba(255, 255, 255, .78);
  border: 1.5px solid rgba(255, 79, 151, .28);
  color: #FF4F97;
  backdrop-filter: blur(8px);
}
.zx-btn-ghost:hover { background: #FFF0F7; }

/* ---------- 输入框 ---------- */
.zx-input {
  width: 100%;
  background: rgba(255, 255, 255, .82);
  border: 1.5px solid rgba(124, 92, 255, .12);
  border-radius: .95rem;
  padding: .72rem 1rem;
  color: #2E2545;
  outline: none;
  transition: border .2s, box-shadow .2s, background .2s;
}
.zx-input::placeholder { color: #A9A2BC; }
.zx-input:focus {
  border-color: rgba(255, 79, 151, .55);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255, 79, 151, .12);
}

/* ---------- 文字渐变 ---------- */
.zx-grad-text {
  background: var(--grad-main);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Hero 主视觉 ---------- */
.zx-hero {
  position: relative;
  overflow: hidden;
  border-radius: 1.75rem;
  background: linear-gradient(135deg, #8B7CFF 0%, #FF6FAE 58%, #FFC17C 120%);
  box-shadow: 0 24px 50px -22px rgba(124, 92, 255, .65);
}
.zx-hero::before {
  content: '';
  position: absolute;
  inset: -45%;
  background:
    radial-gradient(circle at 32% 30%, rgba(255, 255, 255, .45), transparent 42%),
    radial-gradient(circle at 74% 72%, rgba(255, 255, 255, .28), transparent 40%);
  animation: heroShift 14s ease-in-out infinite alternate;
}
.zx-hero > * { position: relative; z-index: 1; }
@keyframes heroShift {
  0%   { transform: translate3d(-4%, -2%, 0) scale(1); }
  100% { transform: translate3d(4%, 3%, 0) scale(1.1); }
}

/* ---------- 登录卡片 ---------- */
.zx-login-card {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(255, 255, 255, .95);
  border-radius: 1.75rem;
  box-shadow: 0 26px 60px -26px rgba(91, 64, 160, .45);
  backdrop-filter: blur(24px) saturate(170%);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
}
.zx-login-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--grad-main);
}

/* 分隔线 */
.zx-divider { display: flex; align-items: center; gap: .75rem; color: #9A93AD; font-size: .72rem; }
.zx-divider::before, .zx-divider::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124, 92, 255, .28), transparent);
}

/* 第三方登录按钮 */
.zx-social {
  display: flex; align-items: center; justify-content: center; gap: .45rem;
  width: 100%; padding: .8rem; border-radius: 1rem;
  font-weight: 700; font-size: .9rem;
  transition: transform .2s, box-shadow .25s;
}
.zx-social:hover { transform: translateY(-1px); }
.zx-social:active { transform: scale(.97); }
.zx-social-wechat {
  background: linear-gradient(135deg, #2BD97F 0%, #0FAE60 100%);
  color: #fff;
  box-shadow: 0 12px 24px -14px rgba(15, 174, 96, .9);
}
.zx-social-douyin {
  position: relative;
  background: #12101A;
  color: #fff;
  box-shadow: 0 12px 24px -14px rgba(0, 0, 0, .75);
}
.zx-social-douyin::after {
  content: '';
  position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: linear-gradient(135deg, #25F4EE, #FE2C55);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* ---------- 导航 ---------- */
.zx-nav {
  background: rgba(255, 255, 255, .68);
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  border-bottom: 1px solid rgba(255, 255, 255, .85);
  box-shadow: 0 8px 28px -20px rgba(80, 50, 140, .5);
}
.zx-logo {
  font-weight: 800;
  letter-spacing: .02em;
  background: var(--grad-main);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tabbar {
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  background: rgba(255, 255, 255, .8);
  border-top: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 -10px 30px -20px rgba(80, 50, 140, .55);
}
.tabbar .tab-active { color: #FF4F97; font-weight: 700; }
.tabbar .tab-active > span:first-child {
  background: linear-gradient(135deg, #FFE1EF, #EDE8FF);
  border-radius: 999px;
  padding: 0 10px;
  box-shadow: 0 6px 14px -8px rgba(255, 79, 151, .8);
}
.tab-active .tab-dot { opacity: 1; transform: scale(1); }
.tab-dot { opacity: 0; transform: scale(0); transition: all .25s; }

/* ---------- 弹窗过渡 ---------- */
.fade-enter-active, .fade-leave-active { transition: opacity .25s ease; }
.fade-enter-from, .fade-leave-to { opacity: 0; }
.pop-enter-active { transition: all .28s cubic-bezier(.34, 1.4, .64, 1); }
.pop-leave-active { transition: all .18s ease-in; }
.pop-enter-from, .pop-leave-to { opacity: 0; transform: scale(.9) translateY(16px); }
.slide-up-enter-active, .slide-up-leave-active { transition: all .3s ease; }
.slide-up-enter-from, .slide-up-leave-to { opacity: 0; transform: translateY(30px); }

/* ---------- 飘心特效 ---------- */
.heart-fly { position: fixed; pointer-events: none; z-index: 9999; animation: heartFly 1.6s ease-out forwards; }
@keyframes heartFly {
  0%   { opacity: 1; transform: translateY(0) scale(.6) rotate(0deg); }
  100% { opacity: 0; transform: translateY(-38vh) scale(1.4) rotate(20deg); }
}

/* ---------- 榜单 ---------- */
.rank-1 { background: linear-gradient(135deg, #FFE9A8, #FFD25E); box-shadow: 0 6px 18px -6px rgba(255, 210, 94, .8); }
.rank-2 { background: linear-gradient(135deg, #F3F3FA, #D9D9E6); box-shadow: 0 6px 18px -6px rgba(180, 180, 205, .7); }
.rank-3 { background: linear-gradient(135deg, #FFD9B8, #F2A56B); box-shadow: 0 6px 18px -6px rgba(242, 165, 107, .7); }
.medal { animation: medalShine 2s ease-in-out infinite; }
@keyframes medalShine { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }

.board-real { border: 1.5px solid rgba(255, 200, 80, .85); box-shadow: 0 12px 30px -18px rgba(255, 180, 60, .75); }

/* ============ 礼物动效 ============ */
/* 聊天里的礼物卡片（抖音式渐变卡） */
.gift-card {
  width: 150px; padding: 14px 12px; border-radius: 18px; text-align: center;
  background: linear-gradient(150deg, #8A5CFF 0%, #FF4F97 58%, #FF9A62 100%);
  box-shadow: 0 10px 26px -12px rgba(255, 79, 151, .65);
  border: 1.5px solid rgba(255, 255, 255, .4);
}
/* 飘屏横幅（小礼物） */
.gift-banner { animation: giftBannerIn .35s cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes giftBannerIn { from { transform: translateX(-120%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.gift-fly { display: inline-block; animation: giftFly 1.6s ease-out .15s both; }
@keyframes giftFly {
  0% { transform: translateY(8px) scale(.5); opacity: 0; }
  25% { opacity: 1; transform: translateY(-6px) scale(1.1); }
  100% { transform: translateY(-46px) scale(1.35); opacity: 0; }
}
/* 全屏大礼物 */
.gift-big-overlay { background: radial-gradient(ellipse at center, rgba(40,14,52,.55), rgba(40,14,52,.85)); animation: giftBigFade 3.2s ease both; }
@keyframes giftBigFade { 0% { opacity: 0; } 8% { opacity: 1; } 78% { opacity: 1; } 100% { opacity: 0; } }
.gift-big-default { display: inline-block; animation: giftBigDefault 2.9s cubic-bezier(.2,.8,.3,1) both; }
@keyframes giftBigDefault {
  0% { transform: scale(.2) translateY(120px); opacity: 0; }
  22% { transform: scale(1.18) translateY(0); opacity: 1; }
  40% { transform: scale(1); }
  65% { transform: scale(1.08) rotate(-4deg); }
  80% { transform: scale(1.02) rotate(3deg); }
  100% { transform: scale(1) translateY(-30px); }
}
.gift-big-rocket { display: inline-block; animation: rocketFly 2.9s ease-in-out both; }
@keyframes rocketFly {
  0% { transform: translate(-60vw, 24vh) rotate(-38deg) scale(.8); opacity: 0; }
  12% { opacity: 1; }
  50% { transform: translate(0, 0) rotate(-38deg) scale(1.7); }
  100% { transform: translate(62vw, -26vh) rotate(-38deg) scale(1.3); opacity: .9; }
}
.gift-big-castle { display: inline-block; animation: castleRise 2.9s cubic-bezier(.2,.9,.3,1) both; }
@keyframes castleRise {
  0% { transform: translateY(60vh) scale(.6); opacity: 0; }
  20% { opacity: 1; }
  55% { transform: translateY(0) scale(1.15); }
  75% { transform: translateY(0) scale(1); }
  100% { transform: translateY(-12px) scale(1.05); }
}
.gift-big-carnival { display: inline-block; animation: carnivalSpin 2.9s ease both; }
@keyframes carnivalSpin {
  0% { transform: scale(.3) rotate(-160deg); opacity: 0; }
  25% { transform: scale(1.2) rotate(8deg); opacity: 1; }
  45% { transform: scale(1) rotate(0); }
  70% { transform: scale(1.1) rotate(-6deg); }
  100% { transform: scale(1.05) rotate(0) translateY(-24px); }
}
.gift-big-fireworks { display: inline-block; animation: fireworkPop 2.9s ease both; }
@keyframes fireworkPop {
  0% { transform: scale(.1); opacity: 0; }
  18% { transform: scale(1.45); opacity: 1; }
  35% { transform: scale(1); }
  55% { transform: scale(1.28); }
  100% { transform: scale(1.05) translateY(-20px); }
}
/* 全屏粒子 */
.gift-particle { position: absolute; bottom: 18%; font-size: 1.4rem; animation: particleUp 2.6s ease-out both; }
@keyframes particleUp {
  0% { transform: translateY(0) scale(.6); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translateY(-55vh) scale(1.2); opacity: 0; }
}

/* 状态色 */
.st-0 { color: #F5A623; } .st-1 { color: #5B8CFF; } .st-2 { color: #10B981; } .st-3 { color: #F44336; }

/* 心跳动画 */
.heartbeat { animation: heartbeat 1.5s ease-in-out infinite; transform-origin: center; }
@keyframes heartbeat { 0%, 100% { transform: scale(1); } 25% { transform: scale(1.12); } 50% { transform: scale(1); } 75% { transform: scale(1.08); } }

/* ---------- 打卡日历 ---------- */
.cal-day { min-height: 64px; border-radius: .85rem; }
.cal-joint {
  background: linear-gradient(135deg, #FFE4EC, #F1ECFF);
  border: 1.5px solid rgba(255, 79, 151, .45);
  box-shadow: 0 6px 16px -12px rgba(255, 79, 151, .8);
}

/* ---------- 聊天气泡 ---------- */
.bubble-me {
  background: linear-gradient(135deg, #8B7CFF 0%, #FF4F97 100%);
  color: #fff;
  border-radius: 1.1rem 1.1rem .25rem 1.1rem;
  box-shadow: 0 8px 20px -12px rgba(255, 79, 151, .8);
}
.bubble-peer {
  background: rgba(255, 255, 255, .95);
  border-radius: 1.1rem 1.1rem 1.1rem .25rem;
  box-shadow: 0 4px 14px -8px rgba(91, 64, 160, .35);
}

/* ---------- 骨架屏 ---------- */
.skeleton { background: linear-gradient(90deg, #F3EEFB 25%, #FBF7FF 50%, #F3EEFB 75%); background-size: 200% 100%; animation: sk 1.2s infinite; }
@keyframes sk { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ---------- 页面容器 ---------- */
.page { max-width: 1000px; margin: 0 auto; padding: 1rem 1rem 6.5rem; }
@media (min-width: 768px) { .page { padding-bottom: 2rem; } }

/* ---------- 契约卡 ---------- */
.contract-card {
  background: linear-gradient(160deg, #FFF8FC 0%, #F4F0FF 55%, #EFF9FF 100%);
  border: 2px solid rgba(255, 79, 151, .35);
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 50px -24px rgba(124, 92, 255, .6);
}
.contract-card::before { content: '💞'; position: absolute; font-size: 9rem; opacity: .07; right: -1rem; bottom: -2rem; }

/* ---------- 爱心树 ---------- */
.love-tree-wrap {
  background:
    radial-gradient(circle at 50% 88%, rgba(255, 228, 240, .95) 0%, rgba(255, 247, 252, .9) 45%, rgba(240, 249, 255, .9) 100%);
  border-radius: 1.4rem;
  position: relative;
  overflow: hidden;
}
.love-tree-wrap::after {
  content: '';
  position: absolute; inset: auto -20% -45% -20%; height: 70%;
  background: radial-gradient(ellipse at center, rgba(255, 79, 151, .16), transparent 68%);
  animation: treeGlow 6s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes treeGlow { 0% { opacity: .5; transform: scale(.96); } 100% { opacity: 1; transform: scale(1.06); } }

/* ---------- 其它细节 ---------- */
.zx-page-title { font-weight: 800; letter-spacing: -.01em; }
.zx-badge-dot { box-shadow: 0 0 0 3px rgba(255, 79, 151, .15); }
.zx-float { animation: floatY 5s ease-in-out infinite; }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* 移动端安全区 */
@supports (padding: max(0px)) {
  .tabbar { padding-bottom: max(0px, env(safe-area-inset-bottom)); }
}

/* 尊重系统减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
  .zx-aurora .blob, .zx-hero::before, .zx-float, .heartbeat, .medal, .love-tree-wrap::after { animation: none !important; }
}