:root {
  --bg: var(--tg-theme-bg-color, #ffffff);
  --text: var(--tg-theme-text-color, #1c1c1e);
  --hint: var(--tg-theme-hint-color, #8e8e93);
  --card: color-mix(in srgb, var(--bg) 93%, #e4607f);
  --btn: #d9526f;
  --btn-text: var(--tg-theme-button-text-color, #ffffff);
  --period: #e4607f;
  --pred: #e4607f;
  --fert: #6fb597;
  --spot: #6a9fd8;
  --moon: #9a8cc4;
  --radius: 14px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--text);
  font: 16px/1.35 ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
body { padding: 0 14px calc(76px + env(safe-area-inset-bottom)); max-width: 520px; margin: 0 auto; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
h2 { font-size: 15px; margin: 18px 0 8px; color: var(--hint); font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; }

.card { background: var(--card); border-radius: var(--radius); padding: 12px 14px; margin: 12px 0; }
.big { font-size: 20px; font-weight: 650; }
.muted { color: var(--hint); font-size: 14px; }

/* месяц */
.head { display: flex; align-items: center; justify-content: space-between; padding: 12px 0 6px; }
.head .title { font-size: 19px; font-weight: 650; }
.head button.title { width: auto; border-radius: 12px; padding: 0 12px; }
.head button { width: 40px; height: 40px; border-radius: 50%; font-size: 22px; background: var(--card); }
.dow, .grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.dow span { text-align: center; font-size: 12px; color: var(--hint); padding: 4px 0; }
.day { position: relative; aspect-ratio: 1 / 1.08; border-radius: 12px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; font-size: 15px; background: transparent; padding: 0; }
.day.empty { visibility: hidden; }
.day.future { opacity: .55; }
.day.fert { background: color-mix(in srgb, var(--fert) 22%, transparent); }
.day.pred { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--pred) 70%, transparent); border-radius: 12px; }
.day.period { background: var(--period); color: #fff; font-weight: 650; }
.day.today { outline: 2px solid var(--text); outline-offset: -2px; }
.day.sel { outline: 3px solid var(--btn); outline-offset: -3px; }
.day .ico { position: absolute; top: 3px; right: 4px; line-height: 0; }
.day .moon { position: absolute; bottom: 2px; line-height: 0; }
.day.period .ico svg { color: #fff; }
.day .ov { position: absolute; bottom: 4px; left: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--fert); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--hint); margin: 8px 2px; }
.legend i { display: inline-block; width: 11px; height: 11px; border-radius: 4px; vertical-align: -1px; margin-right: 4px; }

/* выбранный день */
.sel-title { font-weight: 650; }
.actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 10px; }
.actions button { background: var(--btn); color: var(--btn-text); border-radius: 12px; padding: 11px 4px;
  font-size: 14px; font-weight: 600; }
.actions button.alt { background: var(--card); color: var(--text); box-shadow: inset 0 0 0 1.5px var(--btn); }
.actions button:disabled { opacity: .4; }
.link { color: var(--btn); font-size: 14px; padding: 6px 0; }
.link.danger { color: #d64545; }

/* список */
.row { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid color-mix(in srgb, var(--hint) 25%, transparent); }
.row:last-child { border-bottom: 0; }
.row b { font-weight: 600; }
.stepper { display: flex; align-items: center; gap: 10px; }
.stepper button { width: 34px; height: 34px; border-radius: 50%; background: var(--bg); font-size: 20px; }
.stepper span { min-width: 50px; text-align: center; font-weight: 600; }
.switch { width: 50px; height: 30px; border-radius: 15px; background: color-mix(in srgb, var(--hint) 45%, transparent);
  position: relative; transition: background .15s; flex: none; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; transition: transform .15s; }
.switch.on { background: var(--fert); }
.switch.on::after { transform: translateX(20px); }
.setrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; }

/* нижние вкладки */
#tabs { position: fixed; left: 0; right: 0; bottom: 0; display: flex; background: var(--bg);
  border-top: 1px solid color-mix(in srgb, var(--hint) 30%, transparent);
  padding-bottom: env(safe-area-inset-bottom); }
#tabs button { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 8px 0 6px; font-size: 20px; opacity: .55; }
#tabs button span { font-size: 11px; margin-top: 1px; }
#tabs button.on { opacity: 1; color: var(--btn); }
#toast { position: fixed; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  background: #222; color: #fff; padding: 9px 14px; border-radius: 12px; font-size: 14px; max-width: 88vw;
  opacity: 0; pointer-events: none; transition: opacity .2s; text-align: center; }
#toast.show { opacity: .94; }
.center { text-align: center; padding: 60px 10px; color: var(--hint); }

.right { text-align: right; }
.lg-period { background: var(--period); }
.lg-pred { box-shadow: inset 0 0 0 2px var(--pred); }
.lg-fert { background: color-mix(in srgb, var(--fert) 35%, transparent); }

/* иконки */
svg.ic { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
svg.ic.filled { fill: currentColor; }
.c-period { color: var(--period); } .c-pred { color: var(--pred); } .c-fert { color: var(--fert); }
.c-spot { color: var(--spot); } .c-moon { color: var(--moon); }
.mo-ring { fill: none; stroke: var(--moon); stroke-width: 1.8; }
.mo-full { fill: var(--moon); stroke: var(--moon); stroke-width: 1.8; }
.actions button { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.iline { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
.lines { display: flex; flex-direction: column; gap: 3px; margin-top: 3px; }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend i { margin-right: 0; }
.head button { display: flex; align-items: center; justify-content: center; }
#tabs button { font-size: 11px; gap: 3px; align-items: center; justify-content: center; }
#tabs button span { margin-top: 0; }
.day.period { background: var(--period); }

.day.period .moon .mo-ring, .day.period .moon .mo-full { stroke: #fff; }
.day.period .moon .mo-full { fill: #fff; }
.day.period .moon .mo-ring { fill: none; }
.right { white-space: nowrap; }

/* темы: «авто» берёт цвета Telegram, остальные задаём сами */
:root[data-theme="light"] { --bg: #ffffff; --text: #1c1c1e; --hint: #8e8e93; color-scheme: light; }
:root[data-theme="dark"] { --bg: #1b171c; --text: #f4eef2; --hint: #a79ca5; color-scheme: dark; }
:root[data-theme="dark"] .stepper button { background: #2b252c; }
.seg { display: flex; background: var(--bg); border-radius: 12px; padding: 3px; gap: 2px; }
.seg button { padding: 7px 9px; border-radius: 9px; font-size: 13px; color: var(--hint); }
.seg button.on { background: var(--btn); color: #fff; font-weight: 600; }

.stepper button { display: flex; align-items: center; justify-content: center; padding: 0; }

.setrow > div:first-child { min-width: 0; }
.stepper { flex: none; gap: 6px; }
.stepper { gap: 8px; } .stepper span { min-width: 58px; font-size: 15px; }

.actions button.on { background: var(--btn); color: var(--btn-text); box-shadow: none; }
.hint { margin-top: 8px; }

/* выбранный день: нейтральное кольцо с зазором, чтобы не сливалось с заливкой месячных */
.day.today { outline: 0; font-weight: 800; }
.day.today::before { content: ""; position: absolute; top: 5px; left: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--text); }
.day.today.period::before { background: #fff; }
.day.sel { outline: 2.5px solid var(--text); outline-offset: 1.5px; }

/* карточка выбранного дня: размеры не зависят от наличия иконки луны, кнопки не прыгают */
.lines { flex-direction: row; flex-wrap: wrap; gap: 2px 14px; min-height: 50px; align-content: flex-start; }
.iline { min-height: 24px; line-height: 24px; }
.iline svg { flex: none; }
.actions button { justify-content: flex-start; align-items: center; height: 84px; padding: 12px 4px 8px; gap: 6px; text-align: center; }
.actions button .lbl { display: flex; align-items: center; justify-content: center; text-align: center; flex: 1; width: 100%; line-height: 1.15; }

/* одинаковая вёрстка на русском и английском: фиксированные размеры строк и переключателей */
.setrow { min-height: 66px; padding-top: 0; padding-bottom: 0; }
.setrow > div:first-child { flex: 1; line-height: 1.25; }
.seg { width: 168px; flex: none; }
.seg button { flex: 1; padding: 7px 0; text-align: center; white-space: nowrap; }
.head button.title { min-width: 176px; }
.fcard { min-height: 178px; }

/* главный экран без прокрутки: прогноз одной строкой, календарь, нижняя панель с кнопками */
.has-dock { padding-bottom: calc(150px + env(safe-area-inset-bottom)); }
.head { padding: 6px 0 4px; }
.head button { width: 36px; height: 36px; }
.grid, .dow { gap: 3px; }
.day { aspect-ratio: 1 / .92; font-size: 15px; }
.fcline { display: flex; align-items: center; gap: 10px; width: 100%; height: 40px; padding: 0 12px; margin: 2px 0 6px;
  border-radius: 14px; background: var(--card); text-align: left; }
.fctext { flex: 1; min-width: 0; font-weight: 650; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fcday { font-size: 13px; white-space: nowrap; }
.c-hint { color: var(--hint); }
.dock { position: fixed; left: 0; right: 0; bottom: calc(56px + env(safe-area-inset-bottom)); max-width: 520px; margin: 0 auto;
  background: var(--bg); border-top: 1px solid color-mix(in srgb, var(--hint) 25%, transparent); padding: 6px 14px 10px; z-index: 5; }
.dock-head { display: flex; align-items: center; gap: 10px; width: 100%; height: 30px; text-align: left; }
.dock-head b { font-weight: 650; }
.dock-icons { flex: 1; display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; }
.dock .actions { margin-top: 4px; }
.dock .actions button { height: 68px; padding: 8px 4px 6px; gap: 4px; font-size: 13px; }
.dock .actions button .lbl { line-height: 1.1; }

/* панель подробностей выезжает снизу */
#sheet { position: fixed; inset: 0; z-index: 30; visibility: hidden; transition: visibility 0s linear .26s; }
#sheet.open { visibility: visible; transition-delay: 0s; }
#sheet .backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .35); opacity: 0; transition: opacity .25s; }
#sheet.open .backdrop { opacity: 1; }
#sheet .panel { position: absolute; left: 0; right: 0; bottom: 0; max-width: 520px; margin: 0 auto; max-height: 82vh; overflow-y: auto;
  background: var(--bg); border-radius: 20px 20px 0 0; padding: 8px 18px calc(18px + env(safe-area-inset-bottom));
  transform: translateY(100%); transition: transform .26s cubic-bezier(.2, .8, .2, 1); }
#sheet.open .panel { transform: translateY(0); }
#sheet .grab { width: 40px; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--hint) 45%, transparent); margin: 0 auto 12px; }
#sheet .lines { min-height: 0; margin: 4px 0; }
#sheet h2 { margin: 16px 0 6px; }
#sheet .legend { margin: 4px 0 8px; }

#sheet .sheet-x { position: absolute; top: 10px; right: 12px; width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: var(--card); color: var(--hint); padding: 0; }
#sheet .sel-title { padding-right: 40px; }

/* календарь: месяцы идут друг за другом, прокрутка вверх-вниз */
html, body { overscroll-behavior-y: none; }
.has-dock { padding-bottom: 0; height: calc(var(--tg-viewport-stable-height, 100dvh) - 56px - env(safe-area-inset-bottom)); overflow: hidden; }
.calwrap { height: 100%; display: flex; flex-direction: column; padding-top: 6px; }
.cal-area { position: relative; flex: 1; min-height: 0; }
.cal-scroll { position: absolute; inset: 0 0 0 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding-bottom: 132px; scrollbar-width: none; }
.cal-scroll::-webkit-scrollbar { display: none; }
.month-title { font-size: 17px; font-weight: 650; padding: 14px 4px 6px; }
.month:first-child .month-title { padding-top: 4px; }
.calwrap .grid { margin: 0; }
.dow { margin-top: 2px; }
.today-fab { position: absolute; right: 8px; bottom: 140px; width: 42px; height: 42px; border-radius: 50%; background: var(--btn); color: #fff;
  display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 4;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.today-fab.show { opacity: 1; pointer-events: auto; }

body.nopage { padding-bottom: 0; overflow: hidden; height: var(--tg-viewport-stable-height, 100dvh); }
.cal-scroll { padding-left: 5px; padding-right: 5px; }
.calwrap .dow { padding: 0 5px; }

/* заставка при запуске: появляется и исчезает плавно */
#splash { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--bg) 82%, #e4607f) 0%, var(--bg) 78%);
  transition: opacity 1.1s ease; }
#splash span { font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; font-style: italic;
  font-weight: 500; font-size: 46px; letter-spacing: .02em; color: var(--btn);
  opacity: 0; transform: translateY(6px); animation: splash-in 1.5s .2s ease forwards; }
#splash.out { opacity: 0; pointer-events: none; }
@keyframes splash-in { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #splash span { animation-duration: .01s; transform: none; } #splash { transition-duration: .01s; } }

/* заметка дня */
.day .nt { position: absolute; top: 5px; left: 5px; width: 5px; height: 5px; border-radius: 50%; background: var(--hint); }
.day.period .nt { background: #fff; }
.lg-note { width: 6px !important; height: 6px !important; border-radius: 50% !important; background: var(--hint); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.chip { padding: 7px 12px; border-radius: 16px; font-size: 14px; background: var(--card); color: var(--text);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--hint) 35%, transparent); }
.chip.on { background: var(--btn); color: var(--btn-text); box-shadow: none; }
.note-text { width: 100%; box-sizing: border-box; resize: none; border: 0; border-radius: 12px; padding: 10px 12px;
  background: var(--card); color: var(--text); font: inherit; font-size: 15px; line-height: 1.35; }
.note-text:focus { outline: 2px solid var(--btn); outline-offset: -2px; }

.day { touch-action: manipulation; }

/* история: заметки, кнопки, статистика */
.hnote { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.hnote b { font-weight: 600; color: var(--text); }
.bigbtn { display: flex; align-items: center; gap: 12px; width: 100%; background: var(--card); color: var(--text); border-radius: var(--radius);
  padding: 14px; margin: 12px 0; font-size: 16px; font-weight: 600; text-align: left; }
.bigbtn span { flex: 1; }
.bigbtn > svg:first-child { color: var(--btn); }
.bigbtn.center-btn { justify-content: center; background: var(--btn); color: var(--btn-text); }
.bigbtn.center-btn > svg:first-child { color: inherit; }
.bigbtn.center-btn span { flex: none; }
.backlink { display: inline-flex; align-items: center; gap: 4px; padding: 6px 0; }
.chart { width: 100%; height: auto; display: block; margin-top: 6px; }
.chart-bar { fill: var(--btn); opacity: .85; }
.chart-avg { stroke: var(--hint); stroke-width: 1; stroke-dasharray: 4 4; opacity: .7; }
.chart-val { fill: var(--text); font-size: 11px; font-weight: 600; }
.chart-lbl { fill: var(--hint); font-size: 10px; }
.report { background: var(--card); border-radius: var(--radius); padding: 12px 14px; margin: 12px 0; font-size: 14px; line-height: 1.45;
  white-space: pre-wrap; word-break: break-word; user-select: text; -webkit-user-select: text; }
.offscreen { position: fixed; left: -9999px; top: 0; opacity: 0; }
.row .right { text-align: right; }
.row .right.wrap { white-space: normal; max-width: 60%; }