/* ══ Services landing: full-screen greenhouse stage (prefix lx-) ══════════════
   Colours come from the Bootstrap/Metronic variables, so the page follows the panel's light/dark theme. */

@property --n {
    syntax: '<integer>';
    initial-value: 0;
    inherits: false;
}

.lx {
    --ac: var(--bs-primary);
    --ok: var(--bs-success);
    --err: var(--bs-danger);
    --warn: var(--bs-warning);
    --ink: var(--bs-gray-900);
    --mute: var(--bs-gray-600);
    --faint: var(--bs-gray-400);
    --line: rgba(16, 40, 28, .08);
    --glass-line: rgba(255, 255, 255, .7);
    --tile: rgba(255, 255, 255, .5);
    --pane: rgba(255, 255, 255, .62);
    --surface: rgba(255, 255, 255, .58);
    --halo: 0 1px 10px rgba(255, 255, 255, .95);
    --surface-solid: var(--bs-body-bg);
    --edge: inset 0 1px 0 rgba(255, 255, 255, .75);
    --shadow: 0 18px 40px -22px rgba(16, 40, 28, .38);
    --shadow-lg: 0 24px 50px -24px rgba(16, 40, 28, .4);
    --r: 20px;
    --gap: 18px;
    position: fixed;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    padding: var(--gap) clamp(16px, 2.2vw, 40px);
    overflow: hidden;
    color: var(--ink);
    background: var(--bs-body-bg);
    isolation: isolate;
    scrollbar-width: thin;
    scrollbar-color: var(--bs-gray-300) transparent;
}

[data-bs-theme="dark"] .lx {
    --surface: rgba(12, 26, 18, .42);
    --line: rgba(255, 255, 255, .08);
    --glass-line: rgba(255, 255, 255, .13);
    --tile: rgba(255, 255, 255, .06);
    --pane: rgba(255, 255, 255, .05);
    --edge: inset 0 1px 0 rgba(255, 255, 255, .07);
    --halo: 0 1px 10px rgba(0, 0, 0, .85);
    --shadow: 0 20px 44px -22px rgba(0, 0, 0, .6);
    --shadow-lg: 0 28px 56px -26px rgba(0, 0, 0, .8);
}

.lx button { font: inherit; }
[dir="rtl"] .lx .ki-arrow-right, [dir="rtl"] .lx .ki-right, [dir="rtl"] .lx .fa-chevron-right { scale: -1 1; }

/* ── background ─────────────────────────────────────────────────────────── */
.lx-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }

.lx-bg-photo {
    position: absolute;
    inset: -40px;
    background: url(/images/landing/greenhouse-interior.webp) center 40% / cover no-repeat;
    scale: 1.08;
    translate: calc(var(--px, 0) * -20px) calc(var(--py, 0) * -14px);
    transition: translate .8s cubic-bezier(.2, .8, .2, 1);
    /* must stay static: animating a blurred layer re-blurs it and every glass backdrop each frame (crashed iOS Safari) */
    filter: blur(16px) saturate(1.1);
}

/* light veil only: the photo has to stay visible behind the glass */
.lx-bg-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(246, 250, 247, .4) 0%, rgba(246, 250, 247, .08) 30%, rgba(246, 250, 247, .08) 65%, rgba(246, 250, 247, .45) 100%),
        linear-gradient(0deg, rgba(36, 92, 58, .08), rgba(36, 92, 58, .08));
}

[data-bs-theme="dark"] .lx-bg-photo { filter: blur(16px) saturate(.95) brightness(.62); }
[data-bs-theme="dark"] .lx-bg-shade {
    background:
        radial-gradient(ellipse 90% 80% at 50% 40%, transparent 40%, rgba(6, 16, 10, .55) 100%),
        linear-gradient(180deg, rgba(6, 16, 10, .5) 0%, rgba(6, 16, 10, .12) 30%, rgba(6, 16, 10, .18) 65%, rgba(6, 16, 10, .62) 100%);
}

.lx-bg-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(520px circle at var(--cx, 50%) var(--cy, 30%), color-mix(in srgb, var(--ac) 7%, transparent), transparent 62%);
}

.lx-mote { display: none; }

[data-bs-theme="dark"] .lx-mote {
    display: block;
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--s);
    height: var(--s);
    border-radius: 50%;
    background: color-mix(in srgb, var(--ac) 70%, #fff);
    box-shadow: 0 0 10px var(--ac);
    opacity: 0;
    animation: lx-mote 14s linear var(--d) infinite;
}

/* ── shared surfaces ────────────────────────────────────────────────────── */
.lx-top, .lx-glass, .lx-svc, .lx-note, .lx-svcs-legend > span {
    border: 1px solid var(--glass-line);
    background: var(--surface);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    box-shadow: var(--shadow), var(--edge);
}

/* ── top bar ────────────────────────────────────────────────────────────── */
.lx-top {
    position: relative;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 8px 16px;
    border-radius: var(--r);
    animation: lx-drop .7s cubic-bezier(.2, .8, .2, 1) both;
}

.lx-brand { display: flex; align-items: center; gap: 10px; }
.lx-brand img { height: 34px; width: auto; }
.lx-brand-name { font-size: 16px; font-weight: 800; color: var(--ink); }

.lx-clock {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px;
    border-radius: 10px;
    background: var(--tile);
    font-size: 13px;
    color: var(--mute);
    white-space: nowrap;
}

.lx-clock > i { color: var(--ac); font-size: 16px; }
.lx-time { color: var(--ink); font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums; }
.lx-sep { width: 1px; height: 14px; background: var(--bs-gray-300); }

.lx-top-end { display: flex; align-items: center; gap: 10px; }

.lx-user {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px;
    padding-inline-end: 10px;
    border-radius: 999px;
    background: var(--tile);
}

.lx-avatar {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bs-primary-light, color-mix(in srgb, var(--ac) 14%, transparent));
    color: var(--ac);
    font-size: 12px;
    font-weight: 800;
}

.lx-user-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; }

.lx-icon-btn {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--mute);
    font-size: 17px;
    transition: background .2s, color .2s;
}

.lx-icon-btn:hover { background: color-mix(in srgb, var(--err) 12%, transparent); color: var(--err); }

