/* ==================================================
   V88 HOME UI
   宠物主视觉 + 实时状态 + 今日任务 + 轻动效
================================================== */

.page[data-page="home"]{
  overflow:hidden !important;
}

/* ---------- 顶部 ---------- */

.page[data-page="home"] .topbar{
  height:54px !important;
  min-height:54px !important;
  position:relative !important;
  z-index:20 !important;
}

.page[data-page="home"] .brand-mark{
  width:48px !important;
  height:48px !important;
  border-radius:50% !important;
  background:linear-gradient(145deg,#418b72,#2e715d) !important;
  box-shadow:
    0 8px 18px rgba(45,106,84,.16),
    inset 0 1px 0 rgba(255,255,255,.25) !important;
  animation:v88BrandFloat 3.2s ease-in-out infinite !important;
}

.page[data-page="home"] .top-actions{
  gap:9px !important;
}

.page[data-page="home"] .top-actions .round-btn{
  width:47px !important;
  height:47px !important;
  background:rgba(255,255,255,.93) !important;
  border:1px solid rgba(255,255,255,.95) !important;
  box-shadow:0 8px 18px rgba(61,47,37,.075) !important;
}


/* ---------- 首页区域 ---------- */

.page[data-page="home"] .home-main{
  height:calc(100% - 54px) !important;

  display:grid !important;

  grid-template-rows:
    minmax(0,1fr)
    137px !important;

  gap:10px !important;
}


/* ==================================================
   HERO
================================================== */

.page[data-page="home"] .pet-hero{
  min-height:0 !important;
  position:relative !important;

  padding:19px 19px 15px !important;

  border-radius:31px !important;

  overflow:hidden !important;

  background:
    radial-gradient(
      circle at 72% 41%,
      rgba(255,255,255,.98) 0 8%,
      rgba(242,248,237,.70) 28%,
      transparent 52%
    ),
    linear-gradient(
      155deg,
      #edf5e9 0%,
      #f8f7ef 58%,
      #fffdf8 100%
    ) !important;

  border:1px solid rgba(255,255,255,.92) !important;

  box-shadow:
    0 14px 34px rgba(54,70,52,.105),
    inset 0 1px 0 rgba(255,255,255,.9) !important;
}


/* 大圆装饰 */
.page[data-page="home"] .pet-hero::after{
  width:300px !important;
  height:300px !important;

  right:-74px !important;
  top:82px !important;

  border:1px solid rgba(65,125,96,.10) !important;

  animation:v88Orbit 12s linear infinite !important;
}


/* 第二层柔光 */
.page[data-page="home"] .pet-hero::before{
  content:"" !important;

  position:absolute !important;
  z-index:0 !important;

  width:190px !important;
  height:190px !important;

  right:25px !important;
  top:150px !important;

  border-radius:50% !important;

  background:
    radial-gradient(
      circle,
      rgba(186,224,172,.23),
      transparent 68%
    ) !important;

  animation:v88Glow 4s ease-in-out infinite !important;
}


/* ---------- 名称 ---------- */

.page[data-page="home"] .hero-topline{
  position:relative !important;
  z-index:8 !important;
}

.page[data-page="home"] .hero-topline .eyebrow{
  letter-spacing:.28em !important;
  font-size:9px !important;
  color:#a28377 !important;
}

.page[data-page="home"] .hero-topline h1{
  margin-top:6px !important;

  font-size:37px !important;
  line-height:1 !important;

  letter-spacing:-.04em !important;

  color:#211b18 !important;
}

.page[data-page="home"] .hero-topline .soft-pill{
  height:38px !important;

  padding:0 13px !important;

  display:flex !important;
  align-items:center !important;

  font-size:12px !important;

  color:#332b27 !important;

  background:rgba(255,255,255,.74) !important;

  border:1px solid rgba(204,196,187,.73) !important;

  box-shadow:0 6px 16px rgba(62,50,41,.045) !important;

  backdrop-filter:blur(12px) !important;
  -webkit-backdrop-filter:blur(12px) !important;
}


/* 原来的状态隐藏，使用 V88 新状态 */
.page[data-page="home"] .hero-badges{
  display:none !important;
}


/* ==================================================
   状态栏
================================================== */

.v88-home-stats{
  position:absolute !important;

  z-index:8 !important;

  left:18px !important;
  top:98px !important;

  display:flex !important;

  gap:6px !important;
}

.v88-stat{
  height:29px !important;

  padding:0 9px !important;

  display:flex !important;
  align-items:center !important;

  gap:4px !important;

  border-radius:999px !important;

  background:rgba(255,255,255,.76) !important;

  border:1px solid rgba(255,255,255,.96) !important;

  box-shadow:0 4px 11px rgba(56,48,39,.045) !important;

  backdrop-filter:blur(10px) !important;
  -webkit-backdrop-filter:blur(10px) !important;

  color:#514a44 !important;

  font-size:9.5px !important;
  font-weight:750 !important;
}

.v88-stat b{
  color:#2e725c !important;
  font-size:10px !important;
}


/* ==================================================
   今日任务进度
================================================== */

.v88-home-progress{
  position:absolute !important;

  z-index:9 !important;

  left:18px !important;
  top:137px !important;

  width:116px !important;

  padding:9px 10px !important;

  border-radius:15px !important;

  background:rgba(255,255,255,.58) !important;

  border:1px solid rgba(255,255,255,.75) !important;

  backdrop-filter:blur(9px) !important;
  -webkit-backdrop-filter:blur(9px) !important;
}

.v88-progress-top{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;

  color:#766d65 !important;

  font-size:8.5px !important;
  font-weight:700 !important;
}

.v88-progress-top b{
  color:#2f705a !important;
  font-size:9px !important;
}

.v88-progress-track{
  height:5px !important;

  margin-top:6px !important;

  overflow:hidden !important;

  border-radius:999px !important;

  background:rgba(83,112,92,.11) !important;
}

.v88-progress-fill{
  height:100% !important;

  width:var(--v88-progress,0%) !important;

  border-radius:inherit !important;

  background:
    linear-gradient(
      90deg,
      #63aa7c,
      #8cc678
    ) !important;

  transition:width .55s cubic-bezier(.2,.85,.25,1) !important;

  box-shadow:0 0 9px rgba(90,171,113,.26) !important;
}


/* ==================================================
   宠物
================================================== */

.page[data-page="home"] #homePetImage{
  position:absolute !important;

  z-index:4 !important;

  right:1% !important;
  bottom:53px !important;

  width:min(70%,310px) !important;
  height:69% !important;

  object-fit:contain !important;
  object-position:center bottom !important;

  transform-origin:center bottom !important;

  filter:
    drop-shadow(
      0 15px 14px rgba(55,50,44,.13)
    ) !important;

  animation:
    v88PetIdle
    4.2s
    ease-in-out
    infinite !important;
}


