:root{
    --bg:#f5f7fb;
    --card:#ffffff;
    --accent:#2b6cb0;
    --muted:#64748b;
}
*{box-sizing:border-box}
body{
    margin:0;
    font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
    background:var(--bg);
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:100vh;
    color:#0f172a;
}
.card{
    width:340px;
    background:var(--card);
    padding:18px;
    border-radius:10px;
    box-shadow:0 6px 20px rgba(2,6,23,0.08);
}
h1{font-size:18px;margin:0 0 12px}
label{display:block;font-size:13px;color:var(--muted);margin-bottom:10px}
input[type="number"], select{
    width:100%;
    padding:8px 10px;
    margin-top:6px;
    border:1px solid #e6eef8;
    border-radius:6px;
    font-size:14px;
}
.row{display:flex;gap:10px}
.row label{flex:1}
.result{margin-top:12px;font-weight:600;font-size:16px;color:#0b1220}
.controls{
    margin-top:12px;
    text-align:right;
    display:flex;
    gap:10px;
    align-items:center;
    justify-content:flex-end;
}
button{background:var(--accent);color:white;border:0;padding:8px 12px;border-radius:6px;cursor:pointer}
button:active{transform:translateY(1px)}
label.toggle{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin:0}
label.toggle input{width:16px;height:16px}