/* =========================================================
   Guimbal WX — Public WWW Synced-Data Dashboard
   File: css/07-solar-card-visual-cleanup.css
   Version: V2-R33 Visual Correction Pass 45 - July 2026
   Copyright: © Andrew Tunnera 2025-2026. All rights reserved.
   Role: Active runtime file
   ========================================================= */

/* ---------- Solar combo card: UV and Irradiance side by side ---------- */
:root{
  --wx-solar-side-min-h:128px;
  --wx-solar-side-tube-h:82px;
  --wx-solar-side-tube-w:22px;
  --wx-solar-side-gap:12px;
  --wx-solar-side-label-col:minmax(84px,42%);
}

html body.solar-combo-active .gauges-bottom{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:10px !important;
  width:100% !important;
}

html body .solar-combo-card{
  width:100% !important;
  min-height:var(--wx-solar-side-min-h) !important;
  padding:8px 12px 10px !important;
  border-radius:14px !important;
  display:grid !important;
  grid-template-rows:auto 1fr !important;
  gap:8px !important;
  align-items:stretch !important;
  background:linear-gradient(180deg,rgba(250,204,21,.12),rgba(147,51,234,.055)),rgba(15,20,26,.22) !important;
  border:2px solid rgba(250,204,21,.30) !important;
  box-shadow:var(--shadow), 0 0 16px 5px rgba(250,204,21,.16), 0 0 16px 5px rgba(147,51,234,.13), inset 0 0 36px 12px rgba(250,204,21,.10), inset 0 0 36px 12px rgba(147,51,234,.08) !important;
  box-sizing:border-box !important;
}

html body .solar-combo-title{
  justify-self:center !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:7px !important;
  width:max-content !important;
  max-width:calc(100% - 8px) !important;
  padding:4px 11px !important;
  margin:0 auto !important;
  border-radius:10px !important;
  color:#fff !important;
  font-weight:850 !important;
  font-size:.88rem !important;
  line-height:1 !important;
  letter-spacing:.15px !important;
  text-align:center !important;
  white-space:nowrap !important;
  background:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,.08)) !important;
  border:1px solid rgba(250,204,21,.46) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), 0 2px 10px rgba(0,0,0,.24), inset 0 0 16px rgba(250,204,21,.24) !important;
}

html body .solar-combo-body{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:var(--wx-solar-side-gap) !important;
  align-items:stretch !important;
  width:100% !important;
  min-width:0 !important;
}

html body .solar-combo-card .tube-card.uv,
html body .solar-combo-card .tube-card.solar{
  width:100% !important;
  min-width:0 !important;
  min-height:104px !important;
  height:100% !important;
  display:grid !important;
  grid-template-columns:var(--wx-solar-side-label-col) minmax(34px,1fr) !important;
  grid-template-rows:auto auto !important;
  grid-template-areas:"label tube" "value tube" !important;
  column-gap:8px !important;
  row-gap:5px !important;
  align-items:center !important;
  justify-items:stretch !important;
  padding:8px 9px !important;
  margin:0 !important;
  border-radius:12px !important;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018)),rgba(15,20,26,.25) !important;
  border:1px solid rgba(255,255,255,.13) !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
}

html body .solar-combo-card .tube-card.uv{
  border-color:rgba(168,85,247,.38) !important;
  box-shadow:0 0 12px 4px rgba(147,51,234,.14), inset 0 0 0 1px rgba(168,85,247,.20), inset 0 0 26px 9px rgba(147,51,234,.12) !important;
}

html body .solar-combo-card .tube-card.solar{
  border-color:rgba(253,224,71,.38) !important;
  box-shadow:0 0 12px 4px rgba(250,204,21,.14), inset 0 0 0 1px rgba(253,224,71,.20), inset 0 0 26px 9px rgba(250,204,21,.12) !important;
}

html body .solar-combo-card .tube-card.uv .tube-title,
html body .solar-combo-card .tube-card.solar .tube-title{
  grid-area:label !important;
  align-self:end !important;
  justify-self:stretch !important;
  min-width:0 !important;
  min-height:22px !important;
  padding:3px 7px !important;
  margin:0 !important;
  border-radius:8px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  color:#e8eaee !important;
  font-size:.78rem !important;
  line-height:1 !important;
  font-weight:850 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015)),rgba(15,20,26,.18) !important;
  border:1px solid rgba(255,255,255,.10) !important;
}

html body .solar-combo-card .tube-card.uv .tube-value,
html body .solar-combo-card .tube-card.solar .tube-value{
  grid-area:value !important;
  align-self:start !important;
  justify-self:stretch !important;
  min-width:0 !important;
  min-height:22px !important;
  padding:3px 7px !important;
  margin:0 !important;
  border-radius:8px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  color:#f4f6f8 !important;
  font-size:.84rem !important;
  line-height:1 !important;
  font-weight:900 !important;
  font-variant-numeric:tabular-nums;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02)),rgba(15,20,26,.35) !important;
  border:1px solid rgba(255,255,255,.16) !important;
}

html body .solar-combo-card .tube-card.uv .tube,
html body .solar-combo-card .tube-card.solar .tube{
  grid-area:tube !important;
  align-self:center !important;
  justify-self:center !important;
  --height:var(--wx-solar-side-tube-h) !important;
  width:var(--wx-solar-side-tube-w) !important;
  margin:0 auto !important;
  border-radius:9px !important;
}

@media (max-width:1180px){
  :root{
    --wx-spark-tall-w:clamp(128px,15vw,170px);
    --wx-spark-tall-h:50px;
    --wx-spark-left-col:minmax(8.6rem,40%);
  }
}

@media (max-width:980px){
  :root{
    --wx-solar-side-tube-h:74px;
    --wx-solar-side-tube-w:20px;
    --wx-solar-side-gap:8px;
    --wx-solar-side-label-col:minmax(76px,44%);
  }

  html body .solar-combo-card .tube-card.uv,
  html body .solar-combo-card .tube-card.solar{
    min-height:96px !important;
    padding:7px 8px !important;
  }

  html body .solar-combo-card .tube-card.uv .tube-title,
  html body .solar-combo-card .tube-card.solar .tube-title,
  html body .solar-combo-card .tube-card.uv .tube-value,
  html body .solar-combo-card .tube-card.solar .tube-value{
    font-size:.76rem !important;
    padding:3px 6px !important;
  }
}

