*{margin:0;padding:0;box-sizing:border-box;font-family:Inter,Arial,sans-serif}
:root{
--bg:#020617;
--text:#fff;
--card:rgba(255,255,255,.08);
--border:rgba(255,255,255,.1)
}
[data-theme="light"]{
--bg:#edf4ff;
--text:#0f172a;
--card:rgba(255,255,255,.8);
--border:rgba(255,255,255,.8)
}
body{background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden}
.bg{
position:fixed;
inset:0;
background:
radial-gradient(circle at top left,#3b82f655,transparent 35%),
radial-gradient(circle at bottom right,#9333ea55,transparent 35%),
var(--bg);
z-index:-1
}
header{padding:20px;position:sticky;top:0;backdrop-filter:blur(20px);z-index:10}
.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}
h1{font-size:2rem}
.search{display:flex;gap:10px}
input,button{border:none;outline:none}
input{
flex:1;
padding:16px;
border-radius:18px;
background:var(--card);
color:var(--text)
}
button{
padding:16px 18px;
border-radius:18px;
background:#2563eb;
color:white;
font-weight:700;
cursor:pointer
}
main{padding:20px;display:flex;flex-direction:column;gap:20px}
.glass{
background:var(--card);
backdrop-filter:blur(20px);
border:1px solid var(--border)
}
.hero{
padding:30px;
border-radius:28px;
display:flex;
justify-content:space-between;
align-items:center
}
.heroRight{display:flex;align-items:center;gap:15px}
#temp{font-size:4rem;font-weight:800}
#icon{font-size:4rem}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.card{padding:24px;border-radius:28px}
.details{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
margin-top:18px
}
.details div{
padding:16px;
border-radius:20px;
background:rgba(255,255,255,.05);
display:flex;
flex-direction:column;
gap:8px
}
.hourly{
display:flex;
gap:12px;
overflow-x:auto;
padding-top:18px
}
.hour{
min-width:90px;
padding:15px;
border-radius:18px;
background:rgba(255,255,255,.05);
text-align:center
}
.daily{
display:grid;
gap:12px;
margin-top:18px
}
.day{
display:flex;
justify-content:space-between;
padding:15px;
border-radius:18px;
background:rgba(255,255,255,.05)
}
#map{
height:400px;
border-radius:24px;
margin-top:18px
}
.small{opacity:.7;margin-bottom:10px}
@media(max-width:900px){
.grid{grid-template-columns:1fr}
.hero{flex-direction:column;align-items:flex-start;gap:20px}
#temp,#icon{font-size:3rem}
}