:root{
  --cream:#FBF5F1;--paper:#FFFDFB;--blush:#F4D4DF;--rose:#E68FA8;--rose-deep:#D06485;
  --wine:#7C3A58;--plum:#5A2A44;--green:#7FA66F;--green-soft:#DCEAD2;
  --ink:#3D2A33;--muted:#9A8088;--line:#EBD9DF;--gold:#C8956A;
  --shadow:0 8px 30px -10px rgba(92,42,68,.28);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{overscroll-behavior-y:contain}
body{font-family:'Karla',sans-serif;background:var(--cream);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(circle at 10% 4%,rgba(244,212,223,.55),transparent 38%),radial-gradient(circle at 92% 96%,rgba(220,234,210,.5),transparent 40%);
  padding:env(safe-area-inset-top) 0 calc(72px + env(safe-area-inset-bottom));max-width:560px;margin:0 auto;min-height:100vh;}
h1,h2,h3,h4{font-family:'Fraunces',serif;font-weight:500;letter-spacing:-.01em}

/* login */
.login{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--cream);z-index:100}
.login-card{background:var(--paper);border:1px solid var(--line);border-radius:24px;padding:32px 26px;box-shadow:var(--shadow);max-width:380px;width:100%;text-align:center}
.login-card .heart.big{font-size:2.6rem;color:var(--rose-deep);animation:beat 2.4s infinite}
.login-card h1{font-size:1.7rem;color:var(--plum);margin:10px 0 4px}
.login-card h1 em{font-style:italic;color:var(--rose-deep)}
.login-card .sub{color:var(--muted);font-size:.9rem;margin-bottom:20px}
.login-card .field{text-align:left}
.err{color:#C0392B;font-size:.86rem;margin-top:10px;min-height:1em}

@keyframes beat{0%,100%{transform:scale(1)}12%{transform:scale(1.18)}24%{transform:scale(1)}}
.heart{display:inline-block;color:var(--rose-deep);animation:beat 2.4s ease-in-out infinite}
.heart svg{width:1em;height:1em;fill:currentColor;vertical-align:-.12em;display:inline-block}
.splash-heart svg{width:1em;height:1em;fill:currentColor;display:block}

header{text-align:center;padding:26px 18px 14px}
header .kick{font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:var(--rose-deep);font-weight:700}
header h1{font-size:2rem;color:var(--plum);line-height:1.05;margin:.25em 0}
header h1 em{font-style:italic;color:var(--rose-deep)}

.install{display:none;margin:0 18px 16px;background:linear-gradient(135deg,#FBE3EA,#F4D4DF);border:1.5px solid var(--blush);border-radius:16px;padding:14px 16px;align-items:center;gap:12px}
.install.show{display:flex}
.install p{font-size:.86rem;color:var(--wine);flex:1}
.install b{display:block;font-family:'Fraunces',serif}

.panel{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:20px;box-shadow:var(--shadow);margin:0 14px 16px}
.panel h2{font-size:1.3rem;color:var(--wine);margin-bottom:3px;display:flex;gap:9px;align-items:center}
.panel .sub{color:var(--muted);font-size:.86rem;margin-bottom:14px}

.tabbar{position:fixed;bottom:0;left:0;right:0;max-width:560px;margin:0 auto;background:rgba(255,253,251,.96);backdrop-filter:blur(10px);border-top:1px solid var(--line);display:flex;justify-content:space-around;padding:8px 0 calc(8px + env(safe-area-inset-bottom));z-index:40}
.tab{flex:1;background:none;border:none;font-family:inherit;color:var(--muted);font-size:.68rem;font-weight:700;letter-spacing:.04em;display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px;cursor:pointer;transition:.2s}
.tab .ti{font-size:1.4rem;line-height:1}
.tab.active{color:var(--rose-deep)}
.view{display:none;animation:fade .25s ease}
.view.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

label{display:block;font-size:.74rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--wine);margin-bottom:6px}
input,select{width:100%;padding:13px 14px;border:1.5px solid var(--line);border-radius:13px;font-family:inherit;font-size:1.05rem;color:var(--ink);background:var(--cream);transition:.2s}
input:focus{outline:none;border-color:var(--rose);box-shadow:0 0 0 4px rgba(230,143,168,.18)}
.field{margin-bottom:14px}
.btn{width:100%;background:var(--rose-deep);color:#fff;border:none;padding:15px;border-radius:14px;font-family:inherit;font-weight:700;font-size:1rem;cursor:pointer;transition:.2s}
.btn:active{transform:scale(.98)}
.btn.ghost{background:var(--cream);color:var(--wine);border:1.5px solid var(--line)}
.btn.sm{width:auto;padding:11px 18px;font-size:.9rem}
.ic{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.14em;display:inline-block}
h2 .ic,h3 .ic{stroke-width:1.8;margin-right:.12em;color:var(--rose-deep)}
.btn.on{background:#E4F0DA;color:#4F7B3F;border:1.5px solid #B9D6A8;opacity:1}
.btn.on:disabled{cursor:default}
/* tema azul do marido — troca só a identidade (botões/abas/cabeçalho/coração),
   preserva as cores do calendário (menstruação=--rose, fértil, ovulação) */
body.marido{
  --rose-deep:#3E78B2;
  --wine:#2B5478;
  --blush:#D4E4F2;
  background-image:radial-gradient(circle at 10% 4%,rgba(180,210,240,.5),transparent 38%),radial-gradient(circle at 92% 96%,rgba(210,230,245,.45),transparent 40%);
}
/* seletor de acesso (♀ esposa / ♂ marido) */
.who{display:flex;gap:10px;margin:6px 0 14px}
.who-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;padding:13px;border-radius:14px;border:1.5px solid var(--line);background:var(--paper);font-family:inherit;font-weight:700;font-size:.95rem;color:var(--wine);cursor:pointer;transition:.2s}
.who-btn .sym{font-size:1.7rem;line-height:1}
.who-btn.wife .sym{color:#D06485}
.who-btn.husband .sym{color:#5B8DB8}
.who-btn:active{transform:scale(.97)}
.who-btn.sel{background:#fff;box-shadow:var(--shadow)}
.who-btn.wife.sel{border-color:#D06485}
.who-btn.husband.sel{border-color:#5B8DB8}
/* crachá do papel no cabeçalho */
.role-badge{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:4px 13px;border-radius:999px;font-size:.82rem;font-weight:700;background:var(--cream);border:1px solid var(--line)}
.role-badge .sym{font-size:1.05rem}
.role-badge.wife,.role-badge.wife .sym{color:#D06485}
.role-badge.husband,.role-badge.husband .sym{color:#5B8DB8}
/* splash de abertura */
.splash{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#FBF5F1,#F4D4DF);transition:opacity .5s ease,visibility .5s}
.splash.hide{opacity:0;visibility:hidden;pointer-events:none}
.splash-card{display:flex;flex-direction:column;align-items:center;gap:20px;animation:splashIn .6s ease both}
.splash-heart{width:122px;height:122px;border-radius:50%;background:rgba(255,255,255,.5);
  display:flex;align-items:center;justify-content:center;font-size:62px;color:#D06485;animation:beat 1.2s ease-in-out infinite}
.splash-name{font-family:'Fraunces',serif;font-size:1.5rem;font-weight:500;color:#7C3A58;letter-spacing:-.01em}
.splash-name em{color:#D06485;font-style:italic}
.splash-dots{display:flex;gap:7px;margin-top:4px}
.splash-dots span{width:8px;height:8px;border-radius:50%;background:#D06485;opacity:.4;animation:dot 1.2s ease-in-out infinite}
.splash-dots span:nth-child(2){animation-delay:.2s}
.splash-dots span:nth-child(3){animation-delay:.4s}
@keyframes beat{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
@keyframes dot{0%,100%{opacity:.4;transform:translateY(0)}50%{opacity:1;transform:translateY(-5px)}}
@keyframes splashIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.btn.apple{background:#000;color:#fff;border:none;display:flex;align-items:center;justify-content:center;gap:9px}
.btn.apple svg{width:16px;height:19px;fill:#fff;display:block;margin-top:-2px}
.btn.apple:active{opacity:.85}

.today-hero{margin:0 14px 16px;border-radius:22px;padding:24px 22px;color:#fff;position:relative;overflow:hidden;box-shadow:var(--shadow)}
.today-hero .tlbl{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;opacity:.85;font-weight:700}
.today-hero h2{font-family:'Fraunces',serif;font-size:1.7rem;color:#fff;margin:6px 0 4px;line-height:1.1}
.today-hero p{font-size:.92rem;opacity:.95}
.th-girl{background:linear-gradient(135deg,#D06485,#9B3F6B)}
.th-fertile{background:linear-gradient(135deg,#7FA66F,#5E8A4F)}
.th-avoid{background:linear-gradient(135deg,#C8956A,#A8743F)}
.th-period{background:linear-gradient(135deg,#E68FA8,#C95A7E)}
.th-off{background:linear-gradient(135deg,#9A8088,#6E5860)}
.th-emoji{font-size:2.2rem;margin-bottom:8px}
.th-act{margin-top:14px;display:flex;gap:10px}
.th-act button{flex:1;background:rgba(255,255,255,.22);border:1.5px solid rgba(255,255,255,.4);color:#fff;padding:11px;border-radius:12px;font-family:inherit;font-weight:700;font-size:.88rem;cursor:pointer}
.th-act button.done{background:#fff;color:var(--wine)}

.chips{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.chip{border-radius:15px;padding:13px 14px}
.chip .l{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--wine);opacity:.8}
.chip .v{font-family:'Fraunces',serif;font-size:1.05rem;color:var(--plum);margin-top:2px}
.c-girl{background:linear-gradient(135deg,#F3DEEA,#EBC9DD)}
.c-ov{background:linear-gradient(135deg,#FBEFD8,#F6E2C4)}
.c-fert{background:linear-gradient(135deg,#E4F0DA,#DCEAD2)}
.c-next{background:linear-gradient(135deg,#FBE3EA,#F4D4DF)}

.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.cal-head h3{font-size:1.2rem;color:var(--wine);text-transform:capitalize}
.nav-btn{background:var(--cream);border:1.5px solid var(--line);width:40px;height:40px;border-radius:50%;cursor:pointer;font-size:1.1rem;color:var(--wine)}
.nav-btn:active{background:var(--blush)}
.weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-bottom:5px}
.weekdays div{text-align:center;font-size:.66rem;font-weight:700;text-transform:uppercase;color:var(--muted)}
.days{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.day{aspect-ratio:1;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:.92rem;font-weight:500;position:relative;background:var(--cream);border:1.5px solid transparent;cursor:pointer}
.day:active{transform:scale(.94)}
.day.empty{background:transparent;cursor:default}
.day.today{border-color:var(--plum);font-weight:700}
.day.period{background:var(--rose);color:#fff}
.day.fertile{background:var(--green-soft)}
.day.girl{background:linear-gradient(135deg,#F0CBE0,#E8B3D4);color:var(--plum);font-weight:700}
.day.avoid{background:#F6E2C4}
.day.ovul{background:var(--gold);color:#fff;font-weight:700}
.day .sx{position:absolute;bottom:1px;font-size:.62rem;line-height:1}
.legend{display:flex;flex-wrap:wrap;gap:10px 14px;margin-top:16px;font-size:.78rem}
.legend span{display:flex;align-items:center;gap:6px}
.sw{width:14px;height:14px;border-radius:4px;display:inline-block}

.sheet-bg{position:fixed;inset:0;background:rgba(58,30,46,.4);backdrop-filter:blur(2px);z-index:60;opacity:0;pointer-events:none;transition:.25s}
.sheet-bg.show{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:0;right:0;bottom:0;max-width:560px;margin:0 auto;background:var(--paper);border-radius:26px 26px 0 0;padding:22px 22px calc(28px + env(safe-area-inset-bottom));z-index:61;transform:translateY(100%);transition:.3s cubic-bezier(.22,1,.36,1);box-shadow:0 -10px 40px rgba(92,42,68,.25)}
.sheet.show{transform:translateY(0)}
.sheet .grab{width:40px;height:4px;background:var(--line);border-radius:2px;margin:0 auto 16px}
.sheet h3{font-size:1.35rem;color:var(--wine);text-transform:capitalize}
.sheet .tag{display:inline-block;font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 12px;border-radius:999px;margin:8px 0 12px;background:var(--blush);color:var(--wine)}
.sheet .guide{font-size:.98rem;color:var(--ink);background:var(--cream);border-radius:14px;padding:14px 16px;margin-bottom:16px}
.sheet .sxbtn{width:100%;padding:15px;border-radius:14px;border:1.5px solid var(--rose);background:var(--paper);color:var(--rose-deep);font-family:inherit;font-weight:700;font-size:1rem;cursor:pointer;transition:.2s}
.sheet .sxbtn.on{background:var(--rose-deep);color:#fff;border-color:var(--rose-deep)}

.tactic{display:flex;gap:13px;padding:14px 0;border-bottom:1px solid var(--line)}
.tactic:last-child{border-bottom:none}
.tactic .ic{flex-shrink:0;width:40px;height:40px;border-radius:50%;background:var(--blush);display:flex;align-items:center;justify-content:center;font-size:1.2rem}
.tactic h4{font-family:'Fraunces',serif;font-weight:600;color:var(--wine);font-size:1rem}
.tactic p{font-size:.88rem;color:var(--ink);opacity:.85}

.disc{background:linear-gradient(135deg,#FFF6E8,#FBEFD8);border:1.5px solid #F0D9B0;border-radius:16px;padding:16px 18px;margin:0 14px 16px}
.disc h3{color:var(--gold);font-size:1.02rem;margin-bottom:5px}
.disc p{font-size:.85rem;color:#7a5e3a}.disc p+p{margin-top:6px}

.log-list{list-style:none;display:flex;flex-direction:column;gap:8px;margin-top:8px;max-height:296px;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-right:2px}
.log-list li{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:10px 14px}
.log-list .date{font-weight:700;color:var(--wine);font-size:.92rem;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.log-list .gap{font-size:.78rem;color:var(--muted);flex:none;margin-left:auto}
.del{background:none;border:none;color:var(--rose-deep);cursor:pointer;font-size:1.1rem;padding:2px 6px;flex:none}
.prefs{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.prefs .pref{display:flex;align-items:center;justify-content:space-between;gap:10px}
.prefs .pref label{flex:1;min-width:0;cursor:pointer;font-size:.9rem;font-weight:700;color:var(--wine)}
.prefs .pref label small{display:block;font-weight:400;color:var(--muted);font-size:.72rem;margin-top:3px}
.prefs .pref-ctl{display:flex;align-items:center;gap:10px;flex:none}
.prefs .tbtn{background:var(--cream);border:1px solid var(--line);color:var(--wine);border-radius:999px;padding:5px 12px;font-size:.74rem;font-weight:700;cursor:pointer}
.prefs .tbtn:active{transform:scale(.96)}
.prefs .pref input{flex:none;width:22px;height:22px;accent-color:var(--rose-deep)}
.empty-msg{color:var(--muted);font-style:italic;font-size:.9rem;padding:6px 0}
.note{font-size:.8rem;color:var(--muted);margin-top:10px;line-height:1.5}
.flash{position:fixed;bottom:84px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--wine);color:#fff;padding:11px 22px;border-radius:999px;font-weight:700;font-size:.9rem;opacity:0;transition:.3s;pointer-events:none;z-index:80;box-shadow:var(--shadow)}
.flash.show{opacity:1;transform:translateX(-50%) translateY(0)}