<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background:#f8fbff; color:#2c3e50; line-height:1.6; scroll-behavior:smooth; }
header { position:sticky; top:0; background:linear-gradient(135deg,#667eea,#764ba2); z-index:1000; box-shadow:0 4px 12px rgba(0,0,0,0.1); }
nav ul { list-style:none; display:flex; justify-content:center; flex-wrap:wrap; padding:15px 20px; }
nav ul li { margin:0 10px; }
nav ul li a { color:#fff; font-weight:600; padding:12px 20px; border-radius:25px; transition:all 0.3s; display:block; min-height:44px; }
nav ul li a:hover { background:rgba(255,255,255,0.2); transform:translateY(-2px); }
.hero { background:linear-gradient(135deg,#ff6b6b,#feca57); color:#fff; text-align:center; padding:80px 20px; }
.hero h1 { font-size:clamp(2em, 6vw, 4em); margin-bottom:20px; font-weight:800; }
.hero p { font-size:clamp(1.1em, 3vw, 1.4em); margin-bottom:30px; max-width:800px; margin:auto; }
.hero a { display:inline-block; padding:16px 35px; background:#fff; color:#ff6b6b; border-radius:50px; font-weight:700; font-size:1.1em; transition:all 0.3s; }
.hero a:hover { transform:translateY(-3px); box-shadow:0 10px 30px rgba(0,0,0,0.2); }
.container { max-width:1200px; margin:auto; padding:50px 20px; }
.calculator-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; }
.calculator-card { background:#fff; border-radius:16px; box-shadow:0 8px 30px rgba(0,0,0,0.08); overflow:hidden; transition:all 0.3s; cursor:pointer; }
.calculator-card:hover { transform:translateY(-8px); box-shadow:0 20px 50px rgba(0,0,0,0.15); }
.calculator-header { padding:20px 25px; background:linear-gradient(135deg,#667eea,#764ba2); color:#fff; font-weight:700; font-size:1.15em; display:flex; align-items:center; }
.calculator-header i { margin-right:12px; font-size:1.25em; }
.calculator-body { padding:25px; display:none; background:#fafbff; }
.calculator-body.active { display:block; animation:slideDown 0.3s ease-out; }
@keyframes slideDown { from { opacity:0; transform:translateY(-10px); } to { opacity:1; transform:translateY(0); } }
label { display:block; margin:18px 0 8px 0; font-weight:600; color:#34495e; font-size:1em; }
input, select { width:100%; padding:16px; border:2px solid #e1e8ed; border-radius:12px; font-size:1.1em; transition:all 0.3s; min-height:52px; background:#fff; }
input:focus, select:focus { outline:none; border-color:#667eea; box-shadow:0 0 0 3px rgba(102,126,234,0.1); }
input.error { border-color:#e74c3c; }
button { background:linear-gradient(135deg,#667eea,#764ba2); color:#fff; border:none; padding:16px 24px; border-radius:12px; cursor:pointer; font-size:1.1em; font-weight:600; width:100%; margin:8px 0; min-height:52px; transition:all 0.3s; }
button:hover { transform:translateY(-2px); box-shadow:0 8px 25px rgba(102,126,234,0.3); }
.result { margin-top:20px; padding:20px; background:linear-gradient(135deg,#11998e,#38ef7d); color:#fff; border-radius:12px; font-weight:700; font-size:1.2em; text-align:center; display:none; }
.result.show { display:block; animation:pulse 0.5s; }
@keyframes pulse { 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.02); } }
.status-bar { background:#e8f4fd; padding:20px; border-radius:12px; margin-bottom:30px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:15px; }
.unit-group { display:none; }
.unit-group.active { display:block; }
@media (max-width: 480px) {
  .container { padding:30px 15px; }
  .hero { padding:60px 15px; }
  .calculator-grid { grid-template-columns:1fr; }
  nav ul { flex-direction:column; }
}
</style>