/* 每日任务页（2026-11-05 重做，白色为主）。外框和商店一样用 rewards-window；画面由 tasks-page.js 生成。 */
#tasksPage.rewards-window{width:min(900px,calc(100vw - 40px));background:#f5f7f9}
#tasksPage .rewards-heading{display:flex;align-items:center;justify-content:space-between;padding:20px 28px 18px}
#tasksPage .rewards-heading h2{margin:4px 0 0;font-size:26px}
#tasksPage .rewards-balance{height:42px;border-radius:11px}
#tasksPage .task-body{display:grid;gap:16px;padding:22px 28px 26px}
#tasksPage .task-body.hidden{display:none}
#tasksPage .rewards-status{margin:-10px 28px 16px}

/* 顶部：完成度圆环 + 标题 + 倒计时 */
.task-hero{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:22px;padding:22px 26px;border:1px solid #e3e9ec;border-radius:18px;background:linear-gradient(135deg,#ffffff 45%,#f0fafc 78%,#f4f1ff);overflow:hidden;box-shadow:0 18px 40px -32px rgba(20,48,60,.45)}
.task-hero:before{content:"";position:absolute;right:-80px;top:-90px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(19,184,207,.16),transparent 65%);animation:task-drift 8s ease-in-out infinite alternate;pointer-events:none}
.task-ring{--ring:0;position:relative;width:92px;height:92px}
.task-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.task-ring circle{fill:none;stroke-width:10;stroke-linecap:round}
.task-ring-track{stroke:#e8eff2}
.task-ring-fill{stroke:#13b8cf;stroke-dasharray:calc(var(--ring) * 100) 100;transition:stroke-dasharray .8s cubic-bezier(.2,.8,.2,1),stroke .3s ease}
.task-ring.is-full .task-ring-fill{stroke:#22a86f}
.task-ring.is-empty .task-ring-fill{opacity:0}
.task-ring>span{position:absolute;inset:0;display:flex;align-items:baseline;justify-content:center;padding-top:30px;color:#1d2a33}
.task-ring b{font-family:var(--font-num,inherit);font-size:28px;font-weight:800;line-height:1}
.task-ring small{color:#93a0a8;font-size:13px;font-weight:700}
.task-ring.is-full{animation:task-pop .6s cubic-bezier(.2,.9,.25,1.3)}
.task-hero-copy{position:relative;display:grid;gap:3px;min-width:0}
.task-hero-copy .page-overline{color:#13a9bf;font-size:10px;font-weight:800;letter-spacing:.24em}
.task-hero-copy h3{margin:0;color:#17212a;font-size:22px}
.task-hero-copy p{margin:2px 0 0;color:#8a959e;font-size:12.5px}
.task-hero-side{position:relative;display:grid;justify-items:end;gap:8px}
.task-summary{padding:5px 12px;border-radius:999px;background:#e9f7f9;color:#0b8698;font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.task-reset{display:inline-flex;align-items:center;gap:6px;color:#5f6d77;font-size:13px}
.task-reset svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.task-reset b{font-family:var(--font-num,inherit);font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.02em}

/* 任务卡 */
.task-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.task-card,.task-login{position:relative;border:1px solid #e3e9ec;border-radius:16px;background:#fff;animation:task-in .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 70ms + 60ms)}
.task-card{display:grid;gap:7px;padding:16px 18px 15px;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.task-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--tc) 30%,#e3e9ec);box-shadow:0 16px 30px -20px color-mix(in srgb,var(--tc) 60%,transparent)}
.task-card:before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--tc),transparent 80%);opacity:.85}
.task-card-top{display:flex;align-items:center;gap:9px;margin-bottom:4px}
.task-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:color-mix(in srgb,var(--tc) 12%,#fff);color:var(--tc)}
.task-icon svg,.task-login-icon svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.task-cat{padding:3px 9px;border-radius:999px;background:#f2f5f7;color:#6b7984;font-size:11px;font-weight:700}
.task-reward{display:inline-flex;align-items:center;gap:4px;margin-left:auto;padding:4px 10px;border-radius:999px;background:#fff7e6;color:#c27a0a;font-size:12.5px;font-weight:800;font-variant-numeric:tabular-nums}
.task-coin{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9}
.task-title{color:#1d2a33;font-size:15px;line-height:1.4}
.task-desc{color:#7f8c95;font-size:12.5px;line-height:1.6}
.task-bar{position:relative;height:8px;margin-top:6px;border-radius:999px;background:#edf2f4;overflow:hidden}
.task-bar i{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,color-mix(in srgb,var(--tc) 70%,#fff),var(--tc));transform:scaleX(var(--p,0));transform-origin:left center;animation:task-fill .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 70ms + 200ms)}
.task-bar i:after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-100%);animation:task-sheen 2.8s ease-in-out 1.2s infinite}
.task-card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#5f6d77;font-size:12.5px;font-variant-numeric:tabular-nums}
.task-card-foot b{padding:3px 9px;border-radius:7px;background:#f2f5f7;color:#6b7984;font-size:11.5px}
/* 完成：卡片变成浅绿，图标打勾弹一下 */
.task-card.is-complete{background:linear-gradient(160deg,#ffffff 50%,#effaf4)}
.task-card.is-complete .task-icon{background:#22a86f;color:#fff;animation:task-pop .55s cubic-bezier(.2,.9,.25,1.3) both;animation-delay:calc(var(--i,0) * 70ms + 500ms)}
.task-card.is-complete .task-card-foot b{background:#e3f6ec;color:#168653}
.task-card.is-complete .task-bar i:after{animation:none}

/* 每日登录：一整行，七天连签点 */
.task-login{grid-column:1/-1;display:flex;align-items:center;gap:14px;padding:14px 18px;--i:0;background:linear-gradient(100deg,#ffffff 40%,#f0faf5)}
.task-login-icon{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:12px;background:#22a86f;color:#fff}
.task-login-copy{display:grid;gap:2px;min-width:0}
.task-login-copy strong{color:#1d2a33;font-size:14px}
.task-login-copy small{color:#7f8c95;font-size:12px}
.task-login-dots{display:flex;gap:6px;margin-left:auto}
.task-login-dots i{width:10px;height:10px;border-radius:50%;background:#e3eaed;animation:task-dot .4s cubic-bezier(.2,.9,.25,1.4) both;animation-delay:calc(var(--i) * 60ms + 250ms)}
.task-login-dots i.on{background:#7fd3a8}
.task-login-dots i.today{background:#22a86f;box-shadow:0 0 0 4px rgba(34,168,111,.16)}
.task-login .task-reward{margin-left:6px}

@keyframes task-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes task-fill{from{transform:scaleX(0)}to{transform:scaleX(var(--p,0))}}
@keyframes task-sheen{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}}
@keyframes task-pop{0%{transform:scale(.6)}60%{transform:scale(1.12)}100%{transform:none}}
@keyframes task-dot{from{transform:scale(0)}to{transform:none}}
@keyframes task-drift{to{transform:translate(-40px,30px) scale(1.12)}}

@media(max-width:760px){
  #tasksPage .rewards-heading{padding:16px 16px 14px}
  #tasksPage .task-body{padding:14px 14px 20px;gap:12px}
  .task-hero{grid-template-columns:auto minmax(0,1fr);gap:14px;padding:16px}
  .task-hero-side{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center}
  .task-ring{width:76px;height:76px}
  .task-ring>span{padding-top:24px}
  .task-ring b{font-size:23px}
  .task-hero-copy h3{font-size:19px}
  .task-grid{grid-template-columns:minmax(0,1fr);gap:10px}
  .task-login{flex-wrap:wrap;row-gap:10px}
  .task-login-copy{flex:1 1 0}
  .task-login .task-reward{order:2;margin-left:0}
  .task-login-dots{order:3;width:100%;margin-left:52px}
}
@media(prefers-reduced-motion:reduce){
  .task-card,.task-login,.task-bar i,.task-bar i:after,.task-card.is-complete .task-icon,.task-login-dots i,.task-hero:before,.task-ring.is-full{animation:none!important}
  .task-card,.task-ring-fill{transition:none}
  .task-card:hover{transform:none}
}
html[data-reduce-motion] .task-card,html[data-reduce-motion] .task-login,html[data-reduce-motion] .task-bar i,html[data-reduce-motion] .task-bar i:after,html[data-reduce-motion] .task-card.is-complete .task-icon,html[data-reduce-motion] .task-login-dots i,html[data-reduce-motion] .task-hero:before{animation:none!important}