:root{
--bg:#0f172a;
--card:#1e293b;
--accent:#38bdf8;
--text:#f8fafc;
--muted:#94a3b8;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
background:var(--bg);
color:var(--text);
font-family:system-ui,sans-serif;
padding:20px;
min-height:100vh;
}
.app{max-width:500px;margin:auto}
.card,.result-card{
background:rgba(255,255,255,.05);
backdrop-filter:blur(20px);
border:1px solid rgba(255,255,255,.08);
padding:20px;
border-radius:20px;
margin-bottom:16px;
}
.hero{text-align:center}
.hero p{color:var(--muted);margin-top:8px}
label{display:block;margin-bottom:8px;font-weight:600}
input{
width:100%;
padding:16px;
border:none;
border-radius:12px;
background:#334155;
color:white;
font-size:1.05rem;
}
.calculate-btn{
width:100%;
padding:18px;
border:none;
border-radius:16px;
font-weight:700;
font-size:1.05rem;
cursor:pointer;
}
.result-card{text-align:center;animation:fade .3s ease}
.result-card h2{font-size:3rem;margin:10px 0;color:var(--accent)}
#summary{color:var(--muted)}
@keyframes fade{
from{opacity:0;transform:translateY(10px)}
to{opacity:1;transform:translateY(0)}
}