.task-center-page { min-height:100vh; padding:0 0 calc(84px + env(safe-area-inset-bottom)); background:#fff8fb; color:#4d303d; }
.task-topbar { position:sticky; top:0; z-index:30; display:grid; grid-template-columns:48px 1fr 82px; align-items:center; width:min(1240px,100%); height:58px; margin:auto; padding:0 16px; border-bottom:1px solid #f4e4eb; background:#fff9fcf2; backdrop-filter:blur(18px); }
.task-topbar h1 { margin:0; text-align:center; font-size:16px; font-weight:850; }.task-topbar h1 span { color:#ff5b91; }
.task-back { display:grid; width:36px; height:36px; place-items:center; border:1px solid #f7dce7; border-radius:50%; color:#a24a6b; font-size:27px; line-height:1; text-decoration:none; }
.task-history-link { justify-self:end; color:#bf5c7d; font-size:11px; font-weight:800; text-decoration:none; }
.task-main { display:grid; gap:14px; width:min(1240px,calc(100% - 24px)); margin:12px auto 0; }
.task-hero { position:relative; display:grid; grid-template-columns:minmax(0,1fr) 270px; align-items:center; min-height:220px; overflow:hidden; padding:24px 25px; border:1px solid #f4d4e0; border-radius:24px; background:linear-gradient(115deg,#ffd7e5,#fff1f6 64%,#ffe4ed); box-shadow:0 10px 35px #e892b01c; }
.task-hero-art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 48%; mix-blend-mode:multiply; }
.task-hero-copy { position:relative; z-index:1; width:52%; }.task-hero-copy p,.task-section-heading p { margin:0 0 4px; color:#bd6c87; font-size:9px; font-weight:800; letter-spacing:.15em; }
.task-hero-copy h2 { margin:0; color:#c93670; font-size:clamp(25px,4vw,42px); font-weight:900; line-height:1.16; letter-spacing:.02em; text-shadow:0 2px #fff8fb; }
.task-hero-copy span { display:inline-flex; margin-top:12px; padding:7px 12px; border-radius:99px; background:#fffafbdc; color:#8c596b; font-size:11px; }
.task-wallet { position:relative; z-index:2; display:grid; justify-self:end; width:min(100%,270px); gap:6px; padding:17px 18px; border:1px solid #f5dbe5; border-radius:22px; background:#fffafbf0; box-shadow:0 8px 25px #bd64771a; }
.task-wallet-title { display:flex; align-items:center; gap:8px; color:#72515e; font-size:12px; font-weight:800; }.task-wallet-title img { width:34px; height:34px; object-fit:contain; }
.task-wallet>strong { padding-left:42px; color:#ef4f86; font-size:34px; line-height:1; font-weight:900; }.task-wallet>a { justify-self:start; margin-left:42px; padding:7px 11px; border-radius:99px; background:#fff0f5; color:#bb5478; font-size:10px; font-weight:800; text-decoration:none; }
.task-streak-card,.task-list-section,.task-history-section { padding:17px; border:1px solid #f3e0e8; border-radius:22px; background:#fffdfd; box-shadow:0 7px 24px #d07b9410; }
.task-section-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:13px; }.task-section-heading>div { display:flex; align-items:center; gap:9px; }.task-section-heading>div>img { width:38px; height:38px; object-fit:contain; }.task-section-heading h2 { margin:0; color:#5b3647; font-size:17px; font-weight:900; }.task-section-heading h2 strong { color:#f24f87; font-size:23px; }.task-section-heading>span { color:#a78391; font-size:10px; }
.task-streak-days { display:grid; grid-template-columns:repeat(7,minmax(48px,1fr)); gap:8px; overflow-x:auto; padding:2px 0 7px; scrollbar-width:thin; }
.streak-day { display:grid; min-height:100px; justify-items:center; align-content:center; gap:2px; padding:8px 3px; border:1px solid #f4e4eb; border-radius:16px; background:linear-gradient(180deg,#fff9fb,#fff); color:#8e7180; }
.streak-day img { width:46px; height:46px; object-fit:contain; }.streak-day strong { font-size:10px; }.streak-day small { color:#bd879a; font-size:9px; }.streak-day.done { border-color:#ffcbdd; background:#fff0f5; color:#df4f82; }.streak-day.today { border:2px solid #ff83a9; background:linear-gradient(180deg,#fff1f5,#fffafd); box-shadow:0 4px 14px #f96f9c25; }.streak-day.locked { opacity:.55; }
.task-checkin-button { display:block; width:min(100%,390px); min-height:46px; margin:8px auto 0; border:0; border-radius:99px; background:linear-gradient(100deg,#ff719d,#f5377b); box-shadow:0 7px 18px #f8588c33; color:#fff; font:inherit; font-size:14px; font-weight:900; cursor:pointer; }.task-checkin-button:disabled { background:linear-gradient(100deg,#f6b7ca,#e5a4b7); box-shadow:none; cursor:default; }
.task-time-note { margin:8px 0 0; color:#ae99a2; font-size:9px; text-align:center; }
.task-list-section { padding-bottom:11px; }.task-list-heading { margin-bottom:7px; }.task-heading-glyph { display:grid; width:36px; height:36px; place-items:center; border-radius:12px; background:#fff0f5; color:#fa5d92; font-size:22px; }.task-list { display:grid; gap:8px; }.mission-card { display:grid; grid-template-columns:54px 1fr auto; align-items:center; gap:10px; min-height:75px; padding:8px 10px; border:1px solid #f3e8ed; border-radius:17px; background:linear-gradient(110deg,#fff,#fffafd); }.mission-card>img { width:50px; height:50px; object-fit:contain; }.mission-card>div { display:grid; gap:3px; }.mission-card>div strong { color:#563b48; font-size:13px; }.mission-card>div span { color:#f05487; font-size:11px; font-weight:900; }.mission-card button { min-width:92px; min-height:37px; padding:0 13px; border:0; border-radius:99px; background:#ff5b91; color:#fff; font:inherit; font-size:11px; font-weight:850; cursor:pointer; }.mission-card button.complete { background:#fff0f5; color:#e65788; }
.task-share-note { margin:8px 2px 0; color:#aa929d; font-size:10px; line-height:1.55; }
.task-transactions { display:grid; gap:7px; }.task-transaction { display:grid; grid-template-columns:1fr auto; gap:3px 10px; padding:11px 12px; border-bottom:1px solid #f5e9ee; }.task-transaction:last-child { border-bottom:0; }.task-transaction strong { color:#644958; font-size:11px; }.task-transaction time,.task-transaction small { color:#a38e98; font-size:9px; }.task-transaction b { grid-column:2; grid-row:1/3; align-self:center; font-size:14px; }.task-transaction b.positive { color:#ed5688; }.task-transaction b.negative { color:#786775; }.task-empty { margin:0; padding:16px; border-radius:14px; background:#fff8fb; color:#a28c96; font-size:11px; text-align:center; }
.task-mall-banner { display:grid; grid-template-columns:58px 1fr auto; align-items:center; gap:9px; min-height:76px; padding:10px 14px; border:1px solid #f5dfe8; border-radius:18px; background:linear-gradient(110deg,#fff0f5,#fffafd); color:#704455; text-decoration:none; }.task-mall-banner img { width:54px; height:54px; object-fit:contain; }.task-mall-banner span { display:grid; gap:3px; }.task-mall-banner strong { font-size:13px; }.task-mall-banner small { color:#a17f8d; font-size:10px; }.task-mall-banner>b { padding:9px 12px; border-radius:99px; background:#ff5b91; color:#fff; font-size:10px; }
.task-login-prompt { width:100%; min-height:38px; border:0; border-radius:99px; background:#ff5b91; color:#fff; font:inherit; font-size:10px; font-weight:800; }
.task-message { position:fixed; z-index:80; right:15px; bottom:calc(75px + env(safe-area-inset-bottom)); left:15px; width:max-content; max-width:calc(100% - 30px); margin:0 auto; padding:0; border-radius:99px; background:#654050; color:white; font-size:11px; }.task-message:not(:empty) { padding:10px 15px; box-shadow:0 6px 20px #41192b33; }
.task-success-dialog { width:min(340px,calc(100vw - 32px)); padding:23px 24px 20px; overflow:hidden; border:1px solid #f5d6e2; border-radius:26px; background:linear-gradient(180deg,#fffafd,#fff1f6); color:#533441; text-align:center; box-shadow:0 25px 85px #3b172b55; }.task-success-dialog::backdrop { background:#3215259c; backdrop-filter:blur(5px); }.task-success-dialog img { width:82px; height:82px; object-fit:contain; }.task-success-confetti { margin:-12px -10px 0; color:#f8a2bc; font-size:14px; }.task-success-dialog h2 { margin:5px 0; font-size:19px; }.task-success-dialog>strong { color:#ef4e86; font-size:26px; }.task-success-dialog p { color:#977582; font-size:11px; }.task-success-dialog>button { width:100%; min-height:42px; border:0; border-radius:99px; background:#ff5b91; color:#fff; font:inherit; font-weight:850; }
.task-center-page .consumer-bottom-nav { position:fixed; z-index:35; right:0; bottom:0; left:0; height:calc(58px + env(safe-area-inset-bottom)); padding:4px 4px env(safe-area-inset-bottom); border-top:1px solid #f2e4e9; background:#fffdfef5; backdrop-filter:blur(18px); }.task-center-page .consumer-bottom-nav a,.task-center-page .consumer-bottom-nav button { display:flex; flex:1; flex-direction:column; align-items:center; justify-content:center; gap:1px; min-width:0; padding:0; color:#88737e; text-decoration:none; font-size:9px; }.task-center-page .consumer-nav-icon { display:grid; width:22px; height:22px; place-items:center; }.task-center-page .consumer-nav-icon svg { width:19px; height:19px; }.task-center-page .consumer-bottom-nav a.active { color:#ff5b91; }
@media(min-width:900px) { .task-main { grid-template-columns:1fr 1fr; align-items:start; gap:16px; }.task-hero,.task-streak-card,.task-list-section,.task-history-section,.task-mall-banner { grid-column:1/-1; }.task-hero { min-height:300px; grid-template-columns:1fr 300px; }.task-streak-card { display:grid; grid-template-columns:1fr 310px; column-gap:20px; align-items:center; }.task-streak-card .task-section-heading { grid-column:1; }.task-streak-days { grid-column:1; }.task-checkin-button,.task-time-note { grid-column:2; grid-row:1; }.task-time-note { align-self:end; margin-bottom:13px; }.task-list-section,.task-history-section { grid-column:span 1; }.task-center-page .consumer-bottom-nav { right:50%; left:50%; width:min(600px,100%); transform:translateX(-50%); border:1px solid #f2e4e9; border-bottom:0; border-radius:18px 18px 0 0; } }
@media(max-width:580px) { .task-topbar { grid-template-columns:42px 1fr 76px; height:54px; padding:0 12px; }.task-main { width:calc(100% - 16px); gap:10px; margin-top:8px; }.task-hero { grid-template-columns:1fr; min-height:210px; padding:16px 14px; border-radius:20px; }.task-hero-art { object-position:59% center; opacity:.82; }.task-hero-copy { width:58%; }.task-hero-copy h2 { font-size:25px; }.task-hero-copy span { max-width:98%; margin-top:8px; padding:6px 9px; font-size:9px; }.task-wallet { position:absolute; right:9px; bottom:10px; width:132px; gap:2px; padding:8px; border-radius:15px; }.task-wallet-title { gap:4px; font-size:9px; }.task-wallet-title img { width:25px; height:25px; }.task-wallet>strong { padding-left:29px; font-size:24px; }.task-wallet>a { margin-left:28px; padding:5px 7px; font-size:8px; }.task-streak-card,.task-list-section,.task-history-section { padding:12px; border-radius:18px; }.task-section-heading { margin-bottom:9px; }.task-section-heading>div>img { width:31px; height:31px; }.task-section-heading h2 { font-size:14px; }.task-section-heading h2 strong { font-size:19px; }.task-section-heading>span { font-size:9px; }.task-streak-days { grid-template-columns:repeat(7,minmax(42px,1fr)); gap:5px; }.streak-day { min-height:77px; border-radius:12px; }.streak-day img { width:34px; height:34px; }.streak-day strong { font-size:9px; }.streak-day small { font-size:8px; }.task-checkin-button { min-height:42px; margin-top:5px; font-size:12px; }.task-time-note { margin-top:6px; }.mission-card { grid-template-columns:46px 1fr auto; gap:7px; min-height:64px; padding:6px 7px; border-radius:14px; }.mission-card>img { width:44px; height:44px; }.mission-card>div strong { font-size:11px; }.mission-card>div span { font-size:10px; }.mission-card button { min-width:76px; min-height:32px; padding:0 9px; font-size:9px; }.task-mall-banner { grid-template-columns:43px 1fr auto; min-height:65px; gap:6px; padding:8px; }.task-mall-banner img { width:42px; height:42px; }.task-mall-banner strong { font-size:11px; }.task-mall-banner small { font-size:9px; }.task-mall-banner>b { padding:8px 9px; font-size:8px; } }