:root{
  --rose:#e85d75;
  --rose-deep:#d44862;
  --rose-soft:#ffd6de;
  --blush:#fff1f4;
  --teal:#2eb8b8;
  --teal-deep:#1a9a9a;
  --fertile:#b8ecec;
  --period-ink:#3d2a32;
  --period-muted:#8a6d76;
  --period-line:rgba(232,93,117,.12);
}

body.theme-period{
  color:var(--period-ink);
  background-color:var(--blush);
  background-image:
    radial-gradient(1200px 500px at 50% -80px, #ffd0da 0%, transparent 70%),
    linear-gradient(180deg, #ffe8ee 0%, var(--blush) 180px, #fff7f8 100%);
  background-size:auto;
  background-attachment:scroll;
  padding-bottom:72px;
}
body.theme-period .nav{
  background:rgba(255,255,255,.55);
  border-bottom:1px solid var(--period-line);
  padding:8px 12px;
}
body.theme-period .nav-tabs{background:rgba(232,93,117,.1)}
body.theme-period .nav-tab{color:rgba(61,42,50,.55);font-size:14px;padding:8px 0}
body.theme-period .nav-tab.active{
  background:#fff;color:var(--rose);
  box-shadow:0 2px 8px rgba(232,93,117,.16);
}

#page-period{max-width:980px;margin:0 auto;padding:0 4px}
#page-period .card{
  background:#fff;
  border-radius:16px;
  padding:12px 14px;
  margin:8px;
  box-shadow:0 8px 28px rgba(232,93,117,.08);
  border:1px solid rgba(255,255,255,.8);
}
#page-period .card-title{font-size:14px;font-weight:700;margin-bottom:8px}

#page-period .hero-card{
  margin:8px 8px 0;
  background:linear-gradient(160deg, #fff 0%, #fff5f7 100%);
  border-radius:18px;
  padding:12px 14px;
  box-shadow:0 8px 24px rgba(232,93,117,.1);
  border:1px solid rgba(255,255,255,.9);
}
#page-period .hero-main{display:flex;align-items:center;gap:14px}
#page-period .ring{
  --progress:20;
  --ring:#e85d75;
  width:108px;height:108px;border-radius:50%;flex-shrink:0;
  background:conic-gradient(var(--ring) calc(var(--progress) * 1%), #f6e4e8 0);
  display:grid;place-items:center;
  box-shadow:0 0 0 6px rgba(232,93,117,.08);
}
#page-period .ring-inner{
  width:84px;height:84px;border-radius:50%;
  background:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
#page-period .ring-phase{font-size:11px;color:var(--period-muted);font-weight:600}
#page-period .ring-day{font-size:18px;font-weight:800;color:var(--period-ink);line-height:1.15;margin-top:2px}
#page-period .hero-info{flex:1;min-width:0}
#page-period .hero-date{font-size:13px;color:var(--period-muted);font-weight:600}
#page-period .hero-sub{font-size:14px;color:var(--period-ink);line-height:1.4;margin:4px 0 8px}
#page-period .hero-sub b{color:var(--rose-deep);font-weight:700}

#page-period .stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
#page-period .stat-chip{
  background:#fff1f4;border-radius:12px;padding:6px 4px;text-align:center;
}
#page-period .stat-chip .num{font-size:16px;font-weight:800;color:var(--rose-deep);line-height:1.2}
#page-period .stat-chip .num small{font-size:11px;font-weight:700;margin-left:1px}
#page-period .stat-chip .num-sm{font-size:13px;padding-top:2px}
#page-period .stat-chip .lbl{font-size:10px;color:var(--period-muted);margin-top:1px}

