:root{--primary-color: #2b2d42;--secondary-color: #8d99ae;--accent-color: #ef233c;--background-light: #edf2f4;--text-light: #ffffff;--text-dark: #2b2d42;--shadow: 0 8px 30px rgba(0, 0, 0, .12)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Poppins,sans-serif;background:linear-gradient(135deg,#00b4db,#0083b0);min-height:100vh;display:flex;justify-content:center;align-items:center;padding:20px;transition:background .3s ease}body.night-mode{background:linear-gradient(135deg,#141e30,#243b55)}.container{width:100%;max-width:450px;margin:0 auto}.weather-card{background:rgba(255,255,255,.9);border-radius:24px;padding:2rem;color:var(--text-dark);box-shadow:var(--shadow);position:relative;overflow:hidden}.theme-toggle{position:absolute;top:1rem;right:1rem;z-index:10}#theme-btn{background:transparent;border:none;color:var(--text-dark);font-size:1.5rem;cursor:pointer;padding:.5rem;transition:transform .3s ease}#theme-btn:hover{transform:scale(1.1)}.search{position:relative;margin:1.5rem 0}.search input{width:100%;padding:1rem 1.5rem;border:2px solid #e0e0e0;border-radius:50px;font-size:1rem;color:var(--text-dark);background:white;transition:all .3s ease}.search input:focus{outline:none;border-color:var(--accent-color);box-shadow:0 0 0 3px #ef233c1a}#search-btn{position:absolute;right:5px;top:50%;transform:translateY(-50%);background:var(--accent-color);color:#fff;border:none;border-radius:50px;padding:.75rem 1.5rem;cursor:pointer;transition:all .3s ease}#search-btn:hover{background:#d90429}.suggestions{position:absolute;top:100%;left:0;right:0;background:white;border-radius:12px;margin-top:.5rem;box-shadow:var(--shadow);z-index:100;max-height:200px;overflow-y:auto}.suggestions div{padding:.75rem 1rem;cursor:pointer;transition:background .2s ease}.suggestions div:hover{background:var(--background-light)}.weather-info{text-align:center}#city-name{font-size:1.75rem;font-weight:600;margin:1rem 0;color:var(--text-dark)}.city-image{width:100%;height:200px;margin:1.5rem 0;border-radius:16px;overflow:hidden}.city-image img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}.city-image img:hover{transform:scale(1.05)}.weather-icon{font-size:4rem;margin:1.5rem 0;color:var(--accent-color)}#temperature{font-size:3.5rem;font-weight:700;color:var(--text-dark);margin:1rem 0}#weather-description{font-size:1.25rem;color:var(--secondary-color);margin-bottom:1.5rem}.details{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;margin-top:2rem;padding-top:1.5rem;border-top:2px solid var(--background-light)}.details p{display:flex;align-items:center;justify-content:center;gap:.5rem;font-size:1rem;color:var(--secondary-color)}.details i{color:var(--accent-color);font-size:1.25rem}@media (max-width: 480px){.container{padding:0 1rem}.weather-card{padding:1.5rem}#city-name{font-size:1.5rem}#temperature{font-size:3rem}.city-image{height:150px}.details{grid-template-columns:1fr;gap:1rem}}