/* ==================================================
   V86 TASK CARDS
   两列 × 两排 · 一屏任务页
================================================== */

.page[data-page="tasks"]{
  display:grid !important;
  grid-template-rows:
    58px
    112px
    minmax(0,1fr)
    34px !important;

  gap:10px !important;

  overflow:hidden !important;
}


/* ==============================
   顶部
============================== */

.page[data-page="tasks"] .simple-header{
  height:58px !important;
}

.page[data-page="tasks"] .simple-header h2{
  font-size:31px !important;
}

.page[data-page="tasks"] .round-btn[data-action="add-task"]{
  width:52px !important;
  height:52px !important;

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

  box-shadow:
    0 10px 26px rgba(69,52,40,.08) !important;

  transition:
    transform .22s cubic-bezier(.2,.8,.3,1.2),
    box-shadow .22s ease !important;
}

.page[data-page="tasks"] .round-btn[data-action="add-task"]:active{
  transform:
    scale(.91)
    rotate(8deg) !important;
}


/* ==============================
   今日进度
============================== */

.page[data-page="tasks"] .summary-card{
  height:112px !important;

  margin:0 !important;

  padding:15px 17px !important;

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

  gap:10px !important;

  border-radius:27px !important;

  background:
    radial-gradient(
      circle at 72% 15%,
      rgba(255,255,255,.12),
      transparent 32%
    ),
    linear-gradient(
      135deg,
      #214c3e,
      #326553
    ) !important;

  overflow:hidden !important;
}

.page[data-page="tasks"] .summary-card::after{
  content:"✦" !important;

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

  top:14px !important;
  right:92px !important;

  color:#f6ca8f !important;
  font-size:14px !important;

  animation:v86Star 2.3s ease-in-out infinite !important;
}

.page[data-page="tasks"] .summary-card > *{
  position:relative;
  z-index:2;
}

.page[data-page="tasks"] .summary-card strong{
  font-size:29px !important;
}

.page[data-page="tasks"] .progress-ring{
  width:64px !important;
  height:64px !important;
}

.page[data-page="tasks"] .summary-card .soft-pill{
  min-width:72px !important;

  padding:9px 10px !important;

  border-radius:17px !important;

  background:rgba(215,230,222,.56) !important;

  box-shadow:
    0 6px 14px rgba(10,36,28,.12) !important;
}

.page[data-page="tasks"] .summary-card .soft-pill::before{
  content:"🎁" !important;
  display:block !important;
  font-size:15px !important;
  margin-bottom:2px !important;
}

.v86-progress-tip{
  display:block !important;

  margin-top:3px !important;

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

  font-size:9px !important;
  font-weight:600 !important;

  white-space:nowrap !important;
}


/* ==============================
   2 × 2 任务卡片
============================== */

.page[data-page="tasks"] #taskList{
  min-height:0 !important;
  height:auto !important;

  margin:0 !important;

  display:grid !important;

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

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

  gap:10px !important;
}


/* 卡片 */
.page[data-page="tasks"] .task-v86-card{
  --rx:0deg;
  --ry:0deg;

  position:relative !important;

  min-width:0 !important;
  min-height:0 !important;

  padding:8px 9px 9px !important;

  display:grid !important;

  grid-template-columns:1fr !important;
  grid-template-rows:
    minmax(65px,1fr)
    auto
    auto
    27px !important;

  align-items:stretch !important;

  gap:4px !important;

  overflow:hidden !important;

  border-radius:24px !important;

  border:
    1px solid rgba(226,218,207,.82) !important;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.98),
      rgba(255,253,248,.96)
    ) !important;

  box-shadow:
    0 7px 18px rgba(70,53,40,.07) !important;

  transform:
    perspective(700px)
    rotateX(var(--rx))
    rotateY(var(--ry)) !important;

  transform-style:preserve-3d !important;

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

  animation:
    v86CardIn .52s
    cubic-bezier(.2,.85,.3,1.1)
    both !important;

  animation-delay:
    calc(var(--i,0) * 60ms) !important;
}


/* 卡片高光 */
.page[data-page="tasks"] .task-v86-card::after{
  content:"" !important;

  position:absolute !important;
  inset:0 !important;

  border-radius:inherit !important;

  pointer-events:none !important;

  background:
    radial-gradient(
      180px circle
      at var(--mx,50%) var(--my,40%),
      rgba(255,255,255,.55),
      transparent 55%
    ) !important;

  opacity:.72 !important;
}


