.pump-station-iot {
    --iot-blue: #0059ab;
    --iot-border: #d7e5ee;
    padding: clamp(36px, 5vw, 76px) 0;
    background: #f1f6fb;
    color: #17344d;
    scroll-margin-top: 110px;
}

.pump-station-iot__inner {
    width: min(1440px, calc(100% - 48px));
    margin-inline: auto;
}

.pump-station-iot h2 {
    margin: 0 0 12px;
    font-size: clamp(26px, 3vw, 40px);
    line-height: 1.2;
}

.pump-station-iot h3,
.pump-station-iot legend {
    margin: 0 0 8px;
    color: #17344d;
    font-size: 17px;
    font-weight: 650;
    line-height: 1.4;
}

.pump-station-iot p {
    margin: 0;
    color: #425a70;
    font-size: 15px;
    line-height: 1.55;
}

.pump-station-iot__features {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 22px 0;
}

.pump-station-iot__features article {
    padding: 16px;
    border-top: 2px solid #81b5e4;
    background: #fff;
}

.pump-station-iot__demo {
    overflow: hidden;
    border: 1px solid var(--iot-border);
    border-radius: 10px;
    background: #fff;
}

.pump-station-iot__demo-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 24px;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--iot-border);
}

.pump-station-iot__demo-bar h3 {
    margin: 0;
}

.pump-station-iot dl,
.pump-station-iot dd,
.pump-station-iot figure {
    margin: 0;
}

.pump-station-iot__metrics,
.pump-station-iot__devices {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.pump-station-iot__metrics {
    background: #f7fbff;
    border-bottom: 1px solid var(--iot-border);
}

.pump-station-iot__metrics > div,
.pump-station-iot__devices > div {
    min-width: 0;
    padding: 12px 15px;
}

.pump-station-iot__metrics dt,
.pump-station-iot__devices dt,
.pump-station-iot__records dt {
    color: #486177;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.pump-station-iot__metrics dd,
.pump-station-iot__devices dd {
    margin-top: 4px;
    font-weight: 650;
}

.pump-station-iot__metrics output {
    display: inline;
    color: #17344d;
    font-size: clamp(19px, 2vw, 28px);
    font-variant-numeric: tabular-nums;
}

.pump-station-iot__metrics [data-alarm="true"] {
    color: #a22d26;
}

.pump-station-iot label output,
.pump-station-iot h3 output {
    display: inline;
    font: inherit;
    color: var(--iot-blue);
}

.pump-station-iot__workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 29%);
    align-items: start;
}

.pump-station-iot__figure svg {
    display: block;
    width: 100%;
    height: auto;
    background: #c8dceb;
}

.pump-station-iot__markers circle {
    fill: #f4f8fc;
    stroke: #14334f;
    stroke-width: 7px;
}

.pump-station-iot__markers :is([data-state="open"], [data-state="running"]) {
    fill: #35efae;
}

.pump-station-iot__markers :is([data-state="closed"], [data-state="fault"]) {
    fill: #ff966d;
}

.pump-station-iot__devices {
    background: #f7fbff;
}

.pump-station-iot__devices dd,
.pump-station-iot__records dd {
    font-size: 13px;
    overflow-wrap: anywhere;
}

.pump-station-iot__devices :is([data-state="running"], [data-state="open"]),
.pump-station-iot__records [data-state="passed"] {
    color: #087254;
}

.pump-station-iot :is([data-state="fault"], [data-state="closed"], [data-state="blocked"]) {
    color: #a22d26;
}

.pump-station-iot .pump-station-iot__status {
    display: flex;
    gap: 12px;
    align-items: baseline;
    min-height: 70px;
    padding: 13px 16px;
    border-top: 1px solid var(--iot-border);
    font-size: 14px;
}

.pump-station-iot time {
    color: #486177;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pump-station-iot fieldset {
    min-width: 0;
    border: 0;
}

