/* body {
    background: #f0f4f8;
    font-family: sans-serif;
    display: flex;
    justify-content: center;
    padding: 40px 20px;
  }
  
  .calculator-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.05);
    width: 100%;
    max-width: 480px;
    padding: 25px;
  }
  
  h1 {
    margin: 0;
    font-size: 1.4em;
    color: #333;
    text-align: center;
  }
  
  .tabs {
    display: flex;
    margin: 20px 0;
  }
  
  .tabs button {
    flex: 1;
    padding: 10px 0;
    border: none;
    background: #e0e4ea;
    cursor: pointer;
    font-size: 1em;
    border-radius: 6px 6px 0 0;
    transition: background 0.3s;
  }
  
  .tabs button.active {
    background: #007bff;
    color: white;
  }
  
  .form-group {
    display: grid;
    gap: 10px;
  }
  
  .hidden {
    display: none;
  }
  
  .label, label {
    font-size: 0.9em;
    color: #555;
  }
  
  input {
    padding: 8px;
    font-size: 1em;
    border-radius: 6px;
    border: 1px solid #ccc;
  }
  
  .result-display {
    background: #f9fbfc;
    padding: 20px;
    border-radius: 8px;
    margin-top: 15px;
    display: grid;
    gap: 12px;
  }
  
  .result-display div {
    display: flex;
    justify-content: space-between;
  }
  
  .result-display span {
    font-size: 0.9em;
    color: #555;
  }
  
  .result-display strong {
    font-size: 1.2em;
    color: #222;
  }
  
  .description-section {
    margin-top: 25px;
    font-size: 0.9em;
    color: #444;
  }
  
  .description-section h2,
  .description-section h3 {
    margin-bottom: 8px;
    color: #007bff;
  }
  
  pre {
    background: #f4f7fa;
    padding: 10px;
    border-radius: 6px;
    overflow-x: auto;
  }
   */
/* Footer */
footer {
    background: #f1f1f1;
    text-align: center;
    padding: 2rem 1rem;
    margin-top: 2rem;
    color: #666;
}

footer a {
    color: #007bff;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}
   :root{
    --bg:#f6f8fb;
    --card:#ffffff;
    --muted:#6b7280;
    --accent:#2f7cff;
    --accent-2:#6ee7b7;
    --radius:14px;
    --shadow:0 10px 30px rgba(15,23,42,0.06);
    --green:#2aa46a;
  }
  
  *{box-sizing:border-box}
  html,body{height:100%;margin:0}
  body{
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    background:var(--bg);
    color:#0f172a;
    -webkit-font-smoothing:antialiased;
    padding:28px;
  }
  
  .page{max-width:1100px;margin:0 auto;display:grid;gap:20px}
  
  .card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}
  
  /* Calculator */
  .calculator .calc-header h1{margin:0;font-size:20px}
  .lead{color:var(--muted);margin-top:6px;font-size:13px}
  
  .calc-body{display:grid;grid-template-columns:1fr 380px;gap:20px;margin-top:18px}
  .controls{padding-right:6px}
  .mode{display:flex;gap:8px;margin-bottom:18px}
  .mode-btn{flex:1;padding:10px;border-radius:8px;border:1px solid #e6eef8;background:#f8fbff;color:#123;padding-left:6px;cursor:pointer;font-weight:600}
  .mode-btn.active{background:linear-gradient(90deg,var(--accent),#3aa6ff);color:#fff;border-color:transparent;box-shadow:0 6px 18px rgba(47,124,255,0.14)}
  
  .control-block{display:grid;gap:12px}
  .row{display:flex;gap:12px;align-items:center}
  .row input[type="range"]{flex:1}
  .row input[type="number"], .row input[type="text"]{
    width:140px;padding:8px;border-radius:8px;border:1px solid #e6eef8;background:#f8fffb;font-weight:700;color:#0b2b17;
    text-align:center;
  }
  
  /* result column */
  .result{display:flex;flex-direction:column;align-items:center;gap:14px;padding:18px}
  .donut-wrap{width:100%;display:flex;flex-direction:column;align-items:center}
  .legend{margin-top:8px;font-size:13px;color:var(--muted)}
  .legend .dot{display:inline-block;width:12px;height:12px;border-radius:50%;margin:0 8px 0 14px;vertical-align:middle}
  .legend .invest{background:#eef4ff}
  .legend .returns{background:#445efd}
  
  .summary{width:100%;margin-top:6px}
  .line{display:flex;justify-content:space-between;padding:10px 12px;border-top:1px solid #f0f4fb}
  .line:first-of-type{border-top:0}
  .label{color:var(--muted)}
  .value{font-weight:700}
  .value.highlight{color:var(--accent)}
  .total .value.strong{font-size:18px}
  .cta{margin-top:12px;padding:10px 18px;border-radius:8px;border:0;background:var(--green);color:white;font-weight:700;cursor:pointer}
  
  /* content */
  .content h2{color:#0b2b57;margin-top:0}
  .content pre{background:#f4f7fb;padding:12px;border-radius:8px;overflow:auto}
  .content p, .content li{color:#334155;line-height:1.6}
  .content ul{padding-left:18px}
  
  /* responsive */
  @media (max-width:980px){
    .calc-body{grid-template-columns:1fr}
    .result{order:2}
    .controls{order:1}
  }
  
/* 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;
}