:root{--darkblue:#0D2C54;--white:#fff;--green:#4CAF50}
*{box-sizing:border-box;font-family:system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial}
html,body{margin:0;padding:0;height:100%;width:100%;background:var(--white);overflow-x:hidden}
body{overflow-y:auto}
.container{min-height:100vh;background:var(--white);padding:30px 20px;max-width:600px;margin:0 auto}
h1{color:var(--darkblue);font-size:24px;font-weight:bold;margin:0 0 30px;text-align:left}
h2{color:var(--darkblue);font-size:18px;font-weight:bold;margin:0 0 15px}
.field{display:flex;flex-direction:column;margin-bottom:20px}
.field label{color:var(--darkblue);font-weight:600;margin-bottom:8px;font-size:16px}
.field input{padding:10px 12px;border:1px solid #ccc;border-radius:4px;font-size:16px;width:100%}
.results-section{margin:40px 0}
.bar-container{display:flex;flex-direction:column;gap:10px}
.progress-bar-wrapper{width:100%;height:20px;background:#f0f0f0;border-radius:4px;overflow:hidden}
.progress-bar{height:100%;background:var(--green);transition:width 0.3s ease}
.probability-text{font-size:16px;font-weight:600;color:var(--darkblue)}
.footer{margin-top:50px;text-align:center;font-size:14px;color:var(--darkblue);padding-bottom:30px}
.footer a{color:var(--darkblue);text-decoration:underline;cursor:pointer}
@media (max-width:640px){.container{padding:20px 15px}h1{font-size:20px}}