.lx-enter { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.lx-enter i { font-size: 16px; transition: translate .25s; }
.lx-enter:hover i { translate: 3px 0; }
[dir="rtl"] .lx-enter:hover i { translate: -3px 0; }

/* customer selector: same markup/JS as the header filter (PageTitlesAndAction); its scoped rules are mirrored here */
.lx .filter-select-wrapper {
    display: block;
    width: 240px;
    max-width: 260px;
    position: relative;
    z-index: 1;
}

.lx .filter-select-wrapper:has(.choices.is-open) { z-index: 1060; }
.lx .filter-select-icon { z-index: 2; pointer-events: none; }
.lx .filter-select-wrapper .choices { margin-bottom: 0; width: 100%; min-width: 0; overflow: visible; }
.lx .filter-select-wrapper .choices__inner { padding: 0 2rem 0 2.1rem !important; padding-inline-start: 2.1rem !important; padding-inline-end: 2rem !important; background-image: none !important; overflow: hidden !important; }
.lx .filter-select-wrapper .choices__list--single { width: 100% !important; overflow: hidden !important; white-space: normal !important; }
.lx .filter-select-wrapper .choices__list--single .choices__item { width: 100% !important; }
.lx .filter-select-wrapper .choice-stack { display: flex; flex-direction: column; justify-content: center; min-width: 0; width: 100%; max-height: 100%; }
.lx .filter-select-wrapper .choice-main { display: block; font-weight: 600; font-size: .82rem; line-height: 1.2; color: var(--bs-gray-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx .filter-select-wrapper .choice-sub { display: block; font-size: .68rem; line-height: 1.15; font-weight: 500; color: var(--bs-gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: .1rem; }
.lx .filter-select-wrapper .choices__list--dropdown .choice-main,
.lx .filter-select-wrapper .choices__list--dropdown .choice-sub { white-space: normal; }

.lx .filter-select-wrapper .choices__list--dropdown,
.lx .filter-select-wrapper .choices__list[aria-expanded] {
    z-index: 1055;
    min-width: 100%;
    width: max-content;
    max-width: min(360px, 90vw);
    display: none;
    height: auto;
    max-height: 300px;
    overflow: hidden;
    position: absolute;
}

.lx .filter-select-wrapper .is-active.choices__list--dropdown,
.lx .filter-select-wrapper .is-active.choices__list[aria-expanded] { display: block; }

.lx .filter-select-static {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    max-width: 220px;
    height: 38px;
    padding: 0 .85rem;
    border-radius: .475rem;
    background: var(--bs-gray-100);
    font-weight: 600;
    font-size: .85rem;
    color: var(--bs-gray-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── board: narrow glass columns around the sharp landscape (one screen, panels never push the page) ── */
.lx-board {
    flex: 1 1 0;
    min-height: 0;
    display: grid;
    grid-template-columns: clamp(260px, 21vw, 340px) minmax(0, 1fr) clamp(270px, 22vw, 350px);
    grid-template-rows: minmax(0, 1.25fr) minmax(0, 1fr);
    grid-template-areas:
        "out   view status"
        "halls svcs status";
    gap: var(--gap);
}

.lx-outside { grid-area: out; }
.lx-halls { grid-area: halls; container-type: inline-size; }
.lx-status { grid-area: status; }
.lx-services { grid-area: svcs; }

.lx-view {
    grid-area: view;
    position: relative;
    min-height: 0;
    pointer-events: none;
}

/* fills the cell and runs under the neighbouring glass (top bar, side tiles), whose blur blends its edges into the frosted backdrop */
.lx-view-img {
    position: absolute;
    top: calc(-1 * var(--gap) - 24px);
    bottom: calc(-1 * var(--gap));
    inset-inline: calc(-1 * var(--gap) - 64px);
    width: calc(100% + 2 * var(--gap) + 128px);
    height: calc(100% + 2 * var(--gap) + 24px);
    object-fit: cover;
    object-position: center 45%;
    --fade-x: linear-gradient(to right, transparent, #000 64px, #000 calc(100% - 64px), transparent);
    --fade-y: linear-gradient(to bottom, transparent, #000 24px, #000 calc(100% - 56px), transparent);
    -webkit-mask: var(--fade-x), var(--fade-y);
    -webkit-mask-composite: source-in;
    mask: var(--fade-x), var(--fade-y);
    mask-composite: intersect;
    animation: lx-fade 1.2s ease both;
}

[data-bs-theme="dark"] .lx-view-img { filter: saturate(.95) brightness(.82); }

.lx-glass {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 16px 20px;
    border-radius: var(--r);
    animation: lx-rise .8s cubic-bezier(.2, .8, .2, 1) both;
}

.lx-halls { animation-delay: .08s; }
.lx-status { animation-delay: .16s; }

.lx-glass-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--ink);
    font-size: 15px;
    font-weight: 700;
}

.lx-glass-head > i {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    border: 1px solid var(--glass-line);
    background: var(--tile);
    color: var(--ac);
    font-size: 17px;
}

.lx-glass-head > span { flex: 1; }

.lx-glass-head small {
    padding: 1px 9px;
    border-radius: 999px;
    background: var(--tile);
    color: var(--mute);
    font-weight: 700;
    font-size: 11.5px;
}

.lx-empty { flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--mute); font-size: 13px; text-align: center; }
.lx-empty i { font-size: 26px; color: var(--ac); opacity: .7; }

/* outside weather: title + source, a sky hero (temperature beside the scene), then the readings */
.lx-out-head { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.lx-out-src {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--mute);
    font-size: 11.5px;
    font-style: normal;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lx-out-src.is-sensor { color: var(--ok); }
.lx-out-src i { font-size: 13px; }

.lx-out-main {
    --hero: linear-gradient(155deg, rgba(120, 195, 255, .34), rgba(255, 255, 255, .16) 70%);
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    padding: 12px 16px;
    border-radius: 16px;
    border: 1px solid var(--glass-line);
    background: var(--hero);
    box-shadow: var(--edge);
    overflow: hidden;
    container-type: size;
}

.lx-out-main:has(.is-cloudy, .is-fog) { --hero: linear-gradient(155deg, rgba(170, 190, 210, .34), rgba(255, 255, 255, .14) 70%); }
.lx-out-main:has(.is-rain, .is-snow) { --hero: linear-gradient(155deg, rgba(120, 145, 175, .36), rgba(255, 255, 255, .12) 70%); }
.lx-out-main:has(.is-storm) { --hero: linear-gradient(155deg, rgba(80, 95, 125, .42), rgba(255, 255, 255, .1) 70%); }
.lx-out-main:has(.is-night) { --hero: linear-gradient(155deg, rgba(48, 62, 120, .5), rgba(20, 30, 60, .14) 75%); }

[data-bs-theme="dark"] .lx-out-main { --hero: linear-gradient(155deg, rgba(70, 140, 210, .22), rgba(255, 255, 255, .03) 70%); }
[data-bs-theme="dark"] .lx-out-main:has(.is-cloudy, .is-fog, .is-rain, .is-snow, .is-storm) { --hero: linear-gradient(155deg, rgba(120, 140, 165, .2), rgba(255, 255, 255, .03) 70%); }
[data-bs-theme="dark"] .lx-out-main:has(.is-night) { --hero: linear-gradient(155deg, rgba(60, 75, 150, .32), rgba(255, 255, 255, .02) 75%); }

.lx-out-main:has(.is-night) .lx-out-temp, .lx-out-main:has(.is-night) .lx-out-cond { color: #fff; text-shadow: 0 1px 8px rgba(10, 20, 50, .45); }
.lx-out-main:has(.is-night) .lx-out-temp sup { color: rgba(255, 255, 255, .75); }

.lx-out-now { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.lx-out-cond { max-width: 100%; color: var(--ink); opacity: .75; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.lx-out-temp {
    display: inline-flex;
    align-items: flex-start;
    direction: ltr;
    font-size: clamp(36px, 3.6vw, 58px);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -1px;
    color: var(--ink);
}

.lx-out-temp sup { position: static; margin: .12em 0 0 3px; font-size: .32em; font-weight: 600; letter-spacing: 0; color: var(--mute); }

/* glass sky: sun/moon behind frosted clouds; the tile is the backdrop root, so the clouds blur the sun only */
.lx-sky {
    --cloud: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60'><path d='M20 56 H82 A12 12 0 0 0 82 32 A13 13 0 0 0 60 19 A17 17 0 0 0 30 25 A16 16 0 0 0 20 56 Z'/></svg>");
    --cloud-bg: linear-gradient(170deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .5));
    --star: #9aa9c4;
    --fog: rgba(140, 158, 176, .55);
    position: relative;
    flex: none;
    height: min(100cqh, 32cqw, 150px);
    aspect-ratio: 5 / 4;
}

[data-bs-theme="dark"] .lx-sky {
    --cloud-bg: linear-gradient(170deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, .18));
    --star: #fff;
    --fog: rgba(255, 255, 255, .35);
}

.lx-sky.is-rain, .lx-sky.is-snow { --cloud-bg: linear-gradient(170deg, rgba(240, 244, 248, .95), rgba(165, 178, 194, .7)); }
.lx-sky.is-storm { --cloud-bg: linear-gradient(170deg, rgba(205, 211, 222, .95), rgba(105, 116, 134, .8)); }
[data-bs-theme="dark"] .lx-sky.is-rain, [data-bs-theme="dark"] .lx-sky.is-snow { --cloud-bg: linear-gradient(170deg, rgba(215, 225, 240, .5), rgba(120, 135, 155, .3)); }
[data-bs-theme="dark"] .lx-sky.is-storm { --cloud-bg: linear-gradient(170deg, rgba(170, 180, 200, .5), rgba(70, 80, 100, .45)); }

.lx-sky > span { position: absolute; display: none; }

.lx-sky-sun {
    width: 52%;
    aspect-ratio: 1;
    inset-inline-end: 6%;
    top: 4%;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff8d6 0%, #ffd84d 42%, #ffae1f 100%);
    box-shadow: 0 0 0 6px rgba(255, 200, 60, .15), 0 0 36px 6px rgba(255, 180, 40, .45);
    animation: lx-sun 6s ease-in-out infinite;
}

.is-clear .lx-sky-sun { width: 64%; inset-inline: 0; margin-inline: auto; top: 10%; }
.is-clear .lx-sky-sun, .is-partly .lx-sky-sun, .is-fog .lx-sky-sun { display: block; }
.is-fog .lx-sky-sun { opacity: .55; }

.is-night .lx-sky-sun {
    background: radial-gradient(circle at 35% 30%, #fff, #e3e7f1 55%, #b8c0d4);
    box-shadow: 0 0 30px 4px rgba(190, 205, 255, .35);
    -webkit-mask: radial-gradient(ellipse 42% 42% at 74% 26%, transparent 98%, #000 100%);
    mask: radial-gradient(ellipse 42% 42% at 74% 26%, transparent 98%, #000 100%);
    animation: none;
}

.is-night.is-clear::before, .is-night.is-partly::before {
    content: '';
    position: absolute;
    top: 14%;
    inset-inline-start: 12%;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--star);
    box-shadow: 28px 16px 0 -.5px var(--star), 54px 2px 0 0 var(--star), 12px 44px 0 -.5px var(--star), 70px 38px 0 -.5px var(--star), 40px 60px 0 -1px var(--star);
    animation: lx-twinkle 3s ease-in-out infinite;
}

.lx-sky-cloud {
    aspect-ratio: 5 / 3;
    background: var(--cloud-bg);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    -webkit-mask: var(--cloud) center / 100% 100% no-repeat;
    mask: var(--cloud) center / 100% 100% no-repeat;
    animation: lx-drift 7s ease-in-out infinite alternate;
}

.lx-sky-cloud.is-front { width: 76%; inset-inline-start: 0; bottom: 2%; }
.lx-sky-cloud.is-back { width: 52%; inset-inline-end: 0; top: 10%; opacity: .8; animation-duration: 9s; animation-direction: alternate-reverse; }
.is-partly .is-front, .is-cloudy .lx-sky-cloud, .is-rain .lx-sky-cloud, .is-snow .lx-sky-cloud, .is-storm .lx-sky-cloud { display: block; }
.is-fog .is-back { display: block; opacity: .5; }
.is-rain .is-front, .is-snow .is-front, .is-storm .is-front { bottom: 28%; }

.lx-sky-drops { inset-inline: 14% 20%; bottom: 0; height: 36%; }
.is-rain .lx-sky-drops, .is-snow .lx-sky-drops, .is-storm .lx-sky-drops { display: block; }

.lx-sky-drops i {
    position: absolute;
    top: 0;
    inset-inline-start: calc(var(--i) * 13% + 2%);
    width: 2px;
    height: 40%;
    border-radius: 2px;
    background: linear-gradient(transparent, #3e97ff);
    animation: lx-rain .9s linear calc(var(--i) * -.13s) infinite;
}

.is-snow .lx-sky-drops i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 4px rgba(120, 150, 190, .7);
    animation: lx-snow 2.6s linear calc(var(--i) * -.37s) infinite;
}

.lx-sky-bolt {
    width: 18%;
    aspect-ratio: 1 / 2;
    inset-inline-start: 38%;
    bottom: 0;
    background: linear-gradient(#ffe66b, #ffb703);
    clip-path: polygon(55% 0, 12% 56%, 44% 56%, 28% 100%, 88% 38%, 56% 38%, 78% 0);
    animation: lx-bolt 3.2s infinite;
}

.is-storm .lx-sky-bolt { display: block; }

.lx-sky-fog { inset-inline: 4%; bottom: 8%; height: 42%; flex-direction: column; justify-content: flex-end; gap: 14%; }
.is-fog .lx-sky-fog { display: flex; }
.lx-sky-fog i { display: block; height: 22%; border-radius: 999px; background: linear-gradient(90deg, transparent, var(--fog), transparent); animation: lx-fog 6s ease-in-out infinite alternate; }
.lx-sky-fog i + i { margin-inline-start: 18%; animation-direction: alternate-reverse; }

.lx-out-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: auto;
    padding-top: 10px;
}

.lx-metric {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 8px;
    align-items: center;
    min-width: 0;
    padding: 8px 12px;
    border-radius: 13px;
    border: 1px solid var(--glass-line);
    background: var(--tile);
}

.lx-metric > i { grid-row: span 2; color: var(--ac); font-size: 17px; transition: rotate .6s; }
.lx-metric small { color: var(--mute); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-metric b { font-size: 16px; font-weight: 700; text-align: start; white-space: nowrap; }
.lx-metric em { font-style: normal; font-size: 11px; font-weight: 600; color: var(--mute); }

/* halls */
.lx-hall-list {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--bs-gray-300) transparent;
}

.lx-hall {
    flex: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 7px 12px;
    border: 1px solid var(--glass-line);
    border-radius: 14px;
    background: var(--pane);
    color: inherit;
    text-align: start;
    transition: border-color .2s, box-shadow .2s;
}

.lx-hall:hover { border-color: color-mix(in srgb, var(--ac) 50%, transparent); box-shadow: 0 6px 16px -10px color-mix(in srgb, var(--ac) 60%, transparent); }
.lx-hall.is-skeleton { height: 44px; background: var(--tile); border-color: transparent; animation: lx-blink 1.6s ease-in-out infinite; }

.lx-hall-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.lx-hall-name b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-hall-name small { color: var(--mute); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.lx-hall-val {
    --t: var(--bs-danger);
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    min-width: 76px;
    justify-content: center;
    padding: 4px 9px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--t) 9%, transparent);
    color: var(--ink);
}

/* narrow column: name on its own line, the two values side by side under it */
@container (max-width: 280px) {
    .lx-hall { grid-template-columns: 1fr 1fr; row-gap: 6px; }
    .lx-hall-name { grid-column: 1 / -1; }
    .lx-hall-val { min-width: 0; }
}

.lx-hall-val.is-t { --t: var(--warn); }
.lx-hall-val.is-h { --t: var(--ac); }
.lx-hall-val i { align-self: center; color: var(--t); font-size: 14px; }
.lx-hall-val b { font-size: 16px; font-weight: 700; }
.lx-hall-val small { color: var(--mute); font-size: 10.5px; font-weight: 600; }
.lx-hall-val.is-err { --t: var(--err); background: color-mix(in srgb, var(--err) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--err) 40%, transparent); }
.lx-hall-val.is-err b { color: var(--err); }
.lx-hall-val.is-bad, .lx-metric.is-bad { background: color-mix(in srgb, var(--warn) 10%, transparent); outline: 1px dashed color-mix(in srgb, var(--warn) 70%, transparent); outline-offset: -1px; cursor: help; }
.lx-hall-val.is-bad b, .lx-metric.is-bad b { color: var(--warn); }

/* system status */
.lx-status { overflow: visible; }
.lx-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }

.lx-stat {
    --t: var(--ok);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 14px;
    background: var(--tile);
    border: 1px solid var(--glass-line);
    transition: border-color .25s;
}

.lx-stat:hover { border-color: color-mix(in srgb, var(--t) 40%, transparent); }
.lx-stat.tone-info { --t: var(--ac); }
.lx-stat.tone-warm { --t: var(--warn); }
.lx-stat.tone-err { --t: var(--err); }

.lx-stat-ico {
    flex: none;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: color-mix(in srgb, var(--t) 14%, transparent);
    color: var(--t);
    font-size: 17px;
}

.lx-stat.tone-err .lx-stat-ico { animation: lx-alarm 1.6s ease-in-out infinite; }
.lx-stat-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.lx-stat-txt b { font-size: 20px; font-weight: 700; color: var(--ink); }
.lx-stat-txt em { font-style: normal; font-size: 13px; font-weight: 600; color: var(--mute); margin-inline-start: 2px; }
.lx-stat-txt small { color: var(--mute); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.lx-count {
    --n: var(--to);
    counter-reset: n var(--n);
    animation: lx-count 1.6s .3s cubic-bezier(.2, .8, .2, 1) both;
}

.lx-count::after { content: counter(n); }
.lx-fa .lx-count::after { content: counter(n, persian); }

.lx-map-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 12px 0 8px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
}

.lx-legend { display: flex; align-items: center; gap: 6px; color: var(--mute); font-size: 11.5px; font-weight: 500; }
.lx-legend i { width: 8px; height: 8px; border-radius: 2px; margin-inline-start: 6px; }
.lx-legend i.is-ok { background: var(--ok); }
.lx-legend i.is-err { background: var(--err); }

/* sensor map: one cell per sensor; a single shared tooltip (filled by landing.js) is positioned against the map area */
/* the area positions the tooltips, so clipping the rows that do not fit leaves them visible */
.lx-map-area { position: relative; flex: 1 1 0; min-height: 24px; display: flex; flex-direction: column; }

.lx-map {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11px, 1fr));
    align-content: start;
    gap: 4px;
    min-height: 0;
    padding: 3px;
    overflow: hidden;
}

.lx-cell {
    display: block;
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    border-radius: 3px;
    background: var(--bs-gray-200);
    outline: 2px solid transparent;
    outline-offset: 1px;
    animation: lx-fade .5s calc(.4s + var(--i) * 12ms) backwards;
    transition: outline-color .15s, box-shadow .15s;
}

.lx-cell.is-ok { background: var(--ok); }
.lx-cell.is-err { background: var(--err); box-shadow: 0 0 8px color-mix(in srgb, var(--err) 60%, transparent); animation: lx-fade .5s calc(.4s + var(--i) * 12ms) backwards, lx-cell-alarm 1.4s 1.2s ease-in-out infinite; }
.lx-cell.is-unk { background: var(--bs-gray-300); }
.lx-cell.is-more { display: grid; place-items: center; background: color-mix(in srgb, var(--ac) 14%, transparent); color: var(--ac); font-size: 10px; font-weight: 800; line-height: 1; }
.lx-cell:hover, .lx-cell:focus-visible { outline-color: var(--ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ink) 10%, transparent); }
.lx-map.is-loading .lx-cell { animation: lx-blink 1.6s calc(var(--i) * 20ms) ease-in-out infinite; }

.lx-tip {
    position: absolute;
    inset-inline: -6px;
    bottom: calc(100% + 12px);
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-solid);
    box-shadow: var(--shadow-lg);
    color: var(--ink);
    text-align: start;
    opacity: 0;
    translate: 0 6px;
    pointer-events: none;
    transition: opacity .15s, translate .15s;
}

.lx-tip.is-on { opacity: 1; translate: 0 0; }

.lx-tip-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lx-tip-head > i { color: var(--ac); font-size: 14px; }
.lx-tip-head b { flex: 1; min-width: 0; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.lx-tip-head em {
    flex: none;
    padding: 2px 10px;
    border-radius: 6px;
    font-style: normal;
    font-size: 11.5px;
    font-weight: 700;
}

.lx-tip-head em.is-ok { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.lx-tip-head em.is-err { background: color-mix(in srgb, var(--err) 14%, transparent); color: var(--err); }
.lx-tip-head em.is-unk { background: var(--bs-gray-100); color: var(--mute); }

.lx-tip-path { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--mute); font-size: 12px; }
.lx-tip-path span { display: inline-flex; align-items: center; gap: 5px; }
.lx-tip-path .ki-home-2 { color: var(--ac); font-size: 14px; }
.lx-tip-path .ki-right { font-size: 10px; opacity: .6; }
.lx-tip-hint { display: flex; align-items: center; gap: 6px; padding-top: 7px; border-top: 1px dashed var(--line); color: var(--ac); font-size: 11px; font-weight: 700; }
.lx-tip-hint i { font-size: 14px; }

/* ── service cards ──────────────────────────────────────────────────────── */
.lx-services {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lx-svcs-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    animation: lx-rise .8s .25s cubic-bezier(.2, .8, .2, 1) both;
}

.lx-svcs-head h2 { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--ink); font-size: 16px; font-weight: 800; text-shadow: var(--halo); }
.lx-svcs-head h2 i { color: var(--ac); font-size: 18px; }
.lx-svcs-legend { display: flex; gap: 8px; }

.lx-svcs-legend > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 3px 11px;
    border-radius: 999px;
    color: var(--mute);
    font-size: 12px;
    font-weight: 700;
    box-shadow: none;
}

.lx-svcs-legend b { color: var(--ink); }
.lx-svcs-legend i { width: 8px; height: 8px; border-radius: 50%; }
.lx-svcs-legend .is-on i { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent); }
.lx-svcs-legend .is-off i { border: 1.5px dashed var(--faint); }

