/* ---------- Reset & Layout ---------- */
  :root{
    --glass: rgba(255,255,255,0.08);
    --glass-strong: rgba(255,255,255,0.12);
    --accent: #ffd166;
    --white: #ffffff;
    --muted: rgba(255,255,255,0.8);
    --card-w: 980px;
    --desktop-padding: 60px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%;width:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;}
  body{
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    color:var(--white);
    overflow:hidden;
    background:linear-gradient(180deg,#0f172a 0%,#0b1220 100%);
  }

  /* ---------- App Shell ---------- */
  #app {
    height:100vh; width:100vw;
    display:flex; align-items:center; justify-content:center;
    padding:var(--desktop-padding);
    position:relative;
  }

  /* Dynamic sky background (will be changed from JS for weather) */
  .sky {
    position:absolute; inset:0; z-index:0;
    background: linear-gradient(180deg,#0b1220,#071026);
    transition: background 1s ease;
    overflow:hidden;
  }

  /* Decorative gradient overlays for extra depth */
  .sky::after{
    content:""; position:absolute; inset:0;
    background: radial-gradient(1000px 400px at 20% 20%, rgba(255,255,255,0.03), transparent 10%),
                radial-gradient(1200px 500px at 80% 70%, rgba(255,255,255,0.02), transparent 12%);
    pointer-events:none;
  }

  /* ---------- Main panel ---------- */
  .panel {
    z-index: 10;
    width: min(var(--card-w), calc(100% - 120px));
    display:grid;
    grid-template-columns: 420px 1fr;
    gap: 28px;
    align-items:center;
    padding: 28px;
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
    border-radius: 18px;
    box-shadow: 0 10px 40px rgba(2,6,23,0.6);
    backdrop-filter: blur(10px) saturate(120%);
    border: 1px solid rgba(255,255,255,0.04);
  }

  /* Left column (big visual + controls) */
  .left {
    display:flex; flex-direction:column; align-items:center; gap:18px;
  }

  .title {
    width:100%; display:flex; justify-content:space-between; align-items:center;
  }
  .title h1 { font-size:28px; letter-spacing: -0.5px; }
  .title .sub { color:var(--muted); font-size:13px }

  .searchbar {
    margin-top:8px; width:100%;
    display:flex; gap:12px; align-items:center;
  }
  .searchbar input{
    flex:1; padding:14px 18px; border-radius:999px; border:none;
    background: rgba(255,255,255,0.04); color:var(--white); font-size:16px;
    outline:none; box-shadow: inset 0 -2px 10px rgba(0,0,0,0.5);
    transition: transform .18s ease, box-shadow .18s;
  }
  .searchbar input:focus{ transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0,0,0,0.45); }
  .searchbar button{
    padding:12px 18px; border-radius:999px; background:linear-gradient(180deg,var(--accent),#ffb703);
    border:none; cursor:pointer; font-weight:700; color:#111; box-shadow: 0 8px 20px rgba(255,183,3,0.12);
    transition: transform .16s ease;
  }
  .searchbar button:hover{ transform: translateY(-4px) scale(1.02); }

  /* big visual canvas container */
  .visual {
    width:100%; height:360px; border-radius:12px; overflow:hidden; position:relative;
    display:flex; align-items:center; justify-content:center;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border:1px solid rgba(255,255,255,0.03);
  }

  /* placeholder for SVG / icons */
  .viz-wrap { position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; }

  /* Right column (stats & details) */
  .right {
    display:flex; flex-direction:column; gap:18px; padding-right:4px;
  }

  .main-temp {
    display:flex; gap:22px; align-items:center; justify-content:space-between;
  }
  .temp-big { font-size:72px; font-weight:700; line-height:1; letter-spacing:-1px; }
  .temp-meta {
    text-align:right;
  }
  .meta-item { color:var(--muted); font-size:14px; margin-bottom:6px; }

  .details {
    display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; margin-top:6px;
  }
  .detail-card {
    background: linear-gradient(180deg, rgba(0,0,0,0.08), rgba(255,255,255,0.02));
    padding:14px; border-radius:10px; text-align:center; font-size:14px;
    border: 1px solid rgba(255,255,255,0.03);
  }
  .detail-card .val { font-weight:700; font-size:18px; margin-top:6px; }

  /* footer small */
  .credit { font-size:12px; color:var(--muted); margin-top:8px; text-align:center; }

  /* ---------- Weather-specific classes ---------- */
  /* Sunny */
  .sunny-bg { background: linear-gradient(180deg, #fff1c9 0%, #ffd166 40%, #ffb703 100%); color:#1a1a1a; }
  .sunny .visual { box-shadow: 0 20px 60px rgba(255,180,0,0.08) inset; }

  /* Clear night */
  .night-bg { background: linear-gradient(180deg,#091027 0%,#021028 60%); }

  /* Cloudy */
  .cloudy-bg { background: linear-gradient(180deg,#d7dfe9 0%, #aeb7c6 100%); color:#111; }
  .cloudy .visual { background:linear-gradient(180deg, rgba(255,255,255,0.28), rgba(255,255,255,0.06)); }

  /* Rain */
  .rainy-bg { background: linear-gradient(180deg,#4b79a1 0%, #283e51 100%); }
  .rainy .visual { background: linear-gradient(180deg, rgba(0,0,0,0.06), rgba(255,255,255,0.02)); }

  /* Snow */
  .snowy-bg { background: linear-gradient(180deg,#83a4d4 0%, #b6fbff 100%); color:#111; }
  .snowy .visual { background: linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,0.06)); }

  /* Fog */
  .fog-bg { background: linear-gradient(180deg,#cfd9df 0%, #e2ebf0 100%); color:#111; }
  .foggy .visual { opacity:0.92; filter: blur(.4px); }

  /* ---------- Small niceties ---------- */
  .chip {
    display:inline-flex; gap:8px; align-items:center; padding:6px 10px; border-radius:999px;
    background: rgba(0,0,0,0.08); font-weight:600; color:var(--white);
  }
  .muted { color: var(--muted); }

  /* responsive large-screen only adjustments */
  @media (max-width:1100px){
    .panel { grid-template-columns: 1fr; width: calc(100% - 80px); }
    .visual{ height:260px }
    .temp-big{ font-size:48px }
  }
  @media (max-width:700px){
    body{overflow:auto}
    #app{padding:20px}
    .visual{height:220px}
    .panel{width:100%; padding:16px; gap:12px}
  }
  /* Keep all your previous CSS here, then add these extras */

/* 7-day forecast */
.forecast {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  overflow-x: auto;
  padding-bottom: 6px;
}
.forecast-day {
  flex: 0 0 auto;
  background: rgba(255,255,255,0.05);
  border-radius: 10px;
  padding: 8px 10px;
  text-align: center;
  font-size: 12px;
  border: 1px solid rgba(255,255,255,0.04);
  min-width: 68px;
}
.forecast-day img {
  width: 36px;
  height: 36px;
}

/* Lightning effect */
.lightning {
  position: absolute;
  inset: 0;
  background: white;
  opacity: 0;
  pointer-events: none;
  z-index: 9;
}

/* Lightning animation */
@keyframes flash {
  0% { opacity: 0; }
  5% { opacity: 0.8; }
  10% { opacity: 0; }
  15% { opacity: 0.5; }
  20% { opacity: 0; }
}

/* Animated gradient sky */
.sky.animated-gradient {
  animation: skyShift 30s ease-in-out infinite alternate;
}
@keyframes skyShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}
/* Responsive adjustments for mobile view */
@media (max-width: 768px) {
  .panel {
    flex-direction: column;
    padding: 10px;
  }

  .left, .right {
    width: 100%;
    padding: 0;
  }

  .title h1 {
    font-size: 1.4rem;
    line-height: 1.2;
  }
  .sub {
    font-size: 0.9rem;
  }

  .searchbar {
    flex-direction: column;
    gap: 8px;
  }
  .searchbar input {
    width: 100%;
    font-size: 1rem;
  }
  .searchbar button {
    width: 100%;
    font-size: 1rem;
  }

  .visual {
    height: 200px;
  }

  .main-temp {
    flex-direction: column;
    align-items: flex-start;
  }
  .temp-big {
    font-size: 2.5rem;
  }

  .details {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .forecast {
    gap: 6px;
    overflow-x: auto;
  }
  .forecast-day {
    min-width: 60px;
    font-size: 11px;
  }
}