@media (max-width:760px){

  html body #outdoorReadingsRibbon .ribbon-item .spark,
  html body #outdoorRibbon .ribbon-item .spark{
    width:100% !important;
    max-width:none !important;
  }

  html body #rainRibbon.rain-has-intensity .ribbon-body-card{
    grid-template-columns:1fr !important;
  }

  html body #rainRibbon.rain-has-intensity .tube-card.rain{
    grid-column:1 !important;
    grid-row:auto !important;
    grid-template-columns:auto 1fr auto !important;
    grid-template-rows:1fr !important;
    column-gap:8px !important;
  }

  html body #rainRibbon.rain-has-intensity .tube-card.rain .tube{
    --height:72px !important;
    height:72px !important;
  }
}

@media (max-width:540px){
  html body .solar-combo-body{
    grid-template-columns:1fr !important;
  }
}


:root{
  --wx-rain-embed-col: clamp(102px, 8.5vw, 124px);
  --wx-rain-embed-tube-h: clamp(94px, 8.8vw, 114px);
  --wx-rain-embed-tube-w: 24px;
  --wx-rain-embed-gap: 10px;
}

html body #rainRibbon.rain-has-intensity .ribbon-body-card{
  grid-template-columns:minmax(0,1fr) var(--wx-rain-embed-col) !important;
  grid-auto-rows:minmax(22px,auto) !important;
  row-gap:5px !important;
  align-content:center !important;
}

html body #rainRibbon.rain-has-intensity .tube-card.rain{
  overflow:hidden !important;
  min-height:0 !important;
  height:100% !important;
  max-height:100% !important;
  grid-template-rows:auto minmax(0,1fr) auto !important;
}

html body #rainRibbon.rain-has-intensity .tube-card.rain .tube-title{
  font-size:.66rem !important;
  line-height:1.02 !important;
  min-height:18px !important;
  padding:2px 5px !important;
  white-space:normal !important;
  text-align:center !important;
}

html body #rainRibbon.rain-has-intensity .tube-card.rain .tube{
  --height:var(--wx-rain-embed-tube-h) !important;
}

html body #rainRibbon.rain-has-intensity .tube-card.rain .tube-value{
  font-size:.66rem !important;
  line-height:1 !important;
  min-height:18px !important;
  padding:2px 5px !important;
}


html body.solar-combo-active .gauges-bottom,
html body .gauges-bottom.solar-combo-bottom{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:10px !important;
  width:100% !important;
}

html body .solar-combo-card .tube-card.uv .tube-title,
html body .solar-combo-card .tube-card.solar .tube-title{
  white-space:nowrap !important;
}

html body .solar-combo-card .tube-card.uv .tube,
html body .solar-combo-card .tube-card.solar .tube{
  height:var(--wx-solar-side-tube-h) !important;
  max-height:var(--wx-solar-side-tube-h) !important;
}


@media (max-width:760px){
  :root{
    --wx-rain-embed-tube-h:72px;
    --wx-rain-embed-tube-w:22px;
  }

  html body #rainRibbon.rain-has-intensity .tube-card.rain{
    min-height:110px !important;
    height:110px !important;
  }
}


:root{
  --tube-rain-outline: rgba(125,211,252,.82);
  --tube-rain-outline-soft: rgba(56,189,248,.30);

  --tube-uv-outline: rgba(216,180,254,.82);
  --tube-uv-outline-soft: rgba(168,85,247,.30);

  --tube-solar-outline: rgba(253,230,138,.86);
  --tube-solar-outline-soft: rgba(250,204,21,.32);

  --tube-inner-glass: rgba(255,255,255,.22);
}


html body .tube{
  border-width:1.5px !important;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.26),
      rgba(255,255,255,.075) 50%,
      rgba(255,255,255,.22)
    ) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -10px 18px rgba(0,0,0,.28),
    0 0 0 1px rgba(255,255,255,.045),
    0 8px 18px rgba(0,0,0,.16) !important;
}


html body .tube-card.rain .tube,
html body #rainRibbon.rain-has-intensity .tube-card.rain .tube{
  border-color:var(--tube-rain-outline) !important;
}

html body .tube-card.rain .fill,
html body #rainRibbon.rain-has-intensity .tube-card.rain .fill{
  border-top-color:rgba(224,242,254,.92) !important;
  box-shadow:
    0 -2px 8px rgba(125,211,252,.26),
    inset 0 1px 0 rgba(255,255,255,.22) !important;
}


html body .tube-card.uv .tube,
html body .solar-combo-card .tube-card.uv .tube{
  border-color:var(--tube-uv-outline) !important;
}

html body .tube-card.uv .fill,
html body .solar-combo-card .tube-card.uv .fill{
  border-top-color:rgba(245,243,255,.92) !important;
  box-shadow:
    0 -2px 8px rgba(216,180,254,.25),
    inset 0 1px 0 rgba(255,255,255,.22) !important;
}


html body .tube-card.solar .tube,
html body .solar-combo-card .tube-card.solar .tube{
  border-color:var(--tube-solar-outline) !important;
}

html body .tube-card.solar .fill,
html body .solar-combo-card .tube-card.solar .fill{
  border-top-color:rgba(254,249,195,.94) !important;
  box-shadow:
    0 -2px 8px rgba(253,230,138,.25),
    inset 0 1px 0 rgba(255,255,255,.22) !important;
}


html body #rainRibbon.rain-has-intensity .tube-card.rain{
  padding:6px 6px 6px !important;
  gap:3px !important;
}

html body #rainRibbon.rain-has-intensity .tube-card.rain .tube{
  width:24px !important;
  height:clamp(92px, 8.5vw, 112px) !important;
  max-height:112px !important;
}


html body .gauges-bottom.empty-gauges-bottom,
html body.solar-combo-active .gauges-bottom.empty-gauges-bottom{
  display:none !important;
}


@media (max-width:980px){


  :root{
    --wx-solar-top-tube-h:92px;
  }
}


:root{
  --wx-top-card-h: 246px;
  --wx-top-gap: 10px;

  --wx-top-wind-col: minmax(0, 1fr);
  --wx-top-solar-col: minmax(0, 1fr);
  --wx-top-lightning-col: minmax(0, 1fr);

  --wx-balanced-wind-gauge: 142px;
  --wx-balanced-lightning-w: 136px;
  --wx-balanced-lightning-h: 86px;

  --wx-solar-top-tube-h: clamp(78px, 6.2vw, 94px);
  --wx-solar-top-tube-w: 22px;
  --wx-solar-top-gap: 10px;
}


