:root {
  --navy: #0d2b52;
  --navy-deep: #081b36;
  --gold: #e8a53d;
  --teal: #1f9c8a;
  --coral: #e8603c;
  --cream: #fdf8ef;
  --card: #ffffff;
  --ink: #2b2b2b;
  
  /* Light mode specific background and borders */
  --bg-start: #fdf8ef;
  --bg-end: #f5efe0;
  --border-color: #e4dcc8;
  --table-even: #faf6ea;
  --formula-bg: #f0f4ff;
  --text-muted: #7a7a7a;
}

/* ==========================================================================
   DARK MODE OVERRIDES (Automatic switch based on browser/system settings)
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root {
    --navy: #4a86e8;      /* Dark mode mein text readability ke liye light navy */
    --navy-deep: #ffffff;
    --card: #1e293b;     /* Slate dark card background */
    --ink: #e2e8f0;      /* Light text color */
    
    /* Dark mode specific backgrounds */
    --bg-start: #0f172a; /* Deep dark page background */
    --bg-end: #020617;
    --border-color: #334155;
    --table-even: #1e293b;
    --formula-bg: #1e293b;
    --text-muted: #94a3b8;
  }

  /* Specific dark mode tweaks for contrast */
  h3 a {
    color: #ff6b6b !important; /* Red link ko dark mode mein zyada visible banaya */
  }
  .formula {
    border-color: var(--teal) !important;
  }
  td {
    color: var(--ink);
  }
}

/* ==========================================================================
   MAIN STYLES (Cleaned up to use variables)
   ========================================================================== */
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:'Segoe UI',Verdana,Arial,sans-serif;
  background:linear-gradient(180deg, var(--bg-start) 0%, var(--bg-end) 100%);
  color:var(--ink);
}
h1,h2,h3,h4{
  color:var(--navy);
  font-family:'Trebuchet MS',Verdana,sans-serif;
}
u{
  text-decoration-color:var(--coral);
  text-decoration-thickness:2px;
  text-underline-offset:3px;
  font-weight:600;
}

.container{
  max-width:100%;
  margin:0 auto;
  padding:20px 0 30px;
  line-height:1.7;
}
.card{
  background:var(--card);
  border-radius:14px;
  padding:28px 32px;
  margin-bottom:32px;
  box-shadow:0 6px 18px rgba(0,0,0,0.15); /* Universal shadow for dark/light */
  border-left:6px solid var(--teal);
}
.card.alt{ border-left:6px solid var(--coral); }
.card.gold{ border-left:6px solid var(--gold); }
h2{
  font-size:1.6em;
  border-bottom:3px solid var(--gold);
  display:inline-block;
  padding-bottom:6px;
  margin-top:0;
}
h3{
  font-size:1.2em;
  color:var(--navy);
  margin-top:22px;
}
h3 a {
  color:red;
  text-decoration: none; 
}
  
table{
  width:100%;
  border-collapse:collapse;
  margin:18px 0;
  font-size:0.97em;
}
th{
  background:var(--navy);
  color:#fff;
  padding:12px;
  text-align:left;
}
td{
  padding:12px;
  border-bottom:1px solid var(--border-color);
}
tr:nth-child(even){ background:var(--table-even); }
ul{ padding-left:22px; }
li{ margin-bottom:8px; }

/* Calculator box dark theme setup */
.calc-box{
  background:linear-gradient(135deg,#0d2b52,#123a6b);
  color:#fff;
  border-radius:14px;
  padding:30px;
  margin:20px 0;
}
.calc-box h3{ color:var(--gold); margin-top:0; }
.calc-box h3 a{
  color:#fff;
  text-decoration:none;
}
.calc-box h3 a:hover{
  color:var(--gold);
}
.calc-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin:18px 0;
}
@media(max-width:560px){ .calc-grid{ grid-template-columns:1fr; } }
.calc-grid label{
  display:block;
  font-size:0.9em;
  margin-bottom:5px;
  color:#dce6f5;
}
.calc-grid input{
  width:100%;
  padding:10px;
  border-radius:8px;
  border:none;
  font-size:1em;
}
.calc-btn{
  background:var(--coral);
  color:#fff;
  border:none;
  padding:12px 26px;
  border-radius:30px;
  font-size:1em;
  font-weight:bold;
  cursor:pointer;
  margin-top:10px;
  transition:transform 0.15s ease, background 0.2s ease;
}
.calc-btn:hover{ background:#c9481f; color:#fff; transform:translateY(-2px); }
.result-box{
  margin-top:20px;
  background:rgba(255,255,255,0.12);
  border-radius:10px;
  padding:18px;
  font-size:1.05em;
}
.result-box strong{ color:var(--gold); }
.formula{
  background:var(--formula-bg);
  border:1px dashed var(--navy);
  padding:14px 18px;
  border-radius:10px;
  font-family:'Consolas',monospace;
  color:var(--navy-deep);
  margin:14px 0;
}
.faq-q{
  color:var(--coral);
  font-weight:bold;
}
.cta{
  text-align:center;
  background:var(--gold);
  color:#081b36; /* Kept dark for contrast against gold */
  border-radius:14px;
  padding:30px;
  margin-top:10px;
}
.cta a{
  display:inline-block;
  margin-top:12px;
  background:#0d2b52;
  color:#fff;
  padding:12px 28px;
  border-radius:30px;
  text-decoration:none;
  font-weight:bold;
}
.footer-note{
  text-align:center;
  font-size:0.85em;
  color:var(--text-muted);
  margin-top:30px;
}