:root{
  --ow-h: 95px;
  --ow-radius: 18px;
  --ow-shadow: 0 12px 34px rgba(0,0,0,.20);

  --ow-text: var(--text, #ffffff);
  --ow-muted: rgba(255,255,255,.78);
  --ow-muted2: rgba(255,255,255,.66);
  --ow-border: var(--border-subtle, rgba(255,255,255,.14));

  --ow-btn-bg: rgba(255,255,255,.14);
  --ow-btn-bg-hover: rgba(255,255,255,.22);

  --ow-grad-a: #0d111f;
  --ow-grad-b: #0d111f;
}

.ow-topbar{
  width: 100%;
  border-radius: var(--ow-radius);
  background: transparent;
  box-shadow: none;
  overflow:hidden;
  position:relative;
  height: var(--ow-h);
  border: 0.1px solid var(--ow-border);
}

.ow-close{
  position:absolute;
  top: 8px;
  right: 8px;
  border: 1px solid var(--ow-border);
  background: var(--ow-btn-bg);
  color: var(--ow-text);
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, background .12s ease;
  z-index: 2;
}
.ow-close:hover{ background: var(--ow-btn-bg-hover); }
.ow-close:active{ transform: scale(.96); }

.ow-topbar__inner{
  height: 100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 20px 46px 20px 20px;
  min-width: 0;
  background-color: #191919;
}

.ow-left{ min-width:0; display:flex; flex-direction:column; gap: 6px; flex: 1 1 auto; }
.ow-head{ min-width:0; display:flex; flex-direction:column; gap:2px; line-height: 1.1; }

.ow-cond, .ow-subtitle{
  opacity:0;
  transform: translateY(6px);
  animation: ow-reveal .45s ease-out forwards;
}
.ow-subtitle{ animation-delay:.08s; }
@keyframes ow-reveal{ to{ opacity:1; transform: translateY(0); } }

.ow-cond{
  font-weight: 600;
  font-size: 14px;
  color: var(--ow-text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ow-subtitle{
  font-weight: 100;
  font-size: 12px;
  color: var(--ow-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ow-row{ min-width:0; display:flex; align-items:center; gap: 10px; }
.ow-tempwrap{ display:flex; align-items:baseline; gap: 3px; flex:0 0 auto; }
.ow-temp{ font-weight: 700; font-size: 28px; line-height: 1; color: var(--ow-text); letter-spacing:-0.5px; }
.ow-unit{ font-weight: 600; font-size: 13px; color: var(--ow-muted); line-height:1; }

.ow-meta{ min-width:0; display:flex; flex-direction:column; gap:2px; flex:1 1 auto; }
.ow-line{ display:flex; align-items:center; gap: 10px; min-width:0; }

.ow-wind{
  display:flex; align-items:center; gap:6px;
  font-weight: 300; font-size: 10px; color: var(--ow-muted2);
  white-space:nowrap; flex:0 0 auto;
}
.ow-wind svg{ width: 14px; height: 14px; opacity:.9; }

.ow-date{
  font-weight: 400; font-size: 11px; color: var(--ow-muted2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;
}

.ow-loc{
  display:flex; align-items:center; gap:6px;
  font-weight: 400; font-size: 11px; color: var(--ow-muted2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;
  margin-top: -3px;
  margin-left: -2px;
}

.ow-icon{
  flex:0 0 auto;
  width: 80px; height: 80px;
  display:flex; justify-content:flex-end; align-items:center;
  margin-top: 6px;
  margin-right: -15px;
}
.ow-float{ transform-origin: 50% 50%; animation: ow-float 3.6s ease-in-out infinite; }
@keyframes ow-float{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-2px); } }
.ow-pulse{ transform-origin: 72px 18px; animation: ow-pulse 2.8s ease-in-out infinite; }
@keyframes ow-pulse{ 0%,100%{ transform: scale(1); opacity:.95; } 50%{ transform: scale(1.03); opacity:1; } }
.ow-rain{ animation: ow-rain 1.25s linear infinite; }
@keyframes ow-rain{ 0%{ transform: translateY(0); opacity:.85; } 100%{ transform: translateY(5px); opacity:.55; } }

@media (max-width: 380px){
  .ow-topbar__inner{ padding: 16px 44px 16px 16px; }
  .ow-temp{ font-size: 26px; }
  .ow-cond{ font-size: 13px; }
  .ow-subtitle{ font-size: 10.5px; }
  .ow-wind, .ow-date, .ow-loc{ font-size: 11.5px; }
  .ow-icon{ width: 86px; height: 80px; margin-top: -16px; }
  #owIcon{ width: 84px; height: 80px; }
}