*{box-sizing:border-box;font-family:Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif}
body{background:#f3f4f6;margin:0;padding:20px;display:flex;align-items:center;justify-content:center;height:100vh}
.container{background:#fff;padding:20px;border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,0.08);width:100%;max-width:480px}
h1{margin:0 0 12px 0;font-size:20px}
.controls{display:flex;gap:8px;margin-bottom:12px}
#city{flex:1;padding:8px 10px;border:1px solid #ddd;border-radius:6px}
button{padding:8px 12px;border:none;background:#2563eb;color:#fff;border-radius:6px;cursor:pointer}
.result{padding:10px;border-radius:6px;background:#f9fafb;border:1px solid #f1f5f9}
.row{display:flex;align-items:center;gap:12px}
.temp{font-size:36px;font-weight:700}
.desc{text-transform:capitalize;color:#374151}
.error{color:#b91c1c}