#v-cycle { background: #FFF9FA; }
.cyc-wheel { width: 232px; }
#v-cycle .cyc-wrap { padding: 4px 14px 28px; }
.cyc-hero { text-align: center; padding: 4px 0 0; }
.cyc-wheel { width: 232px; height: 232px; display: block; margin: 0 auto; }
.cyc-sub { font-size: 13.5px; color: #9A7F8A; margin: 10px 0 0; }
.cyc-phase { background: #fff; border-radius: 18px; padding: 14px 16px; margin: 14px 0 0; box-shadow: 0 6px 18px rgba(190,150,160,.10); }
.cyc-phase-t { font-size: 15px; font-weight: 700; color: #4A3B42; }
.cyc-phase-d { font-size: 13.5px; line-height: 1.45; color: #7C6B74; margin-top: 5px; }
.cyc-row { display: flex; gap: 10px; margin-top: 12px; }
.cyc-card { flex: 1; background: #fff; border-radius: 16px; padding: 12px 14px; box-shadow: 0 6px 18px rgba(190,150,160,.10); }
.cyc-card-n { font-size: 20px; font-weight: 700; color: #4A3B42; }
.cyc-card-l { font-size: 12px; color: #9A7F8A; margin-top: 3px; }
.cyc-cal { background: #fff; border-radius: 18px; padding: 12px; margin-top: 12px; box-shadow: 0 6px 18px rgba(190,150,160,.10); }
.cyc-cal-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.cyc-cal-t { font-size: 14px; font-weight: 700; color: #4A3B42; text-transform: capitalize; }
.cyc-nav { border: 0; background: #FFF0F3; color: #B5697C; border-radius: 12px; width: 34px; height: 34px; font-size: 16px; }
.cyc-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; }
.cyc-dow { font-size: 10.5px; color: #B9A3AC; padding: 4px 0; }
.cyc-day { aspect-ratio: 1; border-radius: 50%; border: 1.5px solid #F0E4E8; background: #fff; color: #4A3B42; font-size: 12.5px; font-weight: 600; position: relative; }
.cyc-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.cyc-chip { border: 1.5px solid #F0E4E8; background: #fff; color: #6B5560; border-radius: 14px; padding: 8px 12px; font-size: 13px; }
.cyc-chip.on { background: #FDE7EE; border-color: #F2B8C8; color: #A6526A; font-weight: 600; }
.cyc-legend { display: flex; gap: 10px; flex-wrap: wrap; font-size: 11px; color: #9A7F8A; margin-top: 10px; }
.cyc-btns { display: flex; gap: 8px; margin-top: 14px; }
.cyc-btn { flex: 1; padding: 12px; border-radius: 14px; font-size: 13px; font-weight: 600; border: 0; }
.cyc-btn.p { background: linear-gradient(135deg,#F7A8BE,#C9BEF5); color: #fff; }
.cyc-btn.s { background: #fff; color: #6B5560; border: 1.5px solid #F0E4E8; }
.cyc-note { font-size: 11px; color: #B9A3AC; margin-top: 14px; line-height: 1.5; }

.cyc-tabs { position: sticky; top: 0; z-index: 5; background: #FFF9FA; display: flex; gap: 4px; padding: 8px 0 10px; }
.cyc-tab-b { flex: 1; border: 0; background: transparent; font-size: 11.5px; color: #9A7F8A; padding: 8px 2px; border-radius: 10px; }
.cyc-tab-b.on { background: #fff; color: #4A3B42; font-weight: 700; box-shadow: 0 3px 10px rgba(190,150,160,.14); }
.cyc-sec { display: none; }
#cycBox[data-tab="today"] .cyc-sec[data-s="today"],
#cycBox[data-tab="cal"] .cyc-sec[data-s="cal"],
#cycBox[data-tab="diary"] .cyc-sec[data-s="diary"],
#cycBox[data-tab="stats"] .cyc-sec[data-s="stats"],
#cycBox[data-tab="prof"] .cyc-sec[data-s="prof"] { display: block; }
#v-cycle .sec1, #v-cycle .sec2, #v-cycle .sec3, #v-cycle .sec4, #v-cycle .sec5 { display: none; }
#cycBox[data-tab="today"] .sec1 { display: block; }
#cycBox[data-tab="cal"] .sec2 { display: block; }
#cycBox[data-tab="diary"] .sec3 { display: block; }
#cycBox[data-tab="stats"] .sec4 { display: block; }
#cycBox[data-tab="prof"] .sec5 { display: block; }

.cyc-banner { background: #FFF3F5; border: 1.5px dashed #F0C3CD; border-radius: 16px; padding: 12px 14px; margin-top: 12px; }
.cyc-banner b { font-size: 14.5px; color: #4A3B42; }
