.streak-strip { margin:-2px 0 10px; padding:9px 12px; border:1px solid rgba(101,214,174,.18); background:rgba(101,214,174,.035) }
.streak-strip-head { display:flex; align-items:center; justify-content:space-between; gap:12px }
.streak-strip-head span { color:var(--ok); font-size:9px; font-weight:800; letter-spacing:1px }
.streak-strip-head b { color:var(--muted-2); font-size:9px; text-align:right }
.streak-strip-title { display:flex; align-items:center; gap:7px; flex:none }
.streak-shield { padding:2px 5px; border:1px solid rgba(245,234,214,.14); color:var(--muted); font:700 8px ui-monospace,SFMono-Regular,Menlo,monospace; font-style:normal }
.streak-shield.on { border-color:rgba(101,214,174,.5); color:var(--ok); background:rgba(101,214,174,.08) }
.streak-days { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; margin-top:7px }
.streak-days span { padding:4px 0; border:1px solid rgba(245,234,214,.1); color:var(--muted); font-size:9px; text-align:center }
.streak-days span.active { border-color:rgba(101,214,174,.42); color:var(--ok); background:rgba(101,214,174,.09) }
.streak-days span.protected { border-style:dashed; border-color:rgba(240,180,41,.58); color:var(--accent); background:rgba(240,180,41,.08) }
.streak-days span.today { outline:1px solid var(--accent); outline-offset:1px }
.streak-milestone { margin:12px 0; padding:12px 14px; border:1px solid rgba(101,214,174,.55); background:rgba(101,214,174,.1); text-align:left }
.streak-milestone.hidden { display:none }
.streak-milestone b,.streak-milestone span { display:block }
.streak-milestone b { color:var(--ok); font-size:17px }
.streak-milestone span { margin-top:4px; color:var(--muted-2); font-size:13px }