.dbku-aqi {
  --aqi-bg: #07131f;
  --aqi-panel: #0c1b2b;
  --aqi-border: rgba(132, 175, 210, .22);
  --aqi-text: #f7fbff;
  --aqi-muted: #9bb7cc;
  --aqi-accent: #1ec7ff;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  color: var(--aqi-text);
  background:
      radial-gradient(circle at 50% 12%, rgba(33,126,180,.15), transparent 26%),
      linear-gradient(180deg, #07131f 0%, #03101a 100%);
  border: 1px solid var(--aqi-border);
  border-radius: 24px;
  padding: clamp(18px, 3vw, 34px);
  box-sizing: border-box;
  font-family: inherit;
  box-shadow: 0 25px 60px rgba(0,0,0,.28);
  overflow: hidden;
}

.dbku-aqi * { box-sizing: border-box; }

.dbku-aqi__header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.dbku-aqi__brand {
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}

.dbku-aqi__logo {
  width: var(--dbku-logo-width, 84px);
  height: auto;
  max-height: var(--dbku-logo-max-height, 90px);
  object-fit: contain;
  object-position: center;
  flex: 0 0 auto;
}

.dbku-aqi__logo-placeholder {
  width:58px;
  height:58px;
  border:2px solid #7ab9dc;
  border-radius:16px;
  display:grid;
  place-items:center;
  font-weight:800;
  color:#7ad7ff;
  background:rgba(14,77,112,.25);
}

.dbku-aqi__station {
  font-weight:800;
  font-size:clamp(18px,2.2vw,26px);
  line-height:1.1;
}

.dbku-aqi__source {
  color:var(--aqi-muted);
  font-size:13px;
  margin-top:4px;
}

.dbku-aqi__datetime {
  text-align:right;
  line-height:1.25;
  white-space:nowrap;
}
.dbku-aqi__datetime div:nth-child(2) { color:var(--aqi-muted); }
.dbku-aqi__datetime strong {
  display:block;
  margin-top:4px;
  color:var(--aqi-accent);
  font-size:clamp(22px,4vw,42px);
}

.dbku-aqi__divider {
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(132,175,210,.6), transparent);
  margin:20px 0;
}

.dbku-aqi__title {
  text-align:center;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:800;
  font-size:clamp(17px,2.8vw,30px);
  margin-bottom:18px;
}

.dbku-aqi__gauge-wrap {
  padding: 5px 0 0;
}

.dbku-aqi__gauge {
  position:relative;
  width:min(100%, 620px);
  aspect-ratio: 2 / 1.12;
  margin:0 auto;
}

.dbku-aqi__arc {
  position:absolute;
  inset:0 0 auto 0;
  width:100%;
  aspect-ratio:2/1;
  border-radius:999px 999px 0 0;
  background:conic-gradient(
    from 270deg at 50% 100%,
    #1f8ee8 0deg 18deg,
    #22bb5b 18deg 54deg,
    #f2d21f 54deg 90deg,
    #ff9d18 90deg 126deg,
    #f13b2d 126deg 154deg,
    #8d1947 154deg 180deg,
    transparent 180deg 360deg
  );
  overflow:hidden;
}
.dbku-aqi__arc::after {
  content:"";
  position:absolute;
  left:11%;
  right:11%;
  bottom:0;
  height:78%;
  background:var(--aqi-bg);
  border-radius:999px 999px 0 0;
  box-shadow:0 0 0 8px rgba(0,0,0,.28);
}

.dbku-aqi__needle-box {
  position:absolute;
  left:50%;
  bottom:10%;
  width:1px;
  height:1px;
}
.dbku-aqi__needle {
  position:absolute;
  left:-3px;
  bottom:-2px;
  width:6px;
  height:41%;
  min-height:120px;
  max-height:190px;
  transform-origin:50% 100%;
  background:linear-gradient(#ffd081,#ff6127);
  clip-path:polygon(50% 0,100% 100%,0 100%);
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.35));
  transition:transform .7s ease;
}

.dbku-aqi__center {
  position:absolute;
  left:50%;
  bottom:3%;
  transform:translateX(-50%);
  text-align:center;
  width:62%;
}
.dbku-aqi__number {
  font-weight:900;
  font-size:clamp(58px,12vw,112px);
  line-height:.9;
  color:#ff6a2c;
}
.dbku-aqi__status {
  margin-top:10px;
  font-size:clamp(17px,3vw,34px);
  color:#ff7342;
  font-weight:700;
}

.dbku-aqi__tick {
  position:absolute;
  font-weight:800;
  font-size:clamp(12px,2vw,20px);
  z-index:2;
  text-shadow:0 1px 2px #000;
}
.dbku-aqi__tick--0 { left:2%; bottom:8%; }
.dbku-aqi__tick--50 { left:8%; bottom:47%; }
.dbku-aqi__tick--100 { left:26%; top:8%; }
.dbku-aqi__tick--200 { left:48%; top:0; }
.dbku-aqi__tick--300 { right:18%; top:20%; }
.dbku-aqi__tick--400 { right:1%; bottom:8%; }

