:root{
  --bg:#f6f7fb; --card:#ffffff; --accent:#0b79d0; --muted:#666;
  --pad:14px;
}
*{box-sizing:border-box;font-family:Inter, system-ui, Arial, sans-serif}
body{margin:0;background:var(--bg);color:#111}
.site-header{background:linear-gradient(90deg,var(--accent),#3fb);color:#fff;padding:22px 16px}
.site-header h1{margin:0;font-size:20px}
.container{max-width:980px;margin:18px auto;padding:0 12px}
.card{background:var(--card);padding:var(--pad);border-radius:10px;box-shadow:0 6px 18px rgba(0,0,0,0.06);margin-bottom:12px}
label{display:block;margin:8px 0;font-size:14px}
input[type=number],select{width:100%;padding:8px;border-radius:6px;border:1px solid #e1e4ea}
button{background:var(--accent);color:#fff;padding:10px 12px;border-radius:8px;border:0;cursor:pointer}
.result{margin-top:12px;padding:10px;background:#f1fbff;border-radius:8px}
.note{font-size:13px;color:var(--muted);margin-top:8px}
.site-footer{padding:16px;text-align:center;font-size:13px;color:var(--muted)}
@media(min-width:800px){.container{padding:0}}