/* General Reset */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:system-ui,Arial,sans-serif;background:#f9f9f9;color:#222;line-height:1.6;transition:background .3s,color .3s}
header{padding:1rem;display:flex;justify-content:space-between;align-items:center;background:#007bff;color:#fff}
header h1{font-size:1.5rem}
main{max-width:900px;margin:2rem auto;padding:1rem}
.tool-section{background:#fff;border-radius:8px;padding:1rem;margin-bottom:2rem;box-shadow:0 2px 5px rgba(0,0,0,.1)}
.tool-section h2{margin-bottom:1rem;font-size:1.25rem;color:#007bff}
.input-area{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin-bottom:1rem}
.input-area label{flex:1 1 100px;font-weight:600}
input[type=date]{padding:.5rem;border:1px solid #ccc;border-radius:6px;flex:1 1 160px}
input[type=date]:focus{outline:3px solid rgba(0,123,255,.18);outline-offset:2px}
.btn-primary,.btn-secondary{padding:.5rem 1rem;border-radius:6px;border:none;cursor:pointer;font-size:.95rem;transition:background .3s}
.btn-primary{background:#0069d9;color:#fff}
.btn-primary:hover{background:#0053a6}
.btn-secondary{background:#eee;color:#333}
.btn-secondary:hover{background:#ddd}
.result-area{opacity:0;transform:translateY(8px);transition:opacity .35s ease,transform .35s ease;margin-top:1rem;padding:1rem;background:#fafafa;border:1px solid #ddd;border-radius:6px}
.result-area.show{opacity:1;transform:translateY(0)}
.result-area ul{list-style:none}
.result-area li{padding:.25rem 0}
.action-area{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem}
.error{color:#b00020;font-weight:600}
.birthday-reminder{padding:.5rem;background:#ffe066;border-radius:6px;margin-bottom:.5rem;text-align:center;font-weight:700}
/* Use Cases */
.use-cases article{margin-bottom:1rem}
.use-cases h3{margin:.5rem 0}
/* FAQ */
.faq-section{margin-top:2rem}
.faq-item{margin-bottom:1rem}
.faq-question{background:#f1f1f1;padding:.75rem;width:100%;text-align:left;border:none;border-radius:6px;font-weight:600;cursor:pointer;transition:background .3s}
.faq-question:hover,.faq-question:focus{background:#e1e1e1;outline:3px solid rgba(0,123,255,.18)}
.faq-answer{margin-top:.5rem;padding:.5rem .75rem;background:#fff;border-left:3px solid #007bff;border-radius:4px}
/* Footer */
footer{text-align:center;padding:1rem;margin-top:2rem;background:#f1f1f1}
/* Dark Mode */
body.dark-mode{background:#181818;color:#f1f1f1}
body.dark-mode header{background:#222}
body.dark-mode .tool-section{background:#222;border:1px solid #444}
body.dark-mode .result-area{background:#2a2a2a;border:1px solid #444}
body.dark-mode .faq-question{background:#333;color:#fff}
body.dark-mode .faq-answer{background:#2a2a2a;border-left-color:#4dabf7}
body.dark-mode .birthday-reminder{background:#ffda79;color:#111}
/* Responsive */
@media(max-width:700px){
  .input-area{flex-direction:column;align-items:stretch}
  .action-area{justify-content:stretch}
}
/* Related Tools Section */
.related-tools {
  margin-top: 3rem;
  padding: 1.5rem;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.related-tools h2 {
  margin-bottom: 1rem;
  font-size: 1.3rem;
  color: #007bff;
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.tool-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1rem;
  background: #f9f9f9;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s, box-shadow 0.2s;
}

.tool-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}

.tool-card .icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

/* Styled note box */
.note-box {
  margin: 1.5rem auto 0 auto;
  padding: 1rem 1.5rem;
  max-width: 700px;
  border: 2px solid #007bff;
  border-radius: 8px;
  background: #e9f5ff;
  font-size: 1rem;
  font-weight: 500;
  color: #0056b3;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.note-box p {
  margin: 0;
}