html[data-design] #modal.streakMode{width:min(440px,calc(100vw - 24px));max-width:calc(100vw - 24px);height:auto;max-height:min(800px,calc(100dvh - max(12px,env(safe-area-inset-top)) - max(12px,env(safe-area-inset-bottom))));margin:auto;padding:0;overflow:hidden;border:1px solid var(--border);border-radius:26px;background:var(--surface);box-sizing:border-box}
html[data-design] #modal.streakMode #modalBody{padding:0;display:flex;flex-direction:column;min-height:0;max-height:inherit;overflow:hidden}
html #modal .streakSheet{height:auto;max-height:inherit;min-height:0;width:100%;display:flex;flex-direction:column;background:var(--surface)}
html #modal .streakHeader{display:flex;justify-content:space-between;align-items:center;padding:20px;gap:12px;flex:0 0 auto}
html #modal .streakHeader h1{order:0;text-align:left;font:600 24px/1.25 Outfit,sans-serif;color:var(--text)}
html #modal .streakHeader>.close{order:1;display:grid;place-items:center;width:40px;height:40px;min-width:40px;padding:11px;background:var(--surface2);color:var(--sub);border:1px solid var(--border);border-radius:14px}
html #modal .streakHeader>.close>.uiIcon{width:18px;height:18px}.streakHeader>span{display:none}
html #modal .streakTabs{gap:4px;padding:4px;margin:0 20px 4px;border:1px solid var(--border);border-radius:16px;background:var(--surface2);flex:0 0 auto}
html #modal .streakTabs>button{min-height:40px;padding:9px 7px;margin:0;border:1px solid transparent;border-radius:12px;color:var(--sub);font-size:12px;font-weight:600;line-height:1.5;letter-spacing:0;background:transparent;white-space:normal}
html #modal .streakTabs>button[aria-selected=true]{background:var(--surface);color:var(--green);border-color:var(--border);box-shadow:0 2px 5px #0000000c}
html #modal .streakContent{padding:16px 20px 22px;min-height:0;flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.streakContent::-webkit-scrollbar{display:none;width:0;height:0}
html #modal .streakHero{padding:18px 16px;border:1px solid var(--border);border-radius:20px;background:var(--surface2);gap:12px;align-items:center}
html #modal .streakHero strong{font:600 44px/1 Outfit,sans-serif;letter-spacing:-1px;color:var(--text);font-variant-numeric:tabular-nums}
html #modal .streakHero h2{font:600 17px/1.4 Outfit,sans-serif;color:var(--text);margin:7px 0 0}
html #modal .streakHero p{font-size:12px;line-height:1.6;color:var(--sub);margin:9px 0 0;max-width:220px}
.streakFlameBadge{width:70px;height:76px;display:grid;place-items:center;flex:none;border-radius:24px;background:color-mix(in srgb,var(--accent) 10%,var(--surface));border:1px solid color-mix(in srgb,var(--accent) 20%,var(--border))}
.streakFlameBadge>.headerSymbol{width:43px;height:47px;display:block;filter:none}
html #modal .streakMessage{padding:0 2px;margin:15px 0 20px;gap:9px;border:0;background:none;border-radius:0;color:var(--sub);font-size:12px;line-height:1.7}
html #modal .streakMessage>.uiIcon{width:18px;height:18px;color:var(--green);flex:none}
.streakCalendarCard{padding:17px 14px 15px;border:1px solid var(--border);border-radius:20px;background:var(--surface)}
html #modal .streakMonthTitle{margin:0 0 15px;gap:10px;align-items:center}.streakMonthTitle h2::first-letter{text-transform:uppercase}
html #modal .streakMonthTitle h2{font:600 17px/1.4 Outfit,sans-serif;text-transform:none;color:var(--text)}
html #modal .streakMonthTitle>div{gap:5px;flex:none}html #modal .streakMonthTitle button{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--border);border-radius:11px;background:var(--surface2);padding:8px;color:var(--sub)}
html #modal .streakMonthTitle button>.uiIcon{width:16px;height:16px}html #modal .streakMonthTitle button:disabled{opacity:.4}
html #modal .streakMonthStats{display:flex;flex-wrap:wrap;gap:9px 16px;margin:0 0 18px}
html #modal .streakMonthStats>span{display:flex;align-items:center;gap:5px;padding:0;border:0;border-radius:0;background:none}
html #modal .streakMonthStats .uiIcon{width:14px;height:14px;color:var(--green)}html #modal .streakMonthStats b{font-size:12px;font-weight:600;color:var(--text)}html #modal .streakMonthStats small{font-size:10px;color:var(--sub)}
html #modal .streakCalendar{padding:0;border:0;border-radius:0;background:none}
html #modal .streakWeekdays,html #modal .streakDates{grid-template-columns:repeat(7,minmax(0,1fr));gap:6px 5px}
html #modal .streakWeekdays{margin:0 0 10px;color:var(--sub);font-size:11px;font-weight:500;line-height:1.5}
html #modal .streakDates>span{width:100%;max-width:40px;height:auto;aspect-ratio:1;min-height:30px;border-radius:11px;font-size:12px;font-weight:500;color:var(--text);background:var(--surface2);font-variant-numeric:tabular-nums;justify-self:center;outline:none;box-sizing:border-box}
html #modal .streakDates>span:empty{background:none}
html #modal .streakDates>.practiced{background:var(--green);color:var(--new-primary-ink);font-weight:700}
html #modal .streakDates>.frozen{background:var(--blueTint);border:1px solid color-mix(in srgb,var(--blue) 45%,var(--border));color:var(--blue)}
html #modal .streakDates>.frozen>.uiIcon{width:9px;height:9px;right:2px;bottom:2px}
html #modal .streakDates>.isToday{outline:none}
html #modal .streakDates>.future{opacity:1;color:var(--sub);background:color-mix(in srgb,var(--surface2) 40%,var(--surface))}
.streakCalendarLegend{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 12px;margin-top:17px;padding-top:13px;border-top:1px solid var(--border)}.streakCalendarLegend>span{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--sub)}.streakCalendarLegend i{width:8px;height:8px;border-radius:3px;display:block}.legendPracticed{background:var(--green)}.legendProtected{background:var(--blue)}.legendToday{border:1px solid var(--green)}
html #modal .streakSectionTitle{font:600 17px/1.4 Outfit,sans-serif;margin:22px 0 12px;color:var(--text)}
html #modal .streakMilestone{padding:16px;border:1px solid var(--border);border-radius:18px;background:var(--surface2)}html #modal .streakMilestone>div>.uiIcon{width:30px;height:30px;color:var(--green)}html #modal .streakMilestone strong{font:600 17px/1.4 Outfit,sans-serif}html #modal .streakMilestone small{font-size:12px;color:var(--sub)}html #modal .streakMilestone progress{height:5px;margin:16px 0 12px}html #modal .streakMilestoneMarks{gap:8px}html #modal .streakMilestoneMarks span{font-size:11px}html #modal .streakMilestoneMarks .uiIcon{width:15px;height:15px}
html #modal .streakProtection{padding:15px 14px;gap:12px;border:1px solid var(--border);border-radius:18px;background:var(--surface2);color:var(--text)}html #modal .streakProtection>.uiIcon:first-child{width:28px;height:28px;color:var(--blue)}html #modal .streakProtection strong{font-size:13px;line-height:1.5;white-space:normal}html #modal .streakProtection small{line-height:1.6;color:var(--sub)}
html #modal .streakFooter{padding:14px 20px 18px;flex:0 0 auto;border-top:1px solid var(--border);background:var(--surface)}html #modal .streakFooter>.primary{min-height:48px;padding:12px;border-radius:16px;font-size:14px;letter-spacing:0;white-space:normal}
@media(max-width:350px){html #modal .streakHeader{padding:16px}html #modal .streakContent{padding:14px 14px 18px}html #modal .streakTabs{margin-left:14px;margin-right:14px}html #modal .streakHero strong{font-size:38px}.streakFlameBadge{width:56px;height:64px;border-radius:19px}.streakFlameBadge>.headerSymbol{width:36px;height:40px}.streakCalendarCard{padding:14px 10px}.streakCalendarLegend{gap:8px}html #modal .streakFooter{padding:12px 16px 16px}}
@media(max-height:550px){html #modal .streakHeader{padding-top:12px;padding-bottom:12px}html #modal .streakFooter{padding-top:10px;padding-bottom:12px}}

html #modal .streakHero>div{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:9px;align-items:baseline;min-width:0}html #modal .streakHero h2{margin:0}html #modal .streakHero p{grid-column:1/-1}