/* 点击 */
.page[data-page="tasks"] .task-v86-card.is-pressing{
  transform:
    perspective(700px)
    rotateX(var(--rx))
    rotateY(var(--ry))
    scale(.965) !important;

  box-shadow:
    0 3px 10px rgba(70,53,40,.07) !important;
}


/* ==============================
   卡片插画区域
============================== */

.task-v86-art{
  position:relative !important;

  min-height:0 !important;

  overflow:hidden !important;

  border-radius:18px !important;

  background:
    linear-gradient(
      145deg,
      #f2f7ef,
      #fff9ec
    ) !important;
}


/* 不同卡轻微换色 */
.task-v86-card:nth-child(2) .task-v86-art{
  background:
    linear-gradient(
      145deg,
      #fff7e8,
      #f6f3e9
    ) !important;
}

.task-v86-card:nth-child(3) .task-v86-art{
  background:
    linear-gradient(
      145deg,
      #eef6f7,
      #f5f7ed
    ) !important;
}

.task-v86-card:nth-child(4) .task-v86-art{
  background:
    linear-gradient(
      145deg,
      #fff3e9,
      #fbf7e9
    ) !important;
}


/* 背景小光点 */
.task-v86-art::before,
.task-v86-art::after{
  content:"✦" !important;

  position:absolute !important;

  color:#a9cdb6 !important;

  z-index:1 !important;

  animation:v86Twinkle 2.6s ease-in-out infinite !important;
}

.task-v86-art::before{
  top:10px !important;
  right:12px !important;

  font-size:13px !important;
}

.task-v86-art::after{
  top:27px !important;
  right:24px !important;

  font-size:8px !important;

  animation-delay:.7s !important;
}


/* 宠物 */
.task-v86-pet{
  position:absolute !important;
  z-index:2 !important;

  left:50% !important;
  bottom:-4px !important;

  width:63% !important;
  height:88% !important;

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

  transform:
    translateX(-50%)
    translateY(0) !important;

  filter:
    drop-shadow(
      0 6px 7px rgba(58,46,34,.12)
    ) !important;

  pointer-events:none !important;

  animation:
    v86PetFloat
    3.2s
    ease-in-out
    infinite !important;

  animation-delay:
    calc(var(--i,0) * -.35s) !important;
}


/* 任务道具 */
.task-v86-prop{
  position:absolute !important;
  z-index:3 !important;

  left:12px !important;
  bottom:8px !important;

  width:34px !important;
  height:34px !important;

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

  border-radius:12px !important;

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

  box-shadow:
    0 5px 12px rgba(65,50,38,.08) !important;

  font-size:19px !important;

  animation:
    v86PropFloat
    2.8s
    ease-in-out
    infinite !important;
}


/* ==============================
   状态图标
============================== */

.task-v86-status-icon{
  position:absolute !important;
  z-index:5 !important;

  top:10px !important;
  left:10px !important;

  width:31px !important;
  height:31px !important;

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

  border-radius:12px !important;

  font-size:17px !important;
  font-weight:900 !important;

  box-shadow:
    0 5px 12px rgba(45,55,49,.13) !important;
}

.task-v86-card.done
.task-v86-status-icon{
  background:#70aa81 !important;
  color:#fff !important;
}

.task-v86-card.pending
.task-v86-status-icon{
  background:#f6d797 !important;
  color:#875733 !important;
}

.task-v86-card:not(.done):not(.pending)
.task-v86-status-icon{
  background:#f2c4c6 !important;
  color:#fff !important;
}


/* ==============================
   文字
============================== */