#page-period .cal-head{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;
}
#page-period .cal-title{font-size:15px;font-weight:800;cursor:pointer}
#page-period .cal-title:active{opacity:.7}
#page-period .cal-nav{
  width:30px;height:30px;border-radius:50%;border:none;
  background:#fff1f4;color:var(--rose);font-size:20px;line-height:1;cursor:pointer;
}
#page-period .cal-week{
  display:grid;grid-template-columns:repeat(7,1fr);
  text-align:center;font-size:11px;color:var(--period-muted);font-weight:600;
  padding:2px 0 4px;
}
#page-period .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
#page-period .cal-cell{
  height:36px;border-radius:10px;border:none;background:transparent;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-size:13px;font-weight:600;color:var(--period-ink);cursor:pointer;
}
#page-period .cal-cell.out{color:#d4c4c8}
#page-period .cal-cell.today{box-shadow:inset 0 0 0 1.5px var(--rose)}
#page-period .cal-cell.period{background:var(--rose);color:#fff}
#page-period .cal-cell.predicted{background:var(--rose-soft);color:var(--rose-deep)}
#page-period .cal-cell.ovulation{background:var(--teal);color:#fff}
#page-period .cal-cell.fertile{background:var(--fertile);color:var(--teal-deep)}
#page-period .cal-cell .mark{
  width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.7;margin-top:1px;
}
#page-period .cal-legend{
  display:flex;flex-wrap:wrap;gap:8px 12px;justify-content:center;
  margin-top:8px;font-size:11px;color:var(--period-muted);
}
#page-period .cal-legend span{display:flex;align-items:center;gap:4px}
#page-period .dot{width:7px;height:7px;border-radius:50%;display:inline-block}
#page-period .dot.period{background:var(--rose)}
#page-period .dot.predicted{background:var(--rose-soft);box-shadow:inset 0 0 0 1px var(--rose)}
#page-period .dot.ovulation{background:var(--teal)}
#page-period .dot.fertile{background:var(--fertile);box-shadow:inset 0 0 0 1px var(--teal)}

#page-period .upcoming-card .card-title{margin-bottom:8px}
#page-period #upcoming-list{display:flex;gap:8px}
#page-period .up-chip{
  flex:1;min-width:0;
  background:#fff8f9;border-radius:12px;padding:8px 6px;
  display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;
}
#page-period .up-chip .up-icon{font-size:16px;line-height:1}
#page-period .up-chip .up-label{font-size:11px;font-weight:700;color:var(--period-ink)}
#page-period .up-chip .up-date{font-size:11px;color:var(--period-muted);white-space:nowrap}

#page-period .history-head{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:2px;
}
#page-period .history-head .card-title{margin-bottom:0}
#page-period .btn-add{
  border:none;background:#fff1f4;color:var(--rose);font-weight:700;
  font-size:12px;padding:6px 10px;border-radius:999px;cursor:pointer;
}
#page-period .rec-item{
  display:flex;align-items:center;justify-content:space-between;
  padding:9px 0;border-bottom:1px solid var(--period-line);
}
#page-period .rec-item:last-child{border-bottom:none}
#page-period .rec-date{font-size:14px;font-weight:700}
#page-period .rec-meta{font-size:11px;color:var(--period-muted);margin-top:2px}
#page-period .rec-right{display:flex;align-items:center;gap:6px}
#page-period .cycle-pill{
  background:#fff1f4;color:var(--rose-deep);font-size:11px;font-weight:700;
  padding:3px 7px;border-radius:999px;white-space:nowrap;
}
#page-period .btn-del{
  width:28px;height:28px;border-radius:50%;border:none;
  background:rgba(232,93,117,.1);color:var(--rose);font-size:14px;cursor:pointer;
}
#page-period .pagination{display:flex;justify-content:center;align-items:center;gap:10px;padding:8px 0 0}
#page-period .pagination button{
  padding:6px 12px;border:1px solid var(--period-line);background:#fff;
  border-radius:8px;font-size:13px;cursor:pointer;color:var(--rose);
}
#page-period .pagination button:disabled{color:#d4c4c8;cursor:default}
#page-period .pagination span{font-size:12px;color:var(--period-muted)}
#page-period .empty-state{text-align:center;padding:16px 12px;color:#c4b0b5}
#page-period .empty-state .icon{font-size:28px;margin-bottom:6px}
#page-period .empty-state .sub{font-size:12px;margin-top:4px;color:#d4c4c8}
#page-period .loading{text-align:center;padding:16px;color:var(--period-muted);font-size:13px}
#page-period .saved-tag{
  display:inline-block;background:#ffe4ea;color:var(--rose-deep);
  font-size:10px;padding:1px 6px;border-radius:10px;margin-left:4px;font-weight:700;
}

