:root{
  --blue-1: #e9f1ff;
  --blue-2: #d8e8ff;
  --accent: #2575fc;
  --accent-dark: #1f5ed6;
  --card-bg: #ffffff;
  --glass: rgba(255,255,255,0.6);
}

* { box-sizing: border-box; }
body, html {
  height: 100%;
  font-family: 'Poppins', sans-serif;
  background: linear-gradient(135deg, #f8fafc 20%, #e2ecff 100%);
}

/* main card */
.calculator-card {
  width: 100%;
  max-width: 720px;
  border-radius: 16px;
  transition: transform .25s ease, box-shadow .25s ease;
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(250,253,255,0.9));
  border: 1px solid rgba(37,117,252,0.06);
  transform: translateY(0);
}
.calculator-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(37,117,252,0.12); }

.title {
  font-weight: 600;
  color: #213057;
  letter-spacing: 0.2px;
}

/* toggle styles */
.toggle-mode .btn {
  border-radius: 999px;
  padding: 8px 18px;
  font-weight: 600;
  color: var(--accent-dark);
  border-width: 1.5px;
  transition: all .18s ease;
}
.toggle-mode .btn-check:checked + .btn,
.toggle-mode .btn:active {
  background: linear-gradient(90deg, #6a11cb, var(--accent));
  color: #fff;
  box-shadow: 0 6px 18px rgba(37,117,252,0.14);
}

/* age grid */
.age-grid {
  grid-template-columns: repeat(3, 1fr);
}
.age-btn {
  text-align: center;
  padding: 10px 8px;
  border-radius: 12px;
  min-height: 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  font-weight: 600;
  color: #11407a;
  background: transparent;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  border-width: 1.5px;
}
.age-btn small { font-weight: 400; color: #2b4b7a; opacity: .8; font-size: .78rem; }
.age-btn:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(37,117,252,0.06); }
.age-btn.active, .age-btn:active {
  background: linear-gradient(90deg, rgba(98,65,194,0.12), rgba(37,117,252,0.06));
  border-color: rgba(37,117,252,0.3);
  color: var(--accent-dark);
}

/* time selects */
.time-select { border-radius: 10px; min-width: 0; }
.time-area label { display: block; margin-bottom: 6px; }

/* calculate button */
.btn-calc {
  background: linear-gradient(90deg, #2565f9, #4a35d7);
  color: #fff;
  font-weight: 700;
  border-radius: 12px;
  padding: 12px;
  border: none;
  box-shadow: 0 8px 22px rgba(37,117,252,0.12);
}
.btn-calc:hover { transform: translateY(-2px); }

/* result box */
.result-box {
  border-radius: 12px;
  border-left: 4px solid var(--accent);
  background: linear-gradient(180deg, var(--blue-1), rgba(245,250,255,0.85));
  animation: fadeIn .35s ease both;
}
.result-box h5{ color:#1b2b4b; font-weight:600; }
.result-box p { color:#0e2746; margin-bottom: .25rem; }

.cycle-list small{ color:#3b5f99; }

footer { color: #6b7a99; }

/* responsive tweaks */
@media (max-width: 768px) {
  .age-grid { grid-template-columns: repeat(3,1fr); gap: .5rem; }
  .calculator-card { padding: 20px; }
}
@media (max-width: 480px) {
  .age-grid { grid-template-columns: repeat(2,1fr); }
  .time-select { font-size: .95rem; }
}

/* small animation */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}