/* HEXNET IO Module — compact single-row physical panel */



.vango-io-module {

    container-type: inline-size;

    container-name: vango-io;

    width: 100%;

    max-width: none;

    font-size: clamp(7px, 0.72cqi, 10px);

}



.vango-io-module__shell {

    position: relative;

    padding: 0.45em 0.35em;

    border-radius: 1em;

    background: linear-gradient(180deg, #121212 0%, #040404 100%);

    border: 1px solid rgba(0, 168, 255, 0.22);

    box-shadow:

        inset 0 1px 0 rgba(255, 255, 255, 0.07),

        0 18px 40px rgba(0, 0, 0, 0.42);

}



.vango-io-module__antenna {

    position: absolute;

    top: -1.2em;

    left: 0.8em;

    width: 0.55em;

    height: 1.5em;

    border-radius: 0.3em 0.3em 0 0;

    background: linear-gradient(180deg, #2a2a2a, #0d0d0d);

    z-index: 2;

}



.vango-io-module__antenna::before {

    content: "";

    position: absolute;

    top: -0.4em;

    left: 50%;

    width: 0.24em;

    height: 0.5em;

    transform: translateX(-50%);

    border-radius: 999px;

    background: #111;

}



.vango-io-module__screws {

    display: grid;

    grid-template-columns: repeat(28, 1fr);

    gap: 0.12em;

    padding: 0 0.4em;

}



.vango-io-module__screws i {

    display: block;

    height: 0.55em;

    border-radius: 0.12em;

    background: linear-gradient(180deg, #3d8c4a, #1f5a28);

    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);

    position: relative;

}

.vango-io-module__screws i::after {

    content: "+";

    position: absolute;

    inset: 0;

    display: grid;

    place-items: center;

    font-size: 0.45em;

    line-height: 1;

    color: rgba(0, 0, 0, 0.35);

    transform: rotate(12deg);

}



.vango-io-module__screws--top { margin-bottom: 0.28em; }

.vango-io-module__screws--bottom { margin-top: 0.28em; }



.vango-io-module__face {

    display: grid;

    grid-template-columns: auto 1fr auto;

    gap: 0.3em;

    align-items: stretch;

}



.vango-io-module__side {

    display: flex;

    align-items: center;

}



.vango-io-module__wireless {

    display: flex;

    flex-direction: column;

    gap: 0.4em;

    padding: 0.4em 0.35em;

    border: 1px solid rgba(0, 168, 255, 0.5);

    border-radius: 0.4em;

    font-size: 0.9em;

    color: #7dd3fc;

}



.vango-io-module__wireless span {

    display: inline-flex;

    align-items: center;

    gap: 0.3em;

}



.vango-io-module__reset {

    writing-mode: vertical-rl;

    transform: rotate(180deg);

    border: 1px solid rgba(0, 168, 255, 0.4);

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.04);

    color: #94a3b8;

    font-size: 0.85em;

    padding: 0.6em 0.35em;

    cursor: default;

}



.vango-io-module__panel {

    min-width: 0;

}



.vango-io-module__row--main {

    display: flex;

    flex-wrap: nowrap;

    align-items: stretch;

    gap: 0.28em;

    min-width: 0;

}



.vango-io-module__block {

    border: 1px solid rgba(0, 168, 255, 0.48);

    border-radius: 0.4em;

    padding: 0.28em 0.32em;

    background: rgba(0, 0, 0, 0.42);

    min-width: 0;

    flex-shrink: 0;

}



.vango-io-module__block--power {

    display: grid;

    place-items: center;

    padding-inline: 0.45em;

}



.vango-io-module__power-icon {

    width: 1.2em;

    height: 1.2em;

    border: 1.5px solid #7dd3fc;

    border-radius: 999px;

    position: relative;

}



.vango-io-module__power-icon::after {

    content: "";

    position: absolute;

    left: 50%;

    top: 0.15em;

    width: 2px;

    height: 0.6em;

    transform: translateX(-50%);

    background: #7dd3fc;

}



.vango-io-module__block--comms {

    display: flex;

    gap: 0.15em;

}



.vango-io-module__comm-strip {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: flex-end;

    gap: 0.12em;

    min-width: 1.5em;

    padding: 0.18em 0.08em 0.08em;

    border: 1px solid rgba(0, 168, 255, 0.35);

    border-radius: 0.22em;

    font-size: 0.62em;

    color: #7dd3fc;

    writing-mode: vertical-rl;

    transform: rotate(180deg);

}



.vango-io-module__block--relays {

    flex: 1.6 1 0;

    min-width: 0;

}



.vango-io-module__relay-strip {

    display: flex;

    flex-wrap: nowrap;

    gap: 0.12em;

    align-items: flex-end;

    justify-content: space-between;

}



.vango-io-module__relay {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 0.08em;

    text-align: center;

    flex: 1 1 0;

    min-width: 0;

}



.vango-io-module__relay--interactive {

    padding: 0.12em 0.05em;

    border: 1px solid transparent;

    border-radius: 0.28em;

    background: transparent;

    color: inherit;

    cursor: pointer;

    transition: border-color 0.15s, background 0.15s;

}



.vango-io-module__relay--interactive:hover {

    border-color: rgba(56, 189, 248, 0.45);

    background: rgba(56, 189, 248, 0.08);

}



.vango-io-module__relay--interactive.is-on {

    border-color: rgba(34, 197, 94, 0.55);

    background: rgba(34, 197, 94, 0.1);

    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 10px rgba(34, 197, 94, 0.25);

}

.vango-io-module__relay--interactive.is-on .vango-io-module__relay-symbol {

    border-color: #4ade80;

}

.vango-io-module__relay--interactive.is-on .vango-io-module__relay-symbol::after {

    background: #4ade80;

    box-shadow: 0 0 6px rgba(74, 222, 128, 0.8);

}



.vango-io-module__relay-symbol {

    width: 1.1em;

    height: 0.6em;

    border: 1px solid rgba(125, 211, 252, 0.6);

    border-radius: 0.12em;

    position: relative;

}



.vango-io-module__relay-symbol::after {

    content: "";

    position: absolute;

    left: 0.12em;

    right: 0.12em;

    top: 50%;

    height: 1px;

    background: rgba(125, 211, 252, 0.75);

    transform: rotate(-18deg);

    transform-origin: left center;

}



.vango-io-module__relay small {

    font-size: 0.65em;

    color: #7dd3fc;

    white-space: nowrap;

}



.vango-io-module__block--dims {

    flex: 1.1 1 0;

    min-width: 0;

}



.vango-io-module__dim-strip {

    display: flex;

    flex-wrap: nowrap;

    gap: 0.12em;

    align-items: flex-end;

    justify-content: space-between;

}



.vango-io-module__dim {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 0.08em;

    flex: 1 1 0;

    min-width: 0;

}



.vango-io-module__dim--interactive {

    padding: 0.12em 0.05em;

    border: 1px solid transparent;

    border-radius: 0.28em;

    background: transparent;

    color: inherit;

    cursor: pointer;

    transition: border-color 0.15s, background 0.15s;

}



.vango-io-module__dim--interactive:hover {

    border-color: rgba(56, 189, 248, 0.45);

    background: rgba(56, 189, 248, 0.08);

}



.vango-io-module__dim-dial {

    position: relative;

    width: 1.25em;

    height: 1.25em;

    border-radius: 999px;

    border: 1px solid rgba(125, 211, 252, 0.6);

    background:

        radial-gradient(circle at center, #0a0a0a 58%, transparent 59%),

        conic-gradient(#0ea5e9 0 var(--dim-level, 0%), rgba(45, 55, 72, 0.6) 0);

}



.vango-io-module__dim-dial em {

    position: absolute;

    inset: 0;

    border-radius: 999px;

    font-style: normal;

    pointer-events: none;

}



.vango-io-module__dim-dial em::after {

    content: "";

    position: absolute;

    left: 50%;

    top: 0.14em;

    width: 1px;

    height: 0.38em;

    background: #7dd3fc;

    transform-origin: bottom center;

    transform: translateX(-50%) rotate(calc(var(--dim-level, 0%) * 2.7deg - 135deg));

}



.vango-io-module__dim small {

    font-size: 0.62em;

    color: #7dd3fc;

}



.vango-io-module__block--rgb {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 0.12em;

    padding-inline: 0.4em;

}



.vango-io-module__rgb-icon {

    position: relative;

    width: 1.5em;

    height: 1.5em;

    border-radius: 999px;

    background: radial-gradient(circle at 50% 50%, var(--io-rgb-color, #2563eb) 0 42%, rgba(0, 0, 0, 0.35) 43%);

    box-shadow: 0 0 10px color-mix(in srgb, var(--io-rgb-color, #2563eb) 55%, transparent);

}



.vango-io-module__rgb-dot {

    position: absolute;

    width: 0.7em;

    height: 0.7em;

    border-radius: 999px;

    border: 1px solid rgba(255, 255, 255, 0.25);

}



.vango-io-module__rgb-dot--r { background: #ef4444; left: 0; top: 0.45em; }

.vango-io-module__rgb-dot--g { background: #22c55e; left: 0.45em; top: 0; }

.vango-io-module__rgb-dot--b { background: #3b82f6; right: 0; top: 0.45em; }



.vango-io-module__block--rgb small {

    font-size: 0.62em;

    color: #7dd3fc;

}

.vango-io-module__rgb-btn {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 0.12em;

    padding: 0.15em;

    border: 1px solid transparent;

    border-radius: 0.28em;

    background: transparent;

    color: inherit;

    cursor: pointer;

}

.vango-io-module__rgb-btn:hover {

    border-color: rgba(0, 168, 255, 0.35);

    background: rgba(255, 255, 255, 0.04);

}

.vango-io-module--interactive .vango-io-module__reset {

    cursor: pointer;

    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;

}

.vango-io-module--interactive .vango-io-module__reset:hover {

    border-color: rgba(248, 113, 113, 0.55);

    background: rgba(248, 113, 113, 0.08);

    color: #fca5a5;

}



.vango-io-module__block--sensors {

    display: flex;

    gap: 0.18em;

    align-items: center;

    padding-inline: 0.35em;

}



.vango-io-module__sensor {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 0.06em;

    font-size: 0.62em;

    color: #7dd3fc;

}



.vango-io-module__brand {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 0.15em;

    padding: 0.2em 0.35em;

    border: none;

    background: transparent;

    flex-shrink: 0;

}



.vango-io-module__brand-logo {

    width: 2.2em;

    height: auto;

    filter: drop-shadow(0 0 6px rgba(0, 168, 255, 0.4));

}



.vango-io-module__brand strong {

    font-size: 0.85em;

    font-weight: 800;

    color: #00a8ff;

    letter-spacing: 0.04em;

    line-height: 1;

}



.vango-io-module__block--motors {

    display: flex;

    gap: 0.2em;

    align-items: center;

}



.vango-io-module__motor {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 0.08em;

    text-align: center;

}



.vango-io-module__motor--interactive {

    padding: 0.15em 0.2em;

    border: 1px solid transparent;

    border-radius: 0.28em;

    background: transparent;

    color: inherit;

    cursor: pointer;

    transition: border-color 0.15s, background 0.15s;

}



.vango-io-module__motor--interactive:hover {

    border-color: rgba(56, 189, 248, 0.45);

    background: rgba(56, 189, 248, 0.08);

}

.vango-io-module__motor--interactive.is-on {

    border-color: rgba(56, 189, 248, 0.55);

    background: rgba(56, 189, 248, 0.12);

    box-shadow: 0 0 10px rgba(56, 189, 248, 0.25);

}



.vango-io-module__motor small {

    font-size: 0.62em;

    font-weight: 700;

    color: #7dd3fc;

}



.vango-io-module__motor-icon {

    width: 1.3em;

    height: 1.3em;

    border: 1.5px solid #64748b;

    border-radius: 999px;

    position: relative;

    flex-shrink: 0;

    transition: border-color 0.15s, box-shadow 0.15s;

}



.vango-io-module__motor-icon::before,

.vango-io-module__motor-icon::after {

    content: "";

    position: absolute;

    left: 50%;

    top: 50%;

    transform: translate(-50%, -50%);

    background: #64748b;

    transition: background 0.15s;

}



.vango-io-module__motor-icon::before {

    width: 0.6em;

    height: 1px;

}



.vango-io-module__motor-icon::after {

    width: 1px;

    height: 0.6em;

}



.vango-io-module__block--water {

    padding-inline: 0.35em;

}



.vango-io-module__water-strip {

    display: flex;

    gap: 0.15em;

    align-items: center;

    height: 100%;

}



.vango-io-module__drop {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 0.06em;

    font-size: 0.58em;

    color: #7dd3fc;

    text-align: center;

}



.vango-io-module__drop::before {
    content: "";
    width: 0.65em;
    height: 0.8em;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    background: linear-gradient(
        to top,
        var(--drop-fill, #22c55e) 0%,
        var(--drop-fill, #22c55e) var(--io-water-level, 100%),
        rgba(30, 41, 59, 0.88) var(--io-water-level, 100%),
        rgba(30, 41, 59, 0.88) 100%
    );
    box-shadow: inset 0 -0.08em 0.12em rgba(0, 0, 0, 0.25);
}

.vango-io-module__drop-level {
    font-style: normal;
    font-size: 0.52em;
    font-weight: 800;
    color: #e2e8f0;
    line-height: 1;
}

.vango-io-module__drop.is-active {
    color: #fff;
    filter: drop-shadow(0 0 4px rgba(56, 189, 248, 0.55));
}

.vango-io-module__drop--clean { --drop-fill: #22c55e; }
.vango-io-module__drop--gray { --drop-fill: #94a3b8; }
.vango-io-module__drop--water { --drop-fill: #3b82f6; }

.vango-io-module__drop--clean::before { background: linear-gradient(to top, #22c55e 0%, #22c55e var(--io-water-level, 100%), rgba(30, 41, 59, 0.88) var(--io-water-level, 100%), rgba(30, 41, 59, 0.88) 100%); }
.vango-io-module__drop--gray::before { background: linear-gradient(to top, #94a3b8 0%, #94a3b8 var(--io-water-level, 100%), rgba(30, 41, 59, 0.88) var(--io-water-level, 100%), rgba(30, 41, 59, 0.88) 100%); }
.vango-io-module__drop--water::before { background: linear-gradient(to top, #3b82f6 0%, #3b82f6 var(--io-water-level, 100%), rgba(30, 41, 59, 0.88) var(--io-water-level, 100%), rgba(30, 41, 59, 0.88) 100%); }



.vango-io-module__led {

    display: inline-block;

    width: 0.38em;

    height: 0.38em;

    border-radius: 999px;

    background: #334155;

    flex-shrink: 0;

}



.vango-io-module__led--live {

    background: #f8fafc;

    box-shadow: 0 0 5px rgba(248, 250, 252, 0.85);

}



.vango-io-module__relay-led.is-on,

.vango-io-module__relay-led.is-active {

    background: #22c55e;

    box-shadow: 0 0 6px rgba(34, 197, 94, 0.9);

}



.vango-io-module__motor-icon.is-on {

    border-color: #22c55e;

    box-shadow: 0 0 6px rgba(34, 197, 94, 0.65);

}



.vango-io-module__motor-icon.is-on::before,

.vango-io-module__motor-icon.is-on::after {

    background: #22c55e;

}



.vango-io-module__motor-icon.is-left,

.vango-io-module__motor-icon.is-right {

    border-color: #38bdf8;

    box-shadow: 0 0 6px rgba(56, 189, 248, 0.65);

}



.vango-io-module__motor-icon.is-left::before,

.vango-io-module__motor-icon.is-right::before,

.vango-io-module__motor-icon.is-left::after,

.vango-io-module__motor-icon.is-right::after {

    background: #38bdf8;

}



@container vango-io (max-width: 900px) {

    .vango-io-module__row--main {

        flex-wrap: wrap;

    }



    .vango-io-module__block--relays,

    .vango-io-module__block--dims {

        flex: 1 1 100%;

    }

}



@container vango-io (max-width: 640px) {

    .vango-io-module__face {

        grid-template-columns: 1fr;

    }



    .vango-io-module__side--left,

    .vango-io-module__side--right {

        display: none;

    }



    .vango-io-module__relay-strip {

        flex-wrap: wrap;

        justify-content: center;

    }



    .vango-io-module__relay {

        flex: 0 0 calc(100% / 6 - 0.12em);

    }



    .vango-io-module__dim-strip {

        flex-wrap: wrap;

        justify-content: center;

    }



    .vango-io-module__dim {

        flex: 0 0 calc(100% / 4 - 0.12em);

    }

}



@media (max-width: 700px) {

    .vango-io-module {

        font-size: clamp(6px, 2vw, 8px);

    }

}

.io-details__module-preview {
    margin-top: var(--hx-space-4);
    overflow-x: auto;
}

.vango-io-module--product-page {
    margin-inline: auto;
}