@media (min-width:760px){
  #page-period .main-grid{
    display:grid;
    grid-template-columns:1.15fr .85fr;
    align-items:start;
  }
  #page-period .cal-card{margin-right:4px}
  #page-period .side-col{min-width:0}
  #page-period .side-col .card{margin-left:4px}
  #page-period .cal-cell{height:42px}
  #page-period #upcoming-list{flex-direction:column;gap:6px}
  #page-period .up-chip{
    flex-direction:row;justify-content:flex-start;gap:8px;
    padding:8px 10px;text-align:left;
  }
}

.period-fab{
  display:none;
  position:fixed;right:20px;bottom:24px;z-index:80;
  width:52px;height:52px;border-radius:50%;border:none;
  background:linear-gradient(135deg, var(--rose) 0%, #f0819a 100%);
  color:#fff;font-size:26px;line-height:1;cursor:pointer;
  box-shadow:0 10px 24px rgba(232,93,117,.35);
}
body.theme-period .period-fab{display:block}
.period-fab:active{transform:scale(.94)}

#period-sheet-mask{
  position:fixed;inset:0;background:rgba(40,20,24,.35);z-index:200;
}
#period-sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:210;
  background:#fff;border-radius:22px 22px 0 0;
  padding:10px 18px calc(18px + env(safe-area-inset-bottom));
  box-shadow:0 -12px 40px rgba(61,42,50,.15);
  max-width:520px;margin:0 auto;
}
#period-sheet .sheet-handle{
  width:40px;height:4px;border-radius:4px;background:#ead7db;margin:4px auto 12px;
}
#period-sheet .sheet-title{font-size:18px;font-weight:800;text-align:center;margin-bottom:14px}
#period-sheet .field{display:block;margin:12px 0}
#period-sheet .field > span{display:block;font-size:13px;font-weight:600;color:var(--period-muted);margin-bottom:8px}
#period-sheet .field input{
  width:100%;border:1px solid var(--period-line);border-radius:12px;
  padding:11px 12px;font-size:16px;color:var(--period-ink);outline:none;
  background:#fff8f9;-webkit-appearance:none;
}
#period-sheet .field input:focus{border-color:var(--rose);background:#fff}
#period-sheet .period-stepper{display:flex;align-items:center;justify-content:center;gap:18px}
#period-sheet .step-btn{
  width:42px;height:42px;border-radius:50%;border:1.5px solid var(--rose);
  background:#fff;color:var(--rose);font-size:22px;cursor:pointer;
}
#period-sheet .step-val{font-size:28px;font-weight:800;min-width:36px;text-align:center}
.period-btn-save{
  display:block;width:100%;border:none;border-radius:14px;padding:14px;
  background:linear-gradient(135deg, var(--rose), var(--rose-deep));
  color:#fff;font-size:16px;font-weight:700;cursor:pointer;margin-top:8px;
}
.period-btn-danger{
  display:block;width:100%;border:none;border-radius:14px;padding:12px;
  background:#fff1f4;color:var(--rose-deep);font-size:15px;font-weight:700;
  cursor:pointer;margin-top:8px;
}
.period-btn-cancel{
  display:block;width:100%;border:none;background:transparent;
  color:var(--period-muted);font-size:14px;padding:12px;cursor:pointer;margin-top:2px;
}