/* every service gets an equal narrow column, however many there are */
.lx-svcs {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: var(--gap);
    perspective: 1400px;
}

.lx-svc {
    --a: var(--bs-gray-500);
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 16px 20px;
    overflow: hidden;
    border-radius: var(--r);
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform .3s cubic-bezier(.2, .8, .2, 1), border-color .3s, box-shadow .3s;
    animation: lx-rise .8s calc(.3s + var(--i) * .09s) cubic-bezier(.2, .8, .2, 1) both;
    will-change: transform;
}

.lx-svc.is-hot, .lx-svc:hover {
    border-color: color-mix(in srgb, var(--a) 50%, transparent);
    box-shadow: 0 26px 50px -24px color-mix(in srgb, var(--a) 45%, transparent);
}

.lx-svc-spot {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--a) 14%, transparent), transparent 65%);
    opacity: 0;
    transition: opacity .35s;
    pointer-events: none;
}

.lx-svc.is-hot .lx-svc-spot { opacity: 1; }
.lx-svc-head, .lx-svc-body { position: relative; z-index: 1; }
.lx-svc-head { display: flex; align-items: center; gap: 12px; }

.lx-svc-ico {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: color-mix(in srgb, var(--a) 14%, var(--surface-solid));
    color: var(--a);
    font-size: 20px;
    transition: transform .35s cubic-bezier(.2, 1.4, .4, 1);
}