html body #rainRibbon.rain-has-intensity .tube-card.rain .tube{
  height:clamp(90px, 8.2vw, 108px) !important;
  max-height:108px !important;
  width:24px !important;
}


@media (max-width:980px){


  :root{
    --wx-solar-top-tube-h:86px;
  }
}


:root{
  --wx-header-chip-text: #fff8d6;
  --wx-header-chip-border: rgba(255,255,255,.30);
  --wx-header-chip-shadow:
    0 1px 2px rgba(0,0,0,.52),
    0 0 12px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.26);
}


html body header .pill{
  text-shadow:0 1px 2px rgba(0,0,0,.78) !important;
  border-color:var(--wx-header-chip-border) !important;
  box-shadow:var(--wx-header-chip-shadow) !important;
  backdrop-filter:blur(8px) saturate(1.18) !important;
  -webkit-backdrop-filter:blur(8px) saturate(1.18) !important;
}


html body #moonPill,
html body .pill.moon,
html body [data-pill="moon"],
html body [aria-label*="Moon"],
html body [title*="Moon"]{
  font-weight:850 !important;
}


html body .pill.night,
html body [data-pill="night"]{
  text-shadow:0 1px 2px rgba(0,0,0,.88) !important;
  font-weight:850 !important;
}


html body .pill.live,
html body [data-pill="live"],
html body [aria-label*="Live"],
html body [title*="Live"]{
  font-weight:900 !important;
}


html body .pill.temp{
  color:#ecfeff !important;
  text-shadow:0 1px 2px rgba(0,0,0,.72) !important;
  border-color:rgba(125,211,252,.38) !important;
}


:root{
  --wx-dual-panel-inner-max: 520px;
  --wx-dual-left-col: minmax(190px, 1fr);
  --wx-dual-right-col: minmax(190px, 1fr);
  --wx-dual-divider: rgba(255,255,255,.105);
  --wx-dual-divider-glow: rgba(125,211,252,.055);
  --wx-dual-spark-h: 50px;
}


html body #outdoorReadingsRibbon .ribbon-body-card,
html body #outdoorRibbon .ribbon-body-card{
  position:relative !important;
  width:min(100%, var(--wx-dual-panel-inner-max)) !important;
  margin:0 auto !important;
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:10px !important;
  align-content:center !important;
  justify-content:center !important;
  padding-left:10px !important;
  padding-right:10px !important;
}


html body #outdoorReadingsRibbon .ribbon-body-card::before,
html body #outdoorRibbon .ribbon-body-card::before{
  content:"" !important;
  position:absolute !important;
  top:8px !important;
  bottom:8px !important;
  left:50% !important;
  width:1px !important;
  transform:translateX(-50%) !important;
  pointer-events:none !important;
  background:
    linear-gradient(
      180deg,
      transparent,
      var(--wx-dual-divider) 18%,
      rgba(255,255,255,.135) 50%,
      var(--wx-dual-divider) 82%,
      transparent
    ) !important;
  box-shadow:
    0 0 10px var(--wx-dual-divider-glow),
    1px 0 0 rgba(0,0,0,.20) !important;
  opacity:.72 !important;
}


html body #outdoorReadingsRibbon .ribbon-item,
html body #outdoorRibbon .ribbon-item{
  display:grid !important;
  grid-template-columns:var(--wx-dual-left-col) var(--wx-dual-right-col) !important;
  grid-template-rows:auto auto !important;
  column-gap:22px !important;
  row-gap:5px !important;
  align-items:center !important;
  min-width:0 !important;
  width:100% !important;
}

/* Label top-left */
html body #outdoorReadingsRibbon .ribbon-item .ribbon-label,
html body #outdoorRibbon .ribbon-item .ribbon-label{
  grid-column:1 !important;
  grid-row:1 !important;
  align-self:end !important;
  justify-self:stretch !important;
  min-width:0 !important;
  min-height:23px !important;
  padding:3px 8px !important;
  white-space:nowrap !important;
}

/* Value bottom-left */
html body #outdoorReadingsRibbon .ribbon-item .ribbon-value,
html body #outdoorRibbon .ribbon-item .ribbon-value{
  grid-column:1 !important;
  grid-row:2 !important;
  align-self:start !important;
  justify-self:stretch !important;
  min-width:0 !important;
  min-height:24px !important;
  padding:3px 8px !important;
  margin:0 !important;
  white-space:nowrap !important;
}


html body #outdoorReadingsRibbon .ribbon-item .spark,
html body #outdoorRibbon .ribbon-item .spark{
  grid-column:2 !important;
  grid-row:1 / span 2 !important;
  align-self:center !important;
  justify-self:stretch !important;
  width:100% !important;
  max-width:none !important;
  height:var(--wx-dual-spark-h) !important;
  margin:0 !important;
  padding:3px 6px !important;
  border-radius:10px !important;
}


html body #outdoorReadingsRibbon .spark path.line,
html body #outdoorRibbon .spark path.line{
  stroke-width:2.35 !important;
}

html body #outdoorReadingsRibbon .spark path.fill,
html body #outdoorRibbon .spark path.fill{
  opacity:.15 !important;
}


@media (min-width:1400px){
  :root{
    --wx-dual-panel-inner-max: 560px;
    --wx-dual-spark-h: 52px;
  }
}


@media (max-width:1180px){
  :root{
    --wx-dual-panel-inner-max: 500px;
    --wx-dual-spark-h: 48px;
  }

  html body #outdoorReadingsRibbon .ribbon-item,
  html body #outdoorRibbon .ribbon-item{
    column-gap:18px !important;
  }
}


@media (max-width:760px){
  html body #outdoorReadingsRibbon .ribbon-body-card,
  html body #outdoorRibbon .ribbon-body-card{
    width:100% !important;
  }

  html body #outdoorReadingsRibbon .ribbon-body-card::before,
  html body #outdoorRibbon .ribbon-body-card::before{
    display:none !important;
  }

  html body #outdoorReadingsRibbon .ribbon-item,
  html body #outdoorRibbon .ribbon-item{
    grid-template-columns:1fr !important;
    grid-template-rows:auto auto auto !important;
    row-gap:5px !important;
  }

  html body #outdoorReadingsRibbon .ribbon-item .ribbon-label,
  html body #outdoorRibbon .ribbon-item .ribbon-label{
    grid-column:1 !important;
    grid-row:1 !important;
  }

  html body #outdoorReadingsRibbon .ribbon-item .ribbon-value,
  html body #outdoorRibbon .ribbon-item .ribbon-value{
    grid-column:1 !important;
    grid-row:2 !important;
  }

  html body #outdoorReadingsRibbon .ribbon-item .spark,
  html body #outdoorRibbon .ribbon-item .spark{
    grid-column:1 !important;
    grid-row:3 !important;
    height:44px !important;
  }
}