.task-v86-title{
  position:relative !important;
  z-index:3 !important;

  padding:1px 3px 0 !important;

  overflow:hidden !important;

  color:#24201d !important;

  font-size:14px !important;
  font-weight:850 !important;
  line-height:1.25 !important;

  text-align:center !important;

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

.task-v86-reward{
  position:relative !important;
  z-index:3 !important;

  color:#8c847c !important;

  font-size:9.5px !important;
  line-height:1.2 !important;

  text-align:center !important;

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


/* 底部状态按钮 */
.task-v86-chip{
  position:relative !important;
  z-index:3 !important;

  height:27px !important;

  min-width:82px !important;
  max-width:110px !important;

  margin:1px auto 0 !important;

  padding:0 12px !important;

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

  border-radius:999px !important;

  font-size:10px !important;
  font-weight:800 !important;

  box-shadow:
    0 4px 9px rgba(66,51,39,.07) !important;
}

.task-v86-card.done .task-v86-chip{
  color:#fff !important;

  background:
    linear-gradient(
      135deg,
      #6da17a,
      #4e8b68
    ) !important;
}

.task-v86-card.pending .task-v86-chip{
  color:#946036 !important;

  background:#f8e3bc !important;

  border:
    1px solid rgba(218,164,89,.45) !important;
}

.task-v86-card:not(.done):not(.pending)
.task-v86-chip{
  color:#fff !important;

  background:
    linear-gradient(
      135deg,
      #4f9778,
      #37745e
    ) !important;
}


/* ==============================
   添加任务空卡
============================== */

.task-v86-add{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;

  gap:7px !important;

  border:
    1.5px dashed #d8cfc4 !important;

  background:
    rgba(255,253,248,.70) !important;

  color:#80756c !important;
}

.task-v86-add span{
  width:44px !important;
  height:44px !important;

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

  border-radius:16px !important;

  background:#f2ece4 !important;

  font-size:25px !important;
}

.task-v86-add b{
  font-size:12px !important;
}


/* ==============================
   查看全部
============================== */

.page[data-page="tasks"] .footer-action{
  height:34px !important;

  margin:0 !important;

  border-radius:16px !important;

  background:rgba(235,229,220,.75) !important;

  font-size:11px !important;

  box-shadow:none !important;
}


/* ==============================
   动效
============================== */

@keyframes v86CardIn{
  from{
    opacity:0;
    transform:
      translateY(12px)
      scale(.96);
  }

  to{
    opacity:1;
    transform:
      translateY(0)
      scale(1);
  }
}

@keyframes v86PetFloat{
  0%,100%{
    transform:
      translateX(-50%)
      translateY(0)
      rotate(0deg);
  }

  50%{
    transform:
      translateX(-50%)
      translateY(-4px)
      rotate(-1deg);
  }
}

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

  50%{
    transform:
      translateY(-4px)
      rotate(4deg);
  }
}

@keyframes v86Twinkle{
  0%,100%{
    opacity:.35;
    transform:scale(.8);
  }

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

@keyframes v86Star{
  0%,100%{
    opacity:.5;
    transform:
      scale(.85)
      rotate(0);
  }

  50%{
    opacity:1;
    transform:
      scale(1.15)
      rotate(15deg);
  }
}


/* ==============================
   小屏进一步收紧
============================== */

@media(max-height:760px){

  .page[data-page="tasks"]{
    grid-template-rows:
      52px
      92px
      minmax(0,1fr)
      30px !important;

    gap:7px !important;
  }

  .page[data-page="tasks"]
  .simple-header{
    height:52px !important;
  }

  .page[data-page="tasks"]
  .simple-header h2{
    font-size:27px !important;
  }

  .page[data-page="tasks"]
  .round-btn[data-action="add-task"]{
    width:46px !important;
    height:46px !important;
  }

  .page[data-page="tasks"]
  .summary-card{
    height:92px !important;
    padding:11px 14px !important;
  }

  .page[data-page="tasks"]
  .summary-card strong{
    font-size:24px !important;
  }

  .page[data-page="tasks"]
  .progress-ring{
    width:55px !important;
    height:55px !important;
  }

  .task-v86-card{
    border-radius:20px !important;

    padding:6px 7px 7px !important;

    grid-template-rows:
      minmax(48px,1fr)
      auto
      auto
      24px !important;

    gap:2px !important;
  }

  .task-v86-art{
    border-radius:15px !important;
  }

  .task-v86-title{
    font-size:12px !important;
  }

  .task-v86-reward{
    font-size:8.5px !important;
  }

  .task-v86-chip{
    height:24px !important;
    font-size:9px !important;
  }

  .task-v86-status-icon{
    width:27px !important;
    height:27px !important;

    top:8px !important;
    left:8px !important;

    font-size:14px !important;
  }

  .task-v86-prop{
    width:28px !important;
    height:28px !important;

    font-size:15px !important;
  }

  .v86-progress-tip{
    display:none !important;
  }

}


/* 尊重减少动态 */
@media(prefers-reduced-motion:reduce){

  .task-v86-card,
  .task-v86-pet,
  .task-v86-prop,
  .task-v86-art::before,
  .task-v86-art::after,
  .page[data-page="tasks"]
  .summary-card::after{
    animation:none !important;
  }

}