:root {
  --primary: #7A9E7E;        /* Sage Green */
  --secondary: #F4A261;      /* Warm Orange */
  --tertiary: #2A6F5E;       /* Dark Green */
  --bg: #F7F7F4;             /* Off-white */
  --card: #FFFFFF;           /* Surface */
  --text: #1F2320;           /* On background */
  --muted: #2A6F5E;          /* On surface variant */
  --surface-variant: #DCE6E0;
  --error: #DC2626;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}

header {
  padding: 3rem 1rem 2rem;
  text-align: center;
}

header h1 { font-size: 2.2rem; color: var(--tertiary); }
header p { max-width: 720px; margin: 0 auto; color: var(--muted); }

main { max-width: 820px; margin: 0 auto 4rem; padding: 0 1rem; }

.card {
  background: var(--card);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}

.grid { display: grid; gap: 1.5rem; }
@media (min-width: 640px) { .grid { grid-template-columns: repeat(2, 1fr); } }

label { font-weight: 600; display: block; margin-bottom: 0.25rem; }
input, select {
  width: 100%;
  padding: 0.65rem;
  font-size: 1rem;
  border-radius: 8px;
  border: 1px solid var(--surface-variant);
}
input:focus, select:focus {
  outline: 2px solid var(--primary);
  border-color: var(--primary);
}

/* Buttons */
button {
  cursor: pointer;
  border: none;
  border-radius: 12px;
  font-weight: 600;
  padding: 0.65rem 1.5rem;
  transition: all 0.2s ease;
}
button:hover { opacity: 0.9; }

/* Obligations Section */
.obligations-section {
  margin-top: 0.5rem;
}
.obligations-section input {
  margin-bottom: 0.25rem;
}
#toggleBreakdown, #addOtherRow {
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.6rem;
  font-weight: 600;
  border-radius: 12px;
}
#toggleBreakdown { background: var(--secondary); color: #000; }
#addOtherRow { background: var(--tertiary); color: #fff; }

/* Dynamic Breakdown Rows */
#breakdownRows div {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
#breakdownRows div input {
  flex: 1;
  padding: 0.5rem;
  border-radius: 8px;
  border: 1px solid var(--surface-variant);
}
#breakdownRows div button {
  flex: 0;
  padding: 0.45rem 0.75rem;
  font-weight: 600;
  border-radius: 8px;
  border: none;
  background: var(--error);
  color: #fff;
}

/* Results card (for tools) */
.result {
  margin-top: 2rem;
  padding: 2rem;
  border-radius: 16px;
  background: var(--surface-variant);
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

.result h2 {
  margin-bottom: 1rem;
  font-size: 1.5rem;
  color: var(--tertiary);
  text-align: center;
}

.amount {
  font-size: 2.8rem;
  font-weight: 800;
  text-align: center;
  margin-bottom: 1.5rem;
}
.amount.affordable { color: var(--primary); }
.amount.borderline { color: var(--secondary); }
.amount.not-affordable { color: var(--error); }

.breakdown {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  padding: 1rem;
  border-radius: 12px;
  background: var(--card);
}

.breakdown div {
  padding: 0.5rem;
  border-radius: 8px;
  background: var(--bg);
  font-weight: 500;
}

.breakdown div span {
  float: right;
  font-weight: 700;
  color: var(--primary);
}

@media (max-width: 640px) {
  .breakdown { grid-template-columns: 1fr; }
}

/* Optional notes / small text */
small {
  font-size: 0.8rem;
  color: var(--muted);
}

/* SEO content */
.seo-content { margin-top: 3rem; }

footer { text-align: center; padding: 2rem 1rem; font-size: 0.85rem; color: var(--muted); }

/* Responsive adjustments */
@media (max-width: 480px) {
  .grid { grid-template-columns: 1fr; }
  #breakdownRows div { flex-direction: column; }
}

/* Preset deductions */
.preset-deductions {
  display: grid;
  gap: 1.5rem;
  margin-top: 0.75rem;
}

.preset-group strong {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--tertiary);
}

.preset-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

.preset-row input[type="number"] {
  max-width: 120px;
  margin-left: auto;
}

/* Custom rows */
.custom-row {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.custom-row button {
  background: var(--error);
  color: #fff;
  border-radius: 8px;
}

/* Print-friendly */
@media print {
  header,
  footer,
  button {
    display: none !important;
  }

  .card {
    box-shadow: none;
  }

  .preset-row input[type="number"] {
    border: none;
  }
}