:root{
  --wx-instrument-divider: rgba(255,255,255,.105);
  --wx-instrument-divider-glow: rgba(125,211,252,.055);

  --wx-wind-inner-max: 560px;
  --wx-lightning-inner-max: 560px;

  --wx-wind-left-col: minmax(138px, 1fr);
  --wx-wind-right-col: minmax(180px, 1fr);
  --wx-lightning-left-col: minmax(138px, 1fr);
  --wx-lightning-right-col: minmax(180px, 1fr);

  --wx-wind-balanced-gauge: 138px;
  --wx-lightning-balanced-w: 136px;
  --wx-lightning-balanced-h: 86px;
}


:root{
  --risk-chip-radius: 999px;
}


html body .has-risk-label::after{
  content: attr(data-risk-label);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  min-height:16px;
  max-width:9.8em;
  margin-left:7px;
  padding:var(--risk-chip-pad);
  border-radius:var(--risk-chip-radius);
  font-size:var(--risk-chip-font);
  line-height:1;
  font-weight:900;
  letter-spacing:.02em;
  text-transform:none;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#eef6ff;
  background:rgba(51,65,85,.62);
  border:1px solid rgba(148,163,184,.36);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 1px 3px rgba(0,0,0,.26);
  text-shadow:0 1px 1px rgba(0,0,0,.65);
}

/* Risk states */
html body .has-risk-label[data-risk-level="ok"]::after{
  color:#dcfce7;
  background:linear-gradient(180deg, rgba(22,163,74,.72), rgba(21,128,61,.62));
  border-color:rgba(134,239,172,.48);
  box-shadow:0 0 8px rgba(34,197,94,.18), inset 0 1px 0 rgba(255,255,255,.16);
}
html body .has-risk-label[data-risk-level="info"]::after{
  color:#dbeafe;
  background:linear-gradient(180deg, rgba(37,99,235,.72), rgba(29,78,216,.62));
  border-color:rgba(147,197,253,.46);
  box-shadow:0 0 8px rgba(59,130,246,.18), inset 0 1px 0 rgba(255,255,255,.16);
}
html body .has-risk-label[data-risk-level="caution"]::after{
  color:#fef9c3;
  background:linear-gradient(180deg, rgba(202,138,4,.78), rgba(161,98,7,.66));
  border-color:rgba(253,224,71,.50);
  box-shadow:0 0 8px rgba(250,204,21,.20), inset 0 1px 0 rgba(255,255,255,.18);
}
html body .has-risk-label[data-risk-level="warn"]::after{
  color:#ffedd5;
  background:linear-gradient(180deg, rgba(234,88,12,.78), rgba(194,65,12,.68));
  border-color:rgba(fdba74,.52);
  box-shadow:0 0 8px rgba(249,115,22,.22), inset 0 1px 0 rgba(255,255,255,.18);
}
html body .has-risk-label[data-risk-level="danger"]::after{
  color:#fee2e2;
  background:linear-gradient(180deg, rgba(220,38,38,.82), rgba(153,27,27,.72));
  border-color:rgba(252,165,165,.55);
  box-shadow:0 0 9px rgba(239,68,68,.28), inset 0 1px 0 rgba(255,255,255,.18);
}
html body .has-risk-label[data-risk-level="neutral"]::after{
  color:#e5e7eb;
  background:linear-gradient(180deg, rgba(75,85,99,.70), rgba(55,65,81,.62));
  border-color:rgba(156,163,175,.36);
}


html body .tube-value.has-risk-label{
  justify-content:center !important;
}
html body .tube-value.has-risk-label::after{
  margin-left:5px;
  font-size:.56rem;
  padding:2px 5px;
  max-width:7.8em;
}


html body .gauge-rows .v.has-risk-label::after{
  font-size:.56rem;
  padding:2px 5px;
  max-width:7.6em;
  margin-left:5px;
}


html body .ribbon-value.has-risk-label::after{
  font-size:.60rem;
  padding:2px 6px;
}


@media (max-width:980px){
  html body .has-risk-label::after{
    max-width:8.2em;
  }
}

@media (max-width:540px){

  html body .has-risk-label::after{
    margin-left:0;
    margin-top:2px;
  }
}


:root{
  --risk-chip-font: .58rem;
  --risk-chip-pad: 2px 8px;
  --risk-chip-gap: 8px;

  --risk-glass-neutral:
    linear-gradient(90deg, rgba(148,163,184,.10), rgba(148,163,184,.045));
  --risk-glass-ok:
    linear-gradient(90deg, rgba(34,197,94,.18), rgba(34,197,94,.055));
  --risk-glass-info:
    linear-gradient(90deg, rgba(59,130,246,.18), rgba(59,130,246,.055));
  --risk-glass-caution:
    linear-gradient(90deg, rgba(250,204,21,.20), rgba(250,204,21,.060));
  --risk-glass-warn:
    linear-gradient(90deg, rgba(249,115,22,.20), rgba(249,115,22,.060));
  --risk-glass-danger:
    linear-gradient(90deg, rgba(239,68,68,.22), rgba(239,68,68,.065));
}


html body .ribbon-value.has-risk-label,
html body .gauge-rows .v.has-risk-label,
html body .tube-value.has-risk-label{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:0 !important;
  min-width:0 !important;
  overflow:hidden !important;
}


html body .has-risk-label::after{
  flex:1 1 auto !important;
  min-width:4.6em !important;
  max-width:none !important;
  margin-left:var(--risk-chip-gap) !important;
  padding:var(--risk-chip-pad) !important;

  border:0 !important;
  outline:0 !important;
  border-radius:999px !important;

  color:rgba(244,247,251,.86) !important;
  background:var(--risk-glass-neutral) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.075),
    inset 0 -1px 0 rgba(0,0,0,.10) !important;
  text-shadow:0 1px 1px rgba(0,0,0,.55) !important;

  opacity:.86 !important;
  font-size:var(--risk-chip-font) !important;
  font-weight:850 !important;
  letter-spacing:.02em !important;
  line-height:1 !important;
  text-align:center !important;
}


