:root{
  --menstrual:#e8829a; --menstrual-bg:#fdeef1;
  --follicular:#4fb28f; --follicular-bg:#e9f7f1;
  --ovulatory:#e8a13c; --ovulatory-bg:#fdf3e3;
  --luteal:#8a7bc9; --luteal-bg:#f0edfa;
  --ink:#2c2a3a; --sub:#7a7688; --bg:#faf9fc; --card:#ffffff; --line:#eee7f0;
  --accent: var(--follicular); --accent-bg: var(--follicular-bg);
  --radius:18px; --shadow: 0 6px 20px rgba(60,40,80,0.08);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0;}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; background:var(--bg); color:var(--ink); padding-bottom:84px;}

/* hide gender-specific bits based on body class */
body.mode-male .gender-female{ display:none !important; }
body.mode-female .gender-male{ display:none !important; }

/* ---------- login ---------- */
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;}
.login-card{background:#fff; border-radius:22px; padding:32px 26px; box-shadow:var(--shadow); max-width:360px; width:100%; text-align:center;}
.login-card .login-logo{font-size:40px; margin-bottom:6px;}
.login-card h1{margin:0 0 4px; font-size:22px;}
.login-card .hint{margin-bottom:20px;}
.login-card .field{text-align:left;}
.login-card .error{color:#c0455a; font-size:13px; min-height:18px; margin-top:6px;}

header.top{padding:20px 20px 14px; background:linear-gradient(135deg,var(--accent),var(--accent) 40%, var(--accent-bg)); color:#fff; border-radius:0 0 28px 28px; box-shadow:var(--shadow);}
header.top .greet{font-size:14px; opacity:.9;}
header.top h1{margin:4px 0 12px; font-size:22px;}
.phase-chip{display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.25); padding:6px 14px; border-radius:999px; font-size:13px; font-weight:600;}
.logout-link{color:#fff; opacity:.85; font-size:12px; text-decoration:underline; white-space:nowrap; padding-top:4px;}

main{padding:16px; max-width:520px; margin:0 auto;}
.card{background:var(--card); border-radius:var(--radius); padding:16px 18px; margin-bottom:14px; box-shadow:var(--shadow); border:1px solid var(--line);}
.card h2{margin:0 0 10px; font-size:16px;}
.row{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.xpbar-wrap{background:#f0edf5; border-radius:999px; height:12px; overflow:hidden; margin:8px 0;}
.xpbar{height:100%; background:linear-gradient(90deg,var(--follicular),var(--ovulatory)); border-radius:999px; transition:width .4s;}
.level-badge{width:52px; height:52px; border-radius:50%; background:linear-gradient(135deg,var(--ovulatory),var(--menstrual)); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:18px; flex-shrink:0; box-shadow:0 4px 10px rgba(0,0,0,.15);}
.streak{display:flex; align-items:center; gap:8px; font-size:15px; font-weight:600;}
.streak .flame{font-size:22px;}

.prog-card{border:1px solid var(--line); border-radius:14px; padding:12px 14px; margin-bottom:10px; background:#fff;}
.prog-card .name{font-weight:700; font-size:15px; margin-bottom:2px;}
.prog-card .meta{font-size:12.5px; color:var(--sub);}
.prog-card .desc{margin-top:6px; font-size:13px;}
.prog-card .actions{display:flex; gap:8px; margin-top:10px;}
.link-btn{flex:1; display:block; text-align:center; text-decoration:none; background:var(--accent-bg); color:var(--accent); border-radius:10px; padding:9px 10px; font-size:13px; font-weight:700;}
.pick-btn{flex:1; display:block; text-align:center; background:var(--ink); color:#fff; border:none; border-radius:10px; padding:9px 10px; font-size:13px; font-weight:700; cursor:pointer;}
.tag{display:inline-block; font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; margin-right:6px; background:var(--accent-bg); color:var(--accent);}

.btn{display:inline-block; border:none; border-radius:12px; padding:11px 16px; font-size:14px; font-weight:700; cursor:pointer; text-align:center;}
.btn-primary{background:var(--accent); color:#fff; width:100%;}
.btn-secondary{background:var(--accent-bg); color:var(--accent); width:100%; margin-top:8px;}
.btn-ghost{background:transparent; border:1px solid var(--line); color:var(--ink);}
.btn-small{padding:7px 12px; font-size:12.5px; border-radius:10px;}

.quicklog{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px;}
.quicklog button{background:var(--accent-bg); color:var(--accent); border:none; border-radius:12px; padding:10px 6px; font-size:12.5px; font-weight:700;}
.quicklog button.rest{background:var(--menstrual-bg); color:var(--menstrual);}

nav.bottom{position:fixed; bottom:0; left:0; right:0; background:#fff; border-top:1px solid var(--line); display:flex; justify-content:space-around; padding:8px 4px calc(8px + env(safe-area-inset-bottom)); box-shadow:0 -4px 16px rgba(0,0,0,.05); z-index:50;}
nav.bottom button{background:none; border:none; font-size:11px; color:var(--sub); display:flex; flex-direction:column; align-items:center; gap:2px; padding:4px 8px; flex:1;}
nav.bottom button.active{color:var(--accent); font-weight:700;}
nav.bottom .icon{font-size:20px;}

.screen{display:none;}
.screen.active{display:block;}
.field{margin-bottom:14px;}
.field label{display:block; font-size:13px; color:var(--sub); margin-bottom:5px; font-weight:600;}
.field input, .field select{width:100%; padding:11px 12px; border-radius:10px; border:1px solid var(--line); font-size:15px; background:#fff;}

.badge-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:8px;}
.badge{text-align:center; padding:10px 4px; border-radius:14px; background:#f7f5fb; border:1px solid var(--line); font-size:11px;}
.badge.earned{background:linear-gradient(135deg,var(--ovulatory-bg),var(--menstrual-bg)); border-color:var(--ovulatory);}
.badge .emoji{font-size:26px; display:block; margin-bottom:4px; filter:grayscale(1); opacity:.35;}
.badge.earned .emoji{filter:none; opacity:1;}

.calendar{display:grid; grid-template-columns:repeat(7,1fr); gap:5px; margin-top:8px;}
.calendar .cell{aspect-ratio:1; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:600; color:#fff;}
.calendar .dow{color:var(--sub); background:none; font-weight:700; font-size:10px;}
.legend{display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; font-size:11.5px; color:var(--sub);}
.legend span{display:inline-flex; align-items:center; gap:4px;}
.dot{width:10px; height:10px; border-radius:50%; display:inline-block;}
.empty{color:var(--sub); font-size:13.5px; text-align:center; padding:20px 0;}

.toast{position:fixed; bottom:96px; left:50%; transform:translateX(-50%); background:var(--ink); color:#fff; padding:10px 18px; border-radius:999px; font-size:13.5px; box-shadow:var(--shadow); z-index:200; opacity:0; pointer-events:none; transition:opacity .3s, transform .3s; max-width:86%; text-align:center;}
.toast.show{opacity:1; transform:translateX(-50%) translateY(-6px);}

.history-item{display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--line); font-size:13.5px; gap:8px;}
.history-item:last-child{border:none;}
.history-item .xp{color:var(--follicular); font-weight:700; white-space:nowrap;}
textarea{width:100%; min-height:70px; border-radius:10px; border:1px solid var(--line); padding:10px; font-size:14px; font-family:inherit;}
.hint{font-size:12px; color:var(--sub); margin-top:6px; line-height:1.4;}

.switch-row{display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--line);}
.switch-row:last-child{border:none;}
.switch{position:relative; width:44px; height:26px; flex-shrink:0;}
.switch input{opacity:0; width:0; height:0;}
.slider{position:absolute; cursor:pointer; inset:0; background:#ddd; border-radius:999px; transition:.2s;}
.slider:before{content:""; position:absolute; height:20px; width:20px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s;}
input:checked + .slider{background:var(--accent);}
input:checked + .slider:before{transform:translateX(18px);}
a.file-btn{display:block; text-align:center;}

.modal-overlay{position:fixed; inset:0; background:rgba(30,20,40,.45); display:none; align-items:flex-end; justify-content:center; z-index:300; -webkit-backdrop-filter:blur(2px);}
.modal-overlay.show{display:flex;}
.modal-box{background:#fff; width:100%; max-width:520px; border-radius:22px 22px 0 0; padding:20px 20px calc(20px + env(safe-area-inset-bottom)); max-height:86vh; overflow-y:auto; animation:slideUp .22s ease-out;}
@keyframes slideUp{ from{transform:translateY(30px); opacity:0;} to{transform:translateY(0); opacity:1;} }
.modal-box h3{margin:0 0 12px; font-size:17px;}
.modal-close{position:sticky; top:0; float:right; background:#f0edf5; border:none; border-radius:50%; width:30px; height:30px; font-size:15px; color:var(--sub); cursor:pointer;}
.pick-list{display:flex; flex-direction:column; gap:8px; margin:10px 0;}
.pick-item{display:flex; align-items:center; justify-content:space-between; gap:10px; border:1px solid var(--line); border-radius:12px; padding:10px 12px; cursor:pointer; background:#fbfaff;}
.pick-item.selected{border-color:var(--accent); background:var(--accent-bg);}
.pick-item .pi-name{font-weight:700; font-size:13.5px;}
.pick-item .pi-meta{font-size:11.5px; color:var(--sub);}

.stepper{display:flex; align-items:center; gap:12px; justify-content:center; margin:8px 0;}
.stepper button{width:38px; height:38px; border-radius:50%; border:none; background:var(--accent-bg); color:var(--accent); font-size:18px; font-weight:700;}
.stepper .val{font-size:22px; font-weight:700; min-width:60px; text-align:center;}
.check-row{display:flex; align-items:center; gap:10px; padding:8px 0; font-size:14px;}
.check-row input{width:20px; height:20px;}
.metric-block{margin-bottom:16px;}
.metric-block .label-row{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px;}
.metric-block .label-row b{font-size:13.5px;}
.metric-block .label-row span{font-size:12px; color:var(--sub);}
.mini-input-row{display:flex; gap:8px;}
.mini-input-row input{flex:1; padding:10px; border-radius:10px; border:1px solid var(--line); font-size:15px;}
.mini-input-row button{background:var(--accent); color:#fff; border:none; border-radius:10px; padding:0 16px; font-weight:700; font-size:13px;}
.history-history{margin-top:10px;}
.period-row{display:flex; justify-content:space-between; font-size:13px; padding:6px 0; border-bottom:1px solid var(--line);}

.habit-row{display:flex; align-items:center; justify-content:space-between; gap:10px; border:1px solid var(--line); border-radius:14px; padding:12px 14px; margin-bottom:10px;}
.habit-row .hleft{display:flex; align-items:center; gap:10px;}
.habit-row .hemoji{font-size:22px;}
.habit-row .hname{font-weight:700; font-size:14px;}
.habit-row .hxp{font-size:11.5px; color:var(--sub);}
.habit-row .hcheck{width:26px; height:26px; border-radius:50%; border:2px solid var(--line); background:#fff; font-size:15px; cursor:pointer;}
.habit-row .hcheck.done{background:var(--follicular); border-color:var(--follicular); color:#fff;}
.habit-row .hdel{background:none; border:none; color:#c0455a; font-size:12px; cursor:pointer;}

.photo-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:12px;}
.photo-grid img{width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:10px; border:1px solid var(--line);}
.photo-grid .pdate{font-size:10px; color:var(--sub); text-align:center; margin-top:2px;}

.banner{background:linear-gradient(135deg,var(--ovulatory-bg),var(--menstrual-bg)); border:1px solid var(--ovulatory); border-radius:16px; padding:14px 16px; margin-bottom:14px;}
.banner .btitle{font-weight:700; font-size:14px; margin-bottom:4px;}
.banner .btext{font-size:13px; color:var(--ink); margin-bottom:10px;}
.banner .bactions{display:flex; gap:8px;}
.banner button{border:none; border-radius:10px; padding:8px 14px; font-size:13px; font-weight:700; cursor:pointer;}
.banner .bdo{background:var(--ink); color:#fff;}
.banner .bdismiss{background:#fff; color:var(--sub);}