.lx-svc.is-hot .lx-svc-ico { transform: scale(1.08) rotate(-6deg); }
.lx-svc-title { flex: 1; min-width: 0; }
.lx-svc-title h3 { margin: 0; color: var(--ink); font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-svc-title small { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--mute); font-size: 12px; }

.lx-svc { container: lx-svc / inline-size; }

@container lx-svc (max-width: 270px) {
    .lx-svc-head { flex-wrap: wrap; row-gap: 8px; }
    .lx-svc-title { flex-basis: calc(100% - 52px); }
    .lx-svc-head > .lx-badge-state { margin-inline-start: 52px; }
}
.lx-svc-subcount { color: var(--a); font-weight: 700; }
.lx-svc-subcount::before { content: '•'; margin-inline-end: 8px; color: var(--faint); }

.lx-badge-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 6px;
    background: var(--bs-gray-100);
    border: 1px dashed var(--bs-gray-300);
    color: var(--mute);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.lx-badge-state i { font-size: 13px; }

.lx-badge-state.is-on {
    background: color-mix(in srgb, var(--ok) 14%, var(--surface-solid));
    border: 1px solid transparent;
    color: var(--ok);
}

.lx-badge-state-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ok);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 50%, transparent);
    animation: lx-status 2s ease-out infinite;
}

