.cycle-months{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:12px}
.cycle-months:has(.cycle-month-summary){grid-template-columns:minmax(0,1fr)}
.cycle-month-summary{align-items:center;gap:12px;padding:8px 10px;border-radius:10px;text-align:left;min-height:48px}
.cycle-month-name{flex:0 0 auto;font-size:14px;color:var(--planner-ink)}
.cycle-selected-days{display:flex;flex-wrap:wrap;gap:5px;min-width:0}
.cycle-mark{display:grid;place-items:center;width:27px;height:27px;flex:none;border-radius:50%;background:var(--planner-primary);color:#fff;font:12px system-ui}
.cycle-picker-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin:18px 0}
.cycle-picker-days .cycle-day{font-size:16px;min-height:38px;-webkit-tap-highlight-color:transparent}
.cycle-month-observations{height:254px;margin-bottom:14px}
.cycle-month-observations select.line-date{appearance:none;-webkit-appearance:none;flex:0 0 38px;width:38px;height:28px;padding:0;text-align:center;text-align-last:center;font:13px/28px system-ui;color:var(--planner-ink);background:#fff5fa}
.cycle-panels .cycle-appointments{grid-column:span 10}
.cycle-panels .cycle-appointments,.pill-months{grid-column:1/-1}
.pill-months{min-width:0}
.pill-months h2{font:20px Georgia;color:var(--planner-ink)}
.pill-months p{font-size:12px;line-height:1.5}
.pill-month{display:grid;grid-template-columns:90px minmax(0,1fr);gap:5px 8px;width:100%;text-align:left;margin-bottom:6px;padding:10px}
.pill-month span{overflow-wrap:anywhere}
.pill-month small{grid-column:2;font-size:10px;color:var(--planner-ink)}
.pill-month-icons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:8px 0}
.pill-month-icon{position:relative;aspect-ratio:2/1;border-radius:999px;padding:10px 3px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:2px solid var(--planner-primary);background:linear-gradient(90deg,var(--planner-soft) 49.5%,var(--planner-border) 49.5%,var(--planner-border) 50.5%,#fffafd 50.5%);min-width:0;min-height:58px}
.pill-month-icon strong{font-size:clamp(15px,3.6vw,18px);font-weight:700}.pill-month-icon small{font-size:10px}
.cycle-month{display:flex;border:1px solid var(--planner-border);background:#fffafd;min-width:0;overflow:hidden}
.cycle-month h2{writing-mode:vertical-rl;transform:rotate(180deg);margin:0;padding:5px 3px;background:var(--planner-soft);color:var(--planner-ink);font:12px Georgia;text-align:center}
.cycle-days{flex:1;min-width:0;display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:3px;padding:6px 4px;align-content:center}
.cycle-day{aspect-ratio:1;width:100%;min-width:0;padding:0;border:1px solid #df84b1;border-radius:50%;font:10px/1 system-ui;color:var(--planner-ink);background:transparent;display:grid;place-items:center}
.cycle-day.selected{background:var(--planner-primary);color:#fff;box-shadow:inset 0 0 0 1px var(--planner-accent)}
.cycle-panels{display:grid;grid-template-columns:repeat(10,minmax(0,1fr)) repeat(2,minmax(30px,.4fr));column-gap:3px;row-gap:10px}
.cycle-observations,.cycle-appointments{grid-column:span 5}
.cycle-moods{grid-column:span 2}
.cycle-moods .date-line{justify-content:center;gap:3px}
.cycle-moods>span{font-size:11px;padding:6px 3px;gap:2px}
.cycle-moods .date-line-list{padding:6px 2px}
.cycle-box{height:254px;min-height:0}
.cycle-box>span,.cycle-pills>span{font-size:14px;padding:9px}
.cycle-box .date-page-arrow{width:22px;height:22px;min-height:0;padding:0;border:0;background:transparent;color:var(--planner-ink);font:18px/1 system-ui}
.cycle-box .line-date{flex:0 0 30px;width:30px;height:23px;min-height:0;padding:0;font:10px system-ui;border:1px solid #e7afc9;border-radius:4px;color:var(--planner-ink);background:#fff5fa}
.cycle-box .date-line input{font-size:12px}
.cycle-box .appointment-alarm{flex:0 0 46px;width:46px;padding:2px;height:26px;border-radius:6px;font:11px system-ui;color:var(--planner-ink);background:var(--planner-soft)}
.cycle-box .appointment-alarm.configured{border:2px solid var(--planner-accent)}
.cycle-box .mood-face{padding:0;width:28px;height:27px;border:0;background:transparent;font:23px/1 system-ui}
.cycle-box .date-line small{font-size:10px;color:#b591a3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cycle-pills{grid-column:span 6;height:432px;min-height:0}
.cycle-pills>span{height:44px;flex:0 0 44px}
.cycle-pills .date-line small{flex:0 0 65px;color:var(--planner-ink);font:11px Georgia}
.cycle-comments{grid-column:span 6;height:432px}
.cycle-comments .date-line{height:36px}
.cycle-panels .cycle-moods{min-width:60px}
.cycle-panels .cycle-moods .date-line-list{padding:5px 2px}
@media(max-width:700px){.cycle-content{padding:12px 7px}.cycle-months{gap:5px}.cycle-days{gap:1px;padding:6px 2px}.cycle-month h2{font-size:9px;padding:3px 1px}.cycle-day{font-size:8px}.cycle-panels{gap:6px}.cycle-box>span,.cycle-pills>span{font-size:10px;padding:6px}.cycle-box .date-line-list{padding:5px 4px}.cycle-box .date-line{gap:3px}.cycle-box .date-line input{font-size:10px}.cycle-box .line-date{flex-basis:24px;width:24px;font-size:9px}.cycle-box .mood-face{width:24px;font-size:21px}.cycle-box .date-line small{font-size:8px}.cycle-pills .date-line small{flex-basis:58px;font-size:10px}}
.pill-month-icon{background:linear-gradient(90deg,var(--planner-soft) 50%,#fffafd 50%)}.pill-month-icon:before,.pill-month-icon:after{content:'';position:absolute;left:50%;width:2px;height:8px;background:var(--planner-primary);transform:translateX(-50%);pointer-events:none}.pill-month-icon:before{top:0}.pill-month-icon:after{bottom:0}