:root{--weather-navy:#061321;--weather-panel:#091b2d;--weather-gold:#efb73d;--weather-cyan:#67d3ff;--weather-text:#f4f8fc;--weather-muted:#94a9bd}
.bilal-weather{position:fixed;z-index:9800;top:74px;right:max(18px,env(safe-area-inset-right));font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--weather-text)}
.bilal-weather__ticker{position:relative;display:flex;align-items:center;gap:8px;min-height:38px;padding:7px 11px;border:1px solid rgba(103,211,255,.27);border-radius:999px;background:rgba(5,15,27,.86);color:var(--weather-text);box-shadow:0 12px 35px rgba(0,0,0,.28),inset 0 0 0 1px rgba(255,255,255,.025);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);cursor:pointer;transition:border-color .25s,background .25s,transform .25s,box-shadow .25s}
.bilal-weather__ticker:hover,.bilal-weather__ticker:focus-visible{border-color:rgba(239,183,61,.62);background:rgba(8,25,42,.96);box-shadow:0 16px 45px rgba(0,0,0,.35),0 0 24px rgba(103,211,255,.08);outline:0;transform:translateY(-1px)}
.bilal-weather__pulse{width:6px;height:6px;border-radius:50%;background:#55dfa2;box-shadow:0 0 0 4px rgba(85,223,162,.09),0 0 10px rgba(85,223,162,.65)}
.bilal-weather__city{color:#b9c8d7;font:700 8px/1 "IBM Plex Mono",monospace;letter-spacing:.08em;text-transform:uppercase}
.bilal-weather__temp{color:#fff;font:700 14px/1 "Space Grotesk",sans-serif}
.bilal-weather__glyph{display:grid;place-items:center;width:20px;height:20px;color:var(--weather-gold);font-size:16px;line-height:1}
.bilal-weather__chevron{color:#71879b;font-size:13px;transition:transform .25s}.bilal-weather.is-open .bilal-weather__chevron{transform:rotate(180deg)}
.bilal-weather__panel{position:absolute;top:48px;right:0;width:min(410px,calc(100vw - 24px));max-height:min(650px,calc(100dvh - 138px));overflow:auto;border:1px solid rgba(103,211,255,.2);border-radius:18px;background:linear-gradient(145deg,rgba(10,30,49,.985),rgba(4,14,25,.99));box-shadow:0 28px 95px rgba(0,0,0,.66),0 0 60px rgba(103,211,255,.05);opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);transform-origin:top right;transition:opacity .22s,visibility .22s,transform .22s;scrollbar-width:thin;scrollbar-color:rgba(103,211,255,.28) transparent}
.bilal-weather.is-open .bilal-weather__panel{opacity:1;visibility:visible;transform:none}
.bilal-weather__panel:before{content:"";position:absolute;inset:0 0 auto;height:2px;background:linear-gradient(90deg,transparent,var(--weather-cyan),var(--weather-gold),transparent)}
.bilal-weather__panel>header{display:flex;align-items:center;justify-content:space-between;padding:18px 19px 15px;border-bottom:1px solid rgba(255,255,255,.07)}
.bilal-weather__panel>header div{display:flex;flex-direction:column;gap:5px}.bilal-weather__panel>header small{color:var(--weather-cyan);font:700 7px/1 "IBM Plex Mono",monospace;letter-spacing:.14em}.bilal-weather__panel>header strong{font:600 15px/1.1 "Space Grotesk",sans-serif}
.bilal-weather__close{display:grid;place-items:center;width:31px;height:31px;border:1px solid rgba(255,255,255,.1);border-radius:50%;background:rgba(255,255,255,.035);color:#d9e2ea;font-size:21px;line-height:1;cursor:pointer}.bilal-weather__close:hover,.bilal-weather__close:focus-visible{border-color:rgba(239,183,61,.5);color:#fff;outline:0}
.bilal-weather__body{padding:18px 19px}.bilal-weather__current{display:flex;align-items:center;gap:18px;padding:4px 2px 18px}.bilal-weather__current-icon{display:grid;place-items:center;width:68px;height:68px;border:1px solid rgba(239,183,61,.3);border-radius:50%;background:radial-gradient(circle,rgba(239,183,61,.13),transparent 68%);color:var(--weather-gold);font-size:38px;box-shadow:0 0 35px rgba(239,183,61,.06)}
.bilal-weather__location{margin:-2px 0 15px}.bilal-weather__location>label{display:block;margin:0 0 7px;color:#71889d;font:700 6px/1 "IBM Plex Mono",monospace;letter-spacing:.12em;text-transform:uppercase}.bilal-weather__location>div{position:relative}.bilal-weather__location select{display:block;width:100%;height:39px;padding:0 38px 0 12px;border:1px solid rgba(103,211,255,.2);border-radius:10px;outline:0;background:#071827;color:#e9f1f8;font:600 11px/1 Inter,sans-serif;appearance:none;-webkit-appearance:none;cursor:pointer}.bilal-weather__location select:hover,.bilal-weather__location select:focus{border-color:rgba(239,183,61,.5);box-shadow:0 0 0 3px rgba(239,183,61,.06)}.bilal-weather__location>div>span{position:absolute;right:13px;top:50%;transform:translateY(-50%);color:var(--weather-gold);pointer-events:none}.bilal-weather__location-status{min-height:12px;margin:6px 2px 0;color:#71879a;font-size:8px;line-height:1.4}.bilal-weather__location-status[data-type="error"]{color:#e9ad77}.bilal-weather__location-status[data-type="success"]{color:#74cfa7}.bilal-weather__location-status[data-type="pending"]{color:var(--weather-cyan)}
.bilal-weather__current>div:last-child{display:grid}.bilal-weather__current strong{font:700 43px/.9 "Space Grotesk",sans-serif;letter-spacing:-.04em}.bilal-weather__current sup{color:var(--weather-gold);font-size:14px;vertical-align:top}.bilal-weather__current span{margin-top:8px;color:#d7e2ec;font-size:13px;text-transform:capitalize}.bilal-weather__current small{margin-top:4px;color:var(--weather-muted);font-size:10px}
.bilal-weather__metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.bilal-weather__metrics>span{min-height:65px;padding:10px;border:1px solid rgba(255,255,255,.07);border-radius:10px;background:rgba(3,13,23,.5)}.bilal-weather__metrics small,.bilal-weather__metrics strong{display:block}.bilal-weather__metrics small{color:#6f879c;font:700 6px/1.2 "IBM Plex Mono",monospace;letter-spacing:.1em}.bilal-weather__metrics strong{margin-top:9px;color:#e9f0f6;font-size:10px;line-height:1.25}
.bilal-weather__forecast-title{display:flex;align-items:center;justify-content:space-between;margin:19px 1px 10px}.bilal-weather__forecast-title strong{font:600 13px/1 "Space Grotesk",sans-serif}.bilal-weather__forecast-title small{color:#6f879c;font:700 6px/1 "IBM Plex Mono",monospace;letter-spacing:.09em}
.bilal-weather__forecast{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}.bilal-weather__forecast article{display:grid;justify-items:center;gap:7px;min-width:0;padding:10px 4px;border:1px solid rgba(103,211,255,.1);border-radius:10px;background:linear-gradient(180deg,rgba(9,31,50,.75),rgba(3,14,24,.65))}.bilal-weather__forecast article>small{color:#9db0c2;font:700 7px/1 "IBM Plex Mono",monospace;text-transform:uppercase}.bilal-weather__forecast article>b{height:23px;color:var(--weather-gold);font-size:20px;line-height:1}.bilal-weather__forecast article>span{display:flex;gap:3px;font-size:9px}.bilal-weather__forecast article em{color:#7890a5;font-style:normal}.bilal-weather__forecast article>i{color:var(--weather-cyan);font:700 6px/1 "IBM Plex Mono",monospace;font-style:normal}
.bilal-weather__panel>footer{padding:11px 19px;border-top:1px solid rgba(255,255,255,.06);color:#64798d;font:600 6px/1.4 "IBM Plex Mono",monospace;letter-spacing:.05em}
.bilal-weather__loading{display:flex;align-items:center;justify-content:center;gap:11px;min-height:175px;color:#98abbd;font-size:11px}.bilal-weather__loading i{width:17px;height:17px;border:2px solid rgba(103,211,255,.17);border-top-color:var(--weather-cyan);border-radius:50%;animation:bilalWeatherSpin .8s linear infinite}.bilal-weather__error{display:grid;justify-items:start;gap:8px;padding:23px 2px}.bilal-weather__error strong{font-size:14px}.bilal-weather__error span{color:#91a5b8;font-size:10px}.bilal-weather__error button{margin-top:5px;padding:8px 11px;border:1px solid rgba(239,183,61,.35);border-radius:8px;background:rgba(239,183,61,.08);color:var(--weather-gold);font:700 8px/1 "IBM Plex Mono",monospace;cursor:pointer}@keyframes bilalWeatherSpin{to{transform:rotate(360deg)}}
@media(max-width:760px){.bilal-weather{top:68px;right:12px}.bilal-weather__ticker{min-height:35px;padding:6px 9px}.bilal-weather__panel{position:fixed;top:auto;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));left:10px;width:auto;max-height:min(620px,calc(100dvh - 90px));transform:translateY(12px) scale(.985);transform-origin:bottom center}.bilal-weather.is-open .bilal-weather__panel{transform:none}}
@media(max-width:390px){.bilal-weather__metrics{grid-template-columns:1fr 1fr}.bilal-weather__forecast{gap:3px}.bilal-weather__forecast article{padding-inline:2px}.bilal-weather__forecast article>span{font-size:8px}}
@media(prefers-reduced-motion:reduce){.bilal-weather__ticker,.bilal-weather__panel,.bilal-weather__chevron{transition:none}.bilal-weather__loading i{animation-duration:1.5s}}