/* Afri-Mama V14 — real mother UI. No screenshot, mock phone chassis, or fake status-bar markup. */
:root { --mother-pink: #ff0077; --mother-plum: #500033; --mother-text: #17121b; --mother-muted: #777080; --mother-line: #f1dce7; --mother-radius: 22px; }
.wf-app .wf-viewport { width:100%; min-height:100dvh; padding:0; display:flex; align-items:stretch; justify-content:center; background: #fff9fc; }
.wf-app .wf-workspace { width:100%; min-width:0; max-width:none; height:100dvh; min-height:0; border:0; border-radius:0; box-shadow:none; display:flex; flex-direction:column; position:relative; overflow:hidden; background:#fff; }
.wf-app .wf-header { flex-shrink:0; min-height:65px; padding-inline:max(16px,env(safe-area-inset-left,0px)); border-bottom:1px solid #fff0f6; }
.wf-app .wf-page { overscroll-behavior:contain; scroll-behavior:smooth; padding-bottom:calc(34px + env(safe-area-inset-bottom,0px)); }
.wf-app .wf-page > :last-child { margin-bottom:22px; }
.wf-app .wf-bottom { min-height:72px; padding-bottom:env(safe-area-inset-bottom,0px); }
.wf-app .wf-bottom a,.wf-app .wf-bottom button { flex:1; min-width:0; min-height:55px; display:flex; justify-content:center; align-items:center; flex-direction:column; gap:5px; font:500 10.5px/1.2 Roboto,system-ui,sans-serif; color:#6e6674; border:0; background:none; padding:5px 3px; }
.wf-app .wf-bottom .wf-bottom-more svg { width:21px; height:21px; }
.wf-app .wf-bottom a.active { color:var(--mother-pink); font-weight:800; }
.wf-app .wf-logo img { background:none!important; box-shadow:none!important; }
.wf-app .wf-primary { background:#ff0077; color:#fff; border-radius:999px; }
.wf-app .wf-shortcuts a { transition:transform .15s, background .15s; }
.wf-app .wf-shortcuts a:active { transform:scale(.97); background:#ffe0ed; }
.wf-more-dialog { border:0; width:min(620px,100%); max-width:100%; max-height:min(85dvh,780px); padding:18px 18px calc(15px + env(safe-area-inset-bottom)); margin:auto auto 0; border-radius:28px 28px 0 0; color:var(--mother-text); background:#fff9fc; box-shadow:0 -15px 80px rgba(80,0,51,.2); overflow-y:auto; overscroll-behavior:contain; }
.wf-more-dialog::backdrop { background:rgba(33,0,21,.55); backdrop-filter:blur(3px); }
.wf-more-top { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.wf-more-top h2 { margin:0; font:800 20px/1.3 Roboto,Arial,sans-serif; letter-spacing:-.025em; }
.wf-more-top button { border:0; width:40px; height:40px; border-radius:50%; background:#ffe1ee; color:#9e0054; font-size:23px; }
.wf-more-dialog > p { color:var(--mother-muted); font-size:12px; margin:5px 0 14px; }
.wf-more-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.wf-more-links a { min-width:0; min-height:70px; padding:12px 10px; display:flex; align-items:center; gap:9px; background:#fff; border:1px solid #f5e5ed; border-radius:15px; color:#3a2431; font-size:12px; font-weight:650; }
.wf-more-links a .ico:first-child { color:#ff0077; }
.wf-more-links a .ico:last-child { margin-left:auto; color:#b1a1ab; }
.wf-more-links a span:nth-child(2) { flex:1; min-width:0; }
.wf-more-links a:active { background:#ffe1ee; }
@media(min-width:760px) {
 .wf-app .wf-viewport { background:linear-gradient(145deg,#fff3f9,#fbe1ee); padding:0 22px; }
 .wf-app .wf-workspace { max-width:1200px; box-shadow:0 15px 55px rgba(80,0,51,.07); border:1px solid #f4deea; }
 .wf-app .wf-header { height:86px; min-height:86px; padding:0 40px; }
 .wf-app .wf-header h1 { font-size:22px; }
 .wf-app .wf-logo img { width:176px; max-height:68px; }
 .wf-app .wf-page { padding:24px clamp(26px,5vw,74px) 30px; max-width:100%; }
 .wf-app .wf-page--home,.wf-app .wf-page--period_tracker,.wf-app .wf-page--health,.wf-app .wf-page--appointments,.wf-app .wf-page--shop { display:block; }
 .wf-app .wf-greeting,.wf-app .wf-pregnancy-banner,.wf-app .wf-shortcuts,.wf-app .wf-upcoming { max-width:740px; margin-left:auto; margin-right:auto; }
 .wf-app .wf-pregnancy-banner { min-height:205px; }
 .wf-app .wf-shortcuts a { min-height:118px; }
 .wf-app .wf-calendar,.wf-app .wf-month,.wf-app .wf-segments,.wf-app .wf-legend,.wf-app .wf-page--period_tracker > .wf-primary,.wf-app .wf-page--period_tracker > .wf-panel { max-width:710px; margin-left:auto; margin-right:auto; }
 .wf-app .wf-page--messages { max-width:820px; width:100%; margin:0 auto; }
 .wf-app .wf-bottom { min-height:72px; max-width:760px; margin:0 auto; width:100%; border-left:1px solid #f5e7ed; border-right:1px solid #f5e7ed; }
}
@media(max-width:340px) {.wf-more-links{gap:6px}.wf-more-links a{font-size:10px;min-height:60px;padding:8px 6px}.wf-more-top h2{font-size:18px}}
/* Guest screens are full responsive web layouts, not a simulated device frame. */
.wf-public .wf-auth,.wf-public .wf-onboard{ box-shadow:none; }
@media(min-width:700px){ .wf-public .wf-auth,.wf-public .wf-onboard{ min-height:100dvh; height:100dvh; border-radius:0; } }

.wf-public .wf-onboard,.wf-public .wf-auth { max-width:100%; width:100%; }
.wf-public .wf-slide { max-width:460px; margin:0 auto; }
.wf-public .wf-onboard {background:linear-gradient(135deg,#fff,#fff2f8)}
.wf-public .wf-auth-register { max-width:520px; margin:0 auto; }
.wf-public .wf-auth-login { max-width:none; }
.wf-public .wf-login-card { width:min(92%,440px); left:50%; right:auto; transform:translateX(-50%); }
.wf-login-secure { font-size:11px; color:var(--mother-muted); }
.wf-dates .wf-forecast-day{background:#ffe1ee;color:#b80061}
.wf-dates .wf-ovulation-day{background:#dbf4e4;color:#116f40}
.wf-dates .wf-fertile-day{border:1px solid #caa5f0;color:#7848a0}
.wf-dates .wf-period-day{background:#ff0077;color:#fff}
.wf-dates .wf-today{box-shadow:0 0 0 2px #fff,0 0 0 4px #ff0077}
@media(min-width:700px){.wf-public .wf-login-photo{width:100%;}.wf-public .wf-auth-login{width:100%;}}