:root{
  --bg:#f5f8fb;
  --card:#ffffff;
  --accent:#2b7cff;
  --muted:#6b7280;
  --success:#16a34a;
  --accent-2: #7b2cff;
  --accent-3: #2ccfbd;
}
*{box-sizing:border-box;font-family:Inter,system-ui,Segoe UI,Roboto,"Helvetica Neue",Arial}
html,body{height:100%;margin:0;background:var(--bg);color:#111}
html{height:100%}
body{min-height:100%;display:flex;align-items:stretch}
.container{max-width:1000px;margin:28px auto;padding:24px;position:relative;z-index:2}
header{margin-bottom:18px}
h1{margin:0;font-size:1.9rem}
.tagline{color:var(--muted);margin:6px 0 0}
main{background:var(--card);padding:20px;border-radius:10px;box-shadow:0 6px 18px rgba(12,18,32,0.06)}
fieldset{border:1px solid #e6eef8;padding:12px;border-radius:8px;margin-bottom:14px}
legend{font-weight:600}
label{display:block;margin:10px 0;font-size:0.95rem}
input[type="number"],select{width:100%;padding:8px 10px;border:1px solid #dbe9ff;border-radius:6px;background:#fff}
.unit-toggle{display:flex;gap:12px;align-items:center;margin-bottom:10px}
.checkboxes{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.unit-toggle{display:flex;gap:12px;align-items:center;margin-bottom:10px}
.checkboxes label{display:inline-flex;align-items:center;gap:6px;font-weight:400}
.actions{display:flex;gap:12px;margin-top:6px}
#primaryBtn{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff;padding:10px 14px;border-radius:10px;border:none;cursor:pointer;box-shadow:0 6px 18px rgba(43,124,255,0.18);transition:transform .14s ease,box-shadow .14s}
#primaryBtn:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(43,124,255,0.18)}
#resetBtn{background:#fff;color:var(--accent);border:1px solid var(--accent);padding:10px 14px;border-radius:10px}
#result{margin-top:18px;padding:14px;border-radius:8px;background:#fff;border:1px solid #eef6ff}
.estimate{font-size:1.6rem;font-weight:700;color:var(--accent)}
.explain{color:var(--muted);margin-top:8px}
footer{margin-top:12px;color:var(--muted);font-size:0.9rem}

@media(min-width:720px){
  .container{padding:32px}
  fieldset{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .checkboxes{grid-column:1/3}
}

/* Animated background blobs */
.visuals{position:fixed;inset:0;overflow:hidden;z-index:-1;pointer-events:none}
.blob{position:absolute;border-radius:50%;filter:blur(36px);opacity:0.56;mix-blend-mode:screen;will-change:transform;pointer-events:none}
.blob.b1{width:420px;height:420px;background:linear-gradient(135deg,var(--accent),var(--accent-3));left:-120px;top:-120px}
.blob.b2{width:340px;height:340px;background:linear-gradient(135deg,var(--accent-2),#48d1cc);right:-100px;top:40%}
.blob.b3{width:260px;height:260px;background:linear-gradient(135deg,#ff8a66,#ffd36b);left:20%;bottom:-80px}

@keyframes float1{0%{transform:translateY(0) translateX(0) rotate(0)}50%{transform:translateY(24px) translateX(16px) rotate(8deg)}100%{transform:translateY(0) translateX(0) rotate(0)}}
@keyframes float2{0%{transform:translateY(0) translateX(0) rotate(0)}50%{transform:translateY(-20px) translateX(-10px) rotate(-6deg)}100%{transform:translateY(0) translateX(0) rotate(0)}}
@keyframes float3{0%{transform:translateY(0) translateX(0) rotate(0)}50%{transform:translateY(18px) translateX(-14px) rotate(6deg)}100%{transform:translateY(0) translateX(0) rotate(0)}}

/* Form polish */
label{font-weight:600}
input[type="number"],select,input[type="text"]{transition:box-shadow .12s ease,border-color .12s}
input:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 6px 18px rgba(43,124,255,0.12)}
.checkbox-inline{display:block;margin:8px 0}
.details{margin-top:12px}
.advice{margin-top:12px}