/* 小闪光 */

.v88-spark{
  position:absolute !important;

  z-index:3 !important;

  pointer-events:none !important;

  color:#e4bd58 !important;

  font-size:12px !important;

  animation:
    v88Spark
    2.2s
    ease-in-out
    infinite !important;
}

.v88-spark.s1{
  right:29% !important;
  top:31% !important;
}

.v88-spark.s2{
  right:11% !important;
  top:46% !important;

  font-size:8px !important;

  animation-delay:-.8s !important;
}

.v88-spark.s3{
  right:34% !important;
  top:54% !important;

  color:#efb6a5 !important;

  animation-delay:-1.2s !important;
}


/* ==================================================
   对话区域
================================================== */

.page[data-page="home"] .hero-caption{
  z-index:10 !important;

  left:14px !important;
  right:14px !important;
  bottom:13px !important;

  min-height:58px !important;

  padding:
    10px
    10px
    10px
    15px !important;

  border-radius:21px !important;

  background:
    linear-gradient(
      135deg,
      rgba(31,77,61,.96),
      rgba(30,69,57,.94)
    ) !important;

  box-shadow:
    0 11px 23px rgba(26,65,52,.18) !important;

  backdrop-filter:blur(12px) !important;
  -webkit-backdrop-filter:blur(12px) !important;
}

.page[data-page="home"] .hero-caption small{
  margin-bottom:3px !important;

  color:rgba(255,255,255,.58) !important;

  font-size:9px !important;
}

.page[data-page="home"] .hero-caption strong{
  display:block !important;

  max-width:230px !important;

  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;

  font-size:13px !important;
}

.page[data-page="home"] .hero-go{
  width:42px !important;
  height:42px !important;

  flex:0 0 auto !important;

  background:
    linear-gradient(
      145deg,
      #ffd49b,
      #efbb76
    ) !important;

  color:#4a3023 !important;

  border-radius:50% !important;

  box-shadow:
    0 4px 0 #cd965e,
    0 7px 13px rgba(43,34,27,.13) !important;

  animation:v88ArrowPulse 2.4s ease-in-out infinite !important;
}


/* ==================================================
   快捷功能区
================================================== */