/* active: accent tint and a glowing top bar */
.lx-svc.is-on {
    border-color: color-mix(in srgb, var(--a) 30%, var(--line));
    background:
        linear-gradient(165deg, color-mix(in srgb, var(--a) 10%, transparent), transparent 55%),
        var(--surface);
}

.lx-svc-bar {
    position: absolute;
    top: 0;
    inset-inline: 22px;
    z-index: 2;
    height: 3px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, transparent, var(--a), color-mix(in srgb, var(--a) 60%, #fff), transparent);
    background-size: 200% 100%;
    animation: lx-bar 4s linear infinite;
}

.lx-svc.is-off .lx-svc-bar { display: none; }

/* inactive: dashed, desaturated, hatched, with a lock */
.lx-svc.is-off {
    border: 1px dashed var(--bs-gray-300);
    background:
        repeating-linear-gradient(135deg, color-mix(in srgb, var(--ink) 3%, transparent) 0 10px, transparent 10px 20px),
        var(--surface);
    box-shadow: none;
}

/* on the children, not the card: a filter on the card would also grey the photo behind its glass */
.lx-svc.is-off > * { filter: grayscale(.9); transition: filter .4s; }
.lx-svc.is-off:hover > *, .lx-svc.is-off.is-hot > * { filter: grayscale(.4); }
.lx-svc.is-off .lx-svc-ico { opacity: .7; }
.lx-svc.is-off .lx-svc-title h3 { color: var(--mute); }
.lx-svc.is-off .lx-art { opacity: .4; }
.lx-svc.is-off .lx-art * { animation-play-state: paused; }

.lx-locked {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 4px 0;
    color: var(--mute);
}

.lx-lock {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px dashed var(--bs-gray-400);
    background: var(--tile);
    font-size: 20px;
    transition: transform .4s cubic-bezier(.2, 1.4, .4, 1);
}

.lx-svc.is-off.is-hot .lx-lock { transform: rotate(-12deg) scale(1.06); }
.lx-locked b { font-size: 13px; }

.lx-svc-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--bs-gray-300) transparent;
}

