/* ===== foundation ===== */
/* npm:animate.css/animate.css */
@charset "UTF-8";/*!
 * animate.css - https://animate.style/
 * Version - 4.1.1
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2020 Animate.css
 */
:root {
  --animate-duration: 1s;
  --animate-delay: 1s;
  --animate-repeat: 1;
}
.animate__animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-duration: var(--animate-duration);
  animation-duration: var(--animate-duration);
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animate__animated.animate__infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.animate__animated.animate__repeat-1 {
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-iteration-count: var(--animate-repeat);
  animation-iteration-count: var(--animate-repeat);
}
.animate__animated.animate__repeat-2 {
  -webkit-animation-iteration-count: calc(1 * 2);
  animation-iteration-count: calc(1 * 2);
  -webkit-animation-iteration-count: calc(var(--animate-repeat) * 2);
  animation-iteration-count: calc(var(--animate-repeat) * 2);
}
.animate__animated.animate__repeat-3 {
  -webkit-animation-iteration-count: calc(1 * 3);
  animation-iteration-count: calc(1 * 3);
  -webkit-animation-iteration-count: calc(var(--animate-repeat) * 3);
  animation-iteration-count: calc(var(--animate-repeat) * 3);
}
.animate__animated.animate__delay-1s {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
  -webkit-animation-delay: var(--animate-delay);
  animation-delay: var(--animate-delay);
}
.animate__animated.animate__delay-2s {
  -webkit-animation-delay: calc(1s * 2);
  animation-delay: calc(1s * 2);
  -webkit-animation-delay: calc(var(--animate-delay) * 2);
  animation-delay: calc(var(--animate-delay) * 2);
}
.animate__animated.animate__delay-3s {
  -webkit-animation-delay: calc(1s * 3);
  animation-delay: calc(1s * 3);
  -webkit-animation-delay: calc(var(--animate-delay) * 3);
  animation-delay: calc(var(--animate-delay) * 3);
}
.animate__animated.animate__delay-4s {
  -webkit-animation-delay: calc(1s * 4);
  animation-delay: calc(1s * 4);
  -webkit-animation-delay: calc(var(--animate-delay) * 4);
  animation-delay: calc(var(--animate-delay) * 4);
}
.animate__animated.animate__delay-5s {
  -webkit-animation-delay: calc(1s * 5);
  animation-delay: calc(1s * 5);
  -webkit-animation-delay: calc(var(--animate-delay) * 5);
  animation-delay: calc(var(--animate-delay) * 5);
}
.animate__animated.animate__faster {
  -webkit-animation-duration: calc(1s / 2);
  animation-duration: calc(1s / 2);
  -webkit-animation-duration: calc(var(--animate-duration) / 2);
  animation-duration: calc(var(--animate-duration) / 2);
}
.animate__animated.animate__fast {
  -webkit-animation-duration: calc(1s * 0.8);
  animation-duration: calc(1s * 0.8);
  -webkit-animation-duration: calc(var(--animate-duration) * 0.8);
  animation-duration: calc(var(--animate-duration) * 0.8);
}
.animate__animated.animate__slow {
  -webkit-animation-duration: calc(1s * 2);
  animation-duration: calc(1s * 2);
  -webkit-animation-duration: calc(var(--animate-duration) * 2);
  animation-duration: calc(var(--animate-duration) * 2);
}
.animate__animated.animate__slower {
  -webkit-animation-duration: calc(1s * 3);
  animation-duration: calc(1s * 3);
  -webkit-animation-duration: calc(var(--animate-duration) * 3);
  animation-duration: calc(var(--animate-duration) * 3);
}
@media print, (prefers-reduced-motion: reduce) {
  .animate__animated {
    -webkit-animation-duration: 1ms !important;
    animation-duration: 1ms !important;
    -webkit-transition-duration: 1ms !important;
    transition-duration: 1ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;
  }

  .animate__animated[class*='Out'] {
    opacity: 0;
  }
}
/* Attention seekers  */
@-webkit-keyframes bounce {
  from,
  20%,
  53%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
    transform: translate3d(0, -30px, 0) scaleY(1.1);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
    transform: translate3d(0, -15px, 0) scaleY(1.05);
  }

  80% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0) scaleY(0.95);
    transform: translate3d(0, 0, 0) scaleY(0.95);
  }

  90% {
    -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
    transform: translate3d(0, -4px, 0) scaleY(1.02);
  }
}
@keyframes bounce {
  from,
  20%,
  53%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
    transform: translate3d(0, -30px, 0) scaleY(1.1);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
    transform: translate3d(0, -15px, 0) scaleY(1.05);
  }

  80% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0) scaleY(0.95);
    transform: translate3d(0, 0, 0) scaleY(0.95);
  }

  90% {
    -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
    transform: translate3d(0, -4px, 0) scaleY(1.02);
  }
}
.animate__bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}
@-webkit-keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}
@keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}
.animate__flash {
  -webkit-animation-name: flash;
  animation-name: flash;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.animate__pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}
@-webkit-keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.animate__rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
}
@-webkit-keyframes shakeX {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}
@keyframes shakeX {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}
.animate__shakeX {
  -webkit-animation-name: shakeX;
  animation-name: shakeX;
}
@-webkit-keyframes shakeY {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }
}
@keyframes shakeY {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }
}
.animate__shakeY {
  -webkit-animation-name: shakeY;
  animation-name: shakeY;
}
@-webkit-keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }

  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }

  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }

  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }

  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }

  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }

  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }

  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }

  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
.animate__headShake {
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-name: headShake;
  animation-name: headShake;
}
@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}
@keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}
.animate__swing {
  -webkit-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing;
}
@-webkit-keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.animate__tada {
  -webkit-animation-name: tada;
  animation-name: tada;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes wobble {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes wobble {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble;
}
@-webkit-keyframes jello {
  from,
  11.1%,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}
@keyframes jello {
  from,
  11.1%,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}
.animate__jello {
  -webkit-animation-name: jello;
  animation-name: jello;
  -webkit-transform-origin: center;
  transform-origin: center;
}
@-webkit-keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.animate__heartBeat {
  -webkit-animation-name: heartBeat;
  animation-name: heartBeat;
  -webkit-animation-duration: calc(1s * 1.3);
  animation-duration: calc(1s * 1.3);
  -webkit-animation-duration: calc(var(--animate-duration) * 1.3);
  animation-duration: calc(var(--animate-duration) * 1.3);
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}
/* Back entrances */
@-webkit-keyframes backInDown {
  0% {
    -webkit-transform: translateY(-1200px) scale(0.7);
    transform: translateY(-1200px) scale(0.7);
    opacity: 0.7;
  }

  80% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes backInDown {
  0% {
    -webkit-transform: translateY(-1200px) scale(0.7);
    transform: translateY(-1200px) scale(0.7);
    opacity: 0.7;
  }

  80% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
.animate__backInDown {
  -webkit-animation-name: backInDown;
  animation-name: backInDown;
}
@-webkit-keyframes backInLeft {
  0% {
    -webkit-transform: translateX(-2000px) scale(0.7);
    transform: translateX(-2000px) scale(0.7);
    opacity: 0.7;
  }

  80% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes backInLeft {
  0% {
    -webkit-transform: translateX(-2000px) scale(0.7);
    transform: translateX(-2000px) scale(0.7);
    opacity: 0.7;
  }

  80% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
.animate__backInLeft {
  -webkit-animation-name: backInLeft;
  animation-name: backInLeft;
}
@-webkit-keyframes backInRight {
  0% {
    -webkit-transform: translateX(2000px) scale(0.7);
    transform: translateX(2000px) scale(0.7);
    opacity: 0.7;
  }

  80% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes backInRight {
  0% {
    -webkit-transform: translateX(2000px) scale(0.7);
    transform: translateX(2000px) scale(0.7);
    opacity: 0.7;
  }

  80% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
.animate__backInRight {
  -webkit-animation-name: backInRight;
  animation-name: backInRight;
}
@-webkit-keyframes backInUp {
  0% {
    -webkit-transform: translateY(1200px) scale(0.7);
    transform: translateY(1200px) scale(0.7);
    opacity: 0.7;
  }

  80% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes backInUp {
  0% {
    -webkit-transform: translateY(1200px) scale(0.7);
    transform: translateY(1200px) scale(0.7);
    opacity: 0.7;
  }

  80% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
.animate__backInUp {
  -webkit-animation-name: backInUp;
  animation-name: backInUp;
}
/* Back exits */
@-webkit-keyframes backOutDown {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  20% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: translateY(700px) scale(0.7);
    transform: translateY(700px) scale(0.7);
    opacity: 0.7;
  }
}
@keyframes backOutDown {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  20% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: translateY(700px) scale(0.7);
    transform: translateY(700px) scale(0.7);
    opacity: 0.7;
  }
}
.animate__backOutDown {
  -webkit-animation-name: backOutDown;
  animation-name: backOutDown;
}
@-webkit-keyframes backOutLeft {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  20% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: translateX(-2000px) scale(0.7);
    transform: translateX(-2000px) scale(0.7);
    opacity: 0.7;
  }
}
@keyframes backOutLeft {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  20% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: translateX(-2000px) scale(0.7);
    transform: translateX(-2000px) scale(0.7);
    opacity: 0.7;
  }
}
.animate__backOutLeft {
  -webkit-animation-name: backOutLeft;
  animation-name: backOutLeft;
}
@-webkit-keyframes backOutRight {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  20% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: translateX(2000px) scale(0.7);
    transform: translateX(2000px) scale(0.7);
    opacity: 0.7;
  }
}
@keyframes backOutRight {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  20% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: translateX(2000px) scale(0.7);
    transform: translateX(2000px) scale(0.7);
    opacity: 0.7;
  }
}
.animate__backOutRight {
  -webkit-animation-name: backOutRight;
  animation-name: backOutRight;
}
@-webkit-keyframes backOutUp {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  20% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: translateY(-700px) scale(0.7);
    transform: translateY(-700px) scale(0.7);
    opacity: 0.7;
  }
}
@keyframes backOutUp {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  20% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: translateY(-700px) scale(0.7);
    transform: translateY(-700px) scale(0.7);
    opacity: 0.7;
  }
}
.animate__backOutUp {
  -webkit-animation-name: backOutUp;
  animation-name: backOutUp;
}
/* Bouncing entrances  */
@-webkit-keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.animate__bounceIn {
  -webkit-animation-duration: calc(1s * 0.75);
  animation-duration: calc(1s * 0.75);
  -webkit-animation-duration: calc(var(--animate-duration) * 0.75);
  animation-duration: calc(var(--animate-duration) * 0.75);
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}
@-webkit-keyframes bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0) scaleY(3);
    transform: translate3d(0, -3000px, 0) scaleY(3);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0) scaleY(0.9);
    transform: translate3d(0, 25px, 0) scaleY(0.9);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0) scaleY(0.95);
    transform: translate3d(0, -10px, 0) scaleY(0.95);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0) scaleY(0.985);
    transform: translate3d(0, 5px, 0) scaleY(0.985);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0) scaleY(3);
    transform: translate3d(0, -3000px, 0) scaleY(3);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0) scaleY(0.9);
    transform: translate3d(0, 25px, 0) scaleY(0.9);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0) scaleY(0.95);
    transform: translate3d(0, -10px, 0) scaleY(0.95);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0) scaleY(0.985);
    transform: translate3d(0, 5px, 0) scaleY(0.985);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}
@-webkit-keyframes bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0) scaleX(3);
    transform: translate3d(-3000px, 0, 0) scaleX(3);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0) scaleX(1);
    transform: translate3d(25px, 0, 0) scaleX(1);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0) scaleX(0.98);
    transform: translate3d(-10px, 0, 0) scaleX(0.98);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0) scaleX(0.995);
    transform: translate3d(5px, 0, 0) scaleX(0.995);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0) scaleX(3);
    transform: translate3d(-3000px, 0, 0) scaleX(3);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0) scaleX(1);
    transform: translate3d(25px, 0, 0) scaleX(1);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0) scaleX(0.98);
    transform: translate3d(-10px, 0, 0) scaleX(0.98);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0) scaleX(0.995);
    transform: translate3d(5px, 0, 0) scaleX(0.995);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}
@-webkit-keyframes bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0) scaleX(3);
    transform: translate3d(3000px, 0, 0) scaleX(3);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0) scaleX(1);
    transform: translate3d(-25px, 0, 0) scaleX(1);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0) scaleX(0.98);
    transform: translate3d(10px, 0, 0) scaleX(0.98);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995);
    transform: translate3d(-5px, 0, 0) scaleX(0.995);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0) scaleX(3);
    transform: translate3d(3000px, 0, 0) scaleX(3);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0) scaleX(1);
    transform: translate3d(-25px, 0, 0) scaleX(1);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0) scaleX(0.98);
    transform: translate3d(10px, 0, 0) scaleX(0.98);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995);
    transform: translate3d(-5px, 0, 0) scaleX(0.995);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
}
@-webkit-keyframes bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0) scaleY(5);
    transform: translate3d(0, 3000px, 0) scaleY(5);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
    transform: translate3d(0, -20px, 0) scaleY(0.9);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0) scaleY(0.95);
    transform: translate3d(0, 10px, 0) scaleY(0.95);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0) scaleY(0.985);
    transform: translate3d(0, -5px, 0) scaleY(0.985);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0) scaleY(5);
    transform: translate3d(0, 3000px, 0) scaleY(5);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
    transform: translate3d(0, -20px, 0) scaleY(0.9);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0) scaleY(0.95);
    transform: translate3d(0, 10px, 0) scaleY(0.95);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0) scaleY(0.985);
    transform: translate3d(0, -5px, 0) scaleY(0.985);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}
/* Bouncing exits  */
@-webkit-keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  50%,
  55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}
@keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  50%,
  55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}
.animate__bounceOut {
  -webkit-animation-duration: calc(1s * 0.75);
  animation-duration: calc(1s * 0.75);
  -webkit-animation-duration: calc(var(--animate-duration) * 0.75);
  animation-duration: calc(var(--animate-duration) * 0.75);
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut;
}
@-webkit-keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0) scaleY(0.985);
    transform: translate3d(0, 10px, 0) scaleY(0.985);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
    transform: translate3d(0, -20px, 0) scaleY(0.9);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0) scaleY(3);
    transform: translate3d(0, 2000px, 0) scaleY(3);
  }
}
@keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0) scaleY(0.985);
    transform: translate3d(0, 10px, 0) scaleY(0.985);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
    transform: translate3d(0, -20px, 0) scaleY(0.9);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0) scaleY(3);
    transform: translate3d(0, 2000px, 0) scaleY(3);
  }
}
.animate__bounceOutDown {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown;
}
@-webkit-keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0) scaleX(0.9);
    transform: translate3d(20px, 0, 0) scaleX(0.9);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0) scaleX(2);
    transform: translate3d(-2000px, 0, 0) scaleX(2);
  }
}
@keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0) scaleX(0.9);
    transform: translate3d(20px, 0, 0) scaleX(0.9);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0) scaleX(2);
    transform: translate3d(-2000px, 0, 0) scaleX(2);
  }
}
.animate__bounceOutLeft {
  -webkit-animation-name: bounceOutLeft;
  animation-name: bounceOutLeft;
}
@-webkit-keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0) scaleX(0.9);
    transform: translate3d(-20px, 0, 0) scaleX(0.9);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0) scaleX(2);
    transform: translate3d(2000px, 0, 0) scaleX(2);
  }
}
@keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0) scaleX(0.9);
    transform: translate3d(-20px, 0, 0) scaleX(0.9);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0) scaleX(2);
    transform: translate3d(2000px, 0, 0) scaleX(2);
  }
}
.animate__bounceOutRight {
  -webkit-animation-name: bounceOutRight;
  animation-name: bounceOutRight;
}
@-webkit-keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0) scaleY(0.985);
    transform: translate3d(0, -10px, 0) scaleY(0.985);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0) scaleY(0.9);
    transform: translate3d(0, 20px, 0) scaleY(0.9);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0) scaleY(3);
    transform: translate3d(0, -2000px, 0) scaleY(3);
  }
}
@keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0) scaleY(0.985);
    transform: translate3d(0, -10px, 0) scaleY(0.985);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0) scaleY(0.9);
    transform: translate3d(0, 20px, 0) scaleY(0.9);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0) scaleY(3);
    transform: translate3d(0, -2000px, 0) scaleY(3);
  }
}
.animate__bounceOutUp {
  -webkit-animation-name: bounceOutUp;
  animation-name: bounceOutUp;
}
/* Fading entrances  */
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
.animate__fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}
@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}
@-webkit-keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
}
@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}
@-webkit-keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig;
}
@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}
@-webkit-keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig;
}
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}
@-webkit-keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
}
@-webkit-keyframes fadeInTopLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, -100%, 0);
    transform: translate3d(-100%, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInTopLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, -100%, 0);
    transform: translate3d(-100%, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInTopLeft {
  -webkit-animation-name: fadeInTopLeft;
  animation-name: fadeInTopLeft;
}
@-webkit-keyframes fadeInTopRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, -100%, 0);
    transform: translate3d(100%, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInTopRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, -100%, 0);
    transform: translate3d(100%, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInTopRight {
  -webkit-animation-name: fadeInTopRight;
  animation-name: fadeInTopRight;
}
@-webkit-keyframes fadeInBottomLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 100%, 0);
    transform: translate3d(-100%, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInBottomLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 100%, 0);
    transform: translate3d(-100%, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInBottomLeft {
  -webkit-animation-name: fadeInBottomLeft;
  animation-name: fadeInBottomLeft;
}
@-webkit-keyframes fadeInBottomRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 100%, 0);
    transform: translate3d(100%, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInBottomRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 100%, 0);
    transform: translate3d(100%, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInBottomRight {
  -webkit-animation-name: fadeInBottomRight;
  animation-name: fadeInBottomRight;
}
/* Fading exits */
@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}
.animate__fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}
@-webkit-keyframes fadeOutDown {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
@keyframes fadeOutDown {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
.animate__fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}
@-webkit-keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}
@keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}
.animate__fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
  animation-name: fadeOutDownBig;
}
@-webkit-keyframes fadeOutLeft {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes fadeOutLeft {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
.animate__fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
}
@-webkit-keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}
@keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}
.animate__fadeOutLeftBig {
  -webkit-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig;
}
@-webkit-keyframes fadeOutRight {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
@keyframes fadeOutRight {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
.animate__fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight;
}
@-webkit-keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}
@keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}
.animate__fadeOutRightBig {
  -webkit-animation-name: fadeOutRightBig;
  animation-name: fadeOutRightBig;
}
@-webkit-keyframes fadeOutUp {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
@keyframes fadeOutUp {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
.animate__fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}
@-webkit-keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}
@keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}
.animate__fadeOutUpBig {
  -webkit-animation-name: fadeOutUpBig;
  animation-name: fadeOutUpBig;
}
@-webkit-keyframes fadeOutTopLeft {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, -100%, 0);
    transform: translate3d(-100%, -100%, 0);
  }
}
@keyframes fadeOutTopLeft {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, -100%, 0);
    transform: translate3d(-100%, -100%, 0);
  }
}
.animate__fadeOutTopLeft {
  -webkit-animation-name: fadeOutTopLeft;
  animation-name: fadeOutTopLeft;
}
@-webkit-keyframes fadeOutTopRight {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, -100%, 0);
    transform: translate3d(100%, -100%, 0);
  }
}
@keyframes fadeOutTopRight {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, -100%, 0);
    transform: translate3d(100%, -100%, 0);
  }
}
.animate__fadeOutTopRight {
  -webkit-animation-name: fadeOutTopRight;
  animation-name: fadeOutTopRight;
}
@-webkit-keyframes fadeOutBottomRight {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 100%, 0);
    transform: translate3d(100%, 100%, 0);
  }
}
@keyframes fadeOutBottomRight {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 100%, 0);
    transform: translate3d(100%, 100%, 0);
  }
}
.animate__fadeOutBottomRight {
  -webkit-animation-name: fadeOutBottomRight;
  animation-name: fadeOutBottomRight;
}
@-webkit-keyframes fadeOutBottomLeft {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 100%, 0);
    transform: translate3d(-100%, 100%, 0);
  }
}
@keyframes fadeOutBottomLeft {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 100%, 0);
    transform: translate3d(-100%, 100%, 0);
  }
}
.animate__fadeOutBottomLeft {
  -webkit-animation-name: fadeOutBottomLeft;
  animation-name: fadeOutBottomLeft;
}
/* Flippers */
@-webkit-keyframes flip {
  from {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  to {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}
@keyframes flip {
  from {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  to {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}
.animate__animated.animate__flip {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip;
}
@-webkit-keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
@keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
.animate__flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}
@-webkit-keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
@keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
.animate__flipInY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
}
@-webkit-keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}
@keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}
.animate__flipOutX {
  -webkit-animation-duration: calc(1s * 0.75);
  animation-duration: calc(1s * 0.75);
  -webkit-animation-duration: calc(var(--animate-duration) * 0.75);
  animation-duration: calc(var(--animate-duration) * 0.75);
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}
@-webkit-keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}
@keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}
.animate__flipOutY {
  -webkit-animation-duration: calc(1s * 0.75);
  animation-duration: calc(1s * 0.75);
  -webkit-animation-duration: calc(var(--animate-duration) * 0.75);
  animation-duration: calc(var(--animate-duration) * 0.75);
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY;
}
/* Lightspeed */
@-webkit-keyframes lightSpeedInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes lightSpeedInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__lightSpeedInRight {
  -webkit-animation-name: lightSpeedInRight;
  animation-name: lightSpeedInRight;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}
@-webkit-keyframes lightSpeedInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0) skewX(30deg);
    transform: translate3d(-100%, 0, 0) skewX(30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(-20deg);
    transform: skewX(-20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(5deg);
    transform: skewX(5deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes lightSpeedInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0) skewX(30deg);
    transform: translate3d(-100%, 0, 0) skewX(30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(-20deg);
    transform: skewX(-20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(5deg);
    transform: skewX(5deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__lightSpeedInLeft {
  -webkit-animation-name: lightSpeedInLeft;
  animation-name: lightSpeedInLeft;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}
@-webkit-keyframes lightSpeedOutRight {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}
@keyframes lightSpeedOutRight {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}
.animate__lightSpeedOutRight {
  -webkit-animation-name: lightSpeedOutRight;
  animation-name: lightSpeedOutRight;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}
@-webkit-keyframes lightSpeedOutLeft {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg);
    transform: translate3d(-100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }
}
@keyframes lightSpeedOutLeft {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg);
    transform: translate3d(-100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }
}
.animate__lightSpeedOutLeft {
  -webkit-animation-name: lightSpeedOutLeft;
  animation-name: lightSpeedOutLeft;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}
/* Rotating entrances */
@-webkit-keyframes rotateIn {
  from {
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes rotateIn {
  from {
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.animate__rotateIn {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn;
  -webkit-transform-origin: center;
  transform-origin: center;
}
@-webkit-keyframes rotateInDownLeft {
  from {
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes rotateInDownLeft {
  from {
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.animate__rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
}
@-webkit-keyframes rotateInDownRight {
  from {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes rotateInDownRight {
  from {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.animate__rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight;
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
}
@-webkit-keyframes rotateInUpLeft {
  from {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes rotateInUpLeft {
  from {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.animate__rotateInUpLeft {
  -webkit-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
}
@-webkit-keyframes rotateInUpRight {
  from {
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes rotateInUpRight {
  from {
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.animate__rotateInUpRight {
  -webkit-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight;
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
}
/* Rotating exits */
@-webkit-keyframes rotateOut {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}
@keyframes rotateOut {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}
.animate__rotateOut {
  -webkit-animation-name: rotateOut;
  animation-name: rotateOut;
  -webkit-transform-origin: center;
  transform-origin: center;
}
@-webkit-keyframes rotateOutDownLeft {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}
@keyframes rotateOutDownLeft {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}
.animate__rotateOutDownLeft {
  -webkit-animation-name: rotateOutDownLeft;
  animation-name: rotateOutDownLeft;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
}
@-webkit-keyframes rotateOutDownRight {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}
@keyframes rotateOutDownRight {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}
.animate__rotateOutDownRight {
  -webkit-animation-name: rotateOutDownRight;
  animation-name: rotateOutDownRight;
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
}
@-webkit-keyframes rotateOutUpLeft {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}
@keyframes rotateOutUpLeft {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}
.animate__rotateOutUpLeft {
  -webkit-animation-name: rotateOutUpLeft;
  animation-name: rotateOutUpLeft;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
}
@-webkit-keyframes rotateOutUpRight {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}
@keyframes rotateOutUpRight {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}
.animate__rotateOutUpRight {
  -webkit-animation-name: rotateOutUpRight;
  animation-name: rotateOutUpRight;
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
}
/* Specials */
@-webkit-keyframes hinge {
  0% {
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%,
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40%,
  80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}
@keyframes hinge {
  0% {
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%,
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40%,
  80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}
.animate__hinge {
  -webkit-animation-duration: calc(1s * 2);
  animation-duration: calc(1s * 2);
  -webkit-animation-duration: calc(var(--animate-duration) * 2);
  animation-duration: calc(var(--animate-duration) * 2);
  -webkit-animation-name: hinge;
  animation-name: hinge;
  -webkit-transform-origin: top left;
  transform-origin: top left;
}
@-webkit-keyframes jackInTheBox {
  from {
    opacity: 0;
    -webkit-transform: scale(0.1) rotate(30deg);
    transform: scale(0.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }

  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes jackInTheBox {
  from {
    opacity: 0;
    -webkit-transform: scale(0.1) rotate(30deg);
    transform: scale(0.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }

  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.animate__jackInTheBox {
  -webkit-animation-name: jackInTheBox;
  animation-name: jackInTheBox;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}
@keyframes rollOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}
.animate__rollOut {
  -webkit-animation-name: rollOut;
  animation-name: rollOut;
}
/* Zooming entrances */
@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}
@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}
.animate__zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}
@-webkit-keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.animate__zoomInDown {
  -webkit-animation-name: zoomInDown;
  animation-name: zoomInDown;
}
@-webkit-keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.animate__zoomInLeft {
  -webkit-animation-name: zoomInLeft;
  animation-name: zoomInLeft;
}
@-webkit-keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.animate__zoomInRight {
  -webkit-animation-name: zoomInRight;
  animation-name: zoomInRight;
}
@-webkit-keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.animate__zoomInUp {
  -webkit-animation-name: zoomInUp;
  animation-name: zoomInUp;
}
/* Zooming exits */
@-webkit-keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  to {
    opacity: 0;
  }
}
@keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  to {
    opacity: 0;
  }
}
.animate__zoomOut {
  -webkit-animation-name: zoomOut;
  animation-name: zoomOut;
}
@-webkit-keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.animate__zoomOutDown {
  -webkit-animation-name: zoomOutDown;
  animation-name: zoomOutDown;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}
@-webkit-keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
  }
}
@keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
  }
}
.animate__zoomOutLeft {
  -webkit-animation-name: zoomOutLeft;
  animation-name: zoomOutLeft;
  -webkit-transform-origin: left center;
  transform-origin: left center;
}
@-webkit-keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
  }
}
@keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
  }
}
.animate__zoomOutRight {
  -webkit-animation-name: zoomOutRight;
  animation-name: zoomOutRight;
  -webkit-transform-origin: right center;
  transform-origin: right center;
}
@-webkit-keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.animate__zoomOutUp {
  -webkit-animation-name: zoomOutUp;
  animation-name: zoomOutUp;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}
/* Sliding entrances */
@-webkit-keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}
@-webkit-keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}
@-webkit-keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}
@-webkit-keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
}
/* Sliding exits */
@-webkit-keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
@keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
.animate__slideOutDown {
  -webkit-animation-name: slideOutDown;
  animation-name: slideOutDown;
}
@-webkit-keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
.animate__slideOutLeft {
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft;
}
@-webkit-keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
@keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
.animate__slideOutRight {
  -webkit-animation-name: slideOutRight;
  animation-name: slideOutRight;
}
@-webkit-keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
@keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
.animate__slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp;
}


/* shared/ui/bootstrap.css */


.dropdown-toggle.hide-carret:after { content: none }

select {
    -webkit-appearance: menulist-button;
}

.table-dark {
    background-color: #212529 !important;
}

.progress-bg-dark {
    background-color: #2b2f34 !important;
}





/* table tr:last-child td:first-child {
    border-bottom-left-radius: 10px;
}

table tr:last-child td:last-child {
    border-bottom-right-radius: 10px;
}

table tr:last-child th:first-child {
    border-top-left-radius: 10px;
}

table tr:last-child th:last-child {
    border-top-right-radius: 10px;
} */

table td {
    padding-left: 3px !important;
    padding-right: 3px !important;
}

table thead tr {
    cursor: default;
    height: 50px;
    text-align: center;
    vertical-align: middle;
    line-height: 39px;
}

table tbody tr {
    cursor: default;
    text-align: center;
}



/* Bootstrap Accordion */

.card-header {
    padding: 0 !important;
}

.card-header:has(> button[ aria-expanded="true" ]) {
    background-color: #002F67 !important;
}

.card-header:has(> button[ aria-expanded="false" ]) {
    background-color: #212529 !important;
    border: 1px solid #002F67 !important;
}

.card-header .btn {
    color: #FFF !important;
    cursor: pointer !important;
    outline: none !important;
    padding: 15px !important;
}

.card-header .btn:hover {
    background-color: #2195f35a;
    outline: none !important;
}





.btn.btn-info {
    background-color: #012f66 !important;
    border-color: #012f66 !important;
}

.btn.btn-warning{
    color: white;
}


.progress-bar {
    transition: width 0.1s ease-out !important;
}




/* .dropdown-menu {
    border-radius: 15px;
}

.dropdown-header {
    border-radius: 10px 10px 0 0;
} */



.accordion {
    text-align: center;
}
 
.accordion.width {
    display: flex;
    width: 100%;
    height: 160px;
}
 
.accordion.width .card {
    flex-direction: row;
    min-width: min-content;
}
 
.accordion.width .card .card-header {
    cursor: pointer;
    transform: rotate(180deg);
    writing-mode: vertical-rl;
    border: 2px solid black;
}
 
.card-body {
    width: 100%;
}
 
.collapsing.width {
    transition: width 0.5s ease;
    /* height: auto; */
    /* width: 10px; */
}

/* shared/ui/checkbox.css */





.tgl-flat:checked:not(:disabled)+.tgl-btn {
	border: 4px solid #2193F3 !important;
}

.tgl-flat:checked:not(:disabled)+.tgl-btn:after {
	background: #2193F3 !important;
}

.tgl-flat:not(:disabled)+.tgl-btn {
    border: 4px solid #b4bbc2 !important;
}

.tgl-flat:not(:disabled)+.tgl-btn:after {
	background: #b4bbc2 !important;
}

/* app/styles/colors.css */
/**************************************************************************************************
	@author         hommie.pl
	@contributors   Rafał Złotorzyński
	@module         hommie_colors
	@file           colors.css
**************************************************************************************************/

.text-main-color {
	color: #0054b8;
}

.bg-main-color {
	background-color: #002F67;
}

.bg-color {
	background-color: #212529;
}

.text-light {
	color: #ffffff;
}

.text-danger {
	color: #f53636;
}

.text-warning {
	color: #f96800;
}

.text-success {
	color: #00ff1a;
}

.text-disabled {
	color: rgb(104, 104, 104);
}


/* shared/ui/cursor.css */
/**************************************************************************************************
	@contributors   Rafał Złotorzyński
	@module         cursor
	@file           shared/ui/cursor.css
**************************************************************************************************/

/* Cursors type configuration */
.cursor-alias {cursor: alias;}
.cursor-all-scroll {cursor: all-scroll;}
.cursor-auto {cursor: auto;}
.cursor-cell {cursor: cell;}
.cursor-context-menu {cursor: context-menu;}
.cursor-col-resize {cursor: col-resize;}
.cursor-copy {cursor: copy;}
.cursor-crosshair {cursor: crosshair;}
.cursor-default {cursor: default;}
.cursor-e-resize {cursor: e-resize;}
.cursor-ew-resize {cursor: ew-resize;}
.cursor-grab {cursor: -webkit-grab; cursor: grab;}
.cursor-grabbing {cursor: -webkit-grabbing; cursor: grabbing;}
.cursor-help {cursor: help;}
.cursor-move {cursor: move;}
.cursor-n-resize {cursor: n-resize;}
.cursor-ne-resize {cursor: ne-resize;}
.cursor-nesw-resize {cursor: nesw-resize;}
.cursor-ns-resize {cursor: ns-resize;}
.cursor-nw-resize {cursor: nw-resize;}
.cursor-nwse-resize {cursor: nwse-resize;}
.cursor-no-drop {cursor: no-drop;}
.cursor-none {cursor: none;}
.cursor-not-allowed {cursor: not-allowed;}
.cursor-pointer {cursor: pointer;}
.cursor-progress {cursor: progress;}
.cursor-row-resize {cursor: row-resize;}
.cursor-s-resize {cursor: s-resize;}
.cursor-se-resize {cursor: se-resize;}
.cursor-sw-resize {cursor: sw-resize;}
.cursor-text {cursor: text;}
.cursor-w-resize {cursor: w-resize;}
.cursor-wait {cursor: wait;}
.cursor-zoom-in {cursor: zoom-in;}
.cursor-zoom-out {cursor: zoom-out;}

/* Animation on hover cursor elements */
.animation-hover:hover {
	cursor: pointer;
	animation: headShake;
	animation-duration: 0.5s;
	overflow: hidden;
}


/* shared/ui/forms.css */

input:disabled {
    background-color: #848484 !important;
    color: rgb(198, 198, 198) !important;
}

input[ type=color ] {
    padding: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    border: none;
    cursor: pointer;
}

input[ type=number ] {
    background-color: #33373B !important;
    color: #b4bbc2 !important;
    border: 1px solid #33373B !important;
}

.hidden-long-text {
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 100%;
    overflow: hidden;
}

select {
    /* A reset of styles, including removing the default dropdown arrow */
    /* appearance: none; */
    background-color: #33373B !important;
    cursor: pointer !important;
    color: #b4bbc2 !important;
    border-left: 0px !important;
    border-top: 0px !important;
    border-bottom: 0px !important;
    border-right: 0px solid #33373B !important;
    border-radius: 10px !important;
    text-align: center !important;
    text-align: -webkit-center !important;
    outline: none !important;
    --select-border: #777 !important;
    --select-focus: none !important;
    --select-arrow: var(--select-border) !important;
}


/* npm:reset-css/reset.css */
/* http://meyerweb.com/eric/tools/css/reset/
   v5.0.1 | 20191019
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
main, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section {
	display: block;
}
/* HTML5 hidden-attribute fix for newer browsers */
*[hidden] {
    display: none;
}
body {
	line-height: 1;
}
menu, ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


/* npm:normalize.css/normalize.css */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}


/* app/styles/scrollbars.css */
/**************************************************************************************************
	@author         hommie.pl
	@contributors   Rafał Złotorzyński
	@module         hommie_css
	@file           scrollbars.css
**************************************************************************************************/

/* Scrollbars settings */
::-webkit-scrollbar {
	width: 0px;
	background-color: transparent;
}

/* Scrollbars background */
::-webkit-scrollbar-thumb {
	/* background-color: #002F67;
	background-image: -webkit-linear-gradient(45deg,
			rgba(255, 255, 255, 0.2) 25%,
			transparent 25%,
			transparent 50%,
			rgba(255, 255, 255, 0.2) 50%,
			rgba(255, 255, 255, 0.2) 75%,
			transparent 75%,
			transparent); */

	background: #888;
	opacity: 0;
	border-radius: 10px;
}

/* Scrollbars track */
::-webkit-scrollbar-track {
	/* -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); */
	background-color: #363c42;
	/* background-color: #f5f5f5; */
}



/* width */
/* ::-webkit-scrollbar {
    width: 0px;
    background-color: transparent;
} */

/* Track */
/* ::-webkit-scrollbar-track {
    background-color: #363c42;
} */

/* Handle */
/* ::-webkit-scrollbar-thumb {
    background: #888;
    opacity: 0;
    border-radius: 10px;
} */

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #2193F3;
}

/* features/navigation/searching-form.css */
/**************************************************************************************************
	@author         hommie.pl
	@contributors   Rafał Złotorzyński
	@module         CSS
	@file           searching_form.css
**************************************************************************************************/

.searching-form {
    display: inline-block;
    height: 38px;
    padding: 4px 0px 0px 0px;
    cursor: pointer;
}

.searching-form input {
    width: 300px;
    padding-right: 23px;
    border: 1px solid #ccc;
    outline: none;
    border-radius: 12px;
    height: 29px;
    font-size: small;

    /* -webkit-transition: width .2s ease;
    -o-transition: width .2s ease;
    transition: width .2s ease */
    background-color: #212529 !important;
    color: #ccc;
}

@media (max-width: 600px) {
    .searching-form input {
        width: 30px;
        padding-right: 16px;
    }
}

.searching-form input.focus {
    width: calc(100% - 12px);
    width: -o-calc(100% - 12px);
    width: -webkit-calc(100% - 12px);
    width: -moz-calc(100% - 12px);
    position: absolute;
    left: 6px;
}

.searching-form .bi-geo-alt {
    width: 30px;
    height: 28px;
    position: absolute;
    padding: 7px;
    right: -1px;
    top: 5px;
    color: #ccc;
}

/* app/styles/document.css */
/**************************************************************************************************
	@author         hommie.pl
	@contributors   Rafał Złotorzyński
	@module         hommie_window
	@file           window.css
**************************************************************************************************/

/* Main config DOM */
html, body {
	font-family: var(--wl-font-sans, "Geist", "Segoe UI", Arial, sans-serif);
	min-height: 100%;
}

/*
	W aplikacji natywnej interfejs to rama wielkości ekranu - przewijają się tylko jej kontenery,
	nigdy sam dokument. overflow z body przechodzi na okno, ale overscroll-behavior działa
	wyłącznie na elemencie html (bez tego zostaje gumowe odbicie i łańcuchowanie przewijania).
*/
body.native-app {
	overflow: hidden;
}

html:has( > body.native-app ) {
	overscroll-behavior: none;
}


/* fonts/fonts.css */
/* Local variable fonts: Fontsource 5.3.0, SIL OFL 1.1. See docs/font-assets.md. */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/Geist/geist-cyrillic-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/Geist/geist-cyrillic-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/Geist/geist-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/Geist/geist-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: "Geist";
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/Geist/geist-cyrillic-ext-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

@font-face {
  font-family: "Geist";
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/Geist/geist-cyrillic-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

@font-face {
  font-family: "Geist";
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/Geist/geist-latin-ext-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: "Geist";
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/Geist/geist-latin-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/GeistMono/geist-mono-cyrillic-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/GeistMono/geist-mono-cyrillic-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/GeistMono/geist-mono-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/GeistMono/geist-mono-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: "Sora";
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(../fonts/Sora/sora-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: "Sora";
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(../fonts/Sora/sora-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
    --wl-font-sans: "Geist", "Segoe UI", Arial, sans-serif;
    --wl-font-display: "Sora", "Segoe UI", Arial, sans-serif;
    --wl-font-mono: "Geist Mono", Consolas, monospace;
}


/* shared/ui/icons.css */
/* Bootstrap Icons owns glyphs; these helpers preserve application loading and sizing states. */
.bi { display: inline-block; font-style: normal; line-height: 1; }
.icon-fw { width: 1.25em; text-align: center; }
.icon-2x { font-size: 2em; }
.icon-spin::before { animation: waterly-icon-spin 2s linear infinite; }
.icon-pulse::before { animation: waterly-icon-spin 1s steps(8) infinite; }
.icon-equals::before { transform: rotate(90deg); }
@keyframes waterly-icon-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .icon-spin::before, .icon-pulse::before { animation: none; }
}


/* ===== vendor ===== */
/* npm:bootstrap/dist/css/bootstrap.css */
@charset "UTF-8";
/*!
 * Bootstrap  v5.3.8 (https://getbootstrap.com/)
 * Copyright 2011-2025 The Bootstrap Authors
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */
:root,
[data-bs-theme=light] {
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-black: #000;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
  --bs-primary: #0d6efd;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --bs-primary-rgb: 13, 110, 253;
  --bs-secondary-rgb: 108, 117, 125;
  --bs-success-rgb: 25, 135, 84;
  --bs-info-rgb: 13, 202, 240;
  --bs-warning-rgb: 255, 193, 7;
  --bs-danger-rgb: 220, 53, 69;
  --bs-light-rgb: 248, 249, 250;
  --bs-dark-rgb: 33, 37, 41;
  --bs-primary-text-emphasis: #052c65;
  --bs-secondary-text-emphasis: #2b2f32;
  --bs-success-text-emphasis: #0a3622;
  --bs-info-text-emphasis: #055160;
  --bs-warning-text-emphasis: #664d03;
  --bs-danger-text-emphasis: #58151c;
  --bs-light-text-emphasis: #495057;
  --bs-dark-text-emphasis: #495057;
  --bs-primary-bg-subtle: #cfe2ff;
  --bs-secondary-bg-subtle: #e2e3e5;
  --bs-success-bg-subtle: #d1e7dd;
  --bs-info-bg-subtle: #cff4fc;
  --bs-warning-bg-subtle: #fff3cd;
  --bs-danger-bg-subtle: #f8d7da;
  --bs-light-bg-subtle: #fcfcfd;
  --bs-dark-bg-subtle: #ced4da;
  --bs-primary-border-subtle: #9ec5fe;
  --bs-secondary-border-subtle: #c4c8cb;
  --bs-success-border-subtle: #a3cfbb;
  --bs-info-border-subtle: #9eeaf9;
  --bs-warning-border-subtle: #ffe69c;
  --bs-danger-border-subtle: #f1aeb5;
  --bs-light-border-subtle: #e9ecef;
  --bs-dark-border-subtle: #adb5bd;
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 0, 0, 0;
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color: #212529;
  --bs-body-color-rgb: 33, 37, 41;
  --bs-body-bg: #fff;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-emphasis-color: #000;
  --bs-emphasis-color-rgb: 0, 0, 0;
  --bs-secondary-color: rgba(33, 37, 41, 0.75);
  --bs-secondary-color-rgb: 33, 37, 41;
  --bs-secondary-bg: #e9ecef;
  --bs-secondary-bg-rgb: 233, 236, 239;
  --bs-tertiary-color: rgba(33, 37, 41, 0.5);
  --bs-tertiary-color-rgb: 33, 37, 41;
  --bs-tertiary-bg: #f8f9fa;
  --bs-tertiary-bg-rgb: 248, 249, 250;
  --bs-heading-color: inherit;
  --bs-link-color: #0d6efd;
  --bs-link-color-rgb: 13, 110, 253;
  --bs-link-decoration: underline;
  --bs-link-hover-color: #0a58ca;
  --bs-link-hover-color-rgb: 10, 88, 202;
  --bs-code-color: #d63384;
  --bs-highlight-color: #212529;
  --bs-highlight-bg: #fff3cd;
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: #dee2e6;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-xxl: 2rem;
  --bs-border-radius-2xl: var(--bs-border-radius-xxl);
  --bs-border-radius-pill: 50rem;
  --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
  --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
  --bs-focus-ring-width: 0.25rem;
  --bs-focus-ring-opacity: 0.25;
  --bs-focus-ring-color: rgba(13, 110, 253, 0.25);
  --bs-form-valid-color: #198754;
  --bs-form-valid-border-color: #198754;
  --bs-form-invalid-color: #dc3545;
  --bs-form-invalid-border-color: #dc3545;
}

[data-bs-theme=dark] {
  color-scheme: dark;
  --bs-body-color: #dee2e6;
  --bs-body-color-rgb: 222, 226, 230;
  --bs-body-bg: #212529;
  --bs-body-bg-rgb: 33, 37, 41;
  --bs-emphasis-color: #fff;
  --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-secondary-color: rgba(222, 226, 230, 0.75);
  --bs-secondary-color-rgb: 222, 226, 230;
  --bs-secondary-bg: #343a40;
  --bs-secondary-bg-rgb: 52, 58, 64;
  --bs-tertiary-color: rgba(222, 226, 230, 0.5);
  --bs-tertiary-color-rgb: 222, 226, 230;
  --bs-tertiary-bg: #2b3035;
  --bs-tertiary-bg-rgb: 43, 48, 53;
  --bs-primary-text-emphasis: #6ea8fe;
  --bs-secondary-text-emphasis: #a7acb1;
  --bs-success-text-emphasis: #75b798;
  --bs-info-text-emphasis: #6edff6;
  --bs-warning-text-emphasis: #ffda6a;
  --bs-danger-text-emphasis: #ea868f;
  --bs-light-text-emphasis: #f8f9fa;
  --bs-dark-text-emphasis: #dee2e6;
  --bs-primary-bg-subtle: #031633;
  --bs-secondary-bg-subtle: #161719;
  --bs-success-bg-subtle: #051b11;
  --bs-info-bg-subtle: #032830;
  --bs-warning-bg-subtle: #332701;
  --bs-danger-bg-subtle: #2c0b0e;
  --bs-light-bg-subtle: #343a40;
  --bs-dark-bg-subtle: #1a1d20;
  --bs-primary-border-subtle: #084298;
  --bs-secondary-border-subtle: #41464b;
  --bs-success-border-subtle: #0f5132;
  --bs-info-border-subtle: #087990;
  --bs-warning-border-subtle: #997404;
  --bs-danger-border-subtle: #842029;
  --bs-light-border-subtle: #495057;
  --bs-dark-border-subtle: #343a40;
  --bs-heading-color: inherit;
  --bs-link-color: #6ea8fe;
  --bs-link-hover-color: #8bb9fe;
  --bs-link-color-rgb: 110, 168, 254;
  --bs-link-hover-color-rgb: 139, 185, 254;
  --bs-code-color: #e685b5;
  --bs-highlight-color: #dee2e6;
  --bs-highlight-bg: #664d03;
  --bs-border-color: #495057;
  --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
  --bs-form-valid-color: #75b798;
  --bs-form-valid-border-color: #75b798;
  --bs-form-invalid-color: #ea868f;
  --bs-form-invalid-border-color: #ea868f;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  font-family: var(--bs-body-font-family);
  font-size: var(--bs-body-font-size);
  font-weight: var(--bs-body-font-weight);
  line-height: var(--bs-body-line-height);
  color: var(--bs-body-color);
  text-align: var(--bs-body-text-align);
  background-color: var(--bs-body-bg);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

hr {
  margin: 1rem 0;
  color: inherit;
  border: 0;
  border-top: var(--bs-border-width) solid;
  opacity: 0.25;
}

h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--bs-heading-color);
}

h1, .h1 {
  font-size: calc(1.375rem + 1.5vw);
}
@media (min-width: 1200px) {
  h1, .h1 {
    font-size: 2.5rem;
  }
}

h2, .h2 {
  font-size: calc(1.325rem + 0.9vw);
}
@media (min-width: 1200px) {
  h2, .h2 {
    font-size: 2rem;
  }
}

h3, .h3 {
  font-size: calc(1.3rem + 0.6vw);
}
@media (min-width: 1200px) {
  h3, .h3 {
    font-size: 1.75rem;
  }
}

h4, .h4 {
  font-size: calc(1.275rem + 0.3vw);
}
@media (min-width: 1200px) {
  h4, .h4 {
    font-size: 1.5rem;
  }
}

h5, .h5 {
  font-size: 1.25rem;
}

h6, .h6 {
  font-size: 1rem;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

abbr[title] {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
  cursor: help;
  -webkit-text-decoration-skip-ink: none;
  text-decoration-skip-ink: none;
}

address {
  margin-bottom: 1rem;
  font-style: normal;
  line-height: inherit;
}

ol,
ul {
  padding-left: 2rem;
}

ol,
ul,
dl {
  margin-top: 0;
  margin-bottom: 1rem;
}

ol ol,
ul ul,
ol ul,
ul ol {
  margin-bottom: 0;
}

dt {
  font-weight: 700;
}

dd {
  margin-bottom: 0.5rem;
  margin-left: 0;
}

blockquote {
  margin: 0 0 1rem;
}

b,
strong {
  font-weight: bolder;
}

small, .small {
  font-size: 0.875em;
}

mark, .mark {
  padding: 0.1875em;
  color: var(--bs-highlight-color);
  background-color: var(--bs-highlight-bg);
}

sub,
sup {
  position: relative;
  font-size: 0.75em;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

a {
  color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
  text-decoration: underline;
}
a:hover {
  --bs-link-color-rgb: var(--bs-link-hover-color-rgb);
}

a:not([href]):not([class]), a:not([href]):not([class]):hover {
  color: inherit;
  text-decoration: none;
}

pre,
code,
kbd,
samp {
  font-family: var(--bs-font-monospace);
  font-size: 1em;
}

pre {
  display: block;
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: auto;
  font-size: 0.875em;
}
pre code {
  font-size: inherit;
  color: inherit;
  word-break: normal;
}

code {
  font-size: 0.875em;
  color: var(--bs-code-color);
  word-wrap: break-word;
}
a > code {
  color: inherit;
}

kbd {
  padding: 0.1875rem 0.375rem;
  font-size: 0.875em;
  color: var(--bs-body-bg);
  background-color: var(--bs-body-color);
  border-radius: 0.25rem;
}
kbd kbd {
  padding: 0;
  font-size: 1em;
}

figure {
  margin: 0 0 1rem;
}

img,
svg {
  vertical-align: middle;
}

table {
  caption-side: bottom;
  border-collapse: collapse;
}

caption {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  color: var(--bs-secondary-color);
  text-align: left;
}

th {
  text-align: inherit;
  text-align: -webkit-match-parent;
}

thead,
tbody,
tfoot,
tr,
td,
th {
  border-color: inherit;
  border-style: solid;
  border-width: 0;
}

label {
  display: inline-block;
}

button {
  border-radius: 0;
}

button:focus:not(:focus-visible) {
  outline: 0;
}

input,
button,
select,
optgroup,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button,
select {
  text-transform: none;
}

[role=button] {
  cursor: pointer;
}

select {
  word-wrap: normal;
}
select:disabled {
  opacity: 1;
}

[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator {
  display: none !important;
}

button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}
button:not(:disabled),
[type=button]:not(:disabled),
[type=reset]:not(:disabled),
[type=submit]:not(:disabled) {
  cursor: pointer;
}

::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

textarea {
  resize: vertical;
}

fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

legend {
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: 0.5rem;
  line-height: inherit;
  font-size: calc(1.275rem + 0.3vw);
}
@media (min-width: 1200px) {
  legend {
    font-size: 1.5rem;
  }
}
legend + * {
  clear: left;
}

::-webkit-datetime-edit-fields-wrapper,
::-webkit-datetime-edit-text,
::-webkit-datetime-edit-minute,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-year-field {
  padding: 0;
}

::-webkit-inner-spin-button {
  height: auto;
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}
[type=search]::-webkit-search-cancel-button {
  cursor: pointer;
  filter: grayscale(1);
}

/* rtl:raw:
[type="tel"],
[type="url"],
[type="email"],
[type="number"] {
  direction: ltr;
}
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-color-swatch-wrapper {
  padding: 0;
}

::-webkit-file-upload-button {
  font: inherit;
  -webkit-appearance: button;
}

::file-selector-button {
  font: inherit;
  -webkit-appearance: button;
}

output {
  display: inline-block;
}

iframe {
  border: 0;
}

summary {
  display: list-item;
  cursor: pointer;
}

progress {
  vertical-align: baseline;
}

[hidden] {
  display: none !important;
}

.lead {
  font-size: 1.25rem;
  font-weight: 300;
}

.display-1 {
  font-weight: 300;
  line-height: 1.2;
  font-size: calc(1.625rem + 4.5vw);
}
@media (min-width: 1200px) {
  .display-1 {
    font-size: 5rem;
  }
}

.display-2 {
  font-weight: 300;
  line-height: 1.2;
  font-size: calc(1.575rem + 3.9vw);
}
@media (min-width: 1200px) {
  .display-2 {
    font-size: 4.5rem;
  }
}

.display-3 {
  font-weight: 300;
  line-height: 1.2;
  font-size: calc(1.525rem + 3.3vw);
}
@media (min-width: 1200px) {
  .display-3 {
    font-size: 4rem;
  }
}

.display-4 {
  font-weight: 300;
  line-height: 1.2;
  font-size: calc(1.475rem + 2.7vw);
}
@media (min-width: 1200px) {
  .display-4 {
    font-size: 3.5rem;
  }
}

.display-5 {
  font-weight: 300;
  line-height: 1.2;
  font-size: calc(1.425rem + 2.1vw);
}
@media (min-width: 1200px) {
  .display-5 {
    font-size: 3rem;
  }
}

.display-6 {
  font-weight: 300;
  line-height: 1.2;
  font-size: calc(1.375rem + 1.5vw);
}
@media (min-width: 1200px) {
  .display-6 {
    font-size: 2.5rem;
  }
}

.list-unstyled {
  padding-left: 0;
  list-style: none;
}

.list-inline {
  padding-left: 0;
  list-style: none;
}

.list-inline-item {
  display: inline-block;
}
.list-inline-item:not(:last-child) {
  margin-right: 0.5rem;
}

.initialism {
  font-size: 0.875em;
  text-transform: uppercase;
}

.blockquote {
  margin-bottom: 1rem;
  font-size: 1.25rem;
}
.blockquote > :last-child {
  margin-bottom: 0;
}

.blockquote-footer {
  margin-top: -1rem;
  margin-bottom: 1rem;
  font-size: 0.875em;
  color: #6c757d;
}
.blockquote-footer::before {
  content: "— ";
}

.img-fluid {
  max-width: 100%;
  height: auto;
}

.img-thumbnail {
  padding: 0.25rem;
  background-color: var(--bs-body-bg);
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  max-width: 100%;
  height: auto;
}

.figure {
  display: inline-block;
}

.figure-img {
  margin-bottom: 0.5rem;
  line-height: 1;
}

.figure-caption {
  font-size: 0.875em;
  color: var(--bs-secondary-color);
}

.container,
.container-fluid,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container-sm, .container {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .container-md, .container-sm, .container {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .container-lg, .container-md, .container-sm, .container {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1140px;
  }
}
@media (min-width: 1400px) {
  .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1320px;
  }
}
:root {
  --bs-breakpoint-xs: 0;
  --bs-breakpoint-sm: 576px;
  --bs-breakpoint-md: 768px;
  --bs-breakpoint-lg: 992px;
  --bs-breakpoint-xl: 1200px;
  --bs-breakpoint-xxl: 1400px;
}

.row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-0.5 * var(--bs-gutter-x));
  margin-left: calc(-0.5 * var(--bs-gutter-x));
}
.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-top: var(--bs-gutter-y);
}

.col {
  flex: 1 0 0;
}

.row-cols-auto > * {
  flex: 0 0 auto;
  width: auto;
}

.row-cols-1 > * {
  flex: 0 0 auto;
  width: 100%;
}

.row-cols-2 > * {
  flex: 0 0 auto;
  width: 50%;
}

.row-cols-3 > * {
  flex: 0 0 auto;
  width: 33.33333333%;
}

.row-cols-4 > * {
  flex: 0 0 auto;
  width: 25%;
}

.row-cols-5 > * {
  flex: 0 0 auto;
  width: 20%;
}

.row-cols-6 > * {
  flex: 0 0 auto;
  width: 16.66666667%;
}

.col-auto {
  flex: 0 0 auto;
  width: auto;
}

.col-1 {
  flex: 0 0 auto;
  width: 8.33333333%;
}

.col-2 {
  flex: 0 0 auto;
  width: 16.66666667%;
}

.col-3 {
  flex: 0 0 auto;
  width: 25%;
}

.col-4 {
  flex: 0 0 auto;
  width: 33.33333333%;
}

.col-5 {
  flex: 0 0 auto;
  width: 41.66666667%;
}

.col-6 {
  flex: 0 0 auto;
  width: 50%;
}

.col-7 {
  flex: 0 0 auto;
  width: 58.33333333%;
}

.col-8 {
  flex: 0 0 auto;
  width: 66.66666667%;
}

.col-9 {
  flex: 0 0 auto;
  width: 75%;
}

.col-10 {
  flex: 0 0 auto;
  width: 83.33333333%;
}

.col-11 {
  flex: 0 0 auto;
  width: 91.66666667%;
}

.col-12 {
  flex: 0 0 auto;
  width: 100%;
}

.offset-1 {
  margin-left: 8.33333333%;
}

.offset-2 {
  margin-left: 16.66666667%;
}

.offset-3 {
  margin-left: 25%;
}

.offset-4 {
  margin-left: 33.33333333%;
}

.offset-5 {
  margin-left: 41.66666667%;
}

.offset-6 {
  margin-left: 50%;
}

.offset-7 {
  margin-left: 58.33333333%;
}

.offset-8 {
  margin-left: 66.66666667%;
}

.offset-9 {
  margin-left: 75%;
}

.offset-10 {
  margin-left: 83.33333333%;
}

.offset-11 {
  margin-left: 91.66666667%;
}

.g-0,
.gx-0 {
  --bs-gutter-x: 0;
}

.g-0,
.gy-0 {
  --bs-gutter-y: 0;
}

.g-1,
.gx-1 {
  --bs-gutter-x: 0.25rem;
}

.g-1,
.gy-1 {
  --bs-gutter-y: 0.25rem;
}

.g-2,
.gx-2 {
  --bs-gutter-x: 0.5rem;
}

.g-2,
.gy-2 {
  --bs-gutter-y: 0.5rem;
}

.g-3,
.gx-3 {
  --bs-gutter-x: 1rem;
}

.g-3,
.gy-3 {
  --bs-gutter-y: 1rem;
}

.g-4,
.gx-4 {
  --bs-gutter-x: 1.5rem;
}

.g-4,
.gy-4 {
  --bs-gutter-y: 1.5rem;
}

.g-5,
.gx-5 {
  --bs-gutter-x: 3rem;
}

.g-5,
.gy-5 {
  --bs-gutter-y: 3rem;
}

@media (min-width: 576px) {
  .col-sm {
    flex: 1 0 0;
  }
  .row-cols-sm-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-sm-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-sm-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-sm-3 > * {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .row-cols-sm-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-sm-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-sm-6 > * {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-sm-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-sm-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-sm-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-sm-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-sm-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-sm-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-sm-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-sm-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-sm-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-sm-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-sm-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-sm-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-sm-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-sm-0 {
    margin-left: 0;
  }
  .offset-sm-1 {
    margin-left: 8.33333333%;
  }
  .offset-sm-2 {
    margin-left: 16.66666667%;
  }
  .offset-sm-3 {
    margin-left: 25%;
  }
  .offset-sm-4 {
    margin-left: 33.33333333%;
  }
  .offset-sm-5 {
    margin-left: 41.66666667%;
  }
  .offset-sm-6 {
    margin-left: 50%;
  }
  .offset-sm-7 {
    margin-left: 58.33333333%;
  }
  .offset-sm-8 {
    margin-left: 66.66666667%;
  }
  .offset-sm-9 {
    margin-left: 75%;
  }
  .offset-sm-10 {
    margin-left: 83.33333333%;
  }
  .offset-sm-11 {
    margin-left: 91.66666667%;
  }
  .g-sm-0,
  .gx-sm-0 {
    --bs-gutter-x: 0;
  }
  .g-sm-0,
  .gy-sm-0 {
    --bs-gutter-y: 0;
  }
  .g-sm-1,
  .gx-sm-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-sm-1,
  .gy-sm-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-sm-2,
  .gx-sm-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-sm-2,
  .gy-sm-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-sm-3,
  .gx-sm-3 {
    --bs-gutter-x: 1rem;
  }
  .g-sm-3,
  .gy-sm-3 {
    --bs-gutter-y: 1rem;
  }
  .g-sm-4,
  .gx-sm-4 {
    --bs-gutter-x: 1.5rem;
  }
  .g-sm-4,
  .gy-sm-4 {
    --bs-gutter-y: 1.5rem;
  }
  .g-sm-5,
  .gx-sm-5 {
    --bs-gutter-x: 3rem;
  }
  .g-sm-5,
  .gy-sm-5 {
    --bs-gutter-y: 3rem;
  }
}
@media (min-width: 768px) {
  .col-md {
    flex: 1 0 0;
  }
  .row-cols-md-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-md-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-md-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-md-3 > * {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .row-cols-md-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-md-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-md-6 > * {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-md-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-md-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-md-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-md-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-md-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-md-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-md-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-md-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-md-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-md-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-md-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-md-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-md-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-md-0 {
    margin-left: 0;
  }
  .offset-md-1 {
    margin-left: 8.33333333%;
  }
  .offset-md-2 {
    margin-left: 16.66666667%;
  }
  .offset-md-3 {
    margin-left: 25%;
  }
  .offset-md-4 {
    margin-left: 33.33333333%;
  }
  .offset-md-5 {
    margin-left: 41.66666667%;
  }
  .offset-md-6 {
    margin-left: 50%;
  }
  .offset-md-7 {
    margin-left: 58.33333333%;
  }
  .offset-md-8 {
    margin-left: 66.66666667%;
  }
  .offset-md-9 {
    margin-left: 75%;
  }
  .offset-md-10 {
    margin-left: 83.33333333%;
  }
  .offset-md-11 {
    margin-left: 91.66666667%;
  }
  .g-md-0,
  .gx-md-0 {
    --bs-gutter-x: 0;
  }
  .g-md-0,
  .gy-md-0 {
    --bs-gutter-y: 0;
  }
  .g-md-1,
  .gx-md-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-md-1,
  .gy-md-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-md-2,
  .gx-md-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-md-2,
  .gy-md-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-md-3,
  .gx-md-3 {
    --bs-gutter-x: 1rem;
  }
  .g-md-3,
  .gy-md-3 {
    --bs-gutter-y: 1rem;
  }
  .g-md-4,
  .gx-md-4 {
    --bs-gutter-x: 1.5rem;
  }
  .g-md-4,
  .gy-md-4 {
    --bs-gutter-y: 1.5rem;
  }
  .g-md-5,
  .gx-md-5 {
    --bs-gutter-x: 3rem;
  }
  .g-md-5,
  .gy-md-5 {
    --bs-gutter-y: 3rem;
  }
}
@media (min-width: 992px) {
  .col-lg {
    flex: 1 0 0;
  }
  .row-cols-lg-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-lg-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-lg-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-lg-3 > * {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .row-cols-lg-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-lg-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-lg-6 > * {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-lg-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-lg-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-lg-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-lg-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-lg-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-lg-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-lg-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-lg-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-lg-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-lg-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-lg-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-lg-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-lg-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-lg-0 {
    margin-left: 0;
  }
  .offset-lg-1 {
    margin-left: 8.33333333%;
  }
  .offset-lg-2 {
    margin-left: 16.66666667%;
  }
  .offset-lg-3 {
    margin-left: 25%;
  }
  .offset-lg-4 {
    margin-left: 33.33333333%;
  }
  .offset-lg-5 {
    margin-left: 41.66666667%;
  }
  .offset-lg-6 {
    margin-left: 50%;
  }
  .offset-lg-7 {
    margin-left: 58.33333333%;
  }
  .offset-lg-8 {
    margin-left: 66.66666667%;
  }
  .offset-lg-9 {
    margin-left: 75%;
  }
  .offset-lg-10 {
    margin-left: 83.33333333%;
  }
  .offset-lg-11 {
    margin-left: 91.66666667%;
  }
  .g-lg-0,
  .gx-lg-0 {
    --bs-gutter-x: 0;
  }
  .g-lg-0,
  .gy-lg-0 {
    --bs-gutter-y: 0;
  }
  .g-lg-1,
  .gx-lg-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-lg-1,
  .gy-lg-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-lg-2,
  .gx-lg-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-lg-2,
  .gy-lg-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-lg-3,
  .gx-lg-3 {
    --bs-gutter-x: 1rem;
  }
  .g-lg-3,
  .gy-lg-3 {
    --bs-gutter-y: 1rem;
  }
  .g-lg-4,
  .gx-lg-4 {
    --bs-gutter-x: 1.5rem;
  }
  .g-lg-4,
  .gy-lg-4 {
    --bs-gutter-y: 1.5rem;
  }
  .g-lg-5,
  .gx-lg-5 {
    --bs-gutter-x: 3rem;
  }
  .g-lg-5,
  .gy-lg-5 {
    --bs-gutter-y: 3rem;
  }
}
@media (min-width: 1200px) {
  .col-xl {
    flex: 1 0 0;
  }
  .row-cols-xl-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-xl-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-xl-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-xl-3 > * {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .row-cols-xl-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-xl-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-xl-6 > * {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-xl-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-xl-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-xl-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-xl-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-xl-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-xl-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-xl-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-xl-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-xl-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-xl-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-xl-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-xl-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-xl-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-xl-0 {
    margin-left: 0;
  }
  .offset-xl-1 {
    margin-left: 8.33333333%;
  }
  .offset-xl-2 {
    margin-left: 16.66666667%;
  }
  .offset-xl-3 {
    margin-left: 25%;
  }
  .offset-xl-4 {
    margin-left: 33.33333333%;
  }
  .offset-xl-5 {
    margin-left: 41.66666667%;
  }
  .offset-xl-6 {
    margin-left: 50%;
  }
  .offset-xl-7 {
    margin-left: 58.33333333%;
  }
  .offset-xl-8 {
    margin-left: 66.66666667%;
  }
  .offset-xl-9 {
    margin-left: 75%;
  }
  .offset-xl-10 {
    margin-left: 83.33333333%;
  }
  .offset-xl-11 {
    margin-left: 91.66666667%;
  }
  .g-xl-0,
  .gx-xl-0 {
    --bs-gutter-x: 0;
  }
  .g-xl-0,
  .gy-xl-0 {
    --bs-gutter-y: 0;
  }
  .g-xl-1,
  .gx-xl-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-xl-1,
  .gy-xl-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-xl-2,
  .gx-xl-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-xl-2,
  .gy-xl-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-xl-3,
  .gx-xl-3 {
    --bs-gutter-x: 1rem;
  }
  .g-xl-3,
  .gy-xl-3 {
    --bs-gutter-y: 1rem;
  }
  .g-xl-4,
  .gx-xl-4 {
    --bs-gutter-x: 1.5rem;
  }
  .g-xl-4,
  .gy-xl-4 {
    --bs-gutter-y: 1.5rem;
  }
  .g-xl-5,
  .gx-xl-5 {
    --bs-gutter-x: 3rem;
  }
  .g-xl-5,
  .gy-xl-5 {
    --bs-gutter-y: 3rem;
  }
}
@media (min-width: 1400px) {
  .col-xxl {
    flex: 1 0 0;
  }
  .row-cols-xxl-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-xxl-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-xxl-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-xxl-3 > * {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .row-cols-xxl-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-xxl-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-xxl-6 > * {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-xxl-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-xxl-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-xxl-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-xxl-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-xxl-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-xxl-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-xxl-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-xxl-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-xxl-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-xxl-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-xxl-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-xxl-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-xxl-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-xxl-0 {
    margin-left: 0;
  }
  .offset-xxl-1 {
    margin-left: 8.33333333%;
  }
  .offset-xxl-2 {
    margin-left: 16.66666667%;
  }
  .offset-xxl-3 {
    margin-left: 25%;
  }
  .offset-xxl-4 {
    margin-left: 33.33333333%;
  }
  .offset-xxl-5 {
    margin-left: 41.66666667%;
  }
  .offset-xxl-6 {
    margin-left: 50%;
  }
  .offset-xxl-7 {
    margin-left: 58.33333333%;
  }
  .offset-xxl-8 {
    margin-left: 66.66666667%;
  }
  .offset-xxl-9 {
    margin-left: 75%;
  }
  .offset-xxl-10 {
    margin-left: 83.33333333%;
  }
  .offset-xxl-11 {
    margin-left: 91.66666667%;
  }
  .g-xxl-0,
  .gx-xxl-0 {
    --bs-gutter-x: 0;
  }
  .g-xxl-0,
  .gy-xxl-0 {
    --bs-gutter-y: 0;
  }
  .g-xxl-1,
  .gx-xxl-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-xxl-1,
  .gy-xxl-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-xxl-2,
  .gx-xxl-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-xxl-2,
  .gy-xxl-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-xxl-3,
  .gx-xxl-3 {
    --bs-gutter-x: 1rem;
  }
  .g-xxl-3,
  .gy-xxl-3 {
    --bs-gutter-y: 1rem;
  }
  .g-xxl-4,
  .gx-xxl-4 {
    --bs-gutter-x: 1.5rem;
  }
  .g-xxl-4,
  .gy-xxl-4 {
    --bs-gutter-y: 1.5rem;
  }
  .g-xxl-5,
  .gx-xxl-5 {
    --bs-gutter-x: 3rem;
  }
  .g-xxl-5,
  .gy-xxl-5 {
    --bs-gutter-y: 3rem;
  }
}
.table {
  --bs-table-color-type: initial;
  --bs-table-bg-type: initial;
  --bs-table-color-state: initial;
  --bs-table-bg-state: initial;
  --bs-table-color: var(--bs-emphasis-color);
  --bs-table-bg: var(--bs-body-bg);
  --bs-table-border-color: var(--bs-border-color);
  --bs-table-accent-bg: transparent;
  --bs-table-striped-color: var(--bs-emphasis-color);
  --bs-table-striped-bg: rgba(var(--bs-emphasis-color-rgb), 0.05);
  --bs-table-active-color: var(--bs-emphasis-color);
  --bs-table-active-bg: rgba(var(--bs-emphasis-color-rgb), 0.1);
  --bs-table-hover-color: var(--bs-emphasis-color);
  --bs-table-hover-bg: rgba(var(--bs-emphasis-color-rgb), 0.075);
  width: 100%;
  margin-bottom: 1rem;
  vertical-align: top;
  border-color: var(--bs-table-border-color);
}
.table > :not(caption) > * > * {
  padding: 0.5rem 0.5rem;
  color: var(--bs-table-color-state, var(--bs-table-color-type, var(--bs-table-color)));
  background-color: var(--bs-table-bg);
  border-bottom-width: var(--bs-border-width);
  box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)));
}
.table > tbody {
  vertical-align: inherit;
}
.table > thead {
  vertical-align: bottom;
}

.table-group-divider {
  border-top: calc(var(--bs-border-width) * 2) solid currentcolor;
}

.caption-top {
  caption-side: top;
}

.table-sm > :not(caption) > * > * {
  padding: 0.25rem 0.25rem;
}

.table-bordered > :not(caption) > * {
  border-width: var(--bs-border-width) 0;
}
.table-bordered > :not(caption) > * > * {
  border-width: 0 var(--bs-border-width);
}

.table-borderless > :not(caption) > * > * {
  border-bottom-width: 0;
}
.table-borderless > :not(:first-child) {
  border-top-width: 0;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-color-type: var(--bs-table-striped-color);
  --bs-table-bg-type: var(--bs-table-striped-bg);
}

.table-striped-columns > :not(caption) > tr > :nth-child(even) {
  --bs-table-color-type: var(--bs-table-striped-color);
  --bs-table-bg-type: var(--bs-table-striped-bg);
}

.table-active {
  --bs-table-color-state: var(--bs-table-active-color);
  --bs-table-bg-state: var(--bs-table-active-bg);
}

.table-hover > tbody > tr:hover > * {
  --bs-table-color-state: var(--bs-table-hover-color);
  --bs-table-bg-state: var(--bs-table-hover-bg);
}

.table-primary {
  --bs-table-color: #000;
  --bs-table-bg: #cfe2ff;
  --bs-table-border-color: #a6b5cc;
  --bs-table-striped-bg: #c5d7f2;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #bacbe6;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #bfd1ec;
  --bs-table-hover-color: #000;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}

.table-secondary {
  --bs-table-color: #000;
  --bs-table-bg: #e2e3e5;
  --bs-table-border-color: #b5b6b7;
  --bs-table-striped-bg: #d7d8da;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #cbccce;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #d1d2d4;
  --bs-table-hover-color: #000;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}

.table-success {
  --bs-table-color: #000;
  --bs-table-bg: #d1e7dd;
  --bs-table-border-color: #a7b9b1;
  --bs-table-striped-bg: #c7dbd2;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #bcd0c7;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #c1d6cc;
  --bs-table-hover-color: #000;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}

.table-info {
  --bs-table-color: #000;
  --bs-table-bg: #cff4fc;
  --bs-table-border-color: #a6c3ca;
  --bs-table-striped-bg: #c5e8ef;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #badce3;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #bfe2e9;
  --bs-table-hover-color: #000;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}

.table-warning {
  --bs-table-color: #000;
  --bs-table-bg: #fff3cd;
  --bs-table-border-color: #ccc2a4;
  --bs-table-striped-bg: #f2e7c3;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #e6dbb9;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #ece1be;
  --bs-table-hover-color: #000;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}

.table-danger {
  --bs-table-color: #000;
  --bs-table-bg: #f8d7da;
  --bs-table-border-color: #c6acae;
  --bs-table-striped-bg: #eccccf;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #dfc2c4;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #e5c7ca;
  --bs-table-hover-color: #000;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}

.table-light {
  --bs-table-color: #000;
  --bs-table-bg: #f8f9fa;
  --bs-table-border-color: #c6c7c8;
  --bs-table-striped-bg: #ecedee;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #dfe0e1;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #e5e6e7;
  --bs-table-hover-color: #000;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}

.table-dark {
  --bs-table-color: #fff;
  --bs-table-bg: #212529;
  --bs-table-border-color: #4d5154;
  --bs-table-striped-bg: #2c3034;
  --bs-table-striped-color: #fff;
  --bs-table-active-bg: #373b3e;
  --bs-table-active-color: #fff;
  --bs-table-hover-bg: #323539;
  --bs-table-hover-color: #fff;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 575.98px) {
  .table-responsive-sm {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 767.98px) {
  .table-responsive-md {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 991.98px) {
  .table-responsive-lg {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 1199.98px) {
  .table-responsive-xl {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 1399.98px) {
  .table-responsive-xxl {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
.form-label {
  margin-bottom: 0.5rem;
}

.col-form-label {
  padding-top: calc(0.375rem + var(--bs-border-width));
  padding-bottom: calc(0.375rem + var(--bs-border-width));
  margin-bottom: 0;
  font-size: inherit;
  line-height: 1.5;
}

.col-form-label-lg {
  padding-top: calc(0.5rem + var(--bs-border-width));
  padding-bottom: calc(0.5rem + var(--bs-border-width));
  font-size: 1.25rem;
}

.col-form-label-sm {
  padding-top: calc(0.25rem + var(--bs-border-width));
  padding-bottom: calc(0.25rem + var(--bs-border-width));
  font-size: 0.875rem;
}

.form-text {
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: var(--bs-secondary-color);
}

.form-control {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--bs-body-color);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--bs-body-bg);
  background-clip: padding-box;
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .form-control {
    transition: none;
  }
}
.form-control[type=file] {
  overflow: hidden;
}
.form-control[type=file]:not(:disabled):not([readonly]) {
  cursor: pointer;
}
.form-control:focus {
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
.form-control::-webkit-date-and-time-value {
  min-width: 85px;
  height: 1.5em;
  margin: 0;
}
.form-control::-webkit-datetime-edit {
  display: block;
  padding: 0;
}
.form-control::placeholder {
  color: var(--bs-secondary-color);
  opacity: 1;
}
.form-control:disabled {
  background-color: var(--bs-secondary-bg);
  opacity: 1;
}
.form-control::-webkit-file-upload-button {
  padding: 0.375rem 0.75rem;
  margin: -0.375rem -0.75rem;
  -webkit-margin-end: 0.75rem;
  margin-inline-end: 0.75rem;
  color: var(--bs-body-color);
  background-color: var(--bs-tertiary-bg);
  pointer-events: none;
  border-color: inherit;
  border-style: solid;
  border-width: 0;
  border-inline-end-width: var(--bs-border-width);
  border-radius: 0;
  -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.form-control::file-selector-button {
  padding: 0.375rem 0.75rem;
  margin: -0.375rem -0.75rem;
  -webkit-margin-end: 0.75rem;
  margin-inline-end: 0.75rem;
  color: var(--bs-body-color);
  background-color: var(--bs-tertiary-bg);
  pointer-events: none;
  border-color: inherit;
  border-style: solid;
  border-width: 0;
  border-inline-end-width: var(--bs-border-width);
  border-radius: 0;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .form-control::-webkit-file-upload-button {
    -webkit-transition: none;
    transition: none;
  }
  .form-control::file-selector-button {
    transition: none;
  }
}
.form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button {
  background-color: var(--bs-secondary-bg);
}
.form-control:hover:not(:disabled):not([readonly])::file-selector-button {
  background-color: var(--bs-secondary-bg);
}

.form-control-plaintext {
  display: block;
  width: 100%;
  padding: 0.375rem 0;
  margin-bottom: 0;
  line-height: 1.5;
  color: var(--bs-body-color);
  background-color: transparent;
  border: solid transparent;
  border-width: var(--bs-border-width) 0;
}
.form-control-plaintext:focus {
  outline: 0;
}
.form-control-plaintext.form-control-sm, .form-control-plaintext.form-control-lg {
  padding-right: 0;
  padding-left: 0;
}

.form-control-sm {
  min-height: calc(1.5em + 0.5rem + calc(var(--bs-border-width) * 2));
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  border-radius: var(--bs-border-radius-sm);
}
.form-control-sm::-webkit-file-upload-button {
  padding: 0.25rem 0.5rem;
  margin: -0.25rem -0.5rem;
  -webkit-margin-end: 0.5rem;
  margin-inline-end: 0.5rem;
}
.form-control-sm::file-selector-button {
  padding: 0.25rem 0.5rem;
  margin: -0.25rem -0.5rem;
  -webkit-margin-end: 0.5rem;
  margin-inline-end: 0.5rem;
}

.form-control-lg {
  min-height: calc(1.5em + 1rem + calc(var(--bs-border-width) * 2));
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  border-radius: var(--bs-border-radius-lg);
}
.form-control-lg::-webkit-file-upload-button {
  padding: 0.5rem 1rem;
  margin: -0.5rem -1rem;
  -webkit-margin-end: 1rem;
  margin-inline-end: 1rem;
}
.form-control-lg::file-selector-button {
  padding: 0.5rem 1rem;
  margin: -0.5rem -1rem;
  -webkit-margin-end: 1rem;
  margin-inline-end: 1rem;
}

textarea.form-control {
  min-height: calc(1.5em + 0.75rem + calc(var(--bs-border-width) * 2));
}
textarea.form-control-sm {
  min-height: calc(1.5em + 0.5rem + calc(var(--bs-border-width) * 2));
}
textarea.form-control-lg {
  min-height: calc(1.5em + 1rem + calc(var(--bs-border-width) * 2));
}

.form-control-color {
  width: 3rem;
  height: calc(1.5em + 0.75rem + calc(var(--bs-border-width) * 2));
  padding: 0.375rem;
}
.form-control-color:not(:disabled):not([readonly]) {
  cursor: pointer;
}
.form-control-color::-moz-color-swatch {
  border: 0 !important;
  border-radius: var(--bs-border-radius);
}
.form-control-color::-webkit-color-swatch {
  border: 0 !important;
  border-radius: var(--bs-border-radius);
}
.form-control-color.form-control-sm {
  height: calc(1.5em + 0.5rem + calc(var(--bs-border-width) * 2));
}
.form-control-color.form-control-lg {
  height: calc(1.5em + 1rem + calc(var(--bs-border-width) * 2));
}

.form-select {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  display: block;
  width: 100%;
  padding: 0.375rem 2.25rem 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--bs-body-color);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--bs-body-bg);
  background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .form-select {
    transition: none;
  }
}
.form-select:focus {
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
.form-select[multiple], .form-select[size]:not([size="1"]) {
  padding-right: 0.75rem;
  background-image: none;
}
.form-select:disabled {
  background-color: var(--bs-secondary-bg);
}
.form-select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 var(--bs-body-color);
}

.form-select-sm {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.5rem;
  font-size: 0.875rem;
  border-radius: var(--bs-border-radius-sm);
}

.form-select-lg {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  font-size: 1.25rem;
  border-radius: var(--bs-border-radius-lg);
}

[data-bs-theme=dark] .form-select {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.form-check {
  display: block;
  min-height: 1.5rem;
  padding-left: 1.5em;
  margin-bottom: 0.125rem;
}
.form-check .form-check-input {
  float: left;
  margin-left: -1.5em;
}

.form-check-reverse {
  padding-right: 1.5em;
  padding-left: 0;
  text-align: right;
}
.form-check-reverse .form-check-input {
  float: right;
  margin-right: -1.5em;
  margin-left: 0;
}

.form-check-input {
  --bs-form-check-bg: var(--bs-body-bg);
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  margin-top: 0.25em;
  vertical-align: top;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--bs-form-check-bg);
  background-image: var(--bs-form-check-bg-image);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: var(--bs-border-width) solid var(--bs-border-color);
  -webkit-print-color-adjust: exact;
  color-adjust: exact;
  print-color-adjust: exact;
}
.form-check-input[type=checkbox] {
  border-radius: 0.25em;
}
.form-check-input[type=radio] {
  border-radius: 50%;
}
.form-check-input:active {
  filter: brightness(90%);
}
.form-check-input:focus {
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
.form-check-input:checked {
  background-color: #0d6efd;
  border-color: #0d6efd;
}
.form-check-input:checked[type=checkbox] {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
.form-check-input:checked[type=radio] {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}
.form-check-input[type=checkbox]:indeterminate {
  background-color: #0d6efd;
  border-color: #0d6efd;
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
}
.form-check-input:disabled {
  pointer-events: none;
  filter: none;
  opacity: 0.5;
}
.form-check-input[disabled] ~ .form-check-label, .form-check-input:disabled ~ .form-check-label {
  cursor: default;
  opacity: 0.5;
}

.form-switch {
  padding-left: 2.5em;
}
.form-switch .form-check-input {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
  width: 2em;
  margin-left: -2.5em;
  background-image: var(--bs-form-switch-bg);
  background-position: left center;
  border-radius: 2em;
  transition: background-position 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .form-switch .form-check-input {
    transition: none;
  }
}
.form-switch .form-check-input:focus {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2386b7fe'/%3e%3c/svg%3e");
}
.form-switch .form-check-input:checked {
  background-position: right center;
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}
.form-switch.form-check-reverse {
  padding-right: 2.5em;
  padding-left: 0;
}
.form-switch.form-check-reverse .form-check-input {
  margin-right: -2.5em;
  margin-left: 0;
}

.form-check-inline {
  display: inline-block;
  margin-right: 1rem;
}

.btn-check {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}
.btn-check[disabled] + .btn, .btn-check:disabled + .btn {
  pointer-events: none;
  filter: none;
  opacity: 0.65;
}

[data-bs-theme=dark] .form-switch .form-check-input:not(:checked):not(:focus) {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.25%29'/%3e%3c/svg%3e");
}

.form-range {
  width: 100%;
  height: 1.5rem;
  padding: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
}
.form-range:focus {
  outline: 0;
}
.form-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
.form-range:focus::-moz-range-thumb {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
.form-range::-moz-focus-outer {
  border: 0;
}
.form-range::-webkit-slider-thumb {
  width: 1rem;
  height: 1rem;
  margin-top: -0.25rem;
  -webkit-appearance: none;
  appearance: none;
  background-color: #0d6efd;
  border: 0;
  border-radius: 1rem;
  -webkit-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .form-range::-webkit-slider-thumb {
    -webkit-transition: none;
    transition: none;
  }
}
.form-range::-webkit-slider-thumb:active {
  background-color: #b6d4fe;
}
.form-range::-webkit-slider-runnable-track {
  width: 100%;
  height: 0.5rem;
  color: transparent;
  cursor: pointer;
  background-color: var(--bs-secondary-bg);
  border-color: transparent;
  border-radius: 1rem;
}
.form-range::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  -moz-appearance: none;
  appearance: none;
  background-color: #0d6efd;
  border: 0;
  border-radius: 1rem;
  -moz-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .form-range::-moz-range-thumb {
    -moz-transition: none;
    transition: none;
  }
}
.form-range::-moz-range-thumb:active {
  background-color: #b6d4fe;
}
.form-range::-moz-range-track {
  width: 100%;
  height: 0.5rem;
  color: transparent;
  cursor: pointer;
  background-color: var(--bs-secondary-bg);
  border-color: transparent;
  border-radius: 1rem;
}
.form-range:disabled {
  pointer-events: none;
}
.form-range:disabled::-webkit-slider-thumb {
  background-color: var(--bs-secondary-color);
}
.form-range:disabled::-moz-range-thumb {
  background-color: var(--bs-secondary-color);
}

.form-floating {
  position: relative;
}
.form-floating > .form-control,
.form-floating > .form-control-plaintext,
.form-floating > .form-select {
  height: calc(3.5rem + calc(var(--bs-border-width) * 2));
  min-height: calc(3.5rem + calc(var(--bs-border-width) * 2));
  line-height: 1.25;
}
.form-floating > label {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  max-width: 100%;
  height: 100%;
  padding: 1rem 0.75rem;
  overflow: hidden;
  color: rgba(var(--bs-body-color-rgb), 0.65);
  text-align: start;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
  border: var(--bs-border-width) solid transparent;
  transform-origin: 0 0;
  transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .form-floating > label {
    transition: none;
  }
}
.form-floating > .form-control,
.form-floating > .form-control-plaintext {
  padding: 1rem 0.75rem;
}
.form-floating > .form-control::placeholder,
.form-floating > .form-control-plaintext::placeholder {
  color: transparent;
}
.form-floating > .form-control:focus, .form-floating > .form-control:not(:placeholder-shown),
.form-floating > .form-control-plaintext:focus,
.form-floating > .form-control-plaintext:not(:placeholder-shown) {
  padding-top: 1.625rem;
  padding-bottom: 0.625rem;
}
.form-floating > .form-control:-webkit-autofill,
.form-floating > .form-control-plaintext:-webkit-autofill {
  padding-top: 1.625rem;
  padding-bottom: 0.625rem;
}
.form-floating > .form-select {
  padding-top: 1.625rem;
  padding-bottom: 0.625rem;
  padding-left: 0.75rem;
}
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-control-plaintext ~ label,
.form-floating > .form-select ~ label {
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}
.form-floating > .form-control:-webkit-autofill ~ label {
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}
.form-floating > textarea:focus ~ label::after,
.form-floating > textarea:not(:placeholder-shown) ~ label::after {
  position: absolute;
  inset: 1rem 0.375rem;
  z-index: -1;
  height: 1.5em;
  content: "";
  background-color: var(--bs-body-bg);
  border-radius: var(--bs-border-radius);
}
.form-floating > textarea:disabled ~ label::after {
  background-color: var(--bs-secondary-bg);
}
.form-floating > .form-control-plaintext ~ label {
  border-width: var(--bs-border-width) 0;
}
.form-floating > :disabled ~ label,
.form-floating > .form-control:disabled ~ label {
  color: #6c757d;
}

.input-group {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
}
.input-group > .form-control,
.input-group > .form-select,
.input-group > .form-floating {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}
.input-group > .form-control:focus,
.input-group > .form-select:focus,
.input-group > .form-floating:focus-within {
  z-index: 5;
}
.input-group .btn {
  position: relative;
  z-index: 2;
}
.input-group .btn:focus {
  z-index: 5;
}

.input-group-text {
  display: flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--bs-body-color);
  text-align: center;
  white-space: nowrap;
  background-color: var(--bs-tertiary-bg);
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
}

.input-group-lg > .form-control,
.input-group-lg > .form-select,
.input-group-lg > .input-group-text,
.input-group-lg > .btn {
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  border-radius: var(--bs-border-radius-lg);
}

.input-group-sm > .form-control,
.input-group-sm > .form-select,
.input-group-sm > .input-group-text,
.input-group-sm > .btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  border-radius: var(--bs-border-radius-sm);
}

.input-group-lg > .form-select,
.input-group-sm > .form-select {
  padding-right: 3rem;
}

.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
.input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n+3),
.input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-control,
.input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-select {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group.has-validation > :nth-last-child(n+3):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
.input-group.has-validation > .dropdown-toggle:nth-last-child(n+4),
.input-group.has-validation > .form-floating:nth-last-child(n+3) > .form-control,
.input-group.has-validation > .form-floating:nth-last-child(n+3) > .form-select {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
  margin-left: calc(-1 * var(--bs-border-width));
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.input-group > .form-floating:not(:first-child) > .form-control,
.input-group > .form-floating:not(:first-child) > .form-select {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.valid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: var(--bs-form-valid-color);
}

.valid-tooltip {
  position: absolute;
  top: 100%;
  z-index: 5;
  display: none;
  max-width: 100%;
  padding: 0.25rem 0.5rem;
  margin-top: 0.1rem;
  font-size: 0.875rem;
  color: #fff;
  background-color: var(--bs-success);
  border-radius: var(--bs-border-radius);
}

.was-validated :valid ~ .valid-feedback,
.was-validated :valid ~ .valid-tooltip,
.is-valid ~ .valid-feedback,
.is-valid ~ .valid-tooltip {
  display: block;
}

.was-validated .form-control:valid, .form-control.is-valid {
  border-color: var(--bs-form-valid-border-color);
  padding-right: calc(1.5em + 0.75rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.was-validated .form-control:valid:focus, .form-control.is-valid:focus {
  border-color: var(--bs-form-valid-border-color);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25);
}

.was-validated textarea.form-control:valid, textarea.form-control.is-valid {
  padding-right: calc(1.5em + 0.75rem);
  background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
}

.was-validated .form-select:valid, .form-select.is-valid {
  border-color: var(--bs-form-valid-border-color);
}
.was-validated .form-select:valid:not([multiple]):not([size]), .was-validated .form-select:valid:not([multiple])[size="1"], .form-select.is-valid:not([multiple]):not([size]), .form-select.is-valid:not([multiple])[size="1"] {
  --bs-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1'/%3e%3c/svg%3e");
  padding-right: 4.125rem;
  background-position: right 0.75rem center, center right 2.25rem;
  background-size: 16px 12px, calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.was-validated .form-select:valid:focus, .form-select.is-valid:focus {
  border-color: var(--bs-form-valid-border-color);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25);
}

.was-validated .form-control-color:valid, .form-control-color.is-valid {
  width: calc(3rem + calc(1.5em + 0.75rem));
}

.was-validated .form-check-input:valid, .form-check-input.is-valid {
  border-color: var(--bs-form-valid-border-color);
}
.was-validated .form-check-input:valid:checked, .form-check-input.is-valid:checked {
  background-color: var(--bs-form-valid-color);
}
.was-validated .form-check-input:valid:focus, .form-check-input.is-valid:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25);
}
.was-validated .form-check-input:valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label {
  color: var(--bs-form-valid-color);
}

.form-check-inline .form-check-input ~ .valid-feedback {
  margin-left: 0.5em;
}

.was-validated .input-group > .form-control:not(:focus):valid, .input-group > .form-control:not(:focus).is-valid,
.was-validated .input-group > .form-select:not(:focus):valid,
.input-group > .form-select:not(:focus).is-valid,
.was-validated .input-group > .form-floating:not(:focus-within):valid,
.input-group > .form-floating:not(:focus-within).is-valid {
  z-index: 3;
}

.invalid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: var(--bs-form-invalid-color);
}

.invalid-tooltip {
  position: absolute;
  top: 100%;
  z-index: 5;
  display: none;
  max-width: 100%;
  padding: 0.25rem 0.5rem;
  margin-top: 0.1rem;
  font-size: 0.875rem;
  color: #fff;
  background-color: var(--bs-danger);
  border-radius: var(--bs-border-radius);
}

.was-validated :invalid ~ .invalid-feedback,
.was-validated :invalid ~ .invalid-tooltip,
.is-invalid ~ .invalid-feedback,
.is-invalid ~ .invalid-tooltip {
  display: block;
}

.was-validated .form-control:invalid, .form-control.is-invalid {
  border-color: var(--bs-form-invalid-border-color);
  padding-right: calc(1.5em + 0.75rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.was-validated .form-control:invalid:focus, .form-control.is-invalid:focus {
  border-color: var(--bs-form-invalid-border-color);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
}

.was-validated textarea.form-control:invalid, textarea.form-control.is-invalid {
  padding-right: calc(1.5em + 0.75rem);
  background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
}

.was-validated .form-select:invalid, .form-select.is-invalid {
  border-color: var(--bs-form-invalid-border-color);
}
.was-validated .form-select:invalid:not([multiple]):not([size]), .was-validated .form-select:invalid:not([multiple])[size="1"], .form-select.is-invalid:not([multiple]):not([size]), .form-select.is-invalid:not([multiple])[size="1"] {
  --bs-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
  padding-right: 4.125rem;
  background-position: right 0.75rem center, center right 2.25rem;
  background-size: 16px 12px, calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.was-validated .form-select:invalid:focus, .form-select.is-invalid:focus {
  border-color: var(--bs-form-invalid-border-color);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
}

.was-validated .form-control-color:invalid, .form-control-color.is-invalid {
  width: calc(3rem + calc(1.5em + 0.75rem));
}

.was-validated .form-check-input:invalid, .form-check-input.is-invalid {
  border-color: var(--bs-form-invalid-border-color);
}
.was-validated .form-check-input:invalid:checked, .form-check-input.is-invalid:checked {
  background-color: var(--bs-form-invalid-color);
}
.was-validated .form-check-input:invalid:focus, .form-check-input.is-invalid:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
}
.was-validated .form-check-input:invalid ~ .form-check-label, .form-check-input.is-invalid ~ .form-check-label {
  color: var(--bs-form-invalid-color);
}

.form-check-inline .form-check-input ~ .invalid-feedback {
  margin-left: 0.5em;
}

.was-validated .input-group > .form-control:not(:focus):invalid, .input-group > .form-control:not(:focus).is-invalid,
.was-validated .input-group > .form-select:not(:focus):invalid,
.input-group > .form-select:not(:focus).is-invalid,
.was-validated .input-group > .form-floating:not(:focus-within):invalid,
.input-group > .form-floating:not(:focus-within).is-invalid {
  z-index: 4;
}

.btn {
  --bs-btn-padding-x: 0.75rem;
  --bs-btn-padding-y: 0.375rem;
  --bs-btn-font-family: ;
  --bs-btn-font-size: 1rem;
  --bs-btn-font-weight: 400;
  --bs-btn-line-height: 1.5;
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-bg: transparent;
  --bs-btn-border-width: var(--bs-border-width);
  --bs-btn-border-color: transparent;
  --bs-btn-border-radius: var(--bs-border-radius);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
  --bs-btn-disabled-opacity: 0.65;
  --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
  display: inline-block;
  padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
  font-family: var(--bs-btn-font-family);
  font-size: var(--bs-btn-font-size);
  font-weight: var(--bs-btn-font-weight);
  line-height: var(--bs-btn-line-height);
  color: var(--bs-btn-color);
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
  border-radius: var(--bs-btn-border-radius);
  background-color: var(--bs-btn-bg);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
}
.btn:hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
.btn-check + .btn:hover {
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
}
.btn:focus-visible {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  outline: 0;
  box-shadow: var(--bs-btn-focus-box-shadow);
}
.btn-check:focus-visible + .btn {
  border-color: var(--bs-btn-hover-border-color);
  outline: 0;
  box-shadow: var(--bs-btn-focus-box-shadow);
}
.btn-check:checked + .btn, :not(.btn-check) + .btn:active, .btn:first-child:active, .btn.active, .btn.show {
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}
.btn-check:checked + .btn:focus-visible, :not(.btn-check) + .btn:active:focus-visible, .btn:first-child:active:focus-visible, .btn.active:focus-visible, .btn.show:focus-visible {
  box-shadow: var(--bs-btn-focus-box-shadow);
}
.btn-check:checked:focus-visible + .btn {
  box-shadow: var(--bs-btn-focus-box-shadow);
}
.btn:disabled, .btn.disabled, fieldset:disabled .btn {
  color: var(--bs-btn-disabled-color);
  pointer-events: none;
  background-color: var(--bs-btn-disabled-bg);
  border-color: var(--bs-btn-disabled-border-color);
  opacity: var(--bs-btn-disabled-opacity);
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #0d6efd;
  --bs-btn-border-color: #0d6efd;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #0b5ed7;
  --bs-btn-hover-border-color: #0a58ca;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #0a58ca;
  --bs-btn-active-border-color: #0a53be;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #0d6efd;
  --bs-btn-disabled-border-color: #0d6efd;
}

.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #6c757d;
  --bs-btn-border-color: #6c757d;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #5c636a;
  --bs-btn-hover-border-color: #565e64;
  --bs-btn-focus-shadow-rgb: 130, 138, 145;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #565e64;
  --bs-btn-active-border-color: #51585e;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #6c757d;
  --bs-btn-disabled-border-color: #6c757d;
}

.btn-success {
  --bs-btn-color: #fff;
  --bs-btn-bg: #198754;
  --bs-btn-border-color: #198754;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #157347;
  --bs-btn-hover-border-color: #146c43;
  --bs-btn-focus-shadow-rgb: 60, 153, 110;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #146c43;
  --bs-btn-active-border-color: #13653f;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #198754;
  --bs-btn-disabled-border-color: #198754;
}

.btn-info {
  --bs-btn-color: #000;
  --bs-btn-bg: #0dcaf0;
  --bs-btn-border-color: #0dcaf0;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #31d2f2;
  --bs-btn-hover-border-color: #25cff2;
  --bs-btn-focus-shadow-rgb: 11, 172, 204;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #3dd5f3;
  --bs-btn-active-border-color: #25cff2;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #0dcaf0;
  --bs-btn-disabled-border-color: #0dcaf0;
}

.btn-warning {
  --bs-btn-color: #000;
  --bs-btn-bg: #ffc107;
  --bs-btn-border-color: #ffc107;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #ffca2c;
  --bs-btn-hover-border-color: #ffc720;
  --bs-btn-focus-shadow-rgb: 217, 164, 6;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #ffcd39;
  --bs-btn-active-border-color: #ffc720;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #ffc107;
  --bs-btn-disabled-border-color: #ffc107;
}

.btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: #dc3545;
  --bs-btn-border-color: #dc3545;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #bb2d3b;
  --bs-btn-hover-border-color: #b02a37;
  --bs-btn-focus-shadow-rgb: 225, 83, 97;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #b02a37;
  --bs-btn-active-border-color: #a52834;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #dc3545;
  --bs-btn-disabled-border-color: #dc3545;
}

.btn-light {
  --bs-btn-color: #000;
  --bs-btn-bg: #f8f9fa;
  --bs-btn-border-color: #f8f9fa;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #d3d4d5;
  --bs-btn-hover-border-color: #c6c7c8;
  --bs-btn-focus-shadow-rgb: 211, 212, 213;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #c6c7c8;
  --bs-btn-active-border-color: #babbbc;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #f8f9fa;
  --bs-btn-disabled-border-color: #f8f9fa;
}

.btn-dark {
  --bs-btn-color: #fff;
  --bs-btn-bg: #212529;
  --bs-btn-border-color: #212529;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #424649;
  --bs-btn-hover-border-color: #373b3e;
  --bs-btn-focus-shadow-rgb: 66, 70, 73;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #4d5154;
  --bs-btn-active-border-color: #373b3e;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #212529;
  --bs-btn-disabled-border-color: #212529;
}

.btn-outline-primary {
  --bs-btn-color: #0d6efd;
  --bs-btn-border-color: #0d6efd;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #0d6efd;
  --bs-btn-hover-border-color: #0d6efd;
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #0d6efd;
  --bs-btn-active-border-color: #0d6efd;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #0d6efd;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #0d6efd;
  --bs-gradient: none;
}

.btn-outline-secondary {
  --bs-btn-color: #6c757d;
  --bs-btn-border-color: #6c757d;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #6c757d;
  --bs-btn-hover-border-color: #6c757d;
  --bs-btn-focus-shadow-rgb: 108, 117, 125;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #6c757d;
  --bs-btn-active-border-color: #6c757d;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #6c757d;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #6c757d;
  --bs-gradient: none;
}

.btn-outline-success {
  --bs-btn-color: #198754;
  --bs-btn-border-color: #198754;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #198754;
  --bs-btn-hover-border-color: #198754;
  --bs-btn-focus-shadow-rgb: 25, 135, 84;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #198754;
  --bs-btn-active-border-color: #198754;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #198754;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #198754;
  --bs-gradient: none;
}

.btn-outline-info {
  --bs-btn-color: #0dcaf0;
  --bs-btn-border-color: #0dcaf0;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #0dcaf0;
  --bs-btn-hover-border-color: #0dcaf0;
  --bs-btn-focus-shadow-rgb: 13, 202, 240;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #0dcaf0;
  --bs-btn-active-border-color: #0dcaf0;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #0dcaf0;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #0dcaf0;
  --bs-gradient: none;
}

.btn-outline-warning {
  --bs-btn-color: #ffc107;
  --bs-btn-border-color: #ffc107;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #ffc107;
  --bs-btn-hover-border-color: #ffc107;
  --bs-btn-focus-shadow-rgb: 255, 193, 7;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #ffc107;
  --bs-btn-active-border-color: #ffc107;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #ffc107;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #ffc107;
  --bs-gradient: none;
}

.btn-outline-danger {
  --bs-btn-color: #dc3545;
  --bs-btn-border-color: #dc3545;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #dc3545;
  --bs-btn-hover-border-color: #dc3545;
  --bs-btn-focus-shadow-rgb: 220, 53, 69;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #dc3545;
  --bs-btn-active-border-color: #dc3545;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #dc3545;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #dc3545;
  --bs-gradient: none;
}

.btn-outline-light {
  --bs-btn-color: #f8f9fa;
  --bs-btn-border-color: #f8f9fa;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #f8f9fa;
  --bs-btn-hover-border-color: #f8f9fa;
  --bs-btn-focus-shadow-rgb: 248, 249, 250;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #f8f9fa;
  --bs-btn-active-border-color: #f8f9fa;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #f8f9fa;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #f8f9fa;
  --bs-gradient: none;
}

.btn-outline-dark {
  --bs-btn-color: #212529;
  --bs-btn-border-color: #212529;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #212529;
  --bs-btn-hover-border-color: #212529;
  --bs-btn-focus-shadow-rgb: 33, 37, 41;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #212529;
  --bs-btn-active-border-color: #212529;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #212529;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #212529;
  --bs-gradient: none;
}

.btn-link {
  --bs-btn-font-weight: 400;
  --bs-btn-color: var(--bs-link-color);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--bs-link-hover-color);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--bs-link-hover-color);
  --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-color: #6c757d;
  --bs-btn-disabled-border-color: transparent;
  --bs-btn-box-shadow: 0 0 0 #000;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  text-decoration: underline;
}
.btn-link:focus-visible {
  color: var(--bs-btn-color);
}
.btn-link:hover {
  color: var(--bs-btn-hover-color);
}

.btn-lg, .btn-group-lg > .btn {
  --bs-btn-padding-y: 0.5rem;
  --bs-btn-padding-x: 1rem;
  --bs-btn-font-size: 1.25rem;
  --bs-btn-border-radius: var(--bs-border-radius-lg);
}

.btn-sm, .btn-group-sm > .btn {
  --bs-btn-padding-y: 0.25rem;
  --bs-btn-padding-x: 0.5rem;
  --bs-btn-font-size: 0.875rem;
  --bs-btn-border-radius: var(--bs-border-radius-sm);
}

.fade {
  transition: opacity 0.15s linear;
}
@media (prefers-reduced-motion: reduce) {
  .fade {
    transition: none;
  }
}
.fade:not(.show) {
  opacity: 0;
}

.collapse:not(.show) {
  display: none;
}

.collapsing {
  height: 0;
  overflow: hidden;
  transition: height 0.35s ease;
}
@media (prefers-reduced-motion: reduce) {
  .collapsing {
    transition: none;
  }
}
.collapsing.collapse-horizontal {
  width: 0;
  height: auto;
  transition: width 0.35s ease;
}
@media (prefers-reduced-motion: reduce) {
  .collapsing.collapse-horizontal {
    transition: none;
  }
}

.dropup,
.dropend,
.dropdown,
.dropstart,
.dropup-center,
.dropdown-center {
  position: relative;
}

.dropdown-toggle {
  white-space: nowrap;
}
.dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
}
.dropdown-toggle:empty::after {
  margin-left: 0;
}

.dropdown-menu {
  --bs-dropdown-zindex: 1000;
  --bs-dropdown-min-width: 10rem;
  --bs-dropdown-padding-x: 0;
  --bs-dropdown-padding-y: 0.5rem;
  --bs-dropdown-spacer: 0.125rem;
  --bs-dropdown-font-size: 1rem;
  --bs-dropdown-color: var(--bs-body-color);
  --bs-dropdown-bg: var(--bs-body-bg);
  --bs-dropdown-border-color: var(--bs-border-color-translucent);
  --bs-dropdown-border-radius: var(--bs-border-radius);
  --bs-dropdown-border-width: var(--bs-border-width);
  --bs-dropdown-inner-border-radius: calc(var(--bs-border-radius) - var(--bs-border-width));
  --bs-dropdown-divider-bg: var(--bs-border-color-translucent);
  --bs-dropdown-divider-margin-y: 0.5rem;
  --bs-dropdown-box-shadow: var(--bs-box-shadow);
  --bs-dropdown-link-color: var(--bs-body-color);
  --bs-dropdown-link-hover-color: var(--bs-body-color);
  --bs-dropdown-link-hover-bg: var(--bs-tertiary-bg);
  --bs-dropdown-link-active-color: #fff;
  --bs-dropdown-link-active-bg: #0d6efd;
  --bs-dropdown-link-disabled-color: var(--bs-tertiary-color);
  --bs-dropdown-item-padding-x: 1rem;
  --bs-dropdown-item-padding-y: 0.25rem;
  --bs-dropdown-header-color: #6c757d;
  --bs-dropdown-header-padding-x: 1rem;
  --bs-dropdown-header-padding-y: 0.5rem;
  position: absolute;
  z-index: var(--bs-dropdown-zindex);
  display: none;
  min-width: var(--bs-dropdown-min-width);
  padding: var(--bs-dropdown-padding-y) var(--bs-dropdown-padding-x);
  margin: 0;
  font-size: var(--bs-dropdown-font-size);
  color: var(--bs-dropdown-color);
  text-align: left;
  list-style: none;
  background-color: var(--bs-dropdown-bg);
  background-clip: padding-box;
  border: var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color);
  border-radius: var(--bs-dropdown-border-radius);
}
.dropdown-menu[data-bs-popper] {
  top: 100%;
  left: 0;
  margin-top: var(--bs-dropdown-spacer);
}

.dropdown-menu-start {
  --bs-position: start;
}
.dropdown-menu-start[data-bs-popper] {
  right: auto;
  left: 0;
}

.dropdown-menu-end {
  --bs-position: end;
}
.dropdown-menu-end[data-bs-popper] {
  right: 0;
  left: auto;
}

@media (min-width: 576px) {
  .dropdown-menu-sm-start {
    --bs-position: start;
  }
  .dropdown-menu-sm-start[data-bs-popper] {
    right: auto;
    left: 0;
  }
  .dropdown-menu-sm-end {
    --bs-position: end;
  }
  .dropdown-menu-sm-end[data-bs-popper] {
    right: 0;
    left: auto;
  }
}
@media (min-width: 768px) {
  .dropdown-menu-md-start {
    --bs-position: start;
  }
  .dropdown-menu-md-start[data-bs-popper] {
    right: auto;
    left: 0;
  }
  .dropdown-menu-md-end {
    --bs-position: end;
  }
  .dropdown-menu-md-end[data-bs-popper] {
    right: 0;
    left: auto;
  }
}
@media (min-width: 992px) {
  .dropdown-menu-lg-start {
    --bs-position: start;
  }
  .dropdown-menu-lg-start[data-bs-popper] {
    right: auto;
    left: 0;
  }
  .dropdown-menu-lg-end {
    --bs-position: end;
  }
  .dropdown-menu-lg-end[data-bs-popper] {
    right: 0;
    left: auto;
  }
}
@media (min-width: 1200px) {
  .dropdown-menu-xl-start {
    --bs-position: start;
  }
  .dropdown-menu-xl-start[data-bs-popper] {
    right: auto;
    left: 0;
  }
  .dropdown-menu-xl-end {
    --bs-position: end;
  }
  .dropdown-menu-xl-end[data-bs-popper] {
    right: 0;
    left: auto;
  }
}
@media (min-width: 1400px) {
  .dropdown-menu-xxl-start {
    --bs-position: start;
  }
  .dropdown-menu-xxl-start[data-bs-popper] {
    right: auto;
    left: 0;
  }
  .dropdown-menu-xxl-end {
    --bs-position: end;
  }
  .dropdown-menu-xxl-end[data-bs-popper] {
    right: 0;
    left: auto;
  }
}
.dropup .dropdown-menu[data-bs-popper] {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: var(--bs-dropdown-spacer);
}
.dropup .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0;
  border-right: 0.3em solid transparent;
  border-bottom: 0.3em solid;
  border-left: 0.3em solid transparent;
}
.dropup .dropdown-toggle:empty::after {
  margin-left: 0;
}

.dropend .dropdown-menu[data-bs-popper] {
  top: 0;
  right: auto;
  left: 100%;
  margin-top: 0;
  margin-left: var(--bs-dropdown-spacer);
}
.dropend .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid transparent;
  border-right: 0;
  border-bottom: 0.3em solid transparent;
  border-left: 0.3em solid;
}
.dropend .dropdown-toggle:empty::after {
  margin-left: 0;
}
.dropend .dropdown-toggle::after {
  vertical-align: 0;
}

.dropstart .dropdown-menu[data-bs-popper] {
  top: 0;
  right: 100%;
  left: auto;
  margin-top: 0;
  margin-right: var(--bs-dropdown-spacer);
}
.dropstart .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
}
.dropstart .dropdown-toggle::after {
  display: none;
}
.dropstart .dropdown-toggle::before {
  display: inline-block;
  margin-right: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid transparent;
  border-right: 0.3em solid;
  border-bottom: 0.3em solid transparent;
}
.dropstart .dropdown-toggle:empty::after {
  margin-left: 0;
}
.dropstart .dropdown-toggle::before {
  vertical-align: 0;
}

.dropdown-divider {
  height: 0;
  margin: var(--bs-dropdown-divider-margin-y) 0;
  overflow: hidden;
  border-top: 1px solid var(--bs-dropdown-divider-bg);
  opacity: 1;
}

.dropdown-item {
  display: block;
  width: 100%;
  padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
  clear: both;
  font-weight: 400;
  color: var(--bs-dropdown-link-color);
  text-align: inherit;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
  border-radius: var(--bs-dropdown-item-border-radius, 0);
}
.dropdown-item:hover, .dropdown-item:focus {
  color: var(--bs-dropdown-link-hover-color);
  background-color: var(--bs-dropdown-link-hover-bg);
}
.dropdown-item.active, .dropdown-item:active {
  color: var(--bs-dropdown-link-active-color);
  text-decoration: none;
  background-color: var(--bs-dropdown-link-active-bg);
}
.dropdown-item.disabled, .dropdown-item:disabled {
  color: var(--bs-dropdown-link-disabled-color);
  pointer-events: none;
  background-color: transparent;
}

.dropdown-menu.show {
  display: block;
}

.dropdown-header {
  display: block;
  padding: var(--bs-dropdown-header-padding-y) var(--bs-dropdown-header-padding-x);
  margin-bottom: 0;
  font-size: 0.875rem;
  color: var(--bs-dropdown-header-color);
  white-space: nowrap;
}

.dropdown-item-text {
  display: block;
  padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
  color: var(--bs-dropdown-link-color);
}

.dropdown-menu-dark {
  --bs-dropdown-color: #dee2e6;
  --bs-dropdown-bg: #343a40;
  --bs-dropdown-border-color: var(--bs-border-color-translucent);
  --bs-dropdown-box-shadow: ;
  --bs-dropdown-link-color: #dee2e6;
  --bs-dropdown-link-hover-color: #fff;
  --bs-dropdown-divider-bg: var(--bs-border-color-translucent);
  --bs-dropdown-link-hover-bg: rgba(255, 255, 255, 0.15);
  --bs-dropdown-link-active-color: #fff;
  --bs-dropdown-link-active-bg: #0d6efd;
  --bs-dropdown-link-disabled-color: #adb5bd;
  --bs-dropdown-header-color: #adb5bd;
}

.btn-group,
.btn-group-vertical {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}
.btn-group > .btn,
.btn-group-vertical > .btn {
  position: relative;
  flex: 1 1 auto;
}
.btn-group > .btn-check:checked + .btn,
.btn-group > .btn-check:focus + .btn,
.btn-group > .btn:hover,
.btn-group > .btn:focus,
.btn-group > .btn:active,
.btn-group > .btn.active,
.btn-group-vertical > .btn-check:checked + .btn,
.btn-group-vertical > .btn-check:focus + .btn,
.btn-group-vertical > .btn:hover,
.btn-group-vertical > .btn:focus,
.btn-group-vertical > .btn:active,
.btn-group-vertical > .btn.active {
  z-index: 1;
}

.btn-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.btn-toolbar .input-group {
  width: auto;
}

.btn-group {
  border-radius: var(--bs-border-radius);
}
.btn-group > :not(.btn-check:first-child) + .btn,
.btn-group > .btn-group:not(:first-child) {
  margin-left: calc(-1 * var(--bs-border-width));
}
.btn-group > .btn:not(:last-child):not(.dropdown-toggle),
.btn-group > .btn.dropdown-toggle-split:first-child,
.btn-group > .btn-group:not(:last-child) > .btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.btn-group > .btn:nth-child(n+3),
.btn-group > :not(.btn-check) + .btn,
.btn-group > .btn-group:not(:first-child) > .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.dropdown-toggle-split {
  padding-right: 0.5625rem;
  padding-left: 0.5625rem;
}
.dropdown-toggle-split::after, .dropup .dropdown-toggle-split::after, .dropend .dropdown-toggle-split::after {
  margin-left: 0;
}
.dropstart .dropdown-toggle-split::before {
  margin-right: 0;
}

.btn-sm + .dropdown-toggle-split, .btn-group-sm > .btn + .dropdown-toggle-split {
  padding-right: 0.375rem;
  padding-left: 0.375rem;
}

.btn-lg + .dropdown-toggle-split, .btn-group-lg > .btn + .dropdown-toggle-split {
  padding-right: 0.75rem;
  padding-left: 0.75rem;
}

.btn-group-vertical {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.btn-group-vertical > .btn,
.btn-group-vertical > .btn-group {
  width: 100%;
}
.btn-group-vertical > .btn:not(:first-child),
.btn-group-vertical > .btn-group:not(:first-child) {
  margin-top: calc(-1 * var(--bs-border-width));
}
.btn-group-vertical > .btn:not(:last-child):not(.dropdown-toggle),
.btn-group-vertical > .btn-group:not(:last-child) > .btn {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.btn-group-vertical > .btn:nth-child(n+3),
.btn-group-vertical > :not(.btn-check) + .btn,
.btn-group-vertical > .btn-group:not(:first-child) > .btn {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.nav {
  --bs-nav-link-padding-x: 1rem;
  --bs-nav-link-padding-y: 0.5rem;
  --bs-nav-link-font-weight: ;
  --bs-nav-link-color: var(--bs-link-color);
  --bs-nav-link-hover-color: var(--bs-link-hover-color);
  --bs-nav-link-disabled-color: var(--bs-secondary-color);
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.nav-link {
  display: block;
  padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
  font-size: var(--bs-nav-link-font-size);
  font-weight: var(--bs-nav-link-font-weight);
  color: var(--bs-nav-link-color);
  text-decoration: none;
  background: none;
  border: 0;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .nav-link {
    transition: none;
  }
}
.nav-link:hover, .nav-link:focus {
  color: var(--bs-nav-link-hover-color);
}
.nav-link:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
.nav-link.disabled, .nav-link:disabled {
  color: var(--bs-nav-link-disabled-color);
  pointer-events: none;
  cursor: default;
}

.nav-tabs {
  --bs-nav-tabs-border-width: var(--bs-border-width);
  --bs-nav-tabs-border-color: var(--bs-border-color);
  --bs-nav-tabs-border-radius: var(--bs-border-radius);
  --bs-nav-tabs-link-hover-border-color: var(--bs-secondary-bg) var(--bs-secondary-bg) var(--bs-border-color);
  --bs-nav-tabs-link-active-color: var(--bs-emphasis-color);
  --bs-nav-tabs-link-active-bg: var(--bs-body-bg);
  --bs-nav-tabs-link-active-border-color: var(--bs-border-color) var(--bs-border-color) var(--bs-body-bg);
  border-bottom: var(--bs-nav-tabs-border-width) solid var(--bs-nav-tabs-border-color);
}
.nav-tabs .nav-link {
  margin-bottom: calc(-1 * var(--bs-nav-tabs-border-width));
  border: var(--bs-nav-tabs-border-width) solid transparent;
  border-top-left-radius: var(--bs-nav-tabs-border-radius);
  border-top-right-radius: var(--bs-nav-tabs-border-radius);
}
.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
  isolation: isolate;
  border-color: var(--bs-nav-tabs-link-hover-border-color);
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: var(--bs-nav-tabs-link-active-color);
  background-color: var(--bs-nav-tabs-link-active-bg);
  border-color: var(--bs-nav-tabs-link-active-border-color);
}
.nav-tabs .dropdown-menu {
  margin-top: calc(-1 * var(--bs-nav-tabs-border-width));
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.nav-pills {
  --bs-nav-pills-border-radius: var(--bs-border-radius);
  --bs-nav-pills-link-active-color: #fff;
  --bs-nav-pills-link-active-bg: #0d6efd;
}
.nav-pills .nav-link {
  border-radius: var(--bs-nav-pills-border-radius);
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: var(--bs-nav-pills-link-active-color);
  background-color: var(--bs-nav-pills-link-active-bg);
}

.nav-underline {
  --bs-nav-underline-gap: 1rem;
  --bs-nav-underline-border-width: 0.125rem;
  --bs-nav-underline-link-active-color: var(--bs-emphasis-color);
  gap: var(--bs-nav-underline-gap);
}
.nav-underline .nav-link {
  padding-right: 0;
  padding-left: 0;
  border-bottom: var(--bs-nav-underline-border-width) solid transparent;
}
.nav-underline .nav-link:hover, .nav-underline .nav-link:focus {
  border-bottom-color: currentcolor;
}
.nav-underline .nav-link.active,
.nav-underline .show > .nav-link {
  font-weight: 700;
  color: var(--bs-nav-underline-link-active-color);
  border-bottom-color: currentcolor;
}

.nav-fill > .nav-link,
.nav-fill .nav-item {
  flex: 1 1 auto;
  text-align: center;
}

.nav-justified > .nav-link,
.nav-justified .nav-item {
  flex-grow: 1;
  flex-basis: 0;
  text-align: center;
}

.nav-fill .nav-item .nav-link,
.nav-justified .nav-item .nav-link {
  width: 100%;
}

.tab-content > .tab-pane {
  display: none;
}
.tab-content > .active {
  display: block;
}

.navbar {
  --bs-navbar-padding-x: 0;
  --bs-navbar-padding-y: 0.5rem;
  --bs-navbar-color: rgba(var(--bs-emphasis-color-rgb), 0.65);
  --bs-navbar-hover-color: rgba(var(--bs-emphasis-color-rgb), 0.8);
  --bs-navbar-disabled-color: rgba(var(--bs-emphasis-color-rgb), 0.3);
  --bs-navbar-active-color: rgba(var(--bs-emphasis-color-rgb), 1);
  --bs-navbar-brand-padding-y: 0.3125rem;
  --bs-navbar-brand-margin-end: 1rem;
  --bs-navbar-brand-font-size: 1.25rem;
  --bs-navbar-brand-color: rgba(var(--bs-emphasis-color-rgb), 1);
  --bs-navbar-brand-hover-color: rgba(var(--bs-emphasis-color-rgb), 1);
  --bs-navbar-nav-link-padding-x: 0.5rem;
  --bs-navbar-toggler-padding-y: 0.25rem;
  --bs-navbar-toggler-padding-x: 0.75rem;
  --bs-navbar-toggler-font-size: 1.25rem;
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  --bs-navbar-toggler-border-color: rgba(var(--bs-emphasis-color-rgb), 0.15);
  --bs-navbar-toggler-border-radius: var(--bs-border-radius);
  --bs-navbar-toggler-focus-width: 0.25rem;
  --bs-navbar-toggler-transition: box-shadow 0.15s ease-in-out;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: var(--bs-navbar-padding-y) var(--bs-navbar-padding-x);
}
.navbar > .container,
.navbar > .container-fluid,
.navbar > .container-sm,
.navbar > .container-md,
.navbar > .container-lg,
.navbar > .container-xl,
.navbar > .container-xxl {
  display: flex;
  flex-wrap: inherit;
  align-items: center;
  justify-content: space-between;
}
.navbar-brand {
  padding-top: var(--bs-navbar-brand-padding-y);
  padding-bottom: var(--bs-navbar-brand-padding-y);
  margin-right: var(--bs-navbar-brand-margin-end);
  font-size: var(--bs-navbar-brand-font-size);
  color: var(--bs-navbar-brand-color);
  text-decoration: none;
  white-space: nowrap;
}
.navbar-brand:hover, .navbar-brand:focus {
  color: var(--bs-navbar-brand-hover-color);
}

.navbar-nav {
  --bs-nav-link-padding-x: 0;
  --bs-nav-link-padding-y: 0.5rem;
  --bs-nav-link-font-weight: ;
  --bs-nav-link-color: var(--bs-navbar-color);
  --bs-nav-link-hover-color: var(--bs-navbar-hover-color);
  --bs-nav-link-disabled-color: var(--bs-navbar-disabled-color);
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
  color: var(--bs-navbar-active-color);
}
.navbar-nav .dropdown-menu {
  position: static;
}

.navbar-text {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  color: var(--bs-navbar-color);
}
.navbar-text a,
.navbar-text a:hover,
.navbar-text a:focus {
  color: var(--bs-navbar-active-color);
}

.navbar-collapse {
  flex-grow: 1;
  flex-basis: 100%;
  align-items: center;
}

.navbar-toggler {
  padding: var(--bs-navbar-toggler-padding-y) var(--bs-navbar-toggler-padding-x);
  font-size: var(--bs-navbar-toggler-font-size);
  line-height: 1;
  color: var(--bs-navbar-color);
  background-color: transparent;
  border: var(--bs-border-width) solid var(--bs-navbar-toggler-border-color);
  border-radius: var(--bs-navbar-toggler-border-radius);
  transition: var(--bs-navbar-toggler-transition);
}
@media (prefers-reduced-motion: reduce) {
  .navbar-toggler {
    transition: none;
  }
}
.navbar-toggler:hover {
  text-decoration: none;
}
.navbar-toggler:focus {
  text-decoration: none;
  outline: 0;
  box-shadow: 0 0 0 var(--bs-navbar-toggler-focus-width);
}

.navbar-toggler-icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  background-image: var(--bs-navbar-toggler-icon-bg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}

.navbar-nav-scroll {
  max-height: var(--bs-scroll-height, 75vh);
  overflow-y: auto;
}

@media (min-width: 576px) {
  .navbar-expand-sm {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-sm .navbar-nav {
    flex-direction: row;
  }
  .navbar-expand-sm .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-sm .navbar-nav .nav-link {
    padding-right: var(--bs-navbar-nav-link-padding-x);
    padding-left: var(--bs-navbar-nav-link-padding-x);
  }
  .navbar-expand-sm .navbar-nav-scroll {
    overflow: visible;
  }
  .navbar-expand-sm .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }
  .navbar-expand-sm .navbar-toggler {
    display: none;
  }
  .navbar-expand-sm .offcanvas {
    position: static;
    z-index: auto;
    flex-grow: 1;
    width: auto !important;
    height: auto !important;
    visibility: visible !important;
    background-color: transparent !important;
    border: 0 !important;
    transform: none !important;
    transition: none;
  }
  .navbar-expand-sm .offcanvas .offcanvas-header {
    display: none;
  }
  .navbar-expand-sm .offcanvas .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
  }
}
@media (min-width: 768px) {
  .navbar-expand-md {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-md .navbar-nav {
    flex-direction: row;
  }
  .navbar-expand-md .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-md .navbar-nav .nav-link {
    padding-right: var(--bs-navbar-nav-link-padding-x);
    padding-left: var(--bs-navbar-nav-link-padding-x);
  }
  .navbar-expand-md .navbar-nav-scroll {
    overflow: visible;
  }
  .navbar-expand-md .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }
  .navbar-expand-md .navbar-toggler {
    display: none;
  }
  .navbar-expand-md .offcanvas {
    position: static;
    z-index: auto;
    flex-grow: 1;
    width: auto !important;
    height: auto !important;
    visibility: visible !important;
    background-color: transparent !important;
    border: 0 !important;
    transform: none !important;
    transition: none;
  }
  .navbar-expand-md .offcanvas .offcanvas-header {
    display: none;
  }
  .navbar-expand-md .offcanvas .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
  }
}
@media (min-width: 992px) {
  .navbar-expand-lg {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-lg .navbar-nav {
    flex-direction: row;
  }
  .navbar-expand-lg .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-lg .navbar-nav .nav-link {
    padding-right: var(--bs-navbar-nav-link-padding-x);
    padding-left: var(--bs-navbar-nav-link-padding-x);
  }
  .navbar-expand-lg .navbar-nav-scroll {
    overflow: visible;
  }
  .navbar-expand-lg .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }
  .navbar-expand-lg .navbar-toggler {
    display: none;
  }
  .navbar-expand-lg .offcanvas {
    position: static;
    z-index: auto;
    flex-grow: 1;
    width: auto !important;
    height: auto !important;
    visibility: visible !important;
    background-color: transparent !important;
    border: 0 !important;
    transform: none !important;
    transition: none;
  }
  .navbar-expand-lg .offcanvas .offcanvas-header {
    display: none;
  }
  .navbar-expand-lg .offcanvas .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
  }
}
@media (min-width: 1200px) {
  .navbar-expand-xl {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-xl .navbar-nav {
    flex-direction: row;
  }
  .navbar-expand-xl .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-xl .navbar-nav .nav-link {
    padding-right: var(--bs-navbar-nav-link-padding-x);
    padding-left: var(--bs-navbar-nav-link-padding-x);
  }
  .navbar-expand-xl .navbar-nav-scroll {
    overflow: visible;
  }
  .navbar-expand-xl .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }
  .navbar-expand-xl .navbar-toggler {
    display: none;
  }
  .navbar-expand-xl .offcanvas {
    position: static;
    z-index: auto;
    flex-grow: 1;
    width: auto !important;
    height: auto !important;
    visibility: visible !important;
    background-color: transparent !important;
    border: 0 !important;
    transform: none !important;
    transition: none;
  }
  .navbar-expand-xl .offcanvas .offcanvas-header {
    display: none;
  }
  .navbar-expand-xl .offcanvas .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
  }
}
@media (min-width: 1400px) {
  .navbar-expand-xxl {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-xxl .navbar-nav {
    flex-direction: row;
  }
  .navbar-expand-xxl .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-xxl .navbar-nav .nav-link {
    padding-right: var(--bs-navbar-nav-link-padding-x);
    padding-left: var(--bs-navbar-nav-link-padding-x);
  }
  .navbar-expand-xxl .navbar-nav-scroll {
    overflow: visible;
  }
  .navbar-expand-xxl .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }
  .navbar-expand-xxl .navbar-toggler {
    display: none;
  }
  .navbar-expand-xxl .offcanvas {
    position: static;
    z-index: auto;
    flex-grow: 1;
    width: auto !important;
    height: auto !important;
    visibility: visible !important;
    background-color: transparent !important;
    border: 0 !important;
    transform: none !important;
    transition: none;
  }
  .navbar-expand-xxl .offcanvas .offcanvas-header {
    display: none;
  }
  .navbar-expand-xxl .offcanvas .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
  }
}
.navbar-expand {
  flex-wrap: nowrap;
  justify-content: flex-start;
}
.navbar-expand .navbar-nav {
  flex-direction: row;
}
.navbar-expand .navbar-nav .dropdown-menu {
  position: absolute;
}
.navbar-expand .navbar-nav .nav-link {
  padding-right: var(--bs-navbar-nav-link-padding-x);
  padding-left: var(--bs-navbar-nav-link-padding-x);
}
.navbar-expand .navbar-nav-scroll {
  overflow: visible;
}
.navbar-expand .navbar-collapse {
  display: flex !important;
  flex-basis: auto;
}
.navbar-expand .navbar-toggler {
  display: none;
}
.navbar-expand .offcanvas {
  position: static;
  z-index: auto;
  flex-grow: 1;
  width: auto !important;
  height: auto !important;
  visibility: visible !important;
  background-color: transparent !important;
  border: 0 !important;
  transform: none !important;
  transition: none;
}
.navbar-expand .offcanvas .offcanvas-header {
  display: none;
}
.navbar-expand .offcanvas .offcanvas-body {
  display: flex;
  flex-grow: 0;
  padding: 0;
  overflow-y: visible;
}

.navbar-dark,
.navbar[data-bs-theme=dark] {
  --bs-navbar-color: rgba(255, 255, 255, 0.55);
  --bs-navbar-hover-color: rgba(255, 255, 255, 0.75);
  --bs-navbar-disabled-color: rgba(255, 255, 255, 0.25);
  --bs-navbar-active-color: #fff;
  --bs-navbar-brand-color: #fff;
  --bs-navbar-brand-hover-color: #fff;
  --bs-navbar-toggler-border-color: rgba(255, 255, 255, 0.1);
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

[data-bs-theme=dark] .navbar-toggler-icon {
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.card {
  --bs-card-spacer-y: 1rem;
  --bs-card-spacer-x: 1rem;
  --bs-card-title-spacer-y: 0.5rem;
  --bs-card-title-color: ;
  --bs-card-subtitle-color: ;
  --bs-card-border-width: var(--bs-border-width);
  --bs-card-border-color: var(--bs-border-color-translucent);
  --bs-card-border-radius: var(--bs-border-radius);
  --bs-card-box-shadow: ;
  --bs-card-inner-border-radius: calc(var(--bs-border-radius) - (var(--bs-border-width)));
  --bs-card-cap-padding-y: 0.5rem;
  --bs-card-cap-padding-x: 1rem;
  --bs-card-cap-bg: rgba(var(--bs-body-color-rgb), 0.03);
  --bs-card-cap-color: ;
  --bs-card-height: ;
  --bs-card-color: ;
  --bs-card-bg: var(--bs-body-bg);
  --bs-card-img-overlay-padding: 1rem;
  --bs-card-group-margin: 0.75rem;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: var(--bs-card-height);
  color: var(--bs-body-color);
  word-wrap: break-word;
  background-color: var(--bs-card-bg);
  background-clip: border-box;
  border: var(--bs-card-border-width) solid var(--bs-card-border-color);
  border-radius: var(--bs-card-border-radius);
}
.card > hr {
  margin-right: 0;
  margin-left: 0;
}
.card > .list-group {
  border-top: inherit;
  border-bottom: inherit;
}
.card > .list-group:first-child {
  border-top-width: 0;
  border-top-left-radius: var(--bs-card-inner-border-radius);
  border-top-right-radius: var(--bs-card-inner-border-radius);
}
.card > .list-group:last-child {
  border-bottom-width: 0;
  border-bottom-right-radius: var(--bs-card-inner-border-radius);
  border-bottom-left-radius: var(--bs-card-inner-border-radius);
}
.card > .card-header + .list-group,
.card > .list-group + .card-footer {
  border-top: 0;
}

.card-body {
  flex: 1 1 auto;
  padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
  color: var(--bs-card-color);
}

.card-title {
  margin-bottom: var(--bs-card-title-spacer-y);
  color: var(--bs-card-title-color);
}

.card-subtitle {
  margin-top: calc(-0.5 * var(--bs-card-title-spacer-y));
  margin-bottom: 0;
  color: var(--bs-card-subtitle-color);
}

.card-text:last-child {
  margin-bottom: 0;
}

.card-link + .card-link {
  margin-left: var(--bs-card-spacer-x);
}

.card-header {
  padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
  margin-bottom: 0;
  color: var(--bs-card-cap-color);
  background-color: var(--bs-card-cap-bg);
  border-bottom: var(--bs-card-border-width) solid var(--bs-card-border-color);
}
.card-header:first-child {
  border-radius: var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) 0 0;
}

.card-footer {
  padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
  color: var(--bs-card-cap-color);
  background-color: var(--bs-card-cap-bg);
  border-top: var(--bs-card-border-width) solid var(--bs-card-border-color);
}
.card-footer:last-child {
  border-radius: 0 0 var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius);
}

.card-header-tabs {
  margin-right: calc(-0.5 * var(--bs-card-cap-padding-x));
  margin-bottom: calc(-1 * var(--bs-card-cap-padding-y));
  margin-left: calc(-0.5 * var(--bs-card-cap-padding-x));
  border-bottom: 0;
}
.card-header-tabs .nav-link.active {
  background-color: var(--bs-card-bg);
  border-bottom-color: var(--bs-card-bg);
}

.card-header-pills {
  margin-right: calc(-0.5 * var(--bs-card-cap-padding-x));
  margin-left: calc(-0.5 * var(--bs-card-cap-padding-x));
}

.card-img-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: var(--bs-card-img-overlay-padding);
  border-radius: var(--bs-card-inner-border-radius);
}

.card-img,
.card-img-top,
.card-img-bottom {
  width: 100%;
}

.card-img,
.card-img-top {
  border-top-left-radius: var(--bs-card-inner-border-radius);
  border-top-right-radius: var(--bs-card-inner-border-radius);
}

.card-img,
.card-img-bottom {
  border-bottom-right-radius: var(--bs-card-inner-border-radius);
  border-bottom-left-radius: var(--bs-card-inner-border-radius);
}

.card-group > .card {
  margin-bottom: var(--bs-card-group-margin);
}
@media (min-width: 576px) {
  .card-group {
    display: flex;
    flex-flow: row wrap;
  }
  .card-group > .card {
    flex: 1 0 0;
    margin-bottom: 0;
  }
  .card-group > .card + .card {
    margin-left: 0;
    border-left: 0;
  }
  .card-group > .card:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .card-group > .card:not(:last-child) > .card-img-top,
  .card-group > .card:not(:last-child) > .card-header {
    border-top-right-radius: 0;
  }
  .card-group > .card:not(:last-child) > .card-img-bottom,
  .card-group > .card:not(:last-child) > .card-footer {
    border-bottom-right-radius: 0;
  }
  .card-group > .card:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  .card-group > .card:not(:first-child) > .card-img-top,
  .card-group > .card:not(:first-child) > .card-header {
    border-top-left-radius: 0;
  }
  .card-group > .card:not(:first-child) > .card-img-bottom,
  .card-group > .card:not(:first-child) > .card-footer {
    border-bottom-left-radius: 0;
  }
}

.accordion {
  --bs-accordion-color: var(--bs-body-color);
  --bs-accordion-bg: var(--bs-body-bg);
  --bs-accordion-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease;
  --bs-accordion-border-color: var(--bs-border-color);
  --bs-accordion-border-width: var(--bs-border-width);
  --bs-accordion-border-radius: var(--bs-border-radius);
  --bs-accordion-inner-border-radius: calc(var(--bs-border-radius) - (var(--bs-border-width)));
  --bs-accordion-btn-padding-x: 1.25rem;
  --bs-accordion-btn-padding-y: 1rem;
  --bs-accordion-btn-color: var(--bs-body-color);
  --bs-accordion-btn-bg: var(--bs-accordion-bg);
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23212529' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  --bs-accordion-btn-icon-width: 1.25rem;
  --bs-accordion-btn-icon-transform: rotate(-180deg);
  --bs-accordion-btn-icon-transition: transform 0.2s ease-in-out;
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23052c65' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  --bs-accordion-body-padding-x: 1.25rem;
  --bs-accordion-body-padding-y: 1rem;
  --bs-accordion-active-color: var(--bs-primary-text-emphasis);
  --bs-accordion-active-bg: var(--bs-primary-bg-subtle);
}

.accordion-button {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);
  font-size: 1rem;
  color: var(--bs-accordion-btn-color);
  text-align: left;
  background-color: var(--bs-accordion-btn-bg);
  border: 0;
  border-radius: 0;
  overflow-anchor: none;
  transition: var(--bs-accordion-transition);
}
@media (prefers-reduced-motion: reduce) {
  .accordion-button {
    transition: none;
  }
}
.accordion-button:not(.collapsed) {
  color: var(--bs-accordion-active-color);
  background-color: var(--bs-accordion-active-bg);
  box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
}
.accordion-button:not(.collapsed)::after {
  background-image: var(--bs-accordion-btn-active-icon);
  transform: var(--bs-accordion-btn-icon-transform);
}
.accordion-button::after {
  flex-shrink: 0;
  width: var(--bs-accordion-btn-icon-width);
  height: var(--bs-accordion-btn-icon-width);
  margin-left: auto;
  content: "";
  background-image: var(--bs-accordion-btn-icon);
  background-repeat: no-repeat;
  background-size: var(--bs-accordion-btn-icon-width);
  transition: var(--bs-accordion-btn-icon-transition);
}
@media (prefers-reduced-motion: reduce) {
  .accordion-button::after {
    transition: none;
  }
}
.accordion-button:hover {
  z-index: 2;
}
.accordion-button:focus {
  z-index: 3;
  outline: 0;
  box-shadow: var(--bs-accordion-btn-focus-box-shadow);
}

.accordion-header {
  margin-bottom: 0;
}

.accordion-item {
  color: var(--bs-accordion-color);
  background-color: var(--bs-accordion-bg);
  border: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color);
}
.accordion-item:first-of-type {
  border-top-left-radius: var(--bs-accordion-border-radius);
  border-top-right-radius: var(--bs-accordion-border-radius);
}
.accordion-item:first-of-type > .accordion-header .accordion-button {
  border-top-left-radius: var(--bs-accordion-inner-border-radius);
  border-top-right-radius: var(--bs-accordion-inner-border-radius);
}
.accordion-item:not(:first-of-type) {
  border-top: 0;
}
.accordion-item:last-of-type {
  border-bottom-right-radius: var(--bs-accordion-border-radius);
  border-bottom-left-radius: var(--bs-accordion-border-radius);
}
.accordion-item:last-of-type > .accordion-header .accordion-button.collapsed {
  border-bottom-right-radius: var(--bs-accordion-inner-border-radius);
  border-bottom-left-radius: var(--bs-accordion-inner-border-radius);
}
.accordion-item:last-of-type > .accordion-collapse {
  border-bottom-right-radius: var(--bs-accordion-border-radius);
  border-bottom-left-radius: var(--bs-accordion-border-radius);
}

.accordion-body {
  padding: var(--bs-accordion-body-padding-y) var(--bs-accordion-body-padding-x);
}

.accordion-flush > .accordion-item {
  border-right: 0;
  border-left: 0;
  border-radius: 0;
}
.accordion-flush > .accordion-item:first-child {
  border-top: 0;
}
.accordion-flush > .accordion-item:last-child {
  border-bottom: 0;
}
.accordion-flush > .accordion-item > .accordion-collapse,
.accordion-flush > .accordion-item > .accordion-header .accordion-button,
.accordion-flush > .accordion-item > .accordion-header .accordion-button.collapsed {
  border-radius: 0;
}

[data-bs-theme=dark] .accordion-button::after {
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236ea8fe'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236ea8fe'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e");
}

.breadcrumb {
  --bs-breadcrumb-padding-x: 0;
  --bs-breadcrumb-padding-y: 0;
  --bs-breadcrumb-margin-bottom: 1rem;
  --bs-breadcrumb-bg: ;
  --bs-breadcrumb-border-radius: ;
  --bs-breadcrumb-divider-color: var(--bs-secondary-color);
  --bs-breadcrumb-item-padding-x: 0.5rem;
  --bs-breadcrumb-item-active-color: var(--bs-secondary-color);
  display: flex;
  flex-wrap: wrap;
  padding: var(--bs-breadcrumb-padding-y) var(--bs-breadcrumb-padding-x);
  margin-bottom: var(--bs-breadcrumb-margin-bottom);
  font-size: var(--bs-breadcrumb-font-size);
  list-style: none;
  background-color: var(--bs-breadcrumb-bg);
  border-radius: var(--bs-breadcrumb-border-radius);
}

.breadcrumb-item + .breadcrumb-item {
  padding-left: var(--bs-breadcrumb-item-padding-x);
}
.breadcrumb-item + .breadcrumb-item::before {
  float: left;
  padding-right: var(--bs-breadcrumb-item-padding-x);
  color: var(--bs-breadcrumb-divider-color);
  content: var(--bs-breadcrumb-divider, "/") /* rtl: var(--bs-breadcrumb-divider, "/") */;
}
.breadcrumb-item.active {
  color: var(--bs-breadcrumb-item-active-color);
}

.pagination {
  --bs-pagination-padding-x: 0.75rem;
  --bs-pagination-padding-y: 0.375rem;
  --bs-pagination-font-size: 1rem;
  --bs-pagination-color: var(--bs-link-color);
  --bs-pagination-bg: var(--bs-body-bg);
  --bs-pagination-border-width: var(--bs-border-width);
  --bs-pagination-border-color: var(--bs-border-color);
  --bs-pagination-border-radius: var(--bs-border-radius);
  --bs-pagination-hover-color: var(--bs-link-hover-color);
  --bs-pagination-hover-bg: var(--bs-tertiary-bg);
  --bs-pagination-hover-border-color: var(--bs-border-color);
  --bs-pagination-focus-color: var(--bs-link-hover-color);
  --bs-pagination-focus-bg: var(--bs-secondary-bg);
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  --bs-pagination-active-color: #fff;
  --bs-pagination-active-bg: #0d6efd;
  --bs-pagination-active-border-color: #0d6efd;
  --bs-pagination-disabled-color: var(--bs-secondary-color);
  --bs-pagination-disabled-bg: var(--bs-secondary-bg);
  --bs-pagination-disabled-border-color: var(--bs-border-color);
  display: flex;
  padding-left: 0;
  list-style: none;
}

.page-link {
  position: relative;
  display: block;
  padding: var(--bs-pagination-padding-y) var(--bs-pagination-padding-x);
  font-size: var(--bs-pagination-font-size);
  color: var(--bs-pagination-color);
  text-decoration: none;
  background-color: var(--bs-pagination-bg);
  border: var(--bs-pagination-border-width) solid var(--bs-pagination-border-color);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .page-link {
    transition: none;
  }
}
.page-link:hover {
  z-index: 2;
  color: var(--bs-pagination-hover-color);
  background-color: var(--bs-pagination-hover-bg);
  border-color: var(--bs-pagination-hover-border-color);
}
.page-link:focus {
  z-index: 3;
  color: var(--bs-pagination-focus-color);
  background-color: var(--bs-pagination-focus-bg);
  outline: 0;
  box-shadow: var(--bs-pagination-focus-box-shadow);
}
.page-link.active, .active > .page-link {
  z-index: 3;
  color: var(--bs-pagination-active-color);
  background-color: var(--bs-pagination-active-bg);
  border-color: var(--bs-pagination-active-border-color);
}
.page-link.disabled, .disabled > .page-link {
  color: var(--bs-pagination-disabled-color);
  pointer-events: none;
  background-color: var(--bs-pagination-disabled-bg);
  border-color: var(--bs-pagination-disabled-border-color);
}

.page-item:not(:first-child) .page-link {
  margin-left: calc(-1 * var(--bs-border-width));
}
.page-item:first-child .page-link {
  border-top-left-radius: var(--bs-pagination-border-radius);
  border-bottom-left-radius: var(--bs-pagination-border-radius);
}
.page-item:last-child .page-link {
  border-top-right-radius: var(--bs-pagination-border-radius);
  border-bottom-right-radius: var(--bs-pagination-border-radius);
}

.pagination-lg {
  --bs-pagination-padding-x: 1.5rem;
  --bs-pagination-padding-y: 0.75rem;
  --bs-pagination-font-size: 1.25rem;
  --bs-pagination-border-radius: var(--bs-border-radius-lg);
}

.pagination-sm {
  --bs-pagination-padding-x: 0.5rem;
  --bs-pagination-padding-y: 0.25rem;
  --bs-pagination-font-size: 0.875rem;
  --bs-pagination-border-radius: var(--bs-border-radius-sm);
}

.badge {
  --bs-badge-padding-x: 0.65em;
  --bs-badge-padding-y: 0.35em;
  --bs-badge-font-size: 0.75em;
  --bs-badge-font-weight: 700;
  --bs-badge-color: #fff;
  --bs-badge-border-radius: var(--bs-border-radius);
  display: inline-block;
  padding: var(--bs-badge-padding-y) var(--bs-badge-padding-x);
  font-size: var(--bs-badge-font-size);
  font-weight: var(--bs-badge-font-weight);
  line-height: 1;
  color: var(--bs-badge-color);
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: var(--bs-badge-border-radius);
}
.badge:empty {
  display: none;
}

.btn .badge {
  position: relative;
  top: -1px;
}

.alert {
  --bs-alert-bg: transparent;
  --bs-alert-padding-x: 1rem;
  --bs-alert-padding-y: 1rem;
  --bs-alert-margin-bottom: 1rem;
  --bs-alert-color: inherit;
  --bs-alert-border-color: transparent;
  --bs-alert-border: var(--bs-border-width) solid var(--bs-alert-border-color);
  --bs-alert-border-radius: var(--bs-border-radius);
  --bs-alert-link-color: inherit;
  position: relative;
  padding: var(--bs-alert-padding-y) var(--bs-alert-padding-x);
  margin-bottom: var(--bs-alert-margin-bottom);
  color: var(--bs-alert-color);
  background-color: var(--bs-alert-bg);
  border: var(--bs-alert-border);
  border-radius: var(--bs-alert-border-radius);
}

.alert-heading {
  color: inherit;
}

.alert-link {
  font-weight: 700;
  color: var(--bs-alert-link-color);
}

.alert-dismissible {
  padding-right: 3rem;
}
.alert-dismissible .btn-close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  padding: 1.25rem 1rem;
}

.alert-primary {
  --bs-alert-color: var(--bs-primary-text-emphasis);
  --bs-alert-bg: var(--bs-primary-bg-subtle);
  --bs-alert-border-color: var(--bs-primary-border-subtle);
  --bs-alert-link-color: var(--bs-primary-text-emphasis);
}

.alert-secondary {
  --bs-alert-color: var(--bs-secondary-text-emphasis);
  --bs-alert-bg: var(--bs-secondary-bg-subtle);
  --bs-alert-border-color: var(--bs-secondary-border-subtle);
  --bs-alert-link-color: var(--bs-secondary-text-emphasis);
}

.alert-success {
  --bs-alert-color: var(--bs-success-text-emphasis);
  --bs-alert-bg: var(--bs-success-bg-subtle);
  --bs-alert-border-color: var(--bs-success-border-subtle);
  --bs-alert-link-color: var(--bs-success-text-emphasis);
}

.alert-info {
  --bs-alert-color: var(--bs-info-text-emphasis);
  --bs-alert-bg: var(--bs-info-bg-subtle);
  --bs-alert-border-color: var(--bs-info-border-subtle);
  --bs-alert-link-color: var(--bs-info-text-emphasis);
}

.alert-warning {
  --bs-alert-color: var(--bs-warning-text-emphasis);
  --bs-alert-bg: var(--bs-warning-bg-subtle);
  --bs-alert-border-color: var(--bs-warning-border-subtle);
  --bs-alert-link-color: var(--bs-warning-text-emphasis);
}

.alert-danger {
  --bs-alert-color: var(--bs-danger-text-emphasis);
  --bs-alert-bg: var(--bs-danger-bg-subtle);
  --bs-alert-border-color: var(--bs-danger-border-subtle);
  --bs-alert-link-color: var(--bs-danger-text-emphasis);
}

.alert-light {
  --bs-alert-color: var(--bs-light-text-emphasis);
  --bs-alert-bg: var(--bs-light-bg-subtle);
  --bs-alert-border-color: var(--bs-light-border-subtle);
  --bs-alert-link-color: var(--bs-light-text-emphasis);
}

.alert-dark {
  --bs-alert-color: var(--bs-dark-text-emphasis);
  --bs-alert-bg: var(--bs-dark-bg-subtle);
  --bs-alert-border-color: var(--bs-dark-border-subtle);
  --bs-alert-link-color: var(--bs-dark-text-emphasis);
}

@keyframes progress-bar-stripes {
  0% {
    background-position-x: var(--bs-progress-height);
  }
}
.progress,
.progress-stacked {
  --bs-progress-height: 1rem;
  --bs-progress-font-size: 0.75rem;
  --bs-progress-bg: var(--bs-secondary-bg);
  --bs-progress-border-radius: var(--bs-border-radius);
  --bs-progress-box-shadow: var(--bs-box-shadow-inset);
  --bs-progress-bar-color: #fff;
  --bs-progress-bar-bg: #0d6efd;
  --bs-progress-bar-transition: width 0.6s ease;
  display: flex;
  height: var(--bs-progress-height);
  overflow: hidden;
  font-size: var(--bs-progress-font-size);
  background-color: var(--bs-progress-bg);
  border-radius: var(--bs-progress-border-radius);
}

.progress-bar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  color: var(--bs-progress-bar-color);
  text-align: center;
  white-space: nowrap;
  background-color: var(--bs-progress-bar-bg);
  transition: var(--bs-progress-bar-transition);
}
@media (prefers-reduced-motion: reduce) {
  .progress-bar {
    transition: none;
  }
}

.progress-bar-striped {
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: var(--bs-progress-height) var(--bs-progress-height);
}

.progress-stacked > .progress {
  overflow: visible;
}

.progress-stacked > .progress > .progress-bar {
  width: 100%;
}

.progress-bar-animated {
  animation: 1s linear infinite progress-bar-stripes;
}
@media (prefers-reduced-motion: reduce) {
  .progress-bar-animated {
    animation: none;
  }
}

.list-group {
  --bs-list-group-color: var(--bs-body-color);
  --bs-list-group-bg: var(--bs-body-bg);
  --bs-list-group-border-color: var(--bs-border-color);
  --bs-list-group-border-width: var(--bs-border-width);
  --bs-list-group-border-radius: var(--bs-border-radius);
  --bs-list-group-item-padding-x: 1rem;
  --bs-list-group-item-padding-y: 0.5rem;
  --bs-list-group-action-color: var(--bs-secondary-color);
  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
  --bs-list-group-action-hover-bg: var(--bs-tertiary-bg);
  --bs-list-group-action-active-color: var(--bs-body-color);
  --bs-list-group-action-active-bg: var(--bs-secondary-bg);
  --bs-list-group-disabled-color: var(--bs-secondary-color);
  --bs-list-group-disabled-bg: var(--bs-body-bg);
  --bs-list-group-active-color: #fff;
  --bs-list-group-active-bg: #0d6efd;
  --bs-list-group-active-border-color: #0d6efd;
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  border-radius: var(--bs-list-group-border-radius);
}

.list-group-numbered {
  list-style-type: none;
  counter-reset: section;
}
.list-group-numbered > .list-group-item::before {
  content: counters(section, ".") ". ";
  counter-increment: section;
}

.list-group-item {
  position: relative;
  display: block;
  padding: var(--bs-list-group-item-padding-y) var(--bs-list-group-item-padding-x);
  color: var(--bs-list-group-color);
  text-decoration: none;
  background-color: var(--bs-list-group-bg);
  border: var(--bs-list-group-border-width) solid var(--bs-list-group-border-color);
}
.list-group-item:first-child {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}
.list-group-item:last-child {
  border-bottom-right-radius: inherit;
  border-bottom-left-radius: inherit;
}
.list-group-item.disabled, .list-group-item:disabled {
  color: var(--bs-list-group-disabled-color);
  pointer-events: none;
  background-color: var(--bs-list-group-disabled-bg);
}
.list-group-item.active {
  z-index: 2;
  color: var(--bs-list-group-active-color);
  background-color: var(--bs-list-group-active-bg);
  border-color: var(--bs-list-group-active-border-color);
}
.list-group-item + .list-group-item {
  border-top-width: 0;
}
.list-group-item + .list-group-item.active {
  margin-top: calc(-1 * var(--bs-list-group-border-width));
  border-top-width: var(--bs-list-group-border-width);
}

.list-group-item-action {
  width: 100%;
  color: var(--bs-list-group-action-color);
  text-align: inherit;
}
.list-group-item-action:not(.active):hover, .list-group-item-action:not(.active):focus {
  z-index: 1;
  color: var(--bs-list-group-action-hover-color);
  text-decoration: none;
  background-color: var(--bs-list-group-action-hover-bg);
}
.list-group-item-action:not(.active):active {
  color: var(--bs-list-group-action-active-color);
  background-color: var(--bs-list-group-action-active-bg);
}

.list-group-horizontal {
  flex-direction: row;
}
.list-group-horizontal > .list-group-item:first-child:not(:last-child) {
  border-bottom-left-radius: var(--bs-list-group-border-radius);
  border-top-right-radius: 0;
}
.list-group-horizontal > .list-group-item:last-child:not(:first-child) {
  border-top-right-radius: var(--bs-list-group-border-radius);
  border-bottom-left-radius: 0;
}
.list-group-horizontal > .list-group-item.active {
  margin-top: 0;
}
.list-group-horizontal > .list-group-item + .list-group-item {
  border-top-width: var(--bs-list-group-border-width);
  border-left-width: 0;
}
.list-group-horizontal > .list-group-item + .list-group-item.active {
  margin-left: calc(-1 * var(--bs-list-group-border-width));
  border-left-width: var(--bs-list-group-border-width);
}

@media (min-width: 576px) {
  .list-group-horizontal-sm {
    flex-direction: row;
  }
  .list-group-horizontal-sm > .list-group-item:first-child:not(:last-child) {
    border-bottom-left-radius: var(--bs-list-group-border-radius);
    border-top-right-radius: 0;
  }
  .list-group-horizontal-sm > .list-group-item:last-child:not(:first-child) {
    border-top-right-radius: var(--bs-list-group-border-radius);
    border-bottom-left-radius: 0;
  }
  .list-group-horizontal-sm > .list-group-item.active {
    margin-top: 0;
  }
  .list-group-horizontal-sm > .list-group-item + .list-group-item {
    border-top-width: var(--bs-list-group-border-width);
    border-left-width: 0;
  }
  .list-group-horizontal-sm > .list-group-item + .list-group-item.active {
    margin-left: calc(-1 * var(--bs-list-group-border-width));
    border-left-width: var(--bs-list-group-border-width);
  }
}
@media (min-width: 768px) {
  .list-group-horizontal-md {
    flex-direction: row;
  }
  .list-group-horizontal-md > .list-group-item:first-child:not(:last-child) {
    border-bottom-left-radius: var(--bs-list-group-border-radius);
    border-top-right-radius: 0;
  }
  .list-group-horizontal-md > .list-group-item:last-child:not(:first-child) {
    border-top-right-radius: var(--bs-list-group-border-radius);
    border-bottom-left-radius: 0;
  }
  .list-group-horizontal-md > .list-group-item.active {
    margin-top: 0;
  }
  .list-group-horizontal-md > .list-group-item + .list-group-item {
    border-top-width: var(--bs-list-group-border-width);
    border-left-width: 0;
  }
  .list-group-horizontal-md > .list-group-item + .list-group-item.active {
    margin-left: calc(-1 * var(--bs-list-group-border-width));
    border-left-width: var(--bs-list-group-border-width);
  }
}
@media (min-width: 992px) {
  .list-group-horizontal-lg {
    flex-direction: row;
  }
  .list-group-horizontal-lg > .list-group-item:first-child:not(:last-child) {
    border-bottom-left-radius: var(--bs-list-group-border-radius);
    border-top-right-radius: 0;
  }
  .list-group-horizontal-lg > .list-group-item:last-child:not(:first-child) {
    border-top-right-radius: var(--bs-list-group-border-radius);
    border-bottom-left-radius: 0;
  }
  .list-group-horizontal-lg > .list-group-item.active {
    margin-top: 0;
  }
  .list-group-horizontal-lg > .list-group-item + .list-group-item {
    border-top-width: var(--bs-list-group-border-width);
    border-left-width: 0;
  }
  .list-group-horizontal-lg > .list-group-item + .list-group-item.active {
    margin-left: calc(-1 * var(--bs-list-group-border-width));
    border-left-width: var(--bs-list-group-border-width);
  }
}
@media (min-width: 1200px) {
  .list-group-horizontal-xl {
    flex-direction: row;
  }
  .list-group-horizontal-xl > .list-group-item:first-child:not(:last-child) {
    border-bottom-left-radius: var(--bs-list-group-border-radius);
    border-top-right-radius: 0;
  }
  .list-group-horizontal-xl > .list-group-item:last-child:not(:first-child) {
    border-top-right-radius: var(--bs-list-group-border-radius);
    border-bottom-left-radius: 0;
  }
  .list-group-horizontal-xl > .list-group-item.active {
    margin-top: 0;
  }
  .list-group-horizontal-xl > .list-group-item + .list-group-item {
    border-top-width: var(--bs-list-group-border-width);
    border-left-width: 0;
  }
  .list-group-horizontal-xl > .list-group-item + .list-group-item.active {
    margin-left: calc(-1 * var(--bs-list-group-border-width));
    border-left-width: var(--bs-list-group-border-width);
  }
}
@media (min-width: 1400px) {
  .list-group-horizontal-xxl {
    flex-direction: row;
  }
  .list-group-horizontal-xxl > .list-group-item:first-child:not(:last-child) {
    border-bottom-left-radius: var(--bs-list-group-border-radius);
    border-top-right-radius: 0;
  }
  .list-group-horizontal-xxl > .list-group-item:last-child:not(:first-child) {
    border-top-right-radius: var(--bs-list-group-border-radius);
    border-bottom-left-radius: 0;
  }
  .list-group-horizontal-xxl > .list-group-item.active {
    margin-top: 0;
  }
  .list-group-horizontal-xxl > .list-group-item + .list-group-item {
    border-top-width: var(--bs-list-group-border-width);
    border-left-width: 0;
  }
  .list-group-horizontal-xxl > .list-group-item + .list-group-item.active {
    margin-left: calc(-1 * var(--bs-list-group-border-width));
    border-left-width: var(--bs-list-group-border-width);
  }
}
.list-group-flush {
  border-radius: 0;
}
.list-group-flush > .list-group-item {
  border-width: 0 0 var(--bs-list-group-border-width);
}
.list-group-flush > .list-group-item:last-child {
  border-bottom-width: 0;
}

.list-group-item-primary {
  --bs-list-group-color: var(--bs-primary-text-emphasis);
  --bs-list-group-bg: var(--bs-primary-bg-subtle);
  --bs-list-group-border-color: var(--bs-primary-border-subtle);
  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
  --bs-list-group-action-hover-bg: var(--bs-primary-border-subtle);
  --bs-list-group-action-active-color: var(--bs-emphasis-color);
  --bs-list-group-action-active-bg: var(--bs-primary-border-subtle);
  --bs-list-group-active-color: var(--bs-primary-bg-subtle);
  --bs-list-group-active-bg: var(--bs-primary-text-emphasis);
  --bs-list-group-active-border-color: var(--bs-primary-text-emphasis);
}

.list-group-item-secondary {
  --bs-list-group-color: var(--bs-secondary-text-emphasis);
  --bs-list-group-bg: var(--bs-secondary-bg-subtle);
  --bs-list-group-border-color: var(--bs-secondary-border-subtle);
  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
  --bs-list-group-action-hover-bg: var(--bs-secondary-border-subtle);
  --bs-list-group-action-active-color: var(--bs-emphasis-color);
  --bs-list-group-action-active-bg: var(--bs-secondary-border-subtle);
  --bs-list-group-active-color: var(--bs-secondary-bg-subtle);
  --bs-list-group-active-bg: var(--bs-secondary-text-emphasis);
  --bs-list-group-active-border-color: var(--bs-secondary-text-emphasis);
}

.list-group-item-success {
  --bs-list-group-color: var(--bs-success-text-emphasis);
  --bs-list-group-bg: var(--bs-success-bg-subtle);
  --bs-list-group-border-color: var(--bs-success-border-subtle);
  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
  --bs-list-group-action-hover-bg: var(--bs-success-border-subtle);
  --bs-list-group-action-active-color: var(--bs-emphasis-color);
  --bs-list-group-action-active-bg: var(--bs-success-border-subtle);
  --bs-list-group-active-color: var(--bs-success-bg-subtle);
  --bs-list-group-active-bg: var(--bs-success-text-emphasis);
  --bs-list-group-active-border-color: var(--bs-success-text-emphasis);
}

.list-group-item-info {
  --bs-list-group-color: var(--bs-info-text-emphasis);
  --bs-list-group-bg: var(--bs-info-bg-subtle);
  --bs-list-group-border-color: var(--bs-info-border-subtle);
  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
  --bs-list-group-action-hover-bg: var(--bs-info-border-subtle);
  --bs-list-group-action-active-color: var(--bs-emphasis-color);
  --bs-list-group-action-active-bg: var(--bs-info-border-subtle);
  --bs-list-group-active-color: var(--bs-info-bg-subtle);
  --bs-list-group-active-bg: var(--bs-info-text-emphasis);
  --bs-list-group-active-border-color: var(--bs-info-text-emphasis);
}

.list-group-item-warning {
  --bs-list-group-color: var(--bs-warning-text-emphasis);
  --bs-list-group-bg: var(--bs-warning-bg-subtle);
  --bs-list-group-border-color: var(--bs-warning-border-subtle);
  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
  --bs-list-group-action-hover-bg: var(--bs-warning-border-subtle);
  --bs-list-group-action-active-color: var(--bs-emphasis-color);
  --bs-list-group-action-active-bg: var(--bs-warning-border-subtle);
  --bs-list-group-active-color: var(--bs-warning-bg-subtle);
  --bs-list-group-active-bg: var(--bs-warning-text-emphasis);
  --bs-list-group-active-border-color: var(--bs-warning-text-emphasis);
}

.list-group-item-danger {
  --bs-list-group-color: var(--bs-danger-text-emphasis);
  --bs-list-group-bg: var(--bs-danger-bg-subtle);
  --bs-list-group-border-color: var(--bs-danger-border-subtle);
  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
  --bs-list-group-action-hover-bg: var(--bs-danger-border-subtle);
  --bs-list-group-action-active-color: var(--bs-emphasis-color);
  --bs-list-group-action-active-bg: var(--bs-danger-border-subtle);
  --bs-list-group-active-color: var(--bs-danger-bg-subtle);
  --bs-list-group-active-bg: var(--bs-danger-text-emphasis);
  --bs-list-group-active-border-color: var(--bs-danger-text-emphasis);
}

.list-group-item-light {
  --bs-list-group-color: var(--bs-light-text-emphasis);
  --bs-list-group-bg: var(--bs-light-bg-subtle);
  --bs-list-group-border-color: var(--bs-light-border-subtle);
  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
  --bs-list-group-action-hover-bg: var(--bs-light-border-subtle);
  --bs-list-group-action-active-color: var(--bs-emphasis-color);
  --bs-list-group-action-active-bg: var(--bs-light-border-subtle);
  --bs-list-group-active-color: var(--bs-light-bg-subtle);
  --bs-list-group-active-bg: var(--bs-light-text-emphasis);
  --bs-list-group-active-border-color: var(--bs-light-text-emphasis);
}

.list-group-item-dark {
  --bs-list-group-color: var(--bs-dark-text-emphasis);
  --bs-list-group-bg: var(--bs-dark-bg-subtle);
  --bs-list-group-border-color: var(--bs-dark-border-subtle);
  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
  --bs-list-group-action-hover-bg: var(--bs-dark-border-subtle);
  --bs-list-group-action-active-color: var(--bs-emphasis-color);
  --bs-list-group-action-active-bg: var(--bs-dark-border-subtle);
  --bs-list-group-active-color: var(--bs-dark-bg-subtle);
  --bs-list-group-active-bg: var(--bs-dark-text-emphasis);
  --bs-list-group-active-border-color: var(--bs-dark-text-emphasis);
}

.btn-close {
  --bs-btn-close-color: #000;
  --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/%3e%3c/svg%3e");
  --bs-btn-close-opacity: 0.5;
  --bs-btn-close-hover-opacity: 0.75;
  --bs-btn-close-focus-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  --bs-btn-close-focus-opacity: 1;
  --bs-btn-close-disabled-opacity: 0.25;
  box-sizing: content-box;
  width: 1em;
  height: 1em;
  padding: 0.25em 0.25em;
  color: var(--bs-btn-close-color);
  background: transparent var(--bs-btn-close-bg) center/1em auto no-repeat;
  filter: var(--bs-btn-close-filter);
  border: 0;
  border-radius: 0.375rem;
  opacity: var(--bs-btn-close-opacity);
}
.btn-close:hover {
  color: var(--bs-btn-close-color);
  text-decoration: none;
  opacity: var(--bs-btn-close-hover-opacity);
}
.btn-close:focus {
  outline: 0;
  box-shadow: var(--bs-btn-close-focus-shadow);
  opacity: var(--bs-btn-close-focus-opacity);
}
.btn-close:disabled, .btn-close.disabled {
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  opacity: var(--bs-btn-close-disabled-opacity);
}

.btn-close-white {
  --bs-btn-close-filter: invert(1) grayscale(100%) brightness(200%);
}

:root,
[data-bs-theme=light] {
  --bs-btn-close-filter: ;
}

[data-bs-theme=dark] {
  --bs-btn-close-filter: invert(1) grayscale(100%) brightness(200%);
}

.toast {
  --bs-toast-zindex: 1090;
  --bs-toast-padding-x: 0.75rem;
  --bs-toast-padding-y: 0.5rem;
  --bs-toast-spacing: 1.5rem;
  --bs-toast-max-width: 350px;
  --bs-toast-font-size: 0.875rem;
  --bs-toast-color: ;
  --bs-toast-bg: rgba(var(--bs-body-bg-rgb), 0.85);
  --bs-toast-border-width: var(--bs-border-width);
  --bs-toast-border-color: var(--bs-border-color-translucent);
  --bs-toast-border-radius: var(--bs-border-radius);
  --bs-toast-box-shadow: var(--bs-box-shadow);
  --bs-toast-header-color: var(--bs-secondary-color);
  --bs-toast-header-bg: rgba(var(--bs-body-bg-rgb), 0.85);
  --bs-toast-header-border-color: var(--bs-border-color-translucent);
  width: var(--bs-toast-max-width);
  max-width: 100%;
  font-size: var(--bs-toast-font-size);
  color: var(--bs-toast-color);
  pointer-events: auto;
  background-color: var(--bs-toast-bg);
  background-clip: padding-box;
  border: var(--bs-toast-border-width) solid var(--bs-toast-border-color);
  box-shadow: var(--bs-toast-box-shadow);
  border-radius: var(--bs-toast-border-radius);
}
.toast.showing {
  opacity: 0;
}
.toast:not(.show) {
  display: none;
}

.toast-container {
  --bs-toast-zindex: 1090;
  position: absolute;
  z-index: var(--bs-toast-zindex);
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  max-width: 100%;
  pointer-events: none;
}
.toast-container > :not(:last-child) {
  margin-bottom: var(--bs-toast-spacing);
}

.toast-header {
  display: flex;
  align-items: center;
  padding: var(--bs-toast-padding-y) var(--bs-toast-padding-x);
  color: var(--bs-toast-header-color);
  background-color: var(--bs-toast-header-bg);
  background-clip: padding-box;
  border-bottom: var(--bs-toast-border-width) solid var(--bs-toast-header-border-color);
  border-top-left-radius: calc(var(--bs-toast-border-radius) - var(--bs-toast-border-width));
  border-top-right-radius: calc(var(--bs-toast-border-radius) - var(--bs-toast-border-width));
}
.toast-header .btn-close {
  margin-right: calc(-0.5 * var(--bs-toast-padding-x));
  margin-left: var(--bs-toast-padding-x);
}

.toast-body {
  padding: var(--bs-toast-padding-x);
  word-wrap: break-word;
}

.modal {
  --bs-modal-zindex: 1055;
  --bs-modal-width: 500px;
  --bs-modal-padding: 1rem;
  --bs-modal-margin: 0.5rem;
  --bs-modal-color: var(--bs-body-color);
  --bs-modal-bg: var(--bs-body-bg);
  --bs-modal-border-color: var(--bs-border-color-translucent);
  --bs-modal-border-width: var(--bs-border-width);
  --bs-modal-border-radius: var(--bs-border-radius-lg);
  --bs-modal-box-shadow: var(--bs-box-shadow-sm);
  --bs-modal-inner-border-radius: calc(var(--bs-border-radius-lg) - (var(--bs-border-width)));
  --bs-modal-header-padding-x: 1rem;
  --bs-modal-header-padding-y: 1rem;
  --bs-modal-header-padding: 1rem 1rem;
  --bs-modal-header-border-color: var(--bs-border-color);
  --bs-modal-header-border-width: var(--bs-border-width);
  --bs-modal-title-line-height: 1.5;
  --bs-modal-footer-gap: 0.5rem;
  --bs-modal-footer-bg: ;
  --bs-modal-footer-border-color: var(--bs-border-color);
  --bs-modal-footer-border-width: var(--bs-border-width);
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--bs-modal-zindex);
  display: none;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0;
}

.modal-dialog {
  position: relative;
  width: auto;
  margin: var(--bs-modal-margin);
  pointer-events: none;
}
.modal.fade .modal-dialog {
  transform: translate(0, -50px);
  transition: transform 0.3s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .modal.fade .modal-dialog {
    transition: none;
  }
}
.modal.show .modal-dialog {
  transform: none;
}
.modal.modal-static .modal-dialog {
  transform: scale(1.02);
}

.modal-dialog-scrollable {
  height: calc(100% - var(--bs-modal-margin) * 2);
}
.modal-dialog-scrollable .modal-content {
  max-height: 100%;
  overflow: hidden;
}
.modal-dialog-scrollable .modal-body {
  overflow-y: auto;
}

.modal-dialog-centered {
  display: flex;
  align-items: center;
  min-height: calc(100% - var(--bs-modal-margin) * 2);
}

.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  color: var(--bs-modal-color);
  pointer-events: auto;
  background-color: var(--bs-modal-bg);
  background-clip: padding-box;
  border: var(--bs-modal-border-width) solid var(--bs-modal-border-color);
  border-radius: var(--bs-modal-border-radius);
  outline: 0;
}

.modal-backdrop {
  --bs-backdrop-zindex: 1050;
  --bs-backdrop-bg: #000;
  --bs-backdrop-opacity: 0.5;
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--bs-backdrop-zindex);
  width: 100vw;
  height: 100vh;
  background-color: var(--bs-backdrop-bg);
}
.modal-backdrop.fade {
  opacity: 0;
}
.modal-backdrop.show {
  opacity: var(--bs-backdrop-opacity);
}

.modal-header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  padding: var(--bs-modal-header-padding);
  border-bottom: var(--bs-modal-header-border-width) solid var(--bs-modal-header-border-color);
  border-top-left-radius: var(--bs-modal-inner-border-radius);
  border-top-right-radius: var(--bs-modal-inner-border-radius);
}
.modal-header .btn-close {
  padding: calc(var(--bs-modal-header-padding-y) * 0.5) calc(var(--bs-modal-header-padding-x) * 0.5);
  margin-top: calc(-0.5 * var(--bs-modal-header-padding-y));
  margin-right: calc(-0.5 * var(--bs-modal-header-padding-x));
  margin-bottom: calc(-0.5 * var(--bs-modal-header-padding-y));
  margin-left: auto;
}

.modal-title {
  margin-bottom: 0;
  line-height: var(--bs-modal-title-line-height);
}

.modal-body {
  position: relative;
  flex: 1 1 auto;
  padding: var(--bs-modal-padding);
}

.modal-footer {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  padding: calc(var(--bs-modal-padding) - var(--bs-modal-footer-gap) * 0.5);
  background-color: var(--bs-modal-footer-bg);
  border-top: var(--bs-modal-footer-border-width) solid var(--bs-modal-footer-border-color);
  border-bottom-right-radius: var(--bs-modal-inner-border-radius);
  border-bottom-left-radius: var(--bs-modal-inner-border-radius);
}
.modal-footer > * {
  margin: calc(var(--bs-modal-footer-gap) * 0.5);
}

@media (min-width: 576px) {
  .modal {
    --bs-modal-margin: 1.75rem;
    --bs-modal-box-shadow: var(--bs-box-shadow);
  }
  .modal-dialog {
    max-width: var(--bs-modal-width);
    margin-right: auto;
    margin-left: auto;
  }
  .modal-sm {
    --bs-modal-width: 300px;
  }
}
@media (min-width: 992px) {
  .modal-lg,
  .modal-xl {
    --bs-modal-width: 800px;
  }
}
@media (min-width: 1200px) {
  .modal-xl {
    --bs-modal-width: 1140px;
  }
}
.modal-fullscreen {
  width: 100vw;
  max-width: none;
  height: 100%;
  margin: 0;
}
.modal-fullscreen .modal-content {
  height: 100%;
  border: 0;
  border-radius: 0;
}
.modal-fullscreen .modal-header,
.modal-fullscreen .modal-footer {
  border-radius: 0;
}
.modal-fullscreen .modal-body {
  overflow-y: auto;
}

@media (max-width: 575.98px) {
  .modal-fullscreen-sm-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .modal-fullscreen-sm-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .modal-fullscreen-sm-down .modal-header,
  .modal-fullscreen-sm-down .modal-footer {
    border-radius: 0;
  }
  .modal-fullscreen-sm-down .modal-body {
    overflow-y: auto;
  }
}
@media (max-width: 767.98px) {
  .modal-fullscreen-md-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .modal-fullscreen-md-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .modal-fullscreen-md-down .modal-header,
  .modal-fullscreen-md-down .modal-footer {
    border-radius: 0;
  }
  .modal-fullscreen-md-down .modal-body {
    overflow-y: auto;
  }
}
@media (max-width: 991.98px) {
  .modal-fullscreen-lg-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .modal-fullscreen-lg-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .modal-fullscreen-lg-down .modal-header,
  .modal-fullscreen-lg-down .modal-footer {
    border-radius: 0;
  }
  .modal-fullscreen-lg-down .modal-body {
    overflow-y: auto;
  }
}
@media (max-width: 1199.98px) {
  .modal-fullscreen-xl-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .modal-fullscreen-xl-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .modal-fullscreen-xl-down .modal-header,
  .modal-fullscreen-xl-down .modal-footer {
    border-radius: 0;
  }
  .modal-fullscreen-xl-down .modal-body {
    overflow-y: auto;
  }
}
@media (max-width: 1399.98px) {
  .modal-fullscreen-xxl-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .modal-fullscreen-xxl-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .modal-fullscreen-xxl-down .modal-header,
  .modal-fullscreen-xxl-down .modal-footer {
    border-radius: 0;
  }
  .modal-fullscreen-xxl-down .modal-body {
    overflow-y: auto;
  }
}
.tooltip {
  --bs-tooltip-zindex: 1080;
  --bs-tooltip-max-width: 200px;
  --bs-tooltip-padding-x: 0.5rem;
  --bs-tooltip-padding-y: 0.25rem;
  --bs-tooltip-margin: ;
  --bs-tooltip-font-size: 0.875rem;
  --bs-tooltip-color: var(--bs-body-bg);
  --bs-tooltip-bg: var(--bs-emphasis-color);
  --bs-tooltip-border-radius: var(--bs-border-radius);
  --bs-tooltip-opacity: 0.9;
  --bs-tooltip-arrow-width: 0.8rem;
  --bs-tooltip-arrow-height: 0.4rem;
  z-index: var(--bs-tooltip-zindex);
  display: block;
  margin: var(--bs-tooltip-margin);
  font-family: var(--bs-font-sans-serif);
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  white-space: normal;
  word-spacing: normal;
  line-break: auto;
  font-size: var(--bs-tooltip-font-size);
  word-wrap: break-word;
  opacity: 0;
}
.tooltip.show {
  opacity: var(--bs-tooltip-opacity);
}
.tooltip .tooltip-arrow {
  display: block;
  width: var(--bs-tooltip-arrow-width);
  height: var(--bs-tooltip-arrow-height);
}
.tooltip .tooltip-arrow::before {
  position: absolute;
  content: "";
  border-color: transparent;
  border-style: solid;
}

.bs-tooltip-top .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow {
  bottom: calc(-1 * var(--bs-tooltip-arrow-height));
}
.bs-tooltip-top .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {
  top: -1px;
  border-width: var(--bs-tooltip-arrow-height) calc(var(--bs-tooltip-arrow-width) * 0.5) 0;
  border-top-color: var(--bs-tooltip-bg);
}

/* rtl:begin:ignore */
.bs-tooltip-end .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow {
  left: calc(-1 * var(--bs-tooltip-arrow-height));
  width: var(--bs-tooltip-arrow-height);
  height: var(--bs-tooltip-arrow-width);
}
.bs-tooltip-end .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before {
  right: -1px;
  border-width: calc(var(--bs-tooltip-arrow-width) * 0.5) var(--bs-tooltip-arrow-height) calc(var(--bs-tooltip-arrow-width) * 0.5) 0;
  border-right-color: var(--bs-tooltip-bg);
}

/* rtl:end:ignore */
.bs-tooltip-bottom .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow {
  top: calc(-1 * var(--bs-tooltip-arrow-height));
}
.bs-tooltip-bottom .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before {
  bottom: -1px;
  border-width: 0 calc(var(--bs-tooltip-arrow-width) * 0.5) var(--bs-tooltip-arrow-height);
  border-bottom-color: var(--bs-tooltip-bg);
}

/* rtl:begin:ignore */
.bs-tooltip-start .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow {
  right: calc(-1 * var(--bs-tooltip-arrow-height));
  width: var(--bs-tooltip-arrow-height);
  height: var(--bs-tooltip-arrow-width);
}
.bs-tooltip-start .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before {
  left: -1px;
  border-width: calc(var(--bs-tooltip-arrow-width) * 0.5) 0 calc(var(--bs-tooltip-arrow-width) * 0.5) var(--bs-tooltip-arrow-height);
  border-left-color: var(--bs-tooltip-bg);
}

/* rtl:end:ignore */
.tooltip-inner {
  max-width: var(--bs-tooltip-max-width);
  padding: var(--bs-tooltip-padding-y) var(--bs-tooltip-padding-x);
  color: var(--bs-tooltip-color);
  text-align: center;
  background-color: var(--bs-tooltip-bg);
  border-radius: var(--bs-tooltip-border-radius);
}

.popover {
  --bs-popover-zindex: 1070;
  --bs-popover-max-width: 276px;
  --bs-popover-font-size: 0.875rem;
  --bs-popover-bg: var(--bs-body-bg);
  --bs-popover-border-width: var(--bs-border-width);
  --bs-popover-border-color: var(--bs-border-color-translucent);
  --bs-popover-border-radius: var(--bs-border-radius-lg);
  --bs-popover-inner-border-radius: calc(var(--bs-border-radius-lg) - var(--bs-border-width));
  --bs-popover-box-shadow: var(--bs-box-shadow);
  --bs-popover-header-padding-x: 1rem;
  --bs-popover-header-padding-y: 0.5rem;
  --bs-popover-header-font-size: 1rem;
  --bs-popover-header-color: inherit;
  --bs-popover-header-bg: var(--bs-secondary-bg);
  --bs-popover-body-padding-x: 1rem;
  --bs-popover-body-padding-y: 1rem;
  --bs-popover-body-color: var(--bs-body-color);
  --bs-popover-arrow-width: 1rem;
  --bs-popover-arrow-height: 0.5rem;
  --bs-popover-arrow-border: var(--bs-popover-border-color);
  z-index: var(--bs-popover-zindex);
  display: block;
  max-width: var(--bs-popover-max-width);
  font-family: var(--bs-font-sans-serif);
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  white-space: normal;
  word-spacing: normal;
  line-break: auto;
  font-size: var(--bs-popover-font-size);
  word-wrap: break-word;
  background-color: var(--bs-popover-bg);
  background-clip: padding-box;
  border: var(--bs-popover-border-width) solid var(--bs-popover-border-color);
  border-radius: var(--bs-popover-border-radius);
}
.popover .popover-arrow {
  display: block;
  width: var(--bs-popover-arrow-width);
  height: var(--bs-popover-arrow-height);
}
.popover .popover-arrow::before, .popover .popover-arrow::after {
  position: absolute;
  display: block;
  content: "";
  border-color: transparent;
  border-style: solid;
  border-width: 0;
}

.bs-popover-top > .popover-arrow, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow {
  bottom: calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width));
}
.bs-popover-top > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before, .bs-popover-top > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after {
  border-width: var(--bs-popover-arrow-height) calc(var(--bs-popover-arrow-width) * 0.5) 0;
}
.bs-popover-top > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before {
  bottom: 0;
  border-top-color: var(--bs-popover-arrow-border);
}
.bs-popover-top > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after {
  bottom: var(--bs-popover-border-width);
  border-top-color: var(--bs-popover-bg);
}

/* rtl:begin:ignore */
.bs-popover-end > .popover-arrow, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow {
  left: calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width));
  width: var(--bs-popover-arrow-height);
  height: var(--bs-popover-arrow-width);
}
.bs-popover-end > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before, .bs-popover-end > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after {
  border-width: calc(var(--bs-popover-arrow-width) * 0.5) var(--bs-popover-arrow-height) calc(var(--bs-popover-arrow-width) * 0.5) 0;
}
.bs-popover-end > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before {
  left: 0;
  border-right-color: var(--bs-popover-arrow-border);
}
.bs-popover-end > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after {
  left: var(--bs-popover-border-width);
  border-right-color: var(--bs-popover-bg);
}

/* rtl:end:ignore */
.bs-popover-bottom > .popover-arrow, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow {
  top: calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width));
}
.bs-popover-bottom > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before, .bs-popover-bottom > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after {
  border-width: 0 calc(var(--bs-popover-arrow-width) * 0.5) var(--bs-popover-arrow-height);
}
.bs-popover-bottom > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before {
  top: 0;
  border-bottom-color: var(--bs-popover-arrow-border);
}
.bs-popover-bottom > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after {
  top: var(--bs-popover-border-width);
  border-bottom-color: var(--bs-popover-bg);
}
.bs-popover-bottom .popover-header::before, .bs-popover-auto[data-popper-placement^=bottom] .popover-header::before {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: var(--bs-popover-arrow-width);
  margin-left: calc(-0.5 * var(--bs-popover-arrow-width));
  content: "";
  border-bottom: var(--bs-popover-border-width) solid var(--bs-popover-header-bg);
}

/* rtl:begin:ignore */
.bs-popover-start > .popover-arrow, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow {
  right: calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width));
  width: var(--bs-popover-arrow-height);
  height: var(--bs-popover-arrow-width);
}
.bs-popover-start > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before, .bs-popover-start > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow::after {
  border-width: calc(var(--bs-popover-arrow-width) * 0.5) 0 calc(var(--bs-popover-arrow-width) * 0.5) var(--bs-popover-arrow-height);
}
.bs-popover-start > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before {
  right: 0;
  border-left-color: var(--bs-popover-arrow-border);
}
.bs-popover-start > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow::after {
  right: var(--bs-popover-border-width);
  border-left-color: var(--bs-popover-bg);
}

/* rtl:end:ignore */
.popover-header {
  padding: var(--bs-popover-header-padding-y) var(--bs-popover-header-padding-x);
  margin-bottom: 0;
  font-size: var(--bs-popover-header-font-size);
  color: var(--bs-popover-header-color);
  background-color: var(--bs-popover-header-bg);
  border-bottom: var(--bs-popover-border-width) solid var(--bs-popover-border-color);
  border-top-left-radius: var(--bs-popover-inner-border-radius);
  border-top-right-radius: var(--bs-popover-inner-border-radius);
}
.popover-header:empty {
  display: none;
}

.popover-body {
  padding: var(--bs-popover-body-padding-y) var(--bs-popover-body-padding-x);
  color: var(--bs-popover-body-color);
}

.carousel {
  position: relative;
}

.carousel.pointer-event {
  touch-action: pan-y;
}

.carousel-inner {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.carousel-inner::after {
  display: block;
  clear: both;
  content: "";
}

.carousel-item {
  position: relative;
  display: none;
  float: left;
  width: 100%;
  margin-right: -100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: transform 0.6s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .carousel-item {
    transition: none;
  }
}

.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
  display: block;
}

.carousel-item-next:not(.carousel-item-start),
.active.carousel-item-end {
  transform: translateX(100%);
}

.carousel-item-prev:not(.carousel-item-end),
.active.carousel-item-start {
  transform: translateX(-100%);
}

.carousel-fade .carousel-item {
  opacity: 0;
  transition-property: opacity;
  transform: none;
}
.carousel-fade .carousel-item.active,
.carousel-fade .carousel-item-next.carousel-item-start,
.carousel-fade .carousel-item-prev.carousel-item-end {
  z-index: 1;
  opacity: 1;
}
.carousel-fade .active.carousel-item-start,
.carousel-fade .active.carousel-item-end {
  z-index: 0;
  opacity: 0;
  transition: opacity 0s 0.6s;
}
@media (prefers-reduced-motion: reduce) {
  .carousel-fade .active.carousel-item-start,
  .carousel-fade .active.carousel-item-end {
    transition: none;
  }
}

.carousel-control-prev,
.carousel-control-next {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15%;
  padding: 0;
  color: #fff;
  text-align: center;
  background: none;
  filter: var(--bs-carousel-control-icon-filter);
  border: 0;
  opacity: 0.5;
  transition: opacity 0.15s ease;
}
@media (prefers-reduced-motion: reduce) {
  .carousel-control-prev,
  .carousel-control-next {
    transition: none;
  }
}
.carousel-control-prev:hover, .carousel-control-prev:focus,
.carousel-control-next:hover,
.carousel-control-next:focus {
  color: #fff;
  text-decoration: none;
  outline: 0;
  opacity: 0.9;
}

.carousel-control-prev {
  left: 0;
}

.carousel-control-next {
  right: 0;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: 100% 100%;
}

.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0'/%3e%3c/svg%3e") /*rtl:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e")*/;
}

.carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e") /*rtl:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0'/%3e%3c/svg%3e")*/;
}

.carousel-indicators {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  padding: 0;
  margin-right: 15%;
  margin-bottom: 1rem;
  margin-left: 15%;
}
.carousel-indicators [data-bs-target] {
  box-sizing: content-box;
  flex: 0 1 auto;
  width: 30px;
  height: 3px;
  padding: 0;
  margin-right: 3px;
  margin-left: 3px;
  text-indent: -999px;
  cursor: pointer;
  background-color: var(--bs-carousel-indicator-active-bg);
  background-clip: padding-box;
  border: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  opacity: 0.5;
  transition: opacity 0.6s ease;
}
@media (prefers-reduced-motion: reduce) {
  .carousel-indicators [data-bs-target] {
    transition: none;
  }
}
.carousel-indicators .active {
  opacity: 1;
}

.carousel-caption {
  position: absolute;
  right: 15%;
  bottom: 1.25rem;
  left: 15%;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  color: var(--bs-carousel-caption-color);
  text-align: center;
}

.carousel-dark {
  --bs-carousel-indicator-active-bg: #000;
  --bs-carousel-caption-color: #000;
  --bs-carousel-control-icon-filter: invert(1) grayscale(100);
}

:root,
[data-bs-theme=light] {
  --bs-carousel-indicator-active-bg: #fff;
  --bs-carousel-caption-color: #fff;
  --bs-carousel-control-icon-filter: ;
}

[data-bs-theme=dark] {
  --bs-carousel-indicator-active-bg: #000;
  --bs-carousel-caption-color: #000;
  --bs-carousel-control-icon-filter: invert(1) grayscale(100);
}

.spinner-grow,
.spinner-border {
  display: inline-block;
  flex-shrink: 0;
  width: var(--bs-spinner-width);
  height: var(--bs-spinner-height);
  vertical-align: var(--bs-spinner-vertical-align);
  border-radius: 50%;
  animation: var(--bs-spinner-animation-speed) linear infinite var(--bs-spinner-animation-name);
}

@keyframes spinner-border {
  to {
    transform: rotate(360deg) /* rtl:ignore */;
  }
}
.spinner-border {
  --bs-spinner-width: 2rem;
  --bs-spinner-height: 2rem;
  --bs-spinner-vertical-align: -0.125em;
  --bs-spinner-border-width: 0.25em;
  --bs-spinner-animation-speed: 0.75s;
  --bs-spinner-animation-name: spinner-border;
  border: var(--bs-spinner-border-width) solid currentcolor;
  border-right-color: transparent;
}

.spinner-border-sm {
  --bs-spinner-width: 1rem;
  --bs-spinner-height: 1rem;
  --bs-spinner-border-width: 0.2em;
}

@keyframes spinner-grow {
  0% {
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: none;
  }
}
.spinner-grow {
  --bs-spinner-width: 2rem;
  --bs-spinner-height: 2rem;
  --bs-spinner-vertical-align: -0.125em;
  --bs-spinner-animation-speed: 0.75s;
  --bs-spinner-animation-name: spinner-grow;
  background-color: currentcolor;
  opacity: 0;
}

.spinner-grow-sm {
  --bs-spinner-width: 1rem;
  --bs-spinner-height: 1rem;
}

@media (prefers-reduced-motion: reduce) {
  .spinner-border,
  .spinner-grow {
    --bs-spinner-animation-speed: 1.5s;
  }
}
.offcanvas, .offcanvas-xxl, .offcanvas-xl, .offcanvas-lg, .offcanvas-md, .offcanvas-sm {
  --bs-offcanvas-zindex: 1045;
  --bs-offcanvas-width: 400px;
  --bs-offcanvas-height: 30vh;
  --bs-offcanvas-padding-x: 1rem;
  --bs-offcanvas-padding-y: 1rem;
  --bs-offcanvas-color: var(--bs-body-color);
  --bs-offcanvas-bg: var(--bs-body-bg);
  --bs-offcanvas-border-width: var(--bs-border-width);
  --bs-offcanvas-border-color: var(--bs-border-color-translucent);
  --bs-offcanvas-box-shadow: var(--bs-box-shadow-sm);
  --bs-offcanvas-transition: transform 0.3s ease-in-out;
  --bs-offcanvas-title-line-height: 1.5;
}

@media (max-width: 575.98px) {
  .offcanvas-sm {
    position: fixed;
    bottom: 0;
    z-index: var(--bs-offcanvas-zindex);
    display: flex;
    flex-direction: column;
    max-width: 100%;
    color: var(--bs-offcanvas-color);
    visibility: hidden;
    background-color: var(--bs-offcanvas-bg);
    background-clip: padding-box;
    outline: 0;
    transition: var(--bs-offcanvas-transition);
  }
}
@media (max-width: 575.98px) and (prefers-reduced-motion: reduce) {
  .offcanvas-sm {
    transition: none;
  }
}
@media (max-width: 575.98px) {
  .offcanvas-sm.offcanvas-start {
    top: 0;
    left: 0;
    width: var(--bs-offcanvas-width);
    border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateX(-100%);
  }
  .offcanvas-sm.offcanvas-end {
    top: 0;
    right: 0;
    width: var(--bs-offcanvas-width);
    border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateX(100%);
  }
  .offcanvas-sm.offcanvas-top {
    top: 0;
    right: 0;
    left: 0;
    height: var(--bs-offcanvas-height);
    max-height: 100%;
    border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateY(-100%);
  }
  .offcanvas-sm.offcanvas-bottom {
    right: 0;
    left: 0;
    height: var(--bs-offcanvas-height);
    max-height: 100%;
    border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateY(100%);
  }
  .offcanvas-sm.showing, .offcanvas-sm.show:not(.hiding) {
    transform: none;
  }
  .offcanvas-sm.showing, .offcanvas-sm.hiding, .offcanvas-sm.show {
    visibility: visible;
  }
}
@media (min-width: 576px) {
  .offcanvas-sm {
    --bs-offcanvas-height: auto;
    --bs-offcanvas-border-width: 0;
    background-color: transparent !important;
  }
  .offcanvas-sm .offcanvas-header {
    display: none;
  }
  .offcanvas-sm .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
    background-color: transparent !important;
  }
}

@media (max-width: 767.98px) {
  .offcanvas-md {
    position: fixed;
    bottom: 0;
    z-index: var(--bs-offcanvas-zindex);
    display: flex;
    flex-direction: column;
    max-width: 100%;
    color: var(--bs-offcanvas-color);
    visibility: hidden;
    background-color: var(--bs-offcanvas-bg);
    background-clip: padding-box;
    outline: 0;
    transition: var(--bs-offcanvas-transition);
  }
}
@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
  .offcanvas-md {
    transition: none;
  }
}
@media (max-width: 767.98px) {
  .offcanvas-md.offcanvas-start {
    top: 0;
    left: 0;
    width: var(--bs-offcanvas-width);
    border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateX(-100%);
  }
  .offcanvas-md.offcanvas-end {
    top: 0;
    right: 0;
    width: var(--bs-offcanvas-width);
    border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateX(100%);
  }
  .offcanvas-md.offcanvas-top {
    top: 0;
    right: 0;
    left: 0;
    height: var(--bs-offcanvas-height);
    max-height: 100%;
    border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateY(-100%);
  }
  .offcanvas-md.offcanvas-bottom {
    right: 0;
    left: 0;
    height: var(--bs-offcanvas-height);
    max-height: 100%;
    border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateY(100%);
  }
  .offcanvas-md.showing, .offcanvas-md.show:not(.hiding) {
    transform: none;
  }
  .offcanvas-md.showing, .offcanvas-md.hiding, .offcanvas-md.show {
    visibility: visible;
  }
}
@media (min-width: 768px) {
  .offcanvas-md {
    --bs-offcanvas-height: auto;
    --bs-offcanvas-border-width: 0;
    background-color: transparent !important;
  }
  .offcanvas-md .offcanvas-header {
    display: none;
  }
  .offcanvas-md .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
    background-color: transparent !important;
  }
}

@media (max-width: 991.98px) {
  .offcanvas-lg {
    position: fixed;
    bottom: 0;
    z-index: var(--bs-offcanvas-zindex);
    display: flex;
    flex-direction: column;
    max-width: 100%;
    color: var(--bs-offcanvas-color);
    visibility: hidden;
    background-color: var(--bs-offcanvas-bg);
    background-clip: padding-box;
    outline: 0;
    transition: var(--bs-offcanvas-transition);
  }
}
@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
  .offcanvas-lg {
    transition: none;
  }
}
@media (max-width: 991.98px) {
  .offcanvas-lg.offcanvas-start {
    top: 0;
    left: 0;
    width: var(--bs-offcanvas-width);
    border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateX(-100%);
  }
  .offcanvas-lg.offcanvas-end {
    top: 0;
    right: 0;
    width: var(--bs-offcanvas-width);
    border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateX(100%);
  }
  .offcanvas-lg.offcanvas-top {
    top: 0;
    right: 0;
    left: 0;
    height: var(--bs-offcanvas-height);
    max-height: 100%;
    border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateY(-100%);
  }
  .offcanvas-lg.offcanvas-bottom {
    right: 0;
    left: 0;
    height: var(--bs-offcanvas-height);
    max-height: 100%;
    border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateY(100%);
  }
  .offcanvas-lg.showing, .offcanvas-lg.show:not(.hiding) {
    transform: none;
  }
  .offcanvas-lg.showing, .offcanvas-lg.hiding, .offcanvas-lg.show {
    visibility: visible;
  }
}
@media (min-width: 992px) {
  .offcanvas-lg {
    --bs-offcanvas-height: auto;
    --bs-offcanvas-border-width: 0;
    background-color: transparent !important;
  }
  .offcanvas-lg .offcanvas-header {
    display: none;
  }
  .offcanvas-lg .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
    background-color: transparent !important;
  }
}

@media (max-width: 1199.98px) {
  .offcanvas-xl {
    position: fixed;
    bottom: 0;
    z-index: var(--bs-offcanvas-zindex);
    display: flex;
    flex-direction: column;
    max-width: 100%;
    color: var(--bs-offcanvas-color);
    visibility: hidden;
    background-color: var(--bs-offcanvas-bg);
    background-clip: padding-box;
    outline: 0;
    transition: var(--bs-offcanvas-transition);
  }
}
@media (max-width: 1199.98px) and (prefers-reduced-motion: reduce) {
  .offcanvas-xl {
    transition: none;
  }
}
@media (max-width: 1199.98px) {
  .offcanvas-xl.offcanvas-start {
    top: 0;
    left: 0;
    width: var(--bs-offcanvas-width);
    border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateX(-100%);
  }
  .offcanvas-xl.offcanvas-end {
    top: 0;
    right: 0;
    width: var(--bs-offcanvas-width);
    border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateX(100%);
  }
  .offcanvas-xl.offcanvas-top {
    top: 0;
    right: 0;
    left: 0;
    height: var(--bs-offcanvas-height);
    max-height: 100%;
    border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateY(-100%);
  }
  .offcanvas-xl.offcanvas-bottom {
    right: 0;
    left: 0;
    height: var(--bs-offcanvas-height);
    max-height: 100%;
    border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateY(100%);
  }
  .offcanvas-xl.showing, .offcanvas-xl.show:not(.hiding) {
    transform: none;
  }
  .offcanvas-xl.showing, .offcanvas-xl.hiding, .offcanvas-xl.show {
    visibility: visible;
  }
}
@media (min-width: 1200px) {
  .offcanvas-xl {
    --bs-offcanvas-height: auto;
    --bs-offcanvas-border-width: 0;
    background-color: transparent !important;
  }
  .offcanvas-xl .offcanvas-header {
    display: none;
  }
  .offcanvas-xl .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
    background-color: transparent !important;
  }
}

@media (max-width: 1399.98px) {
  .offcanvas-xxl {
    position: fixed;
    bottom: 0;
    z-index: var(--bs-offcanvas-zindex);
    display: flex;
    flex-direction: column;
    max-width: 100%;
    color: var(--bs-offcanvas-color);
    visibility: hidden;
    background-color: var(--bs-offcanvas-bg);
    background-clip: padding-box;
    outline: 0;
    transition: var(--bs-offcanvas-transition);
  }
}
@media (max-width: 1399.98px) and (prefers-reduced-motion: reduce) {
  .offcanvas-xxl {
    transition: none;
  }
}
@media (max-width: 1399.98px) {
  .offcanvas-xxl.offcanvas-start {
    top: 0;
    left: 0;
    width: var(--bs-offcanvas-width);
    border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateX(-100%);
  }
  .offcanvas-xxl.offcanvas-end {
    top: 0;
    right: 0;
    width: var(--bs-offcanvas-width);
    border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateX(100%);
  }
  .offcanvas-xxl.offcanvas-top {
    top: 0;
    right: 0;
    left: 0;
    height: var(--bs-offcanvas-height);
    max-height: 100%;
    border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateY(-100%);
  }
  .offcanvas-xxl.offcanvas-bottom {
    right: 0;
    left: 0;
    height: var(--bs-offcanvas-height);
    max-height: 100%;
    border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateY(100%);
  }
  .offcanvas-xxl.showing, .offcanvas-xxl.show:not(.hiding) {
    transform: none;
  }
  .offcanvas-xxl.showing, .offcanvas-xxl.hiding, .offcanvas-xxl.show {
    visibility: visible;
  }
}
@media (min-width: 1400px) {
  .offcanvas-xxl {
    --bs-offcanvas-height: auto;
    --bs-offcanvas-border-width: 0;
    background-color: transparent !important;
  }
  .offcanvas-xxl .offcanvas-header {
    display: none;
  }
  .offcanvas-xxl .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
    background-color: transparent !important;
  }
}

.offcanvas {
  position: fixed;
  bottom: 0;
  z-index: var(--bs-offcanvas-zindex);
  display: flex;
  flex-direction: column;
  max-width: 100%;
  color: var(--bs-offcanvas-color);
  visibility: hidden;
  background-color: var(--bs-offcanvas-bg);
  background-clip: padding-box;
  outline: 0;
  transition: var(--bs-offcanvas-transition);
}
@media (prefers-reduced-motion: reduce) {
  .offcanvas {
    transition: none;
  }
}
.offcanvas.offcanvas-start {
  top: 0;
  left: 0;
  width: var(--bs-offcanvas-width);
  border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
  transform: translateX(-100%);
}
.offcanvas.offcanvas-end {
  top: 0;
  right: 0;
  width: var(--bs-offcanvas-width);
  border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
  transform: translateX(100%);
}
.offcanvas.offcanvas-top {
  top: 0;
  right: 0;
  left: 0;
  height: var(--bs-offcanvas-height);
  max-height: 100%;
  border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
  transform: translateY(-100%);
}
.offcanvas.offcanvas-bottom {
  right: 0;
  left: 0;
  height: var(--bs-offcanvas-height);
  max-height: 100%;
  border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
  transform: translateY(100%);
}
.offcanvas.showing, .offcanvas.show:not(.hiding) {
  transform: none;
}
.offcanvas.showing, .offcanvas.hiding, .offcanvas.show {
  visibility: visible;
}

.offcanvas-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1040;
  width: 100vw;
  height: 100vh;
  background-color: #000;
}
.offcanvas-backdrop.fade {
  opacity: 0;
}
.offcanvas-backdrop.show {
  opacity: 0.5;
}

.offcanvas-header {
  display: flex;
  align-items: center;
  padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x);
}
.offcanvas-header .btn-close {
  padding: calc(var(--bs-offcanvas-padding-y) * 0.5) calc(var(--bs-offcanvas-padding-x) * 0.5);
  margin-top: calc(-0.5 * var(--bs-offcanvas-padding-y));
  margin-right: calc(-0.5 * var(--bs-offcanvas-padding-x));
  margin-bottom: calc(-0.5 * var(--bs-offcanvas-padding-y));
  margin-left: auto;
}

.offcanvas-title {
  margin-bottom: 0;
  line-height: var(--bs-offcanvas-title-line-height);
}

.offcanvas-body {
  flex-grow: 1;
  padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x);
  overflow-y: auto;
}

.placeholder {
  display: inline-block;
  min-height: 1em;
  vertical-align: middle;
  cursor: wait;
  background-color: currentcolor;
  opacity: 0.5;
}
.placeholder.btn::before {
  display: inline-block;
  content: "";
}

.placeholder-xs {
  min-height: 0.6em;
}

.placeholder-sm {
  min-height: 0.8em;
}

.placeholder-lg {
  min-height: 1.2em;
}

.placeholder-glow .placeholder {
  animation: placeholder-glow 2s ease-in-out infinite;
}

@keyframes placeholder-glow {
  50% {
    opacity: 0.2;
  }
}
.placeholder-wave {
  -webkit-mask-image: linear-gradient(130deg, #000 55%, rgba(0, 0, 0, 0.8) 75%, #000 95%);
  mask-image: linear-gradient(130deg, #000 55%, rgba(0, 0, 0, 0.8) 75%, #000 95%);
  -webkit-mask-size: 200% 100%;
  mask-size: 200% 100%;
  animation: placeholder-wave 2s linear infinite;
}

@keyframes placeholder-wave {
  100% {
    -webkit-mask-position: -200% 0%;
    mask-position: -200% 0%;
  }
}
.clearfix::after {
  display: block;
  clear: both;
  content: "";
}

.text-bg-primary {
  color: #fff !important;
  background-color: RGBA(var(--bs-primary-rgb), var(--bs-bg-opacity, 1)) !important;
}

.text-bg-secondary {
  color: #fff !important;
  background-color: RGBA(var(--bs-secondary-rgb), var(--bs-bg-opacity, 1)) !important;
}

.text-bg-success {
  color: #fff !important;
  background-color: RGBA(var(--bs-success-rgb), var(--bs-bg-opacity, 1)) !important;
}

.text-bg-info {
  color: #000 !important;
  background-color: RGBA(var(--bs-info-rgb), var(--bs-bg-opacity, 1)) !important;
}

.text-bg-warning {
  color: #000 !important;
  background-color: RGBA(var(--bs-warning-rgb), var(--bs-bg-opacity, 1)) !important;
}

.text-bg-danger {
  color: #fff !important;
  background-color: RGBA(var(--bs-danger-rgb), var(--bs-bg-opacity, 1)) !important;
}

.text-bg-light {
  color: #000 !important;
  background-color: RGBA(var(--bs-light-rgb), var(--bs-bg-opacity, 1)) !important;
}

.text-bg-dark {
  color: #fff !important;
  background-color: RGBA(var(--bs-dark-rgb), var(--bs-bg-opacity, 1)) !important;
}

.link-primary {
  color: RGBA(var(--bs-primary-rgb), var(--bs-link-opacity, 1)) !important;
  -webkit-text-decoration-color: RGBA(var(--bs-primary-rgb), var(--bs-link-underline-opacity, 1)) !important;
  text-decoration-color: RGBA(var(--bs-primary-rgb), var(--bs-link-underline-opacity, 1)) !important;
}
.link-primary:hover, .link-primary:focus {
  color: RGBA(10, 88, 202, var(--bs-link-opacity, 1)) !important;
  -webkit-text-decoration-color: RGBA(10, 88, 202, var(--bs-link-underline-opacity, 1)) !important;
  text-decoration-color: RGBA(10, 88, 202, var(--bs-link-underline-opacity, 1)) !important;
}

.link-secondary {
  color: RGBA(var(--bs-secondary-rgb), var(--bs-link-opacity, 1)) !important;
  -webkit-text-decoration-color: RGBA(var(--bs-secondary-rgb), var(--bs-link-underline-opacity, 1)) !important;
  text-decoration-color: RGBA(var(--bs-secondary-rgb), var(--bs-link-underline-opacity, 1)) !important;
}
.link-secondary:hover, .link-secondary:focus {
  color: RGBA(86, 94, 100, var(--bs-link-opacity, 1)) !important;
  -webkit-text-decoration-color: RGBA(86, 94, 100, var(--bs-link-underline-opacity, 1)) !important;
  text-decoration-color: RGBA(86, 94, 100, var(--bs-link-underline-opacity, 1)) !important;
}

.link-success {
  color: RGBA(var(--bs-success-rgb), var(--bs-link-opacity, 1)) !important;
  -webkit-text-decoration-color: RGBA(var(--bs-success-rgb), var(--bs-link-underline-opacity, 1)) !important;
  text-decoration-color: RGBA(var(--bs-success-rgb), var(--bs-link-underline-opacity, 1)) !important;
}
.link-success:hover, .link-success:focus {
  color: RGBA(20, 108, 67, var(--bs-link-opacity, 1)) !important;
  -webkit-text-decoration-color: RGBA(20, 108, 67, var(--bs-link-underline-opacity, 1)) !important;
  text-decoration-color: RGBA(20, 108, 67, var(--bs-link-underline-opacity, 1)) !important;
}

.link-info {
  color: RGBA(var(--bs-info-rgb), var(--bs-link-opacity, 1)) !important;
  -webkit-text-decoration-color: RGBA(var(--bs-info-rgb), var(--bs-link-underline-opacity, 1)) !important;
  text-decoration-color: RGBA(var(--bs-info-rgb), var(--bs-link-underline-opacity, 1)) !important;
}
.link-info:hover, .link-info:focus {
  color: RGBA(61, 213, 243, var(--bs-link-opacity, 1)) !important;
  -webkit-text-decoration-color: RGBA(61, 213, 243, var(--bs-link-underline-opacity, 1)) !important;
  text-decoration-color: RGBA(61, 213, 243, var(--bs-link-underline-opacity, 1)) !important;
}

.link-warning {
  color: RGBA(var(--bs-warning-rgb), var(--bs-link-opacity, 1)) !important;
  -webkit-text-decoration-color: RGBA(var(--bs-warning-rgb), var(--bs-link-underline-opacity, 1)) !important;
  text-decoration-color: RGBA(var(--bs-warning-rgb), var(--bs-link-underline-opacity, 1)) !important;
}
.link-warning:hover, .link-warning:focus {
  color: RGBA(255, 205, 57, var(--bs-link-opacity, 1)) !important;
  -webkit-text-decoration-color: RGBA(255, 205, 57, var(--bs-link-underline-opacity, 1)) !important;
  text-decoration-color: RGBA(255, 205, 57, var(--bs-link-underline-opacity, 1)) !important;
}

.link-danger {
  color: RGBA(var(--bs-danger-rgb), var(--bs-link-opacity, 1)) !important;
  -webkit-text-decoration-color: RGBA(var(--bs-danger-rgb), var(--bs-link-underline-opacity, 1)) !important;
  text-decoration-color: RGBA(var(--bs-danger-rgb), var(--bs-link-underline-opacity, 1)) !important;
}
.link-danger:hover, .link-danger:focus {
  color: RGBA(176, 42, 55, var(--bs-link-opacity, 1)) !important;
  -webkit-text-decoration-color: RGBA(176, 42, 55, var(--bs-link-underline-opacity, 1)) !important;
  text-decoration-color: RGBA(176, 42, 55, var(--bs-link-underline-opacity, 1)) !important;
}

.link-light {
  color: RGBA(var(--bs-light-rgb), var(--bs-link-opacity, 1)) !important;
  -webkit-text-decoration-color: RGBA(var(--bs-light-rgb), var(--bs-link-underline-opacity, 1)) !important;
  text-decoration-color: RGBA(var(--bs-light-rgb), var(--bs-link-underline-opacity, 1)) !important;
}
.link-light:hover, .link-light:focus {
  color: RGBA(249, 250, 251, var(--bs-link-opacity, 1)) !important;
  -webkit-text-decoration-color: RGBA(249, 250, 251, var(--bs-link-underline-opacity, 1)) !important;
  text-decoration-color: RGBA(249, 250, 251, var(--bs-link-underline-opacity, 1)) !important;
}

.link-dark {
  color: RGBA(var(--bs-dark-rgb), var(--bs-link-opacity, 1)) !important;
  -webkit-text-decoration-color: RGBA(var(--bs-dark-rgb), var(--bs-link-underline-opacity, 1)) !important;
  text-decoration-color: RGBA(var(--bs-dark-rgb), var(--bs-link-underline-opacity, 1)) !important;
}
.link-dark:hover, .link-dark:focus {
  color: RGBA(26, 30, 33, var(--bs-link-opacity, 1)) !important;
  -webkit-text-decoration-color: RGBA(26, 30, 33, var(--bs-link-underline-opacity, 1)) !important;
  text-decoration-color: RGBA(26, 30, 33, var(--bs-link-underline-opacity, 1)) !important;
}

.link-body-emphasis {
  color: RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-opacity, 1)) !important;
  -webkit-text-decoration-color: RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-underline-opacity, 1)) !important;
  text-decoration-color: RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-underline-opacity, 1)) !important;
}
.link-body-emphasis:hover, .link-body-emphasis:focus {
  color: RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-opacity, 0.75)) !important;
  -webkit-text-decoration-color: RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-underline-opacity, 0.75)) !important;
  text-decoration-color: RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-underline-opacity, 0.75)) !important;
}

.focus-ring:focus {
  outline: 0;
  box-shadow: var(--bs-focus-ring-x, 0) var(--bs-focus-ring-y, 0) var(--bs-focus-ring-blur, 0) var(--bs-focus-ring-width) var(--bs-focus-ring-color);
}

.icon-link {
  display: inline-flex;
  gap: 0.375rem;
  align-items: center;
  -webkit-text-decoration-color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 0.5));
  text-decoration-color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 0.5));
  text-underline-offset: 0.25em;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.icon-link > .bi {
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  fill: currentcolor;
  transition: 0.2s ease-in-out transform;
}
@media (prefers-reduced-motion: reduce) {
  .icon-link > .bi {
    transition: none;
  }
}

.icon-link-hover:hover > .bi, .icon-link-hover:focus-visible > .bi {
  transform: var(--bs-icon-link-transform, translate3d(0.25em, 0, 0));
}

.ratio {
  position: relative;
  width: 100%;
}
.ratio::before {
  display: block;
  padding-top: var(--bs-aspect-ratio);
  content: "";
}
.ratio > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.ratio-1x1 {
  --bs-aspect-ratio: 100%;
}

.ratio-4x3 {
  --bs-aspect-ratio: 75%;
}

.ratio-16x9 {
  --bs-aspect-ratio: 56.25%;
}

.ratio-21x9 {
  --bs-aspect-ratio: 42.8571428571%;
}

.fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
}

.fixed-bottom {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1030;
}

.sticky-top {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1020;
}

.sticky-bottom {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  z-index: 1020;
}

@media (min-width: 576px) {
  .sticky-sm-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1020;
  }
  .sticky-sm-bottom {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    z-index: 1020;
  }
}
@media (min-width: 768px) {
  .sticky-md-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1020;
  }
  .sticky-md-bottom {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    z-index: 1020;
  }
}
@media (min-width: 992px) {
  .sticky-lg-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1020;
  }
  .sticky-lg-bottom {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    z-index: 1020;
  }
}
@media (min-width: 1200px) {
  .sticky-xl-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1020;
  }
  .sticky-xl-bottom {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    z-index: 1020;
  }
}
@media (min-width: 1400px) {
  .sticky-xxl-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1020;
  }
  .sticky-xxl-bottom {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    z-index: 1020;
  }
}
.hstack {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-self: stretch;
}

.vstack {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-self: stretch;
}

.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.visually-hidden:not(caption),
.visually-hidden-focusable:not(:focus):not(:focus-within):not(caption) {
  position: absolute !important;
}
.visually-hidden *,
.visually-hidden-focusable:not(:focus):not(:focus-within) * {
  overflow: hidden !important;
}

.stretched-link::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  content: "";
}

.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vr {
  display: inline-block;
  align-self: stretch;
  width: var(--bs-border-width);
  min-height: 1em;
  background-color: currentcolor;
  opacity: 0.25;
}

.align-baseline {
  vertical-align: baseline !important;
}

.align-top {
  vertical-align: top !important;
}

.align-middle {
  vertical-align: middle !important;
}

.align-bottom {
  vertical-align: bottom !important;
}

.align-text-bottom {
  vertical-align: text-bottom !important;
}

.align-text-top {
  vertical-align: text-top !important;
}

.float-start {
  float: left !important;
}

.float-end {
  float: right !important;
}

.float-none {
  float: none !important;
}

.object-fit-contain {
  -o-object-fit: contain !important;
  object-fit: contain !important;
}

.object-fit-cover {
  -o-object-fit: cover !important;
  object-fit: cover !important;
}

.object-fit-fill {
  -o-object-fit: fill !important;
  object-fit: fill !important;
}

.object-fit-scale {
  -o-object-fit: scale-down !important;
  object-fit: scale-down !important;
}

.object-fit-none {
  -o-object-fit: none !important;
  object-fit: none !important;
}

.opacity-0 {
  opacity: 0 !important;
}

.opacity-25 {
  opacity: 0.25 !important;
}

.opacity-50 {
  opacity: 0.5 !important;
}

.opacity-75 {
  opacity: 0.75 !important;
}

.opacity-100 {
  opacity: 1 !important;
}

.overflow-auto {
  overflow: auto !important;
}

.overflow-hidden {
  overflow: hidden !important;
}

.overflow-visible {
  overflow: visible !important;
}

.overflow-scroll {
  overflow: scroll !important;
}

.overflow-x-auto {
  overflow-x: auto !important;
}

.overflow-x-hidden {
  overflow-x: hidden !important;
}

.overflow-x-visible {
  overflow-x: visible !important;
}

.overflow-x-scroll {
  overflow-x: scroll !important;
}

.overflow-y-auto {
  overflow-y: auto !important;
}

.overflow-y-hidden {
  overflow-y: hidden !important;
}

.overflow-y-visible {
  overflow-y: visible !important;
}

.overflow-y-scroll {
  overflow-y: scroll !important;
}

.d-inline {
  display: inline !important;
}

.d-inline-block {
  display: inline-block !important;
}

.d-block {
  display: block !important;
}

.d-grid {
  display: grid !important;
}

.d-inline-grid {
  display: inline-grid !important;
}

.d-table {
  display: table !important;
}

.d-table-row {
  display: table-row !important;
}

.d-table-cell {
  display: table-cell !important;
}

.d-flex {
  display: flex !important;
}

.d-inline-flex {
  display: inline-flex !important;
}

.d-none {
  display: none !important;
}

.shadow {
  box-shadow: var(--bs-box-shadow) !important;
}

.shadow-sm {
  box-shadow: var(--bs-box-shadow-sm) !important;
}

.shadow-lg {
  box-shadow: var(--bs-box-shadow-lg) !important;
}

.shadow-none {
  box-shadow: none !important;
}

.focus-ring-primary {
  --bs-focus-ring-color: rgba(var(--bs-primary-rgb), var(--bs-focus-ring-opacity));
}

.focus-ring-secondary {
  --bs-focus-ring-color: rgba(var(--bs-secondary-rgb), var(--bs-focus-ring-opacity));
}

.focus-ring-success {
  --bs-focus-ring-color: rgba(var(--bs-success-rgb), var(--bs-focus-ring-opacity));
}

.focus-ring-info {
  --bs-focus-ring-color: rgba(var(--bs-info-rgb), var(--bs-focus-ring-opacity));
}

.focus-ring-warning {
  --bs-focus-ring-color: rgba(var(--bs-warning-rgb), var(--bs-focus-ring-opacity));
}

.focus-ring-danger {
  --bs-focus-ring-color: rgba(var(--bs-danger-rgb), var(--bs-focus-ring-opacity));
}

.focus-ring-light {
  --bs-focus-ring-color: rgba(var(--bs-light-rgb), var(--bs-focus-ring-opacity));
}

.focus-ring-dark {
  --bs-focus-ring-color: rgba(var(--bs-dark-rgb), var(--bs-focus-ring-opacity));
}

.position-static {
  position: static !important;
}

.position-relative {
  position: relative !important;
}

.position-absolute {
  position: absolute !important;
}

.position-fixed {
  position: fixed !important;
}

.position-sticky {
  position: -webkit-sticky !important;
  position: sticky !important;
}

.top-0 {
  top: 0 !important;
}

.top-50 {
  top: 50% !important;
}

.top-100 {
  top: 100% !important;
}

.bottom-0 {
  bottom: 0 !important;
}

.bottom-50 {
  bottom: 50% !important;
}

.bottom-100 {
  bottom: 100% !important;
}

.start-0 {
  left: 0 !important;
}

.start-50 {
  left: 50% !important;
}

.start-100 {
  left: 100% !important;
}

.end-0 {
  right: 0 !important;
}

.end-50 {
  right: 50% !important;
}

.end-100 {
  right: 100% !important;
}

.translate-middle {
  transform: translate(-50%, -50%) !important;
}

.translate-middle-x {
  transform: translateX(-50%) !important;
}

.translate-middle-y {
  transform: translateY(-50%) !important;
}

.border {
  border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}

.border-0 {
  border: 0 !important;
}

.border-top {
  border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}

.border-top-0 {
  border-top: 0 !important;
}

.border-end {
  border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}

.border-end-0 {
  border-right: 0 !important;
}

.border-bottom {
  border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}

.border-bottom-0 {
  border-bottom: 0 !important;
}

.border-start {
  border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}

.border-start-0 {
  border-left: 0 !important;
}

.border-primary {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-primary-rgb), var(--bs-border-opacity)) !important;
}

.border-secondary {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-secondary-rgb), var(--bs-border-opacity)) !important;
}

.border-success {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-success-rgb), var(--bs-border-opacity)) !important;
}

.border-info {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-info-rgb), var(--bs-border-opacity)) !important;
}

.border-warning {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-warning-rgb), var(--bs-border-opacity)) !important;
}

.border-danger {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-danger-rgb), var(--bs-border-opacity)) !important;
}

.border-light {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-light-rgb), var(--bs-border-opacity)) !important;
}

.border-dark {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-dark-rgb), var(--bs-border-opacity)) !important;
}

.border-black {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-black-rgb), var(--bs-border-opacity)) !important;
}

.border-white {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-white-rgb), var(--bs-border-opacity)) !important;
}

.border-primary-subtle {
  border-color: var(--bs-primary-border-subtle) !important;
}

.border-secondary-subtle {
  border-color: var(--bs-secondary-border-subtle) !important;
}

.border-success-subtle {
  border-color: var(--bs-success-border-subtle) !important;
}

.border-info-subtle {
  border-color: var(--bs-info-border-subtle) !important;
}

.border-warning-subtle {
  border-color: var(--bs-warning-border-subtle) !important;
}

.border-danger-subtle {
  border-color: var(--bs-danger-border-subtle) !important;
}

.border-light-subtle {
  border-color: var(--bs-light-border-subtle) !important;
}

.border-dark-subtle {
  border-color: var(--bs-dark-border-subtle) !important;
}

.border-1 {
  border-width: 1px !important;
}

.border-2 {
  border-width: 2px !important;
}

.border-3 {
  border-width: 3px !important;
}

.border-4 {
  border-width: 4px !important;
}

.border-5 {
  border-width: 5px !important;
}

.border-opacity-10 {
  --bs-border-opacity: 0.1;
}

.border-opacity-25 {
  --bs-border-opacity: 0.25;
}

.border-opacity-50 {
  --bs-border-opacity: 0.5;
}

.border-opacity-75 {
  --bs-border-opacity: 0.75;
}

.border-opacity-100 {
  --bs-border-opacity: 1;
}

.w-25 {
  width: 25% !important;
}

.w-50 {
  width: 50% !important;
}

.w-75 {
  width: 75% !important;
}

.w-100 {
  width: 100% !important;
}

.w-auto {
  width: auto !important;
}

.mw-100 {
  max-width: 100% !important;
}

.vw-100 {
  width: 100vw !important;
}

.min-vw-100 {
  min-width: 100vw !important;
}

.h-25 {
  height: 25% !important;
}

.h-50 {
  height: 50% !important;
}

.h-75 {
  height: 75% !important;
}

.h-100 {
  height: 100% !important;
}

.h-auto {
  height: auto !important;
}

.mh-100 {
  max-height: 100% !important;
}

.vh-100 {
  height: 100vh !important;
}

.min-vh-100 {
  min-height: 100vh !important;
}

.flex-fill {
  flex: 1 1 auto !important;
}

.flex-row {
  flex-direction: row !important;
}

.flex-column {
  flex-direction: column !important;
}

.flex-row-reverse {
  flex-direction: row-reverse !important;
}

.flex-column-reverse {
  flex-direction: column-reverse !important;
}

.flex-grow-0 {
  flex-grow: 0 !important;
}

.flex-grow-1 {
  flex-grow: 1 !important;
}

.flex-shrink-0 {
  flex-shrink: 0 !important;
}

.flex-shrink-1 {
  flex-shrink: 1 !important;
}

.flex-wrap {
  flex-wrap: wrap !important;
}

.flex-nowrap {
  flex-wrap: nowrap !important;
}

.flex-wrap-reverse {
  flex-wrap: wrap-reverse !important;
}

.justify-content-start {
  justify-content: flex-start !important;
}

.justify-content-end {
  justify-content: flex-end !important;
}

.justify-content-center {
  justify-content: center !important;
}

.justify-content-between {
  justify-content: space-between !important;
}

.justify-content-around {
  justify-content: space-around !important;
}

.justify-content-evenly {
  justify-content: space-evenly !important;
}

.align-items-start {
  align-items: flex-start !important;
}

.align-items-end {
  align-items: flex-end !important;
}

.align-items-center {
  align-items: center !important;
}

.align-items-baseline {
  align-items: baseline !important;
}

.align-items-stretch {
  align-items: stretch !important;
}

.align-content-start {
  align-content: flex-start !important;
}

.align-content-end {
  align-content: flex-end !important;
}

.align-content-center {
  align-content: center !important;
}

.align-content-between {
  align-content: space-between !important;
}

.align-content-around {
  align-content: space-around !important;
}

.align-content-stretch {
  align-content: stretch !important;
}

.align-self-auto {
  align-self: auto !important;
}

.align-self-start {
  align-self: flex-start !important;
}

.align-self-end {
  align-self: flex-end !important;
}

.align-self-center {
  align-self: center !important;
}

.align-self-baseline {
  align-self: baseline !important;
}

.align-self-stretch {
  align-self: stretch !important;
}

.order-first {
  order: -1 !important;
}

.order-0 {
  order: 0 !important;
}

.order-1 {
  order: 1 !important;
}

.order-2 {
  order: 2 !important;
}

.order-3 {
  order: 3 !important;
}

.order-4 {
  order: 4 !important;
}

.order-5 {
  order: 5 !important;
}

.order-last {
  order: 6 !important;
}

.m-0 {
  margin: 0 !important;
}

.m-1 {
  margin: 0.25rem !important;
}

.m-2 {
  margin: 0.5rem !important;
}

.m-3 {
  margin: 1rem !important;
}

.m-4 {
  margin: 1.5rem !important;
}

.m-5 {
  margin: 3rem !important;
}

.m-auto {
  margin: auto !important;
}

.mx-0 {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.mx-1 {
  margin-right: 0.25rem !important;
  margin-left: 0.25rem !important;
}

.mx-2 {
  margin-right: 0.5rem !important;
  margin-left: 0.5rem !important;
}

.mx-3 {
  margin-right: 1rem !important;
  margin-left: 1rem !important;
}

.mx-4 {
  margin-right: 1.5rem !important;
  margin-left: 1.5rem !important;
}

.mx-5 {
  margin-right: 3rem !important;
  margin-left: 3rem !important;
}

.mx-auto {
  margin-right: auto !important;
  margin-left: auto !important;
}

.my-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.my-1 {
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem !important;
}

.my-2 {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

.my-3 {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}

.my-4 {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

.my-5 {
  margin-top: 3rem !important;
  margin-bottom: 3rem !important;
}

.my-auto {
  margin-top: auto !important;
  margin-bottom: auto !important;
}

.mt-0 {
  margin-top: 0 !important;
}

.mt-1 {
  margin-top: 0.25rem !important;
}

.mt-2 {
  margin-top: 0.5rem !important;
}

.mt-3 {
  margin-top: 1rem !important;
}

.mt-4 {
  margin-top: 1.5rem !important;
}

.mt-5 {
  margin-top: 3rem !important;
}

.mt-auto {
  margin-top: auto !important;
}

.me-0 {
  margin-right: 0 !important;
}

.me-1 {
  margin-right: 0.25rem !important;
}

.me-2 {
  margin-right: 0.5rem !important;
}

.me-3 {
  margin-right: 1rem !important;
}

.me-4 {
  margin-right: 1.5rem !important;
}

.me-5 {
  margin-right: 3rem !important;
}

.me-auto {
  margin-right: auto !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.mb-1 {
  margin-bottom: 0.25rem !important;
}

.mb-2 {
  margin-bottom: 0.5rem !important;
}

.mb-3 {
  margin-bottom: 1rem !important;
}

.mb-4 {
  margin-bottom: 1.5rem !important;
}

.mb-5 {
  margin-bottom: 3rem !important;
}

.mb-auto {
  margin-bottom: auto !important;
}

.ms-0 {
  margin-left: 0 !important;
}

.ms-1 {
  margin-left: 0.25rem !important;
}

.ms-2 {
  margin-left: 0.5rem !important;
}

.ms-3 {
  margin-left: 1rem !important;
}

.ms-4 {
  margin-left: 1.5rem !important;
}

.ms-5 {
  margin-left: 3rem !important;
}

.ms-auto {
  margin-left: auto !important;
}

.p-0 {
  padding: 0 !important;
}

.p-1 {
  padding: 0.25rem !important;
}

.p-2 {
  padding: 0.5rem !important;
}

.p-3 {
  padding: 1rem !important;
}

.p-4 {
  padding: 1.5rem !important;
}

.p-5 {
  padding: 3rem !important;
}

.px-0 {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.px-1 {
  padding-right: 0.25rem !important;
  padding-left: 0.25rem !important;
}

.px-2 {
  padding-right: 0.5rem !important;
  padding-left: 0.5rem !important;
}

.px-3 {
  padding-right: 1rem !important;
  padding-left: 1rem !important;
}

.px-4 {
  padding-right: 1.5rem !important;
  padding-left: 1.5rem !important;
}

.px-5 {
  padding-right: 3rem !important;
  padding-left: 3rem !important;
}

.py-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.py-1 {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}

.py-2 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

.py-3 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.py-4 {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

.py-5 {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}

.pt-0 {
  padding-top: 0 !important;
}

.pt-1 {
  padding-top: 0.25rem !important;
}

.pt-2 {
  padding-top: 0.5rem !important;
}

.pt-3 {
  padding-top: 1rem !important;
}

.pt-4 {
  padding-top: 1.5rem !important;
}

.pt-5 {
  padding-top: 3rem !important;
}

.pe-0 {
  padding-right: 0 !important;
}

.pe-1 {
  padding-right: 0.25rem !important;
}

.pe-2 {
  padding-right: 0.5rem !important;
}

.pe-3 {
  padding-right: 1rem !important;
}

.pe-4 {
  padding-right: 1.5rem !important;
}

.pe-5 {
  padding-right: 3rem !important;
}

.pb-0 {
  padding-bottom: 0 !important;
}

.pb-1 {
  padding-bottom: 0.25rem !important;
}

.pb-2 {
  padding-bottom: 0.5rem !important;
}

.pb-3 {
  padding-bottom: 1rem !important;
}

.pb-4 {
  padding-bottom: 1.5rem !important;
}

.pb-5 {
  padding-bottom: 3rem !important;
}

.ps-0 {
  padding-left: 0 !important;
}

.ps-1 {
  padding-left: 0.25rem !important;
}

.ps-2 {
  padding-left: 0.5rem !important;
}

.ps-3 {
  padding-left: 1rem !important;
}

.ps-4 {
  padding-left: 1.5rem !important;
}

.ps-5 {
  padding-left: 3rem !important;
}

.gap-0 {
  gap: 0 !important;
}

.gap-1 {
  gap: 0.25rem !important;
}

.gap-2 {
  gap: 0.5rem !important;
}

.gap-3 {
  gap: 1rem !important;
}

.gap-4 {
  gap: 1.5rem !important;
}

.gap-5 {
  gap: 3rem !important;
}

.row-gap-0 {
  row-gap: 0 !important;
}

.row-gap-1 {
  row-gap: 0.25rem !important;
}

.row-gap-2 {
  row-gap: 0.5rem !important;
}

.row-gap-3 {
  row-gap: 1rem !important;
}

.row-gap-4 {
  row-gap: 1.5rem !important;
}

.row-gap-5 {
  row-gap: 3rem !important;
}

.column-gap-0 {
  -moz-column-gap: 0 !important;
  column-gap: 0 !important;
}

.column-gap-1 {
  -moz-column-gap: 0.25rem !important;
  column-gap: 0.25rem !important;
}

.column-gap-2 {
  -moz-column-gap: 0.5rem !important;
  column-gap: 0.5rem !important;
}

.column-gap-3 {
  -moz-column-gap: 1rem !important;
  column-gap: 1rem !important;
}

.column-gap-4 {
  -moz-column-gap: 1.5rem !important;
  column-gap: 1.5rem !important;
}

.column-gap-5 {
  -moz-column-gap: 3rem !important;
  column-gap: 3rem !important;
}

.font-monospace {
  font-family: var(--bs-font-monospace) !important;
}

.fs-1 {
  font-size: calc(1.375rem + 1.5vw) !important;
}

.fs-2 {
  font-size: calc(1.325rem + 0.9vw) !important;
}

.fs-3 {
  font-size: calc(1.3rem + 0.6vw) !important;
}

.fs-4 {
  font-size: calc(1.275rem + 0.3vw) !important;
}

.fs-5 {
  font-size: 1.25rem !important;
}

.fs-6 {
  font-size: 1rem !important;
}

.fst-italic {
  font-style: italic !important;
}

.fst-normal {
  font-style: normal !important;
}

.fw-lighter {
  font-weight: lighter !important;
}

.fw-light {
  font-weight: 300 !important;
}

.fw-normal {
  font-weight: 400 !important;
}

.fw-medium {
  font-weight: 500 !important;
}

.fw-semibold {
  font-weight: 600 !important;
}

.fw-bold {
  font-weight: 700 !important;
}

.fw-bolder {
  font-weight: bolder !important;
}

.lh-1 {
  line-height: 1 !important;
}

.lh-sm {
  line-height: 1.25 !important;
}

.lh-base {
  line-height: 1.5 !important;
}

.lh-lg {
  line-height: 2 !important;
}

.text-start {
  text-align: left !important;
}

.text-end {
  text-align: right !important;
}

.text-center {
  text-align: center !important;
}

.text-decoration-none {
  text-decoration: none !important;
}

.text-decoration-underline {
  text-decoration: underline !important;
}

.text-decoration-line-through {
  text-decoration: line-through !important;
}

.text-lowercase {
  text-transform: lowercase !important;
}

.text-uppercase {
  text-transform: uppercase !important;
}

.text-capitalize {
  text-transform: capitalize !important;
}

.text-wrap {
  white-space: normal !important;
}

.text-nowrap {
  white-space: nowrap !important;
}

/* rtl:begin:remove */
.text-break {
  word-wrap: break-word !important;
  word-break: break-word !important;
}

/* rtl:end:remove */
.text-primary {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}

.text-secondary {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-secondary-rgb), var(--bs-text-opacity)) !important;
}

.text-success {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-success-rgb), var(--bs-text-opacity)) !important;
}

.text-info {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-info-rgb), var(--bs-text-opacity)) !important;
}

.text-warning {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-warning-rgb), var(--bs-text-opacity)) !important;
}

.text-danger {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-danger-rgb), var(--bs-text-opacity)) !important;
}

.text-light {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-light-rgb), var(--bs-text-opacity)) !important;
}

.text-dark {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-dark-rgb), var(--bs-text-opacity)) !important;
}

.text-black {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-black-rgb), var(--bs-text-opacity)) !important;
}

.text-white {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-white-rgb), var(--bs-text-opacity)) !important;
}

.text-body {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-body-color-rgb), var(--bs-text-opacity)) !important;
}

.text-muted {
  --bs-text-opacity: 1;
  color: var(--bs-secondary-color) !important;
}

.text-black-50 {
  --bs-text-opacity: 1;
  color: rgba(0, 0, 0, 0.5) !important;
}

.text-white-50 {
  --bs-text-opacity: 1;
  color: rgba(255, 255, 255, 0.5) !important;
}

.text-body-secondary {
  --bs-text-opacity: 1;
  color: var(--bs-secondary-color) !important;
}

.text-body-tertiary {
  --bs-text-opacity: 1;
  color: var(--bs-tertiary-color) !important;
}

.text-body-emphasis {
  --bs-text-opacity: 1;
  color: var(--bs-emphasis-color) !important;
}

.text-reset {
  --bs-text-opacity: 1;
  color: inherit !important;
}

.text-opacity-25 {
  --bs-text-opacity: 0.25;
}

.text-opacity-50 {
  --bs-text-opacity: 0.5;
}

.text-opacity-75 {
  --bs-text-opacity: 0.75;
}

.text-opacity-100 {
  --bs-text-opacity: 1;
}

.text-primary-emphasis {
  color: var(--bs-primary-text-emphasis) !important;
}

.text-secondary-emphasis {
  color: var(--bs-secondary-text-emphasis) !important;
}

.text-success-emphasis {
  color: var(--bs-success-text-emphasis) !important;
}

.text-info-emphasis {
  color: var(--bs-info-text-emphasis) !important;
}

.text-warning-emphasis {
  color: var(--bs-warning-text-emphasis) !important;
}

.text-danger-emphasis {
  color: var(--bs-danger-text-emphasis) !important;
}

.text-light-emphasis {
  color: var(--bs-light-text-emphasis) !important;
}

.text-dark-emphasis {
  color: var(--bs-dark-text-emphasis) !important;
}

.link-opacity-10 {
  --bs-link-opacity: 0.1;
}

.link-opacity-10-hover:hover {
  --bs-link-opacity: 0.1;
}

.link-opacity-25 {
  --bs-link-opacity: 0.25;
}

.link-opacity-25-hover:hover {
  --bs-link-opacity: 0.25;
}

.link-opacity-50 {
  --bs-link-opacity: 0.5;
}

.link-opacity-50-hover:hover {
  --bs-link-opacity: 0.5;
}

.link-opacity-75 {
  --bs-link-opacity: 0.75;
}

.link-opacity-75-hover:hover {
  --bs-link-opacity: 0.75;
}

.link-opacity-100 {
  --bs-link-opacity: 1;
}

.link-opacity-100-hover:hover {
  --bs-link-opacity: 1;
}

.link-offset-1 {
  text-underline-offset: 0.125em !important;
}

.link-offset-1-hover:hover {
  text-underline-offset: 0.125em !important;
}

.link-offset-2 {
  text-underline-offset: 0.25em !important;
}

.link-offset-2-hover:hover {
  text-underline-offset: 0.25em !important;
}

.link-offset-3 {
  text-underline-offset: 0.375em !important;
}

.link-offset-3-hover:hover {
  text-underline-offset: 0.375em !important;
}

.link-underline-primary {
  --bs-link-underline-opacity: 1;
  -webkit-text-decoration-color: rgba(var(--bs-primary-rgb), var(--bs-link-underline-opacity)) !important;
  text-decoration-color: rgba(var(--bs-primary-rgb), var(--bs-link-underline-opacity)) !important;
}

.link-underline-secondary {
  --bs-link-underline-opacity: 1;
  -webkit-text-decoration-color: rgba(var(--bs-secondary-rgb), var(--bs-link-underline-opacity)) !important;
  text-decoration-color: rgba(var(--bs-secondary-rgb), var(--bs-link-underline-opacity)) !important;
}

.link-underline-success {
  --bs-link-underline-opacity: 1;
  -webkit-text-decoration-color: rgba(var(--bs-success-rgb), var(--bs-link-underline-opacity)) !important;
  text-decoration-color: rgba(var(--bs-success-rgb), var(--bs-link-underline-opacity)) !important;
}

.link-underline-info {
  --bs-link-underline-opacity: 1;
  -webkit-text-decoration-color: rgba(var(--bs-info-rgb), var(--bs-link-underline-opacity)) !important;
  text-decoration-color: rgba(var(--bs-info-rgb), var(--bs-link-underline-opacity)) !important;
}

.link-underline-warning {
  --bs-link-underline-opacity: 1;
  -webkit-text-decoration-color: rgba(var(--bs-warning-rgb), var(--bs-link-underline-opacity)) !important;
  text-decoration-color: rgba(var(--bs-warning-rgb), var(--bs-link-underline-opacity)) !important;
}

.link-underline-danger {
  --bs-link-underline-opacity: 1;
  -webkit-text-decoration-color: rgba(var(--bs-danger-rgb), var(--bs-link-underline-opacity)) !important;
  text-decoration-color: rgba(var(--bs-danger-rgb), var(--bs-link-underline-opacity)) !important;
}

.link-underline-light {
  --bs-link-underline-opacity: 1;
  -webkit-text-decoration-color: rgba(var(--bs-light-rgb), var(--bs-link-underline-opacity)) !important;
  text-decoration-color: rgba(var(--bs-light-rgb), var(--bs-link-underline-opacity)) !important;
}

.link-underline-dark {
  --bs-link-underline-opacity: 1;
  -webkit-text-decoration-color: rgba(var(--bs-dark-rgb), var(--bs-link-underline-opacity)) !important;
  text-decoration-color: rgba(var(--bs-dark-rgb), var(--bs-link-underline-opacity)) !important;
}

.link-underline {
  --bs-link-underline-opacity: 1;
  -webkit-text-decoration-color: rgba(var(--bs-link-color-rgb), var(--bs-link-underline-opacity, 1)) !important;
  text-decoration-color: rgba(var(--bs-link-color-rgb), var(--bs-link-underline-opacity, 1)) !important;
}

.link-underline-opacity-0 {
  --bs-link-underline-opacity: 0;
}

.link-underline-opacity-0-hover:hover {
  --bs-link-underline-opacity: 0;
}

.link-underline-opacity-10 {
  --bs-link-underline-opacity: 0.1;
}

.link-underline-opacity-10-hover:hover {
  --bs-link-underline-opacity: 0.1;
}

.link-underline-opacity-25 {
  --bs-link-underline-opacity: 0.25;
}

.link-underline-opacity-25-hover:hover {
  --bs-link-underline-opacity: 0.25;
}

.link-underline-opacity-50 {
  --bs-link-underline-opacity: 0.5;
}

.link-underline-opacity-50-hover:hover {
  --bs-link-underline-opacity: 0.5;
}

.link-underline-opacity-75 {
  --bs-link-underline-opacity: 0.75;
}

.link-underline-opacity-75-hover:hover {
  --bs-link-underline-opacity: 0.75;
}

.link-underline-opacity-100 {
  --bs-link-underline-opacity: 1;
}

.link-underline-opacity-100-hover:hover {
  --bs-link-underline-opacity: 1;
}

.bg-primary {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
}

.bg-secondary {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-secondary-rgb), var(--bs-bg-opacity)) !important;
}

.bg-success {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important;
}

.bg-info {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-info-rgb), var(--bs-bg-opacity)) !important;
}

.bg-warning {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity)) !important;
}

.bg-danger {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-danger-rgb), var(--bs-bg-opacity)) !important;
}

.bg-light {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important;
}

.bg-dark {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity)) !important;
}

.bg-black {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-black-rgb), var(--bs-bg-opacity)) !important;
}

.bg-white {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-white-rgb), var(--bs-bg-opacity)) !important;
}

.bg-body {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
}

.bg-transparent {
  --bs-bg-opacity: 1;
  background-color: transparent !important;
}

.bg-body-secondary {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-secondary-bg-rgb), var(--bs-bg-opacity)) !important;
}

.bg-body-tertiary {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-tertiary-bg-rgb), var(--bs-bg-opacity)) !important;
}

.bg-opacity-10 {
  --bs-bg-opacity: 0.1;
}

.bg-opacity-25 {
  --bs-bg-opacity: 0.25;
}

.bg-opacity-50 {
  --bs-bg-opacity: 0.5;
}

.bg-opacity-75 {
  --bs-bg-opacity: 0.75;
}

.bg-opacity-100 {
  --bs-bg-opacity: 1;
}

.bg-primary-subtle {
  background-color: var(--bs-primary-bg-subtle) !important;
}

.bg-secondary-subtle {
  background-color: var(--bs-secondary-bg-subtle) !important;
}

.bg-success-subtle {
  background-color: var(--bs-success-bg-subtle) !important;
}

.bg-info-subtle {
  background-color: var(--bs-info-bg-subtle) !important;
}

.bg-warning-subtle {
  background-color: var(--bs-warning-bg-subtle) !important;
}

.bg-danger-subtle {
  background-color: var(--bs-danger-bg-subtle) !important;
}

.bg-light-subtle {
  background-color: var(--bs-light-bg-subtle) !important;
}

.bg-dark-subtle {
  background-color: var(--bs-dark-bg-subtle) !important;
}

.bg-gradient {
  background-image: var(--bs-gradient) !important;
}

.user-select-all {
  -webkit-user-select: all !important;
  -moz-user-select: all !important;
  user-select: all !important;
}

.user-select-auto {
  -webkit-user-select: auto !important;
  -moz-user-select: auto !important;
  user-select: auto !important;
}

.user-select-none {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  user-select: none !important;
}

.pe-none {
  pointer-events: none !important;
}

.pe-auto {
  pointer-events: auto !important;
}

.rounded {
  border-radius: var(--bs-border-radius) !important;
}

.rounded-0 {
  border-radius: 0 !important;
}

.rounded-1 {
  border-radius: var(--bs-border-radius-sm) !important;
}

.rounded-2 {
  border-radius: var(--bs-border-radius) !important;
}

.rounded-3 {
  border-radius: var(--bs-border-radius-lg) !important;
}

.rounded-4 {
  border-radius: var(--bs-border-radius-xl) !important;
}

.rounded-5 {
  border-radius: var(--bs-border-radius-xxl) !important;
}

.rounded-circle {
  border-radius: 50% !important;
}

.rounded-pill {
  border-radius: var(--bs-border-radius-pill) !important;
}

.rounded-top {
  border-top-left-radius: var(--bs-border-radius) !important;
  border-top-right-radius: var(--bs-border-radius) !important;
}

.rounded-top-0 {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

.rounded-top-1 {
  border-top-left-radius: var(--bs-border-radius-sm) !important;
  border-top-right-radius: var(--bs-border-radius-sm) !important;
}

.rounded-top-2 {
  border-top-left-radius: var(--bs-border-radius) !important;
  border-top-right-radius: var(--bs-border-radius) !important;
}

.rounded-top-3 {
  border-top-left-radius: var(--bs-border-radius-lg) !important;
  border-top-right-radius: var(--bs-border-radius-lg) !important;
}

.rounded-top-4 {
  border-top-left-radius: var(--bs-border-radius-xl) !important;
  border-top-right-radius: var(--bs-border-radius-xl) !important;
}

.rounded-top-5 {
  border-top-left-radius: var(--bs-border-radius-xxl) !important;
  border-top-right-radius: var(--bs-border-radius-xxl) !important;
}

.rounded-top-circle {
  border-top-left-radius: 50% !important;
  border-top-right-radius: 50% !important;
}

.rounded-top-pill {
  border-top-left-radius: var(--bs-border-radius-pill) !important;
  border-top-right-radius: var(--bs-border-radius-pill) !important;
}

.rounded-end {
  border-top-right-radius: var(--bs-border-radius) !important;
  border-bottom-right-radius: var(--bs-border-radius) !important;
}

.rounded-end-0 {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.rounded-end-1 {
  border-top-right-radius: var(--bs-border-radius-sm) !important;
  border-bottom-right-radius: var(--bs-border-radius-sm) !important;
}

.rounded-end-2 {
  border-top-right-radius: var(--bs-border-radius) !important;
  border-bottom-right-radius: var(--bs-border-radius) !important;
}

.rounded-end-3 {
  border-top-right-radius: var(--bs-border-radius-lg) !important;
  border-bottom-right-radius: var(--bs-border-radius-lg) !important;
}

.rounded-end-4 {
  border-top-right-radius: var(--bs-border-radius-xl) !important;
  border-bottom-right-radius: var(--bs-border-radius-xl) !important;
}

.rounded-end-5 {
  border-top-right-radius: var(--bs-border-radius-xxl) !important;
  border-bottom-right-radius: var(--bs-border-radius-xxl) !important;
}

.rounded-end-circle {
  border-top-right-radius: 50% !important;
  border-bottom-right-radius: 50% !important;
}

.rounded-end-pill {
  border-top-right-radius: var(--bs-border-radius-pill) !important;
  border-bottom-right-radius: var(--bs-border-radius-pill) !important;
}

.rounded-bottom {
  border-bottom-right-radius: var(--bs-border-radius) !important;
  border-bottom-left-radius: var(--bs-border-radius) !important;
}

.rounded-bottom-0 {
  border-bottom-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.rounded-bottom-1 {
  border-bottom-right-radius: var(--bs-border-radius-sm) !important;
  border-bottom-left-radius: var(--bs-border-radius-sm) !important;
}

.rounded-bottom-2 {
  border-bottom-right-radius: var(--bs-border-radius) !important;
  border-bottom-left-radius: var(--bs-border-radius) !important;
}

.rounded-bottom-3 {
  border-bottom-right-radius: var(--bs-border-radius-lg) !important;
  border-bottom-left-radius: var(--bs-border-radius-lg) !important;
}

.rounded-bottom-4 {
  border-bottom-right-radius: var(--bs-border-radius-xl) !important;
  border-bottom-left-radius: var(--bs-border-radius-xl) !important;
}

.rounded-bottom-5 {
  border-bottom-right-radius: var(--bs-border-radius-xxl) !important;
  border-bottom-left-radius: var(--bs-border-radius-xxl) !important;
}

.rounded-bottom-circle {
  border-bottom-right-radius: 50% !important;
  border-bottom-left-radius: 50% !important;
}

.rounded-bottom-pill {
  border-bottom-right-radius: var(--bs-border-radius-pill) !important;
  border-bottom-left-radius: var(--bs-border-radius-pill) !important;
}

.rounded-start {
  border-bottom-left-radius: var(--bs-border-radius) !important;
  border-top-left-radius: var(--bs-border-radius) !important;
}

.rounded-start-0 {
  border-bottom-left-radius: 0 !important;
  border-top-left-radius: 0 !important;
}

.rounded-start-1 {
  border-bottom-left-radius: var(--bs-border-radius-sm) !important;
  border-top-left-radius: var(--bs-border-radius-sm) !important;
}

.rounded-start-2 {
  border-bottom-left-radius: var(--bs-border-radius) !important;
  border-top-left-radius: var(--bs-border-radius) !important;
}

.rounded-start-3 {
  border-bottom-left-radius: var(--bs-border-radius-lg) !important;
  border-top-left-radius: var(--bs-border-radius-lg) !important;
}

.rounded-start-4 {
  border-bottom-left-radius: var(--bs-border-radius-xl) !important;
  border-top-left-radius: var(--bs-border-radius-xl) !important;
}

.rounded-start-5 {
  border-bottom-left-radius: var(--bs-border-radius-xxl) !important;
  border-top-left-radius: var(--bs-border-radius-xxl) !important;
}

.rounded-start-circle {
  border-bottom-left-radius: 50% !important;
  border-top-left-radius: 50% !important;
}

.rounded-start-pill {
  border-bottom-left-radius: var(--bs-border-radius-pill) !important;
  border-top-left-radius: var(--bs-border-radius-pill) !important;
}

.visible {
  visibility: visible !important;
}

.invisible {
  visibility: hidden !important;
}

.z-n1 {
  z-index: -1 !important;
}

.z-0 {
  z-index: 0 !important;
}

.z-1 {
  z-index: 1 !important;
}

.z-2 {
  z-index: 2 !important;
}

.z-3 {
  z-index: 3 !important;
}

@media (min-width: 576px) {
  .float-sm-start {
    float: left !important;
  }
  .float-sm-end {
    float: right !important;
  }
  .float-sm-none {
    float: none !important;
  }
  .object-fit-sm-contain {
    -o-object-fit: contain !important;
    object-fit: contain !important;
  }
  .object-fit-sm-cover {
    -o-object-fit: cover !important;
    object-fit: cover !important;
  }
  .object-fit-sm-fill {
    -o-object-fit: fill !important;
    object-fit: fill !important;
  }
  .object-fit-sm-scale {
    -o-object-fit: scale-down !important;
    object-fit: scale-down !important;
  }
  .object-fit-sm-none {
    -o-object-fit: none !important;
    object-fit: none !important;
  }
  .d-sm-inline {
    display: inline !important;
  }
  .d-sm-inline-block {
    display: inline-block !important;
  }
  .d-sm-block {
    display: block !important;
  }
  .d-sm-grid {
    display: grid !important;
  }
  .d-sm-inline-grid {
    display: inline-grid !important;
  }
  .d-sm-table {
    display: table !important;
  }
  .d-sm-table-row {
    display: table-row !important;
  }
  .d-sm-table-cell {
    display: table-cell !important;
  }
  .d-sm-flex {
    display: flex !important;
  }
  .d-sm-inline-flex {
    display: inline-flex !important;
  }
  .d-sm-none {
    display: none !important;
  }
  .flex-sm-fill {
    flex: 1 1 auto !important;
  }
  .flex-sm-row {
    flex-direction: row !important;
  }
  .flex-sm-column {
    flex-direction: column !important;
  }
  .flex-sm-row-reverse {
    flex-direction: row-reverse !important;
  }
  .flex-sm-column-reverse {
    flex-direction: column-reverse !important;
  }
  .flex-sm-grow-0 {
    flex-grow: 0 !important;
  }
  .flex-sm-grow-1 {
    flex-grow: 1 !important;
  }
  .flex-sm-shrink-0 {
    flex-shrink: 0 !important;
  }
  .flex-sm-shrink-1 {
    flex-shrink: 1 !important;
  }
  .flex-sm-wrap {
    flex-wrap: wrap !important;
  }
  .flex-sm-nowrap {
    flex-wrap: nowrap !important;
  }
  .flex-sm-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }
  .justify-content-sm-start {
    justify-content: flex-start !important;
  }
  .justify-content-sm-end {
    justify-content: flex-end !important;
  }
  .justify-content-sm-center {
    justify-content: center !important;
  }
  .justify-content-sm-between {
    justify-content: space-between !important;
  }
  .justify-content-sm-around {
    justify-content: space-around !important;
  }
  .justify-content-sm-evenly {
    justify-content: space-evenly !important;
  }
  .align-items-sm-start {
    align-items: flex-start !important;
  }
  .align-items-sm-end {
    align-items: flex-end !important;
  }
  .align-items-sm-center {
    align-items: center !important;
  }
  .align-items-sm-baseline {
    align-items: baseline !important;
  }
  .align-items-sm-stretch {
    align-items: stretch !important;
  }
  .align-content-sm-start {
    align-content: flex-start !important;
  }
  .align-content-sm-end {
    align-content: flex-end !important;
  }
  .align-content-sm-center {
    align-content: center !important;
  }
  .align-content-sm-between {
    align-content: space-between !important;
  }
  .align-content-sm-around {
    align-content: space-around !important;
  }
  .align-content-sm-stretch {
    align-content: stretch !important;
  }
  .align-self-sm-auto {
    align-self: auto !important;
  }
  .align-self-sm-start {
    align-self: flex-start !important;
  }
  .align-self-sm-end {
    align-self: flex-end !important;
  }
  .align-self-sm-center {
    align-self: center !important;
  }
  .align-self-sm-baseline {
    align-self: baseline !important;
  }
  .align-self-sm-stretch {
    align-self: stretch !important;
  }
  .order-sm-first {
    order: -1 !important;
  }
  .order-sm-0 {
    order: 0 !important;
  }
  .order-sm-1 {
    order: 1 !important;
  }
  .order-sm-2 {
    order: 2 !important;
  }
  .order-sm-3 {
    order: 3 !important;
  }
  .order-sm-4 {
    order: 4 !important;
  }
  .order-sm-5 {
    order: 5 !important;
  }
  .order-sm-last {
    order: 6 !important;
  }
  .m-sm-0 {
    margin: 0 !important;
  }
  .m-sm-1 {
    margin: 0.25rem !important;
  }
  .m-sm-2 {
    margin: 0.5rem !important;
  }
  .m-sm-3 {
    margin: 1rem !important;
  }
  .m-sm-4 {
    margin: 1.5rem !important;
  }
  .m-sm-5 {
    margin: 3rem !important;
  }
  .m-sm-auto {
    margin: auto !important;
  }
  .mx-sm-0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .mx-sm-1 {
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important;
  }
  .mx-sm-2 {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
  }
  .mx-sm-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
  }
  .mx-sm-4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important;
  }
  .mx-sm-5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important;
  }
  .mx-sm-auto {
    margin-right: auto !important;
    margin-left: auto !important;
  }
  .my-sm-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .my-sm-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
  }
  .my-sm-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  .my-sm-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }
  .my-sm-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }
  .my-sm-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
  }
  .my-sm-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
  .mt-sm-0 {
    margin-top: 0 !important;
  }
  .mt-sm-1 {
    margin-top: 0.25rem !important;
  }
  .mt-sm-2 {
    margin-top: 0.5rem !important;
  }
  .mt-sm-3 {
    margin-top: 1rem !important;
  }
  .mt-sm-4 {
    margin-top: 1.5rem !important;
  }
  .mt-sm-5 {
    margin-top: 3rem !important;
  }
  .mt-sm-auto {
    margin-top: auto !important;
  }
  .me-sm-0 {
    margin-right: 0 !important;
  }
  .me-sm-1 {
    margin-right: 0.25rem !important;
  }
  .me-sm-2 {
    margin-right: 0.5rem !important;
  }
  .me-sm-3 {
    margin-right: 1rem !important;
  }
  .me-sm-4 {
    margin-right: 1.5rem !important;
  }
  .me-sm-5 {
    margin-right: 3rem !important;
  }
  .me-sm-auto {
    margin-right: auto !important;
  }
  .mb-sm-0 {
    margin-bottom: 0 !important;
  }
  .mb-sm-1 {
    margin-bottom: 0.25rem !important;
  }
  .mb-sm-2 {
    margin-bottom: 0.5rem !important;
  }
  .mb-sm-3 {
    margin-bottom: 1rem !important;
  }
  .mb-sm-4 {
    margin-bottom: 1.5rem !important;
  }
  .mb-sm-5 {
    margin-bottom: 3rem !important;
  }
  .mb-sm-auto {
    margin-bottom: auto !important;
  }
  .ms-sm-0 {
    margin-left: 0 !important;
  }
  .ms-sm-1 {
    margin-left: 0.25rem !important;
  }
  .ms-sm-2 {
    margin-left: 0.5rem !important;
  }
  .ms-sm-3 {
    margin-left: 1rem !important;
  }
  .ms-sm-4 {
    margin-left: 1.5rem !important;
  }
  .ms-sm-5 {
    margin-left: 3rem !important;
  }
  .ms-sm-auto {
    margin-left: auto !important;
  }
  .p-sm-0 {
    padding: 0 !important;
  }
  .p-sm-1 {
    padding: 0.25rem !important;
  }
  .p-sm-2 {
    padding: 0.5rem !important;
  }
  .p-sm-3 {
    padding: 1rem !important;
  }
  .p-sm-4 {
    padding: 1.5rem !important;
  }
  .p-sm-5 {
    padding: 3rem !important;
  }
  .px-sm-0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  .px-sm-1 {
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important;
  }
  .px-sm-2 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
  }
  .px-sm-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }
  .px-sm-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
  }
  .px-sm-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
  }
  .py-sm-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .py-sm-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }
  .py-sm-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
  .py-sm-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
  .py-sm-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  .py-sm-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  .pt-sm-0 {
    padding-top: 0 !important;
  }
  .pt-sm-1 {
    padding-top: 0.25rem !important;
  }
  .pt-sm-2 {
    padding-top: 0.5rem !important;
  }
  .pt-sm-3 {
    padding-top: 1rem !important;
  }
  .pt-sm-4 {
    padding-top: 1.5rem !important;
  }
  .pt-sm-5 {
    padding-top: 3rem !important;
  }
  .pe-sm-0 {
    padding-right: 0 !important;
  }
  .pe-sm-1 {
    padding-right: 0.25rem !important;
  }
  .pe-sm-2 {
    padding-right: 0.5rem !important;
  }
  .pe-sm-3 {
    padding-right: 1rem !important;
  }
  .pe-sm-4 {
    padding-right: 1.5rem !important;
  }
  .pe-sm-5 {
    padding-right: 3rem !important;
  }
  .pb-sm-0 {
    padding-bottom: 0 !important;
  }
  .pb-sm-1 {
    padding-bottom: 0.25rem !important;
  }
  .pb-sm-2 {
    padding-bottom: 0.5rem !important;
  }
  .pb-sm-3 {
    padding-bottom: 1rem !important;
  }
  .pb-sm-4 {
    padding-bottom: 1.5rem !important;
  }
  .pb-sm-5 {
    padding-bottom: 3rem !important;
  }
  .ps-sm-0 {
    padding-left: 0 !important;
  }
  .ps-sm-1 {
    padding-left: 0.25rem !important;
  }
  .ps-sm-2 {
    padding-left: 0.5rem !important;
  }
  .ps-sm-3 {
    padding-left: 1rem !important;
  }
  .ps-sm-4 {
    padding-left: 1.5rem !important;
  }
  .ps-sm-5 {
    padding-left: 3rem !important;
  }
  .gap-sm-0 {
    gap: 0 !important;
  }
  .gap-sm-1 {
    gap: 0.25rem !important;
  }
  .gap-sm-2 {
    gap: 0.5rem !important;
  }
  .gap-sm-3 {
    gap: 1rem !important;
  }
  .gap-sm-4 {
    gap: 1.5rem !important;
  }
  .gap-sm-5 {
    gap: 3rem !important;
  }
  .row-gap-sm-0 {
    row-gap: 0 !important;
  }
  .row-gap-sm-1 {
    row-gap: 0.25rem !important;
  }
  .row-gap-sm-2 {
    row-gap: 0.5rem !important;
  }
  .row-gap-sm-3 {
    row-gap: 1rem !important;
  }
  .row-gap-sm-4 {
    row-gap: 1.5rem !important;
  }
  .row-gap-sm-5 {
    row-gap: 3rem !important;
  }
  .column-gap-sm-0 {
    -moz-column-gap: 0 !important;
    column-gap: 0 !important;
  }
  .column-gap-sm-1 {
    -moz-column-gap: 0.25rem !important;
    column-gap: 0.25rem !important;
  }
  .column-gap-sm-2 {
    -moz-column-gap: 0.5rem !important;
    column-gap: 0.5rem !important;
  }
  .column-gap-sm-3 {
    -moz-column-gap: 1rem !important;
    column-gap: 1rem !important;
  }
  .column-gap-sm-4 {
    -moz-column-gap: 1.5rem !important;
    column-gap: 1.5rem !important;
  }
  .column-gap-sm-5 {
    -moz-column-gap: 3rem !important;
    column-gap: 3rem !important;
  }
  .text-sm-start {
    text-align: left !important;
  }
  .text-sm-end {
    text-align: right !important;
  }
  .text-sm-center {
    text-align: center !important;
  }
}
@media (min-width: 768px) {
  .float-md-start {
    float: left !important;
  }
  .float-md-end {
    float: right !important;
  }
  .float-md-none {
    float: none !important;
  }
  .object-fit-md-contain {
    -o-object-fit: contain !important;
    object-fit: contain !important;
  }
  .object-fit-md-cover {
    -o-object-fit: cover !important;
    object-fit: cover !important;
  }
  .object-fit-md-fill {
    -o-object-fit: fill !important;
    object-fit: fill !important;
  }
  .object-fit-md-scale {
    -o-object-fit: scale-down !important;
    object-fit: scale-down !important;
  }
  .object-fit-md-none {
    -o-object-fit: none !important;
    object-fit: none !important;
  }
  .d-md-inline {
    display: inline !important;
  }
  .d-md-inline-block {
    display: inline-block !important;
  }
  .d-md-block {
    display: block !important;
  }
  .d-md-grid {
    display: grid !important;
  }
  .d-md-inline-grid {
    display: inline-grid !important;
  }
  .d-md-table {
    display: table !important;
  }
  .d-md-table-row {
    display: table-row !important;
  }
  .d-md-table-cell {
    display: table-cell !important;
  }
  .d-md-flex {
    display: flex !important;
  }
  .d-md-inline-flex {
    display: inline-flex !important;
  }
  .d-md-none {
    display: none !important;
  }
  .flex-md-fill {
    flex: 1 1 auto !important;
  }
  .flex-md-row {
    flex-direction: row !important;
  }
  .flex-md-column {
    flex-direction: column !important;
  }
  .flex-md-row-reverse {
    flex-direction: row-reverse !important;
  }
  .flex-md-column-reverse {
    flex-direction: column-reverse !important;
  }
  .flex-md-grow-0 {
    flex-grow: 0 !important;
  }
  .flex-md-grow-1 {
    flex-grow: 1 !important;
  }
  .flex-md-shrink-0 {
    flex-shrink: 0 !important;
  }
  .flex-md-shrink-1 {
    flex-shrink: 1 !important;
  }
  .flex-md-wrap {
    flex-wrap: wrap !important;
  }
  .flex-md-nowrap {
    flex-wrap: nowrap !important;
  }
  .flex-md-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }
  .justify-content-md-start {
    justify-content: flex-start !important;
  }
  .justify-content-md-end {
    justify-content: flex-end !important;
  }
  .justify-content-md-center {
    justify-content: center !important;
  }
  .justify-content-md-between {
    justify-content: space-between !important;
  }
  .justify-content-md-around {
    justify-content: space-around !important;
  }
  .justify-content-md-evenly {
    justify-content: space-evenly !important;
  }
  .align-items-md-start {
    align-items: flex-start !important;
  }
  .align-items-md-end {
    align-items: flex-end !important;
  }
  .align-items-md-center {
    align-items: center !important;
  }
  .align-items-md-baseline {
    align-items: baseline !important;
  }
  .align-items-md-stretch {
    align-items: stretch !important;
  }
  .align-content-md-start {
    align-content: flex-start !important;
  }
  .align-content-md-end {
    align-content: flex-end !important;
  }
  .align-content-md-center {
    align-content: center !important;
  }
  .align-content-md-between {
    align-content: space-between !important;
  }
  .align-content-md-around {
    align-content: space-around !important;
  }
  .align-content-md-stretch {
    align-content: stretch !important;
  }
  .align-self-md-auto {
    align-self: auto !important;
  }
  .align-self-md-start {
    align-self: flex-start !important;
  }
  .align-self-md-end {
    align-self: flex-end !important;
  }
  .align-self-md-center {
    align-self: center !important;
  }
  .align-self-md-baseline {
    align-self: baseline !important;
  }
  .align-self-md-stretch {
    align-self: stretch !important;
  }
  .order-md-first {
    order: -1 !important;
  }
  .order-md-0 {
    order: 0 !important;
  }
  .order-md-1 {
    order: 1 !important;
  }
  .order-md-2 {
    order: 2 !important;
  }
  .order-md-3 {
    order: 3 !important;
  }
  .order-md-4 {
    order: 4 !important;
  }
  .order-md-5 {
    order: 5 !important;
  }
  .order-md-last {
    order: 6 !important;
  }
  .m-md-0 {
    margin: 0 !important;
  }
  .m-md-1 {
    margin: 0.25rem !important;
  }
  .m-md-2 {
    margin: 0.5rem !important;
  }
  .m-md-3 {
    margin: 1rem !important;
  }
  .m-md-4 {
    margin: 1.5rem !important;
  }
  .m-md-5 {
    margin: 3rem !important;
  }
  .m-md-auto {
    margin: auto !important;
  }
  .mx-md-0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .mx-md-1 {
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important;
  }
  .mx-md-2 {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
  }
  .mx-md-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
  }
  .mx-md-4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important;
  }
  .mx-md-5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important;
  }
  .mx-md-auto {
    margin-right: auto !important;
    margin-left: auto !important;
  }
  .my-md-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .my-md-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
  }
  .my-md-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  .my-md-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }
  .my-md-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }
  .my-md-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
  }
  .my-md-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
  .mt-md-0 {
    margin-top: 0 !important;
  }
  .mt-md-1 {
    margin-top: 0.25rem !important;
  }
  .mt-md-2 {
    margin-top: 0.5rem !important;
  }
  .mt-md-3 {
    margin-top: 1rem !important;
  }
  .mt-md-4 {
    margin-top: 1.5rem !important;
  }
  .mt-md-5 {
    margin-top: 3rem !important;
  }
  .mt-md-auto {
    margin-top: auto !important;
  }
  .me-md-0 {
    margin-right: 0 !important;
  }
  .me-md-1 {
    margin-right: 0.25rem !important;
  }
  .me-md-2 {
    margin-right: 0.5rem !important;
  }
  .me-md-3 {
    margin-right: 1rem !important;
  }
  .me-md-4 {
    margin-right: 1.5rem !important;
  }
  .me-md-5 {
    margin-right: 3rem !important;
  }
  .me-md-auto {
    margin-right: auto !important;
  }
  .mb-md-0 {
    margin-bottom: 0 !important;
  }
  .mb-md-1 {
    margin-bottom: 0.25rem !important;
  }
  .mb-md-2 {
    margin-bottom: 0.5rem !important;
  }
  .mb-md-3 {
    margin-bottom: 1rem !important;
  }
  .mb-md-4 {
    margin-bottom: 1.5rem !important;
  }
  .mb-md-5 {
    margin-bottom: 3rem !important;
  }
  .mb-md-auto {
    margin-bottom: auto !important;
  }
  .ms-md-0 {
    margin-left: 0 !important;
  }
  .ms-md-1 {
    margin-left: 0.25rem !important;
  }
  .ms-md-2 {
    margin-left: 0.5rem !important;
  }
  .ms-md-3 {
    margin-left: 1rem !important;
  }
  .ms-md-4 {
    margin-left: 1.5rem !important;
  }
  .ms-md-5 {
    margin-left: 3rem !important;
  }
  .ms-md-auto {
    margin-left: auto !important;
  }
  .p-md-0 {
    padding: 0 !important;
  }
  .p-md-1 {
    padding: 0.25rem !important;
  }
  .p-md-2 {
    padding: 0.5rem !important;
  }
  .p-md-3 {
    padding: 1rem !important;
  }
  .p-md-4 {
    padding: 1.5rem !important;
  }
  .p-md-5 {
    padding: 3rem !important;
  }
  .px-md-0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  .px-md-1 {
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important;
  }
  .px-md-2 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
  }
  .px-md-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }
  .px-md-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
  }
  .px-md-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
  }
  .py-md-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .py-md-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }
  .py-md-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
  .py-md-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
  .py-md-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  .py-md-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  .pt-md-0 {
    padding-top: 0 !important;
  }
  .pt-md-1 {
    padding-top: 0.25rem !important;
  }
  .pt-md-2 {
    padding-top: 0.5rem !important;
  }
  .pt-md-3 {
    padding-top: 1rem !important;
  }
  .pt-md-4 {
    padding-top: 1.5rem !important;
  }
  .pt-md-5 {
    padding-top: 3rem !important;
  }
  .pe-md-0 {
    padding-right: 0 !important;
  }
  .pe-md-1 {
    padding-right: 0.25rem !important;
  }
  .pe-md-2 {
    padding-right: 0.5rem !important;
  }
  .pe-md-3 {
    padding-right: 1rem !important;
  }
  .pe-md-4 {
    padding-right: 1.5rem !important;
  }
  .pe-md-5 {
    padding-right: 3rem !important;
  }
  .pb-md-0 {
    padding-bottom: 0 !important;
  }
  .pb-md-1 {
    padding-bottom: 0.25rem !important;
  }
  .pb-md-2 {
    padding-bottom: 0.5rem !important;
  }
  .pb-md-3 {
    padding-bottom: 1rem !important;
  }
  .pb-md-4 {
    padding-bottom: 1.5rem !important;
  }
  .pb-md-5 {
    padding-bottom: 3rem !important;
  }
  .ps-md-0 {
    padding-left: 0 !important;
  }
  .ps-md-1 {
    padding-left: 0.25rem !important;
  }
  .ps-md-2 {
    padding-left: 0.5rem !important;
  }
  .ps-md-3 {
    padding-left: 1rem !important;
  }
  .ps-md-4 {
    padding-left: 1.5rem !important;
  }
  .ps-md-5 {
    padding-left: 3rem !important;
  }
  .gap-md-0 {
    gap: 0 !important;
  }
  .gap-md-1 {
    gap: 0.25rem !important;
  }
  .gap-md-2 {
    gap: 0.5rem !important;
  }
  .gap-md-3 {
    gap: 1rem !important;
  }
  .gap-md-4 {
    gap: 1.5rem !important;
  }
  .gap-md-5 {
    gap: 3rem !important;
  }
  .row-gap-md-0 {
    row-gap: 0 !important;
  }
  .row-gap-md-1 {
    row-gap: 0.25rem !important;
  }
  .row-gap-md-2 {
    row-gap: 0.5rem !important;
  }
  .row-gap-md-3 {
    row-gap: 1rem !important;
  }
  .row-gap-md-4 {
    row-gap: 1.5rem !important;
  }
  .row-gap-md-5 {
    row-gap: 3rem !important;
  }
  .column-gap-md-0 {
    -moz-column-gap: 0 !important;
    column-gap: 0 !important;
  }
  .column-gap-md-1 {
    -moz-column-gap: 0.25rem !important;
    column-gap: 0.25rem !important;
  }
  .column-gap-md-2 {
    -moz-column-gap: 0.5rem !important;
    column-gap: 0.5rem !important;
  }
  .column-gap-md-3 {
    -moz-column-gap: 1rem !important;
    column-gap: 1rem !important;
  }
  .column-gap-md-4 {
    -moz-column-gap: 1.5rem !important;
    column-gap: 1.5rem !important;
  }
  .column-gap-md-5 {
    -moz-column-gap: 3rem !important;
    column-gap: 3rem !important;
  }
  .text-md-start {
    text-align: left !important;
  }
  .text-md-end {
    text-align: right !important;
  }
  .text-md-center {
    text-align: center !important;
  }
}
@media (min-width: 992px) {
  .float-lg-start {
    float: left !important;
  }
  .float-lg-end {
    float: right !important;
  }
  .float-lg-none {
    float: none !important;
  }
  .object-fit-lg-contain {
    -o-object-fit: contain !important;
    object-fit: contain !important;
  }
  .object-fit-lg-cover {
    -o-object-fit: cover !important;
    object-fit: cover !important;
  }
  .object-fit-lg-fill {
    -o-object-fit: fill !important;
    object-fit: fill !important;
  }
  .object-fit-lg-scale {
    -o-object-fit: scale-down !important;
    object-fit: scale-down !important;
  }
  .object-fit-lg-none {
    -o-object-fit: none !important;
    object-fit: none !important;
  }
  .d-lg-inline {
    display: inline !important;
  }
  .d-lg-inline-block {
    display: inline-block !important;
  }
  .d-lg-block {
    display: block !important;
  }
  .d-lg-grid {
    display: grid !important;
  }
  .d-lg-inline-grid {
    display: inline-grid !important;
  }
  .d-lg-table {
    display: table !important;
  }
  .d-lg-table-row {
    display: table-row !important;
  }
  .d-lg-table-cell {
    display: table-cell !important;
  }
  .d-lg-flex {
    display: flex !important;
  }
  .d-lg-inline-flex {
    display: inline-flex !important;
  }
  .d-lg-none {
    display: none !important;
  }
  .flex-lg-fill {
    flex: 1 1 auto !important;
  }
  .flex-lg-row {
    flex-direction: row !important;
  }
  .flex-lg-column {
    flex-direction: column !important;
  }
  .flex-lg-row-reverse {
    flex-direction: row-reverse !important;
  }
  .flex-lg-column-reverse {
    flex-direction: column-reverse !important;
  }
  .flex-lg-grow-0 {
    flex-grow: 0 !important;
  }
  .flex-lg-grow-1 {
    flex-grow: 1 !important;
  }
  .flex-lg-shrink-0 {
    flex-shrink: 0 !important;
  }
  .flex-lg-shrink-1 {
    flex-shrink: 1 !important;
  }
  .flex-lg-wrap {
    flex-wrap: wrap !important;
  }
  .flex-lg-nowrap {
    flex-wrap: nowrap !important;
  }
  .flex-lg-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }
  .justify-content-lg-start {
    justify-content: flex-start !important;
  }
  .justify-content-lg-end {
    justify-content: flex-end !important;
  }
  .justify-content-lg-center {
    justify-content: center !important;
  }
  .justify-content-lg-between {
    justify-content: space-between !important;
  }
  .justify-content-lg-around {
    justify-content: space-around !important;
  }
  .justify-content-lg-evenly {
    justify-content: space-evenly !important;
  }
  .align-items-lg-start {
    align-items: flex-start !important;
  }
  .align-items-lg-end {
    align-items: flex-end !important;
  }
  .align-items-lg-center {
    align-items: center !important;
  }
  .align-items-lg-baseline {
    align-items: baseline !important;
  }
  .align-items-lg-stretch {
    align-items: stretch !important;
  }
  .align-content-lg-start {
    align-content: flex-start !important;
  }
  .align-content-lg-end {
    align-content: flex-end !important;
  }
  .align-content-lg-center {
    align-content: center !important;
  }
  .align-content-lg-between {
    align-content: space-between !important;
  }
  .align-content-lg-around {
    align-content: space-around !important;
  }
  .align-content-lg-stretch {
    align-content: stretch !important;
  }
  .align-self-lg-auto {
    align-self: auto !important;
  }
  .align-self-lg-start {
    align-self: flex-start !important;
  }
  .align-self-lg-end {
    align-self: flex-end !important;
  }
  .align-self-lg-center {
    align-self: center !important;
  }
  .align-self-lg-baseline {
    align-self: baseline !important;
  }
  .align-self-lg-stretch {
    align-self: stretch !important;
  }
  .order-lg-first {
    order: -1 !important;
  }
  .order-lg-0 {
    order: 0 !important;
  }
  .order-lg-1 {
    order: 1 !important;
  }
  .order-lg-2 {
    order: 2 !important;
  }
  .order-lg-3 {
    order: 3 !important;
  }
  .order-lg-4 {
    order: 4 !important;
  }
  .order-lg-5 {
    order: 5 !important;
  }
  .order-lg-last {
    order: 6 !important;
  }
  .m-lg-0 {
    margin: 0 !important;
  }
  .m-lg-1 {
    margin: 0.25rem !important;
  }
  .m-lg-2 {
    margin: 0.5rem !important;
  }
  .m-lg-3 {
    margin: 1rem !important;
  }
  .m-lg-4 {
    margin: 1.5rem !important;
  }
  .m-lg-5 {
    margin: 3rem !important;
  }
  .m-lg-auto {
    margin: auto !important;
  }
  .mx-lg-0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .mx-lg-1 {
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important;
  }
  .mx-lg-2 {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
  }
  .mx-lg-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
  }
  .mx-lg-4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important;
  }
  .mx-lg-5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important;
  }
  .mx-lg-auto {
    margin-right: auto !important;
    margin-left: auto !important;
  }
  .my-lg-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .my-lg-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
  }
  .my-lg-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  .my-lg-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }
  .my-lg-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }
  .my-lg-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
  }
  .my-lg-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
  .mt-lg-0 {
    margin-top: 0 !important;
  }
  .mt-lg-1 {
    margin-top: 0.25rem !important;
  }
  .mt-lg-2 {
    margin-top: 0.5rem !important;
  }
  .mt-lg-3 {
    margin-top: 1rem !important;
  }
  .mt-lg-4 {
    margin-top: 1.5rem !important;
  }
  .mt-lg-5 {
    margin-top: 3rem !important;
  }
  .mt-lg-auto {
    margin-top: auto !important;
  }
  .me-lg-0 {
    margin-right: 0 !important;
  }
  .me-lg-1 {
    margin-right: 0.25rem !important;
  }
  .me-lg-2 {
    margin-right: 0.5rem !important;
  }
  .me-lg-3 {
    margin-right: 1rem !important;
  }
  .me-lg-4 {
    margin-right: 1.5rem !important;
  }
  .me-lg-5 {
    margin-right: 3rem !important;
  }
  .me-lg-auto {
    margin-right: auto !important;
  }
  .mb-lg-0 {
    margin-bottom: 0 !important;
  }
  .mb-lg-1 {
    margin-bottom: 0.25rem !important;
  }
  .mb-lg-2 {
    margin-bottom: 0.5rem !important;
  }
  .mb-lg-3 {
    margin-bottom: 1rem !important;
  }
  .mb-lg-4 {
    margin-bottom: 1.5rem !important;
  }
  .mb-lg-5 {
    margin-bottom: 3rem !important;
  }
  .mb-lg-auto {
    margin-bottom: auto !important;
  }
  .ms-lg-0 {
    margin-left: 0 !important;
  }
  .ms-lg-1 {
    margin-left: 0.25rem !important;
  }
  .ms-lg-2 {
    margin-left: 0.5rem !important;
  }
  .ms-lg-3 {
    margin-left: 1rem !important;
  }
  .ms-lg-4 {
    margin-left: 1.5rem !important;
  }
  .ms-lg-5 {
    margin-left: 3rem !important;
  }
  .ms-lg-auto {
    margin-left: auto !important;
  }
  .p-lg-0 {
    padding: 0 !important;
  }
  .p-lg-1 {
    padding: 0.25rem !important;
  }
  .p-lg-2 {
    padding: 0.5rem !important;
  }
  .p-lg-3 {
    padding: 1rem !important;
  }
  .p-lg-4 {
    padding: 1.5rem !important;
  }
  .p-lg-5 {
    padding: 3rem !important;
  }
  .px-lg-0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  .px-lg-1 {
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important;
  }
  .px-lg-2 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
  }
  .px-lg-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }
  .px-lg-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
  }
  .px-lg-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
  }
  .py-lg-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .py-lg-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }
  .py-lg-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
  .py-lg-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
  .py-lg-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  .py-lg-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  .pt-lg-0 {
    padding-top: 0 !important;
  }
  .pt-lg-1 {
    padding-top: 0.25rem !important;
  }
  .pt-lg-2 {
    padding-top: 0.5rem !important;
  }
  .pt-lg-3 {
    padding-top: 1rem !important;
  }
  .pt-lg-4 {
    padding-top: 1.5rem !important;
  }
  .pt-lg-5 {
    padding-top: 3rem !important;
  }
  .pe-lg-0 {
    padding-right: 0 !important;
  }
  .pe-lg-1 {
    padding-right: 0.25rem !important;
  }
  .pe-lg-2 {
    padding-right: 0.5rem !important;
  }
  .pe-lg-3 {
    padding-right: 1rem !important;
  }
  .pe-lg-4 {
    padding-right: 1.5rem !important;
  }
  .pe-lg-5 {
    padding-right: 3rem !important;
  }
  .pb-lg-0 {
    padding-bottom: 0 !important;
  }
  .pb-lg-1 {
    padding-bottom: 0.25rem !important;
  }
  .pb-lg-2 {
    padding-bottom: 0.5rem !important;
  }
  .pb-lg-3 {
    padding-bottom: 1rem !important;
  }
  .pb-lg-4 {
    padding-bottom: 1.5rem !important;
  }
  .pb-lg-5 {
    padding-bottom: 3rem !important;
  }
  .ps-lg-0 {
    padding-left: 0 !important;
  }
  .ps-lg-1 {
    padding-left: 0.25rem !important;
  }
  .ps-lg-2 {
    padding-left: 0.5rem !important;
  }
  .ps-lg-3 {
    padding-left: 1rem !important;
  }
  .ps-lg-4 {
    padding-left: 1.5rem !important;
  }
  .ps-lg-5 {
    padding-left: 3rem !important;
  }
  .gap-lg-0 {
    gap: 0 !important;
  }
  .gap-lg-1 {
    gap: 0.25rem !important;
  }
  .gap-lg-2 {
    gap: 0.5rem !important;
  }
  .gap-lg-3 {
    gap: 1rem !important;
  }
  .gap-lg-4 {
    gap: 1.5rem !important;
  }
  .gap-lg-5 {
    gap: 3rem !important;
  }
  .row-gap-lg-0 {
    row-gap: 0 !important;
  }
  .row-gap-lg-1 {
    row-gap: 0.25rem !important;
  }
  .row-gap-lg-2 {
    row-gap: 0.5rem !important;
  }
  .row-gap-lg-3 {
    row-gap: 1rem !important;
  }
  .row-gap-lg-4 {
    row-gap: 1.5rem !important;
  }
  .row-gap-lg-5 {
    row-gap: 3rem !important;
  }
  .column-gap-lg-0 {
    -moz-column-gap: 0 !important;
    column-gap: 0 !important;
  }
  .column-gap-lg-1 {
    -moz-column-gap: 0.25rem !important;
    column-gap: 0.25rem !important;
  }
  .column-gap-lg-2 {
    -moz-column-gap: 0.5rem !important;
    column-gap: 0.5rem !important;
  }
  .column-gap-lg-3 {
    -moz-column-gap: 1rem !important;
    column-gap: 1rem !important;
  }
  .column-gap-lg-4 {
    -moz-column-gap: 1.5rem !important;
    column-gap: 1.5rem !important;
  }
  .column-gap-lg-5 {
    -moz-column-gap: 3rem !important;
    column-gap: 3rem !important;
  }
  .text-lg-start {
    text-align: left !important;
  }
  .text-lg-end {
    text-align: right !important;
  }
  .text-lg-center {
    text-align: center !important;
  }
}
@media (min-width: 1200px) {
  .float-xl-start {
    float: left !important;
  }
  .float-xl-end {
    float: right !important;
  }
  .float-xl-none {
    float: none !important;
  }
  .object-fit-xl-contain {
    -o-object-fit: contain !important;
    object-fit: contain !important;
  }
  .object-fit-xl-cover {
    -o-object-fit: cover !important;
    object-fit: cover !important;
  }
  .object-fit-xl-fill {
    -o-object-fit: fill !important;
    object-fit: fill !important;
  }
  .object-fit-xl-scale {
    -o-object-fit: scale-down !important;
    object-fit: scale-down !important;
  }
  .object-fit-xl-none {
    -o-object-fit: none !important;
    object-fit: none !important;
  }
  .d-xl-inline {
    display: inline !important;
  }
  .d-xl-inline-block {
    display: inline-block !important;
  }
  .d-xl-block {
    display: block !important;
  }
  .d-xl-grid {
    display: grid !important;
  }
  .d-xl-inline-grid {
    display: inline-grid !important;
  }
  .d-xl-table {
    display: table !important;
  }
  .d-xl-table-row {
    display: table-row !important;
  }
  .d-xl-table-cell {
    display: table-cell !important;
  }
  .d-xl-flex {
    display: flex !important;
  }
  .d-xl-inline-flex {
    display: inline-flex !important;
  }
  .d-xl-none {
    display: none !important;
  }
  .flex-xl-fill {
    flex: 1 1 auto !important;
  }
  .flex-xl-row {
    flex-direction: row !important;
  }
  .flex-xl-column {
    flex-direction: column !important;
  }
  .flex-xl-row-reverse {
    flex-direction: row-reverse !important;
  }
  .flex-xl-column-reverse {
    flex-direction: column-reverse !important;
  }
  .flex-xl-grow-0 {
    flex-grow: 0 !important;
  }
  .flex-xl-grow-1 {
    flex-grow: 1 !important;
  }
  .flex-xl-shrink-0 {
    flex-shrink: 0 !important;
  }
  .flex-xl-shrink-1 {
    flex-shrink: 1 !important;
  }
  .flex-xl-wrap {
    flex-wrap: wrap !important;
  }
  .flex-xl-nowrap {
    flex-wrap: nowrap !important;
  }
  .flex-xl-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }
  .justify-content-xl-start {
    justify-content: flex-start !important;
  }
  .justify-content-xl-end {
    justify-content: flex-end !important;
  }
  .justify-content-xl-center {
    justify-content: center !important;
  }
  .justify-content-xl-between {
    justify-content: space-between !important;
  }
  .justify-content-xl-around {
    justify-content: space-around !important;
  }
  .justify-content-xl-evenly {
    justify-content: space-evenly !important;
  }
  .align-items-xl-start {
    align-items: flex-start !important;
  }
  .align-items-xl-end {
    align-items: flex-end !important;
  }
  .align-items-xl-center {
    align-items: center !important;
  }
  .align-items-xl-baseline {
    align-items: baseline !important;
  }
  .align-items-xl-stretch {
    align-items: stretch !important;
  }
  .align-content-xl-start {
    align-content: flex-start !important;
  }
  .align-content-xl-end {
    align-content: flex-end !important;
  }
  .align-content-xl-center {
    align-content: center !important;
  }
  .align-content-xl-between {
    align-content: space-between !important;
  }
  .align-content-xl-around {
    align-content: space-around !important;
  }
  .align-content-xl-stretch {
    align-content: stretch !important;
  }
  .align-self-xl-auto {
    align-self: auto !important;
  }
  .align-self-xl-start {
    align-self: flex-start !important;
  }
  .align-self-xl-end {
    align-self: flex-end !important;
  }
  .align-self-xl-center {
    align-self: center !important;
  }
  .align-self-xl-baseline {
    align-self: baseline !important;
  }
  .align-self-xl-stretch {
    align-self: stretch !important;
  }
  .order-xl-first {
    order: -1 !important;
  }
  .order-xl-0 {
    order: 0 !important;
  }
  .order-xl-1 {
    order: 1 !important;
  }
  .order-xl-2 {
    order: 2 !important;
  }
  .order-xl-3 {
    order: 3 !important;
  }
  .order-xl-4 {
    order: 4 !important;
  }
  .order-xl-5 {
    order: 5 !important;
  }
  .order-xl-last {
    order: 6 !important;
  }
  .m-xl-0 {
    margin: 0 !important;
  }
  .m-xl-1 {
    margin: 0.25rem !important;
  }
  .m-xl-2 {
    margin: 0.5rem !important;
  }
  .m-xl-3 {
    margin: 1rem !important;
  }
  .m-xl-4 {
    margin: 1.5rem !important;
  }
  .m-xl-5 {
    margin: 3rem !important;
  }
  .m-xl-auto {
    margin: auto !important;
  }
  .mx-xl-0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .mx-xl-1 {
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important;
  }
  .mx-xl-2 {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
  }
  .mx-xl-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
  }
  .mx-xl-4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important;
  }
  .mx-xl-5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important;
  }
  .mx-xl-auto {
    margin-right: auto !important;
    margin-left: auto !important;
  }
  .my-xl-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .my-xl-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
  }
  .my-xl-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  .my-xl-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }
  .my-xl-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }
  .my-xl-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
  }
  .my-xl-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
  .mt-xl-0 {
    margin-top: 0 !important;
  }
  .mt-xl-1 {
    margin-top: 0.25rem !important;
  }
  .mt-xl-2 {
    margin-top: 0.5rem !important;
  }
  .mt-xl-3 {
    margin-top: 1rem !important;
  }
  .mt-xl-4 {
    margin-top: 1.5rem !important;
  }
  .mt-xl-5 {
    margin-top: 3rem !important;
  }
  .mt-xl-auto {
    margin-top: auto !important;
  }
  .me-xl-0 {
    margin-right: 0 !important;
  }
  .me-xl-1 {
    margin-right: 0.25rem !important;
  }
  .me-xl-2 {
    margin-right: 0.5rem !important;
  }
  .me-xl-3 {
    margin-right: 1rem !important;
  }
  .me-xl-4 {
    margin-right: 1.5rem !important;
  }
  .me-xl-5 {
    margin-right: 3rem !important;
  }
  .me-xl-auto {
    margin-right: auto !important;
  }
  .mb-xl-0 {
    margin-bottom: 0 !important;
  }
  .mb-xl-1 {
    margin-bottom: 0.25rem !important;
  }
  .mb-xl-2 {
    margin-bottom: 0.5rem !important;
  }
  .mb-xl-3 {
    margin-bottom: 1rem !important;
  }
  .mb-xl-4 {
    margin-bottom: 1.5rem !important;
  }
  .mb-xl-5 {
    margin-bottom: 3rem !important;
  }
  .mb-xl-auto {
    margin-bottom: auto !important;
  }
  .ms-xl-0 {
    margin-left: 0 !important;
  }
  .ms-xl-1 {
    margin-left: 0.25rem !important;
  }
  .ms-xl-2 {
    margin-left: 0.5rem !important;
  }
  .ms-xl-3 {
    margin-left: 1rem !important;
  }
  .ms-xl-4 {
    margin-left: 1.5rem !important;
  }
  .ms-xl-5 {
    margin-left: 3rem !important;
  }
  .ms-xl-auto {
    margin-left: auto !important;
  }
  .p-xl-0 {
    padding: 0 !important;
  }
  .p-xl-1 {
    padding: 0.25rem !important;
  }
  .p-xl-2 {
    padding: 0.5rem !important;
  }
  .p-xl-3 {
    padding: 1rem !important;
  }
  .p-xl-4 {
    padding: 1.5rem !important;
  }
  .p-xl-5 {
    padding: 3rem !important;
  }
  .px-xl-0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  .px-xl-1 {
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important;
  }
  .px-xl-2 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
  }
  .px-xl-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }
  .px-xl-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
  }
  .px-xl-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
  }
  .py-xl-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .py-xl-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }
  .py-xl-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
  .py-xl-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
  .py-xl-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  .py-xl-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  .pt-xl-0 {
    padding-top: 0 !important;
  }
  .pt-xl-1 {
    padding-top: 0.25rem !important;
  }
  .pt-xl-2 {
    padding-top: 0.5rem !important;
  }
  .pt-xl-3 {
    padding-top: 1rem !important;
  }
  .pt-xl-4 {
    padding-top: 1.5rem !important;
  }
  .pt-xl-5 {
    padding-top: 3rem !important;
  }
  .pe-xl-0 {
    padding-right: 0 !important;
  }
  .pe-xl-1 {
    padding-right: 0.25rem !important;
  }
  .pe-xl-2 {
    padding-right: 0.5rem !important;
  }
  .pe-xl-3 {
    padding-right: 1rem !important;
  }
  .pe-xl-4 {
    padding-right: 1.5rem !important;
  }
  .pe-xl-5 {
    padding-right: 3rem !important;
  }
  .pb-xl-0 {
    padding-bottom: 0 !important;
  }
  .pb-xl-1 {
    padding-bottom: 0.25rem !important;
  }
  .pb-xl-2 {
    padding-bottom: 0.5rem !important;
  }
  .pb-xl-3 {
    padding-bottom: 1rem !important;
  }
  .pb-xl-4 {
    padding-bottom: 1.5rem !important;
  }
  .pb-xl-5 {
    padding-bottom: 3rem !important;
  }
  .ps-xl-0 {
    padding-left: 0 !important;
  }
  .ps-xl-1 {
    padding-left: 0.25rem !important;
  }
  .ps-xl-2 {
    padding-left: 0.5rem !important;
  }
  .ps-xl-3 {
    padding-left: 1rem !important;
  }
  .ps-xl-4 {
    padding-left: 1.5rem !important;
  }
  .ps-xl-5 {
    padding-left: 3rem !important;
  }
  .gap-xl-0 {
    gap: 0 !important;
  }
  .gap-xl-1 {
    gap: 0.25rem !important;
  }
  .gap-xl-2 {
    gap: 0.5rem !important;
  }
  .gap-xl-3 {
    gap: 1rem !important;
  }
  .gap-xl-4 {
    gap: 1.5rem !important;
  }
  .gap-xl-5 {
    gap: 3rem !important;
  }
  .row-gap-xl-0 {
    row-gap: 0 !important;
  }
  .row-gap-xl-1 {
    row-gap: 0.25rem !important;
  }
  .row-gap-xl-2 {
    row-gap: 0.5rem !important;
  }
  .row-gap-xl-3 {
    row-gap: 1rem !important;
  }
  .row-gap-xl-4 {
    row-gap: 1.5rem !important;
  }
  .row-gap-xl-5 {
    row-gap: 3rem !important;
  }
  .column-gap-xl-0 {
    -moz-column-gap: 0 !important;
    column-gap: 0 !important;
  }
  .column-gap-xl-1 {
    -moz-column-gap: 0.25rem !important;
    column-gap: 0.25rem !important;
  }
  .column-gap-xl-2 {
    -moz-column-gap: 0.5rem !important;
    column-gap: 0.5rem !important;
  }
  .column-gap-xl-3 {
    -moz-column-gap: 1rem !important;
    column-gap: 1rem !important;
  }
  .column-gap-xl-4 {
    -moz-column-gap: 1.5rem !important;
    column-gap: 1.5rem !important;
  }
  .column-gap-xl-5 {
    -moz-column-gap: 3rem !important;
    column-gap: 3rem !important;
  }
  .text-xl-start {
    text-align: left !important;
  }
  .text-xl-end {
    text-align: right !important;
  }
  .text-xl-center {
    text-align: center !important;
  }
}
@media (min-width: 1400px) {
  .float-xxl-start {
    float: left !important;
  }
  .float-xxl-end {
    float: right !important;
  }
  .float-xxl-none {
    float: none !important;
  }
  .object-fit-xxl-contain {
    -o-object-fit: contain !important;
    object-fit: contain !important;
  }
  .object-fit-xxl-cover {
    -o-object-fit: cover !important;
    object-fit: cover !important;
  }
  .object-fit-xxl-fill {
    -o-object-fit: fill !important;
    object-fit: fill !important;
  }
  .object-fit-xxl-scale {
    -o-object-fit: scale-down !important;
    object-fit: scale-down !important;
  }
  .object-fit-xxl-none {
    -o-object-fit: none !important;
    object-fit: none !important;
  }
  .d-xxl-inline {
    display: inline !important;
  }
  .d-xxl-inline-block {
    display: inline-block !important;
  }
  .d-xxl-block {
    display: block !important;
  }
  .d-xxl-grid {
    display: grid !important;
  }
  .d-xxl-inline-grid {
    display: inline-grid !important;
  }
  .d-xxl-table {
    display: table !important;
  }
  .d-xxl-table-row {
    display: table-row !important;
  }
  .d-xxl-table-cell {
    display: table-cell !important;
  }
  .d-xxl-flex {
    display: flex !important;
  }
  .d-xxl-inline-flex {
    display: inline-flex !important;
  }
  .d-xxl-none {
    display: none !important;
  }
  .flex-xxl-fill {
    flex: 1 1 auto !important;
  }
  .flex-xxl-row {
    flex-direction: row !important;
  }
  .flex-xxl-column {
    flex-direction: column !important;
  }
  .flex-xxl-row-reverse {
    flex-direction: row-reverse !important;
  }
  .flex-xxl-column-reverse {
    flex-direction: column-reverse !important;
  }
  .flex-xxl-grow-0 {
    flex-grow: 0 !important;
  }
  .flex-xxl-grow-1 {
    flex-grow: 1 !important;
  }
  .flex-xxl-shrink-0 {
    flex-shrink: 0 !important;
  }
  .flex-xxl-shrink-1 {
    flex-shrink: 1 !important;
  }
  .flex-xxl-wrap {
    flex-wrap: wrap !important;
  }
  .flex-xxl-nowrap {
    flex-wrap: nowrap !important;
  }
  .flex-xxl-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }
  .justify-content-xxl-start {
    justify-content: flex-start !important;
  }
  .justify-content-xxl-end {
    justify-content: flex-end !important;
  }
  .justify-content-xxl-center {
    justify-content: center !important;
  }
  .justify-content-xxl-between {
    justify-content: space-between !important;
  }
  .justify-content-xxl-around {
    justify-content: space-around !important;
  }
  .justify-content-xxl-evenly {
    justify-content: space-evenly !important;
  }
  .align-items-xxl-start {
    align-items: flex-start !important;
  }
  .align-items-xxl-end {
    align-items: flex-end !important;
  }
  .align-items-xxl-center {
    align-items: center !important;
  }
  .align-items-xxl-baseline {
    align-items: baseline !important;
  }
  .align-items-xxl-stretch {
    align-items: stretch !important;
  }
  .align-content-xxl-start {
    align-content: flex-start !important;
  }
  .align-content-xxl-end {
    align-content: flex-end !important;
  }
  .align-content-xxl-center {
    align-content: center !important;
  }
  .align-content-xxl-between {
    align-content: space-between !important;
  }
  .align-content-xxl-around {
    align-content: space-around !important;
  }
  .align-content-xxl-stretch {
    align-content: stretch !important;
  }
  .align-self-xxl-auto {
    align-self: auto !important;
  }
  .align-self-xxl-start {
    align-self: flex-start !important;
  }
  .align-self-xxl-end {
    align-self: flex-end !important;
  }
  .align-self-xxl-center {
    align-self: center !important;
  }
  .align-self-xxl-baseline {
    align-self: baseline !important;
  }
  .align-self-xxl-stretch {
    align-self: stretch !important;
  }
  .order-xxl-first {
    order: -1 !important;
  }
  .order-xxl-0 {
    order: 0 !important;
  }
  .order-xxl-1 {
    order: 1 !important;
  }
  .order-xxl-2 {
    order: 2 !important;
  }
  .order-xxl-3 {
    order: 3 !important;
  }
  .order-xxl-4 {
    order: 4 !important;
  }
  .order-xxl-5 {
    order: 5 !important;
  }
  .order-xxl-last {
    order: 6 !important;
  }
  .m-xxl-0 {
    margin: 0 !important;
  }
  .m-xxl-1 {
    margin: 0.25rem !important;
  }
  .m-xxl-2 {
    margin: 0.5rem !important;
  }
  .m-xxl-3 {
    margin: 1rem !important;
  }
  .m-xxl-4 {
    margin: 1.5rem !important;
  }
  .m-xxl-5 {
    margin: 3rem !important;
  }
  .m-xxl-auto {
    margin: auto !important;
  }
  .mx-xxl-0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .mx-xxl-1 {
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important;
  }
  .mx-xxl-2 {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
  }
  .mx-xxl-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
  }
  .mx-xxl-4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important;
  }
  .mx-xxl-5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important;
  }
  .mx-xxl-auto {
    margin-right: auto !important;
    margin-left: auto !important;
  }
  .my-xxl-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .my-xxl-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
  }
  .my-xxl-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  .my-xxl-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }
  .my-xxl-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }
  .my-xxl-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
  }
  .my-xxl-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
  .mt-xxl-0 {
    margin-top: 0 !important;
  }
  .mt-xxl-1 {
    margin-top: 0.25rem !important;
  }
  .mt-xxl-2 {
    margin-top: 0.5rem !important;
  }
  .mt-xxl-3 {
    margin-top: 1rem !important;
  }
  .mt-xxl-4 {
    margin-top: 1.5rem !important;
  }
  .mt-xxl-5 {
    margin-top: 3rem !important;
  }
  .mt-xxl-auto {
    margin-top: auto !important;
  }
  .me-xxl-0 {
    margin-right: 0 !important;
  }
  .me-xxl-1 {
    margin-right: 0.25rem !important;
  }
  .me-xxl-2 {
    margin-right: 0.5rem !important;
  }
  .me-xxl-3 {
    margin-right: 1rem !important;
  }
  .me-xxl-4 {
    margin-right: 1.5rem !important;
  }
  .me-xxl-5 {
    margin-right: 3rem !important;
  }
  .me-xxl-auto {
    margin-right: auto !important;
  }
  .mb-xxl-0 {
    margin-bottom: 0 !important;
  }
  .mb-xxl-1 {
    margin-bottom: 0.25rem !important;
  }
  .mb-xxl-2 {
    margin-bottom: 0.5rem !important;
  }
  .mb-xxl-3 {
    margin-bottom: 1rem !important;
  }
  .mb-xxl-4 {
    margin-bottom: 1.5rem !important;
  }
  .mb-xxl-5 {
    margin-bottom: 3rem !important;
  }
  .mb-xxl-auto {
    margin-bottom: auto !important;
  }
  .ms-xxl-0 {
    margin-left: 0 !important;
  }
  .ms-xxl-1 {
    margin-left: 0.25rem !important;
  }
  .ms-xxl-2 {
    margin-left: 0.5rem !important;
  }
  .ms-xxl-3 {
    margin-left: 1rem !important;
  }
  .ms-xxl-4 {
    margin-left: 1.5rem !important;
  }
  .ms-xxl-5 {
    margin-left: 3rem !important;
  }
  .ms-xxl-auto {
    margin-left: auto !important;
  }
  .p-xxl-0 {
    padding: 0 !important;
  }
  .p-xxl-1 {
    padding: 0.25rem !important;
  }
  .p-xxl-2 {
    padding: 0.5rem !important;
  }
  .p-xxl-3 {
    padding: 1rem !important;
  }
  .p-xxl-4 {
    padding: 1.5rem !important;
  }
  .p-xxl-5 {
    padding: 3rem !important;
  }
  .px-xxl-0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  .px-xxl-1 {
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important;
  }
  .px-xxl-2 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
  }
  .px-xxl-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }
  .px-xxl-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
  }
  .px-xxl-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
  }
  .py-xxl-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .py-xxl-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }
  .py-xxl-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
  .py-xxl-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
  .py-xxl-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  .py-xxl-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  .pt-xxl-0 {
    padding-top: 0 !important;
  }
  .pt-xxl-1 {
    padding-top: 0.25rem !important;
  }
  .pt-xxl-2 {
    padding-top: 0.5rem !important;
  }
  .pt-xxl-3 {
    padding-top: 1rem !important;
  }
  .pt-xxl-4 {
    padding-top: 1.5rem !important;
  }
  .pt-xxl-5 {
    padding-top: 3rem !important;
  }
  .pe-xxl-0 {
    padding-right: 0 !important;
  }
  .pe-xxl-1 {
    padding-right: 0.25rem !important;
  }
  .pe-xxl-2 {
    padding-right: 0.5rem !important;
  }
  .pe-xxl-3 {
    padding-right: 1rem !important;
  }
  .pe-xxl-4 {
    padding-right: 1.5rem !important;
  }
  .pe-xxl-5 {
    padding-right: 3rem !important;
  }
  .pb-xxl-0 {
    padding-bottom: 0 !important;
  }
  .pb-xxl-1 {
    padding-bottom: 0.25rem !important;
  }
  .pb-xxl-2 {
    padding-bottom: 0.5rem !important;
  }
  .pb-xxl-3 {
    padding-bottom: 1rem !important;
  }
  .pb-xxl-4 {
    padding-bottom: 1.5rem !important;
  }
  .pb-xxl-5 {
    padding-bottom: 3rem !important;
  }
  .ps-xxl-0 {
    padding-left: 0 !important;
  }
  .ps-xxl-1 {
    padding-left: 0.25rem !important;
  }
  .ps-xxl-2 {
    padding-left: 0.5rem !important;
  }
  .ps-xxl-3 {
    padding-left: 1rem !important;
  }
  .ps-xxl-4 {
    padding-left: 1.5rem !important;
  }
  .ps-xxl-5 {
    padding-left: 3rem !important;
  }
  .gap-xxl-0 {
    gap: 0 !important;
  }
  .gap-xxl-1 {
    gap: 0.25rem !important;
  }
  .gap-xxl-2 {
    gap: 0.5rem !important;
  }
  .gap-xxl-3 {
    gap: 1rem !important;
  }
  .gap-xxl-4 {
    gap: 1.5rem !important;
  }
  .gap-xxl-5 {
    gap: 3rem !important;
  }
  .row-gap-xxl-0 {
    row-gap: 0 !important;
  }
  .row-gap-xxl-1 {
    row-gap: 0.25rem !important;
  }
  .row-gap-xxl-2 {
    row-gap: 0.5rem !important;
  }
  .row-gap-xxl-3 {
    row-gap: 1rem !important;
  }
  .row-gap-xxl-4 {
    row-gap: 1.5rem !important;
  }
  .row-gap-xxl-5 {
    row-gap: 3rem !important;
  }
  .column-gap-xxl-0 {
    -moz-column-gap: 0 !important;
    column-gap: 0 !important;
  }
  .column-gap-xxl-1 {
    -moz-column-gap: 0.25rem !important;
    column-gap: 0.25rem !important;
  }
  .column-gap-xxl-2 {
    -moz-column-gap: 0.5rem !important;
    column-gap: 0.5rem !important;
  }
  .column-gap-xxl-3 {
    -moz-column-gap: 1rem !important;
    column-gap: 1rem !important;
  }
  .column-gap-xxl-4 {
    -moz-column-gap: 1.5rem !important;
    column-gap: 1.5rem !important;
  }
  .column-gap-xxl-5 {
    -moz-column-gap: 3rem !important;
    column-gap: 3rem !important;
  }
  .text-xxl-start {
    text-align: left !important;
  }
  .text-xxl-end {
    text-align: right !important;
  }
  .text-xxl-center {
    text-align: center !important;
  }
}
@media (min-width: 1200px) {
  .fs-1 {
    font-size: 2.5rem !important;
  }
  .fs-2 {
    font-size: 2rem !important;
  }
  .fs-3 {
    font-size: 1.75rem !important;
  }
  .fs-4 {
    font-size: 1.5rem !important;
  }
}
@media print {
  .d-print-inline {
    display: inline !important;
  }
  .d-print-inline-block {
    display: inline-block !important;
  }
  .d-print-block {
    display: block !important;
  }
  .d-print-grid {
    display: grid !important;
  }
  .d-print-inline-grid {
    display: inline-grid !important;
  }
  .d-print-table {
    display: table !important;
  }
  .d-print-table-row {
    display: table-row !important;
  }
  .d-print-table-cell {
    display: table-cell !important;
  }
  .d-print-flex {
    display: flex !important;
  }
  .d-print-inline-flex {
    display: inline-flex !important;
  }
  .d-print-none {
    display: none !important;
  }
}

/*# sourceMappingURL=bootstrap.css.map */

/* ===== components ===== */
/* shared/ui/toggle-switch.css */
/**************************************************************************************************
	@contributors   Rafał Złotorzyński
	@module         toggle-switch
	@file           shared/ui/toggle-switch.css
**************************************************************************************************/

.tg-list {
	text-align: center;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}

.tg-list-item {
	margin: 0 2em;
}

h2 {
	color: #777;
}

h4 {
	color: #999;
}

.tgl {
	display: none;
}

.tgl,
.tgl:after,
.tgl:before,
.tgl *,
.tgl *:after,
.tgl *:before,
.tgl+.tgl-btn {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.tgl::-moz-selection,
.tgl:after::-moz-selection,
.tgl:before::-moz-selection,
.tgl *::-moz-selection,
.tgl *:after::-moz-selection,
.tgl *:before::-moz-selection,
.tgl+.tgl-btn::-moz-selection {
	background: none;
}

.tgl::selection,
.tgl:after::selection,
.tgl:before::selection,
.tgl *::selection,
.tgl *:after::selection,
.tgl *:before::selection,
.tgl+.tgl-btn::selection {
	background: none;
}

.tgl+.tgl-btn {
	outline: 0;
	/* display: block; */
	display: inline-flex;
	width: 4em;
	height: 2em;
	position: relative;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.tgl+.tgl-btn:after,
.tgl+.tgl-btn:before {
	position: relative;
	display: block;
	content: "";
	width: 50%;
	height: 100%;
}

.tgl+.tgl-btn:after {
	left: 0;
}

.tgl+.tgl-btn:before {
	display: none;
}

.tgl:checked+.tgl-btn:after {
	left: 50%;
}

.tgl-light+.tgl-btn {
	background: #f0f0f0;
	border-radius: 2em;
	padding: 2px;
	-webkit-transition: all .4s ease;
	transition: all .4s ease;
}

.tgl-light+.tgl-btn:after {
	border-radius: 50%;
	background: #fff;
	-webkit-transition: all .2s ease;
	transition: all .2s ease;
}

.tgl-light:checked+.tgl-btn {
	background: #9FD6AE;
}

.tgl-ios+.tgl-btn {
	background: #fbfbfb;
	border-radius: 2em !important;
	padding: 2px;
	-webkit-transition: all .4s ease;
	transition: all .4s ease;
	border: 1px solid #e8eae9;
}

.tgl-ios+.tgl-btn:after {
	border-radius: 2em !important;
	background: #fbfbfb;
	-webkit-transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
	transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0 rgba(0, 0, 0, 0.08);
}

.tgl-ios+.tgl-btn:active {
	box-shadow: inset 0 0 0 2em #e8eae9;
}

.tgl-ios+.tgl-btn:active:after {
	padding-right: .8em;
}

.tgl-ios:checked+.tgl-btn {
	background: #86d993;
}

.tgl-ios:checked+.tgl-btn:active {
	box-shadow: none;
}

.tgl-ios:checked+.tgl-btn:active:after {
	margin-left: -.8em;
}

.tgl-skewed+.tgl-btn {
	overflow: hidden;
	-webkit-transform: skew(-10deg);
	-ms-transform: skew(-10deg);
	transform: skew(-10deg);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transition: all .2s ease;
	transition: all .2s ease;
	font-family: var(--wl-font-sans);
	background: #888;
}

.tgl-skewed+.tgl-btn:after,
.tgl-skewed+.tgl-btn:before {
	-webkit-transform: skew(10deg);
	-ms-transform: skew(10deg);
	transform: skew(10deg);
	display: inline-block;
	-webkit-transition: all .2s ease;
	transition: all .2s ease;
	width: 100%;
	text-align: center;
	position: absolute;
	line-height: 2em;
	font-weight: bold;
	color: #fff;
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

.tgl-skewed+.tgl-btn:after {
	left: 100%;
	content: attr(data-tg-on);
}

.tgl-skewed+.tgl-btn:before {
	left: 0;
	content: attr(data-tg-off);
}

.tgl-skewed+.tgl-btn:active {
	background: #888;
}

.tgl-skewed+.tgl-btn:active:before {
	left: -10%;
}

.tgl-skewed:checked+.tgl-btn {
	background: #86d993;
}

.tgl-skewed:checked+.tgl-btn:before {
	left: -100%;
}

.tgl-skewed:checked+.tgl-btn:after {
	left: 0;
}

.tgl-skewed:checked+.tgl-btn:active:after {
	left: 10%;
}

.tgl-flat+.tgl-btn {
	padding: 2px;
	-webkit-transition: all .2s ease;
	transition: all .2s ease;
	background: none;
	border: 4px solid #090909;
	border-radius: 2em !important;
	margin: 0;
}

.tgl-flat+.tgl-btn:after {
	-webkit-transition: all .2s ease;
	transition: all .2s ease;
	background: #090909;
	content: "";
	border-radius: 1em;
}

.tgl-flat:checked+.tgl-btn {
	border: 4px solid #FFF;
}


.tgl-flat:checked+.tgl-btn:after {
	left: 50%;
	background: #FFF;
}

/* Disabled */
.tgl-flat:disabled+.tgl-btn {
	border-color: #848484 !important;
	cursor: default;
}
.tgl-flat:disabled+.tgl-btn:after {
	background: #848484 !important;
	cursor: default;
}


.tgl-flip+.tgl-btn {
	padding: 2px;
	-webkit-transition: all .2s ease;
	transition: all .2s ease;
	font-family: var(--wl-font-sans);
	-webkit-perspective: 100px;
	perspective: 100px;
}

.tgl-flip+.tgl-btn:after,
.tgl-flip+.tgl-btn:before {
	display: inline-block;
	-webkit-transition: all .4s ease;
	transition: all .4s ease;
	width: 100%;
	text-align: center;
	position: absolute;
	line-height: 2em;
	font-weight: bold;
	color: #fff;
	position: absolute;
	top: 0;
	left: 0;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	border-radius: 4px;
}

.tgl-flip+.tgl-btn:after {
	content: attr(data-tg-on);
	background: #02C66F;
	-webkit-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
}

.tgl-flip+.tgl-btn:before {
	background: #FF3A19;
	content: attr(data-tg-off);
}

.tgl-flip+.tgl-btn:active:before {
	-webkit-transform: rotateY(-20deg);
	transform: rotateY(-20deg);
}

.tgl-flip:checked+.tgl-btn:before {
	-webkit-transform: rotateY(180deg);
	transform: rotateY(180deg);
}

.tgl-flip:checked+.tgl-btn:after {
	-webkit-transform: rotateY(0);
	transform: rotateY(0);
	left: 0;
	background: #7FC6A6;
}

.tgl-flip:checked+.tgl-btn:active:after {
	-webkit-transform: rotateY(20deg);
	transform: rotateY(20deg);
}


/* shared/ui/range-selector.css */




/* Styl dla elementów z klasą .hommie_range_selector */

.hommie_range_selector {
    -webkit-appearance: none; /* Wyłącza domyślny wygląd przeglądarki */
    appearance: none;
    width: 100%; /* Ustawia szerokość suwaka */
    height: 10px; /* Wysokość toru suwaka */
    background: linear-gradient(to right, green, yellow, red, #490464);
    border-radius: 5px; /* Zaokrągla krawędzie toru */
    outline: none; /* Usuwa obramowanie po kliknięciu */

    margin-top: 10px;
    margin-bottom: 10px;
}

/* Styl toru suwaka dla przeglądarek WebKit */
.hommie_range_selector::-webkit-slider-runnable-track {
    background: linear-gradient(to right, green, yellow, red, #490464);
    height: 10px;
    border-radius: 5px;
}

/* Styl toru suwaka dla Firefox */
.hommie_range_selector::-moz-range-track {
    background: linear-gradient(to right, green, yellow, red, #490464);
    height: 10px;
    border-radius: 5px;
}

/* Styl toru suwaka dla IE i Edge */
.hommie_range_selector::-ms-track {
    background: transparent;
    height: 10px;
    border-radius: 5px;
    border-color: transparent;
    color: transparent;
}

.hommie_range_selector::-ms-fill-lower {
    background: linear-gradient(to right, green, yellow, red, #490464);
    border-radius: 5px;
}

.hommie_range_selector::-ms-fill-upper {
    background: linear-gradient(to right, green, yellow, red, #490464);
    border-radius: 5px;
}

/* Styl suwaka (thumb) dla przeglądarek WebKit */
.hommie_range_selector::-webkit-slider-thumb {
    -webkit-appearance: none;
    background: white;
    height: 30px; /* Wysokość suwaka */
    width: 30px;  /* Szerokość suwaka */
    margin-top: -10px; /* Pozycjonuje suwak, aby wystawał poza tor */
    border-radius: 50%; /* Ustawia suwak jako okrąg */
}

/* Styl suwaka (thumb) dla Firefox */
.hommie_range_selector::-moz-range-thumb {
    background: white;
    height: 30px;
    width: 30px;
    border: none;
    border-radius: 50%;
}

/* Styl suwaka (thumb) dla IE i Edge */
.hommie_range_selector::-ms-thumb {
    background: white;
    height: 30px;
    width: 30px;
    border: none;
    border-radius: 50%;
}

/* shared/ui/widgets/statistic-widget.css */





.widget-parameter-body-values {
    color: #b4bbc2 !important;
    cursor: default;
}

.widget-trend {
    font-size: 26px;
}

.widget-trend.trend-up {
    transform: rotate(45deg);
}

.widget-trend.trend-up::before {
    content: "\f148";
    font-family: "bootstrap-icons";
    font-weight: 400;
    transform: rotate(45deg);
}

.widget-trend.trend-down {
    transform: rotate(-45deg);
}

.widget-trend.trend-down::before {
    content: "\f128";
    font-family: "bootstrap-icons";
    font-weight: 400;
}

.widget-trend.trend-not-change::before {
    content: "\f138";
    font-family: "bootstrap-icons";
    font-weight: 400;
}
/* Waterly typography roles. */
.widget-value, .widget-unit { font-family: var(--wl-font-mono); font-variant-numeric: tabular-nums; }


/* shared/ui/widgets/table.css */


/* Widget as like table */
.widget-table-group {
    background-color: #212224;
    border-radius: 15px;
    border: 2px solid #33373b;
    overflow: hidden;
}

.widget-table {
    overflow: hidden;
    margin-bottom: 0;
}

.widget-table thead tr {
    background-color: #33373B;
}

/* features/management/marker-widgets.css */
/**************************************************************************************************
	@contributors   Rafał Złotorzyński
	@module         marker-widgets
	@file           features/management/marker-widgets.css
**************************************************************************************************/

/* Contener */
.marker-widget {
    background-color: #33373B;
    color: #b4bbc2;
    height: 120px;
    border-radius: 15px;
    cursor: default;
}

/* Events - hover */
.marker-widget:not( [disabled] ):hover {
    background-color: #2193f3;
    color: #ffffff !important;
    cursor: pointer;
}

/* Header */
.marker-widget .marker-widget-header {
    font-size: 12px;
    line-height: 12px;
    text-align: center;
    padding: 10px 0px 0px 0px;
    margin: 0;
}

.marker-widget .marker-widget-header .bi {
    margin-right: 5px;
}

.marker-widget .marker-widget-value {
    font-size: 50px;
    line-height: 70px;
    text-align: center;
    padding: 0;
    margin: 0;
}

/* Footer */
.marker-widget .marker-widget-footer,
/* Error */
.marker-widget .marker-widget-error {
    font-size: 12px;
    padding: 0px 10px 0px 10px;
    margin: 0;
    font-weight: lighter;
}

.marker-widget .marker-widget-footer .marker-widget-trend {
    /* position: relative; */
    /* display: flex; */
    /* font-size: 15px; */
    /* align-items: start; */
    /* justify-content: left; */
    /* left: 2px; */
    margin-right: 3px;
}

.marker-widget .marker-widget-footer .marker-widget-trend.trend-up {
    /* transform: rotate(45deg); */
}

.marker-widget .marker-widget-footer .marker-widget-trend.trend-up::before {
    content: "\f148";
    font-family: "bootstrap-icons";
    font-weight: 400;
}

.marker-widget .marker-widget-footer .marker-widget-trend.trend-down {
    /* transform: rotate(-45deg); */
}

.marker-widget .marker-widget-footer .marker-widget-trend.trend-down::before {
    content: "\f128";
    font-family: "bootstrap-icons";
    font-weight: 400;
}

.marker-widget .marker-widget-footer .marker-widget-trend.trend-not-change::before {
    content: "\f138";
    font-family: "bootstrap-icons";
    font-weight: 400;
    /* font-size: 8px;
    vertical-align: 3px; */
}

/* Avg */
.marker-widget .marker-widget-footer .marker-widget-avg {
    /* position: absolute;
    font-size: 11px;
    bottom: -1px;
    left: 23px; */
}

/* Unit */
.marker-widget .marker-widget-footer .marker-widget-unit {
    font-size: 14px;
}

/* Min. and max. */
.marker-widget .marker-widget-footer .marker-widget-min-max {

}

.marker-widget .marker-widget-footer .marker-widget-max {
    /* top: -5px; */
    font-size: 12px;
    /* height: 15px; */
    /* position: relative; */
    display: flex;
    justify-content: right;
    align-items: flex-end;

    /* text-align: center; */
    line-height: 12px;
}

/* .marker-widget .marker-widget-footer .marker-widget-single-value-value-max { */
    /* font-size: 11px; */
    /* font-weight: 500; */
    /* position: relative; */
    /* height: 18px; */
    /* display: flex;
    justify-content: left;
    align-items: center;
    text-align: left;
    margin-left: 3px;
    line-height: 11px; */
/* } */

.marker-widget .marker-widget-footer .marker-widget-min {
    /* top: -4px; */
    font-size: 12px;
    /* height: 10px; */
    /* position: relative; */
    display: flex;
    justify-content: right;
    align-items: flex-start;
    /* text-align: center; */
    /* line-height: 11px; */
    line-height: 12px;
}

/* .marker-widget .marker-widget-footer .marker-widget-single-value-value-min { */
    /* font-size: 11px; */
    /* font-weight: 500; */
    /* position: relative; */
    /* display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-left: 3px;
    line-height: 11px; */
/* } */







/* .marker-widget-single-value-value {
    position: relative;
    display: flex;
    margin-left: 0px;
    margin-right: 0px;
    justify-content: center;
    align-items: center;
    text-align: center;
} */

/* .marker-widget-single-value-icon {
    left: 10px;
    font-size: 16px;
    position: absolute;
} */

/* .marker-widget-single-value-description {
    position: relative;
    font-size: 11px;
    justify-content: center;
    font-weight: 400;
    margin-left: 0px;
    margin-right: 0px;
    padding-left: 0px;
    padding-right: 0px;
} */

/* .marker-widget-single-value-unit-under {
    position: relative;
    font-size: 11px;
    justify-content: center;
    text-align: center;
    align-items: center;
    vertical-align: middle;
    top: -4px;
    height: 18px;
    font-weight: 400;
    margin-left: 0px;
    margin-right: 0px;
    padding-left: 0px;
    padding-right: 0px;
} */

/* .marker-widget-two-widgets-in-row {
    width: 350px;
    height: 100px;
    background-color: transparent;
    border-radius: 15px;
    color: #b4bbc2;
} */

/* .marker-widget-single-value-parameter-parent-two-widgets-in-row {
    max-width: 47.5%;
    height: 100%;
    background-color: #33373B;
    border-radius: 15px;
    margin-bottom: 16px;
    margin-right: 16px;
    color: #b4bbc2;
} */

/* .marker-widget-single-value-hidden {
    display: none;
} */

/* .marker-widget-single-value-parent {
    position: relative;
    margin-left: 0px;
    margin-right: 0px;
    justify-content: center;
    text-align: center;
    align-items: center;
    top: 2px;
} */

/* .marker-widget-download-data-parent {
    position: absolute;
    font-weight: lighter;
    color: #b4bbc2;
    top: 50%;
    margin-top: -24px;
} */

/* .marker-widget-download-data {
    color: #2193F3;
} */





/* .marker-widget-single-value-value-font {
    font-size: 36px;
    font-weight: 400;
} */

/* .marker-widget-single-value-unit {
    left: 68px;
    top: 55px;
    position: relative;
    display: flex;
    justify-content: right;
    align-items: center;
    text-align: center;
    padding-left: 0px;
    padding-right: 0px;
} */

/* .marker-widget-single-value-unit-font {
    font-size: 11px;
    font-weight: 400;
    padding-left: 0px;
    padding-right: 0px;
} */


/* shared/ui/statistic-diagnostic.css */
/* Shared laboratory chart presentation; also used by archived device diagnostics. */
.device-statistic {
	min-width: 0;
	flex: 1 1 420px;
	max-width: 100%;
	padding: 5px !important;
}

.diagnostic-statistic-widget .widget-parameter-with-chart {
	height: 392px;
	overflow: hidden;
	border: 1px solid var(--diagnostic-widget-border, rgba(255, 255, 255, 0.085)) !important;
	border-radius: 15px;
	color: #dce5eb;
	background: var(--diagnostic-widget-background,
		radial-gradient(circle at 94% 0, color-mix(in srgb, var(--diagnostic-chart-color, #2193f3) 13%, transparent), transparent 29%),
		linear-gradient(150deg, #242a2f, #181c20)) !important;
	box-shadow: var(--diagnostic-widget-shadow, 0 13px 30px rgba(0, 0, 0, 0.17));
	transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.diagnostic-statistic-widget .widget-parameter-with-chart:hover {
	border-color: var(--diagnostic-widget-hover-border, color-mix(in srgb, var(--diagnostic-chart-color, #2193f3) 34%, transparent)) !important;
	box-shadow: var(--diagnostic-widget-hover-shadow, 0 17px 34px rgba(0, 0, 0, 0.24));
	transform: translateY(-1px);
}

.diagnostic-statistic-widget .widget-parameter-body {
	position: relative;
	top: auto;
	left: auto;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.diagnostic-chart-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 84px;
	padding: 13px 14px 9px;
}

.diagnostic-chart-identity {
	display: flex;
	align-items: center;
	min-width: 0;
	gap: 10px;
	cursor: pointer;
}

.diagnostic-chart-identity:focus-visible {
	border-radius: 10px;
	outline: 2px solid rgba(82, 184, 255, 0.72);
	outline-offset: 4px;
}

/* Keep the chart badge above the legacy 45px icon rule loaded later in the bundle. */
.diagnostic-statistic-widget .widget-parameter-with-chart .widget-icon {
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	margin: 0;
	border: 1px solid color-mix(in srgb, var(--diagnostic-chart-color, #2193f3) 32%, transparent);
	border-radius: 12px;
	color: var(--diagnostic-chart-color, #2193f3);
	background: color-mix(in srgb, var(--diagnostic-chart-color, #2193f3) 10%, transparent);
	box-shadow: inset 0 0 17px color-mix(in srgb, var(--diagnostic-chart-color, #2193f3) 7%, transparent);
	font-size: 18px;
	line-height: 1;
}

.diagnostic-statistic-widget .widget-parameter-with-chart .widget-icon > i {
	color: inherit;
	font-size: inherit;
	line-height: 1;
	vertical-align: middle;
}

.diagnostic-chart-title {
	min-width: 0;
	flex: 1 1 auto;
}

.diagnostic-chart-expand {
	width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	border: 1px solid rgba(101, 184, 255, 0.2);
	border-radius: 9px;
	color: #82bddf;
	background: rgba(33, 147, 243, 0.07);
	font-size: 10px;
	transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.diagnostic-chart-expand:hover {
	border-color: rgba(101, 184, 255, 0.48);
	color: #d8f0ff;
	background: rgba(33, 147, 243, 0.16);
	transform: translateY(-1px);
}

.diagnostic-chart-title > span,
.diagnostic-chart-reading > span,
.diagnostic-chart-stat > span {
	display: block;
	color: #77858f;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.075em;
	text-transform: uppercase;
}

.diagnostic-statistic-widget .widget-header {
	display: -webkit-box;
	overflow: hidden;
	margin-top: 2px;
	color: #eaf2f7;
	font-size: 17px;
	font-weight: 800;
	line-height: 1.18;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.diagnostic-statistic-widget .widget-header .bi-info-circle {
	color: #71808a;
	font-size: 11px;
}

.diagnostic-statistic-widget .widget-date {
	overflow: hidden;
	width: auto;
	height: auto;
	margin-top: 3px;
	color: #77858e;
	font-size: 12px;
	font-style: normal;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.diagnostic-statistic-widget .widget-date i {
	font-style: normal;
}

.diagnostic-chart-reading {
	min-width: 112px;
	padding: 8px 10px;
	border: 1px solid rgba(255, 255, 255, 0.065);
	border-radius: 11px;
	background: rgba(255, 255, 255, 0.035);
	text-align: right;
}

.diagnostic-chart-reading > span i {
	margin-right: 3px;
	color: var(--diagnostic-chart-color, #2193f3);
	font-size: 6px;
	filter: drop-shadow(0 0 4px var(--diagnostic-chart-color, #2193f3));
}

.diagnostic-chart-reading > div {
	display: flex;
	align-items: baseline;
	justify-content: flex-end;
	gap: 4px;
	margin-top: 1px;
}

.diagnostic-statistic-widget .widget-value {
	width: auto;
	max-width: 150px;
	height: auto;
	margin: 0;
	color: #ffffff;
	font-size: 23px;
	font-weight: 800;
	line-height: 1.05;
}

.diagnostic-statistic-widget .widget-unit {
	margin: 0;
	padding: 0;
	color: #8f9ca5;
	font-size: 10px;
}

.diagnostic-chart-insights {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 5px;
	padding: 0 10px 8px;
}

/* Lekka legenda wieloseryjna — wartości i statystyki pozostają w istniejącym
   nagłówku i czterech polach, dzięki czemu nie zabieramy powierzchni wykresowi. */
.diagnostic-chart-series-panel {
	display: none;
}

.diagnostic-statistic-widget .has-multiple-series .diagnostic-chart-series-panel {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	padding: 0 10px 7px;
}

.diagnostic-series-chip {
	display: inline-flex;
	min-width: 0;
	align-items: center;
	gap: 6px;
	padding: 4px 8px;
	border: 1px solid color-mix(in srgb, var(--series-color) 25%, transparent);
	border-radius: 999px;
	color: #9fb1bb;
	background: color-mix(in srgb, var(--series-color) 6%, rgba(6, 15, 21, .55));
	cursor: pointer;
	font-size: 8px;
	font-weight: 750;
	transition: .16s ease;
}

.diagnostic-series-chip i,
.diagnostic-reading-secondary i,
.diagnostic-multi-stat-secondary i {
	width: 6px;
	height: 6px;
	flex: 0 0 6px;
	border-radius: 50%;
	background: var(--series-color);
	box-shadow: 0 0 6px color-mix(in srgb, var(--series-color) 58%, transparent);
}

.diagnostic-series-chip:hover,
.diagnostic-series-chip:focus-visible {
	border-color: color-mix(in srgb, var(--series-color) 50%, transparent);
	color: #ecf8fc;
	outline: none;
}

.diagnostic-series-chip.is-muted {
	opacity: .38;
	filter: grayscale(1);
}

.has-multiple-series .diagnostic-chart-reading {
	min-width: 180px;
	text-align: right;
}

.has-multiple-series .diagnostic-chart-reading > div {
	display: grid;
	gap: 4px;
	margin-top: 3px;
}

.diagnostic-reading-primary b {
	color: #fff;
	font-size: 23px;
	font-weight: 850;
	line-height: 1;
}

.diagnostic-reading-primary b small,
.diagnostic-multi-stat-primary b small,
.diagnostic-multi-stat-secondary b small {
	margin-left: 3px;
	color: var(--series-color);
	font-size: .58em;
	font-weight: 750;
}

.diagnostic-reading-secondary {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 3px 9px;
}

.diagnostic-reading-secondary > span {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
}

.diagnostic-reading-secondary em {
	color: #70828d;
	font-size: 7px;
	font-style: normal;
	font-weight: 700;
}

.diagnostic-reading-secondary b {
	color: #dbe8ee;
	font-size: 11px;
	font-weight: 850;
}

.diagnostic-chart-reading time {
	color: #60727c;
	font-size: 7px;
}

.diagnostic-chart-reading time i { margin-right: 4px; }

.diagnostic-multi-stat-primary b {
	display: block;
	margin-top: 2px;
	color: #eaf3f7;
	font-size: 13px;
	font-weight: 850;
}

.diagnostic-multi-stat-primary.is-up b { color: #64ddb2; }
.diagnostic-multi-stat-primary.is-down b { color: #ff8d9c; }
.diagnostic-multi-stat-primary.is-steady b { color: #8ea2ad; }

.diagnostic-multi-stat-secondary {
	display: flex;
	flex-wrap: wrap;
	gap: 3px 8px;
	margin-top: 3px;
}

.diagnostic-multi-stat-secondary > span {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.diagnostic-multi-stat-secondary b {
	color: #9eb0ba;
	font-size: 9px;
	font-weight: 800;
}

.diagnostic-multi-stat-secondary .is-up b { color: #64ddb2; }
.diagnostic-multi-stat-secondary .is-down b { color: #ff8d9c; }
.diagnostic-multi-stat-secondary .is-steady b { color: #8ea2ad; }

.diagnostic-chart-stat {
	min-width: 0;
	padding: 7px 8px;
	border: 1px solid rgba(255, 255, 255, 0.055);
	border-radius: 9px;
	background: rgba(8, 13, 17, 0.24);
}

.diagnostic-chart-stat strong {
	display: block;
	overflow: hidden;
	margin-top: 2px;
	color: #cbd5dc;
	font-size: 14px;
	font-weight: 800;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.diagnostic-chart-stat-trend strong {
	display: flex;
	align-items: center;
	gap: 5px;
	color: var(--diagnostic-chart-color, #2193f3);
}

.diagnostic-chart-stat .widget-trend {
	width: 13px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
}

.diagnostic-chart-stat .widget-trend-label {
	overflow: hidden;
	font-style: normal;
	text-overflow: ellipsis;
}

.diagnostic-chart-stat-unit {
	margin-left: 4px;
	color: #7f8d96;
	font-size: 8px;
	font-weight: 700;
}

.diagnostic-chart-stage {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-height: 0;
	margin: 0 8px;
	padding: 5px 7px;
	border: 1px solid rgba(255, 255, 255, 0.055);
	border-radius: 11px;
	background: rgba(7, 12, 16, 0.3);
}

.diagnostic-chart-stage-label {
	position: absolute;
	left: 12px;
	top: 7px;
	z-index: 2;
	color: #64727c;
	font-size: 8px;
	font-weight: 800;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	pointer-events: none;
}

.diagnostic-chart-stage-label i {
	margin-right: 4px;
	color: var(--diagnostic-chart-color, #2193f3);
}

.diagnostic-statistic-widget .chart-statistic-div,
.device-statistic.statistic-dual-axis .chart-statistic-div {
	position: relative;
	flex: 1 1 auto;
	height: auto;
	min-height: 176px;
	overflow: hidden;
	border-radius: 8px;
}

.diagnostic-statistic-widget .chart-statistic-div canvas {
	width: 100% !important;
	height: 100% !important;
}

.diagnostic-chart-interaction-hint {
	position: absolute;
	right: 11px;
	top: 7px;
	z-index: 2;
	color: #5f6d76;
	font-size: 8px;
	pointer-events: none;
}

.diagnostic-chart-interaction-hint i {
	margin-right: 3px;
}

.diagnostic-chart-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex: 0 0 auto;
	padding: 8px 12px 9px;
	color: #87959e;
	font-size: 9px;
	font-weight: 600;
}

.diagnostic-chart-footer span {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.diagnostic-chart-footer i {
	margin-right: 4px;
	color: #61717c;
}

.diagnostic-chart-footer strong {
	color: #aebac2;
}

.diagnostic-chart-footer .widget-range {
	color: #aebac2;
	font-size: 9px;
	font-weight: 700;
}

.diagnostic-chart-reset-zoom {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 6;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 8px;
	border: 1px solid rgba(82, 184, 255, 0.34);
	border-radius: 8px;
	opacity: 0;
	color: #9dd9ff;
	background: rgba(12, 28, 40, 0.9);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.24);
	font-size: 8px;
	font-weight: 800;
	pointer-events: none;
	transform: translateY(-4px);
	transition: opacity 0.16s ease, transform 0.16s ease, background 0.16s ease;
}

.diagnostic-chart-reset-zoom.is-visible {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}

.diagnostic-chart-reset-zoom:hover {
	color: #dff3ff;
	background: rgba(24, 57, 78, 0.96);
}

.diagnostic-statistic-widget canvas.is-selecting-range {
	cursor: col-resize;
}

.diagnostic-location-failure-count {
	position: absolute;
	left: 10px;
	top: 8px;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 7px;
	border: 1px solid rgba(255, 77, 94, 0.3);
	border-radius: 7px;
	color: #ff98a2;
	background: rgba(66, 17, 24, 0.82);
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
	font-size: 8px;
	font-weight: 800;
	pointer-events: none;
}

body.diagnostic-chart-viewer-open {
	overflow: hidden !important;
}

.diagnostic-chart-viewer-overlay {
	z-index: 12060;
	padding: 16px 16px 0;
}

.diagnostic-chart-viewer-sheet {
	width: min(1500px, 100%);
	height: min(900px, calc(100vh - 16px));
	border-bottom: 0;
	border-radius: 24px 24px 0 0;
	background:
		radial-gradient(circle at 90% 0, rgba(33, 147, 243, 0.11), transparent 31%),
		linear-gradient(150deg, #172129, #0d1419);
}

.diagnostic-chart-sheet-toolbar {
	position: absolute;
	inset: 0 0 auto;
	z-index: 7;
	min-height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: 1px solid rgba(143, 184, 220, 0.12);
	background: rgba(16, 22, 27, 0.96);
	backdrop-filter: blur(16px);
}

.diagnostic-chart-sheet-toolbar .diagnostic-chart-viewer-collapse {
	width: auto;
	min-width: 190px;
	height: auto;
	display: grid;
	grid-template-columns: 42px minmax(0, 1fr) 22px;
	align-items: center;
	justify-content: initial;
	gap: 8px;
	padding: 5px 10px;
	border: 0;
	border-radius: 10px;
	color: #dbe9f2;
	background: transparent;
	font-size: inherit;
	font-weight: inherit;
}

.diagnostic-chart-sheet-toolbar .diagnostic-chart-viewer-collapse:hover,
.diagnostic-chart-sheet-toolbar .diagnostic-chart-viewer-collapse:focus-visible {
	color: #ffffff;
	background: rgba(101, 184, 255, 0.09);
	outline: none;
}

.diagnostic-chart-viewer-header {
	position: absolute;
	inset: 42px 0 auto;
	z-index: 5;
	min-height: 66px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 16px;
	border-bottom: 1px solid rgba(143, 184, 220, 0.13);
	background: rgba(10, 20, 27, 0.82);
	backdrop-filter: blur(14px);
}

.diagnostic-chart-viewer-header > div {
	min-width: 0;
}

.diagnostic-chart-viewer-identity {
	display: flex;
	align-items: center;
	gap: 12px;
}

.diagnostic-chart-viewer-icon {
	width: 40px;
	height: 40px;
	display: flex !important;
	align-items: center;
	justify-content: center;
	flex: 0 0 40px;
	border: 1px solid rgba(103, 232, 249, 0.2);
	border-radius: 12px;
	color: #67e8f9;
	background: rgba(103, 232, 249, 0.08);
	font-size: 17px;
}

.diagnostic-chart-viewer-identity > div {
	min-width: 0;
}

.diagnostic-chart-viewer-header span,
.diagnostic-chart-viewer-header strong,
.diagnostic-chart-viewer-header small {
	display: block;
}

.diagnostic-chart-viewer-identity > div > span {
	color: #6fa8cc;
	font-size: 8px;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.diagnostic-chart-viewer-header strong {
	overflow: hidden;
	margin-top: 1px;
	color: #eef7fc;
	font-size: 17px;
	font-weight: 800;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.diagnostic-chart-viewer-header small {
	margin-top: 1px;
	color: #758995;
	font-size: 9px;
}

.diagnostic-chart-viewer-host {
	position: absolute;
	inset: 108px 14px 0;
	min-height: 0;
}

.diagnostic-chart-viewer-host > .device-statistic {
	width: 100%;
	height: 100%;
	max-width: none;
	padding: 0 !important;
}

.diagnostic-chart-viewer-host .diagnostic-statistic-widget .widget-parameter-with-chart {
	height: 100%;
	overflow: hidden;
	border: 0 !important;
	border-radius: 0;
	background: transparent !important;
	box-shadow: none;
	transform: none;
}

.diagnostic-chart-viewer-host .diagnostic-statistic-widget .widget-parameter-with-chart:hover {
	border: 0 !important;
	box-shadow: none;
	transform: none;
}

.diagnostic-chart-viewer-host .diagnostic-statistic-widget .diagnostic-chart-header {
	display: none;
}

.diagnostic-chart-viewer-host .diagnostic-statistic-widget .diagnostic-chart-stage {
	order: 1;
	margin: 10px 8px 0;
	padding: 8px 10px 12px;
	border-color: rgba(101, 184, 255, 0.13);
	border-radius: 16px;
	background: rgba(2, 8, 15, 0.54);
	box-shadow: inset 0 1px rgba(255, 255, 255, 0.025);
}

.diagnostic-chart-viewer-host .diagnostic-statistic-widget .diagnostic-chart-insights {
	order: 2;
	gap: 8px;
	padding: 10px 8px 8px;
}

.diagnostic-chart-viewer-host .diagnostic-statistic-widget .diagnostic-chart-stat {
	padding: 10px 11px;
	border-color: rgba(255, 255, 255, 0.07);
	border-radius: 11px;
	background: rgba(255, 255, 255, 0.035);
}

.diagnostic-chart-viewer-host .diagnostic-statistic-widget .diagnostic-chart-stat strong {
	margin-top: 4px;
	font-size: 14px;
}

.diagnostic-chart-viewer-host .diagnostic-statistic-widget .diagnostic-chart-footer {
	order: 3;
	padding: 3px 12px 12px;
}

.diagnostic-chart-viewer-host .diagnostic-statistic-widget .chart-statistic-div {
	min-height: 320px;
}

.diagnostic-chart-widget-placeholder {
	min-width: 0;
	min-height: 280px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 8px;
	border: 1px dashed rgba(101, 184, 255, 0.22);
	border-radius: 15px;
	color: #718d9e;
	background: rgba(9, 20, 27, 0.38);
	font-size: 9px;
	text-align: center;
}

.diagnostic-chart-widget-placeholder i {
	color: #54b8f5;
	font-size: 20px;
	opacity: 0.78;
}

@media (max-width: 575.98px) {
	.diagnostic-chart-viewer-overlay {
		padding: 8px 8px 0;
	}

	.diagnostic-chart-viewer-sheet {
		height: calc(100vh - 8px);
		border-radius: 18px 18px 0 0;
	}

	.diagnostic-chart-viewer-header {
		padding: 9px 11px;
	}

	.diagnostic-chart-viewer-header strong {
		font-size: 14px;
	}

	.diagnostic-chart-viewer-icon {
		width: 34px;
		height: 34px;
		flex-basis: 34px;
		font-size: 14px;
	}

	.diagnostic-chart-viewer-header small {
		display: none;
	}

	.diagnostic-chart-sheet-toolbar .diagnostic-chart-viewer-collapse {
		width: auto;
		min-width: 190px;
	}

	.diagnostic-chart-viewer-host {
		inset: 108px 8px 0;
	}

	.diagnostic-chart-viewer-host .diagnostic-statistic-widget .diagnostic-chart-insights {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.diagnostic-chart-viewer-host .diagnostic-statistic-widget .diagnostic-chart-stage {
		margin-right: 0;
		margin-left: 0;
	}
}

.diagnostic-statistic-widget .download-data {
	position: absolute !important;
	left: 50% !important;
	top: 58% !important;
	z-index: 5;
	width: auto;
	margin: 0 !important;
	padding: 9px 12px !important;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 10px;
	background: rgba(15, 20, 24, 0.88);
	font-size: 9px;
	transform: translate(-50%, -50%);
}

.diagnostic-statistic-widget .chart-statistic-div .no-data {
	top: 50% !important;
	margin: 0 !important;
	color: #73818a;
	font-size: 10px !important;
	transform: translateY(-50%);
}

@media (max-width: 575.98px) {
	.diagnostic-statistic-widget .widget-parameter-with-chart {
		height: 440px;
	}

	.diagnostic-chart-header {
		align-items: stretch;
		flex-direction: column;
		gap: 7px;
	}

	.diagnostic-chart-reading {
		display: flex;
		align-items: center;
		justify-content: space-between;
		text-align: left;
	}

	.diagnostic-chart-insights {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.diagnostic-statistic-widget .chart-statistic-div,
	.device-statistic.statistic-dual-axis .chart-statistic-div {
		height: 151px;
	}

	.diagnostic-chart-interaction-hint {
		display: none;
	}

	.diagnostic-chart-footer {
		align-items: flex-start;
		flex-direction: column;
		gap: 2px;
	}
}


/* Decoded status names must fit the same reading cards as numeric values. */
.diagnostic-statistic-widget .diagnostic-chart-reading.has-formatted-value {
    flex: 0 1 180px;
    min-width: 0;
    max-width: 45%;
    container-type: inline-size;
}
.diagnostic-statistic-widget .diagnostic-chart-reading.has-formatted-value > div { min-width: 0; }
.diagnostic-statistic-widget .has-formatted-value .widget-value {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: 14px;
    font-size: clamp(11px, 9cqi, 16px);
    line-height: 1.25;
}
.diagnostic-statistic-widget .diagnostic-chart-stat strong {
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.3;
}
@media (max-width: 575.98px) {
    .diagnostic-statistic-widget .diagnostic-chart-reading.has-formatted-value {
        flex: none;
        width: 100%;
        max-width: 100%;
    }
    .diagnostic-statistic-widget .has-formatted-value .widget-value { font-size: 13px; }
    .diagnostic-statistic-widget .has-formatted-value > div { flex: 0 1 65%; }
}


/* shared/ui/chart-probe-cleaning.css */
.probe-cleaning-layer { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.waterly-chart-lab-v2 .probe-cleaning-layer { z-index: 14; }
.probe-cleaning-marker {
    position: absolute; display: block; width: 28px; height: 28px; padding: 0;
    transform: translate(-50%, -50%); border: 0; border-radius: 50%;
    background: transparent; color: #e9f6fa; cursor: pointer; pointer-events: auto;
}
.probe-cleaning-marker:focus-visible { outline: 2px solid #55c9db; outline-offset: 1px; }
.probe-cleaning-symbol { display: block; width: 20px; height: 20px; margin: 4px; }
.probe-cleaning-tooltip {
    display: none; position: absolute; top: 32px; left: 50%; transform: translateX(-50%);
    width: max-content; max-width: min(220px, var(--probe-tip-max), calc(100vw - 64px));
    padding: 8px 10px; border: 1px solid #2d4b5c; border-radius: 6px;
    background: #0a1c27; color: #e9f6fa; box-shadow: 0 4px 16px #0003;
    text-align: left; font: 11px/1.5 var(--wl-font-sans, "Geist", "Segoe UI", Arial, sans-serif); pointer-events: none;
}
.probe-cleaning-tooltip strong { display: block; font-size: 11px; font-weight: 700; }
.probe-cleaning-tooltip > span { display: block; color: #91afbd; font: 10px/1.5 var(--wl-font-mono); }
.probe-cleaning-marker[data-side="start"] .probe-cleaning-tooltip { left: 0; transform: none; }
.probe-cleaning-marker[data-side="end"] .probe-cleaning-tooltip { right: 0; left: auto; transform: none; }
.probe-cleaning-marker:hover .probe-cleaning-tooltip,
.probe-cleaning-marker:focus-visible .probe-cleaning-tooltip,
.probe-cleaning-marker.is-active .probe-cleaning-tooltip { display: block; }
html[data-theme="light"] .probe-cleaning-tooltip { background: #fff; color: #193b49; border-color: #b9d3df; }
html[data-theme="light"] .probe-cleaning-tooltip > span { color: #526e7c; }


/* shared/ui/widgets/text-widget.css */
/**************************************************************************************************
	@contributors   Rafał Złotorzyński
	@module         text-widget
	@file           shared/ui/widgets/text-widget.css
**************************************************************************************************/


/* Widget variables group */
.widget-variables-group {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 5px;
}

.widget-variables-group .widget-variables {
    background-color: #212224;
    border-radius: 15px;
    border: 2px solid #33373b;
    cursor: default;
    max-width: 100%;
}

.widget-variables .widget-variables-icon {
    height: 36px;
    width: 36px;
    border-radius: 14px;
    color: #2193F3;
    padding: 5px;
}

.widget-variables .widget-variables-body {
    line-height: 15px;
    padding-right: 10px !important;
}

.widget-variables .widget-variables-body .widget-variables-name {
    font-size: 10px;
    color: #7b8086;
}

.widget-variables .widget-variables-body .widget-variables-state {
    font-size: 13px;
    color: #b4bbc2;
}


/* shared/ui/alarm-state.css */
.waterly-alarm-bell { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; flex-shrink:0; border:1px solid #ffffff20; border-radius:10px; background:#07151cdd; color:#f3f7fa; font-size:13px; }
button.waterly-alarm-bell {cursor:pointer;}
.waterly-alarm-bell[data-alarm-state="unset"],.waterly-alarm-bell[data-alarm-state="disabled"] {color:#81949d;}
.waterly-alarm-bell[data-alarm-state="unknown"] {color:#b5c5cb; border-style:dashed;}
.waterly-alarm-bell[data-alarm-state="warning"] {color:#ffbd66;border-color:#ffbd6650;}
.waterly-alarm-bell[data-alarm-state="alarm"] {color:#ff6574;border-color:#ff657470;}
.waterly-alarm-bell[data-alarm-state="alarm"] i {animation:waterly-alarm-pulse 2s ease-in-out infinite;}
.waterly-alarm-bell:focus-visible {outline:2px solid #5de2e7;outline-offset:3px;}
@keyframes waterly-alarm-pulse {50%{opacity:.5;transform:rotate(12deg);}}
@media(prefers-reduced-motion:reduce){.waterly-alarm-bell i{animation:none!important;}}

html[data-theme="light"] .waterly-alarm-bell {
	border-color: rgba(28, 73, 104, 0.16);
	background: #edf5f8;
	color: #52697a;
	box-shadow: 0 1px 4px rgba(31, 55, 75, 0.06);
}
html[data-theme="light"] .waterly-alarm-bell[data-alarm-state="unset"],
html[data-theme="light"] .waterly-alarm-bell[data-alarm-state="disabled"] {
	border-color: rgba(28, 73, 104, 0.14);
	background: #eef4f7;
	color: #607987;
}
html[data-theme="light"] .waterly-alarm-bell[data-alarm-state="unknown"] {
	border-color: rgba(28, 73, 104, 0.22);
	border-style: dashed;
	background: #f4f8fa;
	color: #6b8190;
}
html[data-theme="light"] .waterly-alarm-bell[data-alarm-state="armed"] {
	border-color: rgba(22, 163, 148, 0.28);
	background: rgba(22, 163, 148, 0.1);
	color: #12897c;
}
html[data-theme="light"] .waterly-alarm-bell[data-alarm-state="warning"] {
	border-color: rgba(196, 126, 31, 0.28);
	background: rgba(255, 184, 92, 0.16);
	color: #945400;
}
html[data-theme="light"] .waterly-alarm-bell[data-alarm-state="alarm"] {
	border-color: rgba(201, 61, 78, 0.28);
	background: rgba(255, 101, 116, 0.14);
	color: #b52c45;
}
html[data-theme="light"] .waterly-alarm-bell:focus-visible {
	outline-color: #16a394;
}

/* Independent scale preserves the popup bell's vertical positioning. */
.waterly-alarm-bell {
 cursor: pointer;
 transition: scale 180ms ease, box-shadow 180ms ease;
}
@media (hover: hover) and (pointer: fine) {
 .waterly-alarm-bell:not(:disabled):not([data-loading="true"]):hover {
  scale: 1.1;
  box-shadow: inset 0 0 0 1px currentColor,
   inset 0 0 14px color-mix(in srgb, currentColor 14%, transparent),
   0 3px 12px color-mix(in srgb, currentColor 22%, transparent);
 }
}
.waterly-alarm-bell:focus-visible {
 box-shadow: inset 0 0 0 1px currentColor,
  0 0 12px color-mix(in srgb, currentColor 22%, transparent);
}
.waterly-alarm-bell:not(:disabled):not([data-loading="true"]):active {
 scale: .96;
}
@media (prefers-reduced-motion: reduce) {
 .waterly-alarm-bell { transition: none; }
 .waterly-alarm-bell:not(:disabled):not([data-loading="true"]):is(:hover, :active) { scale: 1; }
}


/* shared/ui/app-version.css */
.app-version {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	vertical-align: middle;
	white-space: nowrap;
}

.app-version > .app-version-number {
	display: inline;
	color: inherit;
	font: inherit;
	text-transform: none;
}

.app-version > .app-release-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 6px;
	border: 1px solid;
	border-radius: 999px;
	font-family: var(--wl-font-sans, "Geist", "Segoe UI", Arial, sans-serif);
	font-size: 8px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.6px;
	text-transform: uppercase;
}

.app-version > .app-release-badge::before {
	content: "";
	width: 4px;
	height: 4px;
	flex: 0 0 4px;
	border-radius: 50%;
	background: currentColor;
}

.app-version > .app-release-badge.is-beta {
	color: #65e1ca;
	border-color: rgba(101, 225, 202, 0.3);
	background: rgba(101, 225, 202, 0.1);
}

.app-version > .app-release-badge.is-alpha {
	color: #c8a5ff;
	border-color: rgba(200, 165, 255, 0.3);
	background: rgba(200, 165, 255, 0.1);
}

.app-version > .app-release-badge.is-dev {
	color: #ffd07a;
	border-color: rgba(255, 208, 122, 0.3);
	background: rgba(255, 208, 122, 0.1);
}

html[data-theme="light"] .app-version > .app-release-badge.is-beta {
	color: #087263;
	border-color: rgba(8, 114, 99, 0.25);
	background: rgba(8, 114, 99, 0.08);
}

html[data-theme="light"] .app-version > .app-release-badge.is-alpha {
	color: #6f3abe;
	border-color: rgba(111, 58, 190, 0.25);
	background: rgba(111, 58, 190, 0.08);
}

html[data-theme="light"] .app-version > .app-release-badge.is-dev {
	color: #875008;
	border-color: rgba(135, 80, 8, 0.25);
	background: rgba(135, 80, 8, 0.08);
}


/* ===== shell ===== */
/* features/auth/authorization.css */
/**************************************************************************************************
	@author         waterly.eu
	@contributors   Rafał Złotorzyński
	@module         CSS
	@file           authorization.css
	@description    Sign-in screen shown when there is no session
**************************************************************************************************/

.authorization-screen {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    /* Translucent so the public map stays readable behind the form */
    background: rgba(8, 12, 17, 0.72);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    overflow-y: auto;
}

.authorization-card {
    position: relative;
    width: 100%;
    max-width: 380px;
    padding: 28px 26px 26px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    background: rgba(24, 32, 40, 0.92);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.authorization-close {
    position: absolute;
    right: 10px;
    top: 8px;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #7f8e99;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
}

.authorization-close:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}

.authorization-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 18px;
}

.authorization-logo img {
    height: 42px;
}

.authorization-title {
    color: #ffffff;
    font-size: 17px;
    font-weight: 800;
    text-align: center;
}

.authorization-subtitle {
    margin-top: 5px;
    margin-bottom: 20px;
    color: #7f8e99;
    font-size: 11px;
    line-height: 1.45;
    text-align: center;
}

.authorization-feedback {
    display: block;
    margin-bottom: 14px;
    padding: 9px 11px;
    border: 1px solid rgba(255, 121, 137, 0.28);
    border-radius: 8px;
    background: rgba(255, 121, 137, 0.1);
    color: #ff9aa6;
    font-size: 11px;
}

.authorization-feedback:not(.is-visible) {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.authorization-feedback.is-success {
    border-color: rgba(126, 217, 87, 0.32);
    background: rgba(126, 217, 87, 0.1);
    color: #a8eb8c;
}

.authorization-label {
    display: block;
    margin-bottom: 5px;
    color: #8b9aa5;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.authorization-input {
    width: 100%;
    margin-bottom: 15px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 8px;
    background: rgba(10, 15, 20, 0.72);
    color: #ffffff;
    font-size: 13px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.authorization-input:focus {
    border-color: rgba(104, 189, 245, 0.55);
    box-shadow: 0 0 0 3px rgba(104, 189, 245, 0.12);
    outline: none;
}

.authorization-password {
    position: relative;
}

.authorization-password .authorization-input {
    padding-right: 44px;
}

.authorization-reveal {
    position: absolute;
    right: 6px;
    top: 4px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #8b9aa5;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
}

.authorization-reveal:hover,
.authorization-reveal:focus-visible {
    background: rgba(104, 189, 245, 0.1);
    color: #ffffff;
    outline: none;
}

.authorization-submit {
    width: 100%;
    margin-top: 4px;
    padding: 11px 14px;
    border: 0;
    border-radius: 8px;
    background: linear-gradient(135deg, #2f9de0 0%, #1f6fb2 100%);
    color: #ffffff;
    cursor: pointer;
    font-size: 13px;
    font-weight: 800;
    transition: filter 0.2s ease;
}

.authorization-submit:hover:not(:disabled) {
    filter: brightness(1.08);
}

.authorization-submit:disabled {
    cursor: default;
    filter: grayscale(0.45) brightness(0.85);
}

.authorization-link {
    display: block;
    margin: -3px auto 15px;
    padding: 2px 0;
    border: 0;
    background: transparent;
    color: #68bdf5;
    cursor: pointer;
    font: inherit;
    font-size: 11px;
    text-decoration: none;
}

.authorization-links {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: -3px 0 15px;
}

.authorization-links .authorization-link {
    margin: 0;
}

.authorization-link:hover,
.authorization-link:focus-visible {
    color: #9ed7fb;
    text-decoration: underline;
    outline: none;
}

.authorization-back {
    margin: 15px auto 0;
}

/* Light theme */
html[data-theme="light"] .authorization-screen {
    background: rgba(225, 237, 242, 0.68);
    backdrop-filter: blur(7px) saturate(0.9);
    -webkit-backdrop-filter: blur(7px) saturate(0.9);
}

html[data-theme="light"] .authorization-card {
    border-color: rgba(28, 73, 104, 0.14);
    background:
        radial-gradient(circle at 100% 0, rgba(47, 157, 224, 0.09), transparent 38%),
        rgba(250, 253, 254, 0.97);
    box-shadow:
        0 28px 70px rgba(31, 55, 75, 0.2),
        inset 0 1px rgba(255, 255, 255, 0.96);
}

html[data-theme="light"] .authorization-close {
    color: #607b8b;
}

html[data-theme="light"] .authorization-close:hover,
html[data-theme="light"] .authorization-close:focus-visible {
    background: rgba(28, 73, 104, 0.07);
    color: #173241;
    outline: none;
}

html[data-theme="light"] .authorization-title {
    color: #173241;
}

html[data-theme="light"] .authorization-subtitle,
html[data-theme="light"] .authorization-label {
    color: #607b8b;
}

html[data-theme="light"] .authorization-input {
    border-color: rgba(28, 73, 104, 0.16);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: inset 0 1px 2px rgba(31, 55, 75, 0.04);
    color: #173241;
    color-scheme: light;
}

html[data-theme="light"] .authorization-input:hover {
    border-color: rgba(28, 73, 104, 0.25);
}

html[data-theme="light"] .authorization-input:focus {
    border-color: rgba(31, 126, 181, 0.52);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(47, 157, 224, 0.12);
}

html[data-theme="light"] .authorization-input:-webkit-autofill,
html[data-theme="light"] .authorization-input:-webkit-autofill:hover,
html[data-theme="light"] .authorization-input:-webkit-autofill:focus {
    -webkit-text-fill-color: #173241;
    box-shadow: 0 0 0 1000px #ffffff inset;
}

html[data-theme="light"] .authorization-reveal {
    color: #607b8b;
}

html[data-theme="light"] .authorization-reveal:hover,
html[data-theme="light"] .authorization-reveal:focus-visible {
    background: rgba(47, 157, 224, 0.1);
    color: #147ab0;
}

html[data-theme="light"] .authorization-link {
    color: #147ab0;
}

html[data-theme="light"] .authorization-link:hover,
html[data-theme="light"] .authorization-link:focus-visible {
    color: #075e90;
}

html[data-theme="light"] .authorization-feedback {
    border-color: rgba(190, 45, 65, 0.2);
    background: rgba(214, 57, 78, 0.08);
    color: #ac263a;
}

html[data-theme="light"] .authorization-feedback.is-success {
    border-color: rgba(53, 139, 75, 0.22);
    background: rgba(66, 160, 89, 0.09);
    color: #28723c;
}

/* One-time code from the message, offered under the confirmation that the message was sent. */
.authorization-code {
	display: contents;
}

.authorization-code .authorization-label {
	margin-top: 0.4rem;
}

/* Waterly typography roles. */
.authorization-title { font-family: var(--wl-font-display); font-weight: 600; }


/* app/styles/base.css */
/**************************************************************************************************
	@author         hommie.pl
	@contributors   Rafał Złotorzyński
	@module         CSS
	@file           main.css
**************************************************************************************************/

html {
	background-color: #212529;
}

body {
	font-family: var(--wl-font-sans, "Geist", "Segoe UI", Arial, sans-serif);
	background-color: #212529;
	color: white;
}

/* Preserves the application-wide link treatment formerly supplied by Next Sidebar. */
a {
	text-decoration: none;
}


/* app/styles/main-frame.css */
/**************************************************************************************************
	@author         hommie.pl
	@contributors   Rafał Złotorzyński
	@module         CSS
	@file           main_frame.css
**************************************************************************************************/

/* Main navbar website */
.navbar-website {
	position			: relative;
	height				: 60px;
    z-index             : 1019;
	padding				: 10px;
}

/* Main navbar items */
.navbar-website .nav-item {
    cursor              : pointer;
}

/* Main logo navabar */
.navbar-website .logo-text-navbar {
	background-color: #33373B;
	color: #b4bbc2;
	border-radius: 10px;
	cursor: pointer;
}

.navbar-website .logo-text-navbar:hover {
	background-color: #2193F3;
	color: #FFFFFF;
}

.navbar-website .logo-text-navbar img {
	height: 40px;
	/* margin-left: -10px; */
}

.navbar-website .website-name-navbar {
    line-height: 40px;
}

.navbar-website ul li.nav-item {
	margin-right: 10px;
}

.navbar-website ul li.nav-item:last-child {
	margin-right: 0px;
}

.navbar-website .nav-link {
	position: relative;
	background-color: #33373B;
	color: #b4bbc2 !important;
	border-radius: 10px;
	height: 40px;
	width: 40px;
	padding: 0;
}

.navbar-website .nav-link.show,
.navbar-website .nav-link:hover {
	background-color: #2193F3;
	color: #FFFFFF !important;
}

.navbar-website .nav-link [data-bs-toggle="dropdown"] {
	height: inherit;
}

.navbar-website .nav-link [data-bs-toggle="dropdown"] i {
	font-size: 20px;
}

.navbar-website .nav-link span.badge {
	right: -5px;
	top: -5px;
	border-radius: 5px;
	width: 18px;
	height: 18px;
	padding: 6px 0 0 0;
	display: none;
	font-size: 10px;
	text-align: center;
	vertical-align: middle;
	line-height: 6px;
}

.navbar-website .nav-link .dropdown-menu {
	border-width: 2px;
	z-index: 1019;
}

/* Menu tree for supages */
.navbar-website .navbar-menu-tree {
	display: flex;
	height: 48px;
	align-items: stretch;
	gap: 4px;
	padding: 4px;
	border: 1px solid rgba(151, 188, 211, .16);
	border-radius: 16px;
	background: rgba(12, 20, 26, .72);
	box-shadow: 0 14px 34px rgba(0, 0, 0, .24), inset 0 1px rgba(255, 255, 255, .025);
	backdrop-filter: blur(18px) saturate(1.15);
}

.navbar-website .navbar-menu-tree .nav-menu-tree-link {
	position: relative;
	min-width: 170px;
	height: 40px;
	border: 1px solid transparent;
	border-radius: 11px;
	color: #b8c8d0;
	background: transparent;
	cursor: pointer;
	transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease;
}

.navbar-website .navbar-menu-tree .nav-menu-tree-device { min-width: 250px; }
.navbar-website .navbar-menu-tree .nav-menu-tree-view {
	border-color: rgba(73, 201, 207, .16);
	color: #e7fbfc;
	background: linear-gradient(135deg, rgba(42, 153, 177, .16), rgba(27, 86, 124, .14));
}

.navbar-website .nav-menu-tree-link:hover,
.navbar-website .nav-menu-tree-link.show {
	border-color: rgba(84, 210, 216, .3);
	color: #fff;
	background: rgba(48, 129, 155, .18);
	transform: translateY(-1px);
}

.navbar-website .navbar-menu-tree .nav-menu-tree-link [data-bs-toggle="dropdown"] {
	height: inherit;
}

.navbar-website .navbar-context-trigger {
	display: grid;
	height: 100%;
	grid-template-columns: 28px minmax(0, 1fr) 14px;
	align-items: center;
	gap: 8px;
	padding: 0 10px;
}

.navbar-website .navbar-context-trigger::after {
	color: #607986;
	content: "\f282";
	font-family: "bootstrap-icons";
	font-size: 8px;
	font-weight: 400;
	transition: transform .18s ease;
}

.navbar-website .nav-menu-tree-link.show .navbar-context-trigger::after { transform: rotate(180deg); }
.navbar-website .navbar-context-trigger > i {
	display: grid;
	width: 28px;
	height: 28px;
	place-items: center;
	border: 1px solid rgba(116, 178, 203, .18);
	border-radius: 9px;
	color: #62cbd3;
	background: rgba(71, 166, 183, .09);
	font-size: 12px;
}

.navbar-website .navbar-context-copy { min-width: 0; line-height: 1.05; }
.navbar-website .navbar-context-copy small {
	display: block;
	margin-bottom: 3px;
	color: #617b88;
	font-size: 7px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.navbar-website .navbar-context-copy span {
	display: block;
	overflow: hidden;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.3;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Device context controls live on the upper edge of the open sheet. */
.navbar-website .navbar-menu-tree {
	position: fixed;
	top: 60px;
	right: 18px;
	left: 18px;
	z-index: 1032;
	height: 40px;
	justify-content: space-between;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	backdrop-filter: none;
	pointer-events: none;
}

.navbar-website .navbar-menu-tree .nav-menu-tree-link {
	height: 38px;
	border-color: rgba(105, 169, 194, .14);
	background: rgba(10, 22, 29, .82);
	box-shadow: 0 9px 24px rgba(0, 0, 0, .2);
	backdrop-filter: blur(16px);
	pointer-events: auto;
}

.navbar-website .navbar-menu-tree .nav-menu-tree-device { min-width: min(310px, 34vw); }
.navbar-website .navbar-menu-tree .nav-menu-tree-view { min-width: min(230px, 28vw); }
.navbar-website .navbar-context-trigger { padding-top: 1px; }
.navbar-website .navbar-context-copy small { margin-bottom: 1px; line-height: 1.15; }

.navbar-website .navbar-menu-tree .dropdown-menu {
	width: min(420px, calc(100vw - 24px));
	max-height: min(620px, calc(100dvh - 82px));
	margin-top: 8px;
	padding: 7px !important;
	overflow-y: auto;
	border: 1px solid rgba(124, 180, 207, .2) !important;
	border-radius: 15px;
	color: #b9cbd3 !important;
	background: rgba(13, 22, 28, .97) !important;
	box-shadow: 0 24px 64px rgba(0, 0, 0, .46);
	backdrop-filter: blur(20px);
}

.navbar-website .navbar-menu-tree .dropdown-menu .dropdown-menu-el {
	min-height: 58px;
	align-items: center;
	padding: 9px 11px !important;
	border: 1px solid transparent;
	border-radius: 11px;
	transition: background .16s ease, border-color .16s ease, transform .16s ease;
}

.navbar-website .navbar-menu-tree .dropdown-menu .dropdown-menu-el.active,
.navbar-website .navbar-menu-tree .dropdown-menu .dropdown-menu-el:hover {
	border-color: rgba(79, 203, 210, .22);
	color: #efffff;
	background: linear-gradient(135deg, rgba(46, 154, 174, .18), rgba(34, 91, 128, .14));
	transform: translateX(2px);
}

.navbar-website .navbar-menu-tree .dropdown-menu .dropdown-menu-el .dropdown-menu-icon {
	display: grid !important;
	width: 32px;
	height: 32px;
	place-items: center;
	border-radius: 9px;
	color: #63cbd2;
	background: rgba(78, 174, 190, .1);
	font-size: 12px;
}

.navbar-website .navbar-menu-tree .dropdown-menu .dropdown-menu-el .dropdown-menu-name {
	color: #e1edf1;
	font-size: 11px;
	font-weight: 700;
}

.navbar-website .navbar-menu-tree .dropdown-menu .dropdown-menu-el .dropdown-menu-desc {
	margin-top: 3px;
	overflow: hidden;
	color: #708792;
	font-size: 9px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Menu tree for supages - scale  */
@media ( max-width: 767px ) {
	.navbar-website .navbar-menu-tree { top: 60px; right: 8px; left: 8px; height: 36px; }
	.navbar-website .navbar-menu-tree .nav-menu-tree-link,
	.navbar-website .navbar-menu-tree .nav-menu-tree-device { min-width: 44px; height: 36px; }
	.navbar-website .navbar-context-trigger { grid-template-columns: 28px; padding: 0 4px; }
	.navbar-website .navbar-context-trigger::after,
	.navbar-website .navbar-context-copy { display: none; }
}

/* Main page content */
.main-container-page {
    position: absolute;
    top: 0;
	right: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Sub-pages content */
.main-container-subpage {
	position: fixed;
    display: none;
    z-index: 1018;
	top: 56px;
	right: 0;
	left: 0;
	width: 100%;
    overflow-y: scroll;

    height: calc(100% - 56px);
    height: -o-calc(100% - 56px);
    height: -webkit-calc(100% - 56px);
    height: -moz-calc(100% - 56px);
}

.main-container-subpage > div:first-child {
	/* margin-bottom: 56px !important; */
	padding-top: 15px !important;
}

.language-body .user-settings-language:hover,
.language-body .user-settings-language.selected {
	background-color: #2193F3;
	color: #FFFFFF;
}

.language-body .user-settings-language label {
	padding-left: 5px;
}


/* shared/map/attribution.css */
/**************************************************************************************************
	@author         waterly.eu
	@contributors   Rafał Złotorzyński
	@module         CSS
	@file           map_attribution.css
	@description    Map contributors widget, moved out of the device diagnostics stylesheet so the
					main map and the diagnostics location map look the same
**************************************************************************************************/

.waterly-map-attribution {
    position: absolute;
    right: 10px;
    bottom: 12px;
    z-index: 1018;
    max-width: calc(100% - 82px);
    color: #c5d1d9;
    font-family: var(--wl-font-sans, "Geist", "Segoe UI", Arial, sans-serif);
}

.waterly-map-attribution-content {
    /* Match privacy / map-control outer height (36px with 1px border). */
    height: 36px;
    display: flex;
    align-items: center;
    gap: 6px;
    box-sizing: border-box;
    padding: 0 10px;
    border: 1px solid rgba(143, 184, 220, 0.2);
    border-radius: 10px;
    background:
        linear-gradient(135deg, rgba(31, 43, 52, 0.92), rgba(13, 19, 24, 0.94));
    box-shadow: 0 7px 22px rgba(0, 0, 0, 0.32);
    font-size: 9px;
    line-height: 1;
    white-space: nowrap;
}

.waterly-map-attribution-logo {
    width: 9px;
    height: 12px;
    flex: 0 0 auto;
    background-color: #7bc9ff;
    -webkit-mask: url(../img/main_logo_white.svg) center / contain no-repeat;
    mask: url(../img/main_logo_white.svg) center / contain no-repeat;
}

.waterly-map-attribution-content .waterly-map-attribution-brand {
    margin-right: 2px;
    color: #7bc9ff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.waterly-map-attribution-content > b {
    color: #586873;
    font-weight: 400;
}

.waterly-map-attribution-content a {
    color: #dce8ef;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.15s ease;
}

.waterly-map-attribution-content a:hover,
.waterly-map-attribution-content a:focus-visible {
    color: #79c8ff;
    text-decoration: none;
    outline: none;
}

@media (max-width: 639.98px) {
    .waterly-map-attribution {
        left: 10px;
        right: 10px;
        bottom: 10px;
        max-width: none;
    }

    .waterly-map-attribution-content {
        width: 100%;
        height: auto;
        min-height: 36px;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 3px 5px;
        padding: 5px 7px;
        font-size: 8px;
        line-height: 1.25;
        white-space: normal;
    }

    .waterly-map-attribution-content .waterly-map-attribution-brand {
        font-size: 8px;
    }
}


/* shared/map/controls.css */
/**************************************************************************************************
	@author         waterly.eu
	@contributors   Rafał Złotorzyński
	@module         CSS
	@file           map_ui.css
	@description    Overlay interface of the main map.

					Every widget is registered as a MapTiler control, the way the alpha line does
					it, so the SDK containers stack and space them. Nothing here is positioned by
					hand - that was what made the widgets land on top of each other and merge on
					narrow screens.
**************************************************************************************************/

/******************************************** Shared look *****************************************/
    /* The visible navigation now lives inside the map. The former 64 px navbar
       reservation left an empty strip above every control. MapLibre controls
       already carry their own 10 px margin, so the corner itself starts at 0. */
    #main_map_content .maplibregl-ctrl-top-left,
    #main_map_content .maplibregl-ctrl-top-right {
        top: 0;
        z-index: 5;
    }

/**************************************** WQI widget, shared **************************************/
    /*
        Every presentation of the same numbers lives in one element and the variant class on
        #main_map_content decides which one is painted:
          .wqi-variant-gauge vertical gauge in the bottom left corner (the default)
          .wqi-variant-arc   flat arc hugging the left edge
          .wqi-variant-bar   horizontal bar in the bottom dock
          .wqi-variant-rail  the original vertical rail
          .wqi-variant-auto  arc from 1200 px up, bar below
        Switch it live with gis.set_wqi_variant( "rail" ).
    */
    #main_map_content {
        /* How much room the dock needs at the bottom, read by the SDK corner stacks */
        --wqi-dock-height: 42px;
        /* Room the bottom left stack leaves for the dock row underneath it */
        --wqi-bottom-left-pad: var(--wqi-dock-height);
        /* Height of the bottom left stack the gauge has to clear: cursor readout and scale */
        --wqi-corner-offset: 56px;
    }

    #main_map_content .wqi-legend-heading,
    #main_map_content .wqi-legend-body,
    #main_map_content .wqi-legend-arc,
    #main_map_content .wqi-legend-bar,
    #main_map_content .wqi-legend-gauge {
        display: none;
    }

    #main_map_content.wqi-variant-gauge .wqi-legend-gauge {
        display: block;
    }

    #main_map_content.wqi-variant-rail .wqi-legend-heading {
        display: inline-flex;
    }

    #main_map_content.wqi-variant-rail .wqi-legend-body {
        display: block;
    }

    #main_map_content.wqi-variant-arc .wqi-legend-arc {
        display: block;
    }

    #main_map_content.wqi-variant-bar .wqi-legend-bar,
    #main_map_content.wqi-variant-auto .wqi-legend-bar {
        display: flex;
    }

    /* Hidden on purpose: both are still in the markup, they are only waiting for a better place */
    #main_map_content .wqi-legend-visible-count,
    #main_map_content .wqi-legend-heading small {
        display: none;
    }

    #main_map_content .wqi-legend-empty {
        position: absolute;
        display: none;
        width: 26px;
        height: 26px;
        place-items: center;
        box-sizing: border-box;
        padding: 0;
        border: 1px solid rgba(143, 184, 220, 0.2);
        border-radius: 50%;
        background: rgba(7, 18, 27, 0.78);
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.24), inset 0 1px rgba(255, 255, 255, 0.05);
        color: #738896;
        font-size: 10px;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    #main_map_content .wqi-map-legend.is-empty .wqi-legend-empty {
        display: grid;
    }

    #main_map_content .wqi-map-legend.is-empty .wqi-gauge-span,
    #main_map_content .wqi-map-legend.is-empty .wqi-gauge-dot,
    #main_map_content .wqi-map-legend.is-empty .wqi-gauge-value,
    #main_map_content .wqi-map-legend.is-empty .wqi-gauge-ticks,
    #main_map_content .wqi-map-legend.is-empty .wqi-arc-bound,
    #main_map_content .wqi-map-legend.is-empty .wqi-arc-average,
    #main_map_content .wqi-map-legend.is-empty .wqi-arc-marks,
    #main_map_content .wqi-map-legend.is-empty .wqi-bar-bound,
    #main_map_content .wqi-map-legend.is-empty .wqi-bar-average,
    #main_map_content .wqi-map-legend.is-empty .wqi-bar-mark {
        display: none;
    }

    #main_map_content .wqi-map-legend.is-empty .wqi-arc-scale,
    #main_map_content .wqi-map-legend.is-empty .wqi-bar-track {
        opacity: 0.32;
    }

    /* Shared accents: the readings keep their identity in every variant */
    #main_map_content .wqi-map-legend .is-min { color: #42e2ce; }
    #main_map_content .wqi-map-legend .is-average { color: #f5d867; }
    #main_map_content .wqi-map-legend .is-max { color: #ff7a6d; }

    /* Too short to read: drop the map WQI overlay entirely. */
    @media (max-height: 279.98px) {
        #main_map_content .wqi-map-legend {
            display: none !important;
        }
    }

/************************************ Gauge, bottom left corner ***********************************/
    /*
        Vertical gauge from the gauge-wqi-1a design: a thin rail with the minimum to maximum span
        filled in, three dots riding it and the readings spelled out next to them. It sits in the
        bottom left corner directly above the distance scale: gis_core.js measures that stack and
        writes its height plus a 20 px gap into --wqi-corner-offset. The position below adds the
        requested extra 20 px lift without changing the spacing logic shared with the map scale.

        Type follows the design: display numbers in the interface family, captions and ticks in a
        monospace face. The design's own webfonts are not loaded - the widget uses the stacks the
        application already ships.
    */
    #main_map_content.wqi-variant-gauge .wqi-map-legend {
        position: absolute;
        left: 10px;
        /* --wqi-corner-offset is the measured gap above the map scale (already includes footer pad). */
        bottom: var(--wqi-corner-offset, 56px);
        width: 214px;
        /* Cap on large screens; shrink to free space on short/narrow ones. */
        --wqi-gauge-natural-height: 336px;
        --wqi-gauge-top-clearance: 64px;
        --wqi-gauge-available-height: max(
            140px,
            calc(
                100%
                - var(--wqi-corner-offset, 56px)
                - var(--wqi-gauge-top-clearance, 64px)
            )
        );
        height: min(var(--wqi-gauge-natural-height), var(--wqi-gauge-available-height));
        max-height: min(var(--wqi-gauge-natural-height), var(--wqi-gauge-available-height));
        padding: 0;
        border: 0;
        background: none;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        transform: none;
        pointer-events: none;
    }

    #main_map_content .wqi-legend-gauge {
        position: relative;
        height: 100%;
    }

    /*
        The widget is drawn straight onto the map, so it needs its own ground to stand on: a soft
        shadow that fades out well before the edges of the box. Without it labels and rail sink
        into whatever the tiles happen to show - rivers, roads, a bright city block.
    */
    #main_map_content .wqi-legend-gauge::before {
        position: absolute;
        inset: -36px -96px -36px -28px;
        background: radial-gradient(
            ellipse 72% 68% at 20% 50%,
            rgba(4, 11, 17, 0.76) 0%,
            rgba(4, 11, 17, 0.54) 28%,
            rgba(4, 11, 17, 0.24) 52%,
            rgba(4, 11, 17, 0) 72%
        );
        content: "";
        pointer-events: none;
    }

    /* An empty gauge has no values to separate from the map, so it needs no ambient shadow. */
    #main_map_content .wqi-map-legend.is-empty .wqi-legend-gauge::before {
        display: none;
    }

    #main_map_content .wqi-gauge-track {
        position: absolute;
        /* Ticks end flush with the left edge of the corner stack below */
        left: 37px;
        top: 16px;
        /* Room for the halves of the bottom tick and label that hang below the rail */
        bottom: 28px;
        width: 8px;
        border-radius: 4px;
        background: rgba(255, 255, 255, 0.1);
    }

    #main_map_content .wqi-gauge-span {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 0;
        border-radius: 4px;
        transform-origin: bottom;
        animation: wqi-gauge-rise 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    }

    /* Ticks read to the left of the rail, each closed with a short dash */
    #main_map_content .wqi-gauge-ticks span {
        font-family: var(--wl-font-mono);
        position: absolute;
        right: 14px;
        display: flex;
        align-items: center;
        gap: 6px;
        color: rgba(255, 255, 255, 0.32);
        font-size: 9px;
        font-variant-numeric: tabular-nums;
        transform: translateY(50%);
    }

    #main_map_content .wqi-gauge-ticks i {
        display: block;
        width: 5px;
        height: 1px;
        background: rgba(255, 255, 255, 0.22);
    }

    #main_map_content .wqi-gauge-dot {
        position: absolute;
        left: -8px;
        width: 24px;
        height: 24px;
        box-sizing: border-box;
        border: 2px solid currentColor;
        border-radius: 50%;
        background: rgba(22, 24, 26, 0.9);
        transform: translateY(50%);
        animation: wqi-gauge-in 0.7s 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    }

    #main_map_content .wqi-gauge-value {
        position: absolute;
        left: 36px;
        transform: translateY(50%);
        animation: wqi-gauge-in 0.7s 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    }

    #main_map_content .wqi-gauge-value b {
        font-family: var(--wl-font-mono);
        display: block;
        color: #ffffff;
        font-size: 30px;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
        letter-spacing: -0.02em;
        line-height: 1;
        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.75);
    }

    #main_map_content .wqi-gauge-value i {
        display: block;
        margin-top: 4px;
        white-space: nowrap;
        color: currentColor;
        font-family: var(--wl-font-mono);
        font-size: 9px;
        font-style: normal;
        font-weight: 500;
        letter-spacing: 0.16em;
        text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
        text-transform: uppercase;
    }

    /*
        Colour here means the water quality index of that reading, not whether it is the smallest
        or the largest one on screen - gis_core.js paints each from the shared ramp. This is only
        the neutral state before the first readings arrive.
    */
    #main_map_content .wqi-legend-gauge .wqi-gauge-dot,
    #main_map_content .wqi-legend-gauge .wqi-gauge-value {
        color: rgba(197, 219, 225, 0.55);
    }

    /* One visible point uses one marker on a focused ±10 scale. Showing the same value as
       minimum, average and maximum would create three overlapping labels with no added meaning. */
    #main_map_content .wqi-map-legend.is-single .wqi-gauge-dot.is-min,
    #main_map_content .wqi-map-legend.is-single .wqi-gauge-dot.is-max,
    #main_map_content .wqi-map-legend.is-single .wqi-gauge-value.is-min,
    #main_map_content .wqi-map-legend.is-single .wqi-gauge-value.is-max,
    #main_map_content .wqi-map-legend.is-single .wqi-bar-mark.is-min,
    #main_map_content .wqi-map-legend.is-single .wqi-bar-mark.is-max {
        display: none;
    }

    #main_map_content .wqi-map-legend.is-single .wqi-gauge-dot.is-average {
        width: 26px;
        height: 26px;
        border-width: 3px;
        box-shadow:
            0 0 0 5px color-mix(in srgb, currentColor 13%, transparent),
            0 0 18px -2px currentColor;
    }

    #main_map_content .wqi-map-legend.is-single .wqi-gauge-value.is-average b {
        font-weight: 750;
    }

    #main_map_content.wqi-variant-gauge .wqi-legend-empty {
        left: 28px;
        bottom: calc(50% - 13px);
    }

    @keyframes wqi-gauge-rise {
        from { transform: scaleY(0); }
        to { transform: scaleY(1); }
    }

    @keyframes wqi-gauge-in {
        from { opacity: 0; transform: translate(0, calc(50% + 6px)); }
        to { opacity: 1; transform: translateY(50%); }
    }

    @media (prefers-reduced-motion: reduce) {
        #main_map_content .wqi-gauge-span,
        #main_map_content .wqi-gauge-dot,
        #main_map_content .wqi-gauge-value {
            animation: none;
        }
    }

    /* Light theme, second half of the design */
    html[data-theme="light"] #main_map_content .wqi-legend-gauge::before {
        background: radial-gradient(
            ellipse 72% 68% at 20% 50%,
            rgba(244, 247, 250, 0.82) 0%,
            rgba(244, 247, 250, 0.56) 28%,
            rgba(244, 247, 250, 0.24) 52%,
            rgba(244, 247, 250, 0) 72%
        );
    }

    html[data-theme="light"] #main_map_content .wqi-gauge-track {
        background: rgba(0, 0, 0, 0.1);
    }

    html[data-theme="light"] #main_map_content .wqi-gauge-ticks span {
        color: rgba(0, 0, 0, 0.34);
    }

    html[data-theme="light"] #main_map_content .wqi-gauge-ticks i {
        background: rgba(0, 0, 0, 0.2);
    }

    html[data-theme="light"] #main_map_content .wqi-gauge-dot {
        background: #ffffff;
    }

    html[data-theme="light"] #main_map_content .wqi-gauge-value b {
        color: #16181a;
        text-shadow: none;
    }

    html[data-theme="light"] #main_map_content .wqi-gauge-value i {
        text-shadow: none;
    }

    html[data-theme="light"] #main_map_content .wqi-legend-gauge .wqi-gauge-dot,
    html[data-theme="light"] #main_map_content .wqi-legend-gauge .wqi-gauge-value {
        color: rgba(28, 54, 78, 0.55);
    }

/*************************************** Variant A: flat arc **************************************/
    /*
        A slice of a 1000 px circle: over the 360 px the widget is tall it bends by some 16 px, so
        it reads as a curve leaning against the edge instead of as a half circle eating the map.
        Geometry comes from WQI_ARC in gis_core.js, which draws the path and places the average.
    */
    #main_map_content.wqi-variant-arc .wqi-map-legend,
    #main_map_content.wqi-variant-rail .wqi-map-legend {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
    }

    #main_map_content.wqi-variant-arc .wqi-map-legend {
        width: 212px;
        padding: 0;
        border: 0;
        background: none;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    #main_map_content .wqi-legend-arc {
        position: relative;
        height: 360px;
    }

    #main_map_content .wqi-arc-canvas {
        position: absolute;
        left: 0;
        top: 0;
        overflow: visible;
    }

    #main_map_content .wqi-arc-base {
        fill: none;
        stroke: rgba(202, 234, 245, 0.12);
        stroke-width: 13;
        stroke-linecap: round;
    }

    #main_map_content .wqi-arc-scale {
        fill: none;
        stroke: url(#wqi-arc-ramp);
        stroke-width: 5;
        stroke-linecap: round;
        filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.45));
        transition: opacity 0.3s ease;
    }

    #main_map_content .wqi-arc-mark {
        stroke: rgba(6, 16, 24, 0.85);
        stroke-width: 1.4;
    }

    #main_map_content .wqi-arc-mark.is-min { fill: #42e2ce; }
    #main_map_content .wqi-arc-mark.is-average { fill: #f5d867; }
    #main_map_content .wqi-arc-mark.is-max { fill: #ff7a6d; }

    #main_map_content .wqi-arc-title {
        position: absolute;
        left: 20px;
        top: -44px;
        color: #eaf3f9;
        font-family: var(--wl-font-sans, "Geist", "Segoe UI", Arial, sans-serif);
        font-size: 11px;
        font-weight: 900;
        letter-spacing: 0.16em;
        text-shadow: 0 1px 8px rgba(0, 0, 0, 0.85);
    }

    #main_map_content .wqi-arc-bound,
    #main_map_content .wqi-arc-average {
        position: absolute;
        display: flex;
        flex-direction: column;
        gap: 1px;
        padding: 5px 9px;
        border: 1px solid color-mix(in srgb, currentColor 26%, transparent);
        border-left: 2px solid currentColor;
        border-radius: 8px 12px 12px 8px;
        background: linear-gradient(120deg, rgba(9, 24, 34, 0.88), rgba(5, 14, 22, 0.72));
        box-shadow: 0 7px 22px rgba(0, 0, 0, 0.3);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        font-family: var(--wl-font-sans, "Geist", "Segoe UI", Arial, sans-serif);
        white-space: nowrap;
    }

    #main_map_content .wqi-arc-bound b,
    #main_map_content .wqi-arc-average b {
        font-family: var(--wl-font-mono);
        color: currentColor;
        font-size: 14px;
        font-weight: 850;
        font-variant-numeric: tabular-nums;
        line-height: 1.1;
    }

    #main_map_content .wqi-arc-bound i,
    #main_map_content .wqi-arc-average i {
        color: rgba(197, 219, 225, 0.55);
        font-size: 7px;
        font-style: normal;
        font-weight: 750;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }

    /* The ends of the scale are the extremes themselves, so they can be pinned to the ends */
    #main_map_content .wqi-arc-bound {
        left: 18px;
        transform: translateY(-50%);
    }

    #main_map_content .wqi-arc-bound.is-max { top: 0; }
    #main_map_content .wqi-arc-bound.is-min { top: 100%; }

    /* Left and top come from gis_core.js, which follows the curve */
    #main_map_content .wqi-arc-average {
        left: 26px;
        top: 50%;
        z-index: 2;
        padding: 7px 10px;
        transform: translateY(-50%);
    }

    #main_map_content .wqi-arc-average b {
        font-size: 17px;
    }

    #main_map_content.wqi-variant-arc .wqi-legend-empty {
        left: 22px;
        top: 50%;
        transform: translateY(-50%);
    }

/************************************ Variant B: horizontal bar ***********************************/
    #main_map_content.wqi-variant-bar .wqi-map-legend,
    #main_map_content.wqi-variant-auto .wqi-map-legend {
        position: relative;
        left: auto;
        top: auto;
        order: 1;
        flex: 1 1 auto;
        min-width: 0;
        padding: 0;
        border: 0;
        transform: none;
        background: none;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    #main_map_content .wqi-legend-bar {
        position: relative;
        align-items: flex-end;
        gap: 12px;
        box-sizing: border-box;
        padding: 22px 14px 8px;
        border: 1px solid rgba(143, 184, 220, 0.2);
        border-radius: 12px;
        background: linear-gradient(135deg, rgba(31, 43, 52, 0.94), rgba(13, 19, 24, 0.96));
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.36);
        backdrop-filter: blur(7px);
        -webkit-backdrop-filter: blur(7px);
        font-family: var(--wl-font-sans, "Geist", "Segoe UI", Arial, sans-serif);
    }

    #main_map_content .wqi-bar-title {
        color: #eaf3f9;
        font-size: 11px;
        font-weight: 900;
        letter-spacing: 0.14em;
        line-height: 1.6;
    }

    #main_map_content .wqi-bar-bound {
        display: flex;
        flex-direction: column;
        gap: 1px;
        line-height: 1.15;
        white-space: nowrap;
    }

    #main_map_content .wqi-bar-bound i {
        color: rgba(197, 219, 225, 0.5);
        font-size: 7px;
        font-style: normal;
        font-weight: 750;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }

    #main_map_content .wqi-bar-bound b {
        font-family: var(--wl-font-mono);
        color: currentColor;
        font-size: 13px;
        font-weight: 850;
        font-variant-numeric: tabular-nums;
    }

    #main_map_content .wqi-bar-track {
        position: relative;
        flex: 1 1 auto;
        min-width: 60px;
        height: 8px;
        margin-bottom: 5px;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 999px;
        box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);
        transition: opacity 0.3s ease;
    }

    #main_map_content .wqi-bar-mark {
        position: absolute;
        left: 0;
        top: 50%;
        width: 2px;
        height: 15px;
        border-radius: 99px;
        background: currentColor;
        box-shadow: 0 0 8px currentColor;
        transform: translate(-50%, -50%);
    }

    #main_map_content .wqi-bar-mark.is-average {
        width: 3px;
        height: 21px;
    }

    /*
        The label rides the track and is pulled back by its own position, so it stays inside the
        bar: flush left at the start, centred in the middle, flush right at the end.
    */
    #main_map_content .wqi-bar-average {
        position: absolute;
        left: 0;
        bottom: calc(100% + 8px);
        display: flex;
        align-items: baseline;
        gap: 5px;
        white-space: nowrap;
        transform: translateX(var(--wqi-shift, -50%));
    }

    #main_map_content .wqi-bar-average b {
        font-family: var(--wl-font-mono);
        color: currentColor;
        font-size: 14px;
        font-weight: 850;
        font-variant-numeric: tabular-nums;
    }

    #main_map_content .wqi-bar-average i {
        color: rgba(197, 219, 225, 0.5);
        font-size: 7px;
        font-style: normal;
        font-weight: 750;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }

    #main_map_content.wqi-variant-bar .wqi-legend-empty,
    #main_map_content.wqi-variant-auto .wqi-legend-empty {
        left: 50%;
        top: 50%;
        max-width: none;
        transform: translate(-50%, -50%);
    }

/************************************** Immersed WQI light rail ***********************************/
    #main_map_content.wqi-variant-rail .waterly-ctrl-legend.wqi-map-legend {
        left: 14px;
        top: 51%;
        width: 238px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        transform: translateY(-45%);
        pointer-events: none;
    }

    #main_map_content.wqi-variant-rail .wqi-map-legend::before {
        position: absolute;
        left: 32px;
        top: 47px;
        width: 30px;
        height: 246px;
        border: 1px solid rgba(165, 225, 231, 0.1);
        border-radius: 999px;
        background: linear-gradient(90deg, rgba(8, 20, 29, 0.3), rgba(8, 20, 29, 0.7), rgba(8, 20, 29, 0.28));
        box-shadow: 0 10px 35px rgba(0, 0, 0, 0.28), inset 0 0 18px rgba(153, 235, 229, 0.035);
        backdrop-filter: blur(9px);
        -webkit-backdrop-filter: blur(9px);
        content: "";
    }

    #main_map_content.wqi-variant-rail .wqi-map-legend .wqi-legend-heading {
        position: relative;
        display: inline-flex;
        min-width: 102px;
        box-sizing: border-box;
        gap: 12px;
        padding: 8px 9px 8px 12px;
        border: 1px solid rgba(143, 210, 220, 0.16);
        border-radius: 13px;
        background: linear-gradient(135deg, rgba(10, 25, 35, 0.76), rgba(5, 14, 22, 0.62));
        box-shadow: 0 8px 26px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.035);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    #main_map_content.wqi-variant-rail .wqi-map-legend .wqi-legend-heading b {
        font-size: 13px;
        text-shadow: 0 0 14px rgba(111, 234, 222, 0.42);
    }

    #main_map_content.wqi-variant-rail .wqi-map-legend .wqi-legend-body {
        position: relative;
        display: block;
        width: 100%;
        height: 248px;
        padding: 12px 0 0;
    }

    #main_map_content.wqi-variant-rail .wqi-map-legend .wqi-legend-axis {
        position: absolute;
        left: 0;
        top: 15px;
        width: 29px;
        height: 220px;
    }

    #main_map_content.wqi-variant-rail .wqi-map-legend .wqi-legend-axis span {
        color: rgba(201, 225, 232, 0.65);
        text-shadow: 0 1px 7px rgba(0, 0, 0, 0.8);
    }

    #main_map_content.wqi-variant-rail .wqi-map-legend .wqi-legend-track {
        position: absolute;
        left: 40px;
        top: 15px;
        width: 10px;
        height: 220px;
        overflow: visible;
        border-color: rgba(255, 255, 255, 0.28);
        box-shadow:
            0 0 7px rgba(149, 255, 0, 0.32),
            0 -30px 24px rgba(255, 0, 0, 0.14),
            inset 0 0 5px rgba(255, 255, 255, 0.36);
    }

    #main_map_content.wqi-variant-rail .wqi-map-legend .wqi-legend-track::after {
        position: absolute;
        left: 1px;
        top: 0;
        width: 6px;
        height: 32%;
        border-radius: 999px;
        background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.7), transparent);
        content: "";
        opacity: 0.55;
        animation: wqi-rail-scan 4.2s ease-in-out infinite;
    }

    #main_map_content.wqi-variant-rail .wqi-map-legend .wqi-legend-track > i {
        left: -5px;
        width: 19px;
        background: rgba(225, 247, 249, 0.34);
    }

    #main_map_content.wqi-variant-rail .wqi-map-legend .wqi-legend-zones {
        position: absolute;
        left: 58px;
        top: 15px;
        width: 84px;
        height: 220px;
    }

    #main_map_content.wqi-variant-rail .wqi-map-legend .wqi-legend-zones span {
        position: absolute;
        color: rgba(197, 219, 225, 0.29);
        font-size: 7px;
        font-weight: 750;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        text-shadow: 0 1px 5px rgba(0, 0, 0, 0.8);
        transform: translateY(-50%);
        white-space: nowrap;
    }

    #main_map_content.wqi-variant-rail .wqi-map-legend .wqi-legend-indicator {
        left: -7px;
        width: 25px;
        height: 1px;
        box-shadow: 0 0 10px currentColor, 0 0 3px currentColor;
    }

    #main_map_content.wqi-variant-rail .wqi-map-legend .wqi-legend-indicator::after {
        right: -3px;
        width: 7px;
        height: 7px;
        border: 2px solid rgba(7, 17, 25, 0.9);
        box-shadow: 0 0 9px currentColor;
    }

    #main_map_content.wqi-variant-rail .wqi-map-legend .wqi-legend-stats {
        position: absolute;
        left: 69px;
        top: 15px;
        width: 158px;
        height: 220px;
        padding: 0;
    }

    #main_map_content.wqi-variant-rail .wqi-map-legend .wqi-legend-stat {
        position: absolute;
        top: var(--wqi-position, 100%);
        left: 0;
        display: inline-grid;
        min-width: 63px;
        width: auto;
        box-sizing: border-box;
        grid-template-columns: auto auto;
        align-items: baseline;
        gap: 6px;
        padding: 5px 8px 5px 7px;
        border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
        border-left: 2px solid currentColor;
        border-radius: 8px 12px 12px 8px;
        background: linear-gradient(120deg, rgba(9, 24, 34, 0.88), rgba(5, 14, 22, 0.7));
        box-shadow: 0 7px 22px rgba(0, 0, 0, 0.3), 0 0 13px color-mix(in srgb, currentColor 10%, transparent);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        transform: translateY(-50%);
        transition: top 0.34s cubic-bezier(.2, .8, .2, 1);
    }

    #main_map_content.wqi-variant-rail .wqi-map-legend .wqi-legend-stat.is-average {
        left: 25px;
        z-index: 2;
        padding-block: 7px;
    }

    #main_map_content.wqi-variant-rail .wqi-map-legend .wqi-legend-stat.is-max {
        left: 50px;
    }

    #main_map_content.wqi-variant-rail .wqi-map-legend .wqi-legend-stat small {
        font-size: 7px;
    }

    #main_map_content.wqi-variant-rail .wqi-map-legend .wqi-legend-stat strong {
        font-size: 14px;
    }

    #main_map_content.wqi-variant-rail .wqi-map-legend .wqi-legend-empty {
        position: absolute;
        left: 68px;
        top: 118px;
        max-width: 128px;
        padding: 7px 9px;
        border: 1px solid rgba(143, 184, 220, 0.12);
        border-radius: 10px;
        background: rgba(7, 18, 27, 0.62);
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.24);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    #main_map_content.wqi-variant-rail .wqi-map-legend.is-empty .wqi-legend-body {
        opacity: 0.72;
    }

    #main_map_content.wqi-variant-rail .wqi-map-legend.is-empty .wqi-legend-stats,
    #main_map_content.wqi-variant-rail .wqi-map-legend.is-empty .wqi-legend-indicator {
        display: none;
    }

    @keyframes wqi-rail-scan {
        0%, 100% { transform: translateY(-15%); opacity: 0.18; }
        50% { transform: translateY(225%); opacity: 0.72; }
    }

    @media (prefers-reduced-motion: reduce) {
        #main_map_content.wqi-variant-rail .wqi-map-legend .wqi-legend-track::after {
            animation: none;
        }
    }

    @media (max-width: 639.98px) {
        #main_map_content.wqi-variant-rail .waterly-ctrl-legend.wqi-map-legend {
            left: 7px;
            width: 188px;
            transform: translateY(-40%) scale(0.88);
            transform-origin: left center;
        }

        #main_map_content.wqi-variant-rail .wqi-map-legend .wqi-legend-stat.is-average {
            left: 14px;
        }

        #main_map_content.wqi-variant-rail .wqi-map-legend .wqi-legend-stat.is-max {
            left: 28px;
        }

        #main_map_content.wqi-variant-rail .wqi-map-legend .wqi-legend-zones {
            opacity: 0.65;
        }
    }

    #main_map_content .waterly-ctrl {
        border: 1px solid rgba(143, 184, 220, 0.2);
        border-radius: 10px;
        background: linear-gradient(135deg, rgba(31, 43, 52, 0.92), rgba(13, 19, 24, 0.94));
        box-shadow: 0 7px 22px rgba(0, 0, 0, 0.32);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        color: #c5d1d9;
        font-family: var(--wl-font-sans, "Geist", "Segoe UI", Arial, sans-serif);
    }

    #main_map_content .waterly-ctrl-button {
        width: 34px;
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 0;
        border-radius: 9px;
        background: transparent;
        color: #c5d1d9;
        cursor: pointer;
        font-size: 13px;
        transition: color 0.15s ease, background-color 0.15s ease;
    }

    #main_map_content .waterly-ctrl-button:hover {
        background-color: rgba(105, 189, 247, 0.14);
        color: #ffffff;
    }

    #main_map_content .waterly-ctrl-button.is-active {
        color: #69bdf7;
    }

    /* Primary map action: keep the point-list trigger unmistakably visible in
       both authenticated and public account-shell views. */
    #main_map_content .waterly-ctrl-list {
        position: relative;
        z-index: 3;
        overflow: visible;
        border-color: rgba(103, 232, 222, 0.42);
        background:
            radial-gradient(circle at 28% 18%, rgba(90, 231, 216, 0.22), transparent 48%),
            linear-gradient(145deg, rgba(20, 42, 53, 0.98), rgba(7, 18, 28, 0.98));
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(255, 255, 255, 0.04);
        opacity: 1;
        visibility: visible;
    }

    #main_map_content .waterly-ctrl-list .devices-list-selector {
        display: flex !important;
        width: 44px;
        height: 44px;
        color: #8ce9df;
        font-size: 17px;
        opacity: 1 !important;
        visibility: visible !important;
    }

    #main_map_content .waterly-ctrl-list:hover {
        border-color: rgba(130, 247, 236, 0.72);
        background: linear-gradient(145deg, rgba(24, 88, 94, 0.98), rgba(9, 39, 51, 0.98));
        box-shadow: 0 14px 34px rgba(0, 0, 0, 0.48), 0 0 22px rgba(71, 214, 201, 0.2);
    }

    #main_map_content .waterly-ctrl-list:hover .devices-list-selector {
        color: #ffffff;
    }

/********************************************** Brand *********************************************/
    #main_map_content .waterly-ctrl-brand {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 7px 13px 7px 10px;
    }

    #main_map_content .waterly-ctrl-brand img {
        height: 18px;
    }

    #main_map_content .waterly-ctrl-brand span {
        color: #eaf3f9;
        font-size: 12px;
        font-weight: 800;
    }

/****************************************** Layer switcher ****************************************/
    #main_map_content .waterly-ctrl-layers {
        position: relative;
    }

    #main_map_content .map-layer-switcher {
        position: absolute;
        left: calc(100% + 6px);
        top: 0;
        display: none;
        min-width: 178px;
        padding: 6px;
        border: 1px solid rgba(143, 184, 220, 0.2);
        border-radius: 10px;
        background: linear-gradient(135deg, rgba(31, 43, 52, 0.95), rgba(13, 19, 24, 0.97));
        box-shadow: 0 7px 22px rgba(0, 0, 0, 0.32);
    }

    #main_map_content .map-layer-switcher.is-open {
        display: block;
    }

    #main_map_content .map-layer-option {
        display: flex;
        flex-direction: column;
        gap: 1px;
        padding: 7px 9px;
        border-radius: 7px;
        cursor: pointer;
        transition: background-color 0.15s ease;
    }

    #main_map_content .map-layer-option:hover {
        background-color: rgba(105, 189, 247, 0.12);
    }

    #main_map_content .map-layer-option.selected {
        background-color: rgba(105, 189, 247, 0.2);
    }

    #main_map_content .map-layer-option strong {
        color: #eaf3f9;
        font-size: 11px;
        font-weight: 700;
    }

    #main_map_content .map-layer-option small {
        color: #8194a1;
        font-size: 9px;
    }

/********************************************* Legend *********************************************/
    #main_map_content.wqi-variant-rail .waterly-ctrl-legend {
        position: absolute;
        left: 12px;
        top: 50%;
        z-index: 5;
        width: 142px;
        box-sizing: border-box;
        margin: 0;
        padding: 12px 11px 11px;
        transform: translateY(-42%);
        cursor: default;
    }

    #main_map_content.wqi-variant-rail .wqi-legend-heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding-bottom: 10px;
        border-bottom: 1px solid rgba(143, 184, 220, 0.14);
    }

    #main_map_content.wqi-variant-rail .wqi-legend-heading > span {
        display: flex;
        flex-direction: column;
        gap: 1px;
    }

    #main_map_content.wqi-variant-rail .wqi-legend-heading b {
        color: #eaf3f9;
        font-size: 12px;
        font-weight: 900;
        letter-spacing: 0.14em;
    }

    #main_map_content.wqi-variant-rail .wqi-legend-heading small {
        color: #7f909d;
        font-size: 7px;
        white-space: nowrap;
    }

    #main_map_content.wqi-variant-rail .wqi-legend-visible-count {
        padding: 4px 6px;
        border: 1px solid rgba(107, 222, 210, 0.18);
        border-radius: 999px;
        background: rgba(69, 203, 192, 0.08);
        color: #79dcd1;
        font-size: 8px;
        font-weight: 800;
        white-space: nowrap;
    }

    #main_map_content.wqi-variant-rail .wqi-legend-body {
        display: grid;
        grid-template-columns: 29px 18px 1fr;
        gap: 9px;
        height: 240px;
        padding: 15px 0 5px;
    }

    #main_map_content.wqi-variant-rail .wqi-legend-axis,
    #main_map_content.wqi-variant-rail .wqi-legend-track {
        position: relative;
        height: 220px;
    }

    #main_map_content.wqi-variant-rail .wqi-legend-axis span {
        font-family: var(--wl-font-mono);
        position: absolute;
        right: 0;
        color: #8095a3;
        font-size: 8px;
        font-weight: 800;
        font-variant-numeric: tabular-nums;
        transform: translateY(-50%);
    }

    #main_map_content.wqi-variant-rail .wqi-legend-track {
        width: 14px;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 999px;
        background: linear-gradient(to top, #00ff15 0%, #95ff00 25%, #ffea00 50%, #ff8000 75%, #ff0000 100%);
        box-shadow:
            inset 0 0 0 1px rgba(0, 0, 0, 0.32),
            0 0 22px rgba(149, 255, 0, 0.13);
    }

    #main_map_content.wqi-variant-rail .wqi-legend-track > i {
        position: absolute;
        left: -4px;
        width: 20px;
        height: 1px;
        background-color: rgba(11, 18, 25, 0.5);
    }

    #main_map_content.wqi-variant-rail .wqi-legend-indicator {
        position: absolute;
        top: var(--wqi-position, 100%);
        left: -5px;
        z-index: 2;
        width: 24px;
        height: 2px;
        border-radius: 99px;
        background: currentColor;
        box-shadow: 0 0 8px currentColor;
        transform: translateY(-50%);
        transition: top 0.32s ease;
    }

    #main_map_content.wqi-variant-rail .wqi-legend-indicator::after {
        position: absolute;
        right: -2px;
        top: 50%;
        width: 6px;
        height: 6px;
        border: 1px solid rgba(4, 13, 21, 0.9);
        border-radius: 50%;
        background: currentColor;
        content: "";
        transform: translateY(-50%);
    }

    #main_map_content.wqi-variant-rail .wqi-legend-indicator.is-min,
    #main_map_content.wqi-variant-rail .wqi-legend-stat.is-min { color: #42e2ce; }
    #main_map_content.wqi-variant-rail .wqi-legend-indicator.is-average,
    #main_map_content.wqi-variant-rail .wqi-legend-stat.is-average { color: #f5d867; }
    #main_map_content.wqi-variant-rail .wqi-legend-indicator.is-max,
    #main_map_content.wqi-variant-rail .wqi-legend-stat.is-max { color: #ff7a6d; }

    #main_map_content.wqi-variant-rail .wqi-legend-stats {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 7px;
        padding: 2px 0;
    }

    #main_map_content.wqi-variant-rail .wqi-legend-stat {
        display: flex;
        min-width: 48px;
        flex-direction: column;
        gap: 1px;
        padding: 6px 7px;
        border: 1px solid rgba(255, 255, 255, 0.07);
        border-radius: 9px;
        background: rgba(255, 255, 255, 0.035);
    }

    #main_map_content.wqi-variant-rail .wqi-legend-stat small {
        color: currentColor;
        font-size: 7px;
        font-weight: 900;
        letter-spacing: 0.1em;
    }

    #main_map_content.wqi-variant-rail .wqi-legend-stat strong {
        font-family: var(--wl-font-mono);
        color: #eefaff;
        font-size: 14px;
        font-weight: 850;
        font-variant-numeric: tabular-nums;
    }

    #main_map_content.wqi-variant-rail .wqi-legend-empty {
        display: none;
        padding-top: 8px;
        color: #8194a1;
        font-size: 8px;
        line-height: 1.35;
    }

    #main_map_content.wqi-variant-rail .wqi-map-legend.is-empty .wqi-legend-indicator {
        display: none;
    }

    #main_map_content.wqi-variant-rail .wqi-map-legend.is-empty .wqi-legend-body {
        opacity: 0.5;
    }

    #main_map_content.wqi-variant-rail .wqi-map-legend.is-empty .wqi-legend-empty {
        display: block;
    }

/***************************************** Cursor position ****************************************/
    /* The live readout stays implemented and can be restored by removing this class. */
    #main_map_content .waterly-ctrl-cursor.is-temporarily-disabled {
        display: none !important;
    }

    #main_map_content .waterly-ctrl-cursor {
        font-family: var(--wl-font-mono);
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 5px 11px;
        font-size: 9px;
        font-variant-numeric: tabular-nums;
    }

    #main_map_content .waterly-ctrl-cursor i {
        margin-right: 4px;
        color: #69bdf7;
    }

    #main_map_content .waterly-ctrl-cursor.is-empty {
        color: #71818d;
    }

/****************************************** Bottom dock *******************************************/
    /*
        The water quality widget, the privacy button and the contributors share one dock. It spans
        the map and lets pointer events through, so the widget can float at the left edge in the
        arc variant while the footer stays pinned to the bottom, and the three can fold into one
        full width row - or into stacked rows - without moving any node.

        Layouts, all driven by width alone:
          >= 1200 px   arc at the left edge, contributors and privacy in the bottom right corner
          640-1199 px  one full width line: widget, contributors, privacy
          < 640 px     stacked: widget, then a full-width contributors and privacy row
    */
    #main_map_content .waterly-map-dock {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 5;
        display: flex;
        flex-wrap: wrap;
        /* The dock spans the map, so its contents have to be pinned to the bottom themselves */
        align-items: flex-end;
        align-content: flex-end;
        justify-content: flex-end;
        gap: 8px;
        padding: 0 10px 10px;
        box-sizing: border-box;
        pointer-events: none;
    }

    #main_map_content .waterly-map-dock > * {
        pointer-events: auto;
    }

    /* Laid out by the dock, not by its own corner offsets */
    #main_map_content .waterly-map-dock .waterly-map-attribution {
        position: static;
        left: auto;
        right: auto;
        bottom: auto;
        order: 2;
        max-width: none;
    }

    #main_map_content .waterly-map-dock .map-privacy {
        order: 3;
    }

    /*
        MapLibre inserts controls at the front of the bottom containers, so the DOM order is the
        reverse of the order they were added in. Reading it back to front restores the intent:
        first added ends up highest. Zoom therefore sits high in the stack; the phone compass uses
        a higher flex order so it stays above the + button.
    */
    #main_map_content .maplibregl-ctrl-bottom-right {
        display: flex;
        flex-direction: column-reverse;
        align-items: flex-end;
    }

    #main_map_content .maplibregl-ctrl-bottom-right .maplibregl-ctrl {
        float: none;
    }

    /* Above zoom (+) — higher order moves toward the top with column-reverse */
    #main_map_content .waterly-ctrl-compass {
        order: 20;
    }

    #main_map_content .maplibregl-ctrl-bottom-right {
        padding-bottom: var(--wqi-dock-height);
    }

    #main_map_content .maplibregl-ctrl-bottom-left {
        padding-bottom: var(--wqi-bottom-left-pad);
    }

    /*
        Same outer footprint as map controls: 34×34 hit area + 1px border → 36×36.
        (border-box 34px looked smaller than zoom / locate / compass.)
    */
    #main_map_content .map-privacy {
        display: flex;
        width: auto;
        height: 36px;
        min-width: 36px;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        gap: 6px;
        box-sizing: border-box;
        padding: 0 10px;
        border: 1px solid rgba(143, 184, 220, 0.2);
        border-radius: 10px;
        background: linear-gradient(135deg, rgba(31, 43, 52, 0.92), rgba(13, 19, 24, 0.94));
        box-shadow: 0 7px 22px rgba(0, 0, 0, 0.32);
        color: #c5d1d9;
        cursor: pointer;
        font-family: var(--wl-font-sans, "Geist", "Segoe UI", Arial, sans-serif);
        font-size: 9px;
        font-weight: 600;
        line-height: 1;
    }

    #main_map_content .map-privacy i {
        color: inherit;
        font-size: 13px;
        line-height: 1;
    }

    #main_map_content .map-privacy:hover,
    #main_map_content .map-privacy:focus-visible {
        color: #ffffff;
        background: linear-gradient(rgba(105, 189, 247, 0.14), rgba(105, 189, 247, 0.14)),
            linear-gradient(135deg, rgba(31, 43, 52, 0.92), rgba(13, 19, 24, 0.94));
    }

    /* Medium: one full width line - widget, contributors, privacy */
    @media (min-width: 640px) and (max-width: 1199.98px) {
        #main_map_content {
            /* Contributors and privacy are pinned to the right, so the map scale no longer
               needs to reserve an empty footer row underneath itself on the left. */
            --wqi-bottom-left-pad: 0px;
        }

        #main_map_content.wqi-variant-bar,
        #main_map_content.wqi-variant-auto {
            --wqi-dock-height: 60px;
        }

        #main_map_content .waterly-map-dock {
            flex-wrap: nowrap;
            justify-content: flex-end;
        }

        #main_map_content.wqi-variant-bar .wqi-map-legend,
        #main_map_content.wqi-variant-auto .wqi-map-legend {
            order: 1;
        }

        #main_map_content .waterly-map-dock .map-privacy span {
            display: none;
        }

        #main_map_content .waterly-map-dock .map-privacy {
            width: 36px;
            height: 36px;
            flex: 0 0 36px;
            padding: 0;
        }

        #main_map_content .waterly-map-dock .map-privacy i {
            font-size: 13px;
        }

    }

    /* Narrow: fill the free height between logo and scale; keep type compact. */
    @media (max-width: 639.98px) {
        /* Gauge is an overlay, so the left scale stack need not reserve dock padding. */
        #main_map_content.wqi-variant-gauge {
            --wqi-bottom-left-pad: 0px;
        }

        #main_map_content.wqi-variant-bar,
        #main_map_content.wqi-variant-auto {
            --wqi-dock-height: 100px;
        }

        #main_map_content .waterly-map-dock {
            justify-content: space-between;
            padding: 0 8px 8px;
        }

        #main_map_content.wqi-variant-bar .wqi-map-legend,
        #main_map_content.wqi-variant-auto .wqi-map-legend {
            order: 1;
            flex: 1 0 100%;
        }

        #main_map_content .waterly-map-dock .waterly-map-attribution {
            flex: 1 1 0;
            min-width: 0;
        }

        #main_map_content .waterly-map-dock .waterly-map-attribution-content {
            justify-content: center;
            min-height: 36px;
        }

        #main_map_content .waterly-map-dock .map-privacy span {
            display: none;
        }

        #main_map_content .waterly-map-dock .map-privacy {
            width: 36px;
            height: 36px;
            flex: 0 0 36px;
            padding: 0;
        }

        #main_map_content .waterly-map-dock .map-privacy i {
            font-size: 13px;
        }

        #main_map_content .wqi-legend-bar {
            gap: 9px;
            padding: 21px 10px 7px;
        }

        #main_map_content .wqi-bar-title {
            display: none;
        }
    }

    /* Telefon w pionie: ciaśniejszy wskaźnik, żeby nie zabierał szerokości mapy. */
    @media (max-width: 639.98px) and (orientation: portrait) {
        #main_map_content.wqi-variant-gauge .wqi-map-legend {
            --wqi-gauge-natural-height: 240px;
            --wqi-gauge-top-clearance: 72px;
            left: 8px;
            width: 132px;
            transform: none;
        }

        #main_map_content .wqi-legend-gauge::before {
            inset: -28px -48px -28px -18px;
        }

        #main_map_content .wqi-gauge-track {
            left: 22px;
            top: 12px;
            bottom: 22px;
            width: 5px;
        }

        #main_map_content .wqi-gauge-ticks span {
            right: 8px;
            gap: 3px;
            font-size: 7px;
        }

        #main_map_content .wqi-gauge-dot {
            left: -5px;
            width: 16px;
            height: 16px;
        }

        #main_map_content .wqi-gauge-value {
            left: 22px;
        }

        #main_map_content .wqi-gauge-value b {
            font-size: 18px;
        }

        #main_map_content .wqi-gauge-value i {
            margin-top: 1px;
            font-size: 7px;
            letter-spacing: 0.1em;
        }

        #main_map_content .wqi-map-legend.is-single .wqi-gauge-dot.is-average {
            width: 18px;
            height: 18px;
            border-width: 2px;
            box-shadow:
                0 0 0 4px color-mix(in srgb, currentColor 13%, transparent),
                0 0 14px -2px currentColor;
        }

        #main_map_content.wqi-variant-gauge .wqi-legend-empty {
            left: 16px;
        }
    }

    /* Telefon w poziomie: wąski pionowo viewport — kompaktowa typografia wskaźnika WQI. */
    @media (orientation: landscape) and (max-height: 500px) {
        #main_map_content.wqi-variant-gauge {
            --wqi-bottom-left-pad: 0px;
        }

        #main_map_content.wqi-variant-gauge .wqi-map-legend {
            --wqi-gauge-top-clearance: 56px;
            width: 168px;
            transform: none;
        }

        #main_map_content .wqi-gauge-track {
            left: 28px;
            top: 12px;
            bottom: 20px;
            width: 6px;
        }

        #main_map_content .wqi-gauge-ticks span {
            right: 10px;
            gap: 4px;
            font-size: 8px;
        }

        #main_map_content .wqi-gauge-dot {
            left: -6px;
            width: 18px;
            height: 18px;
        }

        #main_map_content .wqi-gauge-value {
            left: 28px;
        }

        #main_map_content .wqi-gauge-value b {
            font-size: 20px;
        }

        #main_map_content .wqi-gauge-value i {
            margin-top: 2px;
            font-size: 8px;
            letter-spacing: 0.12em;
        }

        #main_map_content .wqi-map-legend.is-single .wqi-gauge-dot.is-average {
            width: 20px;
            height: 20px;
            border-width: 2px;
        }

        #main_map_content.wqi-variant-gauge .wqi-legend-empty {
            left: 20px;
        }
    }

    @media (orientation: landscape) and (max-height: 500px) and (max-width: 639.98px) {
        #main_map_content.wqi-variant-gauge .wqi-map-legend {
            transform: none;
        }
    }

    .waterly-map-copy-feedback {
        font-family: var(--wl-font-mono);
        position: absolute;
        left: 50%;
        bottom: calc(var(--wqi-dock-height, 42px) + 14px);
        z-index: 6;
        max-width: calc(100% - 24px);
        padding: 7px 11px;
        border: 1px solid rgba(105, 189, 247, 0.32);
        border-radius: 9px;
        background: rgba(8, 20, 29, 0.94);
        box-shadow: 0 7px 22px rgba(0, 0, 0, 0.34);
        color: #eaf7ff;
        font-size: 10px;
        font-variant-numeric: tabular-nums;
        pointer-events: none;
        opacity: 0;
        transform: translate(-50%, 5px);
        transition: opacity 0.16s ease, transform 0.16s ease;
        white-space: nowrap;
    }

    .waterly-map-copy-feedback.is-visible {
        opacity: 1;
        transform: translate(-50%, 0);
    }

    /* Wide: the arc takes over and the dock keeps only the bottom right corner */
    @media (min-width: 1200px) {
        /* The footer lives on the right here, so the scale no longer needs to float above it. */
        #main_map_content {
            --wqi-bottom-left-pad: 0px;
        }

        #main_map_content.wqi-variant-auto .wqi-legend-bar {
            display: none;
        }

        #main_map_content.wqi-variant-auto .wqi-legend-arc {
            display: block;
        }

        #main_map_content.wqi-variant-auto .wqi-map-legend {
            position: absolute;
            left: 14px;
            top: 50%;
            width: 212px;
            flex: 0 0 auto;
            transform: translateY(-50%);
        }

        #main_map_content.wqi-variant-auto .wqi-legend-empty {
            left: 22px;
            top: 50%;
            max-width: 190px;
            transform: translateY(-50%);
        }
    }

/************************************** SDK controls restyled *************************************/
    #main_map_content .maplibregl-ctrl-group {
        border: 1px solid rgba(143, 184, 220, 0.2);
        border-radius: 10px;
        background: linear-gradient(135deg, rgba(31, 43, 52, 0.92), rgba(13, 19, 24, 0.94));
        box-shadow: 0 7px 22px rgba(0, 0, 0, 0.32);
    }

    #main_map_content .maplibregl-ctrl-group button {
        width: 34px;
        height: 34px;
        background-color: transparent;
    }

    #main_map_content .maplibregl-ctrl-group button + button {
        border-top: 1px solid rgba(143, 184, 220, 0.14);
    }

    /* Zoom stays one SDK control, but each button has the same surface and
       10 px spacing as locate and the 2D/3D toggle below it. */
    #main_map_content .maplibregl-ctrl-bottom-right .maplibregl-ctrl-group:has(.maplibregl-ctrl-zoom-in) {
        display: flex;
        flex-direction: column;
        gap: 10px;
        border: 0;
        background: none;
        box-shadow: none;
    }

    #main_map_content .maplibregl-ctrl-group:has(.maplibregl-ctrl-zoom-in) button {
        width: 36px;
        height: 36px;
        border: 1px solid rgba(143, 184, 220, 0.2);
        border-radius: 10px;
        background: linear-gradient(135deg, rgba(31, 43, 52, 0.92), rgba(13, 19, 24, 0.94));
        box-shadow: 0 7px 22px rgba(0, 0, 0, 0.32);
    }

    #main_map_content .maplibregl-ctrl-group:has(.maplibregl-ctrl-zoom-in) button:hover {
        background: linear-gradient(rgba(105, 189, 247, 0.14), rgba(105, 189, 247, 0.14)),
            linear-gradient(135deg, rgba(31, 43, 52, 0.92), rgba(13, 19, 24, 0.94));
    }

    #main_map_content .maplibregl-ctrl-group button:hover {
        background-color: rgba(105, 189, 247, 0.14);
    }

    /* The SDK ships dark glyphs, which disappear on the dark panels */
    #main_map_content .maplibregl-ctrl-group button .maplibregl-ctrl-icon {
        filter: invert(84%) sepia(6%) saturate(360%) hue-rotate(163deg) brightness(95%);
    }

    #main_map_content .maplibregl-ctrl-scale {
        padding: 3px 8px;
        border: 1px solid rgba(143, 184, 220, 0.2);
        border-radius: 8px;
        background: linear-gradient(135deg, rgba(31, 43, 52, 0.92), rgba(13, 19, 24, 0.94));
        color: #b6c4ce;
        font-family: var(--wl-font-sans, "Geist", "Segoe UI", Arial, sans-serif);
        font-size: 9px;
        font-weight: 600;
    }

/********************************************* Mobile *********************************************/
    @media (max-width: 639.98px) {
        /* The readout and the wordmark are the first things to go when space runs out */
        #main_map_content .waterly-ctrl-cursor,
        #main_map_content .waterly-ctrl-brand span {
            display: none;
        }

        #main_map_content.wqi-variant-rail .waterly-ctrl-legend {
            left: 6px;
            width: 124px;
            padding: 9px 8px;
            transform: translateY(-38%);
        }

        #main_map_content.wqi-variant-rail .wqi-legend-body {
            grid-template-columns: 25px 16px 1fr;
            gap: 7px;
            height: 194px;
            padding-top: 12px;
        }

        #main_map_content.wqi-variant-rail .wqi-legend-axis,
        #main_map_content.wqi-variant-rail .wqi-legend-track {
            height: 176px;
        }

        #main_map_content.wqi-variant-rail .wqi-legend-stat {
            min-width: 41px;
            padding: 5px;
        }

        #main_map_content.wqi-variant-rail .wqi-legend-stat strong {
            font-size: 12px;
        }

        #main_map_content .map-layer-switcher {
            left: 0;
            top: calc(100% + 6px);
        }
    }

/************************************** Unified map navigation ************************************/
    /* Notifications are temporarily disabled. Their template and application logic stay in the
       codebase, but the legacy node must remain hidden even if another layout moves it. */
    .navbar-nav-notification {
        display: none !important;
    }

    /* The old navbar controls remain in DOM as action delegates, but they no
       longer draw a second visual layer above the map. */
    .navbar-website .logo-text-navbar,
    .navbar-website .navbar-nav-theme,
    .navbar-website .navbar-nav-language,
    .navbar-website .navbar-nav-user,
    .navbar-website .navbar-nav-notification {
        display: none !important;
    }

    body.no-session .navbar-website {
        height: 0;
        padding: 0;
        pointer-events: none;
    }

    /* In a signed-in session the transparent, 60 px legacy navbar still sits
       above the map (z-index 1019). Let clicks pass through its empty surface
       to the map-native controls. Real subpage and hardware entries explicitly
       opt back into pointer interaction. */
    body.has-session .navbar-website {
        pointer-events: none;
    }

    body.has-session .navbar-website .navbar-menu-tree,
    body.has-session .navbar-website .navbar-nav-usb,
    body.has-session .navbar-website .navbar-nav-programmer,
    body.has-session .navbar-website .navbar-nav-wireless-bridge {
        pointer-events: auto;
    }

    #main_map_content .waterly-ctrl-brand {
        padding: 0;
        overflow: hidden;
        pointer-events: auto;
    }

    #main_map_content .map-brand-home {
        display: flex;
        height: 38px;
        align-items: center;
        gap: 8px;
        padding: 0 13px 0 9px;
        border: 0;
        background: transparent;
        color: #eaf3f9;
        cursor: pointer;
        font: inherit;
    }

    #main_map_content .map-brand-home img {
        width: 20px;
        height: 20px;
    }

    #main_map_content .map-brand-home span {
        background: linear-gradient(90deg, #2193f3 0%, #104673 100%);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
        font-family: var(--wl-font-sans);
        font-size: 13px;
        font-weight: 750;
        letter-spacing: 0.035em;
        line-height: 1;
    }

    #main_map_content .waterly-ctrl-brand:hover {
        border-color: rgba(93, 221, 211, 0.42);
        background: linear-gradient(135deg, rgba(28, 65, 72, 0.94), rgba(9, 26, 35, 0.96));
        box-shadow: 0 9px 25px rgba(0, 0, 0, 0.38);
    }

    #main_map_content .waterly-ctrl-actions {
        position: relative;
        z-index: 8;
        display: flex;
        overflow: visible;
        align-items: center;
        gap: 3px;
        padding: 4px;
        border-color: rgba(119, 206, 215, 0.25);
        border-radius: 14px;
        background:
            radial-gradient(circle at 82% 0, rgba(54, 213, 201, 0.1), transparent 48%),
            linear-gradient(135deg, rgba(18, 36, 46, 0.94), rgba(7, 17, 25, 0.96));
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.38), inset 0 1px rgba(255, 255, 255, 0.035);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        pointer-events: auto;
        cursor: default;
    }

    #main_map_content .waterly-ctrl-actions .waterly-ctrl-button {
        position: relative;
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
        border: 1px solid transparent;
        border-radius: 11px;
        color: #9fb5c1;
        font-size: 15px;
        transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
    }

    /* Decorative glyphs and flags must not change the pointer target as they animate. */
    #main_map_content .waterly-ctrl-actions .waterly-ctrl-button,
    #main_map_content .waterly-map-native-action > .nav-link > [data-bs-toggle="dropdown"] {
        cursor: pointer;
        -webkit-user-select: none;
        user-select: none;
    }

    #main_map_content .waterly-ctrl-actions .waterly-ctrl-button > *,
    #main_map_content .waterly-map-native-action > .nav-link > [data-bs-toggle="dropdown"] > * {
        pointer-events: none;
    }

    #main_map_content .waterly-ctrl-actions .waterly-ctrl-button:hover,
    #main_map_content .waterly-map-action-wrap.is-open > .waterly-ctrl-button {
        border-color: rgba(90, 226, 213, 0.28);
        background: rgba(64, 207, 194, 0.12);
        box-shadow: inset 0 0 14px rgba(72, 218, 205, 0.06);
        color: #7ce5da;
    }

    #main_map_content .waterly-ctrl-actions .devices-list-selector {
        display: flex !important;
        width: 40px !important;
        height: 40px !important;
        color: #a9c1cc;
        font-size: 15px;
        opacity: 1 !important;
        visibility: visible !important;
    }

    #main_map_content .waterly-ctrl-actions .devices-list-selector:hover {
        color: #7ce5da;
    }

    /* Signed-in, privileged users keep the real service and notification
       controls. Their nodes are moved here, so counters and dropdown logic are
       still driven by the existing application modules. */
    #main_map_content .waterly-ctrl-actions > .waterly-map-native-action {
        display: block;
        position: relative;
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    #main_map_content .waterly-map-native-action > .nav-link {
        width: 40px;
        height: 40px;
        margin: 0;
        padding: 0;
    }

    #main_map_content .waterly-map-native-action > .nav-link > [data-bs-toggle="dropdown"] {
        position: relative;
        display: flex !important;
        width: 40px;
        height: 40px;
        box-sizing: border-box;
        align-items: center;
        justify-content: center;
        border: 1px solid transparent;
        border-radius: 11px;
        background: transparent;
        color: #9fb5c1;
        cursor: pointer;
        font-size: 15px;
        transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
    }

    #main_map_content .waterly-map-native-action > .nav-link > [data-bs-toggle="dropdown"]:hover,
    #main_map_content .waterly-map-native-action.show > .nav-link > [data-bs-toggle="dropdown"],
    #main_map_content .waterly-map-native-action > .nav-link.show > [data-bs-toggle="dropdown"] {
        border-color: rgba(90, 226, 213, 0.28);
        background: rgba(64, 207, 194, 0.12);
        box-shadow: inset 0 0 14px rgba(72, 218, 205, 0.06);
        color: #7ce5da;
    }

    #main_map_content .waterly-map-native-action .badge {
        right: -1px;
        top: -3px;
        min-width: 17px;
        padding: 3px 4px;
        border: 2px solid #10212b;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
        font-size: 7px;
        line-height: 9px;
    }

    #main_map_content .waterly-map-native-action > .nav-link > .dropdown-menu {
        right: 0 !important;
        left: auto !important;
        top: calc(100% + 10px) !important;
        margin: 0;
        transform: none !important;
    }

    #main_map_content .waterly-map-action-wrap {
        position: relative;
    }

	#main_map_content .map-language-current {
		position: absolute;
		right: 2px;
		bottom: 2px;
		display: block;
		width: 17px;
		height: 12px;
		overflow: hidden;
		border: 1px solid rgba(255, 255, 255, 0.45);
		border-radius: 3px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.42);
	}

	#main_map_content .map-language-current img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
    }

    #main_map_content .waterly-map-popover {
        position: absolute;
        right: 0;
        top: calc(100% + 10px);
        display: none;
        width: 174px;
        box-sizing: border-box;
        padding: 7px;
        border: 1px solid rgba(119, 206, 215, 0.2);
        border-radius: 14px;
        background:
            radial-gradient(circle at 100% 0, rgba(65, 210, 198, 0.1), transparent 44%),
            linear-gradient(145deg, rgba(17, 35, 45, 0.98), rgba(5, 14, 21, 0.985));
        box-shadow: 0 18px 44px rgba(0, 0, 0, 0.48);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }

    #main_map_content .waterly-map-action-wrap.is-open .waterly-map-popover {
        display: block;
        animation: waterly-map-popover-in 0.18s ease-out;
    }

    #main_map_content .waterly-map-popover > small {
        display: block;
        padding: 5px 7px 7px;
        color: #63808d;
        font-size: 7px;
        font-weight: 850;
        letter-spacing: 0.14em;
    }

	#main_map_content .map-account-popover {
		width: 218px;
	}

	#main_map_content .map-account-popover > small {
		color: #a8c2ce;
		font-size: 11px;
		line-height: 1.5;
		letter-spacing: 0.06em;
		cursor: default;
	}

	#main_map_content .map-account-identity,
	#main_map_content .map-account-identity * {
		cursor: default;
	}

	#main_map_content .map-account-identity {
		display: flex;
		min-width: 0;
		align-items: center;
		gap: 9px;
		margin: 0 4px 5px;
		padding: 8px 5px 10px;
		border-bottom: 1px solid rgba(119, 206, 215, 0.12);
	}

	#main_map_content .map-account-identity > span {
		display: flex;
		width: 28px;
		height: 28px;
		flex: 0 0 28px;
		align-items: center;
		justify-content: center;
		border-radius: 9px;
		background: rgba(64, 207, 194, 0.12);
		color: #6fd8cd;
		font-size: 11px;
	}

	#main_map_content .map-account-identity > div {
		overflow: hidden;
		min-width: 0;
	}

	#main_map_content .map-account-identity strong,
	#main_map_content .map-account-identity small {
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	#main_map_content .map-account-identity strong {
		color: #e4f3f7;
		font-size: 10px;
		font-weight: 750;
	}

	#main_map_content .map-account-identity small {
		margin-top: 2px;
		color: #6f8996;
		font-size: 8px;
	}

	#main_map_content .map-account-app-version {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 6px 4px 0;
		padding: 9px 7px 3px;
		border-top: 1px solid rgba(119, 206, 215, 0.12);
		cursor: default;
		line-height: 1.2;
	}

	#main_map_content .map-account-app-version > strong {
		font-family: var(--wl-font-mono);
		color: #91a9b4;
		font-size: 10px;
		font-variant-numeric: tabular-nums;
		font-weight: 750;
		letter-spacing: 0;
		white-space: nowrap;
}

    #main_map_content .waterly-map-popover button {
        display: flex;
        width: 100%;
        min-height: 34px;
        box-sizing: border-box;
        align-items: center;
        gap: 9px;
        padding: 7px 9px;
        border: 0;
        border-radius: 9px;
        background: transparent;
        color: #a7bbc5;
        cursor: pointer;
        font-family: var(--wl-font-sans, "Geist", "Segoe UI", Arial, sans-serif);
        font-size: 10px;
        text-align: left;
    }

    #main_map_content .waterly-map-popover button:hover,
    #main_map_content .waterly-map-popover button.is-selected {
        background: rgba(73, 205, 193, 0.11);
        color: #eafcff;
    }

	#main_map_content .map-language-option-flag {
		display: block;
		width: 25px;
		height: 18px;
		flex: 0 0 25px;
		border: 1px solid rgba(255, 255, 255, 0.18);
		border-radius: 4px;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
		object-fit: cover;
	}

    #main_map_content .waterly-map-popover button > i {
        width: 21px;
        color: #6fd8cd;
        font-size: 12px;
        text-align: center;
    }

    @keyframes waterly-map-popover-in {
        from { opacity: 0; transform: translateY(-5px) scale(0.98); }
        to { opacity: 1; transform: translateY(0) scale(1); }
    }

    @media (max-width: 639.98px) {
        #main_map_content .map-brand-home {
            width: 40px;
            height: 40px;
            justify-content: center;
            gap: 0;
            padding: 0;
        }

        #main_map_content .waterly-ctrl-actions {
            gap: 2px;
            padding: 3px;
        }

        #main_map_content .waterly-ctrl-actions .waterly-ctrl-button,
        #main_map_content .waterly-ctrl-actions .devices-list-selector {
            width: 37px !important;
            height: 37px !important;
            flex-basis: 37px;
        }

        #main_map_content .waterly-ctrl-actions > .waterly-map-native-action,
        #main_map_content .waterly-map-native-action > .nav-link,
        #main_map_content .waterly-map-native-action > .nav-link > [data-bs-toggle="dropdown"] {
            width: 37px;
            height: 37px;
            flex-basis: 37px;
        }

        #main_map_content .waterly-map-notification-action .dropdown-menu {
            position: fixed !important;
            right: 8px !important;
            left: 8px !important;
            top: 58px !important;
            width: auto !important;
            max-width: none !important;
        }
    }

/*********************************************** AR mode ********************************************/
    /* Compact icon control — same size language as the SDK 2D/3D pitch button */
    #main_map_content .waterly-ctrl-ar {
        display: block;
        padding: 0;
        overflow: hidden;
    }

    #main_map_content .waterly-ctrl-ar.is-hidden {
        display: none;
    }

    #main_map_content .waterly-ctrl-ar .waterly-ar-mode-button {
        width: 34px;
        height: 34px;
        min-height: 34px;
        padding: 0;
    }

    #main_map_content .waterly-ctrl-ar .waterly-ar-mode-icon {
        display: block;
        width: 20px;
        height: 20px;
        /* Dark source glyph + the same filter MapLibre uses on zoom / locate / 2D-3D */
        color: #333333;
        filter: invert(84%) sepia(6%) saturate(360%) hue-rotate(163deg) brightness(95%);
    }

/********************************************* Pitch 2D/3D ******************************************/
    #main_map_content .waterly-ctrl-pitch {
        display: block;
        padding: 0;
        overflow: hidden;
    }

    #main_map_content .waterly-ctrl-pitch .waterly-pitch-button {
        width: 34px;
        height: 34px;
        min-height: 34px;
        padding: 0;
    }

    #main_map_content .waterly-pitch-label {
        display: block;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.02em;
        line-height: 1;
        color: inherit;
    }

/********************************************* Compass ********************************************/
    /* Compact Google Maps-style needle — same dock footprint as AR; sits above + via order */
    #main_map_content .waterly-ctrl-compass {
        display: block;
        padding: 0;
        /* Avoid clipping a rotating SVG inside a backdrop-filter layer in iOS WebView. */
        overflow: visible;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-radius: 50%;
    }

    #main_map_content .waterly-ctrl-compass.is-hidden {
        display: none;
    }

    #main_map_content .waterly-ctrl-compass .waterly-phone-compass-button {
        position: relative;
        width: 34px;
        height: 34px;
        min-height: 34px;
        padding: 0;
        border-radius: 50%;
    }

    #main_map_content .waterly-compass-rose {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        flex: 0 0 24px;
        transform-origin: 50% 50%;
        /* Heading readings are already smoothed in JS; keep the SVG out of a second animation. */
    }

    #main_map_content .waterly-compass-needle {
        display: block;
        flex: 0 0 24px;
        width: 24px;
        height: 24px;
        overflow: visible;
    }

    #main_map_content .waterly-compass-needle-north {
        fill: #ea4335;
    }

    #main_map_content .waterly-compass-needle-south {
        fill: #e8eaed;
    }

    #main_map_content .waterly-ctrl-compass.is-following {
        border-color: rgba(234, 67, 53, 0.45);
        box-shadow: 0 8px 22px rgba(234, 67, 53, 0.18);
    }

    /* Needs an explicit tap (iOS) — red surface with alternating needle / question mark. */
    #main_map_content .waterly-ctrl-compass.is-permission-required,
    #main_map_content .waterly-ctrl-compass.is-busy {
        border-color: rgba(234, 67, 53, 0.95);
        background: linear-gradient(145deg, #f04438, #c5221f);
        box-shadow: 0 8px 22px rgba(234, 67, 53, 0.35);
        animation: waterly-compass-pulse 1.8s ease-in-out infinite;
    }

    #main_map_content .waterly-ctrl-compass.is-permission-required .waterly-compass-needle-north,
    #main_map_content .waterly-ctrl-compass.is-busy .waterly-compass-needle-north {
        fill: #ffffff;
    }

    #main_map_content .waterly-ctrl-compass.is-permission-required .waterly-compass-needle-south,
    #main_map_content .waterly-ctrl-compass.is-busy .waterly-compass-needle-south {
        fill: rgba(255, 255, 255, 0.72);
    }

    #main_map_content .waterly-phone-compass-button:disabled {
        cursor: default;
        opacity: 0.72;
    }

    #main_map_content .waterly-compass-permission-hint {
        display: none;
        position: absolute;
        inset: 0;
        margin: auto;
        width: 24px;
        height: 24px;
        pointer-events: none;
    }

    #main_map_content .waterly-ctrl-compass.is-permission-required:not(.is-busy) .waterly-compass-rose {
        animation: waterly-compass-permission-needle 2.4s steps(1, end) infinite;
    }

    #main_map_content .waterly-ctrl-compass.is-permission-required:not(.is-busy) .waterly-compass-permission-hint {
        display: block;
        animation: waterly-compass-permission-hint 2.4s steps(1, end) infinite;
    }

    @keyframes waterly-compass-permission-needle {
        0%, 100% { opacity: 1; }
        50% { opacity: 0; }
    }

    @keyframes waterly-compass-permission-hint {
        0%, 100% { opacity: 0; }
        50% { opacity: 1; }
    }

    @keyframes waterly-compass-pulse {
        50% { box-shadow: 0 0 0 6px rgba(234, 67, 53, 0.28); }
    }

    @media (prefers-reduced-motion: reduce) {
        #main_map_content .waterly-ctrl-compass.is-permission-required,
        #main_map_content .waterly-ctrl-compass.is-busy,
        #main_map_content .waterly-ctrl-compass.is-permission-required:not(.is-busy) .waterly-compass-rose,
        #main_map_content .waterly-ctrl-compass.is-permission-required:not(.is-busy) .waterly-compass-permission-hint {
            animation: none;
        }

        #main_map_content .waterly-ctrl-compass.is-permission-required:not(.is-busy) .waterly-compass-rose {
            opacity: 0;
        }
    }

/* A glass instrument card anchored above the focused 3D buoy. */
.waterly-pitch-popup { z-index: 4; }
.waterly-pitch-popup .maplibregl-popup-content,
.waterly-pitch-popup .maptilersdk-popup-content { padding: 0; background: transparent; box-shadow: none; }
.waterly-pitch-popup .maplibregl-popup-tip,
.waterly-pitch-popup .maptilersdk-popup-tip { display: none; }
.waterly-pitch-card {
    --pitch-text: #effbff;
    --pitch-muted: #91adbc;
    --pitch-description: #87a4b5;
    --pitch-surface: rgba(5, 20, 28, .97);
    --pitch-core: #09212e;
    --pitch-track: #ffffff0c;
    --pitch-divider: #ffffff14;
    --pitch-value: var(--pitch-quality);
    --pitch-action: linear-gradient(#142d3a, #091c27);
    position: relative;
    display: grid;
    gap: 17px;
    width: min(420px, calc(100vw - 32px));
    padding: 20px 17px 13px;
    border: 1px solid color-mix(in srgb, var(--pitch-quality) 30%, transparent);
    border-radius: 23px;
    color: var(--pitch-text);
    background: radial-gradient(ellipse at 0% 0%, color-mix(in srgb, var(--pitch-quality) 13%, transparent), transparent 62%), var(--pitch-surface);
    box-shadow: 0 18px 48px #0004, inset 0 1px 0 #ffffff0a;
    backdrop-filter: blur(18px);
    font: inherit;
    text-align: left;
    animation: waterly-pitch-reveal .24s ease-out;
}
.waterly-pitch-card::after { content: ""; position: absolute; top: 100%; left: 50%; width: 1px; height: 60px; background: linear-gradient(var(--pitch-quality), transparent); }
.waterly-pitch-card-heading { display: flex; align-items: center; gap: 10px; }
.waterly-pitch-card-pin { display: grid; place-items: center; flex: 0 0 34px; height: 36px; border: 1px solid color-mix(in srgb, var(--pitch-quality) 40%, transparent); border-radius: 12px; color: var(--pitch-value); background: color-mix(in srgb, var(--pitch-quality) 10%, transparent); font-size: 17px; }
.waterly-pitch-card-identity { flex: 1; min-width: 0; display: grid; gap: 3px; }
.waterly-pitch-card-name { font-size: 13px; font-weight: 800; line-height: 1.4; overflow-wrap: anywhere; }
.waterly-pitch-card-description { color: var(--pitch-description); font-size: 11px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.waterly-pitch-card-release { color: #c59aff; font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.waterly-pitch-card-activity { display: grid; gap: 3px; flex: 0 0 auto; max-width: 110px; padding: 7px 10px; border: 1px solid var(--pitch-divider); border-radius: 20px; text-align: center; color: var(--pitch-muted); font-size: 9px; line-height: 1.4; }
.waterly-pitch-card-activity strong { font-size: 9px; letter-spacing: .04em; text-transform: uppercase; }
.waterly-pitch-card-activity.is-live { border-color: #24c4a644; }
.waterly-pitch-card-activity.is-live strong { color: #4edabb; }
.waterly-pitch-card-reading { display: flex; align-items: center; gap: 22px; padding: 6px 12px 0; }
.waterly-pitch-card-instrument { display: grid; justify-items: center; gap: 10px; }
.waterly-pitch-card-gauge { display: block; width: 92px; height: 92px; padding: 6px; border: 1px solid var(--pitch-divider); border-radius: 50%; background: conic-gradient(from var(--pitch-start), var(--pitch-quality) var(--pitch-progress), var(--pitch-track) 0); box-shadow: 0 0 0 7px color-mix(in srgb, var(--pitch-quality) 5%, transparent), 0 0 30px color-mix(in srgb, var(--pitch-quality) 14%, transparent); }
.waterly-pitch-card-gauge > span { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; border-radius: 50%; background: radial-gradient(ellipse at top, color-mix(in srgb, var(--pitch-quality) 12%, var(--pitch-core)), var(--pitch-core)); }
.waterly-pitch-card-gauge b { font-size: 32px; font-weight: 900; line-height: 1.2; color: var(--pitch-value); font-variant-numeric: tabular-nums; font-family: var(--wl-font-mono); }
#main_map_content .waterly-pitch-card-gauge small { font-size: 8px; font-weight: 800; letter-spacing: .14em; color: var(--pitch-muted) !important; }
.waterly-pitch-card-stats { display: flex; gap: 10px; color: var(--pitch-muted); font-size: 11px; font-variant-numeric: tabular-nums; font-family: var(--wl-font-mono); }
.waterly-pitch-card-stats:empty { display: none; }
.waterly-pitch-card-quality { display: grid; gap: 7px; }
.waterly-pitch-card-quality > strong { font-size: 18px; font-weight: 900; color: var(--pitch-value); }
.waterly-pitch-card-hint { font-size: 11px; color: var(--pitch-description); line-height: 1.5; }
.waterly-pitch-card-trend { margin-top: 5px; color: var(--pitch-muted); font-size: 9px; font-weight: 700; text-transform: uppercase; }
.waterly-pitch-card-brand { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; color: var(--pitch-muted); font-size: 9px; letter-spacing: .02em; }
.waterly-pitch-card-brand > span { font-size: 8px; }
.waterly-pitch-card-brand b { color: #53cfee; }
.waterly-pitch-card-actions { display: flex; gap: 7px; }
.waterly-pitch-card-actions button { display: flex; flex: 1; min-width: 0; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 49px; padding: 8px 4px; border: 1px solid #759db32e; border-radius: 12px; background: var(--pitch-action); color: var(--pitch-muted); font: inherit; font-size: 10px; line-height: 1.3; cursor: pointer; }
.waterly-pitch-card-actions button:hover { color: var(--pitch-text); border-color: var(--pitch-quality); }
.waterly-pitch-card-actions button:focus-visible { outline: 2px solid var(--pitch-text); outline-offset: 2px; }
.waterly-pitch-card [hidden] { display: none; }
html[data-theme="light"] .waterly-pitch-card {
    --pitch-text: #183641;
    --pitch-muted: #526b77;
    --pitch-description: #527181;
    --pitch-surface: rgba(250, 253, 255, .97);
    --pitch-core: #f7fcfd;
    --pitch-track: #173d4910;
    --pitch-divider: #173d491a;
    --pitch-value: color-mix(in srgb, var(--pitch-quality) 65%, #102e39);
    --pitch-action: linear-gradient(#f7fcff, #e9f2f6);
    box-shadow: 0 16px 40px #173d4926, inset 0 1px 0 #fff;
}
html[data-theme="light"] .waterly-pitch-card-release { color: #854bc4; }
html[data-theme="light"] .waterly-pitch-card-activity.is-live strong { color: #087c65; }
html[data-theme="light"] .waterly-pitch-card-brand b { color: #087f99; }
@keyframes waterly-pitch-reveal { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { .waterly-pitch-card { animation: none; } }
@media (max-width: 480px) {
    .waterly-pitch-card { width: min(340px, calc(100vw - 32px)); padding: 16px 13px 12px; gap: 16px; }
    .waterly-pitch-card-heading { gap: 8px; }
    .waterly-pitch-card-pin { flex-basis: 28px; height: 32px; }
    .waterly-pitch-card-activity { max-width: 92px; padding: 6px 8px; }
    .waterly-pitch-card-reading { gap: 20px; padding-inline: 7px; }
    .waterly-pitch-card-quality > strong { font-size: 17px; }
}

.waterly-device-filter { position: static; display: flex; flex: 0 0 40px; }
.waterly-device-filter-panel {
 position:absolute; right:0; top:calc(100% + 10px); width:min(420px, calc(100vw - 24px)); box-sizing:border-box;
 padding:18px; border:1px solid #34505e; border-radius:18px;
 background:#0d202b; color:#e8f3f8; box-shadow:0 12px 40px #0005;
 max-height: min(620px, 75dvh); overflow:auto; font-size:13px;
}
.waterly-device-filter-panel[hidden] {display:none;}
.waterly-filter-header {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;}
.waterly-filter-header > strong {display:flex;align-items:center;gap:8px;font-size:16px;}
.waterly-device-filter-panel fieldset {border:0;padding:0;margin:0 0 14px;display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.waterly-device-filter-panel legend {font-size:11px;font-weight:700;float:none;width:auto;margin-bottom:8px;opacity:.75;}
.waterly-device-filter-panel label {display:flex;align-items:center;gap:7px;margin:0;padding:8px;border-radius:8px;background:#ffffff08;cursor:pointer;}
.waterly-device-filter-panel label:has(:checked) {background:#22bfa324;box-shadow:inset 0 0 0 1px #22bfa3;}
.waterly-device-filter-panel label:has(:disabled) {opacity:.5;cursor:not-allowed;}
.waterly-device-filter-panel input {accent-color:#14b89f;}
.waterly-device-filter-panel small {display:block;line-height:1.5;opacity:.7;}
.waterly-device-filter-panel output {display:flex;align-items:center;gap:6px;margin:0;text-align:right;font-size:11px;font-weight:700;white-space:nowrap;}
.waterly-device-filter-panel .waterly-filter-reset {width:100%;border:1px solid #22bfa370;border-radius:10px;background:#22bfa31a;color:inherit;padding:9px;margin-bottom:14px;cursor:pointer;}
.waterly-device-filter .waterly-ctrl-button.is-active {color:#16c8ac;box-shadow:inset 0 0 0 2px #16c8ac;}
html[data-theme="light"] .waterly-device-filter-panel {background:#f8fcfe;color:#193b4b;border-color:#cbdde5;}
.waterly-device-filter-panel label:hover:not(:has(:disabled)), .waterly-filter-reset:hover {filter:brightness(1.15);}

.waterly-pitch-card-name[role="button"] { cursor: pointer; }
.waterly-pitch-card-name:focus-visible { outline: 2px solid var(--pitch-value); outline-offset: 3px; }
.waterly-pitch-card-actions button[aria-pressed="true"] { color: var(--pitch-value); }
.waterly-pitch-card-actions button:disabled { opacity: .6; cursor: wait; }

/* Waterly typography roles. */
.waterly-filter-header > strong, .waterly-pitch-card-heading strong { font-family: var(--wl-font-display); font-weight: 600; }


/* features/navigation/navbar-footer.css */
/**************************************************************************************************
	@author         waterly.eu
	@contributors   Rafał Złotorzyński
	@module         CSS
	@file           zz_navbar_footer.css
	@description    Dolna nawigacja telefonu (Mapa / Punkty / Więcej) razem z arkuszem "Więcej".

	                Widoczna wyłącznie na wąskich ekranach - to ten sam próg (767 px), na którym
	                panel punktu pomiarowego zamienia się w arkusz. Powyżej niego wraca menu
	                mapy w prawym górnym rogu.

	                Odstępy od paska home biorą się ze zmiennych z zzz_safe_area.css (domyślnie 0px).
**************************************************************************************************/

/****************************************** Zmienne wspólne ***************************************/
	:root {
		/* Wysokość samego paska, bez strefy bezpiecznej pod nim */
		--waterly-footer-height: 58px;
		/*
			Ile miejsca dolny pasek zabiera pozostałym warstwom. Poza telefonem paska nie ma,
			więc 0px - dzięki temu reguły w zzz_safe_area.css nie potrzebują własnych breakpointów.
		*/
		--waterly-footer-offset: 0px;
	}

	@media (max-width: 767px) {
		:root {
			--waterly-footer-offset: var(--waterly-footer-height);
		}
	}

/***************************************** Pasek nawigacji ****************************************/
	.waterly-navbar-footer,
	.waterly-more-menu {
		display: none;
	}

	@media (max-width: 767px) {
		.waterly-navbar-footer {
			position: fixed;
			z-index: 1030;
			right: 0;
			bottom: 0;
			left: 0;
			display: flex;
			height: calc(var(--waterly-footer-height) + var(--safe-bottom, 0px));
			padding-bottom: var(--safe-bottom, 0px);
			padding-left: var(--safe-left, 0px);
			padding-right: var(--safe-right, 0px);
			border-top: 1px solid rgba(143, 184, 220, 0.16);
			background: linear-gradient(180deg, rgba(12, 24, 33, 0.94), rgba(6, 14, 21, 0.97));
			box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.38);
			backdrop-filter: blur(14px) saturate(1.1);
			-webkit-backdrop-filter: blur(14px) saturate(1.1);
		}

		/*
			Menu mapy w prawym górnym rogu dubluje teraz dolny pasek - jego funkcje przeniosły się
			do zakładek i do arkusza "Więcej". Odstępy dolnych warstw mapy o wysokość paska
			ustawia zzz_safe_area.css przez --waterly-footer-offset.
		*/
		#main_map_content .waterly-ctrl-actions {
			display: none !important;
		}
	}

	.waterly-navbar-footer-item {
		display: flex;
		flex: 1 1 0;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		padding: 0;
		border: 0;
		background: transparent;
		color: #8ea3b1;
		font-family: var(--wl-font-sans, "Geist", "Segoe UI", Arial, sans-serif);
		font-size: 11px;
		font-weight: 600;
		transition: color 0.16s ease;
	}

	.waterly-navbar-footer-item i {
		font-size: 17px;
	}

	.waterly-navbar-footer-item.is-active {
		color: #64d9f5;
	}

	.waterly-navbar-footer-item:active {
		color: #ffffff;
	}

	.waterly-navbar-footer-back {
		position: relative;
		color: #64d9f5;
		background: transparent;
	}

	.waterly-navbar-footer-back::before {
		position: absolute;
		top: 12px;
		bottom: 12px;
		left: 0;
		width: 1px;
		background: rgba(143, 184, 220, 0.18);
		content: "";
	}

	.waterly-navbar-footer-back i {
		font-size: 17px;
	}

	.waterly-navbar-footer-back:active {
		color: #ffffff;
		background: transparent;
	}

	@media (max-width: 767px) {
		/* The footer action replaces small corner close buttons on phone-sized windows. */
		.marker-wqi-guide-close,
		.waterly-chart-lab-v2 .wcl2-corner-close,
		.waterly-chart-lab-close,
		.laboratory-analysis-window-close,
		.laboratory-export-close,
		.waterly-more-menu-close,
		.select-tile-contener .marker-main-contener-control .close-tiles-contener,
		.tiles-list-contener .close-tiles-list-contener {
			display: none !important;
		}
	}

/****************************************** Arkusz "Więcej" ***************************************/
	@media (max-width: 767px) {
		.waterly-more-menu {
			position: fixed;
			z-index: 1029;
			inset: 0;
			display: block;
			visibility: hidden;
			opacity: 0;
			transition: opacity 0.2s ease, visibility 0.2s ease;
		}

		.waterly-more-menu.is-open {
			visibility: visible;
			opacity: 1;
		}

		html:has(.waterly-more-menu.is-open),
		body:has(.waterly-more-menu.is-open) {
			overflow: hidden;
			overscroll-behavior: none;
		}
	}

	.waterly-more-menu-backdrop {
		position: absolute;
		inset: 0;
		background: rgba(3, 9, 14, 0.55);
		backdrop-filter: blur(3px);
		-webkit-backdrop-filter: blur(3px);
		touch-action: none;
	}

	.waterly-more-menu-sheet {
		position: absolute;
		right: max(6px, var(--safe-right, 0px));
		bottom: calc(var(--waterly-footer-height) + var(--safe-bottom, 0px) + 6px);
		left: max(6px, var(--safe-left, 0px));
		max-height: calc(100dvh - var(--waterly-footer-height) - var(--safe-top, 0px) - var(--safe-bottom, 0px) - 24px);
		padding: 8px 14px 16px;
		overflow-y: auto;
		border: 1px solid rgba(101, 189, 218, 0.2);
		border-radius: 22px;
		background:
			radial-gradient(circle at 50% 0, rgba(56, 189, 248, 0.1), transparent 30%),
			rgba(5, 14, 22, 0.97);
		box-shadow: 0 -24px 58px rgba(0, 0, 0, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.07);
		color: #d7e6ef;
		font-family: var(--wl-font-sans, "Geist", "Segoe UI", Arial, sans-serif);
		overscroll-behavior: contain;
		touch-action: pan-y;
		-webkit-overflow-scrolling: touch;
		transform: translateY(14px);
		transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.waterly-more-menu.is-open .waterly-more-menu-sheet {
		transform: translateY(0);
	}

	.waterly-more-menu-grabber {
		width: 42px;
		height: 4px;
		margin: 0 auto 10px;
		border-radius: 999px;
		background: rgba(167, 211, 226, 0.34);
	}

	.waterly-more-menu-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 12px;
	}

	.waterly-more-menu-header strong {
		color: #eaf7ff;
		font-size: 15px;
		font-weight: 800;
	}

	.waterly-more-menu-close {
		display: flex;
		width: 32px;
		height: 32px;
		align-items: center;
		justify-content: center;
		border: 1px solid rgba(143, 184, 220, 0.2);
		border-radius: 11px;
		background: rgba(20, 36, 47, 0.9);
		color: #9fb5c1;
		font-size: 14px;
	}

	.waterly-more-menu-section {
		margin-bottom: 14px;
	}

	.waterly-more-menu-section[hidden] {
		display: none;
	}

	.waterly-more-menu-section h6 {
		display: flex;
		align-items: center;
		gap: 8px;
		margin: 0 0 8px;
		color: #7f97a6;
		font-size: 10px;
		font-weight: 800;
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}

	.waterly-more-menu-chips {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}

	.waterly-more-menu-language-picker {
		position: relative;
	}

	.waterly-more-menu-language-select {
		display: block;
		width: 100%;
		min-height: 48px;
		padding: 10px 42px 10px 14px;
		/* Override the legacy global select reset, which removes every border. */
		border: 1px solid rgba(143, 184, 220, 0.18) !important;
		border-radius: 13px !important;
		outline: none;
		appearance: none;
		-webkit-appearance: none;
		background: rgba(16, 31, 41, 0.86);
		color: #eaf7ff;
		font-family: inherit;
		font-size: 14px;
		font-weight: 700;
		text-align: left !important;
	}

	.waterly-more-menu-language-select:focus {
		border-color: rgba(90, 226, 213, 0.55) !important;
		box-shadow: 0 0 0 3px rgba(64, 207, 194, 0.12);
	}

	/* Native select controls can inherit a grey system surface in dark mode. */
	html:not([data-theme="light"]) .waterly-more-menu-language-select {
		background-color: #101f29 !important;
		background-image: none !important;
		color: #d7e6ef !important;
		color-scheme: dark;
	}

	html:not([data-theme="light"]) .waterly-more-menu-language-select option {
		background-color: #101f29;
		color: #d7e6ef;
	}

	.waterly-more-menu-language-picker > i {
		position: absolute;
		top: 50%;
		right: 16px;
		z-index: 1;
		color: #7ce5da;
		font-size: 11px;
		pointer-events: none;
		transform: translateY(-50%);
	}

	.waterly-more-menu-chip {
		display: flex;
		min-height: 44px;
		flex: 1 1 calc(50% - 8px);
		align-items: center;
		justify-content: center;
		gap: 7px;
		padding: 8px 10px;
		border: 1px solid rgba(143, 184, 220, 0.18);
		border-radius: 13px;
		background: rgba(16, 31, 41, 0.86);
		color: #c2d4df;
		font-size: 12px;
		font-weight: 600;
		cursor: pointer;
		transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
	}

	/* Wybór na całą szerokość - tryb automatyczny stoi nad parą jasny/ciemny */
	.waterly-more-menu-chip.is-wide {
		flex: 1 1 100%;
	}

	.waterly-more-menu-chip b {
		color: #eaf7ff;
		font-size: 12px;
		font-weight: 800;
	}

	.waterly-more-menu-chip.is-selected {
		border-color: rgba(90, 226, 213, 0.42);
		background: rgba(64, 207, 194, 0.14);
		color: #7ce5da;
	}

	.waterly-more-menu-chip.is-selected b {
		color: #7ce5da;
	}

	.waterly-more-menu-rows {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	.waterly-more-menu-account {
		display: flex;
		min-width: 0;
		align-items: center;
		gap: 11px;
		margin-bottom: 8px;
		padding: 10px 12px;
		border: 1px solid rgba(90, 226, 213, 0.16);
		border-radius: 13px;
		background: rgba(64, 207, 194, 0.07);
	}

	.waterly-more-menu-account > span {
		display: flex;
		width: 34px;
		height: 34px;
		flex: 0 0 34px;
		align-items: center;
		justify-content: center;
		border-radius: 11px;
		background: rgba(64, 207, 194, 0.13);
		color: #7ce5da;
		font-size: 13px;
	}

	.waterly-more-menu-account > div {
		overflow: hidden;
		min-width: 0;
	}

	.waterly-more-menu-account strong,
	.waterly-more-menu-account small {
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.waterly-more-menu-account strong {
		color: #eaf7ff;
		font-size: 13px;
		font-weight: 750;
	}

	.waterly-more-menu-account small {
		margin-top: 2px;
		color: #7891a0;
		font-size: 10px;
	}

	.waterly-more-menu-row {
		display: flex;
		min-height: 48px;
		align-items: center;
		gap: 12px;
		padding: 10px 14px;
		border: 1px solid rgba(143, 184, 220, 0.18);
		border-radius: 13px;
		background: rgba(16, 31, 41, 0.86);
		color: #d7e6ef;
		font-size: 13px;
		font-weight: 600;
		text-align: left;
		cursor: pointer;
		transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
	}

	.waterly-more-menu-row i {
		width: 18px;
		color: #69bdf7;
		text-align: center;
		transition: color 0.18s ease, filter 0.18s ease, transform 0.18s ease;
	}

	.waterly-more-menu-row.is-atlas {
		width: 100%;
		border-color: rgba(70, 216, 199, 0.28);
		background: linear-gradient(135deg, rgba(29, 105, 104, 0.24), rgba(16, 31, 41, 0.88));
	}

	.waterly-more-menu-row.is-atlas > span {
		flex: 1 1 auto;
		font-weight: 700;
	}

	.waterly-more-menu-row.is-atlas > i:last-child {
		width: auto;
		margin-left: auto;
		color: #4e8b91;
		font-size: 9px;
	}

	@media (hover: hover) {
		.waterly-more-menu-row:hover,
		.waterly-more-menu-chip:hover {
			border-color: rgba(90, 226, 213, 0.38);
			background: rgba(64, 207, 194, 0.11);
			box-shadow: 0 9px 22px -15px rgba(54, 213, 201, 0.55), inset 0 1px rgba(255, 255, 255, 0.035);
			color: #eaffff;
			transform: translateY(-1px);
		}

		.waterly-more-menu-row:hover i {
			color: #7ce5da;
			filter: drop-shadow(0 0 5px rgba(90, 226, 213, 0.28));
			transform: translateX(2px);
		}

		.waterly-more-menu-language-select:hover {
			border-color: rgba(90, 226, 213, 0.34) !important;
			box-shadow: 0 8px 20px -16px rgba(54, 213, 201, 0.55);
		}
	}

	.waterly-more-menu-row:focus-visible,
	.waterly-more-menu-chip:focus-visible {
		border-color: rgba(90, 226, 213, 0.48);
		outline: 0;
		box-shadow: 0 0 0 3px rgba(64, 207, 194, 0.11);
	}

	.waterly-more-menu-row:active,
	.waterly-more-menu-chip:active {
		transform: translateY(0) scale(0.99);
	}

	.waterly-more-menu-version {
		display: flex;
		padding-top: 4px;
		color: #64798a;
		font-size: 10px;
		text-align: center;
	}

/******************************************** Motyw jasny *****************************************/
	html[data-theme="light"] .waterly-navbar-footer {
		border-top-color: rgba(20, 60, 90, 0.12);
		background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(240, 246, 250, 0.98));
		box-shadow: 0 -12px 30px rgba(15, 42, 66, 0.12);
	}

	html[data-theme="light"] .waterly-navbar-footer-item {
		color: #5a6b78;
	}

	html[data-theme="light"] .waterly-navbar-footer-item.is-active {
		color: #1183c9;
	}

	html[data-theme="light"] .waterly-navbar-footer-back {
		color: #1183c9;
		background: transparent;
	}

	html[data-theme="light"] .waterly-navbar-footer-back::before {
		background: rgba(20, 60, 90, 0.12);
	}

	html[data-theme="light"] .waterly-navbar-footer-back i {
		border: 0;
		background: transparent;
		color: inherit;
	}

	html[data-theme="light"] .waterly-navbar-footer-back:active {
		color: #0f527b;
		background: transparent;
	}

	html[data-theme="light"] .waterly-more-menu-sheet {
		border-color: rgba(20, 60, 90, 0.14);
		background: #ffffff;
		box-shadow: 0 -24px 58px rgba(15, 42, 66, 0.22);
		color: #223442;
	}

	html[data-theme="light"] .waterly-more-menu-header strong {
		color: #12222e;
	}

	html[data-theme="light"] .waterly-more-menu-chip,
	html[data-theme="light"] .waterly-more-menu-language-select,
	html[data-theme="light"] .waterly-more-menu-row,
	html[data-theme="light"] .waterly-more-menu-close {
		border-color: rgba(20, 60, 90, 0.14);
		background: #f3f7fa;
		color: #223442;
	}

	html[data-theme="light"] .waterly-more-menu-account {
		border-color: rgba(17, 131, 201, 0.14);
		background: rgba(17, 131, 201, 0.06);
	}

	html[data-theme="light"] .waterly-more-menu-row.is-atlas {
		border-color: rgba(20, 122, 150, 0.2);
		background: linear-gradient(135deg, rgba(49, 190, 176, 0.1), #f3f7fa);
	}

	html[data-theme="light"] .waterly-more-menu-account > span {
		background: rgba(17, 131, 201, 0.1);
		color: #0f6ea8;
	}

	html[data-theme="light"] .waterly-more-menu-account strong {
		color: #12222e;
	}

	@media (hover: hover) {
		html[data-theme="light"] .waterly-more-menu-row:hover,
		html[data-theme="light"] .waterly-more-menu-chip:hover {
			border-color: rgba(17, 131, 201, 0.32);
			background: rgba(17, 131, 201, 0.1);
			box-shadow: 0 9px 22px -16px rgba(17, 131, 201, 0.42);
			color: #0f527b;
		}

		html[data-theme="light"] .waterly-more-menu-row:hover i {
			color: #1183c9;
			filter: drop-shadow(0 0 4px rgba(17, 131, 201, 0.18));
		}
	}

	html[data-theme="light"] .waterly-more-menu-language-select:focus {
		border-color: rgba(17, 131, 201, 0.45) !important;
		box-shadow: 0 0 0 3px rgba(17, 131, 201, 0.1);
	}

	html[data-theme="light"] .waterly-more-menu-language-select {
		border-color: rgba(20, 60, 90, 0.14) !important;
		background-color: #f3f7fa !important;
		color: #223442 !important;
		color-scheme: light;
	}

	html[data-theme="light"] .waterly-more-menu-language-picker > i {
		color: #0f6ea8;
	}

	html[data-theme="light"] .waterly-more-menu-chip b {
		color: #12222e;
	}

	html[data-theme="light"] .waterly-more-menu-chip.is-selected {
		border-color: rgba(17, 131, 201, 0.4);
		background: rgba(17, 131, 201, 0.12);
		color: #0f6ea8;
	}

	html[data-theme="light"] .waterly-more-menu-chip.is-selected b {
		color: #0f6ea8;
	}


/* features/notifications/notifications.css */
/********************************************************************************************************************
******************************************* MANAGER   -   WWW   APPLICATION *****************************************
 @license       https://etia.pl
 @copyright     © Copyright 2017 Rafał Złotorzyński (r.zlotorzynski@etia.pl)
 @author        Rafał Złotorzyński (r.zlotorzynski@etia.pl)
 @file          notification_events.css
 @fileoverview  Style notyfikacji i systemu zdarzeń
********************************************************************************************************************/

#notify_events .dropdown-toggle {
    /* visibility: hidden; */
    color: white;
}

#notify_events .bg-danger {
    display: none;
}

.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] {
    /* right: -50px; */
    width: 500px;
    /* margin: 15px 10px 0px -12px; */
    background: #285487f7;
}

/* AKCJE W HEADER */
.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] .action-notification {
    position: relative;
    display: block;
    float: right;
}

.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] .action-notification i.bi {
    margin-left: 5px;
}

.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] .action-notification .bi-trash {
    color: #F00;
}

.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] .notifications-footer {
    padding: 0px 9px;
    color: #666;
    font-size: 13px;
    border-top: solid #bfbfbf 1px;
    /* border-bottom: solid #bfbfbf 1px; */
    line-height: 30px;
    height: 30px;
    text-align: center;
}

.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] .notifications-footer i {
    margin-right: 5px;
}

.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] .notifications-body .no-notification {
    text-align: center;
    vertical-align: middle;
    line-height: 53px;
}



/* SKALOWANIE */
/* @media ( max-width: 767px ) {
    .dropdown-menu.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] {
        width: 100% !important;
        position: fixed !important;
        left: "" !important;
        bottom: 0;
        top: 80px!important;
        margin: 0!important;
        transform: "" !important;
    }

    .dropdown-menu.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] .dropdown-header {
        position: fixed;
        z-index: 100;
        width: 100%;
    }

    .dropdown-menu.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] .notifications-body {
        height: 100%;
        width: 100%;
        position: fixed!important;
        bottom: 0px;
        margin-bottom: 0px;
        top: 132px!important;
        background: white;
        max-height: calc(100% - 162px);
    }

    .dropdown-menu.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] .notifications-footer {
        position: fixed;
        bottom: 0px;
        width: 100%;
    }
}
 */















/* 
.border-bottom-1 {
    border-bottom-width: 1px!important;
    border-bottom-style: solid!important;
    border-bottom-color: #e5e5e5!important;
} */

.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] .notifications-body {
    list-style: none;
    padding: 0;
    overflow: auto;
    max-height: 400px;
}

/* .max-h-300 {
    max-height: 300px!important;
} */

.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] .notifications-body>li:first-child {
    border-top: none;
}
.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] .notifications-body>li {
    border-top: 1px solid #e2e2e2;
}


.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] .notifications-body>li.unread>.notification {
    background-color: #fff;
}

.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] .notifications-body>li>.notification:first-child {
    border: none;
}

.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] .notifications-body>li:not(.unread)>.notification {
    display: block;
    position: relative;
    background-color: #eee;
    padding: 6px;
    min-height: 63px;
    color: #333;
}

.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] .notifications-body>li>.notification .notification-image {
    float: left;
    width: 50px;
    height: 100%;
    text-align: center;
    position: absolute;
    display: inline-block;
    top: 0;
}

.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] .notifications-body>li>.notification .notification-image i {
    font-size: 23px;
    position: relative;
    vertical-align: middle;
    line-height: 63px;
}

.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] .notifications-body>li>.notification .notification-msg {
    margin-left: 56px;

}

.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] .notifications-body>li>.notification .notification-msg .body-text {
    bottom: 4px;
    position: absolute;
    display: inline-block;
    width: 100%;
    left: 0;
    padding-left: 61px;
    padding-right: 5px;
    font-size: 12px;
    font-style: italic;
}

.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] .notifications-body>li>.notification .notification-msg .date_event {
    display: inline-block;
}

.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] .notifications-body>li>.notification .notification-msg .date_events_time {
    display: inline-block;
}

.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] .notifications-body>li>.notification .notification-msg .date_event_from {
    margin-left: 7px;
}

.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] .notifications-body>li>.notification .notification-msg .body-text i {
    margin-right: 5px;
    color: #444;
}

.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] .notifications-body>li>.notification .notification-msg .notofication-title {
    display: inline-block;
    position: relative;
    float: right;
}

.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] .notifications-body>li>.notification .notification-sub-heading {
    margin: 0;
    font-size: 12px;
    padding-bottom: 20px;
    font-weight: 600;
}


.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] .notifications-body>li>.notification:first-child {
    border: none;
}

.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] .notifications-body>li>.notification {
    display: block;
    position: relative;
    background-color: #fff;
    padding: 6px;
    min-height: 65px;
    color: #333;
}




/* KLASY - TYPY - EVENTÓW ( walory kolorystyczne :) ) */
.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] .notifications-body>li>.notification .notification-image span {
    display: inline-block;
    position: absolute;
    height: 49px;
    width: 49px;
    left: 0px;
    top: 7px;
}

.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] .notifications-body>li>.notification .notification-image i {
    color: white;
}

/* SYSTEMOWY */
.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] .notifications-body>li>.notification.system .notification-image span {
    background: rgba(75, 75, 75, 0.8);
}

/* INFORMACYJNY */
.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] .notifications-body>li>.notification.info .notification-image span {
    background: rgba(33, 147, 243, 0.8);
}

/* SUKCES */
.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] .notifications-body>li>.notification.success .notification-image span {
    background: rgba(97, 212, 31, 0.92);
}

/* BŁĄD */
.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] .notifications-body>li>.notification.error .notification-image span {
    background: #dc3545;
}

/* ALARM */
.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] .notifications-body>li>.notification.alarm .notification-image span {
    background: #ff8a00;
}

/* OSTRZEŻENIE */
.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] .notifications-body>li>.notification.warning .notification-image span {
    background: rgb(255 203 0)
}

/* WIADOMOŚĆ OD ADMINISTRATORA */
.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] .notifications-body>li>.notification.admin .notification-image span {
    background: #7d00ffbd;
}

/* NIEZDEFINIOWANY */
.dropdown-menu[aria-labelledby="show-notification-list-dropdown"] .notifications-body>li>.notification.default .notification-image span {
    background: rgba(75, 75, 75, 0.8);
}

/* features/notifications/alert-center.css */
/* Account alarm centre: the toolbar and phone footer share one view. */
.waterly-alert-trigger { --alert-icon:#c51e3a; position:relative; }
.waterly-alert-trigger-icon { position:relative; display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; }
.waterly-alert-trigger .waterly-alert-badge {
    position:absolute; display:inline-flex; align-items:center; justify-content:center; top:-2px; right:-2px;
    box-sizing:border-box; min-width:22px; height:22px; padding:0 4px;
    border:2px solid var(--alert-badge-border,#fff); border-radius:20px; background:#b91835; color:#fff;
    font:800 11px/18px var(--wl-font-sans, "Geist", "Segoe UI", Arial, sans-serif); font-variant-numeric:tabular-nums; text-align:center; white-space:nowrap;
    box-shadow:0 2px 5px #70102030; pointer-events:none;
}
.waterly-alert-trigger .waterly-alert-badge[hidden] { display:none; }
.waterly-alert-trigger-icon .waterly-alert-badge { top:-7px; right:-12px; }
html[data-theme="dark"] .waterly-alert-trigger { --alert-icon:#ff758b; --alert-badge-border:#172732; }
.waterly-alert-trigger[data-alert-stale="true"] .waterly-alert-badge { background:#526674; box-shadow:none; }
.waterly-alert-trigger:is([data-alert-level="alarm"],[data-alert-level="warning"]):not([data-alert-stale="true"]) .bi-bell {
    display:inline-block; color:var(--alert-icon); transform-origin:50% 20%;
    animation:waterly-alert-bell-ring 3.2s ease-in-out infinite;
}
/* Ring briefly, then rest. The counter stays still so its number remains readable. */
@keyframes waterly-alert-bell-ring {
    0%, 28%, 100% { transform:rotate(0); }
    4% { transform:rotate(-18deg); }
    8% { transform:rotate(16deg); }
    12% { transform:rotate(-12deg); }
    16% { transform:rotate(9deg); }
    20% { transform:rotate(-5deg); }
    24% { transform:rotate(3deg); }
}
@media(prefers-reduced-motion:reduce) { .waterly-alert-trigger .bi-bell { animation:none!important; } }
.waterly-alert-center, .waterly-alert-preview {
    --wac-bg:#f8fbfd; --wac-card:#fff; --wac-text:#243e50; --wac-muted:#617888; --wac-line:#dce6ed;
    --wac-accent:#087f95; --wac-soft:#eaf5f8; --wac-alarm:#bd2441; --wac-alarm-soft:#fff0f2;
    --wac-warning:#95600d; --wac-warning-soft:#fff6e7; --wac-green:#237858;
    width:min(760px, calc(100vw - 48px)); max-width:none; max-height:calc(100dvh - 48px); margin:auto; padding:0;
    border:1px solid var(--wac-line); border-radius:24px; background:var(--wac-bg); color:var(--wac-text);
    box-shadow:0 32px 90px #061c3d40; overflow:hidden; font-family:var(--wl-font-sans, "Geist", "Segoe UI", Arial, sans-serif);
}
html[data-theme="dark"] .waterly-alert-center, html[data-theme="dark"] .waterly-alert-preview { --wac-bg:#10212d; --wac-card:#172c39; --wac-text:#e7f3f7; --wac-muted:#a2b8c5; --wac-line:#2a414f; --wac-accent:#71ded8; --wac-soft:#1b353d; --wac-alarm:#ff8296; --wac-alarm-soft:#3c2734; --wac-warning:#ffcc80; --wac-warning-soft:#3b3529; --wac-green:#7bdcb0; }
.waterly-alert-center::backdrop { background:#07192365; backdrop-filter:blur(5px); }
.waterly-alert-center [hidden], .waterly-alert-preview [hidden] { display:none!important; }
.wac-window { display:flex; flex-direction:column; max-height:calc(100dvh - 50px); }
.wac-header { display:flex; align-items:center; gap:14px; padding:24px 26px 18px; }
.wac-symbol { display:grid; place-items:center; width:48px; height:48px; border:1px solid var(--wac-line); border-radius:17px; background:var(--wac-card); color:var(--wac-accent); font-size:23px; }
.wac-header>div { flex:1; min-width:0; }
.wac-header h2 { margin:0 0 4px; font-size:23px; font-weight:750; letter-spacing:-.6px; }
.wac-header p { margin:0; color:var(--wac-muted); font-size:12px; line-height:1.5; }
.wac-icon-button { display:grid; place-items:center; flex-shrink:0; width:36px; height:36px; border:1px solid var(--wac-line); border-radius:12px; color:var(--wac-muted); background:var(--wac-card); }
.wac-summary { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; padding:0 26px 20px; }
.wac-summary>div { display:flex; justify-content:space-between; align-items:center; gap:10px; min-width:0; padding:14px; border:1px solid var(--wac-line); border-radius:14px; background:var(--wac-card); }
.wac-summary span { display:flex; gap:7px; align-items:center; color:var(--wac-muted); font-size:11px; line-height:1.5; }
.wac-summary strong { font-size:25px; font-weight:700; font-variant-numeric:tabular-nums; }
.wac-summary [data-level="alarm"] strong,.wac-summary [data-level="alarm"] i { color:var(--wac-alarm); }
.wac-summary [data-level="warning"] strong,.wac-summary [data-level="warning"] i { color:var(--wac-warning); }
.wac-tabs { display:flex; gap:24px; margin:0 26px; border-bottom:1px solid var(--wac-line); }
.wac-tabs button { position:relative; display:flex; gap:8px; align-items:center; min-height:46px; padding:0 2px 12px; border:0; background:transparent; color:var(--wac-muted); font-size:13px; font-weight:700; }
.wac-tabs button[aria-selected="true"] { color:var(--wac-accent); }
.wac-tabs button[aria-selected="true"]::after { position:absolute; right:0; bottom:-1px; left:0; height:3px; border-radius:3px; background:var(--wac-accent); content:""; }
.wac-tabs button>span { min-width:20px; padding:2px 5px; border-radius:6px; background:var(--wac-soft); text-align:center; font-size:10px; }
.wac-tabs small { font-weight:400; font-size:10px; }
.wac-filters { display:flex; gap:10px; padding:16px 26px; }
.wac-filters label { display:flex; align-items:center; gap:8px; min-width:0; padding:0 10px; border:1px solid var(--wac-line); border-radius:10px; color:var(--wac-muted); background:var(--wac-card); }
.wac-filters label:first-child { flex:1; }
.wac-filters select { min-width:0; max-width:100%; width:100%; height:35px; border:0; color:var(--wac-text); background:var(--wac-card); font-size:11px; cursor:pointer; }
.wac-scroll { min-height:200px; max-height:480px; padding:0 26px 20px; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; }
.wac-list { display:grid; gap:10px; }
.wac-card { --event-color:var(--wac-warning); --event-soft:var(--wac-warning-soft); border:1px solid var(--wac-line); border-radius:14px; background:var(--wac-card); transition:border-color .2s; }
.wac-card[data-level="alarm"] { --event-color:var(--wac-alarm); --event-soft:var(--wac-alarm-soft); }
.wac-card[data-level="resolved"] { --event-color:var(--wac-green); --event-soft:var(--wac-soft); }
.wac-card:hover,.wac-card[open] { border-color:var(--event-color); }
.wac-card summary { display:flex; align-items:flex-start; gap:12px; padding:16px; cursor:pointer; list-style:none; }
.wac-card summary::-webkit-details-marker { display:none; }
.wac-event-icon { display:grid; place-items:center; flex-shrink:0; align-self:center; width:36px; height:36px; border-radius:12px; background:var(--event-soft); color:var(--event-color); font-size:13px; }
.wac-event-main { min-width:0; flex:1; }
.wac-event-point { display:block; margin:0 0 3px; overflow-wrap:anywhere; color:var(--wac-muted); font-size:10px; }
.wac-event-main h3 { margin:0 0 7px; font-size:14px; line-height:1.5; font-weight:700; overflow-wrap:anywhere; }
.wac-event-main p { margin:8px 0 0; color:var(--wac-muted); font-size:10px; }
.wac-event-state { display:flex; flex-wrap:wrap; gap:7px; align-items:center; font-size:10px; }
.wac-severity { padding:3px 7px; border-radius:5px; color:var(--event-color); background:var(--event-soft); font-weight:700; }
.wac-state { display:flex; gap:5px; align-items:center; color:var(--wac-muted); }
.wac-state.is-live { color:var(--event-color); }
.wac-state.is-live i { width:5px; height:5px; border-radius:50%; background:currentColor; box-shadow:0 0 0 3px var(--event-soft); }
.wac-event-value { display:flex; align-items:flex-end; flex-direction:column; gap:4px; max-width:40%; text-align:right; }
.wac-event-value small { color:var(--wac-muted); font-size:9px; line-height:1.5; }
.wac-event-value strong { font-size:19px; line-height:1.5; font-weight:700; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.wac-event-value span { margin-top:9px; color:var(--wac-muted); font-size:9px; }
.wac-event-value i { margin-left:5px; transition:transform .2s; }
.wac-card[open] .wac-event-value i { transform:rotate(180deg); }
.wac-event-details { margin:0 16px; padding:14px 0 16px 48px; border-top:1px solid var(--wac-line); }
.wac-event-details>p { margin:0 0 12px; color:var(--event-color); font-size:11px; }
.wac-event-details dl { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0; }
.wac-event-details dt { color:var(--wac-muted); font-size:9px; font-weight:400; }
.wac-event-details dd { margin:3px 0 0; font-size:11px; font-weight:600; overflow-wrap:anywhere; }
.wac-day { position:relative; display:flex; gap:12px; align-items:center; margin:10px 0 2px; color:var(--wac-muted); font-size:10px; font-weight:700; }
.wac-day::after { height:1px; flex:1; background:var(--wac-line); content:""; }
.wac-empty { display:flex; flex-direction:column; align-items:center; gap:12px; padding:44px 20px; text-align:center; }
.wac-empty>span { display:grid; place-items:center; width:64px; height:64px; margin-bottom:4px; border:1px solid var(--wac-line); border-radius:22px; background:var(--wac-card); color:var(--wac-accent); font-size:24px; }
.wac-empty h3 { margin:0; color:var(--wac-text); font-size:16px; line-height:1.5; font-weight:650; }
.wac-empty p { max-width:340px; margin:0; color:var(--wac-muted); font-size:12px; line-height:1.7; }
.wac-empty button,.wac-more { padding:9px 16px; border:1px solid var(--wac-line); border-radius:10px; background:var(--wac-card); color:var(--wac-accent); font-size:12px; font-weight:600; }
.wac-more { display:block; margin:16px auto 0; }
.wac-notice { padding:10px 12px; border-radius:10px; background:var(--wac-warning-soft); color:var(--wac-warning); font-size:11px; line-height:1.5; }
.wac-loading { display:flex; gap:10px; align-items:center; justify-content:center; padding:60px 16px; color:var(--wac-muted); font-size:13px; }
/* Centre status content in the available list area; auto margins keep short screens scrollable. */
.waterly-alert-center .wac-scroll:has(>.wac-message>:is(.wac-empty,.wac-loading)) { display:flex; flex-direction:column; padding-top:20px; padding-bottom:20px; }
.waterly-alert-center .wac-scroll:has(>.wac-message>:is(.wac-empty,.wac-loading))>.wac-message { display:flex; flex:1 0 auto; flex-direction:column; }
.waterly-alert-center .wac-scroll:has(>.wac-message>.wac-empty) .wac-empty { padding-block:0; }
.waterly-alert-center .wac-message>:is(.wac-empty,.wac-loading) { flex-shrink:0; margin-block:auto; }
.wac-footer { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:13px 26px; border-top:1px solid var(--wac-line); color:var(--wac-muted); background:var(--wac-card); font-size:10px; }
.wac-refresh { display:flex; align-items:center; gap:7px; min-height:32px; padding:0 10px; border:1px solid var(--wac-line); border-radius:9px; background:var(--wac-bg); color:var(--wac-accent); font-size:10px; }
.wac-refresh:disabled { opacity:.5; }
.waterly-alert-center button:focus-visible,.waterly-alert-center summary:focus-visible,.waterly-alert-center select:focus-visible { outline:2px solid var(--wac-accent); outline-offset:3px; }
@media(min-width:768px) {
    /* Match the tutorial's generous desktop canvas, with one scrolling event list. */
    .waterly-alert-center { width:min(1500px,calc(100vw - 48px)); height:min(900px,calc(100dvh - 48px)); }
    .waterly-alert-center .wac-window { height:100%; min-height:0; max-height:none; }
    .waterly-alert-center :is(.wac-header,.wac-summary,.wac-tabs,.wac-filters,.wac-footer) { flex-shrink:0; }
    .waterly-alert-center .wac-scroll { flex:1 1 auto; min-height:0; max-height:none; }
}
@media(max-width:767px) {
    html:has(.waterly-alert-center[open]), body:has(.waterly-alert-center[open]) { overflow:hidden; overscroll-behavior:none; }
    body:has(.waterly-alert-center[open]) { position:fixed; inset:0; }
    .waterly-alert-center {
        position:fixed; z-index:1025; inset:0; width:100%; height:100dvh; max-height:none; margin:0;
        padding:calc(9px + var(--safe-top,0px)) calc(9px + var(--safe-right,0px)) calc(9px + var(--safe-bottom,0px) + var(--waterly-footer-offset,58px)) calc(9px + var(--safe-left,0px));
        box-sizing:border-box; border:0; border-radius:0; background:var(--waterly-points-sheet-background,var(--wac-bg));
        box-shadow:-24px 0 70px rgba(0,0,0,.42); backdrop-filter:blur(20px) saturate(1.2); -webkit-backdrop-filter:blur(20px) saturate(1.2);
        animation:waterly-alert-sheet-in .34s cubic-bezier(.22,1,.36,1) both;
    }
    .waterly-alert-center.is-closing { pointer-events:none; animation:waterly-alert-sheet-out .34s cubic-bezier(.22,1,.36,1) both; }
    .wac-window { height:100%; max-height:none; min-height:0; }
    .wac-header { padding:14px 10px 16px; gap:10px; flex-shrink:0; }
    .wac-summary,.wac-tabs,.wac-filters,.wac-footer { flex-shrink:0; }
    .wac-header h2 { font-size:21px; }
    .wac-header p { font-size:10px; }
    .wac-symbol { width:40px; height:40px; border-radius:14px; font-size:19px; }
    .wac-summary { gap:6px; padding:0 16px 16px; }
    .wac-summary>div { flex-direction:column; align-items:flex-start; gap:6px; padding:10px; }
    .wac-summary span { font-size:9px; gap:5px; }
    .wac-summary strong { font-size:23px; }
    .wac-tabs { margin:0 16px; gap:20px; }
    .wac-tabs small { display:none; }
    .wac-filters { padding:12px 16px; gap:8px; }
    .wac-filters label { padding:0 7px; }
    .wac-filters label:last-child { max-width:48%; }
    .wac-filters select { height:38px; font-size:10px; }
    .wac-scroll { flex:1 1 auto; min-height:0; max-height:none; padding:0 10px 16px; }
    .wac-card summary { gap:8px; padding:12px; }
    .wac-event-icon { width:28px; height:28px; border-radius:9px; font-size:11px; }
    .wac-event-main h3 { font-size:12px; }
    .wac-event-value { max-width:35%; }
    .wac-event-value strong { font-size:16px; }
    .wac-event-main p { font-size:9px; }
    .wac-event-details { margin:0 12px; padding-left:0; }
    .wac-event-details dl { gap:12px 8px; }
    .wac-footer { padding:10px; background:transparent; }
}
@keyframes waterly-alert-sheet-in { from { transform:translateY(100%); } to { transform:translateY(0); } }
@keyframes waterly-alert-sheet-out { from { transform:translateY(0); } to { transform:translateY(100%); } }
@media(prefers-reduced-motion:reduce) { .waterly-alert-center * { animation:none!important; transition:none!important; } }

/* Keep headings and native selects inside the centre on its own theme palette. */
.waterly-alert-center .wac-header h2 { color:var(--wac-text); }
.waterly-alert-center .wac-filters select { border:0; padding:0; border-radius:0; box-shadow:none; background:var(--wac-card); color:var(--wac-text); text-align:left; }
/* Legacy form rules use !important; scope the overrides to these two selects. */
.waterly-alert-center .wac-filters select { background-color:var(--wac-card)!important; color:var(--wac-text)!important; border-radius:0!important; text-align:left!important; }
.waterly-alert-center select:focus-visible { outline:2px solid var(--wac-accent)!important; outline-offset:3px; }

/* Desktop quick view is anchored to the toolbar, on the same surface as Filtering. */
.waterly-alert-preview { --wac-bg:#f8fcfe; --wac-text:#193b4b; --wac-line:#cbdde5; position:fixed; z-index:1050; display:flex; flex-direction:column; width:min(420px,calc(100vw - 24px)); margin:0; max-height:min(620px,75dvh); border-radius:18px; box-sizing:border-box; box-shadow:0 12px 40px #0005; animation:waterly-alert-preview-in .16s ease-out; }
html[data-theme="dark"] .waterly-alert-preview { --wac-bg:#0d202b; --wac-text:#e8f3f8; --wac-line:#34505e; }
.wac-preview-header { display:flex; align-items:center; flex-shrink:0; gap:10px; padding:18px 18px 14px; border-bottom:1px solid var(--wac-line); }
.wac-preview-header>div { flex:1; min-width:0; }
.wac-preview-header h2 { margin:0; color:var(--wac-text); font-size:17px; font-weight:700; }
.wac-preview-header p { margin:4px 0 0; color:var(--wac-muted); font-size:10px; }
.wac-preview-symbol { display:grid; place-items:center; width:36px; height:36px; border:1px solid var(--wac-line); border-radius:12px; color:var(--wac-accent); background:var(--wac-card); font-size:17px; }
.wac-preview-close { width:30px; height:30px; border-radius:9px; font-size:11px; }
.wac-preview-scroll { overflow:auto; overscroll-behavior:contain; min-height:0; padding:0 18px 16px; scrollbar-width:thin; }
.wac-preview-heading { display:flex; align-items:center; gap:8px; margin:12px 0 10px; color:var(--wac-text); font-size:12px; font-weight:700; }
.wac-preview-heading>span { margin-left:auto; padding:3px 6px; border-radius:6px; color:var(--wac-accent); background:var(--wac-soft); font-size:10px; }
.wac-preview-heading>small { color:var(--wac-muted); font-size:10px; font-weight:400; }
.wac-preview-list { display:grid; gap:8px; }
.waterly-alert-preview .wac-card { border-radius:12px; }
.waterly-alert-preview .wac-card summary { gap:8px; padding:8px 11px; }
.waterly-alert-preview .wac-event-icon { width:28px; height:28px; border-radius:9px; font-size:11px; }
.waterly-alert-preview .wac-event-main h3 { margin-bottom:5px; font-size:13px; }
.waterly-alert-preview .wac-event-point,.waterly-alert-preview .wac-event-main p { font-size:9px; }
.waterly-alert-preview .wac-event-state { gap:5px; font-size:9px; }
.waterly-alert-preview .wac-event-value { max-width:35%; }
.waterly-alert-preview .wac-event-value strong { font-size:16px; }
.waterly-alert-preview .wac-event-details { margin:0 11px; padding-left:0; }
.wac-preview-footer { padding:12px 18px 10px; flex-shrink:0; border-top:1px solid var(--wac-line); }
.wac-preview-footer>div { display:flex; align-items:center; justify-content:space-between; margin-bottom:0; color:var(--wac-muted); font-size:10px; }
.wac-preview-refresh { display:grid; place-items:center; width:26px; height:26px; border:0; border-radius:8px; background:var(--wac-soft); color:var(--wac-accent); font-size:10px; }
.wac-preview-refresh:disabled { opacity:.5; }
.wac-preview-more { display:inline-flex; align-items:center; gap:6px; flex-shrink:0; margin-top:5px; padding:3px 0; border:0; border-radius:5px; background:transparent; color:var(--wac-accent); font-size:10px; font-weight:600; }
.wac-preview-more i { font-size:9px; }
.wac-preview-more:hover { text-decoration:underline; }
.wac-preview-empty { display:flex; align-items:center; gap:8px; margin:0; padding:12px; border:1px dashed var(--wac-line); border-radius:10px; color:var(--wac-muted); font-size:11px; }
.wac-preview-empty i { color:var(--wac-accent); }
.waterly-alert-preview .wac-loading { padding:18px 0; font-size:11px; }
.waterly-alert-center.is-guest .wac-scroll {
    display:flex;
    flex-direction:column;
    justify-content:center;
    flex:1 1 auto;
    padding-top:20px;
    padding-bottom:20px;
}
.waterly-alert-center.is-guest .wac-empty { padding:20px; }
.waterly-alert-preview .wac-empty { padding:20px 0; }
.waterly-alert-preview .wac-empty h3 { font-size:14px; }
.waterly-alert-preview button:focus-visible,.waterly-alert-preview summary:focus-visible { outline:2px solid var(--wac-accent); outline-offset:3px; }
@keyframes waterly-alert-preview-in { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
@media(prefers-reduced-motion:reduce) { .waterly-alert-preview,.waterly-alert-preview * { animation:none!important; transition:none!important; } }

/* A faint severity wash marks ongoing episodes without overpowering the measurements. */
.waterly-alert-preview .wac-card[data-ongoing="true"] { background:linear-gradient(110deg,color-mix(in srgb,var(--event-color) 7%,var(--wac-card)),var(--wac-card)); border-color:color-mix(in srgb,var(--event-color) 24%,var(--wac-line)); }
.waterly-alert-preview .wac-card[data-ongoing="true"]:hover,.waterly-alert-preview .wac-card[open] { border-color:var(--event-color); }
.waterly-alert-preview .wac-event-time { display:flex; flex-wrap:wrap; gap:3px 6px; margin-top:6px; font-size:9px; line-height:1.5; }
.wac-relative-time::before { content:"·"; margin-right:6px; }
.waterly-alert-preview .wac-event-value { align-self:center; }

.waterly-alert-preview .wac-event-value strong i { font-size:9px; vertical-align:middle; margin-left:5px; }

/* Full history uses the same severity palette, with a quieter wash for ended episodes. */
.waterly-alert-center .wac-card { background:linear-gradient(110deg,color-mix(in srgb,var(--event-color) 5%,var(--wac-card)),var(--wac-card)); border-color:color-mix(in srgb,var(--event-color) 18%,var(--wac-line)); }
.waterly-alert-center .wac-card[data-ongoing="true"] { background:linear-gradient(110deg,color-mix(in srgb,var(--event-color) 8%,var(--wac-card)),var(--wac-card)); border-color:color-mix(in srgb,var(--event-color) 24%,var(--wac-line)); }
.waterly-alert-center .wac-card:hover,.waterly-alert-center .wac-card[open] { border-color:var(--event-color); }
.waterly-alert-center .wac-event-time { display:flex; flex-wrap:wrap; gap:3px 6px; line-height:1.5; }
.waterly-alert-center .wac-event-value { align-self:center; }
.wac-event-duration { color:var(--wac-muted); }
.wac-event-duration::before { content:"·"; margin-right:6px; }
.waterly-alert-center .wac-summary [data-level="alarm"] { background:linear-gradient(110deg,color-mix(in srgb,var(--wac-alarm) 5%,var(--wac-card)),var(--wac-card)); }
.waterly-alert-center .wac-summary [data-level="warning"] { background:linear-gradient(110deg,color-mix(in srgb,var(--wac-warning) 5%,var(--wac-card)),var(--wac-card)); }


/* app/styles/safe-area.css */
/**************************************************************************************************
	@author         waterly.eu
	@contributors   Rafał Złotorzyński
	@module         CSS
	@file           safe-area.css
	@description    Strefy bezpieczne (notch, Dynamic Island, pasek home, zaokrąglenia ekranu).

	                WebView i tła wypełniają ekran. Android przekazuje WindowInsets przez --safe-*,
	                a iOS używa env(safe-area-inset-*). Kontrolki i granice przewijania omijają
	                te obszary; sam padding przewijanej zawartości nie wystarcza.

	                Kolejność ładowania jest jawna w config/styles.mjs, niezależnie od lokalizacji pliku.

	                Zmienne mają wartości domyślne 0px, więc w zwykłej przeglądarce i na desktopie
	                nic się nie zmienia - reguły są bezpieczne do stosowania bez klasy .native-app.
**************************************************************************************************/

/******************************************* Zmienne bazowe ***************************************/
	:root {
		--safe-top: env(safe-area-inset-top, 0px);
		--safe-right: env(safe-area-inset-right, 0px);
		--safe-bottom: env(safe-area-inset-bottom, 0px);
		--safe-left: env(safe-area-inset-left, 0px);

		/* Minimalny oddech interfejsu przy krawędzi ekranu - używany razem ze strefami */
		--safe-gutter: 10px;

		/* Gotowe odstępy: odstęp bazowy powiększony o strefę bezpieczną danej krawędzi */
		--safe-gutter-top: calc(var(--safe-gutter) + var(--safe-top));
		--safe-gutter-right: calc(var(--safe-gutter) + var(--safe-right));
		--safe-gutter-bottom: calc(var(--safe-gutter) + var(--safe-bottom));
		--safe-gutter-left: calc(var(--safe-gutter) + var(--safe-left));
	}

/****************************************** Kontrolki mapy ****************************************/
	/*
		Rogi SDK: pionowo odsuwamy je zawsze (notch w pionie, pasek home na dole), poziomo
		strefy są niezerowe tylko w orientacji poziomej - wtedy zaokrąglenia ekranu i wcięcie
		kamery zjadałyby przyciski przy lewej lub prawej krawędzi.
	*/
	#main_map_content .maplibregl-ctrl-top-left,
	#main_map_content .maplibregl-ctrl-top-right {
		/* MapLibre adds the regular 10 px control margin. Add only the actual
		   safe-area inset here, otherwise the top gutter is counted twice. */
		top: var(--safe-top);
	}

	#main_map_content .maplibregl-ctrl-top-left,
	#main_map_content .maplibregl-ctrl-bottom-left {
		left: var(--safe-left);
	}

	#main_map_content .maplibregl-ctrl-top-right,
	#main_map_content .maplibregl-ctrl-bottom-right {
		right: var(--safe-right);
	}

	/*
		Dolne stosy trzymają się nad dokiem WQI - dokładamy do tego pasek home oraz wysokość
		dolnej nawigacji telefonu (--waterly-footer-offset jest 0px tam, gdzie paska nie ma).
	*/
	#main_map_content .maplibregl-ctrl-bottom-right {
		padding-bottom: calc(var(--wqi-dock-height) + var(--safe-bottom) + var(--waterly-footer-offset, 0px));
	}

	#main_map_content .maplibregl-ctrl-bottom-left {
		padding-bottom: calc(var(--wqi-bottom-left-pad) + var(--safe-bottom) + var(--waterly-footer-offset, 0px));
	}

	/*
		Dok: widget WQI, atrybucja i prywatność. Padding pisany w całości, bo shared/map/controls.css ustawia
		go skrótem i punktowa zmiana jednej krawędzi byłaby nadpisana przez breakpointy poniżej.
	*/
	#main_map_content .waterly-map-dock {
		padding: 0 var(--safe-gutter-right) calc(var(--safe-gutter-bottom) + var(--waterly-footer-offset, 0px)) var(--safe-gutter-left);
	}

	/* Komunikat "skopiowano" wychodzi znad doku, więc też musi ominąć pasek home */
	.waterly-map-copy-feedback {
		bottom: calc(var(--wqi-dock-height, 42px) + 14px + var(--safe-bottom) + var(--waterly-footer-offset, 0px));
	}

	/* Wąskie ekrany: shared/map/controls.css schodzi z odstępem do 8 px - trzymamy tę samą proporcję */
	@media (max-width: 639.98px) {
		#main_map_content .waterly-map-dock {
			padding:
				0
				calc(8px + var(--safe-right))
				calc(8px + var(--safe-bottom) + var(--waterly-footer-offset, 0px))
				calc(8px + var(--safe-left));
		}
	}

	/* Gauge przy lewej krawędzi w orientacji poziomej */
	#main_map_content.wqi-variant-gauge .wqi-map-legend {
		left: calc(var(--safe-gutter) + var(--safe-left));
	}

	/* Panel warstw i popovery nie mogą schować się pod paskiem home */
	#main_map_content .map-layer-switcher,
	#main_map_content .waterly-map-popover {
		max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 96px);
		overflow-y: auto;
	}

/****************************************** Rama aplikacji ****************************************/
	/*
		Górny pasek legacy jest przezroczysty i w widoku mapy praktycznie pusty, ale wciąż trzyma
		pozycje elementów sprzętowych (USB, programator, mostek) w sesji zalogowanej.

		W pionie odsuwa go "top", nie margines: margin-top pierwszego elementu w przepływie
		przenika przez .app do body, a body o wysokości 100% wychodzi wtedy poza ekran o całą
		strefę górną - w aplikacjach dało się przewinąć całe okno razem z mapą.
	*/
	body.has-session .navbar-website {
		top: var(--safe-top);
		margin-left: var(--safe-left);
		margin-right: var(--safe-right);
	}

	/*
		Podstrony (profil, zdarzenia, laboratorium...) to osobna, przewijana warstwa nad mapą.
		Startuje pod paskiem 56 px, który sam zjeżdża o strefę górną, a na dole zostawia miejsce
		na pasek home - inaczej ostatni wiersz listy jest nieklikalny.
	*/
	.main-container-subpage {
		top: calc(56px + var(--safe-top));
		height: calc(100% - 56px - var(--safe-top));
		padding-bottom: var(--safe-bottom);
		padding-left: var(--safe-left);
		padding-right: var(--safe-right);
		/* Bezwładne przewijanie iOS bez wychodzenia gestem poza kontener */
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}

/************************************ Panele punktów pomiarowych **********************************/
	/*
		Lista punktów: panel pełnej wysokości przy prawej krawędzi. Sam ma padding 14 px, więc
		nagłówek chowałby się pod notchem, a ostatni wiersz pod paskiem home.
	*/
	.tiles-list-contener {
		padding-top: calc(14px + var(--safe-top));
		padding-right: calc(14px + var(--safe-right));
		padding-bottom: calc(14px + var(--safe-bottom));
		padding-left: calc(14px + var(--safe-left));
	}

	/* Geometrię pełnoekranowego panelu punktu i jego safe-area określa management.css. */
	@media (max-width: 767px) {
		/* Lista punktów też kończy się nad paskiem nawigacji */
		.tiles-list-contener {
			padding-bottom: calc(14px + var(--safe-bottom) + var(--waterly-footer-offset, 0px));
		}
	}

/************************************* Zgody i okna modalne ***************************************/
	.waterly-consent-banner {
		right: calc(16px + var(--safe-right));
		bottom: calc(16px + var(--safe-bottom) + var(--waterly-footer-offset, 0px));
		left: calc(16px + var(--safe-left));
	}

	.waterly-privacy-backdrop {
		padding:
			calc(20px + var(--safe-top))
			calc(20px + var(--safe-right))
			calc(20px + var(--safe-bottom))
			calc(20px + var(--safe-left));
	}

	.waterly-privacy-dialog {
		/* 100dvh zamiast 100vh: pasek adresu Safari nie ucina wtedy stopki okna */
		max-height: calc(100dvh - 40px - var(--safe-top) - var(--safe-bottom));
	}


/* features/auth/session-visibility.css */
/**************************************************************************************************
	@author         waterly.eu
	@contributors   Rafał Złotorzyński
	@module         CSS
	@file           session_visibility.css
	@description    What a visitor without a session may see: the map and the sign-in entry only.
					body.no-session  - nobody is signed in
					body.has-session - a user is signed in
**************************************************************************************************/

/* Items that belong to a signed-in user */
body.no-session .session-only {
    display: none !important;
}

/* The sign-in entry only makes sense without a session */
body.has-session .no-session-only {
    display: none !important;
}

/* Language picker in the navbar - available in both states */
.navbar-nav-language .user-settings-language {
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
}

.navbar-nav-language .user-settings-language-flag {
	width: 26px;
	height: 19px;
	flex: 0 0 26px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 4px;
	box-shadow: 0 2px 7px rgba(0, 0, 0, 0.28);
	object-fit: cover;
}

/* Navigation that leads into account-only areas */
body.no-session .navbar-menu-tree,
body.no-session .navbar-nav-notification,
body.no-session .waterly-alert-trigger,
body.no-session .waterly-alert-center,
body.no-session .waterly-alert-preview,
body.no-session .navbar-nav-usb,
body.no-session .navbar-nav-programmer,
body.no-session .navbar-nav-wireless-bridge {
    display: none !important;
}

/* Sub-pages need an account. */
body.no-session .main-container-subpage {
    display: none !important;
}

/* Laboratory navigation belongs to the authenticated workspace. Public visitors
   can inspect a point or move to it on the map, but cannot enter the lab. */
body.no-session .tile-go-to-object,
body.no-session .map-go-to-object {
    display: none !important;
}

/* Followed points, alarms and service state are account data. Public visitors
   keep the point list and search, but not the device filter control. */
body.no-session .waterly-device-filter {
    display: none !important;
}

/*
	Deliberately NOT hidden without a session, because these work on public data:
	.devices-list-selector   - opens the list of measurement points
	.tiles-list-contener     - the list itself
	.select-tile-contener    - readings of the point picked on the map
	.contener-map            - the map
*/

/******************************** Measurement point panel for visitors ****************************/
    /*
        Charts are blocked in show_chart_lab and show_statistic_parameter, so nothing inside the
        panel may advertise itself as clickable. The pointer is dropped wholesale rather than per
        class, because the clickable parameters carry a dozen different names across the widget
        stylesheets, and any new one would silently miss a targeted rule.
    */
    body.no-session .select-tile-contener,
    body.no-session .select-tile-contener * {
        cursor: default !important;
    }

    /* The controls that still do something keep their affordance */
    body.no-session .select-tile-contener a,
    body.no-session .select-tile-contener .close-tiles-contener,
    body.no-session .select-tile-contener .navigate-to-marker,
    body.no-session .select-tile-contener .marker-loading-action,
    body.no-session .select-tile-contener .marker-water-hero-quick-action[data-action="center"],
    body.no-session .select-tile-contener .marker-water-hero-quick-action[data-action="navigate"] {
        cursor: pointer !important;
    }

    /* Public readings are informational. Do not suggest a chart action with
       a hand cursor, hover lift or keyboard focus when charts require a session. */
    body.no-session .select-tile-contener .widget-dynamic-chart,
    body.no-session .select-tile-contener .marker-widget-group-item {
        pointer-events: none;
    }

    body.no-session .select-tile-contener .marker-group-tiles .marker-tile:hover,
    body.no-session .select-tile-contener .marker-group-tiles .marker-tile:focus-visible {
        border-color: rgba(255, 255, 255, 0.06);
        background: rgba(2, 6, 14, 0.45);
        transform: none;
    }

    /* The presentation switch is not rendered for visitors, this covers any stale markup */
    body.no-session .marker-mode-switch {
        display: none !important;
    }

    /* Account-only point actions must not exist visually in the public widget.
       The modern renderer omits them; these selectors also cover stale/legacy
       markup that may remain while the point data is refreshing. */
    body.no-session .select-tile-contener .marker-legacy-subscribe-row,
    body.no-session .select-tile-contener .marker-widget-subscribe,
    body.no-session .select-tile-contener .marker-water-hero-quick-action[data-action="subscribe"],
    body.no-session .select-tile-contener .marker-water-hero-quick-action[data-action="laboratory"],
    body.no-session .select-tile-contener .marker-water-hero-quick-action[data-action="alarms"] {
        display: none !important;
    }

    body.no-session .select-tile-contener .marker-water-hero-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


/* shared/ui/statistic.css */
/**************************************************************************************************
	@author         hommie.pl
	@contributors   Rafał Złotorzyński
	@module         CSS
	@file           statistic.css
**************************************************************************************************/

/* Style for widget */

.widget-parameter-with-chart {
	position: relative;
	border: 3px solid #33373b;
	border-radius: 15px;
	height: 248px;
	background-color: #212224;
}

.widget-parameter-with-chart .widget-parameter-body {
	position: absolute;
	z-index: 0;
	top: 0;
	left: 0;
}

.widget-parameter-with-chart .widget-header {
	font-size: 17px;
	color: #2193F3;
}

.widget-parameter-with-chart .widget-unit {
	padding-left: 0.4rem;
	font-size: 18px;
	color: #b4bbc2;
	margin-left: -5px;
}

.widget-parameter-with-chart .widget-icon {
	font-size: 45px;
	color: #b4bbc2;
	margin-top: -10px;
}

.widget-parameter-with-chart .widget-icon i {
	vertical-align: bottom;
}

.widget-parameter-with-chart .widget-value {
	font-size: 45px;
	height: 68px;
	color: #b4bbc2;
	white-space: nowrap;
	text-overflow: ellipsis;
	max-width: 300px;
}

.widget-parameter-with-chart .widget-date {
	color: #b4bbc2;
	font-size: 12px;
	height: 18px;
	font-style: italic;
}

.widget-parameter-with-chart .chart-statistic-div {
	overflow: visible;
	height: 90px;
	border-radius: 15px;
	width: 100%;
	bottom: 0px;
	overflow: hidden;
}


/* Style for widget in window */

.widget-chart-in-window {
	position: relative;
}

.widget-chart-in-window .widget-parameter-body {
	position: absolute;
	z-index: 0;
	top: 0;
	left: 0;
}

.widget-chart-in-window .chart-statistic-div {
	overflow: visible;
	border-radius: 15px;
	left: "";
	max-width: 105%;
	width: "";
	bottom: "";
	height: 405px;
}

.widget-chart-in-window .widget-value {
	font-size: 66px;
	line-height: 66px;
	color: #b4bbc2;
}

.widget-chart-in-window .widget-unit {
	font-size: 16px;
	color: #b4bbc2;
	font-weight: lighter;
}


/* Style for legend */

.statistic-legend-probe {
	background: rgba(0, 0, 0, 0.7);
	border-radius: 5px;
	color: #b4bbc2;
	opacity: 1;
	pointer-events: none;
	position: absolute;
	transform: translate(-50%, 0);
	transition: all .1s ease;
	border: #b4bbc2 solid 1px;
}

.statistic-legend-probe table {
	margin: 0px;
	font-size: 16px;
}

.statistic-legend-probe table tr {
	background-color: inherit;
	border-width: 0;
}

.statistic-legend-probe table thead tr {
	cursor: default;
	height: 30px;
	text-align: center;
	vertical-align: middle;
	line-height: 30px;
}

.statistic-legend-probe table thead tr th {
	border-width: 0;
	white-space: nowrap;
	padding: 0 20px;
	font-weight: bold;
}

.statistic-legend-probe table tbody tr td {
	border-width: 0;
	text-align: center;
	padding: 0 20px !important;
	font-size: 25px;
	white-space: nowrap;
	margin-top: 10px;
}

.statistic-legend-probe table tbody tr td small {
	font-size: 10px;
	margin-left: 5px;
}

.statistic-legend-probe span {
	border-width: 0px;
	margin-right: 10px;
	height: 20px;
	width: 20px;
	display: inline-block;
}

.widget-parameter-with-chart .widget-unit,
.widget-chart-in-window .widget-unit {
    margin-left: 5px;
}

/* Waterly typography roles. */
.widget-value, .widget-unit { font-family: var(--wl-font-mono); font-variant-numeric: tabular-nums; }


/* app/styles/theme.css */
/**************************************************************************************************
	@module         interface_theme
	@description    Light/dark theme overrides. Dark remains the visual baseline of the legacy UI.
**************************************************************************************************/

:root {
	--waterly-page-bg: #212529;
	--waterly-surface: #33373b;
	--waterly-surface-soft: #293139;
	--waterly-text: #ffffff;
	--waterly-text-muted: #b4bbc2;
	--waterly-border: rgba(255, 255, 255, 0.14);
	--waterly-accent: #2193f3;
	color-scheme: dark;
}

html[data-theme="light"] {
	--waterly-page-bg: #f4f7fa;
	--waterly-surface: #ffffff;
	--waterly-surface-soft: #eaf0f5;
	--waterly-text: #17212b;
	--waterly-text-muted: #526170;
	--waterly-border: rgba(28, 54, 78, 0.16);
	--waterly-accent: #147ac1;
	color-scheme: light;
}

html,
body,
html[data-theme] body {
	background-color: var(--waterly-page-bg);
	color: var(--waterly-text);
}

/*
	Ekran ładowania z index.html rysuje się na stałym granacie marki i sam ustala kolory tekstu.
	Motyw jasny nie może go rozjaśniać - wcześniej ta reguła wygrywała specyficznością i podpis
	"#save water with us" stawał się granatowy na granatowym.
*/
html[data-theme="light"] .save-water:not(.waterly-boot *) {
	color: var(--waterly-text);
}

/* The control stays in the source and can be re-enabled by removing this class. */
#main_map_content .waterly-ctrl-layers.is-temporarily-disabled {
	display: none !important;
}

/* Theme selector next to the language selector */
.navbar-nav-theme .theme-body {
	min-width: 180px;
}

.navbar-nav-theme .user-settings-theme {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
}

.navbar-nav-theme .user-settings-theme > i {
	width: 22px;
	color: var(--waterly-text-muted);
	text-align: center;
}

.navbar-nav-theme .user-settings-theme:hover,
.navbar-nav-theme .user-settings-theme.selected {
	background-color: var(--waterly-accent);
	color: #ffffff;
}

.navbar-nav-theme .user-settings-theme:hover > i,
.navbar-nav-theme .user-settings-theme.selected > i {
	color: #ffffff;
}

/* Shared legacy surfaces */
html[data-theme="light"] .bg-color,
html[data-theme="light"] .table-dark,
html[data-theme="light"] .progress-bg-dark,
html[data-theme="light"] .main-container-subpage,
html[data-theme="light"] .card,
html[data-theme="light"] .card-body,
html[data-theme="light"] .card-header,
html[data-theme="light"] .modal-content,
html[data-theme="light"] .dropdown-menu,
html[data-theme="light"] .list-group-item,
html[data-theme="light"] .table,
html[data-theme="light"] .searching-form {
	background-color: var(--waterly-surface) !important;
	color: var(--waterly-text) !important;
	border-color: var(--waterly-border) !important;
}

html[data-theme="light"] .text-light,
html[data-theme="light"] .table-dark,
html[data-theme="light"] .table-dark th,
html[data-theme="light"] .table-dark td {
	color: var(--waterly-text) !important;
}

html[data-theme="light"] .text-muted,
html[data-theme="light"] small,
html[data-theme="light"] .dropdown-header {
	color: var(--waterly-text-muted) !important;
}

html[data-theme="light"] .dropdown-item,
html[data-theme="light"] .nav-link,
html[data-theme="light"] .card-header .btn {
	color: var(--waterly-text) !important;
}

html[data-theme="light"] .dropdown-item:hover,
html[data-theme="light"] .dropdown-item:focus {
	background-color: var(--waterly-surface-soft);
	color: var(--waterly-text);
}

html[data-theme="light"] .form-control,
html[data-theme="light"] .form-select,
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea {
	background-color: #ffffff !important;
	color: #17212b !important;
	border-color: rgba(28, 54, 78, 0.22) !important;
}

html[data-theme="light"] .form-control:disabled,
html[data-theme="light"] .form-control[readonly],
html[data-theme="light"] input:disabled,
html[data-theme="light"] select:disabled,
html[data-theme="light"] textarea:disabled {
	background-color: #e8edf2 !important;
	color: #687683 !important;
}

/* Navbar and account shell */
html[data-theme="light"] .navbar-website .logo-text-navbar,
html[data-theme="light"] .navbar-website .nav-link,
html[data-theme="light"] .navbar-website .navbar-menu-tree .nav-menu-tree-link,
html[data-theme="light"] .navbar-website .navbar-menu-tree .dropdown-menu {
	background-color: var(--waterly-surface) !important;
	color: var(--waterly-text-muted) !important;
	border-color: var(--waterly-border) !important;
	box-shadow: 0 4px 14px rgba(31, 55, 75, 0.12);
}

html[data-theme="light"] .navbar-website .nav-link.show,
html[data-theme="light"] .navbar-website .nav-link:hover,
html[data-theme="light"] .navbar-website .logo-text-navbar:hover,
html[data-theme="light"] .language-body .user-settings-language:hover,
html[data-theme="light"] .language-body .user-settings-language.selected {
	background-color: var(--waterly-accent) !important;
	color: #ffffff !important;
}

html[data-theme="light"] .navbar-nav-language .user-settings-language-flag {
	border-color: rgba(31, 55, 75, 0.18);
	box-shadow: 0 2px 7px rgba(31, 55, 75, 0.18);
}



/* features/profile/theme.css */
/* Account settings follows the same resolved theme as the navbar and map. */
html[data-theme="light"] .account-settings-sheet {
	background: radial-gradient(circle at 4% 0, rgba(33, 150, 243, 0.1), transparent 28%), linear-gradient(145deg, rgba(249, 252, 254, 0.99), rgba(236, 243, 247, 0.99));
}

html[data-theme="light"] .account-settings-mobile-header { border-color: rgba(35, 91, 130, 0.15); background: rgba(255, 255, 255, 0.75); }
html[data-theme="light"] .account-settings-mobile-header > i,
html[data-theme="light"] .account-settings-mobile-header small { color: #176b9f; }
html[data-theme="light"] .account-settings-mobile-header > i { border-color: rgba(35, 91, 130, 0.2); }
html[data-theme="light"] .account-settings-mobile-header strong { color: #21313c; }

html[data-theme="light"] .notification-threshold-card,
html[data-theme="light"] .notification-subscriptions-card,
html[data-theme="light"] .password-change-card,
html[data-theme="light"] .account-danger-card,
html[data-theme="light"] .about-waterly-hero,
html[data-theme="light"] .about-waterly-contact,
html[data-theme="light"] .about-waterly-location,
html[data-theme="light"] .about-waterly-footer,
html[data-theme="light"] .developer-card {
	color: #21313c;
	border-color: rgba(35, 91, 130, 0.15);
	background-color: rgba(255, 255, 255, 0.75);
}

html[data-theme="light"] .account-settings-user-summary {
	border-color: #d2e1e9;
	background: transparent;
}

html[data-theme="light"] .account-settings-hero-copy > span,
html[data-theme="light"] .account-settings-navigation-copy > span,
html[data-theme="light"] .account-settings-user-summary > span {
	color: #176b9f;
}

html[data-theme="light"] .account-settings-tabs .account-settings-tab {
	color: #43596a !important;
}

html[data-theme="light"] .account-settings-tabs .account-settings-tab i {
	color: #516672;
}

html[data-theme="light"] .account-settings-tabs .account-settings-tab:hover,
html[data-theme="light"] .account-settings-tabs .account-settings-tab:focus-visible {
	color: #10466f !important;
	border-color: #779dbb;
	background: #eaf3fa;
}

html[data-theme="light"] .account-settings-tabs .account-settings-tab.active {
	color: #10466f !important;
	border-color: transparent;
	background: #e3f1f7;
}

html[data-theme="light"] .account-settings-tabs .account-settings-tab:hover i,
html[data-theme="light"] .account-settings-tabs .account-settings-tab:focus-visible i,
html[data-theme="light"] .account-settings-tabs .account-settings-tab.active i {
	color: #176b9f;
}

html[data-theme="light"] .account-settings-tabs .account-settings-tab:focus-visible {
	outline: 2px solid #147ac1;
	outline-offset: 2px;
}

html[data-theme="light"] .account-settings-content label {
	color: #43596a;
}

html[data-theme="light"] .account-profile-tab {
	--profile-text: #16263A;
	--profile-muted: #4A5B6E;
	--profile-border: #D5DDE5;
	--profile-surface: #FFFFFF;
	--profile-field: #F4F8FB;
	--profile-accent: #0F6DB3;
}
html[data-theme="light"] .account-profile-tab .account-profile-field .form-control { border-color: var(--profile-border); }
html[data-theme="light"] .profile-phone-error { color: #B42318 !important; }
html[data-theme="light"] .profile-preference-option.selected { border-color: #0F6DB3; }
html[data-theme="light"] .profile-preference-option.selected :is(i, .profile-preference-symbol) { color: #E8F3FB; }
html[data-theme="light"] .account-profile-tab :is(.form-control, .profile-preference-option, .profile-language-toggle, .profile-phone-toggle, .user-save):focus-visible { outline-color: #0F6DB3; }
html[data-theme="light"] .account-group-label { color: #4A5B6E; }
html[data-theme="light"] .account-group-name { color: #16263A; }
html[data-theme="light"] .account-group-card .group-url a { color: #0F6DB3; }
html[data-theme="light"] .account-group-card .group-url a:focus-visible { outline-color: #0F6DB3; }
html[data-theme="light"] .account-group-logo-dark { display: none; }
html[data-theme="light"] .account-group-logo-light { display: block; }

html[data-theme="light"] .account-settings-content .form-select {
	min-height: 42px;
	border: 1px solid #779dbb !important;
	border-radius: 9px;
}

html[data-theme="light"] .account-settings-content .form-select:focus {
	border-color: #147ac1 !important;
	box-shadow: 0 0 0 3px rgba(20, 122, 193, 0.2);
}

/* API keys and widget generator follow the same light palette as the rest of the sheet. */
html[data-theme="light"] .developer-switch-option,
html[data-theme="light"] .developer-option,
html[data-theme="light"] .api-key-row,
html[data-theme="light"] .widget-row,
html[data-theme="light"] .widget-generator-preview {
	color: #516672;
	border-color: rgba(35, 91, 130, 0.14);
	background: rgba(255, 255, 255, 0.75);
}

html[data-theme="light"] .developer-switch-option.selected,
html[data-theme="light"] .developer-option.selected {
	color: #10466f;
	border-color: rgba(20, 122, 193, 0.4);
	background: rgba(33, 150, 243, 0.12);
}

html[data-theme="light"] .developer-card-heading h3,
html[data-theme="light"] .api-key-row-title strong,
html[data-theme="light"] .widget-row-title strong,
html[data-theme="light"] .api-key-row-meta strong,
html[data-theme="light"] .widget-preview-heading strong,
html[data-theme="light"] .widget-code-heading strong {
	color: #172a36;
}

html[data-theme="light"] .developer-field > span {
	color: #43596a;
}

html[data-theme="light"] .api-docs-endpoint,
html[data-theme="light"] .api-docs-example,
html[data-theme="light"] .widget-code,
html[data-theme="light"] .widget-preview-stage {
	border-color: rgba(35, 91, 130, 0.14);
	background-color: rgba(238, 244, 249, 0.9);
}

html[data-theme="light"] .api-docs-example code,
html[data-theme="light"] .widget-code code {
	color: #27424f;
}

html[data-theme="light"] .api-docs-endpoint {
	color: #10466f;
}

html[data-theme="light"] .account-settings-hero-copy h1,
html[data-theme="light"] .account-settings-user-summary strong,
html[data-theme="light"] .account-settings-navigation-copy strong,
html[data-theme="light"] .account-preferences-heading strong,
html[data-theme="light"] .account-section-hero h2,
html[data-theme="light"] .notification-threshold-copy strong,
html[data-theme="light"] .notification-subscriptions-heading h3,
html[data-theme="light"] .security-card-heading h3,
html[data-theme="light"] .account-danger-card h3,
html[data-theme="light"] .about-waterly-hero-copy h2,
html[data-theme="light"] .about-waterly-contact h3,
html[data-theme="light"] .about-waterly-card-heading h3,
html[data-theme="light"] .about-waterly-address strong,
html[data-theme="light"] .about-waterly-social h3,
html[data-theme="light"] .about-waterly-version strong {
	color: #172a36;
}

html[data-theme="light"] .account-settings-content .form-control {
	color: #1d303c;
	border-color: #7b919f;
	background: rgba(255, 255, 255, 0.86);
}

html[data-theme="light"] .account-settings-content .form-control::placeholder {
	color: #596e7c;
}

html[data-theme="light"] .account-settings-content .form-control:hover:not(:disabled):not(:focus) {
	border-color: #526f82;
}

html[data-theme="light"] .account-settings-content .form-control:focus {
	border-color: #176da6;
	background: #ffffff;
	box-shadow: 0 0 0 3px rgba(23, 109, 166, 0.2);
}

html[data-theme="light"] .account-settings-content .form-control:disabled {
	color: #667985;
	background: rgba(215, 225, 232, 0.8);
}

html[data-theme="light"] .profile-language-toggle,
html[data-theme="light"] .profile-phone-toggle,
html[data-theme="light"] .profile-preference-option,
html[data-theme="light"] .about-waterly-social nav a {
	color: #516672;
	border-color: rgba(35, 91, 130, 0.14);
	background: rgba(255, 255, 255, 0.75);
}

html[data-theme="light"] .profile-language-toggle:hover,
html[data-theme="light"] .profile-language-toggle:focus,
html[data-theme="light"] .profile-phone-toggle:hover:not(:disabled),
html[data-theme="light"] .profile-phone-toggle:focus:not(:disabled),
html[data-theme="light"] .profile-preference-option.selected {
	color: #FFFFFF;
	background: #0F6DB3;
}

html[data-theme="light"] .profile-language-menu,
html[data-theme="light"] .profile-phone-menu {
	border-color: rgba(35, 91, 130, 0.16);
	background: #ffffff;
	box-shadow: 0 18px 38px rgba(35, 91, 130, 0.18);
}
html[data-theme="light"] .profile-language-option,
html[data-theme="light"] .profile-phone-option { color: #516672; }
html[data-theme="light"] .profile-language-option:hover,
html[data-theme="light"] .profile-language-option:focus,
html[data-theme="light"] .profile-language-option.selected,
html[data-theme="light"] .profile-phone-option:hover,
html[data-theme="light"] .profile-phone-option:focus,
html[data-theme="light"] .profile-phone-option.selected { color: #ffffff; background: #218fdc; }
html[data-theme="light"] .profile-language-option.selected i,
html[data-theme="light"] .profile-language-option:hover i,
html[data-theme="light"] .profile-phone-option.selected i,
html[data-theme="light"] .profile-phone-option:hover i { color: #ffffff; }

html[data-theme="light"] .notifications-subscriptions-table,
html[data-theme="light"] .notifications-subscriptions-table tbody td { color: #405763; }
html[data-theme="light"] .notification-threshold-card {
	border-color: rgba(37, 119, 165, 0.16);
	background:
		radial-gradient(circle at 0 0, rgba(27, 181, 143, 0.09), transparent 40%),
		linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(242, 248, 250, 0.96));
	box-shadow: 0 9px 28px rgba(31, 82, 111, 0.06), inset 0 1px #ffffff;
}
html[data-theme="light"] .notification-threshold-copy span { color: #607582; }
html[data-theme="light"] .notification-threshold-control {
	border-color: rgba(34, 104, 142, 0.12);
	background: rgba(236, 245, 248, 0.72);
}
html[data-theme="light"] .notification-threshold-value {
	border-color: rgba(20, 166, 127, 0.3);
	color: #12956f;
	background: linear-gradient(145deg, rgba(40, 199, 157, 0.14), rgba(255, 255, 255, 0.84));
	box-shadow: 0 8px 20px rgba(21, 120, 94, 0.08), inset 0 1px #ffffff;
}
html[data-theme="light"] .notification-threshold-value small { color: #4b8776; }
html[data-theme="light"] .notification-threshold-scale { color: #6c818d; }
html[data-theme="light"] .notification-subscriptions-card {
	border-color: rgba(37, 119, 165, 0.15);
	background: rgba(255, 255, 255, 0.9);
	box-shadow: 0 9px 28px rgba(31, 82, 111, 0.055), inset 0 1px #ffffff;
}
html[data-theme="light"] .notification-subscriptions-heading { border-color: rgba(35, 91, 130, 0.11); }
html[data-theme="light"] .notification-subscriptions-status {
	border-color: rgba(18, 166, 125, 0.22);
	color: #21866c;
	background: rgba(28, 190, 146, 0.07);
}
html[data-theme="light"] .notification-subscriptions-status b { color: #267c68; }
html[data-theme="light"] .notification-threshold-row {
	border-color: rgba(35, 91, 130, 0.11);
	background: rgba(248, 252, 254, 0.78);
}
html[data-theme="light"] .notification-threshold-row:hover { border-color: rgba(33, 150, 243, 0.22); background: rgba(33, 150, 243, 0.035); }
html[data-theme="light"] .notification-threshold-row-copy small { color: #667d89; }
html[data-theme="light"] .notification-threshold-row-copy strong { color: #203641; }
html[data-theme="light"] .notification-threshold-row-icon { border-color: rgba(16, 157, 119, 0.19); color: #168c6c; background: rgba(25, 179, 138, 0.07); }
html[data-theme="light"] .notification-threshold-bound { border-color: rgba(194, 125, 35, 0.17); color: #9b681f; background: rgba(231, 157, 58, 0.08); }
html[data-theme="light"] .notification-threshold-bound.is-alarm { border-color: rgba(207, 65, 81, 0.17); color: #c64353; background: rgba(231, 72, 88, 0.07); }
html[data-theme="light"] .notification-threshold-state { color: #257b66; background: rgba(25, 179, 138, 0.07); }
html[data-theme="light"] .notification-threshold-open { border-color: rgba(28, 123, 185, 0.17); color: #176b9f; background: rgba(33, 150, 243, 0.055); }
html[data-theme="light"] .notification-threshold-empty { color: #667d89; }
html[data-theme="light"] .notification-threshold-empty strong { color: #304955; }
html[data-theme="light"] .notifications-subscriptions-table thead th { color: #607682; background: rgba(35, 91, 130, 0.05); }
html[data-theme="light"] .notifications-subscriptions-table tbody td { border-color: rgba(35, 91, 130, 0.08); }
html[data-theme="light"] .notifications-subscriptions-table tbody tr:hover { background: rgba(33, 150, 243, 0.045); }
html[data-theme="light"] .notifications-subscriptions-table .delete-subscription-btn {
	border-color: rgba(213, 66, 82, 0.2);
	color: #d74c5d;
	background: rgba(235, 77, 95, 0.055);
}
html[data-theme="light"] .notification-empty-row div { color: #607581; }
html[data-theme="light"] .notification-empty-row i { color: #7198ab; }


html[data-theme="light"] .about-waterly-brand { background: rgba(255, 255, 255, 0.68); }

html[data-theme="light"] .account-created-meta { border-color: #c5d8e7; }
html[data-theme="light"] .account-created-meta > span { color: #43596a; }

/* About Waterly: replace dark gradients as well as their background colours. */
html[data-theme="light"] .about-waterly-hero {
	background: radial-gradient(circle at 12% 45%, rgba(33, 150, 243, 0.12), transparent 36%), linear-gradient(135deg, #edf6fc, #f8fbfd);
}
html[data-theme="light"] .about-waterly-hero-copy > span,
html[data-theme="light"] .about-waterly-contact > span,
html[data-theme="light"] .about-waterly-card-heading span,
html[data-theme="light"] .about-waterly-social > div > span { color: #176b9f; }
html[data-theme="light"] .about-waterly-hero-copy p,
html[data-theme="light"] .about-waterly-contact p,
html[data-theme="light"] .about-waterly-address span,
html[data-theme="light"] .about-waterly-version > span { color: #526170; }
html[data-theme="light"] .about-waterly-contact .account-section-icon,
html[data-theme="light"] .about-waterly-card-heading > i,
html[data-theme="light"] .about-waterly-address > i { color: #176b9f; }
html[data-theme="light"] .about-waterly-primary-link,
html[data-theme="light"] .about-waterly-secondary-link,
html[data-theme="light"] .about-waterly-map-popup > a {
	color: #176b9f;
	border-color: #c5d8e7;
	background: #f0f7fc;
}
html[data-theme="light"] .about-waterly-primary-link:hover,
html[data-theme="light"] .about-waterly-secondary-link:hover,
html[data-theme="light"] .about-waterly-map-popup > a:hover,
html[data-theme="light"] .about-waterly-social nav a:hover {
	color: #10466f;
	border-color: #779dbb;
	background: #dcecf9;
}
html[data-theme="light"] #settings-body-about-us a:focus-visible {
	outline: 2px solid #147ac1;
	outline-offset: 2px;
}
html[data-theme="light"] .about-waterly-version,
html[data-theme="light"] .about-waterly-map-wrap { border-color: #c5d8e7; }
html[data-theme="light"] .about-waterly-maptiler-popup .maplibregl-popup-content {
	color: #21313c;
	border-color: #c5d8e7;
	background: linear-gradient(145deg, #f0f7fc, #ffffff);
	box-shadow: 0 12px 30px rgba(35, 91, 130, 0.2);
}
html[data-theme="light"] .about-waterly-maptiler-popup .maplibregl-popup-tip {
	border-top-color: #ffffff;
	border-bottom-color: #ffffff;
}
html[data-theme="light"] .about-waterly-map-popup-header strong { color: #172a36; }
html[data-theme="light"] .about-waterly-map-popup-header > span,
html[data-theme="light"] .about-waterly-map-popup-address i,
html[data-theme="light"] .about-waterly-map-popup > a .bi-box-arrow-up-right { color: #176b9f; }
html[data-theme="light"] .about-waterly-map-popup-address {
	color: #43596a;
	border-color: #c5d8e7;
	background: #f4f8fb;
}


html[data-theme="light"] .account-settings-navigation { background: #f1f8fb; border-color: #d5e3eb; }
.account-settings-tabs .account-settings-tab::after { position: absolute; bottom: 0; left: 12px; right: 12px; height: 2px; border-radius: 2px; background: currentColor; content: ""; opacity: 0; }
.account-settings-tabs .account-settings-tab.active::after { opacity: .8; }
.account-settings-tabs .account-settings-tab span { font-size: inherit; }

html[data-theme="light"] .account-settings-content .profile-theme-select.form-select {
	color: #516672 !important;
	border-color: rgba(35, 91, 130, .14) !important;
	background-color: rgba(255, 255, 255, .75) !important;
}
html[data-theme="light"] .account-settings-content .profile-theme-select.form-select:focus { border-color: #147ac1 !important; }

html[data-theme="light"] .profile-unit-description { color: #16263A; border-color: #D5DDE5; background: #FFFFFF; }
html[data-theme="light"] .account-measurement-preference:has([value="metric"].selected) .profile-unit-description--metric,
html[data-theme="light"] .account-measurement-preference:has([value="imperial"].selected) .profile-unit-description--imperial { border-color: #0F6DB3; background: #F4F8FB; }
html[data-theme="light"] .profile-unit-category + .profile-unit-category { border-color: #D5DDE5; }
html[data-theme="light"] .profile-unit-category dt { color: #4A5B6E; }
html[data-theme="light"] .profile-unit-entry { border-color: #D5DDE5; background: #F4F8FB; }
html[data-theme="light"] .profile-unit-notation { color: #0F6DB3; }

html[data-theme="light"] .profile-unit-help > summary:focus-visible { outline-color: #0F6DB3; }


/* shared/ui/dialog-theme.css */
html[data-theme="light"] .waterly-dialog .modal-content {
	border-color: rgba(34, 91, 125, 0.15);
	background:
		radial-gradient(circle at 0 0, rgba(33, 150, 243, 0.08), transparent 42%),
		#ffffff;
	box-shadow: 0 28px 80px rgba(28, 56, 72, 0.25), inset 0 1px #ffffff;
}
html[data-theme="light"] .waterly-dialog .modal-footer { border-color: rgba(35, 91, 130, 0.1); }
html[data-theme="light"] .waterly-dialog .lobibox-btn.btn-secondary {
	border-color: rgba(45, 91, 117, 0.16);
	color: #506773;
	background: rgba(42, 91, 119, 0.06);
}
html[data-theme="light"] .waterly-dialog-message-icon {
	border-color: rgba(220, 64, 80, 0.2);
	color: #d84d5c;
	background: rgba(231, 72, 88, 0.07);
}




/* features/navigation/context-theme.css */
html[data-theme="light"] .navbar-website .navbar-menu-tree {
	border-color: rgba(31, 92, 121, .16);
	background: rgba(246, 251, 253, .82);
	box-shadow: 0 14px 34px rgba(27, 63, 82, .14), inset 0 1px rgba(255, 255, 255, .7);
}
html[data-theme="light"] .navbar-website .navbar-context-trigger > i { color: #158a98; }
html[data-theme="light"] .navbar-website .navbar-context-copy small { color: #718995; }

html[data-theme="light"] .navbar-website .navbar-menu-tree .nav-menu-tree-view,
html[data-theme="light"] .navbar-website .navbar-menu-tree .nav-menu-tree-link:hover,
html[data-theme="light"] .navbar-website .navbar-menu-tree .nav-menu-tree-link.show {
	border-color: rgba(22, 151, 164, .24) !important;
	color: #123947 !important;
	background: linear-gradient(135deg, rgba(42, 180, 188, .14), rgba(60, 139, 193, .1)) !important;
}

html[data-theme="light"] .navbar-website .navbar-menu-tree .dropdown-menu .dropdown-menu-el.active,
html[data-theme="light"] .navbar-website .navbar-menu-tree .dropdown-menu .dropdown-menu-el:hover {
	border-color: rgba(22, 151, 164, .22);
	color: #123947;
	background: linear-gradient(135deg, rgba(42, 180, 188, .14), rgba(60, 139, 193, .09));
}

html[data-theme="light"] .navbar-website .navbar-menu-tree .dropdown-menu .dropdown-menu-name { color: #193947; }
html[data-theme="light"] .navbar-website .navbar-menu-tree .dropdown-menu .dropdown-menu-desc { color: #71838d; }



/* shared/map/theme.css */
/* Map overlay controls follow the map's matching light style.
   Compass permission/busy states retain their red surface and white needle. */
html[data-theme="light"] #main_map_content .waterly-ctrl:not(.waterly-ctrl-footer):not(.waterly-ctrl-legend):not(.waterly-ctrl-list):not(:where(.waterly-ctrl-compass.is-permission-required, .waterly-ctrl-compass.is-busy)),
html[data-theme="light"] #main_map_content .map-privacy,
html[data-theme="light"] #main_map_content .maplibregl-ctrl-group,
html[data-theme="light"] #main_map_content .maplibregl-ctrl-scale,
html[data-theme="light"] #main_map_content .map-layer-switcher,
html[data-theme="light"] #main_map_content .waterly-map-popover {
	border-color: rgba(28, 73, 104, 0.18);
	background: rgba(255, 255, 255, 0.94);
	box-shadow: 0 8px 24px rgba(31, 55, 75, 0.18);
	color: #344b5c;
}

html[data-theme="light"] #main_map_content .waterly-ctrl-brand span,
html[data-theme="light"] #main_map_content .waterly-ctrl-button,
html[data-theme="light"] #main_map_content .map-privacy,
html[data-theme="light"] #main_map_content .waterly-map-popover button {
	color: #344b5c;
}

html[data-theme="light"] #main_map_content .waterly-phone-compass-button {
	color: #173f56;
}

html[data-theme="light"] #main_map_content .waterly-ctrl-ar .waterly-ar-mode-icon {
	/* Match light SDK glyphs: no invert filter, dark slate stroke */
	color: #344b5c;
	filter: none;
}

html[data-theme="light"] #main_map_content .waterly-compass-needle-south {
	fill: #5f6368;
}

html[data-theme="light"] #main_map_content .waterly-ctrl-compass.is-permission-required,
html[data-theme="light"] #main_map_content .waterly-ctrl-compass.is-busy {
	border-color: rgba(198, 40, 40, 0.9);
	background: linear-gradient(145deg, #f04438, #c62828);
	box-shadow: 0 8px 22px rgba(198, 40, 40, 0.28);
}

html[data-theme="light"] #main_map_content .waterly-ctrl-compass.is-following {
	border-color: rgba(234, 67, 53, 0.4);
	background: rgba(255, 255, 255, 0.96);
	box-shadow: 0 8px 24px rgba(234, 67, 53, 0.16);
}

html[data-theme="light"] #main_map_content .waterly-ctrl-brand span {
	background: linear-gradient(90deg, #2193f3 0%, #104673 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* Contributors keep their opaque light surface. */
html[data-theme="light"] .waterly-map-attribution-content {
	border-color: rgba(28, 73, 104, 0.18);
	background: #ffffff;
	box-shadow: 0 8px 24px rgba(31, 55, 75, 0.18);
}

html[data-theme="light"] .waterly-map-attribution {
	color: #526879;
}

html[data-theme="light"] .waterly-map-attribution-logo {
	background-color: #147ac1;
}

html[data-theme="light"] .waterly-map-attribution-content .waterly-map-attribution-brand {
	color: #147ac1;
}

html[data-theme="light"] .waterly-map-attribution-content > b {
	color: #a3b0ba;
}

html[data-theme="light"] .waterly-map-attribution-content a {
	color: #344b5c;
}

html[data-theme="light"] .waterly-map-attribution-content a:hover,
html[data-theme="light"] .waterly-map-attribution-content a:focus-visible {
	color: #0d659f;
}

html[data-theme="light"] #main_map_content .waterly-ctrl-button:hover,
html[data-theme="light"] #main_map_content .waterly-map-popover button:hover,
html[data-theme="light"] #main_map_content .waterly-map-popover button.is-selected {
	background: rgba(20, 122, 193, 0.1);
	color: #0d659f;
}

html[data-theme="light"] #main_map_content .map-account-identity {
	border-bottom-color: rgba(20, 122, 193, 0.12);
}

html[data-theme="light"] #main_map_content .map-account-identity > span {
	background: rgba(20, 122, 193, 0.1);
	color: #147ab0;
}

html[data-theme="light"] #main_map_content .map-account-identity strong {
	color: #173241;
}

html[data-theme="light"] #main_map_content .map-account-identity small {
	color: #617987;
}

html[data-theme="light"] #main_map_content .map-account-app-version {
	border-top-color: rgba(20, 122, 193, 0.12);
}

html[data-theme="light"] #main_map_content .map-account-app-version > strong {
	color: #365666;
}

html[data-theme="light"] #main_map_content .maplibregl-ctrl-group button .maplibregl-ctrl-icon {
	filter: none;
}

html[data-theme="light"] #main_map_content .maplibregl-ctrl-group:has(.maplibregl-ctrl-zoom-in) button {
	border-color: rgba(28, 73, 104, 0.18);
	background: rgba(255, 255, 255, 0.94);
	box-shadow: 0 8px 24px rgba(31, 55, 75, 0.18);
}

html[data-theme="light"] #main_map_content .maplibregl-ctrl-group:has(.maplibregl-ctrl-zoom-in) button:hover {
	background: linear-gradient(rgba(105, 189, 247, 0.14), rgba(105, 189, 247, 0.14)),
		rgba(255, 255, 255, 0.94);
}

html[data-theme="light"] #main_map_content .waterly-ctrl-list {
	border-color: rgba(22, 150, 139, 0.34);
	background: rgba(245, 255, 253, 0.96);
	box-shadow: 0 9px 24px rgba(31, 55, 75, 0.18);
}

html[data-theme="light"] #main_map_content .waterly-ctrl-list .devices-list-selector {
	color: #147d73;
}

/* Chromium can promote the several small legend blurs into one pale rectangle over a light map. */
html[data-theme="light"] #main_map_content .wqi-map-legend::before,
html[data-theme="light"] #main_map_content .wqi-map-legend .wqi-legend-heading,
html[data-theme="light"] #main_map_content .wqi-map-legend .wqi-legend-stat,
html[data-theme="light"] #main_map_content .wqi-map-legend .wqi-legend-empty {
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

/* Privacy is a standalone control: composite the same hover tint over its surface. */
html[data-theme="light"] #main_map_content .map-privacy:hover,
html[data-theme="light"] #main_map_content .map-privacy:focus-visible {
    background: linear-gradient(rgba(20, 122, 193, 0.1), rgba(20, 122, 193, 0.1)), rgba(255, 255, 255, 0.94);
    color: #0d659f;
}


/* features/management/theme.css */
/**************************************************************************************************
	Point browser - lista punktów pomiarowych z wyszukiwarką (.tiles-list-contener)

	Panel był rysowany wyłącznie w wersji ciemnej: w motywie jasnym zostawał ciemny prostokąt,
	a pole wyszukiwania robiło się białą plamą, bo łapała je ogólna reguła dla input powyżej.
	Poniżej pełny komplet powierzchni, tekstów i stanów w wersji jasnej.
**************************************************************************************************/

html[data-theme="light"] {
    --waterly-points-sheet-background: radial-gradient(circle at 90% 4%, rgba(20, 150, 139, 0.08), transparent 27%), linear-gradient(155deg, #ffffff, #f2f6fa);
}

/* Powierzchnia panelu */
html[data-theme="light"] .tiles-list-contener {
	--tiles-list-clip-fill: #f2f6fa;
	border-left-color: rgba(28, 73, 104, 0.14);
	background: var(--waterly-points-sheet-background);
	box-shadow: -24px 0 70px rgba(31, 55, 75, 0.16);
}

/* Nagłówek */
html[data-theme="light"] .tiles-list-eyebrow {
	color: #12897c;
}

html[data-theme="light"] .tiles-list-eyebrow span {
	background: #16a394;
	box-shadow: 0 0 0 5px rgba(22, 163, 148, 0.12);
}

html[data-theme="light"] .tiles-list-heading h2 {
	color: #12222e;
}

html[data-theme="light"] .tiles-list-heading p {
	color: #5b6f7e;
}

html[data-theme="light"] .tiles-list-contener .close-tiles-list-contener {
	border-color: rgba(28, 73, 104, 0.16);
	background: #ffffff;
	color: #52697a;
	box-shadow: 0 4px 14px rgba(31, 55, 75, 0.1);
}

html[data-theme="light"] .tiles-list-contener .close-tiles-list-contener:hover {
	border-color: rgba(20, 122, 193, 0.4);
	background: rgba(20, 122, 193, 0.1);
	color: #0f6ea8;
}

/* Wyszukiwarka - ogólna reguła dla input ma !important, więc tutaj też jest potrzebny */
html[data-theme="light"] .tiles-list-search {
	border-color: rgba(28, 73, 104, 0.18);
	background: #ffffff;
	box-shadow: 0 4px 14px rgba(31, 55, 75, 0.08);
}

html[data-theme="light"] .tiles-list-search:focus-within {
	border-color: rgba(22, 163, 148, 0.55);
	box-shadow: 0 0 0 4px rgba(22, 163, 148, 0.12);
}

html[data-theme="light"] .tiles-list-search > i {
	color: #16a394;
}

html[data-theme="light"] .tiles-list-search input {
	border: 0 !important;
	background: transparent !important;
	color: #17212b !important;
}

html[data-theme="light"] .tiles-list-search input::placeholder {
	color: #8496a3;
}

html[data-theme="light"] .tiles-list-search-clear {
	background: transparent;
	color: #6d8290;
}

/* Podsumowanie i przycisk lokalizacji */
html[data-theme="light"] .tiles-list-summary {
	color: #64798a;
}

html[data-theme="light"] .tiles-list-location {
	color: #12897c;
}

html[data-theme="light"] .tiles-list-location:hover:not(:disabled) {
	color: #0d6f65;
}

/* Lista */
html[data-theme="light"] .tiles-list-results {
	scrollbar-color: rgba(28, 73, 104, 0.28) transparent;
}

html[data-theme="light"] .tiles-list-section-header {
	border-color: rgba(28, 73, 104, 0.18);
	background: linear-gradient(90deg, rgba(22, 163, 148, 0.055), transparent 58%), #ffffff;
	box-shadow: 0 4px 14px rgba(31, 55, 75, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

html[data-theme="light"] .tiles-list-section-heading > i {
	border-color: rgba(22, 163, 148, 0.28);
	background: rgba(22, 163, 148, 0.1);
	color: #12897c;
}

html[data-theme="light"] .tiles-list-section-heading strong {
	color: #12222e;
}

html[data-theme="light"] .tiles-list-section-heading small {
	color: #6b7f8d;
}

html[data-theme="light"] .tiles-list-section-count {
	border-color: rgba(28, 73, 104, 0.14);
	background: rgba(28, 73, 104, 0.05);
	color: #5b6f7e;
}

html[data-theme="light"] .is-favorites-section .tiles-list-section-heading > i {
	border-color: rgba(198, 145, 20, 0.3);
	background: rgba(230, 176, 40, 0.14);
	color: #a8790a;
}

html[data-theme="light"] .is-favorites-section .tiles-list-section-count {
	color: #a8790a;
}

/* Kafelek punktu */
html[data-theme="light"] .tile-list-el {
	border-color: rgba(28, 73, 104, 0.14);
	background: #ffffff;
	color: #2a3d4b;
	box-shadow: 0 10px 26px rgba(31, 55, 75, 0.08);
}

html[data-theme="light"] .tile-list-el:hover {
	border-color: rgba(22, 163, 148, 0.4);
	box-shadow: 0 14px 34px rgba(31, 55, 75, 0.14);
}

html[data-theme="light"] .tile-list-el.is-subscribed {
	border-color: rgba(198, 145, 20, 0.32);
	background: linear-gradient(125deg, rgba(230, 176, 40, 0.12), #ffffff);
}

/*
	Awatar WQI: na białej karcie tarcza musi być jasna, a wartość bierze kolor jakości wody,
	zamiast białego tekstu z cieniem dobranego pod ciemne tło.
*/
html[data-theme="light"] .tile-list-avatar {
	background: var(--tile-quality-bg, rgba(130, 151, 163, 0.12));
	box-shadow:
		inset 0 4px 6px -1px rgba(255, 255, 255, 0.45),
		0 4px 12px -2px var(--tile-quality-shadow, rgba(130, 151, 163, 0.22));
}

html[data-theme="light"] .tile-list-avatar-value {
	text-shadow: 0 2px 4px rgba(255, 255, 255, 0.5);
}

html[data-theme="light"] .tile-list-avatar-value small {
	color: color-mix(in srgb, var(--tile-quality-color, #8297a3) 72%, #1d2b36);
}

html[data-theme="light"] .tile-list-avatar-value strong {
	color: var(--tile-quality-color, #8297a3);
}

html[data-theme="light"] .tile-display-name {
	color: #12222e;
}

html[data-theme="light"] .tile-list-distance {
	color: #12897c;
}

html[data-theme="light"] .tile-description {
	color: #5b6f7e;
}

html[data-theme="light"] .tile-list-meta > span {
	background: rgba(28, 73, 104, 0.06);
	color: #5b6f7e;
}

html[data-theme="light"] .is-nearby .tile-list-nearby {
	background: rgba(22, 163, 148, 0.12);
	color: #12897c;
}

html[data-theme="light"] .is-subscribed .tile-list-subscribed {
	background: rgba(230, 176, 40, 0.16);
	color: #a8790a;
}

html[data-theme="light"] .tile-list-chevron {
	color: #9aabb7;
}

html[data-theme="light"] .tile-list-main:hover .tile-list-chevron {
	color: #12897c;
}

/* Pasek akcji kafelka */
html[data-theme="light"] .tile-list-actions {
	border-top-color: rgba(28, 73, 104, 0.1);
}

html[data-theme="light"] .tile-list-actions button {
	border-right-color: rgba(28, 73, 104, 0.1);
	background: rgba(28, 73, 104, 0.03);
	color: #5b6f7e;
}

html[data-theme="light"] .tile-list-actions button:hover {
	background: rgba(22, 163, 148, 0.1);
	color: #0d6f65;
}

/* Stan pusty */
html[data-theme="light"] .tiles-list-empty {
	color: #64798a;
}

html[data-theme="light"] .tiles-list-empty i {
	color: #16a394;
}

html[data-theme="light"] .tiles-list-empty strong {
	color: #12222e;
}

html[data-theme="light"] .is-places-section .tiles-list-section-heading > i {
	border-color: rgba(14, 116, 144, 0.2);
	background: rgba(14, 165, 233, 0.1);
	color: #0284c7;
}

html[data-theme="light"] .tiles-list-place {
	border-color: rgba(28, 73, 104, 0.12);
	background: rgba(255, 255, 255, 0.72);
	color: #1a303c;
}

html[data-theme="light"] .tiles-list-place:hover {
	border-color: rgba(2, 132, 199, 0.28);
	background: rgba(224, 242, 254, 0.7);
}

html[data-theme="light"] .tiles-list-place > i {
	border-color: rgba(14, 116, 144, 0.18);
	background: rgba(14, 165, 233, 0.1);
	color: #0284c7;
}

html[data-theme="light"] .tiles-list-place strong {
	color: #12222e;
}

html[data-theme="light"] .tiles-list-place small {
	color: #64798a;
}

html[data-theme="light"] .tiles-list-place em {
	color: #0369a1;
}

/**************************************************************************************************
	Selected point - szczegóły wybranego punktu na mapie (.select-tile-contener)

	Panel ma osobne, bogate wizualnie widgety. W jasnym motywie zachowujemy wodny charakter,
	ale wszystkie powierzchnie, teksty, kontrolki i stany dostają rzeczywisty wariant light.
**************************************************************************************************/

html[data-theme="light"] .select-tile-contener {
	color-scheme: light;
	border-color: rgba(28, 73, 104, 0.15);
	border-bottom: 0;
	background:
		radial-gradient(circle at 0 10%, rgba(22, 163, 148, 0.09), transparent 29%),
		radial-gradient(circle at 100% 72%, rgba(20, 122, 193, 0.08), transparent 35%),
		linear-gradient(90deg, #ffffff, #f5f9fb 76%, #eef6f8);
	box-shadow:
		22px 0 52px -30px rgba(31, 55, 75, 0.38),
		8px 0 24px -18px rgba(20, 122, 193, 0.24),
		inset -1px 0 rgba(28, 73, 104, 0.08);
	color: #243b49;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

html[data-theme="light"] .marker-panel-backdrop {
	background: rgba(225, 234, 238, 0.07);
	backdrop-filter: blur(1.5px);
	-webkit-backdrop-filter: blur(1.5px);
}

html[data-theme="light"] .marker-panel-custom-scrollbar {
	background: rgba(28, 73, 104, 0.08);
}

html[data-theme="light"] .marker-panel-custom-scrollbar > i {
	background: linear-gradient(to bottom, rgba(20, 150, 139, 0.3), rgba(20, 122, 193, 0.7) 22%, rgba(20, 122, 193, 0.7) 78%, rgba(20, 150, 139, 0.3));
	box-shadow: none;
}

html[data-theme="light"] .select-tile-contener .marker-main-header {
	border: 1px solid rgba(28, 73, 104, 0.13);
	background: #ffffff;
	color: #52697a;
}

html[data-theme="light"] .select-tile-contener .select-tile-contener-color {
	color: #52697a;
}

html[data-theme="light"] .select-tile-contener .select-tile-header-name {
	color: #173241;
}

html[data-theme="light"] .select-tile-contener .select-tile-header-desc {
	color: #617987;
}

html[data-theme="light"] .select-tile-contener .marker-main-contener-control .close-tiles-contener {
	border-color: rgba(28, 73, 104, 0.16);
	background: #ffffff;
	color: #52697a !important;
	box-shadow: 0 5px 16px rgba(31, 55, 75, 0.11);
}

html[data-theme="light"] .select-tile-contener .marker-main-contener-control .close-tiles-contener:hover {
	border-color: rgba(20, 122, 193, 0.38);
	background: #eaf5fb;
	color: #0f6ea8 !important;
}

/* Najważniejsza karta pozostaje skupiona na jakości wody, lecz bez ciemnej tafli. */
html[data-theme="light"] .select-tile-contener .marker-water-hero-card {
	--water-ink: #173241;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

html[data-theme="light"] .select-tile-contener .marker-atmosphere-card::before,
html[data-theme="light"] .select-tile-contener .marker-atmosphere-card::after,
html[data-theme="light"] .select-tile-contener .marker-main-contener-sponsor::after {
	background-image:
		linear-gradient(rgba(28, 73, 104, 0.055) 1px, transparent 1px),
		linear-gradient(90deg, rgba(28, 73, 104, 0.055) 1px, transparent 1px);
}

html[data-theme="light"] .select-tile-contener .marker-water-hero-card::before {
	background:
		radial-gradient(circle at 24% 32%, color-mix(in srgb, var(--wqi-color, #16a394) 11%, transparent), transparent 42%),
		radial-gradient(circle at 88% 70%, rgba(14, 165, 233, 0.06), transparent 38%);
}

html[data-theme="light"] .select-tile-contener .marker-water-hero-card::after {
	display: none;
}

html[data-theme="light"] .select-tile-contener .marker-water-release-badge {
	border-color: rgba(28, 73, 104, 0.14);
	background: rgba(255, 255, 255, 0.96);
	color: #587080;
	box-shadow: 0 7px 17px rgba(31, 55, 75, 0.1);
}

html[data-theme="light"] .select-tile-contener .marker-water-hero-header {
	border-bottom: 0;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.62), transparent);
}

html[data-theme="light"] .select-tile-contener .marker-water-hero-title strong,
html[data-theme="light"] .select-tile-contener .marker-water-hero-summary strong {
	color: #173241;
}

html[data-theme="light"] .select-tile-contener .marker-water-hero-title small,
html[data-theme="light"] .select-tile-contener .marker-water-hero-summary small,
html[data-theme="light"] .select-tile-contener .marker-water-hero-ring small,
html[data-theme="light"] .select-tile-contener .marker-water-hero-ring em,
html[data-theme="light"] .select-tile-contener .marker-water-hero-stats small,
html[data-theme="light"] .select-tile-contener .marker-water-hero-history > header small,
html[data-theme="light"] .select-tile-contener .marker-water-hero-history > footer,
html[data-theme="light"] .select-tile-contener .marker-water-history-labels > span {
	color: #607b8b;
}

html[data-theme="light"] .select-tile-contener .marker-water-hero-stats strong,
html[data-theme="light"] .select-tile-contener .marker-water-temperature-copy > strong {
	color: #173241;
}

html[data-theme="light"] .select-tile-contener .marker-water-temperature-copy > small,
html[data-theme="light"] .select-tile-contener .marker-water-temperature-copy > strong em,
html[data-theme="light"] .select-tile-contener .marker-water-temperature-stats small {
	color: #607b8b;
}

html[data-theme="light"] .select-tile-contener .marker-water-temperature-stats strong {
	color: #365666;
}

html[data-theme="light"] .select-tile-contener .marker-water-temperature-stats > span + span {
	border-left-color: rgba(28, 73, 104, 0.11);
}

html[data-theme="light"] .select-tile-contener .marker-water-hero-live {
	border-color: rgba(18, 145, 113, 0.24);
	background: rgba(22, 163, 122, 0.1);
	color: #117d61;
}

html[data-theme="light"] .select-tile-contener .marker-water-hero-live > small {
	color: #45695d;
}

html[data-theme="light"] .select-tile-contener .marker-water-hero-live.is-stale {
	border-color: rgba(198, 145, 20, 0.34);
	background: rgba(230, 176, 40, 0.16);
	color: #a8790a;
}

html[data-theme="light"] .select-tile-contener .marker-water-hero-live.is-stale > small {
	color: #8d6914 !important;
}

html[data-theme="light"] .select-tile-contener .marker-water-hero-live.is-unavailable {
	border-color: rgba(28, 73, 104, 0.18);
	background: rgba(28, 73, 104, 0.06);
	color: #5b6f7e;
}

html[data-theme="light"] .select-tile-contener .marker-water-hero-live.is-unavailable > small {
	color: #6b7f8d !important;
}

html[data-theme="light"] .select-tile-contener .marker-water-hero-no-data {
	background: transparent;
}

html[data-theme="light"] .select-tile-contener .marker-water-hero-no-data strong {
	color: #274452;
}

html[data-theme="light"] .select-tile-contener .marker-water-hero-no-data small {
	color: #607b8b;
}

html[data-theme="light"] .select-tile-contener .marker-compact-sensor {
	border-color: color-mix(in srgb, var(--sensor-color) 24%, rgba(28, 73, 104, 0.14));
	background:
		radial-gradient(circle at 0 0, color-mix(in srgb, var(--sensor-color) 9%, transparent), transparent 45%),
		rgba(255, 255, 255, 0.62);
}

html[data-theme="light"] .select-tile-contener .marker-compact-sensor > header {
	border-bottom-color: rgba(28, 73, 104, 0.08);
}

html[data-theme="light"] .select-tile-contener .marker-compact-sensor > header strong,
html[data-theme="light"] .select-tile-contener .marker-compact-sensor-metric strong {
	color: #274452;
}

html[data-theme="light"] .select-tile-contener .marker-compact-sensor-metric {
	background: rgba(226, 239, 244, 0.48);
}

html[data-theme="light"] .select-tile-contener .marker-compact-sensor-metric.is-primary strong {
	color: color-mix(in srgb, var(--sensor-color) 75%, #173241);
}

html[data-theme="light"] .select-tile-contener .marker-compact-sensor-metric small,
html[data-theme="light"] .select-tile-contener .marker-compact-sensor-metric em {
	color: #607b8b;
}

html[data-theme="light"] .select-tile-contener .marker-shared-multi-table.marker-multi-sensor-table {
	border: 0;
	background: transparent;
}

html[data-theme="light"] .select-tile-contener .marker-shared-multi-table .marker-multi-sensor-columns {
	border-bottom-color: rgba(28, 73, 104, 0.1);
}

html[data-theme="light"] .select-tile-contener .marker-shared-multi-table .marker-multi-sensor-row {
	border-color: rgba(28, 73, 104, 0.1);
	background: rgba(226, 239, 244, 0.42);
}

html[data-theme="light"] .select-tile-contener .marker-shared-multi-table .marker-multi-sensor-sensor > strong,
html[data-theme="light"] .select-tile-contener .marker-shared-multi-table .marker-multi-sensor-value strong {
	color: #274452;
}

html[data-theme="light"] .select-tile-contener .marker-shared-multi-table .marker-multi-sensor-value.is-primary strong {
	color: #274452;
}

html[data-theme="light"] .select-tile-contener .marker-water-hero-orbit {
	border-color: rgba(20, 122, 193, 0.11);
	background: radial-gradient(circle, rgba(255, 255, 255, 0.92), rgba(224, 242, 247, 0.5) 64%, transparent 65%);
}

html[data-theme="light"] .select-tile-contener .marker-water-hero-orbit::before,
html[data-theme="light"] .select-tile-contener .marker-water-hero-orbit::after {
	border-color: rgba(20, 122, 193, 0.16);
}

html[data-theme="light"] .select-tile-contener .marker-water-hero-ring::before {
	border-color: rgba(28, 73, 104, 0.08);
	background: radial-gradient(circle at 38% 28%, #ffffff, #edf6f8 74%);
}

html[data-theme="light"] .select-tile-contener .marker-water-history-point-visible {
	fill: #ffffff;
}

html[data-theme="light"] .select-tile-contener .marker-water-history-tooltip {
	border-color: color-mix(in srgb, var(--wqi-color, #16a394) 32%, rgba(28, 73, 104, 0.16));
	background: rgba(255, 255, 255, 0.98);
	color: #173241;
	box-shadow: 0 9px 24px rgba(31, 55, 75, 0.16);
}

html[data-theme="light"] .select-tile-contener .marker-water-history-tooltip::after {
	background: #ffffff;
}

html[data-theme="light"] .select-tile-contener .marker-water-hero-temperature,
html[data-theme="light"] .select-tile-contener .marker-water-hero-quick-action {
	border-color: rgba(28, 73, 104, 0.13);
	background: rgba(255, 255, 255, 0.72);
	color: #274452;
	box-shadow: inset 0 1px rgba(255, 255, 255, 0.85);
}

html[data-theme="light"] .select-tile-contener .marker-water-hero-temperature:hover,
html[data-theme="light"] .select-tile-contener .marker-water-hero-quick-action:hover {
	border-color: rgba(20, 122, 193, 0.35);
	background: #e8f5fa;
}

html[data-theme="light"] .select-tile-contener .marker-water-hero-quick-action::after {
	border-color: rgba(28, 73, 104, 0.16);
	color: #173241;
	background: rgba(255, 255, 255, 0.98);
	box-shadow: 0 8px 22px rgba(31, 55, 75, 0.18);
}

html[data-theme="light"] .select-tile-contener .marker-water-hero-action-rich-hint {
	border-color: rgba(28, 73, 104, 0.16);
	color: #173241;
	background: rgba(255, 255, 255, 0.98);
	box-shadow: 0 8px 22px rgba(31, 55, 75, 0.18);
}

html[data-theme="light"] .select-tile-contener .marker-water-hero-action-rich-hint > a {
	color: #0877a7;
}

html[data-theme="light"] .select-tile-contener .marker-water-hero-action-rich-hint > a:hover,
html[data-theme="light"] .select-tile-contener .marker-water-hero-action-rich-hint > a:focus-visible {
	color: #064f71;
}

html[data-theme="light"] .select-tile-contener .marker-water-hero-footer {
	border-top-color: rgba(28, 73, 104, 0.09);
	background: rgba(233, 244, 247, 0.62);
	color: #607b8b;
}

html[data-theme="light"] .select-tile-contener .marker-water-hero-brand,
html[data-theme="light"] .select-tile-contener .marker-water-hero-brand > strong {
	color: #365666;
}

html[data-theme="light"] .select-tile-contener .marker-water-hero-brand > small {
	color: #718692;
}

html[data-theme="light"] .select-tile-contener .marker-water-hero-quick-action i {
	color: #147ab0;
}

html[data-theme="light"] .select-tile-contener .marker-water-hero-quick-action.is-observed {
	border-color: rgba(225, 58, 91, 0.32);
	background: linear-gradient(155deg, #fff5f7, #fde8ed);
	color: #a52342;
	box-shadow: inset 0 1px rgba(255, 255, 255, 0.9), 0 7px 18px rgba(180, 45, 75, 0.12);
}

html[data-theme="light"] .select-tile-contener .marker-water-hero-quick-action.is-observed i,
html[data-theme="light"] .select-tile-contener .marker-water-hero-quick-action.is-observed:hover i {
	color: #df365c;
}

html[data-theme="light"] .select-tile-contener .marker-water-hero-quick-action.is-observed:hover {
	border-color: rgba(225, 58, 91, 0.48);
	background: #fde2e9;
	color: #861b35;
}

html[data-theme="light"] .select-tile-contener .marker-water-hero-quick-action[data-action="alarms"][data-alarm-state="warning"] {
	border-color: rgba(217, 145, 20, 0.38);
	color: #b45309;
}

html[data-theme="light"] .select-tile-contener .marker-water-hero-quick-action[data-action="alarms"][data-alarm-state="warning"] i {
	color: #d97706;
}

html[data-theme="light"] .select-tile-contener .marker-water-hero-quick-action[data-action="alarms"][data-alarm-state="alarm"] {
	border-color: rgba(217, 47, 61, 0.4);
	color: #a52342;
}

html[data-theme="light"] .select-tile-contener .marker-water-hero-quick-action[data-action="alarms"][data-alarm-state="alarm"] i {
	color: #df365c;
}

/* Ostrzeżenie statusu znajduje się bezpośrednio pod akcjami punktu. */
html[data-theme="light"] .select-tile-contener .marker-status-notice {
	--notice-accent: #d92f3d;
	--notice-glow: rgba(217, 47, 61, 0.16);
	border-color: rgba(217, 47, 61, 0.38);
	background:
		radial-gradient(circle at 5% 20%, rgba(235, 72, 84, 0.13), transparent 36%),
		linear-gradient(135deg, #fff8f8, #fdecef);
	box-shadow:
		0 16px 32px -24px rgba(109, 24, 35, 0.42),
		0 0 24px -17px var(--notice-glow),
		inset 0 1px rgba(255, 255, 255, 0.92);
	color: #721b25;
}

html[data-theme="light"] .select-tile-contener .marker-status-notice::before {
	opacity: 0.34;
	background-image:
		linear-gradient(rgba(180, 42, 54, 0.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(180, 42, 54, 0.06) 1px, transparent 1px);
}

html[data-theme="light"] .select-tile-contener .marker-status-notice.is-service,
html[data-theme="light"] .select-tile-contener .marker-status-notice.is-restricted {
	--notice-accent: #d92f3d;
	--notice-glow: rgba(217, 47, 61, 0.18);
}

html[data-theme="light"] .select-tile-contener .marker-status-notice-icon {
	border-color: rgba(217, 47, 61, 0.35);
	background: #ffffff;
	box-shadow:
		0 8px 18px -12px rgba(127, 24, 35, 0.48),
		inset 0 1px rgba(255, 255, 255, 0.9);
	color: #d92f3d;
}

html[data-theme="light"] .select-tile-contener .marker-status-notice-copy strong {
	color: #7f1d29;
}

html[data-theme="light"] .select-tile-contener .marker-status-notice-copy small,
html[data-theme="light"] .select-tile-contener .marker-status-notice.is-service .marker-status-notice-copy small {
	color: #9d3c46;
}

html[data-theme="light"] .select-tile-contener .marker-status-notice-pulse {
	background: #d92f3d;
	box-shadow: 0 0 0 5px rgba(217, 47, 61, 0.12), 0 0 12px rgba(217, 47, 61, 0.5);
}

/* Atmosfera: jasna karta wspierająca, wyraźnie spokojniejsza od karty jakości wody. */
html[data-theme="light"] .select-tile-contener .marker-atmosphere-card {
	--atmosphere-border: rgba(28, 73, 104, 0.15);
	border-color: var(--atmosphere-border);
	background: rgba(248, 251, 252, 0.96);
	box-shadow: 0 8px 18px -17px rgba(31, 55, 75, 0.34), inset 0 1px rgba(255, 255, 255, 0.88);
	color: #203845;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

html[data-theme="light"] .select-tile-contener .marker-atmosphere-minimal-header {
	border-bottom-color: rgba(28, 73, 104, 0.1);
	background: transparent;
}

html[data-theme="light"] .select-tile-contener .marker-atmosphere-minimal-header .marker-atmosphere-heading strong,
html[data-theme="light"] .select-tile-contener .marker-atmosphere-minimal-value,
html[data-theme="light"] .select-tile-contener .marker-atmosphere-minimal-stats strong {
	color: #173241;
}

html[data-theme="light"] .select-tile-contener .marker-atmosphere-minimal-header .marker-atmosphere-heading small,
html[data-theme="light"] .select-tile-contener .marker-atmosphere-minimal-label > span:first-child,
html[data-theme="light"] .select-tile-contener .marker-atmosphere-minimal-value span,
html[data-theme="light"] .select-tile-contener .marker-atmosphere-minimal-stats small {
	color: #627b89;
}

html[data-theme="light"] .select-tile-contener .marker-atmosphere-minimal-metric + .marker-atmosphere-minimal-metric,
html[data-theme="light"] .select-tile-contener .marker-atmosphere-minimal-stats > span + span {
	border-left-color: rgba(28, 73, 104, 0.11);
}

/* Na jasnym tle szkło termometru i kropli musi być ciemniejsze od podłoża,
   a refleksy zamiast bieli używają delikatnego błękitu. */
html[data-theme="light"] .select-tile-contener .marker-atmosphere-figure.is-thermometer .thermo-glass {
	fill: rgba(23, 50, 65, 0.05);
	stroke: rgba(28, 73, 104, 0.28);
}

html[data-theme="light"] .select-tile-contener .marker-atmosphere-figure.is-thermometer .thermo-track {
	fill: rgba(28, 73, 104, 0.12);
}

html[data-theme="light"] .select-tile-contener .marker-atmosphere-figure.is-thermometer .thermo-tick {
	stroke: rgba(28, 73, 104, 0.3);
}

html[data-theme="light"] .select-tile-contener .marker-atmosphere-figure.is-thermometer .thermo-shine,
html[data-theme="light"] .select-tile-contener .marker-atmosphere-figure.is-humidity-drop .drop-shine {
	stroke: rgba(255, 255, 255, 0.75);
}

html[data-theme="light"] .select-tile-contener .marker-atmosphere-figure.is-humidity-drop .drop-shell {
	fill: rgba(28, 73, 104, 0.07);
	stroke: rgba(28, 73, 104, 0.24);
}

html[data-theme="light"] .select-tile-contener .marker-atmosphere-minimal-trend b {
	background: rgba(255, 255, 255, 0.96);
	box-shadow: 0 4px 12px rgba(31, 55, 75, 0.13);
}

/* Graficzne widgety parametrów korzystają z tej samej jasnej powierzchni co WQI i atmosfera. */
html[data-theme="light"] .select-tile-contener .marker-water-temperature-card,
html[data-theme="light"] .select-tile-contener .marker-water-depth-card,
html[data-theme="light"] .select-tile-contener .marker-water-oxygen-card,
html[data-theme="light"] .select-tile-contener .marker-water-ph-card,
html[data-theme="light"] .select-tile-contener .marker-water-ec-card,
html[data-theme="light"] .select-tile-contener .marker-water-ions-card,
html[data-theme="light"] .select-tile-contener .marker-multi-sensor-card {
	border-color: rgba(28, 73, 104, 0.14);
	color: #203845;
	background: rgba(248, 251, 252, 0.96);
	box-shadow: 0 8px 18px -17px rgba(31, 55, 75, 0.34), inset 0 1px rgba(255, 255, 255, 0.88);
}

html[data-theme="light"] .select-tile-contener .marker-water-temperature-card:hover,
html[data-theme="light"] .select-tile-contener .marker-water-temperature-card:focus-visible,
html[data-theme="light"] .select-tile-contener .marker-water-depth-card:hover,
html[data-theme="light"] .select-tile-contener .marker-water-depth-card:focus-visible,
html[data-theme="light"] .select-tile-contener .marker-water-ph-card:hover,
html[data-theme="light"] .select-tile-contener .marker-water-ph-card:focus-visible,
html[data-theme="light"] .select-tile-contener .marker-water-ec-card:hover,
html[data-theme="light"] .select-tile-contener .marker-water-ions-card:hover,
html[data-theme="light"] .select-tile-contener .marker-multi-sensor-card:hover {
	box-shadow: 0 8px 18px -17px rgba(31, 55, 75, 0.34), inset 0 1px rgba(255, 255, 255, 0.9);
	transform: none;
}

html[data-theme="light"] .select-tile-contener .marker-water-temperature-header,
html[data-theme="light"] .select-tile-contener .marker-water-depth-header,
html[data-theme="light"] .select-tile-contener .marker-water-oxygen-header,
html[data-theme="light"] .select-tile-contener .marker-water-ph-header,
html[data-theme="light"] .select-tile-contener .marker-water-ec-header,
html[data-theme="light"] .select-tile-contener .marker-water-ions-header,
html[data-theme="light"] .select-tile-contener .marker-multi-sensor-header {
	border-bottom-color: rgba(28, 73, 104, 0.09);
	background: transparent;
}

html[data-theme="light"] .select-tile-contener .marker-water-temperature-heading strong,
html[data-theme="light"] .select-tile-contener .marker-water-depth-title strong,
html[data-theme="light"] .select-tile-contener .marker-water-oxygen-title strong,
html[data-theme="light"] .select-tile-contener .marker-water-ph-title strong,
html[data-theme="light"] .select-tile-contener .marker-water-ec-title strong,
html[data-theme="light"] .select-tile-contener .marker-water-ions-title strong,
html[data-theme="light"] .select-tile-contener .marker-water-ions-value > strong,
html[data-theme="light"] .select-tile-contener .marker-water-ions-balance-side > small,
html[data-theme="light"] .select-tile-contener .marker-multi-sensor-title strong,
html[data-theme="light"] .select-tile-contener .marker-water-temperature-value,
html[data-theme="light"] .select-tile-contener .marker-water-depth-reading > strong,
html[data-theme="light"] .select-tile-contener .marker-water-ph-value > strong,
html[data-theme="light"] .select-tile-contener .marker-water-ec-primary-value > strong,
html[data-theme="light"] .select-tile-contener .marker-water-ec-derived-value > strong,
html[data-theme="light"] .select-tile-contener .marker-water-oxygen-reading,
html[data-theme="light"] .select-tile-contener .marker-water-oxygen-context-item strong {
	color: #173241;
	text-shadow: none;
}

html[data-theme="light"] .select-tile-contener .marker-water-temperature-heading small,
html[data-theme="light"] .select-tile-contener .marker-water-temperature-scale > small,
html[data-theme="light"] .select-tile-contener .marker-water-temperature-summary small,
html[data-theme="light"] .select-tile-contener .marker-water-depth-reading > small,
html[data-theme="light"] .select-tile-contener .marker-water-depth-range,
html[data-theme="light"] .select-tile-contener .marker-water-depth-stats small,
html[data-theme="light"] .select-tile-contener .marker-water-oxygen-title small,
html[data-theme="light"] .select-tile-contener .marker-water-oxygen-core > small,
html[data-theme="light"] .select-tile-contener .marker-water-oxygen-name,
html[data-theme="light"] .select-tile-contener .marker-water-oxygen-reading > small,
html[data-theme="light"] .select-tile-contener .marker-water-oxygen-average > small,
html[data-theme="light"] .select-tile-contener .marker-water-oxygen-context-item small,
html[data-theme="light"] .select-tile-contener .marker-water-oxygen-range,
html[data-theme="light"] .select-tile-contener .marker-water-ph-title small,
html[data-theme="light"] .select-tile-contener .marker-water-ph-legend,
html[data-theme="light"] .select-tile-contener .marker-water-ph-stats small,
html[data-theme="light"] .select-tile-contener .marker-water-ec-title small,
html[data-theme="light"] .select-tile-contener .marker-water-ec-status > small,
html[data-theme="light"] .select-tile-contener .marker-water-ec-primary-label,
html[data-theme="light"] .select-tile-contener .marker-water-ec-derived-head,
html[data-theme="light"] .select-tile-contener .marker-water-ec-derived-stats small,
html[data-theme="light"] .select-tile-contener .marker-water-ec-scale-legend > small,
html[data-theme="light"] .select-tile-contener .marker-water-ec-info-label,
html[data-theme="light"] .select-tile-contener .marker-water-ec-info-value > small,
html[data-theme="light"] .select-tile-contener .marker-multi-sensor-title small,
html[data-theme="light"] .select-tile-contener .marker-multi-sensor-status > small,
html[data-theme="light"] .select-tile-contener .marker-multi-sensor-column small,
html[data-theme="light"] .select-tile-contener .marker-multi-sensor-reading-state,
html[data-theme="light"] .select-tile-contener .marker-multi-sensor-empty {
	color: #607b8b;
}

html[data-theme="light"] .select-tile-contener .marker-water-temperature-summary strong,
html[data-theme="light"] .select-tile-contener .marker-water-depth-stats strong,
html[data-theme="light"] .select-tile-contener .marker-water-ph-stats strong,
html[data-theme="light"] .select-tile-contener .marker-water-ec-derived-stats strong,
html[data-theme="light"] .select-tile-contener .marker-water-oxygen-range > b,
html[data-theme="light"] .select-tile-contener .marker-water-ec-info-value > strong,
html[data-theme="light"] .select-tile-contener .marker-multi-sensor-column strong,
html[data-theme="light"] .select-tile-contener .marker-multi-sensor-column.is-sensor,
html[data-theme="light"] .select-tile-contener .marker-multi-sensor-sensor > span > strong,
html[data-theme="light"] .select-tile-contener .marker-multi-sensor-value {
	color: #365666;
}

html[data-theme="light"] .select-tile-contener .marker-water-temperature-summary > span + span,
html[data-theme="light"] .select-tile-contener .marker-water-depth-stats > span + span,
html[data-theme="light"] .select-tile-contener .marker-water-ph-stats > span + span,
html[data-theme="light"] .select-tile-contener .marker-water-ec-derived-stats > span + span {
	border-left-color: rgba(28, 73, 104, 0.11);
}

html[data-theme="light"] .select-tile-contener .marker-water-depth-column {
	border-color: rgba(20, 122, 193, 0.18);
	background:
		linear-gradient(112deg, rgba(255, 255, 255, 0.52), transparent 31%),
		linear-gradient(180deg, rgba(103, 232, 249, 0.36), rgba(56, 189, 248, 0.25) 46%, rgba(37, 99, 235, 0.2));
	box-shadow: inset 0 1px rgba(255, 255, 255, 0.78), inset 0 -20px 32px rgba(37, 99, 235, 0.05);
}

html[data-theme="light"] .select-tile-contener .marker-water-depth-scale {
	border-color: rgba(28, 73, 104, 0.3);
}

html[data-theme="light"] .select-tile-contener .marker-water-depth-scale > i {
	border-top-color: rgba(28, 73, 104, 0.34);
}

html[data-theme="light"] .select-tile-contener .marker-water-depth-scale b {
	color: #426675;
}

html[data-theme="light"] .select-tile-contener .marker-water-depth-probe > span > small,
html[data-theme="light"] .select-tile-contener .marker-water-depth-probe > span strong > em {
	color: #397881;
}

html[data-theme="light"] .select-tile-contener .marker-water-depth-probe > span > strong {
	color: #126b73;
}

html[data-theme="light"] .select-tile-contener .marker-water-depth-stats {
	border-top-color: rgba(28, 73, 104, 0.1);
}

html[data-theme="light"] .select-tile-contener .marker-water-depth-primary > strong {
	color: #173241;
}

html[data-theme="light"] .select-tile-contener .marker-water-depth-track {
	background: repeating-linear-gradient(90deg, rgba(96, 119, 132, 0.24) 0 12px, transparent 12px 15px);
}

/* Natlenienie: instrument pozostaje kolorowy, ale jego powierzchnie nie są nocne. */
html[data-theme="light"] .select-tile-contener .marker-water-oxygen-card::before {
	background-image:
		linear-gradient(rgba(28, 73, 104, 0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(28, 73, 104, 0.04) 1px, transparent 1px);
}

html[data-theme="light"] .select-tile-contener .marker-water-oxygen-bubbles > i,
html[data-theme="light"] .select-tile-contener .oxygen-water-particles > i {
	border-color: rgba(20, 122, 193, 0.22);
	background: radial-gradient(circle at 32% 28%, #ffffff, rgba(56, 189, 248, 0.06) 62%, transparent);
}

html[data-theme="light"] .select-tile-contener .marker-water-oxygen-ring-track {
	stroke: rgba(28, 73, 104, 0.14);
}

html[data-theme="light"] .select-tile-contener .marker-water-oxygen-ring-mark {
	stroke: rgba(28, 73, 104, 0.28);
}

html[data-theme="light"] .select-tile-contener .marker-water-oxygen-ring-label,
html[data-theme="light"] .select-tile-contener .marker-water-oxygen-ring-label.is-top {
	fill: #607b8b;
}

html[data-theme="light"] .select-tile-contener .marker-water-oxygen-metric,
html[data-theme="light"] .select-tile-contener .marker-water-oxygen-context-item {
	border-color: color-mix(in srgb, var(--oxygen-color, #38bdf8) 22%, rgba(28, 73, 104, 0.12));
	background:
		linear-gradient(160deg, color-mix(in srgb, var(--oxygen-color, #38bdf8) 8%, transparent), transparent 72%),
		rgba(255, 255, 255, 0.7);
	box-shadow: inset 0 1px rgba(255, 255, 255, 0.88);
}

html[data-theme="light"] .select-tile-contener .marker-water-oxygen-footline {
	border-top-color: rgba(28, 73, 104, 0.09);
}

/* pH: jasna tarcza i ciemna wskazówka zapewniają właściwy kontrast. */
html[data-theme="light"] .select-tile-contener .marker-water-ph-track {
	stroke: rgba(28, 73, 104, 0.13);
}

html[data-theme="light"] .select-tile-contener .marker-water-ph-tick {
	stroke: rgba(28, 73, 104, 0.22);
}

html[data-theme="light"] .select-tile-contener .marker-water-ph-tick.is-major {
	stroke: rgba(28, 73, 104, 0.46);
}

html[data-theme="light"] .select-tile-contener .marker-water-ph-legend {
	fill: #294552;
	stroke: rgba(255, 255, 255, 0.9);
	stroke-width: 1.6px;
	filter: drop-shadow(0 1px 2px rgba(28, 73, 104, 0.18));
}

html[data-theme="light"] .select-tile-contener .marker-water-ph-needle {
	fill: #294552;
	stroke: #294552;
	filter: drop-shadow(0 0 4px rgba(28, 73, 104, 0.2));
}

/* Multisensory: wszystkie wewnętrzne komórki przechodzą na jasne szkło. */
html[data-theme="light"] .select-tile-contener .marker-multi-sensor-row {
	border-color: rgba(28, 73, 104, 0.11);
	background: rgba(226, 239, 244, 0.48);
	box-shadow: inset 0 1px rgba(255, 255, 255, 0.78);
}

html[data-theme="light"] .select-tile-contener .marker-multi-sensor-row:hover {
	background: rgba(213, 233, 239, 0.66);
}

html[data-theme="light"] .select-tile-contener .marker-water-ec-ring-track {
	stroke: rgba(28, 73, 104, 0.14);
}

html[data-theme="light"] .select-tile-contener .marker-water-ec-derived-group,
html[data-theme="light"] .select-tile-contener .marker-water-ec-primary-stats,
html[data-theme="light"] .select-tile-contener .marker-water-ec-info {
	border-color: rgba(28, 73, 104, 0.1);
}

html[data-theme="light"] .select-tile-contener .marker-multi-sensor-columns {
	border-bottom-color: rgba(28, 73, 104, 0.11);
}

html[data-theme="light"] .select-tile-contener .marker-multi-sensor-sensor > b,
html[data-theme="light"] .select-tile-contener .marker-multi-sensor-title strong > em {
	border-color: color-mix(in srgb, var(--multi-color, #38bdf8) 25%, rgba(28, 73, 104, 0.12));
	background: color-mix(in srgb, var(--multi-color, #38bdf8) 8%, rgba(255, 255, 255, 0.82));
}

html[data-theme="light"] .select-tile-contener button.marker-multi-sensor-column:hover,
html[data-theme="light"] .select-tile-contener button.marker-multi-sensor-column:focus-visible,
html[data-theme="light"] .select-tile-contener button.marker-multi-sensor-value:not(:disabled):hover,
html[data-theme="light"] .select-tile-contener button.marker-multi-sensor-value:not(:disabled):focus-visible,
html[data-theme="light"] .select-tile-contener button.marker-multi-sensor-sensor:hover,
html[data-theme="light"] .select-tile-contener button.marker-multi-sensor-sensor:focus-visible {
	background: color-mix(in srgb, var(--multi-color, #38bdf8) 9%, rgba(255, 255, 255, 0.72));
}

/* Tryb kompaktowy */
html[data-theme="light"] .select-tile-contener .marker-mode-switch {
	border-color: rgba(28, 73, 104, 0.14);
	background: rgba(232, 240, 244, 0.8);
}

html[data-theme="light"] .select-tile-contener .marker-mode-button {
	color: #627987;
}

html[data-theme="light"] .select-tile-contener .marker-mode-button:hover {
	color: #0f6ea8;
}

html[data-theme="light"] .select-tile-contener .marker-mode-button.is-active {
	background: #ffffff;
	color: #147d73;
	box-shadow: 0 3px 10px rgba(31, 55, 75, 0.12);
}

html[data-theme="light"] .select-tile-contener .marker-mode-dock-button {
	border-color: rgba(28, 73, 104, 0.14);
	background: rgba(232, 240, 244, 0.8);
	color: #627987;
}

html[data-theme="light"] .select-tile-contener .marker-mode-dock-button:hover,
html[data-theme="light"] .select-tile-contener .marker-mode-dock-button:focus-visible {
	color: #0f6ea8;
	border-color: rgba(15, 110, 168, 0.28);
}

html[data-theme="light"] .select-tile-contener .marker-mode-dock-button.is-active {
	border-color: rgba(20, 125, 115, 0.35);
	background: #ffffff;
	color: #147d73;
	box-shadow: 0 3px 10px rgba(31, 55, 75, 0.12);
}

html[data-theme="light"] .select-tile-contener .marker-mode-close-button {
	border-color: rgba(185, 48, 48, 0.22);
	background: rgba(255, 236, 236, 0.92);
	color: #c24141;
}

html[data-theme="light"] .select-tile-contener .marker-mode-close-button:hover,
html[data-theme="light"] .select-tile-contener .marker-mode-close-button:focus-visible {
	border-color: rgba(185, 48, 48, 0.4);
	background: #fff;
	color: #b91c1c;
	box-shadow: 0 3px 10px rgba(185, 48, 48, 0.16);
}

html[data-theme="light"] .select-tile-contener .marker-group-name {
	color: #294552;
}

html[data-theme="light"] .select-tile-contener .marker-group-line {
	background: linear-gradient(90deg, rgba(28, 73, 104, 0.18), transparent);
}

html[data-theme="light"] .select-tile-contener .marker-group-toggle {
	border-color: rgba(28, 73, 104, 0.1);
	background: rgba(28, 73, 104, 0.06);
	color: #617987;
}

html[data-theme="light"] .select-tile-contener .marker-group-toggle:hover,
html[data-theme="light"] .select-tile-contener .marker-group-toggle:focus-visible {
	border-color: rgba(15, 110, 168, 0.28);
	background: rgba(15, 110, 168, 0.09);
	color: #0f6ea8;
}

html[data-theme="light"] .select-tile-contener .marker-group-tiles .marker-tile.marker-widget-group-item {
	border-color: rgba(28, 73, 104, 0.12);
	background: rgba(255, 255, 255, 0.88);
	box-shadow: 0 7px 18px rgba(31, 55, 75, 0.06);
	color: #223c49;
}

html[data-theme="light"] .select-tile-contener .marker-group-tiles .marker-tile:hover {
	border-color: rgba(20, 150, 139, 0.35);
	background: #eefaf7;
}

html[data-theme="light"] .select-tile-contener .marker-tile-label,
html[data-theme="light"] .select-tile-contener .marker-tile-value small {
	color: #667d8b;
}

html[data-theme="light"] .select-tile-contener .marker-tile-ion-symbol {
	color: #274957;
}

html[data-theme="light"] .select-tile-contener .marker-tile.is-ion.is-time-unknown .marker-tile-ion-symbol,
html[data-theme="light"] .select-tile-contener .marker-tile.is-ion.is-stale .marker-tile-ion-symbol {
	color: #8a6515;
}

html[data-theme="light"] .select-tile-contener .marker-tile-value {
	color: #173241;
}

html[data-theme="light"] .select-tile-contener .marker-tile-insight-stats small {
	color: #526e7d;
}

html[data-theme="light"] .select-tile-contener .marker-tile-insight-stats b {
	color: #173241;
}

html[data-theme="light"] .select-tile-contener .marker-tile-insight-stats > span + span {
	border-left-color: rgba(28, 73, 104, 0.16);
}

html[data-theme="light"] .select-tile-contener .marker-tile-insight-trend.is-flat,
html[data-theme="light"] .select-tile-contener .marker-tile-trend-badge.is-flat {
	color: #526e7d;
}

/* Ładowanie oraz karta sponsora nie mogą migać ciemną powierzchnią przy otwieraniu panelu. */
html[data-theme="light"] .select-tile-contener .marker-wait-for-data {
	border-color: rgba(28, 73, 104, 0.14);
	background: transparent;
	box-shadow: none;
	color: #294552;
}

html[data-theme="light"] .select-tile-contener .marker-loading-header,
html[data-theme="light"] .select-tile-contener .marker-loading-footer {
	border-color: rgba(28, 73, 104, 0.1);
	background: rgba(255, 255, 255, 0.55);
}

html[data-theme="light"] .select-tile-contener .marker-loading-copy > strong {
	color: #173241;
}

html[data-theme="light"] .select-tile-contener .marker-loading-copy > small,
html[data-theme="light"] .select-tile-contener .marker-loading-copy > em,
html[data-theme="light"] .select-tile-contener .marker-loading-footer {
	color: #617987;
}

html[data-theme="light"] .select-tile-contener .marker-loading-beacon {
	border-color: rgba(20, 150, 139, 0.24);
	background: radial-gradient(circle, rgba(22, 163, 148, 0.14), rgba(255, 255, 255, 0.92) 68%);
	box-shadow: 0 0 20px rgba(20, 150, 139, 0.1);
}

html[data-theme="light"] .select-tile-contener .marker-main-contener-sponsor {
	border: 0;
	background:
		radial-gradient(circle at 8% 35%, rgba(251, 191, 36, 0.09), transparent 34%),
		radial-gradient(circle at 94% 70%, rgba(56, 189, 248, 0.07), transparent 38%);
	background-color: transparent;
	box-shadow: none;
}

html[data-theme="light"] .select-tile-contener .marker-main-contener-sponsor:hover,
html[data-theme="light"] .select-tile-contener .marker-main-contener-sponsor:focus-visible {
	border: 0;
	background:
		radial-gradient(circle at 8% 35%, rgba(251, 191, 36, 0.13), transparent 36%),
		radial-gradient(circle at 94% 70%, rgba(56, 189, 248, 0.11), transparent 40%);
	box-shadow: none;
}

html[data-theme="light"] .select-tile-contener .select-tile-header-sponsor-logo {
	border: 0;
	background: transparent;
	box-shadow: none;
}

html[data-theme="light"] .select-tile-contener .marker-main-contener-sponsor .select-tile-header-sponsor-description-comment {
	color: #b45309;
}

html[data-theme="light"] .select-tile-contener .marker-main-contener-sponsor .select-tile-header-sponsor-description-name {
	color: #173241;
}

html[data-theme="light"] .select-tile-contener .select-tile-header-sponsor-description-url {
	color: #617987;
}

html[data-theme="light"] .select-tile-contener .marker-sponsor-action {
	border-color: rgba(20, 122, 193, 0.2);
	background: rgba(20, 122, 193, 0.08);
	color: #147ab0;
}

html[data-theme="light"] .select-tile-contener .marker-footer-strip {
	background: #f4f8fa;
	border-top-color: rgba(20, 122, 193, 0.14);
}

html[data-theme="light"] .select-tile-contener .marker-footer-compact {
	background: #f4f8fa;
	border-top-color: rgba(20, 122, 193, 0.12);
}

html[data-theme="light"] .select-tile-contener .marker-sponsor-collapse-toggle {
	border-color: rgba(28, 73, 104, 0.16);
	background: rgba(255, 255, 255, 0.92);
	color: #627987;
}

html[data-theme="light"] .select-tile-contener .marker-sponsor-collapse-toggle:hover,
html[data-theme="light"] .select-tile-contener .marker-sponsor-collapse-toggle:focus-visible {
	color: #0f6ea8;
	border-color: rgba(15, 110, 168, 0.28);
}

html[data-theme="light"] .select-tile-contener .marker-footer-compact-name {
	color: #294552;
}

html[data-theme="light"] .select-tile-contener .marker-footer-compact-name:hover,
html[data-theme="light"] .select-tile-contener .marker-footer-compact-name:focus-visible {
	color: #0f6ea8;
}

html[data-theme="light"] .select-tile-contener .marker-device-identity {
	background: none;
}

html[data-theme="light"] .select-tile-contener .marker-footer-battery {
	color: #617987;
}

html[data-theme="light"] .select-tile-contener .marker-footer-battery > i::after {
	background: #0f9272;
}

html[data-theme="light"] .select-tile-contener .marker-footer-battery.is-low {
	color: #bf304b;
}

html[data-theme="light"] .select-tile-contener .marker-footer-battery.is-low > i::after {
	background: currentColor;
}

html[data-theme="light"] .select-tile-contener .marker-footer-strip:not(.is-collapsed) .marker-footer-compact .device-identity-line {
	border-color: rgba(20, 122, 193, 0.18);
	background: rgba(255, 255, 255, 0.92);
	box-shadow: inset 0 1px 0 #ffffff;
}

html[data-theme="light"] .select-tile-contener .marker-footer-strip.is-collapsed .marker-footer-compact .device-identity-line,
html[data-theme="light"] .select-tile-contener .marker-footer-compact .device-identity-line {
	border: 0;
	background: transparent;
	box-shadow: none;
}

html[data-theme="light"] .select-tile-contener .device-identity-line {
	border-color: rgba(20, 122, 193, 0.18);
	background: rgba(20, 122, 193, 0.05);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

html[data-theme="light"] .select-tile-contener .device-serial-brand,
html[data-theme="light"] .select-tile-contener .device-identity-brand {
	color: #617987;
}

html[data-theme="light"] .select-tile-contener .device-identity-divider {
	background: rgba(20, 122, 193, 0.22);
}

html[data-theme="light"] .select-tile-contener .device-identity-serial {
	color: #10658f;
}

html[data-theme="light"] .select-tile-contener .device-serial-variant {
	border-color: rgba(198, 145, 20, 0.34);
	background: rgba(251, 191, 36, 0.18);
	box-shadow: none;
	color: #96660a;
}

html[data-theme="light"] .select-tile-contener .device-serial-number {
	color: #10658f;
	text-shadow: none;
}

/* Segmenty wersji dostają ciemniejsze warianty tej samej palety co w motywie nocnym */
html[data-theme="light"] .select-tile-contener .marker-device-identity .diagnostic-version-product {
	border-color: rgba(20, 122, 193, 0.26);
	background: rgba(20, 122, 193, 0.1);
	box-shadow: none;
	color: #147ab0;
}

html[data-theme="light"] .select-tile-contener .marker-device-identity .diagnostic-version-segment {
	text-shadow: none;
}

html[data-theme="light"] .select-tile-contener .marker-device-identity .diagnostic-version-segment.segment-1 { color: #a4700a; }
html[data-theme="light"] .select-tile-contener .marker-device-identity .diagnostic-version-segment.segment-2 { color: #6d3fb0; }
html[data-theme="light"] .select-tile-contener .marker-device-identity .diagnostic-version-segment.segment-3 { color: #0f7a5f; }
html[data-theme="light"] .select-tile-contener .marker-device-identity .diagnostic-version-segment.segment-4 { color: #b3323f; }

html[data-theme="light"] .select-tile-contener .marker-device-identity .diagnostic-version-dot {
	color: #90a4b0;
}

@media (max-width: 767px) {
	html[data-theme="light"] .select-tile-contener {
		background:
			radial-gradient(circle at 0 8%, rgba(22, 163, 148, 0.08), transparent 28%),
			linear-gradient(160deg, #ffffff, #eef6f8);
		box-shadow: 0 -22px 52px -30px rgba(31, 55, 75, 0.42);
	}

	html[data-theme="light"] .select-tile-contener::before {
		background: rgba(28, 73, 104, 0.24);
	}
}

/* The current WQI softly colours the whole selected-point surface on every screen size. */
.select-tile-contener {
	background:
		radial-gradient(circle at 12% 0, color-mix(in srgb, var(--marker-wqi-color, #38bdf8) 13%, transparent), transparent 34%),
		radial-gradient(circle at 100% 88%, color-mix(in srgb, var(--marker-wqi-color, #38bdf8) 6%, transparent), transparent 35%),
		#050f18 !important;
}

html[data-theme="light"] .select-tile-contener {
	background:
		radial-gradient(circle at 12% 0, color-mix(in srgb, var(--marker-wqi-color, #16a394) 10%, transparent), transparent 34%),
		radial-gradient(circle at 100% 88%, color-mix(in srgb, var(--marker-wqi-color, #16a394) 5%, transparent), transparent 35%),
		#f9fdfe !important;
}

/*
 * Selected point: WQI and sponsor are content of the drawer, not nested cards.
 * Keep this reset at the end of the cascade so older theme and interaction
 * rules cannot restore rectangular backgrounds or borders.
 */
.select-tile-contener .marker-water-hero-card,
html[data-theme="light"] .select-tile-contener .marker-water-hero-card {
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

.select-tile-contener .marker-water-hero-card::before,
.select-tile-contener .marker-water-hero-card::after {
	display: none !important;
	background: none !important;
	box-shadow: none !important;
}

.select-tile-contener .marker-water-hero-header,
.select-tile-contener .marker-water-hero-footer {
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

.select-tile-contener .marker-main-contener-sponsor,
.select-tile-contener .marker-main-contener-sponsor:hover,
.select-tile-contener .marker-main-contener-sponsor:focus-visible,
html[data-theme="light"] .select-tile-contener .marker-main-contener-sponsor,
html[data-theme="light"] .select-tile-contener .marker-main-contener-sponsor:hover,
html[data-theme="light"] .select-tile-contener .marker-main-contener-sponsor:focus-visible {
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
	transform: none !important;
}

.select-tile-contener .marker-main-contener-sponsor::before,
.select-tile-contener .marker-main-contener-sponsor::after {
	display: none !important;
}

/* Dedicated, touch-first layout for the selected-point drawer. */
@media (max-width: 767px) {
	.select-tile-contener {
		border-width: 1px 0 0 !important;
		border-color: color-mix(in srgb, var(--marker-wqi-color, #38bdf8) 22%, rgba(101, 189, 218, 0.14));
		border-radius: 0 !important;
		background:
			radial-gradient(circle at 12% 0, color-mix(in srgb, var(--marker-wqi-color, #38bdf8) 13%, transparent), transparent 34%),
			radial-gradient(circle at 100% 88%, color-mix(in srgb, var(--marker-wqi-color, #38bdf8) 6%, transparent), transparent 35%),
			#050f18 !important;
		box-shadow:
			0 -18px 52px -34px rgba(0, 0, 0, 0.72),
			inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
	}

	.select-tile-contener::before {
		display: none !important;
	}

	.select-tile-contener .marker-device-identity {
		border: 0;
		border-radius: 0;
		background: none;
		box-shadow: none;
	}

	.select-tile-contener .marker-footer-strip:not(.is-collapsed) .marker-footer-compact .device-identity-line {
		width: auto;
		min-height: 0;
		justify-content: center;
		padding: 3px 10px;
		border: 1px solid rgba(109, 213, 237, 0.16);
		border-radius: 999px;
		background: rgba(109, 213, 237, 0.045);
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
	}

	.select-tile-contener .marker-footer-strip.is-collapsed .marker-device-identity .device-identity-line,
	.select-tile-contener .marker-footer-strip.is-collapsed .marker-footer-compact .device-identity-line {
		width: auto;
		min-height: 0;
		justify-content: flex-end;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
	}

	html[data-theme="light"] .select-tile-contener .marker-device-identity {
		border: 0;
		background: none;
		box-shadow: none;
	}

	html[data-theme="light"] .select-tile-contener .marker-footer-strip:not(.is-collapsed) .marker-footer-compact .device-identity-line {
		border-color: rgba(20, 122, 193, 0.18);
		background: rgba(255, 255, 255, 0.92);
		box-shadow: inset 0 1px 0 #ffffff;
	}

	html[data-theme="light"] .select-tile-contener .marker-footer-strip.is-collapsed .marker-footer-compact .device-identity-line {
		border: 0;
		background: transparent;
		box-shadow: none;
	}

	/* Fundator rozpoczyna osobną część stopki, oddzieloną lekką linią. */
	.select-tile-contener .marker-main-contener-sponsor::before {
		position: absolute;
		top: 0;
		right: 10px;
		left: 10px;
		display: block !important;
		height: 1px;
		background: linear-gradient(90deg, transparent, rgba(109, 213, 237, 0.18) 14%, rgba(109, 213, 237, 0.18) 86%, transparent) !important;
		content: "";
	}

	html[data-theme="light"] .select-tile-contener .marker-main-contener-sponsor::before {
		background: linear-gradient(90deg, transparent, rgba(20, 122, 193, 0.16) 14%, rgba(20, 122, 193, 0.16) 86%, transparent) !important;
	}

	.select-tile-contener .marker-panel-scroll-body {
		padding: 0 11px 10px;
	}

	.select-tile-contener .marker-panel-sheet-handle {
		display: flex;
		width: 84px;
		height: 24px;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: 0;
		outline: 0;
		background: transparent;
		cursor: grab;
		touch-action: none;
	}

	.select-tile-contener .marker-panel-sheet-handle:active,
	.select-tile-contener.is-sheet-dragging .marker-panel-sheet-handle {
		cursor: grabbing;
	}

	.select-tile-contener .marker-panel-sheet-handle span {
		display: block;
		width: 52px;
		height: 4px;
		border-radius: 999px;
		background: color-mix(in srgb, var(--marker-wqi-color, #9ab6c3) 28%, rgba(167, 211, 226, 0.38));
		transition: width 160ms ease, background-color 160ms ease;
	}

	.select-tile-contener .marker-panel-sheet-handle:focus-visible span,
	.select-tile-contener .marker-panel-sheet-handle:hover span {
		width: 58px;
		background: color-mix(in srgb, var(--marker-wqi-color, #9ab6c3) 42%, rgba(184, 226, 239, 0.5));
	}

	.select-tile-contener .marker-water-hero-widget {
		margin: 0 0 6px;
	}

	.select-tile-contener .marker-water-hero-card {
		min-height: 0;
		overflow: visible;
	}

	.select-tile-contener .marker-water-hero-ambient {
		top: -52px;
		left: -54px;
		opacity: 0.28;
	}

	.select-tile-contener .marker-water-hero-header {
		display: grid;
		min-height: 64px;
		align-items: center;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 10px;
		padding: 16px 8px 10px;
	}

	.select-tile-contener .marker-water-hero-title {
		min-width: 0;
		max-width: none;
		flex: 1 1 auto;
		width: 100%;
		gap: 11px;
	}

	.select-tile-contener .marker-water-hero-title > span {
		width: 42px;
		height: 42px;
		border-radius: 13px;
		font-size: 14px;
	}

	.select-tile-contener .marker-water-hero-copy {
		min-width: 0;
		width: 100%;
	}

	.select-tile-contener .marker-water-hero-title strong,
	.select-tile-contener .marker-water-hero-meta {
		max-width: 100%;
		width: 100%;
	}

	.select-tile-contener .marker-water-hero-title strong {
		font-size: 16px;
		line-height: 1.15;
	}

	.select-tile-contener .marker-water-hero-title small {
		margin-top: 4px;
		font-size: 11px;
	}

	.select-tile-contener .marker-water-hero-live {
		min-width: 88px;
		padding: 6px 10px 5px;
		font-size: 8px;
	}

	.select-tile-contener .marker-water-hero-content {
		display: grid;
		height: auto;
		min-height: 0;
		align-items: center;
		overflow: visible;
		grid-template-columns: 112px minmax(0, 1fr);
		grid-template-rows: auto 62px;
		grid-template-areas:
			"score summary"
			"score history";
		gap: 0 14px;
		padding: 8px 9px 6px;
	}

	.select-tile-contener .marker-water-hero-content.is-empty {
		display: flex;
		min-height: 112px;
		padding: 18px 12px;
	}

	.select-tile-contener .marker-water-hero-score {
		grid-area: score;
	}

	.select-tile-contener .marker-water-hero-summary {
		min-height: 56px;
		grid-area: summary;
	}

	.select-tile-contener .marker-water-hero-spectrum,
	.select-tile-contener .marker-water-hero-stats {
		display: none;
	}

	.select-tile-contener .marker-water-hero-condition > span {
		font-size: 20px;
	}

	.select-tile-contener .marker-water-hero-condition > small {
		font-size: 11px;
	}

	.select-tile-contener .marker-water-hero-history {
		position: relative;
		inset: auto;
		display: block;
		width: 100%;
		height: 62px;
		min-height: 62px;
		margin-top: 0;
		grid-area: history;
		border-radius: 10px;
		outline: 0;
		pointer-events: auto;
		cursor: zoom-in;
	}

	.select-tile-contener .marker-water-hero-history:focus-visible {
		box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--marker-wqi-color, #38bdf8) 46%, transparent);
	}

	.select-tile-contener .marker-water-hero-card.is-history-expanded .marker-water-hero-history {
		cursor: zoom-out;
	}

	.select-tile-contener .marker-water-hero-history > svg,
	.select-tile-contener .marker-water-hero-history .marker-water-history-plot {
		height: 58px;
		-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
		mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
	}

	.select-tile-contener .marker-water-hero-footer {
		min-height: 25px;
		padding: 2px 8px 6px;
	}

	.select-tile-contener .marker-water-hero-actions {
		min-height: 52px;
		margin: 4px 0 0;
		gap: 7px;
	}

	.select-tile-contener .marker-water-hero-quick-action {
		min-height: 48px;
		padding: 8px;
		border-radius: 14px;
	}

	.select-tile-contener .marker-water-hero-quick-action i {
		font-size: 12px;
	}

	.select-tile-contener .marker-water-hero-quick-action span {
		font-size: 12px;
	}

	.select-tile-contener .marker-main-contener .marker-widget-group {
		margin-top: 27px;
	}

	.select-tile-contener .marker-main-contener.is-compact-mode .marker-water-hero-widget + .marker-compact-tiles-water {
		margin-top: 23px;
	}

	.select-tile-contener .marker-main-contener-sponsor {
		height: 66px;
		flex-basis: 66px;
		margin-top: 0;
	}

	.select-tile-contener .marker-footer-strip.is-collapsed .marker-main-contener-sponsor {
		height: 0 !important;
		flex-basis: 0 !important;
		margin: 0 !important;
	}

	.select-tile-contener .marker-sponsor-content {
		padding: 7px 8px;
	}

}

@media (max-width: 430px) {
	.select-tile-contener .marker-water-hero-header {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 7px;
		padding-right: 5px;
		padding-left: 5px;
	}

	.select-tile-contener .marker-water-hero-live {
		width: auto;
		min-width: 82px;
		margin-left: 0;
		padding-right: 8px;
		padding-left: 8px;
	}

	.select-tile-contener .marker-water-hero-content {
		grid-template-columns: 96px minmax(0, 1fr);
		gap: 5px 10px;
		padding-inline: 5px;
	}

	.select-tile-contener .marker-water-hero-orbit {
		width: 92px;
		height: 92px;
	}

	.select-tile-contener .marker-water-hero-ring {
		width: 78px;
		height: 78px;
	}

	.select-tile-contener .marker-water-hero-ring strong {
		font-size: 26px;
	}

	.select-tile-contener .marker-water-hero-condition > span {
		font-size: 17px;
	}
}

/* Keep a clear separation between point actions and measurements at every viewport size. */
.select-tile-contener .marker-main-contener .marker-widget-group {
	margin-top: 27px;
}

.select-tile-contener .marker-main-contener.is-compact-mode .marker-water-hero-widget + .marker-compact-tiles-water {
	margin-top: 23px;
}

html[data-theme="light"] .select-tile-contener {
	--mobile-panel-base: #f9fdfe;
}

/* ───────────────────────── Skład jonowy — motyw jasny ─────────────────────────
   Ciemna karta jonów opiera się na przezroczystych bielach na ciemnym tle; w jasnym
   motywie te same warstwy trzeba odwrócić, żeby paski i symbole zachowały kontrast. */
html[data-theme="light"] .select-tile-contener .marker-water-ions-ambient {
	opacity: 0.4;
}

html[data-theme="light"] .select-tile-contener .marker-water-ions-title small,
html[data-theme="light"] .select-tile-contener .marker-water-ions-value > small,
html[data-theme="light"] .select-tile-contener .marker-water-ions-scale,
html[data-theme="light"] .select-tile-contener .marker-water-ions-dominant > small,
html[data-theme="light"] .select-tile-contener .marker-water-ions-balance > header,
html[data-theme="light"] .select-tile-contener .marker-water-ions-balance-empty,
html[data-theme="light"] .select-tile-contener .marker-water-ions-awaiting {
	color: #5b7387;
}

html[data-theme="light"] .select-tile-contener .marker-water-ions-name,
html[data-theme="light"] .select-tile-contener .marker-water-ions-balance-side > b {
	color: #2c4c5e;
}

html[data-theme="light"] .select-tile-contener .marker-water-ions-balance,
html[data-theme="light"] .select-tile-contener .marker-water-ions-item {
	border-color: rgba(28, 73, 104, 0.13);
	background: rgba(255, 255, 255, 0.66);
}

html[data-theme="light"] .select-tile-contener .marker-water-ions-item:hover,
html[data-theme="light"] .select-tile-contener .marker-water-ions-item:focus-visible {
	background: color-mix(in srgb, var(--ion-color) 10%, rgba(255, 255, 255, 0.9));
}

html[data-theme="light"] .select-tile-contener .marker-water-ions-compare {
	border-color: rgba(28, 73, 104, 0.15);
	color: #3d647a;
	background: rgba(255, 255, 255, 0.7);
}

html[data-theme="light"] .select-tile-contener .marker-water-ions-orb {
	background:
		radial-gradient(circle at 50% 22%, color-mix(in srgb, var(--ion-color) 20%, transparent), transparent 70%),
		rgba(255, 255, 255, 0.9);
}

html[data-theme="light"] .select-tile-contener .marker-water-ions-orb > b {
	color: color-mix(in srgb, var(--ion-color) 78%, #0f2231);
}

html[data-theme="light"] .select-tile-contener .marker-water-ions-charge {
	border-color: rgba(255, 255, 255, 0.9);
}

html[data-theme="light"] .select-tile-contener .marker-water-ions-balance-bar,
html[data-theme="light"] .select-tile-contener .marker-water-ions-bar {
	background: rgba(28, 73, 104, 0.12);
	box-shadow: inset 0 1px 2px rgba(31, 55, 75, 0.14);
}

html[data-theme="light"] .select-tile-contener .marker-water-ions-balance-bar > b,
html[data-theme="light"] .select-tile-contener .marker-water-ions-bar > b {
	background: rgba(23, 50, 65, 0.42);
}

html[data-theme="light"] .select-tile-contener .marker-water-ions-bar > b.is-max {
	background: rgba(23, 50, 65, 0.68);
}

/* Etykiety osi WQI bez ciemnej poświaty w jasnym motywie. */
html[data-theme="light"] .select-tile-contener .marker-water-history-labels > span {
    text-shadow: none;
}

/* Alarm accents override the default teal section colors in the light theme. */
html[data-theme="light"] .is-alarms-section .tiles-list-section-heading > i {
    color: #dc2626;
    background: rgba(220, 38, 38, .08);
    border-color: rgba(220, 38, 38, .25);
}
html[data-theme="light"] .is-alarms-section .tiles-list-section-count {
    color: #dc2626;
    background: rgba(220, 38, 38, .08);
    border-color: rgba(220, 38, 38, .25);
}

html[data-theme="light"] .is-developer-section .tiles-list-section-heading > i,
html[data-theme="light"] .is-developer-section .tiles-list-section-count {
    color: #7c3aed;
    background: rgba(124, 58, 237, .08);
    border-color: rgba(124, 58, 237, .25);
}


/* features/laboratory/theme.css */
/* Laboratory -------------------------------------------------------------
   The laboratory was designed as a self-contained dark workbench, so the
   generic light-theme rules could not reach its gradients and nested chart
   cards. Keep the same hierarchy and accents, but give the complete module
   (including analysis and export dialogs) a native light palette. */
html[data-theme="light"] .laboratory-workbench .diagnostic-series-metrics {
	--weather-surface: #ffffff;
	--weather-card: #f7fafc;
	--weather-plot: #f8fbfc;
	--weather-border: rgba(46, 88, 110, .16);
	--weather-text: #193744;
	--weather-muted: #567382;
}
html[data-theme="light"] .laboratory-workbench .diagnostic-series-metrics .diagnostic-series-metric {
	border-color: color-mix(in srgb, var(--series-color) 26%, var(--weather-border));
	background: color-mix(in srgb, var(--series-color) 4%, var(--weather-card));
	color: var(--weather-text);
}
html[data-theme="light"] .laboratory-workbench .diagnostic-series-metrics .diagnostic-series-metric:hover,
html[data-theme="light"] .laboratory-workbench .diagnostic-series-metrics .diagnostic-series-metric:focus-visible { border-color: var(--series-color); }
html[data-theme="light"] .laboratory-workbench .diagnostic-series-metrics .diagnostic-chart-stage { background: var(--weather-plot); }
html[data-theme="light"] .main-container-subpage:has(> .laboratory-workbench.waterly-drawer-viewport) {
	background: rgba(232, 244, 248, .12) !important;
	backdrop-filter: blur(7px) saturate(.86) !important;
	-webkit-backdrop-filter: blur(7px) saturate(.86) !important;
}

html[data-theme="light"] .laboratory-workbench {
	--waterly-drawer-background:
		radial-gradient(circle at 8% 0, rgba(20, 165, 176, .10), transparent 31%),
		radial-gradient(circle at 96% 8%, rgba(44, 113, 190, .07), transparent 29%),
		linear-gradient(145deg, rgba(249, 253, 254, .98), rgba(238, 246, 249, .98));
	--diagnostic-widget-background:
		radial-gradient(circle at 94% 0, color-mix(in srgb, var(--diagnostic-chart-color, #269fa5) 9%, transparent), transparent 31%),
		linear-gradient(150deg, #ffffff, #edf6f8);
	--diagnostic-widget-border: rgba(35, 99, 126, .16);
	--diagnostic-widget-hover-border: color-mix(in srgb, var(--diagnostic-chart-color, #269fa5) 34%, rgba(35, 99, 126, .12));
	--diagnostic-widget-shadow: 0 13px 30px rgba(39, 79, 99, .09);
	--diagnostic-widget-hover-shadow: 0 17px 34px rgba(39, 79, 99, .14);
	color: #243f4b;
}

html[data-theme="light"] .laboratory-shell {
	border-color: rgba(31, 105, 137, .18);
	background:
		radial-gradient(circle at 8% 0, rgba(24, 177, 185, .11), transparent 30%),
		radial-gradient(circle at 96% 8%, rgba(56, 125, 205, .07), transparent 28%),
		linear-gradient(145deg, rgba(250, 253, 254, .985), rgba(239, 247, 250, .99));
	box-shadow: 0 18px 46px rgba(39, 79, 99, .13);
	backdrop-filter: blur(14px) saturate(.95);
}

html[data-theme="light"] .laboratory-hero,
html[data-theme="light"] .laboratory-command-deck,
html[data-theme="light"] .laboratory-navigation,
html[data-theme="light"] .laboratory-analysis-tools,
html[data-theme="light"] .laboratory-parameter-section,
html[data-theme="light"] .laboratory-snapshot-card,
html[data-theme="light"] .laboratory-snapshot-group,
html[data-theme="light"] .laboratory-analysis-launcher,
html[data-theme="light"] .laboratory-explorer,
html[data-theme="light"] .laboratory-table-card,
html[data-theme="light"] .laboratory-error-zone,
html[data-theme="light"] .laboratory-sensor-instance {
	border-color: rgba(35, 99, 126, .14);
	box-shadow: 0 14px 34px rgba(39, 79, 99, .09);
}

html[data-theme="light"] .laboratory-hero {
	background:
		linear-gradient(112deg, rgba(242, 251, 252, .97), rgba(250, 253, 254, .99)),
		#f5fbfc;
}

html[data-theme="light"] .laboratory-command-deck,
html[data-theme="light"] .laboratory-navigation {
	background: rgba(250, 253, 254, .94);
}

html[data-theme="light"] .laboratory-parameter-section {
	background: linear-gradient(150deg, rgba(250, 253, 254, .98), rgba(240, 247, 250, .98));
}

html[data-theme="light"] .laboratory-analysis-launcher,
html[data-theme="light"] .laboratory-explorer {
	background:
		radial-gradient(circle at 78% -20%, rgba(36, 181, 190, .10), transparent 36%),
		linear-gradient(145deg, rgba(249, 253, 254, .99), rgba(237, 246, 249, .99));
}

html[data-theme="light"] .laboratory-snapshot-group,
html[data-theme="light"] .laboratory-table-card,
html[data-theme="light"] .laboratory-error-zone,
html[data-theme="light"] .laboratory-sensor-instance {
	background:
		radial-gradient(circle at 0 0, rgba(45, 184, 188, .055), transparent 28%),
		rgba(250, 253, 254, .82);
}

html[data-theme="light"] .laboratory-snapshot-card {
	background: linear-gradient(145deg, rgba(252, 254, 255, .99), rgba(238, 246, 249, .98));
}

html[data-theme="light"] .laboratory-snapshot-card[data-lab-kpi-card]:hover,
html[data-theme="light"] .laboratory-snapshot-card[data-lab-kpi-card]:focus-visible {
	background: linear-gradient(145deg, #fff, #edf7f9);
	box-shadow: 0 17px 38px rgba(39, 79, 99, .13), inset 0 0 0 1px color-mix(in srgb, var(--laboratory-accent, #269fa5) 13%, transparent);
}

html[data-theme="light"] .laboratory-snapshot-card .laboratory-snapshot-bell {
	border-color: rgba(35, 99, 126, .15);
	background: rgba(245, 250, 251, .94);
	box-shadow: 0 2px 7px rgba(35, 75, 91, .08);
	color: #607c88;
}

html[data-theme="light"] .laboratory-snapshot-card .laboratory-snapshot-bell:hover,
html[data-theme="light"] .laboratory-snapshot-card .laboratory-snapshot-bell:focus-visible {
	border-color: rgba(22, 143, 150, .28);
	background: #fff;
	color: #168d92;
}

html[data-theme="light"] .laboratory-snapshot-card .laboratory-snapshot-bell[data-alarm-state="unset"],
html[data-theme="light"] .laboratory-snapshot-card .laboratory-snapshot-bell[data-alarm-state="disabled"],
html[data-theme="light"] .laboratory-snapshot-card .laboratory-snapshot-bell[data-alarm-state="unknown"] {
	border-color: rgba(35, 99, 126, .14);
	background: rgba(237, 245, 247, .92);
	color: #69838e;
}

html[data-theme="light"] .laboratory-snapshot-card .laboratory-snapshot-bell[data-alarm-state="warning"] {
	border-color: rgba(196, 126, 31, .24);
	background: rgba(255, 184, 92, .14);
	color: #a46615;
}

html[data-theme="light"] .laboratory-snapshot-card .laboratory-snapshot-bell[data-alarm-state="alarm"] {
	border-color: rgba(201, 61, 78, .24);
	background: rgba(255, 101, 116, .12);
	color: #bd3f50;
}

html[data-theme="light"] .laboratory-snapshot > .laboratory-snapshot-card.sensors {
	background: linear-gradient(110deg, rgba(235, 250, 246, .98), rgba(248, 253, 253, .98) 54%, rgba(237, 249, 245, .98));
}

html[data-theme="light"] .laboratory-live-status,
html[data-theme="light"] .laboratory-period-navigator,
html[data-theme="light"] .laboratory-search,
html[data-theme="light"] .laboratory-view-switch,
html[data-theme="light"] .laboratory-series-search,
html[data-theme="light"] .laboratory-explorer-modes,
html[data-theme="light"] .laboratory-statistic .laboratory-analyze,
html[data-theme="light"] .laboratory-statistic .laboratory-pin {
	border-color: rgba(35, 99, 126, .17);
	background: rgba(255, 255, 255, .72);
}

html[data-theme="light"] .laboratory-result-count strong {
	color: #244654;
}

html[data-theme="light"] .laboratory-result-count span {
	color: #667f8b;
}

html[data-theme="light"] .laboratory-period-navigator .period-selector {
	background-color: #edf7f9 !important;
	color: #244654 !important;
	box-shadow: inset 0 0 0 1px rgba(46, 133, 145, .10);
}

html[data-theme="light"] .laboratory-period-navigator .period-selector:hover,
html[data-theme="light"] .laboratory-period-navigator .period-selector:focus {
	background-color: #e4f3f6 !important;
}

html[data-theme="light"] .laboratory-action-button {
	border-color: rgba(35, 99, 126, .18);
	background: rgba(255, 255, 255, .82);
	color: #4d6875;
}

html[data-theme="light"] .laboratory-action-button:hover { color: #173e4c; }
html[data-theme="light"] .laboratory-action-primary,
html[data-theme="light"] .laboratory-analysis-open,
html[data-theme="light"] .laboratory-export-submit { color: #fff; background: linear-gradient(135deg, #159da3, #237fba); }

html[data-theme="light"] .laboratory-hero-copy h1,
html[data-theme="light"] .laboratory-live-status strong,
html[data-theme="light"] .laboratory-time-heading strong,
html[data-theme="light"] .laboratory-navigation-copy strong,
html[data-theme="light"] .laboratory-section-heading h2,
html[data-theme="light"] .laboratory-analysis-launcher-copy h2,
html[data-theme="light"] .laboratory-explorer-heading h2,
html[data-theme="light"] .laboratory-series-panel-heading strong,
html[data-theme="light"] .laboratory-snapshot-card strong,
html[data-theme="light"] .laboratory-snapshot-group-header strong,
html[data-theme="light"] .laboratory-table-heading strong,
html[data-theme="light"] .laboratory-error-heading strong,
html[data-theme="light"] .laboratory-sensor-instance-name,
html[data-theme="light"] .laboratory-empty-filter strong,
html[data-theme="light"] .laboratory-data-empty h2 {
	color: #173745;
}

html[data-theme="light"] .laboratory-eyebrow,
html[data-theme="light"] .laboratory-navigation-copy span,
html[data-theme="light"] .laboratory-time-heading span,
html[data-theme="light"] .laboratory-section-heading span,
html[data-theme="light"] .laboratory-analysis-launcher-copy > span,
html[data-theme="light"] .laboratory-explorer-heading > div:last-child > span,
html[data-theme="light"] .laboratory-series-panel-heading span,
html[data-theme="light"] .laboratory-snapshot-card span {
	color: #66828f;
}

html[data-theme="light"] .laboratory-snapshot-subgroup-header { color: #486779; }
html[data-theme="light"] .laboratory-snapshot-subgroup-header > i { color: #138c95; }
html[data-theme="light"] .laboratory-snapshot-subgroup + .laboratory-snapshot-subgroup {
	border-top-color: rgba(35, 99, 126, .13);
}

html[data-theme="light"] .laboratory-snapshot-card:is(.is-stale, .is-time-unknown) {
	border-color: rgba(181, 104, 36, .28);
	background: linear-gradient(145deg, rgba(255, 253, 249, .99), rgba(247, 241, 232, .98));
}

html[data-theme="light"] .laboratory-snapshot-card.is-expired {
	border-color: rgba(35, 99, 126, .14);
	background: linear-gradient(145deg, rgba(249, 252, 253, .98), rgba(238, 244, 247, .98));
}

html[data-theme="light"] .laboratory-snapshot-card small.is-data-status.is-aging { color: #a86c22 !important; }
html[data-theme="light"] .laboratory-snapshot-card small.is-data-status.is-stale { color: #ad5e2a !important; }
html[data-theme="light"] .laboratory-snapshot-card small.is-data-status.is-expired { color: #647d89 !important; }

html[data-theme="light"] .laboratory-hero-copy p,
html[data-theme="light"] .laboratory-live-status span,
html[data-theme="light"] .laboratory-live-status small,
html[data-theme="light"] .laboratory-analysis-launcher-copy p,
html[data-theme="light"] .laboratory-explorer-heading p,
html[data-theme="light"] .laboratory-section-heading p,
html[data-theme="light"] .laboratory-snapshot-card small,
html[data-theme="light"] .laboratory-snapshot-group-header small,
html[data-theme="light"] .laboratory-sensor-instance-desc {
	color: #718894 !important;
}

html[data-theme="light"] .laboratory-tab { color: #587482; }
html[data-theme="light"] .laboratory-tab:hover { background: rgba(32, 161, 166, .07); color: #214b59; }
html[data-theme="light"] .laboratory-tab.active { background: rgba(32, 161, 166, .11); color: #126e74; }
html[data-theme="light"] .laboratory-search-input,
html[data-theme="light"] .laboratory-series-search input { color: #244654 !important; }
html[data-theme="light"] .laboratory-search-input::placeholder,
html[data-theme="light"] .laboratory-series-search input::placeholder { color: #8297a1; }

html[data-theme="light"] .laboratory-analysis-tools {
	background: rgba(245, 251, 252, .94);
}

html[data-theme="light"] .laboratory-series-panel {
	border-color: rgba(35, 99, 126, .12);
	background: rgba(233, 244, 247, .58);
}

html[data-theme="light"] .laboratory-series-option { color: #58727f; }
html[data-theme="light"] .laboratory-series-option:hover { background: rgba(38, 126, 151, .07); color: #173d4b; }
html[data-theme="light"] .laboratory-series-option.is-selected { color: #173b48; }
html[data-theme="light"] .laboratory-explorer-legend-item { color: #4d6976; }
html[data-theme="light"] .laboratory-explorer-summary span { color: #607985; }
html[data-theme="light"] .laboratory-explorer-summary strong { color: #234754; }
html[data-theme="light"] .laboratory-explorer-empty { background: radial-gradient(circle, rgba(31, 151, 158, .08), transparent 48%); }
html[data-theme="light"] .laboratory-explorer-empty strong { color: #234754; }

html[data-theme="light"] .laboratory-series-category {
	border-color: rgba(35, 99, 126, .14);
	background: rgba(255, 255, 255, .72);
	color: #607985;
}

html[data-theme="light"] .laboratory-series-category:hover {
	border-color: rgba(25, 157, 164, .28);
	background: rgba(227, 246, 248, .86);
	color: #24515e;
}

html[data-theme="light"] .laboratory-series-category.is-active {
	border-color: rgba(25, 157, 164, .34);
	background: rgba(38, 180, 183, .13);
	color: #126f74;
}

html[data-theme="light"] .laboratory-explorer-settings,
html[data-theme="light"] .laboratory-explorer-insights {
	border-color: rgba(35, 99, 126, .11);
	background: rgba(236, 247, 249, .88);
}

html[data-theme="light"] .laboratory-explorer-toggles button,
html[data-theme="light"] .laboratory-explorer-zoom button,
html[data-theme="light"] .laboratory-explorer-exports button,
html[data-theme="light"] .laboratory-explorer-gestures button,
html[data-theme="light"] .laboratory-explorer-window {
	border-color: rgba(35, 99, 126, .16);
	background: rgba(255, 255, 255, .88);
	color: #58727f;
	box-shadow: 0 2px 7px rgba(39, 79, 99, .045);
}

html[data-theme="light"] .laboratory-explorer-toggles button:hover,
html[data-theme="light"] .laboratory-explorer-zoom button:hover,
html[data-theme="light"] .laboratory-explorer-exports button:hover,
html[data-theme="light"] .laboratory-explorer-gestures button:hover {
	border-color: rgba(25, 157, 164, .3);
	background: #e9f7f8;
	color: #176f75;
}

html[data-theme="light"] .laboratory-explorer-toggles button.is-active,
html[data-theme="light"] .laboratory-explorer-exports button.is-active,
html[data-theme="light"] .laboratory-explorer-gestures button[aria-pressed="true"] {
	border-color: rgba(25, 157, 164, .36);
	background: rgba(38, 180, 183, .14);
	color: #0e7479;
}

html[data-theme="light"] .laboratory-explorer-window select {
	background-color: transparent !important;
	color: #365966 !important;
	color-scheme: light;
}

html[data-theme="light"] .laboratory-explorer-window select option {
	background: #fff;
	color: #244654;
}

html[data-theme="light"] .laboratory-explorer-zoom-badge {
	border-color: rgba(25, 157, 164, .28);
	background: rgba(255, 255, 255, .96);
	color: #13777c;
	box-shadow: 0 6px 18px rgba(39, 79, 99, .1);
}

html[data-theme="light"] .laboratory-explorer-zoom-badge button {
	background: rgba(38, 180, 183, .13);
	color: #126f74;
}

html[data-theme="light"] .laboratory-explorer-legend-item:hover { color: #173d4b; }
html[data-theme="light"] .laboratory-explorer-modes button { color: #486473; }
html[data-theme="light"] .laboratory-explorer-modes button.active { color: #116e75; background: rgba(38, 180, 183, .14); }
html[data-theme="light"] .laboratory-insights-heading { color: #5c7683; }
html[data-theme="light"] .laboratory-insights-scope { border-color: rgba(35, 99, 126, .18); color: #58727f; }

html[data-theme="light"] .laboratory-insights-scope.is-windowed {
    border-color: rgba(31, 151, 158, .34);
    background: rgba(31, 151, 158, .10);
    color: #17707a;
}

html[data-theme="light"] .laboratory-insights-table thead th {
	border-color: rgba(35, 99, 126, .12);
	background: rgba(241, 249, 251, .98);
	color: #607985;
}

html[data-theme="light"] .laboratory-insights-table tbody th,
html[data-theme="light"] .laboratory-insights-table tbody td strong {
	color: #244654;
}

html[data-theme="light"] .laboratory-insights-table tbody td {
	border-color: rgba(35, 99, 126, .08);
	color: #607985;
}

html[data-theme="light"] .laboratory-insights-table tbody tr:hover { background: rgba(38, 180, 183, .07); }

html[data-theme="light"] .laboratory-correlation-chip {
	border-color: rgba(35, 99, 126, .15);
	background: rgba(255, 255, 255, .78);
	color: #58727f;
}

html[data-theme="light"] .laboratory-correlation-chip b { color: #244654; }

/* Alerting is embedded in the workbench, so every surface must follow its theme. */
html[data-theme="light"] .laboratory-alerting-sheet { color: #244654; }
html[data-theme="light"] .laboratory-alerting-header {
	border-color: rgba(35, 99, 126, .14);
	background: linear-gradient(120deg, rgba(230, 247, 248, .94), rgba(245, 250, 252, .98));
}
html[data-theme="light"] .laboratory-alerting-header-icon,
html[data-theme="light"] .laboratory-alerting-scope > i,
html[data-theme="light"] .laboratory-threshold-add-copy > i {
	background: rgba(27, 169, 171, .11);
	color: #168d92 !important;
}
html[data-theme="light"] .laboratory-alerting-header-copy > span { color: #168d92; }
html[data-theme="light"] .laboratory-alerting-header h2,
html[data-theme="light"] .laboratory-alerting-scope strong,
html[data-theme="light"] .laboratory-threshold-add-copy strong,
html[data-theme="light"] .laboratory-threshold-copy > strong,
html[data-theme="light"] .laboratory-active-alarm-copy strong,
html[data-theme="light"] .laboratory-active-alarm-measure strong,
html[data-theme="light"] .laboratory-alarm-event strong,
html[data-theme="light"] .laboratory-alarm-value strong,
html[data-theme="light"] .laboratory-alerting-empty strong { color: #173745; }
html[data-theme="light"] .laboratory-alerting-header p,
html[data-theme="light"] .laboratory-alerting-scope span,
html[data-theme="light"] .laboratory-threshold-add-copy small,
html[data-theme="light"] .laboratory-active-alarm-copy small,
html[data-theme="light"] .laboratory-active-alarm-copy p,
html[data-theme="light"] .laboratory-active-alarm-measure small,
html[data-theme="light"] .laboratory-alarm-event > small,
html[data-theme="light"] .laboratory-alerting-empty span { color: #617c88; }
html[data-theme="light"] .laboratory-alerting-tabs {
	border-color: rgba(35, 99, 126, .13);
	background: rgba(238, 247, 249, .92);
}
html[data-theme="light"] .laboratory-alerting-tabs button { color: #607b87; }
html[data-theme="light"] .laboratory-alerting-tabs button:hover { color: #173745; }
html[data-theme="light"] .laboratory-alerting-tabs button.active {
	background: #fff;
	box-shadow: inset 0 0 0 1px rgba(27, 169, 171, .22), 0 3px 10px rgba(44, 86, 104, .07);
	color: #176f76;
}
html[data-theme="light"] .laboratory-alerting-tabs b { background: rgba(35, 99, 126, .08); color: #66808b; }
html[data-theme="light"] .laboratory-alerting-tabs button.active b { background: rgba(27, 169, 171, .12); color: #168d92; }
html[data-theme="light"] .laboratory-alerting-scope,
html[data-theme="light"] .laboratory-threshold-addbar,
html[data-theme="light"] .laboratory-alarm-filters {
	border-color: rgba(35, 99, 126, .13);
	background: rgba(250, 253, 254, .82);
}
html[data-theme="light"] .laboratory-alerting-empty {
	border-color: rgba(35, 99, 126, .16);
	background: rgba(245, 250, 251, .72);
}
html[data-theme="light"] .laboratory-alerting-empty > i { background: rgba(27, 169, 171, .09); color: #308b90; }
html[data-theme="light"] .laboratory-threshold-addbar .laboratory-threshold-parameter {
	border-color: rgba(35, 99, 126, .18) !important;
	background-color: #fff !important;
	color: #234653 !important;
	color-scheme: light !important;
}
html[data-theme="light"] .laboratory-threshold-addbar .laboratory-threshold-parameter option,
html[data-theme="light"] .laboratory-threshold-addbar .laboratory-threshold-parameter optgroup {
	background-color: #fff !important;
	color: #234653 !important;
	color-scheme: light !important;
}
html[data-theme="light"] .laboratory-threshold-addbar .laboratory-threshold-parameter optgroup {
	color: #66818d !important;
	font-weight: 700;
}
html[data-theme="light"] .laboratory-threshold-addbar .laboratory-threshold-parameter option {
	font-weight: 600;
}
html[data-theme="light"] .laboratory-threshold-add {
	border: 1px solid #11878d;
	background: #168f96;
	color: #fff;
	box-shadow: 0 4px 12px rgba(22, 143, 150, .16);
}
html[data-theme="light"] .laboratory-threshold-add:not(:disabled):hover,
html[data-theme="light"] .laboratory-threshold-add:not(:disabled):focus-visible {
	border-color: #087980;
	background: #087f86;
	box-shadow: 0 6px 15px rgba(22, 143, 150, .22);
	outline: none;
}
html[data-theme="light"] .laboratory-threshold-add:disabled {
	border-color: #bdd3d8;
	background: #dcebed;
	color: #708a94;
	box-shadow: none;
	filter: none;
	opacity: 1;
}
html[data-theme="light"] .laboratory-threshold-row,
html[data-theme="light"] .laboratory-alarm-row {
	border-color: rgba(35, 99, 126, .13);
	background: rgba(255, 255, 255, .78);
}
html[data-theme="light"] .laboratory-threshold-copy small,
html[data-theme="light"] .laboratory-threshold-toggle em,
html[data-theme="light"] .laboratory-alarm-row span { color: #617c88; }
html[data-theme="light"] .laboratory-threshold-copy > div span { background: rgba(218, 147, 52, .10); color: #9a6219; }
html[data-theme="light"] .laboratory-threshold-copy > div span.alarm { background: rgba(219, 72, 88, .09); color: #b53d4d; }
html[data-theme="light"] .laboratory-threshold-toggle span { background: #c9d8dd; }
html[data-theme="light"] .laboratory-threshold-toggle span::after { background: #fff; box-shadow: 0 1px 4px rgba(33, 67, 80, .18); }
html[data-theme="light"] .laboratory-threshold-toggle input:checked + span { background: #28a6a4; }
html[data-theme="light"] .laboratory-threshold-edit,
html[data-theme="light"] .laboratory-threshold-delete { border-color: rgba(35, 99, 126, .15); background: rgba(255, 255, 255, .8); color: #56737f; }
html[data-theme="light"] .laboratory-threshold-delete { color: #c64b59; }
html[data-theme="light"] .laboratory-active-alarm-card {
	background: linear-gradient(90deg, rgba(255, 184, 92, .12), rgba(255, 255, 255, .82) 25%);
}
html[data-theme="light"] .laboratory-active-alarm-card.is-alarm {
	background: linear-gradient(90deg, rgba(255, 101, 116, .11), rgba(255, 255, 255, .82) 25%);
}
html[data-theme="light"] .laboratory-active-alarm-measure,
html[data-theme="light"] .laboratory-alarm-value { border-color: rgba(35, 99, 126, .12); }

/* The threshold editor is a separate dialog and therefore needs an explicit light palette. */
html[data-theme="light"] .waterly-dialog.threshold-editor .modal-content {
	border-color: rgba(35, 99, 126, .18) !important;
	background:
		radial-gradient(ellipse at 0 0, rgba(88, 214, 215, .13), transparent 55%),
		#f7fbfc !important;
	box-shadow: 0 24px 70px rgba(31, 65, 79, .18);
	color: #294955;
}
html[data-theme="light"] .waterly-dialog.threshold-editor .modal-header {
	border-color: rgba(35, 99, 126, .12) !important;
}
html[data-theme="light"] .waterly-dialog.threshold-editor .modal-title strong,
html[data-theme="light"] .threshold-editor h3,
html[data-theme="light"] .threshold-status-copy strong { color: #173745; }
html[data-theme="light"] .waterly-dialog.threshold-editor .modal-title small,
html[data-theme="light"] .threshold-editor .threshold-eyebrow { color: #4f7d8c; }
html[data-theme="light"] .waterly-dialog.threshold-editor .btn-close {
	background-color: rgba(35, 99, 126, .07);
	filter: none !important;
	opacity: .72;
}
html[data-theme="light"] .threshold-title-icon {
	border-color: rgba(27, 169, 171, .2);
	background: rgba(27, 169, 171, .09);
	color: #168d92;
}
html[data-theme="light"] .threshold-status {
	border-color: rgba(35, 99, 126, .13);
	background: rgba(255, 255, 255, .76);
}
html[data-theme="light"] .threshold-status-copy small,
html[data-theme="light"] .threshold-caption,
html[data-theme="light"] .threshold-section-title p,
html[data-theme="light"] .threshold-scope-note { color: #637f8b; }
html[data-theme="light"] .threshold-editor .threshold-status-control .form-check-label { color: #597783 !important; }
html[data-theme="light"] .threshold-switch > span {
	border-color: rgba(35, 99, 126, .14);
	background: #c9d8dd;
}
html[data-theme="light"] .threshold-switch > span::after {
	background: #fff;
	box-shadow: 0 1px 4px rgba(33, 67, 80, .18);
}
html[data-theme="light"] .threshold-switch input:checked + span { background: #249da0; }
html[data-theme="light"] .threshold-preview {
	border-color: rgba(35, 99, 126, .14);
	background: linear-gradient(150deg, rgba(229, 246, 247, .9), rgba(248, 252, 253, .98));
}
html[data-theme="light"] .threshold-legend { color: #5f7985; }
html[data-theme="light"] .threshold-editor .threshold-bound {
	border-color: rgba(35, 99, 126, .13);
	background: rgba(255, 255, 255, .72);
}
html[data-theme="light"] .threshold-editor .threshold-bound.is-warning {
	border-color: rgba(207, 137, 41, .22);
	background: linear-gradient(145deg, rgba(235, 166, 70, .09), rgba(255, 255, 255, .82));
}
html[data-theme="light"] .threshold-editor .threshold-bound.is-alarm {
	border-color: rgba(211, 77, 96, .2);
	background: linear-gradient(145deg, rgba(224, 91, 109, .075), rgba(255, 255, 255, .82));
}
html[data-theme="light"] .threshold-bound.is-warning .threshold-bound-icon { background: rgba(207, 137, 41, .13); color: #9b6419; }
html[data-theme="light"] .threshold-bound.is-alarm .threshold-bound-icon { background: rgba(211, 77, 96, .11); color: #b43d50; }
html[data-theme="light"] .threshold-editor .threshold-bound .form-label { color: #54717d !important; }
html[data-theme="light"] .threshold-bound p { color: #718b96; }
html[data-theme="light"] .threshold-editor .threshold-bound.is-enabled.is-warning {
	border-color: rgba(207, 137, 41, .42);
	background: linear-gradient(145deg, rgba(235, 166, 70, .16), rgba(255, 255, 255, .9));
}
html[data-theme="light"] .threshold-editor .threshold-bound.is-enabled.is-alarm {
	border-color: rgba(211, 77, 96, .38);
	background: linear-gradient(145deg, rgba(224, 91, 109, .14), rgba(255, 255, 255, .9));
}
html[data-theme="light"] .threshold-editor .threshold-bound.is-warning.is-enabled .form-label { color: #9b6419 !important; }
html[data-theme="light"] .threshold-editor .threshold-bound.is-alarm.is-enabled .form-label { color: #b43d50 !important; }
html[data-theme="light"] .threshold-editor .threshold-value input.form-control {
	border-color: rgba(35, 99, 126, .16);
	color: #173745;
}
html[data-theme="light"] .threshold-value .threshold-unit { color: #607d89; }
html[data-theme="light"] .threshold-value .off-text { color: #91a6ae; }
html[data-theme="light"] .threshold-editor .btn-auto {
	border-color: rgba(22, 143, 150, .3);
	color: #277881;
}
html[data-theme="light"] .threshold-editor .btn-auto:not(:disabled):hover,
html[data-theme="light"] .threshold-editor .btn-auto:not(:disabled):focus-visible {
	background: rgba(27, 169, 171, .07);
	color: #126e75;
}
html[data-theme="light"] .threshold-editor .threshold-validation {
	border-color: rgba(196, 74, 96, .28);
	background: rgba(196, 74, 96, .08);
	color: #a83d52;
}
html[data-theme="light"] .threshold-editor .threshold-validation:not([hidden])::before {
	color: #c24d63;
}
html[data-theme="light"] .threshold-editor .alert-disabled {
	border-color: rgba(35, 99, 126, .18);
	color: #607d89;
}
html[data-theme="light"] .waterly-dialog.threshold-editor .modal-footer {
	border-color: rgba(35, 99, 126, .12) !important;
	background: rgba(239, 247, 249, .92) !important;
}
html[data-theme="light"] .threshold-save-note { color: #607d89; }
html[data-theme="light"] .waterly-dialog.threshold-editor .modal-footer .btn-danger { color: #b44555; }

html[data-theme="light"] .waterly-dialog.threshold-delete-dialog .modal-content {
	border-color: rgba(35, 99, 126, .18) !important;
	background: linear-gradient(145deg, #f7fbfc, #edf7f8) !important;
	box-shadow: 0 24px 70px rgba(31, 65, 79, .18);
	color: #294955;
}
html[data-theme="light"] .waterly-dialog.threshold-delete-dialog .modal-title,
html[data-theme="light"] .threshold-delete-dialog .threshold-delete-parameter { color: #173745; }
html[data-theme="light"] .waterly-dialog.threshold-delete-dialog .modal-body { color: #617c88; }
html[data-theme="light"] .waterly-dialog.threshold-delete-dialog .modal-footer {
	border-color: rgba(35, 99, 126, .12) !important;
	background: rgba(239, 247, 249, .92) !important;
}
html[data-theme="light"] .waterly-dialog.threshold-delete-dialog .threshold-delete-cancel {
	border-color: rgba(35, 99, 126, .16) !important;
	background: rgba(255, 255, 255, .82) !important;
	color: #52717d !important;
}

html[data-theme="light"] .waterly-dialog.threshold-unsaved-dialog .modal-content {
	border-color: rgba(35, 99, 126, .18) !important;
	background: linear-gradient(145deg, #f7fbfc, #edf7f8) !important;
	box-shadow: 0 24px 70px rgba(31, 65, 79, .18);
	color: #294955;
}
html[data-theme="light"] .waterly-dialog.threshold-unsaved-dialog .modal-title,
html[data-theme="light"] .threshold-unsaved-dialog .threshold-unsaved-parameter { color: #173745; }
html[data-theme="light"] .threshold-unsaved-dialog .threshold-unsaved-icon {
	border-color: rgba(18, 127, 125, .25);
	background: rgba(48, 179, 166, .12);
	color: #127f7d;
}
html[data-theme="light"] .waterly-dialog.threshold-unsaved-dialog .modal-body { color: #526f7b; }
html[data-theme="light"] .waterly-dialog.threshold-unsaved-dialog .modal-footer {
	border-color: rgba(35, 99, 126, .12) !important;
	background: rgba(239, 247, 249, .92) !important;
}
html[data-theme="light"] .waterly-dialog.threshold-unsaved-dialog .threshold-unsaved-discard {
	border-color: rgba(35, 99, 126, .22) !important;
	background: rgba(255, 255, 255, .82) !important;
	color: #315866 !important;
}
html[data-theme="light"] .waterly-dialog.threshold-unsaved-dialog .threshold-unsaved-save {
	background: #1c9f99 !important;
	border-color: #1c9f99 !important;
	color: #fff !important;
}

html[data-theme="light"] .waterly-dialog.threshold-suggestion-dialog .modal-content {
	border-color: rgba(35, 99, 126, .18) !important;
	background: linear-gradient(145deg, #f7fbfc, #edf7f8) !important;
	box-shadow: 0 24px 70px rgba(31, 65, 79, .18);
	color: #294955;
}
html[data-theme="light"] .waterly-dialog.threshold-suggestion-dialog .modal-title,
html[data-theme="light"] .threshold-suggestion-dialog .threshold-suggestion-parameter { color: #173745; }
html[data-theme="light"] .threshold-suggestion-dialog .threshold-suggestion-icon {
	border-color: rgba(18, 127, 125, .25);
	background: rgba(48, 179, 166, .12);
	color: #127f7d;
}
html[data-theme="light"] .waterly-dialog.threshold-suggestion-dialog .modal-body { color: #526f7b; }
html[data-theme="light"] .waterly-dialog.threshold-suggestion-dialog .modal-footer {
	border-color: rgba(35, 99, 126, .12) !important;
	background: rgba(239, 247, 249, .92) !important;
}
html[data-theme="light"] .waterly-dialog.threshold-suggestion-dialog .threshold-suggestion-manual {
	border-color: rgba(35, 99, 126, .22) !important;
	background: rgba(255, 255, 255, .82) !important;
	color: #315866 !important;
}
html[data-theme="light"] .waterly-dialog.threshold-suggestion-dialog .threshold-suggestion-accept {
	background: #1c9f99 !important;
	border-color: #1c9f99 !important;
	color: #fff !important;
}
html[data-theme="light"] .waterly-dialog:is(.threshold-suggestion-dialog, .threshold-unsaved-dialog, .threshold-delete-dialog) .btn-close {
	filter: none !important;
	background-color: rgba(35, 99, 126, .09) !important;
	opacity: 1;
}

/* Embedded diagnostic charts are part of the laboratory and need the same surface. */
html[data-theme="light"] .laboratory-workbench .diagnostic-statistic-widget .widget-parameter-with-chart {
	color: #274653;
}

html[data-theme="light"] .laboratory-workbench .diagnostic-statistic-widget .widget-header,
html[data-theme="light"] .laboratory-workbench .diagnostic-statistic-widget .widget-value,
html[data-theme="light"] .laboratory-workbench .diagnostic-reading-primary b,
html[data-theme="light"] .laboratory-workbench .diagnostic-multi-stat-primary b,
html[data-theme="light"] .laboratory-workbench .diagnostic-chart-stat > strong {
	color: #173745;
}

html[data-theme="light"] .laboratory-workbench .diagnostic-chart-stat-trend > strong {
	color: var(--diagnostic-chart-color, #168d92);
}

html[data-theme="light"] .laboratory-workbench .diagnostic-chart-stat-unit {
	color: #587480;
}

html[data-theme="light"] .laboratory-workbench .diagnostic-chart-reading,
html[data-theme="light"] .laboratory-workbench .diagnostic-chart-stat {
	border-color: rgba(35, 99, 126, .12);
	background: rgba(236, 247, 249, .88);
}

html[data-theme="light"] .laboratory-workbench .diagnostic-chart-stage {
	border-color: rgba(35, 99, 126, .12);
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--diagnostic-chart-color, #269fa5) 5%, transparent), transparent 46%),
		rgba(247, 251, 252, .94);
}

html[data-theme="light"] .laboratory-workbench .diagnostic-chart-footer,
html[data-theme="light"] .laboratory-workbench .diagnostic-chart-title > span,
html[data-theme="light"] .laboratory-workbench .diagnostic-chart-reading > span,
html[data-theme="light"] .laboratory-workbench .diagnostic-chart-stat > span,
html[data-theme="light"] .laboratory-workbench .diagnostic-statistic-widget .widget-date,
html[data-theme="light"] .laboratory-workbench .diagnostic-statistic-widget .widget-unit {
	color: #667f8b;
}

html[data-theme="light"] .laboratory-workbench .diagnostic-series-chip {
	border-color: color-mix(in srgb, var(--series-color) 48%, rgba(35, 99, 126, .18));
	background: color-mix(in srgb, var(--series-color) 14%, rgba(255, 255, 255, .94));
	color: #345563;
	font-size: 9px;
}

html[data-theme="light"] .laboratory-workbench .diagnostic-series-chip:hover,
html[data-theme="light"] .laboratory-workbench .diagnostic-series-chip:focus-visible {
	border-color: color-mix(in srgb, var(--series-color) 70%, rgba(35, 99, 126, .22));
	background: color-mix(in srgb, var(--series-color) 21%, #fff);
	color: #173745;
}

html[data-theme="light"] .laboratory-workbench .diagnostic-reading-secondary em {
	color: #526f7c;
	font-size: 8px;
}

html[data-theme="light"] .laboratory-workbench .diagnostic-reading-secondary b {
	color: #214552;
	font-size: 12px;
}

html[data-theme="light"] .laboratory-workbench .diagnostic-multi-stat-secondary b {
	color: #3f606d;
}

/* Full-screen analytical view. */
html[data-theme="light"] .laboratory-analysis-window {
	--analysis-muted: #526d7b;
	--analysis-text: #244654;
	--analysis-surface: #fff;
	--analysis-border: rgba(35, 99, 126, .25);
	background:
		radial-gradient(circle at 12% -8%, rgba(28, 168, 177, .11), transparent 31%),
		#edf6f8;
}

html[data-theme="light"] .laboratory-series-option small,
html[data-theme="light"] .laboratory-series-option em,
html[data-theme="light"] .laboratory-series-clear,
html[data-theme="light"] .laboratory-series-limit,
html[data-theme="light"] .laboratory-explorer-footer,
html[data-theme="light"] .laboratory-analysis-window-bar span { color: #526d7b; }

html[data-theme="light"] .laboratory-analysis-window-bar {
	border-color: rgba(35, 99, 126, .14);
	background: rgba(249, 253, 254, .96);
}

html[data-theme="light"] .laboratory-analysis-window-bar strong { color: #173745; }
html[data-theme="light"] .laboratory-analysis-window-close { border-color: rgba(35, 99, 126, .16); background: #fff; color: #536f7b; }

/* CSV export is mounted outside .laboratory-workbench. */
html[data-theme="light"] .laboratory-export-backdrop { background: rgba(33, 58, 70, .35); }
html[data-theme="light"] .laboratory-export-sheet {
	border-color: rgba(35, 99, 126, .19);
	background:
		radial-gradient(circle at 91% 0, rgba(33, 150, 170, .09), transparent 30%),
		linear-gradient(145deg, #fbfdfe, #edf5f8);
	box-shadow: 0 35px 90px rgba(38, 70, 86, .24);
}

html[data-theme="light"] .laboratory-export-header,
html[data-theme="light"] .laboratory-export-footer { background: rgba(250, 253, 254, .9); }
html[data-theme="light"] .laboratory-export-card,
html[data-theme="light"] .laboratory-export-columns,
html[data-theme="light"] .export-summary article { border-color: rgba(35, 99, 126, .13); background: rgba(255, 255, 255, .7); }
html[data-theme="light"] .export-csv-tool,
html[data-theme="light"] .laboratory-export-card > header > div,
html[data-theme="light"] .laboratory-export-columns > header > div strong,
html[data-theme="light"] .laboratory-export-column-copy strong,
html[data-theme="light"] .laboratory-export-heading h2,
html[data-theme="light"] .laboratory-export-no-data strong { color: #173745; }
html[data-theme="light"] .laboratory-export-window input,
html[data-theme="light"] .laboratory-export-window select { color-scheme: light; }
html[data-theme="light"] .laboratory-export-close,
html[data-theme="light"] .laboratory-export-cancel,
html[data-theme="light"] .export-presets button,
html[data-theme="light"] .laboratory-export-quick-actions button { border-color: rgba(35, 99, 126, .16); background: rgba(255, 255, 255, .75); color: #58727f; }

@media (max-width: 767px) {
	html[data-theme="light"] .select-tile-contener {
		background:
			radial-gradient(circle at 12% 0, color-mix(in srgb, var(--marker-wqi-color, #16a394) 10%, transparent), transparent 34%),
			radial-gradient(circle at 100% 88%, color-mix(in srgb, var(--marker-wqi-color, #16a394) 5%, transparent), transparent 35%),
			var(--mobile-panel-base) !important;
	}
}

html[data-theme="light"] .laboratory-shell :is(.laboratory-hero, .laboratory-command-deck, .laboratory-navigation, .laboratory-parameter-section, .laboratory-snapshot-group, .laboratory-analysis-launcher) { border: 0; box-shadow: none; }
html[data-theme="light"] .laboratory-shell :is(.laboratory-hero, .laboratory-parameter-section, .laboratory-snapshot-group) { background: transparent; }
html[data-theme="light"] .laboratory-shell :is(.laboratory-command-deck, .laboratory-navigation) { border-bottom: 1px solid #d5e3eb; background: #f1f8fb; }
html[data-theme="light"] .laboratory-live-status { border-color: #d5e3eb; background: transparent; }

html[data-theme="light"] .laboratory-primary-actions .laboratory-autorefresh { opacity: 1; }
html[data-theme="light"] .laboratory-primary-actions .laboratory-autorefresh > b { color: #285a65; }
html[data-theme="light"] .laboratory-primary-actions .laboratory-autorefresh.is-paused > b { color: #805313; }
html[data-theme="light"] .laboratory-primary-actions .laboratory-autorefresh.is-syncing > b { color: #245f8c; }

@media (max-width: 767.98px) {
    html[data-theme="light"] .laboratory-shell .laboratory-command-deck { background: transparent; }
    html[data-theme="light"] .laboratory-shell .laboratory-navigation { background: #f0f7fa; }
    html[data-theme="light"] .laboratory-section-select { border-color: #c6dae4; background-color: #f9fcfd !important; color: #284f60; }
    html[data-theme="light"] .laboratory-period-navigator .laboratory-icon-button { border-color: #c6dae4; background-color: #f9fcfd; color: #284f60; }
    html[data-theme="light"] .laboratory-period-navigator { background: transparent; }
    html[data-theme="light"] .laboratory-shell :is(.laboratory-eyebrow, .laboratory-live-status span, .laboratory-mobile-navigation > span, .laboratory-time-heading span, .laboratory-snapshot-subgroup-header) { color: #4d6d7d; }
    html[data-theme="light"] .laboratory-shell :is(.laboratory-live-status small, .laboratory-snapshot-group-meta, .laboratory-snapshot-card small) { color: #567685; }
    html[data-theme="light"] .laboratory-snapshot-card .laboratory-responsive-label,
    html[data-theme="light"] .laboratory-snapshot-card .laboratory-responsive-label span { color: #3b6172; }
    html[data-theme="light"] .laboratory-snapshot-card.sensors > div > span,
    html[data-theme="light"] .laboratory-snapshot-card.sensors .laboratory-summary-reading small { color: #466d7d; }
    html[data-theme="light"] .laboratory-summary-reading .laboratory-summary-alarm { color: #b8354c; }
    html[data-theme="light"] .laboratory-summary-reading .laboratory-summary-warning { color: #90611c; }
    html[data-theme="light"] .laboratory-primary-actions .laboratory-autorefresh > i { color: #16838c; }
    html[data-theme="light"] .laboratory-shell .laboratory-snapshot-card.has-warning small[data-lab-kpi-note] { color: #90611c; }
    html[data-theme="light"] .laboratory-shell .laboratory-snapshot-card.has-alarm small[data-lab-kpi-note] { color: #b8354c; }
    html[data-theme="light"] .laboratory-statistic .diagnostic-chart-stat > span,
    html[data-theme="light"] .laboratory-statistic .diagnostic-chart-reading > span,
    html[data-theme="light"] .laboratory-alerting-tabs button,
    html[data-theme="light"] .laboratory-alerting-header p { color: #537584; }
}


/* shared/ui/widgets/chart-lab-widget.css */
/**************************************************************************************************
	@author         hommie.pl
	@contributors   Rafał Złotorzyński
	@module         CSS
	@file           widget_chart_lab.css
	@todo           Zbiorczy wykres parametrów (nowy widget) — style okna i renderu SVG
**************************************************************************************************/

/* Kontener modalu */
.waterly-chart-lab-v2 {
    position: fixed;
    z-index: 2000;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    transition: opacity 260ms ease;
}

.waterly-chart-lab-v2.is-visible { opacity: 1; }

/* Sterowanie skalą jest niezależne od zakresu czasu i nie wymaga pobierania danych. */
.waterly-chart-lab-v2 .wcl2-display-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px 14px;
    padding: 0 18px 12px;
    position: relative;
    z-index: 3;
    flex-shrink: 0;
    color: #94a3b8;
}

.waterly-chart-lab-v2 .wcl2-display-options[hidden] {
    display: none !important;
}

.waterly-chart-lab-v2 .wcl2-display-control {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 600;
}

.waterly-chart-lab-v2 .wcl2-display-switch {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 999px;
    background: rgba(2, 6, 14, 0.6);
}

.waterly-chart-lab-v2 .wcl2-display-option {
    display: inline-flex;
    width: auto;
    height: 27px;
    padding: 0 10px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    line-height: normal;
    transition: all 200ms ease;
}

.waterly-chart-lab-v2 .wcl2-display-option > i {
    width: 14px;
    text-align: center;
}

.waterly-chart-lab-v2 .wcl2-display-option:hover {
    color: #e2e8f0;
}

.waterly-chart-lab-v2 .wcl2-display-option:focus-visible {
    outline: 2px solid #67e8f9;
    outline-offset: 2px;
}

.waterly-chart-lab-v2 .wcl2-display-option.is-active {
    background: rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    color: #fff;
}

.waterly-chart-lab-v2 .wcl2-panel-title { fill: #e2e8f0; font-size: 12px; font-weight: 600; }
.waterly-chart-lab-v2 .wcl2-panel-time { fill: #a9bacd; font-size: 11px; }
.waterly-chart-lab-v2 .wcl2-context-range-label {
    fill: #ffc18a;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-display-options {
    color: #36566b;
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-display-switch {
    border-color: rgba(28, 73, 104, 0.16);
    background: rgba(224, 235, 240, 0.72);
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-display-option {
    color: #607b8b;
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-display-option:hover {
    color: #173241;
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-display-option.is-active {
    background: #fff;
    box-shadow: 0 2px 8px rgba(31, 55, 75, 0.12);
    color: #0d659f;
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-panel-title { fill: #173241; }
html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-panel-time { fill: #47647a; }
.waterly-chart-lab-v2.is-closing { opacity: 0; }

.waterly-chart-lab-v2.is-bottom-sheet {
    z-index: 12060;
    align-items: flex-end;
    padding: 16px 16px 0;
}

.waterly-chart-lab-v2 .wcl2-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(3, 7, 14, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* Okno */
.waterly-chart-lab-v2 .wcl2-window {
    position: relative;
    container: chart-window / inline-size;
    display: flex;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
    width: 100%;
    max-width: 1600px;
    max-height: 100%;
    flex-direction: column;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.55) 0%, rgba(15, 23, 42, 0.9) 100%);
    box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
    transform: translateY(8px) scale(0.99);
    transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.waterly-chart-lab-v2 .wcl2-window::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.waterly-chart-lab-v2 .wcl2-window-scrollbar {
    position: fixed;
    z-index: 12;
    display: none;
    width: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(82, 101, 121, 0.14);
    pointer-events: none;
}

.waterly-chart-lab-v2 .wcl2-window-scrollbar.has-overflow {
    display: block;
}

.waterly-chart-lab-v2 .wcl2-window-scrollbar > i {
    display: block;
    width: 100%;
    min-height: 42px;
    border-radius: inherit;
    background: rgba(116, 139, 163, 0.78);
    box-shadow: 0 0 5px rgba(15, 23, 42, 0.32);
    transition: height 0.12s linear, transform 0.06s linear;
}

.waterly-chart-lab-v2 .wcl2-wheel-zoom-hint {
    position: fixed;
    z-index: 24;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 12px;
    border: 1px solid rgba(103, 207, 255, 0.3);
    border-radius: 12px;
    background: rgba(8, 18, 31, 0.94);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.34);
    color: #d8e7f1;
    font-size: 12px;
    line-height: 1;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, calc(-50% + 8px));
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.waterly-chart-lab-v2 .wcl2-wheel-zoom-hint.is-visible {
    opacity: 1;
    transform: translate(-50%, -50%);
}

.waterly-chart-lab-v2 .wcl2-wheel-zoom-hint > i {
    color: #50c9ff;
}

.waterly-chart-lab-v2 .wcl2-wheel-zoom-hint > span {
    margin-right: 2px;
    font-weight: 700;
}

.waterly-chart-lab-v2 .wcl2-wheel-zoom-hint kbd {
    display: inline-flex;
    min-width: 27px;
    height: 24px;
    padding: 0 6px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(148, 190, 215, 0.42);
    border-radius: 6px;
    background: rgba(73, 104, 126, 0.35);
    box-shadow: inset 0 -2px rgba(0, 0, 0, 0.22);
    color: #f2f8fb;
    font: 700 12px/1 var(--wl-font-sans);
}

.waterly-chart-lab-v2 .wcl2-wheel-zoom-hint small,
.waterly-chart-lab-v2 .wcl2-wheel-zoom-hint b {
    color: #9fb4c2;
    font-size: 11px;
    font-weight: 600;
}

.waterly-chart-lab-v2.is-visible .wcl2-window { transform: translateY(0) scale(1); }

.waterly-chart-lab-v2.is-bottom-sheet .wcl2-window {
    width: min(1500px, 100%);
    height: min(900px, calc(100vh - 16px));
    min-height: 0;
    border-bottom: 0;
    border-color: rgba(101, 184, 255, 0.3);
    border-radius: 24px 24px 0 0;
    background:
        radial-gradient(circle at 90% 0, rgba(33, 147, 243, 0.11), transparent 31%),
        linear-gradient(150deg, #172129, #0d1419);
    box-shadow: 0 28px 100px rgba(0, 0, 0, 0.68), 0 0 45px rgba(41, 139, 205, 0.12);
    transform: translateY(calc(100% + 32px));
    transition: transform 320ms cubic-bezier(0.2, 0.82, 0.2, 1);
}

.waterly-chart-lab-v2.is-bottom-sheet.is-visible .wcl2-window {
    transform: translateY(0);
}

.waterly-chart-lab-v2.is-bottom-sheet.is-closing .wcl2-window {
    transform: translateY(calc(100% + 32px));
}

.waterly-chart-lab-v2 .wcl2-sheet-toolbar {
    position: relative;
    z-index: 7;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    border-bottom: 1px solid rgba(143, 184, 220, 0.12);
    background: linear-gradient(180deg, rgba(20, 42, 57, 0.96), rgba(8, 22, 31, 0.68));
    backdrop-filter: blur(16px);
}

.waterly-chart-lab-v2 .wcl2-sheet-collapse {
    width: auto;
    min-width: 190px;
    height: auto;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 22px;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    border: 0;
    border-radius: 10px;
    color: #dbe9f2;
    background: transparent;
    font: inherit;
    cursor: pointer;
    transition: color 180ms ease, background 180ms ease;
}

.waterly-chart-lab-v2 .wcl2-sheet-collapse:hover,
.waterly-chart-lab-v2 .wcl2-sheet-collapse:focus-visible {
    color: #ffffff;
    background: rgba(101, 184, 255, 0.09);
    outline: none;
}

.waterly-chart-lab-v2 .wcl2-sheet-handle {
    width: 46px;
    height: 4px;
    border-radius: 99px;
    background: rgba(152, 204, 235, 0.44);
    box-shadow: 0 0 14px rgba(79, 181, 244, 0.18);
}

.waterly-chart-lab-v2.is-minimal-sheet .wcl2-sheet-toolbar {
    min-height: 26px;
    flex-basis: 26px;
    border-bottom: 0;
    background: transparent;
}

.waterly-chart-lab-v2.is-minimal-sheet .wcl2-sheet-collapse {
    display: flex;
    width: 100%;
    min-width: 0;
    height: 26px;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.waterly-chart-lab-v2.is-minimal-sheet .wcl2-sheet-handle {
    width: 52px;
}

.waterly-chart-lab-v2 .wcl2-sheet-collapse-copy {
    min-width: 0;
    text-align: left;
}

.waterly-chart-lab-v2 .wcl2-sheet-collapse-copy strong,
.waterly-chart-lab-v2 .wcl2-sheet-collapse-copy small {
    display: block;
    white-space: nowrap;
}

.waterly-chart-lab-v2 .wcl2-sheet-collapse-copy strong {
    font-size: 10px;
    line-height: 1.1;
}

.waterly-chart-lab-v2 .wcl2-sheet-collapse-copy small {
    margin-top: 1px;
    color: #748792;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.waterly-chart-lab-v2 .wcl2-sheet-collapse > i {
    color: #79c2ff;
    font-size: 11px;
}

/* Clip decorative overflow without affecting chart controls or stacked panels. */
.waterly-chart-lab-v2 .wcl2-background {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
}

/* Poświaty tła */
.waterly-chart-lab-v2 .wcl2-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(60px);
}

.waterly-chart-lab-v2 .wcl2-glow-a {
    top: -70px;
    left: -60px;
    width: 220px;
    height: 220px;
    background: rgba(56, 189, 248, 0.12);
}

.waterly-chart-lab-v2 .wcl2-glow-b {
    right: -50px;
    bottom: -80px;
    width: 260px;
    height: 260px;
    background: rgba(139, 92, 246, 0.1);
}

/* Nagłówek */
.waterly-chart-lab-v2 .wcl2-header {
    position: relative;
    z-index: 80;
    order: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px 14px;
}

.waterly-chart-lab-v2 .wcl2-heading {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 12px;
}

.waterly-chart-lab-v2 .wcl2-heading-icon {
    display: flex;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    color: #67e8f9;
    border: 1px solid rgba(103, 232, 249, 0.2);
    border-radius: 12px;
    background: rgba(103, 232, 249, 0.08);
    font-size: 17px;
}

.waterly-chart-lab-v2 .wcl2-heading strong {
    display: block;
    overflow: hidden;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.2px;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.waterly-chart-lab-v2 .wcl2-heading small {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 5px;
    color: #94a3b8;
    font-size: 10px;
}

.waterly-chart-lab-v2 .wcl2-live {
    display: flex;
    align-items: center;
    gap: 6px;
}

.waterly-chart-lab-v2 .wcl2-live i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    animation: wcl2-pulse 2s infinite;
}

@keyframes wcl2-pulse {
    70% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.waterly-chart-lab-v2 .wcl2-sep { color: #475569; }

.waterly-chart-lab-v2 .wcl2-header-tools {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
}

.waterly-chart-lab-v2 .wcl2-time-toolbar,
.waterly-chart-lab-v2 .wcl2-time-navigation {
    display: flex;
    align-items: center;
    gap: 6px;
}

.waterly-chart-lab-v2 .wcl2-time-navigation {
    gap: 2px;
    padding: 2px;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 999px;
    background: rgba(2, 6, 14, 0.6);
}

.waterly-chart-lab-v2 .wcl2-time-nav {
    display: inline-flex;
    width: 27px;
    height: 27px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    font-size: 9px;
    transition: color 180ms ease, background 180ms ease, opacity 180ms ease;
}

.waterly-chart-lab-v2 .wcl2-time-nav:hover:not(:disabled),
.waterly-chart-lab-v2 .wcl2-time-nav:focus-visible {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    outline: none;
}

.waterly-chart-lab-v2 .wcl2-time-nav:disabled {
    cursor: default;
    opacity: 0.28;
}

.waterly-chart-lab-v2 .wcl2-export {
    position: relative;
    z-index: 70;
}

.waterly-chart-lab-v2 .wcl2-export-toggle {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    border: 1px solid rgba(103, 232, 249, 0.22);
    border-radius: 999px;
    background: rgba(8, 145, 178, 0.08);
    color: #a5f3fc;
    cursor: pointer;
    font: inherit;
    font-size: 10px;
    font-weight: 700;
    transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}

.waterly-chart-lab-v2 .wcl2-export-toggle > i:last-child {
    color: #64748b;
    font-size: 7px;
    transition: transform 180ms ease;
}

.waterly-chart-lab-v2 .wcl2-export-toggle[aria-expanded="true"] > i:last-child {
    transform: rotate(180deg);
}

.waterly-chart-lab-v2 .wcl2-export-toggle:hover:not(:disabled),
.waterly-chart-lab-v2 .wcl2-export-toggle:focus-visible {
    border-color: rgba(103, 232, 249, 0.45);
    background: rgba(8, 145, 178, 0.15);
    color: #ffffff;
    outline: none;
}

.waterly-chart-lab-v2 .wcl2-export-toggle:disabled {
    cursor: default;
    opacity: 0.38;
}

.waterly-chart-lab-v2 .wcl2-export-menu {
    position: absolute;
    z-index: 90;
    top: calc(100% + 8px);
    right: 0;
    width: 190px;
    padding: 6px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 13px;
    background: rgba(8, 14, 24, 0.98);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px) scale(0.98);
    transform-origin: top right;
    transition: opacity 160ms ease, transform 160ms ease;
}

.waterly-chart-lab-v2 .wcl2-export-menu.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.waterly-chart-lab-v2 .wcl2-export-menu > button {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 9px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #cbd5e1;
    cursor: pointer;
    font: inherit;
    text-align: left;
    transition: background 160ms ease, color 160ms ease;
}

.waterly-chart-lab-v2 .wcl2-export-menu > button:hover,
.waterly-chart-lab-v2 .wcl2-export-menu > button:focus-visible {
    background: rgba(56, 189, 248, 0.09);
    color: #ffffff;
    outline: none;
}

.waterly-chart-lab-v2 .wcl2-export-menu > button > i {
    width: 18px;
    color: #38bdf8;
    font-size: 13px;
    text-align: center;
}

.waterly-chart-lab-v2 .wcl2-export-menu > button > span,
.waterly-chart-lab-v2 .wcl2-export-menu > button strong,
.waterly-chart-lab-v2 .wcl2-export-menu > button small {
    display: block;
}

.waterly-chart-lab-v2 .wcl2-export-menu > button strong {
    font-size: 10px;
}

.waterly-chart-lab-v2 .wcl2-export-menu > button small {
    margin-top: 1px;
    color: #64748b;
    font-size: 8px;
}

/* Konfigurator CSV — odpowiednik ustawień eksportu z laboratorium. */
.waterly-chart-lab-v2 .wcl2-csv-prompt { position: fixed; z-index: 100; inset: 0; display: none; padding: 16px; place-items: center; }
.waterly-chart-lab-v2 .wcl2-csv-prompt.is-open { display: grid; }
.waterly-chart-lab-v2 .wcl2-csv-backdrop { position: absolute; inset: 0; background: rgba(2, 8, 13, 0.8); backdrop-filter: blur(10px); }
.waterly-chart-lab-v2 .wcl2-csv-sheet { position: relative; z-index: 1; display: flex; width: min(720px, calc(100vw - 32px)); max-height: min(760px, calc(100dvh - 32px)); overflow: hidden; flex-direction: column; border: 1px solid rgba(101, 184, 255, 0.22); border-radius: 20px; background: radial-gradient(circle at 90% 0, rgba(33, 150, 243, 0.1), transparent 32%), linear-gradient(145deg, #172129, #0d1419); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); color: #d7e4e9; }
.waterly-chart-lab-v2 .wcl2-csv-sheet > header,
.waterly-chart-lab-v2 .wcl2-csv-sheet > footer { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 14px; background: rgba(12, 22, 28, 0.88); }
.waterly-chart-lab-v2 .wcl2-csv-sheet > header { padding: 13px 15px; border-bottom: 1px solid rgba(143, 184, 220, 0.13); }
.waterly-chart-lab-v2 .wcl2-csv-sheet > header > div { min-width: 0; flex: 1; }
.waterly-chart-lab-v2 .wcl2-csv-sheet > header small { display: block; color: #68a9cc; font-size: 8px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; }
.waterly-chart-lab-v2 .wcl2-csv-sheet > header strong { display: block; margin-top: 2px; color: #eff8fb; font-size: 17px; }
.waterly-chart-lab-v2 .wcl2-csv-sheet > header p { margin: 2px 0 0; color: #738995; font-size: 10px; }
.waterly-chart-lab-v2 .wcl2-csv-icon { display: grid; width: 44px; height: 44px; flex: 0 0 44px; place-items: center; border: 1px solid rgba(85, 221, 216, 0.22); border-radius: 13px; color: #66deda; background: rgba(85, 221, 216, 0.09); font-size: 18px; }
.waterly-chart-lab-v2 .wcl2-csv-close { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border: 1px solid rgba(126, 164, 183, 0.2); border-radius: 10px; color: #8096a1; background: rgba(255, 255, 255, 0.04); cursor: pointer; }
.waterly-chart-lab-v2 .wcl2-csv-content { min-height: 0; padding: 12px; overflow-y: auto; }
.waterly-chart-lab-v2 .wcl2-csv-card { padding: 13px; border: 1px solid rgba(128, 163, 181, 0.13); border-radius: 14px; background: rgba(10, 22, 29, 0.72); }
.waterly-chart-lab-v2 .wcl2-csv-card + .wcl2-csv-card { margin-top: 9px; }
.waterly-chart-lab-v2 .wcl2-csv-card h3 { display: flex; align-items: center; gap: 7px; margin: 0 0 11px; color: #d7e4e9; font-size: 12px; }
.waterly-chart-lab-v2 .wcl2-csv-card h3 > i { color: #68cfe5; }
.waterly-chart-lab-v2 .wcl2-csv-card h3 > small { margin-left: auto; color: #78909e; }
.waterly-chart-lab-v2 .wcl2-csv-range { margin: 0; color: #8fa8b5; font-size: 11px; }
.waterly-chart-lab-v2 .wcl2-csv-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.waterly-chart-lab-v2 .wcl2-csv-fields label[hidden] { display: none; }
.waterly-chart-lab-v2 .wcl2-csv-fields label > span { display: block; margin: 0 0 5px; color: #8fa8b5; font-size: 9px; }
.waterly-chart-lab-v2 .wcl2-csv-fields select { width: 100%; height: 34px; padding: 0 9px; border: 1px solid rgba(116, 159, 181, 0.2) !important; border-radius: 9px !important; background: #111f28 !important; color: #d7e4e9 !important; font-size: 11px; }
.waterly-chart-lab-v2 .wcl2-csv-complete { display: inline-flex; align-items: center; gap: 7px; margin-top: 11px; color: #a9bdc7; font-size: 10px; cursor: pointer; }
.waterly-chart-lab-v2 .wcl2-csv-series { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.waterly-chart-lab-v2 .wcl2-csv-series label { display: flex; min-width: 0; align-items: center; gap: 8px; padding: 9px; border: 1px solid rgba(126, 164, 183, 0.13); border-radius: 10px; background: rgba(255, 255, 255, 0.025); cursor: pointer; }
.waterly-chart-lab-v2 .wcl2-csv-series label > i { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--series-color); }
.waterly-chart-lab-v2 .wcl2-csv-series label > span { min-width: 0; flex: 1; }
.waterly-chart-lab-v2 .wcl2-csv-series strong { display: block; overflow: hidden; color: #d7e4e9; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.waterly-chart-lab-v2 .wcl2-csv-series small { display: block; margin-top: 2px; color: #718894; font-size: 8px; }
.waterly-chart-lab-v2 .wcl2-csv-series b { color: #718894; font-size: 9px; font-weight: 600; }
.waterly-chart-lab-v2 .wcl2-csv-sheet > footer { padding: 11px 14px; border-top: 1px solid rgba(143, 184, 220, 0.13); }
.waterly-chart-lab-v2 .wcl2-csv-sheet > footer > div { display: flex; gap: 7px; }
.waterly-chart-lab-v2 .wcl2-csv-feedback { color: #78909e; font-size: 10px; }
.waterly-chart-lab-v2 .wcl2-csv-cancel,
.waterly-chart-lab-v2 .wcl2-csv-submit { min-height: 34px; padding: 0 13px; border-radius: 9px; cursor: pointer; font-size: 10px; font-weight: 700; }
.waterly-chart-lab-v2 .wcl2-csv-cancel { border: 1px solid rgba(126, 164, 183, 0.18); color: #96aab4; background: rgba(255, 255, 255, 0.035); }
.waterly-chart-lab-v2 .wcl2-csv-submit { border: 1px solid rgba(85, 221, 216, 0.3); color: #bdf8f4; background: rgba(24, 158, 170, 0.2); }
.waterly-chart-lab-v2 .wcl2-csv-submit:disabled { opacity: 0.4; cursor: not-allowed; }

.waterly-chart-lab-v2 .wcl2-range-source {
    display: inline-flex;
    max-width: min(52vw, 520px);
    align-items: center;
    gap: 7px;
    padding: 6px 11px;
    overflow: hidden;
    border: 1px solid rgba(103, 232, 249, 0.2);
    border-radius: 999px;
    background: rgba(8, 145, 178, 0.08);
    color: #a5f3fc;
    font-size: 10px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.waterly-chart-lab-v2 .wcl2-range-source i {
    color: #67e8f9;
}

/* Przełącznik okresu */
.waterly-chart-lab-v2 .wcl2-periods {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 999px;
    background: rgba(2, 6, 14, 0.6);
}

.waterly-chart-lab-v2 .wcl2-period {
    padding: 5px 12px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    transition: all 200ms ease;
}

.waterly-chart-lab-v2 .wcl2-period:hover { color: #e2e8f0; }

.waterly-chart-lab-v2 .wcl2-period.is-active {
    background: rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    color: #fff;
}

.waterly-chart-lab-v2 .wcl2-close {
    display: flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(248, 113, 113, 0.38);
    border-radius: 50%;
    background: rgba(127, 29, 29, 0.48);
    color: #fca5a5;
    cursor: pointer;
    font-size: 13px;
    transition: border-color 200ms ease, background 200ms ease, color 200ms ease, box-shadow 200ms ease;
}

.waterly-chart-lab-v2 .wcl2-close:hover,
.waterly-chart-lab-v2 .wcl2-close:focus-visible {
    border-color: rgba(252, 165, 165, 0.55);
    background: rgba(185, 28, 28, 0.72);
    color: #fff;
    box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.18), 0 8px 18px rgba(127, 29, 29, 0.28);
    outline: none;
}

.waterly-chart-lab-v2.is-bottom-sheet .wcl2-sheet-toolbar .wcl2-sheet-collapse {
    width: auto;
    min-width: 190px;
    height: auto;
    display: grid;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #dbe9f2;
    font-size: inherit;
}

.waterly-chart-lab-v2.is-bottom-sheet .wcl2-sheet-toolbar .wcl2-sheet-collapse:hover,
.waterly-chart-lab-v2.is-bottom-sheet .wcl2-sheet-toolbar .wcl2-sheet-collapse:focus-visible {
    background: rgba(101, 184, 255, 0.09);
    color: #ffffff;
}

.waterly-chart-lab-v2.is-bottom-sheet.is-minimal-sheet .wcl2-sheet-toolbar .wcl2-sheet-collapse {
    display: flex;
    width: 100%;
    min-width: 0;
    height: 26px;
    padding: 0;
    border-radius: 0;
}

.waterly-chart-lab-v2 .wcl2-collapse {
    width: auto;
    min-width: 86px;
    padding: 0 12px;
    gap: 7px;
    border-radius: 10px;
    color: #acdfff;
    background: rgba(33, 147, 243, 0.1);
    font-size: 10px;
    font-weight: 800;
}

/* Pole wykresu — wtopione w okno, bez bocznych marginesów i zaokrągleń */
.waterly-chart-lab-v2 .wcl2-plot {
    position: relative;
    z-index: 2;
    order: 2;
    height: 46vh;
    min-height: 300px;
    max-height: 620px;
    flex: 1 1 auto;
    margin: 0;
    border: 0;
    border-top: 1px solid rgba(30, 41, 59, 0.8);
    border-bottom: 1px solid rgba(30, 41, 59, 0.8);
    border-radius: 0;
    background: rgba(2, 6, 14, 0.4);
}

.waterly-chart-lab-v2 .wcl2-svg,
.waterly-chart-lab-v2 .wcl2-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.waterly-chart-lab-v2 .wcl2-overlay { pointer-events: none; }

.waterly-chart-lab-v2 .wcl2-grid {
    stroke: rgba(255, 255, 255, 0.05);
    stroke-width: 1;
}

.waterly-chart-lab-v2 .wcl2-draw {
    transition: stroke-dashoffset 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.waterly-chart-lab-v2 .wcl2-area {
    opacity: 1;
}

.waterly-chart-lab-v2 .wcl2-area.is-animated {
    opacity: 0;
    animation: wcl2-fade 1.2s ease 0.3s forwards;
}

@keyframes wcl2-fade { to { opacity: 1; } }

.waterly-chart-lab-v2 .wcl2-bar.is-animated {
    transform-box: fill-box;
    transform-origin: center bottom;
    animation: wcl2-bar-grow 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes wcl2-bar-grow {
    from { opacity: 0; transform: scaleY(0.08); }
    to { opacity: 1; transform: scaleY(1); }
}

.waterly-chart-lab-v2 .wcl2-guide {
    stroke: rgba(255, 255, 255, 0.25);
    stroke-width: 1;
    stroke-dasharray: 3 3;
}

.waterly-chart-lab-v2 .wcl2-dot {
    fill: #0b1120;
    stroke-width: 2;
}

/* Osie */
.waterly-chart-lab-v2 .wcl2-axis-y {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Kolumna pojedynczej osi Y — jedna na parametr */
.waterly-chart-lab-v2 .wcl2-axis-column {
    position: absolute;
    padding: 0 6px;
}

.waterly-chart-lab-v2 .wcl2-axis-column.is-left { text-align: right; }
.waterly-chart-lab-v2 .wcl2-axis-column.is-right { text-align: left; }

/* Bez text-transform — symbole jednostek mają własną pisownię (µS, hPa, mg/l, ppm) */
.waterly-chart-lab-v2 .wcl2-axis-unit {
    position: absolute;
    top: -18px;
    right: 6px;
    left: 6px;
    overflow: hidden;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2px;
    opacity: 0.9;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.waterly-chart-lab-v2 .wcl2-axis-column.is-left .wcl2-axis-unit { text-align: right; }
.waterly-chart-lab-v2 .wcl2-axis-column.is-right .wcl2-axis-unit { text-align: left; }

.waterly-chart-lab-v2 .wcl2-axis-y-tick {
    position: absolute;
    right: 6px;
    left: 6px;
    overflow: hidden;
    font-size: 10px;
    font-weight: 600;
    opacity: 0.85;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.waterly-chart-lab-v2 .wcl2-axis-x {
    position: absolute;
    bottom: 5px;
    left: 0;
    display: flex;
    width: 100%;
    box-sizing: border-box;
    justify-content: space-between;
    color: #64748b;
    font-size: 10px;
    pointer-events: none;
}

.waterly-chart-lab-v2.has-time-context .wcl2-axis-x {
    bottom: 47px;
}

.waterly-chart-lab-v2 .wcl2-range-context {
    position: absolute;
    right: 0;
    bottom: 6px;
    left: 0;
    z-index: 13;
    box-sizing: border-box;
    color: #64748b;
    pointer-events: none;
}

.waterly-chart-lab-v2 .wcl2-range-visible {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.waterly-chart-lab-v2 .wcl2-range-visible strong {
    overflow: hidden;
    color: #94a3b8;
    font-size: 9px;
    font-weight: 650;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.waterly-chart-lab-v2 .wcl2-range-visible strong:last-child {
    text-align: right;
}

.waterly-chart-lab-v2 .wcl2-range-visible span {
    color: #67e8f9;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.waterly-chart-lab-v2 .wcl2-range-visible span i {
    margin-right: 4px;
    font-size: 7px;
}

.waterly-chart-lab-v2 .wcl2-range-available {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding-top: 5px;
    margin-top: 5px;
    border-top: 1px solid rgba(100, 116, 139, 0.18);
    font-size: 8px;
    line-height: 1;
}

.waterly-chart-lab-v2 .wcl2-range-available span {
    color: #526475;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.waterly-chart-lab-v2 .wcl2-range-available strong {
    color: #718694;
    font-weight: 650;
}

/* Tooltip */
.waterly-chart-lab-v2 .wcl2-tooltip {
    position: absolute;
    z-index: 20;
    min-width: 150px;
    padding: 9px 11px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background: rgba(8, 14, 24, 0.94);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
    font-size: 11px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms ease;
}

.waterly-chart-lab-v2 .wcl2-tooltip.is-visible { opacity: 1; }

.waterly-chart-lab-v2 .wcl2-tooltip-time {
    margin-bottom: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(51, 65, 85, 0.6);
    color: #64748b;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.waterly-chart-lab-v2 .wcl2-tooltip-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 2px 0;
}

.waterly-chart-lab-v2 .wcl2-tooltip-row span {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #cbd5e1;
}

.waterly-chart-lab-v2 .wcl2-tooltip-row i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.waterly-chart-lab-v2 .wcl2-tooltip-row strong {
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.waterly-chart-lab-v2 .wcl2-tooltip-row em,
.waterly-chart-lab-v2 .wcl2-chip em {
    margin-left: 3px;
    color: #64748b;
    font-size: 9px;
    font-style: normal;
}

.waterly-chart-lab-v2 .wcl2-catch {
    position: absolute;
    z-index: 10;
    inset: 0;
    cursor: crosshair;
    touch-action: none;
}

.waterly-chart-lab-v2.has-time-context .wcl2-catch {
    bottom: 43px;
}

.waterly-chart-lab-v2.is-selecting .wcl2-catch { cursor: col-resize; }
.waterly-chart-lab-v2.is-panning .wcl2-catch { cursor: grabbing; }

.waterly-chart-lab-v2 .wcl2-selection {
    position: absolute;
    top: 28px;
    bottom: 22px;
    z-index: 12;
    border-right: 1px solid rgba(103, 232, 249, 0.8);
    border-left: 1px solid rgba(103, 232, 249, 0.8);
    border-radius: 4px;
    background:
        linear-gradient(90deg, rgba(34, 211, 238, 0.08), rgba(56, 189, 248, 0.22)),
        repeating-linear-gradient(-45deg, transparent 0 8px, rgba(255, 255, 255, 0.025) 8px 10px);
    box-shadow: inset 0 0 18px rgba(34, 211, 238, 0.08);
    opacity: 0;
    pointer-events: none;
    transition: opacity 100ms ease;
}

.waterly-chart-lab-v2.has-time-context .wcl2-selection {
    bottom: 66px;
}

.waterly-chart-lab-v2 .wcl2-selection.is-visible { opacity: 1; }

.waterly-chart-lab-v2 .wcl2-reset-zoom {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border: 1px solid rgba(125, 211, 252, 0.28);
    border-radius: 999px;
    background: rgba(8, 20, 34, 0.9);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
    color: #bae6fd;
    cursor: pointer;
    font-size: 10px;
    font-weight: 700;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-5px);
    transition: opacity 180ms ease, transform 180ms ease, border-color 180ms ease;
}

.waterly-chart-lab-v2 .wcl2-reset-zoom.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.waterly-chart-lab-v2 .wcl2-reset-zoom:hover {
    border-color: rgba(125, 211, 252, 0.58);
    color: #fff;
}

/* Loader i stan pusty */
.waterly-chart-lab-v2 .wcl2-loader,
.waterly-chart-lab-v2 .wcl2-empty {
    position: absolute;
    z-index: 15;
    inset: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(2, 6, 14, 0.7);
    color: #64748b;
    font-size: 12px;
}

.waterly-chart-lab-v2 .wcl2-loader.is-visible,
.waterly-chart-lab-v2 .wcl2-empty.is-visible { display: flex; }

.waterly-chart-lab-v2 .wcl2-loader i { color: #38bdf8; font-size: 22px; }
.waterly-chart-lab-v2 .wcl2-empty i { color: rgba(148, 163, 184, 0.4); font-size: 26px; }

/* Statystyki zakresu */
.waterly-chart-lab-v2 .wcl2-statistics {
    position: relative;
    z-index: 2;
    order: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    padding: 10px 18px;
}

.waterly-chart-lab-v2 .wcl2-stat-card {
    min-width: 0;
    padding: 8px 9px;
    border: 1px solid color-mix(in srgb, var(--series-color) 20%, rgba(255, 255, 255, 0.04));
    border-radius: 11px;
    color: inherit;
    background: color-mix(in srgb, var(--series-color) 5%, rgba(2, 6, 14, 0.42));
    font: inherit;
    text-align: left;
    appearance: none;
    cursor: pointer;
    transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.waterly-chart-lab-v2 .wcl2-stat-card:hover {
    border-color: color-mix(in srgb, var(--series-color) 45%, rgba(255, 255, 255, 0.08));
    background: color-mix(in srgb, var(--series-color) 9%, rgba(2, 6, 14, 0.5));
}

.waterly-chart-lab-v2 .wcl2-stat-card.is-focused {
    border-color: color-mix(in srgb, var(--series-color) 70%, rgba(255, 255, 255, 0.12));
    background: color-mix(in srgb, var(--series-color) 14%, rgba(2, 6, 14, 0.55));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--series-color) 35%, transparent), 0 10px 28px rgba(0, 0, 0, 0.22);
}

.waterly-chart-lab-v2 .wcl2-stat-card:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--series-color) 70%, white);
    outline-offset: 2px;
}

.waterly-chart-lab-v2 .wcl2-stat-guide {
    stroke: #f5d76e;
    stroke-width: 1.5;
    stroke-dasharray: 5 4;
    opacity: 0.95;
    pointer-events: none;
}

.waterly-chart-lab-v2 .wcl2-stat-label {
    fill: #ffe9a0;
    font-size: 12px;
    font-weight: 750;
    letter-spacing: 0.02em;
    paint-order: stroke;
    stroke: rgba(10, 14, 22, 0.9);
    stroke-width: 4px;
    stroke-linejoin: round;
    pointer-events: none;
}

.waterly-chart-lab-v2 .wcl2-stat-card-header {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 6px;
}

.waterly-chart-lab-v2 .wcl2-stat-card-header > i {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: var(--series-color);
    box-shadow: 0 0 8px color-mix(in srgb, var(--series-color) 55%, transparent);
}

.waterly-chart-lab-v2 .wcl2-stat-card-header strong {
    overflow: hidden;
    color: #eef6fa;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.waterly-chart-lab-v2 .wcl2-stat-card-header small {
    margin-left: auto;
    color: #91a4b0;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}

.waterly-chart-lab-v2 .wcl2-stat-card > div {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
    margin-top: 7px;
}

.waterly-chart-lab-v2 .wcl2-stat-card > div > span {
    min-width: 0;
    padding: 5px 6px;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.025);
}

.waterly-chart-lab-v2 .wcl2-stat-card > div small,
.waterly-chart-lab-v2 .wcl2-stat-card > div strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.waterly-chart-lab-v2 .wcl2-stat-card > div small {
    color: #9aadb8;
    font-size: 10px;
    font-weight: 650;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.waterly-chart-lab-v2 .wcl2-stat-card > div strong {
    margin-top: 3px;
    color: #f8fbfd;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.15;
}

.waterly-chart-lab-v2 .wcl2-stat-card > div em {
    margin-left: 3px;
    color: #a0b1bb;
    font-size: 10px;
    font-weight: 600;
    font-style: normal;
}

.waterly-chart-lab-v2.is-bottom-sheet .wcl2-header {
    order: 0;
    flex: 0 0 auto;
}

.waterly-chart-lab-v2.is-bottom-sheet .wcl2-statistics {
    order: 1;
    flex: 0 0 auto;
    grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
    padding: 10px 18px;
}

.waterly-chart-lab-v2.is-bottom-sheet .wcl2-stat-card {
    width: 100%;
    padding: 10px 11px;
    cursor: pointer;
    transition: opacity 180ms ease, border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.waterly-chart-lab-v2.is-bottom-sheet .wcl2-stat-card:hover {
    border-color: color-mix(in srgb, var(--series-color) 45%, rgba(255, 255, 255, 0.08));
    background: color-mix(in srgb, var(--series-color) 9%, rgba(2, 6, 14, 0.5));
    transform: translateY(-1px);
}

.waterly-chart-lab-v2.is-bottom-sheet .wcl2-stat-card.is-off {
    opacity: 0.42;
    border-color: rgba(148, 163, 184, 0.13);
    background: rgba(2, 6, 14, 0.38);
}

.waterly-chart-lab-v2.is-bottom-sheet .wcl2-stat-card.is-off .wcl2-stat-card-header > i {
    background: transparent;
    box-shadow: none;
}

.waterly-chart-lab-v2.is-bottom-sheet .wcl2-stat-card:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--series-color) 70%, white);
    outline-offset: 2px;
}

.waterly-chart-lab-v2.is-bottom-sheet .wcl2-plot {
    order: 2;
    height: auto;
    min-height: 260px;
    max-height: none;
    flex: 1 1 0;
    margin: 0 0 20px;
    overflow: hidden;
}

.waterly-chart-lab-v2.is-bottom-sheet .wcl2-window > .wcl2-legend {
    order: 3;
    display: none;
}

.waterly-chart-lab-v2.is-bottom-sheet .wcl2-footer {
    order: 4;
    display: none;
}

/* Popup mapy używa dokładnie tego samego laboratorium wykresów co duży widok.
   Bottom sheet zmienia wyłącznie sposób osadzenia, nie zestaw funkcji. */
.waterly-chart-lab-v2.is-bottom-sheet.is-minimal-sheet .wcl2-statistics {
    order: 1;
}

.waterly-chart-lab-v2.is-bottom-sheet.is-minimal-sheet .wcl2-plot {
    order: 2;
    margin-bottom: 0;
}

.waterly-chart-lab-v2.is-bottom-sheet.is-minimal-sheet .wcl2-window > .wcl2-legend {
    order: 3;
    display: flex;
}

.waterly-chart-lab-v2.is-bottom-sheet.is-minimal-sheet .wcl2-footer {
    order: 4;
    display: flex;
}

.waterly-chart-lab-v2 .wcl2-sheet-dismiss {
    display: none;
}

/* Legenda */
.waterly-chart-lab-v2 .wcl2-legend {
    position: relative;
    z-index: 2;
    order: 3;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 18px 0;
}

.waterly-chart-lab-v2 .wcl2-footer .wcl2-legend {
    order: initial;
    padding: 0;
}

.waterly-chart-lab-v2 .wcl2-footer .wcl2-legend:empty {
    display: none;
}

.waterly-chart-lab-v2 .wcl2-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px 7px 9px;
    border: 1px solid;
    border-color: color-mix(in srgb, var(--series-color) 30%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--series-color) 8%, transparent);
    color: inherit;
    cursor: pointer;
    transition: all 200ms ease;
}

.waterly-chart-lab-v2 .wcl2-chip.is-off {
    border-color: rgba(100, 116, 139, 0.28);
    background: rgba(71, 85, 105, 0.08);
    color: #64748b;
    opacity: 0.62;
    filter: grayscale(1);
}

.waterly-chart-lab-v2 .wcl2-chip.is-off .wcl2-chip-dot {
    background: #64748b;
    box-shadow: none;
}

.waterly-chart-lab-v2 .wcl2-chip.is-off .wcl2-chip-copy small,
.waterly-chart-lab-v2 .wcl2-chip.is-off .wcl2-chip-copy strong,
.waterly-chart-lab-v2 .wcl2-chip.is-off .wcl2-chip-copy em,
.waterly-chart-lab-v2 .wcl2-chip.is-off .wcl2-chip-remove {
    color: #64748b;
}

.waterly-chart-lab-v2 .wcl2-chip-dot {
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    border-radius: 50%;
    background: var(--series-color);
    box-shadow: 0 0 6px color-mix(in srgb, var(--series-color) 55%, transparent);
}

.waterly-chart-lab-v2 .wcl2-chip-copy {
    display: block;
    text-align: left;
}

.waterly-chart-lab-v2 .wcl2-chip-copy small {
    display: block;
    color: #94a3b8;
    font-size: 10px;
    line-height: 1.2;
}

.waterly-chart-lab-v2 .wcl2-chip-copy strong {
    display: block;
    margin-top: 2px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.1;
}

.waterly-chart-lab-v2 .wcl2-chip-remove {
    margin-left: 2px;
    color: #64748b;
    font-size: 10px;
    transition: color 200ms ease;
}

.waterly-chart-lab-v2 .wcl2-chip-remove:hover { color: #fff; }

/* Stopka — porównania */
.waterly-chart-lab-v2 .wcl2-footer {
    position: relative;
    z-index: 3;
    order: 4;
    display: flex;
    align-items: stretch;
    flex-direction: column;
    gap: 9px;
    margin-top: 14px;
    padding: 0 18px 18px;
}

.waterly-chart-lab-v2 .wcl2-footer-heading {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 10px;
}

.waterly-chart-lab-v2 .wcl2-footer-heading span {
    flex: 0 0 auto;
    color: #718694;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
}

.waterly-chart-lab-v2 .wcl2-footer-heading i {
    display: block;
    height: 1px;
    flex: 1 1 auto;
    background: linear-gradient(90deg, rgba(100, 116, 139, 0.5), rgba(30, 41, 59, 0.45));
}

.waterly-chart-lab-v2 .wcl2-footer-actions {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 10px;
}

.waterly-chart-lab-v2 .wcl2-quick,
.waterly-chart-lab-v2 .wcl2-compare-toggle {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    transition: all 200ms ease;
}

.waterly-chart-lab-v2 .wcl2-action-label { display: inline; }

.waterly-chart-lab-v2 .wcl2-quick {
    border: 1px solid rgba(56, 189, 248, 0.35);
    background: rgba(56, 189, 248, 0.08);
    color: #7dd3fc;
}

.waterly-chart-lab-v2 .wcl2-quick.is-active {
    border-color: rgba(56, 189, 248, 0.7);
    background: rgba(56, 189, 248, 0.22);
    color: #e0f2fe;
}

.waterly-chart-lab-v2 .wcl2-compare { position: relative; }

.waterly-chart-lab-v2 .wcl2-compare-toggle {
    border: 1px dashed rgba(100, 116, 139, 0.8);
    background: transparent;
    color: #94a3b8;
}

.waterly-chart-lab-v2 .wcl2-compare-toggle:hover {
    border-color: rgba(148, 163, 184, 1);
    color: #fff;
}

.waterly-chart-lab-v2 .wcl2-compare-menu {
    position: absolute;
    bottom: 100%;
    left: 0;
    z-index: 60;
    width: 240px;
    max-height: 260px;
    overflow-y: auto;
    padding: 6px;
    margin-bottom: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    background: #0b111c;
    box-shadow: 0 -14px 44px rgba(0, 0, 0, 0.75);
    opacity: 0;
    pointer-events: none;
    transform: translateY(6px) scale(0.98);
    transform-origin: bottom left;
    transition: all 200ms ease;
}

.waterly-chart-lab-v2 .wcl2-compare-menu.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.waterly-chart-lab-v2 .wcl2-compare-item {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    text-align: left;
    transition: background 200ms ease;
}

.waterly-chart-lab-v2 .wcl2-compare-item:hover { background: rgba(255, 255, 255, 0.06); }

.waterly-chart-lab-v2 .wcl2-compare-item i {
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    border-radius: 50%;
}

.waterly-chart-lab-v2 .wcl2-compare-item span {
    flex: 1 1 auto;
    color: #e2e8f0;
    font-size: 12px;
}

.waterly-chart-lab-v2 .wcl2-compare-item small,
.waterly-chart-lab-v2 .wcl2-compare-empty {
    color: #64748b;
    font-size: 10px;
}

.waterly-chart-lab-v2 .wcl2-compare-empty { padding: 10px; }

.waterly-chart-lab-v2 .wcl2-hint {
    margin-left: auto;
    color: #64748b;
    font-size: 10px;
}

.waterly-chart-lab-v2 .wcl2-hint-zoom { display: none; }
.waterly-chart-lab-v2.is-zoomed .wcl2-hint-default { display: none; }
.waterly-chart-lab-v2.is-zoomed .wcl2-hint-zoom { display: inline; }

/* Jasny motyw — wspólny dla wykresów otwieranych z popupu i dużego widoku. */
html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-backdrop {
    background: rgba(218, 230, 237, 0.7);
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-window,
html[data-theme="light"] .waterly-chart-lab-v2.is-bottom-sheet .wcl2-window {
    border-color: rgba(28, 73, 104, 0.16);
    background:
        radial-gradient(circle at 92% 0, rgba(139, 92, 246, 0.07), transparent 34%),
        radial-gradient(circle at 4% 0, rgba(56, 189, 248, 0.09), transparent 30%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(237, 245, 248, 0.99));
    box-shadow:
        0 28px 70px rgba(31, 55, 75, 0.24),
        inset 0 1px rgba(255, 255, 255, 0.96);
    color: #173241;
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-window-scrollbar {
    background: rgba(28, 73, 104, 0.1);
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-window-scrollbar > i {
    background: rgba(61, 103, 128, 0.62);
    box-shadow: none;
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-wheel-zoom-hint {
    border-color: rgba(22, 126, 174, 0.24);
    background: rgba(247, 252, 254, 0.97);
    box-shadow: 0 12px 28px rgba(31, 66, 86, 0.2);
    color: #17384b;
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-wheel-zoom-hint > i {
    color: #087fb7;
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-wheel-zoom-hint kbd {
    border-color: rgba(38, 99, 132, 0.28);
    background: #e6f1f6;
    box-shadow: inset 0 -2px rgba(38, 99, 132, 0.13);
    color: #17384b;
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-wheel-zoom-hint small,
html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-wheel-zoom-hint b {
    color: #526f80;
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-sheet-toolbar {
    border-bottom-color: rgba(28, 73, 104, 0.1);
    background: linear-gradient(180deg, rgba(249, 253, 254, 0.96), rgba(231, 242, 246, 0.82));
}

html[data-theme="light"] .waterly-chart-lab-v2.is-minimal-sheet .wcl2-sheet-toolbar {
    background: transparent;
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-sheet-collapse,
html[data-theme="light"] .waterly-chart-lab-v2.is-bottom-sheet .wcl2-sheet-toolbar .wcl2-sheet-collapse {
    color: #294552;
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-sheet-collapse:hover,
html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-sheet-collapse:focus-visible,
html[data-theme="light"] .waterly-chart-lab-v2.is-bottom-sheet .wcl2-sheet-toolbar .wcl2-sheet-collapse:hover,
html[data-theme="light"] .waterly-chart-lab-v2.is-bottom-sheet .wcl2-sheet-toolbar .wcl2-sheet-collapse:focus-visible {
    background: rgba(20, 122, 193, 0.08);
    color: #0d659f;
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-sheet-handle {
    background: rgba(42, 93, 119, 0.42);
    box-shadow: none;
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-sheet-collapse-copy small,
html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-heading small,
html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-sep {
    color: #607b8b;
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-heading strong {
    color: #173241;
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-heading-icon {
    border-color: rgba(20, 122, 193, 0.18);
    background: rgba(20, 122, 193, 0.08);
    color: #147ab0;
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-range-source {
    border-color: rgba(20, 122, 193, 0.2);
    background: rgba(20, 122, 193, 0.07);
    color: #126d9e;
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-range-source i {
    color: #147ab0;
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-export-toggle {
    border-color: rgba(20, 122, 193, 0.2);
    background: rgba(20, 122, 193, 0.07);
    color: #126d9e;
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-export-toggle:hover:not(:disabled),
html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-export-toggle:focus-visible {
    border-color: rgba(20, 122, 193, 0.4);
    background: rgba(20, 122, 193, 0.12);
    color: #0d659f;
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-export-toggle > i:last-child {
    color: #607b8b;
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-export-menu {
    border-color: rgba(28, 73, 104, 0.14);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 16px 38px rgba(31, 55, 75, 0.2);
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-export-menu > button {
    color: #294552;
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-export-menu > button:hover,
html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-export-menu > button:focus-visible {
    background: rgba(20, 122, 193, 0.08);
    color: #0d659f;
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-export-menu > button > i {
    color: #147ab0;
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-export-menu > button small {
    color: #607b8b;
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-csv-backdrop { background: rgba(27, 48, 61, 0.5); }
html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-csv-sheet { border-color: rgba(28, 73, 104, 0.18); background: radial-gradient(circle at 90% 0, rgba(33, 150, 243, 0.08), transparent 32%), linear-gradient(145deg, #fff, #edf5f8); box-shadow: 0 30px 80px rgba(31, 55, 75, 0.28); color: #294552; }
html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-csv-sheet > header,
html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-csv-sheet > footer { background: rgba(247, 252, 254, 0.92); }
html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-csv-sheet > header { border-bottom-color: rgba(28, 73, 104, 0.12); }
html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-csv-sheet > header strong,
html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-csv-card h3,
html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-csv-series strong { color: #173241; }
html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-csv-sheet > header p,
html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-csv-range,
html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-csv-fields label > span,
html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-csv-complete { color: #607b8b; }
html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-csv-card { border-color: rgba(28, 73, 104, 0.12); background: rgba(255, 255, 255, 0.72); }
html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-csv-fields select { border-color: rgba(28, 73, 104, 0.17) !important; background: #f3f8fa !important; color: #294552 !important; }
html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-csv-series label { border-color: rgba(28, 73, 104, 0.12); background: rgba(232, 242, 246, 0.6); }
html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-csv-sheet > footer { border-top-color: rgba(28, 73, 104, 0.12); }
html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-csv-submit { border-color: rgba(20, 122, 193, 0.25); color: #0d659f; background: rgba(20, 122, 193, 0.1); }
html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-csv-cancel { border-color: rgba(28, 73, 104, 0.14); color: #526f80; background: rgba(224, 235, 240, 0.62); }

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-periods {
    border-color: rgba(28, 73, 104, 0.16);
    background: rgba(224, 235, 240, 0.72);
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-time-navigation {
    border-color: rgba(28, 73, 104, 0.16);
    background: rgba(224, 235, 240, 0.72);
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-time-nav {
    color: #607b8b;
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-time-nav:hover:not(:disabled),
html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-time-nav:focus-visible {
    background: #ffffff;
    color: #0d659f;
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-period {
    color: #607b8b;
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-period:hover {
    color: #173241;
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-period.is-active {
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(31, 55, 75, 0.12);
    color: #0d659f;
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-close {
    border-color: rgba(220, 38, 38, 0.28);
    background: rgba(254, 226, 226, 0.92);
    color: #b91c1c;
    box-shadow: none;
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-close:hover,
html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-close:focus-visible {
    border-color: rgba(185, 28, 28, 0.4);
    background: #fee2e2;
    color: #991b1b;
    box-shadow: 0 6px 14px rgba(185, 28, 28, 0.14);
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-glow-a {
    background: rgba(56, 189, 248, 0.08);
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-glow-b {
    background: rgba(139, 92, 246, 0.06);
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-plot {
    border-color: rgba(28, 73, 104, 0.13);
    background: rgba(255, 255, 255, 0.72);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.92);
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-grid {
    stroke: rgba(28, 73, 104, 0.1);
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-guide {
    stroke: rgba(28, 73, 104, 0.34);
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-dot {
    fill: #ffffff;
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-axis-unit,
html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-axis-y-tick {
    opacity: 1;
    text-shadow: none;
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-axis-x {
    color: #526e7d;
    font-weight: 650;
    text-shadow: none;
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-tooltip {
    border-color: rgba(28, 73, 104, 0.14);
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 12px 30px rgba(31, 55, 75, 0.2);
    color: #294552;
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-tooltip-time {
    border-bottom-color: rgba(28, 73, 104, 0.12);
    color: #607b8b;
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-tooltip-row span {
    color: #365666;
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-tooltip-row strong {
    color: #173241;
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-tooltip-row em,
html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-chip em {
    color: #607b8b;
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-reset-zoom {
    border-color: rgba(20, 122, 193, 0.24);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 8px 20px rgba(31, 75, 102, 0.16);
    color: #126d9e;
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-reset-zoom:hover,
html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-reset-zoom:focus-visible {
    border-color: rgba(20, 122, 193, 0.48);
    background: #ffffff;
    box-shadow: 0 9px 24px rgba(31, 75, 102, 0.2);
    color: #0d659f;
    outline: none;
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-loader,
html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-empty {
    background: rgba(247, 251, 252, 0.92);
    color: #607b8b;
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-stat-card {
    border-color: color-mix(in srgb, var(--series-color) 27%, rgba(28, 73, 104, 0.1));
    background: color-mix(in srgb, var(--series-color) 6%, rgba(255, 255, 255, 0.9));
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.9);
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-stat-card.is-focused {
    border-color: color-mix(in srgb, var(--series-color) 55%, rgba(28, 73, 104, 0.18));
    background: color-mix(in srgb, var(--series-color) 12%, rgba(255, 255, 255, 0.96));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--series-color) 28%, transparent), 0 8px 20px rgba(23, 50, 65, 0.08);
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-stat-guide {
    stroke: #9a6b00;
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-stat-label {
    fill: #7a5600;
    stroke: rgba(255, 250, 235, 0.95);
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-stat-card-header strong,
html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-stat-card > div strong {
    color: #173241;
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-stat-card-header small,
html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-stat-card > div small,
html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-stat-card > div em {
    color: #607b8b;
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-range-visible strong {
    color: #526e7d;
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-range-visible span {
    color: #147ab0;
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-range-available {
    border-top-color: rgba(28, 73, 104, 0.14);
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-range-available span {
    color: #607b8b;
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-range-available strong {
    color: #365666;
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-stat-card > div > span {
    background: rgba(225, 236, 241, 0.56);
}

html[data-theme="light"] .waterly-chart-lab-v2.is-bottom-sheet .wcl2-stat-card:hover {
    background: color-mix(in srgb, var(--series-color) 10%, rgba(255, 255, 255, 0.92));
}

html[data-theme="light"] .waterly-chart-lab-v2.is-bottom-sheet .wcl2-stat-card.is-off {
    border-color: rgba(28, 73, 104, 0.12);
    background: rgba(226, 236, 241, 0.58);
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-chip {
    background: color-mix(in srgb, var(--series-color) 7%, rgba(255, 255, 255, 0.86));
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-chip-copy small,
html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-chip-copy strong {
    color: #294552;
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-chip.is-off {
    border-color: rgba(28, 73, 104, 0.16);
    background: rgba(226, 236, 241, 0.72);
    color: #607b8b;
    opacity: 0.8;
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-chip.is-off .wcl2-chip-copy small,
html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-chip.is-off .wcl2-chip-copy strong,
html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-chip.is-off .wcl2-chip-copy em,
html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-chip.is-off .wcl2-chip-remove {
    color: #607b8b;
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-footer-heading span {
    color: #607b8b;
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-footer-heading i {
    background: linear-gradient(90deg, rgba(28, 73, 104, 0.28), rgba(28, 73, 104, 0.08));
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-quick {
    border-color: rgba(3, 105, 161, 0.42);
    background: rgba(14, 165, 233, 0.09);
    color: #075985;
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-quick:hover,
html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-quick:focus-visible {
    border-color: rgba(3, 105, 161, 0.68);
    background: rgba(14, 165, 233, 0.15);
    color: #064b70;
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-quick.is-active {
    border-color: #38bdf8;
    background: #d8f2ff;
    color: #075985;
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-compare-toggle {
    border-color: rgba(28, 73, 104, 0.4);
    color: #526e7d;
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-compare-toggle:hover {
    border-color: rgba(20, 122, 193, 0.54);
    color: #0d659f;
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-compare-menu {
    border-color: rgba(28, 73, 104, 0.14);
    background: #ffffff;
    box-shadow: 0 -14px 40px rgba(31, 55, 75, 0.2);
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-compare-item:hover {
    background: rgba(20, 122, 193, 0.08);
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-compare-item span {
    color: #294552;
}

html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-compare-item small,
html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-compare-empty,
html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-hint {
    color: #607b8b;
}

/* Osobne panele pozostają czytelne i przewijają się razem, także w bottom sheet. */
.waterly-chart-lab-v2.is-stacked .wcl2-window {
    overflow-x: hidden;
    overflow-y: auto;
}
.waterly-chart-lab-v2.is-stacked .wcl2-window > * { flex-shrink: 0; }
.waterly-chart-lab-v2.is-stacked .wcl2-window .wcl2-plot {
    flex: 0 0 auto;
    min-height: 260px;
    max-height: none;
}
.waterly-chart-lab-v2.is-stacked .wcl2-axis-x { visibility: hidden; }

/* Wąskie ekrany — okno na pełną powierzchnię, mniej ozdobników */
@media (max-width: 820px) {
    .waterly-chart-lab-v2 { padding: 0; }

    .waterly-chart-lab-v2 .wcl2-window {
        max-width: none;
        height: 100%;
        border: 0;
        border-radius: 0;
    }

    .waterly-chart-lab-v2.is-bottom-sheet {
        padding: 48px 8px 0;
    }

    .waterly-chart-lab-v2.is-bottom-sheet .wcl2-window {
        width: 100%;
        height: auto;
        max-height: min(700px, calc(100dvh - 48px));
        border: 1px solid rgba(101, 184, 255, 0.3);
        border-bottom: 0;
        border-radius: 18px 18px 0 0;
    }

    .waterly-chart-lab-v2.is-bottom-sheet .wcl2-backdrop {
        background: rgba(3, 7, 14, 0.28);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
    }

    .waterly-chart-lab-v2 .wcl2-header {
        flex-wrap: wrap;
        padding: 14px 14px 10px;
    }
    .waterly-chart-lab-v2 .wcl2-heading-icon { display: none; }
    .waterly-chart-lab-v2 .wcl2-heading strong { font-size: 14px; }
    .waterly-chart-lab-v2 .wcl2-header-tools {
        width: 100%;
        justify-content: space-between;
        margin-top: 10px;
    }

    /* Wykres zabiera całą dostępną wysokość */
    .waterly-chart-lab-v2 .wcl2-plot {
        height: auto;
        min-height: 260px;
        max-height: none;
        margin: 0;
    }

    .waterly-chart-lab-v2 .wcl2-statistics {
        display: flex;
        overflow-x: auto;
        padding: 9px 12px;
        scrollbar-width: none;
    }

    .waterly-chart-lab-v2 .wcl2-statistics::-webkit-scrollbar { display: none; }
	.waterly-chart-lab-v2 .wcl2-range-context {
		padding-right: 12px !important;
		padding-left: 12px !important;
	}
	.waterly-chart-lab-v2 .wcl2-range-visible strong { font-size: 8px; }
	.waterly-chart-lab-v2 .wcl2-range-visible span { font-size: 7px; }
	.waterly-chart-lab-v2 .wcl2-range-available { gap: 5px; font-size: 7px; }
    .waterly-chart-lab-v2 .wcl2-stat-card {
        min-width: min(88vw, 420px);
        flex: 0 0 min(88vw, 420px);
    }

    .waterly-chart-lab-v2.is-bottom-sheet .wcl2-statistics {
        display: grid;
        grid-template-columns: 1fr;
        overflow-x: visible;
        padding: 0 10px 8px;
    }

    .waterly-chart-lab-v2.is-bottom-sheet .wcl2-stat-card {
        width: 100%;
        min-width: 0;
    }

    .waterly-chart-lab-v2.is-bottom-sheet .wcl2-plot {
        margin: 0 0 20px;
    }

    /* Legenda przewijana w poziomie zamiast zawijania w wiele rzędów */
    .waterly-chart-lab-v2 .wcl2-legend {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding: 10px 12px 2px;
        scrollbar-width: none;
    }

	.waterly-chart-lab-v2 .wcl2-footer .wcl2-legend {
		padding: 0;
	}

    .waterly-chart-lab-v2 .wcl2-legend::-webkit-scrollbar { display: none; }
    .waterly-chart-lab-v2 .wcl2-chip { flex: 0 0 auto; }

    .waterly-chart-lab-v2 .wcl2-footer {
        margin-top: 10px;
        padding: 0 12px calc(12px + var(--safe-bottom, 0px));
    }

    .waterly-chart-lab-v2 .wcl2-hint { display: none; }

    /* Podpowiedź dotykowa zamiast kursora */
    .waterly-chart-lab-v2 .wcl2-catch { cursor: default; }
}

@media (max-width: 680px) {
    .waterly-chart-lab-v2 .wcl2-csv-prompt { padding: 8px; }
    .waterly-chart-lab-v2 .wcl2-csv-sheet { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); border-radius: 16px; }
    .waterly-chart-lab-v2 .wcl2-csv-fields,
    .waterly-chart-lab-v2 .wcl2-csv-series { grid-template-columns: 1fr; }
    .waterly-chart-lab-v2 .wcl2-csv-sheet > footer { align-items: stretch; flex-direction: column; }
    .waterly-chart-lab-v2 .wcl2-csv-sheet > footer > div { justify-content: flex-end; }

    .waterly-chart-lab-v2 .wcl2-export-toggle {
        width: 34px;
        height: 34px;
        justify-content: center;
        padding: 0;
    }

    .waterly-chart-lab-v2 .wcl2-export-toggle > span,
    .waterly-chart-lab-v2 .wcl2-export-toggle > i:last-child {
        display: none;
    }

    .waterly-chart-lab-v2 .wcl2-compare-toggle .wcl2-action-label { display: none; }

    .waterly-chart-lab-v2 .wcl2-compare-toggle {
        width: 34px;
        height: 34px;
        justify-content: center;
        padding: 0;
    }

    .waterly-chart-lab-v2.is-minimal-sheet .wcl2-compare-toggle {
        width: auto;
        padding: 0 12px;
    }

    .waterly-chart-lab-v2.is-minimal-sheet .wcl2-compare-toggle .wcl2-action-label {
        display: inline;
    }

    .waterly-chart-lab-v2 .wcl2-reset-zoom span { display: none; }
    .waterly-chart-lab-v2 .wcl2-reset-zoom {
        width: 32px;
        height: 32px;
        justify-content: center;
        padding: 0;
    }
}

/* Bardzo wąskie ekrany — priorytet dla wykresu */
@media (max-width: 520px) {
	.waterly-chart-lab-v2 .wcl2-time-toolbar {
		min-width: 0;
		flex: 1 1 auto;
		overflow-x: auto;
		scrollbar-width: none;
	}
	.waterly-chart-lab-v2 .wcl2-time-toolbar::-webkit-scrollbar { display: none; }
	.waterly-chart-lab-v2 .wcl2-periods {
		overflow-x: auto;
		max-width: none;
		flex: 0 0 auto;
        scrollbar-width: none;
    }
    .waterly-chart-lab-v2 .wcl2-periods::-webkit-scrollbar { display: none; }
    .waterly-chart-lab-v2 .wcl2-periods { padding: 1px; }
	.waterly-chart-lab-v2 .wcl2-period { padding: 4px 9px; font-size: 10px; }
	.waterly-chart-lab-v2 .wcl2-time-navigation { flex: 0 0 auto; }
	.waterly-chart-lab-v2 .wcl2-time-nav { width: 25px; height: 25px; }
    .waterly-chart-lab-v2 .wcl2-quick span,
    .waterly-chart-lab-v2 .wcl2-compare-toggle { font-size: 10px; }
    .waterly-chart-lab-v2 .wcl2-compare-menu { width: calc(100vw - 40px); }
    .waterly-chart-lab-v2 .wcl2-tooltip { min-width: 130px; font-size: 10px; }
}

/* The same controls and comparison order at every viewport size. */
.waterly-chart-lab-v2 .wcl2-settings-toggle,
.waterly-chart-lab-v2 .wcl2-fullscreen {
    display: grid;
    place-items: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 50%;
    background: rgba(2, 6, 14, 0.6);
    color: #94a3b8;
    cursor: pointer;
    transition: border-color 200ms ease, background 200ms ease, color 200ms ease;
}
.waterly-chart-lab-v2 .wcl2-settings-toggle:hover,
.waterly-chart-lab-v2 .wcl2-settings-toggle:focus-visible,
.waterly-chart-lab-v2 .wcl2-fullscreen:hover,
.waterly-chart-lab-v2 .wcl2-fullscreen:focus-visible {
    background: rgba(51, 65, 85, 0.8);
    color: #fff;
    outline: none;
}
.waterly-chart-lab-v2 .wcl2-fullscreen[aria-pressed="true"] {
    border-color: rgba(148, 163, 184, 0.4);
    background: rgba(51, 65, 85, 0.85);
    color: #e2e8f0;
}
.waterly-chart-lab-v2.is-bottom-sheet .wcl2-fullscreen { display: none; }
.waterly-chart-lab-v2.is-fullscreen {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
}
.waterly-chart-lab-v2.is-fullscreen .wcl2-window {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    border-radius: 0;
    transform: none;
}
.waterly-chart-lab-v2.is-fullscreen.is-visible .wcl2-window { transform: none; }
.waterly-chart-lab-v2.is-fullscreen .wcl2-plot {
    height: auto;
    min-height: 420px;
    max-height: none;
    flex: 1 1 auto;
}
.waterly-chart-lab-v2 .wcl2-settings-toggle[hidden] { display: none; }
.waterly-chart-lab-v2:not(.is-settings-open) .wcl2-display-options { display: none; }
.waterly-chart-lab-v2:not(.is-bottom-sheet) .wcl2-sheet-toolbar { display: none; }
.waterly-chart-lab-v2 .wcl2-corner-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 8;
}
.waterly-chart-lab-v2 .wcl2-header { position: static; padding-right: 54px; }
.waterly-chart-lab-v2 .wcl2-header-tools { position: static; }
.waterly-chart-lab-v2 .wcl2-footer > .wcl2-footer-heading { order: 0; }
.waterly-chart-lab-v2 .wcl2-footer > .wcl2-legend { order: 1; flex-wrap: wrap; }
.waterly-chart-lab-v2 .wcl2-footer > .wcl2-footer-actions { order: 2; }
.waterly-chart-lab-v2 .wcl2-range-visible strong,
.waterly-chart-lab-v2 .wcl2-range-visible span,
.waterly-chart-lab-v2 .wcl2-range-available { font-size: 10px; line-height: 1.3; }
.waterly-chart-lab-v2.has-time-context .wcl2-axis-x { bottom: 62px; }
html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-settings-toggle,
html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-fullscreen {
    border-color: rgba(28, 73, 104, 0.16);
    background: rgba(255, 255, 255, 0.76);
    color: #607b8b;
}
html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-settings-toggle:hover,
html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-settings-toggle:focus-visible,
html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-fullscreen:hover,
html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-fullscreen:focus-visible,
html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-fullscreen[aria-pressed="true"] {
    background: #ffffff;
    color: #173241;
}
html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-window-actions .wcl2-export-toggle {
    border-color: rgba(28, 73, 104, 0.16);
    background: rgba(255, 255, 255, 0.76);
    color: #607b8b;
}
html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-window-actions .wcl2-export-toggle:hover:not(:disabled),
html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-window-actions .wcl2-export-toggle:focus-visible,
html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-window-actions .wcl2-export-toggle[aria-expanded="true"] {
    border-color: rgba(28, 73, 104, 0.16);
    background: #ffffff;
    color: #173241;
}
html[data-theme="light"] .waterly-chart-lab-v2.is-bottom-sheet .wcl2-sheet-dismiss {
    border-top-color: rgba(28, 73, 104, 0.1);
}
html[data-theme="light"] .waterly-chart-lab-v2.is-bottom-sheet .wcl2-sheet-back {
    border-color: rgba(28, 73, 104, 0.14);
    background: #ffffff;
    color: #173241;
    box-shadow: 0 1px 2px rgba(23, 50, 65, 0.06);
}
html[data-theme="light"] .waterly-chart-lab-v2.is-bottom-sheet .wcl2-sheet-back:hover,
html[data-theme="light"] .waterly-chart-lab-v2.is-bottom-sheet .wcl2-sheet-back:focus-visible {
    border-color: rgba(22, 163, 148, 0.35);
    background: rgba(22, 163, 148, 0.06);
    color: #0f766e;
}

@media (max-width: 820px) {
    .waterly-chart-lab-v2.is-bottom-sheet { padding: calc(8px + var(--safe-top, 0px)) calc(6px + var(--safe-right, 0px)) 0 calc(6px + var(--safe-left, 0px)); }
    .waterly-chart-lab-v2.is-bottom-sheet .wcl2-window {
        height: auto;
        max-height: calc(100dvh - 8px - var(--safe-top, 0px));
        padding-bottom: var(--safe-bottom, 0px);
    }
    .waterly-chart-lab-v2.is-bottom-sheet .wcl2-plot {
        height: clamp(260px, 42dvh, 380px);
        min-height: 260px;
        flex: 0 0 auto;
        margin-bottom: 0;
    }
    .waterly-chart-lab-v2.is-bottom-sheet .wcl2-window > * { flex-shrink: 0; }
    .waterly-chart-lab-v2.is-bottom-sheet .wcl2-sheet-dismiss {
        display: flex;
        order: 5;
        justify-content: center;
        margin-top: 4px;
        padding: 10px 12px 14px;
        border-top: 1px solid rgba(116, 148, 168, 0.12);
    }
    .waterly-chart-lab-v2.is-bottom-sheet .wcl2-sheet-back {
        display: inline-flex;
        width: 100%;
        max-width: 420px;
        height: auto;
        min-height: 44px;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 0 16px;
        border: 1px solid rgba(116, 148, 168, 0.22);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.04);
        box-shadow: none;
        color: #d5e4ec;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 0.01em;
        cursor: pointer;
    }
    .waterly-chart-lab-v2.is-bottom-sheet .wcl2-sheet-back:hover,
    .waterly-chart-lab-v2.is-bottom-sheet .wcl2-sheet-back:focus-visible {
        border-color: rgba(85, 221, 216, 0.35);
        background: rgba(85, 221, 216, 0.08);
        color: #eafffe;
        outline: none;
    }
    .waterly-chart-lab-v2.is-bottom-sheet .wcl2-sheet-back > i {
        font-size: 13px;
        opacity: 0.9;
    }
    .waterly-chart-lab-v2 .wcl2-header { padding: 10px 12px 10px; }
    .waterly-chart-lab-v2 .wcl2-heading { padding-right: 42px; }
    .waterly-chart-lab-v2 .wcl2-header-tools { gap: 6px; }
    .waterly-chart-lab-v2 .wcl2-display-control { flex-wrap: wrap; }
    .waterly-chart-lab-v2 .wcl2-display-switch { flex-wrap: wrap; }
    .waterly-chart-lab-v2 .wcl2-footer { padding: 0 12px 12px; margin-top: 10px; }
    .waterly-chart-lab-v2 .wcl2-compare-toggle { width: auto; padding: 0 12px; }
    .waterly-chart-lab-v2 .wcl2-compare-toggle .wcl2-action-label { display: inline; }
    .waterly-chart-lab-v2 .wcl2-range-visible { grid-template-columns: 1fr 1fr; gap: 4px; }
    .waterly-chart-lab-v2 .wcl2-range-visible > span { grid-column: 1 / -1; grid-row: 1; text-align: center; }
    .waterly-chart-lab-v2 .wcl2-range-available { flex-wrap: wrap; gap: 3px 6px; }
    .waterly-chart-lab-v2 .wcl2-range-available span { color: #8ca5b8; }
    .waterly-chart-lab-v2.has-time-context .wcl2-axis-x { bottom: 82px; }
}

@media (max-width: 520px) {
    .waterly-chart-lab-v2 .wcl2-header-tools { flex-wrap: wrap; }
    .waterly-chart-lab-v2 .wcl2-time-toolbar { display: contents; }
    .waterly-chart-lab-v2 .wcl2-periods { order: 0; flex: 1 0 100%; justify-content: space-between; }
    .waterly-chart-lab-v2 .wcl2-time-navigation { order: 1; margin-right: auto; }
    .waterly-chart-lab-v2 .wcl2-export { order: 2; }
    .waterly-chart-lab-v2 .wcl2-settings-toggle { order: 3; }
}

/* Time range and settings share a compact toolbar; navigation belongs to the plot. */
.waterly-chart-lab-v2 .wcl2-period-select {
    height: 34px;
    min-width: 118px;
    padding: 0 28px 0 12px;
    border: 1px solid #365365;
    border-radius: 18px;
    background: #10212c;
    color: #e2f1f8;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}
.waterly-chart-lab-v2 .wcl2-settings { position: relative; order: 3; }
.waterly-chart-lab-v2 .wcl2-settings .wcl2-display-options {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: min(360px, calc(100vw - 40px));
    padding: 14px;
    border: 1px solid #365365;
    border-radius: 14px;
    background: #10212c;
    box-shadow: 0 12px 32px #0008;
    z-index: 30;
}
.waterly-chart-lab-v2 .wcl2-header-tools { z-index: 30; }
.waterly-chart-lab-v2 .wcl2-header { z-index: 30; }
.waterly-chart-lab-v2 .wcl2-window > .wcl2-time-navigation {
    order: 2;
    align-self: center;
    flex: 0 0 auto;
    margin: 0 auto 8px;
}
html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-period-select,
html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-settings .wcl2-display-options {
    color: #294552;
    background: #f5fafc;
    border-color: #b6cdd8;
}
@media (max-width: 820px) {
    .waterly-chart-lab-v2 .wcl2-header-tools { flex-wrap: nowrap; justify-content: flex-end; }
    .waterly-chart-lab-v2 .wcl2-time-toolbar { display: flex; flex: 1 1 auto; overflow: visible; }
    .waterly-chart-lab-v2.is-bottom-sheet .wcl2-statistics {
        display: flex;
        overflow-x: auto;
        flex-wrap: nowrap;
        gap: 8px;
        scroll-snap-type: x mandatory;
        scrollbar-width: thin;
        padding: 0 10px 8px;
    }
    .waterly-chart-lab-v2.is-bottom-sheet .wcl2-statistics .wcl2-stat-card {
        flex: 0 0 90%;
        width: 90%;
        min-width: 0;
        scroll-snap-align: start;
    }
    .waterly-chart-lab-v2.is-bottom-sheet .wcl2-statistics .wcl2-stat-card:only-child { flex-basis: 100%; width: 100%; }
    .waterly-chart-lab-v2 .wcl2-footer > .wcl2-legend {
        flex-wrap: nowrap;
        overflow-x: auto;
        min-width: 0;
        scrollbar-width: thin;
        padding-bottom: 4px;
    }
}

.waterly-chart-lab-v2 select.wcl2-period-select {
    border: 1px solid #365365 !important;
    border-radius: 18px !important;
    background-color: #10212c !important;
    color: #e2f1f8 !important;
}
html[data-theme="light"] .waterly-chart-lab-v2 select.wcl2-period-select {
    background-color: #f5fafc !important;
    color: #294552 !important;
    border-color: #b6cdd8 !important;
}
@media (max-width: 820px) {
    .waterly-chart-lab-v2.is-bottom-sheet .wcl2-statistics,
    .waterly-chart-lab-v2 .wcl2-footer > .wcl2-legend { scrollbar-width: none; }
    .waterly-chart-lab-v2.is-bottom-sheet .wcl2-statistics::-webkit-scrollbar,
    .waterly-chart-lab-v2 .wcl2-footer > .wcl2-legend::-webkit-scrollbar { display: none; }
}

/* Two explicit rows: window actions at the top, time controls above the plot. */
.waterly-chart-lab-v2 .wcl2-window-actions {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 6px;
}
.waterly-chart-lab-v2 .wcl2-window-actions > * { order: initial; }
.waterly-chart-lab-v2 .wcl2-window-actions .wcl2-corner-close {
    position: static;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
}
.waterly-chart-lab-v2 .wcl2-window-actions .wcl2-export-toggle {
    width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0;
    justify-content: center;
    gap: 0;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 50%;
    background: rgba(2, 6, 14, 0.6);
    color: #94a3b8;
}
.waterly-chart-lab-v2 .wcl2-window-actions .wcl2-export-toggle:hover:not(:disabled),
.waterly-chart-lab-v2 .wcl2-window-actions .wcl2-export-toggle:focus-visible {
    border-color: rgba(148, 163, 184, 0.25);
    background: rgba(51, 65, 85, 0.8);
    color: #fff;
}
.waterly-chart-lab-v2 .wcl2-window-actions .wcl2-export-toggle[aria-expanded="true"] {
    background: rgba(51, 65, 85, 0.85);
    color: #e2e8f0;
}
.waterly-chart-lab-v2 .wcl2-window-actions .wcl2-export-toggle > span,
.waterly-chart-lab-v2 .wcl2-window-actions .wcl2-export-toggle > .bi-chevron-down { display: none; }
.waterly-chart-lab-v2 .wcl2-window-actions .wcl2-settings { position: static; }
.waterly-chart-lab-v2 .wcl2-window-actions .wcl2-settings .wcl2-display-options { right: 0; }
.waterly-chart-lab-v2 .wcl2-window-actions .wcl2-export-menu { right: -80px; }
@media (max-width: 767px) {
    .waterly-chart-lab-v2 .wcl2-window-actions .wcl2-export-menu { right: 0; }
}
.waterly-chart-lab-v2 .wcl2-header { padding-right: 182px; }
.waterly-chart-lab-v2 .wcl2-window > .wcl2-time-toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    gap: 10px;
    flex: 0 0 auto;
    order: 2;
    overflow: visible;
    margin: 0 auto 10px;
}
.waterly-chart-lab-v2 .wcl2-window > .wcl2-time-toolbar .wcl2-time-navigation { margin: 0; }
@media (max-width: 820px) {
    .waterly-chart-lab-v2 .wcl2-fullscreen { display: none; }
    .waterly-chart-lab-v2 .wcl2-header { padding: 22px 12px 10px; }
    .waterly-chart-lab-v2 .wcl2-heading { padding-right: 0; }
    .waterly-chart-lab-v2.is-bottom-sheet .wcl2-statistics {
        margin: 0 8px;
        padding: 5px 4px 9px;
        scroll-padding-inline: 4px;
    }
    .waterly-chart-lab-v2.is-bottom-sheet .wcl2-statistics .wcl2-stat-card {
        box-sizing: border-box;
        margin: 0;
    }
}

/* Only endpoint dates label the visible range; emphasize the available range. */
.waterly-chart-lab-v2 .wcl2-range-visible { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.waterly-chart-lab-v2 .wcl2-range-available > span {
    color: #67e8f9;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}
.waterly-chart-lab-v2 .wcl2-range-available > span i { margin-right: 4px; font-size: 7px; }
html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-range-available > span { color: #147ab0; }

/* Keep navigation centered independently of the range selector. */
.waterly-chart-lab-v2 .wcl2-window > .wcl2-time-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    width: calc(100% - 32px);
    gap: 6px;
}
.waterly-chart-lab-v2 .wcl2-window > .wcl2-time-toolbar .wcl2-time-navigation {
    grid-column: 2;
    grid-row: 1;
}
.waterly-chart-lab-v2 .wcl2-time-toolbar select.wcl2-period-select {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    min-width: 118px;
    width: max-content;
    max-width: 100%;
    height: 33px;
    padding: 0 28px 0 12px;
    border: 1px solid rgba(148, 163, 184, 0.25) !important;
    border-radius: 999px !important;
    background-color: rgba(2, 6, 14, 0.6) !important;
    color: #94a3b8 !important;
    font-size: 11px;
    font-weight: 600;
    box-shadow: none;
}
html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-time-toolbar select.wcl2-period-select {
    border-color: rgba(28, 73, 104, 0.16) !important;
    background-color: rgba(224, 235, 240, 0.72) !important;
    color: #607b8b !important;
}
@media (max-width: 820px) {
    .waterly-chart-lab-v2 .wcl2-window > .wcl2-time-toolbar { width: calc(100% - 16px); }
}

.waterly-chart-lab-v2 .wcl2-time-toolbar select.wcl2-period-select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 26px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='m1 1 4 4 4-4' fill='none' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 10px 6px;
}

/* The sheet handle does not highlight the strip behind the window actions. */
.waterly-chart-lab-v2.is-bottom-sheet.is-minimal-sheet .wcl2-sheet-toolbar .wcl2-sheet-collapse {
    width: 84px;
}
.waterly-chart-lab-v2.is-bottom-sheet.is-minimal-sheet .wcl2-sheet-toolbar .wcl2-sheet-collapse:hover,
.waterly-chart-lab-v2.is-bottom-sheet.is-minimal-sheet .wcl2-sheet-toolbar .wcl2-sheet-collapse:focus-visible {
    background: transparent;
    box-shadow: none;
}
.waterly-chart-lab-v2.is-bottom-sheet.is-minimal-sheet .wcl2-sheet-collapse:focus-visible .wcl2-sheet-handle {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}

/* Keep the time ticks close to the endpoint dates, even when the range wraps. */
.waterly-chart-lab-v2.has-time-context .wcl2-axis-x {
    bottom: calc(var(--chart-range-height, 34px) + 14px);
}

/* Each settings section has a full-width heading above its options. */
.waterly-chart-lab-v2 .wcl2-settings .wcl2-display-options {
    box-sizing: border-box;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
}
.waterly-chart-lab-v2 .wcl2-settings .wcl2-display-control {
    width: 100%;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 7px;
}
.waterly-chart-lab-v2 .wcl2-settings .wcl2-display-control[hidden] {
    display: none;
}
.waterly-chart-lab-v2 .wcl2-settings .wcl2-display-control > span {
    white-space: nowrap;
    flex: 0 0 auto;
}
.waterly-chart-lab-v2 .wcl2-settings .wcl2-display-switch {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
    flex-wrap: wrap;
    border-radius: 16px;
    gap: 4px;
}
.waterly-chart-lab-v2 .wcl2-settings .wcl2-display-option {
    max-width: 100%;
    min-width: 0;
    height: auto;
    min-height: 27px;
    padding: 5px 9px;
}
.waterly-chart-lab-v2 .wcl2-settings .wcl2-display-option > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.waterly-chart-lab-v2 .wcl2-stat-card > div em,
.waterly-chart-lab-v2 .wcl2-chip-copy em,
.waterly-chart-lab-v2 .wcl2-tooltip em {
    margin-left: 5px;
}

.wcl2-alarm-summary {display:flex;flex-wrap:wrap;gap:5px 12px;padding-top:10px;color:#ffbd66;font-size:10px;line-height:1.5;text-align:left;}
.wcl2-alarm-summary>span {flex-basis:100%;}
.wcl2-alarm-summary small {color:#b9cbd4;}

.waterly-chart-lab-v2 .wcl2-alarm-bell { cursor: pointer; }

/* Latest measurement leads the card; the alarm action belongs to its title. */
.waterly-chart-lab-v2 .wcl2-stat-card { padding-bottom: 10px; }
.waterly-chart-lab-v2 .wcl2-stat-card-header .wcl2-alarm-bell {
    position: static; width: 25px; height: 25px; flex: 0 0 25px;
}
.waterly-chart-lab-v2 .wcl2-stat-card > div { grid-template-columns: minmax(100px, 1.5fr) repeat(3, minmax(0, 1fr)); align-items: center; }
.waterly-chart-lab-v2 .wcl2-stat-card > div > .wcl2-current-reading {
    padding: 0; border: 0; background: transparent !important; box-shadow: none;
}
.waterly-chart-lab-v2 .wcl2-stat-card > div > .wcl2-current-reading strong {
    font-size: 32px; margin: 0; line-height: 1.2;
}
.waterly-chart-lab-v2 .wcl2-stat-card > div > .wcl2-current-reading em { font-size: 12px; margin-left: 5px; }
.waterly-chart-lab-v2 .wcl2-chip-copy small { font-size: 12px; font-weight: 650; }
.waterly-chart-lab-v2 .wcl2-stat-card .wcl2-alarm-summary { padding-right: 0; }
@media (max-width: 420px) {
    .waterly-chart-lab-v2 .wcl2-stat-card > div { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .waterly-chart-lab-v2 .wcl2-stat-card > div > .wcl2-current-reading { grid-column: 1 / -1; }
}

.waterly-date-range { box-sizing: border-box; width: min(420px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; padding: 20px; border: 1px solid #b9cfdb; border-radius: 18px; background: #f5fafc; color: #173241; font-family: inherit; font-size: 12px; line-height: 1.5; }
.waterly-date-range::backdrop { background: rgba(8, 22, 35, .55); }
.waterly-date-range form, .waterly-date-range label { display: grid; gap: 10px; min-width: 0; }
.waterly-date-range form { gap: 16px; }
.waterly-date-range h3, .waterly-date-range p { margin: 0; }
.waterly-date-range h3 { font-size: 17px; font-weight: 700; line-height: 1.35; }
.waterly-date-range label > span { font-weight: 600; }
.waterly-date-range p { font-size: 12px; }
.waterly-date-range input, .wcl2-csv-dates input { box-sizing: border-box; width: 100%; min-width: 0; padding: 10px; border: 1px solid #b9cfdb; border-radius: 8px; color: inherit; background: transparent; }
.waterly-date-range input { font: inherit; font-size: 14px; }
.waterly-date-range footer { display: flex; justify-content: flex-end; gap: 10px; }
.waterly-date-range button { min-height: 39px; padding: 9px 16px; border: 1px solid #b9cfdb; border-radius: 9px; background: transparent; color: inherit; font: inherit; font-weight: 700; }
.waterly-date-range button[type=submit] { background: #087eb5; color: white; }
@media (max-width: 820px) {
    .waterly-date-range input { font-size: 16px; }
}
.waterly-date-range-error { color: #bb3434; }
.wcl2-csv-dates { display: grid; gap: 12px; }
.wcl2-csv-dates label { display: grid; gap: 6px; min-width: 0; }
[data-theme=dark] .waterly-date-range { background: #101c2b; color: #e2e8f0; border-color: #365066; color-scheme: dark; }

.waterly-chart-lab-v2 .wcl2-range-controls { position: relative; grid-column: 3; grid-row: 1; justify-self: end; width: 100%; max-width: 200px; min-width: 0; }
.waterly-chart-lab-v2 .wcl2-range-controls > i { position: absolute; top: 0; bottom: 0; left: 12px; display: grid; align-items: center; color: #94a3b8; font-size: 11px; pointer-events: none; }
.waterly-chart-lab-v2 .wcl2-range-controls select.wcl2-period-select { width: 100%; min-width: 0; padding-left: 32px; text-overflow: ellipsis; }
html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-range-controls > i { color: #607b8b; }
@container chart-window (300px <= width < 360px) {
    .waterly-chart-lab-v2 .wcl2-window > .wcl2-time-toolbar { grid-template-columns: minmax(0, 1fr) auto; }
    .waterly-chart-lab-v2 .wcl2-window > .wcl2-time-toolbar .wcl2-time-navigation { grid-column: 1; justify-self: end; }
    .waterly-chart-lab-v2 .wcl2-range-controls { grid-column: 2; width: 118px; }
}
@container chart-window (width < 300px) {
    .waterly-chart-lab-v2 .wcl2-range-controls { width: 33px; }
    .waterly-chart-lab-v2 .wcl2-window .wcl2-time-toolbar .wcl2-range-controls select.wcl2-period-select { padding: 0; background-image: none; color: transparent !important; }
    .waterly-chart-lab-v2 .wcl2-range-controls > i { left: 0; right: 0; justify-items: center; }
    .waterly-chart-lab-v2 .wcl2-range-controls option { color: #e2f1f8; background: #10212c; }
    html[data-theme="light"] .waterly-chart-lab-v2 .wcl2-range-controls option { color: #294552; background: #f5fafc; }
}
.waterly-chart-lab-v2 .wcl2-csv-format-card[hidden] { display: none; }

.waterly-chart-lab-v2 .wcl2-csv-dates { margin: 10px 0; font-size: 12px; }
.waterly-chart-lab-v2 .wcl2-csv-card > p { font-size: 12px; line-height: 1.5; }


/* ===== features ===== */
/* features/laboratory/laboratory.css */
/**************************************************************************************************
    Waterly laboratory analysis workbench
**************************************************************************************************/

.laboratory-workbench {
	--waterly-drawer-top-gap: 28px;
    position: relative;
    display: block;
    width: 100%;
	min-height: 0;
	flex: 1 1 auto;
	padding: 12px 12px 0 !important;
	overflow-y: auto;
    color: #dce7ed;
    font-family: var(--wl-font-sans, "Geist", "Segoe UI", Arial, sans-serif);
}

.laboratory-shell { width: 100%; margin: 0; }

@media (max-width: 767.98px) {
	.laboratory-workbench { padding-right: 0 !important; padding-left: 0 !important; }
	.laboratory-shell { border-right: 0; border-left: 0; border-radius: 16px 16px 0 0; }
}

.laboratory-shell button,
.laboratory-shell input,
.laboratory-shell select {
    font-family: inherit;
}

.laboratory-hero,
.laboratory-command-deck,
.laboratory-navigation,
.laboratory-analysis-tools,
.laboratory-parameter-section,
.laboratory-snapshot-card {
    border: 1px solid rgba(133, 179, 204, 0.13);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
}

.laboratory-hero {
    position: relative;
    display: flex;
    min-height: 92px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 12px 4px;
    overflow: visible;
    border-radius: 0;
    background: transparent;
}

.laboratory-hero::before { display: none; }

.laboratory-hero-main,
.laboratory-live-status,
.laboratory-time-control,
.laboratory-primary-actions,
.laboratory-time-heading,
.laboratory-snapshot-card,
.laboratory-section-heading,
.laboratory-error-heading {
    display: flex;
    align-items: center;
}

.laboratory-hero-main {
    position: relative;
    min-width: 0;
    gap: 17px;
}

.laboratory-hero-visual {
    position: relative;
    display: grid;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    place-items: center;
    border: 1px solid rgba(72, 221, 223, 0.24);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(27, 190, 196, 0.18), rgba(54, 115, 214, 0.08));
    color: #64e4df;
    font-size: 22px;
}

.laboratory-hero-visual::after {
    display: none;
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(100, 228, 223, 0.15);
    border-radius: 16px;
    content: "";
}

.laboratory-hero-visual span,
.laboratory-hero-visual b {
    display: none;
    position: absolute;
    inset: -6px;
    border: 1px solid rgba(100, 228, 223, 0.15);
    border-radius: 25px;
    animation: laboratory-orbit 7s linear infinite;
}

.laboratory-hero-visual b {
    inset: -11px;
    border-style: dashed;
    opacity: 0.45;
    animation-direction: reverse;
    animation-duration: 12s;
}

@keyframes laboratory-orbit { to { transform: rotate(360deg); } }

.laboratory-hero-copy {
    min-width: 0;
}

.laboratory-eyebrow,
.laboratory-navigation-copy span,
.laboratory-time-heading span,
.laboratory-section-heading span,
.laboratory-table-heading span,
.laboratory-error-heading span,
.laboratory-snapshot-card span {
    display: block;
    color: #7891a1;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.085em;
    text-transform: uppercase;
}

.laboratory-hero-copy h1 {
    margin: 4px 0 5px;
    color: #fff;
    font-size: clamp(22px, 2.1vw, 30px);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.08;
}

.laboratory-hero-copy p {
    max-width: 780px;
    margin: 0;
    color: #8ba2b0;
    font-size: 12px;
    line-height: 1.55;
}

.laboratory-live-status {
    position: relative;
    min-width: 245px;
    flex: 0 0 auto;
    gap: 12px;
    padding: 6px 0 6px 16px;
	border: 0;
    border-left: 1px solid rgba(128, 178, 201, .14);
    background: transparent;
}

.laboratory-live-status > i {
    color: #667781;
    font-size: 9px;
}

.laboratory-live-status.live > i {
    color: #32d39b;
    animation: laboratory-live-pulse 1.8s ease-in-out infinite;
}

.laboratory-live-status.stale > i { color: #ffc857; }
.laboratory-live-status.offline > i { color: #ff6574; }

@keyframes laboratory-live-pulse {
    50% { opacity: 0.45; filter: drop-shadow(0 0 6px #32d39b); }
}

.laboratory-live-status span,
.laboratory-live-status strong,
.laboratory-live-status small {
    display: block;
}

.laboratory-live-status span {
    color: #748894;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.laboratory-live-status strong {
    margin-top: 2px;
    color: #f2f8fa;
    font-size: 12px;
}

.laboratory-live-status small {
    margin-top: 2px;
    color: #687984;
    font-size: 8px;
}

.laboratory-command-deck {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 0;
    padding: 8px 4px;
    border-radius: 0;
    background: rgba(10, 27, 36, 0.93);
    overflow: hidden;
}

.laboratory-refresh-feedback {
    position: relative;
    display: grid;
    max-height: 0;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 13px;
    margin-top: 0;
    padding: 0 15px;
    overflow: hidden;
    border: 0 solid transparent;
    border-radius: 11px;
    opacity: 0;
    background: linear-gradient(115deg, rgba(33, 150, 243, .12), rgba(32, 201, 151, .055));
    transform: translateY(-5px);
    transition: max-height .26s ease, margin .26s ease, padding .26s ease, opacity .2s ease, transform .26s ease, border-color .26s ease;
}

.laboratory-refresh-feedback.is-visible {
    max-height: 84px;
    margin-top: 8px;
    padding-top: 12px;
    padding-bottom: 15px;
    border-width: 1px;
    border-color: rgba(101, 184, 255, .22);
    opacity: 1;
    transform: translateY(0);
}

.laboratory-refresh-visual {
    position: relative;
    display: flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: #8acaff;
    background: rgba(33, 150, 243, .13);
}

.laboratory-refresh-visual span,
.laboratory-refresh-visual b {
    position: absolute;
    inset: 4px;
    border: 1px solid rgba(121, 194, 255, .4);
    border-radius: 50%;
    content: "";
    animation: laboratory-refresh-orbit 1.7s linear infinite;
}

.laboratory-refresh-visual b {
    inset: 9px;
    border-color: rgba(32, 201, 151, .42);
    animation-direction: reverse;
    animation-duration: 1.1s;
}

@keyframes laboratory-refresh-orbit { to { transform: rotate(360deg); } }

.laboratory-refresh-copy strong,
.laboratory-refresh-copy span { display: block; }
.laboratory-refresh-copy strong { color: #f4f9fd; font-size: 13px; }
.laboratory-refresh-copy span { margin-top: 2px; color: #8d9aa4; font-size: 10px; }

.laboratory-data-empty {
    min-height: clamp(280px, 44vh, 520px);
    align-items: center;
    justify-content: center;
    gap: 22px;
    margin-top: 8px;
    padding: clamp(28px, 5vw, 72px);
    border: 1px solid rgba(101, 184, 255, .14);
    border-radius: 15px;
    color: #78909c;
    background:
        radial-gradient(circle at 50% 30%, rgba(39, 188, 198, .085), transparent 38%),
        rgba(5, 17, 24, .7);
    text-align: left;
}

.laboratory-data-empty:not([hidden]) { display: flex; }
.laboratory-data-empty-visual {
    position: relative;
    display: grid;
    width: 68px;
    height: 68px;
    flex: 0 0 68px;
    place-items: center;
    border: 1px solid rgba(85, 221, 216, .24);
    border-radius: 20px;
    color: #55ddd8;
    background: rgba(35, 190, 194, .1);
    font-size: 25px;
}
.laboratory-data-empty-visual span {
    position: absolute;
    inset: -9px;
    border: 1px solid rgba(85, 221, 216, .08);
    border-radius: 25px;
}
.laboratory-data-empty-eyebrow {
    color: #55ddd8;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.laboratory-data-empty h2 { margin: 6px 0 5px; color: #edf7f9; font-size: clamp(18px, 2vw, 25px); }
.laboratory-data-empty p { max-width: 520px; margin: 0; font-size: 11px; line-height: 1.65; }

.laboratory-workbench.has-no-data .water-outside-alarm,
.laboratory-workbench.has-no-data .laboratory-analysis-launcher,
.laboratory-workbench.has-no-data .laboratory-navigation,
.laboratory-workbench.has-no-data .laboratory-analysis-tools,
.laboratory-workbench.has-no-data .laboratory-parameter-section,
.laboratory-workbench.has-no-data .laboratory-snapshot { display: none !important; }

@media (max-width: 575.98px) {
    .laboratory-data-empty { flex-direction: column; text-align: center; }
}

.laboratory-refresh-progress {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    overflow: hidden;
    background: rgba(255, 255, 255, .045);
}

.laboratory-refresh-progress span,
.laboratory-workbench.is-refreshing .laboratory-command-deck::after {
    position: absolute;
    width: 36%;
    height: 3px;
    border-radius: 99px;
    background: linear-gradient(90deg, transparent, #2196f3, #20c997, transparent);
    animation: laboratory-refresh-progress 1.45s ease-in-out infinite;
}

.laboratory-workbench.is-refreshing .laboratory-command-deck::after {
    bottom: 0;
    left: -38%;
    z-index: 4;
    content: "";
}

@keyframes laboratory-refresh-progress {
    from { left: -38%; }
    to { left: 102%; }
}

.laboratory-workbench.is-refreshing:not(.is-refreshing-quiet) .laboratory-period-navigator,
.laboratory-workbench.is-refreshing:not(.is-refreshing-quiet) .laboratory-primary-actions,
.laboratory-workbench.is-refreshing:not(.is-refreshing-quiet) .laboratory-analysis-stage {
    pointer-events: none;
}

.laboratory-workbench.is-refreshing:not(.is-refreshing-quiet) .laboratory-analysis-stage,
.laboratory-workbench.is-refreshing:not(.is-refreshing-quiet) .laboratory-snapshot {
    opacity: .68;
    filter: saturate(.78);
    transition: opacity .2s ease, filter .2s ease;
}

.laboratory-workbench.is-refreshing .diagnostic-chart-stage::after {
    position: absolute;
    inset: 0;
    z-index: 7;
    content: "";
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 35%, rgba(101, 184, 255, .055) 48%, rgba(32, 201, 151, .06) 52%, transparent 65%);
    background-size: 220% 100%;
    animation: laboratory-chart-sync 1.5s ease-in-out infinite;
}

@keyframes laboratory-chart-sync {
    from { background-position: 180% 0; }
    to { background-position: -40% 0; }
}

.laboratory-time-control { min-width: 0; gap: 17px; }
.laboratory-time-heading { gap: 10px; }

.laboratory-time-heading > i {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 10px;
    background: rgba(51, 196, 203, 0.09);
    color: #57d7d5;
}

.laboratory-time-heading strong {
    display: block;
    margin-top: 2px;
    color: #edf6f8;
    font-size: 10px;
}

.laboratory-period-navigator {
    display: flex;
    height: 38px;
    align-items: stretch;
    padding: 2px;
    border: 1px solid rgba(126, 164, 183, 0.16);
    border-radius: 11px;
    background: rgba(2, 12, 18, 0.62);
}
.laboratory-period-navigator .period-selector-start { order: 0; }
.laboratory-period-navigator .period-selector-previous { order: 1; }
.laboratory-period-navigator .period-selector { order: 2; }
.laboratory-period-navigator .period-selector-next { order: 3; }
.laboratory-period-navigator .period-selector-end { order: 4; }

.laboratory-period-navigator .period-selector {
    width: auto;
    min-width: 148px;
    height: 32px;
    padding: 4px 30px 4px 11px;
    border: 0;
    border-right: 1px solid rgba(126, 164, 183, 0.12);
    border-left: 1px solid rgba(126, 164, 183, 0.12);
	border-radius: 8px;
	outline: 0;
	-webkit-appearance: none;
	appearance: none;
	background-color: #102832 !important;
	background-image:
		linear-gradient(45deg, transparent 50%, #65cdd1 50%),
		linear-gradient(135deg, #65cdd1 50%, transparent 50%),
		linear-gradient(135deg, rgba(77, 201, 207, .08), rgba(37, 105, 130, .04));
	background-position: calc(100% - 14px) 13px, calc(100% - 10px) 13px, 0 0;
	background-repeat: no-repeat;
	background-size: 4px 4px, 4px 4px, 100% 100%;
	color: #dcebef;
    font-size: 10px;
	font-weight: 700;
	box-shadow: inset 0 0 0 1px rgba(91, 191, 199, .09);
	cursor: pointer;
}

.laboratory-period-navigator .period-selector:hover,
.laboratory-period-navigator .period-selector:focus {
	background-color: #153540 !important;
	box-shadow: inset 0 0 0 1px rgba(84, 213, 216, .25), 0 0 0 3px rgba(55, 192, 199, .06);
}

.laboratory-icon-button,
.laboratory-action-button,
.laboratory-view-switch button,
.laboratory-search-clear,
.laboratory-empty-filter button {
    border: 0;
    outline: 0;
    cursor: pointer;
}

.laboratory-icon-button {
    width: 34px;
    padding: 0;
    background: transparent;
    color: #78909c;
    font-size: 10px;
    transition: 160ms ease;
}

.laboratory-icon-button:hover:not([disabled]) {
    border-radius: 8px;
    background: rgba(73, 209, 211, 0.09);
    color: #62dddc;
}

.laboratory-icon-button[disabled] { cursor: default; opacity: .25; }

.laboratory-primary-actions { flex: 0 0 auto; gap: 8px; }

.laboratory-action-button {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    border: 1px solid rgba(126, 164, 183, 0.16);
    border-radius: 10px;
    background: rgba(17, 39, 49, 0.9);
    color: #a9bbc4;
    font-size: 10px;
    font-weight: 700;
    transition: 180ms ease;
}

.laboratory-action-button:hover {
    transform: translateY(-1px);
    border-color: rgba(90, 220, 218, 0.28);
    color: #eef9fa;
}

.laboratory-action-button[disabled] {
    cursor: wait;
    opacity: .78;
    transform: none;
}

.widget-reload-all.is-loading > i {
    color: #79c2ff;
    animation: laboratory-reload-icon 1.15s cubic-bezier(.45, 0, .55, 1) infinite;
}

@keyframes laboratory-reload-icon {
    0% { opacity: .55; transform: rotate(0deg) scale(.92); }
    50% { opacity: 1; transform: rotate(180deg) scale(1.05); }
    100% { opacity: .55; transform: rotate(360deg) scale(.92); }
}

.laboratory-action-primary {
    border-color: rgba(62, 210, 208, 0.23);
    background: linear-gradient(135deg, #168d95, #1b6ca2);
    color: #fff;
}

.laboratory-snapshot {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.laboratory-snapshot > .laboratory-snapshot-card.sensors,
.laboratory-snapshot-group { grid-column: 1 / -1; }

.laboratory-snapshot > .laboratory-snapshot-card.sensors {
    min-height: 74px;
    border-color: rgba(100, 223, 158, .2);
    background: linear-gradient(110deg, rgba(14, 47, 48, .96), rgba(9, 25, 33, .96) 52%, rgba(18, 48, 42, .94));
}

.laboratory-snapshot-card.sensors .laboratory-summary-reading {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
}
.laboratory-snapshot-card.sensors .laboratory-summary-reading small {
    display: flex;
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 500;
}
.laboratory-summary-reading em { font-style: normal; font-weight: 650; }
.laboratory-snapshot-card.sensors .laboratory-summary-reading small { flex-wrap: wrap; gap: 6px 12px; }
.laboratory-summary-reading .laboratory-summary-warning { color: #ffbd66; }
.laboratory-summary-reading .laboratory-summary-alarm { color: #ff6574; }

.laboratory-snapshot-group {
    min-width: 0;
    padding: 9px;
    border: 1px solid rgba(133, 179, 204, .11);
    border-radius: 17px;
    background: rgba(5, 17, 24, .48);
}

.laboratory-snapshot-group-header {
    display: flex;
    min-height: 43px;
    align-items: center;
    gap: 10px;
    padding: 0 5px 8px;
}

.laboratory-snapshot-group-icon {
    display: grid;
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    place-items: center;
    border: 1px solid rgba(85, 221, 216, .16);
    border-radius: 10px;
    color: #55ddd8;
    background: rgba(85, 221, 216, .075);
    font-size: 11px;
}

.laboratory-snapshot-group-header > div { min-width: 0; }
.laboratory-snapshot-group-header strong,
.laboratory-snapshot-group-header small { display: block; }
.laboratory-snapshot-group-header strong { color: #ddecf0; font-size: 11px; }
.laboratory-snapshot-group-header small {
    margin-top: 1px;
    overflow: hidden;
    color: #607986;
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.laboratory-snapshot-group-meta {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-left: auto;
    color: #66808c;
    font-size: 8px;
    white-space: nowrap;
}
.laboratory-snapshot-group-meta em { font-style: normal; }

.laboratory-snapshot-subgroup { min-width: 0; }
.laboratory-snapshot-subgroup + .laboratory-snapshot-subgroup {
    margin-top: 13px;
    padding-top: 10px;
    border-top: 1px solid rgba(133, 179, 204, .13);
}
.laboratory-snapshot-subgroup-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 5px 9px;
    color: #a9c1cb;
    font-size: 10px;
    font-weight: 700;
}
.laboratory-snapshot-subgroup-header > i {
    width: 17px;
    color: #55ddd8;
    text-align: center;
}

.laboratory-snapshot-depth-group { min-width: 0; }
.laboratory-snapshot-depth-group[data-lab-sensor-group] .laboratory-snapshot-group-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}
.laboratory-snapshot-depth-group + .laboratory-snapshot-depth-group {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid rgba(133, 179, 204, .16);
}
.laboratory-snapshot-depth-header {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 4px 5px 10px;
    color: #ddecf0;
    font-size: 12px;
}
.laboratory-snapshot-depth-header > i { color: #55ddd8; }

html[data-theme="light"] .laboratory-snapshot-depth-header { color: #193c49; }
html[data-theme="light"] .laboratory-snapshot-depth-header > i { color: #138c95; }

.laboratory-snapshot-group-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.laboratory-snapshot-card {
    position: relative;
    width: 100%;
    min-height: 80px;
    gap: 10px;
    padding: 10px;
    overflow: hidden;
    color: inherit;
    cursor: pointer;
    text-align: left;
    border-radius: 15px;
	container-type: inline-size;
    background: linear-gradient(145deg, rgba(14, 37, 47, .96), rgba(9, 25, 33, .96));
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.laboratory-statistic { container-type: inline-size; }
.laboratory-responsive-label .is-short { display: none; }

@container (max-width: 340px) {
    .laboratory-snapshot-card .laboratory-responsive-label .is-full { display: none; }
    .laboratory-snapshot-card .laboratory-responsive-label .is-short { display: block; }
}

@container (max-width: 340px) {
    .diagnostic-statistic-widget .laboratory-responsive-label .is-full { display: none; }
    .diagnostic-statistic-widget .laboratory-responsive-label .is-short { display: inline; }
}

.laboratory-snapshot-card[data-lab-kpi-card]:hover,
.laboratory-snapshot-card[data-lab-kpi-card]:focus-visible {
    border-color: color-mix(in srgb, var(--laboratory-accent, #4dd6d4) 38%, transparent);
    background: linear-gradient(145deg, rgba(17, 44, 55, .98), rgba(10, 29, 38, .98));
    box-shadow: 0 18px 44px rgba(0, 0, 0, .25), inset 0 0 0 1px color-mix(in srgb, var(--laboratory-accent, #4dd6d4) 9%, transparent);
    outline: none;
    transform: translateY(-2px);
}
.laboratory-snapshot-card[data-lab-kpi-card]:has(.laboratory-snapshot-chart:focus-visible) { outline: 2px solid #5de2e7; outline-offset: 2px; }

.laboratory-snapshot-card::after {
    position: absolute;
    right: -24px;
    bottom: -38px;
    width: 95px;
    height: 95px;
    border-radius: 50%;
    background: var(--laboratory-accent, #4dd6d4);
    content: "";
    filter: blur(38px);
    opacity: .11;
}

.laboratory-snapshot-icon {
    display: grid;
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    place-items: center;
    border-radius: 12px;
    background: color-mix(in srgb, var(--laboratory-accent, #4dd6d4) 12%, transparent);
    color: var(--laboratory-accent, #4dd6d4);
    font-size: 15px;
}

.laboratory-snapshot-card.temperature { --laboratory-accent: #ffb85c; }
.laboratory-snapshot-card.chemistry { --laboratory-accent: #b58bff; }
.laboratory-snapshot-card.oxygen { --laboratory-accent: #70b7ff; }
.laboratory-snapshot-card.sensors { --laboratory-accent: #64df9e; cursor: default; }
.laboratory-snapshot-card.biology { --laboratory-accent: #59d99a; }
.laboratory-snapshot-card.optical { --laboratory-accent: #f6b84d; }
.laboratory-snapshot-card.organic { --laboratory-accent: #f47d7d; }

.laboratory-snapshot-open {
    position: absolute;
    right: 11px;
    bottom: 10px;
    z-index: 1;
    color: var(--laboratory-accent, #4dd6d4);
    font-size: 9px;
    opacity: .42;
    transition: opacity .18s ease, transform .18s ease;
}

.laboratory-snapshot-card:hover .laboratory-snapshot-open,
.laboratory-snapshot-card:focus-visible .laboratory-snapshot-open { opacity: .95; transform: translate(1px, -1px); }

.laboratory-snapshot-card strong,
.laboratory-snapshot-card small {
    display: block;
}

.laboratory-snapshot-card strong {
    margin-top: 2px;
    color: #fff;
    font-size: 18px;
    letter-spacing: -.025em;
    white-space: nowrap;
}

.laboratory-snapshot-card small.is-data-status::before {
    margin-right: 5px;
    font-family: "bootstrap-icons";
    font-weight: 400;
    content: "\f293";
}
.laboratory-snapshot-card small.is-data-status.is-aging { color: #d9a34d; }
.laboratory-snapshot-card small.is-data-status.is-stale { color: #df8f52; }
.laboratory-snapshot-card small.is-data-status.is-expired { color: #718791; }
.laboratory-snapshot-card:is(.is-stale, .is-time-unknown) {
    border-color: rgba(223, 143, 82, .28);
}
.laboratory-snapshot-card.is-expired {
    border-color: rgba(133, 179, 204, .14);
    background: linear-gradient(145deg, rgba(15, 31, 39, .88), rgba(9, 23, 30, .9));
}
.laboratory-snapshot-card:is(.is-stale, .is-time-unknown, .is-expired) .laboratory-snapshot-icon,
.laboratory-snapshot-card:is(.is-stale, .is-time-unknown, .is-expired) strong {
    opacity: .72;
}

.laboratory-snapshot-card small {
    margin-top: 2px;
    overflow: hidden;
    color: #697f8b;
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.laboratory-analysis-launcher {
    position: relative;
    display: flex;
    min-height: 68px;
    align-items: center;
    gap: 15px;
    margin-top: 8px;
    padding: 10px 12px;
    overflow: hidden;
    border: 1px solid rgba(104, 214, 220, .17);
    border-radius: 17px;
    background:
        radial-gradient(circle at 75% -50%, rgba(74, 220, 215, .16), transparent 38%),
        linear-gradient(135deg, rgba(12, 38, 48, .98), rgba(7, 22, 30, .99));
    box-shadow: 0 18px 46px rgba(0, 0, 0, .19);
}

.laboratory-analysis-launcher-icon {
    position: relative;
    display: grid;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    place-items: center;
    border: 1px solid rgba(94, 227, 222, .22);
    border-radius: 14px;
    background: rgba(75, 215, 212, .09);
    color: #65e1dd;
    font-size: 17px;
}

.laboratory-analysis-launcher-icon span {
    position: absolute;
    inset: -5px;
    border: 1px dashed rgba(94, 227, 222, .12);
    border-radius: 18px;
}

.laboratory-analysis-launcher-copy {
    min-width: 0;
    flex: 1;
}

.laboratory-analysis-launcher-copy > span {
    display: block;
    color: #6f8995;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.laboratory-analysis-launcher-copy h2 {
    margin: 2px 0;
    color: #f2f9fa;
    font-size: 14px;
    font-weight: 750;
}

.laboratory-analysis-launcher-copy p {
    margin: 0;
    color: #70858f;
    font-size: 8px;
}

.laboratory-analysis-open {
    display: inline-flex;
    min-height: 38px;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    border: 1px solid rgba(87, 223, 219, .24);
    border-radius: 10px;
    background: linear-gradient(135deg, #168d95, #1b6ca2);
    color: #fff;
    cursor: pointer;
    font-size: 9px;
    font-weight: 750;
    transition: 170ms ease;
}

.laboratory-analysis-open:hover { transform: translateY(-1px); filter: brightness(1.08); }

.laboratory-analysis-window[hidden] { display: none !important; }

.laboratory-analysis-window {
    --analysis-muted: #a2b6c1;
    --analysis-text: #dce9ed;
    --analysis-surface: #0a202a;
    --analysis-border: rgba(126, 164, 183, .25);
    position: fixed;
    z-index: 10050;
    inset: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% -8%, rgba(36, 175, 186, .15), transparent 30%),
        #050e14;
    animation: laboratory-analysis-window-enter .24s ease both;
}

@keyframes laboratory-analysis-window-enter {
    from { opacity: 0; transform: scale(.985); }
}

body.laboratory-analysis-window-open { overflow: hidden !important; }

.laboratory-analysis-window-bar {
    display: flex;
    min-height: 54px;
    flex: 0 0 54px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 7px 14px;
    border-bottom: 1px solid rgba(123, 167, 185, .13);
    background: rgba(7, 20, 27, .96);
}

.laboratory-analysis-window-bar > div {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
}

.laboratory-analysis-window-bar > div > i { color: #61ddda; }
.laboratory-analysis-window-bar span { color: #a2b6c1; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.laboratory-analysis-window-bar strong { overflow: hidden; color: #e8f2f4; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }

.laboratory-analysis-window-close {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    gap: 7px;
    padding: 0 11px;
    border: 1px solid rgba(128, 163, 181, .15);
    border-radius: 9px;
    background: rgba(16, 36, 45, .8);
    color: #a4b6be;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
}

.laboratory-analysis-window-close:hover { border-color: rgba(255, 113, 132, .25); color: #ff8997; }

.laboratory-explorer {
    margin-top: 12px;
    overflow: hidden;
    border: 1px solid rgba(104, 214, 220, .17);
    border-radius: 18px;
    background:
        radial-gradient(circle at 78% -20%, rgba(53, 187, 203, .10), transparent 34%),
        linear-gradient(145deg, rgba(11, 31, 41, .98), rgba(5, 17, 24, .99));
    box-shadow: 0 22px 60px rgba(0, 0, 0, .26);
}

.laboratory-analysis-window > .laboratory-explorer {
    display: flex;
    flex-direction: column;
    width: calc(100% - 24px);
    min-height: 0;
    flex: 1;
    margin: 12px;
}

.laboratory-analysis-window .laboratory-explorer-body {
    flex: 1;
    min-height: 0;
}

.laboratory-analysis-window .laboratory-series-panel,
.laboratory-analysis-window .laboratory-explorer-plot {
    min-height: 0;
}

.laboratory-analysis-window .laboratory-explorer-canvas {
    min-height: 260px;
}

.laboratory-explorer-header {
    display: flex;
    min-height: 82px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 17px;
    border-bottom: 1px solid rgba(126, 164, 183, .11);
    flex-shrink: 0;
}

.laboratory-explorer-heading {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 12px;
}

.laboratory-explorer-icon {
    position: relative;
    display: grid;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    place-items: center;
    border: 1px solid rgba(88, 224, 220, .20);
    border-radius: 13px;
    background: rgba(64, 210, 210, .09);
    color: #63e1de;
}

.laboratory-explorer-icon span {
    position: absolute;
    inset: -4px;
    border: 1px dashed rgba(88, 224, 220, .14);
    border-radius: 16px;
}

.laboratory-explorer-heading > div:last-child > span,
.laboratory-series-panel-heading span {
    display: block;
    color: #a2b6c1;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.laboratory-explorer-heading h2 {
    margin: 1px 0;
    color: #f5fafb;
    font-size: 20px;
    font-weight: 750;
}

.laboratory-explorer-heading p {
    margin: 0;
    color: #a2b6c1;
    font-size: 12px;
}

.laboratory-explorer-mode-control { min-width: 0; }
.laboratory-explorer-mode-hint { margin: 7px 0 0; color: var(--analysis-muted); font-size: 11px; line-height: 1.4; }
.laboratory-explorer-mode-hint i { margin-right: 5px; }

.laboratory-explorer-modes {
    display: flex;
    flex: 0 0 auto;
    padding: 3px;
    border: 1px solid rgba(126, 164, 183, .13);
    border-radius: 11px;
    background: rgba(3, 13, 19, .7);
}

.laboratory-explorer-modes button {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    gap: 7px;
    padding: 0 11px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #a2b6c1;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
}

.laboratory-explorer-modes button.active {
    background: rgba(72, 211, 208, .11);
    color: #70e4e0;
    box-shadow: inset 0 0 0 1px rgba(95, 224, 220, .08);
}

.laboratory-explorer-body {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    min-height: 500px;
}

.laboratory-series-panel {
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: 12px;
    border-right: 1px solid rgba(126, 164, 183, .11);
    background: rgba(4, 15, 21, .46);
}

.laboratory-series-panel-heading {
    display: flex;
    min-height: 38px;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.laboratory-series-panel-heading strong {
    display: block;
    margin-top: 2px;
    color: #dce9ed;
    font-size: 14px;
}

.laboratory-series-clear {
    padding: 5px 7px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #a2b6c1;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
}

.laboratory-series-clear:hover { background: rgba(255, 101, 116, .08); color: #ff8692; }

.laboratory-series-search {
    display: flex;
    height: 40px;
    align-items: center;
    gap: 8px;
    margin: 8px 0 9px;
    padding: 0 10px;
    border: 1px solid rgba(126, 164, 183, .12);
    border-radius: 9px;
    background: rgba(3, 12, 17, .72);
}

.laboratory-series-search i { color: #a2b6c1; font-size: 12px; }

.laboratory-series-search input {
    min-width: 0;
    height: 100%;
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    color: #dce9ed;
    font-size: 13px;
}

.laboratory-series-list {
    display: flex;
    min-height: 0;
    flex: 1;
    flex-direction: column;
    gap: 4px;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(83, 124, 142, .36) transparent;
}

.laboratory-series-option {
    display: grid;
    min-height: 58px;
    flex-shrink: 0;
    grid-template-columns: 16px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: #b5c7d0;
    cursor: pointer;
    text-align: left;
    transition: 150ms ease;
}

.laboratory-series-option:hover {
    border-color: rgba(126, 164, 183, .11);
    background: rgba(83, 137, 155, .055);
    color: #d7e5e9;
}

.laboratory-series-option.is-selected {
    border-color: color-mix(in srgb, var(--series-color) 28%, transparent);
    background: color-mix(in srgb, var(--series-color) 9%, transparent);
    color: #f3f9fa;
}

.laboratory-series-option > i {
    width: 16px;
    height: 16px;
    border: 1px solid var(--series-color);
    border-radius: 4px;
    background: transparent;
    color: transparent;
    font-size: 10px;
    line-height: 14px;
    text-align: center;
}

.laboratory-series-option.is-selected > i {
    background: var(--series-color);
    color: #05121b;
}

.laboratory-series-option span,
.laboratory-series-option strong,
.laboratory-series-option small {
    display: block;
    min-width: 0;
}

.laboratory-series-option strong {
    font-size: 13px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.laboratory-series-option small {
    margin-top: 2px;
    overflow: hidden;
    color: #a2b6c1;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.laboratory-series-option em {
    color: #b5c7d0;
    font-size: 11px;
    font-style: normal;
}

.laboratory-series-limit {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 9px 4px 0;
    color: #a2b6c1;
    font-size: 11px;
    line-height: 1.4;
}

.laboratory-series-limit i { margin-top: 1px; color: #4eaaa9; }
.laboratory-series-limit.is-warning { color: #ff9d75; animation: laboratory-limit-shake .32s ease 2; }
.laboratory-series-limit.is-warning i { color: #ff8e69; }

@keyframes laboratory-limit-shake {
    35% { transform: translateX(3px); }
    70% { transform: translateX(-3px); }
}

.laboratory-explorer-plot {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.laboratory-explorer-toolbar {
    display: flex;
    min-height: 53px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 14px;
    border-bottom: 1px solid rgba(126, 164, 183, .08);
    flex-shrink: 0;
}

.laboratory-explorer-legend {
    display: flex;
    min-width: 0;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.laboratory-explorer-legend::-webkit-scrollbar { display: none; }

.laboratory-explorer-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #b5c7d0;
    font-size: 12px;
    font-weight: 700;
}

.laboratory-explorer-legend-item i {
    width: 14px;
    height: 3px;
    border-radius: 999px;
    background: var(--series-color);
    box-shadow: 0 0 7px color-mix(in srgb, var(--series-color) 48%, transparent);
}

.laboratory-explorer-summary {
    display: flex;
    flex: 0 0 auto;
    gap: 10px;
}

.laboratory-explorer-summary span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #a2b6c1;
    font-size: 11px;
}

.laboratory-explorer-summary i { color: #4ccfcd; }
.laboratory-explorer-summary strong { color: #d9e8eb; }

.laboratory-explorer-canvas {
    position: relative;
    min-height: 390px;
    flex: 1;
    margin: 12px 14px 4px;
}

.laboratory-explorer-canvas canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* Bez tego przeglądarka mobilna przechwytuje gest jako przewijanie strony
       i jednopalcowe przesuwanie osi czasu nigdy nie dociera do wykresu. */
    touch-action: none;
    cursor: crosshair;
}

.laboratory-explorer-canvas canvas.is-dragging { cursor: grabbing; }

.laboratory-explorer-empty {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 6px;
    background: radial-gradient(circle, rgba(21, 62, 73, .16), transparent 48%);
    color: #617985;
    text-align: center;
}

.laboratory-explorer-empty.is-visible { display: flex; }
.laboratory-explorer-empty i { margin-bottom: 4px; color: #4ccfcd; font-size: 31px; opacity: .8; }
.laboratory-explorer-empty strong { color: #dce9ed; font-size: 12px; }
.laboratory-explorer-empty span { font-size: 8px; }

.laboratory-explorer-footer {
    display: flex;
    min-height: 42px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 14px;
    border-top: 1px solid rgba(126, 164, 183, .08);
    flex-shrink: 0;
    color: #a2b6c1;
    font-size: 11px;
}

.laboratory-explorer-footer i { margin-right: 5px; color: #54b8b7; }

.laboratory-statistic .laboratory-analyze {
    display: inline-flex;
    height: 28px;
    align-items: center;
    gap: 5px;
    padding: 0 8px;
    border: 1px solid rgba(128, 163, 181, .16);
    border-radius: 9px;
    background: rgba(6, 19, 26, .86);
    color: #6e858f;
    cursor: pointer;
    font-size: 8px;
    font-weight: 700;
    white-space: nowrap;
    transition: 160ms ease;
}

.laboratory-statistic .laboratory-analyze:hover {
    border-color: rgba(84, 218, 215, .32);
    color: #b9f5f2;
    background: rgba(22, 62, 70, .82);
}

.laboratory-statistic .laboratory-analyze.is-active { border-color: rgba(84, 218, 215, .24); color: #61ddda; }

.laboratory-navigation {
    display: flex;
    min-height: 52px;
    align-items: center;
    gap: 18px;
    position: sticky;
    top: 0;
    z-index: 9;
    margin-top: 8px;
    padding: 5px 4px;
    border-radius: 0;
    background: rgba(10, 27, 36, .95);
}

.laboratory-navigation-copy {
    width: 130px;
    flex: 0 0 130px;
}

.laboratory-navigation-copy strong {
    display: block;
    margin-top: 2px;
    color: #fff;
    font-size: 12px;
}

.laboratory-tabs {
    display: flex;
    min-width: 0;
    flex: 1;
    gap: 3px;
    overflow-x: auto;
    scrollbar-width: none;
}

.laboratory-tabs::-webkit-scrollbar { display: none; }
.laboratory-mobile-navigation,
.laboratory-period-caption { display: none; }

.laboratory-tab {
    position: relative;
    display: inline-flex;
    min-width: max-content;
    min-height: 43px;
    align-items: center;
    gap: 7px;
    padding: 0 13px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: #7b909b;
    cursor: pointer;
    font-size: 11px;
    font-weight: 800;
    transition: 180ms ease;
}

.laboratory-tab::after {
    position: absolute;
    right: 12px;
    bottom: 4px;
    left: 12px;
    height: 2px;
    border-radius: 999px;
    background: #4dd6d4;
    content: "";
    opacity: 0;
    transform: scaleX(.25);
    transition: 180ms ease;
}

.laboratory-tab:hover { background: rgba(72, 208, 208, .055); color: #c4d5db; }
.laboratory-tab.active { background: rgba(72, 208, 208, .09); color: #eaf9fa; }
.laboratory-tab.active::after { opacity: 1; transform: scaleX(1); }
.laboratory-tab.active i { color: #5ee0dd; }
.laboratory-tab[hidden] { display: none !important; }

/* Karty skrótu należą do Przeglądu; widoki kategorii skupiają się na wykresach. */
.laboratory-workbench:not([data-lab-active-section="overview"]) .laboratory-snapshot { display: none; }
.laboratory-workbench[data-lab-active-section="overview"] .laboratory-analysis-tools,
.laboratory-workbench[data-lab-active-section="overview"] .laboratory-analysis-stage { display: none; }

.laboratory-favorites-count {
    display: grid;
    min-width: 17px;
    height: 17px;
    place-items: center;
    border-radius: 999px;
    background: rgba(255, 200, 87, .13);
    color: #ffc857;
    font-size: 8px;
}

.laboratory-analysis-tools {
    position: sticky;
    z-index: 8;
    top: 54px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    border-top: 0;
    border-radius: 0 0 14px 14px;
    background: rgba(7, 20, 28, .94);
    backdrop-filter: blur(16px);
}

.laboratory-search {
    position: relative;
    display: flex;
    height: 37px;
    min-width: 220px;
    max-width: 520px;
    flex: 1;
    align-items: center;
    margin: 0;
    border: 1px solid rgba(126, 164, 183, .14);
    border-radius: 10px;
    background: rgba(4, 14, 20, .72);
}

.laboratory-search > i {
    margin-left: 13px;
    color: #66808d;
    font-size: 10px;
}

.laboratory-search-input {
    min-width: 0;
    height: 100%;
    flex: 1;
    padding: 0 10px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #eef6f8;
    font-size: 10px;
}

.laboratory-search-input::placeholder { color: #536975; }

.laboratory-search-clear {
    width: 30px;
    align-self: stretch;
    background: transparent;
    color: #617582;
    opacity: 0;
    pointer-events: none;
}

.laboratory-search.has-value .laboratory-search-clear { opacity: 1; pointer-events: auto; }

.laboratory-view-switch {
    display: flex;
    height: 37px;
    padding: 3px;
    border: 1px solid rgba(126, 164, 183, .14);
    border-radius: 10px;
    background: rgba(4, 14, 20, .72);
}

.laboratory-view-switch button {
    width: 31px;
    border-radius: 7px;
    background: transparent;
    color: #5e7480;
    font-size: 10px;
}

.laboratory-view-switch button.active {
    background: rgba(74, 210, 209, .11);
    color: #61dcda;
}

.laboratory-probe-cleaning-toggle {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 7px;
    min-height: 37px;
    padding: 0 12px;
    border: 1px solid rgba(126, 164, 183, .14);
    border-radius: 10px;
    background: rgba(4, 14, 20, .72);
    color: #8ca5b1;
    cursor: pointer;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
    transition: background 150ms, border-color 150ms, color 150ms;
}
.laboratory-probe-cleaning-toggle:hover { border-color: #56d6d3; color: #c4e8e8; }
.laboratory-probe-cleaning-toggle:focus-visible { outline: 2px solid #67e8f9; outline-offset: 2px; }
.laboratory-probe-cleaning-toggle[aria-pressed="true"] { background: rgba(74, 210, 209, .11); border-color: #3d9398; color: #61dcda; }
html[data-theme="light"] .laboratory-probe-cleaning-toggle { background: #f5fafc; border-color: #c2d8e2; color: #526e7c; }
html[data-theme="light"] .laboratory-probe-cleaning-toggle[aria-pressed="true"] { background: #def5f1; border-color: #56a99f; color: #17695f; }

.laboratory-result-count {
    display: flex;
    min-width: 80px;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    color: #738995;
    font-size: 9px;
}

.laboratory-result-count strong { color: #d9e7eb; font-size: 13px; }

.laboratory-analysis-stage { padding: 13px 0 0; }

.laboratory-parameter-section {
    margin-bottom: 8px;
    padding: 10px 0;
    border-radius: 0;
    background: linear-gradient(150deg, rgba(11, 29, 38, .95), rgba(7, 20, 27, .97));
    animation: laboratory-section-enter .3s ease both;
}

.laboratory-parameter-section:last-of-type { margin-bottom: 0; }

@keyframes laboratory-section-enter {
    from { opacity: 0; transform: translateY(7px); }
}

.laboratory-parameter-section[hidden],
.laboratory-statistic[hidden] { display: none !important; }

.laboratory-section-heading {
    gap: 10px;
    margin-bottom: 8px;
    padding: 0 2px 6px;
    border-bottom: 1px solid rgba(128, 163, 181, .09);
}

.laboratory-section-icon {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    border: 1px solid rgba(77, 214, 212, .15);
    border-radius: 13px;
    background: rgba(77, 214, 212, .08);
    color: #57dbd8;
}

.laboratory-section-icon.chemistry { border-color: rgba(181,139,255,.18); background: rgba(181,139,255,.08); color: #b58bff; }
.laboratory-section-icon.mineralization { border-color: rgba(52,211,153,.2); background: rgba(52,211,153,.08); color: #53dca8; }
.laboratory-section-icon.atmosphere { border-color: rgba(251,191,36,.2); background: rgba(251,191,36,.08); color: #fbc65b; }
.laboratory-section-icon.biology { border-color: rgba(80,210,144,.18); background: rgba(80,210,144,.08); color: #59d99a; }
.laboratory-section-icon.environment { border-color: rgba(255,184,92,.18); background: rgba(255,184,92,.08); color: #ffb85c; }
.laboratory-section-icon.optical { border-color: rgba(245,158,11,.2); background: rgba(245,158,11,.08); color: #f6b84d; }
.laboratory-section-icon.organic { border-color: rgba(239,68,68,.2); background: rgba(239,68,68,.08); color: #f47d7d; }
.laboratory-section-icon.technical { border-color: rgba(112,183,255,.18); background: rgba(112,183,255,.08); color: #70b7ff; }

.laboratory-section-heading h2 {
    margin: 1px 0 1px;
    color: #f5fafb;
    font-size: 15px;
    font-weight: 700;
}

.laboratory-section-heading p {
    margin: 0;
    color: #6e828d;
    font-size: 9px;
}

.laboratory-chart-grid,
.laboratory-multi-sensor-errors {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}

.laboratory-multi-sensors {
    display: grid !important;
    width: 100%;
    min-width: 0;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
}

.laboratory-multi-sensor-errors {
    width: 100%;
    min-width: 0;
    grid-column: 1 / -1;
}

.laboratory-statistic {
    position: relative;
    width: 100%;
    min-width: 0;
    padding: 0 !important;
    border-radius: 14px;
    transition: opacity 180ms ease;
}

.laboratory-statistic-combined.is-wide {
    grid-column: 1 / -1;
}

.laboratory-workbench.is-compact .laboratory-statistic-combined.is-multisensor-comparison {
    grid-column: 1 / -1;
}

.laboratory-statistic-combined .diagnostic-chart-stage {
    min-height: 235px;
}

.laboratory-statistic:hover { z-index: 2; transform: none; }
.laboratory-statistic.diagnostic-statistic-widget .widget-parameter-with-chart:hover { transform: none; }

/* The water timeline extends the organic tile while retaining the oscylogram's height. */
.laboratory-statistic.has-water-surface.diagnostic-statistic-widget .widget-parameter-with-chart {
    height: auto;
    min-height: 620px;
}
.laboratory-statistic.has-water-surface .chart-statistic-div { --laboratory-chart-height: 235px; height: 235px; flex: 0 0 235px; }
.laboratory-statistic.has-water-surface.diagnostic-statistic-widget .widget-parameter-body {
    position: relative;
    top: auto;
    left: auto;
    height: auto;
}
.laboratory-statistic.has-water-surface .diagnostic-chart-stage { flex: 0 0 auto; }
.laboratory-water-surface {
    flex: 0 0 auto;
    min-width: 0;
    margin: 10px 12px 0;
    color: #94acbb;
    font-family: var(--wl-font-sans);
}
.laboratory-water-surface[hidden], .laboratory-water-surface [hidden] { display: none !important; }
.laboratory-water-surface figcaption { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.laboratory-water-surface-heading { display: flex; flex: 1 1 280px; gap: 12px; align-items: center; min-width: 0; }
.laboratory-water-surface figcaption strong { color: #dbeaf0; font-size: 13px; }
.laboratory-water-surface-heading > strong { flex: 0 0 auto; }
.laboratory-water-surface-scene { position: relative; overflow: hidden; border-radius: 10px; }
.laboratory-water-surface canvas { display: block; width: 100%; height: 150px; border-radius: 10px; cursor: ew-resize; touch-action: pan-y; }
.laboratory-water-surface canvas:focus-visible { outline: 2px solid #a78bfa; outline-offset: -3px; }
.laboratory-water-surface-tag {
    min-width: 0;
    max-width: 100%;
    padding: 7px 9px;
    border: 1px solid var(--lab-chart-line, #2d4b5c);
    border-radius: 6px;
    background: var(--lab-chart-plot, #0a1c27);
    color: var(--lab-chart-text, #e9f6fa);
    font: 11px/1.5 var(--wl-font-sans, "Geist", "Segoe UI", Arial, sans-serif);
    font-variant-numeric: tabular-nums;
}
.laboratory-water-surface-tag > span { display: block; color: var(--lab-chart-muted, #91afbd); font: 10px/1.5 var(--wl-font-mono); }
.laboratory-water-surface-tag b { font-weight: 700; overflow-wrap: anywhere; }
.laboratory-water-surface-axis {
    display: flex;
    justify-content: space-between;
    padding: 5px var(--surface-right, 0) 0 var(--surface-left, 0);
    font: 9px/1.4 var(--wl-font-mono);
}
.laboratory-water-surface-legend { display: flex; flex-wrap: wrap; gap: 5px 14px; min-width: 0; font-size: 10px; }
.laboratory-water-surface-legend span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.laboratory-water-surface-legend b { font-weight: 400; }
.laboratory-water-surface-legend i { display: block; flex: 0 0 9px; width: 9px; height: 9px; border-radius: 50%; }
.laboratory-water-surface-legend .is-oil i { background: conic-gradient(#ff5f6d, #ffc371, #7cf29a, #4fc3f7, #b388ff, #ff5f6d); }
.laboratory-water-surface-legend .is-cmos i { background: linear-gradient(135deg, #2b88a8, #8a5a2b); }
.laboratory-water-surface-legend .is-uv i { background: #a78bfa; }
html[data-theme="light"] .laboratory-water-surface { color: #557080; }
html[data-theme="light"] .laboratory-water-surface figcaption strong { color: #193642; }
@media (max-width: 479.98px) {
    .laboratory-water-surface { margin-right: 8px; margin-left: 8px; }
    .laboratory-water-surface-axis { font-size: 8px; }
    .laboratory-water-surface-tag { font-size: 9px; }
}

.laboratory-statistic .laboratory-pin {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 1px solid rgba(128, 163, 181, .16);
    border-radius: 9px;
    background: rgba(6, 19, 26, .86);
    color: #647986;
    cursor: pointer;
    font-size: 9px;
    transition: 160ms ease;
}

.laboratory-statistic .laboratory-pin:hover {
    border-color: rgba(255, 200, 87, .26);
    color: #ffd879;
    background: rgba(67, 52, 18, .62);
}

.laboratory-statistic .laboratory-pin.is-pinned {
    border-color: rgba(255, 200, 87, .25);
    color: #ffc857;
}

.laboratory-statistic .laboratory-widget-actions {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 5px;
    margin-left: auto;
}

.laboratory-statistic.diagnostic-statistic-widget .widget-parameter-with-chart {
    height: auto;
    min-height: 410px;
}

.laboratory-statistic.diagnostic-statistic-widget .widget-parameter-body {
    position: relative;
    top: auto;
    left: auto;
    height: auto;
    min-height: inherit;
}

.laboratory-statistic-combined.diagnostic-statistic-widget .widget-parameter-with-chart {
    min-height: 530px;
}

.laboratory-statistic.diagnostic-statistic-widget .diagnostic-chart-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(150px, 36%);
    align-items: center;
    flex: 0 0 auto;
    min-height: 82px;
}

/* Size readings by the tile, including the three-column desktop layout. */
.laboratory-statistic .diagnostic-chart-identity { width: 100%; }
.laboratory-statistic.diagnostic-statistic-widget .widget-header {
    display: block;
    overflow: visible;
    overflow-wrap: anywhere;
}
.laboratory-statistic.diagnostic-statistic-widget .widget-date {
    height: auto;
    white-space: normal;
    line-height: 1.4;
}
.laboratory-statistic.diagnostic-statistic-widget .diagnostic-chart-reading {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: none;
    padding: 10px 12px;
    text-align: right;
}
.laboratory-statistic .diagnostic-chart-reading > div {
    width: 100%;
    min-width: 0;
    container-type: inline-size;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-top: 5px;
}
.laboratory-statistic.diagnostic-statistic-widget .widget-value {
    min-width: 0;
    max-width: 100%;
    height: auto;
    color: #ecf5fa;
    font-size: 32px;
    font-size: clamp(18px, calc(100cqi / var(--diagnostic-value-characters, 6) / .7), 32px);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    white-space: normal;
    overflow-wrap: anywhere;
}
.laboratory-statistic.diagnostic-statistic-widget .widget-unit {
    flex: 0 0 auto;
    max-width: 100%;
    margin: 0;
    padding: 0;
    font-size: 12px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}
.laboratory-statistic .diagnostic-chart-stat strong,
.laboratory-statistic .diagnostic-chart-stat .widget-trend-label {
    min-width: 0;
    overflow: visible;
    white-space: normal;
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
}
.laboratory-statistic .diagnostic-chart-stat-unit {
    display: inline-block;
    white-space: nowrap;
}
.laboratory-statistic .diagnostic-chart-reading.has-formatted-value .widget-value {
    font-size: clamp(13px, 7cqi, 16px);
}

@container (max-width: 560px) {
    .laboratory-statistic.diagnostic-statistic-widget .diagnostic-chart-header {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }
    .laboratory-statistic.diagnostic-statistic-widget .diagnostic-chart-reading {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
        align-items: center;
        gap: 12px;
        text-align: left;
    }
    .laboratory-statistic .diagnostic-chart-reading > div { margin-top: 0; }
}
@container (max-width: 460px) {
    .laboratory-statistic .diagnostic-chart-insights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (max-width: 360px) {
    .laboratory-statistic.diagnostic-statistic-widget .diagnostic-chart-reading {
        grid-template-columns: minmax(0, 1fr);
        gap: 5px;
    }
    .laboratory-statistic .diagnostic-chart-reading > div { justify-content: flex-start; }
}

.laboratory-statistic.diagnostic-statistic-widget .diagnostic-chart-footer {
    flex: 0 0 auto;
    min-height: 45px;
    padding-top: 6px;
    padding-bottom: 7px;
}

.laboratory-statistic.diagnostic-statistic-widget .diagnostic-chart-stage {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--diagnostic-chart-color, #55ddd8) 4%, transparent), transparent 46%),
        rgba(7, 12, 16, .34);
}

.laboratory-statistic .diagnostic-chart-insights { flex: 0 0 auto; }
.laboratory-statistic.diagnostic-statistic-widget .chart-statistic-div {
    height: var(--laboratory-chart-height, 200px);
    min-height: var(--laboratory-chart-height, 200px);
    flex: 1 1 var(--laboratory-chart-height, 200px);
}

.laboratory-statistic.diagnostic-statistic-widget .diagnostic-chart-title > span {
    color: color-mix(in srgb, var(--diagnostic-chart-color, #55ddd8) 62%, #73838d);
}

.laboratory-statistic.diagnostic-statistic-widget .diagnostic-chart-expand {
    border-color: color-mix(in srgb, var(--diagnostic-chart-color, #55ddd8) 24%, transparent);
    color: color-mix(in srgb, var(--diagnostic-chart-color, #55ddd8) 72%, #cce5ee);
    background: color-mix(in srgb, var(--diagnostic-chart-color, #55ddd8) 8%, transparent);
}

.laboratory-workbench.is-compact .laboratory-chart-grid,
.laboratory-workbench.is-compact .laboratory-multi-sensor-errors {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.laboratory-workbench.is-compact .laboratory-statistic {
    font-size: .88em;
}

.laboratory-workbench.is-compact .laboratory-parameter-section {
    padding: 10px;
}

.laboratory-table-card,
.laboratory-error-zone {
    overflow: hidden;
    border: 1px solid rgba(128, 163, 181, .12);
    border-radius: 14px;
    background: rgba(5, 17, 24, .64);
}

.laboratory-table-heading,
.laboratory-error-heading {
    display: flex;
    min-height: 55px;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(128, 163, 181, .1);
}

.laboratory-table-heading strong,
.laboratory-error-heading strong {
    display: block;
    margin-top: 2px;
    color: #edf6f8;
    font-size: 11px;
}

.laboratory-table-hint {
    color: #657a86 !important;
    font-size: 8px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.laboratory-table-hint i { margin-right: 5px; color: #51d3d1; }
.laboratory-table-scroll { max-height: 430px; overflow: auto; }

.laboratory-table-card .widget-table {
    margin: 0;
    background: transparent;
    color: #bdcdd4;
    font-size: 10px;
}

.laboratory-table-card .widget-table thead th {
    position: sticky;
    z-index: 1;
    top: 0;
    padding: 10px 12px;
    border: 0;
    background: #0c202a;
    color: #708793;
    font-size: 8px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.laboratory-table-card .widget-table tbody td {
    padding: 8px 12px;
    border-top-color: rgba(128, 163, 181, .08);
}

.laboratory-table-card .widget-table tbody tr:hover {
    background: rgba(73, 208, 208, .06);
    color: #fff;
}

.laboratory-error-zone { margin-top: 10px; padding-bottom: 10px; }
.laboratory-error-heading { justify-content: flex-start; border-bottom: 0; }

.laboratory-workbench.is-favorites-mode .laboratory-table-card,
.laboratory-workbench.is-favorites-mode .laboratory-error-heading {
    display: none;
}

.laboratory-workbench.is-favorites-mode .laboratory-error-zone {
    margin-top: 0;
    border: 0;
    background: transparent;
}

.laboratory-error-heading > i {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 10px;
    background: rgba(112, 183, 255, .08);
    color: #70b7ff;
}

.laboratory-error-grid { padding: 0 10px; }

.water-outside-alarm {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    padding: 12px 15px;
    border: 1px solid rgba(255, 101, 116, .24);
    border-radius: 13px;
    background: rgba(255, 101, 116, .07);
}

.water-outside-alarm-icon {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 11px;
    background: rgba(255, 101, 116, .12);
    color: #ff7886;
}

.water-outside-alarm strong,
.water-outside-alarm label { display: block; margin: 0; }
.water-outside-alarm strong { color: #ff9ba5; font-size: 11px; }
.water-outside-alarm label { margin-top: 2px; color: #a97980; font-size: 9px; }

.laboratory-empty-filter {
    min-height: 280px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 7px;
    color: #617783;
    text-align: center;
}

.laboratory-empty-filter:not([hidden]) { display: flex; }
.laboratory-empty-filter > i { margin-bottom: 4px; color: #4ccecc; font-size: 30px; }
.laboratory-empty-filter strong { color: #e5f0f3; font-size: 14px; }
.laboratory-empty-filter span { font-size: 9px; }

.laboratory-empty-filter button {
    margin-top: 7px;
    padding: 8px 13px;
    border-radius: 9px;
    background: rgba(77, 214, 212, .11);
    color: #61dcda;
    font-size: 9px;
    font-weight: 700;
}

.laboratory-sensor-instance {
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(128, 163, 181, .10);
    border-radius: 16px;
    background:
        radial-gradient(circle at 0 0, rgba(85, 221, 216, .055), transparent 27%),
        rgba(7, 22, 29, .62);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .12);
}

.laboratory-sensor-instance-header {
    display: flex;
    min-height: 66px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 13px;
    border-bottom: 1px solid rgba(128, 163, 181, .08);
    line-height: 1.35;
}

.laboratory-sensor-instance-identity {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
}

.laboratory-sensor-instance-identity > div { min-width: 0; }

.laboratory-sensor-instance-icon {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    place-items: center;
    border: 1px solid rgba(85, 221, 216, .18);
    border-radius: 11px;
    background: rgba(85, 221, 216, .08);
    color: #61dcda;
    font-size: 14px;
}

.laboratory-sensor-instance-name {
    overflow: hidden;
    color: #e7f1f3;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.laboratory-sensor-instance-desc {
    overflow: hidden;
    margin-top: 2px;
    color: #728792;
    font-size: 8px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.laboratory-sensor-slot {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    padding: 7px 9px;
    border: 1px solid rgba(112, 169, 255, .16);
    border-radius: 9px;
    background: rgba(112, 169, 255, .07);
    color: #82b6e8;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.laboratory-sensor-parameters {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 10px;
}

.laboratory-workbench.is-compact .laboratory-sensor-parameters {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.laboratory-workbench.is-compact .laboratory-sensor-parameters:has(> .laboratory-statistic:nth-child(4)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.laboratory-sensor-instance .laboratory-statistic.diagnostic-statistic-widget .widget-parameter-with-chart {
    min-height: 392px;
}

.laboratory-multi-sensor-errors .laboratory-sensor-instance {
    height: 100%;
}

.laboratory-multi-sensor-errors .laboratory-sensor-parameters {
    grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 1199px) {
    .laboratory-snapshot,
    .laboratory-snapshot-group-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .laboratory-workbench.is-compact .laboratory-chart-grid,
    .laboratory-workbench.is-compact .laboratory-multi-sensor-errors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .laboratory-workbench.is-compact .laboratory-sensor-parameters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 850px) {
    .laboratory-shell { padding: 9px; }
    .laboratory-hero { align-items: flex-start; flex-direction: column; }
    .laboratory-live-status { width: 100%; min-width: 0; }
    .laboratory-command-deck { align-items: stretch; flex-direction: column; }
    .laboratory-time-control { align-items: stretch; justify-content: space-between; }
    .laboratory-primary-actions { justify-content: flex-end; }
    .laboratory-navigation { align-items: flex-start; flex-direction: column; gap: 7px; }
    .laboratory-navigation-copy { width: auto; flex-basis: auto; }
    .laboratory-tabs { width: 100%; }
    .laboratory-chart-grid,
    .laboratory-multi-sensor-errors,
    .laboratory-workbench.is-compact .laboratory-chart-grid,
    .laboratory-workbench.is-compact .laboratory-multi-sensor-errors { grid-template-columns: 1fr; }
    .laboratory-sensor-parameters,
    .laboratory-sensor-parameters:has(> .laboratory-statistic:nth-child(4)) {
        grid-template-columns: minmax(0, 1fr);
    }
    .laboratory-workbench.is-compact .laboratory-statistic-combined.is-multisensor-comparison {
        grid-column: 1 / -1;
    }
}

@media (min-width: 768px) and (max-width: 1100px) {
    .laboratory-explorer-heading p { display: none; }
    .laboratory-explorer-modes button { padding: 0 9px; font-size: 11px; white-space: nowrap; }
    .laboratory-explorer-body { grid-template-columns: 230px minmax(0, 1fr); }
    .laboratory-series-panel { padding: 10px; }
    .laboratory-explorer-toolbar { align-items: flex-start; flex-direction: column; gap: 8px; }
    .laboratory-explorer-summary { align-self: flex-end; }
}

@media (min-width: 768px) and (max-width: 950px) {
    .laboratory-explorer-header { align-items: stretch; flex-direction: column; gap: 10px; }
}

@media (max-width: 767.98px) {
    .laboratory-analysis-launcher,
    .laboratory-analyze,
    .laboratory-analysis-window { display: none !important; }
}

.laboratory-analysis-launcher[hidden],
.laboratory-analyze[hidden] { display: none !important; }

@media (max-width: 590px) {
    .laboratory-hero { min-height: 0; padding: 17px 15px; }
    .laboratory-hero-visual { width: 54px; height: 54px; flex-basis: 54px; border-radius: 17px; font-size: 21px; }
    .laboratory-hero-copy p { display: none; }
    .laboratory-snapshot { display: block; }
    .laboratory-snapshot > .laboratory-snapshot-card.sensors { margin-bottom: 8px; }
    .laboratory-snapshot-group + .laboratory-snapshot-group { margin-top: 8px; }
    .laboratory-snapshot-group-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
    .laboratory-snapshot-group-grid .laboratory-snapshot-card { min-width: 210px; scroll-snap-align: start; }
    .laboratory-snapshot-group-header small { display: none; }
    .laboratory-time-control { flex-direction: column; }
    .laboratory-time-heading { display: none; }
    .laboratory-period-navigator .period-selector { min-width: 0; flex: 1; }
    .laboratory-primary-actions .laboratory-action-button { flex: 1; justify-content: center; }
    .laboratory-analysis-tools { flex-wrap: wrap; }
    .laboratory-search { width: 100%; max-width: none; flex-basis: 100%; }
    .laboratory-result-count { margin-left: auto; }
    .laboratory-section-heading p,
    .laboratory-table-hint { display: none; }
    .laboratory-parameter-section { padding: 10px; }
    .laboratory-analysis-launcher { align-items: flex-start; flex-wrap: wrap; }
    .laboratory-analysis-launcher-copy { width: calc(100% - 66px); flex-basis: calc(100% - 66px); }
    .laboratory-analysis-launcher-copy p { display: none; }
    .laboratory-analysis-open { width: 100%; justify-content: center; }
    .laboratory-analysis-window-bar { padding-right: 9px; padding-left: 9px; }
    .laboratory-analysis-window-close span { display: none; }
    .laboratory-analysis-window > .laboratory-explorer { width: calc(100% - 12px); margin: 6px; }
    .laboratory-explorer { border-radius: 15px; }
    .laboratory-explorer-heading p { display: none; }
    .laboratory-explorer-heading h2 { font-size: 14px; }
    .laboratory-explorer-modes button span { display: none; }
    .laboratory-explorer-toolbar { align-items: flex-start; flex-direction: column; }
    .laboratory-explorer-summary { align-self: flex-end; }
    .laboratory-explorer-canvas { min-height: 315px; padding: 8px 5px 2px; }
    .laboratory-explorer-footer { align-items: flex-start; flex-direction: column; }
    .laboratory-statistic.diagnostic-statistic-widget .widget-parameter-with-chart { min-height: 470px; }
    .laboratory-statistic .diagnostic-chart-footer {
        align-items: stretch;
    }
    .laboratory-statistic .laboratory-widget-actions {
        width: 100%;
        margin-top: 4px;
        margin-left: 0;
    }
    .laboratory-statistic .laboratory-analyze { flex: 1; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .laboratory-hero-visual span,
    .laboratory-hero-visual b,
    .laboratory-live-status.live > i,
    .laboratory-parameter-section { animation: none !important; }
}

/*==================================================================================================
    Auto refresh, dynamic sections and the analytic explorer
==================================================================================================*/

.laboratory-autorefresh { position: relative; }
.laboratory-autorefresh b {
    min-width: 34px;
    padding: 2px 5px;
    border-radius: 999px;
    background: rgba(126, 164, 183, .12);
    color: #8ea3ad;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .04em;
    text-align: center;
}

.laboratory-autorefresh.is-active {
    border-color: rgba(84, 218, 215, .3);
    color: #a9efec;
}

.laboratory-autorefresh.is-active > i { color: #5ee0dd; }
.laboratory-autorefresh.is-active b { background: rgba(84, 218, 215, .14); color: #7fe3e0; }
.laboratory-autorefresh.is-paused > i,
.laboratory-autorefresh.is-paused b { color: #ffc857; }
.laboratory-autorefresh.is-paused b { background: rgba(255, 200, 87, .13); }
.laboratory-autorefresh:not(.is-active) { opacity: .62; }
.laboratory-autorefresh.is-syncing > i {
    animation: laboratory-auto-sync-pulse .8s ease-in-out infinite alternate;
}
.laboratory-autorefresh.is-syncing b {
    color: #a9d5f7;
    background: rgba(33, 150, 243, .13);
}

@keyframes laboratory-auto-sync-pulse {
    from { opacity: .48; filter: drop-shadow(0 0 0 rgba(101, 184, 255, 0)); }
    to { opacity: 1; filter: drop-shadow(0 0 6px rgba(101, 184, 255, .58)); }
}

@media (prefers-reduced-motion: reduce) {
    .laboratory-refresh-visual span,
    .laboratory-refresh-visual b,
    .laboratory-refresh-progress span,
    .laboratory-workbench.is-refreshing .laboratory-command-deck::after,
    .laboratory-workbench.is-refreshing .diagnostic-chart-stage::after,
    .widget-reload-all.is-loading > i,
    .laboratory-autorefresh.is-syncing > i {
        animation: none !important;
    }
}

.laboratory-live-status.is-updated {
    border-color: rgba(84, 218, 215, .35);
    animation: laboratory-live-flash .9s ease;
}

@keyframes laboratory-live-flash {
    0% { box-shadow: 0 0 0 0 rgba(84, 218, 215, .35); }
    100% { box-shadow: 0 0 0 12px rgba(84, 218, 215, 0); }
}

.laboratory-tab[hidden] { display: none !important; }

.laboratory-tab-count {
    display: grid;
    min-width: 19px;
    height: 19px;
    place-items: center;
    border-radius: 999px;
    background: rgba(126, 164, 183, .1);
    color: #7d939e;
    font-size: 9px;
    font-weight: 800;
}

.laboratory-tab.active .laboratory-tab-count { background: rgba(84, 218, 215, .14); color: #7fe3e0; }

/* Multi-sensor blocks are mounted straight into the category grid */
.laboratory-chart-grid > .laboratory-sensor-instance { grid-column: 1 / -1; }
.laboratory-sensor-instance[hidden] { display: none !important; }

/* ---------------------------------------- Series panel ---------------------------------------- */
.laboratory-series-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0 12px 9px;
}

.laboratory-series-category {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border: 1px solid rgba(126, 164, 183, .14);
    border-radius: 999px;
    background: rgba(4, 14, 20, .6);
    color: #a2b6c1;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    transition: 160ms ease;
}

.laboratory-series-category:hover { border-color: rgba(84, 218, 215, .26); color: #c2d6dc; }
.laboratory-series-category.is-active { border-color: rgba(84, 218, 215, .34); background: rgba(22, 62, 70, .7); color: #8feae7; }
.laboratory-series-category b { color: inherit; opacity: .75; }

/* ------------------------------------- Explorer settings bar ---------------------------------- */
.laboratory-explorer-settings {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    flex-shrink: 0;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(126, 164, 183, .08);
    background: rgba(4, 14, 20, .35);
}

.laboratory-explorer-navigation { display: contents; }
.laboratory-explorer-gestures { display: inline-flex; gap: 4px; }
.laboratory-explorer-settings .laboratory-explorer-zoom { order: 1; }
.laboratory-explorer-overlays { order: 2; }
.laboratory-explorer-settings .laboratory-explorer-exports { order: 3; margin-left: auto; }
.laboratory-explorer-overlays > summary {
    display: flex;
    min-height: 36px;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    border: 1px solid var(--analysis-border);
    border-radius: 8px;
    color: var(--analysis-text);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    list-style: none;
}
.laboratory-explorer-overlays > summary::-webkit-details-marker { display: none; }
.laboratory-explorer-overlays summary b { min-width: 18px; border-radius: 4px; background: var(--analysis-surface); text-align: center; }
.laboratory-explorer-overlays[open] summary > i:last-child { transform: rotate(180deg); }
.laboratory-explorer-overlay-options {
    position: absolute;
    z-index: 5;
    top: calc(100% + 8px);
    right: 14px;
    width: 380px;
    max-width: calc(100% - 28px);
    padding: 12px;
    border: 1px solid var(--analysis-border);
    border-radius: 10px;
    background: var(--analysis-surface);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .24);
}
.laboratory-explorer-overlays:not([open]) > .laboratory-explorer-overlay-options { display: none; }
.laboratory-explorer-overlay-options .laboratory-explorer-toggles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.laboratory-explorer-overlay-options .laboratory-explorer-window { margin-top: 10px; }
.laboratory-explorer-context {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 16px;
    padding: 8px 18px 0;
    color: var(--analysis-muted);
    font-size: 11px;
    line-height: 1.5;
}
.laboratory-explorer-range { font-variant-numeric: tabular-nums; }
.laboratory-explorer-range i { margin-right: 5px; }
.laboratory-explorer-range b { font-weight: 600; }
.laboratory-explorer-drag-hint { color: var(--analysis-text); }
.laboratory-explorer button:focus-visible,
.laboratory-explorer summary:focus-visible,
.laboratory-explorer select:focus-visible,
.laboratory-analysis-window-close:focus-visible { outline: 2px solid #56d6d3; outline-offset: 3px; }
.laboratory-series-search:focus-within { border-color: #56d6d3; }
.laboratory-series-option:disabled { opacity: .55; cursor: default; }
.laboratory-series-clear:disabled { opacity: .5; cursor: default; }

.laboratory-explorer-toggles {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-wrap: wrap;
    gap: 4px;
}

.laboratory-explorer-toggles button,
.laboratory-explorer-zoom button,
.laboratory-explorer-exports button,
.laboratory-explorer-gestures button {
    display: inline-flex;
    height: 36px;
    align-items: center;
    gap: 5px;
    padding: 0 9px;
    border: 1px solid rgba(126, 164, 183, .14);
    border-radius: 9px;
    background: rgba(6, 19, 26, .8);
    color: #b5c7d0;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    transition: 160ms ease;
}

.laboratory-explorer-toggles button:hover,
.laboratory-explorer-zoom button:hover,
.laboratory-explorer-exports button:hover,
.laboratory-explorer-gestures button:hover {
    border-color: rgba(84, 218, 215, .3);
    background: rgba(22, 62, 70, .78);
    color: #bff3f0;
}

.laboratory-explorer-zoom button:disabled,
.laboratory-explorer-exports button:disabled {
    opacity: .4;
    cursor: default;
}

.laboratory-explorer-toggles button.is-active,
.laboratory-explorer-exports button.is-active,
.laboratory-explorer-gestures button[aria-pressed="true"] {
    border-color: rgba(84, 218, 215, .36);
    background: rgba(30, 82, 88, .62);
    color: #8feae7;
}

.laboratory-explorer-window {
    display: inline-flex;
    height: 36px;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0 8px;
    border: 1px solid rgba(126, 164, 183, .14);
    border-radius: 9px;
    background: rgba(6, 19, 26, .8);
    color: #708791;
    font-size: 12px;
}

.laboratory-explorer-window[hidden] { display: none !important; }

.laboratory-explorer-window.is-disabled { opacity: .45; }
.laboratory-explorer-window i { color: #4ccfcd; }

.laboratory-explorer-window select {
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: #b8ccd3;
    font-size: 12px;
    font-weight: 700;
    outline: 0;
}

.laboratory-explorer-window select option { background: #0a1b24; color: #cfe2e7; }

.laboratory-explorer-zoom,
.laboratory-explorer-exports { display: inline-flex; gap: 4px; }

/* ---------------------------------------- Canvas + zoom --------------------------------------- */
.laboratory-explorer-canvas { cursor: crosshair; touch-action: pan-y; }
.laboratory-explorer-canvas canvas.is-pan-mode { cursor: grab; }
.laboratory-explorer-canvas canvas.is-dragging { cursor: grabbing; }

.laboratory-explorer-zoom-badge {
    position: absolute;
    z-index: 3;
    top: 16px;
    right: 20px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 8px;
    border: 1px solid rgba(84, 218, 215, .26);
    border-radius: 999px;
    background: rgba(4, 15, 21, .92);
    color: #8feae7;
    font-size: 11px;
    font-weight: 700;
}

.laboratory-explorer-zoom-badge[hidden] { display: none !important; }

.laboratory-explorer-zoom-badge button {
    padding: 2px 7px;
    border: 0;
    border-radius: 999px;
    background: rgba(84, 218, 215, .16);
    color: #b6f3f0;
    cursor: pointer;
    font-size: 11px;
    font-weight: 800;
}

.laboratory-explorer-legend-item {
    min-height: 32px;
    padding: 5px 8px;
    border: 1px solid var(--analysis-border);
    border-radius: 6px;
    background: rgba(83, 137, 155, .055);
    cursor: pointer;
    transition: 160ms ease;
}
.laboratory-legend-visibility { margin-left: 3px; color: var(--analysis-muted); font-size: 11px; }

.laboratory-explorer-legend-item:hover { color: #d7e8ec; }
.laboratory-explorer-legend-item.is-hidden { opacity: .65; text-decoration: line-through; }

/* ------------------------------------------- Insights ----------------------------------------- */
.laboratory-explorer-insights {
    display: flex;
    max-height: 220px;
    flex-shrink: 0;
    flex-direction: column;
    gap: 8px;
    padding: 9px 14px 11px;
    border-top: 1px solid rgba(126, 164, 183, .08);
    background: rgba(4, 14, 20, .35);
}

.laboratory-explorer-insights.is-hidden { display: none; }
.laboratory-insights-scroll { min-height: 0; overflow: auto; }

.laboratory-insights-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #a2b6c1;
    font-size: 12px;
    font-weight: 700;
}

.laboratory-insights-heading i { margin-right: 5px; color: #4ccfcd; }

.laboratory-insights-scope {
    padding: 2px 7px;
    border: 1px solid rgba(126, 164, 183, .16);
    border-radius: 999px;
    color: #7f959f;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.laboratory-insights-scope.is-windowed {
    border-color: rgba(84, 218, 215, .34);
    background: rgba(22, 62, 70, .7);
    color: #8feae7;
}

.laboratory-insights-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.laboratory-insights-table thead th {
    position: sticky;
    top: 0;
    padding: 8px;
    border-bottom: 1px solid rgba(126, 164, 183, .12);
    background: rgba(7, 21, 28, .97);
    color: #a2b6c1;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
    text-align: right;
    text-transform: uppercase;
    white-space: nowrap;
}

.laboratory-insights-table thead th:first-child { text-align: left; }

.laboratory-insights-table tbody th {
    min-width: 160px;
    padding: 8px;
    color: #cfe0e5;
    font-size: 12px;
    font-weight: 700;
    text-align: left;
}

.laboratory-insights-table tbody th i {
    display: inline-block;
    width: 9px;
    height: 3px;
    flex: 0 0 9px;
    border-radius: 999px;
    margin: 0 6px 3px 0;
}

.laboratory-insights-table tbody td {
    padding: 8px;
    border-top: 1px solid rgba(126, 164, 183, .06);
    color: #b5c7d0;
    text-align: right;
    white-space: nowrap;
}

.laboratory-insights-table tbody tr { transition: 140ms ease; }
.laboratory-insights-table tbody tr:hover { background: rgba(84, 218, 215, .05); }
.laboratory-insights-table tbody tr.is-hidden { opacity: .4; }
.laboratory-insights-table tbody td strong { color: #e6f2f4; }
.laboratory-insights-table tbody td.is-up { color: #5fdca4; }
.laboratory-insights-table tbody td.is-down { color: #ff8997; }

.laboratory-insights-correlation[hidden] { display: none !important; }
.laboratory-insights-correlation { max-height: 100px; overflow: auto; flex-shrink: 0; }
.laboratory-insights-correlation:not([open]) .laboratory-insights-correlation-body { display: none; }
.laboratory-insights-correlation[open] summary > i:last-child { transform: rotate(180deg); }

.laboratory-insights-correlation-heading {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 5px;
    color: #a2b6c1;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
.laboratory-insights-correlation-heading::-webkit-details-marker { display: none; }

.laboratory-insights-correlation-heading i { color: #4ccfcd; }
.laboratory-insights-correlation-body { display: flex; flex-wrap: wrap; gap: 5px; }

.laboratory-correlation-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border: 1px solid rgba(126, 164, 183, .14);
    border-radius: 999px;
    background: rgba(6, 19, 26, .8);
    color: #b5c7d0;
    font-size: 11px;
    font-weight: 700;
}

.laboratory-correlation-chip i {
    width: 8px;
    height: 3px;
    border-radius: 999px;
}

.laboratory-correlation-chip em { color: #56707d; font-style: normal; }
.laboratory-correlation-chip b { color: #cfe0e5; }
.laboratory-correlation-chip.is-strong { border-color: rgba(95, 220, 164, .3); }
.laboratory-correlation-chip.is-strong b { color: #5fdca4; }
.laboratory-correlation-chip.is-medium { border-color: rgba(255, 200, 87, .24); }
.laboratory-correlation-chip.is-medium b { color: #ffc857; }
.laboratory-correlation-chip.is-weak { opacity: .75; }

/* The explorer window has to fit the settings bar and the statistics without growing */
.laboratory-analysis-window .laboratory-explorer-plot { overflow: auto; }
.laboratory-analysis-window .laboratory-explorer-canvas { min-height: 180px; }
.laboratory-analysis-window .laboratory-explorer-insights { max-height: 33%; }

/* ---------------------------------------- Native CSV export window ---------------------------------------- */
body.laboratory-export-window-open { overflow: hidden !important; }

.laboratory-export-window {
    position: fixed;
    inset: 0;
    z-index: 12140;
    display: grid;
    place-items: center;
    padding: calc(12px + var(--safe-top, 0px)) calc(12px + var(--safe-right, 0px)) calc(12px + var(--safe-bottom, 0px)) calc(12px + var(--safe-left, 0px));
}

.laboratory-export-window[hidden] { display: none !important; }

.laboratory-export-backdrop {
    position: absolute;
    inset: 0;
    opacity: 0;
    background: rgba(2, 8, 13, .78);
    backdrop-filter: blur(13px) saturate(.76);
    transition: opacity .22s ease;
}

.laboratory-export-sheet {
    position: relative;
    z-index: 1;
    width: min(1240px, 100%);
    height: min(850px, calc(100dvh - 24px - var(--safe-top, 0px) - var(--safe-bottom, 0px)));
    min-height: 0;
    display: flex;
    overflow: hidden;
    border: 1px solid rgba(101, 184, 255, .2);
    border-radius: 22px;
    opacity: 0;
    background:
        radial-gradient(circle at 91% 0, rgba(33, 150, 243, .1), transparent 30%),
        linear-gradient(145deg, #172129, #0d1419);
    box-shadow: 0 35px 90px rgba(0, 0, 0, .48);
    transform: translateY(18px) scale(.985);
    transition: opacity .22s ease, transform .26s cubic-bezier(.22, .78, .24, 1);
    flex-direction: column;
}

.laboratory-export-window.is-open .laboratory-export-backdrop { opacity: 1; }
.laboratory-export-window.is-open .laboratory-export-sheet { opacity: 1; transform: translateY(0) scale(1); }

.laboratory-export-header,
.laboratory-export-footer {
    position: relative;
    z-index: 2;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    background: rgba(12, 22, 28, .88);
    backdrop-filter: blur(16px);
}

.laboratory-export-header {
    min-height: 84px;
    padding: 12px 15px;
    border-bottom: 1px solid rgba(143, 184, 220, .13);
}

.laboratory-export-heading { display: flex; min-width: 0; align-items: center; gap: 12px; }
.laboratory-export-icon {
    display: grid;
    width: 45px;
    height: 45px;
    flex: 0 0 45px;
    place-items: center;
    border: 1px solid rgba(85, 221, 216, .22);
    border-radius: 13px;
    color: #66deda;
    background: rgba(85, 221, 216, .09);
    font-size: 18px;
}

.laboratory-export-heading > div { min-width: 0; }
.laboratory-export-heading > div > span { color: #68a9cc; font-size: 8px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.laboratory-export-heading h2 { margin: 1px 0 0; color: #eff8fb; font-size: 17px; font-weight: 800; }
.laboratory-export-heading p { margin: 2px 0 0; color: #738995; font-size: 9px; }

.laboratory-export-close {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    place-items: center;
    border: 1px solid rgba(126, 164, 183, .16);
    border-radius: 10px;
    color: #8096a1;
    background: rgba(255, 255, 255, .035);
    cursor: pointer;
    transition: 160ms ease;
}
.laboratory-export-close:hover { border-color: rgba(255, 113, 132, .28); color: #ff8797; background: rgba(255, 113, 132, .08); }

.laboratory-export-content { min-height: 0; flex: 1 1 auto; padding: 10px; overflow: hidden; }
.export-csv-tool { height: 100%; min-height: 0; display: grid; grid-template-columns: 405px minmax(0, 1fr); gap: 10px; color: #d7e4e9; }
.laboratory-export-settings { min-height: 0; overflow-y: auto; padding-right: 3px; }

.laboratory-export-card,
.laboratory-export-columns {
    border: 1px solid rgba(128, 163, 181, .12);
    border-radius: 14px;
    background: rgba(10, 22, 29, .72);
}

.laboratory-export-card { padding: 12px; }
.laboratory-export-card + .laboratory-export-card { margin-top: 8px; }
.laboratory-export-card > header,
.laboratory-export-columns > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.laboratory-export-card > header > div { display: flex; align-items: center; gap: 7px; color: #eaf3f6; font-size: 10px; font-weight: 800; }
.laboratory-export-card > header i { color: #68bddf; }
.laboratory-export-card > header b,
.laboratory-export-columns > header b { padding: 4px 7px; border-radius: 99px; color: #7adbd8; background: rgba(85, 221, 216, .1); font-size: 7px; text-transform: uppercase; }

.laboratory-export-available { margin: 7px 0 10px; color: #6f858f; font-size: 8px; }
.laboratory-export-available i { margin-right: 5px; color: #527b90; }
.laboratory-export-range-grid,
.laboratory-export-format-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.laboratory-export-format-grid .export-file-format { grid-column: 1 / -1; }
.laboratory-export-format-grid label[hidden] { display: none; }
.laboratory-export-complete { display: flex; align-items: center; gap: 8px; margin-top: 12px; color: #E8F3FB; font-family: Geist, "Segoe UI", Arial, sans-serif; font-size: 12px; }
.laboratory-export-window .laboratory-export-complete input { width: 16px; height: 16px; flex: 0 0 16px; padding: 0; accent-color: #0F6DB3; }
html[data-theme="light"] .laboratory-export-complete { color: #4A5B6E; }
.laboratory-export-format-grid label:last-child { grid-column: 1 / -1; }
.laboratory-export-range-grid label,
.laboratory-export-format-grid label { margin: 0; }
.laboratory-export-range-grid label > span,
.laboratory-export-format-grid label > span { display: block; margin: 0 0 4px 2px; color: #718791; font-size: 8px; font-weight: 700; }

.laboratory-export-window input,
.laboratory-export-window select {
    width: 100%;
    height: 34px;
    padding: 5px 9px;
    border: 1px solid rgba(126, 164, 183, .15);
    border-radius: 9px;
    outline: 0;
    color: #dce9ed;
    background: #0a1921;
    font: 700 9px var(--wl-font-sans, "Geist", "Segoe UI", Arial, sans-serif);
    color-scheme: dark;
}
.laboratory-export-range-grid input + input { margin-top: 5px; }
.laboratory-export-window input:focus,
.laboratory-export-window select:focus { border-color: rgba(85, 221, 216, .42); box-shadow: 0 0 0 3px rgba(85, 221, 216, .07); }

.export-presets,
.laboratory-export-quick-actions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.export-presets button,
.laboratory-export-quick-actions button {
    min-height: 27px;
    padding: 0 8px;
    border: 1px solid rgba(126, 164, 183, .14);
    border-radius: 8px;
    color: #8097a2;
    background: rgba(255, 255, 255, .025);
    cursor: pointer;
    font-size: 7px;
    font-weight: 800;
    transition: 150ms ease;
}
.export-presets button:hover,
.laboratory-export-quick-actions button:hover { border-color: rgba(85, 221, 216, .28); color: #a9efec; background: rgba(85, 221, 216, .07); }
.export-presets button i,
.laboratory-export-quick-actions button i { margin-right: 5px; }

.export-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.export-summary article { position: relative; min-width: 0; padding: 9px; overflow: hidden; border: 1px solid rgba(126, 164, 183, .09); border-radius: 10px; background: rgba(5, 14, 20, .56); }
.export-summary article i { position: absolute; right: 8px; top: 8px; color: #476778; font-size: 9px; }
.export-summary article span { display: block; color: #657c87; font-size: 7px; font-weight: 800; text-transform: uppercase; }
.export-summary article strong { display: block; overflow: hidden; margin-top: 2px; color: #edf7fa; font-size: 15px; white-space: nowrap; text-overflow: ellipsis; }
.export-validation { min-height: 16px; padding: 5px 3px 0; color: #ff8797; font-size: 8px; }

.laboratory-export-columns { min-height: 0; height: 100%; display: flex; padding: 12px; flex-direction: column; overflow: hidden; }
.laboratory-export-columns > header > div span,
.laboratory-export-columns > header > div strong { display: block; }
.laboratory-export-columns > header > div span { color: #68a9cc; font-size: 7px; font-weight: 800; text-transform: uppercase; }
.laboratory-export-columns > header > div strong { margin-top: 1px; color: #eef7fa; font-size: 12px; }
.laboratory-export-search { position: relative; display: block; flex: 0 0 auto; margin: 10px 0 0; }
.laboratory-export-search i { position: absolute; left: 11px; top: 50%; z-index: 1; color: #5f7783; font-size: 9px; transform: translateY(-50%); }
.laboratory-export-search input { padding-left: 31px; }
.laboratory-export-quick-actions { flex: 0 0 auto; margin-top: 7px; }

.export-columns-list { min-height: 180px; flex: 1 1 auto; margin-top: 8px; overflow-x: hidden; overflow-y: auto; border: 1px solid rgba(126, 164, 183, .1); border-radius: 11px; background: rgba(4, 12, 17, .48); -webkit-overflow-scrolling: touch; }
.export-column-row { display: flex; min-height: 53px; align-items: center; gap: 10px; margin: 0; padding: 8px 10px; border-bottom: 1px solid rgba(126, 164, 183, .07); cursor: pointer; transition: background .14s ease; }
.export-column-row.is-export-hidden,
.export-column-row[hidden] { display: none !important; }
.export-column-row:last-child { border-bottom: 0; }
.export-column-row:hover { background: rgba(85, 221, 216, .045); }
.laboratory-export-check { position: relative; display: grid; width: 20px; height: 20px; flex: 0 0 20px; place-items: center; border: 1px solid rgba(126, 164, 183, .25); border-radius: 6px; color: transparent; background: rgba(255, 255, 255, .025); font-size: 8px; }
.laboratory-export-check input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.laboratory-export-check:has(input:checked) { border-color: rgba(85, 221, 216, .45); color: #86e5e2; background: rgba(85, 221, 216, .13); }
.laboratory-export-column-copy { min-width: 0; flex: 1 1 auto; }
.laboratory-export-column-copy strong,
.laboratory-export-column-copy small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.laboratory-export-column-copy strong { color: #dfecef; font-size: 9px; }
.laboratory-export-column-copy strong small { display: inline; margin-left: 4px; color: #718792; font-size: 7px; }
.laboratory-export-column-copy > small { margin-top: 2px; color: #58717e; font-size: 7px; }
.laboratory-export-points { min-width: 38px; padding: 4px 6px; border-radius: 99px; color: #647b86; background: rgba(126, 164, 183, .08); font-size: 7px; font-weight: 800; text-align: center; }
.laboratory-export-points.has-data { color: #7bdedb; background: rgba(85, 221, 216, .1); }
.laboratory-export-empty { min-height: 180px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 5px; color: #607985; font-size: 8px; }
.laboratory-export-empty i { margin-bottom: 3px; color: #51869e; font-size: 22px; }
.laboratory-export-empty strong { color: #b8cbd2; font-size: 11px; }

.laboratory-export-footer { min-height: 62px; padding: 9px 13px; border-top: 1px solid rgba(143, 184, 220, .13); }
.laboratory-export-feedback { display: flex; min-width: 0; align-items: center; gap: 7px; color: #7d939e; font-size: 8px; }
.laboratory-export-feedback i { flex: 0 0 auto; color: #68a9cc; }
.laboratory-export-feedback span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.laboratory-export-feedback.is-error { color: #e49ba5; }
.laboratory-export-feedback.is-error i { color: #ff7184; }
.laboratory-export-feedback.is-success { color: #93d5b6; }
.laboratory-export-feedback.is-success i { color: #58d99a; }
.laboratory-export-footer-actions { display: flex; flex: 0 0 auto; gap: 7px; }
.laboratory-export-cancel,
.laboratory-export-submit { min-height: 36px; padding: 0 13px; border-radius: 10px; cursor: pointer; font-size: 9px; font-weight: 800; }
.laboratory-export-cancel { border: 1px solid rgba(126, 164, 183, .15); color: #8499a3; background: rgba(255, 255, 255, .025); }
.laboratory-export-submit { border: 1px solid rgba(85, 221, 216, .24); color: #fff; background: linear-gradient(135deg, #168d95, #1b6ca2); box-shadow: 0 8px 20px rgba(17, 105, 142, .2); }
.laboratory-export-submit i { margin-right: 6px; }
.laboratory-export-submit:hover { filter: brightness(1.1); transform: translateY(-1px); }
.laboratory-export-window.is-exporting button { cursor: wait; }
.laboratory-export-working { position: absolute; inset: 0 0 auto; z-index: 8; height: 3px; overflow: hidden; opacity: 0; pointer-events: none; }
.laboratory-export-working span { position: absolute; left: -38%; width: 38%; height: 100%; border-radius: 99px; background: linear-gradient(90deg, transparent, #2196f3, #20c997, transparent); animation: laboratory-refresh-progress 1.25s ease-in-out infinite; }
.laboratory-export-window.is-exporting .laboratory-export-working { opacity: 1; }

.laboratory-export-no-data {
    min-height: 360px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 48px 24px;
    text-align: center;
    color: var(--lab-text-soft, #9cb1bb);
}

.laboratory-export-no-data > span {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(85, 221, 216, .2);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(85, 221, 216, .14), rgba(85, 221, 216, .035));
    color: #55ddd8;
    font-size: 25px;
    box-shadow: 0 18px 46px rgba(0, 0, 0, .22);
}

.laboratory-export-no-data strong { color: #effcff; font-size: 18px; }
.laboratory-export-no-data p { max-width: 430px; margin: 0; line-height: 1.6; }

@media (max-width: 850px) {
    .laboratory-export-window { padding: calc(6px + var(--safe-top, 0px)) calc(6px + var(--safe-right, 0px)) calc(6px + var(--safe-bottom, 0px)) calc(6px + var(--safe-left, 0px)); }
    .laboratory-export-sheet { width: 100%; height: calc(100dvh - 12px - var(--safe-top, 0px) - var(--safe-bottom, 0px)); border-radius: 16px; }
    .laboratory-export-heading p { display: none; }
    .laboratory-export-content { overflow-y: auto; }
    .export-csv-tool { height: auto; grid-template-columns: minmax(0, 1fr); }
    .laboratory-export-settings { overflow: visible; padding: 0; }
    .laboratory-export-columns { min-height: 520px; }
}

@media (max-width: 590px) {
    .laboratory-export-header { min-height: 70px; }
    .laboratory-export-icon { width: 38px; height: 38px; flex-basis: 38px; }
    .laboratory-export-heading h2 { font-size: 14px; }
    .laboratory-export-range-grid,
    .laboratory-export-format-grid { grid-template-columns: minmax(0, 1fr); }
    .laboratory-export-format-grid label:last-child { grid-column: auto; }
    .laboratory-export-footer { align-items: stretch; flex-direction: column; }
    .laboratory-export-feedback { min-height: 20px; }
    .laboratory-export-footer-actions { width: 100%; }
    .laboratory-export-cancel,
    .laboratory-export-submit { flex: 1; }
}

@media (max-width: 850px) {
    .laboratory-explorer-settings { gap: 8px 6px; }
}

@media (max-width: 590px) {
    .laboratory-explorer-toggles button span { display: none; }
    .laboratory-explorer-toggles button { justify-content: center; flex: 1; }
    .laboratory-explorer-help { display: none; }
    .laboratory-autorefresh span { display: none; }
}

/* Notifications threshold manager */
body.laboratory-alerting-open { overflow: hidden; }
.laboratory-alerting-window { position: fixed; inset: 0; z-index: 10080; display: grid; place-items: center; padding: 24px; }
.laboratory-alerting-window[hidden] { display: none !important; }
.laboratory-alerting-backdrop { position: absolute; inset: 0; background: rgba(1, 10, 15, .78); backdrop-filter: blur(7px); }
.laboratory-alerting-sheet { position: relative; display: flex; flex-direction: column; width: min(980px, 100%); max-height: min(820px, calc(100vh - 48px)); overflow: hidden; border: 1px solid rgba(111, 213, 211, .2); border-radius: 22px; background: #07171f; color: #eaf8fb; box-shadow: 0 28px 90px rgba(0,0,0,.55); }
.laboratory-alerting-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 25px 28px 18px; background: linear-gradient(135deg, rgba(40, 199, 191, .13), rgba(40, 104, 150, .06)); }
.laboratory-alerting-header span { color: #55ddd8; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.laboratory-alerting-header h2 { margin: 5px 0 3px; font-size: 25px; }
.laboratory-alerting-header p { margin: 0; color: #8ca7b2; }
.laboratory-alerting-close { width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; background: rgba(255,255,255,.04); color: #dbeef3; }
.laboratory-alerting-tabs { display: flex; gap: 5px; padding: 0 28px; border-bottom: 1px solid rgba(255,255,255,.08); }
.laboratory-alerting-tabs button { padding: 14px 18px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #78929d; font-weight: 700; }
.laboratory-alerting-tabs button.active { border-color: #55ddd8; color: #eaf8fb; }
.laboratory-alerting-tabs b { margin-left: 6px; padding: 2px 7px; border-radius: 10px; background: rgba(85,221,216,.12); color: #55ddd8; font-size: 11px; }
.laboratory-alerting-content { min-height: 360px; overflow: auto; padding: 24px 28px 30px; }
.laboratory-threshold-addbar, .laboratory-alarm-filters { display: flex; align-items: end; gap: 12px; margin-bottom: 20px; padding: 15px; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; background: rgba(255,255,255,.025); }
.laboratory-threshold-addbar label { flex: 1; }
.laboratory-threshold-addbar label > span, .laboratory-alarm-filters label:not(.laboratory-alerting-open-label) { display: grid; gap: 7px; color: #8da5af; font-size: 12px; font-weight: 700; }
.laboratory-threshold-addbar select, .laboratory-alarm-filters select { border-color: rgba(255,255,255,.11); background-color: #0d222b; color: #eaf8fb; }
.laboratory-threshold-add, .laboratory-alerting-refresh { min-height: 38px; padding: 0 16px; border: 0; border-radius: 9px; background: #36c7c0; color: #062027; font-weight: 800; }
.laboratory-threshold-add:disabled { opacity: .4; }
.laboratory-threshold-list, .laboratory-alarm-history { display: grid; gap: 10px; }
.laboratory-threshold-row, .laboratory-alarm-row { display: grid; grid-template-columns: auto minmax(0,1fr) auto auto auto; align-items: center; gap: 14px; padding: 15px 17px; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; background: rgba(255,255,255,.025); }
.laboratory-threshold-row.is-inactive { opacity: .64; }
.laboratory-threshold-state { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: rgba(85,221,216,.12); color: #55ddd8; }
.laboratory-threshold-row.is-inactive .laboratory-threshold-state { background: rgba(255,255,255,.07); color: #78909a; }
.laboratory-threshold-copy { display: grid; gap: 2px; }
.laboratory-threshold-copy small, .laboratory-alarm-row small { color: #708b96; font-size: 11px; }
.laboratory-threshold-copy > div { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.laboratory-threshold-copy > div span { padding: 3px 7px; border-radius: 7px; background: rgba(255,184,92,.08); color: #efbd78; font-size: 11px; }
.laboratory-threshold-copy > div span.alarm { background: rgba(255,101,116,.09); color: #ff8997; }
.laboratory-threshold-toggle { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.laboratory-threshold-toggle input { position: absolute; opacity: 0; }
.laboratory-threshold-toggle span { position: relative; width: 35px; height: 20px; border-radius: 20px; background: #324852; }
.laboratory-threshold-toggle span:after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #b5c6cc; transition: .18s; }
.laboratory-threshold-toggle input:checked + span { background: #278e8a; }
.laboratory-threshold-toggle input:checked + span:after { left: 18px; background: #eafffe; }
.laboratory-threshold-toggle em { color: #92a8b1; font-size: 11px; font-style: normal; }
.laboratory-threshold-edit, .laboratory-threshold-delete { width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.09); border-radius: 9px; background: transparent; color: #91aab4; }
.laboratory-threshold-delete { color: #e88792; }
.laboratory-alerting-empty { display: grid; place-items: center; gap: 5px; min-height: 230px; color: #718d98; text-align: center; }
.laboratory-alerting-empty[hidden] { display: none; }
.laboratory-alerting-empty i { margin-bottom: 8px; color: #3f6972; font-size: 38px; }
.laboratory-alerting-empty strong { color: #c7dce2; }
.laboratory-alarm-filters { align-items: center; }
.laboratory-alarm-filters > label:first-child { width: 180px; }
.laboratory-alerting-open-label { margin-left: auto; color: #a9bec5; }
.laboratory-alarm-row { grid-template-columns: auto minmax(0,1fr) auto; }
.laboratory-alarm-row > i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,184,92,.11); color: #ffb85c; }
.laboratory-alarm-row.is-alarm > i { background: rgba(255,101,116,.12); color: #ff6574; }
.laboratory-alarm-row.is-resolved > i { background: rgba(88,217,154,.11); color: #58d99a; }
.laboratory-alarm-row > div { display: grid; gap: 2px; }
.laboratory-alarm-row span { color: #90a8b1; font-size: 12px; }
.laboratory-alarm-value { text-align: right; }
.laboratory-alarm-history.is-loading,
.laboratory-active-alarms.is-loading { min-height: 120px; opacity: .35; }

@media (max-width: 700px) {
	.laboratory-alerting-window { align-items: end; padding: 0; }
	.laboratory-alerting-sheet { max-height: 94vh; border-radius: 22px 22px 0 0; }
	.laboratory-alerting-header, .laboratory-alerting-content { padding-left: 18px; padding-right: 18px; }
	.laboratory-alerting-tabs { padding: 0 18px; }
	.laboratory-threshold-addbar, .laboratory-alarm-filters { align-items: stretch; flex-direction: column; }
	.laboratory-threshold-row { grid-template-columns: auto 1fr auto; }
	.laboratory-threshold-toggle { grid-column: 2; }
	.laboratory-threshold-edit, .laboratory-threshold-delete { grid-row: 1; }
	.laboratory-threshold-edit { grid-column: 3; }
	.laboratory-threshold-delete { grid-column: 3; grid-row: 2; }
}

/* Alarmowanie jest zwykłą kategorią Laboratorium, nie warstwą modalną. */
body.laboratory-alerting-open { overflow: auto; }
.laboratory-alerting-window {
	position: relative;
	inset: auto;
	z-index: auto;
	display: block;
	width: 100%;
	padding: 12px;
}
.laboratory-alerting-window[hidden] { display: none !important; }
.laboratory-alerting-sheet {
	width: 100%;
	max-height: none;
	margin: 0 auto;
	border-radius: 18px;
	box-shadow: none;
}
.laboratory-alerting-backdrop, .laboratory-alerting-close { display: none !important; }
.laboratory-workbench[data-lab-active-section="alerting"] .laboratory-analysis-launcher,
.laboratory-workbench[data-lab-active-section="alerting"] .laboratory-analysis-tools,
.laboratory-workbench[data-lab-active-section="alerting"] .laboratory-analysis-stage { display: none !important; }

/* Stan progów na kafelkach Przeglądu. */
.laboratory-snapshot-alert {
	position: absolute;
	top: 9px;
	right: 9px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 7px;
	border-radius: 999px;
	background: rgba(255, 184, 92, .14);
	color: #ffbd66;
	font-size: 7px;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.laboratory-snapshot-alert[hidden] { display: none !important; }
.laboratory-snapshot-card.has-warning {
    border-color: rgba(255, 184, 92, .24);
}
.laboratory-snapshot-card.has-alarm {
    border-color: rgba(255, 101, 116, .28);
}
.laboratory-snapshot-card.has-alarm small[data-lab-kpi-note] { color: #e49aa3; }
.laboratory-snapshot-card.has-warning small[data-lab-kpi-note] { color: #dcb982; }
.laboratory-snapshot-card .laboratory-snapshot-bell[data-alarm-state="alarm"],
.laboratory-snapshot-card .laboratory-snapshot-bell[data-alarm-state="warning"] {
    border-color: transparent;
    border-radius: 50%;
    background: rgba(255, 101, 116, .10);
}
.laboratory-snapshot-card .laboratory-snapshot-bell[data-alarm-state="warning"] {
    background: rgba(255, 184, 92, .10);
}

/* Prosty widok kategorii Alarmowanie. */
.laboratory-alerting-window { padding: 12px 12px 28px; }
.laboratory-alerting-sheet {
	max-width: none;
	overflow: visible;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: #dceaf0;
}
.laboratory-alerting-header {
	display: grid;
	grid-template-columns: 42px minmax(0, 1fr);
	align-items: center;
	gap: 13px;
	padding: 16px 18px;
	border: 1px solid rgba(116, 172, 193, .14);
	border-radius: 15px;
	background: linear-gradient(120deg, rgba(17, 48, 58, .76), rgba(8, 28, 37, .82));
}
.laboratory-alerting-header-icon {
	display: grid;
	width: 42px;
	height: 42px;
	place-items: center;
	border-radius: 12px;
	background: rgba(85, 221, 216, .11);
	color: #55ddd8 !important;
	font-size: 15px !important;
}
.laboratory-alerting-header-copy { min-width: 0; }
.laboratory-alerting-header-copy > span {
	display: block;
	margin-bottom: 2px;
	color: #66d8d4;
	font-size: 8px;
	font-weight: 800;
	letter-spacing: .09em;
	text-transform: uppercase;
}
.laboratory-alerting-header h2 {
	margin: 0;
	color: #eaf5f7;
	font-size: 17px;
	font-weight: 750;
	letter-spacing: -.015em;
}
.laboratory-alerting-header p {
	margin: 3px 0 0;
	color: #7f99a4;
	font-size: 10px;
}
.laboratory-alerting-tabs {
	display: grid;
	width: 100%;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 3px;
	margin-top: 10px;
	padding: 4px;
	border: 1px solid rgba(116, 172, 193, .12);
	border-radius: 11px;
	background: rgba(7, 24, 32, .78);
}
.laboratory-alerting-tabs button {
	display: flex;
	height: 34px;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 0 12px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: #718b96;
	font-size: 9px;
	font-weight: 750;
}
.laboratory-alerting-tabs button:hover { color: #c4d8de; }
.laboratory-alerting-tabs button.active {
	background: rgba(63, 193, 189, .11);
	box-shadow: inset 0 0 0 1px rgba(85, 221, 216, .09);
	color: #dff8f7;
}
.laboratory-alerting-tabs button.active i { color: #55ddd8; }
.laboratory-alerting-tabs b {
	display: grid;
	min-width: 17px;
	height: 17px;
	margin: 0;
	padding: 0 5px;
	place-items: center;
	border-radius: 999px;
	background: rgba(116, 172, 193, .09);
	color: #7896a1;
	font-size: 7px;
}
.laboratory-alerting-tabs button.active b { background: rgba(85, 221, 216, .13); color: #6ce2de; }
.laboratory-alerting-content {
	min-height: 0;
	overflow: visible;
	padding: 10px 0 0;
}
.laboratory-alerting-pane { width: 100%; }
.laboratory-alerting-scope {
	display: flex;
	min-height: 52px;
	align-items: center;
	gap: 11px;
	margin-bottom: 9px;
	padding: 9px 13px;
	border: 1px solid rgba(116, 172, 193, .12);
	border-radius: 12px;
	background: rgba(10, 31, 40, .58);
}
.laboratory-alerting-scope > i {
	display: grid;
	width: 30px;
	height: 30px;
	flex: 0 0 30px;
	place-items: center;
	border-radius: 9px;
	background: rgba(85, 221, 216, .09);
	color: #55ddd8;
	font-size: 10px;
}
.laboratory-alerting-scope strong,
.laboratory-alerting-scope span { display: block; }
.laboratory-alerting-scope strong { color: #d0e3e8; font-size: 10px; }
.laboratory-alerting-scope span { margin-top: 2px; color: #718d98; font-size: 8px; }
.laboratory-active-alarms { display: grid; gap: 8px; }
.laboratory-active-alarm-card {
	display: grid;
	grid-template-columns: auto minmax(220px, 1fr) minmax(120px, auto) minmax(120px, auto);
	align-items: center;
	gap: 16px;
	min-height: 76px;
	padding: 12px 16px;
	border: 1px solid rgba(255, 184, 92, .2);
	border-left: 3px solid #ffb85c;
	border-radius: 12px;
	background: linear-gradient(90deg, rgba(75, 51, 20, .22), rgba(9, 29, 38, .68) 24%);
}
.laboratory-active-alarm-card.is-alarm {
	border-color: rgba(255, 101, 116, .22);
	border-left-color: #ff6574;
	background: linear-gradient(90deg, rgba(91, 27, 38, .24), rgba(9, 29, 38, .68) 24%);
}
.laboratory-active-alarm-icon {
	display: grid;
	width: 38px;
	height: 38px;
	place-items: center;
	border-radius: 11px;
	background: rgba(255, 184, 92, .11);
	color: #ffbd66;
}
.laboratory-active-alarm-card.is-alarm .laboratory-active-alarm-icon { background: rgba(255, 101, 116, .12); color: #ff7a88; }
.laboratory-active-alarm-copy { min-width: 0; }
.laboratory-active-alarm-copy > div { display: flex; align-items: center; gap: 8px; }
.laboratory-active-alarm-copy span {
	padding: 3px 7px;
	border-radius: 999px;
	background: rgba(255, 184, 92, .12);
	color: #ffc574;
	font-size: 7px;
	font-weight: 800;
	text-transform: uppercase;
}
.laboratory-active-alarm-card.is-alarm .laboratory-active-alarm-copy span { background: rgba(255, 101, 116, .13); color: #ff8997; }
.laboratory-active-alarm-copy small { color: #728d98; font-size: 8px; }
.laboratory-active-alarm-copy strong { display: block; margin-top: 5px; color: #e1edf0; font-size: 12px; }
.laboratory-active-alarm-copy p { margin: 2px 0 0; color: #829ca6; font-size: 9px; }
.laboratory-active-alarm-measure { padding-left: 16px; border-left: 1px solid rgba(116, 172, 193, .12); text-align: right; }
.laboratory-active-alarm-measure small,
.laboratory-active-alarm-measure strong { display: block; }
.laboratory-active-alarm-measure small { color: #6f8994; font-size: 8px; }
.laboratory-active-alarm-measure strong { margin-top: 3px; color: #d9e9ed; font-size: 12px; }
.laboratory-threshold-addbar {
	display: grid;
	grid-template-columns: minmax(190px, .7fr) minmax(280px, 1.5fr) auto;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 13px;
	border: 1px solid rgba(116, 172, 193, .14);
	border-radius: 14px;
	background: rgba(10, 31, 40, .72);
}
.laboratory-threshold-add-copy { display: flex; min-width: 0; align-items: center; gap: 10px; }
.laboratory-threshold-add-copy > i {
	display: grid;
	width: 32px;
	height: 32px;
	flex: 0 0 32px;
	place-items: center;
	border-radius: 9px;
	background: rgba(85, 221, 216, .09);
	color: #55ddd8;
	font-size: 10px;
}
.laboratory-threshold-add-copy strong, .laboratory-threshold-add-copy small { display: block; }
.laboratory-threshold-add-copy strong { color: #d7e8ed; font-size: 10px; }
.laboratory-threshold-add-copy small { margin-top: 2px; overflow: hidden; color: #6f8994; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.laboratory-threshold-addbar label { min-width: 0; }
.laboratory-threshold-addbar .laboratory-threshold-parameter {
	width: 100%;
	height: 38px;
	padding: 0 38px 0 12px;
	border: 1px solid rgba(129, 180, 198, .16) !important;
	border-radius: 9px;
	background-color: #0a2029 !important;
	color: #c8dce2 !important;
	box-shadow: none !important;
	font-size: 10px;
}
.laboratory-threshold-addbar .laboratory-threshold-parameter:focus { border-color: rgba(85, 221, 216, .48) !important; }
.laboratory-threshold-add {
	display: inline-flex;
	height: 38px;
	min-height: 38px;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 0 15px;
	border-radius: 9px;
	background: #45ccc7;
	color: #062128;
	font-size: 9px;
	white-space: nowrap;
}
.laboratory-threshold-add:not(:disabled):hover { background: #65ddd8; transform: translateY(-1px); }
.laboratory-threshold-add:disabled { cursor: not-allowed; filter: saturate(.35); opacity: .38; }
.laboratory-threshold-list { gap: 7px; margin-top: 9px; }
.laboratory-threshold-row {
	gap: 11px;
	padding: 11px 13px;
	border-color: rgba(116, 172, 193, .12);
	border-radius: 12px;
	background: rgba(9, 29, 38, .62);
}
.laboratory-threshold-state { width: 34px; height: 34px; border-radius: 10px; font-size: 10px; }
.laboratory-threshold-copy > strong { color: #d9e9ed; font-size: 10px; }
.laboratory-threshold-copy > small { font-size: 7px; }
.laboratory-threshold-copy > div { margin-top: 4px; }
.laboratory-threshold-copy > div span { padding: 3px 6px; font-size: 7px; }
.laboratory-alerting-empty {
	display: flex;
	min-height: 112px;
	align-items: center;
	justify-content: center;
	gap: 13px;
	margin-top: 9px;
	padding: 20px;
	border: 1px dashed rgba(116, 172, 193, .15);
	border-radius: 14px;
	background: rgba(7, 24, 32, .38);
	text-align: left;
}
.laboratory-alerting-empty > i {
	display: grid;
	width: 42px;
	height: 42px;
	margin: 0;
	flex: 0 0 42px;
	place-items: center;
	border-radius: 50%;
	background: rgba(85, 221, 216, .07);
	color: #47727c;
	font-size: 15px;
}
.laboratory-alerting-empty strong, .laboratory-alerting-empty span { display: block; }
.laboratory-alerting-empty strong { color: #bfd4da; font-size: 10px; }
.laboratory-alerting-empty span { margin-top: 3px; color: #6f8994; font-size: 9px; }
.laboratory-alarm-filters {
	margin: 0 0 9px;
	padding: 11px 13px;
	border-color: rgba(116, 172, 193, .13);
	border-radius: 12px;
	background: rgba(10, 31, 40, .66);
}
.laboratory-alarm-history { gap: 7px; }
.laboratory-alarm-row {
	position: relative;
	grid-template-columns: auto minmax(0, 1fr) minmax(120px, auto);
	gap: 13px;
	min-height: 62px;
	padding: 10px 14px;
	border-color: rgba(116, 172, 193, .11);
	border-radius: 11px;
	background: rgba(9, 29, 38, .56);
}
.laboratory-alarm-row > i { width: 32px; height: 32px; font-size: 10px; }
.laboratory-alarm-event { min-width: 0; }
.laboratory-alarm-event > div { display: flex; align-items: center; gap: 8px; }
.laboratory-alarm-event strong { color: #d9e9ed; font-size: 10px; }
.laboratory-alarm-event span {
	padding: 2px 6px;
	border-radius: 999px;
	background: rgba(116, 172, 193, .08);
	color: #8ba4ae;
	font-size: 7px;
}
.laboratory-alarm-event > small { display: block; margin-top: 4px; color: #6f8994; font-size: 8px; }
.laboratory-alarm-value { min-width: 120px; padding-left: 15px; border-left: 1px solid rgba(116, 172, 193, .11); }
.laboratory-alarm-value strong { color: #dcebef; font-size: 11px; }

@media (max-width: 760px) {
	.laboratory-alerting-window { padding: 8px 0 22px; }
	.laboratory-alerting-sheet { max-height: none; border-radius: 0; }
	.laboratory-alerting-header { padding: 13px; }
	.laboratory-alerting-tabs button { padding: 0 7px; }
	.laboratory-threshold-addbar { grid-template-columns: 1fr; }
	.laboratory-threshold-add-copy small { white-space: normal; }
	.laboratory-threshold-add { width: 100%; }
	.laboratory-alerting-empty { min-height: 100px; }
	.laboratory-threshold-row { grid-template-columns: auto minmax(0, 1fr) auto; }
	.laboratory-active-alarm-card { grid-template-columns: auto minmax(0, 1fr); gap: 10px; }
	.laboratory-active-alarm-measure { padding: 8px 0 0; border-top: 1px solid rgba(116, 172, 193, .1); border-left: 0; text-align: left; }
	.laboratory-active-alarm-measure:nth-last-child(2) { grid-column: 2; }
	.laboratory-active-alarm-measure:last-child { grid-column: 2; }
}

@media (max-width: 520px) {
	.laboratory-alerting-tabs button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.laboratory-alerting-tabs button { gap: 5px; font-size: 8px; }
	.laboratory-alerting-tabs b { display: none; }
	.laboratory-alarm-row { grid-template-columns: auto minmax(0, 1fr); }
	.laboratory-alarm-value { grid-column: 2; padding: 7px 0 0; border-top: 1px solid rgba(116, 172, 193, .1); border-left: 0; text-align: left; }
}

/* The chart covers the card; its sibling bell has its own focus and click target. */
.laboratory-snapshot-chart {position:absolute;inset:0;border:0;border-radius:inherit;background:transparent;color:inherit;cursor:pointer;z-index:1;}
.laboratory-snapshot-chart:focus-visible {outline:2px solid #5de2e7;outline-offset:3px;}
.laboratory-snapshot-bell {position:absolute;right:9px;top:9px;z-index:2;}
.laboratory-snapshot-card[data-lab-kpi-card] {padding-right:48px;}
/* Dedicated alarm editor. Scoped above the generic modal theme. */
.waterly-dialog.threshold-editor .modal-dialog {width:calc(100% - 32px);margin:24px auto;}
.waterly-dialog.threshold-editor .modal-content {background:radial-gradient(ellipse at 0 0,#15334088,transparent 55%),#0b1721!important;border:1px solid #7195a32c!important;border-radius:24px!important;color:#e4eff5;box-shadow:0 30px 120px #000a;overflow:hidden;}
.waterly-dialog.threshold-editor .modal-header {padding:24px 28px!important;background:transparent!important;border-bottom:1px solid #ffffff0c!important;}
.waterly-dialog.threshold-editor .modal-title {display:flex;align-items:center;gap:14px;}
.threshold-title-icon {width:46px;height:46px;display:grid;place-items:center;border-radius:15px;background:#42d9d411;border:1px solid #42d9d42c;color:#70e4dc;}
.waterly-dialog.threshold-editor .modal-title small,.threshold-eyebrow {display:block;font-size:9px;font-weight:800;letter-spacing:1.7px;color:#78a7b5;line-height:1.8;}
.waterly-dialog.threshold-editor .modal-title strong {display:block;font-size:22px;font-weight:750;letter-spacing:-.6px;line-height:1.4;color:#edf7fb;}
.waterly-dialog.threshold-editor .btn-close {background-color:#ffffff08;border-radius:50%;width:22px;height:22px;padding:8px;}
.waterly-dialog.threshold-editor .modal-body {min-height:0!important;padding:24px 28px!important;max-height:calc(100dvh - 205px);overflow:auto;}
.threshold-status {display:flex;align-items:center;justify-content:space-between;gap:15px;padding:15px 18px;background:#ffffff03;border:1px solid #ffffff0d;border-radius:14px;margin-bottom:22px;}
.threshold-studio:not(.is-monitoring) .threshold-status {margin-bottom:0;}
.threshold-studio:not(.is-monitoring) .threshold-scope-note,
.threshold-studio:not(.is-monitoring) .threshold-workspace {display:none;}
.threshold-status-copy {display:flex;align-items:center;gap:12px;}
.threshold-status-copy strong {display:block;font-size:12px;color:#dcecf2;}
.threshold-status-copy small {display:block;font-size:10px;color:#77939f;margin-top:4px;}
.threshold-status-dot {width:7px;height:7px;border-radius:50%;background:#6d8290;}
.is-monitoring .threshold-status-dot {background:#57dac0;box-shadow:0 0 12px #57dac055;}
.threshold-editor .threshold-status-control {display:flex;align-items:center;gap:10px;min-height:0;padding:0;margin:0;font-size:11px;}
.threshold-editor .threshold-status-control .form-check-label {color:#8aa6b3!important;}
.threshold-switch {position:relative;display:inline-flex;width:32px;height:19px;flex-shrink:0;cursor:pointer;}
.threshold-editor .threshold-switch input.form-check-input {position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:2;}
.threshold-switch>span {width:32px;height:19px;background:#344852;border:1px solid #66839033;border-radius:20px;transition:background .2s;}
.threshold-switch>span:after {content:'';display:block;width:13px;height:13px;border-radius:50%;background:#a7bdc8;margin:2px;transition:transform .2s;}
.threshold-switch input:checked+span {background:#248e96;border-color:#53ded033;}
.threshold-switch input:checked+span:after {transform:translateX(13px);background:#dcfffa;}
.threshold-switch input:focus-visible+span {outline:2px solid #77e6e4;outline-offset:3px;}
.threshold-scope-note {margin:-10px 0 20px;font-size:10px;color:#7c9aa9;}.threshold-scope-note i{margin-right:6px;}
.threshold-workspace {display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px;align-items:start;}
.threshold-editor h3 {color:#edf5f7;font-size:18px;font-weight:700;letter-spacing:-.4px;margin:5px 0 0;}
.threshold-editor p {line-height:1.6;}
.threshold-preview {min-width:0;padding:22px;background:linear-gradient(150deg,#102c34,#0b1b28);border:1px solid #65adbb24;border-radius:19px;}
.threshold-preview-header {display:flex;align-items:center;justify-content:space-between;gap:12px;}
.threshold-caption,.threshold-section-title p {color:#7f9da9;font-size:11px;margin:9px 0 22px;}
.threshold-canvas {height:254px;position:relative;}
.threshold-legend {display:flex;justify-content:center;gap:18px;margin:18px 0;font-size:9px;color:#96afba;}
.threshold-legend span:before {content:'';display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:6px;background:#4bd5ac;}
.threshold-legend .is-warning:before {background:#f0b767;}.threshold-legend .is-alarm:before{background:#ed788b;}
.threshold-editor .threshold-numeric-fields {display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0;}
.threshold-editor .threshold-bound {width:auto;min-width:0;padding:14px;border:1px solid #ffffff10;border-radius:13px;transition:border-color .2s,background .2s;}
.threshold-editor .threshold-bound.is-warning {border-color:#e9ad5926;background:linear-gradient(145deg,#e9ad5909,#ffffff01);}
.threshold-editor .threshold-bound.is-alarm {border-color:#ed788b28;background:linear-gradient(145deg,#ed788b09,#ffffff01);}
.threshold-bound header {display:flex;align-items:center;justify-content:space-between;gap:8px;}
.threshold-bound-heading {display:flex;min-width:0;align-items:center;gap:8px;}
.threshold-bound-icon {display:grid;width:24px;height:24px;flex:0 0 24px;place-items:center;border-radius:8px;font-size:9px;}
.threshold-bound.is-warning .threshold-bound-icon {background:#e9ad5917;color:#eec385;}
.threshold-bound.is-alarm .threshold-bound-icon {background:#ed788b17;color:#f1a0ae;}
.threshold-editor .threshold-bound .form-label {font-size:10px;font-weight:650;margin:0;color:#a4b9c4!important;}
.threshold-bound p {font-size:9px;color:#587986;margin:8px 0 10px;}
.threshold-editor .threshold-bound.is-enabled.is-warning {border-color:#e9ad595c;background:linear-gradient(145deg,#e9ad5918,#ffffff02);}
.threshold-editor .threshold-bound.is-enabled.is-alarm {border-color:#ed788b5c;background:linear-gradient(145deg,#ed788b18,#ffffff02);}
.threshold-editor .threshold-bound.is-warning.is-enabled .form-label {color:#eec385!important;}
.threshold-editor .threshold-bound.is-alarm.is-enabled .form-label {color:#f1a0ae!important;}
.threshold-value {display:flex;align-items:center;min-height:38px;gap:5px;}
.threshold-editor .threshold-value input.form-control {width:100%;min-width:0;height:38px;padding:4px 0;border:0;border-bottom:1px solid #ffffff10;border-radius:0;background:transparent!important;box-shadow:none!important;color:#ecf5fa;font-size:23px;font-weight:600;font-variant-numeric:tabular-nums;}
.threshold-editor .threshold-value input:focus {border-color:#65d8d0;}
.threshold-value .threshold-unit {color:#70909e;font-size:11px;}.threshold-value .off-text {font-size:25px;color:#48616e;flex:1;}
.threshold-editor .btn-auto {display:flex;align-items:center;justify-content:space-between;gap:9px;width:100%;margin:0 0 15px;padding:12px 13px;border:1px dashed #5c8b9c44;border-radius:11px;background:transparent;color:#8ab7c3;font-size:10px;cursor:pointer;}.threshold-editor .btn-auto i:last-child{font-size:9px;}
.threshold-editor .btn-auto:disabled{opacity:.45;cursor:default;}
.threshold-editor .threshold-validation {display:flex;align-items:flex-start;gap:8px;margin:0 0 14px;padding:10px 12px;border:1px solid #ed788b44;border-radius:10px;background:#ed788b14;color:#f0a8b4;font-size:11px;line-height:1.45;}
.threshold-editor .threshold-validation[hidden] {display:none;}
.threshold-editor .threshold-validation:not([hidden])::before {content:"\f33a";font-family:"bootstrap-icons";font-weight: 400;flex:0 0 auto;margin-top:1px;color:#ee9baa;}
.threshold-editor .alert-disabled {display:grid;place-items:center;min-height:254px;padding:35px;text-align:center;background:transparent;border:1px dashed #608e9c22;border-radius:13px;color:#6f96a7;font-size:12px;}
.waterly-dialog.threshold-editor .modal-footer {gap:12px;padding:18px 28px!important;border-top:1px solid #ffffff0b!important;background:#06121a88!important;}
.threshold-save-note {margin-right:auto;font-size:10px;color:#73929e;}.threshold-save-note i{margin-right:5px;color:#50887c;}
.waterly-dialog.threshold-editor .modal-footer .btn-primary {display:flex;align-items:center;gap:25px;padding:12px 18px;background:#73ded1!important;border:0!important;border-radius:11px;color:#083535!important;font-size:11px;font-weight:750;box-shadow:none;}
.waterly-dialog.threshold-editor .modal-footer .btn-primary:disabled {opacity:.3;}
.waterly-dialog.threshold-editor .modal-footer .btn-danger {background:transparent!important;border:0;color:#bb808c;font-size:10px;}
@media(max-width:760px){.threshold-workspace{grid-template-columns:1fr;gap:22px;}.threshold-controls{grid-row:1;}.threshold-editor .threshold-numeric-fields{grid-template-columns:1fr;}.threshold-preview{padding:18px;}.threshold-status-copy small{display:none;}.threshold-status{padding:12px;}.waterly-dialog.threshold-editor .modal-body{padding:18px!important;}.waterly-dialog.threshold-editor .modal-header{padding:18px!important;}.waterly-dialog.threshold-editor .modal-footer{padding:14px 18px!important;}.threshold-save-note{display:none;}.waterly-dialog.threshold-editor .modal-title strong{font-size:19px;}.threshold-canvas{height:210px;}}
@media(prefers-reduced-motion:reduce){.threshold-switch>span,.threshold-switch>span:after,.threshold-bound{transition:none;}}

/* Confirmation belonging to the alarm editor. */
.waterly-dialog.threshold-delete-dialog .modal-content {background:linear-gradient(145deg,#122630,#0b1721)!important;border:1px solid #7296a330!important;border-radius:20px!important;box-shadow:0 28px 100px #000a;color:#e2edf3;overflow:hidden;}
.waterly-dialog.threshold-delete-dialog .modal-header {padding:22px 24px 12px!important;border:0!important;background:transparent!important;}
.waterly-dialog.threshold-delete-dialog .modal-title {display:flex;align-items:center;gap:12px;color:#edf5f8;font-size:18px;font-weight:700;}
.threshold-delete-icon {display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#ed788b10;border:1px solid #ed788b24;color:#ee9baa;font-size:15px;}
.waterly-dialog.threshold-delete-dialog .modal-body {padding:8px 24px 24px!important;color:#8faab7;font-size:12px;line-height:1.75;}
.threshold-delete-dialog .threshold-delete-parameter {margin:0 0 8px;color:#d6e7ed;font-size:13px;font-weight:650;}
.waterly-dialog.threshold-delete-dialog .modal-body p:last-child {margin:0;}
.waterly-dialog.threshold-delete-dialog .modal-footer {padding:16px 24px!important;gap:10px;background:#06121a55!important;border-top:1px solid #ffffff0b!important;}
.waterly-dialog.threshold-delete-dialog .modal-footer .btn {padding:10px 16px;border-radius:10px;font-size:11px;font-weight:650;box-shadow:none;}
.waterly-dialog.threshold-delete-dialog .threshold-delete-cancel {background:#ffffff05!important;border:1px solid #7698a32c!important;color:#bbd1db!important;}
.waterly-dialog.threshold-delete-dialog .threshold-delete-confirm {background:#d97585!important;border:1px solid #e48b99!important;color:#201018!important;}
.threshold-delete-confirm i {margin-right:6px;}
.waterly-dialog.threshold-delete-dialog .btn-close {border-radius:50%;background-color:#ffffff08;padding:7px;}

/* Unsaved alarm settings use the same visual language as the threshold editor. */
.waterly-dialog.threshold-unsaved-dialog .modal-content {background:linear-gradient(145deg,#122630,#0b1721)!important;border:1px solid #7296a330!important;border-radius:20px!important;box-shadow:0 28px 100px #000a;color:#e2edf3;overflow:hidden;}
.waterly-dialog.threshold-unsaved-dialog .modal-header {padding:22px 24px 12px!important;border:0!important;background:transparent!important;}
.waterly-dialog.threshold-unsaved-dialog .modal-title {display:flex;align-items:center;gap:12px;color:#edf5f8;font-size:18px;font-weight:700;}
.threshold-unsaved-icon {display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;border-radius:12px;background:#73ded115;border:1px solid #73ded140;color:#73ded1;font-size:15px;}
.waterly-dialog.threshold-unsaved-dialog .modal-body {padding:8px 24px 24px!important;color:#a1b8c2;font-size:13px;line-height:1.65;}
.threshold-unsaved-dialog .threshold-unsaved-parameter {margin:0 0 8px;color:#d6e7ed;font-size:14px;font-weight:700;}
.waterly-dialog.threshold-unsaved-dialog .modal-body p:last-child {margin:0;}
.waterly-dialog.threshold-unsaved-dialog .modal-footer {padding:16px 24px!important;gap:10px;background:#06121a55!important;border-top:1px solid #ffffff0b!important;}
.waterly-dialog.threshold-unsaved-dialog .modal-footer .btn {min-height:40px;padding:10px 16px;border-radius:10px;font-size:12px;font-weight:700;box-shadow:none;}
.waterly-dialog.threshold-unsaved-dialog .threshold-unsaved-discard {background:#ffffff05!important;border:1px solid #7698a34a!important;color:#bbd1db!important;}
.waterly-dialog.threshold-unsaved-dialog .threshold-unsaved-save {background:#73ded1!important;border:1px solid #73ded1!important;color:#083535!important;}
.threshold-unsaved-save i {margin-right:6px;}
.waterly-dialog.threshold-unsaved-dialog .btn-close {border-radius:50%;background-color:#ffffff08;padding:7px;}
@media(max-width:480px){.waterly-dialog.threshold-unsaved-dialog .modal-footer{flex-wrap:wrap;}.waterly-dialog.threshold-unsaved-dialog .modal-footer .btn{flex:1 1 100%;}}

/* Measurement-based threshold suggestion belongs to the alarm editor, not the generic dialog theme. */
.waterly-dialog.threshold-suggestion-dialog .modal-content {background:linear-gradient(145deg,#122630,#0b1721)!important;border:1px solid #7296a330!important;border-radius:20px!important;box-shadow:0 28px 100px #000a;color:#e2edf3;overflow:hidden;}
.waterly-dialog.threshold-suggestion-dialog .modal-header {padding:22px 24px 12px!important;border:0!important;background:transparent!important;}
.waterly-dialog.threshold-suggestion-dialog .modal-title {display:flex;align-items:center;gap:12px;color:#edf5f8;font-size:18px;font-weight:700;line-height:1.25;}
.threshold-suggestion-icon {display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;border-radius:12px;background:#73ded115;border:1px solid #73ded140;color:#73ded1;font-size:15px;}
.waterly-dialog.threshold-suggestion-dialog .modal-body {padding:8px 24px 24px!important;color:#a1b8c2;font-size:13px;line-height:1.65;}
.threshold-suggestion-dialog .threshold-suggestion-parameter {margin:0 0 8px;color:#d6e7ed;font-size:14px;font-weight:700;}
.waterly-dialog.threshold-suggestion-dialog .modal-body p:last-child {margin:0;}
.waterly-dialog.threshold-suggestion-dialog .modal-footer {padding:16px 24px!important;gap:10px;background:#06121a55!important;border-top:1px solid #ffffff0b!important;}
.waterly-dialog.threshold-suggestion-dialog .modal-footer .btn {min-height:40px;padding:10px 16px;border-radius:10px;font-size:12px;font-weight:700;box-shadow:none;}
.waterly-dialog.threshold-suggestion-dialog .threshold-suggestion-manual {background:#ffffff05!important;border:1px solid #7698a34a!important;color:#bbd1db!important;}
.waterly-dialog.threshold-suggestion-dialog .threshold-suggestion-accept {background:#73ded1!important;border:1px solid #73ded1!important;color:#083535!important;}
.threshold-suggestion-accept i {margin-right:6px;}
.waterly-dialog.threshold-suggestion-dialog .btn-close {border-radius:50%;background-color:#ffffff08;padding:7px;}
@media(max-width:480px){.waterly-dialog.threshold-suggestion-dialog .modal-footer{flex-wrap:wrap;}.waterly-dialog.threshold-suggestion-dialog .modal-footer .btn{flex:1 1 100%;}}

.laboratory-snapshot-bell[hidden] { display: none !important; }

/* Keep chart cards distinct without stacking framed containers around them. */
.laboratory-shell :is(.laboratory-hero, .laboratory-command-deck, .laboratory-navigation, .laboratory-parameter-section, .laboratory-snapshot-group, .laboratory-analysis-launcher) {
    border: 0;
    box-shadow: none;
}
.laboratory-shell :is(.laboratory-command-deck, .laboratory-navigation) { border-bottom: 1px solid rgba(128, 178, 201, .14); }
.laboratory-shell :is(.laboratory-hero, .laboratory-parameter-section, .laboratory-snapshot-group) { background: transparent; }
.laboratory-snapshot-group { padding: 10px 0; border-radius: 0; }
.laboratory-snapshot-group-header { margin-bottom: 6px; }
@media (max-width: 850px) {
    .laboratory-hero { gap: 10px; }
    .laboratory-live-status { padding: 6px 0; border-left: 0; }
    .laboratory-navigation-copy { display: none; }
}
@media (max-width: 590px) {
    .laboratory-hero { padding: 10px 0; }
    .laboratory-hero-visual { width: 44px; height: 44px; flex-basis: 44px; }
    .laboratory-command-deck { padding: 6px 0; gap: 8px; }
    .laboratory-analysis-launcher { gap: 10px; padding: 10px; }
    .laboratory-analysis-launcher-icon { width: 36px; height: 36px; flex-basis: 36px; }
}

/* Phone layout: separate point status, time controls and the selected workspace. */
@media (max-width: 767.98px) {
    .laboratory-workbench .laboratory-shell { --drawer-content-inset: 14px; }
    .laboratory-hero { min-height: 0; gap: 10px; padding: 8px 0 12px; }
    .laboratory-hero-main { width: 100%; gap: 12px; }
    .laboratory-hero-visual { width: 40px; height: 40px; flex-basis: 40px; border-radius: 12px; font-size: 18px; }
    .laboratory-eyebrow { color: #a4bcc9; font-size: 11px; letter-spacing: .04em; }
    .laboratory-hero-copy h1 { margin: 3px 0; font-size: 22px; line-height: 1.25; overflow-wrap: anywhere; }
    .laboratory-hero-copy p { display: none; }
    .laboratory-hero .subpage-device-title-switch { min-height: 44px; }
    .laboratory-hero .subpage-device-title-switch > i { font-size: 12px; }
    .laboratory-hero .subpage-hero-side { display: block; width: 100%; }
    .laboratory-hero .subpage-module-actions:empty { display: none; }
    .laboratory-live-status {
        gap: 10px;
        padding: 8px 12px;
        border: 1px solid rgba(128, 178, 201, .14);
        border-radius: 10px;
        background: rgba(16, 40, 50, .55);
    }
    .laboratory-live-status > div { display: grid; flex: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: baseline; gap: 3px 10px; min-width: 0; }
    .laboratory-live-status span { color: #a4bcc9; font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; }
    .laboratory-live-status strong { margin: 0; font-size: 14px; text-align: right; overflow-wrap: anywhere; }
    .laboratory-live-status small { grid-column: 1 / -1; margin: 0; color: #9ab1bd; font-size: 12px; }

    .laboratory-shell .laboratory-command-deck { gap: 8px; padding: 0 0 12px; background: transparent; }
    .laboratory-time-control { width: 100%; flex-direction: column; gap: 8px; }
    .laboratory-time-heading { display: flex; }
    .laboratory-time-heading > i,
    .laboratory-time-heading strong { display: none; }
    .laboratory-time-heading span { color: #adc4d0; font-size: 12px; letter-spacing: 0; text-transform: none; }
    .laboratory-period-navigator { display: grid; width: 100%; height: auto; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 0; border: 0; background: transparent; }
    .laboratory-period-navigator .period-selector {
        grid-column: 1 / -1;
        grid-row: 1;
        width: 100%;
        min-width: 0;
        height: 48px;
        padding: 8px 36px 8px 14px;
        border: 1px solid rgba(126, 164, 183, .25);
        border-radius: 10px;
        background-position: calc(100% - 18px) 21px, calc(100% - 14px) 21px, 0 0;
        font-size: 16px;
    }
    .laboratory-period-navigator .laboratory-icon-button { display: flex; width: 100%; min-height: 48px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 6px 2px; border: 1px solid rgba(126, 164, 183, .16); border-radius: 9px; background: rgba(16, 40, 50, .55); color: #b9cdd7; font-size: 12px; }
    .laboratory-period-caption { display: block; font-size: 11px; font-weight: 600; line-height: 1.25; }
    .laboratory-primary-actions { display: grid; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .laboratory-primary-actions .laboratory-action-button { min-width: 0; min-height: 48px; padding: 8px 10px; font-size: 14px; }
    .laboratory-primary-actions .laboratory-autorefresh { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 8px; text-align: left; }
    .laboratory-autorefresh > i { grid-row: 1 / 3; font-size: 14px; }
    .laboratory-autorefresh > span { display: block; font-size: 12px; line-height: 1.3; overflow-wrap: anywhere; }
    .laboratory-primary-actions .laboratory-autorefresh > b { width: auto; justify-self: start; padding: 0; border-radius: 0; background: transparent; font-size: 11px; line-height: 1.3; font-weight: 600; }

    .laboratory-shell .laboratory-navigation { align-items: stretch; gap: 0; margin-top: 0; padding: 10px 0; background: #091a23; }
    .laboratory-navigation .laboratory-tabs,
    .laboratory-navigation-copy { display: none; }
    .laboratory-mobile-navigation { display: flex; width: 100%; flex-direction: column; gap: 7px; margin: 0; }
    .laboratory-mobile-navigation > span { color: #adc4d0; font-size: 12px; font-weight: 700; }
    .laboratory-section-select {
        width: 100%;
        min-width: 0;
        min-height: 48px;
        padding: 10px 36px 10px 14px;
        border: 1px solid rgba(126, 164, 183, .25);
        border-radius: 10px;
        appearance: none;
        background-color: #142d38 !important;
        background-image: linear-gradient(45deg, transparent 50%, #65cdd1 50%), linear-gradient(135deg, #65cdd1 50%, transparent 50%);
        background-position: calc(100% - 18px) 21px, calc(100% - 14px) 21px;
        background-repeat: no-repeat;
        background-size: 4px 4px;
        color: #f0f8fa;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        text-align: left !important;
    }
    .laboratory-shell :is(.laboratory-section-select, .period-selector, .laboratory-icon-button, .laboratory-action-button, .subpage-device-title-switch):focus-visible { outline: 2px solid #5de2e7; outline-offset: 2px; }

    .laboratory-snapshot { display: block; margin-top: 12px; }
    .laboratory-snapshot > .laboratory-snapshot-card.sensors { min-height: 84px; margin-bottom: 12px; padding: 14px; }
    .laboratory-snapshot-card.sensors > div:last-of-type { min-width: 0; flex: 1; }
    .laboratory-snapshot-card.sensors > div > span { font-size: 12px; letter-spacing: 0; text-transform: none; }
    .laboratory-snapshot-card.sensors .laboratory-summary-reading { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; margin-top: 4px; }
    .laboratory-snapshot-card.sensors .laboratory-summary-reading strong { margin: 0; font-size: 28px; }
    .laboratory-snapshot-card.sensors .laboratory-summary-reading small { gap: 4px 12px; color: #b2c6cf; font-size: 12px; line-height: 1.5; white-space: normal; }
    .laboratory-summary-reading em { display: block; }
    .laboratory-snapshot-group { padding: 8px 0 12px; }
    .laboratory-snapshot-group + .laboratory-snapshot-group { margin-top: 12px; }
    .laboratory-snapshot-group-header { gap: 10px; margin-bottom: 8px; padding: 0 0 6px; }
    .laboratory-snapshot-group-icon { display: none; }
    .laboratory-snapshot-group-header strong { font-size: 15px; line-height: 1.35; }
    .laboratory-snapshot-group-header small { display: none; }
    .laboratory-snapshot-group-meta { color: #99b0bd; font-size: 11px; }
    .laboratory-snapshot-subgroup-header { padding: 4px 0 10px; color: #b5cbd6; font-size: 12px; }
    .laboratory-snapshot-subgroup.has-repeated-label > .laboratory-snapshot-subgroup-header { display: none; }
    .laboratory-snapshot-subgroup.has-repeated-label + .laboratory-snapshot-subgroup.has-repeated-label { margin-top: 10px; padding-top: 0; border-top: 0; }
    .laboratory-snapshot-group-grid,
    .laboratory-snapshot-depth-group[data-lab-sensor-group] .laboratory-snapshot-group-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; overflow: visible; scroll-snap-type: none; }
    .laboratory-snapshot-group-grid .laboratory-snapshot-card { min-width: 0; min-height: 108px; align-items: center; gap: 12px; padding: 14px 64px 14px 12px; border-radius: 12px; }
    .laboratory-snapshot-icon { width: 34px; height: 34px; flex-basis: 34px; border-radius: 10px; font-size: 15px; }
    .laboratory-snapshot-card[data-lab-kpi-card] > div:last-of-type { min-width: 0; flex: 1; }
    .laboratory-snapshot-card .laboratory-responsive-label,
    .laboratory-snapshot-card .laboratory-responsive-label span { color: #c5d8e2; font-size: 13px; font-weight: 600; line-height: 1.4; letter-spacing: 0; text-transform: none; overflow-wrap: anywhere; }
    .laboratory-snapshot-card .laboratory-responsive-label .is-full { display: block; }
    .laboratory-snapshot-card .laboratory-responsive-label .is-short { display: none; }
    .laboratory-snapshot-card strong { margin-top: 5px; font-size: 24px; line-height: 1.25; white-space: normal; }
    .laboratory-snapshot-card small { margin-top: 5px; overflow: visible; color: #a1b8c5; font-size: 12px; line-height: 1.5; white-space: normal; }
    .laboratory-snapshot-card .laboratory-snapshot-bell { top: 10px; right: 10px; width: 44px; height: 44px; min-height: 44px; font-size: 15px; }
    .laboratory-snapshot-open { right: 25px; bottom: 17px; font-size: 14px; opacity: .85; }

    .laboratory-analysis-tools { position: static; flex-wrap: wrap; gap: 10px; padding: 12px 0; }
    .laboratory-search { width: 100%; max-width: none; flex-basis: 100%; min-height: 48px; }
    .laboratory-search input { min-width: 0; min-height: 46px; font-size: 16px; }
    .laboratory-search-clear { width: 44px; min-height: 44px; }
    .laboratory-view-switch { display: none; }
    .laboratory-probe-cleaning-toggle { min-height: 44px; font-size: 12px; }
    .laboratory-result-count { margin-left: auto; font-size: 12px; }
    .laboratory-parameter-section { padding: 12px 0; }
    .laboratory-section-heading span { font-size: 11px; }
    .laboratory-section-heading h2 { font-size: 18px; line-height: 1.35; }
    .laboratory-section-heading p { display: none; }
    .laboratory-statistic.diagnostic-statistic-widget .diagnostic-chart-title > span { display: none; }
    .laboratory-statistic.diagnostic-statistic-widget .diagnostic-chart-expand { width: 44px; height: 44px; flex-basis: 44px; }
    .laboratory-statistic .diagnostic-chart-stat > span,
    .laboratory-statistic .diagnostic-chart-reading > span { color: #a5bcc8; font-size: 11px; letter-spacing: 0; text-transform: none; }
    .laboratory-statistic .diagnostic-chart-footer { font-size: 11px; line-height: 1.5; }
    .laboratory-alerting-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
    .laboratory-alerting-tabs button { height: auto; min-height: 48px; gap: 6px; padding: 8px; color: #a8c0cd; font-size: 13px; }
    .laboratory-alerting-tabs button span { overflow: visible; white-space: normal; }
    .laboratory-alerting-tabs button[data-alerting-view="thresholds"] { grid-column: 1 / -1; }
    .laboratory-alerting-tabs b { display: grid; font-size: 11px; }
    .laboratory-alerting-header-copy > span { display: none; }
    .laboratory-alerting-header h2 { font-size: 18px; line-height: 1.35; }
    .laboratory-alerting-header p { color: #a8c0cd; font-size: 13px; line-height: 1.5; }
}

/* Atmospheric measurements share a timeline, with an equally legible summary for every unit. */
.laboratory-parameter-section[data-lab-category="atmosphere"] .laboratory-section-heading { gap: 14px; margin-bottom: 16px; padding-bottom: 14px; }
.laboratory-parameter-section[data-lab-category="atmosphere"] .laboratory-section-heading h2 { font-size: 20px; line-height: 1.35; }
.laboratory-parameter-section[data-lab-category="atmosphere"] .laboratory-section-heading span { font-size: 10px; }
.laboratory-parameter-section[data-lab-category="atmosphere"] .laboratory-section-heading p { margin-top: 4px; color: #9db4c2; font-size: 12px; line-height: 1.5; }
.laboratory-workbench.is-compact .laboratory-parameter-section[data-lab-category="atmosphere"] .laboratory-section-heading { margin-bottom: 12px; padding-bottom: 10px; }
.laboratory-workbench.is-compact .laboratory-parameter-section[data-lab-category="atmosphere"] .laboratory-section-heading h2 { font-size: 18px; }
.laboratory-statistic.diagnostic-series-metrics {
    --weather-surface: #0e202a;
    --weather-card: #122834;
    --weather-plot: #0a1923;
    --weather-border: rgba(130, 173, 195, .18);
    --weather-text: #e8f3f8;
    --weather-muted: #a0b7c5;
    --weather-plot-height: 340px;
}

.laboratory-statistic.diagnostic-series-metrics:hover { transform: none; }
.laboratory-statistic.diagnostic-series-metrics .widget-parameter-with-chart {
    height: auto;
    border-color: var(--weather-border) !important;
    background: var(--weather-surface) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    transform: none;
}
.laboratory-statistic.diagnostic-series-metrics .widget-parameter-body { position: relative; top: auto; left: auto; height: auto; }
.laboratory-statistic.diagnostic-series-metrics .diagnostic-chart-header {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    flex-direction: row;
    padding: 18px;
}
.diagnostic-series-metrics .diagnostic-chart-identity { width: 100%; gap: 12px; }
.laboratory-statistic.diagnostic-series-metrics .diagnostic-chart-title > span,
.laboratory-statistic.diagnostic-series-metrics .diagnostic-chart-reading,
.diagnostic-series-metrics .diagnostic-chart-insights { display: none; }
.laboratory-statistic.diagnostic-series-metrics .widget-header { display: block; overflow: visible; color: var(--weather-text); font-size: 18px; line-height: 1.35; }
.laboratory-statistic.diagnostic-series-metrics .widget-date { margin-top: 4px; color: var(--weather-muted); font-size: 12px; font-style: normal; line-height: 1.5; }
.laboratory-statistic.diagnostic-series-metrics .diagnostic-chart-expand { width: 40px; height: 40px; margin-left: auto; flex-basis: 40px; }
.laboratory-statistic.diagnostic-series-metrics .diagnostic-chart-series-panel {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    flex: 0 0 auto;
    gap: 12px;
    padding: 0 18px 18px;
}
.laboratory-statistic.diagnostic-series-metrics .diagnostic-series-metric {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--series-color) 26%, var(--weather-border));
    border-radius: 12px;
    color: var(--weather-text);
    background: color-mix(in srgb, var(--series-color) 4%, var(--weather-card));
    text-align: left;
    filter: none;
    transition: border-color .16s ease, background .16s ease;
}
.diagnostic-series-metrics .diagnostic-series-metric:hover { border-color: var(--series-color); }
.diagnostic-series-metrics .diagnostic-series-metric:focus-visible { outline: 2px solid var(--series-color); outline-offset: 3px; }
.diagnostic-series-metrics .diagnostic-series-metric.is-muted { opacity: .65; }
.diagnostic-series-metric-name { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--weather-text); font-size: 13px; font-weight: 700; line-height: 1.4; }
.diagnostic-series-metric-name > i:first-child { width: 7px; height: 7px; flex-basis: 7px; box-shadow: none; }
.diagnostic-series-metric-name .diagnostic-series-metric-check { width: auto; height: auto; margin-left: auto; background: none; box-shadow: none; color: var(--series-color); font-size: 10px; }
.diagnostic-series-metric.is-muted .diagnostic-series-metric-check { visibility: hidden; }
.diagnostic-series-metric-caption { margin-top: 10px; color: var(--weather-muted); font-size: 11px; font-weight: 500; line-height: 1.4; }
.diagnostic-series-metric-reading { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.diagnostic-series-metric-value { color: var(--weather-text); font-size: 30px; font-weight: 750; line-height: 1.2; font-variant-numeric: tabular-nums; }
.diagnostic-series-metric-unit { color: var(--series-color); font-size: 14px; font-weight: 650; }
.diagnostic-series-metric-delta { margin-left: auto; color: var(--weather-muted); font-size: 12px; font-weight: 600; white-space: nowrap; }
.diagnostic-series-metric-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--weather-border); }
.diagnostic-series-metric-stats > span { display: grid; gap: 3px; }
.diagnostic-series-metric-stats small { color: var(--weather-muted); font-size: 10px; font-weight: 500; line-height: 1.3; }
.diagnostic-series-metric-stats b { color: var(--weather-text); font-size: 13px; font-weight: 650; line-height: 1.3; font-variant-numeric: tabular-nums; }
.laboratory-statistic.diagnostic-series-metrics .diagnostic-chart-stage { flex: 0 0 auto; margin: 0 18px; padding: 10px 8px 4px; border-color: var(--weather-border); background: var(--weather-plot); }
.laboratory-statistic.diagnostic-series-metrics .chart-statistic-div { height: var(--weather-plot-height); min-height: 0; flex: 0 0 auto; }
.laboratory-statistic.diagnostic-series-metrics .diagnostic-chart-footer { gap: 10px 20px; min-height: 52px; padding: 12px 18px; color: var(--weather-muted); font-size: 11px; }
.laboratory-statistic.diagnostic-series-metrics .diagnostic-chart-footer .widget-range { color: var(--weather-muted); font-size: 11px; font-weight: 500; }
.diagnostic-series-metrics .diagnostic-chart-footer strong { color: var(--weather-text); }
.diagnostic-series-metrics .laboratory-analyze { min-height: 34px; font-size: 11px; }

.laboratory-workbench.is-compact .diagnostic-series-metrics { --weather-plot-height: 230px; }
.laboratory-workbench.is-compact .diagnostic-series-metrics .diagnostic-chart-header { padding: 12px 14px; }
.laboratory-workbench.is-compact .diagnostic-series-metrics .widget-header { font-size: 16px; }
.laboratory-workbench.is-compact .diagnostic-series-metrics .diagnostic-chart-series-panel { gap: 8px; padding: 0 14px 12px; }
.laboratory-workbench.is-compact .diagnostic-series-metrics .diagnostic-series-metric { padding: 10px 12px; }
.laboratory-workbench.is-compact .diagnostic-series-metrics .diagnostic-series-metric-caption { margin-top: 6px; }
.laboratory-workbench.is-compact .diagnostic-series-metrics .diagnostic-series-metric-value { font-size: 24px; }
.laboratory-workbench.is-compact .diagnostic-series-metrics .diagnostic-series-metric-stats { margin-top: 8px; padding-top: 6px; }
.laboratory-workbench.is-compact .diagnostic-series-metrics .diagnostic-chart-stage { margin: 0 14px; }
.laboratory-workbench.is-compact .diagnostic-series-metrics .diagnostic-chart-footer { min-height: 42px; padding: 8px 14px; }

@media (max-width: 767.98px) {
    .laboratory-statistic.diagnostic-series-metrics,
    .laboratory-workbench.is-compact .diagnostic-series-metrics { --weather-plot-height: 240px; }
    .laboratory-statistic.diagnostic-series-metrics .diagnostic-chart-header,
    .laboratory-workbench.is-compact .diagnostic-series-metrics .diagnostic-chart-header { padding: 12px; }
    .diagnostic-series-metrics .diagnostic-chart-identity { display: grid; grid-template-columns: 36px minmax(0, 1fr) 44px; gap: 8px 10px; }
    .diagnostic-series-metrics .diagnostic-chart-title { display: contents; }
    .laboratory-statistic.diagnostic-series-metrics .widget-header { grid-column: 2; grid-row: 1; margin-top: 0; font-size: 16px; }
    .laboratory-statistic.diagnostic-series-metrics .widget-icon { grid-column: 1; grid-row: 1; width: 36px; height: 36px; border-radius: 10px; flex-basis: 36px; }
    .laboratory-statistic.diagnostic-series-metrics .widget-date { grid-column: 1 / -1; grid-row: 2; margin-top: 0; font-size: 11px; white-space: normal; overflow: visible; }
    .laboratory-statistic.diagnostic-series-metrics .diagnostic-chart-expand { grid-column: 3; grid-row: 1; width: 44px; height: 44px; flex-basis: 44px; }
    .laboratory-statistic.diagnostic-series-metrics .diagnostic-chart-series-panel,
    .laboratory-workbench.is-compact .diagnostic-series-metrics .diagnostic-chart-series-panel { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 0 12px 12px; }
    .laboratory-statistic.diagnostic-series-metrics .diagnostic-series-metric,
    .laboratory-workbench.is-compact .diagnostic-series-metrics .diagnostic-series-metric { min-height: 54px; padding: 10px 12px; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; }
    .diagnostic-series-metrics .diagnostic-series-metric-name { grid-column: 1; font-size: 12px; }
    .diagnostic-series-metrics .diagnostic-series-metric-name .diagnostic-series-metric-check { display: none; }
    .diagnostic-series-metrics .diagnostic-series-metric-caption,
    .laboratory-workbench.is-compact .diagnostic-series-metrics .diagnostic-series-metric-caption { grid-column: 1; margin-top: 3px; font-size: 10px; }
    .diagnostic-series-metrics .diagnostic-series-metric-reading { grid-column: 2; grid-row: 1 / 3; justify-content: flex-end; align-self: center; margin-top: 0; }
    .diagnostic-series-metrics .diagnostic-series-metric-value,
    .laboratory-workbench.is-compact .diagnostic-series-metrics .diagnostic-series-metric-value { font-size: 22px; }
    .diagnostic-series-metrics .diagnostic-series-metric-unit { font-size: 12px; }
    .diagnostic-series-metrics .diagnostic-series-metric-delta { display: none; }
    .diagnostic-series-metrics .diagnostic-series-metric-stats,
    .laboratory-workbench.is-compact .diagnostic-series-metrics .diagnostic-series-metric-stats { grid-column: 1 / -1; margin-top: 8px; padding-top: 8px; }
    .diagnostic-series-metrics .diagnostic-series-metric.is-muted { opacity: 1; border-color: var(--weather-border); background: var(--weather-card); }
    .diagnostic-series-metrics .diagnostic-series-metric.is-muted .diagnostic-series-metric-stats { display: none; }
    .diagnostic-series-metrics .diagnostic-series-metric.is-muted .diagnostic-series-metric-name,
    .diagnostic-series-metrics .diagnostic-series-metric.is-muted .diagnostic-series-metric-value { color: var(--weather-muted); }
    .laboratory-statistic.diagnostic-series-metrics .diagnostic-chart-stage,
    .laboratory-workbench.is-compact .diagnostic-series-metrics .diagnostic-chart-stage { margin: 0 12px; padding: 8px 4px 2px; }
    .laboratory-statistic.diagnostic-series-metrics .diagnostic-chart-footer,
    .laboratory-workbench.is-compact .diagnostic-series-metrics .diagnostic-chart-footer { flex-wrap: wrap; gap: 6px 14px; padding: 10px 12px; }
    .laboratory-statistic.diagnostic-series-metrics .diagnostic-chart-footer .widget-range { flex-basis: 100%; font-size: 10px; }
}
/* Laboratory traces: quiet surfaces leave the measurements and selection in focus. */
.laboratory-workbench {
    --lab-chart-text: #e5f2f7;
    --lab-chart-muted: #8ba6b4;
    --lab-chart-line: #233b49;
    --lab-chart-card: linear-gradient(150deg, #10212b, #0b1821);
    --lab-chart-plot: linear-gradient(180deg, #0d202a, #0b1922);
}
html[data-theme="light"] .laboratory-workbench {
    --lab-chart-text: #193c4b;
    --lab-chart-muted: #587582;
    --lab-chart-line: #d3e4eb;
    --lab-chart-card: linear-gradient(150deg, #ffffff, #f3f9fb);
    --lab-chart-plot: linear-gradient(180deg, #f1f8fb, #f9fcfd);
}
.laboratory-workbench .laboratory-statistic.diagnostic-statistic-widget {
    --diagnostic-widget-background: var(--lab-chart-card);
    --diagnostic-widget-border: var(--lab-chart-line);
    --diagnostic-widget-shadow: 0 4px 18px #0000000d;
    --diagnostic-widget-hover-shadow: 0 6px 22px #00000014;
}
.laboratory-workbench .laboratory-statistic .widget-parameter-with-chart { border-radius: 16px; }
.laboratory-workbench .laboratory-statistic.diagnostic-statistic-widget .diagnostic-chart-header {
    position: relative;
    padding: 16px 16px 12px;
    gap: 12px;
}
.laboratory-workbench .laboratory-statistic .diagnostic-chart-identity { padding-right: 0; }
.laboratory-workbench .laboratory-statistic .diagnostic-chart-name {
    display: flex; align-items: center; gap: 10px; min-width: 0;
}
.laboratory-workbench .laboratory-statistic .diagnostic-chart-name .widget-header { flex: 0 1 auto; min-width: 0; }
.laboratory-workbench .laboratory-statistic .diagnostic-chart-title > span { display: none; }
.laboratory-workbench .laboratory-statistic.diagnostic-statistic-widget .widget-header {
    color: var(--lab-chart-text) !important;
    font-size: 16px;
    line-height: 1.35;
    font-weight: 700;
    margin: 0;
}
.laboratory-workbench .laboratory-statistic.diagnostic-statistic-widget .widget-date {
    color: var(--lab-chart-muted);
    font-size: 10px;
    line-height: 1.5;
    font-style: normal;
    margin-top: 4px;
}
.laboratory-workbench .laboratory-statistic .widget-parameter-with-chart .widget-icon {
    width: 32px; height: 32px; border-radius: 10px; font-size: 15px;
    background: color-mix(in srgb, var(--diagnostic-chart-color) 7%, transparent);
    box-shadow: none;
}
.laboratory-workbench .laboratory-statistic.diagnostic-statistic-widget .diagnostic-chart-reading {
    border: 0; border-radius: 0; background: transparent;
    padding: 0; gap: 6px;
    width: 100%;
}
.laboratory-workbench .laboratory-statistic .diagnostic-chart-reading > span {
    color: var(--lab-chart-muted); font-size: 10px; font-weight: 500; letter-spacing: 0; text-transform: none;
}
.laboratory-workbench .laboratory-statistic .diagnostic-chart-reading > div { gap: 4px 7px; }
.laboratory-workbench .laboratory-statistic.diagnostic-statistic-widget .widget-unit { color: var(--lab-chart-muted) !important; font-size: 11px; font-weight: 500; }
.laboratory-workbench .laboratory-statistic .diagnostic-chart-insights { gap: 0; padding: 0 16px 14px; }
.laboratory-workbench .laboratory-statistic .diagnostic-chart-stat {
    min-width: 0; padding: 7px 9px; border: 0; border-radius: 0;
    background: transparent; border-left: 1px solid var(--lab-chart-line);
}
.laboratory-workbench .laboratory-statistic .diagnostic-chart-stat:first-child { border-left: 0; padding-left: 0; }
html[data-theme="light"] .laboratory-workbench .laboratory-statistic .diagnostic-chart-stat { background: transparent; }
.laboratory-workbench .laboratory-statistic .diagnostic-chart-stat > span {
    color: var(--lab-chart-muted); font-size: 9px; font-weight: 500; text-transform: none; letter-spacing: 0;
}
.laboratory-workbench .laboratory-statistic .diagnostic-chart-stat > strong { color: var(--lab-chart-text); font-size: 12px; font-weight: 650; }
.laboratory-workbench .laboratory-statistic .diagnostic-chart-stat-unit { color: var(--lab-chart-muted); font-size: 9px; }
.laboratory-workbench .laboratory-statistic.diagnostic-statistic-widget .diagnostic-chart-stage {
    margin: 0 12px; padding: 8px 4px 2px; border-color: var(--lab-chart-line);
    background: var(--lab-chart-plot); border-radius: 12px;
}
.laboratory-workbench .laboratory-statistic.diagnostic-statistic-widget .diagnostic-chart-footer {
    padding: 12px 16px; color: var(--lab-chart-muted); gap: 8px 14px;
}
.laboratory-workbench .laboratory-statistic.diagnostic-statistic-widget .diagnostic-chart-name .diagnostic-chart-expand {
    position: static; margin: 0; grid-column: auto; grid-row: auto; transform: none;
    background: transparent; border-color: var(--lab-chart-line); color: var(--lab-chart-muted);
}
@media (max-width: 767.98px) {
    .laboratory-workbench .laboratory-statistic.diagnostic-series-metrics .diagnostic-chart-identity { grid-template-columns: 36px minmax(0, 1fr); }
}
@container (max-width: 560px) {
    .laboratory-workbench .laboratory-statistic.diagnostic-statistic-widget .diagnostic-chart-reading { width: 100%; }
}
@container (max-width: 460px) {
    .laboratory-workbench .laboratory-statistic .diagnostic-chart-insights { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 0; }
    .laboratory-workbench .laboratory-statistic .diagnostic-chart-stat:nth-child(odd) { border-left: 0; padding-left: 0; }
}


/* features/management/management.css */
/**************************************************************************************************
	@author         hommie.pl
	@contributors   Rafał Złotorzyński
	@module         CSS
	@file           management.css
**************************************************************************************************/

/* Map main contener */
/* .contener-map {} */

/* Map child contener */
/* #main_map_content {} */


/* .devices-list-selector {
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 500;
    cursor: pointer;
    font-size: 24px;
    width: 40px;
    height: 40px;
    background-color: #33373B;
    color: #b4bbc2;
    vertical-align: middle;
    border-radius: 10px;
    text-align: center;
    border: #000 0px solid;
    padding-top: 3px;
    margin-top: 50px;
}

.devices-list-selector:hover {
    background-color: #2193F3;
    color: #FFFFFF;
} */





.tiles-list-shell {
    position: absolute;
    z-index: 1020;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(440px, calc(100vw - 20px));
    overflow: hidden;
    pointer-events: none;
}

.tiles-list-shell:has(.tiles-list-contener.active),
.tiles-list-shell:has(.tiles-list-contener.is-animating) {
    pointer-events: auto;
}

.tiles-list-contener {
    position: absolute;
    display: none;
    z-index: 1020;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: auto;
    overflow: auto;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    background-color: transparent;
    overflow-x: hidden;
    /* transform keeps full height; shell clips the off-screen slide */
    transform: translateX(100%);
    transition: transform 0.3s ease;
    will-change: transform;
}

.tiles-list-contener.active,
.tiles-list-contener.is-animating {
    display: flex;
    flex-direction: column;
}

.tiles-list-contener.active {
    transform: translateX(0);
}

.tiles-list-contener .tiles-list-title {
    color: #FFF;
    border-radius: 15px;
    font-size: 15px;
    line-height: 45px;
}

.tiles-list-contener-control {
    text-align: right;
}

.tiles-list-contener .close-tiles-list-contener.bi-x-circle-fill {
    font-size: 25px;
    background-color: #33373B;
    border-radius: 15px;
    padding: 10px;
    margin-right: 15px;
    color: #b4bbc2 !important;
}

.tiles-list-contener .close-tiles-list-contener.bi-x-circle-fill:hover {
    background-color: #2193f3;
    border-radius: 15px;
    padding: 10px;
    align-items: end;
    margin-right: 15px;
    color: #ffffff !important;
}

.tiles-list-contener .close-tiles-list-contener.bi-arrow-right-circle {
    position: absolute;
    font-size: 24px;
    top: 50%;
    left: -14px;
    margin-top: -14px;
    color: #002F67;
    background-color: #fff;
    border-radius: 50%;
}

/* Container - selected device on map */

.select-tile-contener {
    position: absolute;
    display: none;
    z-index: 1020;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(500px, calc(100vw - 24px));
    height: 100%;
    max-width: 500px;
    max-height: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: hidden;
    border: 1px solid rgba(101, 189, 218, 0.12);
    border-bottom: 0;
    border-left: 0;
    border-radius: 0 26px 26px 0;
    background:
        radial-gradient(circle at 0 12%, rgba(45, 212, 191, 0.075), transparent 26%),
        radial-gradient(circle at 100% 72%, rgba(56, 189, 248, 0.065), transparent 32%),
        linear-gradient(90deg, #040d15, #050f18 78%, #06131d);
    box-shadow:
        22px 0 52px -30px rgba(0, 0, 0, 0.98),
        8px 0 24px -18px rgba(56, 189, 248, 0.24),
        inset -1px 0 0 rgba(255, 255, 255, 0.025);
    backdrop-filter: blur(15px) saturate(1.08);
    -webkit-backdrop-filter: blur(15px) saturate(1.08);
    overscroll-behavior: contain;
    scrollbar-width: none;
}

.select-tile-contener::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.select-tile-contener::-webkit-scrollbar-track {
    margin-block: 24px;
    background: transparent;
}

.select-tile-contener::-webkit-scrollbar-thumb {
    min-height: 36px;
    border: 1px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
    background-color: transparent;
    transition: background-color 0.24s ease, box-shadow 0.24s ease;
}

.marker-panel-backdrop {
    position: fixed;
    z-index: 1010;
    inset: 0;
    display: none;
    background: rgba(2, 8, 12, 0.07);
    opacity: 0;
    pointer-events: none;
    backdrop-filter: blur(1.5px);
    -webkit-backdrop-filter: blur(1.5px);
    transition: opacity 0.28s ease;
}

.marker-panel-backdrop.is-active {
    opacity: 1;
    pointer-events: auto;
}

.marker-panel-custom-scrollbar {
    position: fixed;
    z-index: 1032;
    display: none;
    width: 3px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(103, 207, 235, 0.045);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.marker-panel-custom-scrollbar.has-overflow {
    display: block;
}

.marker-panel-custom-scrollbar.is-visible {
    opacity: 1;
}

.marker-panel-custom-scrollbar > i {
    display: block;
    width: 100%;
    min-height: 34px;
    border-radius: inherit;
    background: linear-gradient(
        to bottom,
        rgba(103, 232, 249, 0.18),
        rgba(83, 201, 230, 0.68) 22%,
        rgba(83, 201, 230, 0.68) 78%,
        rgba(103, 232, 249, 0.18)
    );
    box-shadow: 0 0 5px rgba(56, 189, 248, 0.16);
    transition: height 0.12s linear, transform 0.06s linear;
}

.select-tile-contener .marker-main-contener {
    /* Bootstrap .p-3 zostawiał marginesy wokół stopki fundatora — padding tylko w scrollu. */
    padding: var(--safe-top, 0px) var(--safe-right, 0px) var(--safe-bottom, 0px) var(--safe-left, 0px) !important;
}

.select-tile-contener .marker-panel-scroll-body {
    padding: 1rem;
    box-sizing: border-box;
}

.select-tile-contener .marker-main-contener .marker-main-header {
    background-color: #33373B;
    color: #b4bbc2;
    height: 100px;
    border-radius: 15px;
}

.select-tile-contener .marker-main-contener .marker-widget-group {
    /* p-0 m-0 my-3 */
    padding: 0;
    margin: 0;
    margin-top: 20px;
    /* margin-bottom: 20px; */
}

.select-tile-contener .marker-main-contener .marker-widget-group .marker-widget-group-item {
    width: 50%;
}

.marker-atmosphere-widget {
    width: 100%;
    margin-bottom: 14px;
}

.marker-atmosphere-card {
    --atmosphere-border: rgba(146, 208, 255, 0.2);
    position: relative;
    overflow: hidden;
    color: #edf8ff;
    border: 1px solid var(--atmosphere-border);
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(35, 62, 78, 0.96), rgba(17, 30, 40, 0.98) 55%, rgba(21, 39, 50, 0.97));
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.marker-atmosphere-card::before {
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
    background-size: 24px 24px;
    content: "";
    mask-image: linear-gradient(to bottom, black, transparent 85%);
    -webkit-mask-image: linear-gradient(to bottom, black, transparent 85%);
}

.marker-atmosphere-glow {
    position: absolute;
    z-index: 0;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(60px);
    opacity: 0.19;
}

.marker-atmosphere-glow-hot {
    top: 40px;
    left: -75px;
    background: #ff8c42;
}

.marker-atmosphere-glow-cool {
    right: -70px;
    bottom: -50px;
    background: #22b8ff;
}

.marker-atmosphere-header,
.marker-atmosphere-body,
.marker-atmosphere-action {
    position: relative;
    z-index: 1;
}

.marker-atmosphere-header {
    display: flex;
    min-height: 54px;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.marker-atmosphere-heading {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 9px;
}

.marker-atmosphere-heading-icon {
    display: flex;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    color: #ffd166;
    border: 1px solid rgba(255, 209, 102, 0.2);
    border-radius: 11px;
    background: linear-gradient(145deg, rgba(255, 209, 102, 0.18), rgba(255, 142, 66, 0.08));
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.16);
    font-size: 17px;
}

.marker-atmosphere-heading strong,
.marker-atmosphere-heading small {
    display: block;
}

.marker-atmosphere-heading strong {
    overflow: hidden;
    max-width: 175px;
    font-size: 14px;
    line-height: 17px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.marker-atmosphere-heading small {
    margin-top: 2px;
    color: #87a2b2;
    font-size: 9px;
    line-height: 11px;
}

.marker-atmosphere-status {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 5px;
    padding: 5px 7px;
    color: #70e6b5;
    border: 1px solid rgba(70, 230, 181, 0.18);
    border-radius: 999px;
    background: rgba(70, 230, 181, 0.08);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.25px;
    text-transform: uppercase;
}

.marker-atmosphere-status i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 0 rgba(70, 230, 181, 0.55);
    animation: marker-atmosphere-pulse 2s infinite;
}

.marker-atmosphere-status.is-stale {
    color: #f5bd68;
    border-color: rgba(245, 189, 104, 0.2);
    background: rgba(245, 189, 104, 0.08);
}

@keyframes marker-atmosphere-pulse {
    70% { box-shadow: 0 0 0 6px rgba(70, 230, 181, 0); }
    100% { box-shadow: 0 0 0 0 rgba(70, 230, 181, 0); }
}

.marker-atmosphere-body {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    min-height: 190px;
}

.select-tile-contener .marker-main-contener .marker-widget-group .marker-atmosphere-widget .marker-widget-group-item {
    width: auto;
}

.marker-atmosphere-temperature,
.marker-atmosphere-metric {
    cursor: pointer;
    transition: background-color 160ms ease, transform 160ms ease;
}

.marker-atmosphere-temperature:hover,
.marker-atmosphere-metric:hover {
    background-color: rgba(71, 183, 255, 0.08);
}

.marker-atmosphere-temperature:active,
.marker-atmosphere-metric:active {
    transform: scale(0.985);
}

.marker-atmosphere-temperature.is-stale,
.marker-atmosphere-metric.is-stale {
    opacity: 0.62;
}

.marker-atmosphere-temperature {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: space-between;
    padding: 16px 12px 11px;
    border-right: 1px solid rgba(255, 255, 255, 0.07);
}

.marker-atmosphere-temperature-main {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 12px;
}

.marker-atmosphere-thermo-scale {
    position: relative;
    width: 3px;
    height: 84px;
    flex: 0 0 3px;
    border-radius: 3px;
    background: repeating-linear-gradient(to top, rgba(233, 245, 255, 0.28) 0 2px, transparent 2px 7px);
}

.marker-atmosphere-thermo-scale span {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: var(--temperature-level);
    border-radius: 3px;
}

.marker-atmosphere-thermo-scale i {
    position: absolute;
    bottom: var(--temperature-level);
    left: 50%;
    width: 9px;
    height: 9px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #ff8a5c;
    box-shadow: 0 0 9px rgba(255, 138, 92, 0.7);
    transform: translate(-50%, 50%);
}

.marker-atmosphere-temperature-copy {
    min-width: 0;
}

.marker-atmosphere-label {
    display: flex;
    overflow: hidden;
    align-items: center;
    gap: 5px;
    color: #9bb1bd;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.marker-atmosphere-label i {
    color: #ffb15d;
}

.marker-atmosphere-big-value {
    margin: 2px 0 3px;
    color: #fff;
    font-size: 38px;
    font-weight: 300;
    line-height: 45px;
    letter-spacing: -2px;
    text-shadow: 0 4px 18px rgba(255, 143, 72, 0.2);
}

.marker-atmosphere-big-value.is-empty {
    color: #ff7b86;
}

.marker-atmosphere-big-value small {
    margin-left: 3px;
    color: #ffbb73;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    vertical-align: top;
}

.marker-atmosphere-trend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #90a6b4;
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
}

.marker-atmosphere-trend.is-up { color: #62dfab; }
.marker-atmosphere-trend.is-down { color: #ff7b86; }

.marker-atmosphere-range {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 17px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 9px;
    background: rgba(1, 11, 17, 0.22);
}

.marker-atmosphere-range span {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    padding: 5px 2px;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.marker-atmosphere-range span:last-child {
    border-right: 0;
}

.marker-atmosphere-range small {
    color: #708b9b;
    font-size: 7px;
    line-height: 9px;
}

.marker-atmosphere-range strong {
    color: #dcebf3;
    font-size: 10px;
    line-height: 13px;
}

.marker-atmosphere-secondary {
    display: grid;
    grid-template-rows: 1fr 1fr;
    min-width: 0;
}

.marker-atmosphere-metric {
    min-width: 0;
    padding: 10px;
}

.marker-atmosphere-metric:first-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.marker-atmosphere-metric-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.marker-atmosphere-metric-icon {
    display: flex;
    width: 23px;
    height: 23px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 11px;
}

.marker-atmosphere-humidity .marker-atmosphere-metric-icon {
    color: #5ed3ff;
    background: rgba(54, 190, 244, 0.12);
}

.marker-atmosphere-pressure .marker-atmosphere-metric-icon {
    color: #bca9ff;
    background: rgba(153, 127, 255, 0.12);
}

.marker-atmosphere-metric-content {
    display: flex;
    align-items: center;
    gap: 8px;
}

.marker-atmosphere-humidity-ring {
    display: grid;
    width: 45px;
    height: 45px;
    flex: 0 0 45px;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(#4cc9f0 var(--humidity-level), rgba(76, 201, 240, 0.12) 0);
}

.marker-atmosphere-humidity-ring::before {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #1a2b35;
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.35);
    content: "";
}

.marker-atmosphere-humidity-ring span {
    position: absolute;
    color: #f0fbff;
    font-size: 13px;
    font-weight: 700;
}

.marker-atmosphere-humidity-ring small {
    color: #6fd9ff;
    font-size: 7px;
}

.marker-atmosphere-metric-content > div:last-child,
.marker-atmosphere-metric-caption {
    overflow: hidden;
    min-width: 0;
}

.marker-atmosphere-metric-content strong,
.marker-atmosphere-metric-content small,
.marker-atmosphere-metric-caption strong,
.marker-atmosphere-metric-caption small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.marker-atmosphere-metric-content strong,
.marker-atmosphere-metric-caption strong {
    color: #dceaf1;
    font-size: 9px;
    line-height: 12px;
}

.marker-atmosphere-metric-content small,
.marker-atmosphere-metric-caption small {
    color: #708b9b;
    font-size: 8px;
    line-height: 11px;
}

.marker-atmosphere-pressure-value {
    margin-top: -3px;
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    line-height: 27px;
    letter-spacing: -0.8px;
}

.marker-atmosphere-pressure-value small {
    margin-left: 3px;
    color: #bca9ff;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0;
}

.marker-atmosphere-pressure-scale {
    position: relative;
    height: 4px;
    margin: 2px 0 5px;
    border-radius: 4px;
    background: linear-gradient(90deg, rgba(76, 201, 240, 0.35), rgba(188, 169, 255, 0.85), rgba(255, 143, 102, 0.45));
}

.marker-atmosphere-pressure-scale i {
    position: absolute;
    top: 50%;
    left: var(--pressure-level);
    width: 8px;
    height: 8px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #9e88f5;
    box-shadow: 0 0 9px rgba(158, 136, 245, 0.7);
    transform: translate(-50%, -50%);
}

.marker-atmosphere-action {
    padding: 5px 10px 6px;
    color: #607d8b;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 7px;
    text-align: center;
    text-transform: uppercase;
}

.marker-atmosphere-action i {
    margin-right: 4px;
    color: #4cc9f0;
}

/* Atmosphere widget — compact merged layout: temp + barometer on top, full-width humidity bar below. */
.marker-atmosphere-body {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    grid-template-areas:
        "temperature gauge"
        "bar bar";
    grid-template-rows: auto auto;
    min-height: 0;
}

.marker-atmosphere-body.is-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 218px;
}

.marker-atmosphere-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 20px 12px;
    color: #7d99a9;
}

.marker-atmosphere-empty i {
    color: rgba(245, 189, 104, 0.75);
    font-size: 26px;
    filter: drop-shadow(0 0 10px rgba(245, 189, 104, 0.25));
}

.marker-atmosphere-empty span {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.marker-atmosphere-temperature {
    grid-area: temperature;
    justify-content: center;
    padding: 12px 8px 6px 12px;
    border-right: 0;
}

.marker-atmosphere-gauge-metric {
    grid-area: gauge;
}

.marker-atmosphere-bar-metric {
    grid-area: bar;
}

.marker-atmosphere-metric {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.marker-atmosphere-temperature-main {
    gap: 14px;
}

.marker-atmosphere-thermo-scale {
    margin-left: 27px;
}

.marker-atmosphere-thermo-tick {
    position: absolute;
    right: calc(100% + 5px);
    bottom: var(--tick-level);
    display: flex;
    align-items: center;
    gap: 3px;
    color: #8ba4b2;
    font-size: 7px;
    font-style: normal;
    line-height: 8px;
    white-space: nowrap;
    transform: translateY(50%);
}

.marker-atmosphere-thermo-tick::after {
    width: 5px;
    height: 1px;
    background: rgba(229, 245, 255, 0.4);
    content: "";
}

.marker-atmosphere-thermo-tick b {
    font-weight: 700;
}

/* Kolumna obok wartości temperatury: trend nad jednostką. */
.marker-atmosphere-big-value {
    display: flex;
    align-items: stretch;
}

.marker-atmosphere-big-value-side {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 3px;
    margin-left: 11px;
    padding: 2px 0 3px;
}

.marker-atmosphere-big-value-side .marker-atmosphere-trend {
    gap: 5px;
    font-size: 16px;
    line-height: 16px;
    letter-spacing: 0.2px;
}

.marker-atmosphere-big-value-side .marker-atmosphere-trend i {
    font-size: 14px;
}

.marker-atmosphere-big-value .marker-atmosphere-big-value-side small {
    margin-left: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 13px;
    vertical-align: baseline;
}

/* Barometr — łuk z igłą i znacznikami min/śr./max. */
.marker-atmosphere-gauge-metric .marker-atmosphere-metric-content {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-top: 0;
}

.marker-atmosphere-round-gauge {
    position: relative;
    width: 148px;
    height: 148px;
}

.marker-atmosphere-round-gauge .marker-atmosphere-trend {
    justify-content: center;
    margin-top: 2px;
}

.marker-atmosphere-gauge-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.marker-atmosphere-gauge-svg path {
    fill: none;
    stroke-width: 6;
    stroke-linecap: round;
}

.marker-atmosphere-gauge-svg .dial-tick {
    stroke: rgba(233, 245, 255, 0.16);
    stroke-width: 1;
}

.marker-atmosphere-gauge-svg .gauge-face {
    fill: rgba(6, 18, 26, 0.6);
}

.marker-atmosphere-gauge-svg line {
    stroke: #e8f0ff;
    stroke-width: 1.5;
}

.marker-atmosphere-gauge-svg text {
    fill: #8ba4b2;
    font-size: 8px;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: central;
}

.marker-atmosphere-gauge-value {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #dcd6f5;
    font-size: 23px;
    font-weight: 700;
    line-height: 1;
}

.marker-atmosphere-gauge-value em {
    margin-top: 3px;
    color: #7d99a9;
    font-size: 8px;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.marker-atmosphere-gauge-value.is-empty {
    color: #ff7b86;
}

.marker-atmosphere-gauge-value small {
    margin-top: 2px;
    color: #8fa9b8;
    font-size: 8px;
    font-weight: 700;
}

/* Wilgotność — niebieski pasek na dole, na całą szerokość. */
.marker-atmosphere-bar-metric {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 4px 14px 6px 12px;
}

.marker-atmosphere-bar-primary {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
}

.marker-atmosphere-bar-icon {
    display: flex;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    align-items: center;
    justify-content: center;
    color: #5ed3ff;
    border-radius: 8px;
    background: rgba(54, 190, 244, 0.14);
    font-size: 13px;
}

.marker-atmosphere-bar-value {
    flex: 0 0 auto;
    margin: 0;
    color: #4cc9f0;
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: -0.8px;
    text-shadow: 0 3px 16px rgba(76, 201, 240, 0.22);
}

.marker-atmosphere-bar-value.is-empty {
    color: #ff7b86;
}

.marker-atmosphere-bar-value small {
    margin-left: 3px;
    color: #6fd9ff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
}

.marker-atmosphere-bar-scale {
    position: relative;
    flex: 1 1 auto;
    height: 5px;
    margin: 0 6px 22px 2px;
    align-self: center;
    border-radius: 4px;
    background: linear-gradient(90deg, rgba(76, 201, 240, 0.18), rgba(76, 201, 240, 0.95));
}

.marker-atmosphere-bar-scale i {
    position: absolute;
    top: 50%;
    left: var(--marker-level);
    width: 9px;
    height: 9px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #4cc9f0;
    box-shadow: 0 0 9px rgba(76, 201, 240, 0.7);
    transform: translate(-50%, -50%);
}

.marker-atmosphere-scale-tick {
    position: absolute;
    top: 100%;
    left: var(--tick-level);
    display: flex;
    align-items: baseline;
    gap: 3px;
    padding: 2px 6px;
    margin-top: 7px;
    border: 1px solid rgba(109, 213, 237, 0.18);
    border-radius: 7px;
    background: rgba(2, 18, 27, 0.72);
    font-style: normal;
    white-space: nowrap;
    transform: translateX(-50%);
}

.marker-atmosphere-scale-tick::before {
    position: absolute;
    top: -6px;
    left: 50%;
    width: 2px;
    height: 5px;
    border-radius: 2px;
    background: rgba(232, 247, 255, 0.65);
    content: "";
    transform: translateX(-50%);
}

.marker-atmosphere-scale-tick small {
    color: #7fa3b5;
    font-size: 7px;
    line-height: 9px;
    letter-spacing: 0.3px;
}

.marker-atmosphere-scale-tick b {
    color: #a9e4fb;
    font-size: 9px;
    font-weight: 700;
    line-height: 10px;
}

/* Atmosphere 2-in-1: two vertical gauges above a full-width pressure gradient. */
.marker-atmosphere-body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
        "temperature humidity"
        "pressure pressure";
    grid-template-rows: 184px 108px;
}

.marker-atmosphere-temperature {
    min-height: 184px;
    padding: 14px 12px 10px;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.marker-atmosphere-temperature-main {
    justify-content: center;
    gap: 17px;
}

.marker-atmosphere-thermo-scale {
    width: 5px;
    height: 118px;
    flex-basis: 5px;
    margin-left: 30px;
    background: rgba(255, 255, 255, 0.06);
}

.marker-atmosphere-thermo-scale span {
    height: 100%;
    border-radius: 5px;
    box-shadow: 0 0 12px rgba(255, 145, 83, 0.24);
}

.marker-atmosphere-thermo-scale i {
    width: 12px;
    height: 12px;
    border-width: 3px;
}

.marker-atmosphere-thermo-tick {
    right: calc(100% + 7px);
    font-size: 9px;
    line-height: 11px;
}

.marker-atmosphere-thermo-tick b {
    font-size: 13px;
    font-weight: 800;
    line-height: 15px;
    text-shadow: 0 0 9px currentColor;
}

.marker-atmosphere-big-value {
    font-weight: 400;
    text-shadow: 0 4px 20px currentColor;
}

.marker-atmosphere-humidity-metric {
    grid-area: humidity;
    min-height: 184px;
    padding: 14px 12px 10px;
}

.marker-atmosphere-humidity-main {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    gap: 22px;
}

.marker-atmosphere-humidity-copy {
    display: flex;
    min-width: 70px;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
}

.marker-atmosphere-humidity-value {
    color: #5edcff;
    font-size: 40px;
    font-weight: 500;
    line-height: 44px;
    letter-spacing: -1.8px;
    text-shadow: 0 4px 20px rgba(94, 220, 255, 0.3);
}

.marker-atmosphere-humidity-value.is-empty {
    color: #ff7b86;
}

.marker-atmosphere-humidity-value small {
    margin-left: 3px;
    color: #7ce5ff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0;
    vertical-align: top;
}

.marker-atmosphere-humidity-copy .marker-atmosphere-trend {
    font-size: 10px;
}

.marker-atmosphere-humidity-scale {
    position: relative;
    width: 5px;
    height: 118px;
    flex: 0 0 5px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.06);
}

.marker-atmosphere-humidity-scale > span {
    position: absolute;
    inset: 0;
    border-radius: 5px;
    background: linear-gradient(to top, #2450a8 0%, #238fc7 48%, #63ecff 100%);
    box-shadow: 0 0 12px rgba(76, 201, 240, 0.28);
}

.marker-atmosphere-humidity-scale > i {
    position: absolute;
    z-index: 2;
    bottom: var(--humidity-level);
    left: 50%;
    width: 12px;
    height: 12px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 12px #fff, 0 0 18px rgba(76, 201, 240, 0.95);
    transform: translate(-50%, 50%);
}

.marker-atmosphere-humidity-tick {
    position: absolute;
    bottom: var(--tick-level);
    left: calc(100% + 8px);
    display: flex;
    align-items: center;
    gap: 4px;
    color: #8bdff5;
    font-size: 9px;
    font-style: normal;
    line-height: 11px;
    white-space: nowrap;
    transform: translateY(50%);
}

.marker-atmosphere-humidity-tick::before {
    width: 5px;
    height: 1px;
    background: rgba(163, 231, 249, 0.5);
    content: "";
}

.marker-atmosphere-humidity-tick b {
    font-size: 11px;
    font-weight: 700;
    line-height: 13px;
}

.marker-atmosphere-pressure-metric {
    display: flex;
    min-height: 108px;
    flex-direction: column;
    grid-area: pressure;
    justify-content: center;
    padding: 11px 16px 13px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.marker-atmosphere-pressure-summary {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.marker-atmosphere-pressure-primary {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 9px;
}

.marker-atmosphere-pressure-value {
    margin: 0;
    color: #ceb1ff;
    font-size: 31px;
    font-weight: 650;
    line-height: 36px;
    letter-spacing: -1px;
    text-shadow: 0 4px 18px rgba(199, 160, 255, 0.25);
}

.marker-atmosphere-pressure-value.is-empty {
    color: #ff7b86;
}

.marker-atmosphere-pressure-value small {
    margin-left: 4px;
    color: #b995f6;
    font-size: 11px;
}

.marker-atmosphere-pressure-stats {
    display: grid;
    overflow: hidden;
    grid-template-columns: repeat(3, minmax(48px, 1fr));
    border: 1px solid rgba(202, 171, 255, 0.13);
    border-radius: 9px;
    background: rgba(137, 105, 205, 0.07);
}

.marker-atmosphere-pressure-stats span {
    display: flex;
    min-width: 48px;
    flex-direction: column;
    align-items: center;
    padding: 4px 7px;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.marker-atmosphere-pressure-stats span:last-child {
    border-right: 0;
}

.marker-atmosphere-pressure-stats small {
    color: #746d91;
    font-size: 7px;
    line-height: 9px;
}

.marker-atmosphere-pressure-stats strong {
    margin-top: 1px;
    color: #ded7f5;
    font-size: 11px;
    line-height: 13px;
}

.marker-atmosphere-pressure-gradient {
    position: relative;
    width: 100%;
    height: 8px;
    margin-top: 14px;
    border-radius: 999px;
    background: linear-gradient(90deg, #45dcf4 0%, #62cfea 24%, #9aaeff 48%, #cf8ee7 73%, #f4609e 100%);
    box-shadow: 0 0 14px rgba(150, 155, 255, 0.2);
}

.marker-atmosphere-pressure-gradient i {
    position: absolute;
    top: 50%;
    left: var(--pressure-level);
    width: 15px;
    height: 15px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 10px #fff, 0 0 18px rgba(207, 142, 231, 0.85);
    transform: translate(-50%, -50%);
}

/* Final compact layout: temperature and humidity stacked beside the barometer. */
.marker-atmosphere-body {
    grid-template-columns: minmax(0, 1.18fr) minmax(184px, 0.82fr);
    grid-template-areas: "readings gauge";
    grid-template-rows: 196px;
    min-height: 196px;
}

.marker-atmosphere-readings {
    display: grid;
    min-width: 0;
    grid-area: readings;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.select-tile-contener .marker-main-contener .marker-widget-group .marker-atmosphere-readings .marker-widget-group-item {
    width: 100%;
    grid-area: auto;
    justify-self: stretch;
}

.marker-atmosphere-readings .marker-atmosphere-temperature,
.marker-atmosphere-readings .marker-atmosphere-humidity-metric {
    min-height: 0;
    padding: 7px 12px;
    border: 0;
}

.marker-atmosphere-readings .marker-atmosphere-temperature {
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.marker-atmosphere-readings .marker-atmosphere-temperature-main,
.marker-atmosphere-readings .marker-atmosphere-humidity-main {
    height: 100%;
    justify-content: center;
    gap: 18px;
}

.marker-atmosphere-readings .marker-atmosphere-thermo-scale,
.marker-atmosphere-readings .marker-atmosphere-humidity-scale {
    width: 5px;
    height: 74px;
    flex: 0 0 5px;
    margin-left: 35px;
}

.marker-atmosphere-readings .marker-atmosphere-humidity-scale {
    order: -1;
}

.marker-atmosphere-readings .marker-atmosphere-big-value,
.marker-atmosphere-readings .marker-atmosphere-humidity-value {
    font-size: 38px;
    line-height: 42px;
}

.marker-atmosphere-readings .marker-atmosphere-humidity-copy,
.marker-atmosphere-readings .marker-atmosphere-temperature-copy {
    min-width: 94px;
}

.marker-atmosphere-readings .marker-atmosphere-humidity-copy {
    gap: 2px;
}

.marker-atmosphere-readings .marker-atmosphere-humidity-tick {
    right: calc(100% + 7px);
    left: auto;
    flex-direction: row-reverse;
}

.marker-atmosphere-readings .marker-atmosphere-humidity-tick::before {
    flex: 0 0 5px;
}

.marker-atmosphere-gauge-metric {
    display: flex;
    width: 100%;
    min-height: 196px;
    align-items: center;
    grid-area: gauge;
    justify-content: center;
    padding: 3px 6px;
    border: 0;
}

.marker-atmosphere-gauge-metric .marker-atmosphere-metric-content {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.marker-atmosphere-gauge-metric .marker-atmosphere-round-gauge {
    width: 184px;
    height: 184px;
}

.marker-atmosphere-gauge-metric .marker-atmosphere-gauge-svg path {
    stroke-width: 6.5;
}

.marker-atmosphere-gauge-metric .marker-atmosphere-gauge-svg .gauge-face {
    fill: rgba(10, 14, 31, 0.72);
    stroke: rgba(176, 151, 255, 0.08);
}

.marker-atmosphere-gauge-metric .marker-atmosphere-gauge-value {
    font-size: 27px;
    text-shadow: 0 0 18px currentColor;
}

.marker-atmosphere-gauge-metric .marker-atmosphere-gauge-value small {
    color: #bba7f4;
    font-size: 9px;
}

/* Combined atmosphere readout: scales on the outside, values stacked in the middle. */
.marker-atmosphere-readings {
    grid-template-columns: 76px minmax(116px, 1fr) 52px;
    grid-template-rows: repeat(2, minmax(0, 1fr));
}

.select-tile-contener .marker-main-contener .marker-widget-group .marker-atmosphere-readings .marker-widget-group-item,
.marker-atmosphere-readings .marker-atmosphere-temperature-main,
.marker-atmosphere-readings .marker-atmosphere-humidity-main {
    display: contents;
}

.marker-atmosphere-readings .marker-atmosphere-thermo-scale {
    width: 5px;
    height: 142px;
    align-self: center;
    grid-column: 1;
    grid-row: 1 / 3;
    justify-self: end;
    margin: 0 9px 0 0;
}

.marker-atmosphere-readings .marker-atmosphere-temperature-copy {
    align-self: end;
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    padding-bottom: 4px;
}

.marker-atmosphere-readings .marker-atmosphere-humidity-copy {
    align-self: start;
    grid-column: 2;
    grid-row: 2;
    justify-self: center;
    padding-top: 4px;
}

.marker-atmosphere-readings .marker-atmosphere-humidity-scale {
    width: 5px;
    height: 142px;
    align-self: center;
    grid-column: 3;
    grid-row: 1 / 3;
    justify-self: start;
    order: initial;
    margin: 0 0 0 9px;
}

.marker-atmosphere-readings .marker-atmosphere-big-value,
.marker-atmosphere-readings .marker-atmosphere-humidity-value {
    font-size: 38px;
    line-height: 40px;
}

.marker-atmosphere-readings .marker-atmosphere-humidity-copy .marker-atmosphere-trend {
    align-self: center;
}

/* Reference layout: temperature with humidity below, barometer on the right. */
.marker-atmosphere-body {
    grid-template-columns: minmax(0, 1.14fr) minmax(188px, 0.86fr);
    grid-template-areas: "temperature gauge";
    grid-template-rows: 178px;
    min-height: 178px;
}

.select-tile-contener .marker-main-contener .marker-widget-group .marker-atmosphere-temperature,
.select-tile-contener .marker-main-contener .marker-widget-group .marker-atmosphere-gauge-metric {
    width: 100%;
}

.marker-atmosphere-temperature {
    min-height: 178px;
    grid-area: temperature;
    padding: 13px 10px 11px;
    border-right: 1px solid rgba(92, 194, 222, 0.12);
}

.marker-atmosphere-temperature-main {
    height: 100%;
    justify-content: center;
    gap: 22px;
}

.marker-atmosphere-temperature .marker-atmosphere-thermo-scale {
    width: 5px;
    height: 132px;
    flex: 0 0 5px;
    margin-left: 39px;
}

.marker-atmosphere-temperature-copy {
    display: flex;
    min-width: 128px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.marker-atmosphere-temperature .marker-atmosphere-big-value {
    font-size: 50px;
    font-weight: 400;
    line-height: 54px;
    letter-spacing: -2.2px;
}

.marker-atmosphere-temperature .marker-atmosphere-big-value-side {
    margin-left: 7px;
    padding-bottom: 7px;
    justify-content: flex-end;
}

.marker-atmosphere-temperature .marker-atmosphere-big-value .marker-atmosphere-big-value-side small {
    font-size: 14px;
    font-weight: 700;
    line-height: 16px;
}

.marker-atmosphere-reference-humidity {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 4px;
    padding-left: 3px;
    white-space: nowrap;
}

.marker-atmosphere-reference-humidity span {
    color: #728d9c;
    font-size: 9px;
    font-weight: 600;
}

.marker-atmosphere-reference-humidity strong {
    color: #55d9f2;
    font-size: 12px;
    font-weight: 800;
    text-shadow: 0 0 10px rgba(85, 217, 242, 0.32);
}

.marker-atmosphere-reference-humidity.is-stale {
    opacity: 0.52;
}

.marker-atmosphere-gauge-metric {
    min-height: 178px;
    padding: 2px 5px;
}

.marker-atmosphere-gauge-metric .marker-atmosphere-round-gauge {
    width: 174px;
    height: 174px;
}

.marker-atmosphere-gauge-metric .marker-atmosphere-gauge-svg .gauge-face {
    fill: rgba(2, 23, 31, 0.74);
    stroke: rgba(95, 224, 187, 0.1);
}

.marker-atmosphere-gauge-metric .marker-atmosphere-gauge-value {
    font-size: 27px;
    text-shadow: 0 0 17px currentColor;
}

.marker-atmosphere-gauge-metric .marker-atmosphere-gauge-value small {
    color: #9bcf91;
}

.marker-atmosphere-gauge-metric .marker-atmosphere-gauge-value em {
    margin-top: 4px;
    color: #5e7c87;
    font-size: 8px;
}

/* Refined Glass — interior ported from the standalone weather widget. */
.marker-atmosphere-card {
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.72), rgba(11, 16, 28, 0.95));
    box-shadow:
        0 30px 60px -15px rgba(0, 0, 0, 0.7),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

.marker-atmosphere-body {
    display: block;
    min-height: 196px;
}

.marker-atmosphere-glass-grid {
    position: relative;
    z-index: 2;
    display: grid;
    width: 100%;
    height: 196px;
    align-items: center;
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr) 1px minmax(0, 1fr);
    padding: 0 12px;
}

.marker-atmosphere-glass-temperature,
.marker-atmosphere-glass-humidity,
.marker-atmosphere-glass-pressure {
    min-width: 0;
}

.marker-atmosphere-glass-temperature {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 0 7px 0 2px;
}

.marker-atmosphere-glass-thermometer {
    position: relative;
    overflow: hidden;
    width: 9px;
    height: 70px;
    flex: 0 0 9px;
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 999px;
    background: rgba(8, 12, 22, 0.86);
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.7);
}

.marker-atmosphere-glass-thermometer > span {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, #3b82f6 0%, #22c55e 34.5%, #facc15 65.5%, #ef4444 86.2%, #c026d3 100%);
}

.marker-atmosphere-glass-thermometer > b {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    left: 0;
    background: rgba(8, 12, 22, 0.86);
}

.marker-atmosphere-glass-thermometer > i {
    position: absolute;
    z-index: 2;
    right: -1px;
    left: -1px;
    height: 2.5px;
    border-radius: 999px;
    background: #fff;
}

.marker-atmosphere-glass-copy > small,
.marker-atmosphere-glass-pressure > small,
.marker-atmosphere-glass-ring-value > small {
    color: #64748b;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.marker-atmosphere-glass-value {
    display: flex;
    align-items: flex-end;
    margin-top: 5px;
    color: #fff;
    font-weight: 700;
    line-height: 0.9;
    transition: transform 0.35s ease;
    transform-origin: left center;
}

.marker-atmosphere-glass-value strong {
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -1.2px;
}

.marker-atmosphere-glass-value span {
    margin: 0 0 3px 3px;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 700;
}

.marker-atmosphere-glass-value.is-empty {
    color: #ff7b86;
}

.marker-atmosphere-glass-copy .marker-atmosphere-trend,
.marker-atmosphere-glass-pressure .marker-atmosphere-trend {
    margin-top: 6px;
    font-size: 8px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.marker-atmosphere-glass-range,
.marker-atmosphere-glass-pressure-range {
    opacity: 0;
    color: #94a3b8;
    font-size: 9px;
    transition: opacity 0.35s ease;
}

.marker-atmosphere-glass-range {
    display: flex;
    gap: 8px;
    margin-top: 7px;
    line-height: 1.5;
    white-space: nowrap;
}

.marker-atmosphere-glass-range.is-centered {
    justify-content: center;
    margin-top: 2px;
}

.marker-atmosphere-card:hover .marker-atmosphere-glass-range,
.marker-atmosphere-card:hover .marker-atmosphere-glass-pressure-range {
    opacity: 1;
}

.marker-atmosphere-card:hover .marker-atmosphere-glass-value {
    transform: scale(0.9);
}

.marker-atmosphere-glass-divider {
    width: 1px;
    height: 88px;
    background: linear-gradient(to bottom, transparent, rgba(148, 163, 184, 0.3), transparent);
}

.marker-atmosphere-glass-humidity {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.marker-atmosphere-glass-ring {
    position: relative;
    width: 96px;
    height: 96px;
}

.marker-atmosphere-glass-ring svg {
    position: absolute;
    inset: 0;
    width: 96px;
    height: 96px;
}

.marker-atmosphere-glass-ring .ring-track,
.marker-atmosphere-glass-ring .ring-fill {
    fill: none;
    stroke-linecap: round;
    stroke-width: 8;
    transform: rotate(135deg);
    transform-origin: 50px 50px;
}

.marker-atmosphere-glass-ring .ring-track {
    stroke: #1e293b;
    stroke-dasharray: 188.5 251.33;
}

.marker-atmosphere-glass-ring .ring-fill {
    stroke: url(#markerAtmosphereHumidityGradient);
    filter: drop-shadow(0 0 5px rgba(59, 130, 246, 0.5));
}

.marker-atmosphere-glass-ring .ring-dot {
    transform-origin: 50px 50px;
}

.marker-atmosphere-glass-ring .ring-dot circle {
    fill: #fff;
    stroke: #38bdf8;
    stroke-width: 2;
}

.marker-atmosphere-glass-ring-value {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.marker-atmosphere-glass-ring-value > small {
    margin-bottom: 1px;
    letter-spacing: 0.12em;
}

.marker-atmosphere-glass-ring-value > div {
    display: flex;
    align-items: baseline;
    color: #fff;
    font-weight: 700;
    line-height: 0.9;
}

.marker-atmosphere-glass-ring-value strong {
    font-size: 30px;
}

.marker-atmosphere-glass-ring-value span {
    margin-left: 1px;
    color: #60a5fa;
    font-size: 13px;
}

.marker-atmosphere-glass-pressure {
    padding: 0 2px 0 8px;
}

.marker-atmosphere-glass-pressure-scale {
    position: relative;
    width: 100%;
    height: 7px;
    margin-top: 9px;
    border-radius: 999px;
    background: linear-gradient(90deg, #ec4899 0%, #22c55e 63.25%, #ec4899 100%);
    opacity: 0.9;
}

.marker-atmosphere-glass-pressure-scale > span,
.marker-atmosphere-glass-pressure-scale > b,
.marker-atmosphere-glass-pressure-scale > em,
.marker-atmosphere-glass-pressure-scale > i {
    position: absolute;
}

.marker-atmosphere-glass-pressure-scale > span {
    inset: 0;
    border-radius: inherit;
}

.marker-atmosphere-glass-pressure-scale > b {
    inset: 0;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.4);
    filter: blur(1px);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.marker-atmosphere-glass-pressure-scale > em {
    top: -2px;
    bottom: -2px;
    width: 2px;
    background: rgba(255, 255, 255, 0.7);
    opacity: 0;
    transform: translateX(-50%);
    transition: opacity 0.35s ease;
}

.marker-atmosphere-glass-pressure-scale > i {
    z-index: 3;
    top: 50%;
    width: 11px;
    height: 11px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #fff;
    transform: translate(-50%, -50%);
}

.marker-atmosphere-card:hover .marker-atmosphere-glass-pressure-scale > b,
.marker-atmosphere-card:hover .marker-atmosphere-glass-pressure-scale > em {
    opacity: 1;
}

.marker-atmosphere-glass-pressure-range {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 8.5px;
}

.marker-atmosphere-glass-temperature.is-stale,
.marker-atmosphere-glass-humidity.is-stale,
.marker-atmosphere-glass-pressure.is-stale {
    opacity: 0.52;
}

/* 1c — Minimal Dashboard from the standalone widget. */
.marker-atmosphere-card {
    border: 1px solid rgba(109, 213, 237, 0.2);
    border-radius: 19px;
    background:
        radial-gradient(circle at 8% 10%, rgba(251, 146, 60, 0.1), transparent 28%),
        radial-gradient(circle at 94% 92%, rgba(59, 130, 246, 0.13), transparent 34%),
        linear-gradient(138deg, rgba(25, 39, 52, 0.96), rgba(7, 15, 24, 0.98));
    box-shadow:
        0 22px 46px -18px rgba(0, 0, 0, 0.78),
        0 0 28px rgba(42, 154, 196, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.marker-atmosphere-card::after {
    position: absolute;
    z-index: 0;
    inset: 0;
    opacity: 0.16;
    background-image:
        linear-gradient(rgba(115, 190, 214, 0.09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(115, 190, 214, 0.09) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
    content: "";
    mask-image: linear-gradient(to bottom, black, transparent 78%);
    -webkit-mask-image: linear-gradient(to bottom, black, transparent 78%);
}

.marker-atmosphere-glow {
    display: block;
    opacity: 0.7;
}

.marker-atmosphere-minimal-header {
    min-height: 64px;
    padding: 11px 14px;
    border-bottom: 1px solid rgba(109, 213, 237, 0.1);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.025), transparent);
}

.marker-atmosphere-minimal-header .marker-atmosphere-heading strong {
    color: #f3fbff;
    font-size: 14px;
    letter-spacing: 0.01em;
}

.marker-atmosphere-minimal-header .marker-atmosphere-heading small {
    display: block;
    margin-top: 3px;
    color: #7894a3;
    font-size: 9px;
}

.marker-atmosphere-minimal-header .marker-atmosphere-heading small i {
    margin-right: 3px;
    color: #6ea7ba;
}

.marker-atmosphere-minimal-header .marker-atmosphere-heading-icon {
    border-color: rgba(251, 191, 36, 0.28);
    background: linear-gradient(145deg, rgba(251, 191, 36, 0.14), rgba(251, 146, 60, 0.05));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 16px rgba(251, 191, 36, 0.08);
}

.marker-atmosphere-minimal-header .marker-atmosphere-status {
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid rgba(52, 211, 153, 0.28);
    border-radius: 999px;
    background: rgba(6, 78, 59, 0.26);
    color: #53ddb0;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 0 14px rgba(52, 211, 153, 0.08);
}

.marker-atmosphere-minimal-header .marker-atmosphere-status i {
    width: 6px;
    height: 6px;
    background: #34d399;
}

.marker-atmosphere-minimal-header .marker-atmosphere-status.is-stale {
    border-color: rgba(251, 191, 36, 0.34);
    background: rgba(120, 78, 8, 0.24);
    color: #fbbf24;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 0 15px rgba(251, 191, 36, 0.1);
}

.marker-atmosphere-minimal-header .marker-atmosphere-status.is-stale i {
    width: auto;
    height: auto;
    border-radius: 0;
    background: transparent;
    color: #fbbf24;
    font-size: 10px;
    box-shadow: none;
    animation: none;
}

.marker-atmosphere-body {
    min-height: 150px;
}

.marker-atmosphere-minimal-grid {
    position: relative;
    z-index: 2;
    display: grid;
    height: 150px;
    align-content: start;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 20px 10px 0;
}

.marker-atmosphere-minimal-metric {
    position: relative;
    min-width: 0;
}

.marker-atmosphere-minimal-metric + .marker-atmosphere-minimal-metric {
    padding-left: 9px;
    border-left: 1px solid rgba(255, 255, 255, 0.09);
}

.marker-atmosphere-minimal-label {
    display: flex;
    min-height: 24px;
    align-items: flex-start;
    justify-content: space-between;
}

.marker-atmosphere-minimal-label > span:first-child {
    padding-top: 1px;
    color: #64748b;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.marker-atmosphere-minimal-metric > .marker-parameter-age {
    position: absolute;
    top: 19px;
    left: 0;
    max-width: calc(100% - 4px);
    font-size: 9px;
}

.marker-atmosphere-minimal-trend {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    min-width: 24px;
    flex-direction: column;
    align-items: center;
    padding: 0 1px;
    color: #64748b;
    white-space: nowrap;
}

.marker-atmosphere-minimal-trend svg {
    width: 22px;
    height: 18px;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 4px currentColor);
}

.marker-atmosphere-minimal-trend b {
    position: absolute;
    z-index: 4;
    top: 19px;
    right: 0;
    overflow: hidden;
    max-height: 0;
    padding: 0 2px;
    border-radius: 3px;
    background: rgba(7, 15, 24, 0.9);
    opacity: 0;
    font-size: 7px;
    font-weight: 800;
    line-height: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transform: translateY(-3px);
    transition: opacity 0.18s ease, transform 0.18s ease, max-height 0.18s ease;
}

.marker-atmosphere-card:hover .marker-atmosphere-minimal-trend b,
.marker-atmosphere-widget:hover .marker-atmosphere-minimal-trend b,
.marker-atmosphere-widget.is-details-visible .marker-atmosphere-minimal-trend b,
.marker-atmosphere-minimal-metric:hover .marker-atmosphere-minimal-trend b {
    max-height: 12px;
    opacity: 1;
    transform: translateY(0);
}

.marker-atmosphere-minimal-trend.is-up {
    color: #34d399;
}

.marker-atmosphere-minimal-trend.is-down {
    color: #fb7185;
}

.marker-atmosphere-minimal-value {
    display: flex;
    height: 35px;
    align-items: flex-start;
    margin-top: 6px;
    color: #f8fafc;
    font-weight: 700;
    line-height: 0.9;
    transition:
        height 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    transform-origin: left top;
}

.marker-atmosphere-minimal-value strong {
    font-size: 39px;
    font-weight: 700;
    letter-spacing: -1.7px;
}

.marker-atmosphere-minimal-value span {
    margin: 3px 0 0 3px;
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
}

.marker-atmosphere-minimal-metric:last-child .marker-atmosphere-minimal-value {
    align-items: flex-end;
}

.marker-atmosphere-minimal-metric:last-child .marker-atmosphere-minimal-value span {
    margin: 0 0 2px 3px;
    font-size: 11px;
}

.marker-atmosphere-minimal-value.is-empty {
    color: #ff7b86;
}

.marker-atmosphere-minimal-scale {
    position: relative;
    width: 100%;
    height: 6px;
    margin-top: 16px;
    overflow: visible;
    border-radius: 999px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
    opacity: 0.92;
}



.marker-atmosphere-minimal-scale.is-pressure {
    background: linear-gradient(90deg, #38bdf8 0%, #34d399 63.25%, #fbbf24 100%);
}

.marker-atmosphere-minimal-scale > b,
.marker-atmosphere-minimal-scale > em,
.marker-atmosphere-minimal-scale > i {
    position: absolute;
}

.marker-atmosphere-minimal-scale > b,
.marker-atmosphere-minimal-scale > em {
    top: -3px;
    bottom: -3px;
    width: 2px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.55);
    opacity: 0;
    transform: translateX(-50%);
    transition: opacity 0.35s ease;
}

.marker-atmosphere-minimal-scale > i {
    z-index: 3;
    top: 50%;
    width: 12px;
    height: 12px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #fff;
    transform: translate(-50%, -50%);
}


/* Rysunki pomiarów atmosferycznych: termometr, kropla z parą wodną i słupki
   barometru dzielą tę samą siatkę 156x156, więc stoją na wspólnej linii bazowej. */
.marker-atmosphere-figure {
    display: block;
    width: 100%;
    max-width: 180px;
    margin: -14px auto -8px;
}

.marker-atmosphere-figure svg {
    display: block;
    width: 100%;
    height: 100px;
    overflow: visible;
}

.marker-atmosphere-figure .marker-atmosphere-figure-ghost {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.marker-atmosphere-figure .marker-atmosphere-figure-ghost line {
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
}

.marker-atmosphere-figure .marker-atmosphere-figure-ghost text {
    fill: currentColor;
    font-size: 13px;
    font-weight: 700;
    text-anchor: end;
}

.marker-atmosphere-card:hover .marker-atmosphere-figure-ghost,
.marker-atmosphere-widget:hover .marker-atmosphere-figure-ghost,
.marker-atmosphere-widget.is-details-visible .marker-atmosphere-figure-ghost,
.marker-atmosphere-minimal-metric:hover .marker-atmosphere-figure-ghost {
    opacity: 1;
}

/* Termometr */
.marker-atmosphere-figure.is-thermometer .thermo-glass {
    fill: rgba(148, 163, 184, 0.1);
    stroke: rgba(148, 163, 184, 0.42);
    stroke-width: 1.5;
}

.marker-atmosphere-figure.is-thermometer .thermo-track {
    fill: rgba(15, 23, 42, 0.35);
}

.marker-atmosphere-figure.is-thermometer .thermo-liquid {
    filter: none;
}

.marker-atmosphere-figure.is-thermometer .thermo-cap {
    stroke: rgba(255, 255, 255, 0.9);
    stroke-width: 2;
}

.marker-atmosphere-figure.is-thermometer .thermo-shine {
    fill: none;
    stroke: rgba(255, 255, 255, 0.45);
    stroke-width: 2.5;
    stroke-linecap: round;
}

.marker-atmosphere-figure.is-thermometer .thermo-tick {
    stroke: rgba(148, 163, 184, 0.45);
    stroke-width: 2;
    stroke-linecap: round;
}

/* Kropla z parą wodną */
.marker-atmosphere-figure.is-humidity-drop .drop-shell {
    fill: rgba(15, 23, 42, 0.3);
    stroke: rgba(148, 163, 184, 0.35);
    stroke-width: 1.5;
}

.marker-atmosphere-figure.is-humidity-drop .drop-rim {
    fill: none;
    stroke-width: 2.5;
    opacity: 0.85;
}

.marker-atmosphere-figure.is-humidity-drop .drop-shine {
    fill: none;
    stroke: rgba(255, 255, 255, 0.5);
    stroke-width: 3;
    stroke-linecap: round;
}

.marker-atmosphere-figure.is-humidity-drop .drop-wave {
    animation: marker-atmosphere-drop-wave 5.5s linear infinite;
}

.marker-atmosphere-figure.is-humidity-drop .drop-wave.is-back {
    opacity: 0.45;
    animation-duration: 8s;
    animation-direction: reverse;
}

.marker-atmosphere-figure.is-humidity-drop .drop-bubbles circle {
    animation: marker-atmosphere-drop-bubble 3.4s ease-in infinite;
}

.marker-atmosphere-figure.is-humidity-drop .vapour-wisp {
    fill: none;
    stroke: currentColor;
    stroke-width: 4;
    stroke-linecap: round;
    opacity: 0;
    animation: marker-atmosphere-vapour 3.2s ease-in-out infinite;
}

@keyframes marker-atmosphere-drop-wave {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-68px);
    }
}

@keyframes marker-atmosphere-drop-bubble {
    0% {
        opacity: 0;
        transform: translateY(0);
    }

    25% {
        opacity: 0.9;
    }

    100% {
        opacity: 0;
        transform: translateY(-26px);
    }
}

@keyframes marker-atmosphere-vapour {
    0% {
        opacity: 0;
        transform: translateY(6px) scaleY(0.85);
    }

    35% {
        opacity: var(--vapour-opacity, 0.8);
    }

    100% {
        opacity: 0;
        transform: translateY(-10px) scaleY(1.1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .marker-atmosphere-figure.is-humidity-drop :is(.drop-wave, .drop-bubbles circle, .vapour-wisp) {
        animation: none;
    }
}

.marker-atmosphere-minimal-stats {
    display: grid;
    overflow: hidden;
    max-height: 0;
    margin-top: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    opacity: 0;
    text-align: center;
    transform: translateY(-4px);
    transition:
        max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        margin-top 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.25s ease,
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.marker-atmosphere-minimal-stats > span {
    min-width: 0;
    padding: 0 3px;
}

.marker-atmosphere-minimal-stats > span + span {
    border-left: 1px solid rgba(255, 255, 255, 0.09);
}

.marker-atmosphere-minimal-stats small,
.marker-atmosphere-minimal-stats strong {
    display: block;
}

.marker-atmosphere-minimal-stats small {
    overflow: hidden;
    color: #475569;
    font-size: 7px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-overflow: ellipsis;
    text-transform: uppercase;
}

.marker-atmosphere-minimal-stats strong {
    margin-top: 3px;
    color: #cbd5e1;
    font-size: 11px;
    font-weight: 600;
}

.marker-atmosphere-card:hover .marker-atmosphere-minimal-value,
.marker-atmosphere-widget:hover .marker-atmosphere-minimal-value,
.marker-atmosphere-widget.is-details-visible .marker-atmosphere-minimal-value,
.marker-atmosphere-minimal-metric:hover .marker-atmosphere-minimal-value {
    height: 28px;
    transform: translateY(2px) scale(0.76);
}

.marker-atmosphere-card:hover .marker-atmosphere-minimal-scale > b,
.marker-atmosphere-card:hover .marker-atmosphere-minimal-scale > em,
.marker-atmosphere-widget:hover .marker-atmosphere-minimal-scale > b,
.marker-atmosphere-widget:hover .marker-atmosphere-minimal-scale > em,
.marker-atmosphere-widget.is-details-visible .marker-atmosphere-minimal-scale > b,
.marker-atmosphere-widget.is-details-visible .marker-atmosphere-minimal-scale > em,
.marker-atmosphere-minimal-metric:hover .marker-atmosphere-minimal-scale > b,
.marker-atmosphere-minimal-metric:hover .marker-atmosphere-minimal-scale > em {
    opacity: 1;
}

.marker-atmosphere-card:hover .marker-atmosphere-minimal-stats,
.marker-atmosphere-widget:hover .marker-atmosphere-minimal-stats,
.marker-atmosphere-widget.is-details-visible .marker-atmosphere-minimal-stats,
.marker-atmosphere-minimal-metric:hover .marker-atmosphere-minimal-stats {
    max-height: 34px;
    margin-top: 7px;
    opacity: 1;
    transform: translateY(0);
}

.marker-atmosphere-minimal-metric.is-stale {
    opacity: 0.52;
}

@media (max-width: 767px) {
    .marker-atmosphere-body {
        display: block;
        min-height: 0;
    }

    .marker-atmosphere-glass-grid {
        height: auto;
        grid-template-columns: 1fr;
        padding: 12px;
    }

    .marker-atmosphere-glass-divider {
        width: 100%;
        height: 1px;
        margin: 10px 0;
        background: linear-gradient(to right, transparent, rgba(148, 163, 184, 0.3), transparent);
    }

    .marker-atmosphere-minimal-grid {
        height: auto;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px;
        padding: 10px 4px 8px;
    }

    .marker-atmosphere-minimal-metric + .marker-atmosphere-minimal-metric {
        padding-top: 0;
        padding-left: 6px;
        border-top: 0;
        border-left: 1px solid rgba(255, 255, 255, 0.09);
    }

    .marker-atmosphere-minimal-value strong {
        font-size: 26px;
        letter-spacing: -1px;
    }

    .marker-atmosphere-minimal-value span {
        font-size: 12px;
    }

    .marker-atmosphere-figure {
        max-width: 96px;
        margin: 0 auto;
    }

    .marker-atmosphere-figure svg {
        height: 58px;
    }

    .marker-atmosphere-minimal-stats {
        max-height: 36px;
        margin-top: 6px;
        opacity: 1;
        transform: none;
    }

    .marker-atmosphere-temperature {
        padding-right: 12px;
    }

    .marker-atmosphere-metric {
        padding-right: 12px;
        padding-left: 12px;
    }
}

/* Map widgets loading experience */
.marker-main-contener {
    position: relative;
    display: flex;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    overflow: hidden;
    flex-direction: column;
}

.marker-panel-scroll-body {
    position: relative;
    min-height: 0;
    flex: 1 1 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.marker-panel-scroll-body::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.select-tile-contener .marker-main-contener.is-loading {
    display: flex;
    min-height: 100%;
    box-sizing: border-box;
    flex-direction: column;
}

.select-tile-contener .marker-main-contener.is-loading .marker-panel-scroll-body {
    display: flex;
    flex-direction: column;
}

.marker-main-contener.is-loading .marker-panel-scroll-body > :not(.marker-main-contener-control):not(.marker-wait-for-data) {
    display: none !important;
}

.marker-wait-for-data {
    position: relative;
    isolation: isolate;
    display: flex;
    width: 100%;
    min-height: 500px;
    box-sizing: border-box;
    overflow: hidden;
    flex-direction: column;
    padding: 22px;
    border: 1px solid rgba(93, 207, 238, 0.22);
    border-radius: 22px;
    color: #eafaff;
    background:
        linear-gradient(rgba(125, 211, 252, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(125, 211, 252, 0.025) 1px, transparent 1px),
        radial-gradient(circle at 15% 8%, rgba(45, 212, 191, 0.14), transparent 29%),
        radial-gradient(circle at 90% 72%, rgba(56, 189, 248, 0.13), transparent 34%),
        linear-gradient(145deg, rgba(15, 36, 49, 0.99), rgba(4, 13, 22, 0.995) 66%, rgba(7, 25, 36, 0.99));
    background-size: 28px 28px, 28px 28px, auto, auto, auto;
    box-shadow:
        0 28px 58px -28px rgba(0, 0, 0, 0.92),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
    opacity: 1;
    transition: opacity 0.42s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), filter 0.42s ease;
}

.select-tile-contener .marker-main-contener.is-loading .marker-panel-scroll-body > .marker-wait-for-data {
    min-height: 0;
    flex: 1 1 auto;
}

.marker-main-contener:not(.is-loading) .marker-panel-scroll-body > .marker-wait-for-data {
    position: absolute;
    z-index: 40;
    inset: 0;
    min-height: 100%;
}

.marker-wait-for-data.is-complete {
    filter: blur(7px);
    opacity: 0;
    pointer-events: none;
    transform: scale(1.025);
}

.marker-loading-ambient {
    position: absolute;
    z-index: -1;
    width: 190px;
    height: 190px;
    border: 1px solid rgba(94, 234, 212, 0.1);
    border-radius: 50%;
    pointer-events: none;
}

.marker-loading-ambient-one {
    top: -110px;
    left: -82px;
    box-shadow:
        0 0 0 28px rgba(45, 212, 191, 0.025),
        0 0 0 58px rgba(45, 212, 191, 0.015);
    animation: marker-loading-orbit 7s linear infinite;
}

.marker-loading-ambient-two {
    right: -118px;
    bottom: -95px;
    border-color: rgba(56, 189, 248, 0.12);
    box-shadow:
        0 0 0 34px rgba(56, 189, 248, 0.024),
        0 0 0 70px rgba(56, 189, 248, 0.012);
    animation: marker-loading-orbit 9s linear infinite reverse;
}

.marker-loading-header {
    position: relative;
    display: grid;
    min-height: 74px;
    align-items: center;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    gap: 13px;
}

.marker-loading-beacon {
    position: relative;
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border: 1px solid rgba(94, 234, 212, 0.22);
    border-radius: 50%;
    color: #5eead4;
    background: radial-gradient(circle, rgba(45, 212, 191, 0.14), rgba(6, 25, 34, 0.92) 66%);
    box-shadow: 0 0 24px rgba(45, 212, 191, 0.12);
}

.marker-loading-beacon > i {
    position: relative;
    z-index: 2;
    font-size: 17px;
    filter: drop-shadow(0 0 6px rgba(94, 234, 212, 0.65));
    animation: marker-loading-drop 1.8s ease-in-out infinite;
}

.marker-loading-beacon > b {
    position: absolute;
    inset: -1px;
    border: 1px solid rgba(94, 234, 212, 0.36);
    border-radius: inherit;
    opacity: 0;
    animation: marker-loading-sonar 2.4s ease-out infinite;
}

.marker-loading-beacon > b:last-child {
    animation-delay: 1.2s;
}

.marker-loading-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.marker-loading-copy > small {
    color: #5eead4;
    font-size: 7px;
    font-weight: 750;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.marker-loading-copy sup {
    position: relative;
    top: -0.18em;
    color: #38bdf8;
    font-size: 0.66em;
}

.marker-loading-copy > strong {
    margin-top: 4px;
    font-size: 17px;
    font-weight: 750;
    letter-spacing: -0.025em;
}

.marker-loading-copy > em {
    position: relative;
    display: block;
    height: 15px;
    margin-top: 4px;
    overflow: hidden;
    color: #7393a2;
    font-size: 9px;
    font-style: normal;
}

.marker-loading-copy > em > span {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transform: translateY(8px);
    animation: marker-loading-message 6s ease-in-out infinite;
}

.marker-loading-copy > em > span:nth-child(2) { animation-delay: 2s; }
.marker-loading-copy > em > span:nth-child(3) { animation-delay: 4s; }

.marker-loading-live {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 7px;
    border: 1px solid rgba(56, 189, 248, 0.14);
    border-radius: 999px;
    color: #6f91a0;
    background: rgba(56, 189, 248, 0.055);
    font-size: 6px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.marker-loading-live > i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #38bdf8;
    box-shadow: 0 0 8px #38bdf8;
    animation: marker-loading-live 1.4s ease-in-out infinite;
}

.marker-loading-hero {
    position: relative;
    display: grid;
    min-height: 180px;
    align-items: center;
    margin-top: 15px;
    padding: 18px;
    overflow: hidden;
    border: 1px solid rgba(125, 211, 252, 0.1);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012));
    grid-template-columns: 118px minmax(0, 1fr);
    gap: 20px;
}

.marker-loading-hero::after,
.marker-loading-grid > span::after {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 42%;
    background: linear-gradient(90deg, transparent, rgba(191, 239, 255, 0.075), transparent);
    content: "";
    pointer-events: none;
    transform: skewX(-14deg);
    animation: marker-loading-shimmer 1.9s ease-in-out infinite;
}

.marker-loading-gauge {
    position: relative;
    display: grid;
    width: 108px;
    height: 108px;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(from -38deg, #2dd4bf, #38bdf8 30%, rgba(96, 165, 250, 0.08) 31% 82%, #2dd4bf 84%, #38bdf8);
    box-shadow: 0 0 28px rgba(56, 189, 248, 0.12);
    animation: marker-loading-gauge 3.2s ease-in-out infinite;
}

.marker-loading-gauge::before {
    position: absolute;
    inset: 8px;
    border-radius: inherit;
    background: radial-gradient(circle at 35% 25%, #173544, #06121c 72%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.055);
    content: "";
}

.marker-loading-gauge > span {
    position: relative;
    z-index: 1;
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border: 1px solid rgba(125, 211, 252, 0.12);
    border-radius: 50%;
    color: #67e8f9;
    font-size: 19px;
    background: rgba(5, 18, 27, 0.74);
}

.marker-loading-trace {
    position: relative;
    min-width: 0;
}

.marker-loading-line {
    display: block;
    height: 8px;
    border-radius: 999px;
    background: rgba(137, 179, 195, 0.12);
}

.marker-loading-line-title { width: 58%; }
.marker-loading-line-copy { width: 38%; height: 5px; margin-top: 8px; }

.marker-loading-trace > svg {
    width: 100%;
    height: 72px;
    margin-top: 16px;
    overflow: visible;
}

.marker-loading-trace path {
    fill: none;
    stroke: #38bdf8;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 330;
    filter: drop-shadow(0 0 5px rgba(56, 189, 248, 0.62));
    vector-effect: non-scaling-stroke;
    animation: marker-loading-trace 2.4s ease-in-out infinite;
}

.marker-loading-scan {
    position: absolute;
    top: 48px;
    bottom: 0;
    width: 1px;
    background: linear-gradient(transparent, #67e8f9 46%, transparent);
    box-shadow: 0 0 9px #38bdf8;
    animation: marker-loading-scan 2.4s ease-in-out infinite;
}

.marker-loading-grid {
    display: grid;
    margin-top: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.marker-loading-grid > span {
    position: relative;
    display: grid;
    min-height: 76px;
    overflow: hidden;
    align-items: center;
    padding: 13px;
    border: 1px solid rgba(125, 211, 252, 0.08);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.018);
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 10px;
}

.marker-loading-grid > span::after {
    animation-delay: var(--loading-delay, 0s);
}

.marker-loading-grid > span:nth-child(2) { --loading-delay: 0.18s; }
.marker-loading-grid > span:nth-child(3) { --loading-delay: 0.36s; }
.marker-loading-grid > span:nth-child(4) { --loading-delay: 0.54s; }

.marker-loading-grid i {
    width: 30px;
    height: 30px;
    border: 1px solid rgba(56, 189, 248, 0.1);
    border-radius: 9px;
    background: rgba(56, 189, 248, 0.06);
}

.marker-loading-grid b,
.marker-loading-grid small {
    display: block;
    border-radius: 999px;
    background: rgba(137, 179, 195, 0.1);
}

.marker-loading-grid b {
    width: 64%;
    height: 7px;
}

.marker-loading-grid small {
    width: 42%;
    height: 5px;
    margin: -19px 0 0 42px;
}

.marker-loading-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 15px;
    color: #4f7181;
}

.marker-loading-footer > span {
    position: relative;
    width: 22px;
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(56, 189, 248, 0.1);
}

.marker-loading-footer > span > i {
    position: absolute;
    width: 9px;
    height: 100%;
    border-radius: inherit;
    background: #38bdf8;
    box-shadow: 0 0 7px #38bdf8;
    animation: marker-loading-footer 1.5s ease-in-out infinite alternate;
}

.marker-loading-footer small {
    font-size: 7px;
    letter-spacing: 0.035em;
}

.marker-loading-actions {
    display: none;
    width: min(310px, 100%);
    margin: 22px auto auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.marker-loading-action {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 12px;
    border: 1px solid rgba(251, 113, 133, 0.22);
    border-radius: 12px;
    color: #dbeaf0;
    background: rgba(255, 255, 255, 0.035);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
    cursor: pointer;
    font: inherit;
    font-size: 9px;
    font-weight: 750;
    transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.marker-loading-action:hover,
.marker-loading-action:focus-visible {
    border-color: rgba(251, 113, 133, 0.48);
    color: #fff;
    background: rgba(251, 113, 133, 0.11);
    outline: 0;
    transform: translateY(-1px);
}

.marker-loading-action > i {
    color: #fb7185;
    font-size: 10px;
}

.marker-loading-action.is-pending {
    opacity: 0.65;
    pointer-events: none;
}

.marker-loading-retry {
    border-color: rgba(56, 189, 248, 0.24);
    background: rgba(56, 189, 248, 0.075);
}

.marker-loading-retry:hover,
.marker-loading-retry:focus-visible {
    border-color: rgba(56, 189, 248, 0.52);
    background: rgba(56, 189, 248, 0.14);
}

.marker-loading-retry > i {
    color: #67e8f9;
}

.marker-wait-for-data.is-error {
    justify-content: center;
    border-color: rgba(251, 113, 133, 0.28);
    background:
        radial-gradient(circle at 50% 24%, rgba(244, 63, 94, 0.12), transparent 34%),
        linear-gradient(145deg, rgba(39, 24, 34, 0.99), rgba(12, 10, 18, 0.995));
    animation: marker-loading-error-enter 0.48s cubic-bezier(0.22, 1, 0.36, 1);
}

.marker-wait-for-data.is-error .marker-loading-header {
    width: min(390px, 100%);
    min-height: 66px;
    margin: auto auto 0;
    grid-template-columns: 58px minmax(0, 1fr) auto;
}

.marker-wait-for-data.is-error .marker-loading-beacon {
    width: 54px;
    height: 54px;
}

.marker-wait-for-data.is-error .marker-loading-copy > strong {
    font-size: 19px;
}

.marker-wait-for-data.is-error .marker-loading-copy > em {
    height: auto;
    min-height: 15px;
    overflow: visible;
}

.marker-wait-for-data.is-error .marker-loading-actions {
    display: grid;
}

.marker-wait-for-data.is-error .marker-loading-beacon {
    border-color: rgba(251, 113, 133, 0.28);
    color: #fb7185;
}

.marker-wait-for-data.is-error .marker-loading-beacon > i {
    animation: none;
}

.marker-wait-for-data.is-error .marker-loading-live {
    color: #fb7185;
}

.marker-wait-for-data.is-error .marker-loading-live > i {
    background: #fb7185;
    box-shadow: 0 0 8px #fb7185;
    animation: none;
}

.marker-wait-for-data.is-error .marker-loading-copy > em > span {
    opacity: 1;
    transform: none;
    animation: none;
}

.marker-wait-for-data.is-error .marker-loading-gauge,
.marker-wait-for-data.is-error .marker-loading-trace path,
.marker-wait-for-data.is-error .marker-loading-scan,
.marker-wait-for-data.is-error .marker-loading-grid > span::after,
.marker-wait-for-data.is-error .marker-loading-footer > span > i {
    animation: none;
}

.marker-wait-for-data.is-error .marker-loading-hero,
.marker-wait-for-data.is-error .marker-loading-grid,
.marker-wait-for-data.is-error .marker-loading-footer {
    display: none;
}

@keyframes marker-loading-orbit {
    to { transform: rotate(360deg); }
}

@keyframes marker-loading-drop {
    0%, 100% { opacity: 0.72; transform: translateY(-2px) scale(0.92); }
    50% { opacity: 1; transform: translateY(2px) scale(1.07); }
}

@keyframes marker-loading-sonar {
    0% { opacity: 0.7; transform: scale(0.82); }
    70%, 100% { opacity: 0; transform: scale(1.72); }
}

@keyframes marker-loading-message {
    0%, 28% { opacity: 0; transform: translateY(7px); }
    7%, 23% { opacity: 1; transform: translateY(0); }
    32%, 100% { opacity: 0; transform: translateY(-7px); }
}

@keyframes marker-loading-live {
    50% { opacity: 0.4; transform: scale(0.72); }
}

@keyframes marker-loading-gauge {
    0%, 100% { filter: hue-rotate(0deg); transform: rotate(-4deg); }
    50% { filter: hue-rotate(24deg); transform: rotate(7deg); }
}

@keyframes marker-loading-shimmer {
    from { left: -55%; }
    to { left: 125%; }
}

@keyframes marker-loading-trace {
    0% { stroke-dashoffset: 330; opacity: 0.2; }
    45%, 70% { stroke-dashoffset: 0; opacity: 1; }
    100% { stroke-dashoffset: -330; opacity: 0.2; }
}

@keyframes marker-loading-scan {
    0% { left: 0; opacity: 0; }
    12%, 82% { opacity: 0.9; }
    100% { left: 100%; opacity: 0; }
}

@keyframes marker-loading-footer {
    from { left: 0; }
    to { left: 13px; }
}

@keyframes marker-loading-error-enter {
    0% { filter: saturate(0.65); transform: translateX(0); }
    28% { transform: translateX(-4px); }
    48% { transform: translateX(3px); }
    68% { transform: translateX(-2px); }
    100% { filter: saturate(1); transform: translateX(0); }
}

@media (max-width: 430px) {
    .marker-wait-for-data {
        min-height: min(540px, calc(88dvh - 58px));
        padding: 18px 14px 16px;
        border-radius: 18px;
    }

    .marker-loading-header {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 10px;
    }

    .marker-loading-live {
        display: none;
    }

    .marker-loading-beacon {
        width: 43px;
        height: 43px;
    }

    .marker-loading-copy > strong {
        font-size: 15px;
    }

    .marker-loading-hero {
        min-height: 164px;
        padding: 14px;
        grid-template-columns: 90px minmax(0, 1fr);
        gap: 12px;
    }

    .marker-loading-gauge {
        width: 84px;
        height: 84px;
    }

    .marker-loading-gauge > span {
        width: 42px;
        height: 42px;
        font-size: 16px;
    }

    .marker-loading-grid > span {
        min-height: 66px;
        padding: 10px;
    }

    .marker-wait-for-data.is-error .marker-loading-header {
        grid-template-columns: 50px minmax(0, 1fr);
        gap: 11px;
    }

    .marker-wait-for-data.is-error .marker-loading-live {
        display: none;
    }

    .marker-loading-actions {
        margin-top: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .marker-wait-for-data *,
    .marker-wait-for-data *::before,
    .marker-wait-for-data *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Popup loader v2 — mirrors the borderless WQI panel instead of showing a separate card. */
.marker-wait-for-data {
    --loading-accent: var(--marker-wqi-color, #38bdf8);
    min-height: 560px;
    padding: 18px 22px 20px;
    border: 0;
    border-radius: 0;
    /* Share the ready panel's background without an inset rectangular surface. */
    background: transparent;
    box-shadow: none;
}


.marker-loading-ambient {
    border-color: color-mix(in srgb, var(--loading-accent) 14%, transparent);
    opacity: 0.8;
}

.marker-loading-header {
    min-height: 82px;
    grid-template-columns: 54px minmax(0, 1fr) auto;
}

.marker-loading-beacon {
    width: 48px;
    height: 48px;
    border-color: color-mix(in srgb, var(--loading-accent) 34%, transparent);
    border-radius: 15px;
    color: var(--loading-accent);
    background: color-mix(in srgb, var(--loading-accent) 10%, rgba(5, 20, 29, 0.82));
    box-shadow: 0 0 28px color-mix(in srgb, var(--loading-accent) 13%, transparent);
}

.marker-loading-beacon > b {
    border-color: color-mix(in srgb, var(--loading-accent) 42%, transparent);
}

.marker-loading-copy > small {
    color: color-mix(in srgb, var(--loading-accent) 74%, #8ba7b4);
}

.marker-loading-point-name {
    display: block;
    max-width: 100%;
    overflow: hidden;
    margin-top: 4px;
    color: #eefaff;
    font-size: 15px;
    font-weight: 780;
    letter-spacing: -0.025em;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.marker-loading-copy > strong {
    margin-top: 3px;
    color: #94adb8;
    font-size: 9px;
    font-weight: 650;
    letter-spacing: 0;
}

.marker-loading-copy > em {
    margin-top: 2px;
}

.marker-loading-live {
    border-color: color-mix(in srgb, var(--loading-accent) 22%, transparent);
    color: color-mix(in srgb, var(--loading-accent) 68%, #67818e);
    background: color-mix(in srgb, var(--loading-accent) 7%, transparent);
}

.marker-loading-live > i {
    background: var(--loading-accent);
    box-shadow: 0 0 9px var(--loading-accent);
}

.marker-loading-hero {
    min-height: 190px;
    margin-top: 12px;
    padding: 20px 16px;
    border: 0;
    border-radius: 0;
    background: transparent;
    grid-template-columns: 124px minmax(0, 1fr);
}

.marker-loading-hero::after {
    content: none;
}

.marker-loading-gauge {
    width: 112px;
    height: 112px;
    background: conic-gradient(from -48deg,
        transparent 0 8%,
        color-mix(in srgb, var(--loading-accent) 82%, #d9ff4a) 9% 30%,
        color-mix(in srgb, var(--loading-accent) 42%, transparent) 31% 43%,
        rgba(111, 144, 156, 0.08) 44% 88%,
        transparent 89% 100%);
    box-shadow:
        0 0 34px color-mix(in srgb, var(--loading-accent) 11%, transparent),
        inset 0 0 0 1px rgba(128, 179, 196, 0.05);
    animation: marker-loader-gauge-breathe 2.8s ease-in-out infinite;
}

.marker-loading-gauge::before {
    inset: 9px;
    background:
        radial-gradient(circle at 45% 38%, color-mix(in srgb, var(--loading-accent) 9%, #0b2431), #06131d 68%);
}

.marker-loading-gauge::after {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0 82%, color-mix(in srgb, var(--loading-accent) 92%, white) 94%, transparent 100%);
    content: "";
    filter: drop-shadow(0 0 6px var(--loading-accent));
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    animation: marker-loader-gauge-orbit 2.15s linear infinite;
}

.marker-loading-gauge > span {
    width: 66px;
    height: 66px;
    border: 0;
    background: transparent;
    color: color-mix(in srgb, var(--loading-accent) 80%, white);
}

.marker-loading-gauge > span small {
    font-size: 7px;
    font-weight: 750;
    letter-spacing: 0.16em;
}

.marker-loading-gauge > span b {
    margin-top: -13px;
    font-size: 15px;
    letter-spacing: 0.16em;
    animation: marker-loader-digits 1.3s ease-in-out infinite;
}

.marker-loading-line {
    background: color-mix(in srgb, var(--loading-accent) 10%, rgba(137, 179, 195, 0.1));
}

.marker-loading-trace path {
    stroke: var(--loading-accent);
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--loading-accent) 76%, transparent));
}

.marker-loading-scan {
    background: linear-gradient(transparent, color-mix(in srgb, var(--loading-accent) 90%, white) 46%, transparent);
    box-shadow: 0 0 10px var(--loading-accent);
}

.marker-loading-spectrum {
    position: relative;
    display: block;
    height: 4px;
    overflow: visible;
    margin-top: -4px;
    border-radius: 999px;
    background: linear-gradient(90deg, #2dde83, #ccea32 38%, #ffc33d 65%, #ff526d);
    box-shadow: 0 0 12px color-mix(in srgb, var(--loading-accent) 18%, transparent);
    opacity: 0.7;
}

.marker-loading-spectrum > i {
    position: absolute;
    top: 50%;
    width: 9px;
    height: 9px;
    border: 2px solid white;
    border-radius: 50%;
    background: var(--loading-accent);
    box-shadow: 0 0 10px var(--loading-accent);
    transform: translate(-50%, -50%);
    animation: marker-loader-spectrum 3.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

.marker-loading-phases {
    display: grid;
    width: min(390px, 100%);
    align-items: start;
    align-self: center;
    margin: 5px auto 13px;
    grid-template-columns: auto minmax(22px, 1fr) auto minmax(22px, 1fr) auto;
    gap: 7px;
}

.marker-loading-phases > span {
    display: grid;
    min-width: 48px;
    place-items: center;
    color: #526f7c;
    gap: 5px;
    animation: marker-loader-phase 3.6s ease-in-out infinite;
}

.marker-loading-phases > span:nth-of-type(2) { animation-delay: 1.2s; }
.marker-loading-phases > span:nth-of-type(3) { animation-delay: 2.4s; }

.marker-loading-phases > span > i {
    display: grid;
    width: 27px;
    height: 27px;
    place-items: center;
    border-radius: 9px;
    background: color-mix(in srgb, var(--loading-accent) 6%, rgba(255, 255, 255, 0.015));
    font-size: 9px;
}

.marker-loading-phases small {
    font-size: 6px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.marker-loading-phases > b {
    position: relative;
    height: 1px;
    overflow: hidden;
    margin-top: 13px;
    background: rgba(93, 132, 146, 0.1);
}

.marker-loading-phases > b::after {
    position: absolute;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--loading-accent), transparent);
    content: "";
    animation: marker-loader-phase-line 1.8s ease-in-out infinite;
}

.marker-loading-phases > b:nth-of-type(2)::after { animation-delay: 0.9s; }

.marker-loading-grid {
    margin-top: 0;
    gap: 8px;
}

.marker-loading-grid > span {
    min-height: 68px;
    border: 0;
    background: linear-gradient(110deg, rgba(255, 255, 255, 0.013), color-mix(in srgb, var(--loading-accent) 3%, transparent));
}

.marker-loading-grid i {
    border: 0;
    background: color-mix(in srgb, var(--loading-accent) 7%, rgba(255, 255, 255, 0.015));
}

.marker-wait-for-data {
    transition:
        opacity 0.68s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.72s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.68s ease;
}

/* The ready popup is already built below the loader. Reveal its hierarchy in the same order
   in which a person reads it: WQI, controls, measurements and finally the sponsor footer. */
.marker-main-contener.is-revealing .marker-water-hero-widget,
.marker-main-contener.is-revealing .marker-mode-toolbar,
.marker-main-contener.is-revealing .marker-status-notices,
.marker-main-contener.is-revealing .marker-widget-group > *,
.marker-main-contener.is-revealing > .marker-footer-strip {
    opacity: 0;
    filter: blur(3px) saturate(0.84);
    transform: translateY(10px) scale(0.992);
    transition:
        opacity 0.58s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.68s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.58s ease;
    will-change: opacity, transform, filter;
}

.marker-main-contener.is-revealing.is-revealed .marker-water-hero-widget,
.marker-main-contener.is-revealing.is-revealed .marker-mode-toolbar,
.marker-main-contener.is-revealing.is-revealed .marker-status-notices,
.marker-main-contener.is-revealing.is-revealed .marker-widget-group > *,
.marker-main-contener.is-revealing.is-revealed > .marker-footer-strip {
    opacity: 1;
    filter: none;
    transform: none;
}

.marker-main-contener.is-revealing.is-revealed .marker-water-hero-widget {
    transition-delay: 0.04s;
}

.marker-main-contener.is-revealing.is-revealed .marker-mode-toolbar {
    transition-delay: 0.1s;
}

.marker-main-contener.is-revealing.is-revealed .marker-status-notices {
    transition-delay: 0.14s;
}

.marker-main-contener.is-revealing.is-revealed .marker-widget-group > * {
    transition-delay: 0.18s;
}

.marker-main-contener.is-revealing.is-revealed .marker-widget-group > :nth-child(2) { transition-delay: 0.22s; }
.marker-main-contener.is-revealing.is-revealed .marker-widget-group > :nth-child(3) { transition-delay: 0.26s; }
.marker-main-contener.is-revealing.is-revealed .marker-widget-group > :nth-child(n + 4) { transition-delay: 0.3s; }

.marker-main-contener.is-revealing.is-revealed > .marker-footer-strip {
    transition-delay: 0.3s;
}

.marker-wait-for-data.is-complete {
    filter: blur(4px) saturate(1.12);
    opacity: 0;
    transform: translateY(-4px) scale(1.008);
}

.marker-wait-for-data.is-error {
    border: 0;
    border-radius: 0;
}

.marker-wait-for-data.is-error .marker-loading-point-name {
    display: none;
}

@keyframes marker-loader-gauge-breathe {
    0%, 100% { filter: saturate(0.86); transform: scale(0.97); }
    50% { filter: saturate(1.3); transform: scale(1.025); }
}

@keyframes marker-loader-gauge-orbit {
    to { transform: rotate(360deg); }
}

@keyframes marker-loader-digits {
    0%, 100% { opacity: 0.35; transform: translateY(1px); }
    50% { opacity: 1; transform: translateY(0); }
}

@keyframes marker-loader-spectrum {
    0%, 100% { left: 4%; }
    50% { left: 96%; }
}

@keyframes marker-loader-phase {
    0%, 20%, 100% { color: #526f7c; filter: none; transform: translateY(0); }
    34%, 54% { color: var(--loading-accent); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--loading-accent) 48%, transparent)); transform: translateY(-1px); }
}

@keyframes marker-loader-phase-line {
    from { left: -70%; }
    to { left: 110%; }
}

@media (max-width: 430px) {
    .marker-wait-for-data {
        min-height: min(600px, calc(100dvh - 118px));
        padding: 12px 16px 16px;
    }

    .marker-loading-header {
        min-height: 76px;
    }

    .marker-loading-point-name {
        font-size: 14px;
    }

    .marker-loading-hero {
        min-height: 168px;
        padding: 13px 4px;
        grid-template-columns: 96px minmax(0, 1fr);
        gap: 10px;
    }

    .marker-loading-gauge {
        width: 88px;
        height: 88px;
    }

    .marker-loading-gauge > span {
        width: 52px;
        height: 52px;
    }

    .marker-loading-phases {
        margin-top: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .marker-wait-for-data,
    .marker-main-contener.is-revealing .marker-water-hero-widget,
    .marker-main-contener.is-revealing .marker-mode-toolbar,
    .marker-main-contener.is-revealing .marker-status-notices,
    .marker-main-contener.is-revealing .marker-widget-group > *,
    .marker-main-contener.is-revealing > .marker-footer-strip {
        transition-duration: 0.001ms !important;
        transition-delay: 0s !important;
    }
}

/* Device state notices — placed directly below the point action buttons. */
.marker-status-notices {
    position: relative;
    z-index: 6;
    display: grid;
    width: 100%;
    gap: 8px;
    margin: 10px 0;
}

.marker-status-notice {
    --notice-accent: #ff6473;
    --notice-glow: rgba(255, 73, 73, 0.22);
    position: relative;
    isolation: isolate;
    display: grid;
    min-height: 72px;
    overflow: hidden;
    box-sizing: border-box;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 13px 18px;
    border: 1px solid color-mix(in srgb, var(--notice-accent) 48%, transparent);
    border-radius: 18px;
    color: #fff4f5;
    background:
        radial-gradient(circle at 5% 20%, color-mix(in srgb, var(--notice-accent) 22%, transparent), transparent 34%),
        linear-gradient(135deg, rgba(66, 18, 27, 0.98), rgba(31, 10, 17, 0.99));
    box-shadow:
        0 18px 38px -24px rgba(0, 0, 0, 0.95),
        0 0 30px -16px var(--notice-glow),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.marker-status-notice::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    opacity: 0.17;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 24px 24px;
    content: "";
    pointer-events: none;
    mask-image: linear-gradient(90deg, black, transparent 78%);
    -webkit-mask-image: linear-gradient(90deg, black, transparent 78%);
}

.marker-status-notice.is-service {
    --notice-accent: #ff5261;
    --notice-glow: rgba(255, 82, 97, 0.34);
}

.marker-status-notice.is-restricted {
    --notice-accent: #ff6b63;
    --notice-glow: rgba(255, 92, 82, 0.32);
    align-items: start;
    padding-top: 16px;
    padding-bottom: 16px;
}

.marker-status-notice-icon {
    position: relative;
    display: inline-flex;
    width: 42px;
    height: 42px;
    align-self: center;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--notice-accent) 54%, rgba(255, 255, 255, 0.2));
    border-radius: 14px;
    color: #fff;
    background: color-mix(in srgb, var(--notice-accent) 22%, rgba(9, 15, 21, 0.86));
    box-shadow:
        0 0 22px -8px var(--notice-accent),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    font-size: 16px;
}

.marker-status-notice.is-restricted .marker-status-notice-icon {
    color: var(--notice-accent);
}

.marker-status-notice-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

.marker-status-notice-copy strong {
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.marker-status-notice-copy small {
    color: rgba(255, 235, 237, 0.76);
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.45;
}

.marker-status-notice.is-service .marker-status-notice-copy small {
    font-size: 11px;
    font-weight: 650;
}

.marker-status-notice-pulse {
    position: absolute;
    top: 11px;
    right: 12px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--notice-accent);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--notice-accent) 13%, transparent), 0 0 14px var(--notice-accent);
}

@media (max-width: 767px) {
    .marker-status-notice {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 10px;
        padding-right: 14px;
        padding-left: 12px;
        border-radius: 16px;
    }

    .marker-status-notice-icon {
        width: 38px;
        height: 38px;
        border-radius: 12px;
    }

    .marker-status-notice-copy {
        padding-right: 6px;
    }
}

/* The retired point header must never reappear while data is loading, missing
   or restored from an older cached template. */
.select-tile-contener .marker-main-header,
.select-tile-contener .marker-legacy-subscribe-row,
.select-tile-contener .marker-subscription-action-proxy {
    display: none !important;
}

.marker-water-hero-widget {
    width: 100%;
    margin-bottom: 10px;
}

.marker-water-hero-card {
    --water-ink: #effbff;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 0;
    border: 0;
    border-radius: 0;
    color: var(--water-ink);
    background: transparent;
    box-shadow: none;
}

.marker-water-hero-card[role="button"] {
    cursor: pointer;
}

.marker-water-hero-card[role="button"]:focus-visible {
    outline: none;
}

.marker-water-release-badge {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 4px;
    width: max-content;
    margin-bottom: 3px;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: #b9cad3;
    background: transparent;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.12em;
    line-height: 1.2;
    text-shadow: 0 0 10px currentColor;
}

.marker-water-release-badge.is-alpha { color: #fbbf24; }
.marker-water-release-badge.is-beta { color: #38bdf8; }
.marker-water-release-badge.is-dev { color: #c084fc; }

.marker-water-hero-copy {
    display: flex;
    overflow: hidden;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
}

.marker-water-hero-meta {
    display: flex !important;
    max-width: 100%;
    width: 100%;
    align-items: center;
    gap: 5px;
}

.marker-water-hero-meta > span {
    overflow: hidden;
    min-width: 0;
    flex: 1 1 auto;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.marker-water-hero-card::before {
    position: absolute;
    z-index: -1;
    inset: -70px;
    opacity: 0.72;
    background:
        radial-gradient(circle at 24% 32%, color-mix(in srgb, var(--wqi-color) 18%, transparent), transparent 42%),
        radial-gradient(circle at 88% 70%, rgba(14, 165, 233, 0.1), transparent 38%);
    content: "";
    pointer-events: none;
}

.marker-water-hero-card::after {
    display: none;
}

.marker-water-hero-ambient {
    position: absolute;
    z-index: -1;
    top: -60px;
    left: -45px;
    width: 175px;
    height: 175px;
    border: 1px solid color-mix(in srgb, var(--wqi-color) 28%, transparent);
    border-radius: 50%;
    opacity: 0.42;
    box-shadow:
        0 0 0 26px color-mix(in srgb, var(--wqi-color) 4%, transparent),
        0 0 0 52px color-mix(in srgb, var(--wqi-color) 2%, transparent);
    pointer-events: none;
}

.marker-water-hero-header {
    position: relative;
    z-index: 2;
    display: flex;
    min-height: 54px;
    align-items: center;
    justify-content: space-between;
    padding: 9px 13px;
    border-bottom: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.025), transparent);
}

.marker-water-hero-title {
    display: flex;
    min-width: 0;
    max-width: 68%;
    align-items: center;
    gap: 9px;
}

.marker-water-hero-title > span {
    display: flex;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--wqi-color) 38%, transparent);
    border-radius: 11px;
    background: color-mix(in srgb, var(--wqi-color) 12%, rgba(255, 255, 255, 0.02));
    color: var(--wqi-color);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 17px color-mix(in srgb, var(--wqi-color) 12%, transparent);
}

.marker-water-hero-title strong,
.marker-water-hero-title small {
    display: block;
}

.marker-water-hero-title strong {
    overflow: hidden;
    max-width: 100%;
    width: 100%;
    font-size: 14px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.marker-water-hero-title small {
    margin-top: 3px;
    color: #5e7d8e;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.marker-water-hero-live {
    cursor: pointer;
    font-family: inherit;
    user-select: none;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 5px 10px 4px;
    border: 1px solid rgba(52, 211, 153, 0.24);
    border-radius: 999px;
    background: rgba(6, 78, 59, 0.2);
    color: #53ddb0;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    /* Relative-time copy changes on refresh; it must not resize the header. */
    box-sizing: border-box;
    width: 160px;
    min-width: 0;
    height: 52px;
    justify-content: center;
}

.marker-water-hero-live:disabled {
    cursor: default;
}

.marker-water-hero-live:focus-visible {
    outline: 2px solid #0F6DB3;
    outline-offset: 2px;
}

.marker-water-hero-live.is-absolute-time > small {
    white-space: normal;
    text-wrap: balance;
}

.marker-water-hero-live > span {
    font-size: 9px;
    font-weight: 800;
    display: block;
    width: 100%;
    flex: 0 0 auto;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
}

.marker-water-hero-live > span > i {
    display: inline-block;
    margin-right: 4px;
}

.marker-water-hero-live > small {
    color: #a9c7bb;
    font-size: 10px;
    font-weight: 300;
    letter-spacing: 0;
    line-height: 1.3;
    text-transform: none;
    text-align: center;
    flex: 0 0 auto;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.marker-water-hero-live:not(.is-stale) > span > i:empty {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 9px #34d399;
}

.marker-water-hero-live.is-stale {
    border-color: rgba(251, 191, 36, 0.3);
    background: rgba(120, 78, 8, 0.2);
    color: #fbbf24;
}

.marker-water-hero-live.is-stale > small {
    color: #b58b39;
}

.marker-water-hero-live.is-unavailable {
    border-color: rgba(148, 163, 184, 0.24);
    background: rgba(51, 65, 85, 0.28);
    color: #94a3b8;
}

.marker-water-hero-live.is-unavailable > small {
    color: #64748b;
}

.marker-water-hero-score.is-unavailable {
    cursor: default !important;
    filter: saturate(.45);
}

.marker-water-hero-score.is-unavailable:hover .marker-water-hero-orbit,
.marker-water-hero-score.is-unavailable:focus-visible .marker-water-hero-orbit {
    box-shadow: none;
    transform: none;
}

.marker-water-hero-content {
    position: relative;
    z-index: 2;
    display: grid;
    height: auto;
    min-height: 158px;
    align-items: center;
    overflow: visible;
    grid-template-columns: 108px minmax(0, 1fr);
    gap: 10px;
    padding: 10px 12px 14px;
    transition: grid-template-columns 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.marker-water-hero-content.is-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 18px;
}

.marker-water-hero-no-data {
    display: block;
    width: 100%;
    padding: 14px 16px;
    text-align: center;
}

.marker-water-hero-no-data strong,
.marker-water-hero-no-data small {
    display: block;
}

.marker-water-hero-no-data strong {
    color: #c2d0d8;
    font-size: 13px;
    font-weight: 700;
}

.marker-water-hero-no-data small {
    margin-top: 3px;
    color: #647b88;
    font-size: 8px;
    line-height: 1.4;
}

.marker-water-hero-score,
.marker-water-hero-temperature {
    min-width: 0;
    border: 0;
    outline: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.marker-water-hero-score {
    position: relative;
    top: var(--wqi-score-alignment, 0px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
}

.marker-water-hero-score-time {
	font-family: var(--wl-font-mono);
	display: block;
	min-height: 17px;
    margin-top: 4px;
    overflow: hidden;
    color: #607b89;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
	font-weight: 650;
	letter-spacing: 0.015em;
	line-height: 17px;
	opacity: 0;
	text-overflow: ellipsis;
	white-space: nowrap;
	transition: color 160ms ease, opacity 160ms ease;
}

.marker-water-hero-score.is-history-preview .marker-water-hero-score-time {
	color: #9bb3be;
	opacity: 1;
}

.marker-water-hero-orbit {
    position: relative;
    display: grid;
    width: 104px;
    height: 104px;
    place-items: center;
    border: 1px solid rgba(125, 211, 252, 0.08);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.035), transparent 64%);
    box-shadow: 0 0 24px color-mix(in srgb, var(--wqi-color) 8%, transparent);
    transition: box-shadow 0.25s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.marker-water-hero-orbit::before,
.marker-water-hero-orbit::after {
    position: absolute;
    border: 1px dashed rgba(125, 211, 252, 0.11);
    border-radius: 50%;
    content: "";
}

.marker-water-hero-orbit::before {
    inset: 7px;
}

.marker-water-hero-orbit::after {
    inset: 14px;
}

.marker-water-hero-score:hover .marker-water-hero-orbit,
.marker-water-hero-score:focus-visible .marker-water-hero-orbit {
    box-shadow: 0 0 34px color-mix(in srgb, var(--wqi-color) 20%, transparent);
    transform: scale(1.035);
}

.marker-water-hero-ring {
    position: relative;
    display: grid;
    width: 86px;
    height: 86px;
    place-items: center;
    border-radius: 50%;
    /* Start at the bottom and grow equally along both sides toward the top. */
    background: conic-gradient(from 180deg,
        var(--wqi-color) 0deg calc(var(--wqi-angle) / 2),
        rgba(112, 150, 167, 0.13) calc(var(--wqi-angle) / 2) calc(360deg - var(--wqi-angle) / 2),
        var(--wqi-color) calc(360deg - var(--wqi-angle) / 2) 360deg);
    box-shadow: 0 0 16px color-mix(in srgb, var(--wqi-color) 18%, transparent);
}

.marker-water-hero-ring::before {
    position: absolute;
    inset: 7px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 50%;
    background: radial-gradient(circle at 38% 28%, rgba(28, 54, 68, 0.98), rgba(5, 15, 24, 0.99) 72%);
    content: "";
}

.marker-water-hero-ring > span {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
}

.marker-water-hero-ring small {
    position: absolute;
    top: calc(50% + 19px);
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    line-height: 1;
    white-space: nowrap;
    color: #688899;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.marker-water-hero-ring strong {
    font-family: var(--wl-font-mono);
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    margin: 0;
    padding: 0;
    line-height: 1;
    transform: translate(-50%, -58%);
    color: var(--wqi-color);
    font-size: 29px;
    font-weight: 750;
    letter-spacing: 0;
    text-shadow: 0 0 15px color-mix(in srgb, var(--wqi-color) 30%, transparent);
}

/* Center the visible capital/digit area, excluding the font's ascent/descent space. */
@supports (text-box-trim: trim-both) {
    .marker-water-hero-ring strong {
        text-box-trim: trim-both;
        text-box-edge: cap alphabetic;
        transform: translate(-50%, -50%);
    }
}

.marker-water-hero-ring em {
    margin-top: 2px;
    color: #4f6c7a;
    font-size: 7px;
    font-style: normal;
    font-weight: 700;
}

.marker-water-hero-summary {
    position: relative;
    overflow: visible;
    min-width: 0;
    min-height: 0;
    opacity: 1;
    transition: opacity 0.2s ease, transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

.marker-water-hero-summary-current {
    position: relative;
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: center;
}

.marker-water-hero-history {
    position: absolute;
    z-index: 3;
    top: 10px;
    right: 12px;
    bottom: 78px;
    left: calc(100% - 170px);
    display: block;
    min-width: 0;
    height: auto;
    min-height: 0;
    padding: 0;
    border: 0;
    pointer-events: none;
    transition:
        top 0.38s cubic-bezier(0.22, 1, 0.36, 1),
        right 0.38s cubic-bezier(0.22, 1, 0.36, 1),
        bottom 0.38s cubic-bezier(0.22, 1, 0.36, 1),
        left 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

.marker-water-hero-history > header,
.marker-water-hero-history > footer {
    position: absolute;
    z-index: 4;
    right: 0;
    left: 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    opacity: 0;
    transform: translateY(2px);
    transition: opacity 0.2s ease, transform 0.25s ease;
}

.marker-water-hero-history > header {
    top: 0;
}

.marker-water-hero-history > footer {
    bottom: 0;
}

.marker-water-hero-history > header small,
.marker-water-hero-history > footer {
    color: #547484;
    font-size: 6px;
}

.marker-water-hero-history > header {
    justify-content: flex-end;
}

.marker-water-hero-history > svg,
.marker-water-hero-history .marker-water-history-plot {
    width: 100%;
    height: 100%;
    overflow: visible;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 11%, #000 89%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 11%, #000 89%, transparent 100%);
    transition: height 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

.marker-water-history-plot {
    position: relative;
    display: block;
}

.marker-water-history-plot > svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.marker-water-history-axis {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.marker-water-history-axis line {
    stroke: rgba(148, 192, 211, 0.13);
    stroke-width: 1;
    stroke-dasharray: 3 5;
    vector-effect: non-scaling-stroke;
}

/* Etykiety poza SVG: preserveAspectRatio=none rozciągałby tekst. */
.marker-water-history-labels {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.marker-water-history-labels > span {
    position: absolute;
    color: #a9c1cd;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1;
    white-space: nowrap;
    text-shadow: 0 1px 6px rgba(4, 14, 20, 0.85);
}

.marker-water-history-labels-y > span {
    left: 4px;
    transform: translateY(-50%);
}

.marker-water-history-labels-x > span {
    top: auto;
    bottom: 2px;
    transform: translateX(-50%);
}

.marker-water-history-labels-x > span.is-start {
    transform: translateX(0);
}

.marker-water-history-labels-x > span.is-end {
    transform: translateX(-100%);
}

.marker-water-history-area {
    stroke: none;
    opacity: 0;
    transition: opacity 0.22s ease;
}

.marker-water-history-line {
    fill: none;
    stroke: var(--wqi-color);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 1;
    filter: drop-shadow(0 0 5px color-mix(in srgb, var(--wqi-color) 68%, transparent));
    transition: opacity 0.22s ease;
    vector-effect: non-scaling-stroke;
}

.marker-water-history-line.is-wqi-gradient {
    filter: drop-shadow(0 0 4px rgba(203, 232, 220, 0.34));
}

.marker-water-history-dot {
    fill: #f8fdff;
    stroke: var(--wqi-color);
    stroke-width: 2;
    opacity: 0;
    filter: drop-shadow(0 0 4px var(--wqi-color));
    transition: opacity 0.2s ease;
    vector-effect: non-scaling-stroke;
}

.marker-water-history-point {
    outline: 0;
}

.marker-water-history-point > line {
    stroke: color-mix(in srgb, var(--wqi-color) 30%, transparent);
    stroke-width: 0.7;
    opacity: 0;
    vector-effect: non-scaling-stroke;
}

.marker-water-history-point-visible {
    fill: #071018;
    stroke: var(--wqi-color);
    stroke-width: 1.5;
    opacity: 0;
    filter: drop-shadow(0 0 3px var(--wqi-color));
    vector-effect: non-scaling-stroke;
}

.marker-water-history-point-hit {
    fill: transparent;
    stroke: none;
    pointer-events: none;
}

.marker-water-history-point.is-active > line,
.marker-water-history-point:focus > line {
    opacity: 1;
}

.marker-water-history-point.is-active .marker-water-history-point-visible,
.marker-water-history-point:focus .marker-water-history-point-visible {
    fill: #fff;
    opacity: 1;
}

.marker-water-history-tooltip {
    display: none !important;
    position: absolute;
    z-index: 6;
    top: 50%;
    display: flex;
    min-width: 104px;
    flex-direction: column;
    align-items: center;
    padding: 7px 10px 6px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 9px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--wqi-color) 10%, transparent), transparent 58%),
        rgba(5, 15, 24, 0.96);
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.035);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, calc(-100% - 4px));
    transition: opacity 0.15s ease, transform 0.2s ease;
}

.marker-water-history-tooltip::after {
    position: absolute;
    top: 100%;
    left: 50%;
    width: 7px;
    height: 7px;
    border-right: 1px solid rgba(148, 163, 184, 0.16);
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(5, 15, 24, 0.97);
    content: "";
    transform: translate(-50%, -4px) rotate(45deg);
}

.marker-water-history-tooltip.is-visible {
    opacity: 1;
    transform: translate(-50%, calc(-100% - 10px));
}

.marker-water-history-tooltip strong {
    font-family: var(--wl-font-mono);
    color: var(--wqi-color);
    font-size: 15px;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    white-space: nowrap;
}

.marker-water-history-tooltip small {
    font-family: var(--wl-font-mono);
    margin-top: 4px;
    color: #a9c1cd;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    font-weight: 650;
    letter-spacing: 0.015em;
    line-height: 1.3;
    white-space: nowrap;
}

.marker-water-history-expand {
    display: none;
}

.marker-water-history-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #5b7b8b;
    font-size: 7px;
}

.marker-water-history-empty i {
    color: var(--wqi-color);
}

@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
    .marker-water-hero-card:hover .marker-water-hero-summary {
        opacity: 0;
        pointer-events: none;
        transform: translateX(-8px);
    }

    .marker-water-hero-card:hover .marker-water-hero-history {
        top: 10px;
        right: 12px;
        bottom: 8px;
        left: 130px;
        pointer-events: auto;
    }

    .marker-water-hero-card:hover .marker-water-hero-history > svg,
    .marker-water-hero-card:hover .marker-water-hero-history .marker-water-history-plot {
        -webkit-mask-image: none;
        mask-image: none;
    }

    .marker-water-hero-card:hover .marker-water-hero-history > header,
    .marker-water-hero-card:hover .marker-water-hero-history > footer {
        opacity: 1;
        transform: translateY(0);
    }

    .marker-water-hero-card:hover .marker-water-history-axis,
    .marker-water-hero-card:hover .marker-water-history-labels,
    .marker-water-hero-card:hover .marker-water-history-dot {
        opacity: 1;
    }


    .marker-water-hero-card:hover .marker-water-history-line {
        opacity: 1;
    }

    .marker-water-hero-card:hover .marker-water-history-point-hit {
        pointer-events: all;
        cursor: pointer;
    }
}

.marker-water-hero-condition > span,
.marker-water-hero-condition > small {
    display: block;
}

.marker-water-hero-condition > span {
    color: var(--wqi-color);
    font-size: 17px;
    font-weight: 750;
    letter-spacing: -0.02em;
}

.marker-water-hero-condition > small {
    overflow: hidden;
    margin-top: 3px;
    color: #688899;
    font-size: 11px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* No current index: a quiet note in Geist Light, not a status. */
.select-tile-contener .marker-water-hero-condition.is-unavailable > small,
.marker-water-hero-condition.is-unavailable > small {
    font-weight: 300;
}

.marker-water-hero-trend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
}

.marker-water-hero-trend svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 4px currentColor);
}

.marker-water-hero-trend.is-better { color: #34d399; }
.marker-water-hero-trend.is-worse { color: #fb7185; }
.marker-water-hero-trend.is-flat { color: #7894a3; }

.marker-water-hero-spectrum {
    position: relative;
    isolation: isolate;
    height: 7px;
    margin-top: 10px;
    margin-bottom: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        #22c55e 0%,
        #84cc16 25%,
        #facc15 50%,
        #f97316 75%,
        #e11d48 100%
    );
    box-shadow:
        0 0 12px rgba(56, 189, 248, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.marker-water-hero-spectrum::before {
    position: absolute;
    z-index: 1;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.25), transparent 55%);
    content: "";
    pointer-events: none;
}

.marker-water-hero-spectrum > i {
    position: absolute;
    z-index: 3;
    top: 50%;
    /* Keep the whole marker inside the rail at both ends of the 0–100 scale. */
    left: clamp(7px, var(--wqi-level), calc(100% - 7px));
    width: 11px;
    height: 11px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--wqi-bar-color, var(--wqi-color));
    box-shadow: 0 0 10px var(--wqi-bar-color, var(--wqi-color));
    transform: translate(-50%, -50%);
}

.marker-water-hero-spectrum > span {
    position: absolute;
    top: 8px;
    color: #476573;
    font-size: 6px;
    font-weight: 700;
}

.marker-water-hero-spectrum .is-best { left: 0; }
.marker-water-hero-spectrum .is-watch { left: 50%; transform: translateX(-50%); }
.marker-water-hero-spectrum .is-alert { right: 0; }

.marker-water-hero-stats {
    display: grid;
    margin-top: 4px;
    padding-bottom: 2px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.marker-water-hero-stats > span {
    min-width: 0;
    text-align: center;
}

.marker-water-hero-stats > span + span {
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.marker-water-hero-stats small,
.marker-water-hero-stats strong {
    display: block;
}

.marker-water-hero-stats small {
    color: #a8c5d3;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.marker-water-hero-stats strong {
    margin-top: 6px;
    color: #b9cfda;
    font-size: 15px;
    font-weight: 650;
}

.marker-water-hero-temperature {
    position: relative;
    display: flex;
    min-height: 118px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 9px 7px 7px;
    overflow: hidden;
    border: 1px solid rgba(56, 189, 248, 0.16);
    border-radius: 15px;
    background:
        radial-gradient(circle at 50% 105%, rgba(14, 165, 233, 0.19), transparent 52%),
        linear-gradient(155deg, rgba(56, 189, 248, 0.08), rgba(255, 255, 255, 0.018));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
    transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}

.marker-water-hero-temperature:hover,
.marker-water-hero-temperature:focus-visible {
    border-color: rgba(56, 189, 248, 0.36);
    background:
        radial-gradient(circle at 50% 105%, rgba(14, 165, 233, 0.27), transparent 55%),
        linear-gradient(155deg, rgba(56, 189, 248, 0.12), rgba(255, 255, 255, 0.025));
    transform: translateY(-2px);
}

.marker-water-temperature-icon {
    position: absolute;
    top: 9px;
    right: 9px;
    color: #38bdf8;
    font-size: 11px;
    opacity: 0.75;
}

.marker-water-temperature-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.marker-water-temperature-copy > small {
    color: #5f7d8c;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.marker-water-temperature-copy > strong {
    margin-top: 5px;
    color: #e5f8ff;
    font-size: 25px;
    font-weight: 750;
    letter-spacing: -1px;
    line-height: 1;
}

.marker-water-temperature-copy > strong em {
    margin-left: 2px;
    color: #5d8295;
    font-size: 9px;
    font-style: normal;
}

.marker-water-temperature-copy > span {
    margin-top: 4px;
    font-size: 7px;
    font-weight: 700;
    text-transform: uppercase;
}

.marker-water-temperature-copy > span.is-up { color: #fb923c; }
.marker-water-temperature-copy > span.is-down { color: #38bdf8; }
.marker-water-temperature-copy > span.is-flat { color: #7894a3; }

.marker-water-temperature-stats {
    display: grid;
    width: 100%;
    margin-top: 9px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.marker-water-temperature-stats > span {
    min-width: 0;
    text-align: center;
}

.marker-water-temperature-stats > span + span {
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.marker-water-temperature-stats small,
.marker-water-temperature-stats strong {
    display: block;
}

.marker-water-temperature-stats small {
    color: #456675;
    font-size: 6px;
    text-transform: uppercase;
}

.marker-water-temperature-stats strong {
    margin-top: 2px;
    color: #9fbac7;
    font-size: 7px;
}

.marker-water-hero-footer {
    position: relative;
    z-index: 2;
    display: flex;
    min-height: 29px;
    align-items: center;
    justify-content: center;
    padding: 5px 13px 7px;
    border-top: 0;
    color: #4e6d7c;
    font-size: 7px;
    letter-spacing: 0.025em;
}

.marker-water-hero-brand {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    color: #87a5b3;
    font-size: 10px;
    font-weight: 650;
}

.marker-water-hero-brand > strong {
    color: #a6bfca;
    font-size: 10px;
    font-weight: 700;
}

.marker-water-hero-brand sup {
    position: relative;
    top: -0.25em;
    margin-left: 1px;
    color: #5de6b5;
    font-size: 7px;
    font-weight: 900;
    line-height: 0;
    text-shadow: 0 0 9px rgba(93, 230, 181, 0.42);
}

.marker-water-hero-brand > small {
    color: #4d6b79;
    font-size: 8px;
    font-weight: 500;
}

.marker-water-hero-brand > a {
    color: #52cbed;
    font-size: 9px;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.2s ease, text-shadow 0.2s ease;
}

.marker-water-hero-brand > a:hover,
.marker-water-hero-brand > a:focus-visible {
    color: #7ee7ff;
    text-decoration: none;
    text-shadow: 0 0 9px rgba(82, 203, 237, 0.45);
}

.marker-water-hero-actions {
    position: relative;
    z-index: 3;
    display: grid;
    min-height: 52px;
    margin-top: 8px;
    padding: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
}

.marker-water-hero-actions:has([data-action="alarms"]) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.marker-water-hero-quick-action {
	position: relative;
	display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 7px 4px;
    border: 1px solid rgba(125, 211, 252, 0.14);
    border-radius: 12px;
    outline: 0;
    color: #7292a1;
    background:
        radial-gradient(circle at 50% 0, rgba(56, 189, 248, 0.08), transparent 68%),
        linear-gradient(155deg, rgba(18, 39, 52, 0.96), rgba(5, 15, 24, 0.98));
    box-shadow:
        0 9px 18px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.055);
    font: inherit;
    cursor: pointer;
	transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.marker-water-hero-action-help {
	position: relative;
	display: flex;
	min-width: 0;
}

.marker-water-hero-action-help > .marker-water-hero-quick-action {
	width: 100%;
	height: 100%;
}

.marker-water-hero-action-rich-hint {
	position: absolute;
	z-index: 21;
	bottom: calc(100% + 9px);
	left: 50%;
	display: flex;
	flex-direction: column;
	width: max-content;
	max-width: min(220px, calc(100vw - 32px));
	box-sizing: border-box;
	align-items: flex-start;
	padding: 7px 9px;
	border: 1px solid rgba(125, 211, 252, 0.2);
	border-radius: 8px;
	opacity: 0;
	gap: 5px;
	color: #e4f7ff;
	background: rgba(4, 14, 22, 0.97);
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.34);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.3;
	pointer-events: none;
	transform: translate(-50%, 4px);
	transition: opacity 0.16s ease, transform 0.16s ease;
}

.marker-water-hero-action-rich-hint > span {
	min-width: 0;
	white-space: nowrap;
}

.marker-water-hero-action-rich-hint::before {
	position: absolute;
	right: 0;
	bottom: -10px;
	left: 0;
	height: 10px;
	content: "";
}

.marker-water-hero-action-rich-hint > a {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 5px;
	color: #67d8f4;
	font-size: 11px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.marker-water-hero-action-rich-hint > a:hover,
.marker-water-hero-action-rich-hint > a:focus-visible {
	color: #ffffff;
	text-decoration: underline;
}

.marker-water-hero-action-help:hover .marker-water-hero-action-rich-hint,
.marker-water-hero-action-help:focus-within .marker-water-hero-action-rich-hint {
	opacity: 1;
	pointer-events: auto;
	transform: translate(-50%, 0);
}

.marker-water-hero-quick-action::after {
	position: absolute;
	z-index: 20;
	bottom: calc(100% + 9px);
	left: 50%;
	width: max-content;
	max-width: min(220px, calc(100vw - 32px));
	padding: 7px 9px;
	border: 1px solid rgba(125, 211, 252, 0.2);
	border-radius: 8px;
	opacity: 0;
	color: #e4f7ff;
	background: rgba(4, 14, 22, 0.97);
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.34);
	content: attr(data-hint);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.3;
	pointer-events: none;
	text-align: center;
	transform: translate(-50%, 4px);
	transition: opacity 0.16s ease, transform 0.16s ease;
	white-space: normal;
}

.marker-water-hero-quick-action:not([data-hint])::after {
	display: none;
}

.marker-water-hero-quick-action:first-child::after {
	left: 0;
	transform: translate(0, 4px);
}

.marker-water-hero-quick-action:last-child::after {
	right: 0;
	left: auto;
	transform: translate(0, 4px);
}

.marker-water-hero-quick-action:hover::after,
.marker-water-hero-quick-action:focus-visible::after {
	opacity: 1;
	transform: translate(-50%, 0);
}

.marker-water-hero-quick-action:first-child:hover::after,
.marker-water-hero-quick-action:first-child:focus-visible::after,
.marker-water-hero-quick-action:last-child:hover::after,
.marker-water-hero-quick-action:last-child:focus-visible::after {
	transform: translate(0, 0);
}

.marker-water-hero-quick-action i {
    color: #60cdeb;
    font-size: 10px;
}

.marker-water-hero-quick-action span {
    overflow: hidden;
    font-size: 12px;
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.marker-water-hero-quick-action:hover,
.marker-water-hero-quick-action:focus-visible {
    border-color: color-mix(in srgb, var(--wqi-color) 35%, transparent);
    color: #dff7ff;
    background: color-mix(in srgb, var(--wqi-color) 10%, rgba(255, 255, 255, 0.025));
    transform: translateY(-1px);
}

.marker-water-hero-quick-action:hover i,
.marker-water-hero-quick-action:focus-visible i {
    color: var(--wqi-color);
}

.marker-water-hero-quick-action.is-observed {
    border-color: rgba(251, 113, 133, 0.48);
    color: #ffe4e9;
    background:
        radial-gradient(circle at 50% 0, rgba(251, 113, 133, 0.24), transparent 72%),
        linear-gradient(155deg, rgba(75, 25, 42, 0.96), rgba(35, 12, 25, 0.98));
    box-shadow:
        0 9px 22px rgba(82, 19, 40, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.marker-water-hero-quick-action.is-observed i,
.marker-water-hero-quick-action.is-observed:hover i,
.marker-water-hero-quick-action.is-observed:focus-visible i {
    color: #fb7185;
    filter: drop-shadow(0 0 5px rgba(251, 113, 133, 0.45));
}

.marker-water-hero-quick-action.is-observed:hover,
.marker-water-hero-quick-action.is-observed:focus-visible {
    border-color: rgba(251, 113, 133, 0.68);
    color: #ffffff;
    background: rgba(100, 29, 52, 0.9);
}

.marker-water-hero-card.is-stale .marker-water-hero-score,
.marker-water-hero-temperature.is-stale {
    opacity: 0.56;
}

@media (max-width: 430px) {
    .marker-water-hero-content {
        height: auto;
        grid-template-columns: 104px minmax(0, 1fr);
        overflow: visible;
    }

    .marker-water-hero-history {
        top: 10px;
        right: 12px;
        bottom: 78px;
        left: calc(100% - 150px);
    }

    .marker-water-hero-temperature {
        min-height: 88px;
        grid-column: 1 / -1;
        flex-direction: row;
        justify-content: space-between;
        padding: 9px 12px;
    }

    .marker-water-temperature-copy {
        align-items: flex-start;
    }

    .marker-water-temperature-stats {
        width: 52%;
        margin-top: 0;
    }

    .marker-water-hero-footer {
        gap: 6px;
    }

    .marker-water-hero-title {
        max-width: none;
        flex: 1 1 auto;
        width: 100%;
    }

    .marker-water-hero-title strong {
        max-width: 100%;
    }

    .marker-water-hero-actions {
        min-height: 58px;
    }

    .marker-water-hero-quick-action {
        flex-direction: column;
        gap: 3px;
    }

    .marker-water-hero-quick-action span {
        font-size: 12px;
    }
}

.marker-water-temperature-widget {
    width: 100%;
    margin: 10px 0 4px;
}

.marker-water-temperature-card {
    display: block;
    width: 100%;
    overflow: hidden;
    padding: 0;
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 17px;
    outline: 0;
    color: #e8f8ff;
    background:
        radial-gradient(circle at 4% 50%, rgba(14, 165, 233, 0.18), transparent 30%),
        radial-gradient(circle at 92% 120%, rgba(45, 212, 191, 0.1), transparent 38%),
        linear-gradient(145deg, rgba(18, 39, 52, 0.98), rgba(5, 15, 24, 0.99));
    box-shadow:
        0 14px 28px -20px rgba(0, 0, 0, 0.9),
        inset 0 1px 0 rgba(255, 255, 255, 0.065);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

.marker-water-temperature-card:hover,
.marker-water-temperature-card:focus-visible {
    border-color: rgba(56, 189, 248, 0.4);
    box-shadow:
        0 16px 32px -20px rgba(0, 0, 0, 0.94),
        0 0 22px rgba(56, 189, 248, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transform: translateY(-1px);
}

.marker-water-temperature-card.is-stale {
    opacity: 0.58;
}

.marker-water-temperature-header {
    display: flex;
    min-height: 42px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 11px;
    border-bottom: 1px solid rgba(125, 211, 252, 0.08);
    background: rgba(255, 255, 255, 0.018);
}

.marker-water-temperature-heading {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
}

.marker-water-temperature-heading > i {
    display: flex;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 9px;
    color: #67d8f8;
    background: rgba(14, 165, 233, 0.09);
    box-shadow: 0 0 14px rgba(56, 189, 248, 0.08);
}

.marker-water-temperature-heading strong,
.marker-water-temperature-heading small {
    display: block;
}

/* Fresh measurements stay visually silent. This notice is rendered only for
   aging, archived or timestamp-less values and always belongs to one metric. */
.marker-data-status.marker-data-status {
    display: inline-flex;
    overflow: hidden;
    max-width: 100%;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
    padding: 3px 8px;
    border: 1px solid rgba(214, 173, 86, 0.16);
    border-radius: 999px;
    background: rgba(214, 173, 86, 0.06);
    color: #d6ad56;
    font-size: 10px;
    font-weight: 700;
    line-height: 12px;
    letter-spacing: 0;
    text-overflow: ellipsis;
    text-transform: none;
    white-space: nowrap;
}

.marker-data-status.marker-data-status > i {
    flex: 0 0 auto;
    font-size: 9px;
}

.marker-data-status.is-stale,
.marker-data-status.is-time-unknown {
    color: #e5a64e;
}

.marker-data-status.is-time-unknown {
    border-color: rgba(125, 153, 169, 0.16);
    background: rgba(125, 153, 169, 0.05);
    color: #7d99a9;
}

.marker-water-temperature-heading strong {
    font-size: 11px;
    font-weight: 750;
}

.marker-water-temperature-heading small:not(.marker-data-status) {
    overflow: hidden;
    max-width: 230px;
    margin-top: 1px;
    color: #567887;
    font-size: 7px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.marker-water-temperature-trend {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 4px;
    font-size: 7px;
    font-weight: 750;
    text-transform: uppercase;
}

.marker-water-temperature-trend.is-up { color: #fb923c; }
.marker-water-temperature-trend.is-down { color: #38bdf8; }
.marker-water-temperature-trend.is-flat { color: #7894a3; }

.marker-water-temperature-body {
    display: grid;
    min-height: 66px;
    align-items: center;
    padding: 8px 11px 10px;
    grid-template-columns: 88px minmax(110px, 1fr) 142px;
    gap: 12px;
}

.marker-water-temperature-value {
    color: #eafaff;
    font-size: 28px;
    font-weight: 780;
    letter-spacing: -1.2px;
    line-height: 1;
}

.marker-water-temperature-value > small {
    margin-left: 2px;
    color: #65b8cf;
    font-size: 10px;
    font-weight: 700;
}

.marker-water-temperature-scale {
    position: relative;
    display: block;
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, #2563eb, #22d3ee 31%, #34d399 54%, #facc15 77%, #fb7185);
    box-shadow: 0 0 14px rgba(56, 189, 248, 0.1);
}

.marker-water-temperature-scale > i {
    position: absolute;
    inset: -4px 0;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    content: "";
}

.marker-water-temperature-scale > b {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: var(--water-temperature-level);
    width: 13px;
    height: 13px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #67e8f9;
    box-shadow: 0 0 11px rgba(103, 232, 249, 0.8);
    transform: translate(-50%, -50%);
}

.marker-water-temperature-scale > small {
    position: absolute;
    top: 11px;
    color: #4f7180;
    font-size: 6px;
    font-weight: 650;
}

.marker-water-temperature-scale > small.is-min { left: 0; }
.marker-water-temperature-scale > small.is-max { right: 0; }

.marker-water-temperature-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.marker-water-temperature-summary > span {
    min-width: 0;
    text-align: center;
}

.marker-water-temperature-summary > span + span {
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.marker-water-temperature-summary small,
.marker-water-temperature-summary strong {
    display: block;
}

.marker-water-temperature-summary small {
    color: #4e6f7f;
    font-size: 6px;
    text-transform: uppercase;
}

.marker-water-temperature-summary strong {
    margin-top: 3px;
    color: #a9c6d2;
    font-size: 9px;
}

@media (max-width: 430px) {
    .marker-water-temperature-body {
        min-height: 94px;
        grid-template-columns: 88px minmax(0, 1fr);
        gap: 12px;
        padding-bottom: 9px;
    }

    .marker-water-temperature-summary {
        grid-column: 1 / -1;
        padding-top: 5px;
    }
}

/* ==========================================================================
   Water depth widget — live probe position in a vertical water column
   ========================================================================== */

.marker-water-depth-widget {
    width: 100%;
    margin: 10px 0 4px;
}

.marker-water-depth-card {
    display: block;
    width: 100%;
    overflow: hidden;
    padding: 0;
    border: 1px solid rgba(34, 211, 238, 0.2);
    border-radius: 18px;
    outline: 0;
    color: #e8f8ff;
    background:
        radial-gradient(circle at 12% 18%, rgba(103, 232, 249, 0.17), transparent 31%),
        radial-gradient(circle at 86% 110%, rgba(37, 99, 235, 0.14), transparent 42%),
        linear-gradient(150deg, rgba(15, 43, 59, 0.98), rgba(5, 16, 28, 0.99));
    box-shadow: 0 16px 30px -22px rgba(0, 0, 0, 0.92), inset 0 1px 0 rgba(255, 255, 255, 0.07);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

.marker-water-depth-card:hover,
.marker-water-depth-card:focus-visible {
    border-color: rgba(34, 211, 238, 0.42);
    box-shadow: 0 18px 34px -22px rgba(0, 0, 0, 0.94), 0 0 24px rgba(34, 211, 238, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.09);
    transform: translateY(-1px);
}

.marker-water-depth-card.is-stale { opacity: 0.58; }

.marker-water-depth-header {
    display: flex;
    min-height: 42px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 11px;
    border-bottom: 1px solid rgba(103, 232, 249, 0.09);
    background: linear-gradient(90deg, rgba(34, 211, 238, 0.045), transparent 58%);
}

.marker-water-depth-title {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
}

.marker-water-depth-title > i {
    display: flex;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(34, 211, 238, 0.2);
    border-radius: 9px;
    color: #67e8f9;
    background: rgba(34, 211, 238, 0.09);
    box-shadow: 0 0 14px rgba(34, 211, 238, 0.08);
}

.marker-water-depth-title strong,
.marker-water-depth-title small { display: block; }

.marker-water-depth-title strong {
    font-size: 11px;
    font-weight: 750;
}

.marker-water-depth-trend {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 4px;
    font-size: 7px;
    font-weight: 750;
    text-transform: uppercase;
}

.marker-water-depth-trend.is-deeper { color: #38bdf8; }
.marker-water-depth-trend.is-shallower { color: #2dd4bf; }
.marker-water-depth-trend.is-flat { color: #7894a3; }

.marker-water-depth-body {
    display: grid;
    padding: 9px 11px 11px;
    gap: 7px;
}

.marker-water-depth-primary,
.marker-water-depth-reading {
    display: flex;
    min-width: 0;
    align-items: center;
}

.marker-water-depth-primary {
    min-height: 42px;
    gap: 9px;
    padding: 4px 2px 6px;
}

.marker-water-depth-primary > strong {
    flex: 0 0 auto;
    color: #efffff;
    font-size: 23px;
    font-weight: 800;
    letter-spacing: -0.8px;
    line-height: 1;
    white-space: nowrap;
}

.marker-water-depth-primary > strong > em {
    margin-left: 3px;
    color: #69d8d5;
    font-size: 9px;
    font-style: normal;
    font-weight: 750;
    letter-spacing: 0;
}

.marker-water-depth-track {
    position: relative;
    display: block;
    min-width: 70px;
    height: 16px;
    flex: 1 1 auto;
    overflow: visible;
    border-radius: 2px;
    background: repeating-linear-gradient(90deg, rgba(100, 116, 139, 0.35) 0 12px, transparent 12px 15px);
}

.marker-water-depth-track > i {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--water-depth-level);
    overflow: hidden;
    border-radius: inherit;
    background: repeating-linear-gradient(90deg, rgba(45, 212, 191, 0.78) 0 12px, transparent 12px 15px);
    transition: width 1s cubic-bezier(0.2, 0.8, 0.2, 1);
    animation: marker-depth-fill-move 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.marker-water-depth-track > b {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: var(--water-depth-level);
    width: 12px;
    height: 22px;
    border-radius: 3px;
    background: #a7fff7;
    box-shadow: 0 0 7px #5eead4, 0 0 17px rgba(45, 212, 191, 0.8);
    transform: translate(-50%, -50%);
    transition: left 1s cubic-bezier(0.2, 0.8, 0.2, 1);
    animation:
        marker-depth-track-move 1s cubic-bezier(0.2, 0.8, 0.2, 1),
        marker-depth-track-glow 2.8s ease-in-out 1s infinite;
}

.marker-water-depth-track > em {
    position: absolute;
    z-index: 3;
    top: -7px;
    left: var(--depth-stat-level);
    width: 9px;
    height: 9px;
    border: 2px solid rgba(255, 255, 255, 0.88);
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 4px currentColor, 0 0 10px color-mix(in srgb, currentColor 58%, transparent);
    transform: translateX(-50%);
}

.marker-water-depth-track > em.is-min { color: #60a5fa; }
.marker-water-depth-track > em.is-average { color: #facc15; }
.marker-water-depth-track > em.is-max { color: #fb7185; }

@keyframes marker-depth-fill-move {
    from { width: var(--water-depth-start-level); }
    to { width: var(--water-depth-level); }
}

@keyframes marker-depth-track-move {
    from { left: var(--water-depth-start-level); }
    to { left: var(--water-depth-level); }
}

@keyframes marker-depth-track-glow {
    0%, 100% { box-shadow: 0 0 7px #5eead4, 0 0 15px rgba(45, 212, 191, 0.65); }
    50% { box-shadow: 0 0 9px #ccfbf1, 0 0 23px rgba(45, 212, 191, 0.95); }
}

.marker-water-depth-column {
    position: relative;
    display: block;
    min-height: 190px;
    overflow: hidden;
    border: 1px solid rgba(103, 232, 249, 0.17);
    border-radius: 14px;
    background:
        radial-gradient(circle at 25% 38%, rgba(34, 211, 238, 0.1), transparent 32%),
        linear-gradient(180deg, #102b3a, #071620 58%, #06111a);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 18px 36px rgba(0, 0, 0, 0.22);
}

.marker-water-depth-column::after {
    position: absolute;
    inset: 0 -8%;
    background: repeating-linear-gradient(118deg, transparent 0 30px, rgba(255, 255, 255, 0.025) 31px 33px, transparent 34px 58px);
    content: "";
    mask-image: linear-gradient(to bottom, #000 10%, transparent 88%);
    -webkit-mask-image: linear-gradient(to bottom, #000 10%, transparent 88%);
    pointer-events: none;
    animation: marker-depth-rays-shift 10s ease-in-out infinite;
}

@keyframes marker-depth-rays-shift {
    0%, 100% { transform: translateX(-4%); }
    50% { transform: translateX(4%); }
}

.marker-water-depth-scale {
    position: absolute;
    z-index: 2;
    top: 8px;
    bottom: 8px;
    left: 40px;
    width: 25px;
    border: 1px solid rgba(180, 218, 226, 0.48);
    border-radius: 7px;
    background:
        repeating-linear-gradient(to bottom, transparent 0 4px, rgba(180, 218, 226, 0.25) 4px 5px, transparent 5px 8px),
        rgba(2, 12, 19, 0.3);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.28), 0 0 12px rgba(34, 211, 238, 0.04);
}

.marker-water-depth-scale > i {
    position: absolute;
    top: var(--depth-mark-level);
    left: -35px;
    display: block;
    width: 59px;
    height: 1px;
    transform: translateY(-50%);
}

.marker-water-depth-scale > i::after {
    position: absolute;
    top: 0;
    right: 2px;
    width: 13px;
    border-top: 1px solid rgba(207, 250, 254, 0.66);
    content: "";
}

.marker-water-depth-scale b {
    position: absolute;
    top: -4px;
    left: 0;
    width: 29px;
    color: rgba(224, 251, 255, 0.72);
    font-size: 6.5px;
    font-weight: 700;
    text-align: right;
}

.marker-water-depth-cable {
    position: absolute;
    z-index: 2;
    top: 8px;
    left: 52px;
    width: 1px;
    height: calc(var(--water-depth-level) - 8px);
    background: linear-gradient(rgba(103, 232, 249, 0.1), #22d3ee);
    box-shadow: 0 0 8px rgba(34, 211, 238, 0.52);
    transition: height 1s cubic-bezier(0.2, 0.8, 0.2, 1);
    animation: marker-depth-cable-move 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.marker-water-depth-probe {
    position: absolute;
    z-index: 4;
    top: var(--water-depth-level);
    left: 40px;
    display: flex;
    width: 25px;
    height: 2px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #4ff3ee;
    box-shadow: 0 0 5px #4ff3ee, 0 0 14px rgba(79, 243, 238, 0.68);
    transform: translateY(-50%);
    transition: top 1s cubic-bezier(0.2, 0.8, 0.2, 1);
    animation:
        marker-depth-probe-move 1s cubic-bezier(0.2, 0.8, 0.2, 1),
        marker-depth-probe-glow 3s ease-in-out 1s infinite;
}

@keyframes marker-depth-cable-move {
    from { height: calc(var(--water-depth-start-level) - 8px); }
    to { height: calc(var(--water-depth-level) - 8px); }
}

@keyframes marker-depth-probe-move {
    from { top: var(--water-depth-start-level); }
    to { top: var(--water-depth-level); }
}

.marker-water-depth-probe > i {
    position: absolute;
    top: 50%;
    left: calc(100% + 3px);
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-right: 5px solid #67e8f9;
    transform: translateY(-50%);
}

.marker-water-depth-probe > em {
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 4px;
    border: 1px solid #67e8f9;
    border-radius: 50%;
    opacity: 0;
    transform: translate(-50%, -50%);
    animation: marker-depth-sonar-pulse 2.5s ease-out infinite;
}

.marker-water-depth-probe > em:nth-child(2) { animation-delay: 1.25s; }

@keyframes marker-depth-sonar-pulse {
    0% {
        width: 10px;
        height: 4px;
        border-width: 2px;
        opacity: 0.72;
    }
    100% {
        width: 64px;
        height: 22px;
        border-width: 1px;
        opacity: 0;
    }
}

@keyframes marker-depth-probe-glow {
    0%, 100% { box-shadow: 0 0 5px #4ff3ee, 0 0 12px rgba(79, 243, 238, 0.56); }
    50% { box-shadow: 0 0 7px #4ff3ee, 0 0 21px rgba(79, 243, 238, 0.88); }
}

.marker-water-depth-probe > b {
    position: absolute;
    top: 50%;
    left: 100%;
    width: 13px;
    border-top: 1px solid rgba(79, 243, 238, 0.68);
}

.marker-water-depth-probe > span {
    position: absolute;
    top: 50%;
    left: calc(100% + 16px);
    display: block;
    min-width: 82px;
    transform: translateY(-50%);
}

.marker-water-depth-probe > span > small,
.marker-water-depth-probe > span > strong { display: block; }

.marker-water-depth-probe > span > small {
    color: #69bfc4;
    font-size: 6px;
    font-weight: 750;
    letter-spacing: 0.2px;
    text-transform: uppercase;
}

.marker-water-depth-probe > span > strong {
    margin-top: 1px;
    color: #9ff9f5;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.marker-water-depth-probe > span strong > em {
    color: #69bfc4;
    font-size: 8px;
    font-style: normal;
    text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
    .marker-water-depth-column::after,
    .marker-water-depth-cable,
    .marker-water-depth-probe,
    .marker-water-depth-probe > em,
    .marker-water-depth-track > i,
    .marker-water-depth-track > b {
        animation: none !important;
    }

    .marker-water-depth-cable,
    .marker-water-depth-probe,
    .marker-water-depth-track > i,
    .marker-water-depth-track > b {
        transition: none !important;
    }
}

.marker-water-depth-reading {
    display: flex;
    min-width: 0;
    min-height: 36px;
    align-items: center;
    padding: 2px 0 0;
}

.marker-water-depth-stats {
    display: grid;
    min-width: 0;
    flex: 1 1 auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.marker-water-depth-stats > span { min-width: 0; text-align: center; }
.marker-water-depth-stats small,
.marker-water-depth-stats strong { display: block; }

.marker-water-depth-stats small {
    color: #527686;
    font-size: 7.5px;
    font-weight: 700;
    text-transform: uppercase;
}

.marker-water-depth-stats strong {
    margin-top: 4px;
    color: #abcbd5;
    font-size: 11.5px;
}

.marker-water-depth-stats em {
    margin-left: 2px;
    color: #5f8493;
    font-size: 7.5px;
    font-style: normal;
}

.marker-water-depth-stats > span.is-min small { color: #60a5fa; }
.marker-water-depth-stats > span.is-average small { color: #d9ad19; }
.marker-water-depth-stats > span.is-max small { color: #fb7185; }

@media (max-width: 430px) {
    .marker-water-depth-primary { gap: 7px; padding-right: 8px; padding-left: 8px; }
    .marker-water-depth-primary > strong { font-size: 20px; }
    .marker-water-depth-track { min-width: 52px; }
    .marker-water-depth-reading { padding-right: 8px; padding-left: 8px; }
    .marker-water-depth-stats small { font-size: 7px; }
    .marker-water-depth-stats strong { font-size: 11px; }
}

/* ==========================================================================
   Water oxygenation widget — dual concentric gauge (saturation + dissolved O2)
   ========================================================================== */

.marker-water-oxygen-widget {
    width: 100%;
    container-type: inline-size;
    container-name: oxygen;
    margin: 10px 0 4px;
    --oxygen-sat: #22d3ee;
    --oxygen-do: #a3e635;
    --oxygen-accent: #38e0f2;
}

.marker-water-oxygen-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid rgba(34, 211, 238, 0.22);
    border-radius: 19px;
    color: #eafaff;
    background:
        radial-gradient(120% 78% at 50% -12%, rgba(34, 211, 238, 0.17), transparent 62%),
        radial-gradient(96% 62% at 50% 116%, rgba(163, 230, 53, 0.13), transparent 60%),
        linear-gradient(155deg, rgba(17, 39, 53, 0.985), rgba(5, 13, 21, 0.995));
    box-shadow:
        0 18px 34px -22px rgba(0, 0, 0, 0.92),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* Faint instrument grid, fades out towards the bottom. */
.marker-water-oxygen-card::before {
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
    background-size: 22px 22px;
    content: "";
    mask-image: linear-gradient(to bottom, black, transparent 78%);
    -webkit-mask-image: linear-gradient(to bottom, black, transparent 78%);
}

.marker-water-oxygen-card.is-stale {
    border-color: rgba(251, 191, 36, 0.22);
}

/* Rising bubbles — the signature of the widget. */
.marker-water-oxygen-bubbles {
    position: absolute;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    border-radius: inherit;
    mask-image: linear-gradient(to top, transparent, black 22%, black 72%, transparent);
    -webkit-mask-image: linear-gradient(to top, transparent, black 22%, black 72%, transparent);
}

.marker-water-oxygen-bubbles > i {
    position: absolute;
    bottom: -14px;
    left: var(--bubble-x);
    width: var(--bubble-size);
    height: var(--bubble-size);
    border: 1px solid rgba(190, 245, 255, 0.42);
    border-radius: 50%;
    opacity: 0;
    background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.5), rgba(56, 224, 242, 0.06) 62%, transparent);
    animation: marker-water-oxygen-rise var(--bubble-duration) linear var(--bubble-delay) infinite;
}

@keyframes marker-water-oxygen-rise {
    0% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.62); }
    12% { opacity: 0.75; }
    72% { opacity: 0.5; }
    100% { opacity: 0; transform: translate3d(var(--bubble-drift), -232px, 0) scale(1.12); }
}

.marker-water-oxygen-header,
.marker-water-oxygen-body {
    position: relative;
    z-index: 1;
}

.marker-water-oxygen-header {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 9px;
    border-bottom: 1px solid rgba(125, 211, 252, 0.09);
    background: rgba(255, 255, 255, 0.02);
}

.marker-water-oxygen-title {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 7px;
}

.marker-water-oxygen-title > i {
    position: relative;
    display: flex;
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(34, 211, 238, 0.26);
    border-radius: 9px;
    color: #67e8f9;
    background: rgba(34, 211, 238, 0.1);
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 0.02em;
    box-shadow: 0 0 16px rgba(34, 211, 238, 0.14);
}

.marker-water-oxygen-title > i sub {
    font-size: 8px;
    font-weight: 700;
    vertical-align: -2px;
}

.marker-water-oxygen-title > i::after {
    position: absolute;
    inset: -1px;
    border: 1px solid rgba(103, 232, 249, 0.5);
    border-radius: inherit;
    content: "";
    animation: marker-water-oxygen-halo 2.8s ease-out infinite;
}

@keyframes marker-water-oxygen-halo {
    0% { opacity: 0.55; transform: scale(1); }
    70% { opacity: 0; transform: scale(1.42); }
    100% { opacity: 0; transform: scale(1.42); }
}

.marker-water-oxygen-title strong,
.marker-water-oxygen-title small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.marker-water-oxygen-title strong {
    font-size: 13px;
    font-weight: 780;
    letter-spacing: 0.01em;
}

.marker-water-oxygen-title small {
    margin-top: 1px;
    color: #5c7d8c;
    font-size: 7.5px;
    font-weight: 650;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.marker-water-oxygen-status {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 3px 7px;
    border: 1px solid rgba(52, 211, 153, 0.24);
    border-radius: 999px;
    color: #55dcae;
    background: rgba(6, 78, 59, 0.2);
    font-size: 7px;
    font-weight: 760;
    text-transform: uppercase;
}

.marker-water-oxygen-status > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.marker-water-oxygen-status > span > i:empty {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 8px #34d399;
    animation: marker-water-oxygen-pulse 2s ease-in-out infinite;
}

@keyframes marker-water-oxygen-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 8px #34d399; }
    50% { opacity: 0.45; box-shadow: 0 0 3px #34d399; }
}

.marker-water-oxygen-status > small {
    max-width: 96px;
    overflow: hidden;
    color: #6d9186;
    font-size: 6.5px;
    font-weight: 560;
    text-overflow: ellipsis;
    text-transform: none;
    white-space: nowrap;
}

.marker-water-oxygen-status.is-stale {
    border-color: rgba(251, 191, 36, 0.28);
    color: #fbbf24;
    background: rgba(120, 78, 8, 0.2);
}

.marker-water-oxygen-status.is-stale > small {
    color: #a98b4d;
}

.marker-water-oxygen-body {
    display: grid;
    align-items: center;
    gap: 10px 14px;
    padding: 9px 12px 11px;
    grid-template-columns: 152px minmax(0, 1fr);
}

.marker-water-oxygen-side {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 7px;
}

/* --- Concentric dual gauge ------------------------------------------------ */

.marker-water-oxygen-gauge {
    position: relative;
    display: block;
    width: 152px;
    max-width: 100%;
    justify-self: center;
    padding: 0;
    border: 0;
    outline: 0;
    color: inherit;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

.marker-water-oxygen-gauge > svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.marker-water-oxygen-ring-track {
    fill: none;
    stroke: rgba(120, 165, 188, 0.13);
    stroke-linecap: round;
}

.marker-water-oxygen-ring-track.is-outer { stroke-width: 8; }
.marker-water-oxygen-ring-track.is-inner { stroke-width: 6; }

/* --ring-start is the reading that is already on screen (zero on the first render), so a
   background refresh glides from the current value instead of sweeping from zero again. */
.marker-water-oxygen-ring-fill {
    fill: none;
    stroke: var(--ring-color);
    stroke-dasharray: var(--ring-level) 100;
    stroke-linecap: round;
    filter: drop-shadow(0 0 5px color-mix(in srgb, var(--ring-color) 62%, transparent));
    animation: marker-water-oxygen-sweep 1.05s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.marker-water-oxygen-ring-fill.is-outer { stroke-width: 8; }
.marker-water-oxygen-ring-fill.is-inner { stroke-width: 6; animation-delay: 0.12s; }

@keyframes marker-water-oxygen-sweep {
    from { stroke-dasharray: var(--ring-start) 100; }
}

/* Light pulse travelling along the filled part of each ring. */
.marker-water-oxygen-ring-comet {
    fill: none;
    stroke: #ffffff;
    stroke-dasharray: 3 100;
    stroke-linecap: round;
    animation: marker-water-oxygen-comet 3.8s cubic-bezier(0.55, 0, 0.45, 1) infinite;
}

.marker-water-oxygen-ring-comet.is-outer { stroke-width: 5; }
.marker-water-oxygen-ring-comet.is-inner { stroke-width: 3.5; animation-delay: 0.9s; }

@keyframes marker-water-oxygen-comet {
    0% { opacity: 0; stroke-dashoffset: 0; }
    10% { opacity: 0.55; }
    70% { opacity: 0.4; }
    100% { opacity: 0; stroke-dashoffset: calc(var(--ring-level) * -1px); }
}

/* The cap keeps its final position in the cx/cy attributes — the travel is a pure CSS
   overlay, so browsers without geometry properties still park it in the right spot. */
.marker-water-oxygen-ring-cap {
    fill: #f6feff;
    stroke: var(--ring-color);
    stroke-width: 2;
    filter: drop-shadow(0 0 5px var(--ring-color));
    animation:
        marker-water-oxygen-cap-move 1.05s cubic-bezier(0.22, 1, 0.36, 1) both,
        marker-water-oxygen-cap 2.4s ease-in-out infinite;
}

.marker-water-oxygen-ring-cap.is-inner {
    animation-delay: 0.12s, 0s;
}

@keyframes marker-water-oxygen-cap-move {
    from { cx: var(--cap-start-x); cy: var(--cap-start-y); }
    to { cx: var(--cap-x); cy: var(--cap-y); }
}

@keyframes marker-water-oxygen-cap {
    0%, 100% { opacity: 1; r: 3.1; }
    50% { opacity: 0.72; r: 3.9; }
}

.marker-water-oxygen-ring-mark {
    stroke: rgba(226, 250, 255, 0.42);
    stroke-width: 1.4;
    stroke-linecap: round;
}

.marker-water-oxygen-ring-label {
    fill: #62808e;
    font-size: 6px;
    font-weight: 780;
    letter-spacing: 0.06em;
    text-anchor: middle;
}

.marker-water-oxygen-ring-label.is-top {
    fill: #86adbd;
    font-size: 5.5px;
}

.marker-water-oxygen-core {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    width: 84px;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transform: translate(-50%, -54%);
}

.marker-water-oxygen-core > strong {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 1px;
    color: var(--oxygen-sat);
    font-size: 31px;
    font-weight: 830;
    letter-spacing: -1.4px;
    line-height: 1;
    text-shadow: 0 0 18px color-mix(in srgb, var(--oxygen-sat) 45%, transparent);
}

.marker-water-oxygen-core > strong > i {
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0;
}

.marker-water-oxygen-core > small {
    margin-top: 1px;
    color: #6c8d9c;
    font-size: 7px;
    font-weight: 760;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.marker-water-oxygen-core > em {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    margin-top: 5px;
    padding: 2px 7px;
    border: 1px solid color-mix(in srgb, var(--oxygen-do) 26%, transparent);
    border-radius: 999px;
    color: var(--oxygen-do);
    background: color-mix(in srgb, var(--oxygen-do) 10%, transparent);
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
    line-height: 1.25;
}

.marker-water-oxygen-core > em > span {
    color: #8aa87c;
    font-size: 7px;
    font-weight: 700;
}

/* --- Verdict badge (same pill style as mineral conductivity class) -------- */

.marker-water-oxygen-verdict {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    gap: 6px;
    margin: 2px 0 8px;
    padding: 5px 12px;
    border: 1px solid var(--verdict-color, #94a3b8);
    border-radius: 999px;
    color: var(--verdict-color, #94a3b8);
    background: transparent;
    font-size: 11px;
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: none;
}

.marker-water-oxygen-verdict > i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 8px currentColor;
}

.marker-water-oxygen-verdict.is-critical { --verdict-color: #fb7185; }
.marker-water-oxygen-verdict.is-very-low { --verdict-color: #f97316; }
.marker-water-oxygen-verdict.is-low { --verdict-color: #fbbf24; }
.marker-water-oxygen-verdict.is-moderate { --verdict-color: #a3e635; }
.marker-water-oxygen-verdict.is-good { --verdict-color: #38bdf8; }
.marker-water-oxygen-verdict.is-optimal { --verdict-color: #34d399; }
.marker-water-oxygen-verdict.is-high { --verdict-color: #c084fc; }
.marker-water-oxygen-verdict.is-unknown { --verdict-color: #7894a3; }

/* --- Metric chips --------------------------------------------------------- */

.marker-water-oxygen-readings {
    display: grid;
    width: 100%;
    gap: 6px;
    grid-template-columns: minmax(0, 1fr);
}

.marker-water-oxygen-metric {
    position: relative;
    display: grid;
    min-width: 0;
    overflow: hidden;
    align-items: center;
    gap: 0 10px;
    grid-template-columns: minmax(0, 1fr) minmax(54px, 96px);
    grid-template-areas:
        "name spark"
        "value spark"
        "foot foot";
    padding: 6px 9px 5px;
    border: 1px solid color-mix(in srgb, var(--oxygen-color) 20%, transparent);
    border-radius: 11px;
    outline: 0;
    color: inherit;
    background:
        linear-gradient(160deg, color-mix(in srgb, var(--oxygen-color) 11%, transparent), transparent 72%),
        rgba(8, 20, 30, 0.72);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.24s ease, box-shadow 0.24s ease;
}

.marker-water-oxygen-metric.is-stale {
    opacity: 0.58;
}

.marker-water-oxygen-name {
    display: flex;
    align-items: center;
    gap: 5px;
    grid-area: name;
    overflow: hidden;
    color: #8fadba;
    font-size: 7.5px;
    font-weight: 780;
    letter-spacing: 0.07em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.marker-water-oxygen-name .marker-parameter-age {
    min-width: 0;
    margin: 0 0 0 auto;
    font-size: 9px;
}

.marker-water-oxygen-name::before {
    width: 5px;
    height: 5px;
    flex: 0 0 5px;
    border-radius: 50%;
    background: var(--oxygen-color);
    box-shadow: 0 0 6px var(--oxygen-color);
    content: "";
}

/* Optional conditions behind the oxygen solubility: air pressure and salinity. */
.marker-water-oxygen-context {
    display: flex;
    gap: 6px;
}

.marker-water-oxygen-context-item {
    display: flex;
    min-width: 0;
    flex: 1 1 0;
    align-items: center;
    gap: 7px;
    padding: 4px 8px;
    border: 1px solid rgba(125, 211, 252, 0.13);
    border-radius: 10px;
    background: rgba(8, 20, 30, 0.72);
}

.marker-water-oxygen-context-item.is-stale {
    opacity: 0.58;
}

.marker-water-oxygen-context-item > i {
    flex: 0 0 auto;
    color: #6ea6bd;
    font-size: 10px;
}

.marker-water-oxygen-context-item > span {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.marker-water-oxygen-context-item small {
    color: #6b8794;
    font-size: 6px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.marker-water-oxygen-context-item .marker-parameter-age {
    font-size: 6px;
    letter-spacing: 0;
    text-transform: none;
}

.marker-water-oxygen-context-item strong {
    display: flex;
    align-items: baseline;
    gap: 3px;
    color: #d5e8f1;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
}

.marker-water-oxygen-context-item strong > span {
    color: #7b98a6;
    font-size: 7px;
    font-weight: 700;
}

/* Short pulse marking a value that changed during a background refresh. */
.marker-water-oxygen-core > strong.is-updated,
.marker-water-oxygen-core > em.is-updated,
.marker-water-oxygen-reading.is-updated {
    animation: marker-water-oxygen-flash 0.72s cubic-bezier(0.22, 1, 0.36, 1);
}

.marker-water-oxygen-reading.is-updated {
    transform-origin: left center;
}

@keyframes marker-water-oxygen-flash {
    0% { transform: scale(1); }
    26% { filter: brightness(1.45); transform: scale(1.14); }
    58% { transform: scale(0.985); }
    100% { transform: scale(1); }
}

.marker-water-oxygen-reading {
    display: flex;
    align-items: baseline;
    gap: 3px;
    grid-area: value;
    margin-top: 1px;
    color: #f2fbff;
}

.marker-water-oxygen-reading > strong {
    font-size: 19px;
    font-weight: 820;
    letter-spacing: -0.6px;
    line-height: 1.1;
}

.marker-water-oxygen-reading > small {
    color: #7f9dab;
    font-size: 8px;
    font-weight: 700;
}

.marker-water-oxygen-spark {
    display: block;
    width: 100%;
    height: 30px;
    grid-area: spark;
    overflow: visible;
}

.marker-water-oxygen-average {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 1px;
    grid-area: spark;
}

.marker-water-oxygen-average > small {
    color: #6b8794;
    font-size: 6px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.marker-water-oxygen-average > strong {
    color: var(--oxygen-color);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.1;
}

.marker-water-oxygen-metric.is-plain {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "name"
        "value"
        "foot";
}

.marker-water-oxygen-spark-line {
    fill: none;
    stroke: var(--oxygen-color);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.6;
    opacity: 0.9;
}

.marker-water-oxygen-spark-area {
    fill: var(--oxygen-color);
    opacity: 0.13;
}

.marker-water-oxygen-spark-dot {
    fill: var(--oxygen-color);
    filter: drop-shadow(0 0 3px var(--oxygen-color));
}

.marker-water-oxygen-footline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    grid-area: foot;
    margin-top: 3px;
    padding-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.055);
}

.marker-water-oxygen-trend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 7px;
    font-weight: 780;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.marker-water-oxygen-trend.is-up { color: #34d399; }
.marker-water-oxygen-trend.is-down { color: #fb7185; }
.marker-water-oxygen-trend.is-flat { color: #7894a3; }

.marker-water-oxygen-range {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #648291;
    font-size: 6.5px;
    font-weight: 650;
    white-space: nowrap;
}

.marker-water-oxygen-range > b {
    color: #b7d1dc;
    font-weight: 780;
}

/* --- Interaction ---------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
    .marker-water-oxygen-metric:hover,
    .marker-water-oxygen-metric:focus-visible {
        border-color: color-mix(in srgb, var(--oxygen-color) 52%, transparent);
        box-shadow: 0 8px 18px -12px color-mix(in srgb, var(--oxygen-color) 80%, transparent);
        transform: translateY(-2px);
    }

    .marker-water-oxygen-gauge:hover .marker-water-oxygen-core > strong,
    .marker-water-oxygen-gauge:focus-visible .marker-water-oxygen-core > strong {
        text-shadow: 0 0 26px color-mix(in srgb, var(--oxygen-sat) 70%, transparent);
    }
}

@media (prefers-reduced-motion: reduce) {
    .marker-water-oxygen-widget *,
    .marker-water-oxygen-widget *::before,
    .marker-water-oxygen-widget *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* --- Responsive ----------------------------------------------------------- */

@container oxygen (max-width: 430px) {
    .marker-water-oxygen-body {
        justify-items: center;
        gap: 9px;
        grid-template-columns: minmax(0, 1fr);
    }

    .marker-water-oxygen-gauge {
        width: 178px;
    }

    .marker-water-oxygen-side {
        width: 100%;
    }

    .marker-water-oxygen-core > strong { font-size: 35px; }
    .marker-water-oxygen-core > strong > i { font-size: 14px; }
    .marker-water-oxygen-core > em { font-size: 13px; }
}

@media (max-width: 767px) {
    .marker-water-oxygen-bubbles > i {
        animation: none;
        opacity: 0.3;
    }
}

.marker-water-ph-widget {
    width: 100%;
    margin: 10px 0 4px;
}

.marker-water-ph-card {
    display: block;
    width: 100%;
    overflow: hidden;
    padding: 0;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 19px;
    outline: 0;
    color: #eef6ff;
    background:
        radial-gradient(circle at 8% 12%, rgba(239, 68, 68, 0.1), transparent 34%),
        radial-gradient(circle at 92% 12%, rgba(139, 92, 246, 0.12), transparent 34%),
        radial-gradient(circle at 50% -10%, rgba(34, 197, 94, 0.12), transparent 42%),
        linear-gradient(150deg, rgba(20, 33, 48, 0.98), rgba(5, 12, 20, 0.99));
    box-shadow:
        0 14px 28px -20px rgba(0, 0, 0, 0.9),
        inset 0 1px 0 rgba(255, 255, 255, 0.065);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

.marker-water-ph-card:hover,
.marker-water-ph-card:focus-visible {
    border-color: var(--ph-color, rgba(148, 163, 184, 0.45));
    box-shadow:
        0 16px 32px -20px rgba(0, 0, 0, 0.94),
        0 0 24px rgba(148, 163, 184, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transform: translateY(-1px);
}

.marker-water-ph-card.is-stale {
    opacity: 0.58;
}

.marker-water-ph-header {
    display: flex;
    min-height: 42px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 11px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
    background: rgba(255, 255, 255, 0.018);
}

.marker-water-ph-title {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
}

.marker-water-ph-title > i {
    display: flex;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 9px;
    color: var(--ph-color, #94a3b8);
    background: rgba(148, 163, 184, 0.08);
    box-shadow: 0 0 14px rgba(148, 163, 184, 0.08);
}

.marker-water-ph-title strong,
.marker-water-ph-title small {
    display: block;
}

.marker-water-ph-title strong {
    font-size: 11px;
    font-weight: 750;
}

.marker-water-ph-title small:not(.marker-data-status) {
    overflow: hidden;
    max-width: 230px;
    margin-top: 1px;
    color: #5d7385;
    font-size: 7px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.marker-water-ph-trend {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 4px;
    font-size: 7px;
    font-weight: 750;
    text-transform: uppercase;
}

.marker-water-ph-trend.is-up { color: #a78bfa; }
.marker-water-ph-trend.is-down { color: #fb923c; }
.marker-water-ph-trend.is-flat { color: #7894a3; }

.marker-water-ph-body {
    display: grid;
    align-items: center;
    padding: 8px 11px 12px;
    grid-template-columns: 186px minmax(0, 1fr);
    gap: 12px;
}

.marker-water-ph-dial {
    position: relative;
    width: 186px;
    height: 116px;
}

.marker-water-ph-dial > svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.marker-water-ph-track,
.marker-water-ph-fill {
    fill: none;
    stroke-linecap: round;
}

.marker-water-ph-track {
    stroke: rgba(148, 163, 184, 0.14);
    stroke-width: 11;
}

.marker-water-ph-fill {
    stroke-width: 11;
    stroke-dasharray: var(--ph-level) 100;
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.14));
    transition: stroke-dasharray 0.6s ease;
}

.marker-water-ph-tick {
    stroke: rgba(203, 213, 225, 0.22);
    stroke-width: 1;
}

.marker-water-ph-tick.is-major {
    stroke: rgba(226, 232, 240, 0.5);
    stroke-width: 1.6;
}

.marker-water-ph-needle {
    fill: #f8fafc;
    stroke: rgba(11, 21, 32, 0.5);
    stroke-width: 1;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 6px rgba(248, 250, 252, 0.5));
}

.marker-water-ph-legend {
    fill: #d9eef4;
    stroke: rgba(11, 21, 32, 0.72);
    stroke-width: 1.4px;
    paint-order: stroke fill;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.2px;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.32));
}

.marker-water-ph-legend.is-mid { text-anchor: middle; }

.marker-water-ph-value {
    position: absolute;
    bottom: 2px;
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    transform: translateX(-50%);
}

.marker-water-ph-value > strong {
    color: #f2f9ff;
    font-size: 27px;
    font-weight: 780;
    letter-spacing: -1.2px;
    line-height: 1;
}

.marker-water-ph-value > .marker-reading-trend {
    position: static;
    bottom: auto;
    left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: auto;
    margin: 0;
    font-size: 9px;
    line-height: 1;
}

.marker-water-ph-value > .marker-reading-trend i {
    font-size: 9px;
}

.marker-water-ph-readings {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 7px;
}

.marker-water-ph-state {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    gap: 6px;
    margin: 2px 0 8px;
    padding: 5px 12px;
    border: 1px solid var(--ph-color, #94a3b8);
    border-radius: 999px;
    color: var(--ph-color, #94a3b8);
    background: transparent;
    font-size: 11px;
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: none;
}

.marker-water-ph-state > i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 8px currentColor;
}

.marker-water-ph-range {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #fb923c;
    font-size: 7px;
    font-weight: 700;
    text-transform: uppercase;
}

.marker-water-ph-range.is-ok {
    color: #4ade80;
}

.marker-water-ph-stats {
    display: grid;
    margin-top: 1px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.marker-water-ph-stats > span {
    min-width: 0;
    text-align: center;
}

.marker-water-ph-stats > span + span {
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.marker-water-ph-stats small,
.marker-water-ph-stats strong {
    display: block;
}

.marker-water-ph-stats small {
    color: #55707f;
    font-size: 6px;
    text-transform: uppercase;
}

.marker-water-ph-stats strong {
    margin-top: 3px;
    color: #adc7d4;
    font-size: 9px;
}

@media (max-width: 767px) {
    .marker-water-ph-body {
        justify-items: center;
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .marker-water-ph-dial {
        width: 226px;
        height: 140px;
    }

    .marker-water-ph-readings {
        width: 100%;
        align-items: center;
    }

    .marker-water-ph-state {
        align-self: center;
    }

    .marker-water-ph-stats {
        width: 100%;
    }

    /* Panel punktu: ten sam układ co na dużych ekranach — status i min/max obok tarczy. */
    .select-tile-contener .marker-water-ph-body {
        justify-items: stretch;
        align-items: center;
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        gap: 8px;
    }

    .select-tile-contener .marker-water-ph-dial {
        width: 100%;
        max-width: 186px;
        height: auto;
        aspect-ratio: 186 / 116;
        justify-self: start;
    }

    .select-tile-contener .marker-water-ph-readings {
        width: auto;
        min-width: 0;
        align-items: flex-start;
        justify-content: center;
    }

    .select-tile-contener .marker-water-ph-state {
        align-self: flex-start;
    }

    .select-tile-contener .marker-water-ph-stats {
        width: max-content;
        max-width: 100%;
    }
}

.marker-water-ec-widget {
    width: 100%;
    margin: 10px 0 4px;
}

.marker-water-ec-card {
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 19px;
    color: #eef6ff;
    background:
        radial-gradient(circle at 12% 8%, rgba(56, 189, 248, 0.12), transparent 34%),
        radial-gradient(circle at 88% 96%, rgba(167, 139, 250, 0.12), transparent 36%),
        linear-gradient(150deg, rgba(18, 32, 46, 0.98), rgba(5, 12, 20, 0.99));
    box-shadow:
        0 14px 28px -20px rgba(0, 0, 0, 0.9),
        inset 0 1px 0 rgba(255, 255, 255, 0.065);
    transition: border-color 0.22s ease, box-shadow 0.22s ease;
}

.marker-water-ec-card:hover {
    border-color: var(--ec-color, rgba(148, 163, 184, 0.45));
    box-shadow:
        0 16px 32px -20px rgba(0, 0, 0, 0.94),
        0 0 24px rgba(148, 163, 184, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.marker-water-ec-card.is-stale {
    opacity: 0.58;
}

.marker-water-ec-header {
    display: flex;
    min-height: 42px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 11px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
    background: rgba(255, 255, 255, 0.018);
}

.marker-water-ec-title {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
}

.marker-water-ec-title > i {
    display: flex;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 9px;
    color: var(--ec-color, #94a3b8);
    background: rgba(148, 163, 184, 0.08);
    box-shadow: 0 0 14px rgba(148, 163, 184, 0.08);
}

.marker-water-ec-title strong,
.marker-water-ec-title small {
    display: block;
}

.marker-water-ec-title strong {
    font-size: 11px;
    font-weight: 750;
}

.marker-water-ec-title small:not(.marker-data-status) {
    overflow: hidden;
    max-width: 230px;
    margin-top: 1px;
    color: #5d7385;
    font-size: 7px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.marker-water-ec-status {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    color: #4ade80;
    font-size: 7px;
    font-weight: 750;
    text-transform: uppercase;
}

.marker-water-ec-status > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.marker-water-ec-status > span > i:empty {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 8px currentColor;
}

.marker-water-ec-status > small {
    color: #55707f;
    font-size: 6px;
    font-weight: 650;
    text-transform: none;
}

.marker-water-ec-status.is-stale {
    color: #fbbf24;
}

.marker-water-ec-body {
    display: flex;
    flex-direction: column;
    padding: 9px 11px 11px;
    gap: 9px;
}

.marker-water-ec-primary {
    display: block;
    width: 100%;
    padding: 3px 1px 7px;
    border: 0;
    border-radius: 0;
    outline: 0;
    background: transparent;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.marker-water-ec-primary:hover,
.marker-water-ec-primary:focus-visible {
    background: rgba(255, 255, 255, 0.025);
    transform: translateY(-1px);
}

.marker-water-ec-primary.is-stale {
    opacity: 0.6;
}

.marker-water-ec-primary-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.marker-water-ec-primary-label {
    display: flex;
    overflow: hidden;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    color: #7f9bab;
    font-size: 7px;
    font-weight: 750;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.marker-water-ec-primary-label .marker-parameter-age {
    margin-top: 2px;
}

.marker-water-ec-zone {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border: 1px solid var(--ec-color, #94a3b8);
    border-radius: 999px;
    color: var(--ec-color, #94a3b8);
    font-size: 7px;
    font-weight: 750;
    text-transform: uppercase;
}

.marker-water-ec-zone > i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 8px currentColor;
}

.marker-water-ec-primary-value {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin: 4px 0 9px;
}

.marker-water-ec-primary-value > strong {
    color: #f2f9ff;
    font-size: 30px;
    font-weight: 780;
    letter-spacing: -1.4px;
    line-height: 1;
}

.marker-water-ec-primary-value > small {
    color: var(--ec-color, #94a3b8);
    font-size: 10px;
    font-weight: 700;
}

.marker-water-ec-primary-value > em {
    margin-left: auto;
}

.marker-water-ec-primary-stats {
    margin-top: 7px;
    padding-top: 6px;
    border-top: 1px solid rgba(148, 163, 184, 0.1);
}

.marker-water-ec-trend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 7px;
    font-style: normal;
    font-weight: 750;
    text-transform: uppercase;
}

.marker-water-ec-trend.is-up { color: #fb923c; }
.marker-water-ec-trend.is-down { color: #38bdf8; }
.marker-water-ec-trend.is-flat { color: #7894a3; }

.marker-water-ec-scale {
    position: relative;
    display: block;
    height: 7px;
    border-radius: 999px;
    background: linear-gradient(90deg, #38bdf8, #22d3ee 22%, #4ade80 44%, #facc15 68%, #fb923c 85%, #f472b6);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 0 14px rgba(56, 189, 248, 0.1);
}

.marker-water-ec-scale > i {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: var(--ec-level);
    width: 13px;
    height: 13px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--ec-color, #94a3b8);
    box-shadow: 0 0 11px var(--ec-color, rgba(148, 163, 184, 0.8));
    transform: translate(-50%, -50%);
}

.marker-water-ec-scale > b {
    position: absolute;
    top: 50%;
    width: 2px;
    height: 13px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.65);
    transform: translate(-50%, -50%);
}

.marker-water-ec-scale-legend {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
}

.marker-water-ec-scale-legend > small {
    color: #4f7180;
    font-size: 6px;
    font-weight: 650;
}

.marker-water-ec-derived-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    padding-top: 8px;
    border-top: 1px solid rgba(148, 163, 184, 0.1);
}

.marker-water-ec-derived {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 9px;
    padding: 5px 10px 5px 1px;
    border: 0;
    border-radius: 0;
    outline: 0;
    background: transparent;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.marker-water-ec-derived:hover,
.marker-water-ec-derived:focus-visible {
    background: rgba(255, 255, 255, 0.025);
    transform: translateY(-1px);
}

.marker-water-ec-derived.is-stale {
    opacity: 0.6;
}

.marker-water-ec-ring {
    position: relative;
    display: block;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
}

.marker-water-ec-ring > svg {
    display: block;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.marker-water-ec-ring-track,
.marker-water-ec-ring-fill {
    fill: none;
    stroke-width: 7;
    stroke-linecap: round;
}

.marker-water-ec-ring-track {
    stroke: rgba(148, 163, 184, 0.16);
}

.marker-water-ec-ring-fill {
    stroke: var(--ec-derived-color, #94a3b8);
    stroke-dasharray: var(--ec-ring-level) 100;
    filter: drop-shadow(0 0 5px var(--ec-derived-color, rgba(148, 163, 184, 0.6)));
    transition: stroke-dasharray 0.6s ease;
}

.marker-water-ec-ring > b {
    position: absolute;
    top: 50%;
    left: 50%;
    color: var(--ec-derived-color, #94a3b8);
    font-size: 12px;
    transform: translate(-50%, -50%);
}

.marker-water-ec-derived-body {
    min-width: 0;
    flex: 1 1 auto;
}

.marker-water-ec-derived-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    overflow: hidden;
    color: #7f9bab;
    font-size: 7px;
    font-weight: 750;
    text-transform: uppercase;
    white-space: nowrap;
}

.marker-water-ec-derived-body > .marker-parameter-age {
    margin-top: 2px;
    font-size: 9px;
}

.marker-water-ec-derived-value {
    display: flex;
    align-items: baseline;
    gap: 3px;
    margin: 2px 0 4px;
}

.marker-water-ec-derived-value > strong {
    color: #f2f9ff;
    font-size: 18px;
    font-weight: 780;
    letter-spacing: -0.7px;
    line-height: 1;
}

.marker-water-ec-derived-value > small {
    color: var(--ec-derived-color, #94a3b8);
    font-size: 8px;
    font-weight: 700;
}

.marker-water-ec-derived-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.marker-water-ec-derived-stats > span {
    min-width: 0;
    text-align: center;
}

.marker-water-ec-derived-stats > span + span {
    border-left: 0;
}

.marker-water-ec-derived-stats small,
.marker-water-ec-derived-stats strong {
    display: block;
}

.marker-water-ec-derived-stats small {
    color: #55707f;
    font-size: 6px;
    text-transform: uppercase;
}

.marker-water-ec-derived-stats strong {
    margin-top: 2px;
    color: #adc7d4;
    font-size: 8px;
}

.marker-water-ec-info {
    display: grid;
    min-width: 0;
    align-content: center;
    padding: 5px 1px 5px 14px;
    border: 0;
    border-left: 1px solid rgba(148, 163, 184, 0.1);
    outline: 0;
    color: inherit;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
    grid-template-columns: minmax(0, 1fr) auto;
    transition: background 0.2s ease, transform 0.2s ease;
}

.marker-water-ec-info:hover,
.marker-water-ec-info:focus-visible {
    background: rgba(255, 255, 255, 0.025);
    transform: translateY(-1px);
}

.marker-water-ec-info.is-stale { opacity: 0.6; }

.marker-water-ec-info-label {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 6px;
    color: #6c8998;
    font-size: 7px;
    font-weight: 750;
    text-transform: uppercase;
}

.marker-water-ec-info-label > i { color: #38bdf8; }
.marker-water-ec-info-label > span { min-width: 0; }

.marker-water-ec-info-value {
    display: flex;
    align-items: baseline;
    gap: 3px;
    margin-top: 4px;
}

.marker-water-ec-info-value > strong {
    color: #c3d7df;
    font-size: 16px;
    font-weight: 750;
    line-height: 1;
}

.marker-water-ec-info-value > small {
    color: #668694;
    font-size: 7px;
    font-weight: 700;
}

.marker-water-ec-info > .marker-water-ec-trend {
    grid-row: 1 / 3;
    grid-column: 2;
    align-self: center;
    margin-left: 8px;
}

@media (max-width: 767px) {
    .marker-water-ec-derived-group {
        grid-template-columns: minmax(0, 1fr);
    }

    .marker-water-ec-primary-value > strong {
        font-size: 26px;
    }

    .marker-water-ec-info {
        padding: 9px 1px 3px;
        border-top: 1px solid rgba(148, 163, 184, 0.1);
        border-left: 0;
    }
}

/* ───────────────────────── Skład jonowy wody ─────────────────────────
   Widget sond jonoselektywnych. Bilans ładunków porównuje kationy z anionami
   w milirównoważnikach, a każdy jon ma własną skalę stężenia — ich rzędy
   wielkości różnią się zbyt mocno, żeby dzieliły jedną oś.                */
.marker-water-ions-widget {
    width: 100%;
    margin: 10px 0 4px;
    --ions-cation-color: #fb923c;
    --ions-anion-color: #38bdf8;
}

.marker-water-ions-card {
    position: relative;
    overflow: hidden;
    padding: 13px 13px 11px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 16px;
    background:
        radial-gradient(circle at 12% 0, color-mix(in srgb, var(--ions-color) 12%, transparent), transparent 62%),
        linear-gradient(158deg, rgba(15, 32, 46, 0.96), rgba(5, 14, 23, 0.98));
    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.marker-water-ions-card.is-stale {
    opacity: 0.72;
}

/* Poświata w kolorze jonu o największym udziale w ładunku */
.marker-water-ions-ambient {
    position: absolute;
    top: -55%;
    right: -30%;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--ions-color) 22%, transparent), transparent 68%);
    filter: blur(14px);
    pointer-events: none;
    animation: marker-ions-drift 9s ease-in-out infinite alternate;
}

@keyframes marker-ions-drift {
    from { transform: translate3d(0, 0, 0) scale(1); opacity: 0.75; }
    to { transform: translate3d(-16px, 12px, 0) scale(1.08); opacity: 1; }
}

.marker-water-ions-header {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 11px;
}

.marker-water-ions-title {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 9px;
}

.marker-water-ions-title > i {
    display: flex;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    color: var(--ions-color);
    background: color-mix(in srgb, var(--ions-color) 16%, rgba(255, 255, 255, 0.04));
    font-size: 12px;
}

.marker-water-ions-title > span {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 1px;
}

.marker-water-ions-title strong {
    overflow: hidden;
    color: #e2f4ff;
    font-size: 13px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.marker-water-ions-title small {
    overflow: hidden;
    color: #6c8ba0;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.marker-water-ions-compare {
    display: flex;
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 9px;
    outline: 0;
    color: #8fb6c9;
    background: rgba(255, 255, 255, 0.03);
    font-size: 11px;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.marker-water-ions-compare:hover,
.marker-water-ions-compare:focus-visible {
    border-color: color-mix(in srgb, var(--ions-color) 45%, transparent);
    color: #e2f4ff;
    background: color-mix(in srgb, var(--ions-color) 14%, transparent);
}

/* ── Bilans ładunków ── */
.marker-water-ions-balance {
    position: relative;
    z-index: 1;
    margin-bottom: 11px;
    padding: 9px 10px 8px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.022);
}

.marker-water-ions-balance > header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 7px;
    color: #7f9db0;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.marker-water-ions-balance > header > b {
    color: #cfe9f7;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.marker-water-ions-balance.is-balanced > header > b { color: #34d399; }
.marker-water-ions-balance.is-cationic > header > b { color: var(--ions-cation-color); }
.marker-water-ions-balance.is-anionic > header > b { color: var(--ions-anion-color); }

/* Pasek dzieli się w punkcie wyznaczonym przez udział kationów w sumie ładunków.
   Kreska pośrodku jest odniesieniem — im bliżej niej podział, tym równiejszy bilans. */
.marker-water-ions-balance-bar {
    position: relative;
    display: flex;
    overflow: hidden;
    height: 11px;
    border-radius: 999px;
    background: rgba(2, 8, 15, 0.6);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45);
}

.marker-water-ions-balance-bar > i {
    display: block;
    height: 100%;
    transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.marker-water-ions-balance-bar > i.is-cations {
    width: var(--ions-cation-share, 50%);
    background: linear-gradient(90deg, color-mix(in srgb, var(--ions-cation-color) 55%, transparent), var(--ions-cation-color));
}

.marker-water-ions-balance-bar > i.is-anions {
    width: calc(100% - var(--ions-cation-share, 50%));
    background: linear-gradient(90deg, var(--ions-anion-color), color-mix(in srgb, var(--ions-anion-color) 55%, transparent));
}

.marker-water-ions-balance-bar > b {
    position: absolute;
    top: -2px;
    left: 50%;
    width: 1px;
    height: calc(100% + 4px);
    background: rgba(226, 244, 255, 0.5);
    content: "";
}

.marker-water-ions-balance > footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 7px;
}

.marker-water-ions-balance-side {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 1px;
}

.marker-water-ions-balance-side.is-anions {
    align-items: flex-end;
    text-align: right;
}

.marker-water-ions-balance-side > b {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #b9d5e6;
    font-size: 9px;
    font-weight: 500;
}

.marker-water-ions-balance-side > b::before {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    content: "";
}

.marker-water-ions-balance-side.is-cations > b::before { background: var(--ions-cation-color); }
.marker-water-ions-balance-side.is-anions > b::before { background: var(--ions-anion-color); }

.marker-water-ions-balance-side.is-anions > b { flex-direction: row-reverse; }

.marker-water-ions-balance-side > small {
    font-family: var(--wl-font-mono);
    color: #e2f4ff;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.marker-water-ions-dominant {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}

.marker-water-ions-dominant > small {
    color: #6c8ba0;
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.marker-water-ions-dominant > b {
    color: var(--ions-color);
    font-size: 12px;
    font-weight: 600;
}

.marker-water-ions-balance-empty {
    margin: 0;
    color: #64809a;
    font-size: 10px;
}

/* ── Siatka jonów ── */
.marker-water-ions-grid {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 7px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.marker-water-ions-item {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 9px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 13px;
    outline: 0;
    background: rgba(255, 255, 255, 0.022);
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.marker-water-ions-item:hover,
.marker-water-ions-item:focus-visible {
    border-color: color-mix(in srgb, var(--ion-color) 42%, transparent);
    background: color-mix(in srgb, var(--ion-color) 9%, rgba(255, 255, 255, 0.025));
    transform: translateY(-1px);
}

.marker-water-ions-item.is-stale { opacity: 0.62; }

.marker-water-ions-item.is-awaiting {
    border-style: dashed;
    cursor: default;
}

/* Symbol jonu w kółku, z ładunkiem jako znaczkiem na obrzeżu */
.marker-water-ions-orb {
    position: relative;
    display: flex;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--ion-color) 38%, transparent);
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 22%, color-mix(in srgb, var(--ion-color) 26%, transparent), transparent 70%),
        rgba(2, 10, 18, 0.7);
}

.marker-water-ions-orb > b {
    color: color-mix(in srgb, var(--ion-color) 82%, #ffffff);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.marker-water-ions-charge {
    position: absolute;
    right: -3px;
    bottom: -2px;
    display: flex;
    width: 15px;
    height: 15px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(5, 14, 23, 0.9);
    border-radius: 50%;
    font-size: 9px;
    font-style: normal;
    font-weight: 700;
    line-height: 1;
}

.marker-water-ions-charge.is-cation { color: #1b1206; background: var(--ions-cation-color); }
.marker-water-ions-charge.is-anion { color: #04121c; background: var(--ions-anion-color); }
.marker-water-ions-charge.is-neutral { color: #cbd5e1; background: rgba(100, 116, 139, 0.85); font-size: 7px; }

.marker-water-ions-body {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 3px;
}

.marker-water-ions-name {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 5px;
    overflow: hidden;
    color: #b9d5e6;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.marker-water-ions-trend { font-size: 9px; }
.marker-water-ions-trend.is-up { color: #f87171; }
.marker-water-ions-trend.is-down { color: #38bdf8; }
.marker-water-ions-trend.is-flat { color: #64748b; }

.marker-water-ions-value {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px;
}

.marker-water-ions-value > strong {
    font-family: var(--wl-font-mono);
    color: #eaf7ff;
    font-size: 19px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.05;
}

.marker-water-ions-value > small {
    color: #6c8ba0;
    font-size: 9px;
}

.marker-water-ions-awaiting {
    color: #5f7d92;
    font-size: 9px;
    line-height: 1.35;
}

/* Pasek stężenia we własnej skali jonu; kreski to minimum i maksimum okresu */
.marker-water-ions-bar {
    position: relative;
    display: block;
    height: 6px;
    margin-top: 2px;
    border-radius: 999px;
    background: rgba(2, 8, 15, 0.62);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}

.marker-water-ions-bar > i {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: var(--ion-level, 0%);
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--ion-color) 45%, transparent), var(--ion-color));
    box-shadow: 0 0 9px color-mix(in srgb, var(--ion-color) 45%, transparent);
    transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.marker-water-ions-bar > b {
    position: absolute;
    top: -2px;
    width: 1px;
    height: calc(100% + 4px);
    border-radius: 1px;
    background: rgba(226, 244, 255, 0.45);
}

.marker-water-ions-bar > b.is-max { background: rgba(226, 244, 255, 0.72); }

.marker-water-ions-scale {
    font-family: var(--wl-font-mono);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    color: #7191a6;
    font-size: 9px;
    font-variant-numeric: tabular-nums;
}

/* Krańce własnej skali jonu są tylko odniesieniem — zakres pomiarów niesie treść */
.marker-water-ions-scale > small:first-child,
.marker-water-ions-scale > small:last-child {
    flex: 0 0 auto;
    opacity: 0.72;
}

.marker-water-ions-scale > small:nth-child(2) {
    overflow: hidden;
    flex: 1;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.marker-water-ions-item .marker-parameter-age { font-size: 8px; }

@media (max-width: 767px) {
    .marker-water-ions-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .marker-water-ions-value > strong {
        font-size: 21px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .marker-water-ions-ambient {
        animation: none;
    }

    .marker-water-ions-balance-bar > i,
    .marker-water-ions-bar > i {
        transition: none;
    }
}

.marker-multi-sensor-widget {
    width: 100%;
    margin: 10px 0 4px;
}

.marker-multi-sensor-card {
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 19px;
    color: #eef6ff;
    background:
        radial-gradient(circle at 12% 8%, rgba(56, 189, 248, 0.12), transparent 34%),
        radial-gradient(circle at 88% 96%, rgba(167, 139, 250, 0.12), transparent 36%),
        linear-gradient(150deg, rgba(18, 32, 46, 0.98), rgba(5, 12, 20, 0.99));
    box-shadow:
        0 14px 28px -20px rgba(0, 0, 0, 0.9),
        inset 0 1px 0 rgba(255, 255, 255, 0.065);
    transition: border-color 0.22s ease, box-shadow 0.22s ease;
}

.marker-multi-sensor-card:hover {
    border-color: var(--multi-color, rgba(148, 163, 184, 0.45));
    box-shadow:
        0 16px 32px -20px rgba(0, 0, 0, 0.94),
        0 0 24px rgba(148, 163, 184, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.marker-multi-sensor-card.is-stale {
    opacity: 0.58;
}

/* ── Nagłówek karty — układ wspólny z widgetami pojedynczych parametrów ── */
.marker-multi-sensor-header {
    display: flex;
    min-height: 42px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 11px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
    background: rgba(255, 255, 255, 0.018);
}

.marker-multi-sensor-title {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
}

.marker-multi-sensor-title > i {
    display: flex;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 9px;
    color: var(--multi-color, #94a3b8);
    background: rgba(148, 163, 184, 0.08);
    box-shadow: 0 0 14px rgba(148, 163, 184, 0.08);
}

.marker-multi-sensor-title > span {
    min-width: 0;
}

.marker-multi-sensor-title strong,
.marker-multi-sensor-title small {
    display: block;
}

.marker-multi-sensor-title strong {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 750;
    white-space: nowrap;
}

.marker-multi-sensor-title strong .marker-tutorial-link {
    white-space: nowrap;
}

.marker-multi-sensor-title strong > em {
    padding: 1px 5px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 5px;
    background: rgba(148, 163, 184, 0.08);
    color: var(--multi-color, #94a3b8);
    font-size: 7px;
    font-style: normal;
    font-weight: 750;
    letter-spacing: 0.2px;
}

.marker-multi-sensor-title small:not(.marker-data-status) {
    overflow: hidden;
    max-width: 230px;
    margin-top: 1px;
    color: #5d7385;
    font-size: 7px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.marker-multi-sensor-status {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    color: #4ade80;
    font-size: 7px;
    font-weight: 750;
    text-transform: uppercase;
}

.marker-multi-sensor-status > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.marker-multi-sensor-status > span > i:empty {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 8px currentColor;
}

.marker-multi-sensor-status > small {
    color: #55707f;
    font-size: 6px;
    font-weight: 650;
    text-transform: none;
}

.marker-multi-sensor-status.is-stale {
    color: #fbbf24;
}

.marker-multi-sensor-status.is-aging {
    color: #facc15;
}

/* ── Tabela porównawcza sensorów ── */
.marker-multi-sensor-table {
    width: 100%;
    padding: 6px;
}

.marker-multi-sensor-columns,
.marker-multi-sensor-row {
    display: grid;
    grid-template-columns: minmax(105px, 1.55fr) repeat(var(--multi-columns, 4), minmax(42px, 1fr));
    align-items: stretch;
}

.marker-multi-sensor-columns {
    min-height: 26px;
    padding-bottom: 2px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.marker-multi-sensor-column {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3px 2px;
    text-align: center;
}

button.marker-multi-sensor-column,
button.marker-multi-sensor-value,
button.marker-multi-sensor-sensor {
    border: 0;
    outline: 0;
    font: inherit;
    cursor: pointer;
}

button.marker-multi-sensor-column {
    background: transparent;
    transition: background 0.18s ease, color 0.18s ease;
}

button.marker-multi-sensor-column:hover,
button.marker-multi-sensor-column:focus-visible {
    border-radius: 8px;
    background: color-mix(in srgb, var(--multi-color, #38bdf8) 10%, transparent);
}

.marker-multi-sensor-column strong {
    color: #94a3b8;
    font-size: 8px;
    font-weight: 750;
    letter-spacing: 0.05px;
    line-height: 12px;
    text-transform: uppercase;
}

.marker-multi-sensor-column strong.is-icon {
    color: #94a3b8;
    font-size: 12px;
}

.marker-multi-sensor-column strong.is-long {
    font-size: 8px;
    letter-spacing: 0;
    text-transform: none;
}

.marker-multi-sensor-column small {
    color: #55707f;
    font-size: 7px;
    font-weight: 650;
    line-height: 10px;
}

.marker-multi-sensor-column.is-primary strong {
    color: #94a3b8;
}

.marker-multi-sensor-column.is-sensor {
    align-items: flex-start;
    padding-left: 8px;
    color: #94a3b8;
    font-size: 8px;
    font-weight: 750;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.marker-multi-sensor-row {
    min-height: 44px;
    margin-top: 4px;
    border: 1px solid rgba(148, 163, 184, 0.1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.022);
    transition: border-color 0.2s ease, background 0.2s ease;
}

.marker-multi-sensor-row:hover {
    border-color: rgba(148, 163, 184, 0.26);
    background: rgba(255, 255, 255, 0.04);
}

.marker-multi-sensor-row.is-placeholder {
    border-style: dashed;
    background: rgba(148, 163, 184, 0.018);
}

.marker-multi-sensor-row.is-placeholder:hover {
    border-color: rgba(148, 163, 184, 0.1);
    background: rgba(148, 163, 184, 0.018);
}

.marker-multi-sensor-row.is-placeholder .marker-multi-sensor-sensor {
    cursor: default;
}

.marker-multi-sensor-empty {
    margin-top: 4px;
    padding: 12px 10px;
    border: 1px dashed rgba(148, 163, 184, 0.18);
    border-radius: 12px;
    color: #55707f;
    font-size: 9px;
    text-align: center;
}

.marker-multi-sensor-sensor,
.marker-multi-sensor-value {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
}

.marker-multi-sensor-sensor {
    gap: 6px;
    justify-content: flex-start;
    padding: 6px 4px 6px 8px;
}

.marker-multi-sensor-sensor > b {
    flex: 0 0 auto;
    padding: 2px 5px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 6px;
    background: rgba(2, 6, 14, 0.5);
    color: var(--multi-color, #94a3b8);
    font-size: 8px;
    font-weight: 750;
}

.marker-multi-sensor-sensor > span {
    display: flex;
    overflow: hidden;
    min-width: 0;
    flex-direction: column;
    gap: 1px;
}

.marker-multi-sensor-sensor > span > strong {
    overflow: hidden;
    min-width: 0;
    color: #cbd5e1;
    font-size: 10px;
    font-weight: 650;
    line-height: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.marker-multi-sensor-reading-state {
    display: inline-flex;
    overflow: hidden;
    align-items: center;
    gap: 3px;
    color: #5f7f72;
    font-size: 6px;
    font-weight: 650;
    line-height: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.marker-multi-sensor-reading-state.marker-data-status {
    width: max-content;
    margin-top: 2px;
}

.marker-multi-sensor-reading-state > i { flex: 0 0 auto; font-size: 9px; }

.marker-multi-sensor-value {
    font-family: var(--wl-font-mono);
    flex-wrap: wrap;
    gap: 2px;
    padding: 6px 2px;
    color: #e2eef5;
    font-variant-numeric: tabular-nums;
}

.marker-multi-sensor-value > .marker-parameter-age {
    width: 100%;
    justify-content: center;
    margin-top: -1px;
    font-size: 6px;
}

button.marker-multi-sensor-value {
    background: transparent;
    border-radius: 9px;
    transition: background 0.18s ease, transform 0.18s ease;
}

button.marker-multi-sensor-value:not(:disabled):hover,
button.marker-multi-sensor-value:not(:disabled):focus-visible {
    background: color-mix(in srgb, var(--multi-color, #38bdf8) 10%, transparent);
    transform: translateY(-1px);
}

button.marker-multi-sensor-value:disabled {
    cursor: default;
}

button.marker-multi-sensor-sensor {
    width: 100%;
    border-radius: 9px;
    background: transparent;
    text-align: left;
    transition: background 0.18s ease, transform 0.18s ease;
}

button.marker-multi-sensor-sensor:hover,
button.marker-multi-sensor-sensor:focus-visible {
    background: color-mix(in srgb, var(--multi-color, #38bdf8) 10%, transparent);
    transform: translateX(1px);
}

.marker-multi-sensor-value strong {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.25px;
    line-height: 17px;
}

.marker-multi-sensor-value.is-primary strong {
    color: #e2eef5;
}

.marker-multi-sensor-value.is-empty strong {
    color: #55707f;
    font-size: 11px;
    font-weight: 650;
}

.marker-multi-sensor-trend {
    width: 7px;
    flex: 0 0 7px;
    font-size: 9px;
    font-style: normal;
    text-align: center;
}

.marker-multi-sensor-trend.is-up { color: #fb923c; }
.marker-multi-sensor-trend.is-down { color: #38bdf8; }
.marker-multi-sensor-trend.is-flat { color: transparent; }

/* Live readings update without rebuilding the visible panel. Changed values
   receive a short luminance pulse that does not affect layout or scroll. */
.select-tile-contener .is-live-value-change {
    animation: marker-live-value-change 0.68s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, filter, text-shadow;
}

@keyframes marker-live-value-change {
    0% {
        opacity: 0.42;
        filter: brightness(1.65);
        text-shadow: 0 0 0 transparent;
    }
    38% {
        opacity: 1;
        filter: brightness(1.25);
        text-shadow: 0 0 9px color-mix(in srgb, var(--marker-wqi-color, #5ad4f5) 52%, transparent);
    }
    100% {
        opacity: 1;
        filter: none;
        text-shadow: 0 0 0 transparent;
    }
}

@media (prefers-reduced-motion: reduce) {
    .select-tile-contener .is-live-value-change {
        animation: none;
    }
}

@media (max-width: 500px) {
    .marker-multi-sensor-columns,
    .marker-multi-sensor-row {
        grid-template-columns: minmax(88px, 1.45fr) repeat(var(--multi-columns, 4), minmax(36px, 1fr));
    }

    .marker-multi-sensor-sensor {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 4px;
        padding-left: 5px;
    }

    .marker-multi-sensor-value strong { font-size: 12px; }

}














/* .select-tile-contener .marker-custom-header .close-marker {
    position: absolute;
    font-size: 35px;
    background-color: #DC3545;
    color: #FFFFFF;
    top: 10px;
    left: 50%;
    margin-left: -12px;
    border-radius: 50%;
} */

.marker-main-contener-control {
    font-size: 25px;
    text-align: left;
    margin-left: 15px;
    /* color: #000; */
    /* background-color: #33373B; */
    /* border-radius: 15px; */
    /* color: #b4bbc2; */
    /* height: 50px; */
    /* p-0 m-0 mb-3 */
    padding: 0;
    margin: 0;
    margin-bottom: 20px;
    text-align: center;
}

.marker-main-contener-control .close-tiles-contener {
    background-color: #33373B;
    border-radius: 15px;
    padding: 10px;
    align-items: end;
    margin-left: 15px;
    color: #b4bbc2 !important;
}

.marker-main-contener-control .close-tiles-contener:hover {
    background-color: #2193f3;
    color: #ffffff !important;
}

.marker-main-contener-control .close-tiles-contener-header {
    background-color: #33373B;
    border-radius: 15px;
    padding: 10px;
    align-items: end;
    margin-left: 10px;
    font-size: 20px;
    color: #b4bbc2 !important;
}

.tiles-list-contener .tiles-list-contener-control,
.marker-main-contener-control {
    display: none;
}

@media (max-width: 767px) {

    .select-tile-contener {
        position: fixed;
        top: 0;
        right: 0;
        bottom: calc(var(--safe-bottom, 0px) + var(--waterly-footer-offset, 58px));
        left: 0;
        height: auto !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: none;
        max-height: none !important;
        border: 1px solid rgba(101, 189, 218, 0.2);
        border-radius: 0;
        background:
            radial-gradient(circle at 50% 0, rgba(56, 189, 248, 0.1), transparent 28%),
            rgba(5, 14, 22, 0.96);
        box-shadow:
            0 -24px 58px rgba(0, 0, 0, 0.52),
            inset 0 1px 0 rgba(255, 255, 255, 0.07);
        transform: translateY(calc(100% + var(--safe-bottom, 0px) + var(--waterly-footer-offset, 58px)));
        transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
        will-change: transform;
    }

    .select-tile-contener.is-sheet-dragging {
        transition: none;
    }

    .select-tile-contener.is-closing {
        pointer-events: none;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }

    html:has(.select-tile-contener.active),
    body:has(.select-tile-contener.active) {
        overflow: hidden;
        overscroll-behavior: none;
    }

    .select-tile-contener::-webkit-scrollbar-track {
        margin-block: 32px;
    }

    .select-tile-contener.active {
        transform: translateY(0);
    }

    .select-tile-contener::before {
        position: absolute;
        z-index: 8;
        top: 7px;
        left: 50%;
        width: 42px;
        height: 4px;
        border-radius: 999px;
        background: rgba(167, 211, 226, 0.34);
        content: "";
        pointer-events: none;
        transform: translateX(-50%);
    }

    .select-tile-contener .marker-main-contener {
        position: relative;
        /* Tylko miejsce na uchwyt — boki i dół bez paddingu, żeby stopka była na całą szerokość. */
        padding: calc(28px + var(--safe-top, 0px)) 0 0 !important;
    }

    .select-tile-contener .marker-panel-scroll-body {
        padding: 0 calc(11px + var(--safe-right, 0px)) 10px calc(11px + var(--safe-left, 0px));
    }

    .select-tile-contener .marker-main-contener-control {
        position: absolute;
        z-index: 12;
        top: var(--safe-top, 0px);
        right: auto;
        left: 50%;
        width: 84px;
        height: 24px;
        transform: translateX(-50%);
        padding: 0;
        margin: 0;
    }

    .select-tile-contener .marker-main-contener-control .close-tiles-contener {
        display: flex;
        width: 32px;
        height: 32px;
        align-items: center;
        justify-content: center;
        padding: 0;
        margin: 0;
        border: 1px solid rgba(125, 211, 252, 0.14);
        border-radius: 50%;
        background: rgba(8, 22, 32, 0.88);
        color: #8eacb9 !important;
        font-size: 17px;
        box-shadow: 0 7px 18px rgba(0, 0, 0, 0.26);
    }

    .select-tile-contener .marker-water-hero-widget:first-of-type {
        margin-top: 0;
    }

    .tiles-list-contener .tiles-list-contener-control,
    .marker-main-contener-control {
        display: inline-block !important;
    }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    .select-tile-contener,
    .marker-panel-backdrop {
        transition: none;
    }
}

.select-tile-contener-color {
    color: #bec5cc;
}

/* .select-tile-contener-button-color.tile-go-to-object,
.select-tile-contener-button-color.tile-fly-to,
.select-tile-contener-button-color.tile-open-marker,
.select-tile-contener-button-color.map-go-to-object { */
    /* background-color: #ffffff14; */
    /* box-shadow: inset 4px 0px 5px 0px #ffffff14; */
/* } */

.select-tile-contener-button-color:not( [disabled] ):hover {
    background-color: #2193f3 !important;
    color: #FFFFFF !important;
    cursor: pointer;
}

.select-tile-contener-hover:hover {
    background-color: #2193f3 !important;
    color: #FFFFFF !important;
    cursor: pointer;
    border-radius: 15px 0 0 15px;
}

.select-tile-contener-red-alert {
    color: #ff4949;
}

.select-tile-contener-orange-alert {
    color: #ffac26;
}

/* TILE CONTENER */
.tile-list-el {
    width: 350px;
    height: 100px;
    background-color: #33373B;
    border-radius: 15px;
    color: #b4bbc2;
}


/* TILE HEADER BY PK */
/* .select-tile-header-logo { */
    /* left: -3px;
    top: 25px; */
    /* justify-content: center;
    align-items: center; */
/* } */

/* .select-tile-header-logo div:first {} */

.select-tile-header-logo div img {
    width: 100%;
    max-width: 50px;
    border: 3px solid #ccc;
    border-radius: 50%;
}

.select-tile-header-logo .tile-wqi {
    /* backdrop-filter: blur(10px); */
    min-width: 20px;
    opacity: 0;
    top: 7px;
    font-size: 10px;
}

.select-tile-header-logo .tile-wqi-unit {
    bottom: 7px;
    font-size: 10px;
    opacity: 0;
}

.select-tile-header-name {
    left: 8px;
    font-weight: 600;
    font-size: 15px;
    top: 5px;
    /* margin-bottom: 0;
    margin-top: -10px; */
}



.select-tile-header-desc {
    left: 8px;
    top: 4px;
    font-size: 12px;
}

/* .select-tile-header-arrow-contener {
    position: relative;
    color: #bec5cc;
    background-color: #33373B;
    width: 50px;
    height: 100%;
    border-radius: 0px 15px 15px 0px;
} */

/* .select-tile-header-arrow-arrow { */
/* left: -8px;
    top: 27px; */
/* font-size: 46px; */
/* position: relative; */
/* display: flex; */
/* justify-content: center; */
/* align-items: center; */
/* text-align: center; */
/* } */

/* LITTLE ICON WITH VALUE BY PK */
.little-widget-icon-value-parent {
    /* float: left; */
    height: 40px;
    font-size: 14px;
    position: relative;
    /* display: flex; */
    justify-content: center;
    align-items: center;
    text-align: center;
    cursor: default;
}

.little-widget-icon-value-value {
    font-size: 11px;
    top: -6px;
    font-weight: 600;
}

.little-widget-icon-value-value-little {
    font-size: 7px;
    font-weight: 600;
    line-height: 7px;
    top: -8px;
    justify-content: center;
}

.little-widget-icon-value-icon {
    margin-left: -17px;
    margin-top: 8px;
}



/* Sponsor */

/* Modern multi-parameter chart window. The legacy widget-chart-in-window remains untouched. */
.waterly-chart-lab {
    position: fixed;
    z-index: 12000;
    inset: 0;
    display: grid;
    padding: clamp(12px, 3vw, 34px);
    place-items: center;
    opacity: 0;
    transition: opacity 0.24s ease;
}

.waterly-chart-lab.is-visible { opacity: 1; }
.waterly-chart-lab.is-closing { opacity: 0; }

.waterly-chart-lab-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(1, 8, 14, 0.74);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
}

.waterly-chart-lab-window {
    position: relative;
    isolation: isolate;
    display: grid;
    width: min(1180px, 100%);
    height: min(760px, calc(100dvh - 40px));
    overflow: hidden;
    border: 1px solid rgba(103, 232, 249, 0.2);
    border-radius: 26px;
    color: #eafaff;
    background:
        radial-gradient(circle at 5% 0, rgba(45, 212, 191, 0.12), transparent 28%),
        radial-gradient(circle at 100% 100%, rgba(56, 189, 248, 0.1), transparent 34%),
        linear-gradient(145deg, rgba(14, 35, 48, 0.985), rgba(4, 13, 22, 0.995) 62%);
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.07);
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    transform: translateY(16px) scale(0.985);
    transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

.waterly-chart-lab.is-visible .waterly-chart-lab-window { transform: none; }

.waterly-chart-lab-window > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 22px 16px;
    border-bottom: 1px solid rgba(148, 203, 222, 0.08);
}

.waterly-chart-lab-window > header div { display: flex; min-width: 0; flex-direction: column; }
.waterly-chart-lab-window > header small { color: #5eead4; font-size: 8px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.waterly-chart-lab-window > header sup { color: #38bdf8; font-size: .62em; }
.waterly-chart-lab-window > header strong { margin-top: 4px; font-size: clamp(20px, 2vw, 28px); letter-spacing: -.04em; }
.waterly-chart-lab-window > header span { margin-top: 2px; color: #6e8d9a; font-size: 10px; }

.waterly-chart-lab-close {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid rgba(148, 203, 222, .14);
    border-radius: 12px;
    color: #8fb0bd;
    background: rgba(255, 255, 255, .025);
    cursor: pointer;
}

.waterly-chart-lab-close:hover { color: #fff; border-color: rgba(103, 232, 249, .34); background: rgba(56, 189, 248, .09); }

.waterly-chart-lab-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 22px;
}

.waterly-chart-lab-periods {
    display: inline-flex;
    padding: 3px;
    border: 1px solid rgba(148, 203, 222, .1);
    border-radius: 11px;
    background: rgba(255, 255, 255, .018);
}

.waterly-chart-lab-tools-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.waterly-chart-lab-temperature {
    height: 34px;
    padding: 0 11px;
    border: 1px solid rgba(56, 189, 248, .15);
    border-radius: 10px;
    color: #6f93a1;
    background: rgba(56, 189, 248, .035);
    font-size: 8px;
    font-weight: 700;
    cursor: pointer;
}

.waterly-chart-lab-temperature i { margin-right: 5px; color: #38bdf8; }
.waterly-chart-lab-temperature.is-active { border-color: rgba(56, 189, 248, .38); color: #dff8ff; background: rgba(56, 189, 248, .13); box-shadow: 0 0 16px rgba(56, 189, 248, .08); }

.waterly-chart-lab-periods button {
    padding: 7px 13px;
    border: 0;
    border-radius: 8px;
    color: #668694;
    background: transparent;
    font-size: 9px;
    font-weight: 750;
    cursor: pointer;
}

.waterly-chart-lab-periods button.is-active { color: #dffaff; background: rgba(56, 189, 248, .13); box-shadow: inset 0 0 0 1px rgba(103, 232, 249, .12); }

.waterly-chart-lab-toolbar label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    border: 1px solid rgba(94, 234, 212, .15);
    border-radius: 11px;
    color: #5eead4;
    background: rgba(45, 212, 191, .055);
}

.waterly-chart-lab-toolbar select { height: 34px; max-width: 230px; border: 0; outline: 0; color: #9ec2ce; background: transparent; font-size: 9px; }

.waterly-chart-lab-series { display: flex; min-height: 40px; align-items: center; gap: 7px; padding: 0 22px 10px; overflow-x: auto; }
.waterly-chart-lab-series button { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid color-mix(in srgb, var(--series-color) 28%, transparent); border-radius: 999px; color: #cbe4ec; background: color-mix(in srgb, var(--series-color) 8%, transparent); font-size: 8px; cursor: pointer; }
.waterly-chart-lab-series button > i { width: 7px; height: 7px; border-radius: 50%; background: var(--series-color); box-shadow: 0 0 7px var(--series-color); }
.waterly-chart-lab-series button small { color: var(--series-color); }
.waterly-chart-lab-series button b { margin-left: 2px; color: #6b8995; font-size: 7px; }

.waterly-chart-lab-canvas { position: relative; min-height: 0; margin: 0 16px; padding: 12px 10px 8px; border: 1px solid rgba(148, 203, 222, .08); border-radius: 18px; background: rgba(2, 11, 18, .42); }
.waterly-chart-lab-canvas canvas { width: 100% !important; height: 100% !important; }
.waterly-chart-lab-loader,
.waterly-chart-lab-empty { position: absolute; z-index: 4; inset: 0; display: none; align-items: center; justify-content: center; flex-direction: column; gap: 9px; border-radius: inherit; color: #7194a2; background: rgba(3, 13, 21, .78); font-size: 10px; }
.waterly-chart-lab-loader.is-visible,
.waterly-chart-lab-empty.is-visible { display: flex; }
.waterly-chart-lab-loader i { color: #38bdf8; font-size: 20px; }
.waterly-chart-lab-empty i { color: #5a7b89; font-size: 24px; }

.waterly-chart-lab-window > footer { display: flex; align-items: center; justify-content: space-between; padding: 13px 22px 16px; color: #577785; font-size: 8px; }
.waterly-chart-lab-window > footer i { margin-right: 5px; color: #38bdf8; }
.waterly-chart-lab-window > footer small { color: #4f7180; }

@media (max-width: 767px) {
    .waterly-chart-lab { padding: 5px; }
    .waterly-chart-lab-window { width: 100%; height: calc(100dvh - 10px); border-radius: 22px; }
    .waterly-chart-lab-window > header { padding: 15px 14px 12px; }
    .waterly-chart-lab-toolbar { align-items: stretch; flex-direction: column; padding: 10px 14px; }
    .waterly-chart-lab-tools-left { justify-content: space-between; }
    .waterly-chart-lab-periods { flex: 0 0 auto; }
    .waterly-chart-lab-temperature { min-width: 0; }
    .waterly-chart-lab-toolbar label { width: 100%; }
    .waterly-chart-lab-toolbar select { width: 100%; max-width: none; }
    .waterly-chart-lab-series { padding: 0 14px 8px; }
    .waterly-chart-lab-canvas { margin: 0 7px; padding: 8px 3px; }
    .waterly-chart-lab-window > footer { padding: 10px 14px 13px; }
    .waterly-chart-lab-window > footer small { display: none; }
}

.select-tile-contener .marker-footer-strip {
    position: relative;
    z-index: 4;
    display: flex;
    width: 100%;
    flex: 0 0 auto;
    flex-direction: column;
    flex-shrink: 0;
    align-items: stretch;
    gap: 0;
    min-height: 0;
    background: #050f18;
    border-top: 1px solid rgba(109, 213, 237, 0.12);
}

.select-tile-contener .marker-footer-strip:not(.has-sponsor):not(.has-identity) {
    display: none;
}

/* Stały wąski pasek: nazwa fundatora + firmware/SN + chevron (zawsze widoczny). */
.select-tile-contener .marker-footer-compact {
    display: flex;
    width: 100%;
    min-height: 28px;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    box-sizing: border-box;
    border-top: 1px solid rgba(109, 213, 237, 0.1);
    background: #050f18;
}

.select-tile-contener .marker-footer-strip:not(.has-sponsor) .marker-footer-compact {
    border-top: 0;
}

.select-tile-contener .marker-footer-compact-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: #d7eaf3;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 0;
    line-height: 1.2;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.select-tile-contener .marker-footer-compact-name:hover,
.select-tile-contener .marker-footer-compact-name:focus-visible {
    color: #ffffff;
    outline: none;
    text-decoration: underline;
}

/* Zwinięty / domyślny pasek — nazwa po lewej, skrócona wersja/SN po prawej. */
.select-tile-contener .marker-footer-compact .marker-device-identity {
    display: flex;
    width: auto;
    max-width: 58%;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    padding: 0;
    margin: 0;
    background: none;
    text-align: right;
}

.select-tile-contener .marker-footer-compact .device-identity-line {
    width: auto;
    max-width: 100%;
    min-height: 0;
    gap: 5px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    white-space: nowrap;
}

.select-tile-contener .marker-footer-strip.is-collapsed .marker-footer-compact .device-identity-brand,
.select-tile-contener .marker-footer-strip.is-collapsed .marker-footer-compact .device-identity-brand + .device-identity-divider {
    display: none;
}

.select-tile-contener .marker-footer-compact .device-identity-serial,
.select-tile-contener .marker-footer-compact .diagnostic-version-code,
.select-tile-contener .marker-footer-compact .diagnostic-version-product,
.select-tile-contener .marker-footer-compact .device-serial-number {
    font-size: 10px;
    line-height: 1;
}

.select-tile-contener .marker-footer-battery {
    font-family: var(--wl-font-mono);
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 4px;
    color: #78909f;
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    white-space: nowrap;
}

.select-tile-contener .marker-footer-battery > i {
    position: relative;
    width: 18px;
    height: 9px;
    box-sizing: border-box;
    border: 1px solid currentColor;
    border-radius: 2.5px;
}

.select-tile-contener .marker-footer-battery > i::after {
    content: "";
    position: absolute;
    inset: 1px auto 1px 1px;
    width: max(0px, calc(var(--battery-level, 0%) - 2px));
    max-width: calc(100% - 2px);
    border-radius: 1px;
    background: #2dd4bf;
}

.select-tile-contener .marker-footer-battery.is-low {
    color: #fb7185;
    font-weight: 700;
}

.select-tile-contener .marker-footer-battery.is-low > i::after {
    background: currentColor;
}

.select-tile-contener .marker-sponsor-collapse-toggle {
    display: inline-flex;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 999px;
    background: rgba(2, 6, 14, 0.55);
    color: #94a3b8;
    cursor: pointer;
    opacity: 0.9;
    transition: opacity 180ms ease, background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.select-tile-contener .marker-sponsor-collapse-toggle i {
    font-size: 9px;
    transition: transform 280ms ease;
}

.select-tile-contener .marker-sponsor-collapse-toggle:hover,
.select-tile-contener .marker-sponsor-collapse-toggle:focus-visible {
    outline: none;
    opacity: 1;
    color: #e2e8f0;
    border-color: rgba(148, 163, 184, 0.42);
}

.select-tile-contener .marker-footer-strip.is-collapsed .marker-sponsor-collapse-toggle i {
    transform: rotate(180deg);
}

/* Rozwinięty baner — nazwa fundatora jest już w logo; wersja + chevron jako jedna wyśrodkowana grupa. */
.select-tile-contener .marker-footer-strip:not(.is-collapsed).has-sponsor .marker-footer-compact-name {
    display: none !important;
}

.select-tile-contener .marker-footer-strip:not(.is-collapsed) .marker-footer-compact {
    justify-content: center;
    gap: 8px;
    padding-right: 10px;
    padding-left: 10px;
}

.select-tile-contener .marker-footer-strip:not(.is-collapsed) .marker-footer-compact .marker-device-identity {
    display: flex;
    width: auto;
    max-width: calc(100% - 36px);
    flex: 0 1 auto;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    background: none;
    text-align: center;
}

.select-tile-contener .marker-footer-strip:not(.is-collapsed) .marker-footer-compact .device-identity-line {
    width: auto;
    max-width: 100%;
    min-height: 0;
    gap: 7px;
    padding: 3px 10px;
    border: 1px solid rgba(109, 213, 237, 0.16);
    border-radius: 999px;
    background: rgba(109, 213, 237, 0.045);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    white-space: nowrap;
}

.select-tile-contener .marker-footer-strip:not(.is-collapsed) .marker-footer-compact .device-identity-brand,
.select-tile-contener .marker-footer-strip:not(.is-collapsed) .marker-footer-compact .device-identity-brand + .device-identity-divider {
    display: inline-flex;
}

.select-tile-contener .marker-footer-strip:not(.is-collapsed) .marker-sponsor-collapse-toggle {
    position: static;
    flex: 0 0 22px;
    transform: none;
}

/* Desktop — większy oddech od zaokrąglonych rogów panelu (border-radius 26px). */
@media (min-width: 768px) {
    .select-tile-contener {
        bottom: 0;
        margin-bottom: 0;
    }

    .select-tile-contener .marker-sponsor-content {
        padding-right: 22px;
        padding-left: 22px;
    }

    .select-tile-contener .marker-footer-compact {
        padding-right: 22px;
        padding-left: 22px;
    }

    .select-tile-contener .marker-footer-strip:not(.is-collapsed) .marker-footer-compact {
        padding-right: 22px;
        padding-left: 22px;
    }
}

/* Rozwinięte logo fundatora — chowane przy scrollu. */
.select-tile-contener .marker-main-contener-sponsor {
    position: relative;
    isolation: isolate;
    display: block;
    overflow: hidden;
    width: 100%;
    height: 74px;
    flex: 0 0 74px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid rgba(109, 213, 237, 0.08);
    background:
        radial-gradient(circle at 8% 35%, rgba(251, 191, 36, 0.1), transparent 34%),
        radial-gradient(circle at 94% 70%, rgba(56, 189, 248, 0.09), transparent 38%);
    background-color: transparent;
    box-shadow: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    opacity: 1;
    text-decoration: none;
    transition:
        height 280ms cubic-bezier(0.22, 1, 0.36, 1),
        flex-basis 280ms cubic-bezier(0.22, 1, 0.36, 1),
        opacity 200ms ease,
        border-color 0.25s ease,
        margin 280ms ease;
}

.select-tile-contener .marker-footer-strip.is-collapsed .marker-main-contener-sponsor {
    height: 0 !important;
    flex-basis: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0;
    border: 0 !important;
    pointer-events: none;
}

.select-tile-contener .marker-main-contener-sponsor::before {
    display: none;
}

.select-tile-contener .marker-main-contener-sponsor::after {
    display: none;
}

.select-tile-contener .marker-main-contener-sponsor:hover,
.select-tile-contener .marker-main-contener-sponsor:focus-visible {
    outline: none;
    background:
        radial-gradient(circle at 8% 35%, rgba(251, 191, 36, 0.15), transparent 36%),
        radial-gradient(circle at 94% 70%, rgba(56, 189, 248, 0.14), transparent 40%);
    box-shadow: none;
    transform: none;
}

.select-tile-contener .marker-main-contener-sponsor.is-disabled {
    cursor: default;
    pointer-events: none;
}

.select-tile-contener .marker-main-contener-sponsor.is-disabled:hover {
    border-color: rgba(109, 213, 237, 0.18);
    box-shadow:
        0 20px 38px -22px rgba(0, 0, 0, 0.9),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
    transform: none;
}

.select-tile-contener .marker-main-contener-sponsor.is-disabled .marker-sponsor-action {
    display: none;
}

.marker-sponsor-content {
    position: relative;
    z-index: 1;
    display: grid;
    height: 100%;
    align-items: center;
    grid-template-columns: 48px minmax(0, 1fr) 34px;
    gap: 10px;
    padding: 8px 12px;
    transition: opacity 220ms ease, transform 280ms ease;
}

.select-tile-header-sponsor-logo {
    display: flex;
    width: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* No chip behind the mark — sits directly on the navy funded-by strip. */
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.select-tile-header-sponsor-logo img {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    object-fit: cover;
}

.select-tile-header-sponsor-description {
    min-width: 0;
    margin: 0;
    font-size: 10px;
    line-height: 1.15;
}

.select-tile-contener .marker-main-contener-sponsor .select-tile-header-sponsor-description-name {
    overflow: hidden;
    margin-top: 3px;
    color: #eef9ff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.select-tile-contener .marker-main-contener-sponsor .select-tile-header-sponsor-description-comment {
    color: #fbbf24;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.84;
}

.select-tile-header-sponsor-description-url {
    overflow: hidden;
    margin-top: 5px;
    color: #6f8e9e;
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.marker-sponsor-action {
    display: flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 50%;
    background: rgba(56, 189, 248, 0.07);
    color: #76d7f5;
    font-size: 11px;
    transform: rotate(45deg);
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.marker-main-contener-sponsor:hover .marker-sponsor-action,
.marker-main-contener-sponsor:focus-visible .marker-sponsor-action {
    background: rgba(56, 189, 248, 0.16);
    color: #d9f7ff;
    transform: rotate(45deg) translate(-2px, -2px);
}

/* Sponsor - END */


/* Device identity — w stałym pasku kompaktowym obok nazwy fundatora */

.select-tile-contener .marker-device-identity {
    display: flex;
    width: auto;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    padding: 0;
    margin: 0;
    background: none;
    text-align: right;
}

/* Jedna wąska kapsuła - marka, wersja i numer rozdzielone włoskowymi kreskami */
.device-identity-line {
    font-family: var(--wl-font-mono);
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    gap: 7px;
    padding: 3px 10px;
    border: 1px solid rgba(109, 213, 237, 0.16);
    border-radius: 999px;
    background: rgba(109, 213, 237, 0.045);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.device-identity-brand {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #8aa6b4;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
}

.device-identity-brand i {
    font-size: 8.5px;
    opacity: 0.6;
}

.device-identity-brand-name {
    display: inline-block;
    line-height: 1;
    transform: translateY(0.5px);
}

.device-identity-divider {
    width: 1px;
    height: 9px;
    flex: 0 0 1px;
    background: rgba(255, 255, 255, 0.1);
}

.device-identity-serial {
    display: inline-flex;
    align-items: center;
    color: #bfeaff;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

/* Wersja zachowuje paletę diagnostyki, tylko w mniejszej skali */
.select-tile-contener .marker-device-identity .diagnostic-version-code {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1;
}

.select-tile-contener .marker-device-identity .diagnostic-version-number {
    display: inline-block;
    font-size: 9.5px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.select-tile-contener .marker-device-identity .diagnostic-version-product {
    padding: 1px 4px;
    border: 1px solid rgba(101, 184, 255, 0.32);
    background: rgba(33, 150, 243, 0.12);
    color: #79c2ff;
    border-radius: 4px;
    font-size: 8px;
    font-weight: 900;
}

.select-tile-contener .marker-device-identity .diagnostic-version-segment {
    font-size: inherit;
    line-height: inherit;
    vertical-align: baseline;
}

.select-tile-contener .marker-device-identity .diagnostic-version-segment.segment-1 { color: #ffca5f; }
.select-tile-contener .marker-device-identity .diagnostic-version-segment.segment-2 { color: #c997ff; }
.select-tile-contener .marker-device-identity .diagnostic-version-segment.segment-3 { color: #65ddb7; }
.select-tile-contener .marker-device-identity .diagnostic-version-segment.segment-4 { color: #ff8490; }

.select-tile-contener .marker-device-identity .diagnostic-version-dot {
    padding: 0;
    margin: 0;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    vertical-align: baseline;
}

/* Numer seryjny w pełnej formie - kafelek SN w diagnostyce */
.device-serial-code {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--wl-font-mono);
    white-space: nowrap;
}

.device-serial-brand {
    color: #6f8e9e;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.device-serial-variant {
    padding: 3px 6px;
    border: 1px solid rgba(251, 191, 36, 0.34);
    border-radius: 6px;
    background: rgba(251, 191, 36, 0.12);
    box-shadow: inset 0 0 10px rgba(251, 191, 36, 0.08);
    color: #ffd166;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.05em;
}

.device-serial-number {
    color: #8fe3ff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-shadow: 0 0 9px rgba(143, 227, 255, 0.45);
}

/* W kapsule numer jest częścią jednej linii, a nie osobnym akcentem */
.select-tile-contener .marker-device-identity .device-serial-number {
    color: inherit;
    font-size: 9.5px;
    font-weight: 700;
    text-shadow: none;
}

/* Device identity - END */







/*  */

.tile-last-connect-human,
.map-last-connect-human {
    /* position: absolute; */
    /* bottom: -3px; */
    font-size: 8px;
    top: -8px;
    font-weight: 600;
    white-space: nowrap;
    /* transform-origin: center;
    left: 50%;
    transform: translate(-50%, 0%); */
}

.map-go-to-object {
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}

.tile-go-to-object[disabled],
.map-go-to-object[disabled] {
    color: #6a6a6a;
}

.tile-go-to-object {
    height: 33.333%;
    border-top-right-radius: 15px;
}

.tile-fly-to {
    height: 33.333%;
}

.tile-open-marker {
    height: 33.333%;
    border-bottom-right-radius: 15px;
}


/* .arker-widget-group-item{ */
    /* cursor: pointer; */
/* } */

.widget-dynamic-chart-tile-hover:not( [disabled] ):hover {
    color: #04529c;
    cursor: pointer;
}

.widget-dynamic-chart-marker-hover:not( [disabled] ):hover {
    color: #2193f3;
    cursor: pointer;
}

/* .period-selector {
    color: #b4bbc2 !important;
    font-weight: 100;
    appearance: none !important;
}

.period-selector:hover {
    color: #2193F3 !important;
} */





















.marker-widget-service {
    background-color: #ff4949;
    color: #FFFFFF;
    border-radius: 15px;
}

/* Touch-first marker panel. No information on a small screen depends on hover. */
@media (max-width: 767px) {
    .marker-atmosphere-widget,
    .marker-atmosphere-widget *,
    .marker-atmosphere-widget *::before,
    .marker-atmosphere-widget *::after {
        animation: none !important;
        transition: none !important;
    }

    .marker-water-temperature-widget,
    .marker-water-temperature-widget *,
    .marker-water-temperature-widget *::before,
    .marker-water-temperature-widget *::after {
        animation: none !important;
        transition: none !important;
    }

    .marker-water-depth-widget,
    .marker-water-depth-widget *,
    .marker-water-depth-widget *::before,
    .marker-water-depth-widget *::after {
        animation: none !important;
        transition: none !important;
    }

    .marker-water-history-expand {
        position: absolute;
        z-index: 7;
        top: -2px;
        left: 0;
        display: inline-flex;
        height: 22px;
        align-items: center;
        gap: 4px;
        padding: 0 7px;
        border: 1px solid rgba(56, 189, 248, 0.2);
        border-radius: 999px;
        outline: 0;
        color: #72d7f3;
        background: rgba(7, 27, 40, 0.9);
        font: inherit;
    }

    .marker-water-hero-history {
        pointer-events: auto;
    }

    .marker-water-history-expand i {
        font-size: 7px;
    }

    .marker-water-history-expand span {
        font-size: 6px;
        font-weight: 750;
    }

    .marker-water-hero-card.is-history-expanded .marker-water-hero-content {
        height: auto;
        overflow: visible;
        grid-template-columns: minmax(0, 1fr);
    }

    .marker-water-hero-card.is-history-expanded .marker-water-hero-score,
    .marker-water-hero-card.is-history-expanded .marker-water-hero-summary {
        display: none;
    }

    .marker-water-hero-card.is-history-expanded .marker-water-hero-history {
        position: relative;
        inset: auto;
        display: block;
        width: 100%;
        height: 190px;
        min-height: 190px;
        padding: 4px 0 0;
        border: 0;
        grid-column: 1 / -1;
    }

    .marker-water-hero-card.is-history-expanded .marker-water-hero-history > svg,
    .marker-water-hero-card.is-history-expanded .marker-water-hero-history .marker-water-history-plot {
        height: 158px;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .marker-water-hero-card.is-history-expanded .marker-water-hero-history > header,
    .marker-water-hero-card.is-history-expanded .marker-water-hero-history > footer {
        opacity: 1;
        transform: translateY(0);
    }

    .marker-water-hero-card.is-history-expanded .marker-water-history-axis,
    .marker-water-hero-card.is-history-expanded .marker-water-history-labels,
    .marker-water-hero-card.is-history-expanded .marker-water-history-line,
    .marker-water-hero-card.is-history-expanded .marker-water-history-dot {
        opacity: 1;
    }

    .marker-water-hero-card.is-history-expanded .marker-water-history-labels > span {
        font-size: 11px;
    }

    .marker-water-hero-card.is-history-expanded .marker-water-history-point-hit {
        pointer-events: all;
    }

    .marker-water-hero-card:not(.is-history-expanded) .marker-water-hero-history {
        cursor: zoom-in;
    }

    .marker-atmosphere-minimal-value {
        height: 28px;
        transform: translateY(2px) scale(0.76);
    }

    .marker-atmosphere-minimal-scale > b,
    .marker-atmosphere-minimal-scale > em {
        opacity: 1;
    }

    .marker-atmosphere-minimal-trend b {
        max-height: 12px;
        opacity: 1;
        transform: translateY(0);
    }

    .marker-atmosphere-glass-range,
    .marker-atmosphere-glass-pressure-range,
    .marker-atmosphere-glass-pressure-scale > b,
    .marker-atmosphere-glass-pressure-scale > em {
        opacity: 1;
    }

    .marker-atmosphere-temperature:hover,
    .marker-atmosphere-temperature:active,
    .marker-atmosphere-metric:hover,
    .marker-atmosphere-metric:active {
        background-color: transparent;
        transform: none !important;
    }

    .marker-atmosphere-glass-value,
    .marker-atmosphere-card:hover .marker-atmosphere-glass-value {
        transform: none !important;
    }

    .marker-water-hero-score:hover .marker-water-hero-orbit {
        box-shadow: 0 0 24px color-mix(in srgb, var(--wqi-color) 8%, transparent);
        transform: none;
    }

    .marker-water-hero-temperature:hover {
        border-color: rgba(56, 189, 248, 0.16);
        background:
            radial-gradient(circle at 50% 105%, rgba(14, 165, 233, 0.19), transparent 52%),
            linear-gradient(155deg, rgba(56, 189, 248, 0.08), rgba(255, 255, 255, 0.018));
        transform: none;
    }

    .marker-water-temperature-card:hover,
    .marker-water-temperature-card:focus-visible {
        border-color: rgba(56, 189, 248, 0.2);
        box-shadow:
            0 14px 28px -20px rgba(0, 0, 0, 0.9),
            inset 0 1px 0 rgba(255, 255, 255, 0.065);
        transform: none;
    }

    .marker-water-hero-quick-action:hover {
        border-color: rgba(125, 211, 252, 0.14);
        color: #7292a1;
        background:
            radial-gradient(circle at 50% 0, rgba(56, 189, 248, 0.08), transparent 68%),
            linear-gradient(155deg, rgba(18, 39, 52, 0.96), rgba(5, 15, 24, 0.98));
        transform: none;
    }

    .marker-water-hero-quick-action:hover i {
        color: #60cdeb;
    }

    .marker-water-hero-quick-action:active,
    .marker-water-history-expand:active {
        transform: scale(0.97);
    }

    .select-tile-contener .marker-main-contener-sponsor:hover {
        border: 0;
        box-shadow: none;
        transform: none;
    }

    .marker-main-contener-sponsor:hover .marker-sponsor-action {
        background: rgba(56, 189, 248, 0.07);
        color: #76d7f5;
        transform: rotate(45deg);
    }
}
/* Shared surface for the full-screen Points and Alerts sheets. */
:root {
    --waterly-points-sheet-background: radial-gradient(circle at 90% 4%, rgba(50, 211, 187, .16), transparent 27%), linear-gradient(155deg, rgba(7, 23, 34, .97), rgba(5, 14, 23, .94));
}
/* Point browser — shell owns the width; panel fills it and slides inside */
.main-container-subpage:has(.tiles-list-contener) {
    overflow-x: hidden;
}

.tiles-list-contener {
    --tiles-list-clip-fill: #050e17;
    width: auto;
    max-height: 100% !important;
    padding: calc(14px + var(--safe-top, 0px)) calc(14px + var(--safe-right, 0px)) calc(14px + var(--safe-bottom, 0px)) calc(14px + var(--safe-left, 0px));
    box-sizing: border-box;
    overflow: hidden;
    border-left: 1px solid rgba(89, 208, 255, .16);
    background: var(--waterly-points-sheet-background);
    box-shadow: -24px 0 70px rgba(0, 0, 0, .42);
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
}

.tiles-list-header {
    position: relative;
    flex: 0 0 auto;
    padding: 14px 10px 16px;
}

.tiles-list-heading {
    padding-right: 52px;
}

.tiles-list-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #62d9c8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.tiles-list-eyebrow span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #48d8bf;
    box-shadow: 0 0 0 5px rgba(72, 216, 191, .11), 0 0 16px #48d8bf;
}

.tiles-list-heading h2 {
    margin: 8px 0 4px;
    color: #f4fbff;
    font-size: 24px;
    font-weight: 750;
    letter-spacing: -.035em;
}

.tiles-list-heading p {
    margin: 0;
    color: #8da5b5;
    font-size: 12px;
}

.tiles-list-contener .close-tiles-list-contener {
    position: absolute;
    top: 8px;
    right: 8px;
    display: grid;
    width: 40px;
    height: 40px;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 13px;
    background: rgba(255, 255, 255, .055);
    color: #a9bdc9;
    cursor: pointer;
    transition: .2s ease;
}

.tiles-list-contener .close-tiles-list-contener:hover {
    border-color: rgba(90, 211, 240, .35);
    background: rgba(57, 188, 221, .14);
    color: #fff;
    transform: rotate(4deg);
}

.tiles-list-search-tools {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
}
.tiles-list-search-tools .tiles-list-search {
    flex: 1;
    min-width: 0;
    margin-top: 0;
}
.tiles-list-search-tools .waterly-device-filter { flex-basis: 48px; }
.tiles-list-search-tools .waterly-ctrl-button {
    width: 48px;
    height: 48px;
    border: 1px solid #76cee729;
    border-radius: 15px;
    background: #010a117a;
    color: #57cdbf;
    cursor: pointer;
}
.tiles-list-search-tools .waterly-ctrl-button:is(:hover, :focus-visible) {
    background: #32d3bb22;
    border-color: #52d7ce;
}
.tiles-list-search-tools .waterly-device-filter-panel {
    z-index: 20;
    width: min(420px, 100%);
}
html[data-theme="light"] .tiles-list-search-tools .waterly-ctrl-button {
    background: #f8fcfe;
    color: #168d92;
    border-color: #cbdde5;
}
.tiles-list-search {
    position: relative;
    display: flex;
    height: 48px;
    align-items: center;
    margin-top: 18px;
    border: 1px solid rgba(118, 206, 231, .16);
    border-radius: 15px;
    background: rgba(1, 10, 17, .48);
    transition: .2s ease;
}

.tiles-list-search:focus-within {
    border-color: rgba(82, 215, 206, .58);
    box-shadow: 0 0 0 4px rgba(50, 211, 187, .08);
}

.tiles-list-search > i {
    margin-left: 16px;
    color: #57cdbf;
}

.tiles-list-search input {
    min-width: 0;
    flex: 1;
    padding: 0 10px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #edfaff;
    font-size: 13px;
}

.tiles-list-search input::placeholder {
    color: #637b8b;
}

.tiles-list-search-clear {
    display: none;
    width: 34px;
    height: 34px;
    margin-right: 7px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #708895;
    cursor: pointer;
}

.tiles-list-search.has-value .tiles-list-search-clear {
    display: block;
}

.tiles-list-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 2px 0;
    color: #7f96a4;
    font-size: 10px;
}

.tiles-list-location {
    padding: 2px 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #63bdb5;
    font: inherit;
    cursor: pointer;
    transition: color .18s ease;
}

.tiles-list-location:hover:not(:disabled) {
    color: #91ede1;
}

.tiles-list-location.is-loading {
    color: #7f96a4;
}

.tiles-list-location.is-success {
    color: #4fd1a8;
}

.tiles-list-location.is-approximate {
    color: #67c7e7;
}

.tiles-list-location.is-error {
    color: #fb9b67;
}

.tiles-list-location.is-error:hover:not(:disabled) {
    color: #ffc09c;
}

.tiles-list-location:disabled {
    cursor: default;
}

.tiles-list-location i {
    margin-right: 4px;
}

.tiles-list-results {
    flex: 1 1 0;
    min-height: 0;
    padding: 4px 6px 24px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    background-color: var(--tiles-list-clip-fill);
    scrollbar-width: thin;
    scrollbar-color: rgba(84, 194, 199, .35) transparent;
}

.tiles-list-section {
    margin: 12px 0 22px;
}

.tiles-list-section:last-child {
    margin-bottom: 8px;
}

.tiles-list-section-header {
    position: sticky;
    z-index: 2;
    isolation: isolate;
    top: -4px;
    display: flex;
    min-height: 46px;
    align-items: center;
    justify-content: space-between;
    margin: 0 -5px 8px;
    padding: 7px 11px;
    border: 1px solid rgba(118, 206, 231, .16);
    border-radius: 15px;
    background:
        linear-gradient(90deg, rgba(40, 171, 167, .055), transparent 58%),
        rgba(1, 10, 17, .94);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}

/* Opaque square plate behind the rounded sticky header. Scrolling tiles
   pass under this plate, including the corner cut-outs, instead of peeking through. */
.tiles-list-section-header::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    background: var(--tiles-list-clip-fill);
    box-shadow: 0 0 0 3px var(--tiles-list-clip-fill);
    content: "";
    pointer-events: none;
}

.tiles-list-section-heading {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tiles-list-section-heading > i {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid rgba(91, 210, 203, .2);
    border-radius: 10px;
    background: rgba(54, 194, 185, .09);
    color: #61d1c5;
    font-size: 11px;
}

.tiles-list-section-heading strong,
.tiles-list-section-heading small {
    display: block;
}

.tiles-list-section-heading strong {
    color: #eaf8fc;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .02em;
}

.tiles-list-section-heading small {
    margin-top: 1px;
    color: #698391;
    font-size: 8px;
}

.tiles-list-section-count {
    display: grid;
    min-width: 25px;
    height: 25px;
    padding: 0 7px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 999px;
    background: rgba(255, 255, 255, .045);
    color: #77909e;
    font-size: 9px;
    font-weight: 700;
}

.is-places-section .tiles-list-section-heading > i {
    border-color: rgba(96, 185, 230, .28);
    background: rgba(56, 168, 220, .12);
    color: #74c7ef;
}

.is-places-section .tiles-list-section-count {
    color: #7ec8ea;
}

.tiles-list-place {
    display: grid;
    width: 100%;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    margin: 6px 0;
    padding: 11px 12px;
    border: 1px solid rgba(122, 190, 211, .14);
    border-radius: 15px;
    background:
        linear-gradient(125deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02)),
        rgba(8, 24, 35, .72);
    color: #d9e9f0;
    text-align: left;
    cursor: pointer;
    transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.tiles-list-place:hover {
    border-color: rgba(86, 196, 230, .38);
    background:
        linear-gradient(125deg, rgba(56, 168, 220, .12), rgba(255, 255, 255, .03)),
        rgba(8, 24, 35, .82);
    transform: translateY(-1px);
}

.tiles-list-place.is-loading {
    cursor: default;
    opacity: .78;
}

.tiles-list-place > i {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid rgba(96, 185, 230, .22);
    border-radius: 11px;
    background: rgba(56, 168, 220, .1);
    color: #74c7ef;
    font-size: 12px;
}

.tiles-list-place > span {
    min-width: 0;
}

.tiles-list-place strong,
.tiles-list-place small {
    display: block;
}

.tiles-list-place strong {
    overflow: hidden;
    color: #eaf8fc;
    font-size: 12px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tiles-list-place small {
    margin-top: 2px;
    overflow: hidden;
    color: #6f8897;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tiles-list-place em {
    color: #79cbe8;
    font-size: 9px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
}

.is-alarms-section .tiles-list-section-heading > i {
    color: #ff0000;
    background: rgba(255, 0, 0, .08);
    border-color: rgba(255, 0, 0, .25);
}
.is-alarms-section .tiles-list-section-count { color: #ff6574; }
.tile-list-alarm-status {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    color: #ff6574;
    font-size: 11px;
    line-height: 1.4;
    white-space: normal;
}
.tile-list-alarm-status > i { color: #ff0000; flex-shrink: 0; }

.is-favorites-section .tiles-list-section-heading > i {
    border-color: rgba(245, 190, 72, .25);
    background: rgba(245, 190, 72, .1);
    color: #f5c86e;
}

.is-favorites-section .tiles-list-section-count {
    color: #e9bd62;
}

.tile-list-el {
    width: 100% !important;
    height: auto;
    margin: 9px 0;
    overflow: hidden;
    border: 1px solid rgba(122, 190, 211, .13);
    border-radius: 18px;
    background:
        linear-gradient(125deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .025)),
        rgba(8, 24, 35, .82);
    color: #d9e9f0;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .16);
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.tile-list-el:hover {
    border-color: rgba(73, 210, 202, .34);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .23), inset 0 1px rgba(255, 255, 255, .04);
    transform: translateY(-2px);
}

.tile-list-el.is-subscribed {
    border-color: rgba(245, 190, 72, .3);
    background: linear-gradient(125deg, rgba(245, 190, 72, .09), rgba(14, 39, 48, .78));
}

.tile-list-main {
    display: flex;
    width: 100%;
    min-height: 92px;
    align-items: center;
    gap: 13px;
    padding: 14px;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.tile-list-avatar {
    position: relative;
    display: grid;
    isolation: isolate;
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--tile-quality-color, #8297a3) 18%, transparent);
    border-radius: 50%;
    background: var(--tile-quality-bg, rgba(130, 151, 163, .12));
    box-shadow:
        inset 0 4px 6px -1px rgba(255, 255, 255, .05),
        0 4px 12px -2px var(--tile-quality-shadow, rgba(130, 151, 163, .22));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: background-color .5s ease, border-color .5s ease, box-shadow .5s ease, transform .5s ease;
}

.tile-list-avatar-ring {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    transform: rotate(calc(90deg - var(--tile-wqi-level, 0) * 1.8deg));
    transition: transform .5s ease;
}

.tile-list-avatar-ring circle {
    fill: none;
    stroke-width: 4;
}

.tile-list-avatar-track {
    stroke: rgba(255, 255, 255, .08);
}

.tile-list-avatar-progress {
    stroke: var(--tile-quality-color, #8297a3);
    stroke-dasharray: 100;
    stroke-dashoffset: calc(100 - var(--tile-wqi-level, 0));
    stroke-linecap: round;
    transition: stroke-dashoffset .5s ease, stroke .5s ease;
}

.tile-list-avatar-value {
    position: relative;
    z-index: 1;
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--tile-quality-color, #8297a3);
    line-height: 1;
    text-align: center;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .62);
}

.tile-list-avatar-value small {
    margin-bottom: 2px;
    color: #cbd5e1;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.tile-list-avatar-value strong {
    font-family: var(--wl-font-mono);
    max-width: 48px;
    overflow: hidden;
    color: var(--tile-quality-color, #8297a3);
    font-size: 21px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.04em;
    text-overflow: ellipsis;
}

.tile-list-copy {
    display: block;
    min-width: 0;
    flex: 1;
}

.tile-list-topline {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tile-display-name {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    color: #f2faff;
    font-size: 14px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tile-list-distance {
    flex: 0 0 auto;
    color: #73d8cc;
    font-size: 10px;
    font-weight: 700;
}

.tile-description {
    display: block;
    margin-top: 4px;
    overflow: hidden;
    color: #849aa8;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tile-list-meta {
    display: flex;
    min-height: 21px;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}

.tile-list-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .05);
    color: #89a3b0;
    font-size: 9px;
}

.tile-list-nearby,
.tile-list-subscribed {
    display: none !important;
}

.is-nearby .tile-list-nearby {
    display: inline-flex !important;
    background: rgba(51, 211, 186, .1);
    color: #66d8ca;
}

.is-subscribed .tile-list-subscribed {
    display: inline-flex !important;
    background: rgba(245, 190, 72, .12);
    color: #f5c86e;
}

.tile-list-chevron {
    color: #4c6574;
    font-size: 11px;
    transition: .2s ease;
}

.tile-list-main:hover .tile-list-chevron {
    color: #63d7ca;
    transform: translateX(3px);
}

.tile-list-actions {
    display: flex;
    min-height: 38px;
    border-top: 1px solid rgba(255, 255, 255, .055);
}

.tile-list-actions button {
    display: flex;
    min-width: 0;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 6px;
    border: 0;
    border-right: 1px solid rgba(255, 255, 255, .055);
    background: rgba(0, 0, 0, .09);
    color: #7893a1;
    font-size: 9px;
    cursor: pointer;
    transition: .18s ease;
    height: auto;
    border-radius: 0;
}

.tile-list-actions button:last-child {
    border-right: 0;
}

.tile-list-actions button:hover {
    background: rgba(54, 197, 192, .11);
    color: #dffcff;
}

.tiles-list-empty {
    display: none;
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    color: #66808f;
    text-align: center;
}

.tiles-list-empty i {
    margin-bottom: 13px;
    color: #3dbcae;
    font-size: 28px;
}

.tiles-list-empty strong {
    color: #cce2ea;
    font-size: 13px;
}

.tiles-list-empty span {
    margin-top: 5px;
    font-size: 10px;
}

.tiles-list-contener.is-empty .tiles-list-results {
    display: none;
}

.tiles-list-contener.is-empty .tiles-list-empty {
    display: flex;
}

@media (max-width: 767px) {
    html:has(.tiles-list-contener.active),
    body:has(.tiles-list-contener.active),
    .main-container-subpage:has(.tiles-list-contener.active) {
        overflow: hidden;
        overscroll-behavior: none;
    }

    body:has(.tiles-list-contener.active) {
        position: fixed;
        inset: 0;
    }

    .tiles-list-shell {
        position: fixed;
        top: var(--points-viewport-top, 0px);
        height: var(--points-viewport-height, 100dvh);
        bottom: auto;
        width: 100%;
    }

    .tiles-list-search input {
        /* Prevent Safari's automatic input zoom and the resulting page pan. */
        font-size: 16px;
    }

    body:has(.tiles-list-shell.has-keyboard) .waterly-navbar-footer {
        visibility: hidden;
    }

    .tiles-list-contener {
        width: auto;
        padding: calc(9px + var(--safe-top, 0px)) calc(9px + var(--safe-right, 0px)) calc(9px + var(--safe-bottom, 0px) + var(--waterly-footer-offset, 0px)) calc(9px + var(--safe-left, 0px));
        border-left: 0;
        transform: translateY(calc(100% + var(--safe-bottom, 0px) + var(--waterly-footer-offset, 58px)));
        transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .tiles-list-contener.active {
        transform: translateY(0);
    }

    .tiles-list-shell.has-keyboard .tiles-list-contener {
        padding-bottom: 9px;
    }

    .tiles-list-heading h2 {
        font-size: 21px;
    }

    .tile-list-main {
        min-height: 84px;
        padding: 12px;
    }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    .tiles-list-contener {
        transition: none;
    }
}

/* Waterly tutorial — a reusable library of short, contextual lessons. */
/* Keep touch scrolling inside the open tutorial, including at scroll boundaries. */
html:has(.marker-wqi-guide.is-open),
body:has(.marker-wqi-guide.is-open) {
    overflow: hidden;
    overscroll-behavior: none;
}

.marker-wqi-guide {
    --guide-sans: var(--wl-font-sans, "Geist", "Segoe UI", Arial, sans-serif);
    --guide-display: var(--wl-font-display);
    --guide-accent: #39d7c4;
    --wqi-color: var(--guide-accent);
    font-family: var(--guide-sans);
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    position: fixed;
    z-index: 10060;
    inset: 0;
    display: flex;
    visibility: hidden;
    align-items: flex-end;
    justify-content: center;
    padding: 16px 16px 0;
    opacity: 0;
    pointer-events: none;
    transition: visibility 0s linear .28s, opacity .24s ease;
}

.marker-wqi-guide.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0s;
}

.marker-wqi-guide-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgba(0, 9, 14, .72);
    cursor: default;
    backdrop-filter: blur(10px) saturate(.78);
    -webkit-backdrop-filter: blur(10px) saturate(.78);
}

.marker-wqi-guide-dialog {
    position: relative;
    isolation: isolate;
    display: flex;
    width: min(1500px, 100%);
    height: min(900px, calc(100dvh - 16px));
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
    border-bottom: 0;
    border: 1px solid rgba(105, 226, 211, .22);
    border-bottom: 0;
    border-radius: 24px 24px 0 0;
    color: #eafcff;
    background:
        radial-gradient(circle at 12% -8%, color-mix(in srgb, var(--wqi-color) 22%, transparent), transparent 35%),
        radial-gradient(circle at 102% 74%, rgba(39, 191, 200, .13), transparent 32%),
        linear-gradient(145deg, rgba(12, 36, 45, .985), rgba(5, 20, 28, .995));
    box-shadow: 0 36px 100px rgba(0, 0, 0, .62), 0 0 80px -44px var(--wqi-color), inset 0 1px 0 rgba(255, 255, 255, .08);
    transform: translateY(calc(100% + 32px));
    transition: transform .32s cubic-bezier(.2, .82, .2, 1);
}

.marker-wqi-guide-dialog::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
    background-size: 28px 28px;
    content: "";
    mask-image: linear-gradient(135deg, black, transparent 72%);
    -webkit-mask-image: linear-gradient(135deg, black, transparent 72%);
    pointer-events: none;
}

.marker-wqi-guide.is-open .marker-wqi-guide-dialog {
    transform: translateY(0);
}

.marker-wqi-guide-sheet-toolbar {
    position: relative;
    z-index: 8;
    display: flex;
    min-height: 42px;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid rgba(143, 184, 220, .12);
    background: linear-gradient(180deg, rgba(20, 42, 57, .96), rgba(8, 22, 31, .68));
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.marker-wqi-guide-sheet-close {
    display: grid;
    min-width: 190px;
    grid-template-columns: 46px minmax(0, 1fr) 22px;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    border: 0;
    border-radius: 10px;
    color: #dbe9f2;
    background: transparent;
    font: inherit;
    cursor: pointer;
    transition: color .18s ease, background .18s ease;
}

.marker-wqi-guide-sheet-close:hover,
.marker-wqi-guide-sheet-close:focus-visible {
    outline: none;
    color: #fff;
    background: rgba(101, 184, 255, .09);
}

.marker-wqi-guide-sheet-handle {
    width: 46px;
    height: 4px;
    border-radius: 99px;
    background: rgba(152, 204, 235, .44);
    box-shadow: 0 0 14px rgba(79, 181, 244, .18);
}

.marker-wqi-guide-sheet-close > span:nth-child(2) {
    min-width: 0;
    text-align: left;
}

.marker-wqi-guide-sheet-close strong,
.marker-wqi-guide-sheet-close small {
    display: block;
    white-space: nowrap;
}

.marker-wqi-guide-sheet-close strong { font-size: 12px; line-height: 1.1; }
.marker-wqi-guide-sheet-close small { margin-top: 1px; color: #748792; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.marker-wqi-guide-sheet-close > i { color: #79c2ff; font-size: 13px; }

/* Tablets and desktops use a centred window; phones retain the bottom sheet. */
@media (min-width: 768px) {
    .marker-wqi-guide {
        align-items: center;
        padding: 24px;
    }

    .marker-wqi-guide-dialog {
        height: min(900px, calc(100dvh - 48px));
        border-bottom: 1px solid rgba(105, 226, 211, .22);
        border-radius: 24px;
        transform: scale(.97);
    }

    .marker-wqi-guide.is-open .marker-wqi-guide-dialog {
        transform: scale(1);
    }

    .marker-wqi-guide-sheet-toolbar {
        display: none;
    }
}

.marker-waterly-guide-brand {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 11px;
}

.marker-waterly-guide-brand > i {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    place-items: center;
    border: 1px solid rgba(94, 228, 212, .25);
    border-radius: 13px;
    color: #66dfd1;
    background: linear-gradient(145deg, rgba(62, 210, 194, .16), rgba(255, 255, 255, .025));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 10px 24px -18px #57decf;
    font-size: 16px;
}

.marker-waterly-guide-brand > span {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.marker-waterly-guide-home {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(89, 217, 203, .26) transparent;
}

.marker-waterly-guide-home[aria-hidden="true"],
.marker-waterly-guide-lesson-view[aria-hidden="true"] {
    display: none;
}

.marker-waterly-guide-intro {
    display: grid;
    min-height: 174px;
    grid-template-columns: 136px minmax(0, 1fr);
    align-items: center;
    gap: 26px;
    padding: 23px 36px 19px;
    border-bottom: 1px solid rgba(255, 255, 255, .055);
    background: radial-gradient(circle at 13% 50%, color-mix(in srgb, var(--wqi-color) 13%, transparent), transparent 32%);
}

.marker-waterly-guide-compass {
    position: relative;
    display: grid;
    width: 112px;
    height: 112px;
    place-items: center;
    border: 1px solid rgba(91, 224, 209, .23);
    border-radius: 50%;
    color: #68e2d4;
    background: radial-gradient(circle, rgba(48, 190, 180, .16), rgba(4, 21, 29, .7) 64%);
    box-shadow: 0 0 0 9px rgba(70, 211, 198, .025), 0 0 38px -16px #4bd8c8, inset 0 0 28px rgba(0, 0, 0, .4);
    font-size: 40px;
}

.marker-waterly-guide-compass::before,
.marker-waterly-guide-compass::after {
    position: absolute;
    inset: 8px;
    border: 1px dashed rgba(102, 226, 212, .2);
    border-radius: 50%;
    content: "";
}

.marker-waterly-guide-compass::after {
    inset: -6px;
    border-style: solid;
    border-color: color-mix(in srgb, var(--wqi-color) 26%, transparent) transparent;
    animation: waterly-guide-compass-spin 18s linear infinite;
}

.marker-waterly-guide-compass b {
    position: absolute;
    width: 7px;
    height: 7px;
    border: 2px solid #dffffb;
    border-radius: 50%;
    background: var(--wqi-color);
    box-shadow: 0 0 13px var(--wqi-color);
}

.marker-waterly-guide-intro > div > small {
    color: #55cfc2;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.marker-waterly-guide-intro h2 {
    margin: 7px 0 0;
    color: #f1fdff;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -.045em;
    line-height: 1.06;
}

.marker-waterly-guide-intro p {
    margin: 10px 0 0;
    color: #8ca9b4;
    font-size: 12px;
    line-height: 1.55;
}

.marker-waterly-guide-library {
    padding: 20px 30px 28px;
}

.marker-waterly-guide-library > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 3px 10px;
}

.marker-waterly-guide-library > header small {
    color: #718e9a;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.marker-waterly-guide-library > header span {
    color: #41616c;
    font-size: 12px;
    font-weight: 800;
}

.marker-waterly-guide-lesson {
    display: grid;
    width: 100%;
    min-height: 116px;
    grid-template-columns: 72px minmax(0, 1fr) minmax(42px, max-content);
    align-items: center;
    gap: 16px;
    padding: 14px 16px 14px 15px;
    border: 1px solid color-mix(in srgb, var(--wqi-color) 30%, rgba(255, 255, 255, .08));
    border-radius: 20px;
    color: inherit;
    background: linear-gradient(115deg, color-mix(in srgb, var(--wqi-color) 11%, rgba(255, 255, 255, .02)), rgba(255, 255, 255, .018));
    box-shadow: 0 18px 42px -32px var(--wqi-color), inset 0 1px 0 rgba(255, 255, 255, .06);
    font: inherit;
    text-align: left;
    cursor: pointer;
    /* Keep vertical drag scrolling on the parent sheet — buttons otherwise eat the gesture. */
    touch-action: pan-y;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.marker-waterly-guide-lesson:hover,
.marker-waterly-guide-lesson:focus-visible {
    outline: none;
    border-color: color-mix(in srgb, var(--wqi-color) 58%, white);
    background: linear-gradient(115deg, color-mix(in srgb, var(--wqi-color) 17%, rgba(255, 255, 255, .025)), rgba(255, 255, 255, .027));
    box-shadow: 0 22px 48px -29px var(--wqi-color), inset 0 1px 0 rgba(255, 255, 255, .08);
}

.marker-waterly-guide-lesson-icon {
    display: flex;
    width: 68px;
    height: 76px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 1px solid color-mix(in srgb, var(--wqi-color) 36%, rgba(255, 255, 255, .1));
    border-radius: 18px;
    color: var(--wqi-color);
    background: rgba(2, 17, 24, .57);
    box-shadow: inset 0 0 22px color-mix(in srgb, var(--wqi-color) 7%, transparent);
}

.marker-waterly-guide-lesson-icon i { font-size: 18px; }
.marker-waterly-guide-lesson-icon b { color: #e7fbff; font-size: 12px; letter-spacing: .09em; }
.marker-waterly-guide-lesson-copy { display: flex; min-width: 0; flex-direction: column; }
.marker-waterly-guide-lesson-copy > small { color: color-mix(in srgb, var(--wqi-color) 66%, #91aab4); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.marker-waterly-guide-lesson-copy > strong { margin-top: 3px; color: #effdff; font-size: 17px; font-weight: 700; }
.marker-waterly-guide-lesson-copy > em { margin-top: 4px; color: #819da8; font-size: 11px; font-style: normal; line-height: 1.4; }
.marker-waterly-guide-lesson-copy > span { display: flex; align-items: center; gap: 5px; margin-top: 8px; color: #5f7e89; font-size: 11px; font-weight: 700; }
.marker-waterly-guide-lesson-copy > span i:nth-of-type(2) { margin-left: 7px; }

.marker-waterly-guide-lesson-arrow {
    display: flex;
    min-width: 36px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-right: 6px;
    padding-right: 2px;
    color: #57d7c8;
    font-size: 13px;
    transition: transform .2s ease;
}

.marker-waterly-guide-lesson-arrow small {
    color: #5b857f;
    font-size: 9px;
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
}

.marker-waterly-guide-lesson:hover .marker-waterly-guide-lesson-arrow { transform: translateX(3px); }
.marker-waterly-guide-lesson.is-completed { border-color: rgba(74, 222, 155, .35); }
.marker-waterly-guide-lesson.is-completed .marker-waterly-guide-lesson-arrow {
    min-width: 4.75em;
    margin-right: 8px;
    padding-right: 4px;
    color: #4ade9b;
}

.marker-waterly-guide-lesson.is-completed:hover .marker-waterly-guide-lesson-arrow { transform: none; }

.marker-waterly-guide-upcoming {
    display: grid;
    margin-top: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.marker-waterly-guide-upcoming article {
    display: grid;
    min-height: 82px;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border: 1px dashed rgba(126, 159, 171, .13);
    border-radius: 15px;
    opacity: .62;
    background: rgba(255, 255, 255, .012);
}

.marker-waterly-guide-upcoming article > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 11px; color: #66838f; background: rgba(255, 255, 255, .035); font-size: 13px; }
.marker-waterly-guide-upcoming article div { display: flex; min-width: 0; flex-direction: column; }
.marker-waterly-guide-upcoming article small { color: #597681; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.marker-waterly-guide-upcoming article strong { margin-top: 2px; color: #9ab0b8; font-size: 12px; }
.marker-waterly-guide-upcoming article p { margin: 3px 0 0; color: #617b85; font-size: 10px; line-height: 1.35; }

.marker-waterly-guide-lesson-view {
    position: relative;
}

.marker-waterly-guide-back {
    position: absolute;
    z-index: 6;
    top: 12px;
    left: 18px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid rgba(255, 255, 255, .085);
    border-radius: 9px;
    color: #829faa;
    background: rgba(255, 255, 255, .025);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.marker-waterly-guide-back:hover,
.marker-waterly-guide-back:focus-visible { outline: none; border-color: rgba(80, 218, 201, .3); color: #dffcff; }

.marker-waterly-guide-lesson-label {
    position: absolute;
    z-index: 5;
    top: 19px;
    right: 24px;
    color: #557580;
    font-size: 11px;
    font-weight: 700;
}

.marker-waterly-guide-lesson-label i { margin-right: 5px; color: var(--wqi-color); }

@keyframes waterly-guide-compass-spin {
    to { transform: rotate(360deg); }
}

/* Samouczek home — a digital open book with a cover page and a table of contents. */
.marker-wqi-guide:not(.is-lesson) .marker-wqi-guide-dialog {
    width: min(1500px, 100%);
}

.marker-waterly-guide-book {
    position: relative;
    isolation: isolate;
    display: grid;
    width: auto;
    min-height: 0;
    flex: 1 1 auto;
    margin: 24px;
    grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
    filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .32));
}

.marker-waterly-guide-book::before {
    position: absolute;
    z-index: 5;
    top: 7px;
    bottom: 7px;
    left: 44%;
    width: 18px;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .28) 42%, rgba(255, 255, 255, .035) 52%, transparent);
    content: "";
    pointer-events: none;
    transform: translateX(-50%);
}

.marker-waterly-guide-page {
    position: relative;
    isolation: isolate;
    min-height: 430px;
    overflow: hidden;
    border: 1px solid rgba(116, 170, 171, .15);
}

.marker-waterly-guide-page::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px),
        radial-gradient(circle at 20% 10%, rgba(255, 255, 255, .04), transparent 38%);
    background-size: 100% 24px, 100% 100%;
    content: "";
    opacity: .75;
    pointer-events: none;
}

.marker-waterly-guide-page-cover {
    display: flex;
    flex-direction: column;
    padding: 42px 42px 38px;
    border-radius: 14px 3px 3px 14px;
    background:
        radial-gradient(circle at 18% 30%, color-mix(in srgb, var(--wqi-color) 21%, transparent), transparent 43%),
        linear-gradient(155deg, #103a3c, #08252d 56%, #061c25);
    box-shadow: inset -18px 0 28px -25px rgba(0, 0, 0, .9), inset 1px 0 rgba(255, 255, 255, .06);
}

.marker-waterly-guide-book-edition {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #75b8b2;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.marker-waterly-guide-book-edition i {
    width: 16px;
    height: 1px;
    background: #50cfc0;
}

.marker-waterly-guide-book-emblem {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 24px 0 20px;
    gap: 16px;
}

/* A soft aurora behind the company mark, tinted by the current quality colour. */
.marker-waterly-guide-book-emblem::before {
    position: absolute;
    z-index: -1;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--wqi-color) 18%, transparent), rgba(60, 214, 199, .08) 44%, transparent 68%);
    content: "";
    pointer-events: none;
}

.marker-waterly-guide-book-emblem img {
    width: auto;
    max-width: 60%;
    height: clamp(96px, 14vw, 148px);
    filter: brightness(1.13) saturate(1.12) drop-shadow(0 16px 34px rgba(0, 0, 0, .55)) drop-shadow(0 0 22px rgba(45, 191, 224, .28));
}

/* Colour mark already includes the Waterly wordmark. */
.marker-waterly-guide-book-emblem b {
    display: none;
}

.marker-waterly-guide-book-title {
    margin-top: auto;
}

.marker-waterly-guide-book-title small {
    color: #54cfc1;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.marker-waterly-guide-book-title h2 {
    margin: 7px 0 0;
    color: #effffb;
    font-family: var(--guide-display);
    font-size: clamp(26px, 2.2vw, 34px);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.08;
}

.marker-waterly-guide-book-title p {
    margin: 11px 0 0;
    color: #91b4b5;
    font-size: 11px;
    line-height: 1.55;
}

.marker-waterly-guide-page-cover > footer,
.marker-waterly-guide-page-contents > footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
    padding-top: 12px;
    border-top: 1px solid rgba(115, 214, 204, .1);
    color: #5d9291;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.marker-waterly-guide-page-cover > footer b {
    font-family: var(--guide-display);
    font-size: 15px;
    font-weight: 700;
}

.marker-waterly-guide-page-contents {
    display: flex;
    flex-direction: column;
    padding: 28px 28px 22px 32px;
    border-radius: 3px 14px 14px 3px;
    background:
        radial-gradient(circle at 100% 0, rgba(53, 181, 176, .08), transparent 35%),
        linear-gradient(145deg, #102d35, #0a222c 70%);
    box-shadow: inset 18px 0 28px -25px rgba(0, 0, 0, .95), inset -1px 0 rgba(255, 255, 255, .035);
}

.marker-waterly-guide-page-contents > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 17px;
}

.marker-waterly-guide-page-contents > header > span {
    display: flex;
    flex-direction: column;
}

.marker-waterly-guide-page-contents > header small {
    color: #5c8e94;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.marker-waterly-guide-page-contents > header strong {
    margin-top: 3px;
    color: #e8f7f7;
    font-family: var(--guide-display);
    font-size: clamp(22px, 1.8vw, 28px);
    font-weight: 800;
    letter-spacing: -.03em;
}

.marker-waterly-guide-page-contents > header > b {
    color: rgba(108, 183, 181, .28);
    font-family: var(--guide-display);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: .04em;
}

.marker-waterly-guide-book .marker-waterly-guide-lesson {
    min-height: 116px;
    grid-template-columns: 58px minmax(0, 1fr) minmax(36px, max-content);
    gap: 13px;
    padding: 12px 14px 12px 9px;
    border-color: color-mix(in srgb, var(--wqi-color) 32%, rgba(255, 255, 255, .07));
    border-radius: 10px;
    background: linear-gradient(105deg, color-mix(in srgb, var(--wqi-color) 10%, rgba(255, 255, 255, .018)), rgba(255, 255, 255, .012));
    box-shadow: inset 3px 0 color-mix(in srgb, var(--wqi-color) 65%, transparent);
}

.marker-waterly-guide-chapter-number {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #668b93;
}

.marker-waterly-guide-chapter-number small {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.marker-waterly-guide-chapter-number b {
    margin-top: 2px;
    color: color-mix(in srgb, var(--wqi-color) 75%, #d9ffff);
    font-family: var(--guide-display);
    font-size: 25px;
    font-weight: 800;
    letter-spacing: -.045em;
    line-height: 1;
}

.marker-waterly-guide-book .marker-waterly-guide-lesson-copy > strong {
    font-family: var(--guide-display);
    font-size: clamp(16px, 1.25vw, 20px);
    font-weight: 700;
    letter-spacing: -.02em;
}

.marker-waterly-guide-book .marker-waterly-guide-upcoming {
    display: grid;
    margin-top: 9px;
    grid-template-columns: 1fr;
    gap: 9px;
}

.marker-waterly-guide-book .marker-waterly-guide-upcoming article {
    min-height: 0;
    /* Same number column as active lesson cards, so "Rozdział" does not collide with copy. */
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: center;
    gap: 13px;
    padding: 12px 14px 12px 9px;
    border-style: solid;
    border-radius: 10px;
    opacity: .55;
    box-shadow: inset 3px 0 rgba(126, 159, 171, .28);
}

.marker-waterly-guide-book .marker-waterly-guide-upcoming article .marker-waterly-guide-chapter-number {
    display: flex;
    width: auto;
    min-width: 0;
    height: auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: transparent;
}

.marker-waterly-guide-book .marker-waterly-guide-upcoming article .marker-waterly-guide-chapter-number small {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .07em;
}

.marker-waterly-guide-book .marker-waterly-guide-upcoming article .marker-waterly-guide-chapter-number b {
    color: #587780;
    font-size: 25px;
}

.marker-waterly-guide-book .marker-waterly-guide-upcoming article div {
    min-width: 0;
}

.marker-waterly-guide-book .marker-waterly-guide-upcoming article > div > small {
    font-size: 11px;
    letter-spacing: .08em;
}

.marker-waterly-guide-book .marker-waterly-guide-upcoming article strong {
    margin-top: 3px;
    font-family: var(--guide-display);
    font-size: clamp(15px, 1.2vw, 18px);
    font-weight: 700;
}

.marker-waterly-guide-book .marker-waterly-guide-upcoming article p {
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.4;
}

.marker-waterly-guide-page-contents > footer {
    margin-top: auto;
    color: #476a73;
}

.marker-waterly-guide-page-contents > footer i {
    color: #4b8e92;
}

/* The contents page keeps its header and footer pinned while the chapter shelf
   scrolls, so new chapters can be added without breaking the spread.
   On phones the nested overflow is disabled — an empty scrollport +
   overscroll-behavior:contain traps the gesture on lesson cards. */
.marker-waterly-guide-shelf {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(89, 217, 203, .26) transparent;
}

@media (max-width: 767px) {
    /* Phones use a single scrollport on the home sheet. Nested shelf overflow
       traps vertical drags that start on lesson cards and blocks the tutorial. */
    .marker-waterly-guide-home {
        display: block;
    }

    .marker-waterly-guide-page {
        overflow: visible;
    }

    .marker-waterly-guide-shelf {
        flex: 0 0 auto;
        overflow: visible;
        overscroll-behavior: auto;
    }

    .marker-waterly-guide-chapter-view[aria-hidden="false"] {
        overflow: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .marker-waterly-guide-chapter-view .marker-waterly-guide-shelf {
        flex: 0 0 auto;
        overflow: visible;
        overscroll-behavior: auto;
    }

    .marker-waterly-guide-book {
        display: flex;
        flex-direction: column;
        width: auto;
        margin: 10px 10px 14px;
        gap: 0;
        filter: drop-shadow(0 16px 22px rgba(0, 0, 0, .28));
    }

    .marker-waterly-guide-book::before { display: none; }

    .marker-waterly-guide-page { min-height: 0; }

    /* Cover — large colour logo centred above the title. */
    .marker-waterly-guide-page-cover {
        min-height: 0;
        align-items: center;
        padding: 32px 28px 30px;
        border-radius: 14px 14px 0 0;
        text-align: center;
        box-shadow: inset 0 -14px 24px -22px rgba(0, 0, 0, .85);
    }

    .marker-waterly-guide-book-edition {
        justify-content: center;
        font-size: 10px;
        letter-spacing: .1em;
    }

    .marker-waterly-guide-book-emblem {
        flex: 0 0 auto;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 26px 0 22px;
        gap: 0;
    }

    .marker-waterly-guide-book-emblem img {
        width: auto;
        max-width: 58%;
        height: clamp(96px, 28vw, 132px);
        filter: brightness(1.13) saturate(1.12) drop-shadow(0 18px 36px rgba(0, 0, 0, .55)) drop-shadow(0 0 22px rgba(45, 191, 224, .28));
    }

    /* Full colour mark already carries the Waterly wordmark. */
    .marker-waterly-guide-book-emblem b { display: none; }

    .marker-waterly-guide-book-emblem::before {
        width: 220px;
        height: 220px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .marker-waterly-guide-book-title {
        width: 100%;
        margin-top: 0;
        text-align: center;
    }

    .marker-waterly-guide-book-title h2 {
        font-size: 22px;
        letter-spacing: -.03em;
    }

    .marker-waterly-guide-book-title p {
        margin-top: 8px;
        margin-right: auto;
        margin-left: auto;
        max-width: 28em;
        font-size: 12px;
        line-height: 1.45;
    }

    .marker-waterly-guide-page-cover > footer { display: none; }

    .marker-waterly-guide-page-contents {
        min-height: 0;
        padding: 16px 14px calc(18px + var(--safe-bottom, 0px));
        border-radius: 0 0 14px 14px;
        box-shadow: inset 0 14px 24px -22px rgba(0, 0, 0, .9);
    }

    .marker-waterly-guide-page-contents > header {
        align-items: center;
        margin-bottom: 12px;
    }

    .marker-waterly-guide-page-contents > header strong { font-size: 20px; }
    .marker-waterly-guide-page-contents > header > b { display: none; }
    .marker-waterly-guide-page-contents > footer { display: none; }

    .marker-waterly-guide-lessons { gap: 8px; }

    .marker-waterly-guide-book .marker-waterly-guide-lesson {
        min-height: 0;
        grid-template-columns: 40px minmax(0, 1fr) minmax(28px, max-content);
        gap: 10px;
        padding: 11px 14px 11px 8px;
        border-radius: 12px;
    }

    .marker-waterly-guide-chapter-number small { display: none; }
    .marker-waterly-guide-chapter-number b { font-size: 20px; }

    .marker-waterly-guide-book .marker-waterly-guide-lesson-copy > small {
        font-size: 10px;
        letter-spacing: .06em;
    }

    .marker-waterly-guide-book .marker-waterly-guide-lesson-copy > strong { font-size: 15px; }

    .marker-waterly-guide-book .marker-waterly-guide-lesson-copy > em {
        display: -webkit-box;
        margin-top: 3px;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        font-size: 11px;
        line-height: 1.35;
    }

    .marker-waterly-guide-book .marker-waterly-guide-lesson-copy > span { display: none; }

    .marker-waterly-guide-book .marker-waterly-guide-upcoming {
        margin-top: 8px;
        gap: 6px;
    }

    .marker-waterly-guide-book .marker-waterly-guide-upcoming article {
        min-height: 0;
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 10px;
        padding: 11px 14px 11px 8px;
    }

    .marker-waterly-guide-book .marker-waterly-guide-upcoming article .marker-waterly-guide-chapter-number b {
        font-size: 20px;
    }
}

@media (max-width: 640px) {
    .marker-waterly-guide-book {
        margin: 8px 8px 12px;
    }

    .marker-waterly-guide-page-cover {
        padding: 28px 24px 26px;
    }

    .marker-waterly-guide-book-emblem { margin: 22px 0 18px; }
    .marker-waterly-guide-book-emblem img {
        max-width: 64%;
        height: clamp(88px, 30vw, 118px);
    }
    .marker-waterly-guide-book-title h2 { font-size: 20px; }
    .marker-waterly-guide-page-contents { padding: 14px 12px calc(16px + var(--safe-bottom, 0px)); }

    .marker-waterly-guide-book .marker-waterly-guide-lesson {
        grid-template-columns: 36px minmax(0, 1fr) minmax(26px, max-content);
        gap: 8px;
        padding: 10px 14px 10px 7px;
    }

    .marker-waterly-guide-chapter-number b { font-size: 18px; }
    .marker-waterly-guide-book .marker-waterly-guide-lesson-copy > strong { font-size: 14px; }
}

.marker-wqi-guide-dialog > header {
    display: flex;
    min-height: 64px;
    flex: 0 0 64px;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px 10px 22px;
    border-bottom: 1px solid rgba(255, 255, 255, .065);
    background: rgba(5, 19, 27, .34);
}

.marker-wqi-guide-dialog > header > .marker-waterly-guide-brand {
    display: flex;
    min-width: 0;
    flex-direction: row;
    align-items: center;
    gap: 11px;
}

.marker-wqi-guide-dialog > header small {
    color: var(--guide-accent);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.marker-wqi-guide-dialog > header strong {
    overflow: hidden;
    color: #f2fdff;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.02em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.marker-wqi-guide-close {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    margin-left: 14px;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 12px;
    color: #829fac;
    background: rgba(255, 255, 255, .035);
    font-size: 13px;
    cursor: pointer;
    transition: .18s ease;
}

.marker-wqi-guide-close:hover,
.marker-wqi-guide-close:focus-visible {
    outline: none;
    border-color: rgba(107, 226, 212, .36);
    color: #eaffff;
    background: rgba(62, 210, 196, .1);
    transform: rotate(4deg);
}

.marker-wqi-guide-panels {
    position: relative;
    min-height: 336px;
}

.marker-wqi-guide-panel {
    position: absolute;
    inset: 0;
    display: grid;
    visibility: hidden;
    grid-template-columns: minmax(210px, .9fr) minmax(230px, 1.1fr);
    align-items: center;
    gap: 30px;
    padding: 48px 38px 24px;
    opacity: 0;
    pointer-events: none;
    transform: translateX(18px);
    transition: visibility 0s linear .24s, opacity .2s ease, transform .28s ease;
}

.marker-wqi-guide-panel.is-active {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    transition-delay: 0s;
}

.marker-wqi-guide-visual {
    display: flex;
    min-height: 210px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 18px;
    border: 1px solid rgba(104, 222, 210, .1);
    border-radius: 23px;
    background: radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--wqi-color) 13%, transparent), transparent 62%), rgba(255, 255, 255, .018);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045);
}

.marker-wqi-guide-copy > small {
    display: block;
    margin-bottom: 7px;
    color: var(--guide-accent);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.marker-wqi-guide-copy h3 {
    margin: 0;
    color: #f3fdff;
    font-size: 25px;
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1.08;
}

.marker-wqi-guide-copy p {
    margin: 14px 0 0;
    color: #94afbb;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.62;
}

.marker-wqi-guide-copy p sup {
    position: relative;
    top: -.34em;
    margin-left: 1px;
    color: #60a5fa;
    font-size: .62em;
    font-weight: 800;
}

.marker-wqi-guide-monogram {
    display: flex;
    align-items: center;
    gap: 10px;
}

.marker-wqi-guide-monogram span {
    display: grid;
    width: 72px;
    height: 82px;
    place-items: center;
    border: 1px solid rgba(99, 223, 209, .22);
    border-radius: 22px;
    color: #eaffff;
    background: linear-gradient(145deg, rgba(76, 217, 200, .16), rgba(255, 255, 255, .025));
    box-shadow: 0 12px 30px -20px var(--guide-accent), inset 0 1px 0 rgba(255, 255, 255, .12);
    font-size: 36px;
    font-weight: 800;
}

.marker-wqi-guide-monogram .is-w { --guide-letter: #60a5fa; }
.marker-wqi-guide-monogram .is-q { --guide-letter: #2dd4bf; }
.marker-wqi-guide-monogram .is-i { --guide-letter: #c084fc; }

.marker-wqi-guide-monogram span[class^="is-"] {
    border-color: color-mix(in srgb, var(--guide-letter) 48%, transparent);
    color: var(--guide-letter);
    background: linear-gradient(145deg, color-mix(in srgb, var(--guide-letter) 20%, transparent), rgba(255, 255, 255, .025));
    box-shadow: 0 14px 34px -22px var(--guide-letter), inset 0 1px 0 rgba(255, 255, 255, .14);
}

.marker-wqi-guide-meaning .is-waterly sup {
    position: relative;
    top: -.38em;
    margin-left: 1px;
    color: inherit;
    font-size: .62em;
    font-weight: 800;
    letter-spacing: 0;
}

.marker-wqi-guide-monogram i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #54717d;
}

.marker-wqi-guide-monogram i:first-of-type { background: linear-gradient(90deg, #60a5fa, #2dd4bf); }
.marker-wqi-guide-monogram i:last-of-type { background: linear-gradient(90deg, #2dd4bf, #c084fc); }

.marker-wqi-guide-meaning {
    display: grid;
    width: 266px;
    margin-top: 18px;
    grid-template-columns: repeat(3, 72px);
    gap: 25px;
    color: #a6c3cc;
    font-size: 12px;
    white-space: nowrap;
    font-weight: 700;
    text-align: center;
}

.marker-wqi-guide-meaning .is-w { color: #8fc5ff; }
.marker-wqi-guide-meaning .is-q { color: #67e8d1; }
.marker-wqi-guide-meaning .is-i { color: #d7a8ff; }

.marker-wqi-guide-scale {
    position: relative;
    width: 100%;
    height: 18px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    background: linear-gradient(90deg, #16a34a 0 20%, #84cc16 20% 40%, #eab308 40% 60%, #f97316 60% 80%, #e11d48 80% 100%);
    box-shadow:
        0 14px 30px -16px rgba(0, 0, 0, .8),
        0 0 40px -14px rgba(120, 220, 160, .5),
        inset 0 1px 0 rgba(255, 255, 255, .34),
        inset 0 -3px 6px rgba(0, 0, 0, .28);
}

/* A glass highlight along the top half, so the ramp reads as a physical dial. */
.marker-wqi-guide-scale::before {
    position: absolute;
    top: 1px;
    right: 5px;
    left: 5px;
    height: 42%;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .3), transparent);
    content: "";
    pointer-events: none;
}

.marker-wqi-guide-scale > div {
    position: absolute;
    right: -4px;
    bottom: calc(100% + 14px);
    left: -4px;
    display: flex;
    justify-content: space-between;
    color: #8fabb7;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
}

.marker-wqi-guide-scale > div span {
    position: relative;
}

.marker-wqi-guide-scale > div span::after {
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    width: 1px;
    height: 5px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .28), transparent);
    content: "";
}

.marker-wqi-guide-scale > i {
    position: absolute;
    top: 50%;
    /* The larger tutorial marker needs a correspondingly larger safe inset. */
    left: clamp(12px, var(--guide-level), calc(100% - 12px));
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--wqi-color);
    box-shadow: 0 0 0 6px rgba(255, 255, 255, .1), 0 6px 14px rgba(0, 0, 0, .45), 0 0 22px var(--wqi-color);
    transform: translate(-50%, -50%);
}

.marker-wqi-guide-scale > i b {
    position: absolute;
    bottom: calc(100% + 11px);
    padding: 4px 9px;
    border-radius: 8px;
    color: #06171e;
    background: #eafcff;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .38);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .09em;
    white-space: nowrap;
}

/* The little pointer under the badge keeps it tied to the marker while it travels. */
.marker-wqi-guide-scale > i b::before {
    position: absolute;
    top: 100%;
    left: 50%;
    width: 7px;
    height: 7px;
    background: #eafcff;
    content: "";
    transform: translate(-50%, -55%) rotate(45deg);
}

.marker-wqi-guide-scale > i b::after { content: "WQI"; }

.marker-wqi-guide-bands {
    display: grid;
    width: 100%;
    margin-top: 22px;
    grid-template-columns: repeat(5, 1fr);
    gap: 3px;
    color: #8ba7b3;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

.marker-wqi-guide-bands span {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.marker-wqi-guide-bands span::before {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 10px currentColor;
    content: "";
}

.marker-wqi-guide-bands span:nth-child(1) { color: #34d17d; }
.marker-wqi-guide-bands span:nth-child(2) { color: #9bdc3a; }
.marker-wqi-guide-bands span:nth-child(3) { color: #f0c22a; }
.marker-wqi-guide-bands span:nth-child(4) { color: #fb8b3c; }
.marker-wqi-guide-bands span:nth-child(5) { color: #f4485f; }

.marker-wqi-guide-extremes {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 24px 1fr;
    align-items: center;
    gap: 7px;
}

.marker-wqi-guide-extremes > div {
    display: flex;
    min-width: 0;
    min-height: 142px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid currentColor;
    border-radius: 20px;
    background: color-mix(in srgb, currentColor 8%, rgba(255, 255, 255, .01));
    box-shadow: 0 18px 35px -28px currentColor;
}

.marker-wqi-guide-extremes .is-low { color: #3ee28c; }
.marker-wqi-guide-extremes .is-high { color: #ff526d; }
.marker-wqi-guide-extremes small { font-size: 11px; font-weight: 800; letter-spacing: .15em; }
.marker-wqi-guide-extremes strong { font-size: 45px; font-weight: 800; letter-spacing: -.06em; line-height: 1.05; }
.marker-wqi-guide-extremes span { font-size: 11px; font-weight: 700; }
.marker-wqi-guide-extremes span i { margin-right: 4px; }
.marker-wqi-guide-extremes > em { color: #53717e; font-size: 15px; text-align: center; }

.marker-wqi-guide-current {
    display: flex;
    align-items: center;
    gap: 16px;
}

.marker-wqi-guide-current-ring {
    position: relative;
    display: flex;
    width: 112px;
    height: 112px;
    flex: 0 0 112px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 8px solid color-mix(in srgb, var(--wqi-color) 72%, rgba(255, 255, 255, .08));
    border-radius: 50%;
    background: rgba(5, 21, 28, .84);
    box-shadow: 0 0 32px -10px var(--wqi-color), inset 0 0 22px rgba(0, 0, 0, .45);
}

.marker-wqi-guide-current-ring small { color: #84a1ad; font-size: 11px; font-weight: 800; letter-spacing: .15em; }
.marker-wqi-guide-current-ring strong { color: var(--wqi-color); font-size: 35px; font-weight: 800; letter-spacing: -.05em; line-height: 1; }
.marker-wqi-guide-current > div { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.marker-wqi-guide-current > div > small { color: #65818d; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.marker-wqi-guide-current > div > strong { color: #ecfdff; font-size: 16px; line-height: 1.15; }
.marker-wqi-guide-current > div > span { color: #7896a2; font-size: 11px; font-weight: 700; }
.marker-wqi-guide-current > div > span i { margin-right: 5px; }
.marker-wqi-guide-current > div > span.is-better { color: #34d399; }
.marker-wqi-guide-current > div > span.is-worse { color: #fb7185; }

.marker-wqi-guide-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 38px 18px;
    padding: 9px 12px;
    border: 1px solid rgba(99, 206, 212, .1);
    border-radius: 11px;
    color: #72909d;
    background: rgba(47, 173, 184, .04);
    font-size: 11px;
    line-height: 1.45;
}

.marker-wqi-guide-note i { margin-top: 1px; color: #4abeb7; }

.marker-wqi-guide-dialog > footer {
    display: none;
    min-height: 72px;
    align-items: center;
    justify-content: space-between;
    padding: 13px 22px 15px 24px;
    border-top: 1px solid rgba(255, 255, 255, .065);
    background: rgba(0, 0, 0, .08);
}

.marker-wqi-guide.is-lesson .marker-wqi-guide-dialog > footer {
    display: flex;
}

.marker-wqi-guide-progress { display: flex; align-items: center; gap: 14px; }
.marker-wqi-guide-counter { color: #627f8b; font-size: 11px; font-weight: 700; }
.marker-wqi-guide-counter b { color: #dffcff; font-size: 14px; }
.marker-wqi-guide-dots { display: flex; gap: 3px; }
.marker-wqi-guide-dot { width: 17px; height: 20px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.marker-wqi-guide-dot span { display: block; width: 5px; height: 5px; margin: auto; border-radius: 99px; background: #3d5b67; transition: width .2s ease, background .2s ease, box-shadow .2s ease; }
.marker-wqi-guide-dot.is-active span { width: 14px; background: var(--guide-accent); box-shadow: 0 0 10px rgba(57, 215, 196, .55); }
.marker-wqi-guide-dot:focus-visible { outline: 1px solid var(--guide-accent); border-radius: 5px; }
.marker-wqi-guide-nav { display: flex; gap: 7px; }

.marker-wqi-guide-nav > button {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 15px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 12px;
    color: #96b0ba;
    background: rgba(255, 255, 255, .035);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: .18s ease;
}

.marker-wqi-guide-nav > button:hover:not(:disabled),
.marker-wqi-guide-nav > button:focus-visible:not(:disabled) { outline: none; border-color: rgba(78, 218, 201, .35); color: #edffff; transform: translateY(-1px); }
.marker-wqi-guide-nav > button:disabled { opacity: .25; cursor: default; }
.marker-wqi-guide-nav .marker-wqi-guide-next { min-width: 92px; border-color: rgba(70, 223, 203, .38); color: #062129; background: linear-gradient(135deg, #64e0d0, #39beb6); box-shadow: 0 10px 24px -14px #46d7c5; }
.marker-wqi-guide-nav .marker-wqi-guide-next:hover,
.marker-wqi-guide-nav .marker-wqi-guide-next:focus-visible { color: #03191f; background: linear-gradient(135deg, #79eadc, #49cec4); box-shadow: 0 12px 28px -12px #46d7c5; }

@media (max-width: 767px) {
    .marker-wqi-guide {
        top: 0;
        right: 0;
        bottom: calc(var(--safe-bottom, 0px) + var(--waterly-footer-offset, 58px));
        left: 0;
        padding: 0;
        align-items: flex-end;
    }

    .marker-wqi-guide-dialog {
        width: 100%;
        height: 100%;
        max-height: none;
        border-radius: 0;
    }

    .marker-wqi-guide-sheet-toolbar {
        min-height: calc(34px + var(--safe-top, 0px));
        flex-basis: calc(34px + var(--safe-top, 0px));
        padding-top: var(--safe-top, 0px);
    }

    .marker-wqi-guide-sheet-close {
        display: flex;
        width: 100%;
        min-width: 0;
        height: 34px;
        justify-content: center;
        padding: 0;
    }

    .marker-wqi-guide-sheet-close > span:nth-child(2),
    .marker-wqi-guide-sheet-close > i { display: none; }

    .marker-wqi-guide-sheet-handle { width: 52px; }

    .marker-wqi-guide-dialog > header {
        min-height: 52px;
        flex-basis: 52px;
        padding: 8px 12px 8px 14px;
    }

    .marker-waterly-guide-brand > i {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
        border-radius: 10px;
        font-size: 13px;
    }

    .marker-wqi-guide-dialog > header strong { font-size: 14px; }
    .marker-wqi-guide-dialog > header small { font-size: 10px; letter-spacing: .12em; }

    .marker-waterly-guide-intro {
        min-height: 0;
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 14px;
        padding: 16px 16px 14px;
    }

    .marker-waterly-guide-compass { width: 68px; height: 68px; font-size: 24px; }
    .marker-waterly-guide-intro h2 { font-size: 20px; }
    .marker-waterly-guide-intro p { font-size: 12px; }
    .marker-waterly-guide-library { padding: 14px 14px 20px; }

    .marker-waterly-guide-lesson {
        min-height: 0;
        grid-template-columns: 52px minmax(0, 1fr) minmax(28px, max-content);
        gap: 10px;
        padding: 11px 14px 11px 11px;
        border-radius: 14px;
    }

    .marker-waterly-guide-lesson-icon { width: 50px; height: 58px; border-radius: 14px; }
    .marker-waterly-guide-lesson-copy > strong { font-size: 14px; }
    .marker-waterly-guide-upcoming { grid-template-columns: 1fr; }
    .marker-waterly-guide-upcoming article { min-height: 0; }
    .marker-waterly-guide-home { max-height: none; }

    .marker-waterly-guide-back {
        top: 10px;
        left: 10px;
        min-height: 34px;
        padding: 0 11px;
        font-size: 11px;
    }

    .marker-waterly-guide-lesson-label {
        top: 12px;
        right: 12px;
        font-size: 10px;
    }

    .marker-waterly-guide-chapter-view[aria-hidden="false"] {
        padding: 48px 14px calc(16px + var(--safe-bottom, 0px));
    }

    .marker-waterly-guide-chapter-header {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 12px;
        margin-bottom: 12px;
    }

    .marker-waterly-guide-chapter-mark {
        width: 44px;
        height: 44px;
        border-radius: 14px;
        font-size: 17px;
    }

    .marker-waterly-guide-chapter-header h3 { font-size: 18px; }
    .marker-waterly-guide-chapter-header p { font-size: 11px; }

    .marker-wqi-guide-panels { min-height: 0; }
    .marker-wqi-guide-panel {
        grid-template-columns: 1fr;
        align-content: start;
        gap: 14px;
        padding: 48px 16px 12px;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .marker-wqi-guide-visual {
        min-height: 160px;
        padding: 14px;
        border-radius: 16px;
    }

    .marker-wqi-guide-copy h3 { font-size: 20px; }
    .marker-wqi-guide-copy p { margin-top: 8px; font-size: 13px; line-height: 1.5; }
    .marker-wqi-guide-note { margin: 0 14px 10px; }
    .marker-wqi-guide-dialog > footer {
        min-height: 60px;
        padding: 10px 12px calc(10px + var(--safe-bottom, 0px)) 14px;
    }

    .marker-wqi-guide-nav > button { padding: 0 12px; }
    .marker-wqi-guide-prev span { display: none; }
    .marker-wqi-guide-nav .marker-wqi-guide-next { min-width: 84px; }
}

/* Keep the mobile library shortcut within thumb reach beside the step controls. */
.marker-wqi-guide-nav > .marker-wqi-guide-home-button { display: none; }

@media (max-width: 767px) {
    .marker-waterly-guide-lesson-view > .marker-waterly-guide-back { display: none; }

    .marker-wqi-guide-dialog > footer {
        flex: 0 0 auto;
        flex-wrap: wrap;
        gap: 8px;
    }

    .marker-wqi-guide-progress {
        display: grid;
        width: 100%;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        gap: 0;
    }

    .marker-wqi-guide-progress .marker-wqi-guide-dots {
        grid-column: 2;
        justify-self: center;
    }

    .marker-wqi-guide-nav { width: 100%; }
    .marker-wqi-guide-nav > button { min-height: 44px; }
    .marker-wqi-guide-nav > .marker-wqi-guide-home-button {
        display: inline-flex;
        min-width: 0;
        margin-right: auto;
        text-align: left;
        white-space: normal;
    }
}

@media (max-width: 640px) {
    .marker-wqi-guide-visual { min-height: 148px; }
    .marker-wqi-guide-copy h3 { font-size: 18px; }
    .marker-wqi-guide-panel { padding: 46px 14px 10px; }
}

@media (max-width: 380px) {
    .marker-waterly-guide-intro { grid-template-columns: 60px minmax(0, 1fr); gap: 11px; padding-right: 12px; padding-left: 12px; }
    .marker-waterly-guide-compass { width: 56px; height: 56px; font-size: 20px; }
    .marker-waterly-guide-intro h2 { font-size: 17px; }
    .marker-waterly-guide-library { padding-right: 12px; padding-left: 12px; }
    .marker-wqi-guide-panel { padding-right: 12px; padding-left: 12px; }
    .marker-wqi-guide-visual { min-height: 136px; }
    .marker-wqi-guide-monogram { gap: 7px; }
    .marker-wqi-guide-monogram span { width: 52px; height: 60px; border-radius: 16px; font-size: 28px; }
    .marker-wqi-guide-monogram i { width: 4px; height: 4px; }
    .marker-wqi-guide-meaning { width: 200px; grid-template-columns: repeat(3, 52px); gap: 22px; font-size: 11px; }
    .marker-wqi-guide-copy h3 { font-size: 17px; }
    .marker-wqi-guide-note { margin-right: 12px; margin-left: 12px; }
    .marker-wqi-guide-dots { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .marker-wqi-guide,
    .marker-wqi-guide-dialog,
    .marker-wqi-guide-panel,
    .marker-mode-guide-button { transition-duration: .001ms !important; }

    .marker-waterly-guide-compass::after { animation: none !important; }
}

/* Samouczek motion — the guide is a presentation, so every view arrives instead of
   appearing. All of it collapses under prefers-reduced-motion at the bottom. */
.marker-wqi-guide-dialog {
    transition: transform .42s cubic-bezier(.16, .84, .24, 1), opacity .24s ease;
}

.marker-wqi-guide:not(.is-open) .marker-wqi-guide-dialog {
    opacity: .4;
}

.marker-wqi-guide.is-open .marker-waterly-guide-book-edition,
.marker-wqi-guide.is-open .marker-waterly-guide-book-emblem,
.marker-wqi-guide.is-open .marker-waterly-guide-book-title,
.marker-wqi-guide.is-open .marker-waterly-guide-page-contents > header,
.marker-wqi-guide.is-open .marker-waterly-guide-lessons,
.marker-wqi-guide.is-open .marker-waterly-guide-upcoming {
    animation: waterly-guide-rise .5s cubic-bezier(.2, .8, .25, 1) both;
}

.marker-wqi-guide.is-open .marker-waterly-guide-book-emblem { animation-delay: .06s; }
.marker-wqi-guide.is-open .marker-waterly-guide-book-title { animation-delay: .12s; }
.marker-wqi-guide.is-open .marker-waterly-guide-page-contents > header { animation-delay: .1s; }
.marker-wqi-guide.is-open .marker-waterly-guide-lessons { animation-delay: .17s; }
.marker-wqi-guide.is-open .marker-waterly-guide-upcoming { animation-delay: .24s; }

.marker-waterly-guide-lessons {
    display: grid;
    gap: 9px;
}

.marker-waterly-guide-book-emblem img {
    animation: waterly-guide-float 7s ease-in-out infinite;
}

.marker-waterly-guide-compass b {
    top: 50%;
    left: 50%;
    margin: -3.5px 0 0 -3.5px;
    transform-origin: 3.5px 3.5px;
    animation: waterly-guide-orbit 11s linear infinite;
}

/* A slow sheen crossing the chapter cards, so the contents page feels alive. */
.marker-waterly-guide-lesson {
    position: relative;
    overflow: hidden;
}

.marker-waterly-guide-lesson::after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    width: 45%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .09), transparent);
    content: "";
    pointer-events: none;
    transform: skewX(-16deg);
}

.marker-waterly-guide-lesson:hover::after,
.marker-waterly-guide-lesson:focus-visible::after {
    animation: waterly-guide-sheen .85s ease forwards;
}

.marker-wqi-guide-panel.is-active .marker-wqi-guide-visual {
    animation: waterly-guide-visual-in .52s cubic-bezier(.18, .82, .24, 1) both;
}

.marker-wqi-guide-panel.is-active .marker-wqi-guide-copy > small { animation: waterly-guide-rise .42s ease both .06s; }
.marker-wqi-guide-panel.is-active .marker-wqi-guide-copy h3 { animation: waterly-guide-rise .46s cubic-bezier(.2, .8, .25, 1) both .12s; }
.marker-wqi-guide-panel.is-active .marker-wqi-guide-copy p { animation: waterly-guide-rise .5s ease both .19s; }

.marker-wqi-guide-panel.is-active .marker-wqi-guide-monogram span {
    animation: waterly-guide-pop .5s cubic-bezier(.2, 1.1, .3, 1) both;
}

.marker-wqi-guide-panel.is-active .marker-wqi-guide-monogram span:nth-child(3) { animation-delay: .09s; }
.marker-wqi-guide-panel.is-active .marker-wqi-guide-monogram span:nth-child(5) { animation-delay: .18s; }
.marker-wqi-guide-panel.is-active .marker-wqi-guide-meaning > span { animation: waterly-guide-rise .45s ease both .26s; }

.marker-wqi-guide-scale {
    overflow: visible;
}

.marker-wqi-guide-scale::after {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .5) 50%, transparent 65%);
    background-size: 260% 100%;
    content: "";
    mix-blend-mode: overlay;
    pointer-events: none;
}

.marker-wqi-guide-panel.is-active .marker-wqi-guide-scale::after {
    animation: waterly-guide-shimmer 2.6s ease-in-out .35s infinite;
}

/* The marker drops onto the ramp, wanders across the bands to show what each
   colour means, and finally settles on the reading of this measurement point. */
.marker-wqi-guide-panel.is-active .marker-wqi-guide-scale > i {
    animation:
        waterly-guide-drop .62s cubic-bezier(.2, 1.15, .3, 1) both .14s,
        waterly-guide-wander 16s cubic-bezier(.45, 0, .25, 1) .86s infinite;
}

.marker-wqi-guide-panel.is-active .marker-wqi-guide-scale > i b {
    animation: waterly-guide-badge 16s ease-in-out .86s infinite;
}

@keyframes waterly-guide-wander {
    0%, 100% {
        left: clamp(12px, var(--guide-level), calc(100% - 12px));
        background: var(--wqi-color);
        box-shadow: 0 0 0 6px rgba(255, 255, 255, .1), 0 6px 14px rgba(0, 0, 0, .45), 0 0 22px var(--wqi-color);
    }

    12% {
        left: clamp(12px, 8%, calc(100% - 12px));
        background: #16a34a;
        box-shadow: 0 0 0 6px rgba(255, 255, 255, .1), 0 6px 14px rgba(0, 0, 0, .45), 0 0 22px #16a34a;
    }

    29% {
        left: clamp(12px, 33%, calc(100% - 12px));
        background: #84cc16;
        box-shadow: 0 0 0 6px rgba(255, 255, 255, .1), 0 6px 14px rgba(0, 0, 0, .45), 0 0 22px #84cc16;
    }

    47% {
        left: clamp(12px, 71%, calc(100% - 12px));
        background: #f97316;
        box-shadow: 0 0 0 6px rgba(255, 255, 255, .1), 0 6px 14px rgba(0, 0, 0, .45), 0 0 22px #f97316;
    }

    64% {
        left: clamp(12px, 51%, calc(100% - 12px));
        background: #eab308;
        box-shadow: 0 0 0 6px rgba(255, 255, 255, .1), 0 6px 14px rgba(0, 0, 0, .45), 0 0 22px #eab308;
    }

    82% {
        left: clamp(12px, 93%, calc(100% - 12px));
        background: #e11d48;
        box-shadow: 0 0 0 6px rgba(255, 255, 255, .1), 0 6px 14px rgba(0, 0, 0, .45), 0 0 22px #e11d48;
    }
}

/* The badge pops on arrival at every band, so the eye follows the marker. */
@keyframes waterly-guide-badge {
    0%, 6%, 18%, 35%, 53%, 70%, 88%, 100% { transform: none; }
    12%, 29%, 47%, 64%, 82% { transform: translateY(-2px) scale(1.06); }
}

.marker-wqi-guide-panel.is-active .marker-wqi-guide-extremes > div { animation: waterly-guide-rise .5s cubic-bezier(.2, .8, .25, 1) both; }
.marker-wqi-guide-panel.is-active .marker-wqi-guide-extremes .is-high { animation-delay: .14s; }
.marker-wqi-guide-panel.is-active .marker-wqi-guide-extremes > em { animation: waterly-guide-nudge 1.9s ease-in-out infinite; }

.marker-wqi-guide-current-ring::after {
    position: absolute;
    inset: -10px;
    border: 1px solid color-mix(in srgb, var(--wqi-color) 55%, transparent);
    border-radius: 50%;
    content: "";
}

.marker-wqi-guide-panel.is-active .marker-wqi-guide-current-ring::after {
    animation: waterly-guide-ping 2.8s ease-out infinite;
}

/* Chapter 02 — how the result leaves the application and reaches the shore. */
.marker-beacon-stage {
    position: relative;
    display: flex;
    width: 100%;
    max-width: 320px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.marker-beacon-caption {
    position: absolute;
    bottom: 12px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 99px;
    color: #a9c4cf;
    background: rgba(4, 20, 27, .6);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
}

.marker-beacon-caption i { color: var(--wqi-color); }

.marker-beacon-patterns {
    display: grid;
    width: 100%;
    gap: 7px;
}

.marker-beacon-pattern {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 8px 13px;
    border: 1px solid color-mix(in srgb, var(--pattern-color) 30%, rgba(255, 255, 255, .06));
    border-radius: 14px;
    background: linear-gradient(100deg, color-mix(in srgb, var(--pattern-color) 10%, transparent), rgba(255, 255, 255, .015));
}

.marker-beacon-pattern-ring {
    width: 28px;
    height: 12px;
    border: 3px solid var(--pattern-color);
    border-radius: 50%;
    box-shadow: 0 0 14px var(--pattern-color), inset 0 0 6px color-mix(in srgb, var(--pattern-color) 40%, transparent);
}

.marker-beacon-pattern-range {
    color: #7c99a5;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    white-space: nowrap;
}

.marker-beacon-pattern-copy { display: flex; min-width: 0; flex-direction: column; }
.marker-beacon-pattern-copy strong { display: flex; align-items: center; color: #eafcff; font-size: 12px; font-weight: 700; }
.marker-beacon-pattern-copy small { color: #7c99a5; font-size: 10px; font-weight: 700; letter-spacing: .05em; }

.marker-wqi-guide-panel.is-active .marker-beacon-pattern-ring { animation: waterly-beacon-blink 2.6s ease-in-out infinite; }

.marker-beacon-pattern.is-no-data .marker-beacon-pattern-copy small { color: #cbd5e1; }

/* The alarm is the one signal that stands apart - fast, red, unmistakable. */
.marker-wqi-guide-panel.is-active .marker-beacon-pattern.is-alarm .marker-beacon-pattern-ring { animation-duration: .62s; }

.marker-beacon-pattern.is-alarm {
    margin-top: 3px;
    border-color: rgba(244, 63, 94, .5);
    background: linear-gradient(100deg, rgba(244, 63, 94, .16), rgba(244, 63, 94, .04));
    box-shadow: 0 14px 34px -26px #f43f5e, inset 0 1px 0 rgba(255, 255, 255, .06);
}

.marker-beacon-pattern.is-alarm .marker-beacon-pattern-copy strong { gap: 8px; }
.marker-beacon-pattern.is-alarm .marker-beacon-pattern-copy strong i { color: #fb7185; }
.marker-beacon-pattern.is-alarm .marker-beacon-pattern-copy small { color: #f9a8b6; }

.marker-beacon-pattern-legend {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 2px;
}

.marker-beacon-pattern-legend strong { color: #eafcff; font-size: 13px; font-weight: 700; letter-spacing: -.01em; }
.marker-beacon-pattern-legend small { color: #7c99a5; font-size: 10px; font-weight: 700; }

.marker-beacon-pattern-alarm-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 1px 0 0;
    color: #91acb8;
    font-size: 10px;
    line-height: 1.45;
}

.marker-beacon-pattern-alarm-note i { margin-top: 1px; color: #fb7185; }

.marker-beacon-board {
    display: flex;
    width: 100%;
    justify-content: center;
}



@keyframes waterly-guide-rise {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

@keyframes waterly-guide-visual-in {
    from { opacity: 0; transform: translateY(16px) scale(.96); }
    to { opacity: 1; transform: none; }
}

@keyframes waterly-guide-pop {
    from { opacity: 0; transform: translateY(14px) scale(.82); }
    to { opacity: 1; transform: none; }
}

@keyframes waterly-guide-drop {
    from { opacity: 0; transform: translate(-50%, -190%) scale(.6); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes waterly-guide-shimmer {
    0% { background-position: 130% 0; opacity: 0; }
    35% { opacity: .85; }
    100% { background-position: -130% 0; opacity: 0; }
}

@keyframes waterly-guide-sheen {
    from { left: -60%; }
    to { left: 130%; }
}

@keyframes waterly-guide-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@keyframes waterly-guide-orbit {
    from { transform: rotate(0) translateX(42px); }
    to { transform: rotate(360deg) translateX(42px); }
}

@keyframes waterly-guide-ping {
    0% { opacity: .75; transform: scale(.94); }
    70%, 100% { opacity: 0; transform: scale(1.22); }
}

@keyframes waterly-guide-nudge {
    0%, 100% { transform: translateX(-3px); }
    50% { transform: translateX(3px); }
}

@keyframes waterly-beacon-bob {
    0%, 100% { transform: translateY(0) rotate(-1.5deg); }
    50% { transform: translateY(-7px) rotate(1.5deg); }
}

@keyframes waterly-beacon-blink {
    0%, 44% { opacity: .28; filter: brightness(.6); }
    52%, 68% { opacity: 1; filter: brightness(1.35); }
    76%, 100% { opacity: .28; filter: brightness(.6); }
}

@keyframes waterly-beacon-beam {
    0%, 44% { opacity: 0; }
    56%, 66% { opacity: .55; }
    78%, 100% { opacity: 0; }
}

@keyframes waterly-beacon-halo {
    0%, 44% { opacity: .12; transform: scale(.88); }
    58%, 68% { opacity: .7; transform: scale(1); }
    82%, 100% { opacity: .12; transform: scale(.88); }
}

@keyframes waterly-beacon-wave {
    0%, 100% { transform: translateX(-9px) scaleX(.92); }
    50% { transform: translateX(9px) scaleX(1); }
}

@keyframes waterly-beacon-glow {
    0%, 100% { text-shadow: 0 0 18px color-mix(in srgb, var(--wqi-color) 45%, transparent); }
    50% { text-shadow: 0 0 34px color-mix(in srgb, var(--wqi-color) 85%, transparent); }
}

@keyframes waterly-beacon-ticker {
    from { transform: translateX(100%); }
    to { transform: translateX(-100%); }
}

@media (max-width: 640px) {
    .marker-beacon-pattern { grid-template-columns: 18px minmax(0, 1fr) 58px; gap: 9px; }
}

@media (prefers-reduced-motion: reduce) {
    .marker-wqi-guide *,
    .marker-wqi-guide *::before,
    .marker-wqi-guide *::after { animation: none !important; }
}

/* The lesson view fills the sheet, so its footer sits on the bottom edge like the
   contents page does, whichever chapter is open. */
.marker-waterly-guide-lesson-view[aria-hidden="false"] {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
}

.marker-waterly-guide-lesson-view[aria-hidden="false"] .marker-wqi-guide-panels {
    min-height: 0;
    flex: 1 1 auto;
}

.marker-wqi-guide-visual {
    min-height: 288px;
    justify-content: center;
}

@media (max-width: 767px) {
    .marker-wqi-guide-visual {
        min-height: 156px;
    }

    .marker-about-network {
        height: 168px;
        max-width: none;
    }
}

@media (max-width: 640px) {
    .marker-wqi-guide-visual {
        min-height: 140px;
    }
}

.marker-beacon-stage .marker-beacon-caption { position: static; margin-top: 12px; }

/* The buoy drawing follows the manufacturing render: a black float with a light
   signal and a white solar tower above it. */
.marker-beacon-buoy {
    display: block;
    color: var(--wqi-color);
    width: 100%;
    max-width: 300px;
    height: auto;
    overflow: visible;
}

.marker-wqi-guide-panel.is-active .marker-beacon-svg-body {
    transform-origin: 130px 130px;
    animation: waterly-beacon-bob 5s ease-in-out infinite;
}

.marker-beacon-svg-ring {
    filter: drop-shadow(0 0 7px var(--wqi-color)) drop-shadow(0 0 18px var(--wqi-color));
}

.marker-wqi-guide-panel.is-active .marker-beacon-svg-ring,
.marker-wqi-guide-panel.is-active .marker-beacon-svg-ring-core,
.marker-wqi-guide-panel.is-active .marker-beacon-svg-glow,
.marker-wqi-guide-panel.is-active .marker-beacon-svg-reflection {
    animation: waterly-beacon-blink 2.6s ease-in-out infinite;
}

.marker-beacon-readout {
    position: relative;
    display: inline-flex;
    min-width: 116px;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-top: -6px;
    padding: 6px 15px 7px;
    border: 1px solid color-mix(in srgb, currentColor 42%, rgba(255, 255, 255, .08));
    border-radius: 99px;
    background: rgba(4, 20, 27, .74);
    box-shadow: 0 12px 28px -17px currentColor;
}

.marker-beacon-readout small {
    color: #9ab2bc;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .14em;
    line-height: 1;
}

/* The samples are stacked and cross-faded, so the number changes with the colour. */
.marker-beacon-readout b {
    position: relative;
    display: block;
    width: 44px;
    height: 30px;
    flex: 0 0 44px;
}

.marker-beacon-readout strong {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: currentColor;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1;
    opacity: 0;
}

.marker-wqi-guide-panel.is-active .marker-beacon-stage.is-cycling,
.marker-wqi-guide-panel.is-active .marker-beacon-stage.is-cycling .marker-beacon-buoy {
    animation: waterly-beacon-cycle 17.5s steps(1, end) infinite;
}

.marker-wqi-guide-panel.is-active .marker-beacon-readout strong {
    animation: waterly-beacon-sample 17.5s ease-in-out infinite;
    animation-delay: calc(var(--sample) * 3.5s);
}

.marker-beacon-board-art {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 22px 38px rgba(0, 0, 0, .55));
}

.marker-beacon-board-row.is-current rect:first-of-type { fill: #d3e6f7; }

.marker-wqi-guide-panel.is-active .marker-beacon-board-pointer {
    animation: waterly-beacon-pointer 2.8s ease-in-out infinite;
}

.marker-beacon-variants {
    display: grid;
    width: 100%;
    gap: 9px;
}

.marker-beacon-variant {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: center;
    gap: 13px;
    padding: 10px 13px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 14px;
    background: rgba(255, 255, 255, .018);
}

.marker-beacon-variant-buoy {
    position: relative;
    display: block;
    width: 56px;
    height: 40px;
}

/* The float, seen from the side - a dark disc with the signalling ring on it. */
.marker-beacon-variant-buoy i {
    position: absolute;
    bottom: 2px;
    left: 4px;
    width: 48px;
    height: 21px;
    border-radius: 4px 4px 11px 11px;
    background: linear-gradient(180deg, #2c363e, #0b1116);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}

.marker-beacon-variant-buoy i::after {
    position: absolute;
    right: 3px;
    bottom: 6px;
    left: 3px;
    height: 4px;
    border-radius: 99px;
    background: #38444d;
    content: "";
}

/* The tower, kept to a simple silhouette at this size. */
.marker-beacon-variant-buoy b {
    position: absolute;
    top: 0;
    left: 50%;
    width: 20px;
    height: 20px;
    background: linear-gradient(100deg, #dbe7ef, #9db2c1);
    clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%);
    transform: translateX(-50%);
}

.marker-beacon-variant.is-wqi .marker-beacon-variant-buoy i::after {
    background: var(--wqi-color);
    box-shadow: 0 0 12px var(--wqi-color);
}

.marker-wqi-guide-panel.is-active .marker-beacon-variant.is-wqi .marker-beacon-variant-buoy i::after {
    animation: waterly-beacon-blink 2.6s ease-in-out infinite;
}

.marker-beacon-variant.is-steady .marker-beacon-variant-buoy i::after {
    background: var(--wqi-color);
    box-shadow: 0 0 12px var(--wqi-color);
}

.marker-beacon-variant.is-navigation .marker-beacon-variant-buoy i::after {
    background: #facc15;
    box-shadow: 0 0 12px rgba(250, 204, 21, .8);
}

.marker-wqi-guide-panel.is-active .marker-beacon-variant.is-navigation .marker-beacon-variant-buoy i::after {
    animation: waterly-beacon-blink 1.4s ease-in-out infinite;
}

.marker-beacon-variant-copy { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.marker-beacon-variant-copy strong { display: flex; align-items: center; gap: 8px; color: #eafcff; font-size: 12px; font-weight: 700; }
.marker-beacon-variant-copy small { color: #7c99a5; font-size: 10px; line-height: 1.4; }
.marker-beacon-variant.is-dark .marker-beacon-variant-copy strong i { color: #6ee7b7; }
.marker-beacon-variant.is-wqi .marker-beacon-variant-copy strong i { color: var(--wqi-color); }
.marker-beacon-variant.is-steady .marker-beacon-variant-copy strong i { color: var(--wqi-color); font-size: 9px; }
.marker-beacon-variant.is-navigation .marker-beacon-variant-copy strong i { color: #facc15; }

@keyframes waterly-beacon-pointer {
    0%, 100% { transform: none; opacity: .92; }
    50% { transform: translateX(-3px); opacity: 1; }
}

/* Five bands, out of order, so the demo reads as a live signal rather than a sweep. */
@keyframes waterly-beacon-cycle {
    0% { color: #22c55e; }
    20% { color: #f97316; }
    40% { color: #84cc16; }
    60% { color: #e11d48; }
    80% { color: #eab308; }
}

@keyframes waterly-beacon-sample {
    0%, 2% { opacity: 0; transform: translateY(6px); }
    5%, 17% { opacity: 1; transform: none; }
    20%, 100% { opacity: 0; transform: translateY(-6px); }
}

/* Atlas — light theme. The light variant keeps the book metaphor, but replaces
   the night-glass palette with paper, ink and restrained teal accents. */
html[data-theme="light"] .marker-wqi-guide-backdrop {
    background: rgba(220, 231, 235, .76);
    backdrop-filter: blur(11px) saturate(.88);
    -webkit-backdrop-filter: blur(11px) saturate(.88);
}

html[data-theme="light"] .marker-wqi-guide-dialog {
    color: #17343e;
    border-color: rgba(55, 135, 127, .26);
    background:
        radial-gradient(circle at 12% -8%, color-mix(in srgb, var(--wqi-color) 12%, transparent), transparent 35%),
        radial-gradient(circle at 102% 74%, rgba(40, 168, 161, .09), transparent 32%),
        linear-gradient(145deg, rgba(248, 252, 251, .995), rgba(235, 244, 244, .995));
    box-shadow: 0 34px 90px rgba(40, 68, 76, .24), 0 0 70px -48px var(--wqi-color), inset 0 1px 0 #fff;
}

html[data-theme="light"] .marker-wqi-guide-dialog::before {
    background-image: linear-gradient(rgba(37, 78, 86, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(37, 78, 86, .035) 1px, transparent 1px);
}

html[data-theme="light"] .marker-wqi-guide-sheet-toolbar {
    border-color: rgba(60, 99, 112, .14);
    background: linear-gradient(180deg, rgba(251, 253, 253, .98), rgba(231, 241, 243, .9));
}

html[data-theme="light"] .marker-wqi-guide-sheet-close { color: #294854; }
html[data-theme="light"] .marker-wqi-guide-sheet-close:hover,
html[data-theme="light"] .marker-wqi-guide-sheet-close:focus-visible { color: #12343d; background: rgba(20, 126, 151, .08); }
html[data-theme="light"] .marker-wqi-guide-sheet-handle { background: rgba(56, 117, 142, .42); box-shadow: none; }
html[data-theme="light"] .marker-wqi-guide-sheet-close small { color: #6b8089; }
html[data-theme="light"] .marker-wqi-guide-sheet-close > i { color: #397eaa; }

html[data-theme="light"] .marker-waterly-guide-brand > i {
    border-color: rgba(17, 139, 126, .25);
    color: #087f73;
    background: linear-gradient(145deg, rgba(30, 176, 158, .14), rgba(255, 255, 255, .8));
    box-shadow: inset 0 1px 0 #fff, 0 10px 24px -19px #168f83;
}

html[data-theme="light"] .marker-wqi-guide-dialog > header {
    border-color: rgba(55, 94, 106, .13);
    background: rgba(248, 252, 252, .74);
}

html[data-theme="light"] .marker-wqi-guide-dialog > header small,
html[data-theme="light"] .marker-wqi-guide-copy > small { color: #087f73; }
html[data-theme="light"] .marker-wqi-guide-dialog > header strong { color: #17343e; }

html[data-theme="light"] .marker-wqi-guide-close {
    border-color: rgba(55, 94, 106, .18);
    color: #58727d;
    background: rgba(255, 255, 255, .72);
}

html[data-theme="light"] .marker-wqi-guide-close:hover,
html[data-theme="light"] .marker-wqi-guide-close:focus-visible {
    border-color: rgba(14, 139, 125, .4);
    color: #075e56;
    background: rgba(19, 154, 138, .1);
}

html[data-theme="light"] .marker-waterly-guide-book { filter: drop-shadow(0 22px 30px rgba(43, 69, 75, .2)); }
html[data-theme="light"] .marker-waterly-guide-book::before {
    background: linear-gradient(90deg, transparent, rgba(45, 72, 78, .16) 42%, rgba(255, 255, 255, .8) 52%, transparent);
}

html[data-theme="light"] .marker-waterly-guide-page { border-color: rgba(59, 111, 110, .2); }
html[data-theme="light"] .marker-waterly-guide-page::before {
    background-image:
        linear-gradient(rgba(42, 76, 82, .045) 1px, transparent 1px),
        radial-gradient(circle at 20% 10%, rgba(255, 255, 255, .75), transparent 38%);
}

html[data-theme="light"] .marker-waterly-guide-page-cover {
    background:
        radial-gradient(circle at 18% 30%, color-mix(in srgb, var(--wqi-color) 15%, transparent), transparent 43%),
        linear-gradient(155deg, #e6f3ed, #d9ebe8 56%, #d1e5e5);
    box-shadow: inset -18px 0 28px -25px rgba(38, 70, 72, .34), inset 1px 0 rgba(255, 255, 255, .9);
}

html[data-theme="light"] .marker-waterly-guide-book-edition { color: #397f79; }
html[data-theme="light"] .marker-waterly-guide-book-edition i { background: #198f82; }
html[data-theme="light"] .marker-waterly-guide-book-emblem::before {
    background: radial-gradient(circle, color-mix(in srgb, var(--wqi-color) 13%, transparent), rgba(39, 165, 151, .08) 44%, transparent 68%);
}

html[data-theme="light"] .marker-waterly-guide-book-emblem img {
    filter: drop-shadow(0 14px 28px rgba(37, 86, 83, .22));
}

html[data-theme="light"] .marker-waterly-guide-book-emblem b { color: #397f79; }
html[data-theme="light"] .marker-waterly-guide-book-emblem b::before,
html[data-theme="light"] .marker-waterly-guide-book-emblem b::after { background: linear-gradient(90deg, transparent, rgba(39, 130, 119, .55)); }
html[data-theme="light"] .marker-waterly-guide-book-emblem b::after { background: linear-gradient(90deg, rgba(39, 130, 119, .55), transparent); }
html[data-theme="light"] .marker-waterly-guide-book-title small { color: #087f73; }
html[data-theme="light"] .marker-waterly-guide-book-title h2 { color: #15343a; }
html[data-theme="light"] .marker-waterly-guide-book-title p { color: #56757a; }

html[data-theme="light"] .marker-waterly-guide-page-cover > footer,
html[data-theme="light"] .marker-waterly-guide-page-contents > footer {
    border-color: rgba(35, 116, 108, .14);
    color: #4e7778;
}

html[data-theme="light"] .marker-waterly-guide-page-contents {
    background:
        radial-gradient(circle at 100% 0, rgba(53, 181, 176, .1), transparent 35%),
        linear-gradient(145deg, #fbfdfc, #edf6f5 70%);
    box-shadow: inset 18px 0 28px -25px rgba(45, 75, 78, .36), inset -1px 0 #fff;
}

html[data-theme="light"] .marker-waterly-guide-page-contents > header small { color: #527c82; }
html[data-theme="light"] .marker-waterly-guide-page-contents > header strong { color: #18363e; }
html[data-theme="light"] .marker-waterly-guide-page-contents > header > b { color: rgba(41, 126, 119, .3); }
html[data-theme="light"] .marker-waterly-guide-page-contents > footer { color: #66868a; }
html[data-theme="light"] .marker-waterly-guide-page-contents > footer i { color: #238c85; }

html[data-theme="light"] .marker-waterly-guide-book .marker-waterly-guide-lesson,
html[data-theme="light"] .marker-waterly-guide-lesson {
    border-color: color-mix(in srgb, var(--wqi-color) 31%, rgba(67, 101, 108, .16));
    color: #17343e;
    background: linear-gradient(105deg, color-mix(in srgb, var(--wqi-color) 9%, #fff), rgba(255, 255, 255, .76));
    box-shadow: 0 16px 34px -30px var(--wqi-color), inset 0 1px 0 #fff;
}

html[data-theme="light"] .marker-waterly-guide-lesson:hover,
html[data-theme="light"] .marker-waterly-guide-lesson:focus-visible {
    border-color: color-mix(in srgb, var(--wqi-color) 58%, #4c7778);
    background: linear-gradient(105deg, color-mix(in srgb, var(--wqi-color) 14%, #fff), #fff);
    box-shadow: 0 19px 38px -29px var(--wqi-color), inset 0 1px 0 #fff;
}

html[data-theme="light"] .marker-waterly-guide-chapter-number { color: #648188; }
html[data-theme="light"] .marker-waterly-guide-chapter-number b { color: color-mix(in srgb, var(--wqi-color) 72%, #174b4b); }
html[data-theme="light"] .marker-waterly-guide-lesson-copy > small { color: color-mix(in srgb, var(--wqi-color) 66%, #526f76); }
html[data-theme="light"] .marker-waterly-guide-lesson-copy > strong { color: #18363e; }
html[data-theme="light"] .marker-waterly-guide-lesson-copy > em { color: #617b83; }
html[data-theme="light"] .marker-waterly-guide-lesson-copy > span { color: #6b858c; }
html[data-theme="light"] .marker-waterly-guide-lesson-arrow { color: #087f73; }
html[data-theme="light"] .marker-waterly-guide-lesson-arrow small { color: #557873; }

html[data-theme="light"] .marker-waterly-guide-upcoming article {
    border-color: rgba(76, 111, 119, .2);
    background: rgba(255, 255, 255, .54);
}
html[data-theme="light"] .marker-waterly-guide-upcoming article > span { color: #5f7b82; background: rgba(59, 103, 111, .08); }
html[data-theme="light"] .marker-waterly-guide-upcoming article small { color: #667f85; }
html[data-theme="light"] .marker-waterly-guide-upcoming article strong { color: #536e75; }
html[data-theme="light"] .marker-waterly-guide-upcoming article p { color: #71878d; }

html[data-theme="light"] .marker-waterly-guide-back {
    border-color: rgba(59, 96, 107, .18);
    color: #526f79;
    background: rgba(255, 255, 255, .64);
}
html[data-theme="light"] .marker-waterly-guide-back:hover,
html[data-theme="light"] .marker-waterly-guide-back:focus-visible { border-color: rgba(17, 139, 126, .4); color: #075e56; }
html[data-theme="light"] .marker-waterly-guide-lesson-label { color: #607c84; }

html[data-theme="light"] .marker-wqi-guide-visual {
    border-color: rgba(40, 128, 118, .17);
    background: radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--wqi-color) 10%, transparent), transparent 62%), rgba(255, 255, 255, .58);
    box-shadow: inset 0 1px 0 #fff, 0 16px 36px -34px rgba(32, 73, 80, .45);
}

html[data-theme="light"] .marker-wqi-guide-copy h3 { color: #16343d; }
html[data-theme="light"] .marker-wqi-guide-copy p { color: #556f79; }
html[data-theme="light"] .marker-wqi-guide-monogram span {
    color: #16343d;
    background: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(226, 241, 239, .82));
    box-shadow: 0 12px 28px -22px var(--guide-accent), inset 0 1px 0 #fff;
}
html[data-theme="light"] .marker-wqi-guide-monogram span[class^="is-"] {
    background: linear-gradient(145deg, color-mix(in srgb, var(--guide-letter) 11%, #fff), rgba(255, 255, 255, .86));
    box-shadow: 0 14px 32px -25px var(--guide-letter), inset 0 1px 0 #fff;
}
html[data-theme="light"] .marker-wqi-guide-monogram .is-w { --guide-letter: #2563eb; }
html[data-theme="light"] .marker-wqi-guide-monogram .is-q { --guide-letter: #0f8f80; }
html[data-theme="light"] .marker-wqi-guide-monogram .is-i { --guide-letter: #8b5cf6; }
html[data-theme="light"] .marker-wqi-guide-meaning { color: #536f78; }
html[data-theme="light"] .marker-wqi-guide-meaning .is-w { color: #2563eb; }
html[data-theme="light"] .marker-wqi-guide-meaning .is-q { color: #0f8f80; }
html[data-theme="light"] .marker-wqi-guide-meaning .is-i { color: #8b5cf6; }
html[data-theme="light"] .marker-wqi-guide-scale > div { color: #536f78; }
html[data-theme="light"] .marker-wqi-guide-scale > div span::after { background: linear-gradient(180deg, rgba(41, 74, 82, .32), transparent); }
html[data-theme="light"] .marker-wqi-guide-extremes .is-low { color: #15803d; }
html[data-theme="light"] .marker-wqi-guide-extremes .is-high { color: #be123c; }
html[data-theme="light"] .marker-wqi-guide-extremes > div { background: color-mix(in srgb, currentColor 7%, #fff); }
html[data-theme="light"] .marker-wqi-guide-extremes > em { color: #678088; }
html[data-theme="light"] .marker-wqi-guide-current-ring {
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 0 30px -13px var(--wqi-color), inset 0 0 20px rgba(51, 86, 93, .09);
}
html[data-theme="light"] .marker-wqi-guide-current-ring small { color: #607b84; }
html[data-theme="light"] .marker-wqi-guide-current > div > small { color: #667f87; }
html[data-theme="light"] .marker-wqi-guide-current > div > strong { color: #17343e; }
html[data-theme="light"] .marker-wqi-guide-current > div > span { color: #667f87; }

html[data-theme="light"] .marker-wqi-guide-note {
    border-color: rgba(28, 139, 130, .16);
    color: #5d7881;
    background: rgba(255, 255, 255, .48);
}

html[data-theme="light"] .marker-wqi-guide-dialog > footer {
    border-color: rgba(55, 94, 106, .13);
    background: rgba(255, 255, 255, .38);
}
html[data-theme="light"] .marker-wqi-guide-counter { color: #617d85; }
html[data-theme="light"] .marker-wqi-guide-counter b { color: #17343e; }
html[data-theme="light"] .marker-wqi-guide-dot span { background: #a7bcc0; }
html[data-theme="light"] .marker-wqi-guide-nav > button {
    border-color: rgba(55, 94, 106, .18);
    color: #536f78;
    background: rgba(255, 255, 255, .68);
}
html[data-theme="light"] .marker-wqi-guide-nav > button:hover:not(:disabled),
html[data-theme="light"] .marker-wqi-guide-nav > button:focus-visible:not(:disabled) { border-color: rgba(17, 139, 126, .42); color: #075e56; }

html[data-theme="light"] .marker-beacon-caption,
html[data-theme="light"] .marker-beacon-readout {
    border-color: color-mix(in srgb, currentColor 34%, rgba(54, 92, 101, .16));
    color: inherit;
    background: rgba(255, 255, 255, .9);
}
html[data-theme="light"] .marker-beacon-caption { color: #486872; }
html[data-theme="light"] .marker-beacon-readout small { color: #5d7881; }
html[data-theme="light"] .marker-beacon-pattern {
    border-color: color-mix(in srgb, var(--pattern-color) 36%, rgba(68, 98, 104, .17));
    background: linear-gradient(100deg, color-mix(in srgb, var(--pattern-color) 9%, #fff), rgba(255, 255, 255, .76));
}
html[data-theme="light"] .marker-beacon-pattern-copy strong,
html[data-theme="light"] .marker-beacon-pattern-legend strong { color: #18363e; }
html[data-theme="light"] .marker-beacon-pattern-copy small,
html[data-theme="light"] .marker-beacon-pattern-range,
html[data-theme="light"] .marker-beacon-pattern-legend small { color: #617b83; }
html[data-theme="light"] .marker-beacon-pattern.is-no-data .marker-beacon-pattern-copy small { color: #526d76; }
html[data-theme="light"] .marker-beacon-pattern.is-alarm {
    border-color: rgba(210, 39, 73, .42);
    background: linear-gradient(100deg, rgba(244, 63, 94, .1), rgba(255, 255, 255, .72));
}
html[data-theme="light"] .marker-beacon-pattern.is-alarm .marker-beacon-pattern-copy small { color: #ad3851; }
html[data-theme="light"] .marker-beacon-pattern-alarm-note { color: #637b83; }
html[data-theme="light"] .marker-beacon-board-art { filter: drop-shadow(0 20px 32px rgba(52, 75, 81, .2)); }
html[data-theme="light"] .marker-beacon-variant {
    border-color: rgba(57, 91, 100, .16);
    background: rgba(255, 255, 255, .62);
}
html[data-theme="light"] .marker-beacon-variant-copy strong { color: #18363e; }
html[data-theme="light"] .marker-beacon-variant-copy small { color: #617b83; }

/* Chapter view — the shelf of sections that sits between the contents page and a lesson. */
.marker-waterly-guide-chapter-view[aria-hidden="true"] {
    display: none;
}

.marker-waterly-guide-chapter-view[aria-hidden="false"] {
    position: relative;
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 52px 30px 22px;
}

.marker-waterly-guide-chapter-header {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.marker-waterly-guide-chapter-mark {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--wqi-color) 34%, rgba(255, 255, 255, .1));
    border-radius: 18px;
    color: var(--wqi-color);
    background: linear-gradient(145deg, color-mix(in srgb, var(--wqi-color) 14%, rgba(255, 255, 255, .02)), rgba(255, 255, 255, .02));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 16px 34px -26px var(--wqi-color);
    font-size: 21px;
}

.marker-waterly-guide-chapter-header small { color: color-mix(in srgb, var(--wqi-color) 62%, #91aab4); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.marker-waterly-guide-chapter-header h3 { margin: 5px 0 0; color: #f1fdff; font-size: clamp(21px, 1.7vw, 27px); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.marker-waterly-guide-chapter-header p { margin: 6px 0 0; color: #8ca9b4; font-size: 11px; line-height: 1.5; }

/* Chapter 01 — the system itself: a network, a data path and its audience. */
.marker-about-network {
    position: relative;
    width: 100%;
    max-width: 320px;
    height: 210px;
    overflow: hidden;
    border-radius: 18px;
    background:
        radial-gradient(circle at 30% 20%, rgba(56, 189, 208, .1), transparent 45%),
        linear-gradient(165deg, #07202b, #041720);
}

.marker-about-network::before {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 26px 26px;
    content: "";
    mask-image: radial-gradient(circle at 50% 45%, black, transparent 78%);
    -webkit-mask-image: radial-gradient(circle at 50% 45%, black, transparent 78%);
}

.marker-about-node {
    position: absolute;
    top: var(--y);
    left: var(--x);
    width: 13px;
    height: 13px;
    border: 2px solid #cffcff;
    border-radius: 50%;
    background: var(--wqi-color);
    box-shadow: 0 0 16px var(--wqi-color);
    transform: translate(-50%, -50%);
}

/* Two rings leaving each buoy, the way a measurement reaches out. */
.marker-about-node i,
.marker-about-node b {
    position: absolute;
    inset: -6px;
    border: 1px solid color-mix(in srgb, var(--wqi-color) 55%, transparent);
    border-radius: 50%;
    opacity: 0;
}

.marker-wqi-guide-panel.is-active .marker-about-node i { animation: waterly-about-ping 3.4s ease-out infinite; animation-delay: calc(var(--node) * .5s); }
.marker-wqi-guide-panel.is-active .marker-about-node b { animation: waterly-about-ping 3.4s ease-out infinite; animation-delay: calc(var(--node) * .5s + 1.1s); }
.marker-about-node.is-active { width: 17px; height: 17px; }

.marker-about-flow {
    display: flex;
    width: 100%;
    max-width: 330px;
    align-items: center;
    justify-content: space-between;
}

.marker-about-flow article {
    display: flex;
    width: 82px;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    text-align: center;
}

.marker-about-flow article > span {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--wqi-color) 30%, rgba(255, 255, 255, .1));
    border-radius: 18px;
    color: var(--wqi-color);
    background: linear-gradient(145deg, color-mix(in srgb, var(--wqi-color) 13%, rgba(255, 255, 255, .02)), rgba(255, 255, 255, .02));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
    font-size: 19px;
}

.marker-about-flow article small { color: #8ca9b4; font-size: 10px; font-weight: 700; line-height: 1.3; }

.marker-about-flow-link {
    position: relative;
    height: 2px;
    flex: 1 1 auto;
    margin: 0 4px 26px;
    border-radius: 99px;
    background: linear-gradient(90deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .14), rgba(255, 255, 255, .06));
}

.marker-about-flow-link i {
    position: absolute;
    top: 50%;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--wqi-color);
    box-shadow: 0 0 10px var(--wqi-color);
    transform: translate(-50%, -50%);
}

.marker-wqi-guide-panel.is-active .marker-about-flow-link i { animation: waterly-about-packet 2.4s ease-in-out infinite; }
.marker-wqi-guide-panel.is-active .marker-about-flow-link:last-of-type i { animation-delay: .5s; }

.marker-about-audience {
    display: grid;
    width: 100%;
    max-width: 330px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.marker-about-audience article {
    display: flex;
    min-height: 74px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 8px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 14px;
    background: rgba(255, 255, 255, .018);
    text-align: center;
}

.marker-about-audience article span { color: var(--wqi-color); font-size: 16px; }
.marker-about-audience article small { color: #9ab6c1; font-size: 10px; font-weight: 700; line-height: 1.3; }

.marker-about-network .marker-beacon-caption {
    right: auto;
    bottom: 14px;
    left: 14px;
    max-width: calc(100% - 28px);
    gap: 8px;
    padding: 7px 14px;
}

html[data-theme="light"] .marker-about-network {
    background:
        radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--wqi-color) 14%, transparent), transparent 48%),
        linear-gradient(165deg, #e7f3f1, #d4e7e5 70%, #cfe3e2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85);
}

html[data-theme="light"] .marker-about-network::before {
    background-image:
        linear-gradient(rgba(37, 78, 86, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37, 78, 86, .07) 1px, transparent 1px);
}

html[data-theme="light"] .marker-about-node {
    border-color: #fff;
    background: var(--wqi-color);
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--wqi-color) 28%, transparent),
        0 0 16px color-mix(in srgb, var(--wqi-color) 55%, transparent);
}

html[data-theme="light"] .marker-about-node i,
html[data-theme="light"] .marker-about-node b {
    border-color: color-mix(in srgb, var(--wqi-color) 48%, transparent);
}

html[data-theme="light"] .marker-about-network .marker-beacon-caption {
    border-color: rgba(55, 94, 106, .16);
    color: #294854;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 8px 18px rgba(40, 70, 78, .12);
}

html[data-theme="light"] .marker-about-flow article > span {
    border-color: color-mix(in srgb, var(--wqi-color) 28%, rgba(67, 101, 108, .16));
    background: linear-gradient(145deg, color-mix(in srgb, var(--wqi-color) 12%, #fff), rgba(255, 255, 255, .9));
    box-shadow: inset 0 1px 0 #fff;
}

html[data-theme="light"] .marker-about-flow article small { color: #5d7881; }

html[data-theme="light"] .marker-about-flow-link {
    background: linear-gradient(90deg, rgba(55, 94, 106, .08), rgba(55, 94, 106, .2), rgba(55, 94, 106, .08));
}

html[data-theme="light"] .marker-about-audience article {
    border-color: rgba(57, 91, 100, .14);
    background: rgba(255, 255, 255, .72);
}

html[data-theme="light"] .marker-about-audience article small { color: #5d7881; }

@keyframes waterly-about-ping {
    0% { opacity: .7; transform: scale(.7); }
    70%, 100% { opacity: 0; transform: scale(2.6); }
}

@keyframes waterly-about-packet {
    0% { left: 0; opacity: 0; }
    12%, 88% { opacity: 1; }
    100% { left: 100%; opacity: 0; }
}

/* Chapter 04.1 — water temperature: reading, layers, effects and trend. */
.marker-temperature-reading {
    display: flex;
    width: 100%;
    max-width: 330px;
    align-items: center;
    justify-content: center;
    gap: 26px;
}

.marker-temperature-thermometer:not(.is-thermometer) {
    position: relative;
    width: 34px;
    height: 124px;
    border: 4px solid #ccebf0;
    border-radius: 22px 22px 28px 28px;
    background: rgba(255, 255, 255, .04);
    box-shadow: 0 0 28px color-mix(in srgb, var(--guide-accent) 18%, transparent), inset 0 0 0 5px rgba(3, 25, 33, .72);
}

.marker-temperature-thermometer:not(.is-thermometer)::before {
    position: absolute;
    right: 50%;
    bottom: 5px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--guide-accent);
    box-shadow: 0 0 18px color-mix(in srgb, var(--guide-accent) 65%, transparent);
    content: "";
    transform: translateX(50%);
}

.marker-temperature-thermometer:not(.is-thermometer) i {
    position: absolute;
    right: 50%;
    bottom: 17px;
    width: 8px;
    height: 67px;
    border-radius: 99px 99px 0 0;
    background: linear-gradient(0deg, var(--guide-accent), #66b9ef);
    transform: translateX(50%);
    transform-origin: center bottom;
}

.marker-wqi-guide-panel.is-active .marker-temperature-thermometer:not(.is-thermometer) i { animation: waterly-temperature-rise 1.1s cubic-bezier(.2, .8, .25, 1) both; }
.marker-temperature-reading > span:last-child { display: flex; flex-direction: column; }
.marker-temperature-reading small { color: #7fa0aa; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.marker-temperature-reading strong { display: inline-flex; align-items: baseline; gap: 4px; margin-top: 3px; color: #efffff; font-size: 42px; font-weight: 800; letter-spacing: -.06em; line-height: 1; }
.marker-temperature-reading strong sup { position: static; top: auto; margin: 0; color: var(--guide-accent); font-size: 15px; font-weight: 700; letter-spacing: 0; line-height: 1; vertical-align: baseline; }
.marker-temperature-reading em { display: flex; align-items: center; gap: 6px; margin-top: 12px; color: #7fa0aa; font-size: 9px; font-style: normal; font-weight: 700; }
.marker-temperature-reading em i { color: var(--guide-accent); }

.marker-temperature-layers {
    display: grid;
    width: 100%;
    max-width: 340px;
    height: 166px;
    grid-template-rows: 1fr .62fr 1fr;
    overflow: hidden;
    border: 1px solid rgba(125, 218, 224, .18);
    border-radius: 18px 18px 30px 30px;
    background: #0a2e3a;
    box-shadow: inset 0 1px rgba(255, 255, 255, .08), 0 18px 34px -30px #000;
}

.marker-temperature-layers > span { display: flex; align-items: center; justify-content: space-between; padding: 0 20px; color: #e9fdff; }
.marker-temperature-layers small { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.marker-temperature-layers b { font-size: 16px; font-weight: 800; }
.marker-temperature-layers .is-surface { background: linear-gradient(90deg, rgba(247, 183, 74, .42), rgba(69, 204, 201, .18)); }
.marker-temperature-layers .is-transition { position: relative; background: linear-gradient(90deg, rgba(47, 164, 198, .35), rgba(31, 117, 166, .42)); }
.marker-temperature-layers .is-transition i { width: 54%; height: 1px; background: repeating-linear-gradient(90deg, rgba(223, 249, 255, .46) 0 4px, transparent 4px 8px); }
.marker-temperature-layers .is-depth { background: linear-gradient(90deg, rgba(26, 80, 142, .7), rgba(9, 49, 91, .72)); }

.marker-temperature-effects {
    display: grid;
    width: 100%;
    max-width: 340px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.marker-temperature-effects article {
    display: flex;
    min-height: 126px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px 7px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 15px;
    background: rgba(255, 255, 255, .025);
    text-align: center;
}

.marker-temperature-effects article > i { color: var(--effect-color); font-size: 20px; }
.marker-temperature-effects strong { min-height: 28px; color: #a9c3cb; font-size: 10px; line-height: 1.35; }
.marker-temperature-effects span { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 50%; color: #061d25; background: var(--effect-color); box-shadow: 0 0 17px color-mix(in srgb, var(--effect-color) 48%, transparent); }
.marker-temperature-effects span b { font-size: 17px; line-height: 1; }
.marker-temperature-effects .is-oxygen { --effect-color: #6dc9ff; }
.marker-temperature-effects .is-conductivity { --effect-color: #54dac9; }
.marker-temperature-effects .is-biology { --effect-color: #a3e635; }

.marker-temperature-trend { position: relative; width: 100%; max-width: 350px; padding: 10px 12px 12px; }
.marker-temperature-trend > div { display: flex; justify-content: space-between; padding: 0 5px; color: #648793; font-size: 9px; font-weight: 700; }
.marker-temperature-trend svg { display: block; width: 100%; margin-top: 4px; overflow: visible; }
.marker-temperature-trend-area { fill: color-mix(in srgb, var(--guide-accent) 16%, transparent); }
.marker-temperature-trend-line { fill: none; stroke: var(--guide-accent); stroke-width: 3; stroke-linecap: round; }
.marker-temperature-trend circle { fill: #eafffb; stroke: var(--guide-accent); stroke-width: 3; filter: drop-shadow(0 0 6px var(--guide-accent)); }
.marker-temperature-trend-range { display: flex; align-items: center; gap: 7px; color: #7fa0aa; font-size: 9px; font-weight: 700; }
.marker-temperature-trend-range i { width: 17px; height: 4px; border-radius: 99px; background: color-mix(in srgb, var(--guide-accent) 45%, transparent); }
.marker-temperature-trend-range b { margin-left: auto; color: #b9d6dc; font-size: 10px; }
.marker-wqi-guide-panel.is-active .marker-temperature-trend-line { stroke-dasharray: 430; animation: waterly-temperature-draw 1.5s ease-out both .15s; }

@keyframes waterly-temperature-rise {
    from { transform: translateX(50%) scaleY(.12); }
    to { transform: translateX(50%) scaleY(1); }
}

@keyframes waterly-temperature-draw {
    from { stroke-dashoffset: 430; }
    to { stroke-dashoffset: 0; }
}

html[data-theme="light"] .marker-temperature-reading strong { color: #173840; }
html[data-theme="light"] .marker-temperature-reading small,
html[data-theme="light"] .marker-temperature-reading em,
html[data-theme="light"] .marker-temperature-trend > div,
html[data-theme="light"] .marker-temperature-trend-range { color: #58777e; }
html[data-theme="light"] .marker-temperature-thermometer:not(.is-thermometer) { border-color: #55959d; background: rgba(255, 255, 255, .62); box-shadow: 0 0 28px color-mix(in srgb, var(--guide-accent) 15%, transparent), inset 0 0 0 5px #eef8f7; }
html[data-theme="light"] .marker-temperature-effects article { border-color: rgba(46, 106, 112, .16); background: rgba(255, 255, 255, .55); }
html[data-theme="light"] .marker-temperature-effects strong { color: #45666d; }
html[data-theme="light"] .marker-temperature-trend-range b { color: #315b63; }

/* Oxygen lesson — concentration, solubility, sources and trend. */
.marker-oxygen-reading {
    display: flex;
    width: 100%;
    max-width: 330px;
    align-items: center;
    justify-content: center;
    gap: 22px;
}

.marker-oxygen-orb {
    position: relative;
    display: grid;
    width: 112px;
    height: 112px;
    place-items: center;
    border: 1px solid rgba(123, 220, 255, .42);
    border-radius: 50%;
    color: #071d27;
    background: radial-gradient(circle at 35% 28%, #e8fcff, #74d7ee 42%, #27799f 100%);
    box-shadow: 0 0 0 9px rgba(101, 201, 235, .08), 0 0 35px rgba(67, 192, 235, .3), inset 7px 9px 16px rgba(255, 255, 255, .42);
}

.marker-oxygen-orb::before,
.marker-oxygen-orb::after {
    position: absolute;
    border: 1px solid rgba(239, 254, 255, .66);
    border-radius: 50%;
    content: "";
}

.marker-oxygen-orb::before { right: 15px; bottom: 20px; width: 12px; height: 12px; }
.marker-oxygen-orb::after { top: 20px; left: 18px; width: 7px; height: 7px; }
.marker-oxygen-orb i { position: absolute; top: 25px; right: 25px; font-size: 13px; opacity: .42; }
.marker-oxygen-orb b { font-size: 23px; font-weight: 800; letter-spacing: -.06em; }
.marker-wqi-guide-panel.is-active .marker-oxygen-orb::before { animation: waterly-oxygen-bubble 2.8s ease-in-out infinite; }
.marker-wqi-guide-panel.is-active .marker-oxygen-orb::after { animation: waterly-oxygen-bubble 2.8s ease-in-out infinite .8s; }
.marker-oxygen-reading > span:last-child { display: flex; flex-direction: column; }
.marker-oxygen-reading small { color: #80a8b7; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.marker-oxygen-reading strong { display: inline-flex; align-items: baseline; gap: 4px; margin-top: 4px; color: #efffff; font-size: 38px; font-weight: 800; letter-spacing: -.06em; line-height: 1; }
.marker-oxygen-reading strong sup { position: static; top: auto; margin: 0; color: #79d9ff; font-size: 13px; font-weight: 700; letter-spacing: 0; line-height: 1; vertical-align: baseline; }
.marker-oxygen-reading em { display: flex; align-items: baseline; gap: 6px; margin-top: 12px; color: #83a8b3; font-size: 10px; font-style: normal; font-weight: 700; }
.marker-oxygen-reading em b { color: #64e4c4; font-size: 17px; }

.marker-oxygen-solubility {
    display: flex;
    width: 100%;
    max-width: 350px;
    align-items: center;
    gap: 9px;
}

.marker-oxygen-solubility article {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 8px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 16px;
    background: rgba(255, 255, 255, .025);
    text-align: center;
}

.marker-oxygen-solubility article > span { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 800; }
.marker-oxygen-solubility article > strong { color: #efffff; font-size: 23px; letter-spacing: -.04em; line-height: 1; }
.marker-oxygen-solubility article > strong small { color: #80a8b7; font-size: 9px; }
.marker-oxygen-solubility article > em { font-size: 9px; font-style: normal; font-weight: 700; }
.marker-oxygen-solubility .is-cold { border-color: rgba(93, 192, 255, .25); background: linear-gradient(145deg, rgba(53, 163, 219, .16), rgba(255, 255, 255, .02)); }
.marker-oxygen-solubility .is-cold > span { color: #83d7ff; }
.marker-oxygen-solubility .is-cold > em { color: #70c8ef; }
.marker-oxygen-solubility .is-warm { border-color: rgba(244, 181, 86, .22); background: linear-gradient(145deg, rgba(218, 143, 49, .14), rgba(255, 255, 255, .02)); }
.marker-oxygen-solubility .is-warm > span { color: #ffd291; }
.marker-oxygen-solubility .is-warm > em { color: #e6a85a; }
.marker-oxygen-solubility > i { flex: 0 0 auto; color: #6e98a4; font-size: 13px; }

.marker-oxygen-cycle {
    position: relative;
    display: grid;
    width: 100%;
    max-width: 340px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.marker-oxygen-cycle article {
    display: grid;
    min-height: 82px;
    grid-template-columns: 38px minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    align-items: center;
    column-gap: 8px;
    padding: 10px;
    border: 1px solid rgba(117, 209, 225, .16);
    border-radius: 14px;
    background: rgba(255, 255, 255, .025);
}

.marker-oxygen-cycle article > span { display: grid; width: 34px; height: 34px; grid-row: 1 / span 2; place-items: center; border-radius: 11px; color: #72d9ff; background: rgba(73, 178, 221, .16); font-size: 15px; }
.marker-oxygen-cycle article strong { color: #c8e9ef; font-size: 10px; line-height: 1.25; }
.marker-oxygen-cycle article small { color: #72cfcc; font-size: 10px; font-weight: 800; }
.marker-oxygen-cycle-sun,
.marker-oxygen-cycle-night { display: flex; align-items: center; gap: 6px; color: #ffd27f; font-size: 14px; }
.marker-oxygen-cycle-sun { grid-column: 1; }
.marker-oxygen-cycle-sun small,
.marker-oxygen-cycle-night small { color: #8ca9b4; font-size: 9px; font-weight: 800; }
.marker-oxygen-cycle-night { grid-column: 2; justify-content: flex-end; color: #b4b8ff; }
.marker-oxygen-cycle-night b { color: #ff8d9f; font-size: 9px; }
.marker-oxygen-cycle-flow { position: absolute; display: flex; align-items: center; gap: 5px; color: #67d9e8; font-size: 11px; pointer-events: none; }
.marker-oxygen-cycle-flow b { display: block; width: 34px; height: 1px; background: linear-gradient(90deg, transparent, #67d9e8); }
.marker-oxygen-cycle-flow.is-air { top: 58px; left: 27%; }
.marker-oxygen-cycle-flow.is-plant { right: 27%; bottom: 18px; flex-direction: row-reverse; color: #a5e66a; }
.marker-oxygen-cycle-flow.is-plant b { background: linear-gradient(90deg, #a5e66a, transparent); }
.marker-wqi-guide-panel.is-active .marker-oxygen-cycle-flow b { animation: waterly-oxygen-flow 1.8s ease-in-out infinite; }
.marker-wqi-guide-panel.is-active .marker-oxygen-cycle-flow.is-plant b { animation-delay: .6s; }

.marker-oxygen-trend { width: 100%; max-width: 350px; padding: 5px 10px 8px; }
.marker-oxygen-trend header { display: flex; align-items: flex-end; justify-content: space-between; }
.marker-oxygen-trend header span:first-child { display: flex; flex-direction: column; gap: 3px; }
.marker-oxygen-trend header small { color: #7698a4; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.marker-oxygen-trend header b { color: #bee4e8; font-size: 15px; }
.marker-oxygen-trend header .is-low { display: inline-flex; align-items: center; gap: 5px; color: #ff9baa; font-size: 10px; font-weight: 800; }
.marker-oxygen-trend header .is-low i { width: 7px; height: 7px; border-radius: 50%; background: #fb7185; box-shadow: 0 0 10px #fb7185; }
.marker-oxygen-trend svg { display: block; width: 100%; margin-top: 10px; overflow: visible; }
.marker-oxygen-trend-band { fill: rgba(73, 202, 183, .1); stroke: rgba(98, 208, 189, .24); stroke-width: 1; stroke-dasharray: 4 4; }
.marker-oxygen-trend-area { fill: rgba(251, 113, 133, .12); }
.marker-oxygen-trend-line { fill: none; stroke: #fb8b9e; stroke-width: 3; stroke-linecap: round; }
.marker-oxygen-trend circle { fill: #ffe9eb; stroke: #fb7185; stroke-width: 3; filter: drop-shadow(0 0 6px #fb7185); }
.marker-oxygen-trend-axis { display: flex; justify-content: space-between; padding: 0 2px; color: #668793; font-size: 9px; font-weight: 700; }
.marker-wqi-guide-panel.is-active .marker-oxygen-trend-line { stroke-dasharray: 430; animation: waterly-oxygen-draw 1.5s ease-out both .15s; }

@keyframes waterly-oxygen-bubble {
    0%, 100% { opacity: .45; transform: translateY(3px) scale(.86); }
    50% { opacity: 1; transform: translateY(-5px) scale(1.08); }
}

@keyframes waterly-oxygen-flow {
    0%, 100% { opacity: .45; transform: scaleX(.68); transform-origin: left center; }
    50% { opacity: 1; transform: scaleX(1); }
}

@keyframes waterly-oxygen-draw {
    from { stroke-dashoffset: 430; }
    to { stroke-dashoffset: 0; }
}

html[data-theme="light"] .marker-oxygen-reading small,
html[data-theme="light"] .marker-oxygen-reading em,
html[data-theme="light"] .marker-oxygen-trend header small { color: #55777e; }
html[data-theme="light"] .marker-oxygen-reading strong,
html[data-theme="light"] .marker-oxygen-solubility article > strong { color: #173840; }
html[data-theme="light"] .marker-oxygen-solubility article,
html[data-theme="light"] .marker-oxygen-cycle article { background: rgba(255, 255, 255, .55); }
html[data-theme="light"] .marker-oxygen-cycle article { border-color: rgba(42, 124, 132, .18); }
html[data-theme="light"] .marker-oxygen-cycle article strong { color: #42666e; }
html[data-theme="light"] .marker-oxygen-trend header b { color: #315b63; }
html[data-theme="light"] .marker-oxygen-trend-axis { color: #5b7c83; }

/* pH lesson — scale, drivers, effects and trend. */
.marker-ph-scale,
.marker-ph-trend { width: 100%; max-width: 350px; }
.marker-ph-scale-head { display: flex; align-items: baseline; justify-content: space-between; color: #7e9da7; font-size: 11px; font-weight: 800; }
.marker-ph-scale-head strong { color: #efffff; font-size: 31px; letter-spacing: -.06em; }
.marker-ph-scale-bar { position: relative; height: 24px; margin-top: 13px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 99px; background: linear-gradient(90deg, #ef4444 0%, #f97316 17%, #facc15 34%, #4ade80 50%, #22d3ee 67%, #3b82f6 83%, #a855f7 100%); box-shadow: inset 0 1px rgba(255, 255, 255, .36), 0 12px 27px -18px #31d8c3; }
.marker-ph-scale-bar::after { position: absolute; inset: 4px 7px auto; height: 5px; border-radius: 99px; background: rgba(255, 255, 255, .25); content: ""; }
.marker-ph-scale-bar > i { position: absolute; z-index: 1; top: 50%; left: var(--ph-level); display: grid; width: 28px; height: 28px; place-items: center; border: 3px solid #fff; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 5px rgba(255, 255, 255, .12), 0 0 20px #4ade80; transform: translate(-50%, -50%); }
.marker-ph-scale-bar > i b { position: absolute; bottom: calc(100% + 10px); width: 42px; height: 4px; border-radius: 99px; background: #efffff; box-shadow: 0 0 12px rgba(239, 255, 255, .5); }
.marker-ph-scale-labels { display: grid; margin-top: 16px; grid-template-columns: 1fr 1fr 1fr; color: #90aeb8; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.marker-ph-scale-labels small:nth-child(2) { text-align: center; }
.marker-ph-scale-labels small:last-child { text-align: right; }
.marker-ph-scale-labels .is-acidic { color: #fb8a8d; }
.marker-ph-scale-labels .is-neutral { color: #69dfaa; }
.marker-ph-scale-labels .is-alkaline { color: #8cb7ff; }

.marker-ph-drivers,
.marker-ph-effects { display: grid; width: 100%; max-width: 350px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.marker-ph-drivers article { display: flex; min-height: 122px; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 10px 6px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 15px; background: rgba(255, 255, 255, .025); text-align: center; }
.marker-ph-drivers article > span { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 12px; color: var(--driver-color); background: color-mix(in srgb, var(--driver-color) 16%, transparent); font-size: 15px; }
.marker-ph-drivers article strong { color: #c6e3e7; font-size: 10px; line-height: 1.2; }
.marker-ph-drivers article small { color: #7898a3; font-size: 9px; font-weight: 700; }
.marker-ph-drivers article:nth-child(1) { --driver-color: #a5b4fc; }
.marker-ph-drivers article:nth-child(2) { --driver-color: #7dd3fc; }
.marker-ph-drivers article:nth-child(3) { --driver-color: #a3e635; }

.marker-ph-effects span { display: flex; min-height: 108px; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 10px 5px; border: 1px solid rgba(106, 213, 209, .14); border-radius: 15px; background: linear-gradient(145deg, rgba(74, 208, 194, .09), rgba(255, 255, 255, .018)); text-align: center; }
.marker-ph-effects span i { color: #62d9cf; font-size: 19px; }
.marker-ph-effects span b { color: #dffeff; font-size: 12px; }
.marker-ph-effects span small { color: #86a4ad; font-size: 9px; font-weight: 700; line-height: 1.25; }

.marker-ph-trend { padding: 5px 10px 8px; }
.marker-ph-trend header { display: flex; align-items: flex-end; justify-content: space-between; }
.marker-ph-trend header span:first-child { display: flex; flex-direction: column; gap: 3px; }
.marker-ph-trend header small { color: #7698a4; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.marker-ph-trend header b { color: #bee4e8; font-size: 15px; }
.marker-ph-trend header .is-change { display: inline-flex; align-items: center; gap: 5px; color: #f9c86e; font-size: 10px; font-weight: 800; }
.marker-ph-trend header .is-change i { width: 7px; height: 7px; border-radius: 50%; background: #fbbf24; box-shadow: 0 0 10px #fbbf24; }
.marker-ph-trend svg { display: block; width: 100%; margin-top: 10px; overflow: visible; }
.marker-ph-trend-band { fill: rgba(74, 222, 128, .1); stroke: rgba(98, 208, 189, .24); stroke-width: 1; stroke-dasharray: 4 4; }
.marker-ph-trend-area { fill: rgba(251, 191, 36, .13); }
.marker-ph-trend-line { fill: none; stroke: #f6c85f; stroke-width: 3; stroke-linecap: round; }
.marker-ph-trend circle { fill: #fff4d2; stroke: #fbbf24; stroke-width: 3; filter: drop-shadow(0 0 6px #fbbf24); }
.marker-ph-trend-axis { display: flex; justify-content: space-between; padding: 0 2px; color: #668793; font-size: 9px; font-weight: 700; }
.marker-wqi-guide-panel.is-active .marker-ph-scale-bar > i { animation: waterly-ph-pointer .8s cubic-bezier(.2, .8, .25, 1) both .1s; }
.marker-wqi-guide-panel.is-active .marker-ph-trend-line { stroke-dasharray: 430; animation: waterly-ph-draw 1.5s ease-out both .15s; }

/* ORP / redox lesson — potential, electron balance, drivers and trend. */
.marker-orp-gauge { width: 100%; max-width: 350px; padding: 6px 9px 3px; }
.marker-orp-gauge-arc { position: relative; height: 114px; padding-top: 43px; text-align: center; }
.marker-orp-gauge-arc::before { position: absolute; top: 42px; right: 0; left: 0; height: 17px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 99px; background: linear-gradient(90deg, #67c8ff 0%, #597da4 43%, #6a7685 50%, #f0a6a2 64%, #7be4bc 100%); box-shadow: inset 0 1px rgba(255, 255, 255, .28), 0 0 24px -10px #75d9e1; content: ""; }
.marker-orp-gauge-arc > i { position: absolute; z-index: 1; top: 32px; left: var(--orp-level); width: 4px; height: 37px; border-radius: 99px; background: #f1ffff; box-shadow: 0 0 0 4px rgba(241, 255, 255, .14), 0 0 14px #f1ffff; transform: translateX(-50%); }
.marker-orp-gauge-arc > b { position: relative; display: inline-flex; align-items: baseline; gap: 4px; color: #efffff; font-size: 37px; font-weight: 800; letter-spacing: -.06em; line-height: 1; }
.marker-orp-gauge-arc > b sup { position: static; top: auto; margin: 0; color: #82dce2; font-size: 13px; font-weight: 700; letter-spacing: 0; line-height: 1; vertical-align: baseline; }
.marker-orp-gauge-axis { display: flex; justify-content: space-between; color: #81a2ad; font-size: 9px; font-weight: 800; }
.marker-orp-gauge-axis span:first-child { color: #83d5ff; }
.marker-orp-gauge-axis span:last-child { color: #8ce6bd; }

.marker-orp-electrons { display: flex; width: 100%; max-width: 350px; align-items: center; justify-content: center; gap: 10px; }
.marker-orp-electrons article { display: flex; min-width: 116px; min-height: 116px; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 10px 5px; border: 1px solid rgba(124, 215, 222, .18); border-radius: 16px; background: rgba(255, 255, 255, .025); text-align: center; }
.marker-orp-electrons article > span { display: grid; width: 37px; height: 37px; place-items: center; border-radius: 50%; color: #a5e6c5; background: rgba(68, 207, 165, .16); font-size: 16px; }
.marker-orp-electrons article strong { color: #c9e9ec; font-size: 10px; line-height: 1.2; }
.marker-orp-electrons article small { color: #7e9da7; font-size: 9px; font-weight: 700; }
.marker-orp-electrons article.is-donor { border-color: rgba(116, 197, 247, .22); }
.marker-orp-electrons article.is-donor > span { color: #8bd8ff; background: rgba(61, 164, 222, .16); }
.marker-orp-electrons > div { display: flex; flex-direction: column; align-items: center; gap: 2px; color: #8ad9d4; font-size: 15px; }
.marker-orp-electrons > div b { color: #c6e9e7; font-size: 9px; }

.marker-orp-factors { display: grid; width: 100%; max-width: 350px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.marker-orp-factors article { display: flex; min-height: 112px; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 9px 5px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 15px; background: rgba(255, 255, 255, .025); text-align: center; }
.marker-orp-factors article i { color: var(--orp-factor-color); font-size: 19px; }
.marker-orp-factors article strong { color: #b9d7dc; font-size: 10px; line-height: 1.2; }
.marker-orp-factors article b { color: var(--orp-factor-color); font-size: 13px; }
.marker-orp-factors article:nth-child(1) { --orp-factor-color: #79d9ff; }
.marker-orp-factors article:nth-child(2) { --orp-factor-color: #c4b5fd; }
.marker-orp-factors article:nth-child(3) { --orp-factor-color: #f4b477; }

.marker-orp-trend { width: 100%; max-width: 350px; padding: 5px 10px 8px; }
.marker-orp-trend header { display: flex; align-items: flex-end; justify-content: space-between; }
.marker-orp-trend header span:first-child { display: flex; flex-direction: column; gap: 3px; }
.marker-orp-trend header small { color: #7698a4; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.marker-orp-trend header b { color: #bee4e8; font-size: 15px; }
.marker-orp-trend header .is-shift { display: inline-flex; align-items: center; gap: 5px; color: #f6bb82; font-size: 10px; font-weight: 800; }
.marker-orp-trend header .is-shift i { width: 7px; height: 7px; border-radius: 50%; background: #f59e72; box-shadow: 0 0 10px #f59e72; }
.marker-orp-trend svg { display: block; width: 100%; margin-top: 10px; overflow: visible; }
.marker-orp-trend-zero { fill: none; stroke: rgba(164, 204, 210, .3); stroke-width: 1; stroke-dasharray: 4 4; }
.marker-orp-trend-area { fill: rgba(108, 210, 185, .11); }
.marker-orp-trend-line { fill: none; stroke: #76dfbe; stroke-width: 3; stroke-linecap: round; }
.marker-orp-trend circle { fill: #e7fff8; stroke: #5ad8b2; stroke-width: 3; filter: drop-shadow(0 0 6px #5ad8b2); }
.marker-orp-trend-axis { display: flex; justify-content: space-between; padding: 0 2px; color: #668793; font-size: 9px; font-weight: 700; }
.marker-wqi-guide-panel.is-active .marker-orp-gauge-arc > i { animation: waterly-orp-pointer .8s cubic-bezier(.2, .8, .25, 1) both .1s; }
.marker-wqi-guide-panel.is-active .marker-orp-trend-line { stroke-dasharray: 430; animation: waterly-orp-draw 1.5s ease-out both .15s; }

@keyframes waterly-ph-pointer { from { opacity: 0; transform: translate(-50%, -50%) scale(.55); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes waterly-ph-draw { from { stroke-dashoffset: 430; } to { stroke-dashoffset: 0; } }
@keyframes waterly-orp-pointer { from { opacity: 0; transform: translateX(-50%) scaleY(.5); } to { opacity: 1; transform: translateX(-50%) scaleY(1); } }
@keyframes waterly-orp-draw { from { stroke-dashoffset: 430; } to { stroke-dashoffset: 0; } }

html[data-theme="light"] .marker-ph-scale-head strong,
html[data-theme="light"] .marker-ph-trend header b,
html[data-theme="light"] .marker-orp-gauge-arc > b,
html[data-theme="light"] .marker-orp-trend header b { color: #173840; }
html[data-theme="light"] .marker-ph-scale-head,
html[data-theme="light"] .marker-ph-scale-labels,
html[data-theme="light"] .marker-ph-trend header small,
html[data-theme="light"] .marker-orp-gauge-axis,
html[data-theme="light"] .marker-orp-trend header small { color: #55777e; }
html[data-theme="light"] .marker-ph-drivers article,
html[data-theme="light"] .marker-ph-effects span,
html[data-theme="light"] .marker-orp-electrons article,
html[data-theme="light"] .marker-orp-factors article { border-color: rgba(46, 122, 128, .16); background: rgba(255, 255, 255, .55); }
html[data-theme="light"] .marker-ph-drivers article strong,
html[data-theme="light"] .marker-ph-effects span b,
html[data-theme="light"] .marker-orp-electrons article strong,
html[data-theme="light"] .marker-orp-factors article strong { color: #42666e; }
html[data-theme="light"] .marker-ph-drivers article small,
html[data-theme="light"] .marker-ph-effects span small,
html[data-theme="light"] .marker-orp-electrons article small { color: #5b7c83; }
html[data-theme="light"] .marker-ph-trend-axis,
html[data-theme="light"] .marker-orp-trend-axis { color: #5b7c83; }

/* Optical lessons — turbidity and total suspended solids. */
.marker-optical-beam { display: flex; width: 100%; max-width: 350px; align-items: center; justify-content: center; gap: 12px; }
.marker-optical-source,
.marker-optical-detector { display: flex; width: 58px; flex-direction: column; align-items: center; gap: 7px; color: #83dff0; text-align: center; }
.marker-optical-source i,
.marker-optical-detector i { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(111, 216, 232, .32); border-radius: 12px; background: rgba(65, 178, 207, .14); font-size: 16px; }
.marker-optical-source small,
.marker-optical-detector small { color: #82a3ad; font-size: 8px; font-weight: 800; line-height: 1.15; text-transform: uppercase; }
.marker-optical-water { position: relative; display: block; width: 155px; height: 108px; overflow: hidden; border: 1px solid rgba(93, 211, 220, .2); border-radius: 22px; background: linear-gradient(180deg, rgba(55, 178, 202, .22), rgba(11, 69, 91, .7)); box-shadow: inset 0 1px rgba(255, 255, 255, .16), 0 0 24px -12px #55d7df; }
.marker-optical-water::before { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 48%, rgba(255, 255, 255, .06) 49%, transparent 50%); background-size: 100% 17px; content: ""; opacity: .7; }
.marker-optical-water > b { position: absolute; top: 50%; left: -10%; width: 120%; height: 3px; border-radius: 99px; background: linear-gradient(90deg, transparent, #d7ffff 20%, #d7ffff 80%, transparent); box-shadow: 0 0 14px #8df1f0; content: ""; opacity: .78; transform: translateY(-50%); }
.marker-optical-water > i { position: absolute; z-index: 1; display: block; width: 10px; height: 10px; border-radius: 50%; background: #c5eff1; box-shadow: 0 0 10px rgba(197, 239, 241, .7); }
.marker-optical-water > i:nth-child(1) { top: 24%; left: 34%; }
.marker-optical-water > i:nth-child(2) { top: 57%; left: 57%; width: 14px; height: 14px; background: #a4d9d0; }
.marker-optical-water > i:nth-child(3) { top: 38%; left: 69%; width: 7px; height: 7px; background: #83c5dc; }
.marker-wqi-guide-panel.is-active .marker-optical-water > i { animation: waterly-optical-particle 2.8s ease-in-out infinite; }
.marker-wqi-guide-panel.is-active .marker-optical-water > i:nth-child(2) { animation-delay: .45s; }
.marker-wqi-guide-panel.is-active .marker-optical-water > i:nth-child(3) { animation-delay: .9s; }

.marker-turbidity-ntu,
.marker-turbidity-units,
.marker-secchi-compare {
    width: 100%;
    max-width: 350px;
    padding: 11px 13px;
    border: 1px solid rgba(91, 213, 226, .2);
    border-radius: 17px;
    background: linear-gradient(145deg, rgba(52, 173, 197, .11), rgba(255, 255, 255, .02));
}

.marker-turbidity-ntu > header { display: flex; align-items: baseline; gap: 9px; }
.marker-turbidity-ntu > header b { color: #7ce4ec; font-size: 20px; letter-spacing: -.04em; }
.marker-turbidity-ntu > header span { color: #8baab2; font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.marker-turbidity-ntu-stage { position: relative; height: 114px; margin: 5px 0 7px; }
.marker-turbidity-ntu-stage .is-source,
.marker-turbidity-ntu-stage .is-detector { position: absolute; z-index: 2; display: flex; width: 72px; flex-direction: column; align-items: center; gap: 5px; color: #88e9ed; text-align: center; }
.marker-turbidity-ntu-stage .is-source { top: 50px; left: 0; }
.marker-turbidity-ntu-stage .is-detector { top: 0; left: calc(50% - 36px); }
.marker-turbidity-ntu-stage .is-source > i,
.marker-turbidity-ntu-stage .is-detector > i { display: grid; width: 31px; height: 31px; place-items: center; border: 1px solid rgba(116, 226, 234, .3); border-radius: 10px; background: rgba(60, 193, 209, .13); font-size: 13px; }
.marker-turbidity-ntu-stage .is-source small,
.marker-turbidity-ntu-stage .is-detector small { color: #799ba4; font-size: 8px; font-weight: 800; line-height: 1.15; }
.marker-turbidity-ntu-stage .is-sample { position: absolute; top: 43px; left: calc(50% - 35px); display: block; width: 70px; height: 68px; overflow: hidden; border: 1px solid rgba(121, 226, 232, .3); border-radius: 17px 17px 21px 21px; background: linear-gradient(180deg, rgba(83, 194, 211, .25), rgba(22, 83, 106, .58)); box-shadow: inset 0 1px rgba(255, 255, 255, .12), 0 0 20px -11px #69dae1; }
.marker-turbidity-ntu-stage .is-sample > i { position: absolute; display: block; width: 6px; height: 6px; border-radius: 50%; background: #d8eff0; box-shadow: 0 0 7px rgba(216, 239, 240, .65); }
.marker-turbidity-ntu-stage .is-sample > i:nth-child(1) { top: 15px; left: 18px; }
.marker-turbidity-ntu-stage .is-sample > i:nth-child(2) { top: 37px; left: 42px; width: 9px; height: 9px; }
.marker-turbidity-ntu-stage .is-sample > i:nth-child(3) { top: 23px; right: 11px; width: 4px; height: 4px; }
.marker-turbidity-ntu-stage .is-sample > i:nth-child(4) { bottom: 10px; left: 12px; width: 5px; height: 5px; }
.marker-turbidity-ntu-stage > i.is-beam { position: absolute; top: 76px; left: 59px; width: calc(50% - 54px); height: 3px; border-radius: 99px; background: linear-gradient(90deg, transparent, #e9ffff 22%, #e9ffff); box-shadow: 0 0 11px #9aeeee; }
.marker-turbidity-ntu-stage > i.is-scatter { position: absolute; top: 31px; left: calc(50% - 1px); width: 3px; height: 29px; border-radius: 99px; background: linear-gradient(0deg, #e9ffff, transparent); box-shadow: 0 0 11px #9aeeee; transform-origin: bottom; }
.marker-turbidity-ntu-stage .is-angle { position: absolute; top: 35px; left: calc(50% + 9px); color: #72cdd6; font-size: 8px; }
.marker-turbidity-ntu > footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .07); }
.marker-turbidity-ntu > footer span { display: inline-flex; align-items: center; gap: 5px; color: #8caab1; font-size: 9px; font-weight: 700; }
.marker-turbidity-ntu > footer span i { color: #75dbe4; }
.marker-turbidity-ntu > footer strong { color: #efbd78; font-size: 9px; }

.marker-turbidity-units > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.marker-turbidity-units article { position: relative; display: flex; min-width: 0; min-height: 112px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 9px 7px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 14px; background: rgba(255, 255, 255, .025); text-align: center; }
.marker-turbidity-units article > span { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; color: #082832; background: #e8ffff; box-shadow: 0 0 16px rgba(222, 255, 255, .22); font-size: 13px; font-weight: 900; }
.marker-turbidity-units article.is-fnu > span { color: #ecffff; background: #59c8d8; box-shadow: 0 0 17px rgba(74, 200, 216, .3); }
.marker-turbidity-units article strong { color: #cde7e9; font-size: 11px; }
.marker-turbidity-units article small { color: #7f9da5; font-size: 9px; font-weight: 700; line-height: 1.25; }
.marker-turbidity-units article > b { position: absolute; top: 8px; right: 8px; color: #72d8e1; font-size: 9px; }
.marker-turbidity-units > footer { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 9px; color: #e7b76f; font-size: 9px; font-weight: 800; line-height: 1.25; text-align: center; }
.marker-turbidity-units > footer i { flex: 0 0 auto; }

.marker-secchi-method { display: grid; width: 100%; max-width: 350px; grid-template-columns: 128px minmax(0, 1fr); align-items: stretch; gap: 13px; }
.marker-secchi-water { position: relative; min-height: 174px; overflow: hidden; border: 1px solid rgba(86, 197, 216, .25); border-radius: 18px 18px 27px 27px; background: linear-gradient(180deg, rgba(74, 190, 214, .32), rgba(19, 87, 118, .72) 50%, rgba(7, 43, 66, .94)); box-shadow: inset 0 1px rgba(255, 255, 255, .14), 0 14px 30px -23px #58c9e1; }
.marker-secchi-water::before { position: absolute; top: 10px; right: -15%; left: -15%; height: 8px; border-top: 2px solid rgba(203, 249, 255, .38); border-radius: 50%; content: ""; }
.marker-secchi-water > i { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 24px, rgba(210, 250, 255, .05) 24px 25px); }
.marker-secchi-line { position: absolute; top: 0; bottom: 37px; left: 50%; width: 1px; background: repeating-linear-gradient(0deg, rgba(237, 255, 255, .7) 0 5px, transparent 5px 9px); }
.marker-secchi-disk { position: absolute; bottom: 28px; left: calc(50% - 31px); width: 62px; height: 22px; border: 2px solid rgba(238, 255, 255, .8); border-radius: 50%; background: conic-gradient(from 45deg, #f5ffff 0 25%, #15323c 25% 50%, #f5ffff 50% 75%, #15323c 75%); box-shadow: 0 0 13px rgba(225, 255, 255, .18); transform: perspective(70px) rotateX(57deg); }
.marker-secchi-water > b { position: absolute; right: 8px; bottom: 11px; color: #98e9ef; font-size: 10px; }
.marker-secchi-steps { display: flex; min-width: 0; flex-direction: column; justify-content: center; gap: 8px; }
.marker-secchi-steps > header { display: flex; align-items: center; gap: 7px; color: #cae9ec; }
.marker-secchi-steps > header i { color: #70d9e3; font-size: 13px; }
.marker-secchi-steps > header strong { font-size: 10px; letter-spacing: .05em; text-transform: uppercase; }
.marker-secchi-steps article { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 7px; padding: 7px; border: 1px solid rgba(255, 255, 255, .07); border-radius: 11px; background: rgba(255, 255, 255, .025); }
.marker-secchi-steps article > b { display: grid; width: 23px; height: 23px; place-items: center; border-radius: 8px; color: #082b34; background: #6bd7e0; font-size: 9px; }
.marker-secchi-steps article > span { display: flex; min-width: 0; flex-direction: column; color: #bcdadd; font-size: 9px; font-weight: 800; }
.marker-secchi-steps article small { color: #7899a1; font-size: 8px; font-weight: 700; }
.marker-secchi-steps > p { display: flex; margin: 0; flex-direction: column; gap: 3px; padding-top: 7px; border-top: 1px solid rgba(255, 255, 255, .07); }
.marker-secchi-steps > p small { color: #7899a1; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.marker-secchi-steps > p strong { color: #74dce5; font-size: 10px; }

.marker-secchi-compare > header { display: flex; align-items: flex-end; justify-content: space-between; gap: 9px; }
.marker-secchi-compare > header strong { color: #c6e5e8; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.marker-secchi-compare > header small { max-width: 155px; color: #7798a1; font-size: 8px; font-weight: 700; line-height: 1.2; text-align: right; }
.marker-secchi-compare > div { display: grid; margin-top: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.marker-secchi-compare article { display: grid; min-height: 91px; grid-template-columns: 50px minmax(0, 1fr); grid-template-rows: 1fr auto; align-items: center; gap: 2px 8px; padding: 9px; border: 1px solid rgba(255, 255, 255, .07); border-radius: 13px; background: rgba(255, 255, 255, .025); }
.marker-secchi-compare article > span { display: flex; grid-row: 1 / span 2; flex-direction: column; align-items: center; gap: 4px; color: #73dce6; }
.marker-secchi-compare article > span i { font-size: 16px; }
.marker-secchi-compare article > span b { font-size: 12px; }
.marker-secchi-compare article strong { align-self: end; color: #bfdde0; font-size: 10px; }
.marker-secchi-compare article small { align-self: start; color: #7899a1; font-size: 8px; font-weight: 700; line-height: 1.15; }
.marker-secchi-compare article.is-cloudy > span { color: #efb66b; }
.marker-secchi-compare > footer { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 9px; color: #e7b56d; font-size: 9px; font-weight: 800; }

.marker-wqi-guide-panel.is-active .marker-turbidity-ntu-stage > i.is-scatter { animation: waterly-turbidity-scatter 1.8s ease-in-out infinite; }
.marker-wqi-guide-panel.is-active .marker-turbidity-ntu-stage .is-sample > i { animation: waterly-optical-particle 2.8s ease-in-out infinite; }
.marker-wqi-guide-panel.is-active .marker-secchi-disk { animation: waterly-secchi-depth 3.2s ease-in-out infinite; }

@keyframes waterly-turbidity-scatter { 0%, 100% { opacity: .45; transform: scaleY(.55); } 50% { opacity: 1; transform: scaleY(1); } }
@keyframes waterly-secchi-depth { 0%, 100% { transform: translateY(-11px) perspective(70px) rotateX(57deg); } 50% { transform: translateY(5px) perspective(70px) rotateX(57deg); } }

.marker-turbidity-compare { display: flex; width: 100%; max-width: 330px; justify-content: center; gap: 14px; }
.marker-turbidity-compare article { display: flex; min-width: 122px; flex-direction: column; align-items: center; gap: 7px; padding: 12px 8px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 16px; background: rgba(255, 255, 255, .025); text-align: center; }
.marker-turbidity-compare article strong { color: #cae4e7; font-size: 10px; }
.marker-turbidity-compare article small { font-size: 15px; font-weight: 800; }
.marker-turbidity-compare .is-clear { border-color: rgba(112, 215, 225, .24); }
.marker-turbidity-compare .is-clear small { color: #75dbe4; }
.marker-turbidity-compare .is-cloudy { border-color: rgba(241, 185, 104, .25); }
.marker-turbidity-compare .is-cloudy small { color: #f0bd79; }
.marker-turbidity-vial { position: relative; display: block; width: 52px; height: 76px; overflow: hidden; border: 2px solid rgba(221, 253, 255, .66); border-top: 5px solid rgba(221, 253, 255, .9); border-radius: 8px 8px 15px 15px; background: linear-gradient(180deg, rgba(147, 229, 235, .28), rgba(72, 157, 185, .14)); }
.marker-turbidity-vial::before { position: absolute; right: -3px; bottom: 0; left: -3px; height: 53%; border-radius: 3px 3px 12px 12px; background: rgba(79, 204, 218, .22); content: ""; }
.marker-turbidity-compare .is-cloudy .marker-turbidity-vial::before { background: rgba(181, 153, 102, .34); }
.marker-turbidity-vial i { position: absolute; z-index: 1; display: block; width: 6px; height: 6px; border-radius: 50%; background: #eaffff; box-shadow: 0 0 5px rgba(234, 255, 255, .7); }
.marker-turbidity-vial i:nth-child(1) { bottom: 23px; left: 20px; }
.marker-turbidity-vial i:nth-child(2) { bottom: 34px; left: 30px; width: 4px; height: 4px; }
.marker-turbidity-vial i:nth-child(3) { bottom: 14px; left: 12px; width: 8px; height: 8px; }
.marker-turbidity-vial i:nth-child(4) { bottom: 39px; left: 10px; width: 4px; height: 4px; }

.marker-turbidity-probe { display: flex; width: 100%; max-width: 330px; align-items: center; justify-content: center; gap: 15px; padding: 13px 14px; border: 1px solid rgba(111, 216, 232, .2); border-radius: 17px; background: linear-gradient(105deg, rgba(62, 182, 202, .12), rgba(255, 255, 255, .025)); }
.marker-turbidity-probe-head { display: grid; width: 48px; height: 48px; flex: 0 0 48px; place-items: center; border: 3px solid #b8edf0; border-radius: 50%; color: #082a35; background: #69dbe1; box-shadow: 0 0 18px rgba(85, 215, 223, .38); font-size: 17px; }
.marker-turbidity-probe > div { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.marker-turbidity-probe > div small { color: #79abb3; font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.marker-turbidity-probe > div strong { color: #eaffff; font-size: 18px; letter-spacing: -.03em; }
.marker-turbidity-probe > div em { color: #7d9ba5; font-size: 9px; font-style: normal; font-weight: 700; }
.marker-turbidity-probe-check { display: grid; width: 25px; height: 25px; margin-left: auto; flex: 0 0 25px; place-items: center; border-radius: 50%; color: #0b3028; background: #72e0ad; font-size: 11px; }

.marker-turbidity-trend,
.marker-tss-trend { width: 100%; max-width: 350px; padding: 5px 10px 8px; }
.marker-turbidity-trend header,
.marker-tss-trend header { display: flex; align-items: flex-end; justify-content: space-between; }
.marker-turbidity-trend header span:first-child,
.marker-tss-trend header span:first-child { display: flex; flex-direction: column; gap: 3px; }
.marker-turbidity-trend header small,
.marker-tss-trend header small { color: #7698a4; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.marker-turbidity-trend header b,
.marker-tss-trend header b { color: #bee4e8; font-size: 15px; }
.marker-turbidity-trend .is-rise,
.marker-tss-trend .is-rise { display: inline-flex; align-items: center; gap: 5px; color: #f4bd7d; font-size: 10px; font-weight: 800; }
.marker-turbidity-trend .is-rise i,
.marker-tss-trend .is-rise i { width: 7px; height: 7px; border-radius: 50%; background: #f5a85e; box-shadow: 0 0 10px #f5a85e; }
.marker-turbidity-trend svg,
.marker-tss-trend svg { display: block; width: 100%; margin-top: 10px; overflow: visible; }
.marker-turbidity-trend-band { fill: rgba(74, 205, 215, .1); stroke: rgba(98, 208, 214, .24); stroke-width: 1; stroke-dasharray: 4 4; }
.marker-turbidity-trend-area { fill: rgba(245, 168, 94, .13); }
.marker-turbidity-trend-line { fill: none; stroke: #f5b66f; stroke-width: 3; stroke-linecap: round; }
.marker-turbidity-trend circle { fill: #fff0db; stroke: #f5a85e; stroke-width: 3; filter: drop-shadow(0 0 6px #f5a85e); }
.marker-tss-trend-area { fill: rgba(244, 150, 119, .13); }
.marker-tss-trend-line { fill: none; stroke: #f39a78; stroke-width: 3; stroke-linecap: round; }
.marker-tss-trend circle { fill: #fff0eb; stroke: #f37f65; stroke-width: 3; filter: drop-shadow(0 0 6px #f37f65); }
.marker-turbidity-trend-axis,
.marker-tss-trend-axis { display: flex; justify-content: space-between; padding: 0 2px; color: #668793; font-size: 9px; font-weight: 700; }
.marker-wqi-guide-panel.is-active .marker-turbidity-trend-line,
.marker-wqi-guide-panel.is-active .marker-tss-trend-line { stroke-dasharray: 430; animation: waterly-optical-draw 1.5s ease-out both .15s; }

.marker-tss-reading { display: flex; width: 100%; max-width: 330px; align-items: center; justify-content: center; gap: 25px; }
.marker-tss-particles { position: relative; display: block; width: 108px; height: 108px; border: 1px solid rgba(242, 168, 124, .34); border-radius: 50%; background: radial-gradient(circle at 50% 48%, rgba(240, 153, 113, .2), rgba(36, 56, 65, .2) 64%, transparent 65%); box-shadow: 0 0 30px -10px #f09a72; }
.marker-tss-particles::before { position: absolute; inset: 13px; border: 1px dashed rgba(244, 189, 142, .25); border-radius: 50%; content: ""; }
.marker-tss-particles i { position: absolute; display: block; width: 11px; height: 11px; border-radius: 50%; background: #f3b27f; box-shadow: 0 0 10px rgba(243, 178, 127, .64); }
.marker-tss-particles i:nth-child(1) { top: 28px; left: 31px; }
.marker-tss-particles i:nth-child(2) { top: 55px; left: 63px; width: 17px; height: 17px; background: #8fcad0; }
.marker-tss-particles i:nth-child(3) { top: 35px; left: 71px; width: 7px; height: 7px; }
.marker-tss-particles i:nth-child(4) { top: 72px; left: 28px; width: 14px; height: 14px; background: #a2d2a0; }
.marker-tss-particles i:nth-child(5) { top: 68px; left: 76px; width: 6px; height: 6px; }
.marker-tss-reading > span:last-child { display: flex; flex-direction: column; }
.marker-tss-reading small { color: #85a2aa; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.marker-tss-reading strong { display: inline-flex; align-items: baseline; gap: 4px; margin-top: 4px; color: #efffff; font-size: 38px; font-weight: 800; letter-spacing: -.06em; line-height: 1; }
.marker-tss-reading strong sup { position: static; top: auto; margin: 0; color: #f6b080; font-size: 13px; font-weight: 700; letter-spacing: 0; line-height: 1; vertical-align: baseline; }
.marker-tss-reading em { margin-top: 11px; color: #d39b7b; font-size: 9px; font-style: normal; font-weight: 700; }

.marker-tss-method { display: flex; width: 100%; max-width: 350px; align-items: center; justify-content: center; gap: 9px; }
.marker-tss-method article { display: flex; min-width: 0; flex: 1; flex-direction: column; align-items: center; gap: 6px; padding: 12px 7px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 16px; background: rgba(255, 255, 255, .025); text-align: center; }
.marker-tss-method article > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 11px; color: #7de0e1; background: rgba(74, 202, 206, .14); font-size: 15px; }
.marker-tss-method article strong { color: #cbe5e8; font-size: 9px; line-height: 1.2; }
.marker-tss-method article b { color: #efffff; font-size: 14px; }
.marker-tss-method article small { color: #7d9da5; font-size: 8px; font-weight: 700; }
.marker-tss-method article.is-lab > span { color: #f8bb8e; background: rgba(224, 145, 97, .14); }
.marker-tss-method article.is-lab b { color: #f4c39e; font-size: 11px; }
.marker-tss-method > i { flex: 0 0 auto; color: #7599a1; font-size: 13px; }

.marker-tss-composition { display: grid; width: 100%; max-width: 340px; gap: 11px; }
.marker-tss-composition > div { display: grid; grid-template-columns: 38px minmax(0, 1fr) 42px; align-items: center; gap: 9px; }
.marker-tss-composition > div > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 11px; font-size: 14px; }
.marker-tss-composition .is-organic { color: #b7e77d; background: rgba(130, 207, 88, .16); }
.marker-tss-composition .is-mineral { color: #a8d9ef; background: rgba(91, 178, 220, .16); }
.marker-tss-composition strong { color: #bcd8dc; font-size: 10px; }
.marker-tss-composition b { color: #e5fafa; font-size: 13px; text-align: right; }
.marker-tss-composition > div::after { grid-column: 2 / 4; height: 5px; border-radius: 99px; background: linear-gradient(90deg, var(--composition-color), rgba(255, 255, 255, .06)); content: ""; }
.marker-tss-composition > div:first-child { --composition-color: #91dc69; }
.marker-tss-composition > div:last-child { --composition-color: #72c8ed; }

.marker-wqi-guide-panel.is-active .marker-tss-particles i { animation: waterly-optical-particle 2.7s ease-in-out infinite; }
.marker-wqi-guide-panel.is-active .marker-tss-particles i:nth-child(2) { animation-delay: .42s; }
.marker-wqi-guide-panel.is-active .marker-tss-particles i:nth-child(3) { animation-delay: .8s; }
.marker-wqi-guide-panel.is-active .marker-tss-particles i:nth-child(4) { animation-delay: 1.1s; }

@keyframes waterly-optical-particle { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(4px, -5px); } }
@keyframes waterly-optical-draw { from { stroke-dashoffset: 430; } to { stroke-dashoffset: 0; } }

html[data-theme="light"] .marker-turbidity-compare article,
html[data-theme="light"] .marker-turbidity-probe,
html[data-theme="light"] .marker-turbidity-ntu,
html[data-theme="light"] .marker-turbidity-units,
html[data-theme="light"] .marker-turbidity-units article,
html[data-theme="light"] .marker-secchi-steps article,
html[data-theme="light"] .marker-secchi-compare,
html[data-theme="light"] .marker-secchi-compare article,
html[data-theme="light"] .marker-tss-method article,
html[data-theme="light"] .marker-tss-composition > div > span { background: rgba(255, 255, 255, .55); }
html[data-theme="light"] .marker-turbidity-compare article,
html[data-theme="light"] .marker-tss-method article { border-color: rgba(46, 122, 128, .16); }
html[data-theme="light"] .marker-turbidity-compare article strong,
html[data-theme="light"] .marker-tss-method article strong,
html[data-theme="light"] .marker-tss-composition strong { color: #42666e; }
html[data-theme="light"] .marker-turbidity-probe > div strong,
html[data-theme="light"] .marker-turbidity-ntu > header span,
html[data-theme="light"] .marker-turbidity-units article strong,
html[data-theme="light"] .marker-secchi-steps > header,
html[data-theme="light"] .marker-secchi-steps article > span,
html[data-theme="light"] .marker-secchi-compare > header strong,
html[data-theme="light"] .marker-secchi-compare article strong,
html[data-theme="light"] .marker-tss-reading strong,
html[data-theme="light"] .marker-tss-method article b { color: #173840; }
html[data-theme="light"] .marker-turbidity-probe > div small,
html[data-theme="light"] .marker-turbidity-probe > div em,
html[data-theme="light"] .marker-turbidity-ntu > footer span,
html[data-theme="light"] .marker-turbidity-units article small,
html[data-theme="light"] .marker-secchi-steps article small,
html[data-theme="light"] .marker-secchi-steps > p small,
html[data-theme="light"] .marker-secchi-compare > header small,
html[data-theme="light"] .marker-secchi-compare article small,
html[data-theme="light"] .marker-tss-method article small { color: #5b7c83; }
html[data-theme="light"] .marker-turbidity-trend header small,
html[data-theme="light"] .marker-tss-trend header small { color: #55777e; }
html[data-theme="light"] .marker-turbidity-trend header b,
html[data-theme="light"] .marker-tss-trend header b { color: #315b63; }
html[data-theme="light"] .marker-turbidity-trend-axis,
html[data-theme="light"] .marker-tss-trend-axis { color: #5b7c83; }

/* Organic optical lessons — SAC254 and its calibrated COD estimate. */
.marker-sac254-reading { display: flex; width: 100%; max-width: 330px; align-items: center; justify-content: center; gap: 24px; }
.marker-sac254-uv { position: relative; display: grid; width: 108px; height: 108px; place-items: center; border: 1px solid rgba(137, 171, 255, .42); border-radius: 50%; color: #dbe4ff; background: radial-gradient(circle at 33% 28%, #a9b9ff, #596bd0 35%, #252e75 72%, #171e4d); box-shadow: 0 0 0 8px rgba(116, 137, 241, .08), 0 0 36px -8px #7a8dfa, inset 9px 10px 17px rgba(255, 255, 255, .25); }
.marker-sac254-uv::before { position: absolute; inset: 14px; border: 1px dashed rgba(215, 225, 255, .4); border-radius: 50%; content: ""; }
.marker-sac254-uv b { position: relative; font-size: 22px; letter-spacing: .04em; }
.marker-sac254-uv i { position: relative; margin-top: -4px; color: #b8c8ff; font-size: 12px; font-style: normal; font-weight: 800; letter-spacing: .08em; }
.marker-sac254-reading > span:last-child { display: flex; flex-direction: column; }
.marker-sac254-reading small { color: #829ab6; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.marker-sac254-reading strong { display: inline-flex; align-items: baseline; gap: 4px; margin-top: 4px; color: #efffff; font-size: 38px; font-weight: 800; letter-spacing: -.06em; line-height: 1; }
.marker-sac254-reading strong sup { position: static; top: auto; margin: 0; color: #a8baff; font-size: 13px; font-weight: 700; letter-spacing: 0; line-height: 1; vertical-align: baseline; }
.marker-sac254-reading em { margin-top: 11px; color: #c6a8e8; font-size: 10px; font-style: normal; font-weight: 700; }

.marker-sac254-beam { width: 100%; max-width: 350px; padding: 10px 13px 9px; border: 1px solid rgba(135, 162, 239, .2); border-radius: 17px; background: rgba(79, 85, 154, .1); }
.marker-sac254-beam header,
.marker-sac254-beam footer { display: flex; align-items: center; justify-content: space-between; }
.marker-sac254-beam header span { display: inline-flex; align-items: center; gap: 6px; color: #b6c5ff; font-size: 10px; font-weight: 800; }
.marker-sac254-beam header b { color: #eef1ff; font-size: 13px; }
.marker-sac254-beam > div { position: relative; display: flex; height: 75px; align-items: center; justify-content: space-between; margin: 7px 8px 5px; }
.marker-sac254-beam > div::before { position: absolute; top: 50%; right: 20px; left: 20px; height: 4px; border-radius: 99px; background: linear-gradient(90deg, #9eaaff, #7465d8 46%, rgba(103, 79, 193, .1)); box-shadow: 0 0 16px rgba(129, 116, 245, .62); content: ""; transform: translateY(-50%); }
.marker-sac254-beam > div > i { z-index: 1; width: 23px; height: 23px; border: 2px solid #e1e6ff; border-radius: 50%; background: #5962ac; box-shadow: 0 0 14px rgba(143, 150, 255, .46); }
.marker-sac254-beam > div > i.is-after { opacity: .35; }
.marker-sac254-beam .is-sample { position: relative; z-index: 1; display: block; width: 99px; height: 58px; border: 1px solid rgba(168, 178, 255, .3); border-radius: 10px; background: linear-gradient(180deg, rgba(122, 113, 203, .33), rgba(46, 46, 105, .5)); }
.marker-sac254-beam .is-sample::before { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 18px, rgba(207, 204, 255, .07) 18px 19px); content: ""; }
.marker-sac254-beam .is-sample b { position: absolute; display: block; width: 7px; height: 7px; border-radius: 50%; background: #d1c8ff; box-shadow: 0 0 8px rgba(209, 200, 255, .7); }
.marker-sac254-beam .is-sample b:nth-child(1) { top: 15px; left: 26px; }
.marker-sac254-beam .is-sample b:nth-child(2) { top: 32px; left: 58px; width: 11px; height: 11px; background: #a7b7ff; }
.marker-sac254-beam .is-sample b:nth-child(3) { top: 37px; left: 26px; width: 4px; height: 4px; }
.marker-sac254-beam footer { color: #7f94ad; font-size: 9px; font-weight: 700; }
.marker-sac254-beam footer b { color: #c4d0ff; }
.marker-wqi-guide-panel.is-active .marker-sac254-beam > div::before { animation: waterly-sac254-pulse 2.2s ease-in-out infinite; }

.marker-sac254-compare { display: flex; width: 100%; max-width: 340px; align-items: center; justify-content: center; gap: 9px; }
.marker-sac254-compare article { display: flex; min-width: 0; flex: 1; flex-direction: column; align-items: center; gap: 7px; padding: 12px 7px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 16px; background: rgba(255, 255, 255, .025); text-align: center; }
.marker-sac254-compare article > span { position: relative; display: block; width: 64px; height: 50px; overflow: hidden; border: 1px solid rgba(206, 211, 255, .45); border-radius: 8px 8px 14px 14px; background: linear-gradient(180deg, rgba(196, 205, 255, .36), rgba(99, 101, 163, .33)); }
.marker-sac254-compare article > span::before { position: absolute; right: -2px; bottom: -2px; left: -2px; height: 62%; background: rgba(112, 121, 205, .26); content: ""; }
.marker-sac254-compare article > span i { position: absolute; z-index: 1; display: block; width: 5px; height: 5px; border-radius: 50%; background: #e6e2ff; box-shadow: 0 0 7px #ded6ff; }
.marker-sac254-compare article > span i:nth-child(1) { top: 18px; left: 26px; }
.marker-sac254-compare article > span i:nth-child(2) { top: 29px; left: 40px; width: 7px; height: 7px; }
.marker-sac254-compare article > span i:nth-child(3) { top: 11px; left: 45px; width: 4px; height: 4px; }
.marker-sac254-compare article > span i:nth-child(4) { top: 33px; left: 18px; width: 8px; height: 8px; }
.marker-sac254-compare article strong { color: #c8d9e8; font-size: 10px; }
.marker-sac254-compare article b { font-size: 14px; }
.marker-sac254-compare .is-low { border-color: rgba(103, 203, 195, .23); }
.marker-sac254-compare .is-low b { color: #70dfc7; }
.marker-sac254-compare .is-high { border-color: rgba(179, 140, 245, .25); }
.marker-sac254-compare .is-high b { color: #be9cf4; }
.marker-sac254-compare > i { flex: 0 0 auto; color: #768fae; font-size: 13px; }

.marker-sac254-trend,
.marker-chzt-trend { width: 100%; max-width: 350px; padding: 5px 10px 8px; }
.marker-sac254-trend header,
.marker-chzt-trend header { display: flex; align-items: flex-end; justify-content: space-between; }
.marker-sac254-trend header span:first-child,
.marker-chzt-trend header span:first-child { display: flex; flex-direction: column; gap: 3px; }
.marker-sac254-trend header small,
.marker-chzt-trend header small { color: #7698a4; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.marker-sac254-trend header b,
.marker-chzt-trend header b { color: #bee4e8; font-size: 15px; }
.marker-sac254-trend .is-rise,
.marker-chzt-trend .is-rise { display: inline-flex; align-items: center; gap: 5px; color: #d0a8f4; font-size: 10px; font-weight: 800; }
.marker-sac254-trend .is-rise i,
.marker-chzt-trend .is-rise i { width: 7px; height: 7px; border-radius: 50%; background: #bc8be9; box-shadow: 0 0 10px #bc8be9; }
.marker-sac254-trend svg,
.marker-chzt-trend svg { display: block; width: 100%; margin-top: 10px; overflow: visible; }
.marker-sac254-trend-band { fill: rgba(143, 139, 235, .11); stroke: rgba(153, 164, 245, .25); stroke-width: 1; stroke-dasharray: 4 4; }
.marker-sac254-trend-area { fill: rgba(174, 135, 229, .14); }
.marker-sac254-trend-line { fill: none; stroke: #bd91ef; stroke-width: 3; stroke-linecap: round; }
.marker-sac254-trend circle { fill: #f5ebff; stroke: #be91ed; stroke-width: 3; filter: drop-shadow(0 0 6px #be91ed); }

.marker-chzt-flow { display: flex; width: 100%; max-width: 345px; align-items: center; justify-content: center; gap: 11px; }
.marker-chzt-flow article { display: flex; min-width: 0; flex: 1; flex-direction: column; align-items: center; gap: 7px; padding: 13px 7px; border: 1px solid rgba(155, 150, 239, .22); border-radius: 17px; background: linear-gradient(145deg, rgba(112, 103, 205, .16), rgba(255, 255, 255, .02)); text-align: center; }
.marker-chzt-flow article > span { display: grid; width: 39px; height: 39px; place-items: center; border-radius: 12px; color: #c3b8ff; background: rgba(133, 117, 218, .2); font-size: 16px; }
.marker-chzt-flow article strong { color: #dce2ff; font-size: 13px; }
.marker-chzt-flow article small { color: #9ea4d5; font-size: 10px; font-weight: 700; }
.marker-chzt-flow article.is-result { border-color: rgba(90, 220, 192, .3); background: linear-gradient(145deg, rgba(56, 190, 173, .16), rgba(255, 255, 255, .02)); }
.marker-chzt-flow article.is-result > span { color: #92ecd6; background: rgba(55, 198, 172, .18); }
.marker-chzt-flow article.is-result small { color: #8fe2c9; }
.marker-chzt-flow > i { flex: 0 0 auto; color: #a99de9; font-size: 15px; }

.marker-chzt-calibration { width: 100%; max-width: 350px; padding: 7px 10px 8px; border: 1px solid rgba(153, 150, 229, .16); border-radius: 16px; background: rgba(102, 91, 176, .08); }
.marker-chzt-calibration header,
.marker-chzt-calibration footer { display: flex; align-items: center; justify-content: space-between; color: #8993ba; font-size: 9px; font-weight: 800; }
.marker-chzt-calibration header b { color: #cec7ff; font-size: 10px; }
.marker-chzt-calibration svg { display: block; width: 100%; margin-top: 7px; overflow: visible; }
.marker-chzt-grid { fill: none; stroke: rgba(188, 195, 239, .14); stroke-width: 1; }
.marker-chzt-line { fill: none; stroke: #8fe0c9; stroke-width: 3; stroke-linecap: round; }
.marker-chzt-calibration circle { fill: #e4fff7; stroke: #66d7b7; stroke-width: 2; }
.marker-chzt-calibration footer { color: #8290b4; }
.marker-chzt-calibration footer span:last-child { color: #abc2ed; }

.marker-chzt-methods { display: grid; width: 100%; max-width: 350px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.marker-chzt-methods article { display: flex; min-height: 112px; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 9px 5px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 15px; background: rgba(255, 255, 255, .025); text-align: center; }
.marker-chzt-methods article > span { display: grid; width: 35px; height: 35px; place-items: center; border-radius: 11px; color: var(--method-color); background: color-mix(in srgb, var(--method-color) 17%, transparent); font-size: 15px; }
.marker-chzt-methods article strong { color: #bed5dc; font-size: 9px; line-height: 1.2; }
.marker-chzt-methods article b { color: var(--method-color); font-size: 11px; }
.marker-chzt-methods .is-online { --method-color: #79dfcc; }
.marker-chzt-methods .is-lab { --method-color: #aebaff; }
.marker-chzt-methods .is-calibration { --method-color: #f2bd82; }
.marker-chzt-trend-area { fill: rgba(111, 215, 187, .12); }
.marker-chzt-trend-line { fill: none; stroke: #77dfbe; stroke-width: 3; stroke-linecap: round; }
.marker-chzt-trend circle { fill: #eafff7; stroke: #60d7b1; stroke-width: 3; filter: drop-shadow(0 0 6px #60d7b1); }
.marker-chzt-trend-axis,
.marker-sac254-trend-axis { display: flex; justify-content: space-between; padding: 0 2px; color: #668793; font-size: 9px; font-weight: 700; }
.marker-wqi-guide-panel.is-active .marker-sac254-trend-line,
.marker-wqi-guide-panel.is-active .marker-chzt-trend-line { stroke-dasharray: 430; animation: waterly-organic-draw 1.5s ease-out both .15s; }

@keyframes waterly-sac254-pulse { 0%, 100% { opacity: .55; transform: translateY(-50%) scaleX(.84); } 50% { opacity: 1; transform: translateY(-50%) scaleX(1); } }
@keyframes waterly-organic-draw { from { stroke-dashoffset: 430; } to { stroke-dashoffset: 0; } }

html[data-theme="light"] .marker-sac254-reading small,
html[data-theme="light"] .marker-sac254-reading em,
html[data-theme="light"] .marker-sac254-trend header small,
html[data-theme="light"] .marker-chzt-trend header small { color: #55777e; }
html[data-theme="light"] .marker-sac254-reading strong,
html[data-theme="light"] .marker-chzt-flow article strong,
html[data-theme="light"] .marker-chzt-trend header b { color: #173840; }
html[data-theme="light"] .marker-sac254-beam,
html[data-theme="light"] .marker-sac254-compare article,
html[data-theme="light"] .marker-chzt-flow article,
html[data-theme="light"] .marker-chzt-calibration,
html[data-theme="light"] .marker-chzt-methods article { background: rgba(255, 255, 255, .55); }
html[data-theme="light"] .marker-sac254-compare article,
html[data-theme="light"] .marker-chzt-flow article,
html[data-theme="light"] .marker-chzt-methods article { border-color: rgba(46, 122, 128, .16); }
html[data-theme="light"] .marker-sac254-compare article strong,
html[data-theme="light"] .marker-chzt-methods article strong { color: #42666e; }
html[data-theme="light"] .marker-sac254-trend header b,
html[data-theme="light"] .marker-chzt-calibration header b { color: #315b63; }
html[data-theme="light"] .marker-sac254-trend-axis,
html[data-theme="light"] .marker-chzt-trend-axis { color: #5b7c83; }

/* Biology and fluorescence lessons — chlorophyll, phycocyanins and UV spectrofluorometry. */
.marker-chlorophyll-reading,
.marker-bga-reading { display: flex; width: 100%; max-width: 335px; align-items: center; justify-content: center; gap: 23px; }
.marker-chlorophyll-leaf,
.marker-bga-orb { position: relative; display: grid; width: 108px; height: 108px; place-items: center; border: 1px solid rgba(166, 235, 104, .42); border-radius: 50%; color: #eaffcf; background: radial-gradient(circle at 33% 28%, #b7ec73, #4a9a5b 39%, #173b45 73%, #102a33); box-shadow: 0 0 0 8px rgba(117, 210, 93, .08), 0 0 35px -8px #77d65f, inset 8px 10px 17px rgba(255, 255, 255, .22); }
.marker-chlorophyll-leaf::before,
.marker-bga-orb::before { position: absolute; inset: 14px; border: 1px dashed rgba(224, 255, 193, .42); border-radius: 50%; content: ""; }
.marker-chlorophyll-leaf i { position: relative; margin-bottom: 22px; color: #f4ffd9; font-size: 25px; }
.marker-chlorophyll-leaf b { position: absolute; bottom: 30px; color: #173c2f; font-size: 12px; letter-spacing: .06em; }
.marker-chlorophyll-reading > span:last-child,
.marker-bga-reading > span:last-child { display: flex; min-width: 0; flex-direction: column; }
.marker-chlorophyll-reading small,
.marker-bga-reading small { color: #8eb0a3; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.marker-chlorophyll-reading strong,
.marker-bga-reading strong { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 4px; margin-top: 4px; color: #efffff; font-size: 34px; font-weight: 800; letter-spacing: -.06em; line-height: 1; }
.marker-chlorophyll-reading strong sup,
.marker-bga-reading strong sup { position: static; top: auto; max-width: 88px; margin: 0; color: #a8e879; font-size: 10px; font-weight: 700; letter-spacing: 0; line-height: 1.1; vertical-align: baseline; }
.marker-chlorophyll-reading em,
.marker-bga-reading em { margin-top: 11px; color: #8ed6a0; font-size: 9px; font-style: normal; font-weight: 700; }

.marker-chlorophyll-spectrum { width: 100%; max-width: 350px; padding: 10px 12px 9px; border: 1px solid rgba(132, 222, 153, .2); border-radius: 17px; background: rgba(65, 154, 106, .08); }
.marker-chlorophyll-spectrum header,
.marker-chlorophyll-spectrum footer { display: flex; align-items: center; justify-content: space-between; gap: 7px; }
.marker-chlorophyll-spectrum header > span { display: inline-flex; min-width: 0; flex-direction: column; gap: 3px; color: #b9eaa6; font-size: 9px; font-weight: 800; }
.marker-chlorophyll-spectrum header > span > i { margin-right: 5px; color: #f9d977; }
.marker-chlorophyll-spectrum header > span.is-emission { color: #ffb5bc; text-align: right; }
.marker-chlorophyll-spectrum header > span.is-emission > i { color: #ff8e9c; }
.marker-chlorophyll-spectrum header > span b { color: #eaffdb; font-size: 12px; }
.marker-chlorophyll-spectrum header > i { flex: 0 0 auto; color: #71979d; font-size: 12px; }
.marker-chlorophyll-spectrum-bars { position: relative; display: flex; height: 89px; align-items: flex-end; justify-content: center; gap: 8px; margin-top: 10px; padding: 0 14px 8px; border-bottom: 1px solid rgba(147, 216, 187, .22); background: repeating-linear-gradient(0deg, transparent 0 20px, rgba(211, 255, 229, .05) 20px 21px); }
.marker-chlorophyll-spectrum-bars i { display: block; width: 20px; height: var(--bar); border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, #ff9fa9, #91e66a 75%, rgba(121, 219, 115, .18)); box-shadow: 0 0 14px rgba(146, 233, 112, .35); transform-origin: bottom; }
.marker-chlorophyll-spectrum-bars b { position: absolute; right: 18%; bottom: 7px; width: 3px; height: 78px; border-radius: 99px; background: #f7ffdc; box-shadow: 0 0 10px #f7ffdc; content: ""; opacity: .75; }
.marker-chlorophyll-spectrum footer { margin-top: 7px; color: #718f98; font-size: 9px; font-weight: 700; }
.marker-chlorophyll-spectrum footer b { color: #d8f6cf; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }

.marker-chlorophyll-context,
.marker-uvf-context { width: 100%; max-width: 350px; padding: 10px 12px 11px; border: 1px solid rgba(123, 211, 166, .16); border-radius: 16px; background: rgba(255, 255, 255, .025); }
.marker-chlorophyll-context header,
.marker-uvf-context header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.marker-chlorophyll-context header strong,
.marker-uvf-context header strong { color: #bfe7d2; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.marker-chlorophyll-context header small,
.marker-uvf-context header small { color: #789ba1; font-size: 9px; font-weight: 800; }
.marker-chlorophyll-context > div,
.marker-uvf-context > div { display: grid; margin-top: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.marker-chlorophyll-context article,
.marker-uvf-context article { display: flex; min-height: 93px; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 8px 5px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 13px; background: rgba(255, 255, 255, .025); text-align: center; }
.marker-chlorophyll-context article > span,
.marker-uvf-context article > span { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 10px; color: var(--biology-color); background: color-mix(in srgb, var(--biology-color) 17%, transparent); font-size: 14px; }
.marker-chlorophyll-context article strong,
.marker-uvf-context article strong { color: #bdd9dc; font-size: 9px; line-height: 1.2; }
.marker-chlorophyll-context article b,
.marker-uvf-context article b { color: var(--biology-color); font-size: 12px; }
.marker-chlorophyll-context article:nth-child(1) { --biology-color: #a8e879; }
.marker-chlorophyll-context article:nth-child(2) { --biology-color: #f6d477; }
.marker-chlorophyll-context article:nth-child(3) { --biology-color: #82d6f2; }

.marker-chlorophyll-trend,
.marker-bga-trend,
.marker-uvf-trend { width: 100%; max-width: 350px; padding: 5px 10px 8px; }
.marker-chlorophyll-trend header,
.marker-bga-trend header,
.marker-uvf-trend header { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.marker-chlorophyll-trend header span:first-child,
.marker-bga-trend header span:first-child,
.marker-uvf-trend header span:first-child { display: flex; flex-direction: column; gap: 3px; }
.marker-chlorophyll-trend header small,
.marker-bga-trend header small,
.marker-uvf-trend header small { color: #7698a4; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.marker-chlorophyll-trend header b,
.marker-bga-trend header b,
.marker-uvf-trend header b { color: #bee4e8; font-size: 15px; }
.marker-chlorophyll-trend header .is-rise,
.marker-bga-trend header .is-rise,
.marker-uvf-trend header .is-rise { display: inline-flex; align-items: center; gap: 5px; color: #b2eb82; font-size: 10px; font-weight: 800; }
.marker-chlorophyll-trend header .is-rise i,
.marker-bga-trend header .is-rise i,
.marker-uvf-trend header .is-rise i { width: 7px; height: 7px; border-radius: 50%; background: #9ee66b; box-shadow: 0 0 10px #9ee66b; }
.marker-chlorophyll-trend svg,
.marker-bga-trend svg,
.marker-uvf-trend svg { display: block; width: 100%; margin-top: 10px; overflow: visible; }
.marker-chlorophyll-trend-band,
.marker-bga-trend-band { fill: rgba(126, 224, 115, .1); stroke: rgba(155, 222, 156, .24); stroke-width: 1; stroke-dasharray: 4 4; }
.marker-chlorophyll-trend-area { fill: rgba(133, 222, 103, .14); }
.marker-chlorophyll-trend-line { fill: none; stroke: #9ce66d; stroke-width: 3; stroke-linecap: round; }
.marker-chlorophyll-trend circle { fill: #f1ffdd; stroke: #94e75e; stroke-width: 3; filter: drop-shadow(0 0 6px #94e75e); }
.marker-bga-trend-band { fill: rgba(70, 196, 224, .1); stroke: rgba(106, 217, 230, .24); }
.marker-bga-trend-area { fill: rgba(77, 205, 229, .13); }
.marker-bga-trend-line { fill: none; stroke: #6edbe7; stroke-width: 3; stroke-linecap: round; }
.marker-bga-trend circle { fill: #e2ffff; stroke: #61dce6; stroke-width: 3; filter: drop-shadow(0 0 6px #61dce6); }
.marker-uvf-trend-band { fill: rgba(180, 147, 244, .1); stroke: rgba(192, 167, 244, .25); stroke-width: 1; stroke-dasharray: 4 4; }
.marker-uvf-trend-area { fill: rgba(186, 145, 241, .13); }
.marker-uvf-trend-line { fill: none; stroke: #c0a2f2; stroke-width: 3; stroke-linecap: round; }
.marker-uvf-trend circle { fill: #f6edff; stroke: #bd98f1; stroke-width: 3; filter: drop-shadow(0 0 6px #bd98f1); }
.marker-chlorophyll-trend-axis,
.marker-bga-trend-axis,
.marker-uvf-trend-axis { display: flex; justify-content: space-between; padding: 0 2px; color: #668793; font-size: 9px; font-weight: 700; }

.marker-bga-orb { border-color: rgba(85, 219, 230, .43); color: #d9ffff; background: radial-gradient(circle at 33% 28%, #76e5e5, #337aa1 40%, #172f5e 73%, #111f42); box-shadow: 0 0 0 8px rgba(71, 197, 224, .08), 0 0 35px -8px #51d8e4, inset 8px 10px 17px rgba(255, 255, 255, .22); }
.marker-bga-orb::before { border-color: rgba(206, 255, 255, .42); }
.marker-bga-orb i { position: relative; margin-bottom: 22px; color: #dcffff; font-size: 21px; }
.marker-bga-orb b { position: absolute; bottom: 30px; color: #173c57; font-size: 13px; letter-spacing: .08em; }
.marker-bga-reading strong sup { color: #69dfe2; }
.marker-bga-reading em { color: #83d8e0; }
.marker-bga-compare { width: 100%; max-width: 350px; padding: 10px 13px 13px; border: 1px solid rgba(80, 211, 223, .18); border-radius: 16px; background: rgba(45, 142, 174, .08); }
.marker-bga-compare header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.marker-bga-compare header strong { color: #bfe9eb; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.marker-bga-compare header small { color: #7fa9b4; font-size: 9px; font-weight: 800; }
.marker-bga-bar { display: grid; margin-top: 13px; grid-template-columns: minmax(0, 1fr) 33px; align-items: center; gap: 10px; }
.marker-bga-bar span { display: flex; align-items: center; gap: 7px; color: #a8c8cf; font-size: 9px; font-weight: 800; }
.marker-bga-bar span i { width: 8px; height: 8px; border-radius: 50%; background: #91e66a; box-shadow: 0 0 8px #91e66a; }
.marker-bga-bar span i.is-phycocyanin { background: #66dce8; box-shadow: 0 0 8px #66dce8; }
.marker-bga-bar b { position: relative; display: block; color: #dffeff; font-size: 12px; text-align: right; }
.marker-bga-bar b::before { position: absolute; right: 0; bottom: -7px; left: calc(-100% - 10px); height: 4px; border-radius: 99px; background: linear-gradient(90deg, var(--bga-bar-color), rgba(255, 255, 255, .07)); content: ""; transform: scaleX(var(--bar)); transform-origin: left; }
.marker-bga-bar:nth-of-type(2) b { --bga-bar-color: #91e66a; }
.marker-bga-bar:nth-of-type(3) b { --bga-bar-color: #66dce8; }
.marker-bga-probe { display: flex; width: 100%; max-width: 350px; align-items: center; justify-content: center; gap: 13px; }
.marker-bga-probe-water { position: relative; display: block; width: 169px; height: 104px; overflow: hidden; border: 1px solid rgba(87, 218, 229, .24); border-radius: 20px; background: linear-gradient(180deg, rgba(63, 192, 206, .24), rgba(19, 59, 103, .78)); box-shadow: inset 0 1px rgba(255, 255, 255, .16), 0 0 25px -12px #65dce9; }
.marker-bga-probe-water::before { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 18px, rgba(205, 255, 255, .05) 18px 19px); content: ""; }
.marker-bga-probe-water > i { position: absolute; z-index: 1; display: block; width: 10px; height: 10px; border-radius: 50%; background: #75dfe4; box-shadow: 0 0 11px #75dfe4; }
.marker-bga-probe-water > i:nth-child(1) { top: 23px; left: 33px; }
.marker-bga-probe-water > i:nth-child(2) { top: 55px; left: 72px; width: 7px; height: 7px; }
.marker-bga-probe-water > i:nth-child(3) { top: 37px; left: 109px; width: 13px; height: 13px; background: #80e5ad; }
.marker-bga-probe-water > i:nth-child(4) { top: 71px; left: 45px; width: 6px; height: 6px; }
.marker-bga-probe-water > i:nth-child(5) { top: 70px; left: 123px; width: 9px; height: 9px; background: #79cbff; }
.marker-bga-probe-water > b { position: absolute; top: 50%; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, #efffff 30%, #efffff 70%, transparent); box-shadow: 0 0 15px #9cffff; content: ""; opacity: .7; }
.marker-bga-probe-tip { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid rgba(117, 233, 230, .38); border-radius: 11px; color: #aefff0; background: rgba(68, 199, 199, .16); font-size: 15px; box-shadow: 0 0 15px -8px #70e6dd; }
.marker-bga-probe > div:last-child { display: flex; min-width: 0; flex-direction: column; gap: 5px; }
.marker-bga-probe > div:last-child small { color: #80a5ae; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.marker-bga-probe > div:last-child strong { color: #c9edef; font-size: 10px; line-height: 1.25; }
.marker-bga-probe > div:last-child em { color: #70d9dc; font-size: 9px; font-style: normal; font-weight: 700; }

.marker-uvf-flow { display: flex; width: 100%; max-width: 350px; align-items: center; justify-content: center; gap: 8px; }
.marker-uvf-flow article { display: flex; min-width: 0; flex: 1; flex-direction: column; align-items: center; gap: 6px; padding: 11px 5px; border: 1px solid rgba(187, 158, 246, .22); border-radius: 15px; background: linear-gradient(145deg, rgba(122, 96, 194, .16), rgba(255, 255, 255, .025)); text-align: center; }
.marker-uvf-flow article > span { display: grid; width: 35px; height: 35px; place-items: center; border-radius: 11px; color: #d6c7ff; background: rgba(152, 126, 220, .2); font-size: 15px; }
.marker-uvf-flow article strong { color: #d8d0f6; font-size: 9px; line-height: 1.2; }
.marker-uvf-flow article b { color: #c3a7fa; font-size: 11px; line-height: 1.15; }
.marker-uvf-flow article.is-sample { border-color: rgba(84, 218, 204, .26); background: linear-gradient(145deg, rgba(48, 169, 166, .15), rgba(255, 255, 255, .025)); }
.marker-uvf-flow article.is-sample > span { color: #9beee0; background: rgba(56, 197, 183, .18); }
.marker-uvf-flow article.is-sample b { color: #85ddcf; }
.marker-uvf-flow article.is-emission { border-color: rgba(255, 169, 151, .25); background: linear-gradient(145deg, rgba(205, 116, 139, .15), rgba(255, 255, 255, .025)); }
.marker-uvf-flow article.is-emission > span { color: #ffb4b6; background: rgba(208, 112, 140, .18); }
.marker-uvf-flow article.is-emission b { color: #ffabae; }
.marker-uvf-flow > i { flex: 0 0 auto; color: #968bb8; font-size: 12px; }

.marker-uvf-spectrum { width: 100%; max-width: 350px; padding: 10px 12px 9px; border: 1px solid rgba(183, 155, 243, .2); border-radius: 16px; background: rgba(115, 91, 179, .08); }
.marker-uvf-spectrum header,
.marker-uvf-spectrum footer { display: flex; align-items: center; justify-content: space-between; gap: 7px; }
.marker-uvf-spectrum header strong { color: #ddd1ff; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.marker-uvf-spectrum header small { color: #a497ca; font-size: 9px; font-weight: 800; }
.marker-uvf-spectrum-chart { position: relative; height: 94px; margin-top: 10px; overflow: hidden; border-bottom: 1px solid rgba(193, 169, 240, .26); background: repeating-linear-gradient(0deg, transparent 0 21px, rgba(231, 219, 255, .05) 21px 22px); }
.marker-uvf-spectrum-chart::before { position: absolute; right: 0; bottom: 13px; left: 0; height: 44px; background: linear-gradient(90deg, transparent, rgba(127, 232, 207, .18) 26%, rgba(127, 232, 207, .04) 58%, transparent); clip-path: polygon(0 74%, 12% 64%, 22% 45%, 31% 52%, 43% 65%, 54% 77%, 67% 62%, 77% 73%, 89% 66%, 100% 76%, 100% 100%, 0 100%); content: ""; }
.marker-uvf-spectrum-chart > i { position: absolute; bottom: 13px; display: block; width: 41%; height: 45px; border-radius: 50% 50% 0 0; border-top: 3px solid var(--spectrum-color); filter: drop-shadow(0 0 5px var(--spectrum-color)); transform: rotate(-8deg); }
.marker-uvf-spectrum-chart > i.is-dom { left: 9%; --spectrum-color: #78e0ca; }
.marker-uvf-spectrum-chart > i.is-oil { right: 5%; width: 36%; height: 58px; --spectrum-color: #ffad9f; transform: rotate(8deg); }
.marker-uvf-spectrum-chart > b { position: absolute; top: 10px; right: 27%; width: 3px; height: 70px; border-radius: 99px; background: #f7e8ff; box-shadow: 0 0 12px #f7e8ff; content: ""; opacity: .72; }
.marker-uvf-spectrum footer { margin-top: 7px; color: #8f80b0; font-size: 9px; font-weight: 700; }
.marker-uvf-spectrum footer span:last-child { color: #f2b3a6; }
.marker-uvf-context { border-color: rgba(172, 149, 237, .18); background: rgba(118, 91, 178, .07); }
.marker-uvf-context article:nth-child(1) { --biology-color: #c2a7fa; }
.marker-uvf-context article:nth-child(2) { --biology-color: #7de0ce; }
.marker-uvf-context article:nth-child(3) { --biology-color: #ffb19f; }
.marker-uvf-trend header .is-rise { color: #d2b7fc; }
.marker-uvf-trend header .is-rise i { background: #c09aef; box-shadow: 0 0 10px #c09aef; }

.marker-wqi-guide-panel.is-active .marker-chlorophyll-spectrum-bars i { animation: waterly-fluorescence-bars 1.8s ease-in-out infinite; }
.marker-wqi-guide-panel.is-active .marker-chlorophyll-spectrum-bars i:nth-child(2) { animation-delay: .12s; }
.marker-wqi-guide-panel.is-active .marker-chlorophyll-spectrum-bars i:nth-child(3) { animation-delay: .24s; }
.marker-wqi-guide-panel.is-active .marker-chlorophyll-spectrum-bars i:nth-child(4) { animation-delay: .36s; }
.marker-wqi-guide-panel.is-active .marker-bga-probe-water > i,
.marker-wqi-guide-panel.is-active .marker-uvf-spectrum-chart > b { animation: waterly-fluorescence-pulse 2s ease-in-out infinite; }
.marker-wqi-guide-panel.is-active .marker-chlorophyll-trend-line,
.marker-wqi-guide-panel.is-active .marker-bga-trend-line,
.marker-wqi-guide-panel.is-active .marker-uvf-trend-line { stroke-dasharray: 430; animation: waterly-fluorescence-draw 1.5s ease-out both .15s; }

@keyframes waterly-fluorescence-bars { 0%, 100% { opacity: .68; transform: scaleY(.82); } 50% { opacity: 1; transform: scaleY(1); } }
@keyframes waterly-fluorescence-pulse { 0%, 100% { opacity: .5; transform: scale(.82); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes waterly-fluorescence-draw { from { stroke-dashoffset: 430; } to { stroke-dashoffset: 0; } }

html[data-theme="light"] .marker-chlorophyll-reading small,
html[data-theme="light"] .marker-chlorophyll-reading em,
html[data-theme="light"] .marker-bga-reading small,
html[data-theme="light"] .marker-bga-reading em,
html[data-theme="light"] .marker-chlorophyll-trend header small,
html[data-theme="light"] .marker-bga-trend header small,
html[data-theme="light"] .marker-uvf-trend header small { color: #55777e; }
html[data-theme="light"] .marker-chlorophyll-reading strong,
html[data-theme="light"] .marker-bga-reading strong,
html[data-theme="light"] .marker-chlorophyll-trend header b,
html[data-theme="light"] .marker-bga-trend header b,
html[data-theme="light"] .marker-uvf-trend header b { color: #173840; }
html[data-theme="light"] .marker-chlorophyll-context,
html[data-theme="light"] .marker-chlorophyll-context article,
html[data-theme="light"] .marker-bga-compare,
html[data-theme="light"] .marker-uvf-context,
html[data-theme="light"] .marker-uvf-context article { border-color: rgba(46, 122, 128, .16); background: rgba(255, 255, 255, .55); }
html[data-theme="light"] .marker-chlorophyll-context header strong,
html[data-theme="light"] .marker-uvf-context header strong,
html[data-theme="light"] .marker-bga-compare header strong { color: #315b63; }
html[data-theme="light"] .marker-chlorophyll-context article strong,
html[data-theme="light"] .marker-uvf-context article strong,
html[data-theme="light"] .marker-bga-bar span { color: #42666e; }
html[data-theme="light"] .marker-chlorophyll-context header small,
html[data-theme="light"] .marker-uvf-context header small,
html[data-theme="light"] .marker-bga-compare header small,
html[data-theme="light"] .marker-uvf-flow article strong { color: #5b7c83; }
html[data-theme="light"] .marker-chlorophyll-spectrum,
html[data-theme="light"] .marker-uvf-spectrum,
html[data-theme="light"] .marker-uvf-flow article { background: rgba(255, 255, 255, .55); }
html[data-theme="light"] .marker-chlorophyll-spectrum,
html[data-theme="light"] .marker-bga-compare,
html[data-theme="light"] .marker-uvf-spectrum,
html[data-theme="light"] .marker-uvf-flow article { border-color: rgba(46, 122, 128, .16); }
html[data-theme="light"] .marker-chlorophyll-spectrum header > span,
html[data-theme="light"] .marker-chlorophyll-spectrum header > span.is-emission,
html[data-theme="light"] .marker-bga-compare header small,
html[data-theme="light"] .marker-bga-compare header strong,
html[data-theme="light"] .marker-uvf-flow article b,
html[data-theme="light"] .marker-uvf-spectrum footer span:last-child { color: #47737b; }
html[data-theme="light"] .marker-chlorophyll-spectrum header > span b,
html[data-theme="light"] .marker-chlorophyll-spectrum footer b,
html[data-theme="light"] .marker-uvf-spectrum header strong { color: #315b63; }
html[data-theme="light"] .marker-chlorophyll-spectrum footer,
html[data-theme="light"] .marker-uvf-spectrum footer { color: #5b7c83; }
html[data-theme="light"] .marker-chlorophyll-trend-axis,
html[data-theme="light"] .marker-bga-trend-axis,
html[data-theme="light"] .marker-uvf-trend-axis { color: #5b7c83; }

@media (max-width: 380px) {
    .marker-chlorophyll-reading,
    .marker-bga-reading { gap: 15px; }
    .marker-chlorophyll-leaf,
    .marker-bga-orb { width: 94px; height: 94px; }
    .marker-chlorophyll-reading strong,
    .marker-bga-reading strong { font-size: 29px; }
    .marker-uvf-flow { gap: 4px; }
    .marker-uvf-flow > i { font-size: 10px; }
    .marker-uvf-flow article { padding-inline: 3px; }
}

/* Ion-selective electrodes — reading, electrochemical cell, selectivity and trend. */
.marker-ise-reading {
    display: flex;
    width: 100%;
    max-width: 335px;
    align-items: center;
    justify-content: center;
    gap: 23px;
}

.marker-ise-orb {
    position: relative;
    display: grid;
    width: 108px;
    height: 108px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--ise-color) 48%, transparent);
    border-radius: 50%;
    color: #efffff;
    background: radial-gradient(circle at 33% 28%, color-mix(in srgb, var(--ise-color) 86%, white), color-mix(in srgb, var(--ise-color) 52%, #123746) 40%, #153340 72%, #0c252f);
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--ise-color) 9%, transparent), 0 0 35px -8px var(--ise-color), inset 8px 10px 17px rgba(255, 255, 255, .2);
}

.marker-ise-orb::before {
    position: absolute;
    inset: 14px;
    border: 1px dashed rgba(236, 255, 255, .42);
    border-radius: 50%;
    content: "";
}

.marker-ise-orb i { position: relative; margin-bottom: 24px; color: #f0ffff; font-size: 21px; }
.marker-ise-orb b { position: absolute; right: 8px; bottom: 29px; left: 8px; color: #0b2731; font-size: 14px; font-weight: 900; letter-spacing: -.02em; text-align: center; }
.marker-ise-reading > span:last-child { display: flex; min-width: 0; flex-direction: column; }
.marker-ise-reading small { color: #85a8b1; font-size: 9px; font-weight: 800; letter-spacing: .08em; line-height: 1.25; text-transform: uppercase; }
.marker-ise-reading strong { display: flex; align-items: baseline; gap: 6px; margin-top: 5px; color: #efffff; font-size: 35px; font-weight: 800; letter-spacing: -.06em; line-height: 1.05; }
.marker-ise-reading strong sup { position: static; top: auto; max-width: 90px; margin: 0; color: var(--ise-color); font-size: 12px; font-weight: 700; letter-spacing: 0; line-height: 1; vertical-align: baseline; }
.marker-ise-reading em { margin-top: 11px; color: var(--ise-color); font-size: 9px; font-style: normal; font-weight: 800; }

.marker-ise-cell,
.marker-ise-factors {
    width: 100%;
    max-width: 350px;
    padding: 11px 12px 12px;
    border: 1px solid color-mix(in srgb, var(--ise-color) 24%, transparent);
    border-radius: 17px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--ise-color) 10%, transparent), rgba(255, 255, 255, .02));
}

.marker-ise-cell header,
.marker-ise-cell footer,
.marker-ise-factors header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.marker-ise-cell header span { display: inline-flex; align-items: center; gap: 6px; color: #b9d9de; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.marker-ise-cell header span i { color: var(--ise-color); }
.marker-ise-cell header b,
.marker-ise-cell footer strong { color: var(--ise-color); font-size: 12px; }
.marker-ise-cell-body { display: grid; min-height: 105px; grid-template-columns: minmax(0, 1fr) 11px minmax(0, 1fr) 11px minmax(0, 1fr); align-items: center; gap: 4px; margin-top: 8px; }
.marker-ise-cell-body > i { color: color-mix(in srgb, var(--ise-color) 64%, #76959d); font-size: 9px; text-align: center; }
.marker-ise-reference,
.marker-ise-membrane,
.marker-ise-sample { position: relative; display: flex; min-width: 0; min-height: 91px; flex-direction: column; align-items: center; justify-content: center; gap: 7px; border: 1px solid rgba(255, 255, 255, .07); border-radius: 13px; background: rgba(255, 255, 255, .025); text-align: center; }
.marker-ise-reference > i { color: var(--ise-color); font-size: 18px; }
.marker-ise-reference small,
.marker-ise-membrane small,
.marker-ise-sample small { color: #86a4ac; font-size: 8px; font-weight: 800; line-height: 1.2; }
.marker-ise-membrane b { display: block; width: 10px; height: 47px; border: 2px solid color-mix(in srgb, var(--ise-color) 78%, white); border-radius: 99px; background: color-mix(in srgb, var(--ise-color) 22%, transparent); box-shadow: 0 0 15px color-mix(in srgb, var(--ise-color) 42%, transparent); }
.marker-ise-sample { overflow: hidden; }
.marker-ise-sample > b { position: relative; z-index: 2; color: var(--ise-color); font-size: 16px; text-shadow: 0 0 10px color-mix(in srgb, var(--ise-color) 65%, transparent); }
.marker-ise-sample > i { position: absolute; display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--ise-color); box-shadow: 0 0 8px var(--ise-color); opacity: .7; }
.marker-ise-sample > i:nth-child(1) { top: 15px; left: 17px; }
.marker-ise-sample > i:nth-child(2) { top: 24px; right: 14px; width: 4px; height: 4px; }
.marker-ise-sample > i:nth-child(3) { right: 22px; bottom: 22px; }
.marker-ise-sample > i:nth-child(4) { bottom: 16px; left: 12px; width: 4px; height: 4px; }
.marker-ise-cell footer { padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .06); color: #7899a2; font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

.marker-ise-factors header strong { color: #c1dfe3; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.marker-ise-factors header small { color: #7698a1; font-size: 9px; font-weight: 800; }
.marker-ise-factors > div { display: grid; margin-top: 11px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.marker-ise-factors article { display: flex; min-width: 0; min-height: 94px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 8px 4px; border: 1px solid rgba(255, 255, 255, .07); border-radius: 13px; background: rgba(255, 255, 255, .025); text-align: center; }
.marker-ise-factors article > span { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 10px; color: var(--ise-color); background: color-mix(in srgb, var(--ise-color) 16%, transparent); font-size: 12px; font-weight: 900; }
.marker-ise-factors article strong { color: #b8d5d9; font-size: 8px; line-height: 1.2; }
.marker-ise-factors article small { overflow-wrap: anywhere; color: #75959e; font-size: 7px; font-weight: 700; line-height: 1.2; }
.marker-ise-factors article.is-target { border-color: color-mix(in srgb, var(--ise-color) 26%, transparent); background: color-mix(in srgb, var(--ise-color) 8%, transparent); }

.marker-ise-trend,
.marker-atmos-trend { width: 100%; max-width: 350px; padding: 5px 10px 8px; }
.marker-ise-trend header,
.marker-atmos-trend header { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.marker-ise-trend header span:first-child,
.marker-atmos-trend header span:first-child { display: flex; flex-direction: column; gap: 3px; }
.marker-ise-trend header small,
.marker-atmos-trend header small { color: #7698a4; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.marker-ise-trend header b,
.marker-atmos-trend header b { color: #bee4e8; font-size: 15px; }
.marker-ise-trend header .is-rise,
.marker-atmos-trend header .is-current { display: inline-flex; align-items: center; gap: 5px; color: var(--trend-color, var(--ise-color)); font-size: 10px; font-weight: 800; }
.marker-ise-trend header .is-rise i,
.marker-atmos-trend header .is-current i { width: 7px; height: 7px; border-radius: 50%; background: var(--trend-color, var(--ise-color)); box-shadow: 0 0 10px var(--trend-color, var(--ise-color)); }
.marker-ise-trend svg,
.marker-atmos-trend svg { display: block; width: 100%; margin-top: 10px; overflow: visible; }
.marker-ise-trend-band,
.marker-atmos-trend-band { fill: color-mix(in srgb, var(--trend-color, var(--ise-color)) 9%, transparent); stroke: color-mix(in srgb, var(--trend-color, var(--ise-color)) 28%, transparent); stroke-width: 1; stroke-dasharray: 4 4; }
.marker-ise-trend-area,
.marker-atmos-trend-area { fill: color-mix(in srgb, var(--trend-color, var(--ise-color)) 14%, transparent); }
.marker-ise-trend-line,
.marker-atmos-trend-line { fill: none; stroke: var(--trend-color, var(--ise-color)); stroke-width: 3; stroke-linecap: round; }
.marker-ise-trend circle,
.marker-atmos-trend circle { fill: #efffff; stroke: var(--trend-color, var(--ise-color)); stroke-width: 3; filter: drop-shadow(0 0 6px var(--trend-color, var(--ise-color))); }
.marker-ise-trend-axis,
.marker-atmos-trend-axis { display: flex; justify-content: space-between; padding: 0 2px; color: #668793; font-size: 9px; font-weight: 700; }

/* Chapter 05 — local atmospheric context around the measuring point. */
.marker-atmos-reading { display: flex; width: 100%; max-width: 335px; align-items: center; justify-content: center; gap: 23px; --atmos-color: #ffbe62; }
.marker-atmos-reading.is-humidity { --atmos-color: #71d6ef; }
.marker-atmos-orb { position: relative; display: grid; width: 108px; height: 108px; flex: 0 0 auto; place-items: center; border: 1px solid color-mix(in srgb, var(--atmos-color) 45%, transparent); border-radius: 50%; color: #efffff; background: radial-gradient(circle at 33% 28%, color-mix(in srgb, var(--atmos-color) 82%, white), color-mix(in srgb, var(--atmos-color) 45%, #173947) 40%, #173641 72%, #0d2730); box-shadow: 0 0 0 8px color-mix(in srgb, var(--atmos-color) 9%, transparent), 0 0 35px -8px var(--atmos-color), inset 8px 10px 17px rgba(255, 255, 255, .2); }
.marker-atmos-orb::before { position: absolute; inset: 14px; border: 1px dashed rgba(236, 255, 255, .42); border-radius: 50%; content: ""; }
.marker-atmos-orb i { position: relative; margin-bottom: 24px; color: #efffff; font-size: 22px; }
.marker-atmos-orb b { position: absolute; bottom: 29px; color: #123039; font-size: 14px; font-weight: 900; }
.marker-atmos-reading > span:last-child { display: flex; min-width: 0; flex-direction: column; }
.marker-atmos-reading small { color: #85a8b1; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.marker-atmos-reading strong { display: inline-flex; align-items: baseline; gap: 4px; margin-top: 5px; color: #efffff; font-size: 37px; font-weight: 800; letter-spacing: -.06em; line-height: 1; }
.marker-atmos-reading strong sup { position: static; top: auto; margin: 0; color: var(--atmos-color); font-size: 13px; font-weight: 700; letter-spacing: 0; line-height: 1; vertical-align: baseline; }
.marker-atmos-reading em { margin-top: 11px; color: var(--atmos-color); font-size: 9px; font-style: normal; font-weight: 800; }

.marker-atmos-shield,
.marker-atmos-weather,
.marker-atmos-pressure-oxygen,
.marker-atmos-exchange { display: flex; width: 100%; max-width: 350px; align-items: center; justify-content: center; gap: 10px; }
.marker-atmos-shield article,
.marker-atmos-weather article,
.marker-atmos-pressure-oxygen article,
.marker-atmos-exchange article { display: flex; min-width: 0; min-height: 116px; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 10px 7px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 15px; background: rgba(255, 255, 255, .025); text-align: center; }
.marker-atmos-shield > i,
.marker-atmos-weather > i,
.marker-atmos-pressure-oxygen > i { flex: 0 0 auto; color: #6e929b; font-size: 11px; }
.marker-atmos-shield article > span,
.marker-atmos-weather article > span,
.marker-atmos-pressure-oxygen article > span,
.marker-atmos-exchange article > span { display: grid; width: 35px; height: 35px; place-items: center; border-radius: 11px; color: var(--card-color); background: color-mix(in srgb, var(--card-color) 16%, transparent); font-size: 15px; }
.marker-atmos-shield article strong,
.marker-atmos-weather article strong,
.marker-atmos-pressure-oxygen article strong,
.marker-atmos-exchange article strong { color: #c8e2e5; font-size: 12px; line-height: 1.2; }
.marker-atmos-shield article small,
.marker-atmos-weather article small,
.marker-atmos-pressure-oxygen article small,
.marker-atmos-exchange article small { color: #7c9ba3; font-size: 8px; font-weight: 800; line-height: 1.25; }
.marker-atmos-shield .is-exposed { --card-color: #ffb95f; }
.marker-atmos-shield .is-shielded { --card-color: #62dcca; border-color: rgba(98, 220, 202, .24); }
.marker-atmos-weather .is-low { --card-color: #72bff4; }
.marker-atmos-weather .is-high { --card-color: #ffca68; }
.marker-atmos-pressure-oxygen article { --card-color: #82c9e2; }
.marker-atmos-pressure-oxygen .is-result { --card-color: #63e0c2; border-color: rgba(99, 224, 194, .24); }
.marker-atmos-exchange article { --card-color: #7dd1e5; }
.marker-atmos-exchange article.is-water { --card-color: #4ba8ec; }
.marker-atmos-exchange-flow { position: relative; display: grid; width: 38px; flex: 0 0 38px; place-items: center; color: #81c9d8; }
.marker-atmos-exchange-flow b { position: absolute; right: 0; left: 0; height: 1px; background: repeating-linear-gradient(90deg, #68c8d4 0 4px, transparent 4px 8px); }
.marker-atmos-exchange-flow i { position: relative; z-index: 1; padding: 5px; background: #0d2b34; font-size: 11px; }

.marker-atmos-pressure-gauge { display: grid; width: 100%; max-width: 350px; place-items: center; }
.marker-atmos-pressure-gauge > div { position: relative; display: grid; width: 170px; height: 170px; place-items: center; border-radius: 50%; background: conic-gradient(from 225deg, #66c9f0 0 25%, #66e0c6 25% 55%, #f4c968 55% 75%, rgba(255, 255, 255, .07) 75% 100%); box-shadow: 0 0 32px -16px #68d7df; }
.marker-atmos-pressure-gauge > div::before { position: absolute; inset: 13px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #173c46, #092630 70%); box-shadow: inset 0 1px rgba(255, 255, 255, .09); content: ""; }
.marker-atmos-pressure-gauge > div > i { position: absolute; z-index: 2; bottom: 50%; left: calc(50% - 2px); width: 4px; height: 56px; border-radius: 99px; background: #efffff; box-shadow: 0 0 8px #efffff; transform: rotate(var(--pressure-angle)); transform-origin: 2px 56px; }
.marker-atmos-pressure-gauge > div > i::after { position: absolute; bottom: -7px; left: -5px; width: 14px; height: 14px; border-radius: 50%; background: #efffff; content: ""; }
.marker-atmos-pressure-gauge strong,
.marker-atmos-pressure-gauge small { position: absolute; z-index: 3; }
.marker-atmos-pressure-gauge strong { bottom: 42px; display: inline-flex; align-items: baseline; gap: 3px; color: #efffff; font-size: 25px; letter-spacing: -.05em; line-height: 1; }
.marker-atmos-pressure-gauge strong sup { position: static; top: auto; margin: 0; color: #6fdaca; font-size: 9px; font-weight: 700; letter-spacing: 0; line-height: 1; vertical-align: baseline; }
.marker-atmos-pressure-gauge small { bottom: 27px; color: #7799a2; font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

.marker-atmos-humidity-scale { width: 100%; max-width: 350px; padding: 13px 15px; border: 1px solid rgba(103, 211, 235, .2); border-radius: 17px; background: rgba(70, 170, 195, .07); }
.marker-atmos-humidity-scale header,
.marker-atmos-humidity-scale footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #789aa3; font-size: 8px; font-weight: 800; }
.marker-atmos-humidity-scale header strong { color: #80e3f3; font-size: 18px; }
.marker-atmos-humidity-scale > div { position: relative; height: 18px; margin: 17px 0 8px; overflow: visible; border-radius: 99px; background: linear-gradient(90deg, #f5cc70, #68dac9 55%, #62c5ed); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.marker-atmos-humidity-scale > div > i { position: absolute; top: 50%; left: var(--humidity-level); display: grid; width: 30px; height: 30px; place-items: center; border: 3px solid #efffff; border-radius: 50%; background: #56bfdd; box-shadow: 0 0 17px #64d6eb; transform: translate(-50%, -50%); }
.marker-atmos-humidity-scale > div > i b { width: 6px; height: 9px; border-radius: 50% 50% 55% 55%; background: #efffff; clip-path: polygon(50% 0, 100% 62%, 83% 100%, 17% 100%, 0 62%); }

.marker-atmos-dew { display: grid; width: 100%; max-width: 350px; grid-template-columns: minmax(0, 1fr) 12px minmax(0, 1fr); align-items: center; gap: 8px; }
.marker-atmos-dew article { display: flex; min-width: 0; min-height: 106px; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 15px; background: rgba(255, 255, 255, .025); text-align: center; }
.marker-atmos-dew article > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 11px; color: #ffc368; background: rgba(255, 195, 104, .15); }
.marker-atmos-dew article.is-dew > span { color: #68d8ed; background: rgba(104, 216, 237, .15); }
.marker-atmos-dew article strong { color: #c8e2e5; font-size: 13px; }
.marker-atmos-dew article small { color: #7d9ca4; font-size: 8px; font-weight: 800; }
.marker-atmos-dew > i { color: #73949c; font-size: 10px; text-align: center; }
.marker-atmos-dew-note { display: flex; grid-column: 1 / -1; align-items: center; justify-content: center; gap: 6px; color: #75ccdf; font-size: 9px; font-weight: 800; }

.marker-atmos-trend.is-temperature { --trend-color: #ffbd68; }
.marker-atmos-trend.is-pressure { --trend-color: #6dd9c7; }
.marker-atmos-trend.is-humidity { --trend-color: #69cfee; }
.marker-wqi-guide-panel.is-active .marker-ise-sample > i { animation: waterly-ise-ion 2.2s ease-in-out infinite alternate; }
.marker-wqi-guide-panel.is-active .marker-ise-sample > i:nth-child(2),
.marker-wqi-guide-panel.is-active .marker-ise-sample > i:nth-child(4) { animation-delay: -.9s; }
.marker-wqi-guide-panel.is-active .marker-ise-membrane b { animation: waterly-ise-membrane 2s ease-in-out infinite; }
.marker-wqi-guide-panel.is-active .marker-ise-trend-line,
.marker-wqi-guide-panel.is-active .marker-atmos-trend-line { stroke-dasharray: 430; animation: waterly-ise-draw 1.5s ease-out both .15s; }
.marker-wqi-guide-panel.is-active .marker-atmos-pressure-gauge > div > i { animation: waterly-atmos-gauge .9s cubic-bezier(.2, .8, .25, 1) both; }

@keyframes waterly-ise-ion { from { opacity: .4; transform: translate(-2px, 4px); } to { opacity: 1; transform: translate(3px, -4px); } }
@keyframes waterly-ise-membrane { 0%, 100% { box-shadow: 0 0 10px color-mix(in srgb, var(--ise-color) 28%, transparent); } 50% { box-shadow: 0 0 22px color-mix(in srgb, var(--ise-color) 72%, transparent); } }
@keyframes waterly-ise-draw { from { stroke-dashoffset: 430; } to { stroke-dashoffset: 0; } }
@keyframes waterly-atmos-gauge { from { transform: rotate(-130deg); } to { transform: rotate(var(--pressure-angle)); } }

html[data-theme="light"] .marker-ise-reading strong,
html[data-theme="light"] .marker-atmos-reading strong,
html[data-theme="light"] .marker-ise-trend header b,
html[data-theme="light"] .marker-atmos-trend header b,
html[data-theme="light"] .marker-atmos-pressure-gauge strong { color: #173840; }
html[data-theme="light"] .marker-ise-reading small,
html[data-theme="light"] .marker-atmos-reading small,
html[data-theme="light"] .marker-ise-reference small,
html[data-theme="light"] .marker-ise-membrane small,
html[data-theme="light"] .marker-ise-sample small,
html[data-theme="light"] .marker-ise-factors header small,
html[data-theme="light"] .marker-ise-factors article small,
html[data-theme="light"] .marker-ise-trend header small,
html[data-theme="light"] .marker-atmos-trend header small,
html[data-theme="light"] .marker-ise-trend-axis,
html[data-theme="light"] .marker-atmos-trend-axis { color: #58777e; }
html[data-theme="light"] .marker-ise-cell,
html[data-theme="light"] .marker-ise-factors,
html[data-theme="light"] .marker-ise-reference,
html[data-theme="light"] .marker-ise-membrane,
html[data-theme="light"] .marker-ise-sample,
html[data-theme="light"] .marker-ise-factors article,
html[data-theme="light"] .marker-atmos-shield article,
html[data-theme="light"] .marker-atmos-weather article,
html[data-theme="light"] .marker-atmos-pressure-oxygen article,
html[data-theme="light"] .marker-atmos-exchange article,
html[data-theme="light"] .marker-atmos-dew article { border-color: rgba(46, 122, 128, .16); background: rgba(255, 255, 255, .55); }
html[data-theme="light"] .marker-ise-cell header span,
html[data-theme="light"] .marker-ise-factors header strong,
html[data-theme="light"] .marker-ise-factors article strong,
html[data-theme="light"] .marker-atmos-shield article strong,
html[data-theme="light"] .marker-atmos-weather article strong,
html[data-theme="light"] .marker-atmos-pressure-oxygen article strong,
html[data-theme="light"] .marker-atmos-exchange article strong,
html[data-theme="light"] .marker-atmos-dew article strong { color: #315b63; }
html[data-theme="light"] .marker-atmos-shield article small,
html[data-theme="light"] .marker-atmos-weather article small,
html[data-theme="light"] .marker-atmos-pressure-oxygen article small,
html[data-theme="light"] .marker-atmos-exchange article small,
html[data-theme="light"] .marker-atmos-dew article small,
html[data-theme="light"] .marker-atmos-humidity-scale header,
html[data-theme="light"] .marker-atmos-humidity-scale footer { color: #5b7c83; }
html[data-theme="light"] .marker-atmos-exchange-flow i { background: #f2faf9; }
html[data-theme="light"] .marker-atmos-pressure-gauge > div::before { background: radial-gradient(circle at 50% 35%, #f7ffff, #dcefed 72%); }
html[data-theme="light"] .marker-atmos-humidity-scale { border-color: rgba(46, 122, 128, .17); background: rgba(255, 255, 255, .55); }

@media (max-width: 380px) {
    .marker-ise-reading,
    .marker-atmos-reading { gap: 15px; }
    .marker-ise-orb,
    .marker-atmos-orb { width: 94px; height: 94px; }
    .marker-ise-orb b,
    .marker-atmos-orb b { bottom: 24px; }
    .marker-ise-reading strong,
    .marker-atmos-reading strong { font-size: 30px; }
    .marker-ise-cell,
    .marker-ise-factors,
    .marker-atmos-humidity-scale { padding-inline: 9px; }
    .marker-ise-cell-body { gap: 2px; }
    .marker-ise-factors > div { gap: 5px; }
    .marker-atmos-shield,
    .marker-atmos-weather,
    .marker-atmos-pressure-oxygen,
    .marker-atmos-exchange { gap: 6px; }
    .marker-atmos-exchange-flow { width: 27px; flex-basis: 27px; }
}

/* Chapter 04.2 — conductance: ions, units, temperature, ranges and a jump. */
.marker-param-cell {
    display: grid;
    width: 100%;
    max-width: 330px;
    grid-template-columns: 54px minmax(0, 1fr) 54px;
    align-items: stretch;
    gap: 10px;
    height: 150px;
}

.marker-param-electrode {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 12px;
    background: linear-gradient(180deg, #d6e5ee, #8ba3b3);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 12px 26px -20px #000;
}

.marker-param-electrode b { color: #0a1a22; font-size: 22px; font-weight: 800; line-height: 1; }
.marker-param-electrode small { display: none; }
.marker-param-electrode.is-negative { background: linear-gradient(180deg, #cfe0ea, #7f97a8); }

.marker-param-ions {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(112, 200, 220, .16);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(45, 152, 180, .16), rgba(10, 40, 52, .5));
}

.marker-param-ions i {
    position: absolute;
    top: calc(10% + var(--ion) * 10%);
    display: grid;
    width: 17px;
    height: 17px;
    place-items: center;
    border-radius: 50%;
    font-size: 10px;
    font-style: normal;
    font-weight: 800;
}

.marker-param-ions .is-cation { color: #06202a; background: #f8b25c; box-shadow: 0 0 12px rgba(248, 178, 92, .7); }
.marker-param-ions .is-anion { color: #06202a; background: #6fd8e8; box-shadow: 0 0 12px rgba(111, 216, 232, .7); }

/* Cations drift to the negative plate, anions the other way - that is the current. */
.marker-wqi-guide-panel.is-active .marker-param-ions .is-cation {
    animation: waterly-param-cation 4.2s linear infinite;
    animation-delay: calc(var(--ion) * -.5s);
}

.marker-wqi-guide-panel.is-active .marker-param-ions .is-anion {
    animation: waterly-param-anion 4.2s linear infinite;
    animation-delay: calc(var(--ion) * -.5s);
}

.marker-param-units {
    display: flex;
    width: 100%;
    max-width: 340px;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.marker-param-units article {
    display: flex;
    width: 88px;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 12px 6px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 14px;
    background: rgba(255, 255, 255, .02);
    text-align: center;
}

.marker-param-units article.is-source {
    border-color: color-mix(in srgb, var(--wqi-color) 42%, transparent);
    background: linear-gradient(160deg, color-mix(in srgb, var(--wqi-color) 14%, transparent), rgba(255, 255, 255, .02));
    box-shadow: 0 16px 34px -28px var(--wqi-color);
}

.marker-param-units article small { color: #7c99a5; font-size: 9px; font-weight: 700; line-height: 1.2; }
.marker-param-units article strong { color: #eafcff; font-size: 21px; font-weight: 800; letter-spacing: -.03em; }
.marker-param-units article span { color: #6c8894; font-size: 9px; font-weight: 700; }
.marker-param-units em { color: #5f7e89; font-size: 9px; font-style: normal; font-weight: 700; white-space: nowrap; }

.marker-param-temperature {
    display: grid;
    width: 100%;
    max-width: 330px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 9px;
}

.marker-param-temperature article {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 8px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 14px;
    background: rgba(255, 255, 255, .02);
}

.marker-param-temperature article small { color: #c8e3ec; font-size: 20px; font-weight: 800; letter-spacing: -.03em; }
.marker-param-temperature article em { color: #7c99a5; font-size: 9px; font-style: normal; font-weight: 700; }

.marker-param-temp-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 99px;
    font-size: 10px;
    font-weight: 800;
}

.marker-param-temp-badge.is-cold { color: #bfe6ff; background: rgba(56, 141, 214, .22); }
.marker-param-temp-badge.is-warm { color: #ffd9a8; background: rgba(214, 141, 56, .22); }
.marker-param-temp-badge.is-reference { color: #06202a; background: var(--wqi-color); }

.marker-param-temp-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: color-mix(in srgb, var(--wqi-color) 70%, #9ab6c1);
    font-size: 16px;
}

.marker-param-temp-arrow b { color: #9ab6c1; font-size: 10px; font-weight: 700; white-space: nowrap; }

.marker-param-temperature .is-result {
    grid-column: 2;
    border-color: color-mix(in srgb, var(--wqi-color) 42%, transparent);
    background: linear-gradient(160deg, color-mix(in srgb, var(--wqi-color) 13%, transparent), rgba(255, 255, 255, .02));
}

.marker-param-scale {
    display: grid;
    width: 100%;
    max-width: 340px;
    gap: 6px;
}

.marker-param-scale > header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 2px;
}

.marker-param-scale > header strong { color: #eafcff; font-size: 13px; font-weight: 700; }
.marker-param-scale > header small { color: #6c8894; font-size: 10px; font-weight: 700; }

.marker-param-scale article {
    display: grid;
    grid-template-columns: 124px minmax(0, 1fr) 72px;
    align-items: center;
    gap: 10px;
}

.marker-param-scale article small { color: #9ab6c1; font-size: 10px; font-weight: 700; white-space: nowrap; }
.marker-param-scale article b { color: #7c99a5; font-size: 10px; font-weight: 700; text-align: right; white-space: nowrap; }

.marker-param-scale article span {
    height: 7px;
    overflow: hidden;
    border-radius: 99px;
    background: rgba(255, 255, 255, .05);
}

.marker-param-scale article span i {
    display: block;
    width: var(--level);
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--wqi-color) 45%, #38bdd0), var(--wqi-color));
    box-shadow: 0 0 12px -2px var(--wqi-color);
    transform-origin: left center;
}

.marker-wqi-guide-panel.is-active .marker-param-scale article span i {
    animation: waterly-param-grow .7s cubic-bezier(.2, .8, .25, 1) both;
    animation-delay: calc(var(--band) * .09s + .15s);
}

.marker-param-jump {
    display: flex;
    width: 100%;
    max-width: 340px;
    flex-direction: column;
    gap: 12px;
}

.marker-param-jump svg { width: 100%; height: auto; }

.marker-wqi-guide-panel.is-active .marker-param-jump-line {
    stroke-dasharray: 420;
    animation: waterly-param-draw 1.6s ease-out both .2s;
}

.marker-wqi-guide-panel.is-active .marker-param-jump-dot {
    animation: waterly-param-alert 1.8s ease-in-out infinite 1.4s;
}

.marker-param-jump-causes {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.marker-param-jump-causes span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 10px;
    border: 1px solid rgba(244, 63, 94, .26);
    border-radius: 99px;
    color: #f0b7c1;
    background: rgba(244, 63, 94, .08);
    font-size: 10px;
    font-weight: 700;
}

.marker-param-jump-causes span i { color: #fb7185; }

@keyframes waterly-param-cation {
    0%, 100% { left: 62%; }
    50% { left: 8%; }
}

@keyframes waterly-param-anion {
    0%, 100% { left: 14%; }
    50% { left: 74%; }
}

@keyframes waterly-param-grow {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@keyframes waterly-param-draw {
    from { stroke-dashoffset: 420; }
    to { stroke-dashoffset: 0; }
}

@keyframes waterly-param-alert {
    0%, 100% { r: 5; opacity: 1; }
    50% { r: 7.5; opacity: .65; }
}

@media (max-width: 640px) {
    .marker-param-units article { width: 76px; padding: 10px 4px; }
    .marker-param-units article strong { font-size: 18px; }
    .marker-param-scale article { grid-template-columns: 110px minmax(0, 1fr) 64px; gap: 8px; }
}

/* Sections still to come, listed the way the chapter shelf lists the ready one. */
.marker-waterly-guide-chapter-view .marker-waterly-guide-upcoming {
    grid-template-columns: 1fr;
    gap: 7px;
    margin-top: 9px;
}

.marker-waterly-guide-chapter-view .marker-waterly-guide-upcoming article {
    min-height: 62px;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 13px;
    padding: 9px 13px;
    border-style: solid;
    border-radius: 12px;
    opacity: .68;
}

.marker-waterly-guide-chapter-view .marker-waterly-guide-upcoming article small { font-size: 9px; }
.marker-waterly-guide-chapter-view .marker-waterly-guide-upcoming article strong { color: #b4c8d0; font-size: 13px; }
.marker-waterly-guide-chapter-view .marker-waterly-guide-upcoming article p { color: #7c99a5; font-size: 10px; }
.marker-waterly-guide-chapter-view .marker-waterly-guide-upcoming .marker-waterly-guide-chapter-number b { color: #6a8a94; font-size: 19px; }

/* Chapter 06 — reading history: a baseline band, the daily and yearly rhythm,
   the shape of a change and how several channels confirm one another. */
.marker-trends-baseline,
.marker-trends-day {
    display: flex;
    width: 100%;
    max-width: 340px;
    flex-direction: column;
    gap: 11px;
}

.marker-trends-baseline svg,
.marker-trends-day svg,
.marker-trends-shapes svg { width: 100%; height: auto; }

.marker-trends-edge {
    fill: none;
    stroke: color-mix(in srgb, var(--wqi-color) 45%, transparent);
    stroke-width: 1.2;
    stroke-dasharray: 4 4;
}

.marker-trends-line {
    fill: none;
    stroke: var(--wqi-color);
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.marker-trends-base {
    fill: none;
    stroke: rgba(255, 255, 255, .12);
    stroke-width: 1;
    stroke-dasharray: 3 4;
}

.marker-trends-dot { fill: var(--wqi-color); }
.marker-trends-dot.is-high { fill: #fbbf24; }
.marker-trends-dot.is-low { fill: #60a5fa; }
.marker-trends-night-band { fill: rgba(96, 165, 250, .08); }

.marker-wqi-guide-panel.is-active .marker-trends-line {
    stroke-dasharray: 620;
    animation: waterly-trends-draw 1.7s ease-out both .2s;
}

.marker-wqi-guide-panel.is-active .marker-trends-dot {
    animation: waterly-trends-pulse 2.6s ease-in-out infinite 1.5s;
}

.marker-trends-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    color: #9ab6c1;
    font-size: 10px;
    font-weight: 700;
}

.marker-trends-legend span { display: inline-flex; align-items: center; gap: 7px; }
.marker-trends-legend i { color: var(--wqi-color); }

.marker-trends-legend .is-band i {
    width: 16px;
    height: 8px;
    border: 1px dashed color-mix(in srgb, var(--wqi-color) 55%, transparent);
    border-radius: 3px;
    background: color-mix(in srgb, var(--wqi-color) 16%, transparent);
}

.marker-trends-legend .is-line i {
    width: 16px;
    height: 2.5px;
    border-radius: 99px;
    background: var(--wqi-color);
}

.marker-trends-legend .is-day i { color: #fbbf24; }
.marker-trends-legend .is-night i { color: #60a5fa; }

.marker-trends-axis {
    display: flex;
    justify-content: space-between;
    color: #6c8894;
    font-size: 10px;
    font-weight: 700;
}

.marker-trends-seasons {
    display: grid;
    width: 100%;
    max-width: 340px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.marker-trends-seasons article {
    display: flex;
    min-height: 84px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 11px 9px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 14px;
    background: rgba(255, 255, 255, .018);
    text-align: center;
}

.marker-wqi-guide-panel.is-active .marker-trends-seasons article {
    animation: waterly-guide-rise .5s cubic-bezier(.2, .8, .25, 1) both;
    animation-delay: calc(var(--season) * .08s + .1s);
}

.marker-trends-seasons article span { font-size: 16px; }
.marker-trends-seasons article strong { color: #eafcff; font-size: 12px; font-weight: 700; }
.marker-trends-seasons article small { color: #7c99a5; font-size: 10px; line-height: 1.3; }
.marker-trends-seasons .is-spring span { color: #6ee7b7; }
.marker-trends-seasons .is-summer span { color: #fbbf24; }
.marker-trends-seasons .is-autumn span { color: #fb923c; }
.marker-trends-seasons .is-winter span { color: #7dd3fc; }

.marker-trends-shapes {
    display: grid;
    width: 100%;
    max-width: 340px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.marker-trends-shapes article {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 11px 12px 12px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 15px;
    background: rgba(255, 255, 255, .02);
}

.marker-trends-shapes .is-shift {
    border-color: color-mix(in srgb, var(--wqi-color) 40%, transparent);
    background: linear-gradient(160deg, color-mix(in srgb, var(--wqi-color) 12%, transparent), rgba(255, 255, 255, .02));
}

.marker-trends-shapes article strong { margin-top: 4px; color: #eafcff; font-size: 12px; font-weight: 700; }
.marker-trends-shapes article small { color: #9ab6c1; font-size: 10px; font-weight: 700; }
.marker-trends-shapes article em { color: #7c99a5; font-size: 10px; font-style: normal; line-height: 1.35; }
.marker-trends-shapes .is-spike .marker-trends-line { stroke: #94a3b8; }

.marker-trends-cases {
    display: grid;
    width: 100%;
    max-width: 340px;
    gap: 8px;
}

.marker-trends-cases article {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 14px;
    background: rgba(255, 255, 255, .018);
}

.marker-trends-case-mark {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 11px;
    font-size: 12px;
}

.marker-trends-case-copy { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.marker-trends-case-copy strong { color: #eafcff; font-size: 11px; font-weight: 700; }
.marker-trends-case-copy small { color: #7c99a5; font-size: 10px; line-height: 1.35; }

.marker-trends-case-verdict {
    padding: 4px 9px;
    border-radius: 99px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.marker-trends-cases .is-natural { border-color: rgba(52, 211, 153, .28); }
.marker-trends-cases .is-natural .marker-trends-case-mark { color: #34d399; background: rgba(52, 211, 153, .14); }
.marker-trends-cases .is-natural .marker-trends-case-verdict { color: #34d399; background: rgba(52, 211, 153, .12); }
.marker-trends-cases .is-check { border-color: rgba(251, 146, 60, .3); }
.marker-trends-cases .is-check .marker-trends-case-mark { color: #fb923c; background: rgba(251, 146, 60, .14); }
.marker-trends-cases .is-check .marker-trends-case-verdict { color: #fb923c; background: rgba(251, 146, 60, .12); }
.marker-trends-cases .is-sensor { border-color: rgba(148, 163, 184, .26); }
.marker-trends-cases .is-sensor .marker-trends-case-mark { color: #94a3b8; background: rgba(148, 163, 184, .14); }
.marker-trends-cases .is-sensor .marker-trends-case-verdict { color: #94a3b8; background: rgba(148, 163, 184, .12); }

@keyframes waterly-trends-draw {
    from { stroke-dashoffset: 620; }
    to { stroke-dashoffset: 0; }
}

@keyframes waterly-trends-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .6; transform: scale(1.25); }
}

@media (max-width: 640px) {
    .marker-trends-shapes { grid-template-columns: 1fr; }
    .marker-trends-cases article { grid-template-columns: 28px minmax(0, 1fr); }
    .marker-trends-case-verdict { grid-column: 2; justify-self: start; margin-top: 2px; }
}

/* Chapter 04.11 — the two phycobiliprotein channels of the cyanobacteria sensor. */
.marker-bga-family {
    display: flex;
    width: 100%;
    max-width: 330px;
    align-items: center;
    gap: 20px;
}

.marker-bga-family-list { display: flex; min-width: 0; flex-direction: column; gap: 10px; }

.marker-bga-family-list span {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.marker-bga-family-list i {
    width: 14px;
    height: 14px;
    border-radius: 4px;
}

.marker-bga-family-list .is-pc i { background: #3b82f6; box-shadow: 0 0 12px rgba(59, 130, 246, .6); }
.marker-bga-family-list .is-pe i { background: #f43f5e; box-shadow: 0 0 12px rgba(244, 63, 94, .6); }
.marker-bga-family-list strong { color: #eafcff; font-size: 13px; font-weight: 700; }
.marker-bga-family-list small { grid-column: 2; color: #7c99a5; font-size: 10px; font-weight: 700; letter-spacing: .06em; }

.marker-bga-channels {
    display: grid;
    width: 100%;
    max-width: 340px;
    gap: 10px;
}

.marker-bga-channel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 13px 14px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 16px;
    background: rgba(255, 255, 255, .02);
}

.marker-bga-channel.is-pc { border-color: rgba(59, 130, 246, .34); background: linear-gradient(160deg, rgba(59, 130, 246, .12), rgba(255, 255, 255, .02)); }
.marker-bga-channel.is-pe { border-color: rgba(244, 63, 94, .34); background: linear-gradient(160deg, rgba(244, 63, 94, .12), rgba(255, 255, 255, .02)); }

.marker-bga-channel > header { display: flex; align-items: center; gap: 11px; }
.marker-bga-channel > header > span:last-child { display: flex; flex-direction: column; }
.marker-bga-channel strong { color: #eafcff; font-size: 15px; font-weight: 700; }
.marker-bga-channel > header small { color: #9ab6c1; font-size: 10px; font-weight: 800; letter-spacing: .1em; }

.marker-bga-channel-swatch {
    width: 26px;
    height: 26px;
    border-radius: 9px;
}

.marker-bga-channel.is-pc .marker-bga-channel-swatch { background: linear-gradient(145deg, #60a5fa, #1d4ed8); box-shadow: 0 0 16px rgba(59, 130, 246, .5); }
.marker-bga-channel.is-pe .marker-bga-channel-swatch { background: linear-gradient(145deg, #fb7185, #be123c); box-shadow: 0 0 16px rgba(244, 63, 94, .5); }

.marker-bga-channel dl { display: grid; margin: 0; gap: 5px; }
.marker-bga-channel dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.marker-bga-channel dt { color: #7c99a5; font-size: 10px; font-weight: 700; }
.marker-bga-channel dd { margin: 0; color: #dceff5; font-size: 11px; font-weight: 700; text-align: right; }

.marker-bga-channel > footer {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding-top: 9px;
    border-top: 1px solid rgba(255, 255, 255, .07);
    color: #8ba7b3;
    font-size: 10px;
    font-style: italic;
    line-height: 1.35;
}

.marker-bga-channel.is-pc > footer i { color: #60a5fa; }
.marker-bga-channel.is-pe > footer i { color: #fb7185; }

.marker-bga-spectrum {
    display: flex;
    width: 100%;
    max-width: 340px;
    flex-direction: column;
    gap: 9px;
}

/* The visible spectrum, with the excitation window of each channel marked on it. */
.marker-bga-spectrum-band {
    position: relative;
    height: 30px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 8px;
    background: linear-gradient(90deg, #4338ca, #2563eb 18%, #10b981 38%, #eab308 56%, #f97316 72%, #dc2626 88%, #7f1d1d);
}

.marker-bga-window {
    position: absolute;
    top: -4px;
    bottom: -4px;
    left: var(--from);
    width: calc(var(--to) - var(--from));
    border: 2px solid #fff;
    border-radius: 6px;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .35);
}

.marker-bga-window b {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    padding: 2px 7px;
    border-radius: 6px;
    color: #06171e;
    background: #eafcff;
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
    transform: translateX(-50%);
}

.marker-wqi-guide-panel.is-active .marker-bga-window {
    animation: waterly-guide-pop .5s cubic-bezier(.2, 1.1, .3, 1) both .25s;
}

.marker-wqi-guide-panel.is-active .marker-bga-window.is-pc-ex { animation-delay: .4s; }

.marker-bga-spectrum-axis {
    display: flex;
    justify-content: space-between;
    color: #6c8894;
    font-size: 9px;
    font-weight: 700;
}

.marker-bga-spectrum-legend { display: flex; flex-direction: column; gap: 5px; color: #9ab6c1; font-size: 10px; font-weight: 700; }
.marker-bga-spectrum-legend span { display: inline-flex; align-items: center; gap: 8px; }
.marker-bga-spectrum-legend i { width: 12px; height: 12px; border-radius: 4px; }
.marker-bga-spectrum-legend .is-pc i { background: #3b82f6; }
.marker-bga-spectrum-legend .is-pe i { background: #f43f5e; }

/* Chapter 04.14 — ammonium: the two units, the equilibrium and the derived ammonia. */
.marker-ammonium-units {
    display: grid;
    width: 100%;
    max-width: 340px;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.marker-ammonium-units article {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 13px 8px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 15px;
    background: rgba(255, 255, 255, .02);
    text-align: center;
}

.marker-ammonium-units .is-source {
    border-color: color-mix(in srgb, var(--wqi-color) 42%, transparent);
    background: linear-gradient(160deg, color-mix(in srgb, var(--wqi-color) 13%, transparent), rgba(255, 255, 255, .02));
}

.marker-ammonium-units article small { color: #7c99a5; font-size: 9px; font-weight: 700; line-height: 1.2; }
.marker-ammonium-units article strong { color: #eafcff; font-size: 24px; font-weight: 800; letter-spacing: -.03em; }
.marker-ammonium-units article span { color: #6c8894; font-size: 9px; font-weight: 700; }
.marker-ammonium-units em { color: #9ab6c1; font-size: 11px; font-style: normal; font-weight: 700; white-space: nowrap; }

.marker-ammonium-units p {
    display: flex;
    align-items: center;
    gap: 8px;
    grid-column: 1 / -1;
    margin: 2px 0 0;
    color: #7c99a5;
    font-size: 10px;
}

.marker-ammonium-units p i { color: var(--wqi-color); }

.marker-ammonium-balance {
    display: flex;
    width: 100%;
    max-width: 340px;
    flex-direction: column;
    gap: 10px;
}

.marker-ammonium-balance > header { display: flex; align-items: baseline; gap: 9px; }
.marker-ammonium-balance > header strong { color: #eafcff; font-size: 14px; font-weight: 800; letter-spacing: .06em; }
.marker-ammonium-balance > header small { color: #7c99a5; font-size: 10px; font-weight: 700; }

/* One bar split into the measured ion and the small, toxic ammonia share. */
.marker-ammonium-bar {
    display: flex;
    height: 34px;
    overflow: hidden;
    border-radius: 10px;
}

.marker-ammonium-bar span {
    display: grid;
    width: var(--share);
    place-items: center;
}

.marker-ammonium-bar .is-ion { background: linear-gradient(160deg, #38bdf8, #0369a1); }
.marker-ammonium-bar .is-ammonia { background: linear-gradient(160deg, #fb7185, #be123c); }
.marker-ammonium-bar b { color: #f2fdff; font-size: 12px; font-weight: 800; }

.marker-ammonium-bar-legend { display: flex; flex-direction: column; gap: 5px; color: #9ab6c1; font-size: 10px; font-weight: 700; }
.marker-ammonium-bar-legend span { display: inline-flex; align-items: center; gap: 8px; }
.marker-ammonium-bar-legend i { width: 12px; height: 12px; border-radius: 4px; }
.marker-ammonium-bar-legend .is-ion i { background: #38bdf8; }
.marker-ammonium-bar-legend .is-ammonia i { background: #fb7185; }

.marker-ammonium-shift {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #f0b7c1;
    font-size: 10px;
    font-weight: 700;
}

.marker-ammonium-shift i { color: #fb7185; }

.marker-ammonium-calc {
    display: flex;
    width: 100%;
    max-width: 340px;
    flex-direction: column;
    gap: 10px;
}

.marker-ammonium-inputs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }

.marker-ammonium-inputs article {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 9px 6px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px;
    background: rgba(255, 255, 255, .02);
}

.marker-ammonium-inputs small { color: #7c99a5; font-size: 9px; font-weight: 700; }
.marker-ammonium-inputs strong { color: #eafcff; font-size: 19px; font-weight: 800; letter-spacing: -.03em; }
.marker-ammonium-inputs span { color: #6c8894; font-size: 9px; font-weight: 700; }

.marker-ammonium-formula {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 9px 10px;
    border: 1px dashed rgba(255, 255, 255, .14);
    border-radius: 12px;
    background: rgba(255, 255, 255, .015);
    text-align: center;
}

.marker-ammonium-formula b { color: #dceff5; font-size: 12px; font-weight: 700; }
.marker-ammonium-formula small { color: #7c99a5; font-size: 10px; font-weight: 700; }

.marker-ammonium-output {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 9px;
    padding: 11px 12px;
    border: 1px solid rgba(244, 63, 94, .38);
    border-radius: 14px;
    background: linear-gradient(160deg, rgba(244, 63, 94, .16), rgba(255, 255, 255, .02));
}

.marker-ammonium-output small { color: #f0b7c1; font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.marker-ammonium-output strong { color: #fff1f3; font-size: 28px; font-weight: 800; letter-spacing: -.04em; }
.marker-ammonium-output span { color: #f0b7c1; font-size: 11px; font-weight: 700; }

.marker-ammonium-grid { display: flex; width: 100%; max-width: 340px; flex-direction: column; gap: 9px; }
.marker-ammonium-grid > header { display: flex; flex-direction: column; gap: 3px; }
.marker-ammonium-grid > header strong { color: #eafcff; font-size: 13px; font-weight: 700; }
.marker-ammonium-grid > header small { color: #7c99a5; font-size: 10px; font-weight: 700; }

.marker-ammonium-grid table { width: 100%; border-collapse: separate; border-spacing: 4px; }
.marker-ammonium-grid th { color: #7c99a5; font-size: 10px; font-weight: 700; }
.marker-ammonium-grid thead th { padding-bottom: 2px; }
.marker-ammonium-grid tbody th { text-align: right; }

/* The cell tint follows the value, so the pH and temperature effect is visible at a glance. */
.marker-ammonium-grid td {
    padding: 8px 4px;
    border-radius: 8px;
    color: #f4fbfd;
    background: color-mix(in srgb, #f43f5e var(--level), rgba(56, 189, 248, .16));
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

@media (max-width: 640px) {
    .marker-bga-family { gap: 14px; }
    .marker-ammonium-units { grid-template-columns: 1fr; }
    .marker-ammonium-units em { justify-self: center; }
    .marker-ammonium-grid td { font-size: 11px; }
}

/* Water clarity — an optical beam for turbidity and a linked TSS reading. */
.marker-water-clarity-widget { width: 100%; margin: 7px 0 3px; }

.marker-water-clarity-card {
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, .13);
    border-radius: 13px;
    color: #eaf7fb;
    background: rgba(7, 17, 26, .86);
    box-shadow: 0 9px 20px -18px rgba(0, 0, 0, .92), inset 0 1px rgba(255, 255, 255, .035);
}

.marker-water-clarity-card.is-stale { opacity: .62; }
.marker-water-clarity-header { display: flex; min-height: 39px; align-items: center; justify-content: space-between; gap: 9px; padding: 6px 10px; border-bottom: 1px solid rgba(148, 163, 184, .07); background: rgba(255, 255, 255, .014); }
.marker-water-clarity-title { display: inline-flex; min-width: 0; align-items: center; gap: 8px; }
.marker-water-clarity-title > i { display: grid; width: 26px; height: 26px; flex: 0 0 26px; place-items: center; border: 1px solid rgba(245, 158, 11, .2); border-radius: 8px; color: #fbbf24; background: rgba(245, 158, 11, .07); font-size: 11px; }
.marker-water-clarity-title > span,
.marker-water-clarity-title strong,
.marker-water-clarity-title small { display: block; min-width: 0; }
.marker-water-clarity-title strong { font-size: 11px; font-weight: 760; }
.marker-water-clarity-title small { overflow: hidden; margin-top: 1px; color: #597686; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }

.marker-water-clarity-trend { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 4px; font-size: 7px; font-weight: 750; text-transform: uppercase; }
.marker-water-clarity-trend.is-up { color: #fb923c; }
.marker-water-clarity-trend.is-down { color: #45d6d0; }
.marker-water-clarity-trend.is-flat { color: #7894a3; }
.marker-water-clarity-body { padding: 0 11px 9px; }

.marker-water-clarity-primary,
.marker-water-clarity-secondary { width: 100%; border: 0; outline: 0; color: inherit; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.marker-water-clarity-primary { display: grid; align-items: center; gap: 7px 12px; padding: 10px 1px 9px; grid-template-columns: minmax(0, 1fr); }
.marker-water-clarity-reading { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; }
.marker-water-clarity-reading > small,
.marker-water-clarity-tss-copy > small { color: #72909d; font-size: 7px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.marker-water-clarity-reading > strong,
.marker-water-clarity-tss-copy > strong { display: flex; align-items: baseline; gap: 4px; margin-top: 3px; color: #f0fcff; font-size: 27px; font-weight: 810; letter-spacing: -1px; line-height: 1; }
.marker-water-clarity-reading > strong > em,
.marker-water-clarity-tss-copy > strong > em { color: #5ddbd3; font-size: 9px; font-style: normal; font-weight: 750; letter-spacing: 0; }

.marker-water-clarity-secondary { display: grid; align-items: center; gap: 7px 10px; padding: 9px 1px 7px; border-top: 1px solid rgba(148, 163, 184, .08); grid-template-columns: minmax(0, 1fr); }
.marker-water-clarity-tss-copy > strong { font-size: 21px; }
.marker-water-clarity-tss-copy > strong > em { color: #dcb277; font-size: 8px; }
.marker-water-clarity-relation { display: flex; align-items: flex-start; gap: 6px; margin: 2px 1px 0; color: #58727f; font-size: 6.5px; line-height: 1.35; }
.marker-water-clarity-relation > i { margin-top: 1px; color: #b68d53; }
.marker-water-clarity-primary:hover,
.marker-water-clarity-primary:focus-visible,
.marker-water-clarity-secondary:hover,
.marker-water-clarity-secondary:focus-visible { background: rgba(255, 255, 255, .018); }

html[data-theme="light"] .marker-water-clarity-card { border-color: rgba(28, 73, 104, .13); color: #203845; background: rgba(248, 251, 252, .96); }
html[data-theme="light"] .marker-water-clarity-header { border-bottom-color: rgba(28, 73, 104, .08); }
html[data-theme="light"] .marker-water-clarity-title small,
html[data-theme="light"] .marker-water-clarity-reading > small,
html[data-theme="light"] .marker-water-clarity-tss-copy > small { color: #627b89; }
html[data-theme="light"] .marker-water-clarity-reading > strong,
html[data-theme="light"] .marker-water-clarity-tss-copy > strong { color: #173241; }
html[data-theme="light"] .marker-water-clarity-relation { color: #718893; }

@media (max-width: 430px) {
    .marker-water-clarity-relation { display: none; }
}

/* Biology — chlorophyll fluorescence and cyanobacterial signal. */
.marker-water-biology-widget { width: 100%; margin: 7px 0 3px; }
.marker-water-biology-card { overflow: hidden; border: 1px solid rgba(148, 163, 184, .13); border-radius: 13px; color: #eaf7fb; background: rgba(7, 17, 26, .86); box-shadow: 0 9px 20px -18px rgba(0, 0, 0, .92), inset 0 1px rgba(255, 255, 255, .035); }
.marker-water-biology-card.is-stale { opacity: .62; }
.marker-water-biology-header { display: flex; min-height: 39px; align-items: center; justify-content: space-between; gap: 9px; padding: 6px 10px; border-bottom: 1px solid rgba(148, 163, 184, .07); background: rgba(255, 255, 255, .014); }
.marker-water-biology-title { display: inline-flex; min-width: 0; align-items: center; gap: 8px; }
.marker-water-biology-title > i { display: grid; width: 26px; height: 26px; flex: 0 0 26px; place-items: center; border: 1px solid rgba(132, 204, 22, .2); border-radius: 8px; color: #a3e635; background: rgba(132, 204, 22, .07); font-size: 11px; }
.marker-water-biology-title > span,
.marker-water-biology-title strong,
.marker-water-biology-title small { display: block; min-width: 0; }
.marker-water-biology-title strong { font-size: 11px; font-weight: 760; }
.marker-water-biology-title small { overflow: hidden; margin-top: 1px; color: #597686; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.marker-water-biology-trend { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 4px; font-size: 7px; font-weight: 750; text-transform: uppercase; }
.marker-water-biology-trend.is-up { color: #bef264; }
.marker-water-biology-trend.is-down { color: #38bdf8; }
.marker-water-biology-trend.is-flat { color: #7894a3; }
.marker-water-biology-body { padding: 0 11px 9px; }
.marker-water-biology-primary,
.marker-water-biology-secondary { width: 100%; border: 0; outline: 0; color: inherit; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.marker-water-biology-primary { display: grid; align-items: center; gap: 7px 12px; padding: 10px 1px 9px; grid-template-columns: minmax(0, 1fr); }
.marker-water-biology-reading { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; }
.marker-water-biology-reading > small,
.marker-water-biology-algae-copy > small { color: #72909d; font-size: 7px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.marker-water-biology-reading > strong,
.marker-water-biology-algae-copy > strong { display: flex; align-items: baseline; gap: 4px; margin-top: 3px; color: #f0fcff; font-size: 27px; font-weight: 810; letter-spacing: -1px; line-height: 1; }
.marker-water-biology-reading > strong > em,
.marker-water-biology-algae-copy > strong > em { color: #a3e635; font-size: 9px; font-style: normal; font-weight: 750; letter-spacing: 0; }


.marker-water-biology-secondary { display: grid; gap: 8px; padding: 10px 1px 7px; border-top: 1px solid rgba(148, 163, 184, .08); }
.marker-water-biology-algae-copy > strong { font-size: 19px; }
.marker-water-biology-algae-copy > strong > em { color: #818cf8; font-size: 7px; }
.marker-water-biology-relation { display: flex; align-items: flex-start; gap: 6px; margin: 2px 1px 0; color: #58727f; font-size: 6.5px; line-height: 1.35; }
.marker-water-biology-relation > i { margin-top: 1px; color: #84cc16; }
.marker-water-biology-primary:hover,
.marker-water-biology-primary:focus-visible,
.marker-water-biology-bga-chip:hover,
.marker-water-biology-bga-chip:focus-visible { background: rgba(255, 255, 255, .018); }

html[data-theme="light"] .marker-water-biology-card { border-color: rgba(28, 73, 104, .13); color: #203845; background: rgba(248, 251, 252, .96); }
html[data-theme="light"] .marker-water-biology-header { border-bottom-color: rgba(28, 73, 104, .08); }
html[data-theme="light"] .marker-water-biology-title small,
html[data-theme="light"] .marker-water-biology-reading > small,
html[data-theme="light"] .marker-water-biology-algae-copy > small { color: #627b89; }
html[data-theme="light"] .marker-water-biology-reading > strong,
html[data-theme="light"] .marker-water-biology-algae-copy > strong { color: #173241; }
html[data-theme="light"] .marker-water-biology-relation { color: #718893; }

@media (max-width: 430px) {
    .marker-water-biology-relation { display: none; }
}


/* Organic pollution — COD as the lead value, supported by SAC254 and oil. */
.marker-water-organic-widget { width: 100%; margin: 7px 0 3px; }
.marker-water-organic-card { overflow: hidden; border: 1px solid rgba(148, 163, 184, .13); border-radius: 13px; color: #eaf7fb; background: rgba(7, 17, 26, .86); box-shadow: 0 9px 20px -18px rgba(0, 0, 0, .92), inset 0 1px rgba(255, 255, 255, .035); }
.marker-water-organic-card { display: block; width: 100%; padding: 0; outline: 0; font: inherit; text-align: left; cursor: pointer; }
.marker-water-organic-card.is-stale { opacity: .62; }
.marker-water-organic-header { display: flex; min-height: 39px; align-items: center; justify-content: space-between; gap: 9px; padding: 6px 10px; border-bottom: 1px solid rgba(148, 163, 184, .07); background: rgba(255, 255, 255, .014); }
.marker-water-organic-title { display: inline-flex; min-width: 0; align-items: center; gap: 8px; }
.marker-water-organic-title > i { display: grid; width: 26px; height: 26px; flex: 0 0 26px; place-items: center; border: 1px solid rgba(244, 63, 94, .2); border-radius: 8px; color: #fb7185; background: rgba(244, 63, 94, .07); font-size: 11px; }
.marker-water-organic-title > span,
.marker-water-organic-title strong,
.marker-water-organic-title small { display: block; min-width: 0; }
.marker-water-organic-title strong { font-size: 11px; font-weight: 760; }
.marker-water-organic-title small { overflow: hidden; margin-top: 1px; color: #597686; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.marker-water-organic-trend { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 4px; font-size: 7px; font-weight: 750; text-transform: uppercase; }
.marker-water-organic-trend.is-up { color: #fb7185; }
.marker-water-organic-trend.is-down { color: #45d6d0; }
.marker-water-organic-trend.is-flat { color: #7894a3; }
.marker-water-organic-body { padding: 0 11px 9px; }
.marker-water-organic-primary,
.marker-water-organic-secondary { width: 100%; border: 0; outline: 0; color: inherit; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.marker-water-organic-primary { display: grid; align-items: center; gap: 7px 12px; padding: 10px 1px 9px; grid-template-columns: 122px minmax(0, 1fr); }
.marker-water-organic-reading { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; }
.marker-water-organic-reading > small,
.marker-water-organic-secondary-copy > small { color: #72909d; font-size: 7px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.marker-water-organic-reading > strong,
.marker-water-organic-secondary-copy > strong { display: flex; align-items: baseline; gap: 4px; margin-top: 3px; color: #f0fcff; font-size: 27px; font-weight: 810; letter-spacing: -1px; line-height: 1; }
.marker-water-organic-reading > strong > em,
.marker-water-organic-secondary-copy > strong > em { color: #fb7185; font-size: 8px; font-style: normal; font-weight: 750; letter-spacing: 0; }
.marker-water-organic-signal { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; color: #fb7185; font-size: 7px; font-weight: 720; }
.marker-water-organic-signal > i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 7px currentColor; }

.marker-water-organic-parameter-body { display: grid; align-items: center; gap: 7px 12px; padding: 10px 12px 11px; grid-template-columns: minmax(0, 1fr) 92px; }
.marker-water-organic-parameter-body .marker-water-organic-reading > strong { font-size: 27px; }
.marker-water-organic-parameter-body .marker-water-organic-scale,
.marker-water-organic-parameter-body .marker-water-organic-stats { grid-column: 1 / -1; }
.marker-water-organic-parameter-visual { position: relative; display: flex; height: 48px; align-items: center; justify-content: center; justify-self: stretch; overflow: hidden; border-radius: 9px; background: rgba(244, 63, 94, .055); }
.marker-water-organic-parameter-visual.is-cod > i { color: #fb7185; font-size: 18px; filter: drop-shadow(0 0 7px rgba(251, 113, 133, .5)); }
.marker-water-organic-parameter-visual.is-cod > b { margin-left: 20px; color: #67e8f9; font-size: 10px; text-shadow: 0 0 7px rgba(103, 232, 249, .5); }
.marker-water-organic-parameter-visual.is-cod > em { position: absolute; color: #6c8794; font-size: 8px; }
.marker-water-organic-parameter-visual.is-sac { color: #c4b5fd; background: rgba(139, 92, 246, .06); }
.marker-water-organic-parameter-visual.is-sac > i { font-size: 11px; font-style: normal; font-weight: 850; }
.marker-water-organic-parameter-visual.is-sac > b { margin-left: 4px; font-size: 8px; }
.marker-water-organic-parameter-visual.is-sac > em { position: absolute; right: 8px; left: 8px; height: 1px; background: linear-gradient(90deg, transparent, #a78bfa, transparent); box-shadow: 0 0 7px #8b5cf6; animation: marker-organic-uv 2.3s ease-in-out infinite; }
.marker-water-organic-parameter-visual.is-cmos { color: #f0abfc; background: rgba(217, 70, 239, .055); }
.marker-water-organic-parameter-visual.is-cmos > i { font-size: 18px; filter: drop-shadow(0 0 7px rgba(232, 121, 249, .42)); }
.marker-water-organic-parameter-visual.is-cmos > b,
.marker-water-organic-parameter-visual.is-cmos > em { position: absolute; width: 5px; height: 5px; border: 1px solid #67e8f9; border-radius: 50%; animation: marker-organic-cmos 2.6s ease-in-out infinite alternate; }
.marker-water-organic-parameter-visual.is-cmos > b { top: 9px; right: 17px; }
.marker-water-organic-parameter-visual.is-cmos > em { bottom: 8px; left: 16px; animation-delay: .7s; }
.marker-water-organic-card.is-sac .marker-water-organic-title > i { border-color: rgba(139, 92, 246, .2); color: #a78bfa; background: rgba(139, 92, 246, .07); }
.marker-water-organic-card.is-cmos .marker-water-organic-title > i { border-color: rgba(217, 70, 239, .2); color: #e879f9; background: rgba(217, 70, 239, .07); }
.marker-water-organic-card.is-sac .marker-water-organic-scale > i { background: linear-gradient(90deg, #38bdf8, #a78bfa); }
.marker-water-organic-card.is-sac .marker-water-organic-scale > em { background: #a78bfa; box-shadow: 0 0 10px rgba(167, 139, 250, .7); }
.marker-water-organic-card.is-cmos .marker-water-organic-scale > i { background: linear-gradient(90deg, #22d3ee, #e879f9); }
.marker-water-organic-card.is-cmos .marker-water-organic-scale > em { background: #e879f9; box-shadow: 0 0 10px rgba(232, 121, 249, .7); }
@keyframes marker-organic-uv { 50% { opacity: .35; transform: scaleX(.72); } }
@keyframes marker-organic-cmos { to { opacity: .32; transform: translate(5px, -3px); } }

.marker-water-organic-reaction { position: relative; display: flex; height: 64px; overflow: hidden; align-items: center; justify-content: center; gap: 12px; border-radius: 10px; background: linear-gradient(105deg, rgba(91, 36, 50, .21), rgba(30, 67, 78, .12)); }
.marker-water-organic-drop { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; border: 1px solid rgba(251, 113, 133, .27); border-radius: 50%; color: #fda4af; background: radial-gradient(circle, rgba(251, 113, 133, .18), transparent 68%); box-shadow: 0 0 15px rgba(244, 63, 94, .12); }
.marker-water-organic-molecules { position: relative; display: block; width: 76px; height: 48px; }
.marker-water-organic-molecules > i { position: absolute; display: grid; width: 20px; height: 20px; place-items: center; border: 1px solid rgba(251, 146, 60, .35); border-radius: 50%; color: #fdba74; background: rgba(124, 45, 18, .24); font-size: 6px; font-style: normal; font-weight: 800; animation: marker-organic-molecule 3s ease-in-out infinite alternate; }
.marker-water-organic-molecules > i:nth-child(1) { top: 2px; left: 5px; }
.marker-water-organic-molecules > i:nth-child(2) { top: 22px; left: 17px; border-color: rgba(103, 232, 249, .32); color: #67e8f9; animation-delay: .5s; }
.marker-water-organic-molecules > i:nth-child(3) { top: 7px; left: 32px; animation-delay: 1s; }
.marker-water-organic-molecules > i:nth-child(4) { top: 25px; left: 46px; animation-delay: 1.5s; }
.marker-water-organic-molecules > i:nth-child(5) { top: 1px; left: 55px; border-color: rgba(103, 232, 249, .32); color: #67e8f9; animation-delay: 2s; }
.marker-water-organic-reaction > em { color: #6f8d9a; font-size: 10px; }
.marker-water-organic-reaction > b { color: #67e8f9; font-size: 11px; text-shadow: 0 0 8px rgba(103, 232, 249, .6); }
@keyframes marker-organic-molecule { to { margin-top: -3px; transform: rotate(18deg); } }

.marker-water-organic-scale,
.marker-water-organic-secondary-scale { position: relative; display: block; height: 6px; border-radius: 999px; background: rgba(100, 116, 139, .25); }
.marker-water-organic-scale { grid-column: 1 / -1; }
.marker-water-organic-scale > i { display: block; width: var(--organic-level); height: 100%; border-radius: inherit; background: linear-gradient(90deg, #22d3ee, #fbbf24 62%, #fb7185); }
.marker-water-organic-scale > em { position: absolute; top: 50%; left: var(--organic-level); width: 12px; height: 12px; border: 2px solid #fff; border-radius: 50%; background: #fb7185; box-shadow: 0 0 10px rgba(251, 113, 133, .7); transform: translate(-50%, -50%); }
.marker-water-organic-scale > b,
.marker-water-organic-secondary-scale > b { position: absolute; z-index: 2; top: 50%; width: 7px; height: 7px; border: 1px solid rgba(255, 255, 255, .9); border-radius: 50%; transform: translate(-50%, -50%); }
.marker-water-organic-scale > b.is-min,
.marker-water-organic-secondary-scale > b.is-min { background: #38bdf8; }
.marker-water-organic-scale > b.is-avg,
.marker-water-organic-secondary-scale > b.is-avg { background: #fbbf24; }
.marker-water-organic-scale > b.is-max,
.marker-water-organic-secondary-scale > b.is-max { background: #fb7185; }
.marker-water-organic-stats,
.marker-water-organic-secondary-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.marker-water-organic-stats { grid-column: 1 / -1; }
.marker-water-organic-stats > span,
.marker-water-organic-secondary-stats > span { min-width: 0; text-align: center; }
.marker-water-organic-stats small,
.marker-water-organic-stats strong,
.marker-water-organic-secondary-stats small,
.marker-water-organic-secondary-stats strong { display: block; }
.marker-water-organic-stats small,
.marker-water-organic-secondary-stats small { color: #526e7c; font-size: 6px; text-transform: uppercase; }
.marker-water-organic-stats strong,
.marker-water-organic-secondary-stats strong { margin-top: 2px; color: #a8c2cd; font-size: 9px; }

.marker-water-organic-secondary-grid { display: grid; border-top: 1px solid rgba(148, 163, 184, .08); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.marker-water-organic-secondary { display: grid; min-width: 0; gap: 7px 8px; padding: 10px 9px 8px 1px; grid-template-columns: 30px minmax(0, 1fr); }
.marker-water-organic-secondary + .marker-water-organic-secondary { padding-right: 1px; padding-left: 10px; border-left: 1px solid rgba(148, 163, 184, .08); }
.marker-water-organic-secondary-icon { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 9px; color: #c084fc; background: rgba(168, 85, 247, .09); }
.marker-water-organic-secondary.is-oil .marker-water-organic-secondary-icon { color: #fb923c; background: rgba(249, 115, 22, .09); }
.marker-water-organic-secondary-copy { min-width: 0; }
.marker-water-organic-secondary-copy > small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.marker-water-organic-secondary-copy > strong { font-size: 17px; }
.marker-water-organic-secondary-copy > strong > em { color: #c084fc; font-size: 7px; }
.marker-water-organic-secondary.is-oil .marker-water-organic-secondary-copy > strong > em { color: #fb923c; }
.marker-water-organic-secondary-scale,
.marker-water-organic-secondary-stats { grid-column: 1 / -1; }
.marker-water-organic-secondary-scale > i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #38bdf8, #c084fc); }
.marker-water-organic-secondary.is-oil .marker-water-organic-secondary-scale > i { background: linear-gradient(90deg, #fbbf24, #fb7185); }
.marker-water-organic-relation { display: flex; align-items: flex-start; gap: 6px; margin: 7px 1px 0; color: #58727f; font-size: 6.5px; line-height: 1.35; }
.marker-water-organic-relation > i { margin-top: 1px; color: #fb7185; }
.marker-water-organic-primary:hover,
.marker-water-organic-primary:focus-visible,
.marker-water-organic-secondary:hover,
.marker-water-organic-secondary:focus-visible { background: rgba(255, 255, 255, .018); }

html[data-theme="light"] .marker-water-organic-card { border-color: rgba(28, 73, 104, .13); color: #203845; background: rgba(248, 251, 252, .96); }
html[data-theme="light"] .marker-water-organic-header { border-bottom-color: rgba(28, 73, 104, .08); }
html[data-theme="light"] .marker-water-organic-title small,
html[data-theme="light"] .marker-water-organic-reading > small,
html[data-theme="light"] .marker-water-organic-secondary-copy > small { color: #627b89; }
html[data-theme="light"] .marker-water-organic-reading > strong,
html[data-theme="light"] .marker-water-organic-secondary-copy > strong { color: #173241; }
html[data-theme="light"] .marker-water-organic-reaction { background: linear-gradient(105deg, rgba(244, 63, 94, .08), rgba(34, 211, 238, .07)); }
html[data-theme="light"] .marker-water-organic-stats strong,
html[data-theme="light"] .marker-water-organic-secondary-stats strong { color: #466776; }
html[data-theme="light"] .marker-water-organic-relation { color: #718893; }

@media (max-width: 430px) {
    .marker-water-organic-primary { grid-template-columns: 110px minmax(0, 1fr); }
    .marker-water-organic-secondary-grid { grid-template-columns: minmax(0, 1fr); }
    .marker-water-organic-secondary + .marker-water-organic-secondary { padding-left: 1px; border-top: 1px solid rgba(148, 163, 184, .08); border-left: 0; }
    .marker-water-organic-relation { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .marker-water-organic-molecules > i,
    .marker-water-organic-parameter-visual > b,
    .marker-water-organic-parameter-visual > em { animation: none; }
}

/* Graphic mode follows the same restrained surface language as compact tiles.
   The visualisation remains the focus; the card is only a quiet container. */
.select-tile-contener .marker-main-contener:not(.is-compact-mode) {
    --marker-graphic-border: rgba(148, 163, 184, 0.13);
    --marker-graphic-surface: rgba(7, 17, 26, 0.86);
    --marker-graphic-divider: rgba(148, 163, 184, 0.09);
}

.select-tile-contener .marker-main-contener:not(.is-compact-mode) :is(
    .marker-atmosphere-widget,
    .marker-water-temperature-widget,
    .marker-water-depth-widget,
    .marker-water-oxygen-widget,
    .marker-water-ph-widget,
    .marker-water-ec-widget,
    .marker-water-ions-widget,
    .marker-multi-sensor-widget
) {
    margin: 7px 0 3px;
}

.select-tile-contener .marker-main-contener:not(.is-compact-mode) :is(
    .marker-atmosphere-card,
    .marker-water-temperature-card,
    .marker-water-depth-card,
    .marker-water-oxygen-card,
    .marker-water-ph-card,
    .marker-water-ec-card,
    .marker-water-ions-card,
    .marker-multi-sensor-card
) {
    border-color: var(--marker-graphic-border);
    border-radius: 13px;
    background: var(--marker-graphic-surface);
    box-shadow:
        0 9px 20px -18px rgba(0, 0, 0, 0.92),
        inset 0 1px rgba(255, 255, 255, 0.035);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.select-tile-contener .marker-main-contener:not(.is-compact-mode) :is(
    .marker-water-temperature-card,
    .marker-water-depth-card,
    .marker-water-ph-card,
    .marker-water-ec-card,
    .marker-water-ions-card,
    .marker-multi-sensor-card
):is(:hover, :focus-visible) {
    border-color: rgba(148, 163, 184, 0.24);
    box-shadow:
        0 9px 20px -18px rgba(0, 0, 0, 0.92),
        inset 0 1px rgba(255, 255, 255, 0.045);
    transform: none;
}

.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-atmosphere-card::after,
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-water-oxygen-card::before,
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-water-ions-ambient {
    display: none;
}

.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-atmosphere-glow,
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-water-oxygen-bubbles {
    opacity: 0.22;
}

.select-tile-contener .marker-main-contener:not(.is-compact-mode) .oxygen-water-particles {
    opacity: 0.7;
}

.select-tile-contener .marker-main-contener:not(.is-compact-mode) :is(
    .marker-atmosphere-minimal-header,
    .marker-water-temperature-header,
    .marker-water-depth-header,
    .marker-water-oxygen-header,
    .marker-water-ph-header,
    .marker-water-ec-header,
    .marker-multi-sensor-header
) {
    min-height: 38px;
    padding: 5px 9px;
    border-bottom-color: var(--marker-graphic-divider);
    background: transparent;
}

.select-tile-contener .marker-main-contener:not(.is-compact-mode) :is(
    .marker-atmosphere-heading-icon,
    .marker-water-temperature-heading > i,
    .marker-water-depth-title > i,
    .marker-water-oxygen-title > i,
    .marker-water-ph-title > i,
    .marker-water-ec-title > i,
    .marker-multi-sensor-title > i
) {
    width: 26px;
    height: 26px;
    flex-basis: 26px;
    border-color: rgba(148, 163, 184, 0.16);
    border-radius: 8px;
    background: rgba(148, 163, 184, 0.06);
    box-shadow: none;
}

.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-atmosphere-minimal-header {
    min-height: 48px;
}

.select-tile-contener .marker-main-contener:not(.is-compact-mode) :is(
    .marker-water-oxygen-metric,
    .marker-water-oxygen-context-item
) {
    border-color: var(--marker-graphic-divider);
    background: rgba(255, 255, 255, 0.018);
    box-shadow: none;
}

.select-tile-contener .marker-main-contener:not(.is-compact-mode) :is(
    .marker-water-ec-primary,
    .marker-water-ec-derived,
    .marker-water-ec-info,
    .marker-water-ions-item
):is(:hover, :focus-visible) {
    background: rgba(255, 255, 255, 0.025);
    box-shadow: none;
    transform: none;
}

.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-water-ions-card {
    padding: 10px;
}

.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-water-ions-header {
    margin-bottom: 8px;
}

.select-tile-contener .marker-main-contener:not(.is-compact-mode) :is(
    .marker-water-ions-balance,
    .marker-water-ions-item
) {
    border-color: var(--marker-graphic-divider);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.018);
}

/* Mobile footer stays in the flex layout, entirely above the bottom navigation. */
@media (max-width: 767px) {
    .select-tile-contener .marker-main-contener,
    .select-tile-contener .marker-main-contener.has-device-identity {
        height: 100% !important;
        padding-bottom: 0 !important;
    }

    .select-tile-contener .marker-main-contener-sponsor {
        height: 52px;
        flex: 0 0 52px;
        margin-top: 0;
    }

    .select-tile-contener .marker-footer-strip.is-collapsed .marker-main-contener-sponsor {
        height: 0 !important;
        flex-basis: 0 !important;
    }

    .select-tile-contener .marker-footer-compact {
        min-height: 26px;
        padding: 3px 8px;
        gap: 6px;
    }

    .select-tile-contener .marker-footer-compact-name {
        font-size: 10px;
    }

    .select-tile-contener .marker-sponsor-content {
        grid-template-columns: 32px minmax(0, 1fr) 30px;
        gap: 8px;
        padding: 5px 6px;
    }

    .select-tile-contener .select-tile-header-sponsor-logo {
        width: 32px;
        height: 32px;
    }

    .select-tile-contener .marker-main-contener-sponsor .select-tile-header-sponsor-description-name {
        margin-top: 2px;
        font-size: 13px;
    }

    .select-tile-contener .marker-footer-compact .marker-device-identity,
    .select-tile-contener .marker-device-identity {
        position: relative;
        inset: auto;
        width: auto;
        max-width: 62%;
        min-height: 0;
        flex: 0 0 auto;
        padding: 0;
        border: 0;
        background: none;
        box-shadow: none;
    }

    .select-tile-contener .marker-footer-strip:not(.is-collapsed) .marker-footer-compact .marker-device-identity {
        max-width: calc(100% - 30px);
        justify-content: center;
    }

    .select-tile-contener .marker-footer-strip.is-collapsed .marker-footer-compact .device-identity-line,
    .select-tile-contener .marker-footer-strip.is-collapsed .marker-device-identity .device-identity-line {
        width: auto;
        min-height: 0;
        flex-wrap: nowrap;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }
}

/* Unit spacing for graphical parameter readings. */
.marker-water-ions-value,
.marker-water-ec-primary-value,
.marker-water-ec-derived-value,
.marker-water-ec-info-value {
    column-gap: 5px;
}
.marker-water-ions-value > small,
.marker-water-ec-primary-value > small,
.marker-water-ec-derived-value > small,
.marker-water-ec-info-value > small {
    margin-left: 0;
}
.marker-atmosphere-gauge-value > small,
.marker-atmosphere-bar-value > small,
.marker-atmosphere-humidity-value > small,
.marker-atmosphere-pressure-value > small,
.marker-atmosphere-glass-ring-value > small,
.tile-list-avatar-value small {
    margin-left: 5px;
}

@media (max-width: 767px) {
    .marker-wqi-guide-sheet-close { touch-action: none; user-select: none; cursor: grab; }
    .marker-wqi-guide-dialog.is-sheet-dragging { transition: none; }
    .marker-wqi-guide-dialog.is-sheet-dragging .marker-wqi-guide-sheet-close { cursor: grabbing; }
}

/* WQI labels do not participate in centering the numeric reading. */
.tile-list-avatar-value {
    position: absolute;
    inset: 0;
    display: block;
}
.tile-list-avatar-value strong,
.marker-wqi-guide-current-ring.is-wqi-value strong {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0;
    line-height: 1;
    letter-spacing: 0;
    transform: translate(-50%, -58%);
}
.tile-list-avatar-value small,
.marker-wqi-guide-current-ring.is-wqi-value small {
    position: absolute;
    top: calc(50% + 15px);
    left: 50%;
    margin: 0;
    line-height: 1;
    transform: translateX(-50%);
}
.marker-wqi-guide-current-ring.is-wqi-value small { top: calc(50% + 24px); }
.marker-wqi-guide-current-ring.is-wqi-value {
    border: 0;
}
.marker-wqi-guide-current-ring.is-wqi-value::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 180deg,
        var(--wqi-color) 0deg calc(var(--guide-wqi-level) * 1.8deg),
        rgba(112, 150, 167, .13) calc(var(--guide-wqi-level) * 1.8deg) calc(360deg - var(--guide-wqi-level) * 1.8deg),
        var(--wqi-color) calc(360deg - var(--guide-wqi-level) * 1.8deg) 360deg);
    mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 0);
}
@supports (text-box-trim: trim-both) {
    .tile-list-avatar-value strong,
    .marker-wqi-guide-current-ring.is-wqi-value strong {
        text-box-trim: trim-both;
        text-box-edge: cap alphabetic;
        transform: translate(-50%, -50%);
    }
}

@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
    .marker-water-hero-history:hover .marker-water-history-area {
        opacity: 1;
    }
}

.has-alarm-indicator {position:relative;}
.marker-alarm-bell {position:absolute;right:8px;top:6px;z-index:2;width:23px;height:23px;font-size:11px;}
.marker-tile.has-alarm-indicator .marker-tile-label {padding-right:26px;}
.marker-multi-sensor-value.has-alarm-indicator {padding-right:20px;}
.marker-multi-sensor-value > .marker-alarm-bell {top:50%;right:1px;transform:translateY(-50%);width:16px;height:16px;font-size:8px;}
.marker-water-oxygen-metric.has-alarm-indicator {overflow:visible;}
.marker-water-oxygen-metric > .marker-alarm-bell {top:0;right:0;}

.marker-water-hero-no-data .marker-empty-wqi-alarm {
    position: static;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto;
    height: auto;
    max-width: 100%;
    margin-top: 14px;
    padding: 8px 12px;
    font-size: 11px;
    line-height: 1.4;
    cursor: pointer;
    white-space: normal;
}

.is-developer-section .tiles-list-section-heading > i,
.is-developer-section .tiles-list-section-count {
    color: #c4a0ff;
    background: rgba(167, 139, 250, .1);
    border-color: rgba(167, 139, 250, .28);
}

/* WQI without the temporarily disabled spectrum and summary statistics. */
@media (min-width: 768px) {
    .marker-water-hero-content:not(.is-empty) {
        min-height: 128px;
        padding-bottom: 20px;
    }
    .marker-water-hero-summary { padding-bottom: 40px; }
    .marker-water-hero-history {
        top: auto;
        bottom: 20px;
        left: 130px;
        height: 34px;
    }
}
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
    .marker-water-hero-card:hover .marker-water-hero-history { height: auto; }
}

/* Min/max and the historical timestamp share a slot below the WQI ring. */
.marker-water-hero-score-range,
.marker-water-hero-score-time {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    margin-top: 4px;
    line-height: 17px;
    white-space: nowrap;
}
.marker-water-hero-score-range {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #8da9b8;
    font-size: 12px;
    font-weight: 600;
}
.marker-water-hero-score-range > span {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.marker-water-hero-score-range i { font-size: 9px; }
.marker-water-hero-score.is-history-preview .marker-water-hero-score-range {
    visibility: hidden;
}
html[data-theme="light"] .marker-water-hero-score-range { color: #526d7f; }

/* Turbidity — the buoy sensor is a 90° nephelometer, drawn as one. */
.marker-nephelometer {
    display: flex;
    width: 100%;
    max-width: 340px;
    flex-direction: column;
    gap: 10px;
}

.marker-nephelometer > header { display: flex; align-items: center; gap: 12px; }

.marker-nephelometer > header b {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--wqi-color) 45%, transparent);
    border-radius: 14px;
    color: var(--wqi-color);
    background: color-mix(in srgb, var(--wqi-color) 12%, transparent);
    font-size: 15px;
    font-weight: 800;
}

.marker-nephelometer > header span { display: flex; flex-direction: column; gap: 2px; }
.marker-nephelometer > header strong { color: #eafcff; font-size: 15px; font-weight: 800; }
.marker-nephelometer > header small { color: #7c99a5; font-size: 10px; font-weight: 700; letter-spacing: .04em; }

.marker-nephelometer svg { width: 100%; height: auto; overflow: visible; }
.marker-nephelometer svg text { fill: #8ba7b3; font-size: 8.5px; font-weight: 700; }

.marker-neph-chamber { fill: rgba(56, 189, 208, .07); stroke: rgba(120, 200, 220, .22); stroke-dasharray: 3 3; }
.marker-neph-source { fill: #fde68a; filter: drop-shadow(0 0 8px rgba(253, 230, 138, .6)); }
.marker-neph-trap { fill: #0b1419; stroke: rgba(255, 255, 255, .14); }
.marker-neph-detector { fill: var(--wqi-color); filter: drop-shadow(0 0 8px var(--wqi-color)); }
.marker-neph-particles circle { fill: #e2e8f0; stroke: rgba(7, 26, 34, .6); stroke-width: 1; }

.marker-neph-beam {
    fill: none;
    stroke: #fde68a;
    stroke-width: 4;
    stroke-linecap: round;
    opacity: .75;
}

.marker-neph-scatter {
    fill: none;
    stroke: var(--wqi-color);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 5 5;
}

.marker-neph-scatter.is-faint { stroke-width: 1.6; opacity: .35; }
.marker-neph-angle { fill: none; stroke: #eafcff; stroke-width: 1.4; }

.marker-wqi-guide-panel.is-active .marker-neph-scatter { animation: waterly-neph-flow 1.1s linear infinite; }
.marker-wqi-guide-panel.is-active .marker-neph-particles circle { animation: waterly-beacon-blink 2.4s ease-in-out infinite; }
.marker-wqi-guide-panel.is-active .marker-neph-particles circle:nth-child(2) { animation-delay: .5s; }
.marker-wqi-guide-panel.is-active .marker-neph-particles circle:nth-child(3) { animation-delay: 1s; }

.marker-nephelometer > footer { display: flex; flex-direction: column; gap: 5px; color: #9ab6c1; font-size: 10px; font-weight: 700; }
.marker-nephelometer > footer span { display: inline-flex; align-items: center; gap: 8px; }
.marker-nephelometer > footer i { width: 16px; height: 3px; border-radius: 99px; }
.marker-nephelometer > footer .is-measured i { background: var(--wqi-color); }
.marker-nephelometer > footer .is-ignored i { background: #fde68a; opacity: .6; }

@keyframes waterly-neph-flow {
    to { stroke-dashoffset: -10; }
}

/* Waterly typography roles. */
.marker-wqi-guide-dialog > header strong, .marker-waterly-guide-brand strong, .marker-water-hero-title { font-family: var(--wl-font-display); font-weight: 600; }
.marker-widget-value, .marker-widget-unit, .marker-widget-min-value, .marker-widget-max-value, .marker-water-ions-value, .marker-multi-sensor-value, .marker-reading-unit, .marker-water-hero-score-value { font-family: var(--wl-font-mono); font-variant-numeric: tabular-nums; }


/* features/management/ui/ar-hud.css */
/********************************************************************************************************************
	@author         waterly.eu
	@contributors   Rafał Złotorzyński

	Niniejszy kod źródłowy jako własność autora jest chroniony prawami autorskimi!
	Kopiowanie, edycja i rozpowszechnianie treści bądź jej fragmentów w jakichkolwiek celach
	ze szczególnym uwzględnieniem korzyści majątkowej bez zgody autora jest ZABRONIONE!

	This source code as the copyright of the author is protected by copyright!
	Copying, editing and distributing content or its fragments for any purpose
	with particular emphasis on financial benefits without the author's permission, it is FORBIDDEN!

	@file           src/features/management/ui/ar-hud.css
	@todo           Full-screen AR HUD over the measurement map
********************************************************************************************************************/

html.waterly-ar-active,
html.waterly-ar-active body {
	overflow: hidden;
}

.waterly-ar-hud {
	position: fixed;
	inset: 0;
	z-index: 12000;
	background: #05080c;
	color: #eaf3f9;
	font-family: var(--wl-font-sans, "Geist", "Segoe UI", Arial, sans-serif);
	-webkit-user-select: none;
	user-select: none;
	/* Own palette so Bootstrap / theme tokens cannot muddy headings. */
	--waterly-ar-text: #f3f8fb;
	--waterly-ar-muted: #9db4c3;
	--waterly-ar-accent: #7ec8f5;
	--waterly-ar-surface: rgba(12, 22, 31, 0.94);
	--waterly-ar-surface-2: rgba(7, 14, 21, 0.96);
	--waterly-ar-border: rgba(126, 200, 245, 0.18);
	--waterly-ar-btn: #1a8fd6;
	--waterly-ar-btn-2: #0e6eab;
	--waterly-ar-secondary-bg: rgba(255, 255, 255, 0.06);
	--waterly-ar-secondary-border: rgba(255, 255, 255, 0.12);
	--waterly-ar-secondary-text: #dce8f0;
	--waterly-ar-scrim: rgba(4, 10, 16, 0.9);
	--waterly-ar-icon-border: rgba(126, 200, 245, 0.28);
	--waterly-ar-icon-bg: rgba(126, 200, 245, 0.1);
	--waterly-ar-card-shadow: 0 18px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}

.waterly-ar-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: #05080c;
}

.waterly-ar-permission {
	position: absolute;
	inset: 0;
	z-index: 40;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: max(20px, var(--safe-top, 0px)) 20px max(20px, var(--safe-bottom, 0px));
	background: var(--waterly-ar-scrim);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	overflow-y: auto;
}

.waterly-ar-permission.is-hidden,
.waterly-ar-safety.is-hidden,
.waterly-ar-status .is-hidden {
	display: none !important;
}

.waterly-ar-permission-card {
	margin: auto;
	width: min(100%, 360px);
	padding: 24px 20px 18px;
	border: 1px solid var(--waterly-ar-border);
	border-radius: 18px;
	background: linear-gradient(165deg, var(--waterly-ar-surface), var(--waterly-ar-surface-2));
	box-shadow: var(--waterly-ar-card-shadow);
	color: var(--waterly-ar-text);
	text-align: center;
}

.waterly-ar-permission-card > i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: 12px;
	border: 1px solid var(--waterly-ar-icon-border);
	border-radius: 50%;
	background: var(--waterly-ar-icon-bg);
	color: var(--waterly-ar-accent);
	font-size: 24px;
}

.waterly-ar-permission-card h2,
.waterly-ar-hud .waterly-ar-permission-card h2 {
	margin: 0 0 10px;
	color: var(--waterly-ar-text) !important;
	font-size: 22px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 0.01em;
}

.waterly-ar-permission-card p,
.waterly-ar-hud .waterly-ar-permission-card p {
	margin: 0 0 18px;
	color: var(--waterly-ar-muted) !important;
	font-size: 13px;
	line-height: 1.5;
}

.waterly-ar-privacy {
	display: flex;
	gap: 10px;
	margin: 0 0 18px;
	padding: 12px;
	border: 1px solid var(--waterly-ar-border);
	border-radius: 12px;
	background: var(--waterly-ar-icon-bg);
	text-align: left;
}
.waterly-ar-privacy > svg { flex: 0 0 20px; width: 20px; height: 20px; color: var(--waterly-ar-accent); }
.waterly-ar-privacy strong { display: block; margin-bottom: 4px; font-size: 12px; color: var(--waterly-ar-text); }
.waterly-ar-hud .waterly-ar-privacy p { margin: 0; font-size: 11px; line-height: 1.5; }

.waterly-ar-permission-card.is-loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	color: var(--waterly-ar-text);
}

.waterly-ar-permission-card.is-loading > i {
	width: auto;
	height: auto;
	border: 0;
	background: transparent;
	color: var(--waterly-ar-accent);
	font-size: 28px;
}

.waterly-ar-primary,
.waterly-ar-secondary,
.waterly-ar-exit,
.waterly-ar-offscreen-btn {
	appearance: none;
	border: 0;
	cursor: pointer;
	font: inherit;
}

.waterly-ar-primary,
.waterly-ar-secondary {
	display: block;
	width: 100%;
	padding: 12px 14px;
	border-radius: 12px;
	font-size: 13px;
	font-weight: 800;
}

.waterly-ar-primary {
	margin-bottom: 8px;
	border: 1px solid rgba(126, 200, 245, 0.35);
	background: linear-gradient(135deg, var(--waterly-ar-btn), var(--waterly-ar-btn-2));
	color: #ffffff !important;
	box-shadow: 0 8px 18px rgba(14, 110, 171, 0.28);
}

.waterly-ar-primary:active {
	transform: translateY(1px);
	box-shadow: 0 4px 12px rgba(14, 110, 171, 0.22);
}

.waterly-ar-secondary {
	border: 1px solid var(--waterly-ar-secondary-border);
	background: var(--waterly-ar-secondary-bg);
	color: var(--waterly-ar-secondary-text) !important;
}

.waterly-ar-secondary:active {
	filter: brightness(0.97);
}

.waterly-ar-hud {
	--ar-ui-surface: rgba(9, 24, 31, .82);
	--ar-ui-border: rgba(219, 245, 247, .15);
	--ar-ui-text: #effaf9;
	--ar-ui-muted: #9bb7bc;
	--ar-ui-accent: #72efc7;
	--ar-ui-track: rgba(200, 226, 230, .12);
	--ar-ui-warn: #e9bc76;
	--ar-ui-error: #f3a39d;
	--ar-ui-shadow: 0 12px 36px rgba(0, 7, 12, .24), inset 0 1px 0 rgba(255, 255, 255, .07);
}

.waterly-ar-hud, .waterly-ar-hud *, .waterly-ar-hud *::before, .waterly-ar-hud *::after { box-sizing: border-box; }
.waterly-ar-hud [hidden] { display: none !important; }
.waterly-ar-icon { display: block; width: 20px; height: 20px; flex-shrink: 0; }
.waterly-ar-hud button:focus-visible { outline: 2px solid var(--ar-ui-accent); outline-offset: 4px; }
.waterly-ar-layer { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
.waterly-ar-pois { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

.waterly-ar-top {
	position: absolute;
	inset: 0 0 auto;
	z-index: 40;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: calc(16px + var(--safe-top, 0px)) max(18px, var(--safe-right, 0px)) 0 max(18px, var(--safe-left, 0px));
}
.waterly-ar-top-start, .waterly-ar-tools { display: flex; align-items: center; gap: 9px; }
.waterly-ar-exit, .waterly-ar-tool {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-width: 44px;
	height: 44px;
	padding: 0 13px;
	border: 1px solid var(--ar-ui-border);
	border-radius: 16px;
	background: var(--ar-ui-surface);
	box-shadow: var(--ar-ui-shadow);
	color: var(--ar-ui-text);
	backdrop-filter: blur(22px) saturate(140%);
	-webkit-backdrop-filter: blur(22px) saturate(140%);
	pointer-events: auto;
	font: 600 12px/1 var(--wl-font-sans);
	font-variant-numeric: tabular-nums;
	cursor: pointer;
	transition: background .18s, border-color .18s, transform .18s;
}
.waterly-ar-exit { padding: 0; }
.waterly-ar-exit:hover, .waterly-ar-tool:hover, .waterly-ar-tool[aria-expanded="true"] { border-color: var(--ar-ui-accent); }
.waterly-ar-exit:active, .waterly-ar-tool:active { transform: scale(.96); }
.waterly-ar-range-toggle svg { color: var(--ar-ui-accent); width: 18px; height: 18px; }
.waterly-ar-status-toggle { position: relative; padding: 0; }
.waterly-ar-status-toggle svg { width: 17px; height: 17px; }
.waterly-ar-status-dot { position: absolute; top: 8px; right: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--ar-ui-accent); }
.waterly-ar-status-dot.is-pending { background: var(--ar-ui-warn); }
.waterly-ar-status-dot.is-error { background: var(--ar-ui-error); }
.waterly-ar-mode { display: inline-flex; align-items: center; gap: 7px; font: 700 12px/1 var(--wl-font-sans); letter-spacing: .13em; color: #fff; text-shadow: 0 1px 8px #06141d; }
.waterly-ar-mode-dot { width: 5px; height: 5px; background: #72efc7; border-radius: 50%; box-shadow: 0 0 10px rgba(114,239,199,.65); }

.waterly-ar-panel {
	position: absolute;
	top: calc(72px + var(--safe-top, 0px));
	right: max(18px, var(--safe-right, 0px));
	z-index: 41;
	width: min(320px, calc(100vw - 36px));
	padding: 18px;
	border: 1px solid var(--ar-ui-border);
	border-radius: 24px;
	background: var(--ar-ui-surface);
	box-shadow: var(--ar-ui-shadow);
	color: var(--ar-ui-text);
	backdrop-filter: blur(28px) saturate(140%);
	-webkit-backdrop-filter: blur(28px) saturate(140%);
	pointer-events: auto;
	animation: waterly-ar-panel-in .2s ease-out both;
}
.waterly-ar-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.waterly-ar-panel-heading strong { color: var(--ar-ui-text); font-size: 13px; font-weight: 650; }
.waterly-ar-panel-close { display: grid; place-items: center; width: 32px; height: 32px; margin: -6px -6px -6px 0; padding: 0; background: transparent; border: 0; border-radius: 10px; color: var(--ar-ui-muted); cursor: pointer; }
.waterly-ar-panel-close svg { width: 17px; height: 17px; }
.waterly-ar-panel-close:hover { background: var(--ar-ui-track); color: var(--ar-ui-text); }
.waterly-ar-range-current { display: block; margin-bottom: 14px; font: 500 32px/1.2 var(--wl-font-sans); letter-spacing: -.045em; font-variant-numeric: tabular-nums; color: var(--ar-ui-accent); }
.waterly-ar-range input { appearance: none; -webkit-appearance: none; display: block; width: 100%; height: 32px; margin: 8px 0 2px; padding: 0; border: 0; border-radius: 20px; background: transparent; cursor: pointer; }
.waterly-ar-range input::-webkit-slider-runnable-track { height: 6px; border-radius: 20px; background: linear-gradient(to right, var(--ar-ui-accent) 0 var(--ar-range-progress), var(--ar-ui-track) var(--ar-range-progress) 100%); }
.waterly-ar-range input::-moz-range-track { height: 6px; border-radius: 20px; background: linear-gradient(to right, var(--ar-ui-accent) 0 var(--ar-range-progress), var(--ar-ui-track) var(--ar-range-progress) 100%); }
.waterly-ar-range input::-webkit-slider-thumb { margin-top: -9px; appearance: none; -webkit-appearance: none; width: 24px; height: 24px; border: 5px solid var(--ar-ui-text); border-radius: 50%; background: var(--ar-ui-accent); box-shadow: 0 2px 12px rgba(0,0,0,.25); }
.waterly-ar-range input::-moz-range-thumb { box-sizing: border-box; width: 24px; height: 24px; border: 5px solid var(--ar-ui-text); border-radius: 50%; background: var(--ar-ui-accent); box-shadow: 0 2px 12px rgba(0,0,0,.25); }
.waterly-ar-range input:focus-visible { outline: 2px solid var(--ar-ui-accent); outline-offset: 10px; }
.waterly-ar-range-limits { display: flex; justify-content: space-between; color: var(--ar-ui-muted); font-size: 10px; }
.waterly-ar-range-presets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 20px; }
.waterly-ar-range-presets button { min-height: 44px; padding: 0 4px; border: 1px solid var(--ar-ui-border); border-radius: 11px; background: transparent; font: 600 11px/1 var(--wl-font-sans); color: var(--ar-ui-muted); cursor: pointer; }
.waterly-ar-range-presets button[aria-pressed="true"] { color: var(--ar-ui-accent); background: color-mix(in srgb, var(--ar-ui-accent) 12%, transparent); border-color: color-mix(in srgb, var(--ar-ui-accent) 45%, transparent); }
.waterly-ar-sensor-row { display: grid; grid-template-columns: 20px minmax(55px, 1fr) minmax(0, 1.6fr); align-items: center; gap: 10px; min-height: 52px; padding: 10px 0; border-top: 1px solid var(--ar-ui-border); font-size: 12px; }
.waterly-ar-sensor-row > svg { width: 18px; height: 18px; color: var(--ar-ui-muted); }
.waterly-ar-sensor-row > span:last-child { text-align: right; font-size: 11px; line-height: 1.4; color: var(--ar-ui-muted); }
.waterly-ar-sensor-row > .is-ok { color: var(--ar-ui-accent) !important; }
.waterly-ar-sensor-row > .is-warn, .waterly-ar-sensor-row > .is-error { color: var(--ar-ui-warn) !important; }
.waterly-ar-pose-hint { margin: 12px 0 0; padding: 12px; border-radius: 12px; background: var(--ar-ui-track); color: var(--ar-ui-muted); font-size: 11px; line-height: 1.6; }
.waterly-ar-pose-hint.is-hidden { display: none; }

.waterly-ar-safety { align-self: center; z-index: 35; display: flex; align-items: center; gap: 9px; max-width: 100%; padding: 10px 14px; border: 1px solid var(--ar-ui-border); border-radius: 16px; background: var(--ar-ui-surface); color: var(--ar-ui-text); backdrop-filter: blur(16px); font-size: 11px; line-height: 1.4; pointer-events: none; }
.waterly-ar-safety svg { width: 17px; height: 17px; color: var(--ar-ui-accent); }
.waterly-ar-fallback { position: absolute; top: 42%; left: 50%; width: min(270px, calc(100vw - 48px)); transform: translate(-50%, -50%); text-align: center; color: var(--ar-ui-text); }
.waterly-ar-fallback-lens { display: grid; place-items: center; width: 76px; height: 76px; margin: 0 auto 20px; border: 1px solid var(--ar-ui-border); border-radius: 28px; background: linear-gradient(145deg, var(--ar-ui-track), transparent); box-shadow: 0 0 70px color-mix(in srgb, var(--ar-ui-accent) 8%, transparent); color: var(--ar-ui-accent); }
.waterly-ar-fallback-lens svg { width: 30px; height: 30px; stroke-width: 1; }
.waterly-ar-fallback strong { display: block; font: 500 19px/1.3 var(--wl-font-sans); letter-spacing: -.02em; }
.waterly-ar-fallback p { margin: 10px 0 0; font-size: 12px; line-height: 1.8; color: var(--ar-ui-muted); }
.waterly-ar-hud.is-radar-only .waterly-ar-video { background: radial-gradient(ellipse at 50% 42%, rgba(32, 96, 102, .22), transparent 55%), #061019; }
@keyframes waterly-ar-panel-in { from { opacity: 0; translate: 0 -6px; } to { opacity: 1; translate: 0 0; } }

/********************************************** 3D buoy + WQI orbit **********************************************/
.waterly-ar-poi {
	position: absolute;
	width: min(72vw, 220px);
	pointer-events: none;
	will-change: left, top, transform;
	transform-origin: center bottom;
	filter: drop-shadow(0 16px 26px rgba(0, 0, 0, 0.45));
}

.waterly-ar-poi.is-selected {
	width: min(86vw, 280px);
}

.waterly-ar-poi-float {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	/* The base must stay on its projected water-plane position. */
}

.waterly-ar-buoy {
	appearance: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
	pointer-events: auto;
	-webkit-tap-highlight-color: transparent;
}

.waterly-ar-buoy-scene {
	--ar-buoy-height: clamp(74px, 17vh, 150px);
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 132px;
	perspective: 720px;
	perspective-origin: 50% 35%;
	transform-style: preserve-3d;
}

.waterly-ar-wqi-3d {
	position: relative;
	z-index: 3;
	width: 86px;
	height: 86px;
	transform: rotateX(18deg) translateZ(28px);
	transform-style: preserve-3d;
	filter: drop-shadow(0 10px 18px var(--ar-wqi-glow, rgba(105, 189, 247, 0.55)));
}

.waterly-ar-poi.is-selected .waterly-ar-wqi-3d {
	position: absolute;
	top: calc(var(--ar-detail-top, -144px) - 43px);
	left: calc(50% + var(--ar-detail-x, 0px));
	transform: translateX(-50%);
}
.waterly-ar-poi.is-selected .waterly-ar-buoy-scene { --ar-buoy-height: clamp(46px, 9vh, 80px); }

.waterly-ar-wqi-halo {
	position: absolute;
	inset: -10px;
	border-radius: 50%;
	background: radial-gradient(circle, color-mix(in srgb, var(--ar-wqi, #69bdf7) 42%, transparent), transparent 70%);
	animation: waterly-ar-poi-ripple 2.6s ease-out infinite;
}

.waterly-ar-wqi-ring {
	position: absolute;
	inset: 0;
	border: 1.5px solid color-mix(in srgb, var(--ar-wqi, #69bdf7) 60%, transparent);
	border-radius: 50%;
	opacity: 0.55;
	transform-style: preserve-3d;
}

.waterly-ar-wqi-ring.is-a {
	animation: waterly-ar-poi-spin 9s linear infinite;
	border-top-color: transparent;
	border-left-color: transparent;
	transform: rotateX(68deg);
}

.waterly-ar-wqi-ring.is-b {
	inset: 10px;
	animation: waterly-ar-poi-spin 6.5s linear infinite reverse;
	border-bottom-color: transparent;
	border-right-color: transparent;
	opacity: 0.4;
	transform: rotateX(68deg) rotateZ(25deg);
}

.waterly-ar-wqi-gauge {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
}

.waterly-ar-wqi-track {
	fill: transparent;
	stroke: rgba(255, 255, 255, 0.12);
	stroke-width: 3.4;
}

.waterly-ar-wqi-value {
	fill: transparent;
	stroke: var(--ar-wqi, #69bdf7);
	stroke-width: 3.4;
	stroke-linecap: round;
}

.waterly-ar-wqi-core {
	position: absolute;
	inset: 14px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background:
		radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.42), transparent 42%),
		radial-gradient(circle at 50% 58%, color-mix(in srgb, var(--ar-wqi, #69bdf7) 58%, #041018), rgba(4, 10, 16, 0.94));
	box-shadow:
		0 0 22px var(--ar-wqi-glow, rgba(105, 189, 247, 0.5)),
		inset 0 0 14px rgba(255, 255, 255, 0.1);
	line-height: 1;
}

.waterly-ar-wqi-core b {
    font-family: var(--wl-font-mono);
	color: #fff;
	font-size: 22px;
	font-weight: 900;
	font-variant-numeric: tabular-nums;
	text-shadow: 0 0 14px var(--ar-wqi-glow, rgba(105, 189, 247, 0.85));
}

.waterly-ar-wqi-core small {
	margin-top: 2px;
	color: rgba(234, 243, 249, 0.75);
	font-size: 8px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.waterly-ar-buoy-render {
	position: relative;
	z-index: 2;
	width: 110px;
	height: var(--ar-buoy-height);
	margin-top: 10px;
	overflow: hidden;
}

.waterly-ar-buoy-render img {
	position: absolute;
	top: 0;
	left: 50%;
	display: block;
	width: auto;
	max-width: none;
	/* Store Studio places the waterline at 66.5% of this unchanged render. */
	height: calc(var(--ar-buoy-height) * 1.50376);
	transform: translateX(-50%);
	pointer-events: none;
}

.waterly-ar-buoy-waterline {
	position: absolute;
	z-index: 2;
	bottom: -5px;
	left: 50%;
	width: 116px;
	height: 16px;
	transform: translateX(-50%);
	pointer-events: none;
}

.waterly-ar-poi-pulse {
	position: absolute;
	inset: 0;
	border: 1.5px solid var(--ar-wqi, #69bdf7);
	border-radius: 50%;
	animation: waterly-ar-poi-pulse 2.2s ease-out infinite;
}

.waterly-ar-poi-pulse.is-delayed { animation-delay: 1.1s; }

.waterly-ar-buoy-tag {
	position: absolute;
	top: calc(100% + 12px);
	left: 50%;
	width: max-content;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	max-width: 160px;
	padding: 7px 10px 8px;
	border: 1px solid color-mix(in srgb, var(--ar-wqi, #69bdf7) 35%, rgba(255, 255, 255, 0.12));
	border-radius: 14px;
	background: linear-gradient(160deg, rgba(8, 18, 28, 0.78), rgba(4, 10, 16, 0.5));
	backdrop-filter: blur(14px) saturate(1.25);
	-webkit-backdrop-filter: blur(14px) saturate(1.25);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
	text-align: center;
}

.waterly-ar-buoy-tag strong {
	overflow: hidden;
	max-width: 140px;
	color: #f4fafc;
	font-size: 12px;
	font-weight: 800;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.waterly-ar-buoy-tag span {
	padding: 1px 7px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.35);
	color: #9fe0ff;
	font-size: 10px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.waterly-ar-buoy-tag em {
	color: color-mix(in srgb, var(--ar-wqi, #69bdf7) 70%, #fff);
	font-size: 9px;
	font-style: normal;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.waterly-ar-buoy-tag small {
	color: rgba(189, 208, 220, 0.78);
	font-size: 9px;
	font-weight: 700;
}

.waterly-ar-orbit {
	position: absolute;
	left: calc(50% + var(--ar-detail-x, 0px));
	top: var(--ar-detail-top, -144px);
	width: 0;
	height: 0;
	z-index: 5;
	pointer-events: none;
}

.waterly-ar-orbit-ring {
	position: absolute;
	top: var(--ar-detail-top, -144px);
	left: calc(50% + var(--ar-detail-x, 0px));
	width: calc(var(--ar-orbit-r, 118px) * 2);
	height: calc(var(--ar-orbit-r, 118px) * 2);
	border: 1px dashed color-mix(in srgb, var(--ar-wqi, #69bdf7) 35%, transparent);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	box-shadow: 0 0 24px color-mix(in srgb, var(--ar-wqi, #69bdf7) 18%, transparent);
	pointer-events: none;
}

.waterly-ar-orbit-status {
	position: absolute;
	left: 50%;
	top: 110px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	min-width: 160px;
	padding: 10px 12px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 14px;
	background: rgba(8, 16, 24, 0.88);
	color: #dce8f0;
	font-size: 11px;
	font-weight: 700;
	text-align: center;
	transform: translateX(-50%);
	pointer-events: auto;
	backdrop-filter: blur(12px);
}

.waterly-ar-sat {
	position: absolute;
	left: 0;
	top: 0;
	transform: rotate(var(--ar-sat-a, 0deg)) translate(var(--ar-orbit-r, 110px)) rotate(calc(-1 * var(--ar-sat-a, 0deg))) translate(-50%, -50%);
	animation: waterly-ar-sat-in 0.45s ease both;
	pointer-events: none;
}

.waterly-ar-sat:nth-child(1) { animation-delay: 0.02s; }
.waterly-ar-sat:nth-child(2) { animation-delay: 0.05s; }
.waterly-ar-sat:nth-child(3) { animation-delay: 0.08s; }
.waterly-ar-sat:nth-child(4) { animation-delay: 0.11s; }
.waterly-ar-sat:nth-child(5) { animation-delay: 0.14s; }
.waterly-ar-sat:nth-child(6) { animation-delay: 0.17s; }
.waterly-ar-sat:nth-child(7) { animation-delay: 0.2s; }
.waterly-ar-sat:nth-child(8) { animation-delay: 0.23s; }

.waterly-ar-sat-card {
	box-sizing: border-box;
	width: 96px;
	padding: 6px 8px;
	border: 1px solid color-mix(in srgb, var(--sat-color, #69bdf7) 45%, rgba(255, 255, 255, 0.12));
	border-radius: 12px;
	background: linear-gradient(160deg, rgba(8, 18, 28, 0.92), rgba(4, 10, 16, 0.72));
	box-shadow:
		0 0 16px color-mix(in srgb, var(--sat-color, #69bdf7) 28%, transparent),
		0 10px 20px rgba(0, 0, 0, 0.35);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	text-align: center;
}

.waterly-ar-sat-card span {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	min-height: 20px;
	overflow: hidden;
	color: rgba(189, 208, 220, 0.92);
	font-size: 8px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: normal;
	line-height: 1.25;
}

.waterly-ar-sat-card span i {
	color: var(--sat-color, #69bdf7);
	margin-right: 2px;
}

.waterly-ar-sat-card strong {
	display: block;
	margin-top: 2px;
	color: #fff;
	font-size: 12px;
	font-weight: 900;
	font-variant-numeric: tabular-nums;
	line-height: 1.15;
}

.waterly-ar-orbit-close {
	appearance: none;
	position: absolute;
	left: 50%;
	top: 29px;
	z-index: 6;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 999px;
	background: rgba(8, 16, 24, 0.9);
	color: #eaf3f9;
	font: inherit;
	cursor: pointer;
	transform: translateX(-50%);
	pointer-events: auto;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.35);
}

.waterly-ar-orbit.is-ready > .waterly-ar-orbit-close {
	top: calc(-1 * var(--ar-orbit-r, 110px) - 69px);
}

.waterly-ar-readings-pages { position: absolute; left: 0; top: calc(var(--ar-readings-bottom, 135px) + 8px); display: flex; align-items: center; gap: 8px; transform: translateX(-50%); color: var(--waterly-ar-text); font: 600 11px/1 var(--wl-font-sans); pointer-events: auto; }
.waterly-ar-readings-pages button { width: 36px; height: 36px; border: 1px solid var(--ar-ui-border); border-radius: 50%; background: var(--ar-ui-surface); color: var(--ar-ui-text); font-size: 22px; cursor: pointer; }
.waterly-ar-readings-pages button:disabled { opacity: .35; cursor: default; }
.waterly-ar-readings-pages span { padding: 6px; border-radius: 10px; background: var(--ar-ui-surface); color: var(--ar-ui-text); white-space: nowrap; }

.waterly-ar-orbit.is-loading .waterly-ar-orbit-status,
.waterly-ar-orbit.is-error .waterly-ar-orbit-status,
.waterly-ar-orbit.is-empty .waterly-ar-orbit-status {
	pointer-events: auto;
}

.waterly-ar-orbit.is-error .waterly-ar-orbit-close,
.waterly-ar-orbit.is-empty .waterly-ar-orbit-close {
	position: static;
	width: auto;
	height: auto;
	padding: 6px 12px;
	border-radius: 10px;
	transform: none;
}

.waterly-ar-poi.is-excellent .waterly-ar-wqi-halo,
.waterly-ar-poi.is-good .waterly-ar-wqi-halo {
	animation-duration: 2.8s;
}

.waterly-ar-poi.is-poor .waterly-ar-poi-pulse,
.waterly-ar-poi.is-critical .waterly-ar-poi-pulse {
	animation-duration: 1.35s;
}

.waterly-ar-offscreen {
	position: absolute;
	top: 50%;
	pointer-events: auto;
}

.waterly-ar-offscreen-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 8px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.72);
	color: #7dd3fc;
	font-size: 10px;
	font-weight: 800;
}

.waterly-ar-radar-wrap { position: absolute; bottom: calc(18px + var(--safe-bottom, 0px)); left: 50%; z-index: 20; display: flex; flex-direction: column; align-items: center; gap: 10px; width: min(344px, calc(100vw - 36px)); transform: translateX(-50%); }
.waterly-ar-session-status { display: flex; align-items: center; gap: 6px; max-width: 100%; padding: 6px 10px; border-radius: 10px; background: var(--ar-ui-surface); color: var(--ar-ui-muted); font-size: 10px; line-height: 1.4; text-align: center; backdrop-filter: blur(12px); }
.waterly-ar-session-status::before { content: ""; width: 4px; height: 4px; flex-shrink: 0; border-radius: 50%; background: var(--ar-ui-accent); }
.waterly-ar-session-status.is-pending::before { background: var(--ar-ui-warn); }
.waterly-ar-session-status.is-error::before { background: var(--ar-ui-error); }
.waterly-ar-radar-dock { display: flex; align-items: center; gap: 18px; width: 100%; padding: 14px 18px 14px 14px; border: 1px solid var(--ar-ui-border); border-radius: 28px; background: var(--ar-ui-surface); color: var(--ar-ui-text); backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%); box-shadow: var(--ar-ui-shadow); }
.waterly-ar-radar { position: relative; flex-shrink: 0; width: 100px; height: 100px; border: 1px solid var(--ar-ui-border); border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--ar-ui-accent) 7%, transparent), transparent 72%); }
.waterly-ar-radar-grid { position: absolute; inset: 0; border-radius: inherit; background: repeating-radial-gradient(circle at center, transparent 0 15px, var(--ar-ui-border) 15px 16px, transparent 16px 17px); opacity: .65; }
.waterly-ar-radar-grid::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(transparent calc(50% - .5px), var(--ar-ui-border) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)), linear-gradient(90deg, transparent calc(50% - .5px), var(--ar-ui-border) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)); }
.waterly-ar-radar-cone { position: absolute; inset: 9%; border-radius: 50%; background: conic-gradient(from -30deg, color-mix(in srgb, var(--ar-ui-accent) 18%, transparent) 0deg 60deg, transparent 60deg); mask-image: radial-gradient(circle, #000 0, transparent 70%); }
.waterly-ar-radar-rose { position: absolute; inset: 0; transform-origin: center; will-change: transform; }
.waterly-ar-radar-rose > span { position: absolute; font: 600 8px/1 var(--wl-font-sans); color: var(--ar-ui-muted); }
.waterly-ar-radar-rose > .is-n { top: -4px; left: 50%; transform: translateX(-50%); color: var(--ar-ui-accent); background: var(--ar-ui-surface); padding: 0 3px; }
.waterly-ar-radar-rose > .is-e { right: -2px; top: 50%; transform: translateY(-50%); }
.waterly-ar-radar-rose > .is-s { bottom: -4px; left: 50%; transform: translateX(-50%); }
.waterly-ar-radar-rose > .is-w { left: -3px; top: 50%; transform: translateY(-50%); }
.waterly-ar-radar-points { position: absolute; inset: 0; z-index: 4; }
.waterly-ar-radar-needle { position: absolute; top: calc(50% - 10px); left: calc(50% - 4px); z-index: 2; width: 8px; height: 11px; clip-path: polygon(50% 0, 100% 100%, 50% 75%, 0 100%); background: var(--ar-ui-text); }
.waterly-ar-radar-center { position: absolute; top: 50%; left: 50%; z-index: 3; width: 4px; height: 4px; border-radius: 50%; background: var(--ar-ui-text); transform: translate(-50%, -50%); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ar-ui-text) 12%, transparent); }
.waterly-ar-radar-dot { position: absolute; display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: transparent; transform: translate(-50%, -50%); pointer-events: auto; cursor: pointer; }
.waterly-ar-radar-dot::after { content: ""; width: 5px; height: 5px; border: 1px solid color-mix(in srgb, var(--radar-point) 50%, white); border-radius: 50%; background: var(--radar-point); box-shadow: 0 0 7px var(--radar-glow); }
.waterly-ar-radar-dot:hover::after, .waterly-ar-radar-dot.is-selected::after { box-shadow: 0 0 0 3px color-mix(in srgb, var(--radar-point) 22%, transparent), 0 0 8px var(--radar-glow); }
.waterly-ar-radar-info { flex: 1; min-width: 0; }
.waterly-ar-radar-label { display: block; color: var(--ar-ui-muted); font-size: 10px; line-height: 1.3; }
.waterly-ar-radar-metrics { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 5px; }
.waterly-ar-radar-metrics > strong { color: var(--ar-ui-text); font: 500 32px/1.1 var(--wl-font-sans); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.waterly-ar-heading { color: var(--ar-ui-muted); font: 500 12px/1.2 var(--wl-font-sans); font-variant-numeric: tabular-nums; }
.waterly-ar-heading small { margin-left: 2px; }
.waterly-ar-radar-nearest { overflow: hidden; margin-top: 6px; color: var(--ar-ui-text); font-size: 10px; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
.waterly-ar-radar-meta { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--ar-ui-border); color: var(--ar-ui-muted); font: 500 9px/1.3 var(--wl-font-sans); }

@media (max-height: 650px) {
	.waterly-ar-wqi-3d { width: 64px; height: 64px; }
	.waterly-ar-wqi-core b { font-size: 18px; }
	.waterly-ar-poi.is-selected .waterly-ar-wqi-3d { width: 86px; height: 86px; }
	/* The selected readings take priority on short screens. Keep the ground anchor,
	   and place its name below the readings instead of behind the lower cards. */
	.waterly-ar-poi.is-selected .waterly-ar-buoy-render,
	.waterly-ar-poi.is-selected .waterly-ar-buoy-waterline { visibility: hidden; }
	.waterly-ar-poi.is-selected .waterly-ar-buoy-tag { top: calc(var(--ar-detail-top, -144px) + var(--ar-detail-footer, 158px) + 12px); left: calc(50% + var(--ar-detail-x, 0px)); padding: 2px 10px; gap: 1px; }
	.waterly-ar-poi.is-selected .waterly-ar-buoy-tag strong { font-size: 11px; line-height: 1.2; }
	.waterly-ar-poi.is-selected .waterly-ar-buoy-tag span { font-size: 9px; line-height: 1.2; }
	.waterly-ar-poi.is-selected .waterly-ar-buoy-tag em { font-size: 8px; line-height: 1.2; }
	.waterly-ar-hud.has-selected-point .waterly-ar-radar-dock { padding: 10px 14px 10px 10px; gap: 14px; }
	.waterly-ar-hud.has-selected-point .waterly-ar-radar { width: 80px; height: 80px; }
	.waterly-ar-hud.has-selected-point .waterly-ar-radar-metrics > strong { font-size: 25px; }
	.waterly-ar-hud.has-selected-point .waterly-ar-radar-meta { margin-top: 3px; padding-top: 3px; }
	.waterly-ar-hud.has-selected-point .waterly-ar-session-status.is-ok { display: none; }
}

@media (max-height: 520px) and (orientation: landscape) {
	.waterly-ar-buoy-scene { --ar-buoy-height: clamp(46px, 14vh, 66px); }
	.waterly-ar-radar-wrap { left: max(18px, var(--safe-left, 0px)); width: 270px; transform: none; bottom: max(12px, var(--safe-bottom, 0px)); gap: 6px; }
	.waterly-ar-radar-dock { padding: 10px 14px 10px 10px; gap: 14px; border-radius: 22px; }
	.waterly-ar-radar { width: 76px; height: 76px; }
	.waterly-ar-radar-metrics > strong { font-size: 25px; }
	.waterly-ar-radar-nearest { margin-top: 3px; }
	.waterly-ar-radar-meta { margin-top: 5px; padding-top: 5px; }
	.waterly-ar-fallback { top: 40%; left: 66%; width: 230px; }
	.waterly-ar-fallback-lens { width: 52px; height: 52px; margin-bottom: 12px; border-radius: 18px; }
	.waterly-ar-fallback strong { font-size: 16px; }
	.waterly-ar-fallback p { font-size: 10px; line-height: 1.5; }
	.waterly-ar-panel { max-height: calc(100dvh - 90px - var(--safe-top, 0px)); overflow-y: auto; }
}

@keyframes waterly-ar-pulse {
	50% { opacity: 0.72; }
}

@keyframes waterly-ar-poi-spin {
	to { transform: rotate(360deg); }
}

@keyframes waterly-ar-poi-ripple {
	0% { transform: scale(0.72); opacity: 0.7; }
	100% { transform: scale(1.35); opacity: 0; }
}

@keyframes waterly-ar-poi-pulse {
	0% { transform: scale(0.45); opacity: 0.85; }
	100% { transform: scale(1.7); opacity: 0; }
}

@keyframes waterly-ar-poi-shine {
	0%, 55% { transform: translateX(-120%); }
	80%, 100% { transform: translateX(120%); }
}

@keyframes waterly-ar-sat-in {
	from {
		opacity: 0;
		transform: rotate(var(--ar-sat-a, 0deg)) translate(calc(var(--ar-orbit-r, 110px) * 0.85)) rotate(calc(-1 * var(--ar-sat-a, 0deg))) translate(-50%, -50%) scale(0.9);
	}
	to {
		opacity: 1;
		transform: rotate(var(--ar-sat-a, 0deg)) translate(var(--ar-orbit-r, 110px)) rotate(calc(-1 * var(--ar-sat-a, 0deg))) translate(-50%, -50%) scale(1);
	}
}

@media (min-width: 900px) {
	.waterly-ar-poi {
		width: 240px;
	}

	.waterly-ar-poi.is-selected {
		width: 300px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.waterly-ar-panel,
	.waterly-ar-poi-float,
	.waterly-ar-wqi-ring,
	.waterly-ar-wqi-halo,
	.waterly-ar-poi-pulse,
	.waterly-ar-sat {
		animation: none !important;
	}
}

/********************************************** Light theme **********************************************/
html[data-theme="light"] .waterly-ar-hud {
	--ar-ui-surface: rgba(247, 252, 253, .9);
	--ar-ui-border: rgba(21, 72, 83, .14);
	--ar-ui-text: #123c47;
	--ar-ui-muted: #54737b;
	--ar-ui-accent: #087c65;
	--ar-ui-track: rgba(21, 72, 83, .08);
	--ar-ui-warn: #9a651f;
	--ar-ui-error: #a4493d;
	--ar-ui-shadow: 0 12px 36px rgba(9, 39, 51, .12), inset 0 1px 0 rgba(255,255,255,.8);
	background: #e8eef3;
	color: #173f56;
	--waterly-ar-text: #173f56;
	--waterly-ar-muted: #5f7586;
	--waterly-ar-accent: #0d7fbd;
	--waterly-ar-surface: rgba(255, 255, 255, 0.98);
	--waterly-ar-surface-2: rgba(244, 249, 252, 0.98);
	--waterly-ar-border: rgba(13, 127, 189, 0.18);
	--waterly-ar-btn: #1490d4;
	--waterly-ar-btn-2: #0d6ea8;
	--waterly-ar-secondary-bg: #eef3f7;
	--waterly-ar-secondary-border: rgba(28, 73, 104, 0.16);
	--waterly-ar-secondary-text: #2f4a5c;
	--waterly-ar-scrim: rgba(232, 238, 243, 0.92);
	--waterly-ar-icon-border: rgba(13, 127, 189, 0.28);
	--waterly-ar-icon-bg: rgba(13, 127, 189, 0.08);
	--waterly-ar-card-shadow: 0 18px 40px rgba(31, 55, 75, 0.16), 0 0 0 1px rgba(255, 255, 255, 0.8) inset;
}

html[data-theme="light"] .waterly-ar-video {
	background: #d8e3eb;
}

html[data-theme="light"] .waterly-ar-poi {
	filter: drop-shadow(0 14px 22px rgba(31, 55, 75, 0.22));
}

html[data-theme="light"] .waterly-ar-buoy-tag {
	border-color: rgba(28, 73, 104, 0.16);
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 10px 22px rgba(31, 55, 75, 0.14);
}

html[data-theme="light"] .waterly-ar-buoy-tag strong {
	color: #173f56;
}

html[data-theme="light"] .waterly-ar-buoy-tag span {
	background: rgba(13, 127, 189, 0.08);
	color: #0d7fbd;
}

html[data-theme="light"] .waterly-ar-buoy-tag small {
	color: #5f7586;
}

html[data-theme="light"] .waterly-ar-wqi-track {
	stroke: rgba(28, 73, 104, 0.12);
}

html[data-theme="light"] .waterly-ar-wqi-core {
	background:
		radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.7), transparent 42%),
		radial-gradient(circle at 50% 58%, color-mix(in srgb, var(--ar-wqi, #0d7fbd) 35%, #fff), #eef6fb);
}

html[data-theme="light"] .waterly-ar-wqi-core b {
	color: #173f56;
	text-shadow: none;
}

html[data-theme="light"] .waterly-ar-wqi-core small {
	color: #6a8293;
}

html[data-theme="light"] .waterly-ar-sat-card {
	background: linear-gradient(160deg, rgba(255, 255, 255, 0.96), rgba(244, 249, 252, 0.9));
	box-shadow: 0 10px 18px rgba(31, 55, 75, 0.14);
}

html[data-theme="light"] .waterly-ar-sat-card span {
	color: #5f7586;
}

html[data-theme="light"] .waterly-ar-sat-card strong {
	color: #173f56;
}

html[data-theme="light"] .waterly-ar-orbit-status,
html[data-theme="light"] .waterly-ar-orbit-close {
	border-color: rgba(28, 73, 104, 0.16);
	background: rgba(255, 255, 255, 0.94);
	color: #173f56;
}

html[data-theme="light"] .waterly-ar-offscreen-btn {
	border-color: rgba(28, 73, 104, 0.2);
	background: rgba(255, 255, 255, 0.92);
	color: #0d7fbd;
	box-shadow: 0 8px 18px rgba(31, 55, 75, 0.14);
}

.waterly-ar-ground-anchor { position: absolute; bottom: -4px; left: calc(50% - 4px); width: 8px; height: 8px; border-radius: 50%; background: var(--ar-wqi); box-shadow: 0 0 12px var(--ar-wqi-glow); pointer-events: none; }

html[data-theme="light"] .waterly-ar-hud.is-radar-only .waterly-ar-video { background: radial-gradient(ellipse at 50% 42%, rgba(86, 164, 166, .14), transparent 55%), #e7f1f4; }

html[data-theme="light"] .waterly-ar-mode { color: var(--ar-ui-text); text-shadow: none; }

/* Waterly typography roles. */
.waterly-ar-range-current, .waterly-ar-radar-metrics > strong, .waterly-ar-heading { font-family: var(--wl-font-mono); font-variant-numeric: tabular-nums; }


/* features/management/marker_sections.css */
/**************************************************************************************************
	@author         hommie.pl
	@contributors   Rafał Złotorzyński
	@module         CSS
	@file           marker_sections.css
	@todo           Grupy parametrów w markerze + przełącznik trybu (graficzny / kompaktowy)
**************************************************************************************************/

/* ───────────────────────── Przełącznik trybu ───────────────────────── */
.marker-mode-toolbar {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 12px;
}

.marker-mode-toolbar.is-guide-only {
    justify-content: flex-end;
}

.marker-mode-switch {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 3px;
    margin: 0;
    padding: 3px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 999px;
    background: rgba(2, 6, 14, 0.55);
}

.marker-mode-button {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    transition: all 200ms ease;
}

.marker-mode-button i { font-size: 10px; }

.marker-mode-button:hover { color: #e2e8f0; }

.marker-mode-button.is-active {
    background: rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    color: #fff;
}

.marker-mode-dock-button {
    display: inline-flex;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 50%;
    background: rgba(2, 6, 14, 0.55);
    color: #94a3b8;
    cursor: pointer;
    transition: border-color 180ms ease, color 180ms ease, background 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.marker-mode-dock-controls {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.marker-mode-dock-button i {
    font-size: 12px;
    transform: rotate(45deg);
    transition: transform 180ms ease;
}

.marker-mode-dock-button:hover,
.marker-mode-dock-button:focus-visible {
    outline: none;
    border-color: rgba(148, 163, 184, 0.42);
    color: #e2e8f0;
    transform: translateY(-1px);
}

.marker-mode-dock-button.is-active {
    border-color: rgba(70, 216, 199, 0.45);
    color: #ecffff;
    background: linear-gradient(135deg, rgba(29, 105, 104, 0.42), rgba(4, 27, 35, 0.82));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 8px 22px -16px #35d5c2;
}

.marker-mode-dock-button.is-active i {
    transform: rotate(0deg);
}

.marker-mode-close-button {
    display: inline-flex;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(248, 113, 113, 0.28);
    border-radius: 50%;
    background: rgba(127, 29, 29, 0.28);
    color: #fca5a5;
    cursor: pointer;
    transition: border-color 180ms ease, color 180ms ease, background 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.marker-mode-close-button i {
    font-size: 12px;
}

.marker-mode-close-button:hover,
.marker-mode-close-button:focus-visible {
    outline: none;
    border-color: rgba(248, 113, 113, 0.55);
    color: #fee2e2;
    background: rgba(153, 27, 27, 0.42);
    transform: translateY(-1px);
    box-shadow: 0 8px 22px -16px #f87171;
}

@media (max-width: 767px) {
    .marker-mode-dock-controls {
        display: none !important;
    }
}

.marker-mode-guide-button {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    gap: 6px;
    padding: 3px 9px 3px 5px;
    border: 1px solid rgba(70, 216, 199, 0.25);
    border-radius: 999px;
    color: #b7d8dc;
    background: linear-gradient(135deg, rgba(29, 105, 104, 0.28), rgba(4, 27, 35, 0.72));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 22px -16px #35d5c2;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 180ms ease, color 180ms ease, background 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.marker-mode-guide-icon {
    display: grid;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    place-items: center;
    border-radius: 50%;
    color: #062128;
    background: linear-gradient(145deg, #70eadb, #32bfb5);
    box-shadow: 0 0 9px rgba(64, 215, 198, 0.2);
    font-size: 8px;
}

.marker-mode-guide-button > i:last-child {
    color: #4e8b91;
    font-size: 7px;
    transition: transform 180ms ease;
}

.marker-mode-guide-button:hover,
.marker-mode-guide-button:focus-visible {
    outline: none;
    border-color: rgba(87, 231, 214, 0.52);
    color: #ecffff;
    background: linear-gradient(135deg, rgba(38, 132, 128, 0.38), rgba(5, 35, 44, 0.82));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 10px 24px -14px #35d5c2;
    transform: translateY(-1px);
}

.marker-mode-guide-button:hover > i:last-child,
.marker-mode-guide-button:focus-visible > i:last-child {
    transform: translateX(2px);
}

/* Na dużej mapie Samouczek jest kontrolką obok przycisku listy obiektów. */
@media (min-width: 768px) {
    .marker-mode-guide-button { display: none; }
}

@media (max-width: 430px) {
    .marker-mode-toolbar { gap: 6px; }
    .marker-mode-button { padding-right: 10px; padding-left: 10px; font-size: 9px; }
    .marker-mode-guide-button { min-height: 30px; padding-right: 8px; font-size: 9px; }
    .marker-mode-guide-icon { width: 18px; height: 18px; flex-basis: 18px; font-size: 7px; }
}

/* ───────────────────────── Grupa parametrów ───────────────────────── */
.marker-group { margin-bottom: 14px; }

.marker-group-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 2px 8px;
}

.marker-group-icon {
    display: flex;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 10px;
}

.marker-group-name {
    color: #cbd5e1;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.marker-group-line {
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, rgba(148, 163, 184, 0.18), transparent);
}

.marker-group-toggle {
    display: inline-flex;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 7px;
    background: rgba(2, 6, 14, 0.5);
    color: #64748b;
    cursor: pointer;
    transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.marker-group-toggle i {
    font-size: 8px;
}

.marker-group-toggle:hover,
.marker-group-toggle:focus-visible {
    border-color: rgba(56, 189, 248, 0.28);
    background: rgba(56, 189, 248, 0.09);
    color: #7dd3fc;
    outline: none;
}

.marker-group-toggle:active { transform: scale(0.92); }

.marker-group.is-collapsed > :not(.marker-group-head) {
    display: none !important;
}

.marker-graphic-category {
    width: 100%;
}

.marker-graphic-category-content {
    display: block;
}

/* W trybie graficznym kategoria jest jedyną kartą. Poszczególne pomiary są
   podsekcjami rozdzielonymi linią, dzięki czemu nie powstaje „ramka w ramce”. */
.marker-main-contener:not(.is-compact-mode) .marker-graphic-category {
    margin-bottom: 16px;
}

.marker-main-contener:not(.is-compact-mode) .marker-graphic-category > .marker-group-head {
    padding: 0 2px 7px;
}

.marker-main-contener:not(.is-compact-mode) .marker-graphic-category > .marker-group-head .marker-group-name {
    color: #cbd8df;
    font-size: 10px;
    font-weight: 700;
}

.select-tile-contener .marker-main-contener .marker-group > .marker-group-head .marker-group-line {
    opacity: 0.55;
}

.select-tile-contener .marker-main-contener .marker-group > .marker-group-head .marker-group-toggle {
    border-color: transparent;
    background: transparent;
}

.marker-main-contener:not(.is-compact-mode) .marker-graphic-category-content {
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.13);
    border-radius: 14px;
    background: rgba(4, 13, 21, 0.58);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.025);
}

.marker-main-contener:not(.is-compact-mode) .marker-graphic-category-content > * {
    margin: 0 !important;
}

.marker-main-contener:not(.is-compact-mode) .marker-graphic-category-content > * + * {
    border-top: 1px solid rgba(148, 163, 184, 0.1);
}

.marker-main-contener:not(.is-compact-mode) .marker-graphic-category-content :is(
    .marker-atmosphere-card,
    .marker-water-temperature-card,
    .marker-water-depth-card,
    .marker-water-oxygen-card,
    .marker-water-ph-card,
    .marker-water-ec-card,
    .marker-water-ions-card,
    .marker-water-clarity-card,
    .marker-water-biology-card,
    .marker-water-organic-card,
    .marker-multi-sensor-card
) {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.marker-main-contener:not(.is-compact-mode) .marker-graphic-category-content :is(
    .marker-water-temperature-card,
    .marker-water-depth-card,
    .marker-water-ph-card,
    .marker-water-ec-card,
    .marker-water-ions-card,
    .marker-water-clarity-card,
    .marker-water-biology-card,
    .marker-water-organic-card,
    .marker-multi-sensor-card
):is(:hover, :focus-visible) {
    border-color: transparent;
    background: rgba(255, 255, 255, 0.012);
    box-shadow: none;
    transform: none;
}

.marker-main-contener:not(.is-compact-mode) .marker-graphic-category-content :is(
    .marker-atmosphere-minimal-header,
    .marker-water-temperature-header,
    .marker-water-depth-header,
    .marker-water-oxygen-header,
    .marker-water-ph-header,
    .marker-water-ec-header,
    .marker-water-clarity-header,
    .marker-water-biology-header,
    .marker-water-organic-header,
    .marker-multi-sensor-header
) {
    min-height: 39px;
    padding: 6px 10px;
    border-bottom-color: rgba(148, 163, 184, 0.07);
    background: rgba(255, 255, 255, 0.014);
}

.marker-main-contener:not(.is-compact-mode) .marker-graphic-category-content .marker-atmosphere-minimal-header {
    min-height: 48px;
}

/* Multisensor w trybie graficznym korzysta z tej samej zwartej tabeli co wariant
   kompaktowy. Nagłówek przeniesiony do podkategorii nie powinien zostać w karcie. */
.marker-main-contener:not(.is-compact-mode) .marker-graphic-category .marker-multi-sensor-card > .marker-multi-sensor-header {
    display: none;
}

.marker-main-contener:not(.is-compact-mode) .marker-graphic-category .marker-multi-sensor-table {
    margin-top: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

/* Gdy multisensor jest jedyną zawartością kategorii, tabela i wiersze są już
   wystarczającą strukturą — zewnętrzna karta nie powinna tworzyć zielonej ramki. */
.marker-main-contener:not(.is-compact-mode) .marker-graphic-category.is-multisensor-only .marker-graphic-category-content {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.marker-main-contener:not(.is-compact-mode) .marker-graphic-category-content .marker-group-basic {
    padding: 8px;
}

.marker-main-contener:not(.is-compact-mode) .marker-graphic-category-content .marker-group-tiles {
    gap: 0;
}

.marker-main-contener:not(.is-compact-mode) .marker-graphic-category-content .marker-group-tiles .marker-tile.marker-widget-group-item {
    min-height: 72px;
    border-color: transparent;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.marker-main-contener:not(.is-compact-mode) .marker-graphic-category-content .marker-group-tiles .marker-tile.marker-widget-group-item + .marker-tile.marker-widget-group-item {
    border-left: 1px solid rgba(148, 163, 184, 0.08);
}

html[data-theme="light"] .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-content {
    border-color: rgba(28, 73, 104, 0.13);
    background: rgba(248, 251, 252, 0.84);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.88);
}

html[data-theme="light"] .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-content > * + * {
    border-top-color: rgba(28, 73, 104, 0.1);
}

html[data-theme="light"] .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-content :is(
    .marker-atmosphere-card,
    .marker-water-temperature-card,
    .marker-water-depth-card,
    .marker-water-oxygen-card,
    .marker-water-ph-card,
    .marker-water-ec-card,
    .marker-water-ions-card,
    .marker-water-clarity-card,
    .marker-water-biology-card,
    .marker-water-organic-card,
    .marker-multi-sensor-card
) {
    background: transparent;
    box-shadow: none;
}

/* Atmosfera nie potrzebuje drugiej karty ani powtórzonego nagłówka. Nagłówek
   kategorii opisuje już zawartość, więc pod nim zostają same trzy pomiary. */
.marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-graphic-category-content {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-minimal-header {
    display: none;
}

.marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-card {
    overflow: visible;
    cursor: pointer;
}

.marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-card::before,
.marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-card::after,
.marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-glow {
    display: none;
}

.marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-body {
    height: auto;
    min-height: 0;
}

.marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-body.is-empty {
    height: 64px;
    min-height: 64px;
}

.marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-empty {
    width: 100%;
    padding: 16px 4px;
}

.marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-minimal-grid {
    height: auto;
    min-height: 0;
    padding: 6px 2px 8px;
    gap: 0;
    background: transparent;
    align-items: start;
}

.marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-minimal-label {
    min-height: 16px;
    justify-content: flex-start;
}

.marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-minimal-trend b {
    max-height: 0;
    opacity: 0;
    transform: translateY(-3px);
}

.marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-minimal-value {
    display: inline-flex;
    height: auto;
    min-height: 0;
    align-items: baseline;
    margin-top: 4px;
    transform: none;
    transition: none;
}

/* Bieżące odczyty w sekcji atmosferycznej mają tę samą hierarchię typograficzną
   co aktualna temperatura wody. */
.marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-minimal-value strong {
    font-size: 36px;
    font-weight: 780;
    line-height: 1;
    letter-spacing: -1px;
}

.marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-minimal-value > span,
.marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-minimal-metric:last-child .marker-atmosphere-minimal-value > span {
    margin: 0;
    font-size: 17px;
    font-weight: 650;
}

.marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-minimal-metric:last-child .marker-atmosphere-minimal-value {
    align-items: baseline;
}

.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-reading-unit-stack {
    margin-left: 6px;
    min-width: 0;
}

.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-reading-unit-stack > .marker-reading-unit {
    font-size: 17px;
    font-weight: 650;
}

.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-reading-unit-stack > .marker-reading-trend,
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-reading-trend i {
    font-size: 10px;
}

.marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-figure {
    width: 100%;
    max-width: 112px;
    margin: 2px auto 0;
}

.marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-figure svg {
    height: 72px;
}

.marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .pressure-bars,
.marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .mineral-instrument-visual {
    width: 100%;
    max-width: 112px;
    margin: 2px auto 0;
}

.marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .pressure-bars svg {
    height: 72px;
}

.marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-minimal-scale > b,
.marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-minimal-scale > em {
    opacity: 0;
}

.marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-minimal-stats {
    max-height: 0;
    margin-top: 0;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.2s ease, transform 0.2s ease, max-height 0.2s ease, margin-top 0.2s ease;
}

/* Bez kurczenia wartości przy hover — tylko ujawnienie szczegółów. */
.marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-card:hover .marker-atmosphere-minimal-value,
.marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-widget:hover .marker-atmosphere-minimal-value,
.marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-minimal-metric:hover .marker-atmosphere-minimal-value {
    height: auto;
    transform: none;
}

/* Szczegóły wracają na hover, ale ich miejsce jest zarezerwowane również w
   stanie spoczynkowym — dzięki temu sekcja nie zmienia wysokości. */
.marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-widget:hover .marker-atmosphere-minimal-trend b,
.marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-minimal-metric:hover .marker-atmosphere-minimal-trend b {
    max-height: 12px;
    opacity: 1;
    transform: translateY(0);
}

.marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-widget:hover .marker-atmosphere-minimal-scale > b,
.marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-widget:hover .marker-atmosphere-minimal-scale > em,
.marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-minimal-metric:hover .marker-atmosphere-minimal-scale > b,
.marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-minimal-metric:hover .marker-atmosphere-minimal-scale > em {
    opacity: 1;
}

.marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-widget:hover .marker-atmosphere-minimal-stats,
.marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-minimal-metric:hover .marker-atmosphere-minimal-stats {
    max-height: 40px;
    margin-top: 6px;
    opacity: 1;
    transform: translateY(0);
}

/* Mobile: ta sama siatka 3 kolumn jak na dużym ekranie. */
@media (max-width: 767px) {
    .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-body,
    .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-minimal-grid {
        height: auto;
        min-height: 0;
    }

    .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-minimal-value strong {
        font-size: 36px;
    }

    .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-figure,
    .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .pressure-bars,
    .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .mineral-instrument-visual {
        max-width: 88px;
    }

    .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-figure svg,
    .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .pressure-bars svg {
        height: 58px;
    }

    .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-minimal-stats {
        opacity: 1;
        max-height: 40px;
        margin-top: 6px;
        transform: none;
    }
}

html[data-theme="light"] .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-graphic-category-content {
    border: 0;
    background: transparent;
    box-shadow: none;
}

/* Pozostały kafelek ORP zachowuje wspólny nagłówek "Parametry podstawowe". */
.marker-graphic-category-basic .marker-group-basic[data-graphic-category-merged] {
    margin-bottom: 0;
}

.marker-graphic-category-basic .marker-group-basic[data-graphic-category-merged] > .marker-group-head {
    display: none;
}

/* ───────────────────────── Kafelki ───────────────────────── */
.marker-group-tiles {
    display: grid;
    grid-template-columns: repeat(var(--group-columns, 2), minmax(0, 1fr));
    gap: 8px;
}

.select-tile-contener .marker-main-contener .marker-group-tiles .marker-tile.marker-widget-group-item {
    position: relative;
    display: flex;
    overflow: hidden;
    width: auto;
    min-height: 58px;
    flex-direction: column;
    align-items: flex-start;
    padding: 9px 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    background: rgba(2, 6, 14, 0.45);
    color: inherit;
    cursor: pointer;
    text-align: left;
    transition: all 180ms ease;
}

.marker-group-tiles .marker-tile:hover {
    border-color: rgba(56, 189, 248, 0.35);
    background: rgba(56, 189, 248, 0.06);
    transform: translateY(-1px);
}

.marker-tile-label {
    display: flex;
    overflow: hidden;
    max-width: calc(100% - 20px);
    align-items: center;
    gap: 6px;
    color: #94a3b8;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.marker-tile-primary {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    transition: opacity 180ms ease, transform 220ms ease;
}

.marker-tile.is-public-status {
    min-height: 66px;
    gap: 8px;
    padding: 10px 10px 11px;
    justify-content: flex-start;
}

.marker-tile.is-public-status .marker-tile-label {
    max-width: 100%;
    margin: 0;
    flex: 0 0 auto;
}

.marker-tile.is-public-status .marker-tile-primary {
    display: flex;
    width: 100%;
    min-width: 0;
    flex: 1 1 auto;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    margin-top: 2px;
}

.marker-tile.is-public-status .marker-public-status {
    display: inline-flex;
    box-sizing: border-box;
    width: auto;
    max-width: 100%;
    min-height: 28px;
    align-items: center;
    justify-content: flex-start;
    align-self: flex-start;
    gap: 5px;
    margin: 0;
    padding: 5px 9px;
    overflow: hidden;
    font-size: 9px;
    font-weight: 650;
    line-height: 1.25;
    letter-spacing: 0.02em;
    text-align: left;
    text-transform: none;
    white-space: normal;
    overflow-wrap: anywhere;
    hyphens: auto;
}

.marker-tile.is-public-status .marker-public-status > i {
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    margin-top: 1px;
    align-self: flex-start;
}

.marker-multi-sensor-value.is-public-status {
    align-items: center;
    justify-content: center;
}

.marker-multi-sensor-value.is-public-status > strong {
    display: flex;
    width: 100%;
    justify-content: center;
    font-size: inherit;
    font-weight: inherit;
}

.marker-multi-sensor-value.is-public-status .marker-public-status {
    margin: 0;
    padding: 4px 7px;
    font-size: 8px;
    line-height: 1.2;
    text-transform: none;
    white-space: normal;
}

.marker-tile-trend-badge {
    position: absolute;
    right: 9px;
    bottom: 8px;
    display: inline-flex;
    width: 15px;
    height: 15px;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background: rgba(148, 163, 184, 0.07);
    font-size: 7px;
    transition: opacity 150ms ease, transform 180ms ease;
}

.marker-tile-trend-badge.is-up,
.marker-tile-insight-trend.is-up { color: #4ade80; }
.marker-tile-trend-badge.is-down,
.marker-tile-insight-trend.is-down { color: #fb7185; }
.marker-tile-trend-badge.is-flat,
.marker-tile-insight-trend.is-flat { color: #7894a3; }

.marker-tile-insight {
    position: absolute;
    right: 9px;
    bottom: 7px;
    left: 9px;
    display: flex;
    min-width: 0;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(7px);
    transition: opacity 170ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.marker-tile-insight-trend {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.marker-tile-insight-trend > i { font-size: 10px; }
.marker-tile-insight-trend > small {
    font-size: 7px;
    font-weight: 750;
    line-height: 9px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.marker-tile-insight-stats {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.marker-tile-insight-stats > span {
    display: flex;
    min-width: 28px;
    flex-direction: column;
    align-items: flex-end;
}

.marker-tile-insight-stats > span + span {
    padding-left: 7px;
    border-left: 1px solid rgba(148, 163, 184, 0.12);
}

.marker-tile-insight-stats small {
    color: #8ca5b2;
    font-size: 7px;
    font-weight: 750;
    letter-spacing: 0.02em;
    line-height: 9px;
    text-transform: uppercase;
}

.marker-tile-insight-stats b {
    font-family: var(--wl-font-mono);
    overflow: hidden;
    color: #f1f7fa;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    line-height: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
    .marker-group-tiles .marker-tile:hover .marker-tile-primary,
    .marker-group-tiles .marker-tile:focus-visible .marker-tile-primary {
        opacity: 0;
        transform: translateY(-5px);
    }

    .marker-group-tiles .marker-tile:hover .marker-tile-trend-badge,
    .marker-group-tiles .marker-tile:focus-visible .marker-tile-trend-badge {
        opacity: 0;
        transform: translateX(4px);
    }

    .marker-group-tiles .marker-tile:hover .marker-tile-insight,
    .marker-group-tiles .marker-tile:focus-visible .marker-tile-insight {
        opacity: 1;
        transform: translateY(0);
    }
}

.marker-tile-label i {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
}

.marker-tile-value {
    margin-top: 4px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.1;
}

.marker-tile-value small {
    margin-left: 5px;
    color: #64748b;
    font-size: 9px;
    font-weight: 700;
}

.marker-tile-inline-trend {
    display: none;
    margin-left: 6px;
    align-items: center;
    vertical-align: middle;
    font-size: 10px;
    line-height: 1;
}
.marker-tile-inline-trend.is-up { color: #4ade80; }
.marker-tile-inline-trend.is-down { color: #fb7185; }
.marker-tile-inline-trend.is-flat { color: #7894a3; }

.marker-tile-age {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    overflow: hidden;
    color: #94a3b8;
    font-size: 9px;
    font-weight: 650;
    line-height: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.marker-tile.is-aging .marker-tile-age { color: #fbbf24; }

.marker-tile.is-stale,
.marker-tile.is-time-unknown {
    border-color: rgba(251, 191, 36, 0.18) !important;
    background: rgba(120, 53, 15, 0.08) !important;
}

.marker-tile.is-stale .marker-tile-value,
.marker-tile.is-time-unknown .marker-tile-value { color: #a8b4bf; }

.marker-tile.is-stale .marker-tile-age,
.marker-tile.is-time-unknown .marker-tile-age { color: #fbbf24; }

/* Wariant gęsty — jony */
.select-tile-contener .marker-main-contener .marker-group-tiles .marker-tile.marker-widget-group-item.is-dense {
    min-height: 48px;
    align-items: center;
    padding: 7px 6px;
    text-align: center;
}

.marker-tile.is-dense .marker-tile-insight {
    right: 5px;
    bottom: 5px;
    left: 5px;
    gap: 3px;
}

.marker-tile.is-dense .marker-tile-insight-trend > small { display: none; }
.marker-tile.is-dense .marker-tile-insight-stats { gap: 2px; }
.marker-tile.is-dense .marker-tile-insight-stats > span { min-width: 22px; }
.marker-tile.is-dense .marker-tile-insight-stats > span + span { padding-left: 3px; }
.marker-tile.is-dense .marker-tile-insight-stats small { font-size: 6px; }
.marker-tile.is-dense .marker-tile-insight-stats b { font-size: 8px; }

.marker-tile.is-dense .marker-tile-label { font-size: 9px; }

.marker-tile.is-dense .marker-tile-value {
    margin-top: 2px;
    font-size: 13px;
}

/* Karty elektrod jonoselektywnych są wspólne dla widoku graficznego i kompaktowego. */
.select-tile-contener .marker-main-contener .marker-group-ions .marker-tile.is-ion {
    min-height: 58px;
    align-items: flex-start;
    padding: 8px 10px;
    text-align: left;
}

.marker-tile.is-ion .marker-tile-label {
    width: 100%;
    max-width: calc(100% - 18px);
    justify-content: space-between;
    color: #b8c7d0;
    font-size: 9px;
    font-weight: 650;
}

.marker-tile-ion-symbol {
    flex: 0 0 auto;
    color: #d8e7f0;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.01em;
}

.marker-tile.is-ion .marker-tile-primary {
    width: 100%;
    align-items: flex-start;
    text-align: left;
}


.marker-tile.is-ion.is-time-unknown .marker-tile-ion-symbol,
.marker-tile.is-ion.is-stale .marker-tile-ion-symbol {
    color: #d7bd77;
}

/* Kompaktowe jony: czytelny układ nazwa + symbol, a pod nimi duży odczyt.
   Wartość nie znika po najechaniu — w tej grupie jest ważniejsza od podglądu statystyk. */
.marker-main-contener.is-compact-mode .marker-group-ions .marker-tile.is-ion {
    display: grid;
    min-height: 64px;
    align-items: start;
    padding: 9px 11px 10px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto 1fr;
    text-align: left;
}

.marker-main-contener.is-compact-mode .marker-group-ions .marker-tile.is-ion .marker-tile-label {
    width: 100%;
    max-width: none;
    grid-column: 1 / -1;
    color: #c5d2da;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 14px;
}

.marker-main-contener.is-compact-mode .marker-group-ions .marker-tile-ion-symbol {
    color: #eaf4f8;
    font-size: 13px;
    line-height: 14px;
}

.marker-main-contener.is-compact-mode .marker-group-ions .marker-tile.is-ion .marker-tile-primary {
    width: 100%;
    min-width: 0;
    align-self: end;
    grid-column: 1 / -1;
    opacity: 1;
    transform: none;
}

.marker-main-contener.is-compact-mode .marker-group-ions .marker-tile.is-ion .marker-tile-age {
    margin-top: 3px;
    font-size: 9px;
}

.marker-main-contener.is-compact-mode .marker-group-ions .marker-tile.is-ion .marker-tile-trend-badge {
    right: 10px;
    bottom: 10px;
}

.marker-main-contener.is-compact-mode .marker-group-ions .marker-tile.is-ion .marker-tile-insight {
    display: none;
}

/* ───────────────────────── Przełączanie trybów ─────────────────────────
   Kod ustawia tryb kompaktowy jako domyślny; bez klasy pozostaje graficzny fallback.
   W trybie kompaktowym chowamy duże widgety i pokazujemy kafelki.
   Klasa trybu siedzi na .marker-main-contener, bo duże widgety wody
   renderowane są bezpośrednio w nim, a nie w .marker-widget-group.       */
.marker-main-contener .marker-compact-tiles { display: none; }

.marker-main-contener.is-compact-mode .marker-compact-tiles { display: block; }

.marker-main-contener.is-compact-mode .marker-graphic-category { display: none; }

.marker-main-contener.is-compact-mode .marker-atmosphere-widget,
.marker-main-contener.is-compact-mode .marker-water-temperature-widget,
.marker-main-contener.is-compact-mode .marker-water-oxygen-widget,
.marker-main-contener.is-compact-mode .marker-water-ph-widget,
.marker-main-contener.is-compact-mode .marker-water-orp-widget,
.marker-main-contener.is-compact-mode .marker-water-depth-widget,
.marker-main-contener.is-compact-mode .marker-water-ec-widget,
.marker-main-contener.is-compact-mode .marker-water-ions-widget,
.marker-main-contener.is-compact-mode .marker-water-clarity-widget,
.marker-main-contener.is-compact-mode .marker-water-biology-widget,
.marker-main-contener.is-compact-mode .marker-water-organic-widget,
.marker-main-contener.is-compact-mode .marker-multi-sensor-widget {
    display: none;
}

/* Odwrotnie niż pozostałe grupy: gęste kafelki jonów zastępuje w trybie graficznym
   pełny widget składu jonowego, więc grupa znika tylko wtedy, gdy ten widget powstał. */
.marker-main-contener.has-ions-widget:not(.is-compact-mode) .marker-parameter-groups .marker-group-ions {
    display: none;
}

.marker-main-contener.has-clarity-widget:not(.is-compact-mode) .marker-parameter-groups .marker-group-optical {
    display: none;
}

.marker-main-contener.has-biology-widget:not(.is-compact-mode) .marker-parameter-groups .marker-group-bio {
    display: none;
}

.marker-main-contener.has-organic-widget:not(.is-compact-mode) .marker-parameter-groups .marker-group-pollution {
    display: none;
}

/* ───────────────────────── Multisensory w trybie kompaktowym ───────────────────────── */
.marker-shared-multi-table.marker-multi-sensor-table {
    overflow: hidden;
    margin-top: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.marker-shared-multi-table .marker-multi-sensor-columns {
    min-height: 30px;
}

.marker-shared-multi-table .marker-multi-sensor-row {
    min-height: 40px;
    margin-top: 0;
    border: 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.09);
    border-radius: 0;
    background: transparent;
}

.marker-shared-multi-table .marker-multi-sensor-row:last-child {
    border-bottom: 0;
}

.marker-shared-multi-table .marker-multi-sensor-sensor {
    padding-top: 4px;
    padding-bottom: 4px;
}

.marker-shared-multi-table .marker-multi-sensor-value {
    padding-top: 4px;
    padding-bottom: 4px;
}

.marker-compact-sensors {
    display: grid;
    gap: 8px;
    margin-top: 8px;
}

.marker-compact-sensor {
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--sensor-color) 20%, rgba(255, 255, 255, 0.06));
    border-radius: 12px;
    background:
        radial-gradient(circle at 0 0, color-mix(in srgb, var(--sensor-color) 10%, transparent), transparent 45%),
        rgba(2, 6, 14, 0.45);
}

.marker-compact-sensor > header {
    display: flex;
    min-height: 31px;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 9px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}

.marker-compact-sensor > header > span {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 6px;
}

.marker-compact-sensor > header i {
    color: var(--sensor-color);
    font-size: 9px;
}

.marker-compact-sensor > header strong {
    overflow: hidden;
    color: #cbd5e1;
    font-size: 9px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.marker-compact-sensor > header b {
    flex: 0 0 auto;
    padding: 2px 5px;
    border: 1px solid color-mix(in srgb, var(--sensor-color) 22%, transparent);
    border-radius: 5px;
    background: color-mix(in srgb, var(--sensor-color) 8%, transparent);
    color: var(--sensor-color);
    font-size: 7px;
    font-weight: 750;
    text-transform: uppercase;
}

.marker-compact-sensor > div {
    display: grid;
    grid-template-columns: repeat(var(--sensor-metrics, 3), minmax(0, 1fr));
    gap: 1px;
    padding: 6px;
}

.marker-compact-sensor-metric {
    display: flex;
    min-width: 0;
    min-height: 38px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.025);
    text-align: center;
}

.marker-compact-sensor-metric small,
.marker-compact-sensor-metric strong,
.marker-compact-sensor-metric em {
    display: block;
}

.marker-compact-sensor-metric small {
    color: #64748b;
    font-size: 6px;
    font-weight: 750;
}

.marker-compact-sensor-metric strong {
    margin-top: 2px;
    color: #dce9ef;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

.marker-compact-sensor-metric.is-primary strong {
    color: var(--sensor-color);
}

.marker-compact-sensor-metric em {
    margin-top: 2px;
    color: #536b78;
    font-size: 6px;
    font-style: normal;
}

.marker-compact-sensor-metric.is-empty {
    opacity: 0.48;
}

.marker-compact-sensor-empty {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 8px;
    border: 1px dashed rgba(148, 163, 184, 0.18);
    border-radius: 12px;
    color: #64748b;
    font-size: 9px;
}

/* W trybie kompaktowym ORP i głębokość siedzą już w kafelkach "Parametry podstawowe",
   więc osobna grupa o tej samej nazwie byłaby powtórzeniem.                        */
.marker-main-contener.is-compact-mode .marker-parameter-groups .marker-group-basic {
    display: none;
}

/* Mniejsze ekrany — ciaśniejsze kafelki */
@media (max-width: 767px) {
    .marker-main-contener.is-compact-mode .marker-group-tiles .marker-tile.marker-widget-group-item,
    .marker-main-contener.is-compact-mode .marker-group-tiles .marker-tile.marker-widget-group-item.is-dense {
        min-height: 96px;
        padding: 10px;
    }

    .marker-main-contener.is-compact-mode .marker-tile-label,
    .marker-main-contener.is-compact-mode .marker-tile.is-dense .marker-tile-label {
        font-size: 10px;
    }

    .marker-main-contener.is-compact-mode .marker-tile-value,
    .marker-main-contener.is-compact-mode .marker-tile.is-dense .marker-tile-value {
        font-size: 17px;
    }

    .marker-main-contener.is-compact-mode .marker-tile-trend-badge {
        display: none;
    }

    .marker-main-contener.is-compact-mode .marker-tile-value {
        display: inline-flex;
        align-items: baseline;
        flex-wrap: wrap;
    }

    .marker-main-contener.is-compact-mode .marker-tile-inline-trend {
        display: inline-flex;
    }

    .marker-main-contener.is-compact-mode .marker-group-tiles .marker-tile:hover .marker-tile-primary,
    .marker-main-contener.is-compact-mode .marker-group-tiles .marker-tile:focus-visible .marker-tile-primary {
        opacity: 1;
        transform: none;
    }

    .marker-main-contener.is-compact-mode .marker-tile-insight,
    .marker-main-contener.is-compact-mode .marker-tile.is-dense .marker-tile-insight {
        right: 10px;
        bottom: 9px;
        left: 10px;
        gap: 0;
        opacity: 1;
        transform: none;
        justify-content: stretch;
        width: auto;
    }

    .marker-main-contener.is-compact-mode .marker-tile-insight-trend,
    .marker-main-contener.is-compact-mode .marker-tile.is-dense .marker-tile-insight-trend {
        display: none;
    }

    .marker-main-contener.is-compact-mode .marker-tile-insight-trend > small,
    .marker-main-contener.is-compact-mode .marker-tile.is-dense .marker-tile-insight-trend > small {
        display: none;
    }

    .marker-main-contener.is-compact-mode .marker-tile-insight-stats,
    .marker-main-contener.is-compact-mode .marker-tile.is-dense .marker-tile-insight-stats {
        display: grid;
        width: 100%;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0;
    }

    .marker-main-contener.is-compact-mode .marker-tile-insight-stats > span,
    .marker-main-contener.is-compact-mode .marker-tile.is-dense .marker-tile-insight-stats > span {
        min-width: 0;
        align-items: center;
        text-align: center;
    }

    .marker-main-contener.is-compact-mode .marker-tile-insight-stats > span:first-child,
    .marker-main-contener.is-compact-mode .marker-tile.is-dense .marker-tile-insight-stats > span:first-child {
        align-items: flex-start;
        text-align: left;
    }

    .marker-main-contener.is-compact-mode .marker-tile-insight-stats > span:last-child,
    .marker-main-contener.is-compact-mode .marker-tile.is-dense .marker-tile-insight-stats > span:last-child {
        align-items: flex-end;
        text-align: right;
    }

    .marker-main-contener.is-compact-mode .marker-tile-insight-stats > span + span,
    .marker-main-contener.is-compact-mode .marker-tile.is-dense .marker-tile-insight-stats > span + span {
        padding-left: 0;
        border-left: 0;
    }

    .marker-main-contener.is-compact-mode .marker-tile-insight-stats small,
    .marker-main-contener.is-compact-mode .marker-tile.is-dense .marker-tile-insight-stats small {
        font-size: 9px;
        line-height: 11px;
        font-weight: 650;
    }

    .marker-main-contener.is-compact-mode .marker-tile-insight-stats b,
    .marker-main-contener.is-compact-mode .marker-tile.is-dense .marker-tile-insight-stats b {
        font-size: 13px;
        line-height: 16px;
        font-weight: 700;
    }
}

@media (max-width: 500px) {
    .marker-group-tiles { gap: 6px; }

    .select-tile-contener .marker-main-contener .marker-group-tiles .marker-tile.marker-widget-group-item {
        padding: 8px;
    }

    .marker-mode-button { padding: 5px 11px; font-size: 10px; }

    .marker-main-contener.is-compact-mode .marker-tile-insight {
        left: 8px;
        right: 8px;
    }
    .marker-main-contener.is-compact-mode .marker-tile-insight-stats {
        width: 100%;
        gap: 0;
    }
    .marker-main-contener.is-compact-mode .marker-tile-insight-stats > span + span { padding-left: 0; }
}

@media (max-width: 430px) {
    .marker-main-contener.is-compact-mode .marker-group-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-subcategory :is(
    .marker-water-temperature-body, .marker-water-oxygen-body, .marker-water-ph-body,
    .marker-water-ec-body, .marker-water-depth-body
) {
    padding-left: 2px;
    padding-right: 2px;
}

.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-subcategory :is(
    .marker-water-oxygen-metric, .marker-water-oxygen-context-item
) {
    border-color: transparent;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-subcategory .marker-water-oxygen-metric + .marker-water-oxygen-metric {
    border-top-color: rgba(148, 163, 184, 0.13);
}

.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-subcategory .marker-water-oxygen-card::before {
    display: none;
}

.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-subcategory button:focus-visible {
    outline: 2px solid #38bdf8;
    outline-offset: 2px;
}

/* ORP: dwubiegunowy instrument potencjału, niezależny od wskaźnika pH. */
.marker-water-orp-card {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: #edf8ff;
    text-align: left;
    cursor: pointer;
    font: inherit;
}
.marker-water-orp-header,
.marker-water-orp-title {
    display: flex;
    align-items: center;
    gap: 8px;
}
.marker-water-orp-header { justify-content: space-between; }
.marker-water-orp-title > i { color: var(--orp-color); }
.marker-water-orp-title strong { font-size: 11px; }
.marker-water-orp-trend {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: #8ea9b8;
    font-size: 10px;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0;
}
.marker-water-orp-trend.is-up { color: #ac91ed; }
.marker-water-orp-trend.is-down { color: #f6a453; }
.marker-water-orp-body { padding: 4px 2px 8px; }
.marker-water-orp-instrument { position: relative; isolation: isolate; }
.marker-water-orp-instrument svg { display: block; width: 100%; height: 138px; overflow: visible; }
.marker-water-orp-reading {
    font-family: var(--wl-font-mono);
    position: absolute;
    top: 8%;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 5px;
    font-variant-numeric: tabular-nums;
}
.marker-water-orp-reading strong { font-size: 36px; font-weight: 800; letter-spacing: -1px; line-height: 1; }
.marker-water-orp-reading > span { color: var(--orp-color); font-size: 17px; font-weight: 650; }
.marker-water-orp-state {
    position: absolute;
    top: 38%;
    left: 0;
    right: 0;
    color: var(--orp-color);
    font-size: 12px;
    font-weight: 650;
    letter-spacing: 0;
    text-align: center;
}
.marker-water-orp-negative, .marker-water-orp-positive { fill: none; stroke-width: 5; stroke-linecap: round; }
.marker-water-orp-negative { stroke: #f43f5e; opacity: 0.28; }
.marker-water-orp-positive { stroke: #38bdf8; opacity: 0.28; }
.marker-water-orp-active { stroke: var(--orp-color); stroke-width: 5; stroke-linecap: round; filter: drop-shadow(0 0 5px var(--orp-color)); }
.marker-water-orp-ticks { stroke: #7b96a7; stroke-width: 1; opacity: 0.45; }
.marker-water-orp-zero { stroke: #c0d2dc; stroke-width: 1; opacity: 0.8; }
.marker-water-orp-pointer { fill: var(--orp-color); stroke: #fff; stroke-width: 2; filter: drop-shadow(0 0 5px var(--orp-color)); }
.marker-water-orp-halo { fill: var(--orp-color); opacity: 0.18; animation: marker-orp-pulse 3s ease-in-out infinite; }
.marker-water-orp-labels { fill: #8ba6b5; font-size: 10px; font-weight: 600; }
.marker-water-orp-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0 calc(22 / 420 * 100%); text-align: center; }
.marker-water-orp-stats > span { display: flex; flex-direction: column; gap: 0; align-items: center; }
.marker-water-orp-stats > span:first-child { align-items: flex-start; text-align: left; }
.marker-water-orp-stats > span:last-child { align-items: flex-end; text-align: right; }
.marker-water-orp-stats small { color: #a8c5d3; font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0; }
.marker-water-orp-stats strong { margin-top: 6px; color: #d3e7ef; font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; font-family: var(--wl-font-mono); }
.marker-water-orp-card:is(.is-stale, .is-time-unknown) .marker-water-orp-body { opacity: 0.6; }
.marker-water-orp-card:is(.is-stale, .is-time-unknown) .marker-water-orp-halo { animation: none; }
@keyframes marker-orp-pulse { 50% { opacity: 0.4; } }
@media (prefers-reduced-motion: reduce) { .marker-water-orp-halo { animation: none; } }
html[data-theme="light"] .marker-water-orp-card { color: #173b4e; }
html[data-theme="light"] .marker-water-orp-reading > span,
html[data-theme="light"] .marker-water-orp-state { color: var(--orp-color); }
html[data-theme="light"] .marker-water-orp-stats strong { color: #234c60; }
html[data-theme="light"] .marker-water-orp-labels { fill: #486779; }
html[data-theme="light"] .marker-water-orp-stats small,
html[data-theme="light"] .marker-water-orp-trend { color: #527685; }
html[data-theme="light"] .marker-water-orp-negative { stroke: #e11d48; }
html[data-theme="light"] .marker-water-orp-positive { stroke: #0284c7; }

/* ORP w kafelku: typografia jak temperatura wody. */
.select-tile-contener .marker-main-contener .marker-water-orp-widget .marker-water-orp-reading {
	gap: 5px;
}
.select-tile-contener .marker-main-contener .marker-water-orp-widget .marker-water-orp-reading > strong {
	font-size: 36px;
	font-weight: 800;
	letter-spacing: -1px;
}
.select-tile-contener .marker-main-contener .marker-water-orp-widget .marker-reading-unit-stack {
	margin-left: 7px;
	min-width: 42px;
}
.select-tile-contener .marker-main-contener .marker-water-orp-widget .marker-reading-unit-stack > .marker-reading-unit {
	font-size: 17px;
	font-weight: 650;
	color: var(--orp-color);
}
.select-tile-contener .marker-main-contener .marker-water-orp-widget .marker-reading-unit-stack > .marker-reading-trend,
.select-tile-contener .marker-main-contener .marker-water-orp-widget .marker-reading-trend i {
	font-size: 10px;
}
.select-tile-contener .marker-main-contener .marker-water-orp-widget .marker-water-orp-state {
	font-size: 12px;
	font-weight: 650;
	letter-spacing: 0;
	text-transform: none;
}
.select-tile-contener .marker-main-contener .marker-water-orp-widget .marker-water-orp-stats {
	padding-top: 8px;
	padding-left: calc(22 / 420 * 100%);
	padding-right: calc(22 / 420 * 100%);
	border-top: 1px solid #8cacbe18;
	gap: 8px;
	text-align: center;
}
.select-tile-contener .marker-main-contener .marker-water-orp-widget .marker-water-orp-stats > span {
	align-items: center;
	text-align: center;
}
.select-tile-contener .marker-main-contener .marker-water-orp-widget .marker-water-orp-stats > span:first-child {
	align-items: flex-start;
	text-align: left;
}
.select-tile-contener .marker-main-contener .marker-water-orp-widget .marker-water-orp-stats > span:last-child {
	align-items: flex-end;
	text-align: right;
}
@media (max-width: 380px) {
	.select-tile-contener .marker-main-contener .marker-water-orp-widget .marker-water-orp-reading > strong { font-size: 30px; }
}

/* Puste odczyty są spokojnym stanem, bez jednostek i fikcyjnego trendu. */
.select-tile-contener .marker-main-contener .marker-group-tiles .marker-tile.is-empty {
    min-height: 76px;
    border-color: rgba(148, 163, 184, 0.14);
    background: rgba(148, 163, 184, 0.035);
    box-shadow: none;
}
.marker-tile-empty-content {
    display: flex;
    flex: 1;
    width: 100%;
    min-height: 36px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 5px 0 2px;
}
.marker-tile-empty-content strong { color: #a9bdc9; font-size: 12px; font-weight: 500; }
.marker-tile-empty-content small { color: #7893a4; font-size: 9px; }
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-body.is-empty {
    height: auto;
    min-height: 0;
    padding: 0;
}
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-empty {
    min-height: 48px;
    padding: 10px 2px;
    flex-direction: row;
    justify-content: flex-start;
    gap: 9px;
}
.select-tile-contener .marker-atmosphere-empty > i { font-size: 15px; color: #7893a4; filter: none; }
.select-tile-contener .marker-atmosphere-empty > span { font-size: 11px; font-weight: 500; color: #a9bdc9; letter-spacing: 0; text-transform: none; }
html[data-theme="light"] .select-tile-contener .marker-main-contener .marker-group-tiles .marker-tile.is-empty {
    background: rgba(242, 247, 250, 0.65);
    border-color: rgba(54, 91, 112, 0.12);
}
html[data-theme="light"] .marker-tile-empty-content strong,
html[data-theme="light"] .select-tile-contener .marker-atmosphere-empty > span { color: #526d7f; }
html[data-theme="light"] .marker-tile-empty-content small { color: #687e8e; }

/* Jeden stan braku pomiaru dla wszystkich instrumentów graficznych. */
.marker-graphic-empty-title { display: flex; align-items: center; gap: 8px; }
.marker-graphic-empty-title > i { color: #70aec6; font-size: 12px; }
.marker-graphic-empty-title > span { display: flex; flex-direction: column; gap: 5px; }
.marker-graphic-empty-title strong { font-size: 11px; font-weight: 600; }
.marker-graphic-empty-notice { display: block; color: #8fa8b8; font-size: 10px; font-weight: 500; line-height: 1.5; }
.select-tile-contener .marker-main-contener .marker-graphic-empty-reading {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 5px;
    padding: 10px 2px;
}
.marker-graphic-empty-reading > strong { color: #afc7d4; font-size: 10px; font-weight: 600; }
.select-tile-contener .marker-main-contener .is-graphic-empty {
    min-height: 0;
    height: auto;
    background: transparent;
    box-shadow: none;
}
.select-tile-contener .marker-main-contener .is-graphic-empty > .marker-graphic-empty-notice { padding: 14px 2px; }
html[data-theme="light"] .marker-graphic-empty-notice { color: #526d7f; }
html[data-theme="light"] .marker-graphic-empty-reading > strong { color: #486779; }

/* Trzy równorzędne gałęzie mineralizacji zamiast jednej zagnieżdżonej karty. */
.select-tile-contener .marker-main-contener .marker-water-mineral-parameter .marker-water-ec-body {
    display: block;
    padding: 6px 2px 8px;
}
.select-tile-contener .marker-main-contener .marker-water-mineral-parameter :is(.marker-water-ec-derived, .marker-water-ec-info, .marker-water-ec-primary) {
    width: 100%;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.select-tile-contener .marker-main-contener .marker-water-mineral-parameter .marker-water-ec-info {
    min-height: 48px;
    justify-content: flex-start;
    padding: 6px 0;
}
.select-tile-contener .marker-main-contener .marker-water-mineral-parameter .marker-water-ec-info-value strong {
    font-size: 28px;
    letter-spacing: -1px;
}
.select-tile-contener .marker-main-contener .marker-water-mineral-parameter .marker-water-ec-derived {
    padding: 6px 0;
}

/* Mineralizacja: komora cząstek TDS i segmentowy wskaźnik przewodności. */
.select-tile-contener .marker-main-contener .marker-water-mineral-parameter :is(.marker-water-ec-derived, .marker-water-ec-info) {
    display: block;
    padding: 0;
}
.mineral-instrument {
    --mineral-accent: #a78bfa;
    display: grid;
    grid-template-columns: minmax(85px, 0.8fr) minmax(0, 1.5fr);
    align-items: center;
    gap: 16px;
    padding: 8px 0;
}
.mineral-instrument.is-conductivity { --mineral-accent: #22d3ee; }
.mineral-instrument-visual { display: block; min-width: 0; }
.mineral-instrument-visual svg { display: block; width: 100%; max-height: 142px; overflow: visible; }
.mineral-instrument-track { fill: none; stroke: var(--mineral-accent); stroke-width: 5; opacity: .12; }
.mineral-instrument-progress { fill: none; stroke: var(--mineral-accent); stroke-width: 5; stroke-linecap: round; filter: drop-shadow(0 0 4px var(--mineral-accent)); }
.mineral-instrument-inner { fill: var(--mineral-accent); fill-opacity: .035; stroke: var(--mineral-accent); stroke-opacity: .12; stroke-width: 1; }
.mineral-instrument-particles, .mineral-instrument-bars { fill: var(--mineral-accent); }
.mineral-instrument-field { fill: none; stroke: var(--mineral-accent); opacity: .35; stroke-width: 1; }
.mineral-instrument-electrodes { fill: none; stroke: var(--mineral-accent); stroke-width: 4; stroke-linecap: round; }
.mineral-instrument-baseline { stroke: var(--mineral-accent); opacity: .2; }
.mineral-instrument-details { display: flex; min-width: 0; flex-direction: column; }
.mineral-instrument-value { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px; margin-bottom: 16px; }
.mineral-instrument-value strong { font-size: 32px; line-height: 1; font-weight: 800; letter-spacing: -1px; color: #e8f5fc; font-variant-numeric: tabular-nums; font-family: var(--wl-font-mono); }
.mineral-instrument-value small { color: var(--mineral-accent); font-size: 10px; font-weight: 650; }
.mineral-instrument-scale { height: 4px; border-radius: 4px; background: color-mix(in srgb, var(--mineral-accent) 12%, transparent); }
.mineral-instrument-scale > i { display: block; height: 100%; border-radius: inherit; background: var(--mineral-accent); box-shadow: 0 0 8px color-mix(in srgb, var(--mineral-accent) 30%, transparent); }
.mineral-instrument-legend { display: flex; justify-content: space-between; margin-top: 5px; color: #809cab; }
.mineral-instrument-legend small { font-size: 7px; }
.mineral-instrument-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.mineral-instrument-stats > span { display: flex; flex-direction: column; gap: 4px; }
.mineral-instrument-stats small { color: #829eaf; font-size: 7px; text-transform: uppercase; }
.mineral-instrument-stats b { color: #b7d1df; font-size: 10px; font-variant-numeric: tabular-nums; font-family: var(--wl-font-mono); }
.marker-water-mineral-parameter button:hover .mineral-instrument-visual { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--mineral-accent) 20%, transparent)); }
html[data-theme="light"] .mineral-instrument { --mineral-accent: #8461e3; }
html[data-theme="light"] .mineral-instrument.is-conductivity { --mineral-accent: #089bb6; }
html[data-theme="light"] .mineral-instrument-value strong { color: #173d50; }
html[data-theme="light"] .mineral-instrument-stats b { color: #385c70; }
html[data-theme="light"] :is(.mineral-instrument-stats small, .mineral-instrument-legend) { color: #627e8e; }
@media (max-width: 430px) {
    .mineral-instrument { gap: 10px; grid-template-columns: minmax(74px, .7fr) minmax(0, 1.5fr); }
    .mineral-instrument-value strong { font-size: 28px; }
}

/* Trend należy do odczytu: nad jednostką, obok dużej wartości. */
.select-tile-contener .marker-main-contener .marker-reading-unit-stack {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: baseline;
    min-width: 42px;
    margin-left: 4px;
    vertical-align: baseline;
    line-height: 1;
}
.select-tile-contener .marker-main-contener .marker-reading-unit-stack > .marker-reading-trend {
    position: absolute;
    bottom: calc(100% + 5px);
    left: 0;
    display: flex;
    align-items: center;
    gap: 3px;
    width: max-content;
    color: #8ea9b8;
    font-size: 7px;
    font-weight: 650;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
    white-space: nowrap;
}
.select-tile-contener .marker-main-contener .marker-reading-trend i { font-size: 7px; }
.select-tile-contener .marker-main-contener .marker-reading-trend.is-up { color: #ac91ed; }
.select-tile-contener .marker-main-contener .marker-reading-trend.is-down { color: #f6a453; }
.select-tile-contener .marker-main-contener .marker-reading-unit-stack > .marker-reading-unit {
    position: static;
    display: inline;
    margin: 0;
    font-size: 10px;
    font-weight: 650;
    font-style: normal;
    line-height: 1;
    letter-spacing: 0;
}
html[data-theme="light"] .select-tile-contener .marker-main-contener .marker-reading-trend { color: #617b8a; }
html[data-theme="light"] .select-tile-contener .marker-main-contener .marker-reading-trend.is-up { color: #8660c7; }
html[data-theme="light"] .select-tile-contener .marker-main-contener .marker-reading-trend.is-down { color: #bd6a20; }

/* Temperatura: odczyt z jednostką po lewej, statystyki pod skalą po prawej. */
.select-tile-contener .marker-main-contener .marker-water-temperature-body {
    grid-template-columns: max-content minmax(0, 1fr);
    grid-template-areas: "reading scale" "reading stats";
    column-gap: 18px;
    row-gap: 23px;
    min-height: 86px;
    padding-top: 15px;
    padding-bottom: 10px;
}
.select-tile-contener .marker-main-contener .marker-water-temperature-value {
    grid-area: reading;
    display: flex;
    align-items: baseline;
    align-self: start;
    white-space: nowrap;
}
.select-tile-contener .marker-main-contener .marker-water-temperature-value .marker-reading-unit-stack {
    min-width: 44px;
    margin-left: 5px;
    color: #65b8cf;
}
.select-tile-contener .marker-main-contener .marker-water-temperature-scale {
    grid-area: scale;
    align-self: center;
    margin-top: 10px;
}
.select-tile-contener .marker-main-contener .marker-water-temperature-summary {
    grid-area: stats;
    padding: 0;
}
@media (max-width: 360px) {
    .select-tile-contener .marker-main-contener .marker-water-temperature-body { column-gap: 10px; }
    .select-tile-contener .marker-main-contener .marker-water-temperature-value { font-size: 25px; }
}

/* WARIANT 2 — aktywny: głębokość z wodą wtapiającą się w tło. */
.select-tile-contener .marker-main-contener .marker-depth-dive .marker-water-depth-body { display: block; padding: 0 2px; }
.depth-dive-display { position: relative; isolation: isolate; overflow: hidden; height: 172px; border-radius: 0; background: transparent; --depth-ruler-air: #99c4d3; --depth-ruler-water: #99c4d3; --depth-stat-label: #9cb9c8; --depth-stat-value: #d5edf5; }
.depth-dive-water { position: absolute; top: var(--water-depth-surface, 45%); right: 0; bottom: 0; left: 0; background: linear-gradient(#26bfd85c, #26bfd828 48%, transparent 95%); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 88%, transparent); transition: top 800ms cubic-bezier(.2, .8, .2, 1); animation: depth-dive-water-level 800ms cubic-bezier(.2, .8, .2, 1); }
.depth-dive-water > i, .depth-dive-water > b { position: absolute; width: 200%; height: 16px; left: -50%; top: -4px; border-radius: 50%; border-top: 1px solid #72d4e0b3; background: transparent; animation: depth-dive-wave 4.5s ease-in-out infinite alternate; }
.depth-dive-water > b { top: 2px; background: transparent; opacity: .4; animation-delay: -2.5s; animation-duration: 6s; }
.select-tile-contener .marker-main-contener .marker-depth-dive .marker-water-depth-primary { position: absolute; z-index: 2; inset: 27px 86px auto 22px; display: flex; padding: 0; background: none; border: 0; }
.select-tile-contener .marker-main-contener .marker-depth-dive .marker-water-depth-primary > strong { display: flex; align-items: baseline; color: #042936; font-size: 48px; font-weight: 800; line-height: 1.15; letter-spacing: -2px; text-shadow: none; white-space: nowrap; }
.select-tile-contener .marker-main-contener .marker-depth-dive .marker-reading-unit-stack { color: #073847; margin-left: 7px; }
.select-tile-contener .marker-main-contener .marker-depth-dive .marker-reading-unit { color: #073847; font-size: 17px; }
.select-tile-contener .marker-main-contener .marker-depth-dive .marker-reading-trend { color: #125066; }
.depth-dive-ruler { position: absolute; z-index: 3; right: 9px; top: 4px; height: 164px; width: 78px; }
.depth-dive-ruler g { stroke: #12607b; stroke-width: 1; }
.depth-dive-ruler text { stroke: none; fill: #07536e; font-size: 10px; font-weight: 650; paint-order: normal; stroke: none; }
.depth-dive-pointer { fill: #fff; filter: drop-shadow(0 0 3px #42e4f2); }
.depth-dive-level { display: none; }
.depth-dive-floor { position: absolute; left: 22px; right: 104px; bottom: 17px; height: 26px; }
.depth-dive-floor i { position: absolute; inset: 0; border-top: 1px solid #24a5c3; border-radius: 50%; opacity: .3; }
.depth-dive-floor i:nth-child(2) { top: 8px; }
.depth-dive-floor i:nth-child(3) { top: 16px; }
.select-tile-contener .marker-main-contener .marker-depth-dive .marker-water-depth-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 12px; padding: 0; gap: 12px; }
.select-tile-contener .marker-main-contener .marker-depth-dive .marker-water-depth-stats > span { padding: 0; border: 0; background: none; text-align: center; }
@keyframes depth-dive-wave { from { transform: translateX(-8%) translateY(-3px) rotate(-2.5deg); } to { transform: translateX(8%) translateY(3px) rotate(2.5deg); } }
@keyframes depth-dive-water-level { from { top: var(--water-depth-start-surface, var(--water-depth-surface, 45%)); } to { top: var(--water-depth-surface, 45%); } }
.marker-water-depth-card.is-stale .depth-dive-water > * { animation: none; }
@media (prefers-reduced-motion: reduce) { .depth-dive-water, .depth-dive-water > * { animation: none; transition: none; } }
@media (max-width: 380px) {
    .select-tile-contener .marker-main-contener .marker-depth-dive .marker-water-depth-primary { left: 14px; }
    .select-tile-contener .marker-main-contener .marker-depth-dive .marker-water-depth-primary > strong { font-size: 36px; }
}

/* Tafla na górnej krawędzi wody, statystyki wewnątrz instrumentu przy linijce. */
.select-tile-contener .marker-main-contener .marker-depth-dive .marker-water-depth-primary { top: 12px; }
.select-tile-contener .marker-main-contener .marker-depth-dive .marker-water-depth-primary > strong { color: #e5fbff; }
.select-tile-contener .marker-main-contener .marker-depth-dive .marker-reading-unit,
.select-tile-contener .marker-main-contener .marker-depth-dive .marker-reading-trend { color: #88dfef; }
.select-tile-contener .marker-main-contener .marker-depth-dive .marker-water-depth-stats {
    position: absolute;
    z-index: 2;
    top: 88px;
    right: 88px;
    width: min(190px, calc(100% - 110px));
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    margin: 0;
}
.select-tile-contener .marker-main-contener .marker-depth-dive .marker-water-depth-stats > span {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 6px;
    text-align: right;
}
.select-tile-contener .marker-main-contener .marker-depth-dive .marker-water-depth-stats small { color: var(--depth-stat-label); font-size: 10px; }
.select-tile-contener .marker-main-contener .marker-depth-dive .marker-water-depth-stats strong { color: var(--depth-stat-value); font-size: 15px; margin: 0; white-space: nowrap; min-width: 58px; text-align: right; }
.select-tile-contener .marker-main-contener .marker-depth-dive .marker-water-depth-stats em { color: var(--depth-stat-label); font-size: 11px; }
.depth-dive-floor { right: 265px; opacity: .25; }

/* Jasny instrument głębokości: kontrast nad taflą i pod wodą. */
html[data-theme="light"] .depth-dive-display {
    --depth-ruler-air: #416d80;
    --depth-ruler-water: #15546b;
    --depth-stat-label: #527685;
    --depth-stat-value: #234c60;
    background: transparent;
    box-shadow: none;
}
html[data-theme="light"] .depth-dive-water { background: linear-gradient(#22b5ce45, #22b5ce20 48%, transparent 95%); }
html[data-theme="light"] .depth-dive-water > i { border-top-color: #279db68c; }
html[data-theme="light"] .depth-dive-water > b { border-top-color: #279db68c; }
html[data-theme="light"] .select-tile-contener .marker-main-contener .marker-depth-dive .marker-water-depth-primary > strong { color: #173d50; }
html[data-theme="light"] .select-tile-contener .marker-main-contener .marker-depth-dive .marker-reading-unit { color: #386777; }
html[data-theme="light"] .select-tile-contener .marker-main-contener .marker-depth-dive .marker-reading-trend { color: #526f7c; }
html[data-theme="light"] .select-tile-contener .marker-main-contener .marker-depth-dive .marker-reading-trend.is-up { color: #7952b4; }
html[data-theme="light"] .select-tile-contener .marker-main-contener .marker-depth-dive .marker-reading-trend.is-down { color: #a55718; }
html[data-theme="light"] .depth-dive-ruler text { stroke: none; }
html[data-theme="light"] .depth-dive-pointer { fill: #17566d; filter: none; }
html[data-theme="light"] .depth-dive-level { stroke: #17566d; opacity: .65; }

/*
WARIANT 1 — archiwalny, nieaktywny. Poprzedni design z usuniętym wyłącznie
background: #061d2b z .depth-dive-display. Aby przywrócić, zastąp nim aktywny
blok głębokości powyżej. Wspólne późniejsze reguły typografii pozostają.

.select-tile-contener .marker-main-contener .marker-depth-dive .marker-water-depth-body { display: block; padding: 8px 2px 10px; }
.depth-dive-display { position: relative; isolation: isolate; overflow: hidden; height: 172px; border-radius: 16px; }
.depth-dive-water { position: absolute; inset: 45% 0 0; background: linear-gradient(165deg, #45e6ed, #0bbbe2); }
.depth-dive-water > i, .depth-dive-water > b { position: absolute; width: 200%; height: 22px; left: -50%; top: -10px; border-radius: 50%; background: #16cce5; animation: depth-dive-wave 6s ease-in-out infinite alternate; }
.depth-dive-water > b { top: -7px; background: #42dfec; opacity: .5; animation-delay: -3s; animation-duration: 8s; }
.select-tile-contener .marker-main-contener .marker-depth-dive .marker-water-depth-primary { position: absolute; z-index: 2; inset: 27px 86px auto 22px; display: flex; padding: 0; background: none; border: 0; }
.select-tile-contener .marker-main-contener .marker-depth-dive .marker-water-depth-primary > strong { display: flex; align-items: baseline; color: #042936; font-size: 48px; font-weight: 800; line-height: 1.15; letter-spacing: -2px; text-shadow: none; white-space: nowrap; }
.select-tile-contener .marker-main-contener .marker-depth-dive .marker-reading-unit-stack { color: #073847; margin-left: 7px; }
.select-tile-contener .marker-main-contener .marker-depth-dive .marker-reading-unit { color: #073847; font-size: 17px; }
.select-tile-contener .marker-main-contener .marker-depth-dive .marker-reading-trend { color: #125066; }
.depth-dive-ruler { position: absolute; z-index: 3; right: 9px; top: 4px; height: 164px; width: 78px; }
.depth-dive-ruler g { stroke: #12607b; stroke-width: 1; }
.depth-dive-ruler text { stroke: none; fill: #07536e; font-size: 10px; font-weight: 650; paint-order: stroke; stroke: #71eaf1; stroke-width: .35px; }
.depth-dive-pointer { fill: #fff; filter: drop-shadow(0 0 3px #42e4f2); }
.depth-dive-level { stroke: #fff; stroke-width: 1; stroke-dasharray: 2 3; opacity: .7; }
.depth-dive-floor { position: absolute; left: 22px; right: 104px; bottom: 17px; height: 26px; }
.depth-dive-floor i { position: absolute; inset: 0; border-top: 1px solid #24a5c3; border-radius: 50%; opacity: .3; }
.depth-dive-floor i:nth-child(2) { top: 8px; }
.depth-dive-floor i:nth-child(3) { top: 16px; }
.select-tile-contener .marker-main-contener .marker-depth-dive .marker-water-depth-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 12px; padding: 0; gap: 12px; }
.select-tile-contener .marker-main-contener .marker-depth-dive .marker-water-depth-stats > span { padding: 0; border: 0; background: none; text-align: center; }
@keyframes depth-dive-wave { from { transform: translateX(-5%) rotate(-1.5deg); } to { transform: translateX(5%) rotate(1.5deg); } }
.marker-water-depth-card.is-stale .depth-dive-water > * { animation: none; }
@media (prefers-reduced-motion: reduce) { .depth-dive-water > * { animation: none; } }
@media (max-width: 380px) {
    .select-tile-contener .marker-main-contener .marker-depth-dive .marker-water-depth-primary { left: 14px; }
    .select-tile-contener .marker-main-contener .marker-depth-dive .marker-water-depth-primary > strong { font-size: 36px; }
}


.select-tile-contener .marker-main-contener .marker-depth-dive .marker-water-depth-primary { top: 12px; }
.select-tile-contener .marker-main-contener .marker-depth-dive .marker-water-depth-primary > strong { color: #e5fbff; }
.select-tile-contener .marker-main-contener .marker-depth-dive .marker-reading-unit,
.select-tile-contener .marker-main-contener .marker-depth-dive .marker-reading-trend { color: #88dfef; }
.select-tile-contener .marker-main-contener .marker-depth-dive .marker-water-depth-stats {
    position: absolute;
    z-index: 2;
    top: 88px;
    right: 88px;
    width: min(190px, calc(100% - 110px));
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    margin: 0;
}
.select-tile-contener .marker-main-contener .marker-depth-dive .marker-water-depth-stats > span {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 6px;
    text-align: right;
}
.select-tile-contener .marker-main-contener .marker-depth-dive .marker-water-depth-stats small { color: #105169; font-size: 10px; }
.select-tile-contener .marker-main-contener .marker-depth-dive .marker-water-depth-stats strong { color: #042e3e; font-size: 15px; margin: 0; white-space: nowrap; min-width: 58px; text-align: right; }
.select-tile-contener .marker-main-contener .marker-depth-dive .marker-water-depth-stats em { color: #105169; font-size: 11px; }
.depth-dive-floor { right: 265px; opacity: .25; }


html[data-theme="light"] .depth-dive-display {
    --depth-ruler-air: #416d80;
    --depth-ruler-water: #15546b;
    background: linear-gradient(145deg, #edf8fc, #dceef5);
    box-shadow: inset 0 0 0 1px #497c9014;
}
html[data-theme="light"] .depth-dive-water { background: linear-gradient(165deg, #9ae8ef, #55cfdf); }
html[data-theme="light"] .depth-dive-water > i { background: #66d8e5; }
html[data-theme="light"] .depth-dive-water > b { background: #b0f0f4; }
html[data-theme="light"] .select-tile-contener .marker-main-contener .marker-depth-dive .marker-water-depth-primary > strong { color: #173d50; }
html[data-theme="light"] .select-tile-contener .marker-main-contener .marker-depth-dive .marker-reading-unit { color: #386777; }
html[data-theme="light"] .select-tile-contener .marker-main-contener .marker-depth-dive .marker-reading-trend { color: #526f7c; }
html[data-theme="light"] .select-tile-contener .marker-main-contener .marker-depth-dive .marker-reading-trend.is-up { color: #7952b4; }
html[data-theme="light"] .select-tile-contener .marker-main-contener .marker-depth-dive .marker-reading-trend.is-down { color: #a55718; }
html[data-theme="light"] .depth-dive-ruler text { stroke: none; }
html[data-theme="light"] .depth-dive-pointer { fill: #17566d; filter: none; }
html[data-theme="light"] .depth-dive-level { stroke: #17566d; opacity: .65; }
*/

/* Wspólny termometr SVG tuż obok odczytu temperatury wody. */
.select-tile-contener .marker-main-contener .marker-temperature-float .marker-water-temperature-body {
    grid-template-columns: 30px minmax(0, 1fr);
    /* Odczyt + min/max trzymane ciasno jak w temperaturze powietrza; termometr wypełnia wysokość. */
    grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas:
        "thermometer ."
        "thermometer reading"
        "thermometer stats"
        "thermometer .";
    gap: 2px 8px;
    padding: 2px 6px 2px 0;
    min-height: 78px;
}
.temperature-float-scene {
    grid-area: thermometer;
    position: relative;
    display: block;
    height: 74px;
    align-self: center;
    isolation: isolate;
    overflow: visible;
}
.temperature-float-water {
    position: absolute;
    inset: 60% 0 0;
    background: linear-gradient(#26bfd816, transparent 85%);
    mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
}
.temperature-float-water > i, .temperature-float-water > b {
    position: absolute;
    top: 0;
    left: -15%;
    width: 130%;
    height: 10px;
    border-top: 1px solid #72d4e052;
    border-radius: 50%;
    animation: temperature-surface 8s ease-in-out infinite alternate;
}
.temperature-float-water > b { top: 5px; opacity: .35; animation-delay: -4s; }
.temperature-float-scene > .marker-temperature-thermometer {
    position: absolute;
    width: 30px;
    height: 74px;
    left: 0;
    top: 0;
    margin: 0;
    transform-origin: 50% 66%;
}
.temperature-float-scene > .marker-temperature-thermometer svg {
    display: block;
    width: 30px;
    height: 74px;
}
.temperature-float-glass {
    position: absolute;
    inset: 0;
    overflow: visible;
}
.temperature-float-glass::before,
.temperature-float-glass::after {
    position: absolute;
    box-sizing: border-box;
    border: 1px solid #96d0df66;
    background: linear-gradient(100deg, #bfdfea20, #7198b00a 55%, #defaff16);
    box-shadow: inset 2px 0 3px #e7ffff18, 0 4px 9px #00101d20;
    content: "";
}
.temperature-float-glass::before {
    top: 0;
    bottom: 14px;
    left: 8px;
    width: 14px;
    border-radius: 7px 7px 5px 5px;
}
.temperature-float-glass::after {
    z-index: 1;
    right: 0;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
}
.temperature-float-liquid {
    position: absolute;
    z-index: 2;
    right: 11px;
    bottom: 15px;
    left: 11px;
    height: clamp(0px, var(--water-temperature-column, var(--water-temperature-level)), 54px);
    background-image: var(--water-temperature-gradient);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 100% 54px;
    border-radius: 6px 6px 3px 3px;
}
.temperature-float-liquid::after {
    position: absolute;
    z-index: 2;
    bottom: -11px;
    left: -7px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--water-temperature-cold-color);
    box-shadow: 0 0 6px color-mix(in srgb, var(--water-temperature-cold-color) 45%, transparent);
    content: "";
}

/* Tymczasowo wyłączone: kolor odczytu przy ostrzeżeniu/alarmie (zostaje tylko dzwonek).
.select-tile-contener .marker-main-contener:not(.is-compact-mode) [data-parameter-alarm="warning"] { --parameter-reading-color: #facc15; }
.select-tile-contener .marker-main-contener:not(.is-compact-mode) [data-parameter-alarm="alarm"] { --parameter-reading-color: #ff6574; }
html[data-theme="light"] .select-tile-contener .marker-main-contener:not(.is-compact-mode) [data-parameter-alarm="warning"] { --parameter-reading-color: #946000; }
html[data-theme="light"] .select-tile-contener .marker-main-contener:not(.is-compact-mode) [data-parameter-alarm="alarm"] { --parameter-reading-color: #bd263e; }
.select-tile-contener .marker-main-contener:not(.is-compact-mode) [data-parameter-alarm] :is(
    .marker-water-temperature-value, .marker-water-depth-primary > strong,
    .marker-water-oxygen-reading > strong, .marker-water-oxygen-reading > small,
    .marker-water-ph-value, .marker-water-ph-reading > strong, .marker-water-orp-reading,
    .marker-water-ec-primary-value, .marker-water-ions-value,
    .marker-water-clarity-reading > strong, .marker-water-biology-reading > strong,
    .marker-water-organic-reading > strong, .mineral-instrument-value,
    .mineral-dual-reading > strong, .mineral-dual-reading > em,
    .mineral-conductivity-value > strong, .mineral-conductivity .marker-reading-unit, .marker-atmosphere-minimal-value > strong,
    .marker-reading-unit, .marker-water-hero-ring strong
) { color: var(--parameter-reading-color) !important; }
*/

/* Wariant próbny wyłączony — zachowany do późniejszego przywrócenia.
   Dopełnienie termometru do góry przy czerwonym alarmie.
.select-tile-contener .marker-main-contener .marker-temperature-float[data-parameter-alarm="alarm"] .temperature-float-liquid {
    background: linear-gradient(to top, #b92340, #ff5267);
    animation: temperature-alarm-fill 2.4s ease-in-out infinite;
}
.select-tile-contener .marker-main-contener .marker-temperature-float[data-parameter-alarm="alarm"] .temperature-float-liquid > i { background: #ff5267; }
@keyframes temperature-alarm-fill {
    0%, 100% { height: clamp(0px, var(--water-temperature-level), calc(100% - 6px)); }
    55%, 75% { height: calc(100% - 6px); }
}
@media (prefers-reduced-motion: reduce) {
    .select-tile-contener .marker-main-contener .marker-temperature-float[data-parameter-alarm="alarm"] .temperature-float-liquid { animation: none; }
}
*/
.temperature-float-liquid > i {
    position: absolute;
    top: -2px;
    left: 0;
    width: 100%;
    height: 4px;
    border-radius: 50%;
    background: var(--water-temperature-color);
}
.temperature-float-shine { position: absolute; z-index: 3; left: 11px; top: 8px; bottom: 28px; width: 1.5px; border-radius: 2px; background: linear-gradient(#efffff66, #efffff12); }
.temperature-float-ripple { position: absolute; top: 61%; left: 18%; width: 64%; height: 8px; border: 1px solid #75e1ed22; border-radius: 50%; }
.select-tile-contener .marker-main-contener .marker-temperature-float .marker-water-temperature-value { align-self: end; margin-bottom: 0; font-size: 36px; letter-spacing: -1px; }
.select-tile-contener .marker-main-contener .marker-temperature-float .marker-water-temperature-value > small { color: inherit; }
.select-tile-contener .marker-main-contener .marker-temperature-float .marker-water-temperature-value .marker-reading-unit-stack { margin-left: 7px; }
/* Stara siatka MINIMUM / ŚREDNIA / MAKSIMUM — zastąpiona zakresem jak w temperaturze powietrza.
.select-tile-contener .marker-main-contener .marker-temperature-float .marker-water-temperature-summary { align-self: start; padding-top: 8px; border-top: 1px solid #8cacbe18; gap: 10px; }
.select-tile-contener .marker-main-contener .marker-temperature-float .marker-water-temperature-summary > span { text-align: left; }
.select-tile-contener .marker-main-contener .marker-temperature-float .marker-water-temperature-summary > span + span { border: 0; }
.select-tile-contener .marker-main-contener .marker-temperature-float .marker-water-temperature-summary small { font-size: 10px; color: #a8c5d3; }
.select-tile-contener .marker-main-contener .marker-temperature-float .marker-water-temperature-summary strong { font-size: 15px; white-space: nowrap; margin-top: 6px; font-weight: 650; }
html[data-theme="light"] .select-tile-contener .marker-main-contener .marker-temperature-float .marker-water-temperature-summary small { color: #527685; }
*/
.select-tile-contener .marker-main-contener .marker-temperature-float .marker-water-temperature-range {
	grid-area: stats;
	align-self: start;
	justify-content: flex-start;
	padding-top: 0;
	border-top: 0;
}
html[data-theme="light"] .temperature-float-glass::before,
html[data-theme="light"] .temperature-float-glass::after { background: linear-gradient(110deg, #b8d7de44, #c2dadb16, #fff9); border-color: #719ca766; }
@keyframes temperature-bob { 0%,100% { transform: translateY(0) rotate(-.8deg); } 50% { transform: translateY(1.5px) rotate(.8deg); } }
@keyframes temperature-surface { from { transform: translateX(-2%) rotate(-1deg); } to { transform: translateX(2%) rotate(1deg); } }
.marker-water-temperature-card.is-stale .marker-temperature-thermometer,
.marker-water-temperature-card.is-stale .temperature-float-water > * { animation: none; }
@media (prefers-reduced-motion: reduce) { .marker-temperature-thermometer, .temperature-float-water > * { animation: none; } }
@media (max-width: 380px) {
    .select-tile-contener .marker-main-contener .marker-temperature-float .marker-water-temperature-body { grid-template-columns: 30px minmax(0, 1fr); column-gap: 8px; }
    .temperature-float-scene > .marker-temperature-thermometer { left: 0; }
    .select-tile-contener .marker-main-contener .marker-temperature-float .marker-water-temperature-value { font-size: 30px; }
}

.select-tile-contener .marker-main-contener .marker-temperature-float .marker-reading-unit-stack > .marker-reading-unit { font-size: 17px; }
.select-tile-contener .marker-main-contener .marker-temperature-float .marker-reading-unit-stack > .marker-reading-trend,
.select-tile-contener .marker-main-contener .marker-temperature-float .marker-reading-trend i { font-size: 10px; }

/* Wspólna typografia odczytu temperatury i głębokości. */
.select-tile-contener .marker-main-contener .marker-depth-dive .marker-water-depth-primary > strong {
    font-size: 36px;
    letter-spacing: -1px;
}
.select-tile-contener .marker-main-contener .marker-depth-dive .marker-reading-unit-stack > .marker-reading-unit { font-size: 17px; }
.select-tile-contener .marker-main-contener .marker-depth-dive .marker-reading-unit-stack > .marker-reading-trend,
.select-tile-contener .marker-main-contener .marker-depth-dive .marker-reading-trend i { font-size: 10px; }
@media (max-width: 380px) {
    .select-tile-contener .marker-main-contener .marker-depth-dive .marker-water-depth-primary > strong { font-size: 30px; }
}

/* Natlenienie: odczyt wyśrodkowany; średnia/zakres po najechaniu. */
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-side { gap: 14px; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-readings { gap: 14px; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-metric {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "stage";
	place-items: center;
	padding: 0;
	gap: 0;
	overflow: visible;
	min-height: 132px;
}
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-name { font-size: 12px; line-height: 1.4; font-weight: 650; text-transform: none; letter-spacing: 0; color: #c2d8e2; white-space: normal; flex-wrap: wrap; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-name.is-freshness-only {
	grid-area: stage;
	align-self: start;
	justify-self: center;
	min-height: 0;
	margin: 0;
	z-index: 2;
}
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-name.is-freshness-only::before { display: none; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-reading {
	grid-area: stage;
	margin: 0;
	z-index: 1;
	transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-reading > strong { font-size: 30px; letter-spacing: -1px; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-reading-unit-stack > .marker-reading-unit { font-size: 14px; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-reading-unit-stack > .marker-reading-trend { font-size: 10px; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-reading-trend i { font-size: 10px; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-stats {
	grid-area: stage;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	margin-top: 52px;
	padding: 0;
	border: 0;
	text-align: center;
	opacity: 0;
	transform: translateY(8px);
	pointer-events: none;
	transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-stats > span {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 6px;
	min-width: 0;
	white-space: nowrap;
}
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-stats small,
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-stats strong {
	display: inline;
	margin: 0;
	line-height: 1.2;
}
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-stats small {
	font-size: 10px;
	color: #a8c5d3;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 650;
}
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-stats strong {
	font-size: 15px;
	font-weight: 650;
	color: #d3e7ef;
}
/* Min/max are always visible below both oxygen readings. */
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-reading {
    transform: translateY(-10px);
}
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-stats {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-reading,
	.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-stats {
		transition: none;
	}
}
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-verdict { font-size: 11px; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-context { gap: 12px; padding-top: 10px; border-top: 1px solid #8cacbe22; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-context-item { padding: 0; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-context-item small { font-size: 10px; letter-spacing: 0; text-transform: none; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-context-item strong { font-size: 14px; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-context-item strong > span { font-size: 10px; }
html[data-theme="light"] .select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-name { color: #234c60; }
html[data-theme="light"] .select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-stats small { color: #527685; }
html[data-theme="light"] .select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-stats strong { color: #234c60; }

/* Saturacja — pierścienie — tlen rozpuszczony. */
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-body { grid-template-columns: minmax(0, 1fr) 140px minmax(0, 1fr); grid-template-areas: "saturation gauge dissolved" ". status ."; gap: 18px 12px; align-items: stretch; justify-items: stretch; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-side { display: contents; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-readings { display: contents; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-verdict { grid-area: status; justify-content: center; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-gauge { grid-area: gauge; width: 140px; justify-self: center; align-self: center; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-slot { min-width: 0; display: flex; align-items: center; justify-content: center; align-self: stretch; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-slot[data-oxygen-slot="oxygen"] { grid-area: saturation; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-slot[data-oxygen-slot="oxygen_mgl"] { grid-area: dissolved; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-metric { width: 100%; height: 100%; border: 0; padding: 0; background: none; box-shadow: none; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-name { min-height: 0; align-content: center; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-metric > .marker-water-oxygen-trend {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	border: 0;
}
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-context { grid-area: context; display: flex; justify-content: center; gap: 36px; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-reading { gap: 0; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-reading-unit-stack { min-width: 0; }
@container oxygen (max-width: 380px) {
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-body { grid-template-columns: minmax(0, 1fr) 112px minmax(0, 1fr); column-gap: 6px; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-gauge { width: 112px; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-reading > strong { font-size: 24px; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-reading-unit-stack > .marker-reading-unit { font-size: 12px; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-reading-unit-stack > .marker-reading-trend { font-size: 9px; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-core.is-status {
	width: 44px;
	height: 44px;
}
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-core.is-status > i { font-size: 42px; }
}

/* Centrum pierścieni: duża ikona statusu wypełniająca wnętrze. */
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-core.is-status {
	gap: 0;
	width: 54px;
	height: 54px;
	min-width: 0;
	justify-content: center;
	transform: translate(-50%, -50%);
}
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-core.is-status > i {
	font-size: 52px;
	line-height: 1;
	filter: drop-shadow(0 0 14px color-mix(in srgb, currentColor 50%, transparent));
}
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-core.is-status > small { display: none; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-core.is-ok { color: #38bdf8; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-core.is-warn { color: #fbbf24; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-core.is-danger { color: #fb7185; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-core.is-unknown { color: #7894a3; }
html[data-theme="light"] .select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-core.is-ok { color: #008da8; }
html[data-theme="light"] .select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-core.is-warn { color: #c28712; }
html[data-theme="light"] .select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-core.is-danger { color: #d4536a; }

/* Odczyty w kolorze barów; wartość idealnie na środku kolumny. */
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget:not(.is-split-design) .marker-water-oxygen-metric {
	justify-items: center;
	align-content: center;
	text-align: center;
}
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget:not(.is-split-design) .marker-water-oxygen-name {
	justify-content: center;
	text-align: center;
}
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget:not(.is-split-design) .marker-water-oxygen-reading {
	justify-content: center;
	align-self: center;
	justify-self: center;
	color: var(--oxygen-color);
}
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget:not(.is-split-design) .marker-water-oxygen-reading > strong,
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget:not(.is-split-design) .marker-water-oxygen-reading > small,
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget:not(.is-split-design) .marker-reading-unit-stack > .marker-reading-unit {
	color: var(--oxygen-color);
}
html[data-theme="light"] .select-tile-contener .marker-main-contener .marker-water-oxygen-widget:not(.is-split-design) .marker-water-oxygen-reading,
html[data-theme="light"] .select-tile-contener .marker-main-contener .marker-water-oxygen-widget:not(.is-split-design) .marker-water-oxygen-reading > strong,
html[data-theme="light"] .select-tile-contener .marker-main-contener .marker-water-oxygen-widget:not(.is-split-design) .marker-water-oxygen-reading > small,
html[data-theme="light"] .select-tile-contener .marker-main-contener .marker-water-oxygen-widget:not(.is-split-design) .marker-reading-unit-stack > .marker-reading-unit {
	color: var(--oxygen-color);
	text-shadow: none;
}

.marker-main-contener.is-compact-mode .is-compact-replaced { display: none !important; }

/* Odczyty spójne z temperaturą i status bezpośrednio pod pierścieniami. */
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-reading > strong { font-size: 36px; font-weight: 800; letter-spacing: -1px; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-reading-unit-stack { margin-left: 7px; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-reading-unit-stack > .marker-reading-unit { font-size: 17px; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-reading-unit-stack > .marker-reading-trend { font-size: 10px; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-ring-label.is-top { font-size: 10.286px; font-weight: 650; letter-spacing: 0; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-verdict { justify-content: center; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-body { row-gap: 10px; }
@media (max-width: 380px) {
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-reading > strong { font-size: 30px; }
}
@container oxygen (max-width: 380px) {
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-ring-label.is-top { font-size: 12.857px; }
}

/* Miejsce na etykietę ponad SVG; status tuż przy dolnej krawędzi gauge. */
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-gauge {
    margin-top: 18px;
    align-self: center;
    overflow: visible;
}
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-body { row-gap: 0; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-verdict { align-self: start; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-metric:is(:hover, :focus-visible) {
	transform: none;
	box-shadow: none;
	border-color: transparent;
}

/* Spokojniejsze, kontrastowe kolory natlenienia w jasnym motywie. */
html[data-theme="light"] .marker-water-oxygen-card {
    --oxygen-sat: #008da8;
    --oxygen-do: #588c12;
}
html[data-theme="light"] .marker-water-oxygen-gauge .marker-water-oxygen-ring-fill,
html[data-theme="light"] .marker-water-oxygen-gauge .marker-water-oxygen-ring-cap {
    filter: drop-shadow(0 0 2px color-mix(in srgb, var(--ring-color) 22%, transparent));
}
html[data-theme="light"] .marker-water-oxygen-gauge .marker-water-oxygen-ring-track { stroke: #64869930; }
html[data-theme="light"] .marker-water-oxygen-gauge .marker-water-oxygen-ring-comet { opacity: .55; }
html[data-theme="light"] .select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-core > strong { text-shadow: none; }

/* Zwarty układ natlenienia: odczyt na środku wysokości pierścieni. */
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-name { min-height: 0; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-reading { margin-top: 0; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-verdict { margin-top: -18px; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-body { padding-bottom: 0; }
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-content > .marker-water-oxygen-widget {
    padding-bottom: 0 !important;
    margin-bottom: 0;
}

/* Alternatywa: dwa niezależne półkola. Oryginalny design pozostaje powyżej. */
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget.is-split-design .marker-water-oxygen-body { grid-template-columns: minmax(0, 1fr) 196px minmax(0, 1fr); column-gap: 10px; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .oxygen-split-gauge { display: flex; gap: 8px; width: 196px; margin-top: 16px; align-self: center; }
.oxygen-half { position: relative; display: block; flex: 1; min-width: 0; }
.oxygen-half svg { display: block; width: 100%; overflow: visible; }
.oxygen-half-track, .oxygen-half-fill { fill: none; stroke-width: 7; stroke-linecap: round; }
.oxygen-half-track { stroke: #7894a32b; }
.oxygen-half-fill { stroke: var(--ring-color); stroke-dasharray: var(--ring-level) 100; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--ring-color) 35%, transparent)); animation: marker-water-oxygen-sweep 1s ease-out both; }
.oxygen-half circle { fill: #f6feff; stroke: var(--ring-color); stroke-width: 2; }
.oxygen-half text { fill: #8fadba; font-size: 12px; font-weight: 650; }
.oxygen-half-value { position: absolute; inset: auto 0 14%; display: flex; justify-content: center; align-items: baseline; gap: 3px; color: var(--ring-color); white-space: nowrap; }
.oxygen-half-value strong { font-size: 23px; line-height: 1; letter-spacing: -1px; }
.oxygen-half-value.is-wide strong { font-size: 20px; }
.oxygen-half-value small { font-size: 10px; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget.is-split-design .marker-water-oxygen-verdict { margin-top: 4px; }
html[data-theme="light"] .oxygen-half text { fill: #527685; }
@container oxygen (max-width: 400px) {
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget.is-split-design .marker-water-oxygen-body { grid-template-columns: minmax(0, 1fr) 160px minmax(0, 1fr); column-gap: 6px; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .oxygen-split-gauge { width: 160px; gap: 4px; }
.oxygen-half-value strong { font-size: 20px; }
.oxygen-half-value.is-wide strong { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { .oxygen-half-fill { animation: none; } }
.marker-water-oxygen-card.is-stale .oxygen-half-fill { animation: none; }

/* Pionowe półkola otwarte na zewnątrz; odczyty pozostają poziome. */
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .oxygen-split-gauge { gap: 0; }
.oxygen-half-value { top: 50%; bottom: auto; transform: translateY(-50%); }
.oxygen-half:first-child .oxygen-half-value { padding-right: 14px; }
.oxygen-half:last-child .oxygen-half-value { padding-left: 14px; }

/* Jedna wartość na parametr: odczyt i łuk tworzą wspólny instrument. */
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget.is-split-design .marker-water-oxygen-body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "saturation dissolved" "status status";
    gap: 12px 24px;
    align-items: start;
    padding-top: 6px;
}
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget.is-split-design .marker-water-oxygen-metric {
    position: relative;
    grid-template-rows: auto 112px auto auto;
}
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget.is-split-design .marker-water-oxygen-reading {
    align-self: center;
    margin: 0;
    z-index: 1;
}
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget.is-split-design .oxygen-half {
    position: absolute;
    top: 26px;
    height: 102px;
    width: 70px;
    pointer-events: none;
}
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget.is-split-design [data-key="oxygen"] .oxygen-half { left: 0; right: auto; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget.is-split-design [data-key="oxygen_mgl"] .oxygen-half { left: auto; right: 0; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget.is-split-design [data-key="oxygen_mgl"] .marker-water-oxygen-reading { justify-content: flex-start; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget.is-split-design .marker-water-oxygen-name { min-height: 0; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget.is-split-design .marker-water-oxygen-verdict { margin: 0; }
@container oxygen (max-width: 380px) {
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget.is-split-design .marker-water-oxygen-body { column-gap: 16px; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget.is-split-design .marker-water-oxygen-reading > strong { font-size: 30px; }
}

.select-tile-contener .marker-main-contener .marker-water-oxygen-widget.is-split-design [data-key="oxygen"] .marker-water-oxygen-reading { justify-content: flex-end; }

/* Dwie równe kompozycje z miejscem na pełną etykietę trendu. */
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget.is-split-design .marker-water-oxygen-body { column-gap: 28px; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget.is-split-design .marker-water-oxygen-metric { grid-template-rows: auto 104px auto auto; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget.is-split-design .marker-water-oxygen-name { justify-content: center; text-align: center; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget.is-split-design .marker-water-oxygen-metric .marker-water-oxygen-reading { justify-content: center; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget.is-split-design .marker-reading-unit-stack { min-width: 58px; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget.is-split-design [data-key="oxygen"] .marker-water-oxygen-reading { padding-left: 36px; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget.is-split-design [data-key="oxygen_mgl"] .marker-water-oxygen-reading { padding-right: 28px; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget.is-split-design .oxygen-half { width: 56px; top: 30px; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget.is-split-design .marker-water-oxygen-stats { align-items: center; text-align: center; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget.is-split-design .marker-water-oxygen-verdict { margin-top: 2px; }
@container oxygen (max-width: 380px) {
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget.is-split-design .marker-water-oxygen-body { column-gap: 18px; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget.is-split-design .marker-reading-unit-stack { min-width: 48px; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget.is-split-design .oxygen-half { width: 40px; top: 42px; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget.is-split-design [data-key="oxygen"] .marker-water-oxygen-reading { padding-left: 18px; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget.is-split-design [data-key="oxygen_mgl"] .marker-water-oxygen-reading { padding-right: 18px; }
}

/* Lustrzane wyrównanie podpisów i prawego odczytu. */
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget.is-split-design [data-key="oxygen"] .marker-water-oxygen-name { justify-content: flex-start; text-align: left; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget.is-split-design [data-key="oxygen_mgl"] .marker-water-oxygen-name { flex-direction: row-reverse; justify-content: flex-start; text-align: right; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget.is-split-design [data-key="oxygen_mgl"] .marker-water-oxygen-reading { flex-direction: row-reverse; justify-content: flex-start; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget.is-split-design [data-key="oxygen_mgl"] .marker-reading-unit-stack { margin-left: 0; margin-right: 7px; justify-content: flex-end; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget.is-split-design [data-key="oxygen_mgl"] .marker-reading-trend { left: auto; right: 0; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget.is-split-design [data-key="oxygen_mgl"] .marker-water-oxygen-stats { align-items: flex-end; text-align: right; }

/* Dekoracyjne bąbelki — gęstość zależna od stężenia, wznoszenie jak w oryginale. */
.oxygen-water-particles {
    position: absolute;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    border-radius: inherit;
    color: rgba(190, 245, 255, 0.85);
    mask-image: linear-gradient(to top, transparent, black 22%, black 72%, transparent);
    -webkit-mask-image: linear-gradient(to top, transparent, black 22%, black 72%, transparent);
}
.marker-water-oxygen-card > :is(.marker-water-oxygen-header, .marker-water-oxygen-body) { position: relative; z-index: 1; }
.oxygen-water-particles > i {
    position: absolute;
    bottom: -14px;
    left: var(--bubble-x);
    width: var(--bubble-size);
    height: var(--bubble-size);
    border: 1px solid rgba(190, 245, 255, 0.42);
    border-radius: 50%;
    opacity: 0;
    background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.5), rgba(56, 224, 242, 0.06) 62%, transparent);
    animation: marker-water-oxygen-rise var(--bubble-duration) linear var(--bubble-delay) infinite;
}
.oxygen-water-particles.is-out > i {
    animation-duration: calc(var(--bubble-duration) * 0.88);
}
.oxygen-water-particles.is-circulate > i {
    animation-duration: calc(var(--bubble-duration) * 1.15);
}
.oxygen-water-particles.is-unknown > i {
    animation: none;
    opacity: 0.18;
    bottom: auto;
    top: var(--bubble-y);
}
html[data-theme="light"] .oxygen-water-particles {
    color: rgba(33, 131, 155, 0.9);
}
html[data-theme="light"] .oxygen-water-particles > i {
    border-color: rgba(33, 131, 155, 0.35);
    background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.72), rgba(33, 131, 155, 0.1) 62%, transparent);
}
.marker-water-oxygen-card.is-stale .oxygen-water-particles > i {
    animation: none;
    opacity: 0.14;
    bottom: auto;
    top: var(--bubble-y);
}
@media (prefers-reduced-motion: reduce) {
    .oxygen-water-particles > i {
        animation: none;
        opacity: 0.18;
        bottom: auto;
        top: var(--bubble-y);
    }
}

/* Liczba wewnątrz większego łuku, jednostka i trend poza nim. */
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget.is-split-design .marker-water-oxygen-metric { grid-template-rows: auto 146px auto auto; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget.is-split-design .oxygen-half { top: 24px; width: 98px; height: auto; }
.oxygen-half-number { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); display: flex; justify-content: center; color: var(--ring-color); }
.oxygen-half-number > strong { font-size: 32px; font-weight: 800; letter-spacing: -1px; line-height: 1; }
[data-oxygen-key="oxygen"] .oxygen-half-number { padding-right: 22px; }
[data-oxygen-key="oxygen_mgl"] .oxygen-half-number { padding-left: 22px; }
@container oxygen (max-width: 380px) {
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget.is-split-design .oxygen-half { width: 82px; top: 34px; }
.oxygen-half-number > strong { font-size: 28px; }
}

/* Osobne miejsce na jednostkę i trend przed prawym łukiem. */
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget.is-split-design [data-key="oxygen_mgl"] .marker-water-oxygen-reading {
    padding-left: 0;
    padding-right: 108px;
}
@container oxygen (max-width: 380px) {
    .select-tile-contener .marker-main-contener .marker-water-oxygen-widget.is-split-design [data-key="oxygen_mgl"] .marker-water-oxygen-reading { padding-right: 92px; }
}

/* Stężenie po lewej, saturacja po prawej; status pomiędzy odczytami. */
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget.is-split-design .marker-water-oxygen-body {
    position: relative;
    grid-template-areas: "dissolved saturation";
    column-gap: 100px;
}
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget.is-split-design .marker-water-oxygen-verdict {
    position: absolute; top: 72px; left: 50%; transform: translateX(-50%);
    width: max-content; max-width: calc(100% - 24px); margin: 0; grid-area: auto;
}
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget.is-split-design .marker-water-oxygen-metric .oxygen-half-number {
    flex-direction: column; align-items: center; gap: 5px;
}
.oxygen-half-number > small { font-size: 14px; line-height: 1; font-weight: 650; }
.oxygen-half-number > .marker-water-oxygen-trend { font-size: 9px; line-height: 1; letter-spacing: 0; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget.is-split-design [data-key="oxygen_mgl"] .oxygen-half { left: 0; right: auto; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget.is-split-design [data-key="oxygen"] .oxygen-half { left: auto; right: 0; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget.is-split-design [data-key="oxygen_mgl"] .marker-water-oxygen-name { flex-direction: row; justify-content: flex-start; text-align: left; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget.is-split-design [data-key="oxygen"] .marker-water-oxygen-name { flex-direction: row-reverse; justify-content: flex-start; text-align: right; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget.is-split-design [data-key="oxygen_mgl"] .marker-water-oxygen-stats { align-items: flex-start; text-align: left; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget.is-split-design [data-key="oxygen"] .marker-water-oxygen-stats { align-items: flex-end; text-align: right; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget.is-split-design [data-oxygen-key="oxygen_mgl"] .oxygen-half-number { padding-left: 0; padding-right: 22px; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget.is-split-design [data-oxygen-key="oxygen"] .oxygen-half-number { padding-left: 22px; padding-right: 0; }

/* Sole i minerały: dwa niezależne półkola. */
.mineral-dual { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; padding: 8px 2px; }
.mineral-dual-item { --ring-color: #38bdf8; display: flex; flex-direction: column; align-items: flex-start; border: 0; background: none; color: inherit; padding: 0; min-width: 0; text-align: left; cursor: pointer; }
.mineral-dual-item.is-tds { --ring-color: #c59a71; align-items: flex-end; text-align: right; }
.mineral-dual-gauge { position: relative; display: block; width: 98px; margin: 0 0 10px; }
.mineral-dual-gauge svg { width: 100%; display: block; overflow: visible; }
.mineral-dual-reading { position: absolute; inset: 0 22px 0 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; color: var(--ring-color); }
.is-tds .mineral-dual-reading { inset: 0 0 0 22px; align-items: flex-end; }
.mineral-dual-reading strong { font-size: 28px; line-height: 1; letter-spacing: -1px; }
.mineral-dual-reading em { font-size: 13px; font-style: normal; }
.mineral-dual-meta { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.mineral-dual-item.is-tds .mineral-dual-meta { align-items: flex-end; }
.mineral-dual-name { font-size: 12px; font-weight: 650; color: #c2d8e2; }
.mineral-range {
	display: flex;
	gap: 10px;
	color: #8da9b8;
	font-size: 10px;
	font-weight: 600;
	line-height: 14px;
}
.mineral-dual-item.is-tds .mineral-range { justify-content: flex-end; }
.mineral-range > span {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	white-space: nowrap;
}
.mineral-range i { font-size: 9px; }
.mineral-dual-item.is-stale .oxygen-half-fill { animation: none; }
html[data-theme="light"] .mineral-dual-item { --ring-color: #0786b4; }
html[data-theme="light"] .mineral-dual-item.is-tds { --ring-color: #986739; }
html[data-theme="light"] .mineral-dual-name { color: #234c60; }
html[data-theme="light"] .mineral-range { color: #526d7f; }

.marker-water-organic-card.is-cmos .marker-water-organic-parameter-body { display: block; padding-top: 2px; }

/* Pierścienie po lewej, saturacja i stężenie jedno pod drugim po prawej. */
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget:not(.is-split-design) .marker-water-oxygen-body {
    grid-template-columns: 140px minmax(0, 1fr);
    grid-template-areas: "gauge saturation" "gauge dissolved" "status .";
    gap: 0 12px;
}
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget:not(.is-split-design) .marker-water-oxygen-slot {
    width: 100%;
    max-width: 180px;
    justify-self: start;
}
@container oxygen (max-width: 380px) {
    .select-tile-contener .marker-main-contener .marker-water-oxygen-widget:not(.is-split-design) .marker-water-oxygen-body {
        grid-template-columns: 112px minmax(0, 1fr);
        column-gap: 8px;
    }
}
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget:not(.is-split-design) [data-key="oxygen"] .marker-water-oxygen-name { flex-direction: row; }

.mineral-dual { grid-template-columns: minmax(0,1fr) minmax(85px,1fr) minmax(0,1fr); gap: 12px; }
.mineral-dual-item.is-salinity { grid-column: 1; grid-row: 1; }
.mineral-dual-item.is-tds { grid-column: 3; grid-row: 1; }
.mineral-conductivity {
	--mineral-accent: #e8f5fc;
	grid-column: 2;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	align-self: stretch;
	gap: 0;
	border: 0;
	padding: 0;
	background: none;
	color: inherit;
	text-align: center;
	cursor: pointer;
	min-width: 0;
}
.mineral-conductivity.is-stale { opacity: 0.58; }
.mineral-conductivity-reading {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 4px;
	min-height: 72px;
	margin: 0 0 10px;
	padding-bottom: 4px;
	box-sizing: border-box;
	color: var(--mineral-accent);
	white-space: nowrap;
}
.mineral-conductivity-class {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: center;
	gap: 6px;
	margin: 2px 0 8px;
	padding: 5px 12px;
	border: 1px solid var(--mineral-class-color, #94a3b8);
	border-radius: 999px;
	color: var(--mineral-class-color, #94a3b8);
	font-size: 11px;
	font-weight: 650;
	line-height: 1.2;
	text-transform: uppercase;
	white-space: nowrap;
}
.mineral-conductivity-class > i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
	box-shadow: 0 0 8px currentColor;
}
.mineral-conductivity-value {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 6px;
}
.mineral-conductivity-value > strong {
	font-size: 36px;
	font-weight: 800;
	letter-spacing: -1px;
	line-height: 1;
	color: inherit;
}
.mineral-conductivity .marker-reading-unit {
	font-size: 17px;
	font-weight: 650;
	color: inherit;
}
.mineral-conductivity .marker-reading-trend {
	position: static;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 3px;
	width: max-content;
	max-width: 100%;
	font-size: 10px;
	font-weight: 650;
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
	white-space: nowrap;
}
.mineral-conductivity .marker-reading-trend i {
	font-size: 10px;
}
.select-tile-contener .marker-main-contener .mineral-conductivity .marker-reading-trend {
	position: static;
	bottom: auto;
	left: auto;
	font-size: 10px;
}
.select-tile-contener .marker-main-contener .mineral-conductivity .marker-reading-unit {
	font-size: 17px;
	font-weight: 650;
}
.select-tile-contener .marker-main-contener .mineral-conductivity .marker-reading-trend i {
	font-size: 10px;
}
.mineral-conductivity .mineral-dual-meta {
	align-items: center;
	width: 100%;
}
.mineral-conductivity .mineral-range {
	justify-content: center;
}
html[data-theme="light"] .mineral-conductivity { --mineral-accent: #173d50; }
@media (max-width: 380px) {
	.mineral-conductivity-value > strong { font-size: 30px; }
	.mineral-conductivity .marker-reading-unit,
	.select-tile-contener .marker-main-contener .mineral-conductivity .marker-reading-unit { font-size: 14px; }
}
.pressure-bars { --mineral-accent: #22b8d3; display: block; width: 100%; max-width: 180px; margin: -14px auto -8px; }
.pressure-bars svg { width: 100%; height: 100px; }
.pressure-bars :is(.mineral-instrument-field, .mineral-instrument-electrodes) { display: none; }
html[data-theme="light"] .pressure-bars { --mineral-accent: #089bb6; }

/* pH: typografia jak temperatura; trend tuż nad wartością; min/średnia/maks po najechaniu. */
.select-tile-contener .marker-main-contener .marker-water-ph-widget .marker-water-ph-value {
	bottom: 4px;
	left: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 2px;
	transform: translateX(-50%);
}
.select-tile-contener .marker-main-contener .marker-water-ph-widget .marker-water-ph-value > strong {
	font-size: 36px;
	font-weight: 800;
	letter-spacing: -1px;
	line-height: 1;
}
.select-tile-contener .marker-main-contener .marker-water-ph-widget .marker-water-ph-value > .marker-reading-trend {
	position: static;
	bottom: auto;
	left: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 3px;
	width: auto;
	margin: 0;
	font-size: 10px;
	font-weight: 650;
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
}
.select-tile-contener .marker-main-contener .marker-water-ph-widget .marker-water-ph-value > .marker-reading-trend i {
	font-size: 10px;
}
.select-tile-contener .marker-main-contener .marker-water-ph-widget .marker-water-ph-state {
	font-size: 11px;
}
.select-tile-contener .marker-main-contener .marker-water-ph-widget .marker-water-ph-range {
	display: none;
}
.select-tile-contener .marker-main-contener .marker-water-ph-widget .marker-water-ph-body {
	align-items: center;
	grid-template-columns: minmax(148px, 186px) minmax(0, 1fr);
	gap: 10px;
}
.select-tile-contener .marker-main-contener .marker-water-ph-widget .marker-water-ph-dial {
	width: 100%;
	max-width: 186px;
	height: auto;
	aspect-ratio: 186 / 116;
}
.select-tile-contener .marker-main-contener .marker-water-ph-widget .marker-water-ph-readings {
	justify-content: center;
	align-items: flex-start;
	gap: 5px;
}
.select-tile-contener .marker-main-contener .marker-water-ph-widget .marker-water-ph-stats {
    display: flex;
    width: max-content;
    max-width: 100%;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    border: 0;
    max-height: none;
    opacity: 1;
    overflow: visible;
    transform: none;
    color: #8da9b8;
    font-size: 10px;
    font-weight: 600;
    line-height: 14px;
}
.select-tile-contener .marker-main-contener .marker-water-ph-widget .marker-water-ph-stats > span {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    border: 0;
    padding: 0;
    white-space: nowrap;
}
.select-tile-contener .marker-main-contener .marker-water-ph-widget .marker-water-ph-stats i { font-size: 9px; }
html[data-theme="light"] .select-tile-contener .marker-main-contener .marker-water-ph-widget .marker-water-ph-stats { color: #526d7f; }
@media (max-width: 380px) {
	.select-tile-contener .marker-main-contener .marker-water-ph-widget .marker-water-ph-value > strong { font-size: 30px; }
}

/* Lekkie ostrzeżenie zamiast pełnego trójkąta w środku pierścieni. */
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .oxygen-status-warning {
    display: block; width: 36px; height: 36px; overflow: visible;
    fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round;
}
.oxygen-status-warning > circle:first-child { fill: color-mix(in srgb, currentColor 6%, transparent); stroke-opacity: .55; }
.oxygen-status-warning .oxygen-status-dot { fill: currentColor; stroke: none; }

/* Kolor symbolu zgodny ze statusem pod pierścieniami, w obu motywach. */
html .select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-core.is-status.status-is-critical { color: #fb7185; }
html .select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-core.is-status.status-is-very-low { color: #f97316; }
html .select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-core.is-status.status-is-low { color: #fbbf24; }
html .select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-core.is-status.status-is-moderate { color: #a3e635; }
html .select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-core.is-status.status-is-good { color: #38bdf8; }
html .select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-core.is-status.status-is-optimal { color: #34d399; }
html .select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-core.is-status.status-is-high { color: #c084fc; }
html .select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-core.is-status.status-is-unknown { color: #7894a3; }

/* Czytelne nazwy i symbole jonów w kompaktowych kafelkach. */
.select-tile-contener .marker-main-contener .marker-tile.is-ion .marker-tile-label {
    max-width: 100%; font-family: inherit; font-size: 11px; font-weight: 650;
    line-height: 1.4; gap: 8px; white-space: normal; align-items: center;
}
.select-tile-contener .marker-main-contener .marker-tile.is-ion .marker-tile-ion-symbol {
    margin-left: auto; font-size: 18px; font-weight: 650; line-height: 1.2;
    letter-spacing: 0; white-space: nowrap;
}
.select-tile-contener .marker-main-contener .marker-water-ions-name { font-family: inherit; font-size: 11px; font-weight: 650; }
.select-tile-contener .marker-main-contener .marker-water-ions-orb > b { font-size: 18px; font-weight: 650; }

/* Każdy parametr optyczny i biologiczny ma własną gałąź. */
.select-tile-contener .marker-main-contener [data-split-parameter] > button { width: 100%; }
.select-tile-contener .marker-main-contener [data-split-parameter] > .marker-subcategory-head > span { display: flex; align-items: center; gap: 8px; }
.select-tile-contener .marker-main-contener [data-split-parameter] > .marker-subcategory-head i { color: var(--category-accent, #38bdf8); }

/* Pomoc przy nagłówku, obok istniejących akcji wykresu i zwijania. */
.select-tile-contener .marker-main-contener .marker-tutorial-link {
    display: inline-flex; align-items: center; justify-content: center;
    width: 27px; height: 27px; flex: 0 0 27px; margin-left: 6px;
    border: 1px solid #8cacbe30; border-radius: 7px;
    color: #8fadba; background: #8cacbe08; text-decoration: none; font-size: 13px;
}
.select-tile-contener .marker-main-contener .marker-subcategory-head > .marker-tutorial-link { margin-left: auto; }
.select-tile-contener .marker-main-contener .marker-tutorial-link:hover { color: #38bdf8; border-color: #38bdf8; }
.select-tile-contener .marker-main-contener .marker-tutorial-link:focus-visible { outline: 2px solid #38bdf8; outline-offset: 3px; }
html[data-theme="light"] .select-tile-contener .marker-main-contener .marker-tutorial-link { color: #527685; }

/* Consistent spacing between numeric readings and their units. */
.select-tile-contener .marker-main-contener .marker-reading-unit-stack {
    margin-left: 5px !important;
}
.select-tile-contener .marker-main-contener .oxygen-half-value small {
    margin-left: 5px;
}

/* Pomoc dostępna pod nazwą, bez osobnego przycisku. */
.select-tile-contener .marker-main-contener .marker-tutorial-link {
    display: inline; width: auto; height: auto; margin: 0; padding: 0;
    border: 0; border-radius: 2px; background: none;
    color: inherit; font: inherit; text-decoration: none;
}
html[data-theme="light"] .select-tile-contener .marker-main-contener .marker-tutorial-link { color: inherit; }
.select-tile-contener .marker-main-contener .marker-tutorial-link:hover {
    color: inherit; text-decoration: underline; text-decoration-color: #38bdf8;
    text-underline-offset: 3px;
}

/* Desktop: stary hover dla MINIMUM/ŚREDNIA/MAKSIMUM — wyłączony po przejściu na zakres min/max.
@media (min-width: 821px) and (hover: hover) and (pointer: fine) {
    .select-tile-contener .marker-main-contener .marker-temperature-float .marker-water-temperature-value {
        transform: translateY(22px);
        transition: transform 240ms ease;
    }
    .select-tile-contener .marker-main-contener .marker-temperature-float .marker-water-temperature-summary {
        opacity: 0;
        visibility: hidden;
        transform: translateY(12px);
        transition: opacity 200ms ease, transform 240ms ease, visibility 240ms;
    }
    .select-tile-contener .marker-main-contener .marker-temperature-float .marker-water-temperature-card:is(:hover, :focus-visible) .marker-water-temperature-value {
        transform: translateY(0);
    }
    .select-tile-contener .marker-main-contener .marker-temperature-float .marker-water-temperature-card:is(:hover, :focus-visible) .marker-water-temperature-summary {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}
@media (prefers-reduced-motion: reduce) {
    .select-tile-contener .marker-main-contener .marker-temperature-float :is(.marker-water-temperature-value, .marker-water-temperature-summary) {
        transition: none;
    }
}
*/

/* Podziałka wodowskazu po lewej, odczyty obok niej. */
.select-tile-contener .marker-main-contener .marker-depth-dive .depth-dive-ruler {
    left: 0;
    right: auto;
}
.select-tile-contener .marker-main-contener .marker-depth-dive .marker-water-depth-primary {
    left: 94px;
    right: 12px;
}
.select-tile-contener .marker-main-contener .marker-depth-dive .marker-water-depth-stats {
    right: 12px;
    width: min(190px, calc(100% - 106px));
}

/* Grafika i statystyki zajmują dokładnie to samo, stałe pole. */
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-detail-slot {
    position: relative;
    height: 76px;
    margin-top: 4px;
    overflow: hidden;
}
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-detail-slot > :is(.marker-atmosphere-figure, .mineral-instrument-visual, .marker-atmosphere-minimal-scale) {
    position: absolute;
    inset: 0;
    margin: 0 auto;
    height: 76px;
    transition: opacity 180ms ease;
}
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-detail-slot .marker-atmosphere-minimal-stats {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-content: center;
    gap: 4px;
    height: 76px;
    max-height: none;
    margin: 0;
    transform: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 180ms ease, visibility 180ms ease;
}
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-detail-slot .marker-atmosphere-minimal-stats > span {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0;
    text-align: center;
    border: 0;
}
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-detail-slot .marker-atmosphere-minimal-stats small {
    font-size: 8px;
    white-space: nowrap;
    overflow: visible;
    letter-spacing: 0;
    color: #8da9b8;
}
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-detail-slot .marker-atmosphere-minimal-stats strong {
    margin: 0;
    font-size: 12px;
    white-space: nowrap;
}
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-widget:is(:hover, :focus-within) .marker-atmosphere-detail-slot > :not(.marker-atmosphere-minimal-stats) {
    opacity: 0;
}
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-widget:is(:hover, :focus-within) .marker-atmosphere-detail-slot .marker-atmosphere-minimal-stats {
    opacity: 1;
    visibility: visible;
}
html[data-theme="light"] .select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-detail-slot .marker-atmosphere-minimal-stats small { color: #526d7f; }
@media (hover: none), (max-width: 820px) {
    .select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-detail-slot > :not(.marker-atmosphere-minimal-stats) { opacity: 0; }
    .select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-detail-slot .marker-atmosphere-minimal-stats { opacity: 1; visibility: visible; }
}
@media (prefers-reduced-motion: reduce) {
    .select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-detail-slot > * { transition: none; }
}

@media (max-width: 380px) {
    .select-tile-contener .marker-main-contener .marker-graphic-category-atmosphere .marker-atmosphere-minimal-value strong { font-size: 30px; }
}

/* Więcej miejsca na odczyty, bez pionowych separatorów. */
.select-tile-contener .marker-main-contener .marker-atmosphere-minimal-metric + .marker-atmosphere-minimal-metric {
    padding-left: 0;
    border-left: 0;
}

/* Wilgotność wyśrodkowana w środkowej kolumnie. */
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-minimal-metric:nth-child(2) {
    text-align: center;
}
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-minimal-metric:nth-child(2) .marker-atmosphere-minimal-label {
    justify-content: center;
}

/* Trend uczestniczy w szerokości odczytu, aby centrować całą grupę. */
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-minimal-metric .marker-reading-unit-stack {
    display: inline-grid;
    align-self: flex-end;
    grid-template-columns: max-content;
    align-items: start;
    row-gap: 5px;
    text-align: left;
    vertical-align: baseline;
}
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-minimal-metric .marker-reading-unit-stack > .marker-reading-trend {
    position: static;
    grid-row: 1;
}
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-minimal-metric .marker-reading-unit-stack > .marker-reading-unit {
    grid-row: 2;
}

/* Ciśnienie wyrównane do prawej wraz z pełną szerokością trendu. */
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-minimal-metric:nth-child(3) {
    text-align: right;
}
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-minimal-metric:nth-child(3) .marker-atmosphere-minimal-label {
    justify-content: flex-end;
}

/* Same odczyty atmosferyczne, bez miejsca zarezerwowanego na grafiki. */
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-minimal-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 0 8px;
}
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-minimal-metric {
    display: block;
}

/* Mniejsze odczyty wilgotności i ciśnienia (70% dotychczasowego rozmiaru). */
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-minimal-metric:is(:nth-child(2), :nth-child(3)) .marker-atmosphere-minimal-value strong {
    font-size: 25.2px;
    letter-spacing: -0.7px;
}
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-minimal-metric:is(:nth-child(2), :nth-child(3)) .marker-reading-unit-stack > .marker-reading-unit {
    font-size: 11.9px;
}
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-minimal-metric:is(:nth-child(2), :nth-child(3)) .marker-reading-trend,
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-minimal-metric:is(:nth-child(2), :nth-child(3)) .marker-reading-trend i {
    font-size: 7px;
}
@media (max-width: 380px) {
    .select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-minimal-metric:is(:nth-child(2), :nth-child(3)) .marker-atmosphere-minimal-value strong { font-size: 21px; }
}

/* Wspólne centrowanie nagłówków i kompletnych odczytów. */
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-minimal-metric:nth-child(n) {
    text-align: center;
}
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-minimal-metric:nth-child(n) .marker-atmosphere-minimal-label {
    justify-content: center;
}

/* Temperatura obok dwóch zwartych wierszy wilgotności i ciśnienia. */
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-minimal-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    grid-template-rows: repeat(2, 28px);
    gap: 0 16px;
    align-items: center;
}
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-minimal-metric:first-child {
    grid-column: 1;
    grid-row: 1 / 3;
}
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-minimal-metric:is(:nth-child(2), :nth-child(3)) {
    grid-column: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: center;
    gap: 8px;
    width: 100%;
}
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-minimal-metric:nth-child(2) { grid-row: 1; }
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-minimal-metric:nth-child(3) { grid-row: 2; }
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-minimal-metric:is(:nth-child(2), :nth-child(3)) .marker-atmosphere-minimal-label {
    justify-content: flex-start;
}
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-minimal-metric:is(:nth-child(2), :nth-child(3)) .marker-atmosphere-minimal-value {
    margin-top: 0;
}
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-minimal-metric:is(:nth-child(2), :nth-child(3)) .marker-reading-unit-stack {
    row-gap: 3px;
}

/* Nazwy do prawej, odczyty do lewej — wspólne kolumny obu wierszy. */
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-minimal-metric:is(:nth-child(2), :nth-child(3)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 12px;
}
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-minimal-metric:is(:nth-child(2), :nth-child(3)) .marker-atmosphere-minimal-label {
    justify-content: flex-end;
    text-align: right;
}
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-minimal-metric:is(:nth-child(2), :nth-child(3)) .marker-atmosphere-minimal-value {
    justify-self: start;
    justify-content: flex-start;
    text-align: left;
}

/* Public readings retain the two-column instrument layout without trend/range spacers. */
.marker-main-contener.is-public-mode .marker-atmosphere-widget {
    container: public-atmosphere / inline-size;
}
.select-tile-contener .marker-main-contener.is-public-mode:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-minimal-grid {
    grid-template-columns: minmax(max-content, 1fr) minmax(0, 1.3fr);
}
.select-tile-contener .marker-main-contener.is-public-mode:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-minimal-metric:first-child {
    min-height: 74px;
    grid-template-rows: 16px minmax(40px, 1fr);
    justify-content: start;
}
.select-tile-contener .marker-main-contener.is-public-mode:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-minimal-metric:first-child .is-thermometer {
    grid-row: 1 / 3;
    align-self: center;
}
.select-tile-contener .marker-main-contener.is-public-mode:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-minimal-metric:is(:nth-child(2), :nth-child(3)) {
    grid-template-columns: minmax(0, 1fr) 90px;
    column-gap: 8px;
}
.select-tile-contener .marker-main-contener.is-public-mode:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-minimal-label {
    white-space: normal;
    overflow-wrap: anywhere;
}
.select-tile-contener .marker-main-contener.is-public-mode:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-minimal-label > span {
    white-space: normal;
}
.select-tile-contener .marker-main-contener.is-public-mode:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-minimal-metric:is(:nth-child(2), :nth-child(3)) .marker-atmosphere-minimal-label > span {
    font-size: 8px;
    letter-spacing: .12em;
}
.select-tile-contener .marker-main-contener.is-public-mode:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-minimal-value > span {
    margin-left: 6px;
}
.select-tile-contener .marker-main-contener.is-public-mode:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-minimal-metric:is(:nth-child(2), :nth-child(3)) .marker-atmosphere-minimal-value > span {
    font-size: 11.9px;
}
.select-tile-contener .marker-main-contener.is-public-mode .marker-temperature-float .marker-water-temperature-body {
    grid-template-areas: "thermometer reading";
    grid-template-rows: auto;
    align-items: center;
}
.select-tile-contener .marker-main-contener.is-public-mode .marker-temperature-float .marker-water-temperature-value {
    align-self: center;
}
.select-tile-contener .marker-main-contener.is-public-mode .marker-temperature-float .marker-water-temperature-value > small {
    margin-left: 6px;
    color: var(--waterly-text-muted, #8da9b8);
    font-size: 17px;
    font-weight: 650;
    line-height: 1;
}
@container public-atmosphere (max-width: 340px) {
    .select-tile-contener .marker-main-contener.is-public-mode:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-minimal-grid {
        grid-template-columns: minmax(max-content, 1fr) minmax(0, 1fr);
        grid-template-rows: repeat(2, minmax(48px, auto));
        column-gap: 12px;
    }
    .select-tile-contener .marker-main-contener.is-public-mode:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-minimal-metric:is(:nth-child(2), :nth-child(3)) {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 2px;
    }
    .select-tile-contener .marker-main-contener.is-public-mode:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-minimal-metric:is(:nth-child(2), :nth-child(3)) .marker-atmosphere-minimal-label {
        justify-content: flex-start;
        text-align: left;
    }
}

/* Termometr po lewej od aktualnej temperatury, w tej samej wysokości. */
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-minimal-metric:first-child {
    display: grid;
    grid-template-columns: 30px max-content;
    grid-template-rows: 16px 40px;
    column-gap: 8px;
    justify-content: center;
    align-items: center;
}
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-minimal-metric:first-child .is-thermometer {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 30px;
    height: 56px;
    margin: 0;
}
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-minimal-metric:first-child .is-thermometer svg {
    display: block;
    width: 30px;
    height: 56px;
}
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-minimal-metric:first-child .marker-atmosphere-minimal-label {
    grid-column: 2;
    grid-row: 1;
}
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-minimal-metric:first-child .marker-atmosphere-minimal-value {
    grid-column: 2;
    grid-row: 2;
    margin-top: 0;
}

/* Dyskretny zakres pod ostatnią temperaturą. */
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-minimal-grid {
    grid-template-rows: repeat(2, 37px);
}
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-minimal-metric:first-child {
    grid-template-rows: minmax(16px, auto) 40px 18px;
}
.select-tile-contener .marker-main-contener .marker-air-temperature-range {
    grid-column: 2;
    grid-row: 3;
    display: flex;
    justify-content: flex-start;
    text-align: left;
    gap: 10px;
    color: #8da9b8;
    font-size: 10px;
    font-weight: 600;
    line-height: 14px;
}
.select-tile-contener .marker-main-contener .marker-air-temperature-range > span {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
}
.select-tile-contener .marker-main-contener .marker-air-temperature-range i { font-size: 9px; }
html[data-theme="light"] .select-tile-contener .marker-main-contener .marker-air-temperature-range { color: #526d7f; }

/* Nagłówek temperatury wyrównany z odczytem i zakresem. */
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-minimal-metric:first-child .marker-atmosphere-minimal-label {
    justify-content: flex-start;
    text-align: left;
}

/* Termometr sięga dolnej linii zakresu min–max. */
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-minimal-metric:first-child .is-thermometer {
    grid-row: 1 / 4;
    height: 74px;
    align-self: stretch;
}
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-minimal-metric:first-child .is-thermometer svg {
    height: 74px;
}

@keyframes atmosphere-reading-lift {
    0%, 100% { transform: translateY(0); }
    40% { transform: translateY(-3px); }
    70% { transform: translateY(1px); }
}
@keyframes atmosphere-thermometer-sway {
    0%, 100% { transform: rotate(0); }
    35% { transform: rotate(-3deg); }
    70% { transform: rotate(1.5deg); }
}

/* Parametry graficzne: ruch odczytu zamiast rozjaśniania tła. */
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-content .marker-atmosphere-minimal-metric:is(:hover, :focus-visible),
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-content .marker-water-temperature-card:is(:hover, :focus-visible),
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-content .marker-water-depth-card:is(:hover, :focus-visible),
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-content .marker-water-oxygen-metric:is(:hover, :focus-visible),
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-content .marker-water-ph-card:is(:hover, :focus-visible),
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-content .marker-water-orp-card:is(:hover, :focus-visible),
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-content .marker-water-ec-primary:is(:hover, :focus-visible),
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-content .marker-water-ec-derived:is(:hover, :focus-visible),
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-content .marker-water-ions-item:is(:hover, :focus-visible),
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-content .marker-water-clarity-primary:is(:hover, :focus-visible),
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-content .marker-water-clarity-secondary:is(:hover, :focus-visible),
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-content .marker-water-biology-primary:is(:hover, :focus-visible),
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-content .marker-water-biology-secondary:is(:hover, :focus-visible),
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-content .marker-water-organic-primary:is(:hover, :focus-visible),
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-content .marker-water-organic-secondary:is(:hover, :focus-visible),
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-content .mineral-dual-item:is(:hover, :focus-visible),
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-content .mineral-conductivity:is(:hover, :focus-visible),
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-content .marker-water-mineral-parameter button:is(:hover, :focus-visible),
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-content .marker-multi-sensor-item:is(:hover, :focus-visible),
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-content .marker-water-ec-card:is(:hover, :focus-visible),
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-content .marker-water-ions-card:is(:hover, :focus-visible),
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-content .marker-water-clarity-card:is(:hover, :focus-visible),
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-content .marker-water-biology-card:is(:hover, :focus-visible),
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-content .marker-water-organic-card:is(:hover, :focus-visible),
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-content .marker-multi-sensor-card:is(:hover, :focus-visible) {
    background: transparent;
    box-shadow: none;
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-content .marker-atmosphere-minimal-metric:is(:hover, :focus-visible) :is(.marker-atmosphere-minimal-value),
    .select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-content .marker-water-temperature-card:is(:hover, :focus-visible) :is(.marker-water-temperature-value),
    .select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-content .marker-water-depth-card:is(:hover, :focus-visible) :is(.marker-water-depth-primary > strong),
    .select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-content .marker-water-oxygen-metric:is(:hover, :focus-visible) :is(.marker-water-oxygen-reading),
    .select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-content .marker-water-ph-card:is(:hover, :focus-visible) :is(.marker-water-ph-value, .marker-water-ph-reading),
    .select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-content .marker-water-orp-card:is(:hover, :focus-visible) :is(.marker-water-orp-reading),
    .select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-content .marker-water-ec-primary:is(:hover, :focus-visible) :is(.marker-water-ec-primary-value),
    .select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-content .marker-water-ec-derived:is(:hover, :focus-visible) :is(strong),
    .select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-content .marker-water-ions-item:is(:hover, :focus-visible) :is(.marker-water-ions-value),
    .select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-content .marker-water-clarity-primary:is(:hover, :focus-visible) :is(.marker-water-clarity-reading),
    .select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-content .marker-water-clarity-secondary:is(:hover, :focus-visible) :is(.marker-water-clarity-reading, .marker-water-clarity-tss-copy),
    .select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-content .marker-water-biology-primary:is(:hover, :focus-visible) :is(.marker-water-biology-reading),
    .select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-content .marker-water-biology-secondary:is(:hover, :focus-visible) :is(.marker-water-biology-reading),
    .select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-content .marker-water-organic-primary:is(:hover, :focus-visible) :is(.marker-water-organic-reading),
    .select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-content .marker-water-organic-secondary:is(:hover, :focus-visible) :is(.marker-water-organic-reading),
    .select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-content .mineral-dual-item:is(:hover, :focus-visible) :is(.mineral-dual-reading),
    .select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-content .mineral-conductivity:is(:hover, :focus-visible) :is(.mineral-conductivity-reading),
    .select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-content .marker-water-mineral-parameter button:is(:hover, :focus-visible) :is(.mineral-instrument-value),
    .select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-content .marker-multi-sensor-item:is(:hover, :focus-visible) :is(strong) {
        animation: marker-parameter-nudge 520ms ease-out both;
    }
    .select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-content .marker-atmosphere-minimal-metric:is(:hover, :focus-visible) .is-thermometer,
    .select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-content .marker-water-temperature-card:is(:hover, :focus-visible) .marker-temperature-thermometer {
        transform-origin: 50% 85%;
        animation: atmosphere-thermometer-sway 650ms ease-in-out both;
    }
    /* Mętność i zawiesina: to samo kiwanie grafiki co przy temperaturze wody. */
    .select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-content .marker-water-clarity-primary:is(:hover, :focus-visible) .marker-secchi-column,
    .select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-content .marker-water-clarity-secondary:is(:hover, :focus-visible) .marker-tss-strip {
        transform-origin: 50% 85%;
        animation: atmosphere-thermometer-sway 650ms ease-in-out both;
    }
    /* Sole i minerały: po najechaniu na sekcję półkola lekko się kołyszą jak termometr powietrza. */
    .select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-content .marker-water-mineral-parameter:is(:hover, :focus-within) .mineral-dual-gauge {
        transform-origin: 50% 85%;
        animation: atmosphere-thermometer-sway 650ms ease-in-out both;
    }
    .select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-content .marker-water-mineral-parameter:is(:hover, :focus-within) .mineral-dual-item.is-tds .mineral-dual-gauge {
        animation-delay: 70ms;
    }
    .select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-content .marker-water-mineral-parameter:is(:hover, :focus-within) :is(.mineral-dual-reading, .mineral-conductivity-reading) {
        animation: marker-parameter-nudge 520ms ease-out both;
    }
}
@keyframes marker-parameter-nudge {
    0%, 100% { translate: 0 0; }
    40% { translate: 0 -3px; }
    70% { translate: 0 1px; }
}

/* Minimum i maksimum natlenienia, tak jak przy temperaturze wody. */
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-metric .marker-water-oxygen-stats {
    display: flex;
    gap: 10px;
    width: max-content;
    margin-top: 36px;
    align-items: start;
}
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-stats > .oxygen-icon-stat {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 3px;
    margin: 0;
    padding: 0;
    color: #8da9b8;
    white-space: nowrap;
}
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .oxygen-icon-stat > i { font-size: 9px; }
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .oxygen-icon-stat-symbol {
    font-family: var(--wl-font-mono);
    font-size: 12px;
    font-weight: 600;
    font-style: italic;
    line-height: 1;
    letter-spacing: 0;
}
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .oxygen-icon-stat > strong {
    font-size: 10px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
    color: inherit;
}
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .oxygen-icon-stat em {
    display: inline;
    margin-left: 3px;
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
}
html[data-theme="light"] .select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-stats > .oxygen-icon-stat { color: #526d7f; }

/* Jeden wspólny komunikat aktualności danych atmosferycznych. */
.select-tile-contener .marker-main-contener .marker-air-heading-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
}
.select-tile-contener .marker-main-contener .marker-air-freshness:empty { display: none; }

/* Taki sam układ ikony, nazwy i aktualności jak w temperaturze wody. */
.select-tile-contener .marker-main-contener .marker-air-subcategory-head > span:first-child {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
}
.select-tile-contener .marker-main-contener .marker-air-subcategory-head > span:first-child > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.select-tile-contener .marker-main-contener .marker-air-subcategory-head .marker-air-heading-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 0;
    text-align: left;
    line-height: 1.15;
}
.select-tile-contener .marker-main-contener .marker-air-subcategory-head .marker-air-freshness {
    display: contents;
}

/* Jak w nagłówku temperatury wody: nazwa zajmuje osobny wiersz. */
.select-tile-contener .marker-main-contener .marker-air-subcategory-head .marker-air-heading-copy > strong {
    display: block;
    line-height: 1.15;
}
.select-tile-contener .marker-main-contener .marker-air-subcategory-head .marker-air-heading-copy > strong > .marker-tutorial-link {
    display: inline-flex;
    align-items: center;
    line-height: 1.15;
}

/* Czytelny podpis okresu wykresu WQI. */
.select-tile-contener .marker-main-contener .marker-water-hero-history > header small {
    font-size: 11px;
    font-weight: 650;
    line-height: 1.3;
    color: #a9c1cd;
}
html[data-theme="light"] .select-tile-contener .marker-main-contener .marker-water-hero-history > header small {
    color: #526d7f;
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
    .select-tile-contener .marker-main-contener .marker-water-oxygen-widget:is(:hover, :focus-within) .marker-water-oxygen-gauge {
        transform-origin: 50% 85%;
        animation: atmosphere-thermometer-sway 650ms ease-in-out both;
    }
}

.select-tile-contener .marker-main-contener .marker-water-ph-widget .marker-water-ph-state {
    margin: 0;
    align-self: flex-start;
}

/* CMOS: compact reading beside a UV fluorescence chamber, fixed 0–5 range. */
.mineral-instrument.is-cmos {
    padding-top: 0;
    grid-template-columns: 100px minmax(0, 1fr);
    grid-template-areas: "chamber reading";
    gap: 12px;
}
.mineral-instrument.is-cmos .mineral-instrument-value { margin-bottom: 5px; flex-wrap: nowrap; }
.mineral-instrument.is-cmos .mineral-instrument-value > strong { font-size: 36px; font-weight: 800; }
.mineral-instrument.is-cmos .mineral-instrument-details { grid-area: reading; }
.mineral-instrument.is-cmos .cmos-chamber { grid-area: chamber; width: 100px; }
.mineral-instrument.is-cmos .cmos-chamber svg { width: 100px; height: 100px; }
.select-tile-contener .marker-main-contener .mineral-instrument.is-cmos .marker-reading-unit-stack { margin-left: 2px; }
.select-tile-contener .marker-main-contener .mineral-instrument.is-cmos .marker-reading-unit-stack > .marker-reading-unit { font-size: 17px; }
.select-tile-contener .marker-main-contener .mineral-instrument.is-cmos .marker-reading-unit-stack > .marker-reading-trend,
.select-tile-contener .marker-main-contener .mineral-instrument.is-cmos .marker-reading-trend i { font-size: 10px; }
.cmos-range { display: flex; gap: 10px; color: #8da9b8; font-size: 10px; font-weight: 600; line-height: 14px; }
.cmos-range > span { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.cmos-range i { font-size: 9px; }
.cmos-chamber { border-radius: 50%; background: radial-gradient(ellipse at 50% 30%, #9b62ff16, transparent 60%); }
.cmos-chamber .mineral-instrument-progress { stroke: hsl(var(--cmos-severity) 75% 48%); filter: drop-shadow(0 0 3px hsl(var(--cmos-severity) 75% 48% / .35)); }
.cmos-uv-source { fill: none; stroke: #b68aff; stroke-width: 2; opacity: .55; filter: drop-shadow(0 3px 5px #9860ff); }
.cmos-particles circle { fill: #a78bfa; opacity: .12; }
.cmos-particles .is-lit { fill: #c9a9ff; opacity: .95; filter: drop-shadow(0 0 3px #9855ff); }
html[data-theme="light"] .cmos-range { color: #526d7f; }
html[data-theme="light"] .cmos-particles .is-lit { fill: #8750dc; }
@media (max-width: 500px) {
    .mineral-instrument.is-cmos .mineral-instrument-value > strong { font-size: 30px; }
}

/* Keep oxygen readings and their range in normal flow, never in one grid cell. */
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget:not(.is-split-design) .marker-water-oxygen-metric {
    display: flex;
    min-height: 70px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 5px;
}
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget:not(.is-split-design) .marker-water-oxygen-reading {
    justify-content: flex-start;
    align-self: flex-start;
    transform: none;
    margin: 0;
    flex: 0 0 auto;
}
.select-tile-contener .marker-main-contener .marker-water-oxygen-widget .marker-water-oxygen-metric .marker-water-oxygen-stats {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: baseline;
    justify-content: center;
    margin: 0;
    transform: none;
    gap: 10px;
    width: max-content;
}

.select-tile-contener .marker-main-contener .marker-water-oxygen-widget:not(.is-split-design) .marker-water-oxygen-metric .marker-water-oxygen-stats {
    justify-content: flex-start;
}

/* Turbidity: readable measurement next to the illustrative Secchi visibility column. */
/* Reading and graphic share one line; the graphics are as tall as the reading, so the status sits right under min/max. */
.select-tile-contener .marker-main-contener :is(.marker-water-clarity-primary, .marker-water-clarity-secondary) {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    gap: 4px;
}
.marker-water-clarity-line { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; }
.marker-water-clarity-line > :is(.marker-water-clarity-reading, .marker-water-clarity-tss-copy) { flex: 0 0 auto; }
.marker-water-clarity-line > .marker-water-clarity-chamber:is(.is-secchi, .is-tss) { display: block; flex: 1 1 auto; min-width: 0; }
:is(.marker-water-clarity-primary, .marker-water-clarity-secondary) > .marker-water-clarity-class { justify-self: start; margin: 0; }
.marker-water-clarity-chamber :is(.marker-secchi-column, .marker-tss-strip) { max-height: 64px; }
.select-tile-contener .marker-main-contener .marker-water-clarity-reading > strong { font-size: 36px; font-weight: 800; margin-top: 0; }
.select-tile-contener .marker-main-contener .marker-water-clarity-reading .marker-reading-unit-stack > .marker-reading-unit { font-size: 17px; }
.select-tile-contener .marker-main-contener .marker-water-clarity-reading .marker-reading-unit-stack > .marker-reading-trend,
.select-tile-contener .marker-main-contener .marker-water-clarity-reading .marker-reading-trend i { font-size: 10px; }
.clarity-reading-range { display: flex; gap: 10px; margin-top: 5px; color: #8da9b8; font-size: 10px; font-weight: 600; line-height: 14px; }
.clarity-reading-range > span { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.clarity-reading-range i { font-size: 9px; }
html[data-theme="light"] .clarity-reading-range { color: #526d7f; }
/* Trial: the former turbidity eyebrow typography on the main category names. */
.select-tile-contener .marker-main-contener .marker-category > .marker-group-head .marker-group-name {
    font-family: inherit; font-size: 12px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase;
}
@media (max-width: 500px) {
    .select-tile-contener .marker-main-contener .marker-water-clarity-reading > strong { font-size: 30px; }
}

/* A single optical scene: current reading, visibility and its spectrum. */
.select-tile-contener .marker-main-contener .marker-water-clarity-reading .marker-reading-unit-stack > .marker-reading-unit {
    color: inherit;
    font-style: normal;
}
.select-tile-contener .marker-main-contener .marker-water-clarity-reading .marker-reading-unit-stack { color: inherit; }

/* Turbidity: horizontal water column seen by the observer; the Secchi disk fades at the estimated visibility. */
.marker-main-contener .marker-water-clarity-chamber.is-secchi {
    --clarity-clear-near: #1d6f8c; --clarity-murk-near: #6a5a2c;
    --clarity-clear-far: #0b3446; --clarity-murk-far: #2e2512;
    --clarity-fog-clear: #0f1f26; --clarity-fog-murk: #3b321c;
    --clarity-ink: #d7e8ee; --clarity-muted: #7f9dab; --clarity-line: #2b4955;
    --clarity-accent: #f0a23a; --clarity-accent-ink: #2a1703; --clarity-silt: #dcc79a;
    display: block;
}
html[data-theme="light"] .marker-main-contener .marker-water-clarity-chamber.is-secchi {
    --clarity-clear-near: #8fd0ea; --clarity-murk-near: #bda46a;
    --clarity-clear-far: #3f94c2; --clarity-murk-far: #7a6232;
    --clarity-fog-clear: #d6e4ea; --clarity-fog-murk: #a89366;
    --clarity-ink: #1c3a48; --clarity-muted: #5b7584; --clarity-line: #c3d5dd;
    --clarity-accent: #e8942a; --clarity-accent-ink: #2a1703; --clarity-silt: #6f5a2a;
}
.marker-secchi-column { display: block; width: 100%; height: auto; overflow: visible; }
.marker-secchi-column .is-water-near { stop-color: color-mix(in srgb, var(--clarity-murk-near) var(--clarity-murk), var(--clarity-clear-near)); }
.marker-secchi-column .is-water-far { stop-color: color-mix(in srgb, var(--clarity-murk-far) var(--clarity-murk), var(--clarity-clear-far)); }
.marker-secchi-column .is-fog { stop-color: color-mix(in srgb, var(--clarity-fog-murk) var(--clarity-murk), var(--clarity-fog-clear)); }
.marker-secchi-column .is-fog-solid { fill: color-mix(in srgb, var(--clarity-fog-murk) var(--clarity-murk), var(--clarity-fog-clear)); fill-opacity: .94; }
.marker-secchi-column .is-tube { fill: none; stroke: var(--clarity-line); stroke-width: 1.2; }
.marker-secchi-column .is-beam-stop { stop-color: #ffe7a3; }
.marker-secchi-column .is-light .is-halo { fill: #ffd36b; opacity: .22; }
.marker-secchi-column .is-light .is-rays { stroke: #ffc94d; stroke-width: 1.3; stroke-linecap: round; }
.marker-secchi-column .is-light .is-core { fill: #ffc233; stroke: #fff1c2; stroke-width: 1; }
.marker-secchi-column .is-light .is-spark { fill: #fffbea; }
.marker-secchi-column .is-water-beam { mix-blend-mode: screen; }
html[data-theme="light"] .marker-secchi-column .is-beam-stop { stop-color: #ffb938; }
html[data-theme="light"] .marker-secchi-column .is-light .is-core { fill: #f5a524; stroke: #fff4d6; }
html[data-theme="light"] .marker-secchi-column .is-light .is-rays { stroke: #f0a020; }
html[data-theme="light"] .marker-secchi-column .is-water-beam { mix-blend-mode: normal; }
.marker-param-scale.is-turbidity article { grid-template-columns: 124px minmax(0, 1fr) 104px; }
.marker-param-scale.is-turbidity article span i { background: var(--band-color); box-shadow: 0 0 10px -2px var(--band-color); }
.marker-param-scale.is-turbidity article b em { margin-left: 4px; color: #f0a23a; font-style: normal; }
.marker-secchi-column .is-rope { stroke: var(--clarity-muted); stroke-width: .8; }
.marker-secchi-column .is-disk { opacity: .85; }
.marker-secchi-column .is-disk circle { fill: #f3f3f0; stroke: #1b1b1b; stroke-width: 1; }
.marker-secchi-column .is-disk path { fill: #1b1b1b; }
.marker-secchi-column .marker-water-clarity-particles circle { fill: var(--clarity-silt); opacity: .75; animation: marker-secchi-drift 3.2s ease-in-out infinite alternate; }
.marker-secchi-column .is-tick { stroke: var(--clarity-muted); stroke-width: 1; }
.marker-secchi-column .is-tick-label { fill: var(--clarity-muted); font-size: 10px; font-weight: 600; }
.marker-secchi-column .is-mark { stroke: var(--clarity-accent); stroke-width: 1.3; stroke-dasharray: 3 3; }
.marker-secchi-column .is-label rect { fill: var(--clarity-accent); }
.marker-secchi-column .is-label text { fill: var(--clarity-accent-ink); font-size: 11px; font-weight: 750; }
@keyframes marker-secchi-drift { to { transform: translate(2px, -2px); opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
    .marker-secchi-column .marker-water-clarity-particles circle { animation: none; }
}

/* Chlorophyll: reading with trophic status next to a split microscope eyepiece. */
.marker-water-biology-line { display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; }
.select-tile-contener .marker-main-contener .marker-water-biology-line > .marker-water-biology-reading { flex: 1 1 auto; min-width: 0; }
.select-tile-contener .marker-main-contener .marker-water-biology-reading > small { display: none; }
.select-tile-contener .marker-main-contener .marker-water-biology-reading > strong { font-size: 36px; font-weight: 800; margin-top: 0; }
.select-tile-contener .marker-main-contener .marker-water-biology-reading .marker-reading-unit-stack { color: inherit; }
.select-tile-contener .marker-main-contener .marker-water-biology-reading .marker-reading-unit-stack > .marker-reading-unit { font-size: 17px; font-style: normal; color: inherit; }
.select-tile-contener .marker-main-contener .marker-water-biology-reading .marker-reading-unit-stack > .marker-reading-trend,
.select-tile-contener .marker-main-contener .marker-water-biology-reading .marker-reading-trend i { font-size: 10px; }
.marker-water-biology-reading > .marker-water-biology-class { align-self: flex-start; margin: 8px 0 0; }
.marker-water-biology-tsi { margin-top: 6px; color: #8da9b8; font-size: 10px; font-weight: 600; line-height: 1.4; }
.marker-water-biology-tsi b { color: #eef7fa; font-weight: 800; }
html[data-theme="light"] .marker-water-biology-tsi { color: #526d7f; }
html[data-theme="light"] .marker-water-biology-tsi b { color: #173241; }
.marker-water-biology-eyepiece { display: block; flex: 0 0 132px; width: 132px; }
.marker-chlorophyll-eyepiece {
    --chl-day-light: color-mix(in srgb, #5a7828 var(--chl-load), #2f8fb0); --chl-day-deep: color-mix(in srgb, #29370f var(--chl-load), #0c3246);
    --chl-dark-light: #121c3c; --chl-dark-deep: #04060f; --chl-barrel: #0b161c; --chl-barrel-line: #2b4955; --chl-label: #7f9dab;
    display: block; width: 100%; height: auto; overflow: visible;
}
html[data-theme="light"] .marker-chlorophyll-eyepiece {
    --chl-day-light: color-mix(in srgb, #c3d788 var(--chl-load), #dff1f8); --chl-day-deep: color-mix(in srgb, #7c9a3c var(--chl-load), #9fd2e8);
    --chl-barrel: #e3edf1; --chl-barrel-line: #b9ccd4; --chl-label: #5b7584;
}
.marker-chlorophyll-eyepiece .is-day-light { stop-color: var(--chl-day-light); }
.marker-chlorophyll-eyepiece .is-day-deep { stop-color: var(--chl-day-deep); }
.marker-chlorophyll-eyepiece .is-dark-light { stop-color: var(--chl-dark-light); }
.marker-chlorophyll-eyepiece .is-dark-deep { stop-color: var(--chl-dark-deep); }
.marker-chlorophyll-eyepiece .is-ring-zone { fill: none; stroke-width: 7; opacity: .85; }
.marker-chlorophyll-eyepiece .is-barrel { fill: var(--chl-barrel); stroke: var(--chl-barrel-line); stroke-width: 3; }
.marker-chlorophyll-eyepiece .is-lens-edge { fill: none; stroke: #000; stroke-opacity: .28; stroke-width: 3; }
.marker-chlorophyll-eyepiece .is-reticle { stroke: #fff; stroke-opacity: .08; }
.marker-chlorophyll-eyepiece .is-divider { stroke: var(--chl-barrel); stroke-width: 2; }
.marker-chlorophyll-eyepiece .is-diatom rect { fill: #b5c77a; stroke: #5b6b2e; stroke-width: .6; }
.marker-chlorophyll-eyepiece .is-green circle { fill: #86efac; fill-opacity: .55; stroke: #3f8f4f; stroke-width: .6; }
.marker-chlorophyll-eyepiece .is-green .is-chloroplast { fill: #2f7d3a; fill-opacity: 1; stroke: none; }
.marker-chlorophyll-eyepiece .is-filament path { fill: none; stroke: #4d7c0f; stroke-width: 1.2; }
.marker-chlorophyll-eyepiece .is-glow .is-halo { fill: #ef4444; opacity: .45; }
.marker-chlorophyll-eyepiece .is-glow .is-core { fill: #fb7185; }
.marker-chlorophyll-eyepiece .is-cell { transform-box: fill-box; transform-origin: center; animation: marker-chlorophyll-float 4s ease-in-out infinite alternate; }
.marker-chlorophyll-eyepiece .is-glow { animation-name: marker-chlorophyll-glow; }
.marker-chlorophyll-eyepiece .is-side-label { fill: var(--chl-label); font-size: 9px; font-weight: 600; }
.marker-chlorophyll-eyepiece .is-ring-marker { fill: var(--chl-barrel); stroke-width: 2.4; }
@keyframes marker-chlorophyll-float { to { transform: translate(2px, -2px) rotate(8deg); } }
@keyframes marker-chlorophyll-glow { to { transform: translate(2px, -2px); opacity: .6; } }
@media (prefers-reduced-motion: reduce) {
    .marker-chlorophyll-eyepiece .is-cell { animation: none; }
}
@media (max-width: 360px) {
    .marker-water-biology-eyepiece { flex-basis: 108px; width: 108px; }
}
.marker-param-scale.is-trophic article { grid-template-columns: 124px minmax(0, 1fr) 104px; }
.marker-param-scale.is-trophic article span i { background: var(--band-color); box-shadow: 0 0 10px -2px var(--band-color); }
.marker-param-scale.is-trophic article b em { margin-left: 4px; color: #f0a23a; font-style: normal; }
.marker-trophic-guide-eyepiece { display: block; width: 150px; margin: 0 auto 6px; }

/* Cyanobacteria: WHO bathing status over a lake cross-section, with one chip per measured pigment channel. */
.marker-water-biology-secondary { width: 100%; }
.marker-water-biology-bga-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.marker-water-biology-bga-status > .marker-water-biology-class { margin: 0; }
.marker-water-biology-bga-status > small { color: #8da9b8; font-size: 11px; font-weight: 650; }
html[data-theme="light"] .marker-water-biology-bga-status > small { color: #526d7f; }
.marker-water-biology-bga-scene { display: block; width: 100%; }
.marker-water-biology-bga-chips { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.marker-water-biology-bga-chips.is-dual { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.marker-water-biology-bga-chip {
    display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px;
    border: 1px solid rgba(148, 163, 184, .14); border-left: 3px solid var(--bga-channel); border-radius: 12px;
    color: inherit; background: rgba(255, 255, 255, .02); font: inherit; text-align: left; cursor: pointer;
}
html[data-theme="light"] .marker-water-biology-bga-chip { border-color: rgba(28, 73, 104, .12); border-left-color: var(--bga-channel); background: rgba(255, 255, 255, .6); }
.marker-water-biology-bga-swatch { position: relative; flex: 0 0 26px; width: 26px; height: 34px; border-radius: 6px; background: linear-gradient(180deg, color-mix(in srgb, var(--bga-channel) 30%, transparent), color-mix(in srgb, var(--bga-channel) 85%, #0b161c)); }
.marker-water-biology-bga-swatch > i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #fff; opacity: .75; }
.marker-water-biology-bga-swatch > i:nth-child(1) { top: 8px; left: 7px; }
.marker-water-biology-bga-swatch > i:nth-child(2) { top: 12px; left: 13px; width: 5px; height: 5px; }
.marker-water-biology-bga-swatch > i:nth-child(3) { top: 22px; left: 9px; }
.marker-water-biology-bga-chip .marker-water-biology-algae-copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.select-tile-contener .marker-main-contener .marker-water-biology-bga-chip .marker-water-biology-algae-copy > small { color: #8da9b8; font-size: 10px; font-weight: 650; letter-spacing: 0; text-transform: none; }
.select-tile-contener .marker-main-contener .marker-water-biology-bga-chip .marker-water-biology-algae-copy > strong { margin: 2px 0 0; font-size: 26px; font-weight: 800; }
.select-tile-contener .marker-main-contener .marker-water-biology-bga-chip .marker-reading-unit-stack { color: inherit; }
.select-tile-contener .marker-main-contener .marker-water-biology-bga-chip .marker-reading-unit-stack > .marker-reading-unit { font-size: 13px; font-style: normal; color: inherit; }
.select-tile-contener .marker-main-contener .marker-water-biology-bga-chip .marker-reading-trend,
.select-tile-contener .marker-main-contener .marker-water-biology-bga-chip .marker-reading-trend i { font-size: 9px; }
.marker-bga-scene {
    --bga-sky: #132b36; --bga-shore: #2a3b2c; --bga-water-top: #16546c; --bga-water-deep: #0a2330; --bga-ink: #d7e8ee; --bga-muted: #7f9dab;
    display: block; width: 100%; height: auto;
}
html[data-theme="light"] .marker-bga-scene {
    --bga-sky: #e4f2f8; --bga-shore: #c9dcb8; --bga-water-top: #8fd0ea; --bga-water-deep: #3f8fb8; --bga-ink: #1c3a48; --bga-muted: #3d5d6c;
}
.marker-bga-scene .is-sky { fill: var(--bga-sky); }
.marker-bga-scene .is-shore { fill: var(--bga-shore); }
.marker-bga-scene .is-water-top { stop-color: var(--bga-water-top); }
.marker-bga-scene .is-water-deep { stop-color: var(--bga-water-deep); }
.marker-bga-scene .is-surface { fill: none; stroke: #bfe6f5; stroke-opacity: .5; }
.marker-bga-scene .is-colony { fill: currentColor; animation: marker-bga-rise 3.2s ease-in-out infinite alternate; }
.marker-bga-scene .is-colony.is-filament { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.marker-bga-scene .is-colony.is-cell { opacity: .8; }
html[data-theme="light"] .marker-bga-scene .is-colonies { filter: brightness(.6) saturate(1.5); }
.marker-bga-scene .is-depth-label { fill: var(--bga-muted); font-size: 9px; font-weight: 600; }
.marker-bga-scene .is-pole { stroke: var(--bga-ink); stroke-width: 2; }
.marker-bga-scene .is-flag { transform-box: fill-box; transform-origin: left center; animation: marker-bga-flag 1.2s ease-in-out infinite alternate; }
.marker-bga-scene .is-flag-empty { fill: none; stroke: var(--bga-muted); stroke-dasharray: 2 2; }
.marker-bga-scene .is-swimmer circle { fill: var(--bga-ink); }
.marker-bga-scene .is-swimmer path { fill: none; stroke: var(--bga-ink); stroke-width: 1.6; stroke-linecap: round; }
.marker-bga-scene .is-swimmer .is-ban { fill: none; stroke: #ef4444; stroke-width: 2; }
@keyframes marker-bga-rise { to { transform: translateY(-5px); } }
@keyframes marker-bga-flag { to { transform: skewY(5deg) scaleX(.94); } }
@media (prefers-reduced-motion: reduce) {
    .marker-bga-scene :is(.is-colony, .is-flag) { animation: none; }
}
@media (max-width: 380px) {
    .marker-water-biology-bga-chips.is-dual { grid-template-columns: minmax(0, 1fr); }
}
.marker-param-scale.is-bga article { grid-template-columns: 124px minmax(0, 1fr) 160px; }
.marker-param-scale.is-bga article span i { background: var(--band-color); box-shadow: 0 0 10px -2px var(--band-color); }
.marker-param-scale.is-bga article b em { margin-left: 4px; color: #f0a23a; font-style: normal; }
.marker-bga-guide-scene { display: block; width: 100%; margin: 0 0 6px; }

/* Suspended solids: same reading hierarchy as turbidity, next to a beaker and a silt-filled log scale. */
.select-tile-contener .marker-main-contener .marker-water-clarity-secondary {
    border-top: 0;
    padding-top: 10px;
}
.select-tile-contener .marker-main-contener .marker-water-clarity-tss-copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.select-tile-contener .marker-main-contener .marker-water-clarity-tss-copy > strong {
    font-size: 36px; font-weight: 800; margin: 0;
}
.select-tile-contener .marker-main-contener .marker-water-clarity-tss-copy .marker-reading-unit-stack { color: inherit; }
.select-tile-contener .marker-main-contener .marker-water-clarity-tss-copy .marker-reading-unit-stack > .marker-reading-unit {
    font-size: 17px; font-style: normal; color: inherit;
}
.select-tile-contener .marker-main-contener .marker-water-clarity-tss-copy .marker-reading-unit-stack > .marker-reading-trend,
.select-tile-contener .marker-main-contener .marker-water-clarity-tss-copy .marker-reading-trend i { font-size: 10px; }
.marker-main-contener .marker-water-clarity-chamber.is-tss {
    --tss-ink: #d7e8ee; --tss-muted: #7f9dab; --tss-line: #2b4955; --tss-tube: #10222a;
    --tss-water: #1d6f8c; --tss-accent: #f0a23a; --tss-accent-ink: #2a1703;
    --tss-silt-light: #e9d9ac; --tss-silt-mid: #b8925a; --tss-silt-dark: #6b4a26; --tss-particle: #f1dcae;
}
html[data-theme="light"] .marker-main-contener .marker-water-clarity-chamber.is-tss {
    --tss-ink: #1c3a48; --tss-muted: #5b7584; --tss-line: #c3d5dd; --tss-tube: #e3edf1;
    --tss-water: #9fd6ec; --tss-accent: #e8942a; --tss-accent-ink: #2a1703;
    --tss-silt-light: #eadbb0; --tss-silt-mid: #b58d55; --tss-silt-dark: #6b4a26; --tss-particle: #fff4d8;
}
.marker-tss-strip { display: block; width: 100%; height: auto; overflow: visible; }
.marker-tss-strip .is-silt-light { stop-color: var(--tss-silt-light); }
.marker-tss-strip .is-silt-mid { stop-color: var(--tss-silt-mid); }
.marker-tss-strip .is-silt-dark { stop-color: var(--tss-silt-dark); }
.marker-tss-strip .is-grain-dark { fill: #3b2a14; opacity: .35; }
.marker-tss-strip .is-grain-light { fill: #fff6dd; opacity: .35; }
.marker-tss-strip .is-beaker-water { fill: var(--tss-water); opacity: .55; }
.marker-tss-strip .is-beaker-bed { fill: var(--tss-silt-mid); }
.marker-tss-strip .is-beaker-bed + .is-beaker-grains circle,
.marker-tss-strip .is-beaker-grains circle { fill: var(--tss-silt-light); }
.marker-tss-strip .is-beaker-glass { fill: none; stroke: var(--tss-ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.marker-tss-strip .is-beaker-marks { stroke: var(--tss-ink); stroke-width: 1; opacity: .6; }
.marker-tss-strip .is-tube-bg { fill: var(--tss-tube); }
.marker-tss-strip .is-tube { fill: none; stroke: var(--tss-line); stroke-width: 1.2; }
.marker-tss-strip .marker-tss-particles circle { fill: var(--tss-particle); opacity: .7; animation: marker-secchi-drift 3.2s ease-in-out infinite alternate; }
.marker-tss-strip .is-tick { stroke: var(--tss-muted); stroke-width: 1; }
.marker-tss-strip .is-tick-label { fill: var(--tss-muted); font-size: 10px; font-weight: 600; }
.marker-tss-strip .is-tick-label.is-unit { font-size: 9px; }
.marker-tss-strip .is-mark { stroke: var(--tss-accent); stroke-width: 1.3; stroke-dasharray: 3 3; }
.marker-tss-strip .is-label rect { fill: var(--tss-accent); }
.marker-tss-strip .is-label text { fill: var(--tss-accent-ink); font-size: 11px; font-weight: 750; }
.marker-param-scale.is-tss article { grid-template-columns: 124px minmax(0, 1fr) 104px; }
.marker-param-scale.is-tss article span i { background: var(--band-color); box-shadow: 0 0 10px -2px var(--band-color); }
.marker-param-scale.is-tss article b em { margin-left: 4px; color: #f0a23a; font-style: normal; }
@media (max-width: 500px) {
    .select-tile-contener .marker-main-contener .marker-water-clarity-tss-copy > strong { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
    .marker-tss-strip .marker-tss-particles circle { animation: none; }
}
.marker-subcategory-head.has-alarm-indicator { position: relative; padding-right: 32px !important; }
.marker-subcategory-head > .marker-alarm-bell { right: 2px; top: 50%; transform: translateY(-50%); }
.marker-alarm-bell[role="button"] { cursor: pointer; }
.marker-alarm-bell[data-loading="true"] { opacity: .5; pointer-events: none; }

/* Dzwonek należy do nazwy parametru, nie do trendu ani wartości. */
.marker-atmosphere-minimal-label.has-alarm-indicator,
.marker-water-ions-name.has-alarm-indicator,
.marker-water-ec-primary-label.has-alarm-indicator,
.marker-water-ec-derived-head.has-alarm-indicator,
.marker-water-ec-info-label.has-alarm-indicator,
.mineral-dual-name.has-alarm-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    overflow: visible;
}
.marker-water-ec-primary-label.has-alarm-indicator { flex-direction: row; }
.marker-atmosphere-minimal-label > .marker-alarm-bell,
.marker-water-ions-name > .marker-alarm-bell,
.marker-water-ec-primary-label > .marker-alarm-bell,
.marker-water-ec-derived-head > .marker-alarm-bell,
.marker-water-ec-info-label > .marker-alarm-bell,
.mineral-dual-name > .marker-alarm-bell {
    position: static;
    flex: 0 0 auto;
    margin: 0;
    transform: none;
}
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-minimal-metric:first-child .marker-atmosphere-minimal-label.has-alarm-indicator {
    min-height: 23px;
    justify-content: flex-start;
}
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-minimal-metric:is(:nth-child(2), :nth-child(3)) .marker-atmosphere-minimal-label.has-alarm-indicator {
    justify-content: flex-end;
}
/* Alarm bells keep one colour scale in every widget: category and parameter accents
   (e.g. ".marker-subcategory-head i") must not repaint the bell or its icon. */
.select-tile-contener .marker-main-contener .marker-alarm-bell.waterly-alarm-bell[data-alarm-state] { color: #f3f7fa; border-color: #ffffff20; background: #07151cdd; }
.select-tile-contener .marker-main-contener .marker-alarm-bell.waterly-alarm-bell[data-alarm-state] > i { color: inherit; background: none; box-shadow: none; }
.select-tile-contener .marker-main-contener .marker-alarm-bell.waterly-alarm-bell:is([data-alarm-state="unset"], [data-alarm-state="disabled"]) { color: #81949d; }
.select-tile-contener .marker-main-contener .marker-alarm-bell.waterly-alarm-bell[data-alarm-state="unknown"] { color: #b5c5cb; border-style: dashed; }
.select-tile-contener .marker-main-contener .marker-alarm-bell.waterly-alarm-bell[data-alarm-state="warning"] { color: #ffbd66; border-color: #ffbd6650; }
.select-tile-contener .marker-main-contener .marker-alarm-bell.waterly-alarm-bell[data-alarm-state="alarm"] { color: #ff6574; border-color: #ff657470; }

/* Żywa szyna po lewej gałęzi drzewa — wyróżnia podkategorię z otwartym ostrzeżeniem/alarmem. */
.select-tile-contener .marker-main-contener .marker-category-content > .marker-subcategory[data-branch-alarm="warning"] {
    --branch-alarm-line: #f5b942;
    --branch-alarm-core: #ffd56a;
    --branch-alarm-glow: rgba(245, 185, 66, .72);
    --branch-alarm-soft: rgba(245, 185, 66, .28);
}
.select-tile-contener .marker-main-contener .marker-category-content > .marker-subcategory[data-branch-alarm="alarm"] {
    --branch-alarm-line: #ff4d63;
    --branch-alarm-core: #ff8a97;
    --branch-alarm-glow: rgba(255, 70, 90, .78);
    --branch-alarm-soft: rgba(255, 60, 85, .32);
}
.select-tile-contener .marker-main-contener .marker-category-content > .marker-subcategory[data-branch-alarm]::before,
.select-tile-contener .marker-main-contener .marker-category-content > .marker-subcategory[data-branch-alarm]:last-child::before {
    top: 4px;
    bottom: 10px;
    height: auto;
    width: 3px;
    left: -19px;
    border: 0;
    border-radius: 999px;
    background:
        linear-gradient(180deg, transparent 0%, var(--branch-alarm-core) 12%, var(--branch-alarm-line) 50%, var(--branch-alarm-core) 88%, transparent 100%);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--branch-alarm-line) 35%, transparent),
        0 0 10px var(--branch-alarm-glow),
        0 0 22px var(--branch-alarm-soft),
        2px 0 12px var(--branch-alarm-soft);
    animation: marker-branch-alarm-pulse 4.8s ease-in-out infinite;
}
.select-tile-contener .marker-main-contener .marker-category-content > .marker-subcategory[data-branch-alarm]::after {
    top: 21px;
    width: 14px;
    height: 2px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--branch-alarm-line), color-mix(in srgb, var(--branch-alarm-core) 70%, transparent));
    box-shadow:
        0 0 8px var(--branch-alarm-glow),
        0 0 14px var(--branch-alarm-soft);
}
@keyframes marker-branch-alarm-pulse {
    0%, 14%, 28%, 100% { opacity: .65; }
    7%, 21% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .select-tile-contener .marker-main-contener .marker-category-content > .marker-subcategory[data-branch-alarm]::before,
    .select-tile-contener .marker-main-contener .marker-water-hero-card[data-branch-alarm]::after {
        animation: none;
    }
}
html[data-theme="light"] .select-tile-contener .marker-main-contener .marker-category-content > .marker-subcategory[data-branch-alarm="warning"] {
    --branch-alarm-line: #c47f00;
    --branch-alarm-core: #e8a820;
    --branch-alarm-glow: rgba(196, 127, 0, .55);
    --branch-alarm-soft: rgba(196, 127, 0, .22);
}
html[data-theme="light"] .select-tile-contener .marker-main-contener .marker-category-content > .marker-subcategory[data-branch-alarm="alarm"] {
    --branch-alarm-line: #e11d48;
    --branch-alarm-core: #fb7185;
    --branch-alarm-glow: rgba(225, 29, 72, .55);
    --branch-alarm-soft: rgba(225, 29, 72, .22);
}

/* Wspólny jasny wariant wszystkich alarmów w widgetach. */
html[data-theme="light"] .select-tile-contener .marker-main-contener .marker-alarm-bell.waterly-alarm-bell[data-alarm-state] {
    background: #edf5f8;
    border-color: #c5d8e1;
    color: #365665;
}
html[data-theme="light"] .select-tile-contener .marker-main-contener .marker-alarm-bell.waterly-alarm-bell:is([data-alarm-state="unset"], [data-alarm-state="disabled"]) {
    color: #607987;
}
html[data-theme="light"] .select-tile-contener .marker-main-contener .marker-alarm-bell.waterly-alarm-bell[data-alarm-state="warning"] {
    color: #945400;
    border-color: #d8b67c;
}
html[data-theme="light"] .select-tile-contener .marker-main-contener .marker-alarm-bell.waterly-alarm-bell[data-alarm-state="alarm"] {
    color: #b52c45;
    border-color: #dda5af;
}

/* The reading carries the severity colour and alternates with its live-alert label. */
.select-tile-contener .marker-main-contener [data-parameter-alarm="warning"] {
    --parameter-alert-ink: #ffcb7c;
    --parameter-alert-accent: #edb454;
}
.select-tile-contener .marker-main-contener [data-parameter-alarm="alarm"] {
    --parameter-alert-ink: #ff8a9c;
    --parameter-alert-accent: #f36b83;
}
html[data-theme="light"] .select-tile-contener .marker-main-contener [data-parameter-alarm="warning"] {
    --parameter-alert-ink: #985600;
    --parameter-alert-accent: #d99729;
}
html[data-theme="light"] .select-tile-contener .marker-main-contener [data-parameter-alarm="alarm"] {
    --parameter-alert-ink: #bc2949;
    --parameter-alert-accent: #dc5571;
}
.select-tile-contener .marker-main-contener [data-parameter-alarm],
.select-tile-contener .marker-main-contener .marker-alarm-bell {
    --parameter-reading-animation: none;
    --parameter-icon-animation: none;
}
.select-tile-contener .marker-main-contener [data-parameter-alarm] :is(
    .marker-water-temperature-value, .marker-water-depth-primary > strong,
    .marker-water-oxygen-reading > strong, .oxygen-half-number,
    .marker-water-ph-value > strong, .marker-water-ph-reading > strong, .marker-water-orp-reading > strong,
    .marker-water-ec-primary-value > strong, .marker-water-ec-derived-value > strong, .marker-water-ec-info-value > strong, .marker-water-ions-value,
    .marker-water-clarity-reading > strong, .marker-water-biology-reading > strong,
    .marker-water-organic-reading > strong, .mineral-instrument-value,
    .mineral-dual-reading > strong, .mineral-conductivity-value > strong,
    .marker-atmosphere-minimal-value > strong, .marker-multi-sensor-value > strong, .marker-widget-value, .marker-tile-value
) {
    color: var(--parameter-alert-ink) !important;
    /* Mobile widgets suppress decorative animations; live alert readings are an exception. */
    animation: var(--parameter-reading-animation) !important;
}
.select-tile-contener .marker-main-contener .marker-alarm-bell.waterly-alarm-bell:is([data-alarm-state="alarm"], [data-alarm-state="warning"]) > i {
    animation: var(--parameter-icon-animation) !important;
}
.select-tile-contener .marker-main-contener .marker-alarm-bell.waterly-alarm-bell {
    width: auto;
    max-width: 100%;
    height: 22px;
    padding: 0 7px;
    gap: 5px;
    border-radius: 7px;
    font-size: 9px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
}
.select-tile-contener .marker-main-contener .marker-alarm-bell.waterly-alarm-bell[data-alarm-state="warning"] {
    background: #eab34317;
    color: #ffcb7c;
}
.select-tile-contener .marker-main-contener .marker-alarm-bell.waterly-alarm-bell[data-alarm-state="alarm"] {
    background: #ef668019;
    color: #ff8a9c;
}
html[data-theme="light"] .select-tile-contener .marker-main-contener .marker-alarm-bell.waterly-alarm-bell[data-alarm-state="warning"] {
    background: #fff4db;
    color: #985600;
}
html[data-theme="light"] .select-tile-contener .marker-main-contener .marker-alarm-bell.waterly-alarm-bell[data-alarm-state="alarm"] {
    background: #fff0f3;
    color: #bc2949;
}
.select-tile-contener .marker-main-contener .marker-subcategory-head.has-alarm-indicator {
    padding-right: 0 !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.select-tile-contener .marker-main-contener .marker-subcategory-head > .marker-alarm-bell {
    position: static;
    transform: none;
    margin: 0;
    justify-self: start;
    align-self: start;
}
/* The score and the live-alert face share the same circle and alternate by opacity. */
.select-tile-contener .marker-main-contener .marker-water-hero-score[data-parameter-alarm] {
    --wqi-face-animation: none;
    --wqi-alert-animation: none;
    --wqi-alert-size: 86px;
}
.select-tile-contener .marker-main-contener .marker-water-hero-score[data-parameter-alarm] .marker-water-hero-orbit {
    position: relative;
}
.select-tile-contener .marker-main-contener .marker-water-hero-score[data-parameter-alarm] .marker-water-hero-ring {
    animation: var(--wqi-face-animation) !important;
}
.select-tile-contener .marker-main-contener .marker-wqi-alert-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    width: var(--wqi-alert-size);
    height: var(--wqi-alert-size);
    place-items: center;
    border: 2px solid var(--parameter-alert-accent);
    border-radius: 50%;
    background: #361e28;
    color: #ff8a9c;
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--parameter-alert-accent) 14%, transparent);
    font-size: 32px;
    opacity: 0;
    pointer-events: none;
    animation: var(--wqi-alert-animation) !important;
}
.select-tile-contener .marker-main-contener .marker-wqi-alert-indicator[data-alarm-state="warning"] {
    background: #322a17;
    color: #ffcb7c;
}
.select-tile-contener .marker-main-contener .marker-wqi-alert-indicator > i {
    color: inherit;
}
html[data-theme="light"] .select-tile-contener .marker-main-contener .marker-wqi-alert-indicator[data-alarm-state="warning"] {
    background: #fff4db;
    color: #985600;
}
html[data-theme="light"] .select-tile-contener .marker-main-contener .marker-wqi-alert-indicator[data-alarm-state="alarm"] {
    background: #ffe7ed;
    color: #bc2949;
}
@media (prefers-reduced-motion: no-preference) {
    .select-tile-contener .marker-main-contener .marker-water-hero-score[data-parameter-alarm] {
        --wqi-face-animation: marker-wqi-reading-face 2.8s ease-in-out infinite;
        --wqi-alert-animation: marker-wqi-alert-face 2.8s ease-in-out infinite;
    }
}
@keyframes marker-wqi-reading-face {
    0%, 55%, 92%, 100% { opacity: 1; }
    63%, 84% { opacity: 0; }
}
@keyframes marker-wqi-alert-face {
    0%, 55%, 92%, 100% { opacity: 0; }
    63%, 84% { opacity: 1; }
}
/* Both faces share a grid cell; the real reading stays in the DOM for live updates. */
.select-tile-contener .marker-main-contener .marker-parameter-reading-switch {
    display: inline-grid !important;
    grid-template-columns: minmax(0, max-content);
    grid-auto-flow: column;
    grid-auto-columns: auto;
    align-items: center;
    column-gap: 6px;
    max-width: 100%;
}
.select-tile-contener .marker-main-contener .marker-parameter-reading-switch > .marker-parameter-reading-number,
.select-tile-contener .marker-main-contener .marker-parameter-reading-switch > .marker-reading-alarm-face {
    grid-column: 1;
    grid-row: 1;
}
.select-tile-contener .marker-main-contener .marker-parameter-reading-switch > [data-alarm-reading-text] {
    font: inherit;
    color: inherit !important;
    letter-spacing: inherit;
}
.select-tile-contener .marker-main-contener .marker-parameter-reading-switch > .marker-reading-alarm-face {
    position: static !important;
    transform: none !important;
    justify-self: center;
    align-self: center;
    width: max-content;
    height: auto;
    min-height: 32px;
    padding: 0;
    border: 0;
    background: transparent !important;
    box-shadow: none;
    margin: 0;
    font-size: 26px;
    line-height: 1.3;
    letter-spacing: 0;
    white-space: normal;
    text-align: center;
    opacity: 0;
    pointer-events: none;
}
.select-tile-contener .marker-main-contener .marker-reading-alarm-face > i { animation: none !important; flex: 0 0 auto; }
.select-tile-contener .marker-main-contener .marker-reading-alarm-face > .marker-parameter-alert-label {
    display: none;
}
@media (prefers-reduced-motion: no-preference) {
    .select-tile-contener .marker-main-contener .marker-parameter-reading-switch > .marker-parameter-reading-number {
        animation: marker-wqi-reading-face 2.8s ease-in-out infinite !important;
    }
    .select-tile-contener .marker-main-contener .marker-parameter-reading-switch > .marker-reading-alarm-face {
        animation: marker-parameter-alert-face 2.8s ease-in-out infinite !important;
    }
}
@keyframes marker-parameter-alert-face {
    0%, 55%, 92%, 100% { opacity: 0; pointer-events: none; }
    63%, 84% { opacity: 1; pointer-events: auto; }
}
.select-tile-contener .marker-main-contener .marker-parameter-reading-switch:focus-within > .marker-parameter-reading-number {
    animation: none !important;
    opacity: 0;
}
.select-tile-contener .marker-main-contener .marker-parameter-reading-switch:focus-within > .marker-reading-alarm-face {
    animation: none !important;
    opacity: 1;
    pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
    .select-tile-contener .marker-main-contener .marker-parameter-reading-switch > .marker-reading-alarm-face {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-self: start;
        opacity: 1;
        pointer-events: auto;
    }
    .select-tile-contener .marker-main-contener .marker-parameter-reading-switch:focus-within > .marker-parameter-reading-number { opacity: 1; }
}
@media (max-width: 767px) {
    .select-tile-contener .marker-main-contener .marker-water-hero-score[data-parameter-alarm] {
        --wqi-alert-size: 96px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .select-tile-contener .marker-main-contener .marker-wqi-alert-indicator {
        top: auto;
        left: auto;
        right: 0;
        bottom: 0;
        width: 24px;
        height: 24px;
        transform: none;
        border-width: 1px;
        box-shadow: none;
        font-size: 11px;
        opacity: 1;
    }
}
.select-tile-contener .marker-main-contener.is-compact-mode .marker-parameter-alert-label,
.select-tile-contener .marker-main-contener .marker-multi-sensor-value .marker-parameter-alert-label {
    display: none;
}
@media (max-width: 767px) {
    .select-tile-contener .marker-main-contener .marker-atmosphere-minimal-label.has-alarm-indicator {
        flex-wrap: wrap;
        gap: 4px 6px;
    }
    .select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-minimal-metric:first-child[data-parameter-alarm] {
        grid-template-columns: 24px minmax(0, 1fr);
        column-gap: 4px;
    }
    .select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-minimal-metric:first-child[data-parameter-alarm] .marker-atmosphere-minimal-label {
        grid-column: 1 / -1;
        min-width: 0;
    }
    .select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-minimal-metric:first-child[data-parameter-alarm] .is-thermometer {
        grid-row: 2 / 4;
        width: 24px;
        height: 64px;
    }
    .select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-minimal-metric:first-child[data-parameter-alarm] .is-thermometer svg {
        width: 24px;
        height: 64px;
    }
    .select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-graphic-category-atmosphere .marker-atmosphere-minimal-grid:has([data-parameter-alarm]) {
        grid-template-rows: repeat(2, minmax(28px, auto));
    }
}
@media (prefers-reduced-motion: reduce) {
    .select-tile-contener .marker-main-contener [data-parameter-alarm] * {
        animation: none !important;
    }
    .select-tile-contener .marker-main-contener [data-parameter-alarm] *::after {
        animation: none !important;
    }
}

.select-tile-contener .marker-water-hero-quick-action[data-action="alarms"] {
    position: relative;
}
.select-tile-contener .marker-water-hero-quick-action[data-action="alarms"] .marker-alarm-count {
    position: absolute;
    top: 4px;
    right: 6px;
    display: grid;
    min-width: 14px;
    height: 14px;
    place-items: center;
    padding: 0 4px;
    border-radius: 999px;
    background: rgba(255, 101, 116, 0.2);
    color: #ff8997;
    font-size: 8px;
    font-weight: 800;
    line-height: 1;
}
.select-tile-contener .marker-water-hero-quick-action[data-action="alarms"] .marker-alarm-count[hidden] {
    display: none !important;
}
.select-tile-contener .marker-water-hero-quick-action[data-action="alarms"][data-alarm-state="warning"] {
    border-color: rgba(255, 189, 102, 0.42);
    color: #ffbd66;
}
.select-tile-contener .marker-water-hero-quick-action[data-action="alarms"][data-alarm-state="warning"] i {
    color: #ffbd66;
}
.select-tile-contener .marker-water-hero-quick-action[data-action="alarms"][data-alarm-state="alarm"] {
    border-color: rgba(255, 101, 116, 0.48);
    color: #ff7a88;
}
@media (prefers-reduced-motion: reduce) {
    .select-tile-contener .marker-water-hero-quick-action[data-action="alarms"][data-alarm-state="alarm"] i {
        animation: none;
    }
}
.select-tile-contener .marker-water-hero-actions:has([data-action="alarms"]) .marker-water-hero-quick-action span {
    font-size: 10px;
}

body.marker-alarm-manager-open { overflow: hidden; }
.marker-alarm-manager {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.marker-alarm-manager-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(1, 10, 15, 0.78);
    backdrop-filter: blur(7px);
}
.marker-alarm-manager-window {
    position: relative;
    display: flex;
    width: min(1080px, calc(100vw - 32px));
    max-height: min(920px, calc(100dvh - 32px));
    overflow: hidden;
    flex-direction: column;
    border: 1px solid rgba(111, 213, 211, 0.18);
    border-radius: 22px;
    background:
        radial-gradient(circle at 8% 0%, rgba(50, 211, 187, 0.12), transparent 36%),
        linear-gradient(165deg, #0a1c26, #06141c);
    color: #eaf8fb;
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.55);
}
.marker-alarm-manager-header {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: start;
    gap: 14px;
    padding: 22px 22px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.marker-alarm-manager-icon {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid rgba(85, 221, 216, 0.18);
    border-radius: 13px;
    background: rgba(85, 221, 216, 0.1);
    color: #55ddd8;
}
.marker-alarm-manager-header span {
    color: #55ddd8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.marker-alarm-manager-header h2 {
    margin: 4px 0 3px;
    color: #f2fbff;
    font-size: 22px;
    font-weight: 750;
    letter-spacing: -0.03em;
}
.marker-alarm-manager-header p {
    margin: 0;
    color: #8ca7b2;
    font-size: 12px;
}
.marker-alarm-manager-close {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    color: #dbeef3;
    cursor: pointer;
}
.marker-alarm-manager-close:hover {
    border-color: rgba(85, 221, 216, 0.28);
    background: rgba(85, 221, 216, 0.08);
    color: #eafffe;
}
.marker-alarm-manager-addbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 12px;
    margin: 16px 22px 0;
    padding: 14px;
    border: 1px solid rgba(116, 172, 193, 0.14);
    border-radius: 16px;
    background: rgba(8, 28, 37, 0.78);
}
.marker-alarm-manager-field {
    display: grid;
    gap: 7px;
    min-width: 0;
    margin: 0;
}
.marker-alarm-manager-field-label {
    color: #7f9bab;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.marker-alarm-manager-parameter {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1px solid rgba(129, 180, 198, 0.18);
    border-radius: 11px;
    background: #071820;
    color: #e4f2f6;
    font-size: 13px;
    font-weight: 600;
}
.marker-alarm-manager-parameter:focus {
    outline: 0;
    border-color: rgba(69, 204, 199, 0.55);
    box-shadow: 0 0 0 3px rgba(69, 204, 199, 0.14);
}
.marker-alarm-manager-add {
    display: inline-flex;
    height: 44px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 18px;
    border: 0;
    border-radius: 11px;
    background: #45ccc7;
    color: #062128;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.18s ease, color 0.18s ease, opacity 0.18s ease, transform 0.18s ease;
}
.marker-alarm-manager-add:not(:disabled):hover {
    background: #61ddd8;
    transform: translateY(-1px);
}
.marker-alarm-manager-add:disabled {
    background: rgba(255, 255, 255, 0.06);
    color: #6d8793;
    cursor: not-allowed;
    opacity: 1;
}
.marker-alarm-manager-list {
    display: grid;
    gap: 8px;
    min-height: 0;
    overflow: auto;
    padding: 14px 22px 10px;
}
.marker-alarm-manager-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid rgba(116, 172, 193, 0.12);
    border-radius: 14px;
    background: rgba(9, 29, 38, 0.62);
}
.marker-alarm-manager-row.is-inactive { opacity: 0.7; }
.marker-alarm-manager-row.is-warning { border-color: rgba(255, 189, 102, 0.28); }
.marker-alarm-manager-row.is-alarm { border-color: rgba(255, 101, 116, 0.32); }
.marker-alarm-manager-state {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 10px;
    background: rgba(85, 221, 216, 0.12);
    color: #55ddd8;
}
.marker-alarm-manager-state[data-alarm-state="warning"] { background: rgba(255, 189, 102, 0.12); color: #ffbd66; }
.marker-alarm-manager-state[data-alarm-state="alarm"] { background: rgba(255, 101, 116, 0.12); color: #ff6574; }
.marker-alarm-manager-copy small { color: #708b96; font-size: 11px; }
.marker-alarm-manager-copy strong { display: block; color: #d9e9ed; font-size: 13px; }
.marker-alarm-manager-copy p { margin: 2px 0 0; color: #829ca6; font-size: 11px; }
.marker-alarm-manager-copy > div { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.marker-alarm-manager-copy > div span { padding: 3px 7px; border-radius: 7px; background: rgba(255, 184, 92, 0.08); color: #efbd78; font-size: 11px; }
.marker-alarm-manager-copy > div span.is-alarm { background: rgba(255, 101, 116, 0.09); color: #ff8997; }
.marker-alarm-manager-toggle { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.marker-alarm-manager-toggle input { position: absolute; opacity: 0; }
.marker-alarm-manager-toggle span { position: relative; width: 35px; height: 20px; border-radius: 20px; background: #324852; }
.marker-alarm-manager-toggle span:after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #b5c6cc; transition: 0.18s; }
.marker-alarm-manager-toggle input:checked + span { background: #278e8a; }
.marker-alarm-manager-toggle input:checked + span:after { left: 18px; background: #eafffe; }
.marker-alarm-manager-toggle em { color: #92a8b1; font-size: 11px; font-style: normal; }
.marker-alarm-manager-edit, .marker-alarm-manager-delete {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 9px;
    background: transparent;
    color: #91aab4;
    cursor: pointer;
}
.marker-alarm-manager-edit:hover {
    border-color: rgba(85, 221, 216, 0.28);
    color: #55ddd8;
}
.marker-alarm-manager-delete { color: #e88792; }
.marker-alarm-manager-delete:hover {
    border-color: rgba(255, 101, 116, 0.35);
    background: rgba(255, 101, 116, 0.08);
}
.marker-alarm-manager-empty {
    display: flex;
    min-height: 168px;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 8px 22px 22px;
    padding: 24px 20px;
    border: 1px solid rgba(116, 172, 193, 0.1);
    border-radius: 16px;
    background: rgba(7, 24, 32, 0.55);
    color: #7f98a3;
}
.marker-alarm-manager-empty[hidden] { display: none; }
.marker-alarm-manager-empty-icon {
    display: grid;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    place-items: center;
    border-radius: 14px;
    background: rgba(85, 221, 216, 0.08);
    color: #55ddd8;
    font-size: 18px;
    line-height: 1;
}
.marker-alarm-manager-empty-icon > i {
    display: block;
    line-height: 1;
}
.marker-alarm-manager-empty strong,
.marker-alarm-manager-empty > div span { display: block; }
.marker-alarm-manager-empty strong {
    margin-bottom: 4px;
    color: #d5e8ee;
    font-size: 14px;
}
.marker-alarm-manager-empty span {
    max-width: 34ch;
    font-size: 12px;
    line-height: 1.45;
}
.marker-alarm-manager-stepper {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 22px 14px;
}
.marker-alarm-manager-stepper > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #6f8894;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.marker-alarm-manager-stepper > span i {
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: inherit;
    font-style: normal;
    font-size: 11px;
    font-weight: 800;
}
.marker-alarm-manager-stepper > span.is-active {
    color: #55ddd8;
}
.marker-alarm-manager-stepper > span.is-active i {
    background: rgba(85, 221, 216, 0.18);
}
.marker-alarm-manager-stepper-line {
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
}
.marker-alarm-manager-home {
    display: flex;
    min-height: 0;
    flex: 1;
    flex-direction: column;
}
.marker-alarm-manager-wizard {
    display: none;
    min-height: 0;
    flex: 1;
    flex-direction: column;
}
.marker-alarm-manager.is-wizard .marker-alarm-manager-home { display: none; }
.marker-alarm-manager.is-wizard .marker-alarm-manager-wizard { display: flex; }
.marker-alarm-manager.is-wizard .marker-alarm-manager-stepper > span:first-child {
    color: #6f8894;
}
.marker-alarm-manager.is-wizard .marker-alarm-manager-stepper > span:first-child i {
    background: rgba(255, 255, 255, 0.06);
}
.marker-alarm-manager.is-wizard .marker-alarm-manager-step-configure {
    color: #55ddd8;
}
.marker-alarm-manager.is-wizard .marker-alarm-manager-step-configure i {
    background: rgba(85, 221, 216, 0.18);
}
.marker-alarm-manager-wizard-host {
    display: flex;
    min-height: 0;
    flex: 1;
    flex-direction: column;
    overflow: hidden;
}
.marker-alarm-manager-dismiss {
    display: none;
}

/* Historia alarmów jednego parametru (dzwonek na karcie / wykresie). */
.marker-alarm-history {
    position: fixed;
    z-index: 12120;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
body.marker-alarm-history-open { overflow: hidden; }
.marker-alarm-history-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(1, 10, 15, 0.78);
    backdrop-filter: blur(7px);
}
.marker-alarm-history-window {
    position: relative;
    display: flex;
    width: min(640px, calc(100vw - 32px));
    max-height: min(820px, calc(100dvh - 32px));
    overflow: hidden;
    flex-direction: column;
    border: 1px solid rgba(111, 213, 211, 0.18);
    border-radius: 22px;
    background:
        radial-gradient(circle at 8% 0%, rgba(50, 211, 187, 0.12), transparent 36%),
        linear-gradient(165deg, #0a1c26, #06141c);
    color: #eaf8fb;
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.55);
}
.marker-alarm-history-header {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: start;
    gap: 14px;
    padding: 22px 22px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.marker-alarm-history-icon {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid rgba(85, 221, 216, 0.18);
    border-radius: 13px;
    background: rgba(85, 221, 216, 0.1);
    color: #55ddd8;
}
.marker-alarm-history-header span {
    color: #55ddd8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.marker-alarm-history-header h2 {
    margin: 4px 0 3px;
    color: #f2fbff;
    font-size: 20px;
    font-weight: 750;
    letter-spacing: -0.03em;
}
.marker-alarm-history-header p {
    margin: 0;
    color: #7f98a3;
    font-size: 12px;
}
.marker-alarm-history-close {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    background: transparent;
    color: #91aab4;
    cursor: pointer;
}
.marker-alarm-history-actions {
    display: flex;
    padding: 12px 22px 0;
}
.marker-alarm-history-edit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid rgba(85, 221, 216, 0.28);
    border-radius: 11px;
    background: rgba(85, 221, 216, 0.1);
    color: #55ddd8;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}
.marker-alarm-history-edit:hover,
.marker-alarm-history-edit:focus-visible {
    background: rgba(85, 221, 216, 0.18);
    outline: none;
}
.marker-alarm-history-list {
    display: grid;
    gap: 8px;
    min-height: 0;
    flex: 1;
    overflow: auto;
    padding: 14px 22px;
}
.marker-alarm-history-list.is-loading {
    min-height: 120px;
    opacity: 0.45;
}
.marker-alarm-history-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid rgba(116, 172, 193, 0.12);
    border-radius: 14px;
    background: rgba(9, 29, 38, 0.62);
}
.marker-alarm-history-row > i {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 999px;
    background: rgba(255, 184, 92, 0.11);
    color: #ffb85c;
}
.marker-alarm-history-row.is-alarm > i {
    background: rgba(255, 101, 116, 0.12);
    color: #ff6574;
}
.marker-alarm-history-row.is-resolved > i {
    background: rgba(88, 217, 154, 0.11);
    color: #58d99a;
}
.marker-alarm-history-event {
    display: grid;
    gap: 3px;
    min-width: 0;
}
.marker-alarm-history-event strong {
    display: block;
    color: #d9e9ed;
    font-size: 13px;
    line-height: 1.25;
}
.marker-alarm-history-event span {
    display: block;
    color: #829ca6;
    font-size: 11px;
    line-height: 1.3;
}
.marker-alarm-history-event small {
    display: block;
    color: #708b96;
    font-size: 11px;
    line-height: 1.3;
}
.marker-alarm-history-value {
    text-align: right;
}
.marker-alarm-history-value small {
    display: block;
    color: #708b96;
    font-size: 10px;
}
.marker-alarm-history-value strong {
    color: #eaf8fb;
    font-size: 13px;
}
.marker-alarm-history-empty {
    display: flex;
    min-height: 140px;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 0 22px 12px;
    padding: 22px 18px;
    border: 1px solid rgba(116, 172, 193, 0.1);
    border-radius: 16px;
    background: rgba(7, 24, 32, 0.55);
    color: #7f98a3;
}
.marker-alarm-history-empty[hidden] { display: none; }
.marker-alarm-history-empty-icon {
    display: grid;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    place-items: center;
    border-radius: 14px;
    background: rgba(85, 221, 216, 0.08);
    color: #55ddd8;
    font-size: 18px;
    line-height: 1;
}
.marker-alarm-history-empty-icon > i {
    display: block;
    line-height: 1;
}
.marker-alarm-history-empty strong,
.marker-alarm-history-empty > div span { display: block; }
.marker-alarm-history-empty strong {
    margin-bottom: 4px;
    color: #d5e8ee;
    font-size: 14px;
}
.marker-alarm-history-empty > div span {
    max-width: 34ch;
    font-size: 12px;
    line-height: 1.45;
}
.marker-alarm-history-dismiss {
    display: none;
}
@media (max-width: 700px) {
    .marker-alarm-history { align-items: end; padding: 0; }
    .marker-alarm-history-window {
        width: 100%;
        max-height: 94dvh;
        border-radius: 22px 22px 0 0;
    }
    .marker-alarm-history-header,
    .marker-alarm-history-actions { padding-left: 16px; padding-right: 16px; }
    .marker-alarm-history-list { padding: 12px 16px; }
    .marker-alarm-history-empty { margin: 0 16px 10px; }
    .marker-alarm-history-dismiss {
        display: flex;
        justify-content: center;
        padding: 10px 16px calc(14px + var(--safe-bottom, 0px));
        border-top: 1px solid rgba(255, 255, 255, 0.06);
    }
    .marker-alarm-history-back {
        display: inline-flex;
        width: 100%;
        max-width: 420px;
        min-height: 44px;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 0 16px;
        border: 1px solid rgba(116, 148, 168, 0.22);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.04);
        color: #d5e4ec;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
    }
}
html[data-theme="light"] .marker-alarm-history-backdrop {
    background: rgba(24, 48, 64, 0.42);
}
html[data-theme="light"] .marker-alarm-history-window {
    border-color: rgba(28, 73, 104, 0.12);
    background:
        radial-gradient(circle at 8% 0%, rgba(22, 163, 148, 0.08), transparent 36%),
        linear-gradient(165deg, #ffffff, #f3f7fa);
    color: #173241;
    box-shadow: 0 24px 70px rgba(23, 50, 65, 0.18);
}
html[data-theme="light"] .marker-alarm-history-header {
    border-bottom-color: rgba(28, 73, 104, 0.08);
}
html[data-theme="light"] .marker-alarm-history-icon {
    border-color: rgba(22, 163, 148, 0.18);
    background: rgba(22, 163, 148, 0.1);
    color: #12897c;
}
html[data-theme="light"] .marker-alarm-history-header span { color: #12897c; }
html[data-theme="light"] .marker-alarm-history-header h2 { color: #12222e; }
html[data-theme="light"] .marker-alarm-history-header p { color: #5b7584; }
html[data-theme="light"] .marker-alarm-history-close {
    border-color: rgba(28, 73, 104, 0.12);
    color: #607b8b;
}
html[data-theme="light"] .marker-alarm-history-edit {
    border-color: rgba(22, 163, 148, 0.28);
    background: rgba(22, 163, 148, 0.08);
    color: #12897c;
}
html[data-theme="light"] .marker-alarm-history-row {
    border-color: rgba(28, 73, 104, 0.1);
    background: #f7fafc;
}
html[data-theme="light"] .marker-alarm-history-event strong { color: #173241; }
html[data-theme="light"] .marker-alarm-history-event span,
html[data-theme="light"] .marker-alarm-history-event small,
html[data-theme="light"] .marker-alarm-history-value small { color: #607b8b; }
html[data-theme="light"] .marker-alarm-history-value strong { color: #173241; }
html[data-theme="light"] .marker-alarm-history-empty {
    background: #f7fafc;
    border-color: rgba(28, 73, 104, 0.1);
    color: #607b8b;
}
html[data-theme="light"] .marker-alarm-history-empty-icon {
    background: rgba(22, 163, 148, 0.1);
    color: #12897c;
}
html[data-theme="light"] .marker-alarm-history-empty strong { color: #173241; }
html[data-theme="light"] .marker-alarm-history-dismiss {
    border-top-color: rgba(28, 73, 104, 0.1);
}
html[data-theme="light"] .marker-alarm-history-back {
    border-color: rgba(28, 73, 104, 0.14);
    background: #ffffff;
    color: #173241;
}

.marker-alarm-threshold-embed {
    display: flex;
    min-height: 0;
    flex: 1;
    flex-direction: column;
    overflow: hidden;
}
.marker-alarm-threshold-embed .lobibox-body {
    min-height: 0;
    flex: 1;
    overflow: auto;
    padding: 0 18px 12px;
}
.marker-alarm-threshold-embed .lobibox-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 18px 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(6, 18, 26, 0.35);
}
.marker-alarm-threshold-embed .lobibox-footer .btn {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    border-radius: 11px;
    font-size: 12px;
    font-weight: 750;
    letter-spacing: 0.01em;
    line-height: 1;
    box-shadow: none;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, opacity 0.16s ease;
}
.marker-alarm-threshold-embed .lobibox-footer .btn i {
    font-size: 11px;
    line-height: 1;
}
.marker-alarm-threshold-embed .marker-alarm-wizard-back {
    margin-right: auto;
    border: 1px solid rgba(148, 190, 205, 0.22);
    background: rgba(255, 255, 255, 0.03);
    color: #b7ced6;
}
.marker-alarm-threshold-embed .marker-alarm-wizard-back:hover,
.marker-alarm-threshold-embed .marker-alarm-wizard-back:focus-visible {
    border-color: rgba(85, 221, 216, 0.35);
    background: rgba(85, 221, 216, 0.08);
    color: #dffaf7;
    outline: none;
}
.marker-alarm-threshold-embed .lobibox-footer .btn-danger {
    border: 1px solid rgba(237, 120, 139, 0.22);
    background: transparent;
    color: #e89aa6;
}
.marker-alarm-threshold-embed .lobibox-footer .btn-danger:hover,
.marker-alarm-threshold-embed .lobibox-footer .btn-danger:focus-visible {
    border-color: rgba(237, 120, 139, 0.4);
    background: rgba(237, 120, 139, 0.1);
    color: #f3b4bd;
    outline: none;
}
.marker-alarm-threshold-embed .lobibox-footer .btn-primary {
    border: 0;
    background: #73ded1;
    color: #083535;
}
.marker-alarm-threshold-embed .lobibox-footer .btn-primary:hover:not(:disabled),
.marker-alarm-threshold-embed .lobibox-footer .btn-primary:focus-visible:not(:disabled) {
    background: #86e7db;
    color: #062b2b;
    outline: none;
}
.marker-alarm-threshold-embed .lobibox-footer .btn-primary:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.marker-alarm-threshold-embed .threshold-studio { margin: 0; }
.marker-alarm-threshold-embed .threshold-workspace { gap: 14px; }
@media (max-width: 900px) {
    .marker-alarm-threshold-embed .threshold-workspace {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 700px) {
    .marker-alarm-manager { align-items: end; padding: 0; }
    .marker-alarm-manager-window { width: 100%; max-height: 94dvh; border-radius: 22px 22px 0 0; }
    .marker-alarm-manager-addbar {
        grid-template-columns: 1fr;
        margin: 14px 16px 0;
    }
    .marker-alarm-manager-add { width: 100%; }
    .marker-alarm-manager-list { padding: 12px 16px 8px; }
    .marker-alarm-manager-empty { margin: 8px 16px 18px; }
    .marker-alarm-manager-row { grid-template-columns: auto minmax(0, 1fr) auto; }
    .marker-alarm-manager-toggle { grid-column: 2; }
    .marker-alarm-manager-edit, .marker-alarm-manager-delete { grid-row: 1; }
    .marker-alarm-manager-edit { grid-column: 3; }
    .marker-alarm-manager-stepper { padding: 0 16px 12px; }
    .marker-alarm-manager-dismiss {
        display: flex;
        flex: 0 0 auto;
        justify-content: center;
        margin-top: auto;
        padding: 10px 16px calc(14px + var(--safe-bottom, 0px));
        border-top: 1px solid rgba(255, 255, 255, 0.06);
    }
    .marker-alarm-manager.is-wizard .marker-alarm-manager-dismiss { display: none; }
    .marker-alarm-manager-back {
        display: inline-flex;
        width: 100%;
        max-width: 420px;
        min-height: 44px;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 0 16px;
        border: 1px solid rgba(116, 148, 168, 0.22);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.04);
        color: #d5e4ec;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 0.01em;
        cursor: pointer;
    }
    .marker-alarm-manager-back:hover,
    .marker-alarm-manager-back:focus-visible {
        border-color: rgba(85, 221, 216, 0.35);
        background: rgba(85, 221, 216, 0.08);
        color: #eafffe;
        outline: none;
    }
    .marker-alarm-manager-back > i {
        font-size: 13px;
        opacity: 0.9;
    }
}
html[data-theme="light"] .marker-alarm-manager-backdrop {
    background: rgba(24, 48, 64, 0.42);
}
html[data-theme="light"] .marker-alarm-manager-window {
    background:
        radial-gradient(circle at 8% 0%, rgba(22, 163, 148, 0.1), transparent 36%),
        linear-gradient(165deg, #ffffff, #f3f7fa);
    color: #173241;
    border-color: rgba(28, 73, 104, 0.14);
    box-shadow: 0 28px 90px rgba(31, 55, 75, 0.22);
}
html[data-theme="light"] .marker-alarm-manager-header {
    border-bottom-color: rgba(28, 73, 104, 0.08);
}
html[data-theme="light"] .marker-alarm-manager-icon {
    border-color: rgba(22, 163, 148, 0.22);
    background: rgba(22, 163, 148, 0.1);
    color: #12897c;
}
html[data-theme="light"] .marker-alarm-manager-header span { color: #12897c; }
html[data-theme="light"] .marker-alarm-manager-header h2 { color: #12222e; }
html[data-theme="light"] .marker-alarm-manager-header p { color: #5b7584; }
html[data-theme="light"] .marker-alarm-manager-close {
    background: #ffffff;
    color: #365665;
    border-color: rgba(28, 73, 104, 0.14);
}
html[data-theme="light"] .marker-alarm-manager-close:hover {
    border-color: rgba(22, 163, 148, 0.35);
    background: rgba(22, 163, 148, 0.08);
    color: #0f6f65;
}
html[data-theme="light"] .marker-alarm-manager-addbar {
    background: #ffffff;
    border-color: rgba(28, 73, 104, 0.12);
    box-shadow: 0 8px 22px rgba(31, 55, 75, 0.05);
}
html[data-theme="light"] .marker-alarm-manager-field-label { color: #5b7584; }
html[data-theme="light"] .marker-alarm-manager-parameter {
    background: #f7fafc;
    color: #173241;
    border-color: rgba(28, 73, 104, 0.16);
}
html[data-theme="light"] .marker-alarm-manager-parameter:focus {
    border-color: rgba(22, 163, 148, 0.55);
    box-shadow: 0 0 0 3px rgba(22, 163, 148, 0.14);
}
html[data-theme="light"] .marker-alarm-manager-add {
    background: #16a394;
    color: #ffffff;
}
html[data-theme="light"] .marker-alarm-manager-add:not(:disabled):hover {
    background: #12897c;
}
html[data-theme="light"] .marker-alarm-manager-add:disabled {
    background: #e8eef2;
    color: #7a909c;
}
html[data-theme="light"] .marker-alarm-manager-row {
    background: #ffffff;
    border-color: rgba(28, 73, 104, 0.12);
}
html[data-theme="light"] .marker-alarm-manager-copy small,
html[data-theme="light"] .marker-alarm-manager-copy p,
html[data-theme="light"] .marker-alarm-manager-toggle em { color: #607b8b; }
html[data-theme="light"] .marker-alarm-manager-copy strong { color: #173241; }
html[data-theme="light"] .marker-alarm-manager-state {
    background: rgba(22, 163, 148, 0.1);
    color: #12897c;
}
html[data-theme="light"] .marker-alarm-manager-toggle span { background: #d5e0e6; }
html[data-theme="light"] .marker-alarm-manager-toggle span:after { background: #ffffff; }
html[data-theme="light"] .marker-alarm-manager-toggle input:checked + span { background: #16a394; }
html[data-theme="light"] .marker-alarm-manager-edit,
html[data-theme="light"] .marker-alarm-manager-delete {
    border-color: rgba(28, 73, 104, 0.14);
    color: #52697a;
}
html[data-theme="light"] .marker-alarm-manager-delete { color: #b44555; }
html[data-theme="light"] .marker-alarm-manager-empty {
    background: #f7fafc;
    border-color: rgba(28, 73, 104, 0.1);
    color: #607b8b;
}
html[data-theme="light"] .marker-alarm-manager-empty-icon {
    background: rgba(22, 163, 148, 0.1);
    color: #12897c;
}
html[data-theme="light"] .marker-alarm-manager-empty strong { color: #173241; }
html[data-theme="light"] .marker-alarm-manager-stepper > span { color: #7a929f; }
html[data-theme="light"] .marker-alarm-manager-stepper > span.is-active,
html[data-theme="light"] .marker-alarm-manager.is-wizard .marker-alarm-manager-step-configure { color: #12897c; }
html[data-theme="light"] .marker-alarm-manager-stepper > span.is-active i,
html[data-theme="light"] .marker-alarm-manager.is-wizard .marker-alarm-manager-step-configure i {
    background: rgba(22, 163, 148, 0.14);
}
html[data-theme="light"] .marker-alarm-manager-stepper-line { background: rgba(28, 73, 104, 0.1); }
html[data-theme="light"] .marker-alarm-threshold-embed .lobibox-footer {
    border-top-color: rgba(28, 73, 104, 0.1);
    background: rgba(239, 247, 249, 0.92);
}
html[data-theme="light"] .marker-alarm-threshold-embed .marker-alarm-wizard-back {
    border-color: rgba(28, 73, 104, 0.16);
    background: rgba(255, 255, 255, 0.88);
    color: #4f6d7a;
}
html[data-theme="light"] .marker-alarm-threshold-embed .marker-alarm-wizard-back:hover,
html[data-theme="light"] .marker-alarm-threshold-embed .marker-alarm-wizard-back:focus-visible {
    border-color: rgba(22, 163, 148, 0.35);
    background: #ffffff;
    color: #0f766e;
}
html[data-theme="light"] .marker-alarm-threshold-embed .lobibox-footer .btn-danger {
    border-color: transparent;
    background: transparent;
    color: #b44555;
}
html[data-theme="light"] .marker-alarm-threshold-embed .lobibox-footer .btn-danger:hover,
html[data-theme="light"] .marker-alarm-threshold-embed .lobibox-footer .btn-danger:focus-visible {
    border-color: rgba(180, 69, 85, 0.18);
    background: rgba(180, 69, 85, 0.06);
    color: #9b3344;
}
html[data-theme="light"] .marker-alarm-threshold-embed .lobibox-footer .btn-primary {
    background: #45ccc7;
    color: #062128;
}
html[data-theme="light"] .marker-alarm-threshold-embed .lobibox-footer .btn-primary:hover:not(:disabled),
html[data-theme="light"] .marker-alarm-threshold-embed .lobibox-footer .btn-primary:focus-visible:not(:disabled) {
    background: #5ad8d2;
    color: #041c20;
}
html[data-theme="light"] .marker-alarm-manager-dismiss {
    border-top-color: rgba(28, 73, 104, 0.1);
}
html[data-theme="light"] .marker-alarm-manager-back {
    border-color: rgba(28, 73, 104, 0.14);
    background: #ffffff;
    color: #173241;
    box-shadow: 0 1px 2px rgba(23, 50, 65, 0.06);
}
html[data-theme="light"] .marker-alarm-manager-back:hover,
html[data-theme="light"] .marker-alarm-manager-back:focus-visible {
    border-color: rgba(22, 163, 148, 0.35);
    background: rgba(22, 163, 148, 0.06);
    color: #0f766e;
}

/* On phones the live status shares the mode row, freeing the point title. */
@media (max-width: 767px) {
    .select-tile-contener .marker-mode-toolbar {
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 6px;
    }
    .select-tile-contener .marker-mode-toolbar > .marker-water-hero-live {
        flex: 0 0 auto;
        flex-direction: row;
        height: 33px;
        box-sizing: border-box;
        gap: 5px;
        min-width: 0;
        padding: 3px 8px;
        margin: 0;
        white-space: nowrap;
        letter-spacing: 0;
    }
    .select-tile-contener .marker-mode-toolbar > .marker-water-hero-live > span {
        gap: 4px;
        font-size: 9px;
    }
    .select-tile-contener .marker-mode-toolbar > .marker-water-hero-live > small {
        font-size: 9px;
    }
    .select-tile-contener .marker-mode-toolbar > .marker-water-hero-live > small::before {
        content: "·";
        margin-right: 5px;
    }
    .select-tile-contener .marker-mode-toolbar > .marker-mode-switch {
        flex: 0 0 auto;
    }
    .select-tile-contener .marker-water-hero-header:not(:has(.marker-water-hero-live)) {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 380px) {
    .select-tile-contener .marker-mode-toolbar .marker-mode-button {
        padding-inline: 3px;
        gap: 3px;
        font-size: 9px;
    }
    .select-tile-contener .marker-mode-toolbar .marker-mode-switch {
        height: 33px;
        box-sizing: border-box;
    }
    .select-tile-contener .marker-mode-toolbar .marker-mode-button i {
        font-size: 8px;
    }
}

/* Attribution shares the WQI min/max row and stays at its right edge. */
.select-tile-contener .device-identity-brand-name[href] {
    color: inherit;
    text-decoration: none;
}
.select-tile-contener .device-identity-brand-name[href]:is(:hover, :focus-visible) {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.select-tile-contener .marker-water-hero-widget .marker-water-hero-card .marker-water-hero-history,
.select-tile-contener .marker-water-hero-widget .marker-water-hero-card .marker-water-hero-history * {
    cursor: pointer;
}

.select-tile-contener .marker-water-hero-widget .marker-water-hero-score-range .marker-water-hero-range-unit {
    color: inherit;
    font-size: .75em;
    line-height: inherit;
}

.select-tile-contener .marker-water-hero-footer {
    justify-content: center;
    gap: 8px;
    min-height: 21px;
    padding: 8px 0 4px;
}
.select-tile-contener .marker-water-hero-brand {
    --marker-brand-accent: var(--wqi-color, #52cbed);
    margin-left: 0;
    gap: 3px;
    font-family: var(--wl-font-sans, "Geist", "Segoe UI", Arial, sans-serif);
    white-space: nowrap;
    letter-spacing: 0;
    font-size: 8px;
    cursor: default;
    user-select: none;
}
.select-tile-contener .marker-water-hero-brand > strong,
.select-tile-contener .marker-water-hero-brand > a,
.select-tile-contener .marker-water-hero-brand > small {
    font-size: inherit;
    line-height: 1.2;
}
.select-tile-contener .marker-brand-ly,
.select-tile-contener .marker-water-hero-brand > a {
    color: var(--marker-brand-accent);
}
.select-tile-contener .marker-water-hero-brand > a {
    cursor: pointer;
    user-select: text;
}


/* Absolute water elevation with its relative measurement and sea-level datum. */
.select-tile-contener .marker-main-contener .marker-depth-elevation .marker-water-depth-body { display: grid; gap: 8px; padding: 0 10px 10px; min-width: 0; }
.select-tile-contener .marker-main-contener .marker-depth-elevation .marker-water-depth-primary { position: static; display: block; padding: 0; }
.select-tile-contener .marker-main-contener .marker-depth-elevation .marker-water-depth-primary > strong { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; font-size: clamp(26px, 6vw, 40px); line-height: 1.15; letter-spacing: -1px; color: #e5fbff; }
.select-tile-contener .marker-main-contener .marker-depth-elevation .marker-reading-unit { font-size: 14px; color: #a4d7e7; letter-spacing: 0; }
.marker-depth-relative { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; color: #a4c5d2; }
.marker-depth-relative small { font-size: 12px; }
.marker-depth-relative strong { font-size: 18px; color: #cee8f0; }
.marker-depth-relative em { margin-left: 5px; font-size: 12px; font-style: normal; }
.depth-landscape { position: relative; height: 158px; }
.depth-landscape svg { width: 100%; height: 150px; overflow: visible; }
.depth-landscape-terrain { fill: #3b637d38; stroke: #7796a780; stroke-width: 1; }
.depth-landscape-water { fill: #27bed34d; }
.depth-landscape-surface { stroke: #63d4e3; stroke-width: 1.5; }
.depth-landscape-sensor { fill: #c7f3fb; }
.depth-landscape-relative, .depth-landscape-height, .depth-landscape-caps { stroke: #a5c5d1; stroke-width: 1; fill: none; }
.depth-landscape-sea { stroke: #89a6b5; stroke-width: 1; stroke-dasharray: 4 4; }
.depth-landscape-sea-label { position: absolute; left: 2px; bottom: 0; color: #abc5d2; font-size: 11px; }
.depth-landscape-reference-label { position: absolute; left: 0; right: 22px; top: 107px; color: #abc5d2; font-size: 11px; text-align: center; }
.depth-landscape-reference-label b { font-weight: 500; }
.is-below-sea .depth-landscape-sea-label { bottom: auto; top: 7px; }
.is-below-sea .depth-landscape-reference-label { top: 137px; }
.select-tile-contener .marker-main-contener .marker-depth-elevation .marker-water-depth-stats { position: static; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; }
.marker-depth-elevation .marker-water-depth-stats strong { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; font-size: 16px; }
.marker-depth-elevation .marker-water-depth-stats em { font-size: 11px; font-style: normal; }
.depth-landscape-caption { color: #89a6b5; font-size: 11px; text-align: right; }
html[data-theme="light"] .select-tile-contener .marker-main-contener .marker-depth-elevation .marker-water-depth-primary > strong { color: #123e52; }
html[data-theme="light"] .select-tile-contener .marker-main-contener .marker-depth-elevation .marker-reading-unit, html[data-theme="light"] .marker-depth-relative, html[data-theme="light"] .depth-landscape-reference-label, html[data-theme="light"] .depth-landscape-sea-label, html[data-theme="light"] .depth-landscape-caption { color: #476b7c; }
html[data-theme="light"] .marker-depth-relative strong { color: #245366; }
html[data-theme="light"] .depth-landscape-terrain { fill: #698a9d21; stroke: #57778799; }
html[data-theme="light"] .depth-landscape-sensor { fill: #12617b; }
html[data-theme="light"] .depth-landscape-height, html[data-theme="light"] .depth-landscape-relative, html[data-theme="light"] .depth-landscape-caps { stroke: #507585; }
@media (prefers-reduced-motion: no-preference) { .depth-landscape-water { transition: d 650ms ease; } .depth-landscape-surface, .depth-landscape-height { transition: y1 650ms ease, y2 650ms ease; } }

/* Waterly typography roles. */
.marker-water-temperature-value, .marker-water-oxygen-value, .marker-water-ph-value, .marker-water-orp-reading, .marker-water-ec-info-value, .marker-depth-value, .mineral-dual-reading, .mineral-conductivity-reading, .marker-atmosphere-minimal-value, .marker-compact-sensor-metric strong, .marker-reading-unit { font-family: var(--wl-font-mono); font-variant-numeric: tabular-nums; }


/* features/management/organic-water-surface.css */
.marker-water-organic-card.is-water-surface { cursor: pointer; container-type: inline-size; }
.marker-organic-chart-title { padding: 0; border: 0; color: inherit; background: transparent; font: inherit; text-align: inherit; cursor: pointer; }
.marker-organic-chart-title:focus-visible,
.marker-water-organic-card.is-water-surface:focus-visible { outline: 2px solid #a78bfa; outline-offset: 2px; }
.organic-surface-body { display: grid; grid-template-columns: minmax(100px, 168px) minmax(260px, 1fr); align-items: center; gap: 16px; padding: 8px 10px 16px; }
.organic-surface-scene { display: block; min-width: 0; }
.organic-water-surface { display: block; overflow: hidden; border-radius: 12px; }
.organic-water-scene { display: block; width: 100%; height: auto; }
.organic-water-ripples { fill: none; stroke: #c5eff7; stroke-width: 2; opacity: .18; }
.organic-water-matter { fill: none; stroke: #d4b57a; stroke-width: 3; opacity: calc(var(--surface-level) * .65); }
.organic-water-fluorescence { fill: none; stroke: #b9f0ff; stroke-width: 2; opacity: calc(var(--surface-level) * .9); filter: drop-shadow(0 0 3px #58bfff); }
.organic-water-lens { fill: none; stroke: #c4a9ff; stroke-width: 1.5; }
.organic-water-uv { fill: #e4d8ff; font-size: 9px; font-weight: 700; letter-spacing: 2px; }
.organic-surface-readings { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.organic-surface-metric { display: flex; min-width: 0; flex-direction: column; color: #b9a3ef; }
.organic-surface-metric.is-cmos { color: #74c7f6; }
.organic-surface-name { color: inherit; font-size: 10px; font-weight: 600; line-height: 1.3; }
.organic-surface-value { display: flex; gap: 5px; align-items: baseline; margin: 2px 0 7px; }
.organic-surface-value > strong { min-width: 0; color: #fff; font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -1px; line-height: 1; font-family: var(--wl-font-mono); }
.organic-surface-value > small { font-size: 12px; font-weight: 700; }
.organic-water-scale { position: relative; display: flex; gap: 2px; height: 9px; overflow: visible; border-radius: 2px; background: none; }
.organic-water-scale > i { position: absolute; top: -3px; width: 3px; height: 15px; border-radius: 2px; background: #effaff; box-shadow: 0 0 0 1px #123240; transform: translateX(-50%); transition: left 480ms cubic-bezier(.33, 1, .68, 1); }
.organic-water-scale-labels { position: relative; display: block; height: 24px; margin-top: 7px; color: #9ab5c3; font-size: 8px; line-height: 1.2; white-space: nowrap; }
html[data-theme="light"] .organic-water-scale-labels { color: #4e6979; }
html[data-theme="light"] .organic-surface-value > strong { color: #173241; }
html[data-theme="light"] .organic-surface-metric { color: #7856b2; }
html[data-theme="light"] .organic-surface-metric.is-cmos { color: #2675a3; }
html[data-theme="light"] .organic-surface-name { color: inherit !important; }
.organic-surface-reading-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; margin: 3px 0 9px; }
.organic-surface-reading-row .organic-surface-value { flex: 0 0 auto; align-items: last baseline; margin: 0; }
.organic-surface-reading-row > .organic-surface-status { flex: 0 0 auto; align-self: center; gap: 4px; margin: 0; padding: 4px 6px; font-size: 8px; white-space: nowrap; }
.select-tile-contener .marker-main-contener .organic-surface-reading-row .marker-reading-unit-stack { display: inline-grid; gap: 4px; align-self: last baseline; min-width: 0; margin: 0; }
.select-tile-contener .marker-main-contener .organic-surface-reading-row .marker-reading-trend { position: static; width: max-content; }
.select-tile-contener .marker-main-contener .organic-surface-reading-row .marker-reading-unit { color: #fff; font-size: 12px; }
html[data-theme="light"] .select-tile-contener .marker-main-contener .organic-surface-reading-row .marker-reading-unit { color: #173241 !important; }
@container (max-width: 330px) {
    .organic-surface-body { grid-template-columns: clamp(98px, 36cqw, 122px) minmax(0, 1fr); gap: 10px; padding-inline: 6px; }
    .organic-surface-value > strong { font-size: 28px; }
    .organic-water-scale-labels { font-size: 7px; }
}
@container (max-width: 280px) {
    .organic-water-scale-labels > :is(:nth-child(2), :nth-child(4)):not(:last-child) { display: none; }
}
@container (max-width: 400px) {
    .organic-surface-body { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .organic-surface-scene { width: 140px; max-width: 100%; justify-self: center; }
}
.organic-uv-window { --organic-flow-state: paused; overflow: visible; border-radius: 0; }
.organic-uv-window.is-motion-visible { --organic-flow-state: running; }
.organic-uv-window .organic-uv-flow { animation: waterly-organic-uv-flow 12s linear infinite; animation-play-state: var(--organic-flow-state); }
.organic-uv-rim { fill: rgba(139, 92, 246, .06); stroke: rgba(167, 139, 250, .18); stroke-width: 2; }
.organic-uv-shine { fill: none; stroke: rgba(221, 215, 255, .32); stroke-width: 2; stroke-linecap: round; }
.organic-uv-wavelength { display: block; margin-bottom: 5px; color: #c9b1f9; font-size: 10px; font-weight: 700; line-height: 1.2; text-align: center; }
html[data-theme="light"] .organic-uv-wavelength { color: #7856b2; }
.organic-uv-window .organic-water-lens { stroke: #b9a0f4; stroke-width: 1.5; }
.organic-uv-window [data-uv-water-color],
.organic-uv-window [data-inflow-water-color] { transition: stop-color 480ms ease-out; }
.organic-uv-inflow { --organic-cmos-color: #624b31; --organic-oil-stroke: rgba(220, 235, 225, .35); }
.organic-uv-cmos { fill: none; stroke: var(--organic-cmos-color, #83ceff); stroke-width: 2.4; stroke-linecap: round; }
.organic-uv-oil { fill: var(--organic-oil-fill); stroke: var(--organic-oil-stroke, #dcc0ff); stroke-width: .5; }
.organic-uv-oil-patch { transform-origin: 0 0; transition: transform 480ms cubic-bezier(.33, 1, .68, 1); }
.organic-uv-cmos,
.organic-uv-oil { transition: opacity 480ms ease-out; }
.marker-main-contener.is-compact-mode .organic-uv-window,
.marker-group.is-collapsed .organic-uv-window,
.marker-water-organic-card.is-stale .organic-uv-window,
body:has(.waterly-chart-lab-v2, .marker-wqi-guide.is-open) .organic-uv-window { --organic-flow-state: paused; }
@keyframes waterly-organic-uv-flow { from { transform: translateX(0); } to { transform: translateX(-144px); } }
@media (prefers-reduced-motion: reduce) {
    .organic-uv-window .organic-uv-flow { animation: none; }
    .organic-water-scale > i,
    .organic-uv-window [data-uv-water-color],
    .organic-uv-window [data-inflow-water-color],
    .organic-uv-cmos,
    .organic-uv-oil,
    .organic-uv-oil-patch { transition: none; }
}

/* The tutorial moves a repeating water field beneath a fixed UV observation lens. */
.marker-uvf-water-demo { --flow-play-state: paused; width: 100%; margin: 0; }
.marker-uvf-water-demo > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.marker-uvf-water-demo > header strong { color: #c9e0e8; font-size: 11px; }
.marker-uvf-motion-toggle { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid rgba(196, 169, 255, .28); border-radius: 10px; color: #d6c4ff; background: rgba(139, 92, 246, .09); font-size: 11px; cursor: pointer; }
.marker-uvf-motion-toggle:focus-visible { outline: 2px solid #a78bfa; outline-offset: 2px; }
.marker-uvf-water-demo figcaption { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 12px; color: #9dbac6; font-size: 10px; line-height: 1.4; }
.marker-uvf-water-demo figcaption > span { display: inline-flex; align-items: center; gap: 6px; }
.marker-uvf-water-demo figcaption i { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: #aa9163; }
.marker-uvf-water-demo .is-oil i { background: conic-gradient(#d8a4ef, #81d5c0, #f5d98b, #d8a4ef); }
.marker-uvf-water-demo .is-uv i { background: #be98f5; }
.marker-uvf-water-demo .organic-water-flow-track { animation: waterly-organic-water-flow 14s linear infinite; animation-play-state: var(--flow-play-state); }
.marker-uvf-water-demo .organic-water-lens { animation: waterly-organic-uv-glow 3s ease-in-out infinite; animation-play-state: var(--flow-play-state); }
.marker-wqi-guide.is-open .marker-waterly-guide-lesson-view[aria-hidden="false"] .marker-wqi-guide-panel.is-active .marker-uvf-water-demo:not(.is-paused) { --flow-play-state: running; }
@keyframes waterly-organic-water-flow { from { transform: translateX(0); } to { transform: translateX(-360px); } }
@keyframes waterly-organic-uv-glow { 0%, 100% { stroke-opacity: .65; } 50% { stroke-opacity: 1; filter: drop-shadow(0 0 3px #b39cff); } }
html[data-theme="light"] .marker-uvf-water-demo > header strong { color: #254857; }
html[data-theme="light"] .marker-uvf-water-demo figcaption { color: #4e6979; }
html[data-theme="light"] .marker-uvf-motion-toggle { color: #7856b2; border-color: rgba(120, 86, 178, .25); }
@media (prefers-reduced-motion: reduce) {
    .marker-uvf-water-demo .organic-water-flow-track,
    .marker-uvf-water-demo .organic-water-lens { animation: none; }
    .marker-uvf-motion-toggle { display: none; }
}

/* Reference bands are shared by the live widget and tutorial readings. */
.organic-surface-status { display: inline-flex; align-items: center; align-self: start; gap: 5px; max-width: 100%; margin: 0 0 8px; padding: 4px 7px; border: 1px solid var(--organic-status-color); border-radius: 12px; color: var(--organic-status-color); font-size: 9px; font-weight: 800; line-height: 1.3; text-align: left; }
.organic-surface-status > i { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: currentColor; }

.organic-water-scale > b { min-width: 0; flex: 1; border-radius: 1px; }

.organic-water-scale > i[hidden] { display: none; }
.organic-guide-scale { width: 100%; }
.organic-guide-scale > p { margin: 14px 0 0; color: #9dbac6; font-size: 11px; line-height: 1.5; }
.organic-guide-scale.marker-param-scale article { grid-template-columns: minmax(0, 1.4fr) minmax(24px, .6fr) 72px; }
.organic-guide-scale.marker-param-scale article small { white-space: normal; }
.organic-guide-legend { width: 100%; text-align: center; }
.organic-guide-legend .organic-uv-window { width: 190px; max-width: 100%; margin: 0 auto 15px; }
.organic-guide-legend p { margin: 5px 0; color: #9dbac6; font-size: 11px; }
.organic-simulator { container-type: inline-size; min-width: 0; color: #c9e0e8; }
.organic-simulator > header > span { display: flex; flex-direction: column; gap: 4px; }
.organic-simulator > header small { color: #9dbac6; font-size: 10px; }
.organic-sim-scenarios { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.organic-sim-scenarios button { padding: 7px 9px; border: 1px solid #476674; border-radius: 14px; color: inherit; background: transparent; font-size: 11px; font-weight: 600; cursor: pointer; }
.organic-sim-scenarios button[aria-pressed="true"] { border-color: #b598ed; background: rgba(163, 130, 236, .15); }
.organic-sim-parameters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; padding: 12px; border: 1px solid #355360; border-radius: 12px; }
.organic-sim-parameters > strong { grid-column: 1 / -1; font-size: 10px; }
.organic-simulator label { display: flex; min-width: 0; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; }
.organic-simulator input[type="range"] { display: block; width: 100%; min-width: 0; height: 24px; accent-color: #b598ed; cursor: pointer; }
.organic-simulator input[type="checkbox"] { width: 15px; height: 15px; margin: 0; accent-color: #a58ade; }
.organic-simulator output { color: #c9b1f9; font-size: 11px; font-variant-numeric: tabular-nums; font-family: var(--wl-font-mono); }
.organic-simulator :is(button, input):focus-visible { outline: 2px solid #b598ed; outline-offset: 3px; }
.organic-sim-wavelength { margin: 14px 0 6px; color: #c9b1f9; font-size: 10px; font-weight: 700; text-align: center; }
.organic-sim-scene { overflow: hidden; border-radius: 12px; cursor: crosshair; touch-action: pan-y; }
.organic-sim-water { display: block; width: 100%; height: auto; min-height: 110px; }
.organic-sim-rim { fill: none; stroke: #bba0ef; stroke-opacity: .3; stroke-width: 2; }
.organic-sim-axis { display: flex; justify-content: space-between; margin: 5px 0 14px; color: #9dbac6; font-size: 9px; }
.organic-sim-time { margin-bottom: 6px; }
.organic-sim-hint { margin: 6px 0 16px; color: #9dbac6; font-size: 11px; line-height: 1.5; }
.organic-sim-readings { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.organic-sim-reading .organic-surface-value > strong { font-size: 26px; min-width: 0; }
.organic-sim-extrema { margin-top: 10px; color: #9dbac6; font-size: 9px; line-height: 1.5; }
.organic-sim-options { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 15px; }
.organic-sim-options label { justify-content: start; font-size: 10px; }
.organic-simulator.is-stale { --flow-play-state: paused !important; }
.organic-simulator.is-stale .organic-sim-scene { opacity: .55; }
.marker-uvf-water-demo .organic-sim-water .organic-water-flow-track { animation-name: waterly-organic-sim-ripples; }
@keyframes waterly-organic-sim-ripples { to { transform: translateX(-520px); } }
.marker-waterly-guide-lesson-view[data-guide-lesson-view="uv_fluorescence"] .marker-wqi-guide-panel:has(.organic-simulator) { grid-template-columns: 1fr; grid-template-rows: max-content max-content; align-content: start; gap: 18px; }
.marker-wqi-guide-panel:has(.organic-simulator) .marker-wqi-guide-visual { padding: 16px; }
.marker-waterly-guide-lesson-view[data-guide-lesson-view="uv_fluorescence"] .marker-wqi-guide-panels { min-height: 0; }
.marker-waterly-guide-lesson-view[data-guide-lesson-view="uv_fluorescence"] .marker-wqi-guide-panel { display: none; overflow: auto; overscroll-behavior: contain; }
.marker-waterly-guide-lesson-view[data-guide-lesson-view="uv_fluorescence"] .marker-wqi-guide-panel.is-active { display: grid; }
@container (max-width: 340px) {
    .organic-sim-parameters { grid-template-columns: 1fr; }
    .organic-sim-readings { grid-template-columns: 1fr; }
}
html[data-theme="light"] :is(.organic-simulator, .organic-guide-legend) { color: #254857; }
html[data-theme="light"] :is(.organic-sim-hint, .organic-sim-axis, .organic-sim-extrema, .organic-guide-legend p, .organic-guide-scale > p, .organic-simulator > header small) { color: #4e6979; }
html[data-theme="light"] :is(.organic-sim-wavelength, .organic-simulator output) { color: #7856b2; }
html[data-theme="light"] .organic-surface-status { color: #254857; background: color-mix(in srgb, var(--organic-status-color) 12%, transparent); }
html[data-theme="light"] .organic-surface-status > i { background: var(--organic-status-color); }
@media (prefers-reduced-motion: reduce) { .organic-water-scale > i { transition: none; } }

.organic-water-scale-labels > span { position: absolute; transform: translateX(-50%); }
.organic-water-scale-labels > span:first-child { transform: none; }
.organic-water-scale-labels > span:last-child { transform: translateX(-100%); }
.organic-water-scale-labels > span:nth-last-child(2) { top: 10px; }
.organic-guide-scale.marker-param-scale article span i { background: var(--band-color); box-shadow: none; }
.organic-guide-sources a { color: inherit; text-decoration: underline; }
@media (max-width: 767px) { .marker-waterly-guide-lesson-view[data-guide-lesson-view="uv_fluorescence"] .marker-wqi-guide-panel { grid-template-rows: max-content max-content; align-content: start; } }
.marker-wqi-guide-panel:has(.organic-simulator) .marker-wqi-guide-visual { container: organic-tutorial / inline-size; }
@container organic-tutorial (min-width: 700px) {
    .organic-simulator { display: grid; grid-template-columns: 220px minmax(0, 1fr); column-gap: 24px; max-width: 1040px; margin-inline: auto; }
    .organic-simulator > header { grid-column: 1 / -1; grid-row: 1; }
    .organic-sim-scenarios { grid-column: 1; grid-row: 2 / 4; align-content: start; }
    .organic-sim-parameters { grid-column: 1; grid-row: 4 / 7; grid-template-columns: 1fr; align-content: start; }
    .organic-sim-options { grid-column: 1; grid-row: 7 / 9; align-content: start; align-self: start; }
    .organic-sim-wavelength { grid-column: 2; grid-row: 2; margin-top: 0; }
    .organic-sim-scene { grid-column: 2; grid-row: 3; }
    .organic-sim-axis { grid-column: 2; grid-row: 4; }
    .organic-sim-time { grid-column: 2; grid-row: 5; }
    .organic-sim-hint { grid-column: 2; grid-row: 6; }
    .organic-sim-readings { grid-column: 2; grid-row: 7; }
    .organic-simulator figcaption { grid-column: 2; grid-row: 8; }
}
html[data-theme="light"] .organic-guide-scale :is(header strong, article small, article b) { color: #254857; }
html[data-theme="light"] .organic-guide-scale header small { color: #4e6979; }


/* features/management/organic-uv.css */
/* Compact live readings; the full optical explanation belongs to the guide. */
.select-tile-contener .marker-main-contener:not(.is-compact-mode) .marker-water-organic-card.uv-reading-card { display: block; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.uv-reading-card { color: #eaf5fb; }
.uv-reading-card .marker-water-organic-title > i { color: var(--uv-accent); }
.uv-reading-card .marker-water-organic-title strong { color: var(--uv-accent); }
.uv-reading-method { flex: none; margin-left: auto; border: 1px solid color-mix(in srgb, var(--uv-accent) 50%, transparent); border-radius: 6px; padding: 2px 6px; color: var(--uv-accent); font-size: 8px; line-height: 1.4; white-space: nowrap; }
.is-derived .uv-reading-method { border-style: dashed; }
.uv-reading-body { display: grid; gap: 8px; padding: 4px 12px 15px 34px; }
.uv-reading-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.uv-reading-number { display: flex; align-items: last baseline; gap: 5px; min-width: 0; }
.uv-reading-number > strong { color: #fff; font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -.7px; font-variant-numeric: tabular-nums; font-family: var(--wl-font-mono); }
.uv-approx { align-self: center; color: var(--uv-accent); font-size: 18px; }
.select-tile-contener .marker-main-contener .uv-reading-number .marker-reading-unit-stack { position: static; display: inline-grid; align-self: last baseline; gap: 4px; min-width: 0; margin: 0; }
.select-tile-contener .marker-main-contener .uv-reading-number .marker-reading-trend { position: static; width: max-content; }
.select-tile-contener .marker-main-contener .uv-reading-number .marker-reading-unit { color: #fff; font-size: 12px; }
.uv-reading-freshness:empty { display: none; }
.uv-reading-extrema { display: flex; flex-wrap: wrap; gap: 14px; color: #98b7c8; font-size: 10px; }
.uv-reading-extrema > span { display: inline-flex; align-items: center; gap: 4px; }
.uv-reading-absorption { display: grid; gap: 7px; }
.uv-absorption-status { justify-self: end; color: var(--uv-status); font-size: 9px; font-weight: 700; }
.uv-scale-labels { display: flex; justify-content: space-between; color: #98b7c8; font-size: 8px; }
.uv-cuvette { display: block; width: 100%; height: auto; max-height: 170px; overflow: visible; }
.uv-cuvette text { fill: currentColor; font-size: 10px; }
.uv-tutorial-demo { --uv-text: #d9edf6; --uv-muted: #9dbac6; --uv-panel: #0d202a; --uv-line: #35515f; color: var(--uv-text); display: grid; gap: 14px; width: 100%; min-width: 0; container: uv-demo / inline-size; }
.uv-tutorial-demo > header { display: grid; gap: 4px; }
.uv-tutorial-demo > header strong { color: var(--uv-text); font-size: 16px; }
.uv-tutorial-demo small { color: var(--uv-muted); }
.uv-demo-scenarios, .uv-demo-cal-choices { display: flex; flex-wrap: wrap; gap: 6px; }
.uv-tutorial-demo button { padding: 7px 9px; border: 1px solid var(--uv-line); border-radius: 12px; color: var(--uv-text); background: transparent; font: inherit; font-size: 11px; cursor: pointer; }
.uv-tutorial-demo button:is([aria-pressed="true"], [aria-selected="true"]) { border-color: #b9a3ef; background: rgba(163, 130, 236, .16); }
.uv-tutorial-demo :is(button, input):focus-visible { outline: 2px solid #b9a3ef; outline-offset: 3px; }
.uv-demo-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; background: var(--uv-panel); border-radius: 12px; }
.uv-demo-tabs button { border-radius: 8px; padding: 8px 4px; font-size: 10px; }
.uv-demo-controls { grid-row: 5; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; padding: 12px; border: 1px solid var(--uv-line); border-radius: 12px; }
.uv-tutorial-demo label { display: flex; flex-wrap: wrap; gap: 5px; justify-content: space-between; align-items: center; min-width: 0; color: var(--uv-text); font-size: 11px; }
.uv-tutorial-demo input[type="range"] { display: block; width: 100%; min-width: 0; height: 24px; accent-color: #b9a3ef; cursor: pointer; }
.uv-tutorial-demo output { color: #c9b1f9; font-variant-numeric: tabular-nums; font-family: var(--wl-font-mono); }
.uv-demo-controls fieldset { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 8px 0 0; border: 0; }
.uv-demo-controls legend { float: none; font-size: 10px; color: var(--uv-muted); margin: 0 0 6px; padding: 0; }
.uv-tutorial-demo .uv-demo-check { grid-column: 1 / -1; justify-content: start; }
.uv-demo-check input { accent-color: #b9a3ef; margin: 0; width: 15px; height: 15px; }
.uv-demo-panel { grid-row: 4; min-width: 0; padding: 12px; background: var(--uv-panel); border: 1px solid var(--uv-line); border-radius: 12px; }
.uv-demo-panel[hidden] { display: none; }
.uv-demo-chart svg { display: block; width: 100%; max-width: 420px; height: auto; margin: auto; }
.uv-demo-chart text { fill: currentColor; font-size: 10px; }
.uv-demo-readings { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.uv-demo-readings article { display: grid; align-content: start; gap: 8px; padding: 12px; border: 1px solid var(--uv-accent); border-radius: 12px; min-width: 0; }
.uv-demo-readings article:not(:first-child) { border-style: dashed; }
.uv-demo-readings header { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; justify-content: space-between; color: var(--uv-accent); }
.uv-demo-readings header span { font-size: 9px; }
.uv-demo-readings strong { display: flex; flex-wrap: wrap; gap: 5px; align-items: baseline; color: var(--uv-text); font-size: 24px; line-height: 1.2; }
.uv-demo-readings strong small { color: inherit; font-size: 11px; }
.uv-tutorial-demo p, .uv-concept p, .uv-guide-scale > p { margin: 0; color: var(--uv-muted, #9dbac6); font-size: 11px; line-height: 1.6; }
.uv-demo-caveat { padding-left: 10px; border-left: 3px solid #b9a3ef; }
.uv-demo-sources { display: flex; flex-wrap: wrap; gap: 12px; font-size: 10px; }
.uv-demo-sources a { color: inherit; text-decoration: underline; }
.uv-concept { display: grid; justify-items: center; gap: 20px; padding: 20px; width: 100%; color: #d9edf6; text-align: center; }
.uv-concept > span { display: grid; place-content: center; padding: 20px; min-width: 100px; min-height: 100px; border-radius: 50%; border: 1px solid #b9a3ef; background: radial-gradient(circle at 35% 30%, #59428c, #0d202a); font-size: 20px; font-weight: 800; }
.uv-concept > span, .uv-concept > strong { max-width: 100%; overflow-wrap: anywhere; }
.uv-concept h3 { font-size: 18px; }
.uv-concept > strong { color: #c9b1f9; font-size: clamp(16px, 3vw, 26px); }
.marker-waterly-guide-lesson-view:is([data-guide-lesson-view="organic_uv"], [data-guide-lesson-view="bzt"], [data-guide-lesson-view="owo"]) .marker-wqi-guide-panels { min-height: 0; }
.marker-waterly-guide-lesson-view:is([data-guide-lesson-view="organic_uv"], [data-guide-lesson-view="bzt"], [data-guide-lesson-view="owo"]) .marker-wqi-guide-panel { display: none; overflow: auto; overscroll-behavior: contain; }
.marker-waterly-guide-lesson-view:is([data-guide-lesson-view="organic_uv"], [data-guide-lesson-view="bzt"], [data-guide-lesson-view="owo"]) .marker-wqi-guide-panel.is-active { display: grid; }
.marker-wqi-guide-panel:has(.uv-tutorial-demo) { grid-template-columns: 1fr; grid-template-rows: max-content max-content; align-content: start; }
.marker-wqi-guide-panel:has(.uv-tutorial-demo) .marker-wqi-guide-visual { padding: 16px; container: uv-tutorial / inline-size; }
@media (max-width: 767px) {
    .marker-waterly-guide-lesson-view:is([data-guide-lesson-view="organic_uv"], [data-guide-lesson-view="bzt"], [data-guide-lesson-view="owo"]) .marker-wqi-guide-panel { grid-template-rows: max-content max-content; align-content: start; }
}
@container uv-demo (max-width: 340px) {
    .uv-demo-controls, .uv-demo-controls fieldset, .uv-demo-readings { grid-template-columns: 1fr; }
}
@container uv-tutorial (min-width: 720px) {
    .uv-tutorial-demo { grid-template-columns: 240px minmax(0, 1fr); gap: 16px 24px; }
    .uv-tutorial-demo > header, .uv-demo-tabs, .uv-demo-sources { grid-column: 1 / -1; }
    .uv-demo-scenarios { grid-column: 1; grid-row: 3; align-content: start; }
    .uv-demo-controls { grid-column: 1; grid-row: 4 / 9; grid-template-columns: 1fr; align-content: start; }
    .uv-demo-controls fieldset { grid-template-columns: 1fr; }
    .uv-demo-panel { grid-column: 2; grid-row: 3 / 5; }
    .uv-demo-cursor { grid-column: 2; grid-row: 5; }
    .uv-demo-readings { grid-column: 2; grid-row: 6; }
    .uv-demo-caveat { grid-column: 2; grid-row: 7; }
    .uv-tutorial-demo > p:not(.uv-demo-caveat) { grid-column: 2; grid-row: 8; }
}
html[data-theme="light"] .uv-reading-card { color: #173241; }
html[data-theme="light"] .uv-reading-number > strong,
html[data-theme="light"] .select-tile-contener .marker-main-contener .uv-reading-number .marker-reading-unit { color: #173241 !important; }
html[data-theme="light"] .uv-reading-extrema, html[data-theme="light"] .uv-scale-labels { color: #526d7f; }
html[data-theme="light"] .uv-tutorial-demo { --uv-text: #173241; --uv-muted: #526d7f; --uv-panel: #f4f8fb; --uv-line: #b8cbd7; }
html[data-theme="light"] .uv-tutorial-demo output { color: #7856b2; }
html[data-theme="light"] .uv-concept { --uv-muted: #526d7f; color: #173241; }
html[data-theme="light"] .uv-concept > strong { color: #7856b2; }
html[data-theme="light"] .uv-concept > span { color: #f0eaff; }


/* features/management/marker-ions-widget.css */
:is(.select-tile-contener, .laboratory-ion-composition) .marker-water-ions-widget {
    --ion-text: #e5eef4;
    --ion-muted: #8aa3b4;
    --ion-line: #253a49;
    --ion-track: #1b2f3b;
    --ion-surface: #10202a;
    --ion-normal: #34d399;
    --ion-warning: #fbbf24;
    --ion-alarm: #fb4d6d;
    --ion-stiff-fill: #429bc442;
    color: var(--ion-text);
    container: ions / inline-size;
}
html[data-theme="light"] :is(.select-tile-contener, .laboratory-ion-composition) .marker-water-ions-widget {
    --ion-text: #101d29;
    --ion-muted: #566e80;
    --ion-line: #d9e2ea;
    --ion-track: #e1e8ef;
    --ion-surface: #f1f5f9;
    --ion-normal: #12936a;
    --ion-warning: #946015;
    --ion-alarm: #c81e3a;
}
:is(.select-tile-contener, .laboratory-ion-composition) .ion-current-card { isolation: isolate; }
:is(.select-tile-contener, .laboratory-ion-composition) .marker-main-contener:not(.is-compact-mode) .marker-water-ions-card.ion-current-card { background: linear-gradient(158deg, #0c1820, #10202a); border: 1px solid var(--ion-line); border-radius: 16px; padding: 12px; opacity: 1; }
html[data-theme="light"] :is(.select-tile-contener, .laboratory-ion-composition) .marker-main-contener:not(.is-compact-mode) .marker-water-ions-card.ion-current-card { background: linear-gradient(158deg, #f9fbfd, #f1f5f9); border-color: var(--ion-line); }
:is(.select-tile-contener, .laboratory-ion-composition) .marker-water-ions-widget .marker-water-ions-title strong { color: var(--ion-text); }
:is(.select-tile-contener, .laboratory-ion-composition) .marker-water-ions-widget .marker-water-ions-title small { color: var(--ion-muted); }
:is(.select-tile-contener, .laboratory-ion-composition) .ion-current-card.is-alarm { border-color: var(--ion-alarm); }
html :is(.select-tile-contener, .laboratory-ion-composition) .marker-main-contener:not(.is-compact-mode) .marker-water-ions-card.ion-current-card.is-alarm { border-color: var(--ion-alarm); }
:is(.select-tile-contener, .laboratory-ion-composition) .ion-current-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; padding: 3px; border-radius: 11px; background: var(--ion-track); margin: 9px 0 12px; }
:is(.select-tile-contener, .laboratory-ion-composition) .ion-current-tabs > button { border: 0; border-radius: 8px; padding: 7px; background: transparent; color: var(--ion-muted); font: inherit; font-size: 12px; font-weight: 650; cursor: pointer; }
:is(.select-tile-contener, .laboratory-ion-composition) .ion-current-tabs > button[aria-selected="true"] { background: var(--ion-surface); color: var(--ion-text); box-shadow: 0 0 0 1px var(--ion-line); }
:is(.select-tile-contener, .laboratory-ion-composition) .ion-current-panel { display: grid; gap: 10px; }
:is(.select-tile-contener, .laboratory-ion-composition) .marker-water-ions-widget [hidden] { display: none !important; }
:is(.select-tile-contener, .laboratory-ion-composition) .ion-current-hero { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px 12px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--ions-color) 25%, var(--ion-line)); background: linear-gradient(135deg, color-mix(in srgb, var(--ions-color) 12%, transparent), transparent 70%); }
:is(.select-tile-contener, .laboratory-ion-composition) .ion-current-hero > div { display: grid; gap: 6px; min-width: 0; }
:is(.select-tile-contener, .laboratory-ion-composition) .ion-current-hero strong { font-size: 14px; line-height: 1.3; }
:is(.select-tile-contener, .laboratory-ion-composition) .ion-state-ring { width: 84px; height: 84px; overflow: visible; }
:is(.select-tile-contener, .laboratory-ion-composition) .ion-state-ring text { fill: var(--ion-text); font-family: inherit; }
:is(.select-tile-contener, .laboratory-ion-composition) .ion-state-ring text:last-child { fill: var(--ion-muted); }
:is(.select-tile-contener, .laboratory-ion-composition) .ion-state-ring [role="button"] { cursor: pointer; transition: stroke .3s, stroke-width .2s; }
:is(.select-tile-contener, .laboratory-ion-composition) .ion-state-ring [role="button"]:is(:hover, :focus-visible) { stroke-width: 11px; }
:is(.select-tile-contener, .laboratory-ion-composition) .ion-summary-chips { display: flex; flex-wrap: wrap; gap: 5px; }
:is(.select-tile-contener, .laboratory-ion-composition) .ion-status { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 999px; color: var(--status-color); background: color-mix(in srgb, var(--status-color) 10%, transparent); border: 1px solid color-mix(in srgb, var(--status-color) 30%, transparent); font-size: 10px; font-weight: 650; line-height: 1.5; }
:is(.select-tile-contener, .laboratory-ion-composition) .ion-status::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }
:is(.select-tile-contener, .laboratory-ion-composition) .ion-current-group { display: grid; gap: 2px; }
:is(.select-tile-contener, .laboratory-ion-composition) .ion-group-label { display: flex; align-items: center; gap: 8px; padding: 8px 2px 3px; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--ion-muted); }
:is(.select-tile-contener, .laboratory-ion-composition) .ion-group-label::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--ion-line), transparent); }
:is(.select-tile-contener, .laboratory-ion-composition) .ion-current-row.marker-water-ions-item { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; padding: 10px 9px; min-width: 0; border: 0; background: transparent; }
:is(.select-tile-contener, .laboratory-ion-composition) .ion-current-row .marker-water-ions-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; color: var(--ion-text); font-size: 12px; line-height: 1.3; white-space: normal; overflow: visible; min-width: 0; }
:is(.select-tile-contener, .laboratory-ion-composition) .ion-current-row .marker-water-ions-name > [data-ion-text] { overflow-wrap: anywhere; }
:is(.select-tile-contener, .laboratory-ion-composition) .ion-current-row .marker-water-ions-name:has(.marker-alarm-bell) > .ion-status { display: none; }
:is(.select-tile-contener, .laboratory-ion-composition) .ion-current-row .marker-water-ions-value { display: flex; justify-content: flex-end; align-items: baseline; gap: 3px; white-space: nowrap; font-variant-numeric: tabular-nums; font-family: var(--wl-font-mono); }
:is(.select-tile-contener, .laboratory-ion-composition) .ion-current-row .marker-water-ions-value > strong { color: var(--ion-text); font-size: 18px; font-weight: 800; }
:is(.select-tile-contener, .laboratory-ion-composition) .ion-current-row .marker-water-ions-value > small { font-size: 10px; color: var(--ion-muted); }
:is(.select-tile-contener, .laboratory-ion-composition) .ion-row-meta { grid-column: 2 / 4; display: flex; justify-content: space-between; align-items: center; gap: 6px; color: var(--ion-muted); font-size: 10px; }
:is(.select-tile-contener, .laboratory-ion-composition) .ion-row-meta > span:empty { display: none; }
:is(.select-tile-contener, .laboratory-ion-composition) .ion-row-meter { grid-column: 2 / 4; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
:is(.select-tile-contener, .laboratory-ion-composition) .ion-row-meter > small { font: 500 10px var(--wl-font-mono); color: var(--ion-muted); }
:is(.select-tile-contener, .laboratory-ion-composition) .ion-current-row .marker-water-ions-bar { margin: 0; height: 7px; overflow: visible; background: var(--ion-track); box-shadow: none; }
:is(.select-tile-contener, .laboratory-ion-composition) .ion-current-row .marker-water-ions-bar > i { height: 7px; background: linear-gradient(90deg, color-mix(in srgb, var(--status-color) 30%, transparent), var(--status-color)); box-shadow: 0 0 10px -2px var(--status-color); transition: width .6s ease; }
:is(.select-tile-contener, .laboratory-ion-composition) .ion-current-row .marker-water-ions-bar > i::after { content: ''; position: absolute; right: -1px; top: -1px; width: 9px; height: 9px; border-radius: 50%; background: var(--status-color); box-shadow: 0 0 0 2px var(--ion-surface); }
:is(.select-tile-contener, .laboratory-ion-composition) .ion-current-row .marker-water-ions-bar [data-ion-fragment] > b { position: absolute; top: -4px; height: 15px; width: 2px; background: var(--ion-text); opacity: .7; border-radius: 1px; }
:is(.select-tile-contener, .laboratory-ion-composition) .ion-row-range { grid-column: 2 / 4; color: var(--ion-muted); font-size: 10px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; font-family: var(--wl-font-mono); }
:is(.select-tile-contener, .laboratory-ion-composition) .ion-row-range:empty { display: none; }
:is(.select-tile-contener, .laboratory-ion-composition) .ion-current-row .marker-water-ions-orb, :is(.select-tile-contener, .laboratory-ion-composition) .ion-co2-note .marker-water-ions-orb { width: 40px; height: 40px; flex: none; border-radius: 50%; position: relative; display: grid; place-items: center; color: var(--ion-color); background: radial-gradient(circle at 32% 26%, color-mix(in srgb, white 70%, var(--ion-color)), transparent 26%), radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--ion-color) 42%, transparent), color-mix(in srgb, var(--ion-color) 10%, transparent) 72%); border: 1px solid color-mix(in srgb, var(--ion-color) 55%, transparent); box-shadow: inset 0 -5px 10px color-mix(in srgb, var(--ion-color) 28%, transparent), 0 0 16px -6px var(--ion-color); }
:is(.select-tile-contener, .laboratory-ion-composition) .ion-current-row .marker-water-ions-orb { grid-row: span 4; }
:is(.select-tile-contener, .laboratory-ion-composition) .ion-current-row .marker-water-ions-orb::before, :is(.select-tile-contener, .laboratory-ion-composition) .ion-co2-note .marker-water-ions-orb::before { content: ''; position: absolute; inset: -5px; border: 1px dashed color-mix(in srgb, var(--ion-color) 32%, transparent); border-radius: 50%; }
:is(.select-tile-contener, .laboratory-ion-composition) .ion-current-row .marker-water-ions-orb > b, :is(.select-tile-contener, .laboratory-ion-composition) .ion-co2-note .marker-water-ions-orb > b { color: var(--ion-color); font-size: 12px; font-weight: 800; overflow: visible; white-space: nowrap; text-overflow: clip; }
:is(.select-tile-contener, .laboratory-ion-composition) .marker-water-ions-orb :is(sub, sup) { font-size: .66em; line-height: 0; }
:is(.select-tile-contener, .laboratory-ion-composition) .ion-orbit-particle { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: var(--ions-cation-color); box-shadow: 0 0 6px currentColor; animation: waterly-ion-orbit 7s linear infinite; animation-delay: calc(var(--particle-index) * -7s / var(--particle-count)); }
:is(.select-tile-contener, .laboratory-ion-composition) .is-anion > .ion-orbit-particle { background: var(--ions-anion-color); animation-direction: reverse; }
:is(.select-tile-contener, .laboratory-ion-composition) .ion-composition-sides { display: flex; justify-content: space-between; font-size: 10px; font-weight: 650; color: var(--ions-cation-color); }
:is(.select-tile-contener, .laboratory-ion-composition) .ion-composition-sides > span:last-child { color: var(--ions-anion-color); }
:is(.select-tile-contener, .laboratory-ion-composition) .ion-stiff { display: block; width: 100%; height: auto; overflow: visible; margin: 8px 0; }
:is(.select-tile-contener, .laboratory-ion-composition) .ion-stiff text { fill: var(--ion-text); font-family: inherit; }
:is(.select-tile-contener, .laboratory-ion-composition) .ion-stiff text.ion-stiff-muted { fill: var(--ion-muted); }
:is(.select-tile-contener, .laboratory-ion-composition) .ion-charge-summary { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; font-size: 10px; color: var(--ion-muted); }
:is(.select-tile-contener, .laboratory-ion-composition) .ion-charge-summary > span:nth-child(2) { padding: 4px 8px; text-align: center; background: var(--ion-surface); border-radius: 10px; border: 1px solid var(--ion-line); }
:is(.select-tile-contener, .laboratory-ion-composition) .ion-charge-summary > span:last-child { text-align: right; }
:is(.select-tile-contener, .laboratory-ion-composition) .ion-charge-summary b { display: block; font-size: 13px; font-weight: 800; color: var(--ion-text); font-variant-numeric: tabular-nums; font-family: var(--wl-font-mono); }
:is(.select-tile-contener, .laboratory-ion-composition) .ion-composition-note, :is(.select-tile-contener, .laboratory-ion-composition) .ion-balance-unavailable { margin: 0; padding: 9px 11px; border-radius: 10px; color: var(--ion-muted); background: color-mix(in srgb, var(--ion-warning) 7%, transparent); border: 1px solid color-mix(in srgb, var(--ion-warning) 23%, transparent); font-size: 11px; line-height: 1.5; }
:is(.select-tile-contener, .laboratory-ion-composition) .ion-measured-type { display: grid; gap: 4px; padding: 9px 11px; margin-top: 10px; border: 1px solid var(--ion-line); border-radius: 12px; font-size: 10px; color: var(--ion-muted); }
:is(.select-tile-contener, .laboratory-ion-composition) .ion-measured-type strong { color: var(--ion-text); font-size: 16px; overflow-wrap: anywhere; }
:is(.select-tile-contener, .laboratory-ion-composition) .ion-co2-note { display: flex; align-items: center; gap: 14px; padding: 6px; font-size: 11px; }
:is(.select-tile-contener, .laboratory-ion-composition) .ion-co2-note small { display: block; margin-top: 3px; color: var(--ion-muted); line-height: 1.5; }
:is(.select-tile-contener, .laboratory-ion-composition) .ion-current-tabs > button:focus-visible, :is(.select-tile-contener, .laboratory-ion-composition) .ion-current-row:focus-visible { outline: 2px solid var(--ions-anion-color); outline-offset: 2px; }
:is(.select-tile-contener, .laboratory-ion-composition) .ion-current-panel[hidden] .ion-orbit-particle, :is(.select-tile-contener, .laboratory-ion-composition) .ion-current-card.is-stale .ion-orbit-particle { animation-play-state: paused; }
:is(.select-tile-contener, .laboratory-ion-composition) .marker-water-ions-widget:not(.is-motion-visible) .ion-orbit-particle { animation-play-state: paused; }
@keyframes waterly-ion-orbit { from { transform: rotate(0deg) translateX(25px); } to { transform: rotate(360deg) translateX(25px); } }
@container ions (max-width: 340px) {
    :is(.select-tile-contener, .laboratory-ion-composition) .ion-current-row.marker-water-ions-item { column-gap: 9px; padding-inline: 5px; }
    :is(.select-tile-contener, .laboratory-ion-composition) .ion-current-row .marker-water-ions-value { flex-wrap: nowrap; gap: 3px; }
    :is(.select-tile-contener, .laboratory-ion-composition) .ion-current-row .marker-water-ions-value > strong { font-size: 16px; }
    :is(.select-tile-contener, .laboratory-ion-composition) .ion-current-hero { gap: 10px; padding-inline: 8px; }
    :is(.select-tile-contener, .laboratory-ion-composition) .ion-charge-summary { gap: 4px; }
    :is(.select-tile-contener, .laboratory-ion-composition) .ion-charge-summary b { font-size: 11px; }
    .laboratory-ion-composition .ion-stiff text[font-size="12"] { font-size: 18px; }
    .laboratory-ion-composition .ion-stiff text[font-size="10"] { font-size: 14px; }
    .laboratory-ion-composition .ion-stiff text[font-size="10"][data-ion-text] { transform: translateY(3px); }
    .laboratory-ion-composition .ion-stiff text[font-size="8"] { font-size: 12px; transform: translateY(2px); }
    .laboratory-ion-composition .ion-stiff text[font-size="9"] { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    :is(.select-tile-contener, .laboratory-ion-composition) .ion-orbit-particle { animation: none; transform: rotate(calc(var(--particle-index) * 180deg)) translateX(25px); }
    :is(.select-tile-contener, .laboratory-ion-composition) .ion-current-row .marker-water-ions-bar > i, :is(.select-tile-contener, .laboratory-ion-composition) .ion-state-ring [role="button"] { transition: none; }
}

.laboratory-ion-composition { max-width: 620px; margin-bottom: 20px; }
.laboratory-ion-composition .marker-water-ions-widget { margin: 0; }
.laboratory-ion-composition .ion-current-card { background: linear-gradient(158deg, #0c1820, #10202a); border: 1px solid var(--ion-line); padding: 16px; opacity: 1; }
html[data-theme="light"] .laboratory-ion-composition .ion-current-card { background: linear-gradient(158deg, #f9fbfd, #f1f5f9); }
.laboratory-ion-composition .marker-water-ions-ambient { display: none; }
.laboratory-ion-composition .ion-current-card.is-alarm { border-color: var(--ion-alarm); }

/* The point panel lists individual probes without a second enclosing card. */
.select-tile-contener .marker-main-contener:not(.is-compact-mode) [data-ion-mode="readings"] .marker-water-ions-card.ion-current-card { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.select-tile-contener [data-ion-mode="readings"] .marker-water-ions-ambient { display: none; }
:is(.select-tile-contener, .laboratory-ion-composition) .ion-row-range { display: flex; flex-wrap: wrap; gap: 10px; }
:is(.select-tile-contener, .laboratory-ion-composition) .ion-row-range > span { display: inline-flex; align-items: center; gap: 3px; }


/* features/management/marker_categories.css */
/* Graficzne podkategorie: pojedynczy nagłówek nad swobodnym widgetem. */
.select-tile-contener .marker-main-contener .marker-category .marker-category-content {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.select-tile-contener .marker-main-contener .marker-category-content > .marker-subcategory {
    padding-top: 8px !important;
    padding-bottom: 12px !important;
}

.select-tile-contener .marker-main-contener .marker-category-content .marker-subcategory-head {
    display: flex;
    min-height: 28px;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 2px;
    border: 0;
    background: transparent;
}

.select-tile-contener .marker-main-contener .marker-subcategory-head > span:first-child > i {
    display: inline-flex;
    width: 16px;
    height: 20px;
    min-width: 16px;
    flex: 0 0 16px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: 12px;
    line-height: 1;
}

/* Ikony podkategorii biorą kolor z głównej kategorii (np. mineralizacja → zieleń). */
.select-tile-contener .marker-main-contener .marker-category-content .marker-subcategory-head i,
.select-tile-contener .marker-main-contener .marker-category-content .marker-subcategory-head .marker-water-temperature-heading > i,
.select-tile-contener .marker-main-contener .marker-category-content .marker-subcategory-head .marker-water-oxygen-title > i,
.select-tile-contener .marker-main-contener .marker-category-content .marker-subcategory-head .marker-water-ph-title > i,
.select-tile-contener .marker-main-contener .marker-category-content .marker-subcategory-head .marker-water-orp-title > i,
.select-tile-contener .marker-main-contener .marker-category-content .marker-subcategory-head .marker-water-depth-title > i,
.select-tile-contener .marker-main-contener .marker-category-content .marker-subcategory-head .marker-water-ec-title > i,
.select-tile-contener .marker-main-contener .marker-category-content .marker-subcategory-head .marker-water-ions-title > i,
.select-tile-contener .marker-main-contener .marker-category-content .marker-subcategory-head .marker-water-clarity-title > i,
.select-tile-contener .marker-main-contener .marker-category-content .marker-subcategory-head .marker-water-biology-title > i,
.select-tile-contener .marker-main-contener .marker-category-content .marker-subcategory-head .marker-water-organic-title > i,
.select-tile-contener .marker-main-contener .marker-category-content .marker-subcategory-head .marker-multi-sensor-title > i {
    color: var(--category-accent, #94a3b8);
}

.select-tile-contener .marker-main-contener .marker-subcategory-head > span:first-child > i::after {
    display: none;
}

.select-tile-contener .marker-main-contener .marker-subcategory-head .marker-multi-sensor-title {
    min-width: max-content;
    flex: 1 1 auto;
}

.select-tile-contener .marker-main-contener .marker-subcategory-head .marker-multi-sensor-title > span {
    min-width: max-content;
}

.select-tile-contener .marker-main-contener .marker-subcategory-head .marker-multi-sensor-title strong,
.select-tile-contener .marker-main-contener .marker-subcategory-head .marker-multi-sensor-title .marker-tutorial-link {
    white-space: nowrap;
}

.select-tile-contener .marker-main-contener .marker-subcategory-head strong {
    font-size: 11px;
    font-weight: 650;
}

/* Opisy powtarzające nazwy na samych grafikach nie potrzebują drugiej linii. */
.select-tile-contener .marker-main-contener .marker-subcategory-head :is(.marker-water-oxygen-title, .marker-water-ec-title) small {
    display: none;
}


/* Drzewo kategorii: mocny korzeń, wcięte parametry i dyskretne gałęzie. */
.select-tile-contener .marker-main-contener .marker-category {
    --category-tree-line: rgba(125, 166, 184, 0.26);
}

.select-tile-contener .marker-main-contener .marker-group > .marker-group-head {
    gap: 9px;
    padding: 3px 0 8px;
}

.select-tile-contener .marker-main-contener .marker-group > .marker-group-head .marker-group-name {
    color: #edf7fc;
    font-size: 13px;
    font-weight: 750;
    letter-spacing: 0;
    white-space: normal;
}

.select-tile-contener .marker-main-contener .marker-group > .marker-group-head .marker-group-icon {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
    font-size: 12px;
}

.select-tile-contener .marker-main-contener .marker-category .marker-category-content {
    margin-left: 11px;
    padding-left: 18px;
}

.select-tile-contener .marker-main-contener .marker-category-content > * {
    position: relative;
    border-top: 0;
}

.select-tile-contener .marker-main-contener .marker-category-content > *::before,
.select-tile-contener .marker-main-contener .marker-category-content > *::after {
    position: absolute;
    left: -18px;
    content: "";
    pointer-events: none;
}

.select-tile-contener .marker-main-contener .marker-category-content > *::before {
    top: 0;
    bottom: 0;
    border-left: 1px solid var(--category-tree-line);
}

.select-tile-contener .marker-main-contener .marker-category-content > *::after {
    top: 22px;
    width: 13px;
    border-top: 1px solid var(--category-tree-line);
}

.select-tile-contener .marker-main-contener .marker-category-content > *:last-child::before {
    bottom: auto;
    height: 22px;
}

.select-tile-contener .marker-main-contener .marker-subcategory-head strong {
    color: #b6cbd5;
    font-size: 11px;
    font-weight: 600;
}

html[data-theme="light"] .select-tile-contener .marker-main-contener .marker-category {
    --category-tree-line: rgba(40, 89, 112, 0.25);
}

html[data-theme="light"] .select-tile-contener .marker-main-contener .marker-group > .marker-group-head .marker-group-name {
    color: #173b4e;
}

html[data-theme="light"] .select-tile-contener .marker-main-contener .marker-subcategory-head strong {
    color: #486779;
}


/* Layout belongs to the category, regardless of the measurement presentation. */
.select-tile-contener .marker-main-contener .marker-category {
    width: 100%;
    margin: 0 0 16px;
}
.select-tile-contener .marker-main-contener .marker-category-content {
    display: block;
}
.select-tile-contener .marker-main-contener .marker-category-content > * {
    margin: 0 !important;
}
.select-tile-contener .marker-main-contener .marker-category-content > .marker-category-empty {
    padding: 8px 0 12px !important;
    min-height: 0;
    height: auto;
    background: transparent;
    box-shadow: none;
}
.select-tile-contener .marker-main-contener .marker-category-empty > .marker-graphic-empty-notice {
    padding: 14px 2px;
}
.marker-main-contener .marker-category.is-collapsed > .marker-category-content {
    display: none;
}

/* Ikona i podpis redox na jednej osi, także w skopiowanym nagłówku kompaktowym. */
.select-tile-contener .marker-main-contener .marker-subcategory-head .marker-water-orp-title {
    display: flex;
    align-items: center;
    gap: 8px;
}
.select-tile-contener .marker-main-contener .marker-subcategory-head .marker-water-orp-title > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.select-tile-contener .marker-main-contener .marker-subcategory-head .marker-water-orp-title > span {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 16px;
}
.select-tile-contener .marker-main-contener .marker-subcategory-head .marker-water-orp-title strong { display: block; line-height: 16px; }

/* Klonowane nagłówki kompaktowe zachowują odstęp ikony niezależnie od typu widgetu. */
.select-tile-contener .marker-main-contener .marker-compact-subcategory .marker-subcategory-head > span:first-child:has(> i) {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.select-tile-contener .marker-main-contener .marker-compact-subcategory .marker-subcategory-head > span:first-child > i {
    margin: 0;
    flex: 0 0 16px;
}


/* features/management/marker-mobile-hero.css */
/* Mobile point overview: one WQI-coloured surface above the measurements.
   Reuse the existing reading, history and action nodes so live updates keep working. */
.marker-loading-overview {
    display: contents;
}

.marker-loading-quick-actions {
    display: none;
}

.marker-loading-toolbar,
.marker-loading-brand-placeholder { display: none; }

/* Connection failures retain the point identity and have one readable message. */
.select-tile-contener .marker-wait-for-data:is(.is-error, .is-slow) .marker-loading-copy > em {
    height: auto;
    min-height: 0;
    overflow: visible;
    line-height: 1.5;
}

.select-tile-contener .marker-wait-for-data:is(.is-error, .is-slow) .marker-loading-copy > em > span {
    position: static;
    opacity: 1;
    transform: none;
    animation: none;
}

.select-tile-contener .marker-wait-for-data.is-error .marker-loading-point-name {
    display: block;
    margin-bottom: 8px;
}

html[data-theme] .select-tile-contener .marker-wait-for-data.is-error {
    background: transparent;
    animation: none;
}

html[data-theme] .select-tile-contener .marker-wait-for-data.is-error .marker-loading-header {
    background: transparent;
}

.select-tile-contener .marker-wait-for-data.is-error .marker-loading-ambient,
.select-tile-contener .marker-wait-for-data.is-error .marker-loading-beacon > b { display: none; }

.select-tile-contener .marker-wait-for-data.is-waiting .marker-loading-beacon {
    color: #dfb565;
    border-color: #dfb56544;
}

.select-tile-contener .marker-loading-actions { width: min(360px, 100%); }

.select-tile-contener .marker-wait-for-data.is-error .marker-loading-live,
.select-tile-contener .marker-wait-for-data.is-error .marker-loading-phases {
    display: none;
}

.select-tile-contener .marker-wait-for-data.is-slow .marker-loading-actions { display: grid; }

.select-tile-contener .marker-loading-action {
    min-height: 44px;
    font-size: 12px;
    line-height: 1.3;
    border-radius: 14px;
    transition: background-color .16s ease, border-color .16s ease;
}

.select-tile-contener .marker-loading-action:focus-visible {
    outline: 2px solid #38bdf8;
    outline-offset: 3px;
}

.select-tile-contener .marker-loading-action:is(:hover, :focus-visible) { transform: none; }

/* A bounded crossfade avoids late rows snapping when reveal classes are removed. */
.select-tile-contener .marker-wait-for-data {
    transition: opacity .32s ease;
}

.select-tile-contener .marker-wait-for-data.is-complete { filter: none; transform: none; }

.select-tile-contener .marker-main-contener.is-revealing :is(.marker-water-hero-widget, .marker-mode-toolbar, .marker-status-notices, .marker-widget-group > *, .marker-footer-strip) {
    filter: none;
    transform: none;
    transition: opacity .32s ease;
}

.select-tile-contener .marker-main-contener.is-revealing.is-revealed :is(.marker-water-hero-widget, .marker-mode-toolbar) { transition-delay: 0s; }
.select-tile-contener .marker-main-contener.is-revealing.is-revealed :is(.marker-status-notices, .marker-widget-group > *, .marker-footer-strip) { transition-delay: .08s; }

/* On phones the toolbar (including live status) is inside the hero. Fading
   both multiplies their opacity, making the status appear later than the
   point title and readings. Reveal that entire surface as one layer. */
.select-tile-contener .marker-main-contener.is-revealing .marker-water-hero-widget .marker-mode-toolbar {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
    will-change: auto;
}

/* Mobile loading follows the ready overview rather than the desktop dashboard. */
@media (max-width: 767px) {
    .select-tile-contener .marker-main-contener {
        --marker-mobile-toolbar-height: 48px;
        --marker-mobile-identity-height: 52px;
    }

    .select-tile-contener .has-loading-toolbar .marker-loading-toolbar {
        display: flex;
        height: var(--marker-mobile-toolbar-height);
        margin-bottom: 8px;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    .select-tile-contener .marker-loading-status-placeholder {
        display: grid;
        gap: 5px;
        flex: 1 1 0;
    }

    .select-tile-contener .marker-loading-status-placeholder > i {
        width: min(80px, 80%);
        height: 7px;
        border-radius: 4px;
        background: #ffffff26;
        animation: marker-mobile-loading-pulse 2s ease-in-out infinite;
    }

    .select-tile-contener .marker-loading-status-placeholder > i + i { width: min(100px, 90%); }

    .select-tile-contener .marker-loading-mode-placeholder {
        width: 176px;
        max-width: 60%;
        height: 34px;
        border-radius: 999px;
        background: #ffffff1a;
    }
    html[data-theme] .select-tile-contener:has(.marker-main-contener.is-loading) {
        border: 0;
        box-shadow: 0 -24px 58px rgba(0, 0, 0, .52) !important;
    }

    .select-tile-contener .marker-main-contener.is-loading {
        --marker-sheet-header-height: calc(28px + var(--safe-top, 0px));
        padding-top: 0 !important;
    }

    .select-tile-contener .marker-main-contener.is-loading::before {
        position: absolute;
        z-index: 8;
        inset: 0 0 auto;
        height: var(--marker-sheet-header-height);
        background: transparent;
        -webkit-backdrop-filter: blur(22px);
        backdrop-filter: blur(22px);
        content: "";
    }

    .select-tile-contener .marker-main-contener.is-loading .marker-panel-scroll-body {
        padding-top: var(--marker-sheet-header-height);
    }

    html[data-theme] .select-tile-contener .marker-wait-for-data {
        --loading-accent: var(--marker-loading-accent, var(--marker-wqi-color, #16a394));
        min-height: 0;
        padding: 0 0 16px;
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        transition: opacity .5s linear;
    }

    .select-tile-contener .marker-main-contener:not(.is-loading) .marker-wait-for-data {
        padding-inline: calc(11px + var(--safe-left, 0px)) calc(11px + var(--safe-right, 0px));
    }

    html[data-theme] .select-tile-contener .marker-loading-overview {
        display: block;
        width: calc(100% + 22px + var(--safe-left, 0px) + var(--safe-right, 0px));
        margin-left: calc(-11px - var(--safe-left, 0px));
        margin-right: calc(-11px - var(--safe-right, 0px));
        padding: 8px calc(18px + var(--safe-right, 0px)) 12px calc(18px + var(--safe-left, 0px));
        border-radius: 0 0 28px 28px;
        color: #f8fcfa;
        background: linear-gradient(180deg, color-mix(in srgb, var(--loading-accent) 29%, #172326) 0 64px, color-mix(in srgb, var(--loading-accent) 14%, #0a181b));
    }

    html[data-theme] .select-tile-contener .marker-loading-header {
        min-height: var(--marker-mobile-identity-height);
        height: var(--marker-mobile-identity-height);
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 10px;
        background: transparent;
    }

    html[data-theme] .select-tile-contener .marker-loading-beacon {
        width: 38px;
        height: 38px;
        border: 1px solid #ffffff3d;
        border-radius: 50%;
        color: #f8fcfa;
        background: #ffffff1a;
        box-shadow: none;
    }

    .select-tile-contener .marker-loading-beacon > i {
        font-size: 14px;
        filter: none;
        animation: none;
    }

    html[data-theme] .select-tile-contener .marker-loading-point-name {
        color: #f8fcfa;
        font-size: 15px;
        line-height: 1.3;
    }

    html[data-theme] .select-tile-contener .marker-loading-copy > strong,
    html[data-theme] .select-tile-contener .marker-loading-copy > em {
        color: #d2e1dc;
        font-size: 10px;
    }

    .select-tile-contener .marker-loading-copy > em > span {
        position: static;
        opacity: 1;
        transform: none;
        animation: none;
    }

    .select-tile-contener .marker-loading-copy > em > span + span { display: none; }

    /* Keep connection copy inside the identity slot; longer explanations stay
       fully visible on the error screens below. */
    .select-tile-contener .marker-wait-for-data:not(.is-error) .marker-loading-copy > em { display: none; }

    html[data-theme] .select-tile-contener .marker-loading-hero {
        min-height: 127px;
        height: 127px;
        margin-top: 10px;
        padding: 0;
        grid-template-columns: 108px minmax(0, 1fr);
        gap: 12px;
        align-items: start;
    }

    html[data-theme] .select-tile-contener .marker-loading-gauge {
        width: 96px;
        height: 96px;
        justify-self: center;
        margin-top: 6px;
        background: color-mix(in srgb, var(--loading-accent) 22%, #eafbef);
        box-shadow: 0 0 0 5px color-mix(in srgb, var(--loading-accent) 12%, transparent);
        animation: none;
    }

    html[data-theme] .select-tile-contener .marker-loading-gauge::before {
        inset: 6px;
        background: color-mix(in srgb, var(--loading-accent) 12%, #f4fff8);
        box-shadow: none;
    }

    html[data-theme] .select-tile-contener .marker-loading-gauge::after {
        inset: 0;
        background: conic-gradient(transparent 0 75%, var(--loading-accent) 94%, transparent);
        filter: none;
        -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
        mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
        animation-duration: 2.8s;
    }

    html[data-theme] .select-tile-contener .marker-loading-gauge > span {
        width: 60px;
        height: 60px;
        color: #426353;
    }

    .select-tile-contener .marker-loading-gauge > span small { order: 2; }
    .select-tile-contener .marker-loading-gauge > span b { margin-top: 0; }

    .select-tile-contener .marker-loading-line {
        background: #ffffff26;
        animation: marker-mobile-loading-pulse 2s ease-in-out infinite;
    }

    .select-tile-contener .marker-loading-line-title { width: 65%; }
    .select-tile-contener .marker-loading-line-copy { width: 90%; }

    .select-tile-contener .marker-loading-trace > svg {
        height: 64px;
        margin-top: 16px;
    }

    .select-tile-contener .marker-loading-trace path {
        stroke: #d2e1dc;
        stroke-dasharray: none;
        filter: none;
        animation: marker-mobile-loading-pulse 2s ease-in-out infinite;
    }

    .select-tile-contener .marker-loading-quick-actions {
        display: flex;
        justify-content: space-around;
        gap: 8px;
        min-height: 44px;
        margin-top: 12px;
        align-items: center;
    }

    .select-tile-contener .marker-loading-quick-actions > span {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: #ffffff1f;
        animation: marker-mobile-loading-pulse 2s ease-in-out infinite;
    }

    .select-tile-contener .marker-loading-brand-placeholder {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 18px;
        margin-top: 8px;
        padding-top: 4px;
    }

    .select-tile-contener .marker-loading-brand-placeholder > span {
        width: 180px;
        height: 5px;
        border-radius: 3px;
        background: #ffffff26;
    }

    @media (min-width: 500px) {
        .select-tile-contener .marker-loading-quick-actions { min-height: 62px; }
    }

    .select-tile-contener .marker-loading-grid {
        margin-top: 20px;
    }

    .select-tile-contener .marker-loading-grid > span {
        background: color-mix(in srgb, var(--loading-accent) 5%, transparent);
        animation: marker-mobile-loading-pulse 2s ease-in-out infinite;
    }

    html[data-theme="light"] .select-tile-contener .marker-loading-grid > span { background: #edf4f5; }
    html[data-theme="light"] .select-tile-contener .marker-loading-grid i { background: #d9e8e9; }
    html[data-theme="light"] .select-tile-contener .marker-loading-grid :is(b, small) { background: #c7d9dc; }
    html[data-theme="dark"] .select-tile-contener .marker-loading-grid > span { background: #ffffff06; }
    html[data-theme="dark"] .select-tile-contener .marker-loading-grid i { background: #ffffff12; }
    html[data-theme="dark"] .select-tile-contener .marker-loading-grid :is(b, small) { background: #ffffff1f; }

    html[data-theme] .select-tile-contener .marker-loading-footer {
        padding-top: 18px;
        background: transparent;
    }

    .select-tile-contener .marker-loading-footer small { font-size: 9px; }

    .select-tile-contener :is(.marker-loading-ambient, .marker-loading-beacon > b, .marker-loading-copy > small, .marker-loading-live, .marker-loading-scan, .marker-loading-spectrum, .marker-loading-phases),
    .select-tile-contener .marker-loading-grid > span::after {
        display: none;
    }

    html[data-theme] .select-tile-contener .marker-wait-for-data.is-complete {
        filter: none;
        transform: none;
    }

    .select-tile-contener .marker-main-contener.is-revealing :is(.marker-mode-toolbar, .marker-status-notices, .marker-widget-group > *, .marker-footer-strip) {
        transition: opacity .5s linear;
        transition-delay: 0s;
    }

    .select-tile-contener .marker-main-contener.is-revealing.is-revealed :is(.marker-status-notices, .marker-widget-group > *, .marker-footer-strip) { transition-delay: 0s; }

    /* Keep the ready background opaque throughout. Fading two backgrounds
       together dims the whole card halfway through the handoff. Only its
       direct contents fade, once, in sync with the skeleton above them. */
    html[data-theme] .select-tile-contener .marker-main-contener.is-revealing .marker-water-hero-widget {
        opacity: 1;
        transition: none;
        will-change: auto;
    }

    html[data-theme] .select-tile-contener .marker-main-contener.is-revealing .marker-water-hero-surface > * {
        opacity: 0;
        filter: none;
        transform: none;
        transition: opacity .5s linear;
        transition-delay: 0s;
        will-change: opacity;
    }

    html[data-theme] .select-tile-contener .marker-main-contener.is-revealing.is-revealed .marker-water-hero-surface > * { opacity: 1; }

    html[data-theme="light"] .select-tile-contener .marker-loading-action {
        color: #294552;
        background: #edf4f5;
    }

    html[data-theme="dark"] .select-tile-contener .marker-loading-action {
        color: #e7f2f3;
        background: #ffffff0d;
        border-color: #ffffff29;
    }

    html[data-theme] .select-tile-contener .marker-loading-action:is(:hover, :focus-visible) {
        border-color: #8fa7b4;
        background: color-mix(in srgb, #8fa7b4 16%, transparent);
    }
}

@keyframes marker-mobile-loading-pulse {
    0%, 100% { opacity: .45; }
    50% { opacity: .85; }
}

@media (max-width: 767px) {
    /* The coloured overview reaches the viewport edge; a sheet border exposes
       the light panel background as a one-pixel strip above it. */
    html[data-theme] .select-tile-contener:has(.marker-water-hero-surface) {
        border: 0;
        box-shadow: 0 -24px 58px rgba(0, 0, 0, .52) !important;
    }

    .select-tile-contener .marker-main-contener.has-water-hero:not(.is-loading) {
        --marker-sheet-header-height: calc(28px + var(--safe-top, 0px));
        /* Scroll behind the glass; the fixed layer below shields touch targets. */
        padding-top: 0 !important;
    }

    .select-tile-contener .has-water-hero:not(.is-loading)::before {
        position: absolute;
        z-index: 8;
        inset: 0 0 auto;
        height: var(--marker-sheet-header-height);
        background: transparent;
        -webkit-backdrop-filter: blur(22px);
        backdrop-filter: blur(22px);
        content: "";
        /* Only the handle (z-index: 12, below safe-top) is interactive here. */
        pointer-events: auto;
    }

    /* Extend each overview's own background under the fixed blur. It scrolls
       with the card, so the mask always samples the content beneath it instead
       of imposing a light/dark tint or exposing the initial padding gap. */
    html[data-theme] .select-tile-contener .marker-loading-overview {
        position: relative;
        isolation: isolate;
    }

    .select-tile-contener :is(.marker-loading-overview, .marker-water-hero-surface)::before {
        position: absolute;
        z-index: -1;
        inset: calc(-1 * var(--marker-sheet-header-height)) 0 0;
        border-radius: inherit;
        background: inherit;
        content: "";
        pointer-events: none;
    }

    .select-tile-contener .has-water-hero .marker-panel-scroll-body {
        padding-top: var(--marker-sheet-header-height);
        padding-inline: calc(11px + var(--safe-left, 0px)) calc(11px + var(--safe-right, 0px));
    }

    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface {
        --hero-ink: #f8fcfa;
        --hero-muted: #d2e1dc;
        --waterly-text-muted: var(--hero-muted);
        position: relative;
        isolation: isolate;
        width: calc(100% + 22px + var(--safe-left, 0px) + var(--safe-right, 0px));
        margin-left: calc(-11px - var(--safe-left, 0px));
        margin-right: calc(-11px - var(--safe-right, 0px));
        padding: 8px calc(18px + var(--safe-right, 0px)) 12px calc(18px + var(--safe-left, 0px));
        border-radius: 0 0 28px 28px;
        color: var(--hero-ink);
        /* The first colour continues the fixed background behind the status bar. */
        background: linear-gradient(180deg, color-mix(in srgb, var(--wqi-color) 29%, #172326) 0 64px, color-mix(in srgb, var(--wqi-color) 14%, #0a181b));
        box-shadow: 0 10px 22px -18px color-mix(in srgb, var(--wqi-color) 50%, #061c19);
    }

    .select-tile-contener .has-water-hero:not(.is-hero-scrolled) .marker-panel-sheet-handle span {
        background: rgba(255, 255, 255, .48);
    }

    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-mode-toolbar {
        min-height: var(--marker-mobile-toolbar-height);
        gap: 8px;
        margin: 0 0 8px;
        padding: 0;
        flex-wrap: nowrap;
        align-items: center;
    }

    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-hero-live {
        min-width: 0;
        width: 112px;
        height: var(--marker-mobile-toolbar-height);
        min-height: 22px;
        border: 0;
        background: transparent;
        color: var(--hero-ink);
        padding: 4px 9px;
        gap: 3px;
        align-items: center;
    }

    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-mode-toolbar > .marker-water-hero-live {
        flex: 1 1 0;
        width: 0;
        height: var(--marker-mobile-toolbar-height);
        padding-inline: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-mode-toolbar > .marker-water-hero-live > span {
        text-align: left;
    }

    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-mode-toolbar > .marker-water-hero-live > small {
        flex: 0 0 auto;
        min-width: 0;
        width: 100%;
        text-align: left;
    }

    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-mode-toolbar > .marker-water-hero-live > small::before {
        content: none;
    }

    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-hero-live > small {
        color: var(--hero-muted);
        font-size: 9px;
    }

    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-hero-live.is-stale {
        color: #ffe1a3;
    }

    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-hero-live.is-unavailable {
        color: var(--hero-muted);
    }

    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-hero-live:is(.is-stale, .is-unavailable) > small {
        color: var(--hero-muted) !important;
    }

    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-mode-switch {
        margin-left: auto;
        padding: 3px;
        border: 1px solid rgba(255, 255, 255, .17);
        background: rgba(255, 255, 255, .08);
        box-shadow: none;
    }

    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-mode-button {
        min-height: 28px;
        padding: 5px 9px;
        color: var(--hero-muted);
        font-size: 9px;
    }

    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-mode-button.is-active {
        background: var(--hero-ink);
        color: #173c30;
        box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
    }

    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-mode-button:is(:hover, :focus-visible) {
        color: var(--wqi-color);
    }

    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-hero-card {
        color: var(--hero-ink);
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-hero-ambient,
    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-hero-card::before {
        display: none;
    }

    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-hero-header {
        min-height: var(--marker-mobile-identity-height);
        height: var(--marker-mobile-identity-height);
        padding: 0;
        margin-bottom: 10px;
        background: transparent;
    }

    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-hero-title {
        gap: 10px;
    }

    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-hero-title > span {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, .24);
        background: rgba(255, 255, 255, .1);
        color: var(--hero-ink);
        box-shadow: none;
    }

    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-hero-title strong {
        color: var(--hero-ink);
        font-size: 15px;
        line-height: 1.3;
    }

    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-hero-title small,
    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-release-badge {
        color: var(--hero-muted);
        text-shadow: none;
        font-size: 9px;
    }

    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-release-badge {
        border: 0;
        background: transparent;
        padding: 0;
    }

    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-hero-content:not(.is-empty) {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 0;
        text-align: center;
    }

    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-hero-summary,
    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-hero-summary-current {
        display: contents;
    }

    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-hero-condition {
        order: 0;
        max-width: 100%;
        padding: 0;
        text-align: center;
    }

    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-hero-condition > span {
        color: var(--wqi-color);
        font-size: 15px;
        font-weight: 650;
        text-shadow: none;
        line-height: 1.25;
    }

    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-hero-condition > small {
        margin-top: 3px;
        color: var(--hero-muted);
        font-size: 10px;
        line-height: 1.3;
        white-space: normal;
    }

    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-hero-score {
        top: 0;
        gap: 5px;
    }

    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-hero-orbit {
        display: grid;
        width: 108px;
        height: 108px;
        place-items: center;
        border: 0;
        background: transparent;
        box-shadow: none;
        transform: none;
    }

    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-hero-orbit::before,
    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-hero-orbit::after {
        display: none;
    }

    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-hero-ring {
        --waterly-text-muted: #426353;
        display: grid;
        width: 96px;
        height: 96px;
        border: 0;
        border-radius: 50%;
        background: conic-gradient(from 180deg,
            var(--wqi-color) 0deg calc(var(--wqi-angle) / 2),
            color-mix(in srgb, var(--wqi-color) 22%, #eafbef) calc(var(--wqi-angle) / 2) calc(360deg - var(--wqi-angle) / 2),
            var(--wqi-color) calc(360deg - var(--wqi-angle) / 2) 360deg);
        box-shadow: 0 0 0 5px color-mix(in srgb, var(--wqi-color) 12%, transparent);
    }

    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-hero-ring::before {
        display: block;
        inset: 6px;
        border: 0;
        background: color-mix(in srgb, var(--wqi-color) 12%, #f4fff8);
    }

    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-hero-ring > span {
        position: absolute;
        inset: 0;
        display: block;
    }

    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-hero-ring strong {
        font-family: var(--wl-font-mono);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -58%);
        color: color-mix(in srgb, var(--wqi-color) 72%, #193622);
        font-size: 38px;
        font-weight: 750;
        letter-spacing: -.035em;
        line-height: 1;
        font-variant-numeric: tabular-nums;
        text-shadow: none;
    }

    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-hero-ring small {
        position: absolute;
        top: calc(50% + 22px);
        left: 50%;
        transform: translateX(-50%);
        color: #426353;
        font-size: 8px;
        letter-spacing: .12em;
    }

    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-hero-score-range {
        position: static;
        transform: none;
        margin: 0;
        color: var(--hero-muted);
        font-size: 10px;
        line-height: 14px;
    }

    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-hero-score-time {
        top: auto;
        bottom: 0;
        color: var(--hero-muted);
        font-size: 10px;
        line-height: 14px;
        min-height: 14px;
    }

    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-hero-trend {
        gap: 5px;
        padding: 3px 10px;
        margin: 0;
        border-radius: 999px;
        background: rgba(255, 255, 255, .12);
        color: var(--hero-ink);
        font-size: 9px;
        text-shadow: none;
    }

    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-hero-history {
        width: min(100%, 330px);
        height: 24px;
        min-height: 24px;
        margin: 0;
    }

    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-history-plot {
        height: 24px;
    }

    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-history-line {
        filter: none;
    }

    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-history-point-hit {
        pointer-events: none;
    }

    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface :is(.marker-water-history-axis, .marker-water-history-labels, .marker-water-history-dot, .marker-water-history-point-visible, .marker-water-history-point > line) {
        opacity: 0;
    }

    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-hero-card.is-history-expanded .marker-water-hero-content {
        display: block;
    }

    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-hero-card.is-history-expanded .marker-water-hero-condition,
    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-hero-card.is-history-expanded .marker-water-hero-trend {
        display: none;
    }

    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-hero-card.is-history-expanded .marker-water-hero-history {
        width: 100%;
        height: 190px;
        min-height: 190px;
    }

    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-hero-card.is-history-expanded .marker-water-history-plot {
        height: 158px;
        mask-image: none;
        -webkit-mask-image: none;
    }

    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-hero-footer {
        min-height: 18px;
        margin-top: 8px;
        padding: 4px 0 0;
        justify-content: center;
    }

    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-hero-brand,
    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-hero-brand > strong,
    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-hero-brand > small,
    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-hero-brand > a {
        color: var(--hero-muted);
        font-size: 8px;
    }

    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-hero-brand {
        margin-left: 0;
    }

    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-hero-brand > a {
        color: var(--marker-brand-accent);
    }

    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-hero-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        min-height: 0;
        max-width: 240px;
        margin: 12px auto 0;
    }

    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-hero-actions:has([data-action="subscribe"]) {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        max-width: none;
    }

    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-hero-quick-action {
        min-height: 62px;
        padding: 0 2px;
        gap: 7px;
        border: 0;
        border-radius: 12px;
        background: transparent;
        color: var(--hero-ink);
        box-shadow: none;
        transform: none;
    }

    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-hero-quick-action > i {
        display: grid;
        place-items: center;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .12);
        color: var(--hero-ink);
        font-size: 14px;
    }

    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-hero-quick-action.is-observed > i {
        background: rgba(255, 255, 255, .24);
    }

    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-hero-quick-action > span {
        max-width: 100%;
        font-size: 9px;
        line-height: 1.2;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    /* Legacy light-theme hover styles painted a rectangle behind the icon. */
    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-hero-quick-action:is(:hover, :focus-visible, :active) {
        border: 0;
        background: transparent;
        color: var(--hero-ink);
        box-shadow: none;
        transform: none;
    }

    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-hero-quick-action::after {
        display: none;
    }

    @media (hover: hover) and (pointer: fine) {
        .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-hero-quick-action:hover > i {
            background: rgba(255, 255, 255, .22);
            color: var(--hero-ink);
        }

    }

    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-hero-quick-action:active > i {
        transform: scale(.94);
    }

    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface :is(button, a, [role="button"]):focus-visible {
        outline: 2px solid var(--hero-ink);
        outline-offset: 3px;
    }

    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-hero-no-data strong {
        color: var(--hero-ink);
    }

    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-hero-no-data small {
        color: var(--hero-muted);
    }
}

@media (width < 500px) {
    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-hero-quick-action > span {
        display: none;
    }

    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-hero-quick-action {
        min-height: 44px;
        gap: 0;
    }
}

/* Keep the stacked reading only on the narrowest screens. */
@media (min-width: 300px) and (max-width: 767px) {
    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-hero-content:not(.is-empty) {
        display: grid;
        grid-template-columns: 108px minmax(0, 1fr);
        grid-template-rows: auto auto 32px;
        grid-template-areas:
            "score condition"
            "score trend"
            "score history";
        align-items: center;
        gap: 6px 12px;
        text-align: left;
    }

    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-hero-score {
        grid-area: score;
    }

    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-hero-condition {
        grid-area: condition;
        justify-self: stretch;
        text-align: left;
    }

    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-hero-trend {
        grid-area: trend;
        justify-self: start;
    }

    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-hero-history {
        grid-area: history;
        width: 100%;
        height: 32px;
        min-height: 32px;
    }

    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-history-plot {
        height: 32px;
    }
}

/* Place the trend beside the copy when the phone has room for both. */
@media (min-width: 375px) and (max-width: 767px) {
    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-hero-card:not(.is-history-expanded) .marker-water-hero-content:not(.is-empty) {
        grid-template-columns: 108px minmax(0, 1fr) auto;
        grid-template-rows: auto 64px;
        grid-template-areas:
            "score condition trend"
            "score history history";
        column-gap: 8px;
    }

    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-hero-trend {
        justify-self: end;
    }

    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-hero-card:not(.is-history-expanded) .marker-water-hero-history,
    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-hero-card:not(.is-history-expanded) .marker-water-history-plot {
        height: 64px;
        min-height: 64px;
    }
}

/* Keep the point's alarm action legible on every WQI-coloured mobile surface. */
@media (max-width:767px) {
    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-hero-quick-action[data-action="alarms"] {
        --marker-alarm-action:#943248;
        color:var(--hero-ink);
    }
    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-hero-quick-action[data-action="alarms"][data-alarm-state="warning"] {
        --marker-alarm-action:#775316;
    }
    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-hero-quick-action[data-action="alarms"] > span {
        color:var(--hero-ink);
    }
    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-hero-quick-action[data-action="alarms"][data-alarm-state]:is([data-alarm-state="alarm"],[data-alarm-state="warning"]) > i {
        background:var(--marker-alarm-action);
        color:#fff;
        box-shadow:inset 0 0 0 1px #ffffff24;
        animation:none;
    }
    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-hero-quick-action[data-action="alarms"] .marker-alarm-count {
        display:none;
    }
    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-hero-quick-action[data-action="alarms"]:is([data-alarm-state="alarm"],[data-alarm-state="warning"]) > i {
        position:relative;
    }
    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-hero-quick-action[data-action="alarms"]:is([data-alarm-state="alarm"],[data-alarm-state="warning"]) > i::before {
        display:block; animation:marker-mobile-alarm-icon 4.8s ease-in-out infinite;
    }
    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-hero-quick-action[data-action="alarms"]:is([data-alarm-state="alarm"],[data-alarm-state="warning"]) > i::after {
        font-family: var(--wl-font-mono);
        content:attr(data-alarm-count); position:absolute; inset:0; display:grid; place-items:center;
        font:800 18px/1 var(--wl-font-sans, "Geist", "Segoe UI", Arial, sans-serif); font-variant-numeric:tabular-nums;
        color:#fff; opacity:0; animation:marker-mobile-alarm-number 4.8s ease-in-out infinite;
    }
}
@keyframes marker-mobile-alarm-icon {
    0%,40%,100% {opacity:1;}
    50%,90% {opacity:0;}
}
@keyframes marker-mobile-alarm-number {
    0%,40%,100% {opacity:0;}
    50%,90% {opacity:1;}
}
@media (prefers-reduced-motion:reduce) {
    .select-tile-contener .marker-water-hero-quick-action[data-action="alarms"] > i::before,
    .select-tile-contener .marker-water-hero-quick-action[data-action="alarms"] > i::after {animation:none!important;}
    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-hero-quick-action[data-action="alarms"]:is([data-alarm-state="alarm"],[data-alarm-state="warning"]) > i::before {opacity:0;}
    .select-tile-contener .marker-water-hero-widget .marker-water-hero-surface .marker-water-hero-quick-action[data-action="alarms"]:is([data-alarm-state="alarm"],[data-alarm-state="warning"]) > i::after {opacity:1;}
}


/* features/management/point-alert-panel.css */
/* One shell for point status, history and the shared threshold editor. */
.is-point-panel {
    --pa-bg: #091b24; --pa-card: #102630; --pa-text: #e7f4f8; --pa-muted: #93adb9;
    --pa-line: #28434f; --pa-accent: #60d9d5; --pa-soft: #14343d;
    --pa-alarm: #ff8495; --pa-alarm-bg: #2a222e; --pa-warning: #f7c46f; --pa-warning-bg: #29292a; --pa-normal: #79d7b7;
}
html[data-theme="light"] .is-point-panel {
    --pa-bg: #f7fbfd; --pa-card: #fff; --pa-text: #203f50; --pa-muted: #607b8b;
    --pa-line: #d7e5ed; --pa-accent: #00869c; --pa-soft: #e9f5f8;
    --pa-alarm: #c82249; --pa-alarm-bg: #fff1f4; --pa-warning: #996000; --pa-warning-bg: #fff8ea; --pa-normal: #198363;
}
.is-point-panel .marker-alarm-manager-window { width: min(720px, calc(100vw - 40px)); max-height: min(880px, calc(100dvh - 48px)); background: var(--pa-bg); color: var(--pa-text); border: 1px solid var(--pa-line); border-radius: 24px; }
.is-point-panel .marker-alarm-manager-header { align-items: center; padding: 22px 24px; border-bottom: 1px solid var(--pa-line); }
.is-point-panel .marker-alarm-manager-header h2 { margin: 0 0 5px; color: var(--pa-text); font-size: 23px; }
.is-point-panel .marker-alarm-manager-header p { color: var(--pa-muted); font-size: 12px; line-height: 1.45; }
.is-point-panel .marker-alarm-manager-icon { background: var(--pa-soft); color: var(--pa-accent); border-color: var(--pa-line); }
.is-point-panel .marker-alarm-manager-close { border-radius: 11px; background: var(--pa-card); color: var(--pa-muted); border-color: var(--pa-line); }
.is-point-panel [hidden] { display: none !important; }
.is-point-panel button { cursor: pointer; }
.is-point-panel :is(button, input, summary):focus-visible { outline: 2px solid var(--pa-accent); outline-offset: 3px; }
.point-alert-content { overflow: auto; min-height: 0; padding: 0 24px 22px; overscroll-behavior: contain; }
.point-alert-toolbar { display: flex; align-items: center; gap: 20px; padding: 20px 0 8px; }
.point-alert-toolbar p { color: var(--pa-muted); margin: 0; font-size: 12px; line-height: 1.6; flex: 1; max-width: 34ch; }
.is-point-panel .point-alert-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: auto; min-height: 40px; padding: 10px 14px; border: 1px solid var(--pa-line); border-radius: 11px; color: var(--pa-accent); background: var(--pa-soft); font-weight: 750; font-size: 12px; white-space: nowrap; }
.is-point-panel .point-alert-primary:hover { background: var(--pa-card); transform: none; }
.is-point-panel .marker-alarm-manager-list { display: grid; overflow: visible; padding: 0; gap: 9px; }
.point-alert-section-title { display: flex; align-items: center; gap: 8px; margin: 18px 0 1px; font-size: 12px; font-weight: 750; color: var(--pa-muted); }
.point-alert-section-title span { padding: 2px 7px; font-size: 11px; background: var(--pa-soft); color: var(--pa-accent); border-radius: 6px; }
.is-point-panel .point-alert-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 16px; margin: 0; border: 1px solid var(--pa-line); border-radius: 15px; background: var(--pa-card); text-align: left; color: var(--pa-text); width: 100%; }
.is-point-panel .point-alert-row:hover { border-color: var(--pa-accent); }
.is-point-panel .point-alert-row.is-alarm, .point-alert-current.is-alarm, .point-alert-event.is-alarm { background: var(--pa-alarm-bg); }
.is-point-panel .point-alert-row.is-warning, .point-alert-current.is-warning, .point-alert-event.is-warning { background: var(--pa-warning-bg); }
.point-alert-state { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--pa-soft); color: var(--pa-accent); font-size: 14px; }
:is(.is-alarm, .is-warning, .is-armed, .is-resolved) > .point-alert-state { background: var(--pa-card); }
.is-alarm > .point-alert-state, .is-alarm .point-alert-label { color: var(--pa-alarm); }
.is-warning > .point-alert-state, .is-warning .point-alert-label { color: var(--pa-warning); }
:is(.is-armed, .is-resolved) > .point-alert-state { color: var(--pa-normal); }
.point-alert-row-copy { display: block; min-width: 0; }
.point-alert-row-copy > small { display: block; margin-bottom: 3px; color: var(--pa-muted); font-size: 10px; }
.point-alert-row-copy > strong { display: block; color: var(--pa-text); font-size: 14px; line-height: 1.4; }
.point-alert-label { display: block; color: var(--pa-muted); margin: 5px 0 0; font-size: 11px; font-weight: 650; }
.point-alert-row-bounds { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; }
.point-alert-row-bounds .point-alert-bound { background: transparent; padding: 0; display: inline-flex; flex-wrap: wrap; gap: 3px; font-size: 10px; color: var(--pa-muted); }
.point-alert-row-bounds .point-alert-bound b { color: inherit; font-weight: 600; }
.point-alert-row-value { display: flex; align-items: center; gap: 12px; align-self: center; font-size: 17px; font-weight: 800; white-space: nowrap; }
.point-alert-row-value i { color: var(--pa-muted); font-size: 10px; }
.point-alert-navigation { padding: 12px 24px 0; }
.point-alert-back { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; color: var(--pa-muted); padding: 6px 0; font-size: 12px; }
.point-alert-current { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px 12px; align-items: center; padding: 16px; margin-top: 16px; border: 1px solid var(--pa-line); border-radius: 15px; background: var(--pa-card); }
.point-alert-current strong { display: block; font-size: 14px; }
.point-alert-current div > span { display: block; font-size: 11px; color: var(--pa-muted); margin-top: 3px; }
.point-alert-current > b { font-size: 27px; letter-spacing: -.03em; }
.point-alert-current.is-alarm > b, .point-alert-current.is-alarm strong { color: var(--pa-alarm); }
.point-alert-current.is-warning > b, .point-alert-current.is-warning strong { color: var(--pa-warning); }
.point-alert-current > small { grid-column: 2 / -1; font-size: 10px; color: var(--pa-muted); line-height: 1.6; }
.point-alert-monitoring { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; margin: 0; border-bottom: 1px solid var(--pa-line); cursor: pointer; }
.point-alert-monitoring strong { display: block; color: var(--pa-text); font-size: 12px; }
.point-alert-monitoring small { color: var(--pa-muted); font-size: 11px; }
.point-alert-monitoring input { appearance: none; width: 40px; height: 24px; border-radius: 20px; border: 1px solid var(--pa-line); background: var(--pa-line); position: relative; margin: 0; cursor: pointer; }
.point-alert-monitoring input:after { content: ''; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: white; border-radius: 50%; }
.point-alert-monitoring input:checked { background: var(--pa-accent); border-color: var(--pa-accent); }
.point-alert-monitoring input:checked:after { left: 19px; }
.point-alert-monitoring input:disabled { opacity: .5; cursor: wait; }
.point-alert-thresholds { margin: 20px 0 24px; }
.point-alert-thresholds header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
:is(.point-alert-thresholds, .point-alert-history) h3 { margin: 0; color: var(--pa-text); font-size: 13px; font-weight: 750; }
.point-alert-bounds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.point-alert-bounds .point-alert-bound { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; padding: 12px; border-radius: 10px; border: 1px solid var(--pa-line); background: var(--pa-card); font-size: 11px; }
.point-alert-bounds .point-alert-bound.is-alarm { color: var(--pa-alarm); background: var(--pa-alarm-bg); }
.point-alert-bounds .point-alert-bound.is-warning { color: var(--pa-warning); background: var(--pa-warning-bg); }
.point-alert-bounds p { font-size: 12px; color: var(--pa-muted); }
.point-alert-history h3 { padding: 0 0 12px; }
.point-alert-history-events { display: grid; gap: 8px; font-size: 12px; color: var(--pa-muted); }
.point-alert-history-empty { margin: 0; padding: 20px; background: var(--pa-soft); border-radius: 12px; font-size: 12px; }
.point-alert-event { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px; border-radius: 12px; background: var(--pa-card); border: 1px solid var(--pa-line); }
.point-alert-event .point-alert-state { width: 30px; height: 30px; font-size: 12px; }
.point-alert-event strong { display: block; font-size: 12px; color: var(--pa-text); }
.point-alert-event strong small { font-size: 10px; font-weight: 400; color: var(--pa-muted); }
.point-alert-event div > span { display: block; font-size: 10px; margin: 3px 0; }
.point-alert-event time { display: block; font-size: 10px; line-height: 1.5; }
.point-alert-event > b { color: var(--pa-text); font-size: 13px; }
.point-alert-delete { margin: 20px 0 0; padding: 8px 0; display: flex; gap: 8px; border: 0; color: var(--pa-muted); background: transparent; font-size: 11px; }
.point-alert-delete:hover { color: var(--pa-alarm); }
.point-alert-search { display: flex; gap: 10px; align-items: center; margin: 16px 0; padding: 11px 14px; border: 1px solid var(--pa-line); border-radius: 11px; background: var(--pa-card); color: var(--pa-muted); }
.point-alert-search input { min-width: 0; flex: 1; background: transparent; border: 0; outline: 0; color: var(--pa-text); font-size: 13px; }
.point-alert-picker { display: grid; gap: 7px; color: var(--pa-muted); font-size: 12px; }
.point-alert-picker button { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px; border: 1px solid var(--pa-line); border-radius: 12px; background: var(--pa-card); color: var(--pa-accent); text-align: left; }
.point-alert-picker strong { display: block; color: var(--pa-text); font-size: 13px; }
.point-alert-picker small { display: block; color: var(--pa-muted); font-size: 11px; margin-top: 4px; }
.point-alert-empty { padding: 45px 12px; text-align: center; color: var(--pa-muted); font-size: 12px; }
.point-alert-empty > i { display: block; color: var(--pa-accent); font-size: 25px; margin-bottom: 14px; }
.point-alert-empty > strong { color: var(--pa-text); }
.is-point-panel .marker-alarm-manager-wizard { min-height: 0; }
.is-point-panel .marker-alarm-threshold-embed .lobibox-body { padding: 16px 24px 20px; }
.is-point-panel .marker-alarm-threshold-embed .threshold-workspace { display: flex; flex-direction: column; gap: 14px; }
.is-point-panel .marker-alarm-threshold-embed .threshold-controls { padding: 0; background: none; border: 0; }
.is-point-panel .marker-alarm-threshold-embed .threshold-status { margin-bottom: 16px; }
.is-point-panel .threshold-section-title { margin-bottom: 12px; }
.is-point-panel .threshold-section-title :is(h3, .threshold-eyebrow) { display: none; }
.is-point-panel .threshold-controls .btn-auto { margin-bottom: 12px; min-height: 40px; font-size: 12px; }
.is-point-panel .threshold-bound { padding: 12px; }
.is-point-panel .threshold-bound p { margin: 6px 0; }
.is-point-panel .threshold-bound .form-label { font-size: 11px; }
.is-point-panel .threshold-bound input[type="number"] { font-size: 20px; height: 42px; }
.is-point-panel .point-alert-preview { border: 1px solid var(--pa-line); border-radius: 12px; overflow: hidden; color: var(--pa-muted); font-size: 12px; }
.point-alert-preview > summary { padding: 13px 15px; cursor: pointer; color: var(--pa-accent); font-weight: 650; }
.is-point-panel .point-alert-preview .threshold-preview { margin: 0; border: 0; border-radius: 0; }
.is-point-panel .marker-alarm-threshold-embed .lobibox-footer { padding: 14px 24px; gap: 10px; background: var(--pa-bg); border-color: var(--pa-line); }
/* One back control, in the header. */
.is-point-panel .marker-alarm-wizard-back { display: none; }
.is-point-panel .marker-alarm-threshold-embed .lobibox-footer .btn { width: auto; min-height: 42px; }
.is-point-panel .marker-alarm-threshold-embed .lobibox-footer .btn-primary { margin-left: auto; }
@media (max-width: 767px) {
    .marker-alarm-manager.is-point-panel { padding: calc(10px + var(--safe-top, 0px)) calc(8px + var(--safe-right, 0px)) calc(10px + var(--safe-bottom, 0px)) calc(8px + var(--safe-left, 0px)); align-items: center; }
    .is-point-panel .marker-alarm-manager-window { width: 100%; max-height: calc(100dvh - 20px - var(--safe-top, 0px) - var(--safe-bottom, 0px)); border-radius: 22px; }
    .is-point-panel .marker-alarm-manager-header { grid-template-columns: 38px minmax(0, 1fr) 34px; gap: 11px; padding: 19px 17px; }
    .is-point-panel .marker-alarm-manager-header h2 { font-size: 20px; }
    .is-point-panel .marker-alarm-manager-icon { width: 38px; height: 38px; }
    .is-point-panel .marker-alarm-manager-close { width: 34px; height: 34px; }
    .point-alert-content { padding: 0 16px 18px; }
    .point-alert-navigation { padding: 10px 17px 0; }
    .point-alert-toolbar { gap: 12px; padding-top: 16px; }
    .point-alert-toolbar p { font-size: 11px; }
    .is-point-panel .point-alert-primary { padding: 9px 10px; font-size: 11px; }
    .is-point-panel .point-alert-row { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; padding: 13px 11px; }
    .point-alert-row > .point-alert-state { width: 30px; height: 30px; }
    .point-alert-row-copy > strong { font-size: 13px; }
    .point-alert-row-value { font-size: 15px; gap: 8px; }
    .point-alert-current { padding: 13px; gap: 10px; }
    .point-alert-current > b { font-size: 23px; }
    .point-alert-bounds { grid-template-columns: 1fr; }
    .is-point-panel .marker-alarm-threshold-embed .lobibox-body { padding: 16px; }
    .is-point-panel .marker-alarm-threshold-embed .lobibox-footer { padding: 12px 16px; }
    .is-point-panel .threshold-numeric-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .is-point-panel .threshold-bound { width: 100%; min-width: 0; padding: 10px; }
    .is-point-panel .threshold-bound-heading { gap: 5px; }
    .is-point-panel .threshold-bound-icon { display: none; }
    .is-point-panel .threshold-bound .form-label { font-size: 10px; }
    .is-point-panel .threshold-bound .threshold-switch { flex: 0 0 30px; }
}
/* Override legacy manager controls without changing the laboratory's standalone editor. */
.marker-alarm-manager.is-point-panel .marker-alarm-manager-add.point-alert-primary { width: auto; flex: 0 0 auto; background: var(--pa-soft); color: var(--pa-accent); }
.is-point-panel .marker-alarm-threshold-embed .lobibox-footer .marker-alarm-wizard-back { display: none; }
.is-point-panel .point-alert-monitoring > input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.point-alert-switch { position: relative; width: 40px; height: 24px; flex: 0 0 40px; border-radius: 20px; background: var(--pa-line); }
.point-alert-switch:after { content: ''; position: absolute; width: 16px; height: 16px; left: 4px; top: 4px; background: white; border-radius: 50%; }
.point-alert-monitoring > input:checked + .point-alert-switch { background: var(--pa-accent); }
.point-alert-monitoring > input:checked + .point-alert-switch:after { left: 20px; }
.point-alert-monitoring > input:focus-visible + .point-alert-switch { outline: 2px solid var(--pa-accent); outline-offset: 3px; }
.point-alert-monitoring > input:disabled + .point-alert-switch { opacity: .5; }
.is-point-panel .marker-alarm-manager-icon { font-size: 17px; }
.is-point-panel .threshold-bound .threshold-value input[type="number"] { border: 1px solid var(--pa-line); border-radius: 8px; background: var(--pa-card); color: var(--pa-text); padding: 7px 10px; }
.is-point-panel .marker-alarm-threshold-embed .threshold-controls { max-width: none; width: 100%; }
.is-point-panel .marker-alarm-threshold-embed .threshold-status { padding: 12px 14px; }
.is-point-panel .threshold-section-title { padding: 0; margin: 0 0 12px; }
.is-point-panel .threshold-section-title p { margin: 0; font-size: 12px; }
@media (max-width: 359px) {
    .is-point-panel .threshold-numeric-fields { grid-template-columns: 1fr; }
    .point-alert-toolbar { align-items: stretch; flex-direction: column; gap: 10px; }
}
@media (min-width: 768px) {
    .is-point-panel .marker-alarm-threshold-embed .lobibox-body { padding-top: 12px; padding-bottom: 12px; }
    .is-point-panel .marker-alarm-threshold-embed .threshold-status { padding: 8px 14px; margin-bottom: 12px; }
    .is-point-panel .threshold-section-title { margin-bottom: 8px; }
    .is-point-panel .threshold-bound { padding: 10px; }
    .is-point-panel .point-alert-preview > summary { padding-top: 11px; padding-bottom: 11px; }
}


/* features/privacy-consent/privacy-consent.css */
#waterly-privacy {
	--privacy-primary: #2193f3;
	--privacy-primary-hover: #1976d2;
	--privacy-bg: #121c25;
	--privacy-bg-soft: #1b2833;
	--privacy-text: #f5f8fb;
	--privacy-muted: #b6c3ce;
	--privacy-border: #344653;
	--privacy-shadow: 0 -8px 36px rgba(0, 0, 0, 0.5);
	position: relative;
	z-index: 2147483000;
	font-family: var(--wl-font-sans, "Geist", "Segoe UI", Arial, sans-serif);
	line-height: 1.5;
}

#waterly-privacy,
#waterly-privacy *,
#waterly-privacy *::before,
#waterly-privacy *::after {
	box-sizing: border-box;
}

#waterly-privacy[data-privacy-theme="light"] {
	--privacy-bg: #ffffff;
	--privacy-bg-soft: #f4f7fa;
	--privacy-text: #202833;
	--privacy-muted: #5d6a78;
	--privacy-border: #d9e0e7;
	--privacy-shadow: 0 -8px 36px rgba(0, 27, 57, 0.22);
}

#waterly-privacy [hidden] { display: none !important; }

.waterly-consent-banner {
	position: fixed;
	right: 16px;
	bottom: 16px;
	left: 16px;
	display: flex;
	align-items: center;
	gap: 28px;
	max-width: 1180px;
	margin: 0 auto;
	padding: 22px 24px;
	color: var(--privacy-text);
	background: var(--privacy-bg);
	border: 1px solid var(--privacy-border);
	border-radius: 16px;
	box-shadow: var(--privacy-shadow);
	opacity: 0;
	pointer-events: none;
	transform: translateY(14px);
	transition: opacity 0.28s ease, transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

.waterly-consent-banner.is-visible {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}

.waterly-consent-copy { display: flex; flex: 1; gap: 16px; min-width: 0; }
.waterly-consent-icon {
	display: flex;
	flex: 0 0 42px;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	color: var(--privacy-primary);
	background: rgba(33, 147, 243, 0.12);
	border-radius: 12px;
	font-size: 20px;
}

.waterly-consent-copy h2,
.waterly-privacy-dialog h2,
.waterly-privacy-category h3 {
	margin: 0;
	color: var(--privacy-text);
	font-weight: 700;
}

.waterly-consent-copy h2 { margin-bottom: 4px; font-size: 18px; }
.waterly-consent-copy p {
	max-width: 760px;
	margin: 0 0 5px;
	color: var(--privacy-muted);
	font-size: 13px;
}

.waterly-consent-copy a,
.waterly-privacy-policy-link {
	color: var(--privacy-primary);
	font-size: 13px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.waterly-consent-actions { display: flex; flex: 0 0 auto; gap: 10px; }
.waterly-consent-button,
.waterly-privacy-close,

.waterly-consent-button {
	min-height: 42px;
	padding: 9px 16px;
	border: 1px solid var(--privacy-primary);
	border-radius: 10px;
	font-size: 13px;
	font-weight: 700;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.waterly-consent-primary { color: #ffffff; background: var(--privacy-primary); }
.waterly-consent-primary:hover { background: var(--privacy-primary-hover); border-color: var(--privacy-primary-hover); }
.waterly-consent-secondary { color: var(--privacy-primary); background: transparent; }
.waterly-consent-secondary:hover {
	color: #ffffff;
	background: var(--privacy-primary-hover);
	border-color: var(--privacy-primary-hover);
}

.waterly-consent-button:focus-visible,
.waterly-privacy-close:focus-visible,


.waterly-privacy-backdrop {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(5, 14, 24, 0.72);
	backdrop-filter: blur(3px);
}

.waterly-privacy-dialog {
	width: 100%;
	max-width: 680px;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	padding: 26px;
	color: var(--privacy-text);
	background: var(--privacy-bg);
	border: 1px solid var(--privacy-border);
	border-radius: 16px;
	box-shadow: 0 22px 70px rgba(0, 0, 0, 0.38);
}

.waterly-privacy-dialog header {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	justify-content: space-between;
}

.waterly-privacy-dialog h2 { font-size: 22px; }
.waterly-privacy-dialog header p { margin: 6px 0 0; color: var(--privacy-muted); font-size: 14px; }
.waterly-privacy-close {
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	padding: 0;
	color: var(--privacy-muted);
	background: transparent;
	border: 1px solid var(--privacy-border);
	border-radius: 9px;
	font-size: 25px;
	line-height: 30px;
}

.waterly-privacy-categories { display: grid; gap: 12px; margin: 22px 0 16px; }
.waterly-privacy-category {
	display: flex;
	gap: 18px;
	align-items: center;
	justify-content: space-between;
	padding: 16px;
	background: var(--privacy-bg-soft);
	border: 1px solid var(--privacy-border);
	border-radius: 12px;
}

.waterly-privacy-category h3 { font-size: 15px; }
.waterly-privacy-category p { margin: 4px 0 0; color: var(--privacy-muted); font-size: 12px; }
.waterly-privacy-category-toggle { cursor: pointer; }
.waterly-privacy-required {
	flex: 0 0 auto;
	color: var(--privacy-primary);
	font-size: 11px;
	font-weight: 700;
	text-align: right;
}

.waterly-privacy-switch { position: relative; flex: 0 0 46px; width: 46px; height: 26px; }
.waterly-privacy-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.waterly-privacy-switch span {
	position: absolute;
	inset: 0;
	background: #929ca7;
	border-radius: 20px;
	transition: background-color 0.2s ease;
}

.waterly-privacy-switch span::after {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	content: "";
	background: #ffffff;
	border-radius: 50%;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
	transition: transform 0.2s ease;
}

.waterly-privacy-switch input:checked + span { background: var(--privacy-primary); }
.waterly-privacy-switch input:checked + span::after { transform: translateX(20px); }
.waterly-privacy-storage { padding: 16px; border: 1px solid var(--privacy-border); border-radius: 12px; }
.waterly-privacy-storage h3 { margin: 0 0 10px; color: var(--privacy-text); font-size: 14px; font-weight: 700; }
.waterly-privacy-storage dl { display: grid; gap: 9px; margin: 0; }
.waterly-privacy-storage dl > div {
	display: grid;
	grid-template-columns: minmax(125px, 0.7fr) minmax(0, 1.8fr);
	gap: 12px;
}

.waterly-privacy-storage dt { color: var(--privacy-text); font-size: 12px; font-weight: 700; }
.waterly-privacy-storage dd { margin: 0; color: var(--privacy-muted); font-size: 12px; }
.waterly-privacy-storage dd::before { content: "— "; }
.waterly-privacy-controller {
	display: grid;
	gap: 10px;
	margin: 16px 0 10px;
	padding: 14px 16px;
	color: var(--privacy-muted);
	background: var(--privacy-bg-soft);
	border: 1px solid var(--privacy-border);
	border-radius: 12px;
	font-size: 12px;
}

.waterly-privacy-controller-company,
.waterly-privacy-controller-address,
.waterly-privacy-controller-links,
.waterly-privacy-controller-company > div {
	display: flex;
	align-items: center;
}

.waterly-privacy-controller-company { gap: 10px; }
.waterly-privacy-controller-company > div { align-items: flex-start; flex-direction: column; }
.waterly-privacy-controller-company strong { color: var(--privacy-text); font-size: 13px; }
.waterly-privacy-controller-company span { color: var(--privacy-muted); }
.waterly-privacy-controller-icon {
	display: grid;
	flex: 0 0 34px;
	width: 34px;
	height: 34px;
	color: var(--privacy-primary) !important;
	background: rgba(33, 147, 243, 0.12);
	border-radius: 9px;
	place-items: center;
}

.waterly-privacy-controller-address { gap: 8px; padding-left: 3px; }
.waterly-privacy-controller-address i { width: 20px; color: var(--privacy-primary); text-align: center; }
.waterly-privacy-controller-links { flex-wrap: wrap; gap: 8px; }
.waterly-privacy-controller-links a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 32px;
	padding: 6px 10px;
	color: var(--privacy-primary);
	background: var(--privacy-bg);
	border: 1px solid var(--privacy-border);
	border-radius: 8px;
	font-weight: 600;
	text-decoration: none;
}

.waterly-privacy-controller-links a:hover { color: #ffffff; background: var(--privacy-primary); border-color: var(--privacy-primary); }
.waterly-privacy-dialog footer {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--privacy-border);
}

body.waterly-privacy-open { overflow: hidden; }

@media (max-width: 900px) {
	.waterly-consent-banner {
		align-items: stretch;
		flex-direction: column;
		gap: 16px;
		max-height: calc(100vh - 32px);
		overflow-y: auto;
	}
	.waterly-consent-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
	.waterly-consent-banner {
		right: 8px;
		bottom: 8px;
		left: 8px;
		padding: 18px;
		border-radius: 14px;
	}
	.waterly-consent-icon { display: none; }
	.waterly-consent-actions { grid-template-columns: 1fr; }
	.waterly-consent-actions .waterly-consent-primary { order: -1; }
	.waterly-privacy-backdrop { align-items: flex-end; padding: 8px; }
	.waterly-privacy-dialog { max-height: calc(100vh - 16px); padding: 20px; border-radius: 14px; }
	.waterly-privacy-category { align-items: flex-start; }
	.waterly-privacy-storage dl > div { grid-template-columns: 1fr; gap: 2px; }
	.waterly-privacy-dialog footer { flex-direction: column-reverse; }
}

@media (prefers-reduced-motion: reduce) {
	#waterly-privacy * { scroll-behavior: auto !important; transition: none !important; }
}


/* features/profile/developer/developer.css */
/**************************************************************************************************
	@author         waterly.eu
	@contributors   Rafał Złotorzyński
	@module         subpage_developer
	@file           account_developer.css

	Zakładka "API i widgety" w ustawieniach konta. Style trzymają się języka pozostałych sekcji
	arkusza (profile.css): ciemna baza, jasny motyw dopisany w zz_theme.css.
**************************************************************************************************/

/* Przełącznik sekcji ------------------------------------------------------ */
.developer-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 14px;
}

.developer-switch-option {
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 9px 12px;
    border: 1px solid rgba(143, 184, 220, 0.13);
    border-radius: 11px;
    color: #9dacb5;
    background: rgba(255, 255, 255, 0.025);
    font-size: 11px;
    font-weight: 750;
    cursor: pointer;
    transition: 0.16s ease;
}
.developer-switch-option i { font-size: 13px; }
.developer-switch-option:hover,
.developer-switch-option.selected {
    border-color: rgba(101, 184, 255, 0.45);
    color: #ffffff;
    background: rgba(33, 150, 243, 0.14);
}

/* Karty sekcji ------------------------------------------------------------ */
.developer-card {
    margin-bottom: 14px;
    padding: 14px;
    border: 1px solid rgba(143, 184, 220, 0.14);
    border-radius: 14px;
    background: rgba(6, 11, 15, 0.25);
}

.developer-card-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.developer-card-heading > div:nth-child(2) { flex: 1 1 auto; min-width: 0; }
.developer-card-heading h3 { margin: 2px 0 0; color: #edf5f8; font-size: 16px; font-weight: 800; }
.developer-card-heading p { margin: 4px 0 0; color: #7e8d97; font-size: 10px; line-height: 1.5; }
.developer-card-heading .btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; font-size: 11px; }

/* Pola formularzy --------------------------------------------------------- */
.developer-field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.developer-field { display: block; margin: 0 0 14px; }
.developer-field-grid .developer-field { margin: 0; }
.developer-field > span {
    display: block;
    margin-bottom: 6px;
    color: #aebdc5;
    font-size: 10px;
    font-weight: 750;
}
.developer-field small { display: block; margin-top: 5px; color: #6f818c; font-size: 9px; line-height: 1.5; }
.developer-field textarea { resize: vertical; font-family: var(--wl-font-mono); font-size: 11px; }
.developer-field input[type="color"] { height: 38px; padding: 4px; cursor: pointer; }

.developer-form-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 4px; }
.developer-form-actions .btn { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; }

/* Przyciski wyboru (układ, motyw, elementy) -------------------------------- */
.developer-option-row { display: flex; flex-wrap: wrap; gap: 7px; }
.developer-option {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border: 1px solid rgba(143, 184, 220, 0.13);
    border-radius: 9px;
    color: #9dacb5;
    background: rgba(255, 255, 255, 0.025);
    font-size: 10px;
    font-weight: 750;
    cursor: pointer;
    transition: 0.16s ease;
}
.developer-option i { color: #718895; font-size: 12px; }
.developer-option:hover,
.developer-option.selected {
    border-color: rgba(101, 184, 255, 0.45);
    color: #ffffff;
    background: rgba(33, 150, 243, 0.14);
}
.developer-option.selected i { color: #79c2ff; }

/* Pusta lista ------------------------------------------------------------- */
.developer-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    padding: 34px 16px;
    color: #6f818c;
    text-align: center;
}
.developer-empty i { color: #587586; font-size: 22px; }
.developer-empty strong { font-size: 10px; font-weight: 750; }

/* Panel z nowo utworzonym tokenem ----------------------------------------- */
.api-key-created {
    margin-bottom: 16px;
    padding: 16px;
    border: 1px solid rgba(32, 201, 151, 0.3);
    border-radius: 12px;
    background: rgba(32, 201, 151, 0.06);
}
.api-key-created-heading { display: flex; align-items: flex-start; gap: 11px; }
.api-key-created-heading > i { color: #4fd6a8; font-size: 19px; }
.api-key-created-heading strong { display: block; color: #d8f5ec; font-size: 12px; }
.api-key-created-heading span { display: block; margin-top: 4px; color: #93b8ad; font-size: 10px; line-height: 1.55; }
.api-key-created-token {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 13px 0 4px;
    padding: 11px 13px;
    border: 1px dashed rgba(32, 201, 151, 0.34);
    border-radius: 9px;
    background: rgba(4, 12, 10, 0.4);
}
.api-key-created-token code {
    flex: 1 1 auto;
    min-width: 0;
    color: #86e9c4;
    font-size: 11px;
    word-break: break-all;
}
.api-key-created-token .btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; font-size: 10px; }
.api-key-created-close { padding: 4px 0 0; color: #8aa79f !important; font-size: 10px; }

/* Wiersze list ------------------------------------------------------------ */
.api-key-row,
.widget-row {
    margin-top: 11px;
    padding: 15px 16px;
    border: 1px solid rgba(143, 184, 220, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.022);
}

.api-key-row-header,
.widget-row-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.api-key-row-title,
.widget-row-title { min-width: 0; }
.api-key-row-title strong,
.widget-row-title strong { display: block; color: #e9f2f6; font-size: 13px; font-weight: 800; }
.api-key-row-title code { display: block; margin-top: 3px; color: #7f939f; font-size: 10px; }
.widget-row-title span { display: block; margin-top: 3px; color: #7f939f; font-size: 10px; }

.api-key-state {
    flex: 0 0 auto;
    padding: 5px 10px;
    border-radius: 99px;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}
.api-key-state.is-active   { color: #8ee3c3; border: 1px solid rgba(32, 201, 151, 0.28); background: rgba(32, 201, 151, 0.08); }
.api-key-state.is-disabled { color: #c7b98d; border: 1px solid rgba(233, 196, 106, 0.26); background: rgba(233, 196, 106, 0.08); }
.api-key-state.is-expired,
.api-key-state.is-revoked  { color: #ff9ba4; border: 1px solid rgba(255, 101, 116, 0.26); background: rgba(255, 101, 116, 0.08); }

.api-key-row-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
    margin-top: 13px;
    padding-top: 13px;
    border-top: 1px solid rgba(143, 184, 220, 0.08);
}
.api-key-row-meta span { display: block; color: #6f818c; font-size: 8px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.api-key-row-meta strong { display: block; margin-top: 3px; color: #cdd9df; font-size: 11px; font-weight: 700; }

/* Zużycie okna rozliczeniowego */
.api-key-usage { margin-top: 11px; }
.api-key-usage-bar {
    height: 5px;
    overflow: hidden;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.06);
}
.api-key-usage-bar i {
    display: block;
    height: 100%;
    border-radius: 99px;
    background: #4a9fe0;
    transition: width 0.25s ease;
}
.api-key-usage-bar i.is-warning  { background: #e9c46a; }
.api-key-usage-bar i.is-critical { background: #ff6574; }
.api-key-usage small { display: block; margin-top: 5px; color: #6f818c; font-size: 9px; }

.api-key-origins-view,
.api-key-permission-chips { margin-top: 12px; }
.api-key-origins-view > span,
.api-key-permission-chips > span {
    display: block;
    margin-bottom: 6px;
    color: #6f818c;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.api-key-origin-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.api-key-origin-chips code,
.api-key-permission-chips code {
    padding: 4px 9px;
    border: 1px solid rgba(101, 184, 255, 0.19);
    border-radius: 99px;
    color: #9fcdf1;
    background: rgba(33, 150, 243, 0.07);
    font-size: 9px;
}
.api-key-permission-chips { display: block; }
.api-key-permission-chips code { display: inline-block; margin: 0 5px 5px 0; }
.api-key-origin-any,
.api-key-permission-chips em { color: #85949d; font-size: 10px; font-style: normal; }

.api-key-editor { margin-top: 12px; }
.api-key-editor textarea { font-family: var(--wl-font-mono); font-size: 11px; }
.api-key-editor small { display: block; margin: 5px 0 9px; color: #6f818c; font-size: 9px; }

.api-key-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.api-key-actions .btn { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; }
.api-key-actions .btn.is-copied,
.widget-code-copy.is-copied { border-color: rgba(32, 201, 151, 0.45) !important; color: #8ee3c3 !important; }

/* Dokumentacja API -------------------------------------------------------- */
.api-docs-row + .api-docs-row { margin-top: 13px; }
.api-docs-row strong {
    display: block;
    margin-bottom: 6px;
    color: #6f818c;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}
.api-docs-endpoint {
    display: block;
    padding: 9px 12px;
    border: 1px solid rgba(143, 184, 220, 0.12);
    border-radius: 9px;
    color: #9fcdf1;
    background: rgba(4, 9, 13, 0.4);
    font-size: 11px;
    word-break: break-all;
}
.api-docs-example {
    margin: 0;
    padding: 12px 14px;
    overflow-x: auto;
    border: 1px solid rgba(143, 184, 220, 0.12);
    border-radius: 9px;
    background: rgba(4, 9, 13, 0.4);
}
.api-docs-example code { color: #b9cbd6; font-size: 10.5px; line-height: 1.65; white-space: pre; }
.api-docs-note { margin: 12px 0 0; color: #6f818c; font-size: 9px; line-height: 1.6; }

/* Generator widgetów ------------------------------------------------------ */
.widget-generator {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.85fr);
    gap: 18px;
    align-items: start;
}

.widget-generator-preview {
    position: sticky;
    top: 8px;
    padding: 16px;
    border: 1px solid rgba(143, 184, 220, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.022);
}
.widget-preview-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 11px; }
.widget-preview-heading strong { color: #dce7ed; font-size: 11px; font-weight: 800; }
.widget-preview-size { color: #6f818c; font-size: 9px; }

.widget-preview-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    padding: 18px;
    overflow: auto;
    border: 1px solid rgba(143, 184, 220, 0.1);
    border-radius: 11px;
    /* Szachownica pokazuje, że widget nie ma własnego tła strony */
    background-color: rgba(4, 9, 13, 0.35);
    background-image:
        linear-gradient(45deg, rgba(255, 255, 255, 0.022) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.022) 75%),
        linear-gradient(45deg, rgba(255, 255, 255, 0.022) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.022) 75%);
    background-size: 18px 18px;
    background-position: 0 0, 9px 9px;
}
/* Ramka przeładowuje się przy każdej zmianie ustawień, a osadzony widget przez chwilę
   wygląda wtedy jak nieułożona strona. Loader zasłania ten moment. */
.widget-preview-loader {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border-radius: 11px;
    background: rgba(4, 9, 13, 0.72);
    backdrop-filter: blur(2px);
}
.widget-preview-loader[hidden] { display: none; }
.widget-preview-loader small { color: #7f939f; font-size: 9.5px; letter-spacing: 0.03em; }
.widget-preview-spinner {
    width: 20px;
    height: 20px;
    display: block;
    border: 2px solid rgba(143, 184, 220, 0.18);
    border-top-color: #4bb6e8;
    border-radius: 50%;
    animation: widget-preview-spin 0.7s linear infinite;
}
@keyframes widget-preview-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .widget-preview-spinner { animation-duration: 2.4s; }
}

/* Dopóki trwa ładowanie, sama ramka jest wygaszona - po jej odsłonięciu widget jest już złożony */
.widget-preview-frame.is-loading { opacity: 0; }
.widget-preview-frame {
    display: block;
    transition: opacity .18s ease;
    max-width: 100%;
    overflow: hidden;
    border: 0;
    border-radius: 20px;
    background: transparent;
}

.widget-code-block { margin-top: 14px; }
.widget-code-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.widget-code-heading strong { color: #dce7ed; font-size: 11px; font-weight: 800; }
.widget-code-heading .btn { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; }
.widget-code {
    margin: 0;
    padding: 12px 13px;
    overflow-x: auto;
    border: 1px solid rgba(143, 184, 220, 0.12);
    border-radius: 9px;
    background: rgba(4, 9, 13, 0.45);
}
.widget-code code { color: #b9cbd6; font-size: 10.5px; line-height: 1.6; white-space: pre; }
.widget-code-hint { display: block; margin-top: 8px; color: #6f818c; font-size: 9px; line-height: 1.55; }

/* Layout na węższych ekranach --------------------------------------------- */
@media (max-width: 1100px) {
    .widget-generator { grid-template-columns: minmax(0, 1fr); }
    .widget-generator-preview { position: static; }
}

@media (max-width: 640px) {
    .developer-card { padding: 15px; }
    .developer-card-heading { flex-wrap: wrap; }
    .developer-card-heading .btn { width: 100%; justify-content: center; }
    .api-key-row-header,
    .widget-row-header { flex-direction: column; }
    .api-key-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* Integration tools use an explicit palette in both application themes. */
#settings-body-developer {
    --developer-ink: #e7f2f7;
    --developer-muted: #9aaebc;
    --developer-border: #2d4656;
    --developer-surface: #14232d;
    --developer-inset: #101c25;
    --developer-hover: #1c3342;
    --developer-accent: #85cdff;
    --developer-accent-soft: #1a3a50;
    --developer-selected-border: #4e9cca;
    --developer-success: #95dfca;
    --developer-success-bg: #14372d;
    --developer-warning-ink: #ebc58b;
    --developer-warning-bg: #2b251d;
    --developer-warning-border: #5b4730;
    --developer-checker: rgba(138, 186, 211, .045);
    min-width: 0;
}
html[data-theme="light"] #settings-body-developer {
    --developer-ink: #203e50;
    --developer-muted: #587282;
    --developer-border: #d0e0e9;
    --developer-surface: #ffffff;
    --developer-inset: #f2f7fb;
    --developer-hover: #e9f4fb;
    --developer-accent: #116ca0;
    --developer-accent-soft: #e4f3ff;
    --developer-selected-border: #75b8dd;
    --developer-success: #187253;
    --developer-success-bg: #e8f7ef;
    --developer-warning-ink: #856026;
    --developer-warning-bg: #fff9ee;
    --developer-warning-border: #ecd9b5;
    --developer-checker: rgba(41, 109, 149, .055);
}

#settings-body-developer .account-section-hero {
    min-height: 0;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 16px;
    padding: 8px 4px;
    border: 0;
    background: transparent;
}
#settings-body-developer .account-section-hero-icon { width: 44px; height: 44px; flex-basis: 44px; border-radius: 16px; color: var(--developer-accent); background: var(--developer-accent-soft); font-size: 22px; }
#settings-body-developer .account-section-hero-icon span { display: none; }
#settings-body-developer .account-section-hero h2 { color: var(--developer-ink); font-size: 23px; }
#settings-body-developer .account-section-hero p { color: var(--developer-muted); font-size: 12px; }
#settings-body-developer .developer-field-grid { grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }
#settings-body-developer .developer-field,
#settings-body-developer .widget-generator-form { min-width: 0; }

#settings-body-developer .developer-switch {
    max-width: 460px;
    gap: 5px;
    padding: 5px;
    border: 0;
    border-radius: 12px;
    background: var(--developer-inset);
}
#settings-body-developer .developer-switch-option {
    border-color: transparent;
    color: var(--developer-muted);
    background: transparent;
    border-radius: 11px;
    font-size: 12px;
}
#settings-body-developer .developer-switch-option.selected {
    border-color: var(--developer-border);
    color: var(--developer-accent);
    background: var(--developer-surface);
    box-shadow: 0 3px 9px rgba(7, 49, 74, .07);
}
#settings-body-developer .developer-card {
    min-width: 0;
    border-color: var(--developer-border);
    border-radius: 18px;
    background: linear-gradient(145deg, var(--developer-surface), var(--developer-inset));
}
#settings-body-developer .developer-card-heading h3 { color: var(--developer-ink); font-size: 17px; }
#settings-body-developer .developer-card-heading p { color: var(--developer-muted); font-size: 12px; }
#settings-body-developer .developer-field > span { color: var(--developer-ink); font-size: 11px; }
#settings-body-developer .developer-field small { color: var(--developer-muted); font-size: 11px; font-weight: 400; }
.domain-rules { max-width: 720px; }
.domain-rules-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.domain-rule { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--developer-border); border-radius: 8px; background: var(--developer-inset); }
.domain-rule > i { color: var(--developer-accent); }
#settings-body-developer .domain-rule .domain-rule-input { width: 100%; min-width: 0; min-height: 40px; padding: 8px 0; border: 0 !important; background: transparent !important; font-family: var(--wl-font-mono); font-size: 13px; box-shadow: none; }
.domain-rule:focus-within { border-color: #2FABE4; outline: 2px solid #2FABE4; outline-offset: 2px; }
html[data-theme="light"] .domain-rule:focus-within { border-color: #0F6DB3; outline-color: #0F6DB3; }
#settings-body-developer .domain-rule-remove { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; color: var(--developer-muted); background: transparent; }
#settings-body-developer .domain-rule-remove:hover { color: var(--developer-ink); background: var(--developer-hover); }
#settings-body-developer .domain-rule-add { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; border: 1px solid var(--developer-border); color: var(--developer-accent); background: transparent; }
#settings-body-developer .domain-rule-add:hover { border-color: var(--developer-selected-border); background: var(--developer-hover); }
.domain-rules-empty { margin: 0; padding: 12px; border: 1px dashed var(--developer-border); border-radius: 8px; color: var(--developer-muted); font-size: 12px; }
.domain-rules-empty[hidden] { display: none; }
.domain-rules + small { font-style: normal; }

/* Keep native keyboard selection while matching the adjacent account inputs. */
#settings-body-developer .api-key-select {
    appearance: none;
    min-height: 42px;
    width: 100%;
    padding: 8px 40px 8px 12px;
    border: 1px solid #647d90 !important;
    border-radius: 9px !important;
    color: #e9f1f5 !important;
    background-color: #17232c !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23E8F3FB' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    font-family: var(--wl-font-sans);
    text-align: left !important;
    text-align-last: left;
}
#settings-body-developer .api-key-select:hover:not(:focus) { border-color: #8faabd !important; }
#settings-body-developer .api-key-select:focus {
    border-color: #2FABE4 !important;
    outline: 2px solid #2FABE4 !important;
    outline-offset: 2px;
    box-shadow: none;
}
html[data-theme="light"] #settings-body-developer .api-key-select {
    border-color: #7b919f !important;
    color: #1d303c !important;
    background-color: #ffffff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%230F6DB3' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
}
html[data-theme="light"] #settings-body-developer .api-key-select:hover:not(:focus) { border-color: #526f82 !important; }
html[data-theme="light"] #settings-body-developer .api-key-select:focus {
    border-color: #0F6DB3 !important;
    outline-color: #0F6DB3 !important;
    box-shadow: none;
}
#settings-body-developer .developer-option {
    min-height: 44px;
    padding: 10px 13px;
    border-color: var(--developer-border);
    border-radius: 12px;
    color: var(--developer-ink);
    background: var(--developer-surface);
    font-size: 11px;
    font-weight: 600;
    transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
#settings-body-developer .developer-option i { color: var(--developer-muted); font-size: 14px; }
#settings-body-developer .developer-option:hover { border-color: var(--developer-selected-border); background: var(--developer-hover); }
#settings-body-developer .developer-option.selected {
    border-color: var(--developer-selected-border);
    color: var(--developer-accent);
    background: var(--developer-accent-soft);
    box-shadow: inset 0 0 0 1px var(--developer-selected-border);
}
#settings-body-developer .developer-option.selected i { color: var(--developer-accent); }
#settings-body-developer button:focus-visible { outline: 2px solid var(--developer-accent); outline-offset: 3px; }

/* Address builder: configuration followed by two clearly distinct outputs. */
.api-builder {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 14px;
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid var(--developer-border);
    min-width: 0;
}
.api-builder > * { grid-column: 1 / -1; min-width: 0; }
.api-builder-heading { display: flex; align-items: center; gap: 12px; }
.api-builder-heading-icon {
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    height: 42px;
    border: 1px solid var(--developer-selected-border);
    border-radius: 13px;
    color: var(--developer-accent);
    background: var(--developer-accent-soft);
    font-size: 16px;
}
#settings-body-developer .api-builder-heading strong { margin: 0; color: var(--developer-ink); font-size: 16px; letter-spacing: 0; text-transform: none; }
.api-builder-description { margin: 4px 0 0; color: var(--developer-muted); font-size: 12px; line-height: 1.55; }
.api-builder .api-builder-field { margin: 0; }
.api-builder .api-builder-key { font-family: var(--wl-font-mono); font-size: 12px; }

.api-builder-devices-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.api-builder-devices-heading > span { color: var(--developer-ink); font-size: 11px; font-weight: 750; }
.api-builder-devices-all {
    flex: 0 0 auto;
    padding: 6px 10px;
    border: 1px solid var(--developer-border);
    border-radius: 8px;
    color: var(--developer-accent);
    background: var(--developer-surface);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}
.api-builder-devices-all:hover { border-color: var(--developer-selected-border); background: var(--developer-hover); }
.api-builder-devices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
    gap: 8px;
    max-height: 224px;
    padding: 10px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--developer-border);
    border-radius: 15px;
    background: var(--developer-inset);
    scrollbar-width: thin;
    scrollbar-color: var(--developer-selected-border) transparent;
}
.api-builder-devices:empty { display: none; }
#settings-body-developer .api-builder-device { min-width: 0; justify-content: flex-start; gap: 10px; text-align: left; }
.api-builder-device i { flex: 0 0 auto; }
.api-builder-device span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.api-builder-devices-empty { grid-column: 1 / -1; padding: 10px; color: var(--developer-muted); font-size: 12px; }
.api-builder-devices::-webkit-scrollbar { width: 7px; }
.api-builder-devices::-webkit-scrollbar-track { background: transparent; }
.api-builder-devices::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 99px; background: var(--developer-selected-border); background-clip: content-box; }

.api-builder > .api-builder-line {
    grid-column: auto;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 14px;
    border: 1px solid var(--developer-border);
    border-radius: 15px;
    background: var(--developer-surface);
    box-shadow: 0 5px 16px rgba(7, 49, 74, .035);
}
.api-builder-line-heading { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.api-builder-line-heading > i { color: var(--developer-accent); font-size: 13px; }
.api-builder-line-heading > span { flex: 1 1 auto; color: var(--developer-ink); font-size: 10px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
#settings-body-developer .api-builder-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    gap: 6px;
    min-height: 34px;
    padding: 6px 10px;
    border: 1px solid var(--developer-border);
    border-radius: 9px;
    color: var(--developer-accent);
    background: var(--developer-inset);
    font-size: 11px;
}
#settings-body-developer .api-builder-copy:hover:not(:disabled) { border-color: var(--developer-selected-border); background: var(--developer-accent-soft); }
#settings-body-developer .api-builder-copy.is-copied { color: var(--developer-success); border-color: var(--developer-success); background: var(--developer-success-bg); }
#settings-body-developer .api-builder-copy:disabled { opacity: .5; }
.api-builder-url,
.api-builder-url-encoded {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    min-height: 76px;
    padding: 12px;
    overflow-wrap: anywhere;
    white-space: normal;
    border: 1px solid var(--developer-border);
    border-radius: 10px;
    color: var(--developer-ink);
    background: var(--developer-inset);
    font-family: var(--wl-font-mono);
    font-size: 11.5px;
    line-height: 1.7;
    user-select: text;
}
.api-builder-url.is-empty,
.api-builder-url-encoded.is-empty { border-style: dashed; color: var(--developer-muted); font-style: italic; }
.api-builder-warning {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: -4px 0 0;
    padding: 10px 12px;
    border: 1px solid var(--developer-warning-border);
    border-radius: 11px;
    color: var(--developer-warning-ink);
    background: var(--developer-warning-bg);
    font-size: 11px;
    line-height: 1.6;
}
.api-builder-warning > i { flex: 0 0 auto; margin-top: 3px; }
.api-builder-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.api-builder-actions .btn { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; }
.api-builder-status { color: var(--developer-muted); font-size: 11px; }
.api-builder-status.is-success { color: #46b88f; }
.api-builder-status.is-error { color: #df7987; }
.api-builder-result { max-height: 260px; margin: 0; padding: 14px; overflow: auto; border: 1px solid var(--developer-border); border-radius: 12px; background: var(--developer-inset); }
.api-builder-result code { color: var(--developer-ink); font-size: 11px; line-height: 1.6; white-space: pre; }

#settings-body-developer .widget-generator-preview { min-width: 0; padding: 16px; border-color: var(--developer-border); border-radius: 16px; background: var(--developer-surface); }
#settings-body-developer .widget-preview-stage {
    border-color: var(--developer-border);
    background-color: var(--developer-inset);
    background-image: linear-gradient(45deg, var(--developer-checker) 25%, transparent 25%, transparent 75%, var(--developer-checker) 75%), linear-gradient(45deg, var(--developer-checker) 25%, transparent 25%, transparent 75%, var(--developer-checker) 75%);
}
#settings-body-developer .widget-code { border-color: var(--developer-border); background: var(--developer-inset); }
#settings-body-developer .widget-code code { color: var(--developer-ink); }
#settings-body-developer .widget-preview-heading strong,
#settings-body-developer .widget-code-heading strong { color: var(--developer-ink); font-size: 12px; }
#settings-body-developer .api-docs-row > strong,
#settings-body-developer .api-docs-note,
#settings-body-developer .widget-code-hint { color: var(--developer-muted); font-size: 11px; }

@media (max-width: 700px) {
    .api-builder { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .api-builder > .api-builder-line { grid-column: 1; padding: 12px; }
    .api-builder-devices { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); max-height: 240px; padding: 8px; }
    .api-builder-line-heading > span { font-size: 9px; }
    #settings-body-developer .account-section-hero { gap: 11px; padding: 8px 4px; }
    #settings-body-developer .account-section-hero-icon { width: 38px; height: 38px; border-radius: 11px; font-size: 17px; }
    #settings-body-developer .account-section-hero h2 { font-size: 20px; }
    #settings-body-developer .widget-parameter-format { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
}

.widget-card-settings[hidden], .widget-secondary-settings[hidden], .widget-selection-error[hidden] { display: none; }
.widget-card-settings { display: grid; gap: 12px; }
.widget-secondary-settings { display: grid; gap: 12px; padding-left: 14px; border-left: 2px solid #377ea5; }
.widget-overview-hint { margin: 0; color: #9eb5c4; font-size: 11px; line-height: 1.6; }
.widget-selection-error { color: #ffaaa8; font-size: 11px; }
html[data-theme="light"] .widget-overview-hint { color: #4d6575; }
html[data-theme="light"] .widget-selection-error { color: #ab2525; }

.widget-parameter-picker { display: grid; gap: 10px; max-height: 480px; overflow: auto; padding-right: 5px; }
.widget-parameter-section summary { padding: 8px 0; color: #9eb5c4; font-weight: 700; }
.widget-parameter-choice { padding: 9px 0; border-bottom: 1px solid #647d9040; }
.widget-parameter-check, .widget-wqi-choice { display: flex; gap: 9px; align-items: center; cursor: pointer; }
.widget-parameter-format { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 8px; margin: 9px 0 2px 24px; }
.widget-parameter-format[hidden], .widget-generator-form label[hidden] { display: none; }
.widget-parameter-format .form-control { min-width: 0; width: 100%; }
html[data-theme="light"] .widget-parameter-section summary { color: #4d6575; }

#settings-body-developer .developer-card { border: 0; padding: 14px; margin-bottom: 10px; border-radius: 12px; }
#settings-body-developer .api-key-row { padding: 12px 0 0; border: 0; border-radius: 0; background: transparent; }
#settings-body-developer .api-key-row + .api-key-row { border-top: 1px solid var(--developer-border); margin-top: 14px; }
#settings-body-developer .api-key-row-meta { margin-top: 10px; padding-top: 10px; }
#settings-body-developer :is(.api-key-origins-view, .api-key-permission-chips) { margin-top: 8px; }


/* features/profile/profile.css */
/**************************************************************************************************
	@author         hommie.pl
	@contributors   Rafał Złotorzyński
	@module         hommie_settings
	@file           settings.css
**************************************************************************************************/



.account-settings .user-profile {
    margin: 0 0 1rem 0;
    padding-bottom: 1rem;
    text-align: center;
}
.account-settings .user-profile .user-avatar {
    margin: 0 0 1rem 0;
}
.account-settings .user-profile .user-avatar i.bi,
.account-settings .user-profile .user-avatar img {
    width: 90px;
    height: 90px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
}
.account-settings .user-profile .user-avatar i.bi {
    font-size: 100px;
}

.account-settings .user-profile h5.user-name {
    margin: 0 0 0.5rem 0;
}
.account-settings .user-profile h6.user-email {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 400;
}



.user-view-table td:first-child {
    width: 9rem;
}
.user-view-table td {
    padding-right: 0;
    padding-left: 0;
    border: 0;
}


.dropdown-item.active, .dropdown-item:active {
    background-color: transparent !important;
}

.dropdown-item.active, .dropdown-item:hover {
    background-color: #44444440 !important;
}

.on_mouse_over:hover {
    color: #2193F3;
}

.nav-link {
    /* color: #4a5568; */
    color: #FFF !important;
}
.card {
    /* box-shadow: 0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px 0 rgba(0,0,0,.06); */
    border: none;
}

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    /* background-color: #090909; */
    background-color: unset;
    background-clip: border-box;
    /* border: 0 solid rgba(0,0,0,.125); */
    /* border-radius: .25rem; */
}

.card-body {
    flex: 1 1 auto;
    min-height: 1px;
    padding: 1rem;
}

.gutters-sm {
    margin-right: -8px;
    margin-left: -8px;
}

.gutters-sm>.col, .gutters-sm>[class*=col-] {
    padding-right: 8px;
    padding-left: 8px;
}
.mb-3, .my-3 {
    margin-bottom: 1rem!important;
}

.bg-gray-300 {
    background-color: #e2e8f0;
}
.h-100 {
    height: 100%!important;
}
.shadow-none {
    box-shadow: none!important;
}



.nav-item.nav-link {
    cursor: pointer;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #002F67;
}

.nav-item.nav-link i {
    width: 24px;
    height: 24px;
    font-size: 24px;
    vertical-align: middle;
    text-align: center;
    margin-right: 0.5rem !important;
}

.nav-item.nav-link span {
    font-size: 16px;
    vertical-align: middle;
}

.nav-item.nav-link:hover {
    color: #2193F3;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: #FFF;
    background-color: #002F67;
    border-color: #dee2e6 #dee2e6 #fff;
}

.card-header .nav-tabs .nav-item {
    margin-bottom: 15px;
}





#map-waterly-location {
    border-radius: 15px;
    height: 400px;
    width: 100%;
}

.map-profile-subpage-attributes {
    position: absolute;
    bottom: 0;
    z-index: 1018;
    font-size: 10px;
}

.map-profile-subpage-attributes .map-profile-subpage-attributes-content {
    background-color: #212224;
    border-radius: 10px 0 0px 0;
    padding: 2px 10px;
}

/* Account settings sheet -------------------------------------------------- */
.main-container-subpage:has(> .account-settings-subpage) {
    animation: diagnostic-subpage-slide-in .38s cubic-bezier(.22, .78, .24, 1) both;
}

.account-settings-subpage { color: #dbe6ed; }

.account-settings-mobile-header { display: none; }

.account-settings-hero {
    min-height: 100px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(220px, auto);
    align-items: center;
    gap: 16px;
    padding: 12px 4px;
    border-bottom: 1px solid rgba(143, 184, 220, 0.13);
    background: none;
}

.account-settings-hero-avatar {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(101, 184, 255, 0.3);
    border-radius: 16px;
    color: #8acaff;
    background: rgba(33, 150, 243, 0.1);
    box-shadow: none;
}

.account-settings-hero-avatar > i,
.account-settings-hero-avatar > img {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    border-radius: inherit !important;
    object-fit: cover;
    font-size: 27px !important;
    line-height: 56px;
    text-align: center;
}

.account-settings-hero-copy > span,
.account-settings-navigation-copy > span,
.account-settings-user-summary > span {
    color: #78bdf2;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.account-settings-hero-copy h1 {
    margin: 5px 0 0;
    color: #f5f9fb;
    font-size: clamp(24px, 2.2vw, 30px);
    font-weight: 800;
    line-height: 1.1;
}

.account-settings-hero-copy p {
    margin: 5px 0 0;
    color: #8f9da7;
    font-size: 12px;
}

.account-settings-user-summary {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(150px, 1fr) auto;
    gap: 2px 16px;
    padding: 0 4px 0 16px;
    border: 0;
    border-left: 1px solid rgba(143, 184, 220, .14);
    background: none;
}

.account-settings-user-summary > :is(span, strong, small) { grid-column: 1; }
.account-settings-user-summary .account-created-meta {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: center;
    margin: 0;
    padding: 0 0 0 16px;
    border-top: 0;
    border-left: 1px solid rgba(143, 184, 220, .14);
}

.account-settings-user-summary strong,
.account-settings-user-summary small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-settings-user-summary strong {
    margin-top: 5px;
    color: #f3f8fb;
    font-size: 14px;
}

.account-settings-user-summary small {
    margin-top: 2px;
    color: #82919b;
    font-size: 10px;
}

.account-settings-navigation {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    position: sticky;
    top: 0;
    z-index: 20;
    margin: 0 0 12px;
    padding: 6px 4px;
    border: 0;
    border-bottom: 1px solid rgba(143, 184, 220, .14);
    background: #17232b;
}

.account-settings-navigation-copy {
    min-width: 0;
    padding-left: 5px;
}

.account-settings-navigation-copy strong {
    display: block;
    margin-top: 2px;
    overflow: hidden;
    color: #f1f7fa;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-settings-tabs {
    display: flex;
    min-width: 0;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
}

.account-settings-tabs .account-settings-tab {
    position: relative;
    flex: 0 0 auto;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 8px 14px;
    border: 1px solid transparent;
    border-radius: 9px;
    color: #9cabb5 !important;
    background: transparent;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.account-settings-tabs .account-settings-tab span { font-size: inherit; white-space: nowrap; }
.account-settings-tabs::-webkit-scrollbar { display: none; }

.account-settings-tabs .account-settings-tab i {
    width: auto;
    height: auto;
    margin: 0 !important;
    color: #71838f;
    font-size: 14px;
}

.account-settings-tabs .account-settings-tab:hover,
.account-settings-tabs .account-settings-tab:focus-visible {
    border-color: rgba(101, 184, 255, 0.24);
    color: #ffffff !important;
    background: rgba(101, 184, 255, 0.08);
    outline: none;
}

.account-settings-tabs .account-settings-tab.active {
    border-color: transparent;
    color: #ffffff !important;
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.28), rgba(26, 108, 170, 0.22));
    box-shadow: none;
}

.account-settings-tabs .account-settings-tab.active i { color: #79c2ff; }

.account-settings-content {
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.account-settings-content .tab-pane > h4:first-child {
    margin-top: 0;
    color: #f3f8fb;
}

.account-settings-content .form-control {
    min-height: 42px;
    border-color: #647d90;
    border-radius: 9px;
    color: #e9f1f5;
    background: #17232c;
}

.account-settings-content .form-control::placeholder {
    color: #aabcc9;
    opacity: 1;
}

.account-settings-content .form-control:hover:not(:disabled):not(:focus) {
    border-color: #8faabd;
}

.account-settings-content .form-control:focus {
    border-color: #79c2ff;
    background: #1b2b37;
    box-shadow: 0 0 0 3px rgba(101, 184, 255, 0.24);
}

.account-settings-content .form-control:disabled {
    color: #8c9aa3;
    background: rgba(255, 255, 255, 0.035);
}

.account-settings-content label {
    color: #cbd7de;
    font-size: 12px;
    font-weight: 700;
}

.account-settings-content .text-muted { color: #7f8e98 !important; }

.account-settings-content .form-text {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
}

.account-settings-content .form-text,
.account-settings-content .developer-field small,
.account-settings-content .api-key-editor small,
.account-settings-content .password-requirements { font-style: italic; }

.account-settings-content .btn {
    min-height: 42px;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 800;
}

.account-settings-content hr { border-color: rgba(143, 184, 220, 0.12); }

/* Profile details and preferences share one card and spacing system. */
.account-profile-tab {
    --profile-text: #E8F3FB;
    --profile-muted: rgba(232, 243, 251, 0.72);
    --profile-border: rgba(213, 221, 229, 0.2);
    --profile-surface: rgba(232, 243, 251, 0.025);
    --profile-field: rgba(232, 243, 251, 0.04);
    --profile-accent: #BFE6F8;
    max-width: 1440px;
    margin: 24px auto;
}
.account-profile-layout { display: grid; grid-template-columns: minmax(320px, 0.9fr) minmax(0, 2fr); align-items: start; gap: 24px; }
.account-profile-section { min-width: 0; border: 1px solid var(--profile-border); border-radius: 8px; color: var(--profile-text); background: var(--profile-surface); }
.account-profile-heading { display: flex; align-items: center; gap: 12px; min-height: 112px; padding: 24px; border-bottom: 1px solid var(--profile-border); }
.account-profile-heading h2 { margin: 0; color: var(--profile-text); font-size: 18px; line-height: 1.4; }
.account-profile-heading p { margin: 4px 0 0; color: var(--profile-muted); font-size: 12px; line-height: 1.5; }
.account-profile-heading .account-section-icon { border-color: var(--profile-border); border-radius: 8px; color: var(--profile-accent); background: rgba(15, 109, 179, 0.12); }
.account-profile-fields { display: grid; gap: 24px; padding: 24px; }
.account-profile-field { min-width: 0; }
.account-profile-field .form-label { margin-bottom: 8px; color: var(--profile-text); font-size: 13px; font-weight: 600; }
.account-profile-field .form-control { min-height: 48px; border-color: var(--profile-border); border-radius: 8px; color: var(--profile-text); background: var(--profile-field); font-size: 14px; }
.account-profile-field .form-text { margin-top: 8px; color: var(--profile-muted); font-size: 12px; font-style: normal; line-height: 1.5; }
.profile-phone-control { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr); gap: 8px; }
.profile-phone-control .form-control { width: 100%; min-width: 0; }
.account-profile-tab .profile-phone-control #phone-number:disabled {
    color: var(--profile-muted) !important;
    -webkit-text-fill-color: var(--profile-muted);
    background: var(--profile-field) !important;
    border-color: var(--profile-border) !important;
    opacity: 1;
    cursor: default;
    outline: none !important;
    box-shadow: none !important;
}
.profile-phone-toggle #phone-country-value { flex: 1; text-align: right; font-family: var(--wl-font-mono); font-size: 13px; }
.profile-phone-toggle-flag[hidden] { display: none; }
.profile-phone-toggle:disabled { cursor: default; }
.profile-phone-toggle:disabled .profile-language-caret { display: none; }
.profile-phone-menu { width: max-content; min-width: 100%; max-width: min(320px, calc(100vw - 64px)); right: auto; }
.profile-phone-option > span { flex: 1; }
.profile-phone-error { display: block; margin-top: 8px; color: #E8F3FB; font-size: 12px; font-weight: 600; }
.profile-phone-error[hidden] { display: none; }
.account-profile-timezone { display: flex; align-items: flex-start; gap: 12px; padding-top: 24px; border-top: 1px solid var(--profile-border); }
.account-profile-timezone > i { color: var(--profile-accent); font-size: 18px; }
.account-profile-timezone > div { min-width: 0; }
.account-profile-timezone span { display: block; color: var(--profile-muted); font-size: 12px; }
.account-profile-timezone strong { display: block; margin-top: 4px; color: var(--profile-text); font-family: var(--wl-font-mono); font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.account-profile-timezone small { display: block; margin-top: 8px; color: var(--profile-muted); font-size: 12px; line-height: 1.5; }
.account-profile-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px; border-top: 1px solid var(--profile-border); }
.account-profile-actions p { margin: 0; color: var(--profile-muted); font-size: 12px; line-height: 1.5; }
.account-profile-actions .user-save { min-height: 48px; padding: 12px 24px; border: 0; border-radius: 999px; color: #FFFFFF; background: #0F6DB3; font-size: 12px; }
.account-profile-actions .user-save:hover { background: #004793; }
.account-profile-tab :is(.form-control, .profile-preference-option, .profile-language-toggle, .profile-phone-toggle, .user-save):focus-visible { outline: 2px solid #2FABE4; outline-offset: 2px; box-shadow: none; }

@media (max-width: 1100px) {
    .account-profile-layout { grid-template-columns: 1fr; }
    .account-profile-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .account-profile-fields > .account-group-card { grid-column: 1 / -1; }
    .account-profile-timezone { padding-top: 0; border-top: 0; }
}
@media (max-width: 620px) {
    .account-profile-tab { margin: 16px 0; }
    .account-profile-layout { gap: 16px; }
    .account-profile-heading { min-height: 0; padding: 16px; }
    .account-profile-fields { grid-template-columns: 1fr; gap: 24px; padding: 16px; }
    .account-profile-actions { padding: 16px; }
    .account-profile-timezone { padding-top: 24px; border-top: 1px solid var(--profile-border); }
}

.account-group-card {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0;
    padding: 0 0 24px;
    border-bottom: 1px solid var(--profile-border);
}

.account-group-card .group-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 48px;
    width: 48px;
    min-height: 56px;
}

.account-group-card .group-avatar img {
    max-width: 100%;
    max-height: 56px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.account-group-logo-light { display: none; }
.account-group-details { min-width: 0; }

.account-group-label {
    display: block;
    margin-bottom: 4px;
    color: #E8F3FB;
    font-size: 12px;
    line-height: 1.4;
}

.account-group-name {
    display: block;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.account-group-card .group-url { margin-top: 4px; }

.account-group-card .group-url a {
    color: #BFE6F8;
    font-size: 13px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.account-group-card .group-url a:hover,
.account-group-card .group-url a:focus-visible { text-decoration: underline; }

.account-group-card .group-url a:focus-visible {
    outline: 2px solid #2FABE4;
    outline-offset: 2px;
}

@media (max-width: 767.98px) {
    .account-settings-subpage { --waterly-drawer-top-gap: 0px; }

    .main-container-subpage:has(> .account-settings-subpage.waterly-drawer-viewport) {
        bottom: calc(var(--safe-bottom, 0px) + var(--waterly-footer-offset, 58px)) !important;
    }

    .account-settings-sheet.waterly-drawer-surface {
        display: flex;
        flex-direction: column;
        --drawer-controls-height: calc(34px + var(--safe-top, 0px));
        border-radius: 0;
    }

    .account-settings-sheet > .subpage-sheet-handle {
        top: var(--safe-top, 0px);
        width: 100%;
        height: 34px;
        border-radius: 0;
    }

    .account-settings-sheet > .subpage-sheet-handle > span { width: 52px; height: 4px; }

    .account-settings-mobile-header {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        gap: 11px;
        min-height: 52px;
        padding: 8px calc(14px + var(--safe-right, 0px)) 8px calc(14px + var(--safe-left, 0px));
        border-top: 1px solid rgba(143, 184, 220, 0.13);
        border-bottom: 1px solid rgba(143, 184, 220, 0.13);
    }

    .account-settings-mobile-header > i {
        display: grid;
        flex: 0 0 32px;
        place-items: center;
        width: 32px;
        height: 32px;
        border: 1px solid rgba(101, 184, 255, 0.3);
        border-radius: 10px;
        color: #8acaff;
        font-size: 14px;
    }

    .account-settings-mobile-header > div { min-width: 0; }
    .account-settings-mobile-header small { display: block; color: #78bdf2; font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
    .account-settings-mobile-header strong { display: block; margin-top: 3px; color: #f5f9fb; font-size: 14px; line-height: 1.2; }

    .account-settings-sheet > .waterly-drawer-scroll {
        flex: 1 1 0;
        height: auto;
        margin-top: 0;
        padding: 0 calc(10px + var(--safe-right, 0px)) 14px calc(10px + var(--safe-left, 0px));
        touch-action: pan-y;
    }

    .main-container-subpage:has(> .account-settings-subpage) {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .main-container-subpage:has(> .account-settings-subpage)::before,
    .main-container-subpage:has(> .account-settings-subpage)::after { display: none; }

    .main-container-subpage:has(> .account-settings-subpage) > .subpage-map-toolbar { border-radius: 0; }

    .account-settings-hero {
        min-height: 0;
        display: block;
        padding: 8px 0 0;
        border: 0;
        background: none;
    }

    .account-settings-hero-avatar,
    .account-settings-hero-copy { display: none; }

    .account-settings-user-summary {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 2px 12px;
        padding: 8px 2px;
        border: 0;
    }
    .account-settings-user-summary > span,
    .account-settings-user-summary > strong,
    .account-settings-user-summary > small { grid-column: 1; }
    .account-settings-user-summary > span { font-size: 8px; }
    .account-settings-user-summary strong { margin-top: 3px; font-size: 12px; }
    .account-settings-user-summary .account-created-meta {
        grid-column: 2;
        grid-row: 1 / span 3;
        align-self: center;
        margin-top: 0;
        padding: 0 0 0 12px;
        border-top: 0;
        border-left: 1px solid rgba(143, 184, 220, 0.14);
    }
    .account-settings-user-summary .account-created-meta > strong { font-size: 10px; }

    .account-settings-navigation {
        position: sticky;
        top: 0;
        z-index: 20;
        grid-template-columns: 1fr;
        gap: 8px;
        margin: 0 0 10px;
        padding: 6px 0;
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
    }

    .account-settings-navigation-copy { display: none; }

    .account-settings-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%; }
    .account-settings-tabs .account-settings-tab {
        min-height: 44px;
        flex-direction: column;
        gap: 4px;
        padding: 7px 3px;
        font-size: 9px;
    }

    .account-settings-content {
        width: 100%;
        margin: 0;
        padding: 0;
    }
}

@media (max-width: 430px) {
    .account-settings-hero-copy p { display: none; }
    .account-settings-hero-copy h1 { font-size: 22px; }
    .account-settings-tabs .account-settings-tab span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .account-settings-tabs .account-settings-tab i { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .main-container-subpage:has(> .account-settings-subpage) { animation: none; }
}

/* Account profile preferences ------------------------------------------- */
.account-section-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(101, 184, 255, 0.2);
    border-radius: 12px;
    color: #78c2fb;
    background: rgba(33, 150, 243, 0.09);
}

.account-preferences-panel { margin: 0; }
.account-preferences-panel.is-language-open { position: relative; z-index: 1; }
.account-preferences-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding: 24px; }
.account-measurement-preference { grid-column: 1 / -1; }

.account-preference-group { min-width: 0; }
.account-preference-label { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.account-preference-label > i { display: grid; place-items: center; width: 20px; flex: 0 0 20px; color: var(--profile-accent); font-size: 15px; line-height: 1; text-align: center; }
.account-preference-label strong { display: block; color: var(--profile-text); font-size: 13px; font-weight: 600; }
.account-preference-label span { display: block; margin-top: 4px; color: var(--profile-muted); font-size: 12px; line-height: 1.5; }
@media (max-width: 620px) {
    .account-preferences-body { grid-template-columns: 1fr; gap: 24px; padding: 16px; }
}

.profile-preference-options { flex: 1 1 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.profile-unit-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.profile-temperature-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Native disclosure keeps the reference out of the way until requested. */
.profile-unit-help { margin-top: 8px; }
.profile-unit-help > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 0; border-radius: 4px; color: var(--profile-accent); font-size: 12px; font-weight: 500; list-style: none; cursor: pointer; }
.profile-unit-help > summary::-webkit-details-marker { display: none; }
.profile-unit-help > summary::marker { content: ""; }
.profile-unit-help > summary:hover > span { text-decoration: underline; }
.profile-unit-help > summary:focus-visible { outline: 2px solid #2FABE4; outline-offset: 2px; }
.profile-unit-help-caret { font-size: 10px; }
.profile-unit-help[open] > summary .profile-unit-help-caret { transform: rotate(180deg); }
.profile-unit-comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
@media (max-width: 620px) { .profile-unit-comparison { grid-template-columns: 1fr; } }
.profile-unit-description {
    padding: 16px;
    border: 1px solid rgba(213, 221, 229, 0.16);
    border-radius: 8px;
    color: #E8F3FB;
    background: rgba(232, 243, 251, 0.025);
    font-family: var(--wl-font-sans);
    font-size: 12px;
    line-height: 1.5;
}
.account-measurement-preference:has([value="metric"].selected) .profile-unit-description--metric,
.account-measurement-preference:has([value="imperial"].selected) .profile-unit-description--imperial {
    border-color: rgba(15, 109, 179, 0.65);
    background: rgba(15, 109, 179, 0.08);
}
.profile-unit-description h3 { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 16px; color: var(--profile-text); font-size: 14px; }
.profile-unit-description h3 .profile-preference-symbol { color: var(--profile-accent); }
.profile-unit-categories { margin: 0; }
.profile-unit-category + .profile-unit-category {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(213, 221, 229, 0.12);
}
.profile-unit-category dt { margin-bottom: 8px; font-weight: 500; text-align: center; }
.profile-unit-category dd { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; }
.profile-unit-entry {
    display: inline-flex;
    flex-wrap: wrap;
    color: inherit;
    font: inherit;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: 6px;
    max-width: 100%;
    padding: 4px 8px;
    border: 1px solid rgba(213, 221, 229, 0.16);
    border-radius: 4px;
    background: rgba(232, 243, 251, 0.04);
    text-align: center;
}
.profile-unit-entry strong { font-weight: 600; overflow-wrap: anywhere; }
.profile-unit-entry:hover { border-color: var(--profile-accent); }
.profile-unit-help [data-guide-unit][aria-pressed="true"] { border-color: var(--profile-accent); background: rgba(15, 109, 179, .16); }
.profile-unit-help [data-guide-unit]:focus-visible { outline: 2px solid var(--profile-accent); outline-offset: 2px; }
.profile-unit-result { flex-basis: 100%; color: var(--profile-accent); font-family: var(--wl-font-mono); font-size: 13px; font-weight: 500; }
.profile-unit-result[hidden] { display: none; }
.profile-converter-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin: 8px 0 16px; }
.profile-converter-toolbar label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--profile-text); font-size: 12px; }
.profile-converter-toolbar .profile-converter-amount { width: 112px; min-height: 40px; font-family: var(--wl-font-mono); }
.profile-converter-toolbar p, .profile-converter-note { margin: 0; color: var(--profile-muted); font-size: 12px; line-height: 1.5; }
.profile-converter-note { margin-top: 12px; }
.profile-temperature-comparison { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.profile-temperature-card { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; cursor: pointer; }
.profile-temperature-card .profile-unit-notation { font-size: 20px; }
.profile-temperature-card strong { color: var(--profile-text); font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 620px) { .profile-temperature-comparison { grid-template-columns: 1fr; } }
.profile-unit-notation { flex-shrink: 0; color: #BFE6F8; font-family: var(--wl-font-mono); font-size: 13px; font-weight: 500; }
.profile-theme-select.form-select {
    display: none;
    width: 100%;
    min-width: 0;
    height: 46px;
    padding: 0 36px 0 12px;
    border: 1px solid rgba(143, 184, 220, .18) !important;
    border-radius: 9px !important;
    color: #dce7ed !important;
    background-color: rgba(255, 255, 255, .035) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m2 2 4 4 4-4' fill='none' stroke='%2398bdd2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-size: 12px 8px;
    appearance: none;
    -webkit-appearance: none;
    text-align: left !important;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
.profile-theme-select.form-select:focus {
    border-color: #79c2ff !important;
    box-shadow: 0 0 0 3px rgba(33, 150, 243, .12);
}
@media (max-width: 767.98px) {
    .profile-theme-options { display: none; }
    .profile-theme-select.form-select { display: block; }
}
.profile-preference-option {
    min-width: 0;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--profile-border);
    border-radius: 8px;
    color: var(--profile-muted);
    background: var(--profile-field);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.16s ease;
}
.profile-preference-option i,
.profile-preference-symbol { color: #718895; font-size: 14px; }
.profile-preference-symbol { flex-shrink: 0; min-width: 2ch; font-family: var(--wl-font-mono); font-weight: 500; line-height: 1; text-align: center; }
.profile-preference-option:hover,
.profile-preference-option.selected {
    border-color: rgba(15, 109, 179, 0.65);
    color: #FFFFFF;
    background: rgba(15, 109, 179, 0.18);
    box-shadow: none;
}
.profile-preference-option.selected i,
.profile-preference-option.selected .profile-preference-symbol { color: #BFE6F8; }
.profile-preference-option:focus-visible { outline: 2px solid #0F6DB3; outline-offset: 2px; }

.profile-language-select-wrap,
.profile-phone-country-wrap {
    position: relative;
    width: 100%;
    min-width: 0;
    margin-left: 0;
}
.profile-language-toggle,
.profile-phone-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 48px;
    padding: 0 12px;
    border: 1px solid var(--profile-border);
    border-radius: 8px;
    color: var(--profile-text);
    background: var(--profile-field);
    font-size: 13px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    outline: none;
    transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
}
.profile-language-toggle:hover,
.profile-language-toggle:focus,
.profile-language-select-wrap.is-open .profile-language-toggle,
.profile-phone-toggle:hover:not(:disabled),
.profile-phone-toggle:focus:not(:disabled),
.profile-phone-country-wrap.is-open .profile-phone-toggle {
    border-color: rgba(101, 184, 255, 0.5);
    background: rgba(33, 150, 243, 0.1);
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.09);
}
.profile-language-toggle-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-language-caret { flex: 0 0 auto; color: #79c2ff; font-size: 11px; transition: transform 0.16s ease; }
.profile-language-select-wrap.is-open .profile-language-caret,
.profile-phone-country-wrap.is-open .profile-language-caret { transform: rotate(180deg); }
.profile-language-flag {
    flex: 0 0 auto;
    width: 22px;
    height: 16px;
    border-radius: 2px;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}
.profile-language-menu,
.profile-phone-menu {
    position: absolute;
    z-index: 30;
    top: calc(100% + 6px);
    left: 0;
    display: none;
    max-height: 268px;
    padding: 6px;
    overflow-y: auto;
    border: 1px solid rgba(143, 184, 220, 0.22);
    border-radius: 11px;
    background: #16202a;
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.45);
}
.profile-language-menu { right: 0; }
.profile-language-select-wrap.is-open .profile-language-menu,
.profile-phone-country-wrap.is-open .profile-phone-menu { display: block; }
.profile-language-option,
.profile-phone-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 8px;
    color: #c7d5df;
    background: transparent;
    font-size: 12px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}
.profile-language-option .profile-language-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-language-option i,
.profile-phone-option i { flex: 0 0 auto; color: #79c2ff; font-size: 11px; opacity: 0; }
.profile-language-option:hover,
.profile-language-option:focus,
.profile-phone-option:hover,
.profile-phone-option:focus { color: #ffffff; background: rgba(33, 150, 243, 0.14); outline: none; }
.profile-language-option.selected,
.profile-phone-option.selected { color: #ffffff; background: rgba(33, 150, 243, 0.18); }
.profile-language-option.selected i,
.profile-phone-option.selected i { opacity: 1; }

.account-created-meta {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(143, 184, 220, 0.18);
}
.account-created-meta > span {
    display: block;
    color: #a8bac6;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.account-created-meta > strong { margin-top: 3px; font-size: 12px; }

/* Shared section heroes -------------------------------------------------- */
.account-section-hero {
    position: relative;
    min-height: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    padding: 10px 4px;
    overflow: hidden;
    border: 0;
    background: none;
}
.account-section-hero-icon {
    position: relative;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(101, 184, 255, 0.26);
    border-radius: 22px;
    color: #7bc4fb;
    background: rgba(33, 150, 243, 0.1);
    font-size: 20px;
}
.account-section-hero-icon span { display: none; position: absolute; inset: -7px; border: 1px dashed rgba(101, 184, 255, 0.12); border-radius: 25px; }
.account-section-hero > div:last-child > span,
.notification-subscriptions-heading > div > span,
.about-waterly-hero-copy > span,
.about-waterly-contact > span,
.about-waterly-card-heading span,
.about-waterly-social > div > span {
    color: #75baf0;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}
.account-section-hero h2 { margin: 5px 0 0; color: #f4f9fb; font-size: 22px; font-weight: 800; }
.account-section-hero p { max-width: 650px; margin: 7px 0 0; color: #8e9ba4; font-size: 11px; line-height: 1.55; }

/* Notifications ---------------------------------------------------------- */
.notification-threshold-card {
    display: grid;
    grid-template-columns: minmax(250px, 0.72fr) minmax(360px, 1.28fr);
    align-items: center;
    gap: 32px;
    margin-bottom: 16px;
    padding: 22px;
    border: 1px solid rgba(101, 184, 255, 0.16);
    border-radius: 16px;
    background:
        radial-gradient(circle at 0 0, rgba(32, 201, 151, 0.09), transparent 42%),
        rgba(7, 14, 19, 0.5);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.025);
}
.notification-threshold-copy { display: flex; align-items: center; gap: 12px; }
.notification-threshold-copy strong,
.notification-threshold-copy span { display: block; }
.notification-threshold-copy strong { color: #edf7fa; font-size: 14px; font-weight: 800; }
.notification-threshold-copy span { max-width: 340px; margin-top: 5px; color: #82949f; font-size: 10px; line-height: 1.55; }
.notification-threshold-control {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    align-items: center;
    gap: 17px;
    padding: 14px 16px;
    border: 1px solid rgba(126, 177, 203, 0.1);
    border-radius: 14px;
    background: rgba(3, 9, 13, 0.22);
}
.notification-threshold-value {
    width: 68px;
    height: 68px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(32, 201, 151, 0.34);
    border-radius: 19px;
    color: #72e3bf;
    background: linear-gradient(145deg, rgba(32, 201, 151, 0.14), rgba(32, 201, 151, 0.04));
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.04);
}
.notification-threshold-value > span { font-size: 21px; font-weight: 850; line-height: 1; }
.notification-threshold-value small { margin-top: 5px; color: #76a597; font-size: 8px; font-weight: 850; letter-spacing: 0.06em; }
.notification-threshold-control input { grid-column: 2; height: 8px; margin: 0; border-radius: 99px; }
.notification-threshold-control .hommie_range_selector::-webkit-slider-runnable-track { height: 8px; border-radius: 99px; }
.notification-threshold-control .hommie_range_selector::-moz-range-track { height: 8px; border-radius: 99px; }
.notification-threshold-control .hommie_range_selector::-webkit-slider-thumb {
    width: 24px;
    height: 24px;
    margin-top: -8px;
    border: 4px solid #ffffff;
    background: #25a980;
    box-shadow: 0 3px 13px rgba(0, 0, 0, 0.35);
}
.notification-threshold-control .hommie_range_selector::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border: 4px solid #ffffff;
    background: #25a980;
    box-shadow: 0 3px 13px rgba(0, 0, 0, 0.35);
}
.notification-threshold-scale { grid-column: 2; display: flex; justify-content: space-between; margin-top: -8px; color: #71828c; font-size: 8px; font-weight: 700; }

.notification-subscriptions-card { overflow: hidden; border: 1px solid rgba(101, 184, 255, 0.15); border-radius: 16px; background: rgba(7, 13, 18, 0.44); box-shadow: inset 0 1px rgba(255, 255, 255, 0.02); }
.notification-subscriptions-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 19px 21px; border-bottom: 1px solid rgba(143, 184, 220, 0.1); }
.notification-subscriptions-heading h3 { margin: 4px 0 0; color: #edf4f7; font-size: 16px; font-weight: 800; }
.notification-subscriptions-status { display: flex; align-items: center; gap: 7px; padding: 7px 11px; border: 1px solid rgba(32, 201, 151, 0.2); border-radius: 99px; color: #8fc5b2; background: rgba(32, 201, 151, 0.07); font-size: 9px; font-weight: 800; }
.notification-subscriptions-status i { color: #20c997; font-size: 6px; }
.notification-subscriptions-status b { min-width: 28px; padding-left: 7px; border-left: 1px solid rgba(32, 201, 151, 0.16); color: #b9ddcf; text-align: center; }
.notification-subscriptions-status.is-inactive { border-color: rgba(126, 154, 168, 0.17); color: #7f929c; background: rgba(126, 154, 168, 0.055); }
.notification-subscriptions-status.is-inactive i { color: #718590; }
.notification-subscriptions-status.is-inactive b { border-color: rgba(126, 154, 168, 0.14); color: #91a2aa; }
.notification-threshold-list { display: grid; gap: 9px; padding: 13px; }
.notification-threshold-list.is-loading { min-height: 138px; opacity: 0.42; }
.notification-threshold-row {
    display: grid;
    grid-template-columns: 42px minmax(180px, 0.7fr) minmax(320px, 1.3fr) auto auto;
    align-items: center;
    gap: 13px;
    min-height: 74px;
    padding: 12px 13px;
    border: 1px solid rgba(132, 176, 198, 0.11);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.018);
    transition: 160ms ease;
}
.notification-threshold-row:hover { border-color: rgba(101, 184, 255, 0.22); background: rgba(101, 184, 255, 0.035); }
.notification-threshold-row.is-inactive { opacity: 0.64; }
.notification-threshold-row-icon { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(32, 201, 151, 0.19); border-radius: 12px; color: #6ed3b3; background: rgba(32, 201, 151, 0.07); }
.notification-threshold-row.is-inactive .notification-threshold-row-icon { border-color: rgba(126, 154, 168, 0.14); color: #788c96; background: rgba(126, 154, 168, 0.055); }
.notification-threshold-row-copy { min-width: 0; }
.notification-threshold-row-copy small,
.notification-threshold-row-copy strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notification-threshold-row-copy small { color: #6f838e; font-size: 8px; font-weight: 750; }
.notification-threshold-row-copy strong { margin-top: 4px; color: #dbe9ed; font-size: 12px; font-weight: 800; }
.notification-threshold-bounds { display: flex; flex-wrap: wrap; gap: 5px; }
.notification-threshold-bound { display: inline-flex; align-items: baseline; gap: 5px; min-height: 27px; padding: 5px 8px; border: 1px solid rgba(255, 184, 92, 0.13); border-radius: 8px; color: #efbd78; background: rgba(255, 184, 92, 0.07); }
.notification-threshold-bound.is-alarm { border-color: rgba(255, 101, 116, 0.16); color: #ff8997; background: rgba(255, 101, 116, 0.075); }
.notification-threshold-bound i { align-self: center; font-size: 7px; }
.notification-threshold-bound b { font-size: 7px; font-weight: 850; letter-spacing: 0.04em; text-transform: uppercase; }
.notification-threshold-bound strong { color: currentColor; font-size: 10px; }
.notification-threshold-bound small { color: currentColor; font-size: 7px; opacity: 0.72; }
.notification-threshold-state { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 99px; color: #82bda9; background: rgba(32, 201, 151, 0.055); font-size: 8px; font-weight: 800; white-space: nowrap; }
.notification-threshold-state i { color: #20c997; font-size: 5px; }
.notification-threshold-row.is-inactive .notification-threshold-state { color: #7f929c; background: rgba(126, 154, 168, 0.055); }
.notification-threshold-row.is-inactive .notification-threshold-state i { color: #718590; }
.notification-threshold-open { height: 34px; display: inline-flex; align-items: center; gap: 8px; padding: 0 11px; border: 1px solid rgba(101, 184, 255, 0.18); border-radius: 9px; color: #9dcff0; background: rgba(33, 150, 243, 0.06); font-size: 8px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.notification-threshold-open:hover { border-color: rgba(101, 184, 255, 0.38); color: #ffffff; background: rgba(33, 150, 243, 0.13); text-decoration: none; transform: translateY(-1px); }
.notification-threshold-empty { min-height: 210px; display: flex; align-items: center; justify-content: center; gap: 13px; padding: 24px; color: #71848e; text-align: left; }
.notification-threshold-empty[hidden] { display: none !important; }
.notification-threshold-empty > i { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 13px; color: #628494; background: rgba(101, 184, 255, 0.06); font-size: 18px; }
.notification-threshold-empty strong,
.notification-threshold-empty span { display: block; }
.notification-threshold-empty strong { color: #b9cbd2; font-size: 11px; }
.notification-threshold-empty span { margin-top: 4px; font-size: 9px; }
.notification-threshold-empty.is-error > i { color: #df7580; background: rgba(255, 101, 116, 0.07); }
.notification-table-scroll { overflow-x: auto; }
.notifications-subscriptions-table { width: 100%; min-width: 660px; margin: 0; color: #bac7ce; background: transparent !important; }
.notifications-subscriptions-table thead th { padding: 13px 17px; border: 0; border-bottom: 1px solid rgba(143, 184, 220, 0.1); color: #758a96; background: rgba(255, 255, 255, 0.02); font-size: 8px; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; }
.notifications-subscriptions-table tbody td { padding: 14px 17px; border-color: rgba(143, 184, 220, 0.075); color: #b9c8cf; font-size: 10px; font-weight: 550; text-align: left !important; vertical-align: middle; }
.notifications-subscriptions-table tbody tr:hover { background: rgba(101, 184, 255, 0.045); }
.notifications-subscriptions-table th:last-child,
.notifications-subscriptions-table td:last-child { width: 72px; text-align: center !important; }
.notifications-subscriptions-table .delete-subscription-btn { width: 34px; height: 34px; margin: 0 !important; padding: 0; border: 1px solid rgba(255, 101, 116, 0.26); border-radius: 10px; color: #ff8994; background: rgba(255, 101, 116, 0.075); box-shadow: none; transition: 160ms ease; }
.notifications-subscriptions-table .delete-subscription-btn:hover { border-color: rgba(255, 101, 116, 0.5); color: #ffffff; background: #df5363; transform: translateY(-1px); }
.notifications-subscriptions-table .notification-empty-row td { padding: 34px 16px; text-align: center !important; }
.notification-empty-row div { display: flex; flex-direction: column; align-items: center; gap: 8px; color: #6f818c; }
.notification-empty-row i { color: #587586; font-size: 22px; }
.notification-empty-row strong { font-size: 10px; font-weight: 750; }

/* Security --------------------------------------------------------------- */
.security-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(270px, 0.75fr); gap: 14px; }
.password-change-card,
.account-danger-card { border: 1px solid rgba(143, 184, 220, 0.14); border-radius: 14px; background: rgba(6, 11, 15, 0.25); }
.password-change-card { padding: 20px; }
.security-card-heading { display: flex; gap: 12px; margin-bottom: 18px; }
.security-card-heading h3 { margin: 2px 0 0; color: #edf5f8; font-size: 16px; font-weight: 800; }
.security-card-heading p { margin: 4px 0 0; color: #7e8d97; font-size: 10px; }
.security-password-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.security-password-fields label:first-child { grid-column: 1 / -1; }
.security-password-fields label { margin: 0; }
.security-password-fields label > span { display: block; margin-bottom: 6px; color: #aebdc5; font-size: 10px; font-weight: 750; }
.password-strength-meter { height: 8px; margin-top: 15px; overflow: hidden; border-radius: 0; background: #eee; }
.password-strength-meter-score { width: 0; height: inherit; background: #ff7700; transition: width 0.3s ease-in-out, background-color 0.3s ease-in-out; }
.password-strength-meter-score.psms-25 { width: 25%; background: #ff7700; }
.password-strength-meter-score.psms-50 { width: 50%; background: #ffff00; }
.password-strength-meter-score.psms-75 { width: 75%; background: #aeff00; }
.password-strength-meter-score.psms-100 { width: 100%; background: #00ff00; }
.password-strength-message { min-height: 18px; margin-top: 8px; color: #ff9ba4; font-size: 10px; }
.password-requirements { display: block; margin: 8px 0 16px; padding: 10px 12px; border-left: 2px solid rgba(101, 184, 255, 0.34); color: #71818b; background: rgba(33, 150, 243, 0.035); font-size: 9px; line-height: 1.65; }
.save-change-password { display: inline-flex; align-items: center; gap: 8px; }

.account-danger-card { display: flex; flex-direction: column; align-items: flex-start; padding: 22px; border-color: rgba(255, 101, 116, 0.17); background: linear-gradient(145deg, rgba(255, 101, 116, 0.055), rgba(8, 12, 15, 0.28)); }
.account-danger-icon { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; margin-bottom: 17px; border: 1px solid rgba(255, 101, 116, 0.23); border-radius: 15px; color: #ff8994; background: rgba(255, 101, 116, 0.075); font-size: 19px; }
.account-danger-card > span { color: #ff8994; font-size: 8px; font-weight: 850; letter-spacing: 0.09em; text-transform: uppercase; }
.account-danger-card h3 { margin: 5px 0 0; color: #f4e9ea; font-size: 17px; font-weight: 800; }
.account-danger-card p { margin: 9px 0 0; color: #9b8588; font-size: 10px; line-height: 1.55; }
.account-danger-backend { display: flex; gap: 7px; margin: 16px 0; padding: 9px 10px; border: 1px solid rgba(255, 193, 7, 0.13); border-radius: 8px; color: #ad9c6d; background: rgba(255, 193, 7, 0.035); font-size: 9px; line-height: 1.45; }
.account-danger-card .user-delete-account { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: auto; }

/* About Waterly ---------------------------------------------------------- */
.about-waterly-hero { position: relative; min-height: 210px; display: grid; grid-template-columns: 190px minmax(0, 1fr); align-items: center; gap: 26px; margin-bottom: 14px; padding: 28px; overflow: hidden; border: 1px solid rgba(101, 184, 255, 0.17); border-radius: 16px; background: radial-gradient(circle at 12% 45%, rgba(33, 150, 243, 0.19), transparent 29%), linear-gradient(135deg, rgba(19, 34, 44, 0.92), rgba(8, 15, 20, 0.8)); }
.about-waterly-brand { position: relative; z-index: 2; min-height: 126px; display: flex; align-items: center; justify-content: center; padding: 24px; border: 1px solid rgba(101, 184, 255, 0.18); border-radius: 24px; background: rgba(4, 10, 14, 0.4); box-shadow: inset 0 0 40px rgba(33, 150, 243, 0.07); }
.about-waterly-brand img { width: 145px; max-width: 100%; }
.about-waterly-hero-copy { position: relative; z-index: 2; }
.about-waterly-hero-copy h2 { margin: 7px 0 0; color: #f4f9fb; font-size: clamp(24px, 3vw, 34px); font-weight: 850; }
.about-waterly-hero-copy p { max-width: 660px; margin: 10px 0 0; color: #9aa8b1; font-size: 12px; line-height: 1.7; }
.about-waterly-wave { position: absolute; right: -60px; bottom: -110px; width: 430px; height: 230px; opacity: 0.35; }
.about-waterly-wave i { position: absolute; inset: 0; border: 1px solid rgba(101, 184, 255, 0.18); border-radius: 50%; transform: rotate(-10deg); }
.about-waterly-wave i:nth-child(2) { inset: 30px -20px -20px 20px; border-color: rgba(32, 201, 151, 0.14); }
.about-waterly-wave i:nth-child(3) { inset: 65px -45px -40px 45px; }

.about-waterly-grid { display: grid; grid-template-columns: minmax(250px, 0.72fr) minmax(0, 1.28fr); gap: 14px; }
.about-waterly-contact,
.about-waterly-location,
.about-waterly-footer { border: 1px solid rgba(143, 184, 220, 0.14); border-radius: 14px; background: rgba(6, 11, 15, 0.25); }
.about-waterly-contact { display: flex; flex-direction: column; align-items: flex-start; padding: 22px; }
.about-waterly-contact > span { margin-top: 20px; }
.about-waterly-contact h3 { margin: 5px 0 0; color: #eef5f8; font-size: 20px; font-weight: 800; }
.about-waterly-contact p { margin: 9px 0 18px; color: #85939c; font-size: 10px; line-height: 1.65; }
.about-waterly-primary-link,
.about-waterly-secondary-link { width: 100%; display: flex; align-items: center; gap: 9px; padding: 11px 12px; border: 1px solid rgba(101, 184, 255, 0.18); border-radius: 9px; color: #b9daf3; background: rgba(33, 150, 243, 0.055); font-size: 10px; }
.about-waterly-primary-link:hover,
.about-waterly-secondary-link:hover { color: #fff; border-color: rgba(101, 184, 255, 0.42); text-decoration: none; background: rgba(33, 150, 243, 0.12); }
.about-waterly-secondary-link { margin-top: 8px; }
.about-waterly-primary-link i,
.about-waterly-secondary-link i { color: inherit; }
.about-waterly-secondary-link .bi-box-arrow-up-right { margin-left: auto; font-size: 8px; }
.about-waterly-google-maps .bi-signpost-split { margin-left: auto; font-size: 10px; }
.about-waterly-location { min-width: 0; padding: 16px; }
.about-waterly-card-heading { display: flex; align-items: center; justify-content: space-between; padding: 2px 3px 13px; }
.about-waterly-card-heading h3 { margin: 3px 0 0; color: #edf4f7; font-size: 15px; font-weight: 800; }
.about-waterly-card-heading > i { color: #70b9ef; }
.about-waterly-map-wrap { position: relative; overflow: hidden; border: 1px solid rgba(143, 184, 220, 0.13); border-radius: 11px; }
.about-waterly-map-wrap #map-waterly-location { height: 520px; border-radius: 0; }
.about-waterly-map-marker {
    position: relative;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(126, 203, 255, 0.78);
    border-radius: 12px 12px 12px 3px;
    color: #e9f7ff;
    background: linear-gradient(145deg, #269fe9, #176fae);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.42), 0 0 0 5px rgba(33, 150, 243, 0.13);
    cursor: pointer;
    outline: none;
    transform: rotate(-45deg);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.about-waterly-map-marker > span { transform: rotate(45deg); }
.about-waterly-map-marker i { font-size: 13px; }
.about-waterly-map-marker:hover,
.about-waterly-map-marker:focus-visible {
    border-color: #d5efff;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.48), 0 0 0 7px rgba(33, 150, 243, 0.2);
    transform: rotate(-45deg) translate(1px, -1px);
}
.about-waterly-maptiler-popup { max-width: calc(100vw - 38px) !important; }
.about-waterly-maptiler-popup .maplibregl-popup-content {
    width: min(246px, calc(100vw - 46px));
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(121, 194, 255, 0.24);
    border-radius: 14px;
    color: #e9f3f8;
    background:
        radial-gradient(circle at 5% 0, rgba(33, 150, 243, 0.17), transparent 42%),
        linear-gradient(145deg, rgba(24, 32, 39, 0.98), rgba(11, 16, 21, 0.98));
    box-shadow: 0 17px 38px rgba(0, 0, 0, 0.48);
    font-family: var(--wl-font-sans, "Geist", "Segoe UI", Arial, sans-serif);
}
.about-waterly-maptiler-popup .maplibregl-popup-tip {
    border-top-color: #11181e;
    border-bottom-color: #11181e;
}
.about-waterly-map-popup { padding: 14px; }
.about-waterly-map-popup-header { display: flex; align-items: center; gap: 10px; }
.about-waterly-map-popup-header > span {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(101, 184, 255, 0.22);
    border-radius: 10px;
    color: #7dc7fa;
    background: rgba(33, 150, 243, 0.1);
}
.about-waterly-map-popup-header small,
.about-waterly-map-popup-header strong { display: block; }
.about-waterly-map-popup-header small { color: #6fafd9; font-size: 7px; font-weight: 850; letter-spacing: 0.09em; text-transform: uppercase; }
.about-waterly-map-popup-header strong { margin-top: 3px; color: #f1f7fa; font-size: 12px; font-weight: 800; }
.about-waterly-map-popup-address { display: flex; align-items: flex-start; gap: 9px; margin-top: 12px; padding: 10px; border: 1px solid rgba(143, 184, 220, 0.11); border-radius: 9px; color: #9baab3; background: rgba(255, 255, 255, 0.025); font-size: 9px; line-height: 1.6; }
.about-waterly-map-popup-address i { margin-top: 2px; color: #6eb8ec; }
.about-waterly-map-popup > a { display: flex; align-items: center; gap: 8px; margin-top: 9px; padding: 9px 10px; border: 1px solid rgba(101, 184, 255, 0.18); border-radius: 9px; color: #b9daf3; background: rgba(33, 150, 243, 0.075); font-size: 9px; font-weight: 750; text-decoration: none; }
.about-waterly-map-popup > a .bi-box-arrow-up-right { margin-left: auto; color: #6f94aa; font-size: 7px; }
.about-waterly-map-popup > a:hover { border-color: rgba(101, 184, 255, 0.4); color: #fff; background: rgba(33, 150, 243, 0.15); }
.about-waterly-map-wrap .waterly-map-attribution {
    left: 7px;
    right: 7px;
    bottom: 7px;
    max-width: none;
}
.about-waterly-map-wrap .waterly-map-attribution-content {
    width: 100%;
    justify-content: center;
}
.about-waterly-address { display: flex; align-items: center; gap: 11px; padding: 13px 3px 1px; }
.about-waterly-address > i { width: 34px; color: #70b9ef; text-align: center; }
.about-waterly-address strong,
.about-waterly-address span { display: block; }
.about-waterly-address strong { color: #dfe9ee; font-size: 11px; }
.about-waterly-address span { margin-top: 2px; color: #7f8d96; font-size: 9px; }
.about-waterly-footer { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px; margin-top: 14px; padding: 17px 20px; }
.about-waterly-social { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.about-waterly-social h3 { margin: 3px 0 0; color: #edf4f7; font-size: 14px; }
.about-waterly-social nav { display: flex; gap: 7px; }
.about-waterly-social nav a { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(143, 184, 220, 0.13); border-radius: 10px; color: #8296a2; background: rgba(255, 255, 255, 0.025); }
.about-waterly-social nav a:hover { color: #fff; border-color: rgba(101, 184, 255, 0.4); text-decoration: none; background: #218fdc; transform: translateY(-1px); }
.about-waterly-version { min-width: 130px; padding-left: 20px; border-left: 1px solid rgba(143, 184, 220, 0.12); text-align: right; }
.about-waterly-version > span,
.about-waterly-version > strong,
.about-waterly-version > small { display: block; }
.about-waterly-version > span { color: #71828d; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.about-waterly-version > strong { margin-top: 3px; color: #dfe9ee; font-size: 13px; }
.about-waterly-version > strong.app-version { display: inline-flex; }
.about-waterly-version > small { margin-top: 1px; color: #586a75; font-size: 8px; }

@media (max-width: 900px) {
    .security-layout,
    .about-waterly-grid { grid-template-columns: 1fr; }
    .notification-threshold-row { grid-template-columns: 42px minmax(0, 1fr) auto; }
    .notification-threshold-bounds { grid-column: 2 / -1; }
    .notification-threshold-state { grid-column: 3; grid-row: 1; }
    .notification-threshold-open { grid-column: 2 / -1; justify-content: center; }
}

@media (max-width: 760px) {
    .notification-threshold-card { grid-template-columns: 1fr; gap: 18px; }
    .notification-threshold-control { grid-template-columns: 56px minmax(0, 1fr); }
    .notification-threshold-value { width: 56px; height: 56px; border-radius: 15px; }
    .notification-subscriptions-heading { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 620px) {
    .profile-language-select-wrap { width: 100%; min-width: 0; max-width: none; margin-left: 0; }
    .profile-theme-options,
    .profile-unit-options { grid-template-columns: 1fr; }
    .notifications-hero { align-items: flex-start; flex-direction: column; }
    .notifications-hero > div:last-child { min-width: 0; }
    .notification-threshold-row { grid-template-columns: 36px minmax(0, 1fr); padding: 11px; }
    .notification-threshold-row-icon { width: 36px; height: 36px; }
    .notification-threshold-state { grid-column: 2; grid-row: auto; justify-self: start; }
    .notification-threshold-bounds,
    .notification-threshold-open { grid-column: 1 / -1; }
    .security-password-fields { grid-template-columns: 1fr; }
    .security-password-fields label:first-child { grid-column: auto; }
    .about-waterly-hero { grid-template-columns: 1fr; gap: 17px; padding: 20px; }
    .about-waterly-brand { width: 150px; min-height: 92px; padding: 18px; border-radius: 19px; }
    .about-waterly-footer,
    .about-waterly-social { grid-template-columns: 1fr; align-items: flex-start; }
    .about-waterly-social { display: block; }
    .about-waterly-social nav { margin-top: 12px; }
    .about-waterly-version { padding: 14px 0 0; border-top: 1px solid rgba(143, 184, 220, 0.12); border-left: 0; text-align: left; }
}

/* Waterly typography roles. */
.settings-title { font-family: var(--wl-font-display); font-weight: 600; }


/* features/profile/profile-notifications.css */
/* Account notification channels and rules share the profile theme, without animation. */
#settings-body-notifications {
    --notify-text: #e1edf3;
    --notify-muted: #9aafb9;
    --notify-line: #89b7ca26;
    --notify-surface: #11232ccc;
    --notify-card: #182d36;
    --notify-accent: #79c9ff;
    --notify-green: #77d8b8;
    --notify-green-bg: #34bf9520;
    --notify-alarm: #ff9daa;
    --notify-alarm-bg: #ff6b8214;
    --notify-warning: #ffd08a;
    --notify-warning-bg: #e9a33b14;
    --notify-switch-knob: #d6e3e9;
    color: var(--notify-text);
}
html[data-theme="light"] #settings-body-notifications {
    --notify-text: #213e4d;
    --notify-muted: #577080;
    --notify-line: #427c9d2b;
    --notify-surface: #ffffffea;
    --notify-card: #f7fbfd;
    --notify-accent: #0875ab;
    --notify-green: #157b62;
    --notify-green-bg: #20a67d12;
    --notify-alarm: #bc334c;
    --notify-alarm-bg: #e3456210;
    --notify-warning: #926014;
    --notify-warning-bg: #e9a33b13;
    --notify-switch-knob: #7f97a3;
}
#settings-body-notifications .notification-channels { margin-bottom: 24px; }
#settings-body-notifications .notification-channels-heading { margin: 0 4px 14px; }
#settings-body-notifications .notification-channels-heading > span { color: var(--notify-accent); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
#settings-body-notifications .notification-channels-heading h3 { margin: 5px 0; color: var(--notify-text); font-size: 18px; font-weight: 800; }
#settings-body-notifications .notification-channels-heading p,
#settings-body-notifications .notification-rules-hint { margin: 6px 0 0; color: var(--notify-muted); font-size: 12px; line-height: 1.65; }
#settings-body-notifications .notification-channel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
#settings-body-notifications .notification-channel {
    position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr) 36px;
    align-content: start; align-items: center; gap: 10px 12px; margin: 0; padding: 20px;
    border: 1px solid var(--notify-line); border-radius: 16px; background: var(--notify-surface);
    color: var(--notify-text); cursor: default;
}
#settings-body-notifications .notification-channel.is-enabled { border-color: #34bf9545; background: linear-gradient(125deg, var(--notify-green-bg), transparent 85%), var(--notify-surface); }
#settings-body-notifications .notification-channel-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: var(--notify-muted); background: #88a8b215; font-size: 17px; }
#settings-body-notifications .is-enabled .notification-channel-icon { color: var(--notify-green); background: var(--notify-green-bg); }
#settings-body-notifications .notification-channel-name { font-size: 15px; font-weight: 800; }
#settings-body-notifications .notification-channel-description { grid-column: 1 / -1; color: var(--notify-muted); font-size: 12px; line-height: 1.6; }
#settings-body-notifications .notification-channel-address { grid-column: 1 / -1; color: var(--notify-green); font-size: 12px; overflow-wrap: anywhere; }
#settings-body-notifications .notification-channel-address:empty { display: none; }
#settings-body-notifications .notification-channel-status { grid-column: 1 / -1; display: flex; align-items: center; gap: 7px; color: var(--notify-muted); font-size: 11px; font-weight: 700; }
#settings-body-notifications .is-enabled .notification-channel-status { color: var(--notify-green); }
#settings-body-notifications .notification-channel input { position: absolute; top: 24px; right: 20px; width: 36px; height: 22px; margin: 0; opacity: 0; }
#settings-body-notifications .notification-channel-switch { display: block; width: 36px; height: 22px; padding: 3px; border-radius: 99px; background: #88a8b245; }
#settings-body-notifications .notification-channel-switch::after { content: ""; display: block; width: 16px; height: 16px; border-radius: 50%; background: var(--notify-switch-knob); }
#settings-body-notifications input:checked + .notification-channel-switch { background: #16886d; }
#settings-body-notifications input:checked + .notification-channel-switch::after { transform: translateX(14px); background: #fff; }
#settings-body-notifications .notification-subscriptions-card { background: var(--notify-surface); border-color: var(--notify-line); border-radius: 18px; }
#settings-body-notifications .notification-subscriptions-heading { padding: 20px; gap: 16px; }
#settings-body-notifications .notification-subscriptions-heading h3 { font-size: 18px; }
#settings-body-notifications .notification-subscriptions-status { font-size: 10px; flex-shrink: 0; }

/* Rules adapt to the account panel width, including on wide screens. */
#settings-body-notifications .notification-subscriptions-card { container: notification-rules / inline-size; }
#settings-body-notifications .notification-subscriptions-heading { padding: 20px; }
#settings-body-notifications .notification-rules-hint { max-width: 650px; font-size: 13px; line-height: 1.6; }
#settings-body-notifications .notification-threshold-list { display: block; padding: 0; }
#settings-body-notifications .notification-threshold-list *,
#settings-body-notifications .notification-threshold-list *::before { box-sizing: border-box; }
#settings-body-notifications .notification-threshold-list [hidden] { display: none !important; }
#settings-body-notifications .notification-table-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 16px 20px; }
#settings-body-notifications .notification-table-search { flex: 1 1 280px; display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0; padding: 0 14px; border: 1px solid var(--notify-line); border-radius: 10px; color: var(--notify-muted); background: var(--notify-card); }
#settings-body-notifications .notification-table-search input { min-width: 0; width: 100%; height: 44px; padding: 0; border: 0!important; background: transparent!important; color: var(--notify-text)!important; font-size: 14px; outline: 0; }
#settings-body-notifications .notification-table-search:focus-within { outline: 2px solid var(--notify-accent); outline-offset: 2px; }
#settings-body-notifications select.notification-table-filter { flex: 0 1 175px; min-width: 0; max-width: 100%; height: 44px; padding: 0 28px 0 12px; border: 1px solid var(--notify-line)!important; border-radius: 10px!important; background-color: var(--notify-card)!important; color: var(--notify-text)!important; text-align: left!important; font-size: 13px; text-overflow: ellipsis; }
#settings-body-notifications .notification-table-clear { min-height: 44px; padding: 0 8px; border: 0; background: transparent; color: var(--notify-accent); font-size: 12px; }
#settings-body-notifications .notification-selection-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 10px 20px; border-block: 1px solid var(--notify-line); background: var(--notify-card); }
#settings-body-notifications .notification-select-all { display: flex; align-items: center; gap: 9px; margin: 0; min-height: 44px; font-size: 12px; color: var(--notify-text); cursor: pointer; }
#settings-body-notifications :is(.notification-select-all, .notification-row-select-label) input { flex-shrink: 0; width: 18px; height: 18px; margin: 0; accent-color: #147ac1; cursor: pointer; }
#settings-body-notifications .notification-selection-count { flex: 1; color: var(--notify-muted); font-size: 12px; }
#settings-body-notifications :is(.notification-table-delete-selected, .notification-table-delete-confirm) { min-height: 44px; padding: 10px 14px; border: 1px solid var(--notify-alarm); border-radius: 9px; color: var(--notify-alarm); background: var(--notify-alarm-bg); font-size: 13px; font-weight: 700; }
#settings-body-notifications .notification-table-wrap { width: 100%; }
#settings-body-notifications .notification-rules-table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; color: var(--notify-text); font-size: 13px; text-align: left; }
#settings-body-notifications .notification-rules-table :is(th,td) { height: auto; padding: 16px; padding-inline: 16px !important; border: 0; border-bottom: 1px solid var(--notify-line); vertical-align: middle; line-height: 1.5; text-align: left; overflow-wrap: anywhere; }
#settings-body-notifications .notification-rules-table th { padding-block: 12px; color: var(--notify-muted); font-size: 12px; font-weight: 600; }
#settings-body-notifications .notification-rules-table tr { cursor: default; }
#settings-body-notifications .notification-table-sort { display: flex; align-items: center; gap: 8px; min-height: 24px; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; }
#settings-body-notifications [aria-sort]:not([aria-sort="none"]) .notification-table-sort { color: var(--notify-accent); }
#settings-body-notifications .notification-sort-arrow { margin-left: auto; opacity: .7; }
#settings-body-notifications .notification-col-parameter { width: 28%; }
#settings-body-notifications td.notification-col-parameter { position: relative; padding-left: 58px !important; }
#settings-body-notifications .notification-row-select-label { position: absolute; top: 50%; left: 12px; display: grid; place-items: center; width: 40px; height: 44px; transform: translateY(-50%); cursor: pointer; }
#settings-body-notifications .notification-rule-point { display: block; color: var(--notify-accent); font-size: 12px; margin-bottom: 4px; }
#settings-body-notifications .notification-table-parameter strong { display: block; color: var(--notify-text); font-size: 15px; font-weight: 750; }
#settings-body-notifications .notification-table-parameter small { display: block; margin-top: 4px; color: var(--notify-muted); font-size: 11px; }
#settings-body-notifications .notification-bounds-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; }
#settings-body-notifications .notification-col-bound { display: flex; flex-direction: column; justify-content: space-between; gap: 7px; min-width: 0; padding: 10px; border-radius: 8px; background: var(--notify-warning-bg); color: var(--notify-warning); }
#settings-body-notifications .notification-col-bound.is-alarm { background: var(--notify-alarm-bg); color: var(--notify-alarm); }
#settings-body-notifications .notification-bound-label { font-size: 11px; line-height: 1.4; }
#settings-body-notifications .notification-table-value { display: block; font-size: 16px; font-weight: 750; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
#settings-body-notifications .notification-col-bound:has(.is-unset) { background: var(--notify-card); color: var(--notify-muted); }
#settings-body-notifications .notification-table-value.is-unset { font-weight: 400; }
#settings-body-notifications .notification-col-state { width: 140px; }
#settings-body-notifications .notification-table-state { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 99px; color: var(--notify-green); background: var(--notify-green-bg); font-size: 11px; white-space: nowrap; }
#settings-body-notifications .notification-table-state::before { content: ''; width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; background: currentColor; }
#settings-body-notifications .is-inactive .notification-table-state { color: var(--notify-muted); background: #88a8b212; }
#settings-body-notifications .notification-col-actions { width: 160px; }
#settings-body-notifications .notification-row-actions { display: flex; flex-wrap: wrap; gap: 6px; }
#settings-body-notifications :is(.notification-table-edit, .notification-table-delete) { min-height: 44px; padding: 8px 10px; border: 1px solid var(--notify-line); border-radius: 8px; background: transparent; color: var(--notify-accent); font-size: 13px; font-weight: 700; }
#settings-body-notifications .notification-table-delete { color: var(--notify-alarm); }
#settings-body-notifications .notification-table-row:is(:hover,.is-editing,.is-selected) td { background: var(--notify-card); }
#settings-body-notifications .notification-table-row:is(.is-editing,.is-selected) td:first-child { box-shadow: inset 3px 0 var(--notify-accent); }
#settings-body-notifications .notification-table-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; color: var(--notify-muted); font-size: 12px; }
#settings-body-notifications .notification-table-pages { display: flex; align-items: center; gap: 10px; }
#settings-body-notifications .notification-table-pages button { width: 44px; height: 44px; border: 1px solid var(--notify-line); border-radius: 8px; color: var(--notify-accent); background: var(--notify-card); font-size: 22px; }
#settings-body-notifications .notification-threshold-list button:disabled { opacity: .4; cursor: default; }
#settings-body-notifications .notification-threshold-list :is(button,select,input):focus-visible { outline: 2px solid var(--notify-accent); outline-offset: 2px; }
#settings-body-notifications .notification-table-no-results { padding: 32px 20px; text-align: center; color: var(--notify-muted); font-size: 14px; }
#settings-body-notifications .notification-table-message:not(:empty) { padding: 12px 20px; font-size: 13px; color: var(--notify-green); }
#settings-body-notifications .notification-rules-table .notification-editor-row td { padding: 0 !important; background: var(--notify-card); }
#settings-body-notifications .notification-rule-editor { padding: 20px; }
#settings-body-notifications .notification-editor-title { color: var(--notify-text); font-size: 15px; overflow-wrap: anywhere; }
#settings-body-notifications .notification-editor-hint { margin: 6px 0 16px; color: var(--notify-muted); font-size: 12px; }
#settings-body-notifications .notification-editor-fields { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
#settings-body-notifications .notification-editor-fields label { display: block; min-width: 0; margin: 0; color: var(--notify-warning); font-size: 12px; overflow-wrap: anywhere; }
#settings-body-notifications .notification-editor-fields label.is-alarm { color: var(--notify-alarm); }
#settings-body-notifications .notification-editor-fields input { box-sizing: border-box; width: 100%; height: 44px; margin: 7px 0 0; padding: 0 12px; border: 1px solid var(--notify-line)!important; border-radius: 8px; color: var(--notify-text)!important; background: var(--notify-surface)!important; font-size: 16px; }
#settings-body-notifications .notification-editor-fields small { display: block; margin-top: 4px; color: var(--notify-muted); font-size: 11px; }
#settings-body-notifications .notification-editor-controls { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
#settings-body-notifications .notification-editor-controls label { display: flex; align-items: center; gap: 9px; margin: 0 auto 0 0; min-height: 44px; font-size: 13px; color: var(--notify-text); }
#settings-body-notifications .notification-editor-controls input { width: 18px; height: 18px; accent-color: #147ac1; }
#settings-body-notifications :is(.notification-editor-controls, .notification-delete-controls) button { min-height: 44px; padding: 10px 16px; border-radius: 8px; font-size: 13px; font-weight: 700; }
#settings-body-notifications .notification-editor-cancel { border: 1px solid var(--notify-line); background: transparent; color: var(--notify-text); }
#settings-body-notifications .notification-editor-save { background: #147ac1; border: 1px solid #147ac1; color: #fff; }
#settings-body-notifications .notification-editor-error { margin: 10px 0 0; font-size: 13px; color: var(--notify-alarm); }
#settings-body-notifications .notification-editor-error:empty { display: none; }
#settings-body-notifications .notification-delete-confirmation { margin: 16px 20px; padding: 16px; border: 1px solid var(--notify-alarm); border-radius: 12px; background: var(--notify-alarm-bg); color: var(--notify-text); font-size: 13px; overflow-wrap: anywhere; }
#settings-body-notifications .notification-delete-confirmation strong { font-size: 16px; }
#settings-body-notifications .notification-delete-confirmation p { margin: 8px 0; line-height: 1.6; }
#settings-body-notifications .notification-delete-confirmation ul { max-height: 160px; overflow-y: auto; margin: 12px 0; padding-left: 20px; line-height: 1.8; }
#settings-body-notifications .notification-delete-controls { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 14px; }
@container notification-rules (max-width:1100px) {
 #settings-body-notifications .notification-table-search { flex-basis: 100%; }
 #settings-body-notifications select.notification-table-filter { flex: 1 1 175px; }
 #settings-body-notifications .notification-bounds-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
 #settings-body-notifications .notification-col-actions { width: 96px; }
 #settings-body-notifications .notification-row-actions { flex-direction: column; }
}
@container notification-rules (max-width:760px) {
 #settings-body-notifications .notification-table-toolbar { padding: 12px; gap: 8px; }
 #settings-body-notifications .notification-table-search { flex-basis: 100%; }
 #settings-body-notifications select.notification-table-filter { flex: 1 1 calc(50% - 8px); font-size: 12px; }
 #settings-body-notifications .notification-selection-bar { padding: 8px 12px; gap: 4px 10px; }
 #settings-body-notifications .notification-selection-count { flex-basis: 100%; order: 2; padding-bottom: 6px; }
 #settings-body-notifications .notification-table-delete-selected { margin-left: auto; }
 #settings-body-notifications .notification-rules-table { display: block; }
 #settings-body-notifications .notification-rules-table thead { display: none; }
 #settings-body-notifications .notification-rules-table tbody { display: block; padding: 12px; }
 #settings-body-notifications .notification-rules-table .notification-table-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; padding: 14px; margin-bottom: 12px; border: 1px solid var(--notify-line); border-radius: 12px; }
 #settings-body-notifications .notification-rules-table .notification-table-row:last-child { margin-bottom: 0; }
 #settings-body-notifications .notification-rules-table .notification-table-row:is(.is-editing,.is-selected) { border-color: var(--notify-accent); background: var(--notify-card); }
 #settings-body-notifications .notification-rules-table .notification-table-row td { display: block; width: auto; padding: 0 !important; border: 0; min-width: 0; background: transparent; box-shadow: none; }
 #settings-body-notifications .notification-rules-table .notification-table-row:is(.is-editing,.is-selected) td:first-child { box-shadow: none; }
 #settings-body-notifications .notification-rules-table td.notification-col-parameter { grid-column: 1 / -1; padding-left: 36px !important; }
 #settings-body-notifications .notification-row-select-label { left: -8px; top: 0; transform: none; }
 #settings-body-notifications .notification-rules-table td.notification-col-bounds { grid-column: 1 / -1; }
 #settings-body-notifications .notification-rules-table td.notification-col-state { align-self: center; }
 #settings-body-notifications .notification-row-actions { flex-direction: row; }
 #settings-body-notifications .notification-table-footer { padding: 0 12px 12px; }
 #settings-body-notifications .notification-rules-table .notification-editor-row { display: block; margin: -12px 0 12px; border: 1px solid var(--notify-accent); border-top: 0; border-radius: 0 0 12px 12px; overflow: hidden; }
 #settings-body-notifications .notification-rules-table .notification-editor-row td { display: block; }
 #settings-body-notifications .notification-rule-editor { padding: 14px; }
 #settings-body-notifications .notification-editor-fields { grid-template-columns: repeat(2,minmax(0,1fr)); }
 #settings-body-notifications .notification-editor-controls { flex-wrap: wrap; }
 #settings-body-notifications .notification-editor-controls label { flex-basis: 100%; }
 #settings-body-notifications .notification-delete-confirmation { margin: 12px; padding: 14px; }
}
@container notification-rules (max-width:400px) {
 #settings-body-notifications .notification-rules-table td.notification-col-actions { grid-column: 1 / -1; }
 #settings-body-notifications .notification-row-actions button { flex: 1; }
}
@media (max-width:1000px) {
 #settings-body-notifications .notification-channel { padding: 16px; grid-template-columns: 34px minmax(0,1fr) 36px; gap: 10px; }
 #settings-body-notifications .notification-channel-icon { width: 34px; height: 34px; }
 #settings-body-notifications .notification-channel input { top: 22px; right: 16px; }
}
@media (max-width:640px) {
 #settings-body-notifications .notification-channel-grid { grid-template-columns: minmax(0,1fr); gap: 10px; }
 #settings-body-notifications .notification-channel-description, #settings-body-notifications .notification-channel-address, #settings-body-notifications .notification-channel-status { grid-column: 2 / -1; }
 #settings-body-notifications .notification-subscriptions-heading { align-items: flex-start; flex-direction: column; padding: 14px; gap: 8px; }
 #settings-body-notifications .notification-table-search input { font-size: 16px; }
}


/* features/profile/profile-security.css */
/* Account security uses the same surface and spacing in both themes. */
#settings-body-security, .security-confirm {
    --security-surface: #142129;
    --security-raised: #192b36;
    --security-border: #2b404d;
    --security-text: #edf5f8;
    --security-muted: #a2b5c2;
    --security-blue: #8acbff;
    --security-green: #80d8b4;
    --security-danger: #ffa0aa;
}
html[data-theme="light"] #settings-body-security, html[data-theme="light"] .security-confirm {
    --security-surface: #fff;
    --security-raised: #f1f6f9;
    --security-border: #cddce5;
    --security-text: #193342;
    --security-muted: #516a7a;
    --security-blue: #146cae;
    --security-green: #16764f;
    --security-danger: #b63043;
}
#settings-body-security { max-width: 1500px; margin-inline: auto; color: var(--security-text); }
.security-workspace { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr); align-items: start; gap: 20px; }
.security-workspace > section { min-width: 0; border: 1px solid var(--security-border); border-radius: 18px; background: var(--security-surface); padding: 24px; }
#settings-body-security .security-hero { margin-bottom: 24px; }
#settings-body-security .security-hero h2 { font-size: 26px; }
#settings-body-security .security-hero p { color: var(--security-muted); font-size: 13px; }
.security-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
#settings-body-security .security-card-heading { gap: 12px; margin-bottom: 20px; min-width: 0; }
#settings-body-security .security-card-heading h3 { color: var(--security-text); font-size: 18px; line-height: 1.3; margin: 0; }
#settings-body-security .security-card-heading p { color: var(--security-muted); font-size: 12px; line-height: 1.6; margin: 6px 0 0; }
#settings-body-security .account-section-icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; }
#settings-body-security button, .security-confirm button { min-height: 42px; font-size: 12px; font-weight: 650; }
#settings-body-security .security-secondary, .security-confirm .security-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: var(--security-text); border: 1px solid var(--security-border); background: var(--security-raised); border-radius: 10px; padding: 10px 13px; line-height: 1.4; }
#settings-body-security .security-secondary:hover, .security-confirm .security-secondary:hover { border-color: var(--security-blue); }
.security-refresh { flex-shrink: 0; }
.security-session-summary { display: flex; align-items: center; gap: 12px; justify-content: space-between; margin: 0 -24px; padding: 14px 24px; background: var(--security-raised); border-block: 1px solid var(--security-border); font-size: 12px; }
.security-session-count { font-size: 20px; font-variant-numeric: tabular-nums; margin-right: 4px; }
.security-session-summary-hint { color: var(--security-muted); font-size: 11px; text-align: right; }
.security-session-list { list-style: none; padding: 0; margin: 0; }
.security-session { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 14px; padding-block: 22px; border-bottom: 1px solid var(--security-border); }
.security-device-icon { width: 42px; height: 42px; border: 1px solid var(--security-border); border-radius: 12px; display: grid; place-items: center; color: var(--security-muted); background: var(--security-raised); font-size: 18px; }
.security-session.is-current .security-device-icon { color: var(--security-blue); }
.security-session-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.security-session-heading strong { min-width: 0; font-size: 14px; font-weight: 750; overflow-wrap: anywhere; }
.security-current-badge { flex-shrink: 0; color: var(--security-green); background: color-mix(in srgb, var(--security-green) 9%, transparent); border: 1px solid color-mix(in srgb, var(--security-green) 25%, transparent); border-radius: 6px; padding: 3px 7px; font-size: 10px; font-weight: 700; }
.security-session-application { color: var(--security-muted); font-size: 11px; margin: 5px 0 12px; overflow-wrap: anywhere; }
.security-session dl { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px 18px; margin: 0; }
.security-session dt { color: var(--security-muted); font-size: 10px; font-weight: 500; margin-bottom: 3px; }
.security-session dd { color: var(--security-text); font-size: 11px; line-height: 1.5; margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.security-session-revoke { align-self: start; }
.security-sessions-footer { padding-top: 18px; }
.security-sessions-footer > p { display: flex; align-items: start; gap: 8px; margin: 0 0 16px; color: var(--security-muted); font-size: 11px; line-height: 1.6; }
.security-sessions-footer > p i { margin-top: 3px; }
.security-session-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
#settings-body-security .security-text-action { color: var(--security-danger); background: none; border: 0; padding: 6px 0; text-align: left; }
#settings-body-security button:disabled { opacity: .5; cursor: default; }
.security-inline-message { color: var(--security-muted); font-size: 12px; line-height: 1.6; margin: 14px 0 0; overflow-wrap: anywhere; }
.security-inline-message:empty { display: none; }
.security-inline-message.is-error, .security-delete-message { color: var(--security-danger); }
#settings-body-security .security-password-fields { display: grid; grid-template-columns: 1fr; gap: 16px; }
#settings-body-security .security-password-field { grid-column: auto; }
#settings-body-security .security-password-field > label { display: block; font-size: 12px; color: var(--security-text); margin-bottom: 8px; font-weight: 600; }
.security-password-input { position: relative; }
#settings-body-security .security-password-input input { width: 100%; height: 46px; padding: 10px 48px 10px 12px; color: var(--security-text); background: var(--security-raised); border: 1px solid var(--security-border); border-radius: 10px; font-size: 14px; }
#settings-body-security .security-password-toggle { position: absolute; right: 2px; top: 2px; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--security-muted); }
#settings-body-security .security-password-toggle[aria-pressed="true"] { color: var(--security-blue); }
.security-password-feedback { margin-top: 20px; }
#settings-body-security .password-strength-meter { height: 5px; background: var(--security-border); border-radius: 4px; overflow: hidden; }
#settings-body-security .password-strength-meter-score { height: 100%; transition: width .2s; }
#settings-body-security .password-strength-meter-score.psms-25 { background: #df9a65; }
#settings-body-security .password-strength-meter-score.psms-50, #settings-body-security .password-strength-meter-score.psms-75, #settings-body-security .password-strength-meter-score.psms-100 { background: var(--security-green); }
#settings-body-security .password-strength-message { color: var(--security-danger); font-size: 11px; min-height: 18px; margin: 8px 0 0; line-height: 1.5; }
#settings-body-security .password-strength-message.is-valid { color: var(--security-green); }
#settings-body-security .password-requirements { color: var(--security-muted); font-size: 12px; line-height: 1.65; border: 0; padding: 0; margin: 16px 0; background: none; }
.security-password-notice { display: flex; gap: 10px; color: var(--security-muted); background: var(--security-raised); border-radius: 10px; padding: 13px; font-size: 11px; line-height: 1.6; margin: 0 0 20px; }
.security-password-notice i { color: var(--security-blue); padding-top: 3px; }
#settings-body-security .save-change-password { width: 100%; justify-content: center; min-height: 46px; border-radius: 10px; }
.security-danger-zone { display: flex; justify-content: space-between; align-items: center; gap: 24px; border: 1px solid color-mix(in srgb, var(--security-danger) 25%, var(--security-border)); border-radius: 16px; margin-top: 20px; padding: 22px 24px; background: color-mix(in srgb, var(--security-danger) 3%, var(--security-surface)); }
.security-danger-copy { display: flex; align-items: center; gap: 16px; min-width: 0; }
.security-danger-zone .account-danger-icon { width: 44px; height: 44px; margin: 0; flex-shrink: 0; color: var(--security-danger); }
.security-danger-copy > div > span { font-size: 10px; font-weight: 700; color: var(--security-danger); letter-spacing: .05em; text-transform: uppercase; }
.security-danger-copy h3 { font-size: 16px; color: var(--security-text); font-weight: 750; margin: 4px 0 6px; }
.security-danger-copy p { color: var(--security-muted); font-size: 12px; line-height: 1.6; margin: 0; max-width: 800px; }
#settings-body-security .security-danger-button { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--security-danger); border: 1px solid color-mix(in srgb, var(--security-danger) 40%, transparent); background: none; border-radius: 10px; padding: 10px 18px; flex-shrink: 0; }
#settings-body-security .security-danger-button:hover { background: color-mix(in srgb, var(--security-danger) 10%, transparent); }
#settings-body-security button:focus-visible, #settings-body-security input:focus-visible, .security-confirm :focus-visible { outline: 3px solid var(--security-blue); outline-offset: 3px; }
.security-confirm { width: min(460px, calc(100% - 28px)); max-height: calc(100dvh - 32px); overflow: auto; padding: 26px; border: 1px solid var(--security-border); border-radius: 18px; color: var(--security-text); background: var(--security-surface); box-shadow: 0 20px 80px #0006; }
.security-confirm::backdrop { background: #04101c99; backdrop-filter: blur(5px); }
.security-confirm h3 { color: var(--security-text); font-size: 20px; font-weight: 750; margin: 0 0 12px; }
.security-confirm p { color: var(--security-muted); font-size: 13px; line-height: 1.7; margin-bottom: 20px; }
.security-confirm label { display: block; color: var(--security-text); font-size: 12px; font-weight: 600; }
.security-confirm input { margin-top: 8px; min-height: 46px; color: var(--security-text); border: 1px solid var(--security-border); background: var(--security-raised); }
.security-confirm-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
@media (max-width: 1100px) { .security-workspace { grid-template-columns: minmax(0,1fr); } .security-workspace .password-change-card { max-width: none; } }
@media (max-width: 640px) {
    .security-workspace { gap: 14px; }
    .security-workspace > section { border-radius: 14px; padding: 18px 14px; }
    #settings-body-security .security-card-heading h3 { font-size: 16px; }
    .security-card-header { gap: 8px; }
    .security-refresh span { display: none; }
    #settings-body-security .security-refresh { padding: 10px; width: 42px; }
    .security-session-summary { margin-inline: -14px; padding-inline: 14px; }
    .security-session-summary-hint { display: none; }
    .security-session { grid-template-columns: 34px minmax(0,1fr); gap: 10px; padding-block: 18px; }
    .security-device-icon { width: 34px; height: 38px; font-size: 16px; }
    .security-session-revoke { grid-column: 2; justify-self: start; }
    .security-session dl { grid-template-columns: 1fr; gap: 8px; }
    .security-session-heading { gap: 6px; }
    .security-session-actions { align-items: stretch; flex-direction: column; gap: 6px; }
    #settings-body-security .security-text-action { text-align: center; }
    .security-danger-zone { flex-direction: column; align-items: stretch; padding: 18px 14px; gap: 16px; margin-top: 14px; }
    .security-danger-copy { align-items: flex-start; gap: 12px; }
    .security-confirm { padding: 22px 18px; }
}
@media (prefers-reduced-motion: reduce) { #settings-body-security .password-strength-meter-score { transition: none; } }

dialog.security-confirm input.form-control:focus { color: var(--security-text); background: var(--security-raised); border-color: var(--security-blue); box-shadow: none; }

.security-session-total { display: inline-flex; align-items: center; gap: 12px; }

#settings-body-security .password-strength-message.is-empty { color: var(--security-muted); }


/* shared/ui/dialog.css */
/**************************************************************************************************
	@author         waterly.eu
	@module         CSS
	@file           src/shared/ui/dialog.css
	@description    Warstwa dialogów zbudowanych na modalu Bootstrapa
**************************************************************************************************/

/*
	Bootstrap ustawia modal na z-index 1050, a aplikacja ma nad nim własne pełnoekranowe okna:
	analizę laboratoryjną (10050) i wykres wieloparametrowy (12000). Dialog otwierany z ich wnętrza
	musi je przykryć - inaczej pytanie o potwierdzenie jest niewidoczne, a interfejs zablokowany.

	Poprzednik (Lobibox) rozwiązywał to własnym z-index 10001, co i tak było za mało dla okna
	wykresu.
*/
.waterly-dialog.modal {
	z-index: 12500;
}

.waterly-dialog .modal-dialog {
	width: calc(100% - 32px);
	max-width: 460px;
}

/*
	Podniesienie tła tylko na czas otwartego dialogu. Reguła bezwarunkowa na `.modal-backdrop`
	dotyczyła każdego modala w aplikacji - zapomniane tło lądowało nad całym interfejsem i zjadało
	wszystkie kliknięcia, przez co nie dało się zamknąć ani laboratorium, ani wyszukiwarki urządzeń.
*/
body.waterly-dialog-open > .modal-backdrop {
	z-index: 12490;
}

/*
	Domyślny modal Bootstrapa jest biały. Aplikacja jest ciemna, więc dialog korzysta z tych samych
	zmiennych motywu co reszta interfejsu - inaczej potwierdzenie usunięcia świeci bielą na tle
	granatowej mapy, a tytuł ginie.
*/
.waterly-dialog .modal-content {
	overflow: hidden;
	border: 1px solid rgba(119, 170, 198, 0.18);
	border-radius: 18px;
	background:
		radial-gradient(circle at 0 0, rgba(75, 165, 219, 0.09), transparent 42%),
		var(--waterly-surface, #111a20);
	color: var(--waterly-text, #e8eef3);
	box-shadow: 0 28px 80px rgba(0, 0, 0, 0.58), inset 0 1px rgba(255, 255, 255, 0.025);
}

.waterly-dialog .modal-header,
.waterly-dialog .modal-footer {
	border-color: var(--waterly-border, rgba(255, 255, 255, 0.08));
}

.waterly-dialog .modal-header {
	align-items: center;
	padding: 20px 22px 14px;
	border-bottom: 0;
}

.waterly-dialog .lobibox-title {
	font-size: 17px;
	font-weight: 800;
	letter-spacing: -0.01em;
	text-transform: none;
	color: var(--waterly-text, #e8eef3);
}

.waterly-dialog .modal-body {
	padding: 4px 22px 22px;
	color: var(--waterly-text, #e8eef3);
}

.waterly-dialog .modal-footer {
	display: flex;
	justify-content: flex-end;
	gap: 9px;
	padding: 15px 22px 20px;
	border-top: 1px solid rgba(125, 171, 195, 0.1);
}

.waterly-dialog .lobibox-btn {
	min-width: 98px;
	height: 39px;
	margin: 0;
	padding: 0 17px;
	border-radius: 10px;
	font-size: 12px;
	font-weight: 800;
	box-shadow: none;
}

.waterly-dialog .lobibox-btn.btn-secondary {
	border-color: rgba(133, 168, 187, 0.17);
	color: #aabac3;
	background: rgba(133, 168, 187, 0.07);
}

.waterly-dialog .lobibox-btn.btn-secondary:hover {
	border-color: rgba(133, 168, 187, 0.3);
	color: #eff6f8;
	background: rgba(133, 168, 187, 0.13);
}

.waterly-dialog .lobibox-btn.btn-danger {
	border-color: rgba(231, 78, 94, 0.66);
	color: #ffffff;
	background: linear-gradient(135deg, #e35b68, #c93c4d);
	box-shadow: 0 8px 18px rgba(201, 60, 77, 0.18);
}

.waterly-dialog .lobibox-btn.btn-danger:hover {
	border-color: #f17681;
	background: linear-gradient(135deg, #ed6875, #d74757);
	transform: translateY(-1px);
}

.waterly-dialog-message {
	display: grid;
	grid-template-columns: 42px minmax(0, 1fr);
	align-items: center;
	gap: 13px;
	color: var(--waterly-text, #e8eef3) !important;
}

.waterly-dialog-message-icon {
	width: 42px;
	height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(244, 90, 105, 0.24);
	border-radius: 12px;
	color: #ff7d8a;
	background: rgba(244, 90, 105, 0.08);
}

.waterly-dialog-message p {
	margin: 0;
	color: var(--waterly-text-muted, #9babb4);
	font-size: 12px;
	line-height: 1.55;
}

/* Krzyżyk Bootstrapa jest czarny i na ciemnym tle znika. */
.waterly-dialog .btn-close {
	width: 32px;
	height: 32px;
	margin: -5px -7px -5px auto;
	padding: 0;
	border-radius: 9px;
	background-color: rgba(131, 166, 185, 0.06);
	filter: invert(1) grayscale(100%) brightness(170%);
	opacity: 1;
}

.waterly-dialog .btn-close:hover {
	background-color: rgba(131, 166, 185, 0.13);
	opacity: 1;
}

@media (max-width: 480px) {
	.waterly-dialog .modal-footer { flex-direction: column-reverse; }
	.waterly-dialog .lobibox-btn { width: 100%; }
}


/* shared/ui/toast.css */
.waterly-toast-container {
	position: fixed;
	z-index: 10900;
	top: calc(18px + var(--safe-top, 0px));
	right: calc(18px + var(--safe-right, 0px));
	display: grid;
	width: min(380px, calc(100vw - 36px));
	gap: 10px;
	pointer-events: none;
}

.waterly-toast {
	position: relative;
	display: grid;
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	min-height: 72px;
	grid-template-columns: 40px minmax(0, 1fr) 30px;
	align-items: center;
	column-gap: 11px;
	margin: 0 !important;
	padding: 13px 12px 13px 16px;
	overflow: hidden;
	border: 1px solid rgba(148, 163, 184, 0.2);
	border-radius: 16px;
	background: rgba(8, 25, 37, 0.96);
	box-shadow: 0 20px 55px rgba(0, 0, 0, 0.34), 0 4px 14px rgba(0, 0, 0, 0.2);
	color: #e8f6fb;
	backdrop-filter: blur(18px);
	pointer-events: auto;
}

/* Bootstrap changes a visible `.toast` to `display: block`, which breaks the
   icon / copy / close-button columns. Keep its visibility classes, but retain
   the component layout while the toast is entering or visible. */
.toast.waterly-toast.showing,
.toast.waterly-toast.show {
	display: grid !important;
}

.waterly-toast-accent {
	position: absolute;
	inset: 0 auto 0 0;
	width: 4px;
	background: #38bdf8;
}

.waterly-toast-icon {
	display: grid;
	width: 38px;
	height: 38px;
	place-items: center;
	border-radius: 12px;
	background: rgba(56, 189, 248, 0.13);
	color: #67d5f6;
}

.waterly-toast-copy {
	display: grid;
	align-content: center;
	gap: 4px;
	min-width: 0;
}

.waterly-toast-copy strong {
	font-size: 13px;
	font-weight: 750;
	line-height: 1.25;
}

.waterly-toast-copy > span {
	display: block;
	overflow-wrap: anywhere;
	color: #91aab7;
	font-size: 10px;
	line-height: 1.45;
}

.waterly-toast-close {
	display: grid;
	width: 30px;
	height: 30px;
	align-self: center;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 9px;
	outline: 0;
	background: transparent;
	color: #708997;
	cursor: pointer;
}

.waterly-toast-close:hover,
.waterly-toast-close:focus-visible {
	background: rgba(255, 255, 255, 0.07);
	color: #e8f6fb;
}

.waterly-native-update-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 7px;
}

.waterly-native-update-actions button {
	min-height: 36px;
	padding: 7px 12px;
	border: 1px solid rgba(103, 213, 246, 0.35);
	border-radius: 9px;
	background: rgba(56, 189, 248, 0.12);
	color: inherit;
	font: inherit;
	font-size: 12px;
	line-height: 1.4;
	cursor: pointer;
}

.waterly-native-update-actions [data-native-update-action="update"] {
	border-color: #67d5f6;
	background: #67d5f6;
	color: #08202c;
	font-weight: 700;
}

.waterly-native-update-actions button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.waterly-toast-success .waterly-toast-accent { background: #34d399; }
.waterly-toast-success .waterly-toast-icon { color: #4ade80; background: rgba(52, 211, 153, 0.13); }
.waterly-toast-warning .waterly-toast-accent { background: #fbbf24; }
.waterly-toast-warning .waterly-toast-icon { color: #facc15; background: rgba(251, 191, 36, 0.14); }
.waterly-toast-error .waterly-toast-accent { background: #fb7185; }
.waterly-toast-error .waterly-toast-icon { color: #fb7185; background: rgba(251, 113, 133, 0.14); }

html[data-theme="light"] .waterly-toast {
	border-color: rgba(28, 73, 104, 0.14);
	background: rgba(255, 255, 255, 0.97);
	box-shadow: 0 20px 55px rgba(34, 73, 94, 0.2), 0 4px 14px rgba(34, 73, 94, 0.12);
	color: #173241;
}

html[data-theme="light"] .waterly-toast-copy > span { color: #607b8b; }
html[data-theme="light"] .waterly-toast-close:hover,
html[data-theme="light"] .waterly-toast-close:focus-visible { background: rgba(28, 73, 104, 0.07); color: #173241; }

@media (max-width: 575.98px) {
	.waterly-toast-container {
		top: calc(10px + var(--safe-top, 0px));
		right: calc(10px + var(--safe-right, 0px));
		width: calc(100vw - 20px - var(--safe-left, 0px) - var(--safe-right, 0px));
	}
}

@media (prefers-reduced-motion: reduce) {
	.waterly-toast { transition: none !important; }
}


/* ===== shared-overrides ===== */
/* shared/ui/subpages.css */
/**************************************************************************************************
	@author         hommie.pl
	@contributors   Rafał Złotorzyński
	@module         CSS
	@file           subpages.css
**************************************************************************************************/

/* No data subpage info */

.no-data-subpage {
    font-size: 16px;
    border-top: 1px solid #002F67;
    border-bottom: 1px solid #002F67;
    font-weight: lighter;
    padding: 10px 0 10px 0;
    text-align: center;
    margin-top: 5px;
}


/* Widgets - up page */

.subpage-widget-group {
    background-color: #33373B;
    color: #b4bbc2;
    border-radius: 10px;
    height: 40px;
    line-height: 40px;
    cursor: default;
    font-weight: lighter;
    cursor: pointer;
    font-size: 16px;
}

.subpage-widget-square {
    width: 40px;
    text-align: center;
}

.subpage-widget {
    background-color: #33373B;
    color: #b4bbc2;
    border-radius: 10px;
    height: 40px;
    cursor: default;
    font-weight: lighter;
    cursor: pointer;
    font-size: 16px;
}

.subpage-widget:not( [disabled] ):hover,
.subpage-widget select:hover {
    background-color: #2193f3 !important;
    color: #FFFFFF !important;
    border-color: #2193f3 !important;
}

.widget-data-date {
    cursor: default;
}

/* Subpage load error */
.main-container-subpage {
	position: relative;
}

.main-container-subpage.diagnostic-is-collapsing {
	overflow: hidden;
}

/* Waterly drawer component ----------------------------------------------
   Every map overlay uses this structure. Feature styles only describe the
   content placed inside .waterly-drawer-surface. */
.main-container-subpage:has(> .waterly-drawer-viewport) {
	position: fixed !important;
	inset: 0 !important;
	z-index: 1040;
	width: auto !important;
	height: auto !important;
	display: flex !important;
	flex-direction: column;
	padding: 0 !important;
	overflow: hidden !important;
	pointer-events: auto;
	overscroll-behavior: contain;
	background: rgba(2, 8, 12, .3) !important;
	backdrop-filter: blur(9px) saturate(.68);
	-webkit-backdrop-filter: blur(9px) saturate(.68);
}

/* Shared sheet motion must be defined here, independently of feature styles. */
@keyframes diagnostic-subpage-slide-in {
	from { transform: translate3d(0, 100%, 0); }
	to { transform: translate3d(0, 0, 0); }
}

@keyframes diagnostic-subpage-slide-out {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(0, 100%, 0); }
}

/* This must outrank each feature's :has(...) entrance animation. */
.main-container-subpage.diagnostic-is-collapsing:has(> .waterly-drawer-viewport) {
	animation: diagnostic-subpage-slide-out .32s cubic-bezier(.55, .08, .68, .53) both;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.main-container-subpage.diagnostic-is-collapsing:has(> .waterly-drawer-viewport) { animation: none; }
}

.main-container-subpage > div.waterly-drawer-viewport:first-child {
	position: relative;
	width: 100%;
	min-width: 0;
	min-height: 0 !important;
	flex: 1 1 auto;
	/* Individual drawers may tune the visible map gutter without fighting this
	   shared rule through selector specificity. */
	padding: calc(var(--waterly-drawer-top-gap, 28px) + var(--safe-top, 0px)) calc(12px + var(--safe-right, 0px)) var(--safe-bottom, 0px) calc(12px + var(--safe-left, 0px)) !important;
	overflow: hidden !important;
	overscroll-behavior: contain;
	color: #dce7ed;
}

/* Geometry and scrolling belong to the shared shell, never to a feature. */
.waterly-drawer-surface {
    --drawer-edge: rgba(128, 178, 201, .14);
    --drawer-thumb: rgba(132, 166, 183, .45);
    --drawer-thumb-hover: rgba(144, 199, 219, .72);
    --drawer-content-inset: clamp(12px, 1.3vw, 20px);
    --drawer-controls-height: 30px;
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100% !important;
    height: 100%;
    min-height: 0 !important;
    margin: 0 !important;
    padding: var(--drawer-controls-height) 0 0 !important;
    border: 1px solid var(--drawer-edge);
    border-width: 1px 1px 0;
    border-radius: 18px 18px 0 0;
    overflow: hidden;
    background: var(--waterly-drawer-background, linear-gradient(145deg, #17232b, #101a21)) !important;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, .12) !important;
    color-scheme: dark;
}

html[data-theme="light"] .waterly-drawer-surface {
    --drawer-edge: rgba(35, 99, 126, .12);
    --drawer-thumb: rgba(81, 121, 141, .35);
    --drawer-thumb-hover: rgba(52, 111, 139, .6);
    --waterly-drawer-background: linear-gradient(150deg, #f5fafc, #edf5f8);
    color-scheme: light;
}

.waterly-drawer-surface::after { display: none; }

.waterly-drawer-scroll {
    position: relative;
    flex: 1 1 0;
    width: 100%;
    min-height: 0;
    min-width: 0;
    margin: 0;
    padding: 0 var(--drawer-content-inset) 20px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    scrollbar-width: thin;
    scrollbar-color: var(--drawer-thumb) transparent;
}

/* A transparent track keeps the scrollbar from becoming another frame. */
.waterly-drawer-scroll::-webkit-scrollbar { width: 8px; background: transparent; }
.waterly-drawer-scroll::-webkit-scrollbar-track { background: transparent; margin: 6px 0; }
.waterly-drawer-scroll::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 99px;
    background: var(--drawer-thumb);
    background-clip: padding-box;
}
.waterly-drawer-scroll::-webkit-scrollbar-thumb:hover { background: var(--drawer-thumb-hover); background-clip: padding-box; }
.waterly-drawer-scroll::-webkit-scrollbar-corner { background: transparent; }

/* Account settings reveal the thumb only while the panel is being scrolled. */
.account-settings-sheet > .waterly-drawer-scroll {
    --account-scrollbar-thumb: transparent;
    scrollbar-color: var(--account-scrollbar-thumb) transparent;
}
.account-settings-sheet > .waterly-drawer-scroll.is-scrolling { --account-scrollbar-thumb: var(--drawer-thumb); }
.account-settings-sheet > .waterly-drawer-scroll::-webkit-scrollbar-thumb {
    background-color: var(--account-scrollbar-thumb);
}
.account-settings-sheet > .waterly-drawer-scroll.is-scrolling::-webkit-scrollbar-thumb:hover { background-color: var(--drawer-thumb-hover); }

.laboratory-workbench { --waterly-drawer-background: radial-gradient(circle at 8% 0, rgba(0, 188, 212, .1), transparent 30%), radial-gradient(circle at 96% 8%, rgba(54, 115, 214, .08), transparent 28%), linear-gradient(145deg, rgba(8, 22, 29, .97), rgba(6, 15, 21, .98)); }
.device-diagnostic-subpage { --waterly-drawer-background: radial-gradient(circle at 4% 0, rgba(33, 150, 243, .09), transparent 28%), linear-gradient(145deg, rgba(27, 33, 38, .98), rgba(18, 23, 27, .98)); }
.account-settings-subpage { --waterly-drawer-background: radial-gradient(circle at 8% 0, rgba(33, 150, 243, .08), transparent 30%), linear-gradient(145deg, rgba(24, 31, 37, .975), rgba(15, 21, 26, .98)); }
.events-subpage { --waterly-drawer-background: linear-gradient(145deg, rgba(23, 30, 36, .975), rgba(13, 19, 24, .98)); }

@media (max-width: 767.98px) {
	/* The surface paints to the edges; only its controls and scrolling content
	   are inset. The top padding cannot scroll away underneath the camera. */
	.main-container-subpage > div.waterly-drawer-viewport:first-child { padding: 0 !important; }
	.waterly-drawer-surface {
		--drawer-content-inset: 10px;
		padding-top: calc(var(--drawer-controls-height) + var(--safe-top, 0px)) !important;
		padding-bottom: var(--safe-bottom, 0px) !important;
		border: 0;
		border-radius: 0;
	}
	.waterly-drawer-scroll { padding-left: calc(var(--drawer-content-inset) + var(--safe-left, 0px)); padding-right: calc(var(--drawer-content-inset) + var(--safe-right, 0px)); }
}

/* Shared draggable sheet affordance -------------------------------------- */
.subpage-sheet-handle {
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 80;
	width: 84px;
	height: var(--drawer-controls-height, 30px);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 2px 10px;
	border: 0;
	border-radius: 9px;
	color: #789aa6;
	background: transparent;
	transform: translateX(-50%);
	cursor: grab;
	touch-action: none;
	user-select: none;
	filter: none;
	transition: color .16s ease, background .16s ease, filter .16s ease;
}

.subpage-sheet-handle:active { cursor: grabbing; }
.subpage-sheet-handle:hover,
.subpage-sheet-handle:focus-visible {
	color: #83e1df;
	background: rgba(13, 37, 45, .58);
	filter: none;
	outline: none;
}
.subpage-sheet-handle > span {
	width: 56px;
	height: 4px;
	border-radius: 6px;
	background: linear-gradient(90deg, rgba(87, 181, 192, .5), currentColor, rgba(87, 181, 192, .5));
	box-shadow: 0 0 8px rgba(68, 201, 205, .08);
}

/* Account and laboratory share one labelled, draggable close control. */
.waterly-drawer-surface > .subpage-sheet-dismiss {
	width: 84px;
	flex-direction: column;
	gap: 4px;
	white-space: nowrap;
}
.subpage-sheet-dismiss > em { font-size: 11px; font-style: normal; font-weight: 700; }
.waterly-drawer-surface > .subpage-sheet-dismiss:hover,
.waterly-drawer-surface > .subpage-sheet-dismiss:focus-visible { background: transparent; color: #a5d5dc; }
.waterly-drawer-surface > .subpage-sheet-dismiss:focus-visible { outline: 1px solid currentColor; outline-offset: -2px; }
html[data-theme="light"] .waterly-drawer-surface > .subpage-sheet-dismiss:hover,
html[data-theme="light"] .waterly-drawer-surface > .subpage-sheet-dismiss:focus-visible { color: #376b7a; }
@media (max-width: 767.98px) {
	.laboratory-shell.waterly-drawer-surface { --drawer-controls-height: 34px; }
	.subpage-sheet-dismiss > span { width: 52px; }
}

.subpage-sheet-close {
	position: absolute;
	top: 4px;
	right: 9px;
	z-index: 82;
	width: 28px;
	height: 28px;
	display: none;
	place-items: center;
	padding: 0;
	border: 1px solid rgba(126, 164, 183, .18);
	border-radius: 9px;
	background: rgba(6, 19, 26, .72);
	color: #91a8b2;
	cursor: pointer;
	font-size: 11px;
	transition: color .16s ease, border-color .16s ease, background .16s ease, transform .16s ease;
}

.subpage-sheet-close:hover,
.subpage-sheet-close:focus-visible {
	transform: translateY(-1px);
	border-color: rgba(91, 215, 215, .38);
	background: rgba(15, 43, 52, .92);
	color: #e9fafa;
	outline: none;
}

html[data-theme="light"] .subpage-sheet-close {
	border-color: rgba(35, 99, 126, .18);
	background: rgba(255, 255, 255, .78);
	color: #587482;
}

html[data-theme="light"] .subpage-sheet-close:hover,
html[data-theme="light"] .subpage-sheet-close:focus-visible {
	border-color: rgba(32, 161, 166, .34);
	background: rgba(239, 250, 251, .96);
	color: #126e74;
}

@media (min-width: 768px) {
	.subpage-sheet-close { display: grid; }
}

.is-sheet-dragging {
	transition: none !important;
	cursor: grabbing;
	will-change: transform, opacity;
}

/* Shared device picker --------------------------------------------------- */
.subpage-device-switcher { position: relative; min-width: 0; }
.subpage-device-title-switch {
	max-width: 100%;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	border: 0;
	color: inherit;
	background: transparent;
	cursor: pointer;
	text-align: left;
}

.subpage-device-title-switch > h1 { pointer-events: none; }
.subpage-device-title-switch > i {
	flex: 0 0 auto;
	color: #5b8794;
	font-size: 10px;
	transition: color .16s ease, transform .18s ease;
}

.subpage-device-title-switch:hover > i,
.subpage-device-title-switch:focus-visible > i { color: #61d7d7; }
.subpage-device-title-switch:focus-visible { outline: none; }
.subpage-device-switcher.is-open .subpage-device-title-switch > i { transform: rotate(180deg); }

.subpage-device-menu {
	position: absolute;
	top: calc(100% + 9px);
	left: 0;
	z-index: 120;
	width: min(430px, 78vw);
	max-height: min(430px, 58vh);
	display: none;
	padding: 7px;
	overflow-y: auto;
	border: 1px solid rgba(103, 181, 207, .2);
	border-radius: 14px;
	background: rgba(10, 21, 28, .98);
	box-shadow: 0 24px 65px rgba(0, 0, 0, .48);
	backdrop-filter: blur(20px);
}

.subpage-device-switcher.is-open .subpage-device-menu { display: block; }
.subpage-device-option {
	width: 100%;
	min-height: 54px;
	display: grid;
	grid-template-columns: 32px minmax(0, 1fr) 18px;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border: 1px solid transparent;
	border-radius: 10px;
	color: #dce9ed;
	background: transparent;
	cursor: pointer;
	text-align: left;
}

.subpage-device-option:hover,
.subpage-device-option.is-active { border-color: rgba(72, 203, 207, .18); background: rgba(57, 159, 174, .12); }
.subpage-device-option > i:first-child { color: #56cbd0; text-align: center; }
.subpage-device-option > i:last-child { color: #43d5aa; font-size: 9px; }
.subpage-device-option span,
.subpage-device-option strong,
.subpage-device-option small { display: block; min-width: 0; }
.subpage-device-option strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.subpage-device-option small { margin-top: 3px; overflow: hidden; color: #718690; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }

/* The picker is shared by device sheets and must follow the active theme. */
html[data-theme="light"] .subpage-device-menu {
	color-scheme: light;
	border-color: rgba(35, 99, 126, .18);
	background: #f8fcfd;
	box-shadow: 0 12px 32px rgba(39, 79, 99, .16);
	scrollbar-color: #a8c8d2 #f8fcfd;
}

html[data-theme="light"] .subpage-device-option { color: #193c49; }
html[data-theme="light"] .subpage-device-option small { color: #587582; }
html[data-theme="light"] .subpage-device-option > i:first-child { color: #138c95; }
html[data-theme="light"] .subpage-device-option > i:last-child { color: #128163; }

html[data-theme="light"] .subpage-device-option:hover {
	border-color: rgba(19, 140, 149, .18);
	background: #edf7f9;
}

html[data-theme="light"] .subpage-device-option.is-active {
	border-color: rgba(19, 140, 149, .3);
	background: #e0f2f4;
}

html[data-theme="light"] .subpage-device-option:focus-visible {
	outline: 2px solid #138c95;
	outline-offset: -2px;
	background: #edf7f9;
}

html[data-theme="light"] .subpage-device-title-switch:hover > i,
html[data-theme="light"] .subpage-device-title-switch:focus-visible > i { color: #138c95; }

/* Small module shortcuts embedded in the hero --------------------------- */
.subpage-hero-side { display: flex; align-items: center; gap: 9px; }
.subpage-module-actions { display: flex; align-items: center; gap: 5px; }
.subpage-module-actions button {
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 1px solid rgba(111, 173, 197, .14);
	border-radius: 10px;
	color: #78949f;
	background: rgba(10, 29, 37, .64);
	cursor: pointer;
	transition: color .16s ease, border-color .16s ease, background .16s ease, transform .16s ease;
}

.subpage-module-actions button:hover:not(:disabled),
.subpage-module-actions button:focus-visible { border-color: rgba(75, 207, 211, .28); color: #70dcda; background: rgba(51, 157, 170, .12); transform: translateY(-1px); outline: none; }
.subpage-module-actions button.is-active { color: #63d8d6; background: rgba(47, 157, 171, .14); }

html[data-theme="light"] .subpage-module-actions button {
	border-color: rgba(35, 99, 126, .2);
	color: #397180;
	background: rgba(255, 255, 255, .82);
	box-shadow: 0 4px 12px rgba(38, 79, 96, .07);
}

html[data-theme="light"] .subpage-module-actions button:hover:not(:disabled),
html[data-theme="light"] .subpage-module-actions button:focus-visible {
	border-color: rgba(19, 140, 149, .42);
	color: #087b83;
	background: #edf8f9;
	box-shadow: 0 5px 14px rgba(38, 105, 116, .11);
}

html[data-theme="light"] .subpage-module-actions button.is-active {
	border-color: rgba(19, 140, 149, .3);
	color: #087b83;
	background: #e2f3f4;
}

/* Diagnostics is archived. Hide any stale control in a rebuilt device sheet. */
[data-subpage-target="devices_diagnostic"] {
	display: none !important;
}

.subpage-compact-hero {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 15px;
	margin-bottom: 14px;
	padding: 18px;
	border: 1px solid rgba(126, 179, 203, .13);
	border-radius: 17px;
	background: linear-gradient(135deg, rgba(22, 50, 62, .86), rgba(14, 25, 32, .9));
}

.subpage-compact-hero-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 15px; color: #62d7d5; background: rgba(53, 166, 178, .12); font-size: 19px; }
.subpage-compact-hero-copy { min-width: 0; }
.subpage-compact-hero-copy > small { color: #75919e; font-size: 8px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.subpage-compact-hero-copy h1 { margin: 2px 0; color: #f5fbfc; font-size: clamp(20px, 2vw, 28px); line-height: 1.15; }
.subpage-compact-hero-copy p { margin: 0; color: #7e939d; font-size: 10px; }

@media (max-width: 767.98px) {
	.subpage-sheet-handle { top: var(--safe-top, 0px); }
	.subpage-sheet-close { top: calc(4px + var(--safe-top, 0px)); right: calc(9px + var(--safe-right, 0px)); }
	.subpage-hero-side { align-items: flex-end; flex-direction: column-reverse; }
	.subpage-module-actions button { width: 31px; height: 31px; }
	.subpage-compact-hero { grid-template-columns: auto minmax(0, 1fr); }
	.subpage-compact-hero > .subpage-module-actions { grid-column: 1 / -1; justify-self: end; }
}

.message-box-subpage-error {
	position: absolute;
	inset: 0;
	z-index: 9999;
	min-height: 520px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding: 32px;
	color: #edf5fa;
	background:
		radial-gradient(circle at 18% 14%, rgba(33, 150, 243, 0.12), transparent 32%),
		radial-gradient(circle at 86% 78%, rgba(32, 201, 151, 0.075), transparent 30%),
		linear-gradient(145deg, rgba(20, 27, 32, 0.985), rgba(10, 15, 19, 0.99));
}

.subpage-error-ambient {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.subpage-error-ambient i {
	position: absolute;
	border: 1px solid rgba(108, 184, 241, 0.12);
	border-radius: 50%;
}

.subpage-error-ambient i:nth-child(1) {
	left: -120px;
	top: -180px;
	width: 420px;
	height: 420px;
}

.subpage-error-ambient i:nth-child(2) {
	right: -90px;
	bottom: -170px;
	width: 360px;
	height: 360px;
}

.subpage-error-ambient i:nth-child(3) {
	left: 50%;
	top: 50%;
	width: 680px;
	height: 680px;
	border-style: dashed;
	opacity: 0.32;
	transform: translate(-50%, -50%);
}

.subpage-error-card {
	position: relative;
	z-index: 1;
	width: min(820px, 100%);
	min-height: 330px;
	display: grid;
	grid-template-columns: 210px minmax(0, 1fr);
	overflow: hidden;
	border: 1px solid rgba(143, 184, 220, 0.18);
	border-radius: 20px;
	background: linear-gradient(145deg, rgba(31, 40, 47, 0.96), rgba(18, 24, 29, 0.97));
	box-shadow: 0 28px 70px rgba(0, 0, 0, 0.42);
	backdrop-filter: blur(14px);
}

.subpage-error-visual {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-right: 1px solid rgba(255, 255, 255, 0.055);
	background:
		linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px),
		radial-gradient(circle, rgba(33, 150, 243, 0.13), transparent 62%),
		rgba(8, 15, 20, 0.38);
	background-size: 24px 24px, 24px 24px, auto, auto;
}

.subpage-error-signal {
	position: relative;
	width: 112px;
	height: 112px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(101, 184, 255, 0.25);
	border-radius: 50%;
	color: #75bff7;
	background: rgba(33, 150, 243, 0.08);
	font-size: 36px;
	box-shadow: inset 0 0 35px rgba(33, 150, 243, 0.08), 0 0 38px rgba(33, 150, 243, 0.08);
}

.subpage-error-signal span,
.subpage-error-signal b {
	position: absolute;
	inset: -14px;
	border: 1px dashed rgba(101, 184, 255, 0.2);
	border-radius: 50%;
	animation: subpage-error-orbit 13s linear infinite;
}

.subpage-error-signal b {
	inset: -30px;
	border-color: rgba(32, 201, 151, 0.12);
	animation-direction: reverse;
	animation-duration: 19s;
}

.subpage-error-warning {
	position: absolute;
	left: calc(50% + 24px);
	top: calc(50% + 24px);
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 3px solid #1d272e;
	border-radius: 50%;
	color: #1b1112;
	background: #ff6978;
	font-size: 12px;
	font-weight: 900;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.42), 0 0 16px rgba(255, 101, 116, 0.22);
}

@keyframes subpage-error-orbit {
	to { transform: rotate(360deg); }
}

.subpage-error-content {
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 34px 38px;
}

.subpage-error-eyebrow {
	display: flex;
	align-items: center;
	gap: 7px;
	color: #ff8994;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.subpage-error-eyebrow i {
	font-size: 6px;
	filter: drop-shadow(0 0 5px rgba(255, 101, 116, 0.62));
}

.message-box-subpage-error h1 {
	max-width: 540px;
	margin: 8px 0 0;
	color: #f5f9fb;
	font-size: clamp(23px, 3vw, 34px);
	font-weight: 800;
	line-height: 1.14;
}

.message-box-subpage-error p {
	max-width: 560px;
	margin: 12px 0 0;
	color: #95a4ae;
	font-size: 12px;
	line-height: 1.65;
}

.subpage-error-feedback {
	display: none;
	margin-top: 12px;
	padding: 8px 10px;
	border: 1px solid rgba(255, 101, 116, 0.2);
	border-radius: 8px;
	color: #f4abb2;
	background: rgba(255, 101, 116, 0.065);
	font-size: 10px;
	line-height: 1.4;
}

.subpage-error-feedback.is-visible {
	display: block;
}

.subpage-error-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 22px;
}

.subpage-error-action {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 9px 14px;
	border: 1px solid rgba(143, 184, 220, 0.18);
	border-radius: 10px;
	font-size: 11px;
	font-weight: 800;
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.subpage-error-action.primary {
	border-color: rgba(101, 184, 255, 0.4);
	color: #ffffff;
	background: linear-gradient(135deg, #218fdc, #1672b8);
	box-shadow: 0 8px 20px rgba(19, 111, 178, 0.24);
}

.subpage-error-action.secondary {
	color: #cbd7de;
	background: rgba(255, 255, 255, 0.05);
}

.subpage-error-action:hover,
.subpage-error-action:focus-visible {
	color: #ffffff;
	border-color: rgba(121, 194, 255, 0.55);
	background: #218fdc;
	outline: none;
	transform: translateY(-1px);
}

.subpage-error-action:disabled {
	cursor: wait;
	opacity: 0.72;
	transform: none;
}

.subpage-error-action.is-loading i {
	animation: subpage-error-retry-spin 0.9s linear infinite;
}

@keyframes subpage-error-retry-spin {
	to { transform: rotate(360deg); }
}

.subpage-error-meta {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 18px;
	padding-top: 13px;
	border-top: 1px solid rgba(255, 255, 255, 0.055);
	color: #71808a;
	font-size: 9px;
}

.subpage-error-meta span {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.subpage-error-meta i {
	color: #6595b8;
}

@media (max-width: 680px) {
	.message-box-subpage-error {
		align-items: flex-start;
		min-height: 100%;
		padding: 18px 12px;
		overflow-y: auto;
	}

	.subpage-error-card {
		grid-template-columns: minmax(0, 1fr);
	}

	.subpage-error-visual {
		min-height: 145px;
		border-right: 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.055);
	}

	.subpage-error-signal {
		width: 76px;
		height: 76px;
		font-size: 25px;
	}

	.subpage-error-warning {
		left: calc(50% + 16px);
		top: calc(50% + 14px);
		width: 30px;
		height: 30px;
	}

	.subpage-error-content {
		padding: 24px 20px 22px;
	}

	.subpage-error-actions {
		align-items: stretch;
		flex-direction: column;
	}

	.subpage-error-action {
		width: 100%;
	}

	.subpage-error-meta {
		align-items: flex-start;
		flex-direction: column;
		gap: 7px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.subpage-error-signal span,
	.subpage-error-signal b,
	.subpage-error-action.is-loading i {
		animation: none;
	}
}

/* Waterly typography roles. */
.subpage-sheet-title, .subpage-title { font-family: var(--wl-font-display); font-weight: 600; }


/* app/styles/typography.css */
/* Shared typography roles. Feature styles retain their existing sizes and spacing. */
:root {
    --bs-body-font-family: var(--wl-font-sans);
    --bs-font-sans-serif: var(--wl-font-sans);
    --bs-font-monospace: var(--wl-font-mono);
}

html body :is(h1, h2, h3, h4, h5, h6, button, .btn, [role="button"], input[type="submit"], input[type="button"]) {
    font-family: var(--wl-font-display);
}

html body :is(h1, h2, h3, h4, h5, h6) { font-weight: 600; }
html body :is(button, .btn, input[type="submit"], input[type="button"]) { font-weight: 600; }

input, select, textarea { font-family: var(--wl-font-sans); }
code, pre, kbd, samp, time, input[type="number"] {
    font-family: var(--wl-font-mono);
    font-variant-numeric: tabular-nums;
}