:root{
  --bg1:#0f172a;
  --bg2:#1e293b;
  --glass:rgba(255,255,255,0.08);
  --stroke:rgba(255,255,255,0.12);
  --text:#e2e8f0;
  --muted:#94a3b8;
  --accent:#f59e0b;
  --ok:#22c55e;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,Helvetica,sans-serif;
  background: radial-gradient(1200px 800px at 10% -10%, #172554 0, transparent 70%),
              radial-gradient(900px 600px at 100% 0%, #0ea5e9 0, transparent 50%),
              linear-gradient(160deg,var(--bg1),#0b1220 60%);
  color:var(--text);
  letter-spacing:0.2px;
}

.app{max-width:920px;margin:0 auto;padding:28px;}

.header{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;margin-bottom:20px;
}

.brand{display:flex;align-items:center;gap:10px}
.logo{font-size:28px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
.title{font-weight:700;letter-spacing:.4px}

.search{display:flex;gap:10px;align-items:center}
.search input{
  width:260px;max-width:60vw;
  background:var(--glass);border:1px solid var(--stroke);color:var(--text);
  padding:12px 14px;border-radius:12px;outline:none;
  transition:border .2s, box-shadow .2s;
}
.search input:focus{border-color:#38bdf8;box-shadow:0 0 0 4px rgba(56,189,248,.15)}
.search button{
  background:linear-gradient(180deg,#fbbf24,#f59e0b);
  border:none;color:#1a1a1a;font-weight:700;padding:12px 16px;border-radius:12px;
  cursor:pointer;transition:transform .05s ease;
}
.search button:active{transform:translateY(1px)}

.card{
  background:backdrop-filter: blur(10px); /* just to trigger Safari compositing */
  background-color:var(--glass);
  border:1px solid var(--stroke);
  border-radius:16px;padding:18px 18px 16px;margin:14px 0;
  box-shadow:0 8px 24px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.06);
}

.current .placeholder{color:var(--muted);text-align:center;padding:28px 0}

.current .row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;
}

.current .left{display:flex;align-items:center;gap:16px}
.current .left .temp{font-size:48px;font-weight:700}
.current .left .city{font-size:20px;color:var(--muted)}

.current .right{display:flex;gap:18px}
.badge{
  display:flex;align-items:center;gap:8px;
  padding:8px 12px;border-radius:12px;border:1px solid var(--stroke);
  background:rgba(255,255,255,0.04);color:var(--text);
}

.badge img{width:22px;height:22px}

.forecast h2{margin:8px 4px 10px 4px;font-size:16px;color:var(--muted);font-weight:600}

.forecast-grid{
  display:grid;grid-template-columns:repeat(3, 1fr);gap:12px;
}
.day{
  border:1px solid var(--stroke);border-radius:14px;padding:12px;
  background:rgba(255,255,255,0.05);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  transition:transform .15s ease, border-color .15s ease;
}
.day:hover{transform:translateY(-2px);border-color:#38bdf8}
.day .date{font-size:13px;color:var(--muted)}
.day .t{display:flex;gap:8px;font-weight:600}
.day .t .min{color:#93c5fd}
.day .t .max{color:#fca5a5}
.day img{width:42px;height:42px}

.footer{margin-top:20px;text-align:center;color:var(--muted)}
@media (max-width:640px){
  .forecast-grid{grid-template-columns:1fr}
  .search input{width:100%}
}