:root{
  --surface: rgba(255,255,255,.72);
  --surface-solid:#ffffff;
  --border: rgba(15,23,42,.08);
  --text:#0f172a;
  --text-soft:#475569;
  --text-mute:#94a3b8;
  --accent:#2563eb;
  --accent-soft: rgba(37,99,235,.10);
  --shadow: 0 8px 30px rgba(15,23,42,.08);
  --radius:20px;
  --g1:#7cb9ff; --g2:#b7d9ff; --g3:#e8f2ff;
}

*{margin:0;padding:0;box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  font-family:"Inter","Noto Sans SC",-apple-system,"Segoe UI",system-ui,sans-serif;
  color:var(--text);
  min-height:100vh;
  background:#eaf2fb;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ---------- dynamic background ---------- */
.bg-layer{
  position:fixed; inset:-10%; z-index:-2;
  background:linear-gradient(135deg,var(--g1),var(--g2) 45%,var(--g3));
  transition:background 1.2s ease;
  animation:drift 26s ease-in-out infinite alternate;
}
@keyframes drift{
  0%{transform:scale(1.05) translate(0,0)}
  100%{transform:scale(1.15) translate(-2%,-2%)}
}
.bg-overlay{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1100px 600px at 12% -8%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(900px 500px at 95% 8%, rgba(255,255,255,.35), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.55));
}

/* ---------- topbar ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:20px clamp(16px,4vw,48px);
  flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:14px}
.logo{
  width:52px;height:52px;border-radius:15px;
  display:grid;place-items:center;font-size:26px;
  background:var(--surface); backdrop-filter:blur(14px);
  box-shadow:var(--shadow); border:1px solid var(--border);
}
.brand-text h1{font-size:22px;font-weight:800;letter-spacing:-.4px;line-height:1.1}
.brand-text span{font-size:12.5px;color:var(--text-soft);font-weight:400}

.topbar-right{display:flex;align-items:center;gap:14px;flex-wrap:wrap}

/* ---------- search ---------- */
.search-wrap{position:relative}
.search-icon{
  position:absolute;left:16px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;color:var(--text-mute);pointer-events:none;
}
#searchInput{
  width:clamp(210px,30vw,330px);
  padding:13px 44px 13px 44px;
  border-radius:14px; border:1px solid var(--border);
  background:var(--surface); backdrop-filter:blur(14px);
  font-size:14.5px; font-family:inherit; color:var(--text);
  box-shadow:var(--shadow); outline:none; transition:.22s;
}
#searchInput::placeholder{color:var(--text-mute)}
#searchInput:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft),var(--shadow)}
.locate-btn{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:32px;height:32px;border-radius:10px;border:none;cursor:pointer;
  background:transparent;color:var(--text-mute);display:grid;place-items:center;transition:.2s;
}
.locate-btn:hover{background:var(--accent-soft);color:var(--accent)}
.locate-btn svg{width:17px;height:17px}

.suggestions{
  position:absolute;top:calc(100% + 8px);left:0;right:0;
  background:var(--surface-solid);border-radius:14px;border:1px solid var(--border);
  box-shadow:0 18px 45px rgba(15,23,42,.16);list-style:none;
  max-height:320px;overflow-y:auto;z-index:60;display:none;
}
.suggestions.show{display:block}
.suggestions li{
  padding:11px 16px;cursor:pointer;display:flex;justify-content:space-between;
  align-items:center;gap:10px;font-size:14px;transition:.15s;border-bottom:1px solid var(--border);
}
.suggestions li:last-child{border-bottom:none}
.suggestions li:hover{background:var(--accent-soft)}
.sug-name{font-weight:600}
.sug-country{font-size:12px;color:var(--text-mute)}