.pump-station-iot__controls {
    display: grid;
    gap: 11px;
    margin: 14px 16px;
}

.pump-station-iot label {
    display: block;
    margin: 0;
    font-size: 13px;
    font-weight: 550;
}

.pump-station-iot :is(select, input, button) {
    max-width: 100%;
    font-size: 14px;
}

.pump-station-iot :is(select, input[type="number"], button) {
    min-height: 39px;
    padding: 5px 9px;
    border: 1px solid #becfdf;
    border-radius: 5px;
    background: #fff;
    color: #17344d;
}

.pump-station-iot :is(select, input) {
    display: block;
    width: 100%;
    margin-top: 4px;
}

.pump-station-iot input[type="range"] {
    accent-color: var(--iot-blue);
}

.pump-station-iot button[data-station-play] {
    border-color: var(--iot-blue);
    background: var(--iot-blue);
    color: #fff;
}

.pump-station-iot button:disabled {
    opacity: .55;
}

.pump-station-iot :is(button, input, select):focus-visible {
    outline: 2px solid #2375bf;
    outline-offset: 2px;
}

.pump-station-iot__playback,
.pump-station-iot__timing {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-items: end;
}

.pump-station-iot__manual {
    display: grid;
    gap: 8px;
    padding: 8px;
    background: #f2f7fb;
}

.pump-station-iot [hidden] {
    display: none;
}

.pump-station-iot__records {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--iot-border);
}

.pump-station-iot__records > div {
    min-width: 0;
    min-height: 210px;
    padding: 14px 16px;
    border-inline-end: 1px solid var(--iot-border);
}

.pump-station-iot__records > div:last-child {
    border-inline-end: 0;
}

.pump-station-iot__records dl > div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 5px 0;
}

.pump-station-iot__records ul {
    list-style: none;
    max-height: 160px;
    overflow: auto;
    padding: 0;
    margin: 0;
}

.pump-station-iot__records li {
    padding: 6px 0;
    border-bottom: 1px solid var(--iot-border);
    font-size: 13px;
    line-height: 1.5;
}

.pump-station-iot__records li time {
    margin-inline-end: 8px;
}

.pump-station-iot__records [data-station-empty] {
    margin-top: 7px;
    font-size: 13px;
}