.lx-dev { flex: none; }

.lx-dev-main {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--glass-line);
    border-radius: 13px;
    background: var(--pane);
    color: inherit;
    text-align: start;
    transition: background .2s, border-color .2s;
}

.lx-dev-main:hover { border-color: color-mix(in srgb, var(--a) 50%, transparent); }
.lx-dev-main:hover .lx-go { color: var(--a); translate: 2px 0; }
[dir="rtl"] .lx-dev-main:hover .lx-go { translate: -2px 0; }

.lx-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.lx-dot.is-on { background: var(--ok); box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent); animation: lx-live 2.2s ease-out infinite; }
.lx-dot.is-off { background: var(--err); box-shadow: 0 0 6px color-mix(in srgb, var(--err) 70%, transparent); }

.lx-dev-txt { flex: 1; display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.lx-dev-txt b { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-dev-txt small { color: var(--mute); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.lx-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--err) 12%, transparent);
    color: var(--err);
    font-size: 11.5px;
    font-weight: 700;
}

.lx-go { color: var(--faint); font-size: 13px; transition: translate .2s, color .2s; }

/* climate device (narrow card): name, live heater status, then one compact row of subsystems */
.kind-climate .lx-dev {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    padding: 6px;
    border-radius: 15px;
    background: var(--pane);
    border: 1px solid var(--glass-line);
}

.kind-climate .lx-dev-main { background: transparent; border-color: transparent; padding: 4px 6px; }
.kind-climate .lx-subs { grid-column: 1 / -1; }

.lx-hs { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 4px; }
.lx-hs.is-stale { opacity: .55; filter: grayscale(.6); }

.lx-hs-chip {
    --t: var(--mute);
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    column-gap: 6px;
    align-items: center;
    padding: 4px 9px;
    border-radius: 10px;
    background: var(--tile);
    border: 1px solid var(--glass-line);
    color: var(--mute);
}

.lx-hs-chip > i { grid-row: span 2; color: var(--t); font-size: 15px; }
.lx-hs-chip b { font-size: 14px; font-weight: 800; color: var(--ink); line-height: 1.1; }
.lx-hs-chip b em { font-style: normal; font-size: 11px; font-weight: 600; color: var(--mute); }
.lx-hs-chip small { font-size: 10px; font-weight: 600; white-space: nowrap; line-height: 1.1; }

.lx-hs-chip.is-heat.is-on { --t: #f1416c; border-color: color-mix(in srgb, #f1416c 35%, transparent); background: color-mix(in srgb, #f1416c 8%, var(--surface-solid)); }
.lx-hs-chip.is-heat.is-on > i { animation: lx-flame 1.2s ease-in-out infinite; }
.lx-hs-chip.is-fan.is-on { --t: var(--ac); border-color: color-mix(in srgb, var(--ac) 35%, transparent); background: color-mix(in srgb, var(--ac) 8%, var(--surface-solid)); }
.lx-hs-chip.is-fan.is-on > i { animation: lx-spin 1.4s linear infinite; }
.lx-hs-chip.is-err.is-on { --t: var(--err); border-color: color-mix(in srgb, var(--err) 45%, transparent); background: color-mix(in srgb, var(--err) 10%, var(--surface-solid)); }
.lx-hs-chip.is-err.is-on b { color: var(--err); }
.lx-hs-chip.is-err:not(.is-on) { --t: var(--ok); }

.lx-subs { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 4px 2px; }

.lx-sub {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    min-width: 28px;
    justify-content: center;
    padding: 0 8px;
    border-radius: 8px;
    border: 1px dashed var(--bs-gray-300);
    background: transparent;
    color: var(--faint);
    font-size: 12px;
    font-weight: 700;
    transition: transform .2s cubic-bezier(.2, 1.4, .4, 1), background .2s, border-color .2s, box-shadow .2s;
}

.lx-sub i { font-size: 12px; }

.lx-sub.is-on {
    border: 1px solid transparent;
    background: var(--a);
    color: #fff;
    box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--a) 80%, transparent);
    cursor: pointer;
}

