/* «Мой цикл» в той же тёмной палитре, что и лунный календарь. */
.bottom-nav { gap: 2px; padding-inline: 8px; }
.bottom-nav .nav-item { flex: 1; min-width: 0; white-space: nowrap; }
.cycle-topbar { margin-bottom: 18px; }
.cycle-hero {
  position: relative;
  isolation: isolate;
  min-height: 220px;
  overflow: hidden;
  padding: 24px;
  border: 1px solid #627e93;
  border-radius: 4px 28px 28px 28px;
  background: radial-gradient(circle at 77% 43%, #73609d82 0, transparent 28%),
    radial-gradient(circle at 18% 18%, #f3d78d 0 1px, transparent 2px),
    radial-gradient(circle at 91% 78%, #d2e8f1 0 1px, transparent 2px),
    linear-gradient(145deg, #142e44, #091b2d 75%);
  box-shadow: 0 16px 32px #0006;
}
.cycle-hero h2 { position: relative; z-index: 1; max-width: 230px; margin: 23px 0 8px; font-size: 43px; line-height: .94; }
.cycle-hero > p:last-child { position: relative; z-index: 1; max-width: 265px; margin: 0; color: #d4e1e8; font-size: 11px; line-height: 1.55; }
.cycle-orbit {
  position: absolute;
  z-index: -1;
  right: -20px;
  top: -17px;
  display: grid;
  place-items: center;
  width: 215px;
  height: 215px;
  border: 1px solid #e7c47b9c;
  border-radius: 50%;
  box-shadow: 0 0 0 15px #28637564, 0 0 0 36px #51748c33;
  background: radial-gradient(circle, #846fb479, #233d5982 51%, #091b2d 73%);
}
.cycle-orbit img {
  position: absolute;
  width: 155px;
  height: 155px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 38%;
  filter: invert(1) grayscale(1) contrast(1.6);
  mix-blend-mode: screen;
  opacity: .48;
}
.cycle-orbit span { position: relative; color: #ead5ee; font-size: 76px; text-shadow: 0 0 28px #b7a4e2; opacity: .45; }
.cycle-card {
  margin-top: 16px;
  padding: 22px;
  border: 1px solid #49667e;
  border-radius: 22px;
  color: #fffaf2;
  background: linear-gradient(145deg, #172e44, #102438 78%);
  box-shadow: 0 10px 24px #0004;
}
.cycle-card[hidden], #cycle-results[hidden] { display: none; }
.cycle-card h2 { margin: 8px 0 17px; font-size: 31px; line-height: 1; }
.cycle-fields { display: grid; gap: 15px; }
.cycle-fields label { display: grid; gap: 7px; color: #d9e4e9; font-size: 11px; font-weight: 700; }
.cycle-fields input {
  width: 100%;
  min-height: 43px;
  padding: 9px 12px;
  border: 1px solid #5b788b;
  border-radius: 10px;
  outline: none;
  color: #fffaf2;
  background: #0c2133;
  color-scheme: dark;
  font: inherit;
}
.cycle-fields input:focus { border-color: #e7c47b; box-shadow: 0 0 0 3px #e7c47b38; }
.cycle-primary, .cycle-edit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 19px;
  padding: 12px 14px;
  border: 0;
  border-radius: 12px;
  color: #092036;
  background: #eed395;
  font-size: 12px;
  font-weight: 800;
}
.cycle-primary span, .cycle-edit span { font-size: 18px; }
.cycle-form-message { min-height: 16px; margin: 10px 0 0; color: #f0d49c; font-size: 10px; line-height: 1.5; }
.cycle-status { background: linear-gradient(145deg, #1a334c, #162d47 75%); }
.cycle-status h2 { margin-bottom: 9px; font-size: 38px; }
.cycle-status .cycle-phase { margin: 0 0 12px; color: #f0d49c; font-size: 15px; font-weight: 800; }
.cycle-status > p:not(.eyebrow):not(.cycle-phase) { color: #d3dfe7; font-size: 11px; line-height: 1.6; }
.cycle-data-row { display: flex; justify-content: space-between; gap: 14px; margin-top: 20px; padding-top: 14px; border-top: 1px solid #48667d; font-size: 11px; line-height: 1.5; }
.cycle-data-row span { max-width: 60%; color: #becfda; }
.cycle-data-row strong { text-align: right; color: #fff4d5; }
.cycle-edit { margin-top: 17px; color: #f4dfac; border: 1px solid #8f7650; background: #223c50; }
.cycle-timeline { display: flex; gap: 7px; overflow-x: auto; padding: 5px 1px 12px; scrollbar-color: #6c8493 transparent; }
.cycle-day-chip {
  display: grid;
  flex: 0 0 68px;
  place-items: center;
  gap: 2px;
  min-height: 78px;
  padding: 7px 3px;
  border: 1px solid #49667e;
  border-radius: 14px;
  color: #dce7ec;
  background: #0b2033;
  text-align: center;
}
.cycle-day-chip span { color: #b9cbd6; font-size: 9px; }
.cycle-day-chip strong { color: #fffaf2; font-size: 20px; }
.cycle-day-chip small { color: #9bb0bf; font-size: 9px; }
.cycle-day-chip.is-period { border-color: #aa859e; background: #3b2c49; }
.cycle-day-chip.is-today { border: 2px solid #f0d49c; box-shadow: 0 0 0 2px #e7c47b31; }
.cycle-timeline-note { margin: 6px 0 0; color: #cbd9e1; font-size: 10px; line-height: 1.5; }
.cycle-graph-card { background: linear-gradient(145deg, #14263c, #0b1b2f 78%); }
.cycle-graph-card h2 { margin-bottom: 10px; }
.cycle-graph-intro, .cycle-graph-note { color: #c9d7e0; font-size: 10px; line-height: 1.6; }
.cycle-graph-intro { margin: 0 0 14px; }
.cycle-graph-frame {
  position: relative;
  overflow: hidden;
  padding-top: 20px;
  border: 1px solid #3d536a;
  border-radius: 14px;
  background:
    radial-gradient(circle at 78% 35%, #c7d8ee72 0 1px, transparent 2px),
    radial-gradient(circle at 19% 71%, #e7c47b91 0 1px, transparent 2px),
    linear-gradient(180deg, #121c32, #0a1727);
}
.cycle-graph-frame svg { display: block; width: 100%; height: 214px; }
.cycle-grid-line { stroke: #6f81943d; stroke-width: 1; vector-effect: non-scaling-stroke; }
.cycle-chart-line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.cycle-chart-line.estrogen { stroke: #a17adf; }
.cycle-chart-line.progesterone { stroke: #d8809b; }
.cycle-chart-line.lh { stroke: #70bddf; }
.cycle-chart-line.fsh { stroke: #d4be79; }
.cycle-today-line { stroke: #f5dfab; stroke-width: 1.5; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.cycle-today-dot { fill: #f5dfab; }
.cycle-graph-today {
  position: absolute;
  z-index: 1;
  top: 8px;
  transform: translateX(-50%);
  padding: 4px 8px;
  border: 1px solid #b69b70;
  border-radius: 999px;
  color: #fff5d9;
  background: #15263b;
  font-size: 9px;
  white-space: nowrap;
}
.cycle-graph-axis { display: flex; justify-content: space-between; padding: 0 12px 11px; color: #afc2ce; font-size: 9px; }
.cycle-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.cycle-legend button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border: 1px solid #41586c;
  border-radius: 999px;
  color: #e1eaf0;
  background: #182d42;
  font-size: 10px;
}
.cycle-legend button[aria-pressed="false"] { opacity: .48; }
.cycle-legend i { width: 9px; height: 9px; border-radius: 50%; background: #a17adf; }
.cycle-legend [data-cycle-line="progesterone"] i { background: #d8809b; }
.cycle-legend [data-cycle-line="lh"] i { background: #70bddf; }
.cycle-legend [data-cycle-line="fsh"] i { background: #d4be79; }
.cycle-graph-note { margin: 12px 0 0; }
.cycle-safety-note { margin: 18px 4px 0; color: #c4d1da; font-size: 10px; line-height: 1.6; }
.cycle-clear { display: block; margin: 11px auto 5px; padding: 8px; border: 0; color: #f0d49c; background: transparent; font-size: 10px; text-decoration: underline; }
@media (max-width: 390px) {
  .bottom-nav .nav-item { font-size: 8px; }
  .cycle-hero h2 { max-width: 195px; font-size: 37px; }
  .cycle-orbit { right: -67px; }
}