.page[data-page="home"] .quick-grid{
  min-height:0 !important;

  display:grid !important;

  grid-template-columns:
    repeat(2,minmax(0,1fr)) !important;

  grid-template-rows:
    repeat(2,minmax(0,1fr)) !important;

  gap:9px !important;
}


.page[data-page="home"] .quick-card{
  min-width:0 !important;
  min-height:0 !important;

  padding:9px 10px !important;

  gap:8px !important;

  grid-template-columns:
    36px
    minmax(0,1fr)
    11px !important;

  border-radius:20px !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.96),
      rgba(252,249,244,.94)
    ) !important;

  border:1px solid rgba(255,255,255,.92) !important;

  box-shadow:
    0 6px 15px rgba(65,49,38,.065) !important;

  transition:
    transform .18s ease,
    box-shadow .18s ease !important;
}


.page[data-page="home"] .quick-card:active{
  transform:scale(.965) !important;

  box-shadow:
    0 3px 9px rgba(65,49,38,.05) !important;
}


.page[data-page="home"] .quick-icon{
  width:36px !important;
  height:36px !important;

  border-radius:13px !important;

  display:grid !important;
  place-items:center !important;

  font-size:19px !important;

  transition:
    transform .25s
    cubic-bezier(.2,.8,.25,1.3) !important;
}


.page[data-page="home"]
.quick-card:hover .quick-icon{
  transform:
    rotate(-6deg)
    scale(1.08) !important;
}


.page[data-page="home"] .quick-card b{
  font-size:13px !important;

  color:#26211e !important;
}


.page[data-page="home"] .quick-card small{
  display:block !important;

  margin-top:2px !important;

  max-width:100% !important;

  white-space:nowrap !important;

  overflow:hidden !important;
  text-overflow:ellipsis !important;

  color:#9a9188 !important;

  font-size:8.5px !important;
}


.page[data-page="home"] .quick-card i{
  color:#aaa198 !important;

  font-size:15px !important;
}


/* 快捷卡数字 */

.v88-mini-value{
  color:#4f8564 !important;
  font-weight:800 !important;
}


/* ==================================================
   动画
================================================== */

@keyframes v88PetIdle{
  0%,100%{
    transform:
      translateY(0)
      rotate(0deg);
  }

  45%{
    transform:
      translateY(-6px)
      rotate(-.5deg);
  }

  55%{
    transform:
      translateY(-6px)
      rotate(.5deg);
  }
}


@keyframes v88Spark{
  0%,100%{
    opacity:.25;
    transform:
      scale(.65)
      rotate(0);
  }

  50%{
    opacity:1;
    transform:
      scale(1.18)
      rotate(18deg);
  }
}


@keyframes v88Glow{
  0%,100%{
    opacity:.6;
    transform:scale(.96);
  }

  50%{
    opacity:1;
    transform:scale(1.05);
  }
}


@keyframes v88ArrowPulse{
  0%,100%{
    transform:translateX(0);
  }

  50%{
    transform:translateX(3px);
  }
}


@keyframes v88BrandFloat{
  0%,100%{
    transform:translateY(0);
  }

  50%{
    transform:translateY(-3px);
  }
}


@keyframes v88Orbit{
  from{
    transform:rotate(0deg);
  }

  to{
    transform:rotate(360deg);
  }
}


/* ==================================================
   小高度屏幕
================================================== */

@media(max-height:760px){

  .page[data-page="home"] .topbar{
    height:48px !important;
    min-height:48px !important;
  }

  .page[data-page="home"] .brand-mark,
  .page[data-page="home"] .top-actions .round-btn{
    width:42px !important;
    height:42px !important;
  }

  .page[data-page="home"] .home-main{
    height:calc(100% - 48px) !important;

    grid-template-rows:
      minmax(0,1fr)
      118px !important;

    gap:7px !important;
  }

  .page[data-page="home"] .pet-hero{
    padding:15px !important;
    border-radius:27px !important;
  }

  .page[data-page="home"] .hero-topline h1{
    font-size:31px !important;
  }

  .v88-home-stats{
    left:14px !important;
    top:82px !important;
  }

  .v88-home-progress{
    left:14px !important;
    top:118px !important;
  }

  .page[data-page="home"] #homePetImage{
    height:67% !important;
    bottom:50px !important;
  }

  .page[data-page="home"] .hero-caption{
    min-height:52px !important;
  }

}


/* 用户关闭动态 */
@media(prefers-reduced-motion:reduce){

  .page[data-page="home"] *,
  .page[data-page="home"] *::before,
  .page[data-page="home"] *::after{
    animation:none !important;
  }

}