*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;font-family:Inter,sans-serif;background:#071321;color:#fff}body{overflow-x:hidden;min-height:100vh;background:#071321;color:#fff}#scene{z-index:0;isolation:isolate;overflow:hidden;background:#071321}.scene-image{z-index:0}.cloud,.sun-glow,.rain-layer,.rain-mist,.fog,.stars,.lightning{z-index:1}.vignette{z-index:3}#scene,.scene-image,.rain-layer,.stars,.fog,.vignette,.cloud,.sun-glow,.lightning{position:fixed;inset:0;pointer-events:none}.scene-image{background:radial-gradient(circle at 55% 28%,#31516f 0,#152d45 32%,#061321 78%);transition:background 1.2s}.vignette{background:radial-gradient(ellipse at center,transparent 35%,#0008 100%)}.rain-layer{opacity:0;background:linear-gradient(105deg,transparent 0 48%,#b8d8f50b 49%,transparent 51%);background-size:130px 130px;animation:rain 1s linear infinite;transform:scale(1.2)}
#rainCanvas{position:fixed;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;opacity:0;transition:opacity .8s}
.rain-mist{position:fixed;inset:auto 0 0;height:35vh;z-index:1;pointer-events:none;opacity:0;background:linear-gradient(to top,#9ab4c817,transparent 75%);filter:blur(7px)}.fog{background:linear-gradient(100deg,transparent,#a8c4d80d,transparent);animation:fog 8s ease-in-out infinite}.cloud{opacity:0;background:radial-gradient(ellipse,#b8c8d744 0,#7991a72b 35%,transparent 70%);filter:blur(18px);width:60vw;height:28vh;inset:auto;top:8%;left:12%;animation:cloud 18s ease-in-out infinite}.cloud-b{top:37%;left:46%;width:50vw;animation-duration:25s}.cloud-c{top:57%;left:-10%;width:65vw;animation-duration:30s}.sun-glow{opacity:0;background:radial-gradient(circle,#fff4a4cc 0, #ffdc5b55 18%,transparent 58%);width:55vw;height:55vw;inset:-18% -8% auto auto;filter:blur(4px);animation:sunpulse 5s ease-in-out infinite}.stars{opacity:0;background-image:radial-gradient(#fff 1px,transparent 1.5px);background-size:75px 75px;animation:stars 12s linear infinite}.lightning{opacity:0;background:#fff;clip-path:polygon(66% 0,74% 0,68% 42%,83% 42%,57% 100%,63% 55%,48% 55%);filter:blur(3px)}body[data-weather=rain] .rain-layer{opacity:.35}body[data-weather=rain] #rainCanvas{opacity:1}body[data-weather=rain] .rain-mist{opacity:1}body[data-weather=rain] .cloud,body[data-weather=storm] .cloud,body[data-weather=cloudy] .cloud{opacity:1}body[data-weather=storm] .lightning{animation:flash 6s infinite}body[data-weather=sunny] .sun-glow{opacity:1}body[data-weather=night] .stars{opacity:.65}body[data-weather=night] .scene-image{background:radial-gradient(circle at 72% 18%,#27405e,#081422 55%,#03070d)}body[data-weather=sunny] .scene-image{
  background:
    radial-gradient(circle at 72% 13%, var(--sun-core), transparent 18%),
    radial-gradient(circle at 68% 22%, var(--sun-halo), transparent 42%),
    linear-gradient(135deg, var(--sky-top), var(--sky-mid) 48%, var(--sky-bottom));
}
body[data-weather=sunny] .sun-glow{
  width:62vw;height:62vw;inset:-19% -8% auto auto;
  background:radial-gradient(circle, var(--sun-core) 0%, var(--sun-halo) 15%, transparent 60%);
  filter:blur(7px);
  opacity:1;
}
body[data-weather=sunny] .cloud{opacity:.12;filter:blur(26px)}
body[data-weather=cloudy] .scene-image{background:radial-gradient(circle at 50% 30%,#5a7081,#243746 45%,#0a1824 90%)}@keyframes rain{to{background-position:-70px 130px}}@keyframes cloud{50%{transform:translateX(70px) scale(1.08)}}@keyframes fog{50%{transform:translateX(10%);opacity:.7}}@keyframes sunpulse{50%{transform:scale(1.08);opacity:.8}}@keyframes stars{to{transform:translateY(75px)}}@keyframes flash{0%,88%,100%{opacity:0}90%{opacity:.8}91%{opacity:0}92%{opacity:.45}93%{opacity:0}}.topbar{position:relative;z-index:20;height:76px;padding:0 4.2vw;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(#03101bd9,transparent)}.brand{display:flex;align-items:center;gap:10px}.brand-dot{width:30px;height:30px;border-radius:9px;background:#ffffff16;border:1px solid #ffffff2b;display:grid}.brand-dot:after{content:"";width:8px;height:8px;border-radius:50%;background:#71b8ff;align-self:center;justify-self:center;box-shadow:0 0 16px #71b8ff}.brand strong{display:block;font-size:11px;letter-spacing:1.5px}.brand span{display:block;color:#8c9aaa;font-size:7px;letter-spacing:2px;margin-top:3px}.location-control{display:flex;align-items:center;gap:7px;border:1px solid #ffffff26;background:#08152288;backdrop-filter:blur(15px);border-radius:999px;padding:6px 7px 6px 13px;min-width:300px}.location-control .pin{font-size:18px;color:#b9d7f6}.location-control input{background:none;border:0;outline:0;color:#fff;width:190px;font-size:11px}.location-control button{border:0;background:#ffffff12;color:#c7d4e1;border-radius:999px;padding:8px 11px;font-size:9px;cursor:pointer}.top-right{display:flex;gap:16px;align-items:center}.live{font-size:9px;letter-spacing:1px}.live i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#43df9b;margin-right:5px;box-shadow:0 0 12px #43df9b}.admin-link{color:#c6d0db;text-decoration:none;font-size:9px;border:1px solid #ffffff20;padding:9px 11px;border-radius:8px;background:#ffffff0a}.dashboard{position:relative;z-index:20;min-height:calc(100vh - 76px);padding:25px 4.2vw 35px}.main-weather{min-height:345px;display:flex;align-items:center;justify-content:space-between;max-width:1550px;margin:auto}.weather-copy{max-width:620px}.condition-pill{display:inline-flex;gap:7px;align-items:center;color:#c8d4df;font-size:10px;border:1px solid #ffffff1e;background:#ffffff09;padding:8px 11px;border-radius:999px;backdrop-filter:blur(8px)}.condition-pill span:first-child{font-size:16px}.weather-copy h1{font-size:clamp(58px,7vw,112px);font-weight:400;letter-spacing:-5px;line-height:.9;margin:15px 0 20px}.subtitle{font-size:19px;color:#e4e9ef;margin:0 0 25px}.description{font-size:13px;line-height:1.65;color:#aebbc8;max-width:580px;margin:0}.current{text-align:right;margin-right:4vw}.temperature{font-size:clamp(72px,9vw,132px);font-weight:300;letter-spacing:-7px;line-height:.8}.temperature sup{font-size:.34em;vertical-align:top;letter-spacing:0}.current-meta{display:flex;justify-content:flex-end;gap:14px;margin-top:24px;color:#91a0af;font-size:8px;letter-spacing:1px}.current-meta b{color:#e5ebf1;font-size:11px}.timeline{height:122px;border-top:1px solid #ffffff3b;border-bottom:1px solid #ffffff18;display:grid;grid-template-columns:repeat(7,1fr);max-width:1700px;margin:auto}.time-card{position:relative;padding:14px 8px 0;text-align:center;color:#b3bec9}.time-card:before{content:"";position:absolute;width:8px;height:8px;background:#d5dce3;border-radius:50%;top:-5px;left:calc(50% - 4px);box-shadow:0 0 0 7px #ffffff06}.time-card span{font-size:10px;display:block}.time-card b{display:block;font-size:27px;font-weight:400;color:#eef3f7;margin-top:14px}.time-card i{font-style:normal;font-size:25px;display:block;margin-top:10px}.time-card .blue{color:#71b9ff}.time-card .yellow,.sun-icon{color:#f4d000}.time-card.now{background:linear-gradient(#ffffff08,transparent);border-radius:30px}.content-grid{max-width:1700px;margin:34px auto 0;display:grid;grid-template-columns:1fr 440px;gap:40px}.section-title{display:flex;align-items:center;gap:13px;color:#9ca9b7;font-size:10px;letter-spacing:1.2px;font-weight:600;margin-bottom:13px}.section-title em{height:1px;background:#ffffff24;flex:1}.hourly{display:flex;gap:8px;overflow-x:auto;padding-bottom:10px}.hourly::-webkit-scrollbar{height:3px}.hourly::-webkit-scrollbar-thumb{background:#ffffff28;border-radius:10px}.hour{min-width:78px;height:118px;border:1px solid #ffffff15;background:#ffffff0b;backdrop-filter:blur(14px);border-radius:15px;padding:11px 8px;text-align:center;color:#b9c4cf}.hour:first-child{background:#ffffff18;border-color:#ffffff2d}.hour span{font-size:9px}.hour i{font-style:normal;display:block;font-size:25px;margin:12px 0}.hour b{font-size:12px;font-weight:500;color:#e8edf2}.hour small{display:block;color:#8f9cab;font-size:8px;margin-top:4px}.glass-stack{display:flex;flex-direction:column;gap:14px}.glass-card{border:1px solid #ffffff24;background:#07152159;backdrop-filter:blur(18px);border-radius:22px;padding:20px;box-shadow:0 15px 40px #0002}.card-title{display:flex;justify-content:space-between;color:#8d9aa8;font-size:9px;letter-spacing:.7px}.card-title b{font-size:14px;color:#cbd4de;font-weight:400;letter-spacing:0}.bars{height:85px;display:flex;align-items:end;gap:7px;margin-top:12px}.bar{flex:1;background:linear-gradient(#76a9da,#526d8b);border-radius:3px 3px 0 0;min-height:8px;opacity:.65}.humidity-value{display:flex;justify-content:space-between;align-items:end;margin-top:18px}.humidity-value strong{font-size:35px;font-weight:300}.humidity-value span{font-size:10px;color:#91a0ad}.humidity-track{height:4px;background:#ffffff14;border-radius:5px;margin-top:13px}.humidity-track i{display:block;height:100%;width:82%;background:#83b5e5;border-radius:5px}.sensor-card{display:grid;gap:12px}.sensor-line{display:flex;justify-content:space-between;color:#8997a5;font-size:9px}.sensor-line b{color:#d3dbe3;font-weight:500}.hidden{display:none!important}.location-modal{position:fixed;inset:0;background:#02091299;backdrop-filter:blur(10px);z-index:30;display:grid;place-items:center}.modal{width:min(440px,90vw);background:#0e1d2b;border:1px solid #ffffff1d;border-radius:20px;padding:30px;box-shadow:0 30px 80px #0008;position:relative}.close{position:absolute;right:16px;top:13px;background:none;border:0;color:#aebbc7;font-size:24px}.modal-kicker{font-size:8px;letter-spacing:1.5px;color:#7db3e9}.modal h2{font-size:24px;font-weight:500;margin:9px 0}.modal p{font-size:11px;color:#8493a2;line-height:1.6}.modal input{width:100%;padding:13px;border:1px solid #ffffff1d;background:#ffffff08;border-radius:10px;color:#fff;outline:0}.primary{margin-top:12px;width:100%;padding:12px;border:0;border-radius:10px;background:#6da9e6;color:#071321;font-weight:700}@media(max-width:950px){.location-control{min-width:0}.location-control input{width:120px}.main-weather{flex-direction:column;align-items:flex-start;justify-content:center;gap:30px}.current{text-align:left;margin:0}.current-meta{justify-content:flex-start}.content-grid{grid-template-columns:1fr}.glass-stack{display:grid;grid-template-columns:repeat(2,1fr)}.sensor-card{grid-column:span 2}}@media(max-width:650px){.topbar{padding:0 16px}.brand{display:none}.location-control{margin:auto}.top-right .admin-link{display:none}.dashboard{padding:18px 16px 30px}.main-weather{min-height:410px}.weather-copy h1{letter-spacing:-3px}.description{font-size:12px}.timeline{grid-template-columns:repeat(7,110px);overflow-x:auto}.content-grid{gap:25px}.glass-stack{grid-template-columns:1fr}.sensor-card{grid-column:auto}.current-meta{gap:10px}.location-control input{width:105px}}
body[data-weather=rain] .cloud{filter:blur(22px);animation-duration:22s}
body[data-weather=cloudy] .cloud{filter:blur(24px);animation-duration:28s}
@media(max-width:650px){#rainCanvas{opacity:.9!important}}

body[data-weather=sunny] .scene-image{transition:background 1.5s ease}
body[data-weather=sunny] .sun-glow{animation:sunpulse 5s ease-in-out infinite}
body[data-weather=sunny] .fog{opacity:.18;animation:fog 10s ease-in-out infinite}
body[data-weather=sunny] .stars{opacity:0}
@keyframes warmair{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-2%,1%,0) scale(1.04)}
}

html,body{background:#071321!important}
#rainCanvas{background:transparent!important;display:block;mix-blend-mode:normal}
#scene{background:#071321!important}