:root{--navy:#0f2440;--teal:#0f766e;--teal-light:#ccfbf1;--green:#15803d;--blue:#1d4ed8;--amber:#b45309;--purple:#6d28d9;--bg:#eef7f5;--card:#ffffff}
*{box-sizing:border-box}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.6;color:#1a2a3a;max-width:900px;margin:0 auto;padding:16px;background:var(--bg)}
header{background:linear-gradient(135deg,var(--navy),#164e63 55%,var(--teal));color:#fff;border-radius:16px;padding:22px;margin:16px 0}
header h1{margin:0 0 6px;font-size:2rem;line-height:1.1}
header p{margin:4px 0;color:#e0f2fe}
header nav{margin-top:14px}
header nav a{color:#fff;background:rgba(255,255,255,.16);padding:6px 10px;border-radius:999px;text-decoration:none;margin:0 6px 6px 0;display:inline-block}
header nav a:hover{background:rgba(255,255,255,.32)}
.logo{display:inline-flex;align-items:center;gap:10px}
.logo-mark{width:48px;height:48px;border-radius:50%;background:#facc15;color:#0f2440;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.4rem;flex-shrink:0}
.hero{background:linear-gradient(135deg,#facc15,#f97316);color:#431407;border-radius:16px;padding:22px;margin:16px 0}
.hero h2{margin:0 0 8px;color:#431407}
.hero p{margin:0}
h2{margin-top:28px;color:var(--navy)}
.card{background:var(--card);border:1px solid #d7e8e6;border-left:6px solid var(--teal);border-radius:14px;padding:18px;margin:16px 0;box-shadow:0 4px 14px rgba(15,36,64,.06)}
label{display:block;margin:10px 0 4px;font-weight:600}
input,select{width:100%;padding:11px;border:1px solid #cbd6e2;border-radius:10px;font-size:1rem}
button{background:var(--teal);color:#fff;border:0;padding:12px 20px;border-radius:999px;font-size:1rem;font-weight:700;cursor:pointer;margin-top:14px}
button:hover{background:#0b5e57}
.result{background:#dcfce7;border:1px solid #86efac;border-radius:10px;padding:14px;margin-top:16px;font-size:1.1rem}
.disclaimer{font-size:.9rem;color:#555;border-top:1px solid #dde6ee;margin-top:24px;padding-top:12px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.grid a{display:block;background:#fff;border:1px solid #d7e8e6;border-top:6px solid var(--blue);border-radius:14px;padding:16px;text-decoration:none;color:var(--navy);box-shadow:0 4px 14px rgba(15,36,64,.06)}
.grid a:hover{transform:translateY(-2px)}
.grid a:nth-child(3n+2){border-top-color:var(--green)}
.grid a:nth-child(3n){border-top-color:var(--amber)}
.grid a strong{color:var(--navy)}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin:16px 0}
.cat-card{border-radius:14px;padding:18px;color:#fff;text-decoration:none;font-weight:700}
.cat-loan{background:linear-gradient(135deg,#1d4ed8,#0ea5e9)}
.cat-salary{background:linear-gradient(135deg,#0f766e,#14b8a6)}
.cat-savings{background:linear-gradient(135deg,#15803d,#22c55e)}
.cat-everyday{background:linear-gradient(135deg,#b45309,#f59e0b)}
.search{width:100%;padding:12px;border:2px solid var(--teal);border-radius:999px;font-size:1rem;margin:12px 0}
footer{margin:20px 0;color:#475569}
@media(max-width:600px){h1,header h1{font-size:1.6rem}.hero{padding:16px}}