:root { color-scheme: dark; --pink: #ff91b6; --pink-deep: #c95b9d; --ink: #250e28; --panel: rgba(21, 10, 27, .82); }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { width: 100%; max-width: 100%; overflow-x: clip; background: var(--ink); scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
body { width: 100%; max-width: 100%; min-width: 320px; margin: 0; overflow-x: clip; background: var(--ink); color: #fff; font-family: "PingFang TC", "Noto Sans TC", -apple-system, BlinkMacSystemFont, sans-serif; }
button { color: inherit; font: inherit; }
button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.activity-page { position: relative; width: min(100%, 375px); min-height: 1277px; margin: 0 auto; overflow: clip; contain: paint; background: radial-gradient(circle at 75% 6%, #57205b 0, transparent 25%), var(--ink); }
.activity-page::before, .activity-page::after { position: absolute; z-index: 0; color: #f06aaf; content: "✦  ·  ❀"; font-size: 24px; letter-spacing: 20px; opacity: .65; pointer-events: none; }
.activity-page::before { top: 318px; left: -4px; transform: rotate(-18deg); }
.activity-page::after { top: 1040px; right: -38px; transform: rotate(12deg); }
.hero-section { position: relative; height: 375px; overflow: hidden; background: linear-gradient(125deg, #170c25 12%, #492052 58%, #120b18); }
.hero-art { position: absolute; inset: 0; opacity: .86; background: url("./assets/hero.png") 112% center / auto 142% no-repeat; }
.hero-section::after { position: absolute; inset: 0; background: linear-gradient(90deg, #1a0d24 0%, rgba(26,13,36,.46) 47%, rgba(26,13,36,0) 100%); content: ""; }
.status-bar { position: absolute; z-index: 2; top: 0; left: 0; display: flex; align-items: center; justify-content: space-between; width: 100%; height: 44px; padding: 0 17px 0 21px; pointer-events: none; }
.status-time { width: 54px; font-family: -apple-system, BlinkMacSystemFont, sans-serif; font-size: 14px; font-weight: 600; line-height: 17px; text-align: center; letter-spacing: 0; }
.status-icons { display: flex; align-items: center; gap: 5px; height: 12px; }
.status-icons img { display: block; flex: 0 0 auto; object-fit: contain; }
.status-icons img:nth-child(1) { width: 17px; height: 11px; }
.status-icons img:nth-child(2) { width: 16px; height: 11px; }
.status-icons img:nth-child(3) { width: 25px; height: 12px; }
.icon-button { position: absolute; z-index: 3; top: 43px; width: 34px; height: 34px; padding: 0; border: 1px solid rgba(255,255,255,.42); border-radius: 50%; background: rgba(29,11,34,.34); cursor: pointer; }
.back-button { left: 14px; font-size: 32px; line-height: 24px; }
.hero-copy { position: absolute; z-index: 2; top: 93px; left: 22px; text-shadow: 0 0 12px #ff75b4; }
.eyebrow { margin: 0 0 8px; font-family: Georgia, serif; font-size: 13px; }
.hero-copy h1 { margin: 0; font-family: Georgia, "Noto Serif TC", serif; font-size: 31px; line-height: 1.15; letter-spacing: 1px; }
.hero-subtitle { margin: 13px 0 0; font-family: Georgia, serif; font-size: 14px; }
.rose-panel, .checkin-section, .task-panel, .invite-section { position: relative; z-index: 1; border: 1px solid rgba(255, 126, 175, .7); border-radius: 12px; background: linear-gradient(110deg, rgba(72, 24, 62, .9), var(--panel) 75%); box-shadow: inset 0 0 22px rgba(236, 81, 155, .16), 0 8px 24px rgba(0,0,0,.18); }
.rose-panel { display: flex; align-items: center; gap: 17px; height: 111px; margin: -1px 11px 0; padding: 12px 18px; }
.rose-copy h2 { margin: 0; font-family: Georgia, serif; font-size: 17px; font-weight: 500; }
.rose-count { display: flex; align-items: baseline; gap: 6px; margin-top: 1px; }
.rose-count output { font-size: 34px; line-height: 1; }
.rose-count span { font-size: 15px; }
.rose-copy p { margin: 4px 0 0; color: #e8c9dc; font-size: 10px; }
.tasks-section { position: relative; z-index: 1; margin: 27px 11px 0; }
.section-heading { display: flex; align-items: center; height: 45px; padding: 0 3px; }
.heading-mark { width: 47px; margin-right: 7px; font-size: 36px; filter: drop-shadow(0 0 5px #ff6ead); transform: rotate(-9deg); }
.section-heading h2 { margin: 0; font-family: Georgia, "Noto Serif TC", serif; font-size: 22px; text-shadow: 0 0 6px #ff8ebd; }
.gradient-button { border: 0; border-radius: 999px; background: linear-gradient(100deg, #be5fe1, #ff8d82); box-shadow: 0 4px 15px rgba(231, 92, 181, .25); cursor: pointer; }
.checkin-section { min-height: 375px; margin: 55px 11px 0; padding: 34px 15px 21px; text-align: center; }
.checkin-section h2 { margin: 0; font-family: Georgia, serif; font-size: 29px; text-shadow: 0 0 8px #ff82b7; }
.checkin-section > p { margin: 3px 0 19px; color: #f3dbe8; font-size: 13px; }
.checkin-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; overflow: hidden; }
.checkin-days span { min-width: 42px; padding: 7px 2px 8px; border-radius: 8px; background: linear-gradient(#ffd0e4, #ff8eb8); color: #b74b7d; font-size: 10px; line-height: 1.33; }
.checkin-days span b { display: block; color: #9c3068; font-size: 11px; }
.checkin-button { width: 196px; height: 39px; margin-top: 24px; color: #fff; font-size: 16px; }
.tasks-section { margin-top: 43px; }
.task-heading { height: 44px; }
.task-panel { padding: 14px 12px 5px; }
.task-row { display: flex; align-items: center; min-height: 83px; gap: 9px; }
.task-icon { width: 43px; font-size: 29px; text-align: center; }
.task-row > div { min-width: 0; flex: 1; text-align: left; }
.task-row strong, .task-row small { display: block; }
.task-row strong { font-size: 14px; font-weight: 500; }
.task-row small { margin-top: 5px; color: #ddc0d4; font-size: 10px; }
.task-button { width: 74px; height: 37px; border: 0; border-radius: 999px; background: linear-gradient(100deg, #ff8e83, #cb5bd5); font-size: 13px; cursor: pointer; }
.task-button.secondary { border: 1px solid rgba(255, 141, 190, .3); background: rgba(255, 119, 171, .09); color: #e6aaca; }
.invite-section { display: flex; align-items: center; justify-content: space-between; min-height: 129px; margin: 28px 14px 30px; padding: 19px 17px 17px 22px; overflow: hidden; background: radial-gradient(circle at 75% 30%, rgba(220, 73, 141, .5), transparent 38%), linear-gradient(110deg, #251329, #4d173d); }
.invite-section h2 { margin: 0 0 14px; font-family: Georgia, serif; font-size: 19px; line-height: 1.45; }
.invite-button { width: 170px; height: 35px; font-size: 13px; }
.invite-art { font-size: 67px; filter: drop-shadow(0 0 12px #ff8cbe); transform: rotate(-12deg); }
.toast { position: fixed; z-index: 10; left: 50%; bottom: 30px; max-width: calc(100% - 40px); padding: 10px 14px; border-radius: 8px; background: #fff; color: #241126; font-size: 12px; opacity: 0; pointer-events: none; transform: translate(-50%, 8px); transition: .2s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.sr-only { position: fixed; width: 1px; height: 1px; padding: 0; margin: 0; overflow: clip; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: normal; border: 0; }
@media (min-width: 700px) { .activity-page { box-shadow: 0 0 55px rgba(0,0,0,.5); } }

/* Figma slice layout: the exported art is used only for its matching section. */
.activity-page { min-height: max(999px, 100dvh); background: #250e28; }
.activity-page::before, .activity-page::after { display: none; }
.hero-section { height: 293px; background: #170b20; }
.hero-art { opacity: 1; background: url("./assets/slices/hero@3x.png") center top / 100% auto no-repeat; }
.hero-section::after { background: linear-gradient(90deg, rgba(14,7,21,.78) 0%, rgba(14,7,21,.35) 47%, rgba(14,7,21,0) 100%), linear-gradient(0deg, rgba(14,7,21,.62), transparent 26%); }
.hero-copy { top: 0; left: 24px; width: 190px; height: 230px; }
.eyebrow { position: absolute; top: 79px; left: 0; margin: 0; line-height: 14px; }
.hero-copy h1 { position: absolute; top: 101px; left: 0; margin: 0; font-family: "Noto Serif TC", "Songti TC", STSong, serif; font-size: 28px; line-height: 35.94px; letter-spacing: 2px; white-space: nowrap; }
.hero-subtitle { position: absolute; top: 185px; left: 0; margin: 0; font-size: 12px; line-height: 18px; white-space: nowrap; }
.icon-button { top: 35px; width: 40px; height: 40px; border: 0; background: transparent; }
.back-button { left: 11px; background: url("./assets/slices/back@3x.png") center/40px 40px no-repeat; font-size: 0; }
.rose-panel { display: block; height: 110px; margin: -59px 13px 0; padding: 0; border: 0; border-radius: 13px; background: url("./assets/slices/rose-panel-combined@3x.png") center/100% 100% no-repeat; box-shadow: none; }
.rose-copy { position: absolute; top: 10px; left: 116px; margin: 0; }
.rose-copy h2 { font-family: inherit; font-size: 15px; }
.rose-count { margin-top: 8px; }
.rose-count output { font-size: 33px; }
.rose-copy p { font-size: 10px; }
.section-heading { height: 41px; padding: 0; }
.heading-mark { width: 72px; height: 43px; margin-right: 3px; font-size: 0; transform: none; }
.heading-mark img { display: block; width: 72px; height: 43px; object-fit: contain; }
.heading-mark img { mix-blend-mode: lighten; }
.section-heading h2 { font-size: 18px; letter-spacing: 1.2px; }
.checkin-section { height: 254px; min-height: 254px; margin: 30px 13px 0; padding: 0; border: 0; border-radius: 0; background: url("./assets/slices/checkin-panel-combined@3x.png") center/100% 100% no-repeat; box-shadow: none; }
.checkin-section h2 { position: absolute; z-index: 1; top: 19px; right: 0; left: 0; margin: 0; font-family: "Noto Serif TC", "Songti TC", STSong, serif; font-size: 24px; line-height: 36px; }
.checkin-section > p { position: absolute; z-index: 1; top: 47px; right: 0; left: 0; margin: 0; font-size: 10px; line-height: 23px; }
.checkin-days { position: absolute; z-index: 1; top: 91px; left: 5.44%; display: grid; width: 94%; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3.9px; overflow: hidden; }
.checkin-days span { position: relative; min-width: 0; width: auto; height: 91px; padding: 0; overflow: hidden; border-radius: 0; background: none; color: #b94672; font-size: 9px; line-height: 1; }
.checkin-days .checkin-card-art { position: absolute; z-index: 0; inset: 0; display: block; width: 100%; height: 91px; margin: 0; object-fit: fill; }
.checkin-days em, .checkin-days small, .checkin-days b { position: absolute; z-index: 2; right: 0; left: 0; display: block; font-style: normal; text-align: center; }
.checkin-days em { top: 5px; font-size: 9px; }
.checkin-days small { top: 18px; font-size: 9px; }
.checkin-days .checkin-rose { position: absolute; z-index: 1; top: 29px; left: 50%; display: block; width: 30px; height: 32px; object-fit: contain; transform: translateX(-50%); }
.checkin-days b { top: 63px; color: #923557; font-size: 10px; font-weight: 500; text-shadow: 0 0 1.4px #ff92ba; }
.checkin-button { position: absolute; z-index: 1; top: 195px; left: 50%; width: 195px; height: 36px; margin: 0; transform: translateX(-50%); font-size: 14px; }
.tasks-section { margin: 22px 13px 0; }
.task-heading { height: 40px; }
.task-heading .heading-mark { width: 59px; height: 53px; margin-left: 8px; margin-right: 1px; }
.task-heading .heading-mark img { width: 48px; height: 53px; }
.task-heading h2 { margin-left: -17px; font-family: "Noto Serif TC", "Songti TC", STSong, serif; font-size: 18px; }
.task-panel { height: 140px; padding: 9px 11px 0; border: 0; border-radius: 12px; background: url("./assets/slices/task-panel-combined@3x.png") center/100% 100% no-repeat; box-shadow: none; }
.task-row { min-height: 61px; gap: 7px; }
.task-icon { width: 42px; height: 42px; font-size: 0; }
.task-icon img { display: block; width: 39px; height: 42px; object-fit: contain; }
.task-row strong { font-size: 12px; }
.task-row small { margin-top: 2px; font-size: 9px; }
.task-row .inline-rose { display: inline-block; width: 10px; height: 14px; margin: -3px 2px -3px 1px; object-fit: contain; vertical-align: middle; }
.task-button { width: 70px; height: 31px; font-size: 12px; }
.invite-section { min-height: 125px; height: 125px; margin: 21px 15px 20px; padding: 0; border: 0; border-radius: 12px; background: url("./assets/slices/invite-panel-combined@3x.png") center/100% 100% no-repeat; box-shadow: none; }
.invite-section h2 { position: absolute; top: 13px; left: 15px; width: 169px; margin: 0; font-family: "Noto Serif TC", "Songti TC", STSong, serif; font-size: 17px; line-height: 25.22px; }
.invite-button { position: absolute; top: 76px; left: 10px; width: 166px; height: 35px; font-size: 12px; }
.invite-art { display: none; }