:root{
  /* Dark theme (defaults) */
  --page-bg-dark: linear-gradient(180deg,#071428 0%, #0f1724 100%);
  --card-dark: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  --text-dark: #e6eef6;
  --accent-dark: #61dafb;
  --muted-dark: #9aa4b2;
  --glass-dark: rgba(255,255,255,0.04);

  /* Light theme */
  --page-bg-light: linear-gradient(180deg,#f6fbff 0%, #e6eef6 100%);
  --card-light: linear-gradient(180deg, rgba(6,32,48,0.03), rgba(6,32,48,0.02));
  --text-light: #071428;
  --accent-light: #0b78d1;
  --muted-light: #5b6b7a;
  --glass-light: rgba(6,32,48,0.03);

  /* Weather backgrounds (dark) */
  --weather-clear-dark: linear-gradient(180deg,#3a8dde 0%,#071428 100%);
  --weather-clouds-dark: linear-gradient(180deg,#5b6b7a 0%,#0b1220 100%);
  --weather-rain-dark: linear-gradient(180deg,#2b6a8a 0%,#071428 100%);
  --weather-snow-dark: linear-gradient(180deg,#7fb3d5 0%,#071428 100%);
  --weather-thunder-dark: linear-gradient(180deg,#3b3b5f 0%,#071428 100%);

  /* Weather backgrounds (light) */
  --weather-clear-light: linear-gradient(180deg,#eaf9ff 0%, #f6fbff 100%);
  --weather-clouds-light: linear-gradient(180deg,#eef3f6 0%, #e6eef6 100%);
  --weather-rain-light: linear-gradient(180deg,#e6f2f8 0%, #eaf6fb 100%);
  --weather-snow-light: linear-gradient(180deg,#f7fbff 0%, #eef8ff 100%);
  --weather-thunder-light: linear-gradient(180deg,#f0f2f5 0%, #e6eef6 100%);

  /* CSS vars used by the UI; default to dark */
  --page-bg: var(--page-bg-dark);
  --card-bg: var(--card-dark);
  --text: var(--text-dark);
  --accent: var(--accent-dark);
  --muted: var(--muted-dark);
  --glass: var(--glass-dark);
  /* Suggestion background overrides for readability */
  --suggest-bg-dark: rgba(6,12,20,0.94);
  --suggest-bg-light: rgba(255,255,255,0.96);
}

*{box-sizing:border-box}
html,body{height:100%}

/* Layout */
.app{width:100%;max-width:980px}
.header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:18px}
.brand{font-size:28px;margin:0}
.tagline{margin:0;color:var(--muted)}
.controls{margin-bottom:18px}
.search-form{display:flex;gap:8px}
.search-form input{flex:1;padding:10px 12px;border-radius:10px;border:1px solid rgba(0,0,0,0.06);background:var(--glass);color:var(--text)}
.search-form button{padding:10px 14px;border-radius:10px;border:none;background:var(--accent);color:#fff;font-weight:600}
.messages{margin-top:8px;min-height:22px;color:var(--muted)}
.hidden{display:none}
.weather-section{display:grid;grid-template-columns:1fr 360px;gap:18px;align-items:start}
.current-card{background:var(--card-bg);padding:18px;border-radius:12px}
.current-header{display:flex;justify-content:space-between;align-items:center}
.current-header h2{margin:0}
.muted{color:var(--muted)}
.current-temp{display:flex;align-items:center;gap:12px}
.weather-icon{width:72px;height:72px}
.temp{font-size:36px;font-weight:700}
.current-details{display:flex;gap:18px;margin-top:12px;color:var(--muted)}
.forecast{background:var(--card-bg);padding:14px;border-radius:12px}
.forecast h3{margin:0 0 10px 0}
.forecast-container{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.forecast-card{background:rgba(0,0,0,0.04);padding:10px;border-radius:8px;text-align:center}
.forecast-card .day{font-weight:700;margin-bottom:6px}
.forecast-card img{width:48px;height:48px}
.forecast-card .temps{margin-top:6px;color:var(--muted)}
.footer{margin-top:16px;text-align:center}

/* Responsive */
@media (max-width:880px){
  .weather-section{grid-template-columns:1fr;}
  .forecast-container{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:520px){
  .forecast-container{grid-template-columns:repeat(2,1fr);}
  .weather-icon{width:56px;height:56px}
}

/* Header & logo */
.brand-wrap{display:flex;align-items:center;gap:10px}
.logo{width:40px;height:40px;border-radius:8px;object-fit:cover}
.theme-toggle{background:transparent;border:1px solid rgba(0,0,0,0.06);padding:6px 8px;border-radius:8px;cursor:pointer}
/* Header actions */
.header-actions{display:flex;gap:8px;align-items:center}
.unit-toggle{background:var(--glass);border:1px solid rgba(0,0,0,0.06);padding:6px 10px;border-radius:8px;cursor:pointer;color:var(--text)}

/* Suggestions dropdown */
.search-wrap{position:relative;display:flex;align-items:center;z-index:10000}
.suggestions{position:absolute;left:0;right:0;top:calc(100% + 8px);background:var(--suggest-bg-dark);border-radius:10px;box-shadow:0 10px 30px rgba(2,6,23,0.5);list-style:none;padding:8px;max-height:260px;overflow:auto;z-index:10001;border:1px solid rgba(255,255,255,0.04)}
.suggestions.hidden{display:none}
.suggestions li{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-radius:8px;cursor:pointer;color:var(--text);font-size:14px;line-height:1.1}
.suggestions li + li{margin-top:8px}
.suggestions li:hover,.suggestions li[aria-selected="true"]{background:rgba(255,255,255,0.04)}
.suggestions strong{font-weight:700;font-size:14px}
.suggestions .muted{color:var(--muted);font-size:12px;margin-left:8px}

/* Light theme suggestions background */
body[data-theme="light"] .suggestions{background:var(--suggest-bg-light);border:1px solid rgba(6,32,48,0.06)}

/* Watermark */
.footer{display:flex;flex-direction:column;gap:8px;align-items:center}
.watermark{font-size:12px;color:var(--muted);opacity:0.9}

/* Use CSS variables for backgrounds and colors */
body{
  margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
  background:var(--page-bg);
  color:var(--text);display:flex;align-items:center;justify-content:center;padding:28px;
  transition: background 0.45s ease, color 0.3s ease;
}

/* Animations & micro-interactions */
.current-card.fade-in{animation:fadeInUp 420ms ease both}
.forecast-card{transition:transform 240ms ease, box-shadow 240ms ease, opacity 260ms ease}
.forecast-card:hover{transform:translateY(-6px);box-shadow:0 12px 30px rgba(2,6,23,0.35)}
.forecast-card.fade-in{animation:fadeInUp 420ms ease both}
.weather-icon{transition:transform 500ms ease}
.weather-icon.spin{transform:rotate(8deg)}

@keyframes fadeInUp{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

.search-form input{background:var(--glass);color:var(--text);}
.search-form button{background:var(--accent);}

/* Light theme override */
body[data-theme="light"]{
  --page-bg: var(--page-bg-light);
  --card-bg: var(--card-light);
  --text: var(--text-light);
  --accent: var(--accent-light);
  --muted: var(--muted-light);
  --glass: var(--glass-light);
}

/* Weather moods per theme */
/* Dark theme weather backgrounds */
body[data-theme="dark"][data-weather="clear"]{background:var(--weather-clear-dark)}
body[data-theme="dark"][data-weather="clouds"]{background:var(--weather-clouds-dark)}
body[data-theme="dark"][data-weather="rain"]{background:var(--weather-rain-dark)}
body[data-theme="dark"][data-weather="snow"]{background:var(--weather-snow-dark)}
body[data-theme="dark"][data-weather="thunderstorm"]{background:var(--weather-thunder-dark)}

/* Light theme weather backgrounds */
body[data-theme="light"][data-weather="clear"]{background:var(--weather-clear-light)}
body[data-theme="light"][data-weather="clouds"]{background:var(--weather-clouds-light)}
body[data-theme="light"][data-weather="rain"]{background:var(--weather-rain-light)}
body[data-theme="light"][data-weather="snow"]{background:var(--weather-snow-light)}
body[data-theme="light"][data-weather="thunderstorm"]{background:var(--weather-thunder-light)}
:root{
	/* Dark theme (defaults) */
	--page-bg-dark: linear-gradient(180deg,#071428 0%, #0f1724 100%);
	--card-dark: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
	--text-dark: #e6eef6;
	--accent-dark: #61dafb;
	--muted-dark: #9aa4b2;
	--glass-dark: rgba(255,255,255,0.04);

	/* Light theme */
	--page-bg-light: linear-gradient(180deg,#f6fbff 0%, #e6eef6 100%);
	--card-light: linear-gradient(180deg, rgba(6,32,48,0.03), rgba(6,32,48,0.02));
	--text-light: #071428;
	--accent-light: #0b78d1;
	--muted-light: #5b6b7a;
	--glass-light: rgba(6,32,48,0.03);

	/* CSS vars used by the UI; default to dark */
	--page-bg: var(--page-bg-dark);
	--card-bg: var(--card-dark);
	--text: var(--text-dark);
	--accent: var(--accent-dark);
	--muted: var(--muted-dark);
	--glass: var(--glass-dark);
}
*{box-sizing:border-box}
html,body{height:100%}
.app{width:100%;max-width:980px}
.header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:18px}
.brand{font-size:28px;margin:0}
.tagline{margin:0;color:var(--muted)}
.controls{margin-bottom:18px}
.search-form{display:flex;gap:8px}
.search-form input{flex:1;padding:10px 12px;border-radius:10px;border:1px solid rgba(255,255,255,0.06);background:var(--glass);color:inherit}
.search-form button{padding:10px 14px;border-radius:10px;border:none;background:var(--accent);color:#062033;font-weight:600}
.messages{margin-top:8px;min-height:22px;color:var(--muted)}
.hidden{display:none}
.weather-section{display:grid;grid-template-columns:1fr 360px;gap:18px;align-items:start}
.current-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:18px;border-radius:12px}
.current-header{display:flex;justify-content:space-between;align-items:center}
.current-header h2{margin:0}
.muted{color:var(--muted)}
.current-temp{display:flex;align-items:center;gap:12px}
.weather-icon{width:72px;height:72px}
.temp{font-size:36px;font-weight:700}
.current-details{display:flex;gap:18px;margin-top:12px;color:var(--muted)}
.forecast{background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.02));padding:14px;border-radius:12px}
.forecast h3{margin:0 0 10px 0}
.forecast-container{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.forecast-card{background:rgba(255,255,255,0.02);padding:10px;border-radius:8px;text-align:center}
.forecast-card .day{font-weight:700;margin-bottom:6px}
.forecast-card img{width:48px;height:48px}
.forecast-card .temps{margin-top:6px;color:var(--muted)}
.footer{margin-top:16px;text-align:center}

/* Responsive */
@media (max-width:880px){
	.weather-section{grid-template-columns:1fr;}
	.forecast-container{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:520px){
	.forecast-container{grid-template-columns:repeat(2,1fr);}
	.weather-icon{width:56px;height:56px}
}

/* Header & logo */
.brand-wrap{display:flex;align-items:center;gap:10px}
.logo{width:40px;height:40px;border-radius:8px;object-fit:cover}
.theme-toggle{background:transparent;border:1px solid rgba(255,255,255,0.06);padding:6px 8px;border-radius:8px;cursor:pointer}

/* Use CSS variables for backgrounds and colors */
body{
	margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
	background:var(--page-bg);
	color:var(--text);display:flex;align-items:center;justify-content:center;padding:28px;
}

.current-card{background:var(--card-bg);}
.forecast{background:var(--card-bg)}
.search-form input{background:var(--glass);color:var(--text);border-color:rgba(0,0,0,0.06)}
.search-form button{background:var(--accent);color:var(--text-light)}

/* Light theme override */
body[data-theme="light"]{
	--page-bg: var(--page-bg-light);
	--card-bg: var(--card-light);
	--text: var(--text-light);
	--accent: var(--accent-light);
	--muted: var(--muted-light);
	--glass: var(--glass-light);
}

/* Background moods (simple) — these may override the page background for stronger visual cues */
body[data-weather="clear"]{background:linear-gradient(180deg,#3a8dde 0%,#071428 100%)}
body[data-weather="clouds"]{background:linear-gradient(180deg,#5b6b7a 0%,#0b1220 100%)}
body[data-weather="rain"]{background:linear-gradient(180deg,#2b6a8a 0%,#071428 100%)}
body[data-weather="snow"]{background:linear-gradient(180deg,#7fb3d5 0%,#071428 100%)}
body[data-weather="thunderstorm"]{background:linear-gradient(180deg,#3b3b5f 0%,#071428 100%)}
.app{width:100%;max-width:980px}
.header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:18px}
.brand{font-size:28px;margin:0}
.tagline{margin:0;color:var(--muted)}
.controls{margin-bottom:18px}
.search-form{display:flex;gap:8px}
.search-form input{flex:1;padding:10px 12px;border-radius:10px;border:1px solid rgba(255,255,255,0.06);background:var(--glass);color:inherit}
.search-form button{padding:10px 14px;border-radius:10px;border:none;background:var(--accent);color:#062033;font-weight:600}
.messages{margin-top:8px;min-height:22px;color:var(--muted)}
.hidden{display:none}
.weather-section{display:grid;grid-template-columns:1fr 360px;gap:18px;align-items:start}
.current-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:18px;border-radius:12px}
.current-header{display:flex;justify-content:space-between;align-items:center}
.current-header h2{margin:0}
.muted{color:var(--muted)}
.current-temp{display:flex;align-items:center;gap:12px}
.weather-icon{width:72px;height:72px}
.temp{font-size:36px;font-weight:700}
.current-details{display:flex;gap:18px;margin-top:12px;color:var(--muted)}
.forecast{background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.02));padding:14px;border-radius:12px}
.forecast h3{margin:0 0 10px 0}
.forecast-container{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.forecast-card{background:rgba(255,255,255,0.02);padding:10px;border-radius:8px;text-align:center}
.forecast-card .day{font-weight:700;margin-bottom:6px}
.forecast-card img{width:48px;height:48px}
.forecast-card .temps{margin-top:6px;color:var(--muted)}
.footer{margin-top:16px;text-align:center}

/* Responsive */
@media (max-width:880px){
	.weather-section{grid-template-columns:1fr;}
	.forecast-container{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:520px){
	.forecast-container{grid-template-columns:repeat(2,1fr);}
	.weather-icon{width:56px;height:56px}
}

/* Background moods (simple) */
body[data-weather="clear"]{background:linear-gradient(180deg,#3a8dde 0%,#071428 100%)}
body[data-weather="clouds"]{background:linear-gradient(180deg,#5b6b7a 0%,#0b1220 100%)}
body[data-weather="rain"]{background:linear-gradient(180deg,#2b6a8a 0%,#071428 100%)}
body[data-weather="snow"]{background:linear-gradient(180deg,#7fb3d5 0%,#071428 100%)}
body[data-weather="thunderstorm"]{background:linear-gradient(180deg,#3b3b5f 0%,#071428 100%)}