html body .has-risk-label[data-risk-level="ok"]::after{
  color:rgba(220,252,231,.90) !important;
  background:var(--risk-glass-ok) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.075),
    inset 0 -1px 0 rgba(0,0,0,.10),
    0 0 9px rgba(34,197,94,.075) !important;
}

html body .has-risk-label[data-risk-level="info"]::after{
  color:rgba(219,234,254,.90) !important;
  background:var(--risk-glass-info) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.075),
    inset 0 -1px 0 rgba(0,0,0,.10),
    0 0 9px rgba(59,130,246,.075) !important;
}

html body .has-risk-label[data-risk-level="caution"]::after{
  color:rgba(254,249,195,.91) !important;
  background:var(--risk-glass-caution) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.075),
    inset 0 -1px 0 rgba(0,0,0,.10),
    0 0 9px rgba(250,204,21,.075) !important;
}

html body .has-risk-label[data-risk-level="warn"]::after{
  color:rgba(255,237,213,.91) !important;
  background:var(--risk-glass-warn) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.075),
    inset 0 -1px 0 rgba(0,0,0,.10),
    0 0 9px rgba(249,115,22,.085) !important;
}

html body .has-risk-label[data-risk-level="danger"]::after{
  color:rgba(254,226,226,.92) !important;
  background:var(--risk-glass-danger) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.075),
    inset 0 -1px 0 rgba(0,0,0,.10),
    0 0 10px rgba(239,68,68,.10) !important;
}

html body .has-risk-label[data-risk-level="neutral"]::after{
  color:rgba(229,231,235,.82) !important;
  background:var(--risk-glass-neutral) !important;
}


html body .ribbon-value.has-risk-label::after{
  min-width:5.8em !important;
  font-size:.60rem !important;
  padding:2px 10px !important;
}


html body .tube-value.has-risk-label::after{
  min-width:4.2em !important;
  font-size:.53rem !important;
  padding:2px 6px !important;
  margin-left:6px !important;
}


html body .solar-combo-card .tube-value.has-risk-label{
  justify-content:center !important;
}

html body .solar-combo-card .tube-value.has-risk-label::after{
  flex:1 1 auto !important;
}


html body .has-risk-label{
  white-space:nowrap !important;
}

html body .has-risk-label::after{
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}


@media (max-width:540px){
  html body .ribbon-value.has-risk-label,
  html body .gauge-rows .v.has-risk-label,
  html body .tube-value.has-risk-label{
    flex-wrap:wrap !important;
    row-gap:3px !important;
  }

  html body .has-risk-label::after{
    flex-basis:100% !important;
    margin-left:0 !important;
    margin-top:2px !important;
    width:100% !important;
  }
}


:root{
  --wx-rain-blue-fill-top: rgba(125,211,252,.96);
  --wx-rain-blue-fill-mid: rgba(56,189,248,.88);
  --wx-rain-blue-fill-bottom: rgba(14,165,233,.58);

  --wx-rain-green-fill-top: rgba(134,239,172,.98);
  --wx-rain-green-fill-mid: rgba(34,197,94,.90);

  --wx-rain-yellow-fill-top: rgba(254,240,138,.98);
  --wx-rain-yellow-fill-mid: rgba(250,204,21,.92);
  --wx-rain-yellow-fill-bottom: rgba(234,179,8,.74);

  --wx-rain-red-fill-top: rgba(252,165,165,.98);
  --wx-rain-red-fill-mid: rgba(248,113,113,.94);
  --wx-rain-red-fill-bottom: rgba(239,68,68,.82);
}


html body #rainRibbon.rain-has-intensity .tube-card.rain .tube,
html body .tube-card.rain .tube{
  border:0 !important;
  outline:0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -10px 18px rgba(0,0,0,.28),
    inset 0 0 14px rgba(125,211,252,.10),
    0 6px 14px rgba(0,0,0,.14) !important;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.18),
      rgba(255,255,255,.055) 48%,
      rgba(255,255,255,.16)
    ) !important;
}


html body #rainRibbon.rain-has-intensity .tube-card.rain .fill.rain,
html body .tube-card.rain .fill.rain{
  border-top:0 !important;
  background:
    linear-gradient(
      180deg,
      var(--wx-rain-blue-fill-top) 0%,
      var(--wx-rain-blue-fill-mid) 45%,
      var(--wx-rain-blue-fill-bottom) 100%
    ) !important;
  box-shadow:
    0 -2px 10px rgba(125,211,252,.18),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -8px 14px rgba(14,116,144,.16) !important;
}


html body #rainRibbon.rain-has-intensity .tube-card.rain .fill.rain.rain-split-fill,
html body .tube-card.rain .fill.rain.rain-split-fill{
  background:
    linear-gradient(
      180deg,
      var(--wx-rain-green-fill-top) 0%,
      var(--wx-rain-green-fill-mid) 42%,
      rgba(74,222,128,.88) 49%,
      rgba(56,189,248,.96) 50%,
      var(--wx-rain-blue-fill-mid) 72%,
      var(--wx-rain-blue-fill-bottom) 100%
    ) !important;
  box-shadow:
    0 -2px 12px rgba(74,222,128,.18),
    0 -1px 10px rgba(56,189,248,.14),
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 -8px 14px rgba(14,116,144,.15) !important;
}

html body #rainRibbon.rain-has-intensity .tube-card.rain .fill.rain.rain-yellow-fill,
html body .tube-card.rain .fill.rain.rain-yellow-fill{
  background:
    linear-gradient(
      180deg,
      var(--wx-rain-yellow-fill-top) 0%,
      var(--wx-rain-yellow-fill-mid) 32%,
      var(--wx-rain-yellow-fill-bottom) 45%,
      var(--wx-rain-green-fill-mid) 59%,
      rgba(56,189,248,.94) 72%,
      var(--wx-rain-blue-fill-bottom) 100%
    ) !important;
  box-shadow:
    0 -2px 14px rgba(250,204,21,.20),
    0 -1px 10px rgba(56,189,248,.12),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -8px 14px rgba(113,63,18,.12) !important;
}


