:root{
  --bg-dark-1:#071226; --bg-dark-2:#061428;
  --bg-light-1:#f7fbff; --bg-light-2:#eef7ff;
  --muted-dark:#9fb2c9; --muted-light:#4b5563;
  --accent:#3be07a; --accent-dark:#25a662;
  --hot:#ff6b4a; --cold:#4aa7ff; --neutral:#9aa0a6;
  --card-shadow-dark: 0 14px 40px rgba(2,6,23,0.55);
  --card-shadow-light: 0 14px 40px rgba(20,30,40,0.06);
  --transition: 260ms cubic-bezier(.2,.9,.2,1);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
*{box-sizing:border-box}
html,body{height:100%; margin:0; -webkit-font-smoothing:antialiased;}
body.theme-dark{ background: linear-gradient(180deg,var(--bg-dark-1),var(--bg-dark-2)); color:#eaf4f9; }
body.theme-light{ background: linear-gradient(180deg,var(--bg-light-1),var(--bg-light-2)); color:#0f172a; }

/* background animation */
.weather-bg{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.sun-glow{ position:absolute; top:18px; left:50%; transform:translateX(-50%); width:220px; height:220px; border-radius:50%; filter: blur(40px); opacity:0.35; animation:glow 12s ease-in-out infinite; background: radial-gradient(circle at 30% 30%, rgba(255,220,120,0.12), rgba(255,200,80,0.04) 40%, transparent 60%); }
@keyframes glow { 0%{ transform:translateX(-50%) scale(0.98)} 50%{ transform:translateX(-50%) scale(1.03)} 100%{ transform:translateX(-50%) scale(0.98)} }
.cloud{ position:absolute; background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.01)); border-radius:50%; filter: blur(36px); opacity:0.12; }
.cloud.c1{ width:420px; height:160px; top:18px; left:-60px; animation:cloudFloat 20s linear infinite; }
.cloud.c2{ width:340px; height:140px; top:120px; right:-80px; animation:cloudFloat 26s linear infinite reverse; }
@keyframes cloudFloat { 0%{ transform:translateX(-10px)} 50%{ transform:translateX(14px)} 100%{ transform:translateX(-10px)} }
.particles{ position:absolute; inset:0; background-image: radial-gradient(rgba(255,255,255,0.02) 0.9px, transparent 0.9px); background-size: 20px 20px; opacity:0.02; }
.rain-layer{ position:absolute; left:0; right:0; top:0; bottom:0; pointer-events:none; opacity:0; transition: opacity 360ms ease; }
.raindrops{ position:absolute; left:0; right:0; top:0; bottom:0; pointer-events:none; overflow:hidden; opacity:0; transition: opacity 360ms ease; }

/* header */
.site-header, .site-footer { display:flex; align-items:center; justify-content:center; z-index:12; width:100%; position:relative; }
.site-header{ height:64px; box-shadow:0 6px 12px rgba(0,0,0,0.12); border-bottom:1px solid rgba(255,255,255,0.02); }
.header-inner{ width:100%; max-width:1100px; display:flex; align-items:center; justify-content:center; gap:14px; padding:0 12px; position:relative; }
.header-title{ margin:0; font-size:20px; font-weight:800; color:inherit; }

/* theme toggle right center */
.header-controls{ position:absolute; right:12px; top:50%; transform:translateY(-50%); display:flex; align-items:center; gap:10px; padding:6px; }
.theme-toggle{ width:72px; height:36px; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.toggle-track{ width:66px; height:30px; border-radius:999px; background:rgba(255,255,255,0.04); padding:4px; display:flex; align-items:center; position:relative; transition: background var(--transition), box-shadow var(--transition); }
.toggle-thumb{ width:22px; height:22px; border-radius:50%; background:linear-gradient(180deg,#fff,#ddd); position:absolute; left:4px; display:flex; align-items:center; justify-content:center; transform:translateX(0); transition: transform 320ms cubic-bezier(.2,.9,.2,1), background 320ms; box-shadow: 0 6px 20px rgba(0,0,0,0.12); }
.toggle-thumb .moon-icon{ display:block; font-size:12px; color:#2b3b5a; }
.toggle-thumb .sun-icon{ display:none; font-size:12px; color:#ffb34d; }
body.theme-light .toggle-track{ background: rgba(20,30,40,0.06); }
body.theme-light .toggle-thumb{ transform: translateX(36px); background:linear-gradient(180deg,#fff,#ffeab0); }
body.theme-light .toggle-thumb .moon-icon{ display:none; }
body.theme-light .toggle-thumb .sun-icon{ display:block; }

/* container */
.container{ width:100%; max-width:1100px; margin:12px auto; display:grid; grid-template-columns: 1fr 340px; gap:18px; align-items:start; padding:0 12px 90px 12px; z-index:6; }

/* card base */
.card{ border-radius:12px; padding:14px; border:1px solid rgba(255,255,255,0.03); box-shadow:var(--card-shadow-dark); transition: transform var(--transition), box-shadow var(--transition), opacity 420ms ease, background 320ms; opacity:0; transform:translateY(18px); background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); }
body.theme-light .card{ border:1px solid rgba(20,30,40,0.04); background: linear-gradient(180deg,var(--bg-light-1),var(--bg-light-2)); box-shadow: var(--card-shadow-light); color: #0f172a; }
.page-ready .card{ opacity:1; transform:none; }

/* equal heights */
.current-card, .saved-card { min-height: 340px; display:flex; flex-direction:column; justify-content:flex-start; }

/* search */
.current-card .search-row{ display:flex; gap:10px; margin-bottom:12px; align-items:center; }
.current-card input{ flex:1; padding:12px 14px; border-radius:10px; border:1px solid rgba(255,255,255,0.04); background: rgba(255,255,255,0.02); color:inherit; outline:none; transition:box-shadow var(--transition), transform var(--transition); font-weight:600; }
body.theme-light .current-card input{ background: rgba(255,255,255,0.98); color:#0b1720; border:1px solid rgba(10,20,30,0.06); }
.current-card input::placeholder{ color:rgba(235,245,250,0.45); }

/* search & location icon buttons - green hover & lift */
.icon-btn{ padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,0.04); background:transparent; color:var(--muted-dark); transition: all var(--transition); }
.icon-btn i{ font-size:16px; }
.icon-btn:hover{ transform:translateY(-6px); background: linear-gradient(90deg,var(--accent),var(--accent-dark)); color:#062014; box-shadow:0 12px 30px rgba(37,166,98,0.12); }

/* buttons save & clear - hover up + green/red */
.btn{ padding:8px 10px; border-radius:8px; background:transparent; border:1px solid rgba(255,255,255,0.04); color:var(--muted-dark); cursor:pointer; transition: all var(--transition); }
.btn.save{ background:#fff; color:#052014; border:1px solid rgba(255,255,255,0.06); padding:8px 12px; }
.btn.save:hover{ transform:translateY(-6px); background: linear-gradient(90deg,var(--accent),var(--accent-dark)); color:#052014; box-shadow:0 12px 30px rgba(37,166,98,0.12); }
.btn.clear{ background:#f0f0f0; color:#101010; padding:8px 12px; }
.btn.clear:hover{ transform:translateY(-6px); background:#ff6b6b; color:#fff; box-shadow:0 12px 30px rgba(255,107,107,0.12); }

/* current content layout */
.current-content{ display:flex; gap:12px; align-items:flex-start; }
.left-col{ flex:1; display:flex; flex-direction:column; gap:12px; }
.right-col{ width:260x; display:flex; flex-direction:column; gap:12px; align-items:stretch; }

/* location & temps */
.location{ display:flex; gap:12px; align-items:center; }
.loc-wrap{ width:44px; height:44px; display:grid; place-items:center; border-radius:10px; background:rgba(255,255,255,0.02); transition: transform var(--transition), box-shadow var(--transition); }
.loc-wrap:hover{ transform:translateY(-4px) scale(1.02); box-shadow: 0 12px 30px rgba(0,0,0,0.45); }
.loc-icon{ color:var(--accent); font-size:18px; }
.city{ font-weight:800; font-size:18px; }
.muted{ color:var(--muted-dark); font-size:13px; }

/* main row */
.main-row{ display:flex; gap:12px; align-items:center; }
.main-icon{ width:86px; height:86px; transition: transform 420ms cubic-bezier(.2,.9,.2,1), filter 420ms; }
.float-anim{ animation:float 4.5s ease-in-out infinite; }
@keyframes float { 0%{ transform:translateY(0) } 50%{ transform:translateY(-6px) } 100%{ transform:translateY(0) } }
.temp-large{ font-weight:800; font-size:42px; }

/* stats */
.stats-row{ display:flex; gap:12px; align-items:flex-start; }
.stat{ flex:1 1 140px; padding:10px; border-radius:10px; background:rgba(255,255,255,0.01); border:1px solid rgba(255,255,255,0.02); transition:box-shadow var(--transition), transform var(--transition); }
.stat:hover{ transform: translateY(-6px); box-shadow:0 12px 26px rgba(2,6,23,0.5); }
.s-title{ color:var(--muted-dark); font-size:12px; }
.s-value{ font-weight:700; margin-top:6px; }

/* humidity */
.humidity-stat{ border:1px solid rgba(255,255,255,0.03); }
.humidity-stat:hover{ box-shadow: 0 18px 44px rgba(0,0,0,0.6); transform:translateY(-6px); }

/* details */
.centered-detail{ display:flex; flex-direction:column; align-items:center; justify-content:center; padding:14px 10px; border-radius:8px; background:rgba(255,255,255,0.01); border:1px solid rgba(255,255,255,0.02); }

/* saved list */
.saved-header{ display:flex; justify-content:space-between; align-items:center; gap:12px; }
.saved-list{ display:flex; flex-direction:column; gap:8px; margin-top:10px; overflow:hidden; max-height:220px; }
.place{ display:flex; gap:8px; align-items:center; padding:8px; border-radius:8px; background:rgba(255,255,255,0.01); border:1px solid rgba(255,255,255,0.02); transition: all var(--transition); }
.place img{ width:44px; height:44px; border-radius:8px; }

/* forecast - exactly 6 boxes fitting nicely */
.full-span{ grid-column:1/-1; margin-top:-8px; }
.forecast-strip{ display:flex; gap:12px; padding-top:8px; overflow:hidden; align-items:stretch; justify-content:space-between; padding-bottom:12px; }
.forecast-box{
  flex:1 1 0;
  min-width:0;
  margin:0 6px;
  height:140px;
  border-radius:12px;
  background: rgba(255,255,255,0.01);
  border:1px solid rgba(255,255,255,0.02);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  transition: transform 320ms cubic-bezier(.2,.9,.2,1), box-shadow 320ms ease, opacity 360ms ease;
  opacity:0; transform:translateY(12px);
}
.page-ready .forecast-box{ opacity:1; transform:none; }
/* float up hover */
.forecast-box:hover{ transform: translateY(-12px) scale(1.01); box-shadow:0 18px 38px rgba(0,0,0,0.42); }
.forecast-box img{ width:56px; height:56px; }
.forecast-box .muted{ text-align:center; font-size:13px; padding:0 6px; }

/* mobile */
@media (max-width:920px){
  .container{ grid-template-columns: 1fr; padding:0 12px 120px 12px; }
  .saved-card{ order:2; }
  .full-span{ order:3; margin-top:-6px; }
  .forecast-strip{ flex-direction:column; gap:10px; }
  .forecast-box{ width:100%; flex-direction:row; height:110px; align-items:center; justify-content:flex-start; padding:12px; }
  .forecast-box img{ width:48px; height:48px; margin-right:12px; }
  .saved-list{ max-height:none; overflow:visible; }
}

/* footer (smaller height) */
.site-footer{ height:44px; position:fixed; left:0; right:0; bottom:0; background: linear-gradient(180deg, transparent, rgba(0,0,0,0.12)); box-shadow: 0 -6px 18px rgba(0,0,0,0.12); border-top:1px solid rgba(255,255,255,0.02); z-index:8; }
.footer-inner{ width:100%; max-width:1100px; margin:0 auto; text-align:center; color:var(--muted-dark); padding:8px 12px; font-size:13px; }

/* footer link plain text */
#harishLink{ color:inherit; text-decoration:none; cursor:pointer; }
#harishLink:hover{ text-decoration:none; transform:translateY(-1px); }

/* focus */
:focus{ outline:3px solid rgba(75,224,122,0.12); outline-offset:2px; }

/* temp color classes */
.temp-cold{ color: var(--cold); filter: drop-shadow(0 6px 16px rgba(74,167,255,0.06)); }
.temp-warm{ color: orange; filter: drop-shadow(0 8px 20px rgba(255,165,0,0.06)); }
.temp-hot{ color: var(--hot); filter: drop-shadow(0 10px 28px rgba(255,107,74,0.08)); }
.temp-windy{ color: var(--neutral); filter: drop-shadow(0 6px 14px rgba(150,150,150,0.05)); }