.aa-page {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  margin: 0;
  padding: 1.5rem;
  background: #050814;
  color: #f5f5f7;
}

.aa-loan-calculator {
  max-width: 960px;
  margin: 0 auto;
  background: radial-gradient(circle at top left, #141b2f 0, #050814 55%, #02030a 100%);
  border-radius: 1.25rem;
  padding: 1.75rem 1.75rem 2rem;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.75);
  border: 1px solid rgba(120, 130, 255, 0.25);
}

.aa-loan-header {
  margin-bottom: 1.5rem;
}

.aa-loan-title {
  margin: 0 0 0.5rem;
  font-size: 1.75rem;
  letter-spacing: 0.03em;
}

.aa-loan-subtitle {
  margin: 0;
  color: #a5b1d8;
  font-size: 0.95rem;
}

.aa-loan-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.aa-loan-field-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1 1 0;
}

.aa-loan-field-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.aa-loan-field-group label {
  font-size: 0.85rem;
  font-weight: 500;
  color: #d5dbff;
}

.aa-input-with-prefix,
.aa-input-with-suffix {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(7, 11, 30, 0.95);
  border-radius: 0.75rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid rgba(110, 120, 200, 0.4);
}

.aa-input-with-prefix:focus-within,
.aa-input-with-suffix:focus-within {
  border-color: #7b9bff;
  box-shadow: 0 0 0 1px rgba(123, 155, 255, 0.6);
}

.aa-prefix,
.aa-suffix {
  font-size: 0.8rem;
  color: #7c86b3;
}

.aa-input-with-prefix input,
.aa-input-with-suffix input {
  border: none;
  outline: none;
  background: transparent;
  color: #f5f5f7;
  font-size: 0.95rem;
  width: 100%;
}

.aa-input-with-prefix input::placeholder,
.aa-input-with-suffix input::placeholder {
  color: #5a648a;
}

select#aa-loan-term-months {
  width: 100%;
  border-radius: 0.75rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid rgba(110, 120, 200, 0.4);
  background: rgba(7, 11, 30, 0.95);
  color: #f5f5f7;
  font-size: 0.95rem;
}

select#aa-loan-term-months:focus {
  outline: none;
  border-color: #7b9bff;
  box-shadow: 0 0 0 1px rgba(123, 155, 255, 0.6);
}

.aa-loan-help {
  margin: 0;
  font-size: 0.8rem;
  color: #7884b3;
}

.aa-loan-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.aa-loan-actions button {
  border-radius: 999px;
  border: none;
  padding: 0.65rem 1.75rem;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

button#aa-loan-calculate {
  background: linear-gradient(135deg, #76e4ff, #7a7bff);
  color: #050814;
  box-shadow: 0 12px 30px rgba(121, 144, 255, 0.65);
}

button#aa-loan-calculate:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 40px rgba(121, 144, 255, 0.85);
}

button#aa-loan-calculate:active {
  transform: translateY(0);
  box-shadow: 0 8px 20px rgba(121, 144, 255, 0.6);
}

.aa-secondary {
  background: transparent;
  color: #a5b1d8;
  border: 1px solid rgba(120, 130, 255, 0.4);
}

.aa-secondary:hover {
  background: rgba(18, 25, 64, 0.9);
}

.aa-loan-error {
  min-height: 1.2rem;
  margin: 0.25rem 0 0;
  font-size: 0.85rem;
  color: #ffb4c4;
}

.aa-loan-results {
  border-top: 1px solid rgba(88, 100, 170, 0.5);
  padding-top: 1.4rem;
}

.aa-results-title {
  margin: 0 0 0.9rem;
  font-size: 1.1rem;
}

.aa-results-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

.aa-result-card {
  padding: 0.75rem 0.9rem;
  border-radius: 0.9rem;
  background: radial-gradient(circle at top left, #252e52 0, #131933 60%, #090d20 100%);
  border: 1px solid rgba(110, 120, 200, 0.6);
}

.aa-result-label {
  font-size: 0.75rem;
  color: #a3aed8;
  margin-bottom: 0.3rem;
}

.aa-result-value {
  font-size: 1.05rem;
  font-weight: 600;
}

.aa-loan-disclaimer {
  margin-top: 0.8rem;
  font-size: 0.78rem;
  color: #7f88b1;
}

.aa-affiliate-cta {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 0.85rem;
  background: rgba(121, 144, 255, 0.1);
  border: 1px dashed rgba(123, 155, 255, 0.5);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.aa-affiliate-link {
  color: #76e4ff;
  font-weight: 600;
  text-decoration: none;
}

.aa-affiliate-link:hover,
.aa-affiliate-link:focus {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .aa-page {
    padding: 1rem;
  }

  .aa-loan-calculator {
    padding: 1.25rem 1.2rem 1.5rem;
    border-radius: 1rem;
  }

  .aa-loan-field-row {
    flex-direction: column;
  }

  .aa-results-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .aa-results-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}