html body #rainRibbon.rain-has-intensity .tube-card.rain .fill.rain.rain-red-fill,
html body .tube-card.rain .fill.rain.rain-red-fill{
  background:
    linear-gradient(
      180deg,
      var(--wx-rain-red-fill-top) 0%,
      var(--wx-rain-red-fill-mid) 30%,
      var(--wx-rain-red-fill-bottom) 43%,
      var(--wx-rain-yellow-fill-mid) 55%,
      var(--wx-rain-green-fill-mid) 68%,
      var(--wx-rain-blue-fill-mid) 82%,
      var(--wx-rain-blue-fill-bottom) 100%
    ) !important;
  box-shadow:
    0 -2px 16px rgba(248,113,113,.24),
    0 -1px 12px rgba(250,204,21,.16),
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 -8px 14px rgba(127,29,29,.14) !important;
}


html body #rainRibbon.rain-has-intensity .tube-card.rain .tube.rain-split-fill,
html body .tube-card.rain .tube.rain-split-fill{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -10px 18px rgba(0,0,0,.28),
    inset 0 0 16px rgba(125,211,252,.10),
    0 0 12px rgba(34,197,94,.10),
    0 6px 14px rgba(0,0,0,.14) !important;
}

html body #rainRibbon.rain-has-intensity .tube-card.rain .tube.rain-yellow-fill,
html body .tube-card.rain .tube.rain-yellow-fill{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -10px 18px rgba(0,0,0,.28),
    inset 0 0 16px rgba(250,204,21,.11),
    0 0 13px rgba(250,204,21,.14),
    0 6px 14px rgba(0,0,0,.14) !important;
}


html body #rainRibbon.rain-has-intensity .tube-card.rain .tube.rain-red-fill,
html body .tube-card.rain .tube.rain-red-fill{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -10px 18px rgba(0,0,0,.30),
    inset 0 0 18px rgba(248,113,113,.12),
    0 0 15px rgba(248,113,113,.18),
    0 6px 14px rgba(0,0,0,.14) !important;
}


html body #rainRibbon.rain-has-intensity .tube-card.rain.rain-yellow-fill,
html body .tube-card.rain.rain-yellow-fill{
  box-shadow:
    var(--shadow-soft),
    0 0 16px rgba(250,204,21,.14),
    inset 0 0 24px rgba(250,204,21,.06) !important;
}


html body #rainRibbon.rain-has-intensity .tube-card.rain.rain-red-fill,
html body .tube-card.rain.rain-red-fill{
  box-shadow:
    var(--shadow-soft),
    0 0 18px rgba(248,113,113,.16),
    inset 0 0 26px rgba(248,113,113,.07) !important;
}


:root{
  --hero-crystal-border: rgba(255,255,255,.18);
  --hero-crystal-glow: rgba(125,211,252,.16);
  --hero-crystal-warn: rgba(250,204,21,.16);
  --trend-up: #fecaca;
  --trend-down: #bae6fd;
  --trend-steady: #d8dee9;
}

/* Compact crystal summary strip */
html body .wx-hero-summary{
  width:min(100%, 980px);
  margin:8px auto 0;
  min-height:34px;
  padding:6px 12px;
  border-radius:999px;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;

  color:rgba(245,250,255,.94);
  font-size:.88rem;
  line-height:1.15;
  font-weight:850;
  letter-spacing:.01em;
  text-align:center;

  border:1px solid var(--hero-crystal-border);
  background:
    radial-gradient(circle at 15% 15%, rgba(255,255,255,.16), transparent 28%),
    linear-gradient(90deg, rgba(14,165,233,.13), rgba(20,184,166,.08), rgba(99,102,241,.10)),
    rgba(15,20,26,.32);
  box-shadow:
    0 8px 24px rgba(0,0,0,.22),
    0 0 20px var(--hero-crystal-glow),
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 -1px 0 rgba(0,0,0,.26);
  backdrop-filter:blur(11px) saturate(1.20);
  -webkit-backdrop-filter:blur(11px) saturate(1.20);
  overflow:hidden;
  position:relative;
}

html body .wx-hero-summary::before{
  content:"";
  position:absolute;
  inset:1px 1px auto 1px;
  height:45%;
  border-radius:999px 999px 45% 45%;
  background:linear-gradient(180deg, rgba(255,255,255,.18), transparent);
  pointer-events:none;
  opacity:.55;
}

html body .wx-hero-summary[data-rain-state="active"]{
  background:
    radial-gradient(circle at 15% 15%, rgba(255,255,255,.16), transparent 28%),
    linear-gradient(90deg, rgba(14,165,233,.13), rgba(250,204,21,.10), rgba(20,184,166,.10)),
    rgba(15,20,26,.34);
  box-shadow:
    0 8px 24px rgba(0,0,0,.22),
    0 0 22px var(--hero-crystal-warn),
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 -1px 0 rgba(0,0,0,.26);
}

html body .wx-hero-icon{
  position:relative;
  z-index:1;
  flex:0 0 auto;
  width:20px;
  height:20px;
  display:inline-grid;
  place-items:center;
  border-radius:50%;
  color:#e0f2fe;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.38), rgba(125,211,252,.14) 48%, rgba(15,20,26,.18));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 0 10px rgba(125,211,252,.16);
  font-size:.72rem;
}

html body .wx-hero-summary-text{
  position:relative;
  z-index:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-shadow:0 1px 2px rgba(0,0,0,.74);
}

/* Outdoor Temp/Humidity trend arrows only */
html body #outTempVal ~ .wx-trend-arrow,
html body #outHumVal ~ .wx-trend-arrow{
  flex:0 0 auto;
  width:19px;
  height:19px;
  margin-left:6px;
  border-radius:999px;
  display:inline-grid;
  place-items:center;
  font-size:.74rem;
  line-height:1;
  font-weight:950;
  color:var(--trend-steady);
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
    rgba(15,20,26,.20);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 1px 2px rgba(0,0,0,.24);
  text-shadow:0 1px 1px rgba(0,0,0,.70);
}

html body .wx-trend-arrow.up{
  color:var(--trend-up);
  background:
    linear-gradient(180deg, rgba(248,113,113,.18), rgba(248,113,113,.045)),
    rgba(15,20,26,.20);
}

html body .wx-trend-arrow.down{
  color:var(--trend-down);
  background:
    linear-gradient(180deg, rgba(56,189,248,.18), rgba(56,189,248,.045)),
    rgba(15,20,26,.20);
}

html body .wx-trend-arrow.steady{
  color:var(--trend-steady);
  opacity:.78;
}


