.ft-weather{margin:0 0 20px;padding:20px;border-radius:24px;color:#fff;background:radial-gradient(ellipse at 12% 10%,#369cc3 0,transparent 55%),linear-gradient(145deg,#087994,#063952 80%);border:1px solid #64c6d14d;box-shadow:inset 0 1px 1px #ffffff40;overflow:hidden}
.ft-weather-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.ft-weather h2{font-size:16px;margin:0}.ft-weather time{font-size:28px;letter-spacing:-1px;font-variant-numeric:tabular-nums}
.ft-weather-main{display:flex;align-items:center;gap:18px;margin:15px 0}.ft-weather-symbol{width:72px;height:72px;flex:none;filter:drop-shadow(0 0 12px #ffe38755)}.ft-weather-temp{font-size:44px;line-height:1.1}.ft-weather p{margin:5px 0;font-size:13px;line-height:1.4}
.ft-weather-days{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:15px 0;text-align:center}.ft-weather-days>div{border-top:1px solid #ffffff35;padding-top:10px}.ft-weather-days strong{display:block;font-size:12px}.ft-weather-days span{font-size:12px}
.ft-weather-controls{display:flex;gap:8px;flex-wrap:wrap}.ft-weather button,.ft-weather select{border:1px solid #ffffff70;border-radius:8px;background:#06394c;color:#fff;font:inherit;font-size:12px;padding:8px;max-width:100%;cursor:pointer}.ft-weather button:disabled{opacity:.6}
.ft-weather a{color:#d7f7ff;text-decoration:underline}.ft-weather small{display:block;margin-top:10px;font-size:11px;line-height:1.5}.ft-weather [role=status]{min-height:1.5em}
.ft-weather{position:relative;padding:12px;border-radius:18px}
.ft-weather h2{font-size:14px}.ft-weather time{font-size:20px;margin-left:auto}
.ft-weather-main{gap:12px;margin:6px 0}.ft-weather-symbol{width:46px;height:46px}.ft-weather-temp{font-size:32px}
.ft-weather-days{margin:8px 0;gap:5px}.ft-weather-days>div{padding-top:5px}
.ft-weather small{font-size:10px;margin-top:6px}.ft-weather [role=status]:empty{display:none}
.ft-weather-settings summary{cursor:pointer;font-size:21px;list-style:none;line-height:1;padding:4px}
.ft-weather-settings summary::-webkit-details-marker{display:none}
.ft-weather-settings-panel{position:absolute;top:46px;left:10px;right:10px;padding:12px;background:#06394c;border:1px solid #64c6d1;border-radius:12px;z-index:3;box-shadow:0 6px 20px #0006}
.ft-weather-controls{flex-wrap:nowrap}.ft-weather-controls button,.ft-weather-controls select{font-size:11px;padding:6px;min-width:0;flex:1}
.ft-weather:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.25}
.ft-weather>*{position:relative}
.ft-weather[data-sky=rain]:before,.ft-weather[data-sky=storm]:before{background:repeating-linear-gradient(110deg,transparent 0 18px,#ccefff 19px 20px,transparent 21px 40px);animation:ft-rain 1.4s linear infinite}
.ft-weather[data-sky=storm]{background:linear-gradient(145deg,#43556e,#12293e)}
.ft-weather[data-sky=sun]:before{background:radial-gradient(circle at 15% 20%,#ffe579 0,transparent 60%);animation:ft-sun 5s ease-in-out infinite alternate}
@keyframes ft-rain{from{background-position:0 -40px}to{background-position:-15px 40px}}
@keyframes ft-sun{from{opacity:.15}to{opacity:.4}}
@media(prefers-reduced-motion:reduce){.ft-weather:before{animation:none!important}}