/* Utility destinations are real pages in the app, with their own safe-area header. */
html[data-design] #modal:has(.appUtilityPage){position:fixed;inset:0!important;margin:0!important;padding:0!important;width:100%!important;max-width:none!important;height:100dvh!important;max-height:none!important;min-height:0!important;border:0!important;border-radius:0!important;background:var(--bg)!important;box-shadow:none!important;overflow:hidden!important}
html[data-design] #modal:has(.appUtilityPage)::backdrop{background:var(--bg);backdrop-filter:none}
html[data-design] #modal:has(.appUtilityPage) #modalBody{height:100%!important;max-height:none!important;min-height:0!important;padding:0!important;overflow:hidden}
html[data-design] #modal .appUtilityPage{display:flex;flex-direction:column;height:100%!important;min-height:0!important;max-height:none!important;width:100%;max-width:720px;padding:0!important;margin:auto;overflow:hidden;background:var(--bg)}
html #modal .utilityHeader{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:12px;flex:none;padding:calc(12px + var(--app-safe-top)) max(18px,var(--app-safe-right)) 14px max(18px,var(--app-safe-left));border-bottom:1px solid var(--border);background:var(--bg);margin:0}
html #modal .utilityHeader h1{font:650 21px/1.3 Outfit,sans-serif;text-align:center;letter-spacing:0;margin:0;padding:0;color:var(--text)}
html #modal .utilityBack{display:grid;place-items:center;width:44px;height:44px;padding:11px;border:0;border-radius:14px;color:var(--sub);background:var(--surface)}
html #modal .utilityBack svg{width:22px;height:22px}.utilityHeader>span{width:44px}
html #modal .utilityBalance{display:flex;align-items:center;justify-content:center;gap:6px;background:transparent;border:0;color:#55cff5;padding:5px;min-height:44px;font-size:16px}.utilityBalance:disabled{opacity:1!important}.crystalIcon{display:inline-block;width:23px;height:27px;flex:none;vertical-align:middle}.utilityScroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:22px max(18px,var(--app-safe-right)) calc(28px + var(--app-safe-bottom)) max(18px,var(--app-safe-left))}
.utilityKicker{display:block;font-size:11px;text-transform:uppercase;letter-spacing:1.4px;font-weight:700;color:var(--green);margin-bottom:9px}.crystalShopIntro{display:flex;align-items:center;gap:14px;padding:12px 0 26px}.crystalShopIntro h2,.questJourneyHero h2{font:650 29px/1.16 Outfit,sans-serif;letter-spacing:-.5px;margin:0 0 12px}.crystalShopIntro p,.shopEarn p{font-size:14px;line-height:1.6;color:var(--sub);margin:0}.shopCrystalHero{display:grid;place-items:center;flex:0 0 85px;width:85px;height:100px;background:radial-gradient(ellipse,#4fc3ee33,transparent 70%)}.shopCrystalHero svg{width:61px;height:75px;filter:drop-shadow(0 12px 8px #06344855);animation:utilityFloat 4s ease-in-out infinite}.shopCollection>h2,.questJourneyDay h2{font:600 19px/1.4 Outfit,sans-serif;margin:8px 0 18px}.crystalProduct{display:grid;grid-template-columns:76px 1fr;gap:16px;padding:21px;border:1px solid var(--border);border-bottom-width:4px;border-radius:24px;background:var(--surface)}.crystalProductArt{position:relative;display:grid;place-items:center;width:76px;height:86px;color:var(--green);background:linear-gradient(145deg,#3ab8c42b,#59d9ed12);border-radius:24px}.crystalProductArt>svg{width:58px;height:58px}.crystalProductArt>span{position:absolute;bottom:-5px;right:-3px;background:var(--surface2);border-radius:50%;padding:6px;color:#f5c46d}.crystalProductArt>span svg{width:22px;height:22px}.crystalProduct h3{font-size:20px;line-height:1.3;margin:0 0 8px}.crystalProduct p{font-size:14px;line-height:1.6;color:var(--sub);margin:0 0 10px}.crystalProduct small{font-size:12px;color:var(--green)}html #modal .crystalBuy{grid-column:1/-1;display:flex;justify-content:center;align-items:center;gap:9px;min-height:52px;width:100%;font-size:16px;letter-spacing:0;text-transform:none}.crystalBuy>span{margin-left:8px}.crystalShortfall{grid-column:1/-1;text-align:center;margin:0!important}.shopEarn{display:flex;gap:16px;padding:26px 0;margin-top:14px}.shopEarnArt{display:grid;place-items:center;flex:none;width:66px;height:66px;border-radius:22px;background:#eac7741a;color:#edc775}.shopEarnArt svg{width:42px;height:42px}.shopEarn h2{font-size:18px;line-height:1.35;margin:0 0 8px}.shopEarn button{display:flex;align-items:center;gap:8px;min-height:44px;margin-top:8px;color:var(--green)}.crystalFootnote{text-align:center;color:var(--sub);font-size:11px;line-height:1.5}
.questJourneyHero{display:flex;position:relative;align-items:center;gap:8px;padding:25px 20px;background:linear-gradient(140deg,#38aa9525,#5da6c915);border:1px solid var(--border);border-radius:26px;margin-bottom:26px;overflow:hidden}.questJourneyHero>div:first-child{flex:1;min-width:0;z-index:1}.questJourneyHero h2{font-size:27px}.questJourneyHero p{font-size:13px;color:var(--sub);margin:0 0 14px}.questJourneyChang{flex:none;width:104px;height:134px;align-self:flex-end;animation:utilityFloat 5s ease-in-out infinite}.questJourneyChang svg{width:100%;height:100%}.questJourneySegments{display:flex;gap:5px}.questJourneySegments span{height:6px;flex:1;border-radius:4px;background:var(--border)}.questJourneySegments .filled{background:var(--green)}.questJourneyDay{display:flex;align-items:center;justify-content:space-between;gap:12px}.questJourneyDay>span{display:flex;align-items:center;gap:6px;color:#55cff5;font-size:14px}.journeyQuest{display:flex;align-items:center;gap:14px;padding:21px 0;border-bottom:1px solid var(--border)}.journeyQuestArt{position:relative;flex:0 0 62px;display:grid;place-items:center;width:62px;height:70px;border-radius:21px;background:#caabef1c;color:#c2a2ee}.journeyQuestArt.art-1{background:#f2d0651c;color:#eecf69}.journeyQuestArt.art-2{background:#64bce91c;color:#6ebce4}.journeyQuestArt>svg{width:40px;height:40px}.journeyQuestArt>span{position:absolute;right:-4px;bottom:0;padding:4px;background:var(--green);color:var(--bg);border-radius:50%}.journeyQuestArt>span svg{width:15px;height:15px}.journeyQuestCopy{flex:1;min-width:0}.journeyQuestCopy h3{font-size:17px;line-height:1.4;margin:0 0 12px}.journeyQuestProgress{display:flex;align-items:center;gap:9px}.journeyQuestProgress>div{height:8px;border-radius:8px;overflow:hidden;flex:1;background:var(--border)}.journeyQuestProgress>div>span{display:block;height:100%;border-radius:inherit;background:var(--green);transition:width .3s}.journeyQuestProgress small{font-size:12px;color:var(--sub)}html #modal .journeyQuestCopy button{display:flex;align-items:center;gap:7px;padding:8px 0 0;min-height:36px;font-size:12px;color:var(--green)}html #modal .journeyQuestCopy button:disabled{opacity:1}.journeyQuestReward{display:flex;flex-direction:column;gap:4px;align-items:center;color:#59cbef;align-self:flex-start;font-weight:700;font-size:13px}.journeyQuestReward svg{width:20px;height:23px}.journeyQuest.isComplete .journeyQuestArt{background:#4cdbba24;color:var(--green)}html #modal .questJourneyContinue{width:100%;display:flex;align-items:center;justify-content:center;gap:12px;margin-top:26px;font-size:15px;text-transform:none;letter-spacing:0;min-height:52px}
html #modal .streakJourney .streakHeader{padding-top:calc(12px + var(--app-safe-top));border-bottom:1px solid var(--border);display:grid;grid-template-columns:44px 1fr 44px}.streakJourney .streakHeader h1{font-size:21px!important;text-align:center!important}.streakJourney .streakHeader>.close{order:0!important}.streakJourney .streakHeader>span{display:block}.streakJourney .streakTabs{margin-top:16px!important}.streakJourney .streakContent{padding-bottom:26px!important}.streakJourney .streakHero{background:linear-gradient(145deg,#e9ad6020,#4fdcc018)!important;border:0!important;padding:26px 20px!important}.streakJourney .streakHero strong{font-size:68px!important;color:#efbf75!important}.streakJourney .streakFlameBadge{background:none;border:0;width:94px;height:108px}.streakJourney .streakFlameBadge svg{width:70px;height:85px;filter:drop-shadow(0 6px 12px #ed9b5433);animation:streakBreathe 3s ease-in-out infinite}.streakJourney .streakFooter{flex:none;padding-bottom:calc(16px + var(--app-safe-bottom))!important}.streakJourney .streakDates .practiced{background:linear-gradient(135deg,#60debd,#21a995);border-radius:11px;color:#073c38;font-weight:750}.streakJourney .streakCalendarCard{background:var(--surface)}
@keyframes utilityFloat{50%{transform:translateY(-5px) rotate(2deg)}}@keyframes streakBreathe{50%{transform:scale(1.05) rotate(-2deg)}}
@media(prefers-reduced-motion:reduce){.shopCrystalHero svg,.questJourneyChang,.streakJourney .streakFlameBadge svg{animation:none}}
@media(max-width:350px){.utilityScroll{padding-left:14px;padding-right:14px}.questJourneyChang{width:74px;height:106px}.questJourneyHero{padding:20px 16px}.questJourneyHero h2{font-size:24px}.journeyQuest{gap:10px}.journeyQuestArt{flex-basis:50px;width:50px;height:60px}.journeyQuestCopy h3{font-size:16px}.crystalProduct{padding:16px;gap:12px}}
html[data-design] #modal .utilityHeader,html[data-design] #modal .streakJourney .streakHeader{height:auto!important;min-height:calc(70px + var(--app-safe-top));position:relative!important;inset:auto!important;width:100%;flex:0 0 auto;box-sizing:border-box}
html[data-design] #modal .utilityScroll{padding-top:22px;scrollbar-width:thin;scrollbar-color:var(--border) transparent}
/* Consecutive practice dates join within each calendar week. */
html #modal .streakJourney .streakHero{background:none!important;padding:18px 8px 24px!important;border-radius:0!important}.streakJourney .streakHero>div>strong{display:block!important;color:#f6a66b!important;font-size:72px!important;line-height:1}.streakJourney .streakHero h2{display:block!important;color:#efb274!important;font-size:19px!important;margin-top:9px!important}.streakJourney .streakFlameBadge{filter:drop-shadow(0 8px 0 #d6ad6626)}html #modal .streakJourney .streakMessage{border:1px solid var(--border)!important;padding:16px!important;border-radius:18px!important;background:var(--surface)!important;margin-top:0!important}.streakJourney .streakMessage svg{color:#efac6c!important}.streakJourney .streakCalendarCard{padding:18px 14px!important;border:1px solid var(--border)!important;border-radius:24px!important;background:var(--surface)!important}.streakJourney .streakMonthStats{display:grid!important;grid-template-columns:1fr 1fr;gap:10px!important;margin:12px 0 22px!important;background:none!important;padding:0!important;border:0!important}.streakJourney .streakMonthStats>span{display:grid!important;grid-template-columns:24px auto;gap:4px 8px!important;padding:12px!important;border:1px solid var(--border);border-bottom-width:3px;border-radius:15px;background:var(--surface2)}.streakJourney .streakMonthStats>span>svg{width:23px;height:23px;grid-row:1/3;color:#edb56a;filter:drop-shadow(0 2px 0 #153d4b66)}.streakJourney .streakMonthStats>span:nth-child(2)>svg{color:#69c7ee}.streakJourney .streakMonthStats small{font-size:10px!important;grid-column:2;line-height:1.35}.streakJourney .streakMonthStats b{font-size:18px;line-height:1.2}.streakJourney .streakWeekdays{gap:0!important;font-size:11px!important;margin-bottom:12px!important}.streakJourney .streakDates{gap:8px 0!important}.streakJourney .streakDates>span{width:100%!important;height:39px!important;min-height:39px!important;max-width:none!important;margin:0!important;position:relative;border:0!important;font-size:13px;font-weight:600;border-radius:0!important}.streakJourney .streakDates>span.practiced{background:linear-gradient(180deg,#f18c62,#efb967)!important;color:#153e42!important;box-shadow:inset 0 2px 0 #ffe4b533,inset 0 -3px 0 #ba793b33}.streakJourney .streakDates>span:is(.practiced,.frozen).runStart{border-top-left-radius:22px!important;border-bottom-left-radius:22px!important}.streakJourney .streakDates>span:is(.practiced,.frozen).runEnd{border-top-right-radius:22px!important;border-bottom-right-radius:22px!important}.streakJourney .streakDates>span.frozen{background:#77c4e3!important;color:#0d4058!important}.streakJourney .streakDates>span.isToday:after{content:'';position:absolute;inset:3px;border:2px solid #fff2c3;border-radius:50%;pointer-events:none}.streakJourney .legendPracticed{background:#ecaa6e!important}.streakJourney .streakMilestone{border-radius:18px!important;border-bottom-width:3px!important}.streakJourney .streakProtection{border-radius:18px!important;border-bottom-width:3px!important}

#deleteAccountForm{display:grid;gap:16px;margin-top:24px}#deleteAccountForm>label{font-weight:600;line-height:1.5}#deleteAccountForm>input{width:100%;box-sizing:border-box;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:14px;padding:14px;font:inherit;font-size:16px;min-height:50px}#deleteAccountForm>label:has(input){display:flex;gap:12px;align-items:start;font-weight:400}#deleteAccountConsent{width:22px;height:22px;flex:none;accent-color:var(--green)}#confirmDeleteAccount{background:#f7b1a3;color:#512923;box-shadow:0 4px 0 #b96c5e}#deleteAccountStatus:empty{display:none}