:root {
  color-scheme: light;
  --ink: #51233e;
  --muted: #755867;
  --paper: #fff8f6;
  --page-background: radial-gradient(ellipse at 12% 12%, #ffe9e4 0, transparent 29rem), radial-gradient(ellipse at 88% 30%, #fce0e8 0, transparent 28rem), var(--paper);
  --berry: #a92f5d;
  --berry-dark: #862447;
  --rose: #f6c1cf;
  --peach: #ffc59f;
  --line: #efd8df;
  --white: #fffdfc;
  --tap-target: 44px;
  --control-height: 52px;
  --text-small: 13px;
  --text-body: 15px;
  font-family: ui-rounded, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--page-background); }
body { margin: 0; min-height: 100vh; min-height: 100dvh; color: var(--ink); background: var(--page-background); -webkit-font-smoothing: antialiased; }
body.modal-open { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }
button, input { font: inherit; }
button { color: inherit; }
button, a, [role="button"] { touch-action: manipulation; }
button, button * { -webkit-user-select: none; user-select: none; }
a, button, input, select, textarea, [role="button"] { -webkit-tap-highlight-color: transparent; }
a.primary-button { -webkit-user-select: none; user-select: none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [role="button"]:focus-visible { outline: 3px solid #a92f5d; outline-offset: 3px; }
[hidden] { display: none !important; }
.page-shell { width: min(100% - 42px, 790px); min-height: 100vh; min-height: 100dvh; margin: 0 auto; padding: calc(env(safe-area-inset-top) + 14px) max(0px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(0px, env(safe-area-inset-left)); display: flex; flex-direction: column; }
.topbar { position: sticky; top: env(safe-area-inset-top); z-index: 20; isolation: isolate; display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; }
.topbar::before { position: absolute; z-index: -1; top: calc(0px - env(safe-area-inset-top)); bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); border-bottom: 1px solid #f0dbe2; background: var(--page-background); background-attachment: fixed; content: ''; pointer-events: none; }
.topbar-actions { display: flex; align-items: center; gap: 9px; }
.topbar-link { min-height: var(--tap-target); padding: 10px 12px; border: 1px solid #e4bfcb; border-radius: 13px; background: #fffaf8d9; color: #88415d; font-size: var(--text-small); font-weight: 850; cursor: pointer; }
.logout-button { min-height: var(--tap-target); font-size: var(--text-small); }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: var(--tap-target); padding: 0; border: 0; background: none; color: var(--ink); font-size: 14px; font-weight: 900; letter-spacing: -.04em; cursor: pointer; }
.brand-mark { display: block; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 13px; }
.icon-button { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--berry); cursor: pointer; transition: transform .16s; }
.icon-button svg { width: 27px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.hero { width: min(100%, 640px); margin: 0 auto; padding: 24px 0 0; }
.hero-heading > h1 { margin-top: 0; }
.eyebrow { display: flex; align-items: center; gap: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; font-size: 10px; font-weight: 900; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: #d34675; box-shadow: 0 0 0 4px #f9e2e8; }
.debug-indicator { padding: 4px 8px; border-radius: 12px; background: #513366; color: white; letter-spacing: .08em; }
h1, h2, p { margin-top: 0; }
h1 { margin: 18px 0 11px; font-size: clamp(38px, 8.5vw, 61px); font-weight: 950; line-height: .99; letter-spacing: -.07em; }
h1 span { color: var(--berry); }
.hero-subtitle { margin: -2px 0 22px; color: var(--berry); font-size: clamp(19px, 4.8vw, 24px); line-height: 1.3; font-weight: 800; }
.profile-heading { margin: 0 0 8px; color: var(--muted); font-size: var(--text-small); font-weight: 700; }
.intro { max-width: 455px; margin: 0 0 23px; color: var(--muted); font-size: var(--text-body); line-height: 1.65; }
.fruit-card { position: relative; min-height: 385px; padding: 25px 28px 21px; overflow: hidden; border: 1.5px solid #e99ab0; border-radius: 30px; background: linear-gradient(138deg, #f8c4d0 3%, #ffcfaa 100%); box-shadow: 0 18px 38px #89395224; }
.fruit-card::before { position: absolute; content: ''; width: 275px; height: 275px; top: -94px; right: -70px; border-radius: 48% 52% 55% 45%; background: #ffe2c7a8; transform: rotate(18deg); }
.fruit-card::after { position: absolute; content: ''; width: 172px; height: 172px; left: -62px; bottom: 38px; border-radius: 50%; background: #f7aebd66; }
.card-glow { position: absolute; z-index: 0; border-radius: 50%; background: #fff4df88; filter: blur(1px); }
.glow-one { width: 37px; height: 37px; top: 38px; left: 44%; }
.glow-two { width: 20px; height: 20px; top: 128px; right: 33%; background: #dd839a45; }
.card-topline { position: absolute; z-index: 3; top: 16px; left: 20px; right: 20px; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.card-week-group { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.card-topline .history-pill { position: absolute; top: 0; left: 50%; transform: translateX(-50%); }
.comparison-art { position: absolute; z-index: 1; top: 48px; right: 20px; width: 250px; height: 235px; display: grid; place-items: center; animation: pop-in .45s cubic-bezier(.2,.8,.2,1) both; }
.comparison-art.is-image-art { top: 45px; right: 26px; width: 220px; height: 210px; padding: 17px; border-radius: 50%; background: radial-gradient(circle, #fff8f080 0%, #fff4ee52 62%, #fff4ee00 76%); }
.comparison-art svg { display: block; width: 100%; height: 100%; overflow: visible; opacity: 1; transition: opacity .28s ease; }
.comparison-art.has-raster svg { opacity: 0; }
.comparison-art img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; opacity: 0; transform: scale(.97); transition: opacity .28s ease, transform .36s cubic-bezier(.2,.8,.2,1); }
.comparison-art img.is-current { opacity: 1; transform: scale(1); }
.comparison-art img[src*="strawberry-first.png"] { transform: scale(.92); }
.comparison-art img[src*="banana-first.png"] { transform: scale(.87); }
.comparison-art img[src*="carrot-first.png"] { transform: scale(.91); }
.comparison-art img[src*="sweetpotato-first.png"] { transform: scale(.94); }
.comparison-art img[src*="mango-first.png"] { transform: scale(.97); }
.comparison-art img[src*="corn-first.png"] { transform: scale(.94); }
.comparison-art img[src*="zucchini-first.png"] { transform: scale(.95); }
.comparison-art img[src*="cucumber-first.png"] { transform: scale(.95); }
.comparison-art img[src*="cauliflower-first.png"] { transform: scale(.90); }
.comparison-art img[src*="eggplant-first.png"] { transform: scale(.96); }
.comparison-art img[src*="melon-first.png"] { transform: scale(.99); }
.comparison-art img[src*="cabbage-first.png"] { transform: scale(.90); }
.comparison-art img[src*="coconut-first.png"] { transform: scale(.95); }
.comparison-art img[src*="celery-first.png"] { transform: scale(.93); }
.comparison-art img[src*="pineapple-first.png"] { transform: scale(.89); }
.comparison-art img[src*="jackfruit-first.png"] { transform: scale(.92); }
.comparison-art img[src*="papaya-first.png"] { transform: scale(.92); }
.comparison-art img[src*="lettuce-first.png"] { transform: scale(.875); }
.comparison-art img[src*="leek-first.png"] { transform: scale(.905); }
.comparison-art img[src*="rhubarb-first.png"] { transform: scale(.925); }
.comparison-art img[src*="watermelon-first.png"] { transform: scale(.95); }
.comparison-art img[src*="pumpkin-first.png"] { transform: scale(.90); }
.comparison-art.is-placeholder { visibility: hidden; animation: none; }
.comparison-art .leaf { fill: #6f9c5e; stroke: #527a4d; }
.comparison-art .detail { stroke: #fff1d5; }
.comparison-art .seeds { fill: #ffe7ae; stroke: #c98a55; stroke-width: 1.5; }
.comparison-copy { position: relative; z-index: 2; width: 55%; min-height: 275px; display: flex; flex-direction: column; justify-content: flex-end; }
.week-kicker, .history-pill { display: inline-flex; width: max-content; padding: 7px 10px; border-radius: 20px; background: var(--berry); color: white; font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.history-pill { background: #fffaf2; color: #894260; }
.comparison-copy h2 { margin: 12px 0 6px; font-size: clamp(34px, 6.5vw, 47px); line-height: 1; font-weight: 950; letter-spacing: -.065em; }
.baby-length { display: inline-flex; align-items: center; justify-content: center; width: max-content; min-height: 28px; margin: 0; padding: 6px 11px; border: 1px solid #e6c8ca; border-radius: 999px; background: #fffaf2; color: var(--berry-dark); font-size: 12px; line-height: 1.2; font-weight: 850; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fruit-caption { max-width: 270px; margin: 0; color: #70465c; font-size: var(--text-body); line-height: 1.55; font-weight: 620; }
.card-bottom { position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding-top: 18px; margin-top: 16px; border-top: 1px solid #6b344b42; }
.gestation-block { display: grid; gap: 6px; min-width: 175px; }
.metric-label { color: #81546d; font-size: 10px; font-weight: 900; letter-spacing: .14em; }
.gestation-block strong { font-size: 16px; font-weight: 900; }
.progress-block { width: min(46%, 225px); }
.progress-label-row { display: flex; justify-content: space-between; margin-bottom: 7px; color: #70465c; font-size: 12px; font-weight: 800; }
.progress-label-row strong { color: var(--berry); font-size: 13px; }
.progress-track { height: 9px; overflow: hidden; border: 1px solid #63365088; border-radius: 10px; background: #fff8ec; }
.progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--berry); transition: width .35s ease; }
.history-controls { position: relative; display: flex; gap: 9px; margin: 18px 0 0; }
.history-button { display: flex; flex: 1 1 0; align-items: center; justify-content: center; min-width: 0; min-height: var(--tap-target); padding: 6px 7px; border: 1px solid #e4bfcb; border-radius: 14px; background: #fffaf8d9; color: #88415d; font-size: var(--text-small); line-height: 1.2; font-weight: 800; text-align: center; white-space: nowrap; cursor: pointer; }
.return-button { color: var(--berry); }
.completed-banner { width: 100%; min-height: var(--control-height); margin-top: 14px; padding: 12px; border: 1px solid #dbbac8; border-radius: 13px; background: #fff5ef; color: #874461; font-size: var(--text-small); font-weight: 800; cursor: pointer; }
.week-note { display: flex; align-items: center; gap: 13px; margin: 18px 2px 0; }
.note-icon { display: grid; place-items: center; flex: 0 0 39px; height: 39px; border: 1.5px solid #e7b1bf; border-radius: 14px; background: #fbe1e8; color: var(--berry); font-size: 20px; transform: rotate(-5deg); }
.week-note p { margin: 0; font-size: var(--text-body); line-height: 1.5; font-weight: 850; }
.week-note p span { color: var(--muted); font-size: var(--text-small); font-weight: 600; }
.settings-notifications { display: grid; gap: 12px; padding: 16px; border: 1px solid #efd6de; border-radius: 18px; background: #fffaf8d9; }
.notification-copy h3 { margin: 0 0 5px; color: var(--ink); font-size: var(--text-small); line-height: 1.25; font-weight: 900; }
.notification-copy p { margin: 0; color: var(--muted); font-size: var(--text-small); line-height: 1.45; }
.notification-button { width: 100%; min-height: var(--tap-target); padding: 10px 14px; font-size: var(--text-small); }
.notification-button:disabled { opacity: .72; cursor: default; }
.notification-onboarding-dialog { width: min(100% - 28px, 460px); }
.notification-onboarding-dialog .dialog-sticky-header { margin-bottom: 12px; }
.notification-onboarding-dialog .dialog-copy { margin: 0; }
.notification-onboarding-dialog .dialog-actions { margin-top: 20px; }
.setup-view { width: min(100%, 455px); margin: auto; padding: 38px 0; }
.auth-view { width: min(100%, 455px); margin: auto; padding: 38px 0; text-align: center; }
.auth-mark { width: 88px; height: 88px; margin: 0 auto 22px; }
.auth-mark img { display: block; width: 100%; height: 100%; }
.auth-view .eyebrow { justify-content: center; }
.auth-view h1 { margin: 15px 0 13px; }
.auth-view .intro { margin: 0 auto 23px; }
.auth-status { padding: 12px 14px; margin: 12px 0 0; border-radius: 13px; background: #fff0ed; color: #85526c; font-size: var(--text-small); line-height: 1.55; }
.auth-telegram { width: 100%; text-decoration: none; }
.setup-role-field { display: grid; gap: 8px; }
.setup-view input, .setup-view select { min-height: var(--control-height); }
.setup-view .setup-role-field select { height: var(--control-height); box-sizing: border-box; }
.setup-name-hint { margin: -4px 0 0; color: var(--muted); font-size: var(--text-small); line-height: 1.45; }
.setup-view .form-card > .primary-button { margin-top: 8px; }
.setup-cancel { justify-self: center; }
.setup-view h1 { margin-top: 15px; font-size: clamp(39px, 9vw, 57px); }
.setup-view .intro { margin-bottom: 24px; }
.form-card { display: grid; gap: 11px; padding: 21px; border: 1px solid #efd6de; border-radius: 22px; background: #fffdfbdc; box-shadow: 0 10px 30px #73344d0c; }
label { display: grid; gap: 8px; color: #684657; font-size: var(--text-small); font-weight: 850; }
input, select { width: 100%; min-height: 48px; padding: 0 13px; border: 1.5px solid #dfc2cd; border-radius: 13px; outline: none; background: white; color: var(--ink); font-size: 16px; }
input:focus { border-color: var(--berry); box-shadow: 0 0 0 3px #f6dce6; }
select:focus { border-color: var(--berry); box-shadow: 0 0 0 3px #f6dce6; }
.date-picker-field { display: grid; gap: 8px; }
.date-picker-button { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: var(--control-height); padding: 0 13px; border: 1.5px solid #dfc2cd; border-radius: 13px; background: #fff; color: var(--ink); font-size: 16px; text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.date-picker-button:focus-visible { outline: 0; border-color: var(--berry); box-shadow: 0 0 0 3px #f6dce6; }
.calendar-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: #f9e7eb; color: var(--berry); font-size: 17px; }
.calendar-dialog { width: min(100% - 28px, 430px); padding: 21px; }
.calendar-dialog h2 { margin-bottom: 6px; }
.calendar-instructions { margin-bottom: 13px; }
.calendar-month-nav { display: grid; grid-template-columns: 43px 1fr 43px; align-items: center; gap: 8px; margin: 8px 0 9px; }
.calendar-month-nav h3 { margin: 0; color: var(--berry); font-size: 18px; font-weight: 900; text-align: center; text-transform: capitalize; }
.calendar-nav-button { display: grid; place-items: center; width: var(--tap-target); height: var(--tap-target); border: 1px solid #e7c3cf; border-radius: 14px; background: #fff; color: var(--berry); font-size: 20px; cursor: pointer; }
.calendar-weekdays, .calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.calendar-weekdays { margin: 0 0 5px; color: var(--muted); font-size: var(--text-small); font-weight: 850; text-align: center; }
.calendar-weekdays span { padding: 4px 0; }
.calendar-grid { display: flex; flex-direction: column; gap: 4px; touch-action: pan-y pinch-zoom; user-select: none; overscroll-behavior: contain; }
.calendar-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.calendar-day { display: grid; place-items: center; width: 100%; min-height: 44px; padding: 0; border: 1px solid transparent; border-radius: 12px; background: transparent; color: var(--ink); font-size: 12px; font-weight: 700; cursor: pointer; transition: background .12s, color .12s, transform .12s; }
.calendar-day.outside-month { color: var(--muted); }
.calendar-day.is-today { border-color: #d48aa0; }
.calendar-day.is-selected { border-color: var(--berry); background: var(--berry); color: white; box-shadow: 0 3px 9px #86244730; }
.calendar-selected-note { min-height: 16px; margin: 8px 0 0; color: var(--muted); font-size: var(--text-small); text-align: center; }
.optional { color: var(--muted); font-weight: 600; }
.primary-button, .secondary-button { position: relative; display: flex; justify-content: center; align-items: center; min-height: var(--control-height); padding: 0 48px; border: 0; border-radius: 14px; background: var(--berry); color: white; font-size: var(--text-body); font-weight: 900; text-align: center; cursor: pointer; box-shadow: 0 5px 14px #8624472b; transition: transform .15s, background .15s; }
.primary-button span { position: absolute; right: 16px; font-size: 20px; font-weight: 500; }
.secondary-button { border: 1px solid #e3c3cf; background: #fff8f6; color: var(--berry); box-shadow: none; }
.privacy-note { display: flex; gap: 8px; margin: 15px 2px 0; color: var(--muted); font-size: var(--text-small); line-height: 1.5; }
.site-footer { display: flex; justify-content: center; gap: 10px; padding-top: 18px; color: var(--muted); font-size: clamp(18px, 5vw, 22px); font-weight: 800; }
.site-footer span:last-child { color: #ce557b; }
.site-footer span:last-child { font-size: 1.3em; }
.app-dialog { width: min(100% - 28px, 440px); max-height: min(90vh, 800px); max-height: min(90dvh, 800px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 23px; border: 1px solid #efd1dc; border-radius: 23px; background: var(--paper); color: var(--ink); box-shadow: 0 20px 70px #4e1e343b; opacity: 0; transform: translateY(7px); transition: opacity .18s ease, transform .18s ease; }
.app-dialog[open] { opacity: 1; transform: translateY(0); }
@starting-style { .app-dialog[open] { opacity: 0; transform: translateY(7px); } }
.app-dialog:focus { outline: none; }
.app-dialog::backdrop { background: #40203370; backdrop-filter: blur(4px); opacity: 0; transition: opacity .18s ease; }
.app-dialog[open]::backdrop { opacity: 1; }
@starting-style { .app-dialog[open]::backdrop { opacity: 0; } }
.app-dialog.is-closing { opacity: 0; transform: translateY(7px); }
.app-dialog.is-closing::backdrop { opacity: 0; }
@supports (transition-behavior: allow-discrete) {
  .app-dialog { transition: opacity .18s ease, transform .18s ease, display .18s ease allow-discrete, overlay .18s ease allow-discrete; }
  .app-dialog::backdrop { transition: opacity .18s ease, display .18s ease allow-discrete, overlay .18s ease allow-discrete; }
}
@media (prefers-reduced-motion: reduce) {
  .app-dialog, .app-dialog::backdrop { transition-duration: .01ms; }
}
.dialog-close-row { display: flex; justify-content: flex-end; height: 44px; margin: -8px -8px 5px; }
.dialog-sticky-header { position: sticky; top: 0; z-index: 4; isolation: isolate; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 13px; padding: 0 0 10px; border-bottom: 1px solid #f0dbe2; background: transparent; }
.dialog-sticky-header::before { position: absolute; z-index: -1; top: -24px; right: -23px; bottom: 0; left: -23px; background: var(--paper); content: ''; pointer-events: none; }
.app-dialog .dialog-sticky-header h2 { flex: 1; min-width: 0; margin: 0; font-size: 28px; line-height: 1.05; letter-spacing: -.05em; }
.dialog-sticky-header .dialog-close-row { flex: 0 0 44px; width: 44px; margin: 0 -8px 0 0; }
.dialog-sticky-header > .close-button { flex: 0 0 44px; }
.close-button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: #f6e3e8; color: var(--berry); font-size: 0; line-height: 1; cursor: pointer; }
.close-button svg { display: block; width: 18px; height: 18px; }
.app-dialog h2 { margin: 12px 0 10px; font-size: 28px; line-height: 1.05; letter-spacing: -.05em; }
.dialog-form { display: grid; gap: 12px; margin-top: 18px; }
.settings-members-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 54px; padding: 10px 2px; border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: transparent; color: var(--berry); font: inherit; font-size: var(--text-body); font-weight: 850; text-align: left; cursor: pointer; }
.settings-members-link span:last-child { flex: 0 0 auto; font-size: 22px; font-weight: 500; }
.settings-default-name { margin: -4px 0 0; color: var(--muted); font-size: var(--text-small); line-height: 1.5; }
.profiles-dialog, .members-dialog { width: min(100% - 28px, 520px); }
.invite-dialog { width: min(100% - 28px, 440px); }
.profile-list, .member-list, .invite-list { display: grid; gap: 9px; margin-top: 15px; }
.profile-option { display: grid; gap: 3px; width: 100%; padding: 13px 14px; border: 1px solid #e8cbd4; border-radius: 15px; background: #fffdfc; color: var(--ink); text-align: left; cursor: pointer; }
.profile-option.is-current { border-color: var(--berry); background: #fff1f2; box-shadow: inset 0 0 0 1px var(--berry); }
.profile-option strong { font-size: var(--text-body); }
.profile-option span { color: var(--muted); font-size: var(--text-small); }
.member-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 1fr 1fr auto; align-items: center; gap: 8px; padding: 12px; border: 1px solid #eddae0; border-radius: 15px; background: #fffdfc; }
.member-row.is-owner-row { grid-template-columns: minmax(0, 1fr) 1fr 1fr; }
.member-identity { display: grid; gap: 3px; min-width: 0; }
.member-identity strong { overflow: hidden; font-size: var(--text-small); text-overflow: ellipsis; white-space: nowrap; }
.member-identity span { overflow: hidden; color: var(--muted); font-size: var(--text-small); text-overflow: ellipsis; white-space: nowrap; }
.member-row select { min-height: var(--tap-target); padding: 0 8px; font-size: 16px; }
.member-row select:disabled { border-color: transparent; background: #f9eff1; opacity: 1; }
.member-remove { position: relative; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid #eac7d1; border-radius: 9px; background: #fff4f4; color: #a63b56; font-size: 15px; line-height: 1; cursor: pointer; }
.member-remove::before { position: absolute; inset: -6px; content: ''; }
.member-remove svg { display: block; width: 14px; height: 14px; }
.member-remove:disabled { visibility: hidden; }
.subsection-title { margin: 20px 0 -8px; font-size: var(--text-body); }
.invite-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: 12px; background: #fff5ef; font-size: var(--text-small); }
.invite-row button { flex: 0 0 auto; min-height: var(--tap-target); padding: 8px; border: 0; border-radius: 9px; background: none; color: var(--berry); font-size: var(--text-small); font-weight: 800; cursor: pointer; }
.empty-note { margin: 0; padding: 13px; border-radius: 12px; background: #fff5ef; color: var(--muted); font-size: var(--text-small); line-height: 1.5; }
.invite-result { padding-top: 12px; }
.invite-result p { color: var(--muted); font-size: var(--text-small); line-height: 1.6; }
.invite-result input { font-size: 16px; }
.invite-dialog .dialog-form { margin-top: 14px; }
.completion-area { padding-top: 15px; margin-top: 18px; border-top: 1px solid var(--line); }
.completion-area p, .dialog-copy { color: var(--muted); font-size: var(--text-body); line-height: 1.65; }
.text-button { min-height: var(--tap-target); padding: 8px 0; border: 0; background: none; color: var(--berry); font-size: var(--text-small); font-weight: 850; cursor: pointer; text-align: left; }
.danger-button { color: #a63b56; }
.debug-scroll-content { display: grid; gap: 14px; min-width: 0; }
.debug-intro { margin: 0; }
.debug-section { min-width: 0; padding: 14px; border: 1px solid #efd6de; border-radius: 15px; background: #fffdfc; }
.debug-section-title { margin: 0 0 10px; font-size: var(--text-body); line-height: 1.25; }
.debug-section-copy { margin: 9px 0 0; color: var(--muted); font-size: var(--text-small); line-height: 1.5; }
.debug-danger-section { border-color: #e9c3ce; background: #fff5f4; }
.reset-user-data { min-height: var(--tap-target); padding: 4px 0; }
.debug-add-member { margin-top: 0; }
.danger-action { background: #a63b56; box-shadow: none; }
.dialog-actions { display: flex; gap: 10px; margin-top: 20px; }
.dialog-actions > * { flex: 1; }
.full-button { width: 100%; margin-top: 13px; }
.debug-tabs { display: flex; gap: 8px; padding: 4px; margin: 0 0 12px; border-radius: 14px; background: #f3e6e8; }
.debug-tab { flex: 1; min-height: var(--tap-target); border: 0; border-radius: 10px; background: transparent; color: var(--muted); font-size: var(--text-small); font-weight: 800; cursor: pointer; }
.debug-tab.is-active { background: white; color: var(--berry); box-shadow: 0 2px 5px #4d263410; }
.debug-pane { display: grid; gap: 12px; }
.debug-pane .full-button { margin-top: 0; }
.debug-auth-setting { padding: 12px; border: 1px solid #efd6de; border-radius: 12px; background: #fffaf8; }
.debug-toggle-row { display: flex; align-items: center; gap: 9px; }
.debug-toggle-row input { width: 18px; min-height: 18px; margin: 0; accent-color: var(--berry); }
.debug-auth-setting > p { margin: 8px 0 0 27px; color: var(--muted); font-size: var(--text-small); line-height: 1.5; }
.telegram-stub-roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 18px; }
.telegram-stub-roles button { min-height: 64px; padding: 10px 12px; font-size: var(--text-small); line-height: 1.25; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.reset-debug { margin-top: 0; }
.toast { position: fixed; z-index: 5; right: max(18px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); max-width: min(90vw, 400px); padding: 12px 16px; border-radius: 13px; background: #51233e; color: white; font-size: var(--text-small); box-shadow: 0 8px 30px #51233e40; opacity: 0; transform: translateY(8px); pointer-events: none; transition: .18s; }
.members-toast { position: absolute; top: 50%; right: auto; bottom: auto; left: 50%; width: max-content; max-width: calc(100% - 40px); text-align: center; transform: translate(-50%, calc(-50% + 8px)); }
.invite-toast { position: absolute; right: 20px; bottom: 20px; max-width: calc(100% - 40px); }
.debug-toast { position: absolute; right: 20px; bottom: 20px; max-width: calc(100% - 40px); }
.toast.is-visible { opacity: 1; transform: translateY(0); }
.members-toast.is-visible { transform: translate(-50%, -50%); }
button:active:not(:disabled), a:active, [role="button"]:active { transform: scale(.98); }
button:disabled { cursor: not-allowed; opacity: .58; }
.primary-button:disabled, .secondary-button:disabled { box-shadow: none; }
@media (hover: hover) and (pointer: fine) {
  .icon-button:hover { transform: rotate(12deg); }
  .date-picker-button:hover { border-color: #ca819a; background: #fffaf9; }
  .calendar-nav-button:hover { background: #fae7eb; border-color: #d796aa; }
  .calendar-day:hover:not(.is-selected) { background: #fde9e8; color: var(--berry); transform: scale(1.04); }
  .primary-button:hover:not(:disabled) { transform: translateY(-1px); background: var(--berry-dark); }
  .secondary-button:hover:not(:disabled) { background: #ffeff0; }
}
@keyframes pop-in { from { opacity: 0; transform: translateY(13px) scale(.92) rotate(-4deg); } to { opacity: 1; transform: translateY(0) scale(1) rotate(0); } }
@media (max-width: 540px) {
  .page-shell { width: min(100% - 32px, 790px); padding-top: calc(env(safe-area-inset-top) + 10px); }
  .topbar { padding-bottom: 10px; }
  .topbar-actions { gap: 6px; }
  .topbar-link { padding: 8px 9px; font-size: var(--text-small); }
  .hero { width: 100%; padding-top: 20px; }
  .fruit-card { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 12px; padding: 19px 17px 17px; border-radius: 25px; }
  .card-topline { top: 13px; left: 15px; right: 15px; }
  .card-week-group { gap: 5px; }
  .week-kicker, .history-pill { padding: 7px 8px; font-size: 9px; }
  .baby-length { min-height: 27px; padding: 5px 9px; font-size: 12px; }
  .comparison-art, .comparison-art.is-image-art { position: relative; top: auto; right: auto; width: min(190px, 70%); height: 165px; padding: 0; margin: 34px auto 0; grid-row: 1; }
  .comparison-copy { width: 100%; min-height: 0; align-items: center; text-align: center; }
  .comparison-copy h2 { font-size: clamp(31px, 8vw, 40px); }
  .fruit-caption { max-width: 32ch; font-size: var(--text-body); }
  .card-bottom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 12px; margin-top: 2px; padding-top: 14px; }
  .gestation-block { min-width: 0; }
  .gestation-block strong { font-size: 14px; }
  .progress-block { width: auto; }
  .progress-label-row { font-size: 12px; }
  .progress-track { height: 8px; }
  .history-controls { gap: 7px; }
  .history-button { min-height: var(--tap-target); height: auto; padding: 6px 4px; font-size: 12px; }
  .member-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .member-identity { grid-column: 1 / -1; padding-right: 52px; }
  .member-row.is-owner-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .member-row.is-owner-row .member-identity { padding-right: 0; }
  .member-row select { min-width: 0; }
  .member-remove { position: absolute; top: 8px; right: 8px; }
  .dialog-actions > * { padding-right: 12px; padding-left: 12px; }
  .app-dialog { padding: 20px; }
  .settings-dialog, .members-dialog { height: calc(100vh - 28px); height: calc(100dvh - 28px); max-height: none; }
  .settings-dialog[open], .members-dialog[open], .debug-dialog[open] { display: flex; flex-direction: column; overflow: hidden; }
  .settings-dialog .dialog-sticky-header, .members-dialog .dialog-sticky-header, .debug-dialog .dialog-sticky-header { position: relative; flex: 0 0 auto; margin-bottom: 0; background: var(--paper); }
  .settings-dialog .dialog-sticky-header::before, .members-dialog .dialog-sticky-header::before, .debug-dialog .dialog-sticky-header::before { display: none; }
  .debug-dialog { height: calc(100vh - 28px); height: calc(100dvh - 28px); max-height: none; }
  .settings-scroll-content, .members-scroll-content, .debug-scroll-content { min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .settings-scroll-content { display: flex; flex: 1 1 auto; flex-direction: column; gap: 28px; padding-top: 24px; }
  .settings-dialog .dialog-form { flex: 0 0 auto; gap: 18px; margin-top: 0; }
  .settings-dialog .completion-area { flex: 0 0 auto; padding-top: 18px; margin-top: auto; }
  .settings-dialog .completion-area p { margin: 0 0 7px; }
  .members-scroll-content { flex: 1 1 auto; padding: 0 0 18px; }
  .debug-scroll-content { flex: 1 1 auto; align-content: start; padding: 14px 0 18px; }
  .debug-section { padding: 12px; }
  .debug-section-copy, .debug-auth-setting > p { font-size: var(--text-body); }
  .members-dialog #invite-button { flex: 0 0 auto; margin-top: 12px; }
  .calendar-dialog { padding: 16px; }
  .calendar-day { min-height: var(--tap-target); }
  .completion-area p, .dialog-copy, .empty-note, .invite-result p, .debug-auth-setting > p, .debug-reset-copy { font-size: var(--text-body); }
  .invite-result input { font-size: 16px; }
}
@media (max-width: 420px) {
  .member-row, .member-row.is-owner-row { grid-template-columns: minmax(0, 1fr); }
  .member-row .member-identity, .member-row.is-owner-row .member-identity { grid-column: 1; padding-right: 48px; }
  .member-row select { width: 100%; }
}
@media (max-width: 390px) {
  .brand { gap: 7px; font-size: 13px; }
  .topbar-actions { gap: 4px; }
  .topbar-link { padding: 8px; font-size: 12px; }
  .card-bottom { grid-template-columns: minmax(0, 1fr); }
  .progress-block { width: 100%; }
  .history-controls { gap: 5px; }
  .history-button { font-size: 12px; }
  .card-topline { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 4px; }
  .card-week-group { grid-column: 1; min-width: 0; }
  .card-topline .history-pill { position: static; grid-column: 2; justify-self: center; transform: none; padding: 6px 5px; font-size: 8px; letter-spacing: .04em; white-space: nowrap; }
  .baby-length { grid-column: 3; justify-self: end; max-width: 100%; padding: 5px 6px; font-size: 11px; }
}
@media (max-width: 360px) {
  .member-row, .member-row.is-owner-row { grid-template-columns: minmax(0, 1fr); }
  .member-row .member-identity, .member-row.is-owner-row .member-identity { grid-column: 1; padding-right: 48px; }
  .member-identity strong, .member-identity span { overflow: visible; overflow-wrap: anywhere; text-overflow: clip; white-space: normal; }
  .member-row select { width: 100%; }
}
@media (max-width: 360px) {
  .topbar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .topbar-actions { justify-content: flex-end; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important;
  }
}