/* MegaCalcOnline.com — Shared Stylesheet v3 */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --gd: #1a3a1a; --gm: #2a6a2a; --gb: #2e7d32; --gbh: #1b5e20;
  --ga: #4caf50; --gl: #e8f5e9; --gbl: #a5d6a7; --bg: #eef4ee;
  --card: #fff; --alt: #f5faf5; --txt: #1a1a1a; --muted: #555;
  --bdr: #c8ddc8; --ibdr: #b0c8b0; --r: 6px; --shd: 0 1px 4px rgba(0,0,0,.08);
}
body { font-family: Arial, Helvetica, sans-serif; font-size: 14px; background: var(--bg); color: var(--txt); line-height: 1.5; }
a { color: var(--gm); }

/* ── NAV ── */
.nav { background: var(--gd); display: flex; align-items: center; justify-content: space-between; padding: 0 20px; height: 52px; position: sticky; top: 0; z-index: 100; }
.nav-logo { font-size: 18px; font-weight: bold; color: #fff; text-decoration: none; white-space: nowrap; }
.nav-logo span { color: var(--ga); }
.nav-logo small { color: #88cc88; font-size: 11px; margin-left: 4px; }
.nav-right { display: flex; align-items: center; gap: 14px; flex-wrap: nowrap; overflow: hidden; }
.nav-right a { color: #ccc; font-size: 12px; text-decoration: none; white-space: nowrap; }
.nav-right a:hover { color: var(--ga); }
/* Premium orange pill */
.nav-right a.nav-premium,
.nav-right .nav-premium { 
  background: linear-gradient(135deg, #EF9F27, #D4790A) !important; 
  color: #fff !important; 
  padding: 4px 12px !important; 
  border-radius: 20px !important; 
  font-weight: 600 !important;
  font-size: 12px !important;
}
.nav-right a.nav-premium:hover { opacity: .88; }

/* ── BREADCRUMB ── */
.bc { background: var(--gd); padding: 6px 20px; font-size: 12px; color: #aaa; border-top: 1px solid #2a4a2a; }
.bc a { color: #88cc88; text-decoration: none; }
.bc a:hover { text-decoration: underline; }
.bc span { margin: 0 5px; }

/* ── WRAPPER ── */
.wrap { max-width: 960px; margin: 0 auto; padding: 20px 16px; }
.pg-title { font-size: 22px; font-weight: bold; color: var(--gd); margin-bottom: 4px; }
.pg-sub { font-size: 13px; color: var(--muted); margin-bottom: 18px; }

/* ── GRID ── */
.mg { display: grid; grid-template-columns: 360px 1fr; gap: 20px; align-items: start; }

/* ── CARDS ── */
.card { background: var(--card); border: 1px solid var(--bdr); border-radius: var(--r); box-shadow: var(--shd); overflow: hidden; }
.card-hd { background: var(--gd); color: #fff; padding: 10px 16px; font-size: 14px; font-weight: bold; }
.card-body { padding: 14px 16px; }

/* ── FORM FIELDS ── */
.frow { display: flex; align-items: center; margin-bottom: 10px; gap: 8px; }
.flabel { font-size: 13px; color: var(--txt); width: 140px; flex-shrink: 0; }
.tip { display: inline-block; background: var(--gm); color: #fff; border-radius: 50%; width: 14px; height: 14px; font-size: 9px; text-align: center; line-height: 14px; cursor: help; margin-left: 3px; vertical-align: middle; }
.finp { flex: 1; display: flex; align-items: center; }
.finp input, .finp select { width: 100%; padding: 5px 8px; border: 1px solid var(--ibdr); border-radius: 3px; font-size: 13px; background: #fff; color: var(--txt); }
.finp input:focus, .finp select:focus { outline: none; border-color: var(--gm); box-shadow: 0 0 0 2px rgba(42,106,42,.15); }
.pfx { font-size: 13px; color: var(--muted); background: #f0f0f0; border: 1px solid var(--ibdr); border-right: none; padding: 5px 7px; border-radius: 3px 0 0 3px; white-space: nowrap; }
.pfx + input { border-radius: 0 3px 3px 0 !important; }
.sfx { font-size: 13px; color: var(--muted); background: #f0f0f0; border: 1px solid var(--ibdr); border-left: none; padding: 5px 7px; border-radius: 0 3px 3px 0; white-space: nowrap; }
input.sfx-inp { border-radius: 3px 0 0 3px !important; border-right: none !important; }
.radio-grp { display: flex; gap: 12px; align-items: center; }
.radio-grp label { font-size: 13px; display: flex; align-items: center; gap: 4px; cursor: pointer; }

/* ── BUTTON ── */
.cbtn { width: 100%; padding: 10px; background: var(--gb); color: #fff; border: none; border-radius: 4px; font-size: 15px; font-weight: bold; cursor: pointer; margin-top: 12px; }
.cbtn:hover { background: var(--gbh); }
.cbtn-sm { padding: 6px 16px; font-size: 13px; width: auto; margin-top: 0; border-radius: 3px; }

/* ── RESULTS ── */
.big-result { text-align: center; padding: 14px 0 10px; }
.big-result .lbl { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.big-result .amt { font-size: 34px; font-weight: bold; color: var(--gd); margin: 4px 0; }
.big-result .sub { font-size: 12px; color: var(--muted); }

/* ── TABLES ── */
.rtbl { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 10px; }
.rtbl th { background: var(--gd); color: #fff; padding: 7px 10px; text-align: right; font-weight: normal; }
.rtbl th:first-child { text-align: left; }
.rtbl td { padding: 6px 10px; border-bottom: 1px solid #eee; text-align: right; }
.rtbl td:first-child { text-align: left; color: var(--muted); }
.rtbl tr.tot td { font-weight: bold; color: var(--gd); background: var(--gl); border-top: 2px solid var(--gbl); }
.rtbl tr:hover td { background: var(--alt); }

/* ── AMORT ── */
.amort-sect { background: var(--card); border: 1px solid var(--bdr); border-radius: var(--r); box-shadow: var(--shd); padding: 16px; margin-top: 20px; }
.amort-sect h3 { font-size: 15px; color: var(--gd); margin-bottom: 12px; }
.vt { display: flex; gap: 8px; margin-bottom: 12px; }
.vbtn { padding: 5px 14px; border: 1px solid var(--ibdr); border-radius: 3px; background: #f5f5f5; font-size: 12px; cursor: pointer; color: var(--muted); }
.vbtn.on { background: var(--gm); color: #fff; border-color: var(--gm); }
.atbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.atbl th { background: var(--gd); color: #fff; padding: 7px 10px; text-align: right; white-space: nowrap; font-weight: normal; }
.atbl th:first-child { text-align: left; }
.atbl td { padding: 5px 10px; border-bottom: 1px solid #eee; text-align: right; white-space: nowrap; }
.atbl td:first-child { text-align: left; }
.atbl tr.ye td { background: var(--gl); font-weight: bold; color: var(--gd); border-top: 1px solid var(--gbl); }
.atbl tr:not(.ye):hover td { background: var(--alt); }

/* ── INFO SECT ── */
.info-sect { background: var(--card); border: 1px solid var(--bdr); border-radius: var(--r); box-shadow: var(--shd); padding: 20px; margin-top: 20px; }
.info-sect h2 { font-size: 17px; color: var(--gd); margin-bottom: 12px; }
.info-sect h3 { font-size: 14px; color: var(--gd); margin: 14px 0 6px; }
.info-sect p { font-size: 13px; color: var(--muted); margin-bottom: 8px; line-height: 1.6; }
.info-sect ul { font-size: 13px; color: var(--muted); padding-left: 18px; line-height: 1.8; }

/* ── BAR/CHART ── */
.chart-sect { background: var(--card); border: 1px solid var(--bdr); border-radius: var(--r); box-shadow: var(--shd); padding: 16px; margin-top: 20px; }
.chart-sect h3 { font-size: 15px; color: var(--gd); margin-bottom: 14px; }

/* ── DONUT ── */
.dnt-wrap { display: flex; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid #eee; margin-bottom: 10px; }
.leg { font-size: 12px; }
.li { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.ld { width: 12px; height: 12px; border-radius: 2px; flex-shrink: 0; }

/* ── DIVIDER ── */
.sdiv { border: none; border-top: 1px solid var(--bdr); margin: 12px 0; }

/* ── TOGGLE ── */
.tog-btn { background: var(--gl); border: 1px solid var(--gbl); color: var(--gd); padding: 7px 12px; border-radius: 3px; font-size: 13px; font-weight: bold; cursor: pointer; width: 100%; text-align: left; margin: 10px 0 8px; }
.extra { border: 1px solid var(--bdr); border-radius: 3px; padding: 10px 12px; margin-bottom: 8px; background: #fafffe; }
.extra h4 { font-size: 12px; color: var(--muted); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .5px; }
.ext-tbl { width: 100%; border-collapse: collapse; }
.ext-tbl td { padding: 4px 2px; font-size: 12px; vertical-align: middle; }
.ext-tbl td:first-child { color: var(--muted); width: 140px; }
.ext-tbl input, .ext-tbl select { width: 100%; padding: 4px 6px; border: 1px solid var(--ibdr); border-radius: 3px; font-size: 12px; }

/* ── FOOTER ── */
footer { background: var(--gd); padding: 20px 16px; text-align: center; margin-top: 30px; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-bottom: 10px; }
.footer-links a { color: #88cc88; font-size: 12px; text-decoration: none; }
.footer-links a:hover { color: var(--ga); text-decoration: underline; }
.footer-copy { color: #4a7a4a; font-size: 11px; margin: 0; }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .nav-right { gap: 10px; }
  .nav-right a { font-size: 11px; }
}
@media (max-width: 720px) {
  .mg { grid-template-columns: 1fr; }
  .nav { height: auto; flex-wrap: wrap; padding: 10px 16px; gap: 8px; }
  .nav-right { gap: 8px; flex-wrap: wrap; }
  .nav-right a { font-size: 11px; }
}

/* ── HELPERS ── */
.mt10 { margin-top: 10px; }
.mt20 { margin-top: 20px; }
.green { color: var(--gm); font-weight: bold; }
.badge { display: inline-block; background: var(--gl); border: 1px solid var(--gbl); color: var(--gd); border-radius: 3px; padding: 2px 8px; font-size: 11px; }