/* ---------- lang switch ---------- */
.lang-switch{
  display:flex;background:var(--surface);backdrop-filter:blur(14px);
  border:1px solid var(--border);border-radius:12px;padding:4px;box-shadow:var(--shadow);
}
.lang-switch button{
  border:none;background:transparent;cursor:pointer;font-family:inherit;
  font-size:13.5px;font-weight:600;color:var(--text-soft);
  padding:8px 16px;border-radius:9px;transition:.2s;
}
.lang-switch button.active{background:var(--accent);color:#fff;box-shadow:0 3px 10px rgba(37,99,235,.35)}

/* ---------- container ---------- */
.container{
  max-width:1180px;margin:0 auto;padding:8px clamp(16px,4vw,48px) 40px;
  display:flex;flex-direction:column;gap:22px;
  opacity:1;transition:opacity .4s;
}

/* ---------- hero ---------- */
.hero{
  display:grid;grid-template-columns:1.6fr 1fr;gap:22px;
}
.hero-main,.hero-side,.forecast-card{
  background:var(--surface);backdrop-filter:blur(18px);
  border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.hero-main{padding:30px 34px;display:flex;flex-direction:column;gap:22px}
.place{display:flex;align-items:center;gap:9px;font-size:16px;font-weight:600;color:var(--text-soft)}
.place .pin{width:17px;height:17px;color:var(--accent)}
.place-meta{font-size:12.5px;color:var(--text-mute);font-weight:400}
.hero-body{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.weather-icon{font-size:82px;line-height:1;filter:drop-shadow(0 6px 14px rgba(15,23,42,.14));animation:float 5s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.hero-temp{display:flex;align-items:flex-start;font-weight:800;letter-spacing:-3px;line-height:.92}
#heroTemp{font-size:clamp(64px,10vw,104px);
  background:linear-gradient(180deg,#1e3a8a,#2563eb);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.deg{font-size:30px;font-weight:600;margin-top:8px;color:var(--text-soft);letter-spacing:0}
.hero-desc .desc-main{font-size:23px;font-weight:700}
.hero-desc .desc-sub{font-size:14px;color:var(--text-soft);margin-top:5px}

.hero-side{
  padding:22px;display:grid;grid-template-columns:1fr 1fr;gap:12px;align-content:center;
}
.metric{
  background:rgba(255,255,255,.65);border:1px solid var(--border);border-radius:14px;
  padding:14px;display:flex;flex-direction:column;gap:5px;
}
.m-label{font-size:11.5px;color:var(--text-mute);font-weight:500;text-transform:uppercase;letter-spacing:.5px}
.m-val{font-size:18px;font-weight:700}

/* ---------- forecast cards ---------- */
.forecast-card{padding:22px 26px}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.card-head h2{font-size:16px;font-weight:700}
.updated{font-size:12px;color:var(--text-mute)}

.hourly-scroll{
  display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;scroll-behavior:smooth;
}
.hourly-scroll::-webkit-scrollbar{height:6px}
.hourly-scroll::-webkit-scrollbar-thumb{background:rgba(15,23,42,.16);border-radius:6px}
.hour-card{
  flex:0 0 88px;background:rgba(255,255,255,.65);border:1px solid var(--border);
  border-radius:15px;padding:14px 8px;text-align:center;
  display:flex;flex-direction:column;gap:8px;align-items:center;transition:.2s;
}
.hour-card:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(15,23,42,.10);background:#fff}
.hour-card .h-time{font-size:12px;color:var(--text-mute);font-weight:500}
.hour-card .h-ico{font-size:26px}
.hour-card .h-temp{font-size:16px;font-weight:700}
.hour-card .h-pop{font-size:11px;color:var(--accent);font-weight:600}
.hour-card.now{background:var(--accent);border-color:var(--accent);color:#fff}
.hour-card.now .h-time,.hour-card.now .h-pop{color:rgba(255,255,255,.85)}

.daily-list{display:flex;flex-direction:column;gap:4px}
.day-row{
  display:grid;grid-template-columns:110px 46px minmax(0,1fr) 46px;align-items:center;gap:16px;
  padding:12px 14px;border-radius:14px;transition:.2s;
}
.day-row:hover{background:rgba(255,255,255,.75)}
.day-name{font-size:14.5px;font-weight:600}
.day-sub{font-size:11.5px;color:var(--text-mute)}
.day-ico{font-size:26px;text-align:center}
.day-bar{display:flex;align-items:center;gap:10px;min-width:0}
.bar-track{flex:1;height:6px;border-radius:6px;background:rgba(15,23,42,.09);position:relative;overflow:hidden}
.bar-fill{position:absolute;height:100%;border-radius:6px;
  background:linear-gradient(90deg,#60a5fa,#f59e0b)}
.bar-lo{font-size:13px;color:var(--text-soft);width:38px;text-align:right;flex:0 0 38px}
.bar-hi{font-size:13px;font-weight:700;width:38px;flex:0 0 38px}
.day-pop{
  font-size:12px;color:var(--accent);font-weight:600;
  display:flex;align-items:center;justify-content:flex-end;gap:2px;
  white-space:nowrap;
}
.day-pop .pop-ico{font-size:12px;line-height:1}

/* ---------- sun ---------- */
.sun-row{display:flex;align-items:center;gap:20px;padding:6px 4px}
.sun-item{display:flex;align-items:center;gap:12px}
.sun-ico{font-size:30px}
.sun-label{font-size:12px;color:var(--text-mute)}
.sun-time{font-size:17px;font-weight:700}
.sun-arc{
  flex:1;height:4px;border-radius:4px;position:relative;
  background:linear-gradient(90deg,#fbbf24,#f59e0b 50%,#f97316);
}
.sun-dot{
  position:absolute;top:50%;transform:translate(-50%,-50%);
  width:16px;height:16px;border-radius:50%;background:#fff;
  border:3px solid #f59e0b;box-shadow:0 2px 8px rgba(245,158,11,.5);
  transition:left .8s ease;
}

/* ---------- loader ---------- */
.loader{
  position:fixed;inset:0;z-index:200;display:none;flex-direction:column;
  align-items:center;justify-content:center;gap:18px;
  background:rgba(234,242,251,.72);backdrop-filter:blur(6px);
}
.loader.show{display:flex}
.spinner{
  width:46px;height:46px;border-radius:50%;
  border:4px solid rgba(37,99,235,.2);border-top-color:var(--accent);
  animation:spin .9s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.loader p{font-size:14px;color:var(--text-soft);font-weight:500}

/* ---------- footer ---------- */
.footer{
  text-align:center;padding:18px;font-size:12.5px;color:var(--text-soft);
  display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
}
.footer a{color:var(--accent);text-decoration:none;font-weight:500}
.footer a:hover{text-decoration:underline}
.dot{color:var(--text-mute)}

/* ---------- theme variants (set via JS on body) ---------- */
body.w-sunny .bg-layer{background:linear-gradient(135deg,#5aa9ff,#9fd0ff 45%,#ffeec2)}
body.w-cloudy .bg-layer{background:linear-gradient(135deg,#8fa8c8,#b9c9dc 45%,#e6edf5)}
body.w-rain .bg-layer{background:linear-gradient(135deg,#5b7290,#8aa0b8 45%,#d3dde8)}
body.w-snow .bg-layer{background:linear-gradient(135deg,#a9c6e8,#d6e6f5 45%,#ffffff)}
body.w-storm .bg-layer{background:linear-gradient(135deg,#4a5a75,#7b8aa3 45%,#c9d3e0)}
body.w-night .bg-layer{background:linear-gradient(135deg,#1e2a44,#3a4a6b 45%,#8fa3c8)}
body.w-night{--text:#0f172a}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .hero{grid-template-columns:1fr}
  .hero-side{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:620px){
  .topbar{padding:16px}
  .brand-text span{display:none}
  #searchInput{width:100%}
  .search-wrap{flex:1;min-width:180px}
  .topbar-right{width:100%}
  .hero-main{padding:22px}
  .weather-icon{font-size:60px}
  .hero-side{grid-template-columns:1fr 1fr}
  .forecast-card{padding:18px 14px}
  .day-row{grid-template-columns:64px 30px minmax(0,1fr) 40px;gap:8px;padding:10px 2px}
  .day-ico{font-size:22px}
  .day-name{font-size:13.5px}
  .day-sub{font-size:10.5px}
  .day-bar{gap:6px}
  .bar-lo,.bar-hi{width:30px;flex:0 0 30px;font-size:12px}
  .day-pop{font-size:11px}
  .footer{font-size:11.5px}
}
@media (max-width:380px){
  .day-row{grid-template-columns:56px 26px minmax(0,1fr) 34px;gap:6px}
  .day-ico{font-size:20px}
  .bar-lo,.bar-hi{width:26px;flex:0 0 26px;font-size:11px}
  .day-pop{font-size:10px}
  .day-pop .pop-ico{font-size:10px}
}