/* Basic reset */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root{
  --bg:#07061a;
  --card:#0f1330;
  --muted:#9aa0b4;
  --accent:#5b6bff;
  --panel:#171733;
  --glass: rgba(255,255,255,0.03);
  --rounded: 14px;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

/* Page background */
body{
  background: linear-gradient(180deg, #060617 0%, #0c1026 100%);
  color: #e9eefb;
  min-height:100vh;
  padding:28px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Top bar */
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:18px;
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand h1{ font-size:18px; font-weight:700; letter-spacing:0.2px; color:#fff; }
.sun-logo{ font-size:20px; transform:translateY(-1px); }

.units{
  background: rgba(255,255,255,0.04);
  padding:8px 12px;
  border-radius:10px;
  font-size:14px;
  color:var(--muted);
}

/* Main container */
.comtainer{
    max-width: 1100px;
    margin: 0 auto;
}
.title{
  text-align:center;
  font-size:40px;
  margin:12px 0 20px 0;
  font-weight:700;
  color: #fff;
}
/* search */
.Search-row{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin: 0 auto;
    margin-bottom: 28px;

}
.search{
  width:560px;
  max-width:70%;
  padding:14px 16px;
  border-radius:12px;
  border: none;
  outline:none;
  background: rgba(255,255,255,0.03);
  color: #fff;
  font-size:15px;
}
.btn{
  background: linear-gradient(180deg,var(--accent), #3b49f6);
  border: none;
  color:white;
  padding:12px 18px;
  border-radius:10px;
  cursor:pointer;
  font-weight:600;
}
/* contant layout */
.content{
    display:flex;
    gap: 28px;
    align-items: flex-start;
}

/* Left column */
.left-col{
    flex: 1;
}

/* Big card */
.big-card{
    background: linear-gradient(120deg,#2b2b7a 0%, #4a4ad0 55%);
    color: #fff;
    padding: 28px;
    border-radius: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 10px 30px rgba(14,14,400,6);
    margin-bottom: 20px;
}
.card-left .location{
    font-size: 20px;
    font-size: 700;
}
.card-left .date{ color: rgba(255,255,255,0.85); margin-top:6px; font-size:13px; opacity:0.9; }
.card-right{
    display: flex;
    align-items: center;
    gap: 14px;
}
.card-right .icon{ font-size:28px; }
.card-right .temp{ font-size:64px; font-weight:700; letter-spacing: -2px;
}

/* Quick stats */
.quick-stats{
    display: flex;
    gap: 14px;
    margin-top: 12px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.stat{
  background: rgba(255,255,255,0.02);
  padding:16px;
  border-radius:12px;
  min-width:120px;
  flex:1;
  text-align:left;
}
.stat .label{ color:var(--muted); font-size:13px; margin-bottom:6px; }
.stat .value{ font-size:20px; font-weight:700; }

/* Daily forecast */
.section-title{ color:#cfd6f8; margin:8px 0 12px 0; font-weight:600; }
.daily-forecast{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.day{
  background: rgba(255,255,255,0.03);
  padding:12px;
  border-radius:12px;
  width:92px;
  text-align:center;
  box-shadow: inset 0 -4px 0 rgba(255,255,255,0.01);
}
.day .dname{ font-weight:700; margin-bottom:6px; }
.day .dicon{ font-size:20px; margin-bottom:6px; }
.day .dtemp{ color:var(--muted); font-size:13px; }

/* Right column (hourly) */
.right-col{
  width:335px;
  background: rgba(255,255,255,0.02);
  padding:18px;
  border-radius:16px;
  color:#e9eefb;
  position:relative;
}
.hourly-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
}
.hourly-header h4{ margin:0; font-size:16px; }
.day-select{
  background:transparent;
  color:var(--muted);
  border:none;
  padding:8px;
  border-radius:8px;
  outline:none;
}

/* Hourly list */
.hourly-list{ list-style:none; display:flex; flex-direction:column; gap:10px; max-height:520px; overflow:auto; padding-right:6px; }
.hour{
  display:flex;
  justify-content:space-between;
  align-items:center;
  background: rgba(255,255,255,0.01);
  padding:12px;
  border-radius:10px;
}
.h-time{ color:var(--muted); width:60px; font-size:14px; }
.h-icon{ font-size:18px; width:40px; text-align:center; }
.h-temp{ font-weight:600; }

/* Footer */
.footer{ text-align:center; margin-top:36px; color:var(--muted); font-size:13px; }

/* Responsive */
@media (max-width: 980px){
  .content{ flex-direction:column; }
  .right-col{ width:100%; order:2; }
  .left-col{ order:1; }
  .search{ width:100%; max-width:unset; }
  .title{ font-size:28px; }
  .card-right .temp{ font-size:48px; }
}