body {
  font-family: 'Segoe UI', sans-serif;
  background-color: #f3f6f9;
  color: #333;
  margin: 0;
  padding: 0;
}
.container {
  max-width: 720px;
  margin: auto;
  padding: 30px 20px;
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.05);
}
h1 {
  text-align: center;
  color: #0d6efd;
  margin-bottom: 5px;
}
.subtitle {
  text-align: center;
  margin-bottom: 25px;
  font-size: 1rem;
  color: #6c757d;
}
section {
  margin-bottom: 30px;
}
.input-group {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}
.input-group label {
  flex: 1;
  margin-right: 10px;
  font-weight: 500;
}
.input-group input, .input-group select {
  flex: 1;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 1rem;
}
.result {
  background-color: #e9f7ef;
  padding: 10px 15px;
  border-left: 5px solid #28a745;
  border-radius: 5px;
  margin-top: 10px;
  font-weight: bold;
}
button {
  background-color: #0d6efd;
  color: white;
  border: none;
  padding: 12px;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  width: 100%;
  margin-top: 10px;
}
button:hover {
  background-color: #0b5ed7;
}
nav {
  margin-bottom: 20px;
  display: flex;
  gap: 15px;
  justify-content: center;
}
nav a {
  text-decoration: none;
  font-weight: bold;
  color: #0d6efd;
}

/* === Recommendations Page Styles === */
.recommendations-container {
  max-width: 720px;
  margin: 2.5rem auto 2rem auto;
  padding: 2.5rem 2rem 2rem 2rem;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.07);
}

.about-me-section {
  display: flex;
  align-items: center;
  margin-bottom: 2.5rem;
  gap: 1.5rem;
}

.about-me-img {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #40d876;
  background: #f3f6f9;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
}

.about-me-desc {
  color: #273146;
  font-size: 1.08rem;
}

.card-row {
  display: flex;
  align-items: flex-start;
  margin-bottom: 2.2rem;
  gap: 1.15rem;
}

.card-logo {
  width: 62px;
  height: 62px;
  border-radius: 14px;
  object-fit: cover;
  background: #fff;
  padding: 4px;
  border: 1.5px solid #e3ecef;
  box-shadow: 0 2px 10px rgba(40, 214, 118, 0.08);
  transition: box-shadow 0.2s;
}
.card-logo:hover {
  box-shadow: 0 6px 24px rgba(24, 144, 255, 0.19);
}
.card-logo.amex,
.card-logo.skymiles {
  background: #e6e7ec;
}
.card-logo.sofi,
.card-logo.schwab {
  background: #e6f4fa;
}
.card-logo.marcus {
  background: #21263c;
}

.rec-card-content {
  flex: 1;
}

.rec-title {
  margin: 0 0 0.18em 0;
  font-size: 1.08rem;
  color: #1890ff;
  font-weight: 600;
  letter-spacing: .01em;
}

.rec-link {
  color: #28a745;
  text-decoration: underline;
  font-size: 0.99rem;
}

.rec-link:hover {
  color: #157f30;
}

.rec-desc {
  font-size: 0.99rem;
  color: #295b37;
}

.rec-benefits {
  margin: 0.3rem 0 0 0;
  color: #36766e;
  font-size: 0.98rem;
  list-style-type: disc;
  padding-left: 1.15em;
}

/* Footer match */
footer {
  width: 100%;
  text-align: center;
  margin: 40px 0 8px 0;
  color: #888;
  font-size: 0.95em;
  background: none;
  border: none;
}

.logo {
  width: 110px;
  display: block;
  margin: 0 auto 14px auto;
}
/*Dark Mode*/
body.dark-mode {
  background: #181c21 !important;
  color: #f3f4f7 !important;
}
body.dark-mode .container,
body.dark-mode nav,
body.dark-mode .input-group,
body.dark-mode section {
  background: #23272f !important;
  color: #f3f4f7 !important;
}
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
  background: #252a32 !important;
  color: #f3f4f7 !important;
  border: 1px solid #393e47 !important;
}
body.dark-mode .result,
body.dark-mode label {
  color: #c3c7cf !important;
}
body.dark-mode nav a {
  color: #f3f4f7 !important;
}
body.dark-mode nav a.active,
body.dark-mode nav a:hover {
  color: #91e3ff !important;
}
body.dark-mode button,
body.dark-mode .button {
  background: #353b47 !important;
  color: #e1e1e6 !important;
  border: 1px solid #525c6e !important;
}
body.dark-mode footer {
  background: #181c21 !important;
  color: #888 !important;
}