:root{
  --bg:#ffffff;          /* deep navy */
  --card:#121935;        /* card base */
  --ink:#e9ecf4;         /* main text */
  --muted:#a7b0c6;       /* secondary text */
  --accent:#4f7cff;      /* primary accent */
  --accent-2:#22c55e;    /* success */
  --danger:#ef4444;      /* error */
  --ring: rgba(79,124,255,.35);
}
*{box-sizing:border-box}
body{
  margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: #F5F5F7;  
    }
.wrap{max-width:1400px; margin:48px auto; padding:0 20px}

/* This is the new header from the previous steps. */
.site-header {
  background-color: grey;
  padding: 15px 20px;
}
.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
}
.logo img {
  height: 40px;
}
.main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 20px;
}
.main-nav a {
  text-decoration: none;
  padding: 10px 15px;
  display: block;
  white-space: nowrap;
  color: white; /* Menu item color fixed here */
}
.main-nav a:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 5px;
}
.main-nav .active-link {
  background-color: #e74c3c;
  border-radius: 5px;
}
.main-nav li {
  position: relative;
}
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #34495e;
  min-width: 180px;
  border-top: 2px solid #e74c3c;
  border-radius: 0 0 5px 5px;
  z-index: 1000;
  display: none;
}
.main-nav li:hover > .dropdown-menu {
  display: block;
}
.dropdown-menu a {
  padding: 10px 20px;
}

/* Your existing styles below this line. */
header{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:24px}
h1{font-size:clamp(22px,3vw,30px); margin:0}
.badge{font-size:12px; color:var(--muted)}
.grid{display:grid; grid-template-columns: 1.1fr .9fr; gap:20px}
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.07);
  border-radius:18px; padding:20px; box-shadow: 0 10px 30px rgba(0,0,0,.24);
  backdrop-filter: blur(8px);
}
.group{display:grid; grid-template-columns:1fr 1fr; gap:14px}
label{display:block; font-size:14px; color:#000000; margin:0 0 6px}
.input{
  display:flex; align-items:center; gap:8px;
  background:white; border:1px solid #a7b0c6;
  padding:10px 12px; border-radius:12px; outline:none;
  transition:border .2s, box-shadow .2s
}
.input:focus-within{border-color:var(--accent); box-shadow:0 0 0 6px var(--ring)}
.input input{all:unset; color:black; width:100%; font-size:15px}
.input input::placeholder { color:black; opacity: 0.7; }
.hint{font-size:13px; color:black; margin-top:6px}
.actions{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:12px}
button.primary{
  background:linear-gradient(180deg, var(--accent), #3665ff);
  color:white; border:none; padding:12px 16px; border-radius:12px; font-weight:600; cursor:pointer;
  box-shadow: 0 8px 20px rgba(79,124,255,.35); transition: transform .08s ease-in-out;
}
button.primary:active{ transform: translateY(1px) }
button.ghost{background:transparent; border:1px solid black; color:black; padding:12px 16px; border-radius:12px; cursor:pointer}
.error{color:var(--danger); font-size:13px; margin-top:8px; display:none}
.stat-grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; margin-top:10px}
.stat{
  background:#0e1430; border:1px solid rgba(255,255,255,.06); border-radius:14px; padding:14px
}
.stat .k{font-size:13px; color:white}
.stat .v{font-size:20px; color:white; font-weight:700; margin-top:4px}
table{width:100%; border-collapse:collapse; margin-top:10px; font-size:14px}
th, td{padding:12px 10px; text-align:left; border-bottom:1px dashed rgba(255,255,255,.08)}
th{color:black; font-weight:600}
footer{margin-top:20px; font-size:12px; color:var(--muted)}
.success{color:var(--accent-2)}
.bank-comparison-list {
  display: none;
}
/* All media queries should be at the bottom. */
@media (max-width: 900px){ .grid{grid-template-columns:1fr;}}
@media (max-width:600px){
  .group{grid-template-columns:1fr}
  .table-container {
    display: none;
  }
  .bank-comparison-list {
    display: block;
  }
  .bank-item {
    background: white;
    color: black;
    padding: 15px;
    border-radius: 12px;
    margin-bottom: 15px;
    border: 1px solid #a7b0c6;
    line-height: 25px;
  }
  .bank-name {
    font-weight: 700;
    font-size: 1.2em;
    margin-bottom: 8px;
  }
}
@media (max-width: 520px){ .stat-grid{grid-template-columns:1fr} }

/* Final and most aggressive autofill fix. */
.input input:-webkit-autofill,
.input input:-webkit-autofill:hover,
.input input:-webkit-autofill:focus,
.input input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px white inset !important;
  box-shadow: 0 0 0 1000px white inset !important;
  -webkit-text-fill-color: black !important;
  color: black !important;
  background-image: none !important;
  transition: background-color 999999s ease-in-out 0s, color 999999s ease-in-out 0s;
}
.input input:-moz-autofill {
  background-color: white !important;
  color: black !important;
}
/* This is what fixes the click-away issue. */
.input:focus-within,
.input:hover {
  background-color: white !important;
}