* {
margin: 0;
padding: 0;
font-family: 'Outfit', sans-serif;
box-sizing: border-box;
}

body {
background: #0e0e10;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}

.card {
width: 90%;
max-width: 580px;
background: linear-gradient(160deg, #1c1b22 0%, #1e2028 50%, #191c24 100%);
color: #fff;
border-radius: 24px;
padding: 50px 45px;
text-align: center;
border: 1px solid rgba(255,255,255,0.06);
box-shadow: 0 30px 60px rgba(0,0,0,0.5);
}

.search {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}

.search input {
border: 0;
outline: 0;
background: rgba(255,255,255,0.08);
color: #fff;
padding: 10px 25px;
height: 68px;
border-radius: 30px;
flex: 1;
margin-right: 16px;
font-size: 18px;
letter-spacing: 0.3px;
}

.search input::placeholder {
color: rgba(255,255,255,0.25);
}

.search button {
border: 0;
outline: 0;
background: rgba(255,255,255,0.08);
border-radius: 50%;
width: 68px;
height: 68px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s;
}

.search button:hover {
background: rgba(255,255,255,0.15);
}

.search button svg {
width: 18px;
height: 18px;
stroke: rgba(255,255,255,0.6);
}

.weather-icon {
width: 90px;
height: 90px;
margin: 40px auto 0;
display: block;
color: #fff;
opacity: 0.9;
}

.weather-icon svg {
width: 100%;
height: 100%;
}

.weather h1 {
font-size: 96px;
font-weight: 100;
letter-spacing: -5px;
margin-top: 10px;
line-height: 1;
}

.weather h2 {
font-size: 16px;
font-weight: 400;
letter-spacing: 5px;
text-transform: uppercase;
opacity: 0.4;
margin-top: 14px;
}

.details {
display: flex;
align-items: center;
justify-content: space-around;
margin-top: 50px;
padding-top: 40px;
border-top: 1px solid rgba(255,255,255,0.08);
}

.col {
display: flex;
align-items: center;
text-align: left;
gap: 12px;
}

.col svg {
opacity: 0.4;
}

.col p:first-child {
font-size: 22px;
font-weight: 300;
}

.col p:last-child {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1.2px;
opacity: 0.4;
margin-top: 4px;
}

.weather {
display: none;
animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}

.error {
text-align: center;
font-size: 14px;
margin-top: 20px;
opacity: 0.5;
letter-spacing: 1px;
display: none;
}

.feels {
font-size: 13px;
font-weight: 300;
opacity: 0.25;
margin-top: 4px;
letter-spacing: 1px;
}

@media (max-width: 1024px) {
.card {
max-width: 520px;
}
}

@media (max-width: 768px) {
.card {
max-width: 480px;
padding: 40px 32px;
}

.weather h1 {
font-size: 80px;
letter-spacing: -4px;
}
}

@media (max-width: 480px) {
.card {
width: 92%;
padding: 32px 24px;
border-radius: 20px;
}

.search input {
height: 56px;
font-size: 16px;
}

.search button {
width: 56px;
height: 56px;
}

.weather-icon {
width: 70px;
height: 70px;
margin-top: 28px;
}

.weather h1 {
font-size: 72px;
letter-spacing: -3px;
}

.weather h2 {
font-size: 13px;
letter-spacing: 4px;
}

.details {
margin-top: 32px;
padding-top: 28px;
}

.col p:first-child {
font-size: 18px;
}
}

@media (max-width: 360px) {
.card {
width: 95%;
padding: 28px 20px;
}

.weather h1 {
font-size: 64px;
letter-spacing: -3px;
}

.search input {
height: 50px;
font-size: 15px;
}

.search button {
width: 50px;
height: 50px;
}
}