.lx-sub.is-on:hover { transform: translateY(-2px); }
.lx-sub.is-off, .lx-sub.is-soon { cursor: not-allowed; }
.lx-sub.is-off { color: var(--err); border-color: color-mix(in srgb, var(--err) 35%, transparent); background: color-mix(in srgb, var(--err) 6%, transparent); }
.lx-sub.is-soon { opacity: .7; }

.lx-cta { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; }
.lx-cta i { font-size: 16px; }

/* per-type artwork layer (tinted from the card accent) */
.lx-art { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.lx-art > * { transition: opacity .4s, scale .6s cubic-bezier(.2, .8, .2, 1); }

.kind-climate { --a: var(--bs-warning); }
.kind-nutrition { --a: var(--bs-success); }
.kind-wastewater { --a: var(--bs-primary); }
.kind-monitoring { --a: var(--bs-info); }

/* climate: sun with rotating rays and drifting air currents */
.lx-sun {
    position: absolute;
    top: -90px;
    inset-inline-end: -84px;
    width: 230px;
    height: 230px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--a) 70%, #fff) 0 15%, color-mix(in srgb, var(--a) 28%, transparent) 17%, color-mix(in srgb, var(--a) 8%, transparent) 42%, transparent 64%);
    opacity: .6;
}

.lx-sun::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: repeating-conic-gradient(color-mix(in srgb, var(--a) 26%, transparent) 0 4deg, transparent 4deg 18deg);
    mask: radial-gradient(circle, transparent 22%, #000 26%, transparent 66%);
    -webkit-mask: radial-gradient(circle, transparent 22%, #000 26%, transparent 66%);
    animation: lx-spin 40s linear infinite;
}

.lx-air { position: absolute; inset-inline: 0; bottom: 34%; width: 100%; height: 90px; opacity: .5; }
.lx-air path { fill: none; stroke: color-mix(in srgb, var(--a) 55%, transparent); stroke-width: 1.4; stroke-dasharray: 36 18; animation: lx-flow 6s linear infinite; }
.lx-air path:nth-child(2) { animation-duration: 8s; }
.lx-air path:nth-child(3) { animation-duration: 11s; }
.kind-climate.is-hot .lx-sun { opacity: .9; scale: 1.12; }

/* nutrition: rising bubbles */
.lx-drop { position: absolute; top: -12px; inset-inline-end: 6px; font-size: 130px; color: color-mix(in srgb, var(--a) 9%, transparent); line-height: 1; rotate: 12deg; }

.lx-bubble {
    position: absolute;
    bottom: -20px;
    left: var(--x);
    width: var(--s);
    height: var(--s);
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--a) 50%, transparent);
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .7), color-mix(in srgb, var(--a) 12%, transparent) 45%, transparent 70%);
    opacity: 0;
    animation: lx-bubble var(--t) ease-in var(--d) infinite;
}

.kind-nutrition.is-hot .lx-drop { scale: 1.08; color: color-mix(in srgb, var(--a) 14%, transparent); }

/* wastewater: looping water waves and ripples */
.lx-wave { position: absolute; bottom: 0; left: 0; width: 200%; height: 70px; animation: lx-wave 10s linear infinite; }
.lx-wave path { fill: color-mix(in srgb, var(--a) 12%, transparent); }
.lx-wave.w2 { height: 54px; animation-duration: 15s; animation-direction: reverse; }
.lx-wave.w2 path { fill: color-mix(in srgb, var(--a) 8%, transparent); }

.lx-ripple {
    position: absolute;
    top: 22px;
    inset-inline-end: 34px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 1.5px solid color-mix(in srgb, var(--a) 35%, transparent);
    opacity: 0;
    animation: lx-ripple 4.5s ease-out infinite;
}

.lx-ripple.r2 { animation-delay: 2.25s; }
.kind-wastewater.is-hot .lx-wave { scale: 1 1.35; transform-origin: bottom; }

/* monitoring: radar sweep and live trend line */
.lx-radar {
    position: absolute;
    top: -60px;
    inset-inline-end: -60px;
    width: 210px;
    height: 210px;
    border-radius: 50%;
    background:
        linear-gradient(color-mix(in srgb, var(--a) 18%, transparent), color-mix(in srgb, var(--a) 18%, transparent)) center / 1px 100% no-repeat,
        linear-gradient(color-mix(in srgb, var(--a) 18%, transparent), color-mix(in srgb, var(--a) 18%, transparent)) center / 100% 1px no-repeat,
        repeating-radial-gradient(circle, transparent 0 24px, color-mix(in srgb, var(--a) 18%, transparent) 25px 26px);
    opacity: .8;
}

.lx-radar i {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg, color-mix(in srgb, var(--a) 35%, transparent), transparent 70deg);
    animation: lx-spin 4s linear infinite;
}

.lx-line { position: absolute; inset-inline: 0; bottom: 30%; width: 100%; height: 80px; opacity: .5; }
.lx-line path { fill: none; stroke: var(--a); stroke-width: 2; stroke-dasharray: 700; stroke-dashoffset: 700; animation: lx-draw 5s ease-in-out infinite; }
.kind-monitoring.is-hot .lx-radar { opacity: 1; scale: 1.08; }

/* untyped */
.lx-chip-grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(color-mix(in srgb, var(--ink) 14%, transparent) 1px, transparent 1.5px);
    background-size: 16px 16px;
    mask: linear-gradient(200deg, #000, transparent 70%);
    -webkit-mask: linear-gradient(200deg, #000, transparent 70%);
}

/* skeleton + notes */
.lx-svc.is-skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--ink) 6%, transparent) 50%, transparent 70%);
    background-size: 200% 100%;
    animation: lx-shimmer 1.6s linear infinite;
}