html body .ribbon-value.has-risk-label{
  display:flex !important;
  align-items:center !important;
}


@media (max-width:760px){
  html body .wx-hero-summary{
    border-radius:18px;
    padding:7px 10px;
    min-height:40px;
  }

  html body .wx-hero-summary-text{
    white-space:normal;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
  }
}


:root{
  --nav-pill-text: rgba(245,250,255,.94);
  --nav-pill-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 -1px 0 rgba(0,0,0,.16),
    0 4px 12px rgba(0,0,0,.16);
}


html body .status-bar .pill,
html body header .pill,
html body nav .pill,
html body .status-bar .chip,
html body header .chip,
html body nav .chip{
  color:var(--nav-pill-text) !important;
  border:0 !important;
  outline:0 !important;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.20), transparent 34%),
    linear-gradient(135deg, rgba(14,165,233,.18), rgba(20,184,166,.105) 48%, rgba(99,102,241,.12)),
    rgba(15,23,42,.34) !important;
  box-shadow:
    var(--nav-pill-shadow),
    0 0 14px rgba(125,211,252,.14) !important;
  text-shadow:0 1px 2px rgba(0,0,0,.72) !important;
  backdrop-filter:blur(9px) saturate(1.22) !important;
  -webkit-backdrop-filter:blur(9px) saturate(1.22) !important;
  font-weight:850 !important;
}


html body #moonPill,
html body .pill.moon,
html body [data-pill="moon"],
html body [aria-label*="Moon"],
html body [title*="Moon"]{
  color:#f5f3ff !important;
  border:0 !important;
  background:
    radial-gradient(circle at 24% 22%, rgba(255,255,255,.26), transparent 34%),
    linear-gradient(135deg, rgba(96,165,250,.20), rgba(167,139,250,.16) 54%, rgba(45,212,191,.10)),
    rgba(17,24,39,.42) !important;
  box-shadow:
    var(--nav-pill-shadow),
    0 0 16px rgba(167,139,250,.16),
    0 0 10px rgba(125,211,252,.10) !important;
  text-shadow:0 1px 2px rgba(0,0,0,.78) !important;
}


html body .pill.night,
html body [data-pill="night"]{
  color:#e0f2fe !important;
  border:0 !important;
  background:
    radial-gradient(circle at 22% 20%, rgba(255,255,255,.18), transparent 34%),
    linear-gradient(135deg, rgba(59,130,246,.18), rgba(99,102,241,.15) 55%, rgba(20,184,166,.08)),
    rgba(15,23,42,.46) !important;
  box-shadow:
    var(--nav-pill-shadow),
    0 0 15px rgba(59,130,246,.14) !important;
}


html body .pill.live,
html body [data-pill="live"],
html body [aria-label*="Live"],
html body [title*="Live"]{
  color:#dcfce7 !important;
  border:0 !important;
  background:
    radial-gradient(circle at 22% 20%, rgba(255,255,255,.20), transparent 34%),
    linear-gradient(135deg, rgba(34,197,94,.22), rgba(20,184,166,.15) 52%, rgba(14,165,233,.10)),
    rgba(6,78,59,.34) !important;
  box-shadow:
    var(--nav-pill-shadow),
    0 0 16px rgba(74,222,128,.12) !important;
  text-shadow:0 1px 2px rgba(0,0,0,.76) !important;
}

html body .pill.live .dot{
  background:#34f58b !important;
  box-shadow:
    0 0 0 1px rgba(220,252,231,.28),
    0 0 8px rgba(52,245,139,.70) !important;
}


html body .status-bar .pill.warn,
html body header .pill.warn,
html body .status-bar .pill.warning,
html body header .pill.warning{
  color:#fef9c3 !important;
  border:0 !important;
  background:
    radial-gradient(circle at 22% 20%, rgba(255,255,255,.20), transparent 34%),
    linear-gradient(135deg, rgba(250,204,21,.18), rgba(251,146,60,.13) 52%, rgba(14,165,233,.08)),
    rgba(15,23,42,.34) !important;
  box-shadow:
    var(--nav-pill-shadow),
    0 0 16px rgba(250,204,21,.12) !important;
}


html body .status-bar .pill.temp,
html body header .pill.temp{
  display:none !important;
}


html body .status-bar{
  align-items:center !important;
}

html body .status-bar .pill{
  letter-spacing:.01em !important;
  line-height:1 !important;
}


:root{
  --statbar-text: rgba(246,250,255,.96);
  --statbar-muted: rgba(226,239,249,.90);
  --statbar-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 4px 12px rgba(0,0,0,.16);
}


html body .status-bar{
  background:
    radial-gradient(circle at 8% 28%, rgba(255,255,255,.16), transparent 24%),
    linear-gradient(90deg,
      rgba(15,23,42,.78) 0%,
      rgba(14,116,144,.48) 42%,
      rgba(20,184,166,.40) 72%,
      rgba(14,165,233,.48) 100%
    ) !important;
  border:0 !important;
  box-shadow:
    0 4px 16px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(0,0,0,.20) !important;
  gap:8px !important;
}


html body .status-bar #topClock,
html body .status-bar #moonPill,
html body .status-bar #dayStatusPill,
html body .status-bar #hazDupPill,
html body .status-bar #status,
html body .status-bar #unitPill,
html body .status-bar .pill,
html body .status-bar .chip{
  color:var(--statbar-text) !important;
  border:0 !important;
  outline:0 !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.24), transparent 34%),
    linear-gradient(135deg, rgba(125,211,252,.20), rgba(45,212,191,.12) 52%, rgba(129,140,248,.12)),
    rgba(15,23,42,.42) !important;
  box-shadow:
    var(--statbar-shadow),
    0 0 12px rgba(125,211,252,.12) !important;
  text-shadow:
    0 1px 2px rgba(0,0,0,.80),
    0 0 6px rgba(255,255,255,.08) !important;
  font-weight:850 !important;
  letter-spacing:.01em !important;
  backdrop-filter:blur(9px) saturate(1.22) !important;
  -webkit-backdrop-filter:blur(9px) saturate(1.22) !important;
}


html body .status-bar #topClock{
  color:#f8fbff !important;
  background:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,.22), transparent 34%),
    linear-gradient(135deg, rgba(148,163,184,.22), rgba(14,165,233,.12)),
    rgba(15,23,42,.46) !important;
}