.dbku-aqi__metrics,
.dbku-aqi__weather {
  display:grid;
  grid-template-columns:1fr 1fr;
  margin-top:16px;
  border:1px solid var(--aqi-border);
  background:rgba(12,27,43,.76);
  border-radius:16px;
  overflow:hidden;
}
.dbku-aqi__metric,
.dbku-aqi__weather > div {
  padding:18px;
  text-align:center;
}
.dbku-aqi__metric + .dbku-aqi__metric,
.dbku-aqi__weather > div + div {
  border-left:1px solid var(--aqi-border);
}
.dbku-aqi__metric span {
  display:block;
  font-weight:800;
  font-size:clamp(16px,2.6vw,26px);
}
.dbku-aqi__metric:first-child span { color:#72df4a; }
.dbku-aqi__metric:nth-child(2) span { color:#ffd132; }
.dbku-aqi__metric strong {
  display:block;
  margin-top:6px;
  font-size:clamp(30px,6vw,58px);
  line-height:1.1;
}
.dbku-aqi__metric small {
  color:var(--aqi-muted);
  font-size:clamp(13px,2vw,18px);
}

.dbku-aqi__weather > div {
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-areas:"icon label" "icon value";
  align-items:center;
  column-gap:12px;
  text-align:left;
}
.dbku-aqi__weather-icon {
  grid-area:icon;
  font-size:34px;
}
.dbku-aqi__weather > div > span:not(.dbku-aqi__weather-icon) {
  grid-area:label;
  color:var(--aqi-muted);
}
.dbku-aqi__weather strong {
  grid-area:value;
  font-size:clamp(22px,4vw,38px);
}

.dbku-aqi__advisory {
  display:grid;
  grid-template-columns:auto 1fr;
  gap:18px;
  align-items:center;
  margin-top:16px;
  padding:18px;
  border:1px solid var(--aqi-border);
  border-radius:16px;
  background:linear-gradient(90deg, rgba(26,86,126,.22), rgba(12,27,43,.78));
  font-size:clamp(15px,2.4vw,23px);
  line-height:1.4;
}
.dbku-aqi__mask {
  width:64px;
  height:64px;
  border:2px solid #62c9ff;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#bfeaff;
  font-weight:900;
  box-shadow:0 0 24px rgba(30,199,255,.18);
}

.dbku-aqi__footer {
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:13px;
  color:var(--aqi-muted);
  font-size:12px;
}

.dbku-aqi--signage {
  width:100vw;
  max-width:none;
  min-height:100vh;
  margin:0;
  border:0;
  border-radius:0;
  box-shadow:none;
  padding:clamp(20px, 2.7vw, 52px);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.dbku-aqi--signage .dbku-aqi__title { font-size:clamp(28px,4vw,52px); }
.dbku-aqi--signage .dbku-aqi__number { font-size:clamp(92px,14vw,170px); }
.dbku-aqi--signage .dbku-aqi__gauge { width:min(78vw, 920px); }
.dbku-aqi--signage .dbku-aqi__metrics,
.dbku-aqi--signage .dbku-aqi__weather,
.dbku-aqi--signage .dbku-aqi__advisory {
  width:min(92vw, 1180px);
  margin-left:auto;
  margin-right:auto;
}

.dbku-aqi--popup {
  max-width:420px;
  padding:16px;
  border-radius:18px;
}
.dbku-aqi--popup .dbku-aqi__source,
.dbku-aqi--popup .dbku-aqi__weather,
.dbku-aqi--popup .dbku-aqi__advisory,
.dbku-aqi--popup .dbku-aqi__footer {
  display:none;
}
.dbku-aqi--popup .dbku-aqi__header { align-items:flex-start; }
.dbku-aqi--popup .dbku-aqi__datetime { font-size:12px; }
.dbku-aqi--popup .dbku-aqi__datetime strong { font-size:18px; }
.dbku-aqi--popup .dbku-aqi__title { margin:12px 0 8px; font-size:15px; }
.dbku-aqi--popup .dbku-aqi__number { font-size:54px; }
.dbku-aqi--popup .dbku-aqi__status { font-size:16px; }
.dbku-aqi--popup .dbku-aqi__metric { padding:10px; }

.dbku-aqi.is-good .dbku-aqi__number,
.dbku-aqi.is-good .dbku-aqi__status { color:#2ec96f; }
.dbku-aqi.is-moderate .dbku-aqi__number,
.dbku-aqi.is-moderate .dbku-aqi__status { color:#f1d53b; }
.dbku-aqi.is-sensitive .dbku-aqi__number,
.dbku-aqi.is-sensitive .dbku-aqi__status { color:#ff9f1c; }
.dbku-aqi.is-unhealthy .dbku-aqi__number,
.dbku-aqi.is-unhealthy .dbku-aqi__status { color:#f04b3f; }
.dbku-aqi.is-very-unhealthy .dbku-aqi__number,
.dbku-aqi.is-very-unhealthy .dbku-aqi__status { color:#a855f7; }
.dbku-aqi.is-hazardous .dbku-aqi__number,
.dbku-aqi.is-hazardous .dbku-aqi__status { color:#b51f48; }

@media (max-width:640px) {
  .dbku-aqi { padding:16px; border-radius:18px; }
  .dbku-aqi__header { align-items:flex-start; }
  .dbku-aqi__source { display:none; }
  .dbku-aqi__metrics,
  .dbku-aqi__weather { grid-template-columns:1fr 1fr; }
  .dbku-aqi__advisory { grid-template-columns:1fr; text-align:center; }
  .dbku-aqi__mask { margin:0 auto; }
  .dbku-aqi__footer { flex-direction:column; }
}


.dbku-aqi__fullscreen-btn {
  position: fixed;
  z-index: 99999;
  top: max(16px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  border: 1px solid rgba(130, 190, 226, .35);
  border-radius: 12px;
  background: rgba(3, 16, 26, .78);
  color: #fff;
  padding: 10px 14px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0,0,0,.2);
}
.dbku-aqi__fullscreen-btn:hover {
  background: rgba(14, 46, 67, .9);
}
.dbku-aqi__fullscreen-btn span {
  margin-left: 5px;
}

@media (orientation: landscape) and (min-width: 900px) {
  .dbku-aqi--signage {
    min-height: 100vh;
    padding: clamp(16px, 2vh, 28px) clamp(28px, 3vw, 58px);
  }
  .dbku-aqi--signage .dbku-aqi__header {
    width:min(94vw, 1400px);
    margin:0 auto;
  }
  .dbku-aqi--signage .dbku-aqi__divider {
    width:min(94vw, 1400px);
    margin-left:auto;
    margin-right:auto;
  }
  .dbku-aqi--signage .dbku-aqi__title {
    margin-bottom: 8px;
  }
  .dbku-aqi--signage .dbku-aqi__gauge {
    width:min(54vw, 760px);
  }
  .dbku-aqi--signage .dbku-aqi__metrics,
  .dbku-aqi--signage .dbku-aqi__weather {
    width:min(70vw, 1000px);
    margin-top:10px;
  }
  .dbku-aqi--signage .dbku-aqi__advisory {
    width:min(78vw, 1120px);
    margin-top:10px;
  }
  .dbku-aqi--signage .dbku-aqi__footer {
    width:min(78vw, 1120px);
    margin-left:auto;
    margin-right:auto;
  }
}

@media (orientation: portrait) {
  .dbku-aqi--signage .dbku-aqi__gauge {
    width:min(94vw, 760px);
  }
}

@media (max-width: 640px) {
  .dbku-aqi__fullscreen-btn span {
    display:none;
  }
}


/* v1.2.0 Adjustable / scalable logo */
.dbku-aqi[data-logo-alignment="center"] .dbku-aqi__header {
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
.dbku-aqi[data-logo-alignment="center"] .dbku-aqi__brand {
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
.dbku-aqi[data-logo-alignment="center"] .dbku-aqi__datetime {
  text-align: center;
}

.dbku-aqi--signage .dbku-aqi__logo {
  width: var(--dbku-logo-signage-width, 140px);
  max-height: none;
}

@media (max-width: 640px) {
  .dbku-aqi__logo,
  .dbku-aqi--signage .dbku-aqi__logo {
    width: var(--dbku-logo-mobile-width, 56px);
    max-height: var(--dbku-logo-max-height, 90px);
  }
}


/* v1.3.0 Live display effects */
.dbku-aqi {
  position: relative;
  isolation: isolate;
}
.dbku-aqi > *:not(.dbku-aqi__ambient):not(.dbku-aqi__particles) {
  position: relative;
  z-index: 2;
}

.dbku-aqi__ambient,
.dbku-aqi__particles {
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:0;
}

.dbku-aqi[data-bg-effect="ambient"] .dbku-aqi__ambient span {
  position:absolute;
  display:block;
  width:38vw;
  height:38vw;
  min-width:240px;
  min-height:240px;
  border-radius:50%;
  filter:blur(55px);
  opacity:.16;
  background:radial-gradient(circle, rgba(30,199,255,.9) 0%, rgba(30,199,255,0) 70%);
  animation:dbkuAmbientFloat 16s ease-in-out infinite alternate;
}
.dbku-aqi[data-bg-effect="ambient"] .dbku-aqi__ambient span:nth-child(1) {
  left:-12%;
  top:5%;
}
.dbku-aqi[data-bg-effect="ambient"] .dbku-aqi__ambient span:nth-child(2) {
  right:-14%;
  top:32%;
  animation-delay:-5s;
}
.dbku-aqi[data-bg-effect="ambient"] .dbku-aqi__ambient span:nth-child(3) {
  left:25%;
  bottom:-20%;
  animation-delay:-9s;
}

@keyframes dbkuAmbientFloat {
  0% { transform:translate3d(0,0,0) scale(1); }
  100% { transform:translate3d(8%, -6%, 0) scale(1.12); }
}

.dbku-aqi[data-bg-effect="particles"] .dbku-aqi__particles {
  opacity:.26;
  background-image:
    radial-gradient(circle at 12% 20%, rgba(255,255,255,.75) 0 1px, transparent 1.5px),
    radial-gradient(circle at 52% 60%, rgba(30,199,255,.7) 0 1px, transparent 1.5px),
    radial-gradient(circle at 82% 30%, rgba(255,255,255,.6) 0 1px, transparent 1.5px),
    radial-gradient(circle at 36% 84%, rgba(30,199,255,.6) 0 1px, transparent 1.5px);
  background-size:120px 120px, 160px 160px, 210px 210px, 260px 260px;
  animation:dbkuParticles 24s linear infinite;
}
@keyframes dbkuParticles {
  to { background-position:0 -240px, 0 -320px, 0 -420px, 0 -520px; }
}

.dbku-aqi[data-bg-effect="none"] .dbku-aqi__ambient,
.dbku-aqi[data-bg-effect="none"] .dbku-aqi__particles {
  display:none;
}

/* Gauge entrance */
.dbku-aqi[data-animation="subtle"] .dbku-aqi__arc,
.dbku-aqi[data-animation="full"] .dbku-aqi__arc {
  transform-origin:50% 100%;
  animation:dbkuGaugeReveal 1.15s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes dbkuGaugeReveal {
  from { transform:scale(.92); opacity:0; filter:saturate(.7); }
  to { transform:scale(1); opacity:1; filter:saturate(1); }
}

/* AQI breathing glow */
.dbku-aqi[data-animation="subtle"] .dbku-aqi__number,
.dbku-aqi[data-animation="full"] .dbku-aqi__number {
  animation:dbkuAQIBreathe 3.2s ease-in-out infinite;
}
@keyframes dbkuAQIBreathe {
  0%,100% { text-shadow:0 0 10px currentColor, 0 0 24px rgba(255,255,255,.04); }
  50% { text-shadow:0 0 22px currentColor, 0 0 42px rgba(255,255,255,.09); }
}

/* Live indicator */
.dbku-aqi__live-wrap {
  display:flex;
  align-items:center;
  gap:10px;
}
.dbku-aqi__live {
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight:800;
  color:#7ee787;
}
.dbku-aqi__live i {
  width:9px;
  height:9px;
  border-radius:50%;
  background:#48e06e;
  box-shadow:0 0 0 rgba(72,224,110,.7);
}
.dbku-aqi[data-animation="subtle"] .dbku-aqi__live i,
.dbku-aqi[data-animation="full"] .dbku-aqi__live i {
  animation:dbkuLivePulse 1.8s ease-out infinite;
}
@keyframes dbkuLivePulse {
  0% { box-shadow:0 0 0 0 rgba(72,224,110,.7); }
  70% { box-shadow:0 0 0 10px rgba(72,224,110,0); }
  100% { box-shadow:0 0 0 0 rgba(72,224,110,0); }
}

/* Change feedback */
.dbku-aqi__changed {
  animation:dbkuValueFlash .65s ease;
}
@keyframes dbkuValueFlash {
  0% { transform:scale(1); filter:brightness(1); }
  35% { transform:scale(1.08); filter:brightness(1.6); }
  100% { transform:scale(1); filter:brightness(1); }
}

/* Advisory entrance */
.dbku-aqi[data-animation="full"] .dbku-aqi__advisory {
  animation:dbkuAdvisoryIn .8s ease .4s both;
}
@keyframes dbkuAdvisoryIn {
  from { opacity:0; transform:translateY(12px); }
  to { opacity:1; transform:translateY(0); }
}

/* Full mode extra liveliness */
.dbku-aqi[data-animation="full"] .dbku-aqi__metric strong,
.dbku-aqi[data-animation="full"] .dbku-aqi__weather strong {
  transition:transform .35s ease, filter .35s ease;
}
.dbku-aqi[data-animation="full"] .dbku-aqi__metric:hover strong,
.dbku-aqi[data-animation="full"] .dbku-aqi__weather > div:hover strong {
  transform:translateY(-2px);
  filter:brightness(1.2);
}

.dbku-aqi[data-animation="off"] *,
.dbku-aqi[data-animation="off"] *::before,
.dbku-aqi[data-animation="off"] *::after {
  animation:none !important;
  transition:none !important;
}

@media (prefers-reduced-motion: reduce) {
  .dbku-aqi *,
  .dbku-aqi *::before,
  .dbku-aqi *::after {
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}


/* v1.4.0 Precision SVG gauge */
.dbku-aqi__gauge{position:relative;width:min(100%,760px);aspect-ratio:600/360;margin:0 auto}
.dbku-aqi__svg-gauge{display:block;width:100%;height:auto;overflow:visible}
.dbku-aqi__track,.dbku-aqi__segment{fill:none;stroke-width:58;stroke-linecap:butt}
.dbku-aqi__track{stroke:rgba(255,255,255,.08)}
.dbku-aqi__segment--good{stroke:#27c866}.dbku-aqi__segment--moderate{stroke:#f4d52a}.dbku-aqi__segment--sensitive{stroke:#ff9f1a}.dbku-aqi__segment--unhealthy{stroke:#ff4238}.dbku-aqi__segment--very-unhealthy{stroke:#9e1f63}.dbku-aqi__segment--hazardous{stroke:#6d173d}
.dbku-aqi__svg-tick{stroke:rgba(255,255,255,.9);stroke-width:3}
.dbku-aqi__svg-label{fill:#fff;font-size:20px;font-weight:800;paint-order:stroke;stroke:rgba(0,0,0,.55);stroke-width:3px}
.dbku-aqi__svg-needle{transform-origin:300px 300px;transform-box:view-box;transition:transform 1s cubic-bezier(.2,.8,.2,1);will-change:transform}
.dbku-aqi__needle-shadow{fill:rgba(0,0,0,.3);transform:translate(3px,3px)}
.dbku-aqi__needle-shape{fill:#ff7043;filter:url(#dbku-aqi-glow)}
.dbku-aqi__pivot-ring{fill:#07131f;stroke:rgba(255,255,255,.28);stroke-width:4}.dbku-aqi__pivot{fill:#ff7043;stroke:#ffd2c4;stroke-width:3;filter:url(#dbku-aqi-glow)}
.dbku-aqi__svg-value{fill:currentColor;font-size:94px;font-weight:900;letter-spacing:-3px}.dbku-aqi__svg-status{fill:currentColor;font-size:28px;font-weight:800}.dbku-aqi__svg-center{color:#ff7043}
.dbku-aqi.is-good .dbku-aqi__svg-center{color:#2ec96f}.dbku-aqi.is-moderate .dbku-aqi__svg-center{color:#f1d53b}.dbku-aqi.is-sensitive .dbku-aqi__svg-center{color:#ff9f1c}.dbku-aqi.is-unhealthy .dbku-aqi__svg-center{color:#f04b3f}.dbku-aqi.is-very-unhealthy .dbku-aqi__svg-center{color:#a855f7}.dbku-aqi.is-hazardous .dbku-aqi__svg-center{color:#b51f48}
.dbku-aqi__arc,.dbku-aqi__needle-box,.dbku-aqi__center,.dbku-aqi__tick{display:none!important}
.dbku-aqi--signage .dbku-aqi__gauge{width:min(72vw,980px)}
@media (orientation:landscape) and (min-width:900px){.dbku-aqi--signage .dbku-aqi__gauge{width:min(48vw,760px)}}
@media (orientation:portrait){.dbku-aqi--signage .dbku-aqi__gauge{width:min(94vw,820px)}}
@media (max-width:640px){.dbku-aqi__svg-label{font-size:18px}.dbku-aqi__svg-value{font-size:82px}.dbku-aqi__svg-status{font-size:25px}.dbku-aqi__track,.dbku-aqi__segment{stroke-width:52}}
.dbku-aqi[data-animation="off"] .dbku-aqi__svg-needle{transition:none!important}


/* v1.4.1 precision signage hotfix */
.dbku-aqi__svg-needle-line{
  stroke:#ff7043;
  stroke-width:8;
  stroke-linecap:round;
  filter:drop-shadow(0 0 6px rgba(255,112,67,.78));
}
.dbku-aqi__needle-tip{
  fill:#ffd2c4;
  stroke:#ff7043;
  stroke-width:3;
  filter:drop-shadow(0 0 5px rgba(255,112,67,.85));
}
.dbku-aqi__svg-value{
  fill:#f04b3f !important;
  font-size:94px;
  font-weight:900;
  letter-spacing:-3px;
  paint-order:stroke;
  stroke:rgba(0,0,0,.18);
  stroke-width:1px;
}
.dbku-aqi__svg-status{
  fill:#f04b3f !important;
  font-size:28px;
  font-weight:800;
}
.dbku-aqi.is-good .dbku-aqi__svg-value,
.dbku-aqi.is-good .dbku-aqi__svg-status{fill:#2ec96f !important}
.dbku-aqi.is-moderate .dbku-aqi__svg-value,
.dbku-aqi.is-moderate .dbku-aqi__svg-status{fill:#f1d53b !important}
.dbku-aqi.is-sensitive .dbku-aqi__svg-value,
.dbku-aqi.is-sensitive .dbku-aqi__svg-status{fill:#ff9f1c !important}
.dbku-aqi.is-unhealthy .dbku-aqi__svg-value,
.dbku-aqi.is-unhealthy .dbku-aqi__svg-status{fill:#f04b3f !important}
.dbku-aqi.is-very-unhealthy .dbku-aqi__svg-value,
.dbku-aqi.is-very-unhealthy .dbku-aqi__svg-status{fill:#a855f7 !important}
.dbku-aqi.is-hazardous .dbku-aqi__svg-value,
.dbku-aqi.is-hazardous .dbku-aqi__svg-status{fill:#b51f48 !important}
.dbku-aqi__svg-label{
  fill:#fff !important;
  paint-order:stroke;
  stroke:rgba(0,0,0,.72);
  stroke-width:3px;
}
.dbku-aqi__svg-needle,
.dbku-aqi__needle-shadow,
.dbku-aqi__needle-shape{display:none !important}


/* v1.4.2 Humanized AQI advisory */
.dbku-aqi__advisory-copy{min-width:0}
.dbku-aqi__advisory-title{display:block;margin-bottom:5px;color:#fff;font-size:1.02em;line-height:1.25;font-weight:800}
.dbku-aqi__advisory-message{color:#e7f1f8;line-height:1.45}
.dbku-aqi.is-good .dbku-aqi__mask{border-color:#2ec96f;color:#2ec96f}
.dbku-aqi.is-moderate .dbku-aqi__mask{border-color:#f1d53b;color:#f1d53b}
.dbku-aqi.is-sensitive .dbku-aqi__mask{border-color:#ff9f1c;color:#ff9f1c}
.dbku-aqi.is-unhealthy .dbku-aqi__mask{border-color:#f04b3f;color:#f04b3f}
.dbku-aqi.is-very-unhealthy .dbku-aqi__mask{border-color:#a855f7;color:#a855f7}
.dbku-aqi.is-hazardous .dbku-aqi__mask{border-color:#b51f48;color:#b51f48}
@media(max-width:640px){.dbku-aqi__advisory-title{font-size:1em}.dbku-aqi__advisory-message{font-size:.95em}}


/* v1.4.3 Signage polish */
.dbku-aqi--signage .dbku-aqi__svg-label {
  font-size: 17px;
}

.dbku-aqi--signage .dbku-aqi__advisory {
  padding: 14px 18px;
  gap: 14px;
}

.dbku-aqi--signage .dbku-aqi__mask {
  width: 54px;
  height: 54px;
  font-size: 14px;
}

.dbku-aqi--signage .dbku-aqi__advisory-title {
  margin-bottom: 3px;
  font-size: 1em;
  line-height: 1.2;
}

.dbku-aqi--signage .dbku-aqi__advisory-message {
  line-height: 1.35;
}

.dbku-aqi--signage .dbku-aqi__footer {
  align-items: center;
  gap: 18px;
  font-size: 12px;
}

.dbku-aqi--signage .dbku-aqi__live-wrap {
  white-space: nowrap;
}

.dbku-aqi--signage .dbku-aqi__source-line {
  margin-left: auto;
  text-align: right;
}

@media (orientation: landscape) and (min-width: 900px) {
  .dbku-aqi--signage .dbku-aqi__advisory {
    width: min(72vw, 1040px);
  }
}

@media (max-width: 640px) {
  .dbku-aqi--signage .dbku-aqi__svg-label {
    font-size: 16px;
  }

  .dbku-aqi--signage .dbku-aqi__advisory {
    padding: 12px 14px;
    gap: 10px;
  }

  .dbku-aqi--signage .dbku-aqi__mask {
    width: 48px;
    height: 48px;
    font-size: 12px;
  }

  .dbku-aqi--signage .dbku-aqi__footer {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .dbku-aqi--signage .dbku-aqi__source-line {
    margin-left: 0;
  }
}


/* v1.5.0 Landscape LED signage */
.dbku-aqi--landscape{
  width:100vw;max-width:none;min-height:100vh;margin:0;border:0;border-radius:0;box-shadow:none;
  padding:clamp(22px,2vw,42px);display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(360px,.9fr);
  grid-template-rows:auto auto 1fr auto auto;
  grid-template-areas:"header header" "divider divider" "gauge data" "advisory advisory" "footer footer";
  column-gap:clamp(26px,3vw,64px);row-gap:clamp(10px,1.2vh,22px);align-items:center;
  background:radial-gradient(circle at 25% 38%,rgba(31,142,232,.13),transparent 32%),radial-gradient(circle at 78% 26%,rgba(39,200,102,.08),transparent 26%),linear-gradient(180deg,#07131f 0%,#03101a 100%);
}
.dbku-aqi--landscape .dbku-aqi__header{grid-area:header;width:100%;max-width:none;margin:0}
.dbku-aqi--landscape .dbku-aqi__divider{grid-area:divider;width:100%;margin:0}
.dbku-aqi--landscape .dbku-aqi__title{position:absolute;left:clamp(28px,3vw,64px);top:clamp(120px,14vh,168px);margin:0;text-align:left;font-size:clamp(28px,2.2vw,48px);letter-spacing:.07em}
.dbku-aqi--landscape .dbku-aqi__gauge-wrap{grid-area:gauge;width:100%;align-self:center;padding-top:clamp(36px,5vh,70px)}
.dbku-aqi--landscape .dbku-aqi__gauge{width:min(58vw,980px);max-width:100%;margin:0 auto}
.dbku-aqi--landscape .dbku-aqi__svg-value{font-size:118px}.dbku-aqi--landscape .dbku-aqi__svg-status{font-size:32px}.dbku-aqi--landscape .dbku-aqi__svg-label{font-size:18px}
.dbku-aqi--landscape .dbku-aqi__metrics,.dbku-aqi--landscape .dbku-aqi__weather{width:100%;margin:0;grid-template-columns:1fr 1fr}
.dbku-aqi--landscape .dbku-aqi__metrics{grid-area:data;align-self:end;margin-bottom:clamp(118px,15vh,170px)}
.dbku-aqi--landscape .dbku-aqi__weather{grid-area:data;align-self:end;margin-bottom:clamp(0px,1vh,12px)}
.dbku-aqi--landscape .dbku-aqi__metric,.dbku-aqi--landscape .dbku-aqi__weather>div{padding:clamp(18px,2vw,34px)}
.dbku-aqi--landscape .dbku-aqi__metric span{font-size:clamp(22px,1.7vw,34px)}.dbku-aqi--landscape .dbku-aqi__metric strong{font-size:clamp(48px,4vw,82px)}.dbku-aqi--landscape .dbku-aqi__metric small{font-size:clamp(16px,1.2vw,24px)}
.dbku-aqi--landscape .dbku-aqi__weather strong{font-size:clamp(34px,2.8vw,60px)}.dbku-aqi--landscape .dbku-aqi__weather>div>span:not(.dbku-aqi__weather-icon){font-size:clamp(16px,1.1vw,23px)}.dbku-aqi--landscape .dbku-aqi__weather-icon{font-size:clamp(34px,2.4vw,52px)}
.dbku-aqi--landscape .dbku-aqi__advisory{grid-area:advisory;width:100%;max-width:none;margin:0;min-height:96px;padding:clamp(16px,1.4vw,26px) clamp(22px,2vw,38px);grid-template-columns:auto 1fr}
.dbku-aqi--landscape .dbku-aqi__mask{width:clamp(58px,4vw,82px);height:clamp(58px,4vw,82px);font-size:clamp(14px,1vw,20px)}
.dbku-aqi--landscape .dbku-aqi__advisory-title{font-size:clamp(24px,1.8vw,38px);margin-bottom:4px}.dbku-aqi--landscape .dbku-aqi__advisory-message{font-size:clamp(18px,1.35vw,28px);line-height:1.35}
.dbku-aqi--landscape .dbku-aqi__footer{grid-area:footer;width:100%;margin:0;font-size:clamp(13px,.9vw,18px);align-items:center}
.dbku-aqi--landscape .dbku-aqi__logo{width:var(--dbku-logo-signage-width,140px);max-height:none}.dbku-aqi--landscape .dbku-aqi__station{font-size:clamp(26px,2vw,42px)}.dbku-aqi--landscape .dbku-aqi__source{font-size:clamp(13px,.9vw,18px)}.dbku-aqi--landscape .dbku-aqi__datetime{font-size:clamp(16px,1.1vw,22px)}.dbku-aqi--landscape .dbku-aqi__datetime strong{font-size:clamp(34px,3vw,58px)}
@media (min-width:1600px) and (min-aspect-ratio:16/10){.dbku-aqi--landscape{padding:34px 52px 26px;column-gap:70px}.dbku-aqi--landscape .dbku-aqi__gauge{width:min(55vw,1040px)}.dbku-aqi--landscape .dbku-aqi__svg-value{font-size:132px}.dbku-aqi--landscape .dbku-aqi__svg-status{font-size:36px}}
@media (min-aspect-ratio:2/1){.dbku-aqi--landscape{grid-template-columns:minmax(0,1.2fr) minmax(460px,.8fr);padding-left:3vw;padding-right:3vw}.dbku-aqi--landscape .dbku-aqi__gauge{width:min(48vw,1050px)}}



/* =========================================================
   v1.5.1 Force dedicated landscape LED layout
   /aqi-display-landscape/ now keeps the LED composition even
   when previewed from a phone. Portrait signage is unchanged.
   ========================================================= */

.dbku-aqi-kiosk-wrap--landscape {
  width: 100vw;
  min-height: 100vh;
  overflow-x: hidden;
}

.dbku-aqi-kiosk--landscape,
.dbku-aqi-kiosk--landscape html {
  overflow-x: hidden;
}

/* 16:9 spacing polish */
.dbku-aqi--landscape {
  column-gap: clamp(22px, 2.4vw, 56px);
  row-gap: clamp(10px, 1.1vh, 18px);
  padding: clamp(20px, 1.8vw, 36px);
}

.dbku-aqi--landscape .dbku-aqi__gauge-wrap {
  padding-top: clamp(42px, 4.5vh, 64px);
}

.dbku-aqi--landscape .dbku-aqi__gauge {
  width: min(57vw, 980px);
}

.dbku-aqi--landscape .dbku-aqi__metrics {
  margin-bottom: clamp(104px, 13vh, 154px);
}

.dbku-aqi--landscape .dbku-aqi__weather {
  margin-bottom: clamp(2px, .6vh, 10px);
}

.dbku-aqi--landscape .dbku-aqi__advisory {
  min-height: 88px;
  padding: clamp(14px, 1.2vw, 22px) clamp(20px, 1.8vw, 34px);
}

.dbku-aqi--landscape .dbku-aqi__footer {
  padding-top: 2px;
}

/* Full HD / LED emphasis */
@media (min-width: 1366px) and (min-aspect-ratio: 16/10) {
  .dbku-aqi--landscape {
    grid-template-columns: minmax(0, 1.52fr) minmax(430px, .88fr);
  }
  .dbku-aqi--landscape .dbku-aqi__gauge {
    width: min(56vw, 1000px);
  }
}

/* Force the landscape LED composition even on small portrait preview screens */
@media (max-width: 899px), (orientation: portrait) {
  .dbku-aqi-kiosk-wrap--landscape {
    overflow-x: auto;
    overflow-y: auto;
  }

  .dbku-aqi--landscape {
    min-width: 980px;
    min-height: 560px;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, .9fr);
    grid-template-rows: auto auto 1fr auto auto;
    grid-template-areas:
      "header header"
      "divider divider"
      "gauge data"
      "advisory advisory"
      "footer footer";
    column-gap: 20px;
    row-gap: 10px;
    padding: 18px 20px;
  }

  .dbku-aqi--landscape .dbku-aqi__title {
    position: absolute;
    left: 22px;
    top: 96px;
    font-size: 20px;
  }

  .dbku-aqi--landscape .dbku-aqi__header {
    align-items: flex-start;
  }

  .dbku-aqi--landscape .dbku-aqi__brand {
    gap: 10px;
  }

  .dbku-aqi--landscape .dbku-aqi__logo {
    width: 58px;
    max-height: 58px;
  }

  .dbku-aqi--landscape .dbku-aqi__station {
    font-size: 18px;
  }

  .dbku-aqi--landscape .dbku-aqi__source {
    font-size: 11px;
  }

  .dbku-aqi--landscape .dbku-aqi__datetime {
    font-size: 12px;
  }

  .dbku-aqi--landscape .dbku-aqi__datetime strong {
    font-size: 26px;
  }

  .dbku-aqi--landscape .dbku-aqi__gauge-wrap {
    padding-top: 30px;
  }

  .dbku-aqi--landscape .dbku-aqi__gauge {
    width: min(58vw, 520px);
    min-width: 480px;
  }

  .dbku-aqi--landscape .dbku-aqi__svg-value {
    font-size: 72px;
  }

  .dbku-aqi--landscape .dbku-aqi__svg-status {
    font-size: 22px;
  }

  .dbku-aqi--landscape .dbku-aqi__svg-label {
    font-size: 15px;
  }

  .dbku-aqi--landscape .dbku-aqi__metrics {
    margin-bottom: 92px;
  }

  .dbku-aqi--landscape .dbku-aqi__metric,
  .dbku-aqi--landscape .dbku-aqi__weather > div {
    padding: 14px;
  }

  .dbku-aqi--landscape .dbku-aqi__metric span {
    font-size: 18px;
  }

  .dbku-aqi--landscape .dbku-aqi__metric strong {
    font-size: 42px;
  }

  .dbku-aqi--landscape .dbku-aqi__metric small,
  .dbku-aqi--landscape .dbku-aqi__weather > div > span:not(.dbku-aqi__weather-icon) {
    font-size: 14px;
  }

  .dbku-aqi--landscape .dbku-aqi__weather strong {
    font-size: 28px;
  }

  .dbku-aqi--landscape .dbku-aqi__weather-icon {
    font-size: 28px;
  }

  .dbku-aqi--landscape .dbku-aqi__advisory {
    min-height: 72px;
    padding: 12px 16px;
  }

  .dbku-aqi--landscape .dbku-aqi__mask {
    width: 48px;
    height: 48px;
    font-size: 12px;
  }

  .dbku-aqi--landscape .dbku-aqi__advisory-title {
    font-size: 18px;
  }

  .dbku-aqi--landscape .dbku-aqi__advisory-message {
    font-size: 14px;
    line-height: 1.3;
  }

  .dbku-aqi--landscape .dbku-aqi__footer {
    font-size: 11px;
    flex-wrap: wrap;
    gap: 10px;
  }

  .dbku-aqi--landscape .dbku-aqi__source-line {
    margin-left: auto;
  }
}

/* v1.5.2: gauge scale extended from 400 to 500. */