body {
 font-family: Arial, sans-serif;
 background: #f6f6f6;
 margin: 0;
}

.container {
 max-width: 760px;
 margin: auto;
 background: #fff;
 padding: 20px;
}

h1, h2 {
 text-align: center;
 color: #c4002f;
}

label {
 font-weight: bold;
 margin-top: 15px;
 display: block;
}

input {
 width: 100%;
 padding: 10px;
 margin-top: 5px;
}

.calculate {
 background: #c4002f;
 color: #fff;
 border: none;
 padding: 12px;
 width: 100%;
 margin-top: 20px;
 cursor: pointer;
}

.tabs {
 display: flex;
 gap: 10px;
 margin-bottom: 20px;
}

.tab {
 flex: 1;
 padding: 10px;
 background: #eee;
 border: none;
 cursor: pointer;
}

.tab.active {
 background: #c4002f;
 color: #fff;
}

.results {
 background: #fde8ee;
 padding: 15px;
 margin-top: 20px;
 border-radius: 8px;
}

.calendar {
 display: grid;
 grid-template-columns: repeat(7, 1fr);
 gap: 5px;
 margin-top: 15px;
}

.calendar div {
 padding: 8px;
 text-align: center;
 background: #f2f2f2;
 border-radius: 4px;
 font-size: 14px;
}

.period {
 background: #c4002f;
 color: #fff;
}

.fertile {
 background: #ffb3c6;
}

.ovulation {
 background: #ff6f91;
 color: #fff;
}

.breadcrumb {
 padding: 10px;
 font-size: 14px;
}

.ad-space {
 height: 90px;
 margin: 30px 0;
}

.medical-note {
 font-size: 13px;
 color: #555;
}

.seo-content {
  margin-top: 30px;
  background: #fff;
  padding: 25px;
  border-radius: 8px;
  line-height: 1.7;
  font-size: 15px;
}

.seo-content h2, .seo-content h3 {
  color: #c4002f;
  margin-top: 20px;
}

.seo-content h4 {
  color: #900022;
  margin-top: 15px;
}

.seo-content ul, .seo-content ol {
  margin-left: 20px;
  margin-top: 10px;
}

.seo-content p {
  margin-top: 10px;
}