.lx-note {
    align-self: center;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12vh;
    padding: 16px 22px;
    border-radius: var(--r);
}

.lx-note i { color: var(--ac); font-size: 20px; }

.lx-boot {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    background: var(--bs-body-bg);
    color: var(--bs-gray-600);
}

.lx-boot img { height: 56px; width: auto; animation: lx-breathe 1.8s ease-in-out infinite; }

/* ── phones / touch: no live backdrop blur (the photo behind is already blurred; per-frame re-blur while scrolling exhausts mobile GPUs) ── */
@media (max-width: 900px), (hover: none) {
    .lx { --surface: rgba(255, 255, 255, .8); }
    [data-bs-theme="dark"] .lx { --surface: rgba(12, 26, 18, .8); }
    .lx-top, .lx-glass, .lx-svc, .lx-note, .lx-svcs-legend > span, .lx-sky-cloud { -webkit-backdrop-filter: none; backdrop-filter: none; }
    [data-bs-theme="dark"] .lx-mote { display: none; }
}

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .lx-clock { display: none; }
    .lx-user-name { display: none; }
}

/* narrower desktop: no room for the uncropped photo; the three panels share the top row, services below */
@media (max-width: 1199px) {
    .lx-board {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: minmax(0, 1.12fr) minmax(0, 1fr);
        grid-template-areas:
            "out  halls status"
            "svcs svcs  svcs";
    }
    .lx-view { display: none; }
}

/* too small for one screen: panels take their natural height and the page scrolls; no landscape window */
@media (max-width: 900px), (max-height: 560px) {
    .lx { overflow-y: auto; }
    .lx-board {
        flex: none;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: none;
        grid-template-areas:
            "out    halls"
            "status status"
            "svcs   svcs";
    }
    .lx-view { display: none; }
    .lx-out-main { container-type: normal; }
    .lx-sky { height: 110px; }
    .lx-svcs { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); grid-template-rows: none; grid-auto-rows: auto; }
    .lx-svc { min-height: 200px; }
    .lx-svc-body, .lx-hall-list, .lx-map { overflow: visible; }
    .lx-map-area { flex: none; }
}

@media (min-width: 901px) and (max-height: 720px) {
    .lx { --gap: 12px; --r: 16px; }
    .lx-glass, .lx-svc { padding: 12px 16px; }
    .lx-out-temp { font-size: clamp(30px, 3.4vw, 44px); }
    .lx-out-main { margin-top: 8px; padding: 6px 12px; }
    .lx-out-cond { display: none; }
    .lx-out-stats { gap: 6px; padding-top: 6px; }
    .lx-metric { padding: 5px 9px; }
    .lx-stat { padding: 5px 9px; }
    .lx-stat-ico { width: 28px; height: 28px; font-size: 15px; }
    .lx-map-head { margin: 8px 0 4px; }
}

@media (max-width: 760px) {
    .lx-board { grid-template-columns: minmax(0, 1fr); grid-template-areas: "out" "halls" "status" "svcs"; }
    .lx-top { flex-wrap: wrap; }
    .lx-top-end { flex-wrap: wrap; justify-content: flex-end; }
    .lx .filter-select-wrapper { width: 170px; }
    .lx-enter span { display: none; }
}

/* ── keyframes ──────────────────────────────────────────────────────────── */
@keyframes lx-mote { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: .9; } 85% { opacity: .6; } 100% { opacity: 0; transform: translate(30px, -160px); } }
@keyframes lx-drop { from { opacity: 0; translate: 0 -16px; } }
@keyframes lx-rise { from { opacity: 0; translate: 0 22px; } }
@keyframes lx-count { from { --n: 0; } }
@keyframes lx-sun { 50% { box-shadow: 0 0 0 10px rgba(255, 200, 60, .1), 0 0 48px 10px rgba(255, 180, 40, .5); } }
@keyframes lx-twinkle { 50% { opacity: .35; } }
@keyframes lx-drift { to { translate: 6% 0; } }
@keyframes lx-rain { from { translate: 0 -30%; opacity: 0; } 30% { opacity: 1; } to { translate: -4px 230%; opacity: 0; } }
@keyframes lx-snow { from { translate: 0 0; opacity: 0; } 20% { opacity: 1; } 50% { translate: 4px 260%; } to { translate: -3px 520%; opacity: 0; } }
@keyframes lx-bolt { 0%, 84%, 100% { opacity: 0; } 86%, 92% { opacity: 1; } 89% { opacity: .3; } }
@keyframes lx-fog { to { translate: 8% 0; } }
@keyframes lx-flame { 50% { scale: 1.15 1.25; translate: 0 -1px; } }
@keyframes lx-fade { from { opacity: 0; } }
@keyframes lx-cell-alarm { 50% { background: color-mix(in srgb, var(--err) 35%, transparent); box-shadow: none; } }
@keyframes lx-blink { 50% { opacity: .35; } }
@keyframes lx-alarm { 50% { background: color-mix(in srgb, var(--err) 30%, transparent); } }
@keyframes lx-live { 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes lx-spin { to { transform: rotate(360deg); } }
@keyframes lx-flow { to { stroke-dashoffset: -108; } }
@keyframes lx-bubble { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 15% { opacity: .9; } 50% { transform: translate(8px, -120px) scale(1); } 100% { opacity: 0; transform: translate(-6px, -250px) scale(1.15); } }
@keyframes lx-wave { to { transform: translateX(-50%); } }
@keyframes lx-ripple { from { transform: scale(.2); opacity: .9; } to { transform: scale(1.6); opacity: 0; } }
@keyframes lx-draw { 0% { stroke-dashoffset: 700; } 55%, 80% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes lx-status { 70% { box-shadow: 0 0 0 6px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes lx-bar { to { background-position: -200% 0; } }
@keyframes lx-shimmer { to { background-position: -200% 0; } }
@keyframes lx-breathe { 50% { transform: scale(1.06); opacity: .75; } }

@media (prefers-reduced-motion: reduce) {
    .lx *, .lx *::before, .lx *::after { animation: none !important; transition: none !important; }
    .lx-svc { transform: none; }
}