@media (max-width: 950px) {
    .pump-station-iot__features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pump-station-iot__workspace {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 590px) {
    .pump-station-iot__inner {
        width: calc(100% - 28px);
    }

    .pump-station-iot__features,
    .pump-station-iot__metrics,
    .pump-station-iot__devices {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pump-station-iot__records {
        grid-template-columns: 1fr;
    }

    .pump-station-iot__records > div {
        min-height: auto;
        border: 0;
        border-bottom: 1px solid var(--iot-border);
    }
}

@media (max-width: 400px) {
    .pump-station-iot__features {
        grid-template-columns: 1fr;
    }
}

/* Shared operating views within the product content. */
.pump-station-iot__features {
    grid-template-columns: repeat(3,minmax(0,1fr));
}

.pump-station-iot__inner {
    width:min(1560px,calc(100% - 48px));
}

.pump-station-iot__workspace {
    grid-template-columns:minmax(0,1fr) 300px;
}

.pump-station-iot .iot-toolbar {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
    padding:12px 18px;
    background:#edf5fb;
}

.pump-station-iot .iot-toolbar label {
    width:100%;
}

.pump-station-iot .iot-views {
    display:flex;
    gap:4px;
    padding:10px;
    background:#eef4f8;
    flex-wrap:wrap;
}

.pump-station-iot .iot-views button {
    flex:1;
    white-space:normal;
    min-width:95px;
    background:transparent;
    border-color:transparent;
    font-size:13px;
}

.pump-station-iot .iot-views [aria-pressed="true"] {
    background:#0059ab;
    color:white;
    border-color:#0059ab;
}

.pump-station-iot .iot-map {
    position:relative;
}

.pump-station-iot .iot-hotspot {
    position:absolute;
    left:var(--x);
    top:var(--y);
    max-width:26%;
    padding:7px 9px;
    background:#103651ed;
    border:1px solid #8cd7f9;
    color:white;
    font-size:clamp(10px,.9vw,14px);
    text-align:left;
    line-height:1.4;
    box-shadow:0 3px 9px #06203040;
}

.pump-station-iot .iot-hotspot:hover {
    background:#0062a4;
}

.pump-station-iot .iot-door {
    position:absolute;
    left:58%;
    top:30%;
    padding:6px 9px;
    background:#153d58e6;
    color:#fff;
    border:1px solid #a6cadf;
    border-radius:4px;
    font-size:12px;
}

.pump-station-iot .iot-tank {
    position:absolute;
    left:35%;
    top:35%;
    width:14%;
    color:#fff;
    text-shadow:0 1px 3px #12324a;
    text-align:center;
    font-size:clamp(10px,1vw,14px);
}

.pump-station-iot .iot-tank strong {
    display:block;
    font-size:clamp(16px,2vw,30px);
}

.pump-station-iot .iot-tank > div {
    position:relative;
    width:42px;
    height:75px;
    margin:4px auto;
    border:2px solid #e5f8ff;
    border-radius:8px;
    overflow:hidden;
    background:#16364d88;
}

.pump-station-iot .iot-tank i {
    display:block;
    position:absolute;
    bottom:0;
    width:100%;
    background:#39c9f5aa;
    border-top:2px solid #d7faff;
}

.pump-station-iot .iot-flow {
    fill:none;
    stroke:#8af1ff;
    stroke-width:5;
    stroke-dasharray:12 14;
    animation:iot-water-flow 1s linear infinite;
    pointer-events:none;
}

.pump-station-iot .is-paused .iot-flow {
    animation-play-state:paused;
}

@keyframes iot-water-flow {
    to {
        stroke-dashoffset:-52;
    }
}

.pump-station-iot .iot-pipe {
    fill:none;
    stroke:#b34736;
    stroke-width:18;
    stroke-linejoin:round;
}

.pump-station-iot .iot-detail {
    min-height:490px;
    padding:18px;
    background:#f8fbfd;
}

.pump-station-iot .iot-detail p {
    margin-top:14px;
    font-size:14px;
}

.pump-station-iot .iot-detail-values {
    margin-top:20px;
}

.pump-station-iot .iot-detail-values > div {
    display:flex;
    gap:12px;
    justify-content:space-between;
    padding:12px 0;
    border-bottom:1px solid var(--iot-border);
    font-size:14px;
}

.pump-station-iot .iot-sewage {
    display:grid;
    grid-template-columns:minmax(210px,40%) minmax(0,1fr);
    gap:20px;
    align-items:center;
}

.pump-station-iot .iot-sewage > svg {
    display:block;
    width:100%;
    max-height:540px;
    font-size:14px;
    fill:#284f69;
}

.pump-station-iot .iot-machine {
    position:relative;
}

.pump-station-iot .iot-machine > img {
    width:100%;
    height:340px;
    object-fit:contain;
    display:block;
}

.pump-station-iot .iot-machine-values {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.pump-station-iot .iot-machine-values > div {
    padding:14px;
    background:white;
    border:1px solid var(--iot-border);
    border-radius:6px;
}

.pump-station-iot .iot-machine-values h3 {
    font-size:15px;
}

.pump-station-iot .iot-machine-values strong {
    color:#006b79;
}

.pump-station-iot .iot-machine-values dl {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px;
    margin-top:10px;
    font-size:13px;
}

.pump-station-iot .iot-machine-values dt {
    font-weight:400;
    color:#516a7e;
}

.pump-station-iot .iot-machine-values dd {
    text-align:right;
}

.pump-station-iot .iot-machine-values output {
    display:inline;
    font:inherit;
    color:inherit;
}

.pump-station-iot .iot-camera-toolbar {
    display:flex;
    gap:14px;
    align-items:end;
    margin-bottom:12px;
}

.pump-station-iot .iot-camera-toolbar label {
    flex:1;
}

.pump-station-iot .iot-camera {
    aspect-ratio:16/9;
    position:relative;
    overflow:hidden;
    background:#09273c;
    color:white;
    border-radius:6px;
}

.pump-station-iot .iot-camera > img {
    position:absolute;
    width:100%;
    height:100%;
    object-fit:cover;
    transform:scale(2.9);
    transform-origin:85% 56%;
    filter:saturate(.75);
}

.pump-station-iot [data-camera-view="water"] > img {
    transform:scale(2);
    transform-origin:24% 67%;
}

.pump-station-iot [data-camera-view="sump"] > img {
    transform:scale(4.8);
    transform-origin:64% 73%;
}

.pump-station-iot .iot-camera-water {
    position:absolute;
    bottom:12%;
    left:5%;
    right:5%;
    background:#2db2ed50;
    border-top:2px solid #7cdff5;
}

.pump-station-iot .iot-camera-top,.pump-station-iot .iot-camera-bottom {
    position:absolute;
    left:0;
    right:0;
    padding:9px 12px;
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    gap:5px;
    background:#071c32c9;
    font-size:12px;
}

.pump-station-iot .iot-camera-top {
    top:0;
}

.pump-station-iot .iot-camera-bottom {
    bottom:0;
}

.pump-station-iot .iot-camera time {
    color:white;
}

.pump-station-iot .iot-camera output {
    display:inline;
    font:inherit;
    color:inherit;
}

.pump-station-iot .iot-watermark {
    position:absolute;
    right:12px;
    top:50px;
    padding:5px 9px;
    border:1px solid #aac4d9;
    color:white;
    background:#102f4eaa;
    font-size:13px;
}

.pump-station-iot .iot-camera-signals {
    position:absolute;
    left:8%;
    right:8%;
    bottom:20%;
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

.pump-station-iot .iot-camera-signals > * {
    color:#fff;
    background:#102f4ee0;
    padding:9px 12px;
    border:1px solid #92bad1;
    border-radius:4px;
}

.pump-station-iot .iot-camera-signals [data-state="running"] {
    border-color:#66edbb;
    color:#91f3d0;
}

.pump-station-iot .iot-camera-signals [data-state="fault"] {
    color:#ffc4b9;
    border-color:#ffa08b;
}

.pump-station-iot .iot-charts {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
    margin-top:15px;
}

.pump-station-iot .iot-chart {
    background:white;
    border:1px solid var(--iot-border);
    border-radius:6px;
    padding:12px;
    min-width:0;
}

.pump-station-iot .iot-chart h3 {
    font-size:14px;
}

.pump-station-iot .iot-chart svg {
    width:100%;
    display:block;
    font-size:11px;
    fill:#5c7487;
}

.pump-station-iot .iot-chart output {
    display:inline;
    font:inherit;
    color:inherit;
}

.pump-station-iot .iot-chart p {
    margin:0;
}

.pump-station-iot .iot-config-note {
    font-size:12px;
    color:#516d80;
}

.pump-station-iot .iot-signal-shortcuts {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
}

.pump-station-iot .iot-signal-shortcuts button {
    font-size:12px;
}

.pump-station-iot__records li button {
    display:block;
    min-height:28px;
    font-size:12px;
    margin-top:5px;
}

.pump-station-iot__records [data-state="running"] {
    color:#0059ab;
    background:#edf6ff;
    padding:2px 6px;
    border-radius:4px;
}

.pump-station-iot .iot-expanded {
    width:100%;
    height:100vh;
    overflow:auto;
    background:white;
    padding:0;
    margin:0;
    border-radius:0;
}

.pump-station-iot .iot-expanded::backdrop {
    background:#eaf3f9;
}

.pump-station-iot .iot-expanded .iot-toolbar {
    position:sticky;
    top:0;
    z-index:4;
}

@media(max-width:1100px) {
    .pump-station-iot__workspace {
        grid-template-columns:minmax(0,1fr) 260px;
    }
}

@media(max-width:950px) {
    .pump-station-iot__workspace {
        grid-template-columns:1fr;
    }
    .pump-station-iot__controls {
        grid-template-columns:1fr 1fr;
    }
    .pump-station-iot__controls legend,.pump-station-iot__controls .iot-config-note,.pump-station-iot__controls .pump-station-iot__manual {
        grid-column:1/-1;
    }
    .pump-station-iot__features {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:590px) {
    .pump-station-iot__inner {
        width:calc(100% - 24px);
    }
    .pump-station-iot__controls {
        grid-template-columns:1fr;
    }
    .pump-station-iot .iot-views {
        gap:4px;
    }
    .pump-station-iot .iot-views button {
        min-width:90px;
        flex:1 1 28%;
    }
    .pump-station-iot .iot-map {
        overflow:auto;
    }
    .pump-station-iot .iot-hotspot {
        padding:3px 5px;
        font-size:9px;
        min-height:30px;
        max-width:28%;
    }
    .pump-station-iot .iot-door {
        font-size:9px;
        padding:3px;
        top:27%;
    }
    .pump-station-iot .iot-tank > div {
        height:35px;
        width:22px;
    }
    .pump-station-iot .iot-tank span {
        display:none;
    }
    .pump-station-iot .iot-sewage {
        grid-template-columns:1fr;
        gap:8px;
    }
    .pump-station-iot .iot-sewage svg {
        max-height:360px;
    }
    .pump-station-iot .iot-detail {
        min-height:0;
        padding:12px;
    }
    .pump-station-iot .iot-machine > img {
        height:210px;
    }
    .pump-station-iot .iot-machine-values {
        grid-template-columns:1fr;
    }
    .pump-station-iot .iot-camera {
        aspect-ratio:4/3;
    }
    .pump-station-iot .iot-camera-signals {
        gap:6px;
        bottom:17%;
        font-size:10px;
    }
    .pump-station-iot .iot-camera-signals > * {
        padding:4px 6px;
    }
    .pump-station-iot .iot-camera-top,.pump-station-iot .iot-camera-bottom {
        font-size:10px;
    }
    .pump-station-iot .iot-watermark {
        font-size:10px;
        top:45px;
    }
    .pump-station-iot .iot-charts {
        grid-template-columns:1fr;
    }
}

@media(max-width:400px) {
    .pump-station-iot__features {
        grid-template-columns:1fr;
    }
}

@media(prefers-reduced-motion:reduce) {
    .pump-station-iot .iot-flow {
        animation:none;
    }
}

.pump-station-iot [hidden] {
    display:none !important;
}

.pump-station-iot button.iot-hotspot {
    background:#103651ed;
    color:#fff;
    border:1px solid #8cd7f9;
    padding:7px 9px;
    min-height:34px;
    font-size:clamp(10px,.9vw,14px);
    transform:translateY(-50%);
}

.pump-station-iot button.iot-hotspot:hover {
    background:#0062a4;
}

.pump-station-iot input[data-station-share-link] {
    border:1px solid #becfdf;
    border-radius:4px;
    padding:7px;
    font-size:12px;
    color:#30566f;
}

@media(max-width:590px) {
    .pump-station-iot button.iot-hotspot {
        font-size:10px;
        min-height:30px;
        padding:3px 5px;
    }
}

.pump-station-iot button.iot-hotspot {
    max-width:min(26%,calc(98% - var(--x)));
    white-space:normal;
    overflow-wrap:anywhere;
    min-width:0;
}