/* Ciclo mestruale (D28) nella vetrina e nel passo 03: colori presi dal testo intorno, così vale su sfondi chiari e scuri. */
.cycle-show{display:grid;gap:14px;min-width:0}
.cycle-show-card{border:1px solid color-mix(in srgb,currentColor 14%,transparent);border-radius:16px;background:color-mix(in srgb,currentColor 4%,transparent);padding:16px 16px 18px;min-width:0}
.cycle-show-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.cycle-show-head strong{font-size:var(--fs-14,14px);font-weight:600}
.cycle-show-head span{font-size:var(--fs-11,11px);font-weight:600;color:#c084fc}
.cycle-show-day{font-size:var(--fs-12,12px);margin-top:10px;color:color-mix(in srgb,currentColor 65%,transparent)}
.cycle-show-day b{font-size:var(--fs-17,17px);font-weight:600;color:currentColor}
.cycle-show-tip{font-size:var(--fs-11,11px);line-height:1.65;margin-top:6px;color:color-mix(in srgb,currentColor 65%,transparent)}
.cycle-show-btn{display:inline-flex;align-items:center;margin-top:12px;min-height:34px;padding:0 14px;border-radius:10px;border:1px solid color-mix(in srgb,currentColor 18%,transparent);font-size:var(--fs-11,11px);font-weight:600}
.cycle-show-chart{margin:0;border:1px solid color-mix(in srgb,currentColor 10%,transparent);border-radius:16px;padding:12px 12px 10px;min-width:0}
.cycle-show-svg{display:block;width:100%;height:auto}
.cycle-show-half{fill:#f472b61f;stroke:#f472b655;stroke-dasharray:3 3}
.cycle-show-halflabel{font-size:var(--fs-9,9px);fill:#f9a8d4;letter-spacing:.3px}
.cycle-show-line{stroke:#c084fc}
.cycle-show-dot{fill:#f472b6;stroke:#0b0b0f;stroke-width:2}
.cycle-show-axis{font-size:var(--fs-9,9px);fill:currentColor;opacity:.55}
.cycle-show-chart figcaption{font-size:var(--fs-10,10px);line-height:1.5;margin-top:6px;color:color-mix(in srgb,currentColor 60%,transparent)}
.cycle-show-note{font-size:var(--fs-10,10px);letter-spacing:.2px;color:color-mix(in srgb,currentColor 55%,transparent)}