html body .status-bar #moonPill{
  color:#f6f3ff !important;
  background:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,.28), transparent 36%),
    linear-gradient(135deg, rgba(96,165,250,.22), rgba(167,139,250,.20) 55%, rgba(45,212,191,.10)),
    rgba(17,24,39,.48) !important;
  box-shadow:
    var(--statbar-shadow),
    0 0 15px rgba(167,139,250,.16),
    0 0 9px rgba(125,211,252,.10) !important;
}


html body .status-bar #dayStatusPill{
  color:#e0f2fe !important;
  background:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,.20), transparent 34%),
    linear-gradient(135deg, rgba(59,130,246,.22), rgba(99,102,241,.16) 55%, rgba(20,184,166,.08)),
    rgba(15,23,42,.50) !important;
  box-shadow:
    var(--statbar-shadow),
    0 0 14px rgba(59,130,246,.14) !important;
}


html body .status-bar #hazDupPill{
  color:#dcfce7 !important;
  background:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,.22), transparent 34%),
    linear-gradient(135deg, rgba(34,197,94,.22), rgba(20,184,166,.14) 52%, rgba(14,165,233,.10)),
    rgba(6,78,59,.38) !important;
  box-shadow:
    var(--statbar-shadow),
    0 0 14px rgba(74,222,128,.12) !important;
}


html body .status-bar #status{
  color:#e0f2fe !important;
  min-width:max-content !important;
  background:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,.22), transparent 34%),
    linear-gradient(135deg, rgba(14,165,233,.23), rgba(59,130,246,.14) 54%, rgba(20,184,166,.10)),
    rgba(15,23,42,.46) !important;
  box-shadow:
    var(--statbar-shadow),
    0 0 14px rgba(14,165,233,.13) !important;
}


html body .status-bar #status[style*="16a34a"],
html body .status-bar #status[title*="Live"]{
  color:#dcfce7 !important;
  background:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,.22), transparent 34%),
    linear-gradient(135deg, rgba(34,197,94,.23), rgba(20,184,166,.15) 54%, rgba(14,165,233,.10)),
    rgba(6,78,59,.40) !important;
}


html body .status-bar #unitPill{
  color:#e0f2fe !important;
  min-width:34px !important;
  padding-inline:9px !important;
  background:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,.20), transparent 34%),
    linear-gradient(135deg, rgba(56,189,248,.20), rgba(129,140,248,.13)),
    rgba(15,23,42,.44) !important;
}


html body #liveTempPill,
html body .status-bar .pill.temp,
html body .status-bar .transparent[aria-label*="temperature"],
html body .status-bar [aria-label*="Live temperature"]{
  display:none !important;
}


html body .status-bar #hazDupPill[style],
html body .status-bar #status[style]{
  border:0 !important;
}


html body .status-bar .status-right{
  gap:7px !important;
  align-items:center !important;
}


:root{
  --glass-soft-edge:
    inset 0 1px 0 rgba(255,255,255,.11),
    inset 0 -1px 0 rgba(0,0,0,.18);
  --glass-card-depth:
    0 10px 30px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.22);
  --glass-title-depth:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(0,0,0,.16),
    0 2px 8px rgba(0,0,0,.18);
}

/* ---------------- Global pills/chips: remove hard border lines ---------------- */
html body .pill,
html body .chip,
html body .status-pill,
html body .badge,
html body .tag,
html body button.pill,
html body .transparent,
html body [class*="pill"],
html body [class*="chip"]{
  border:0 !important;
  outline:0 !important;
  box-shadow:
    var(--glass-soft-edge),
    0 4px 12px rgba(0,0,0,.14) !important;
}


html body .pill::before,
html body .pill::after,
html body .chip::before,
html body .chip::after,
html body [class*="pill"]::before,
html body [class*="pill"]::after,
html body [class*="chip"]::before,
html body [class*="chip"]::after{
  border-color:transparent !important;
  outline:0 !important;
}


html body .pill:focus-visible,
html body .chip:focus-visible,
html body button:focus-visible{
  outline:0 !important;
  box-shadow:
    var(--glass-soft-edge),
    0 0 0 2px rgba(125,211,252,.20),
    0 4px 12px rgba(0,0,0,.14) !important;
}

/* ---------------- Card/gauge outer border cleanup ---------------- */


html body .solar-combo-card{
  box-shadow:
    var(--glass-card-depth),
    0 0 18px 4px rgba(250,204,21,.11),
    0 0 18px 4px rgba(168,85,247,.08),
    inset 0 0 34px 10px rgba(250,204,21,.07),
    inset 0 0 34px 10px rgba(168,85,247,.06) !important;
}


html body #outdoorReadingsRibbon,
html body #outdoorRibbon,
html body #rainRibbon{
  border:0 !important;
  outline:0 !important;
}

/* ---------------- Gauge/tube outline cleanup ---------------- */


html body .tube{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    inset 0 -10px 18px rgba(0,0,0,.26),
    inset 0 0 12px rgba(255,255,255,.045),
    0 6px 14px rgba(0,0,0,.13) !important;
}


html body .tube-card.uv .tube,
html body .solar-combo-card .tube-card.uv .tube{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    inset 0 -10px 18px rgba(0,0,0,.26),
    inset 0 0 14px rgba(216,180,254,.10),
    0 0 10px rgba(168,85,247,.15),
    0 6px 14px rgba(0,0,0,.13) !important;
}

html body .tube-card.solar .tube,
html body .solar-combo-card .tube-card.solar .tube{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    inset 0 -10px 18px rgba(0,0,0,.26),
    inset 0 0 14px rgba(253,230,138,.10),
    0 0 10px rgba(250,204,21,.14),
    0 6px 14px rgba(0,0,0,.13) !important;
}

html body .tube-card.rain .tube,
html body #rainRibbon.rain-has-intensity .tube-card.rain .tube{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    inset 0 -10px 18px rgba(0,0,0,.26),
    inset 0 0 14px rgba(125,211,252,.10),
    0 6px 14px rgba(0,0,0,.13) !important;
}

/* ---------------- Sub-header/title chip border cleanup ---------------- */

/* ---------------- R33.30 UV/Solar vertical gauge border removal ---------------- */
html body .tube-card.uv .tube,
html body .solar-combo-card .tube-card.uv .tube,
html body .tube-card.solar .tube,
html body .solar-combo-card .tube-card.solar .tube{
  border:0 !important;
  outline:0 !important;
}