:root {
    --bg: #070a0f;
    --panel: #101722;
    --panel2: #151f2e;
    --text: #eaf2ff;
    --muted: #8fa3bb;
    --line: rgba(255,255,255,.10);
    --ok: #35f2a3;
    --warn: #ffd166;
    --bad: #ff5c7a;
}

body {
    background: radial-gradient(circle at top left, rgba(40, 120, 255, .18), transparent 32rem), linear-gradient(180deg, #070a0f 0%, #0b1018 100%);
    color: var(--text);
    font-family: "Segoe UI", system-ui, sans-serif;
}

header, .navbar, footer {
    background: rgba(7, 10, 15, .82) !important;
    border-color: var(--line) !important;
}

.navbar-brand, .nav-link {
    color: var(--text) !important;
}

.ll-page {
    padding: 2rem 0 4rem;
}

.ll-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    margin-bottom: 2rem;
}

.ll-kicker {
    color: var(--ok);
    letter-spacing: .14em;
    text-transform: uppercase;
    font-size: .78rem;
    margin-bottom: .5rem;
}

.ll-hero h1 {
    font-size: clamp(2.2rem, 5vw, 4.5rem);
    font-weight: 700;
    letter-spacing: -.05em;
    margin: 0;
}

.ll-hero p {
    color: var(--muted);
    font-size: 1.1rem;
}

.ll-status-pill,
.ll-badge {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .35rem .75rem;
    background: rgba(255,255,255,.06);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
}

.ll-card {
    background: linear-gradient(180deg, var(--panel), var(--panel2));
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 1.3rem;
    box-shadow: 0 24px 80px rgba(0,0,0,.38);
}

.ll-card-header {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin-bottom: 1rem;
}

    .ll-card-header h2 {
        margin: 0;
        font-size: 1.5rem;
    }

    .ll-card-header span {
        color: var(--muted);
    }

.ll-actions-inline,
.ll-actions-cell,
.ll-form-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem;
}

.ll-actions-inline {
    justify-content: flex-end;
}

.ll-table-wrap {
    overflow-x: auto;
}

.ll-table {
    width: 100%;
    border-collapse: collapse;
}

    .ll-table th {
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: .09em;
        font-size: .72rem;
        font-weight: 700;
        border-bottom: 1px solid var(--line);
        padding: .9rem .7rem;
        white-space: nowrap;
    }

    .ll-table td {
        border-bottom: 1px solid rgba(255,255,255,.06);
        padding: 1rem .7rem;
        white-space: nowrap;
    }

    .ll-table tbody tr {
        transition: background .15s ease, transform .15s ease;
    }

        .ll-table tbody tr:hover {
            background: rgba(255,255,255,.045);
        }

    .ll-table strong {
        color: #ffffff;
    }

.ll-badge.ok {
    color: var(--ok);
    border-color: rgba(53,242,163,.35);
    background: rgba(53,242,163,.08);
}

.ll-badge.warn {
    color: var(--warn);
    border-color: rgba(255,209,102,.35);
    background: rgba(255,209,102,.08);
}

.ll-badge.bad {
    color: var(--bad);
    border-color: rgba(255,92,122,.35);
    background: rgba(255,92,122,.08);
}

@media (max-width: 720px) {
    .ll-hero {
        flex-direction: column;
        align-items: flex-start;
    }

    .ll-card {
        border-radius: 18px;
        padding: 1rem;
    }
}

.ll-sub {
    margin-top: .25rem;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .02em;
}
.ll-clickable-row {
    cursor: pointer;
}

    .ll-clickable-row:hover {
        background: rgba(53, 242, 163, .06) !important;
    }
.ll-back-link {
    display: inline-block;
    margin-bottom: 1rem;
    color: var(--muted);
    text-decoration: none;
}

.ll-toast-host {
    position: fixed;
    top: 1.2rem;
    right: 1.2rem;
    z-index: 1200;
    width: min(420px, calc(100vw - 2rem));
    pointer-events: none;
}

.ll-toast-host.visible {
    pointer-events: auto;
}

.ll-toast {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    padding: 1rem 1.05rem;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.1);
    background:
        radial-gradient(circle at top left, rgba(53,242,163,.08), transparent 12rem),
        linear-gradient(180deg, rgba(18,26,38,.97), rgba(10,15,24,.96));
    box-shadow: 0 22px 70px rgba(0,0,0,.42);
    color: #eef5ff;
    backdrop-filter: blur(12px);
    animation: ll-toast-in .22s ease-out;
}

.ll-toast.ll-toast-error {
    background:
        radial-gradient(circle at top left, rgba(255,92,122,.10), transparent 12rem),
        linear-gradient(180deg, rgba(18,26,38,.97), rgba(10,15,24,.96));
    border-color: rgba(255,92,122,.2);
}

.ll-toast-body {
    flex: 1 1 auto;
    min-width: 0;
}

.ll-toast-title {
    margin-bottom: .3rem;
    font-size: .8rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(234,242,255,.74);
}

.ll-toast-message {
    font-size: .95rem;
    line-height: 1.45;
    color: #f4f8ff;
}

.ll-toast-close {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 999px;
    background: rgba(255,255,255,.04);
    color: rgba(234,242,255,.88);
    font-size: 1.15rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ll-toast-link {
    margin-left: .2rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: #8ecbff;
    font: inherit;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: .18em;
}

@keyframes ll-toast-in {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

    .ll-back-link:hover {
        color: var(--ok);
    }

.ll-device-hero {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 2rem;
    margin-bottom: 2rem;
}

    .ll-device-hero h1 {
        font-size: clamp(2rem, 4vw, 3.8rem);
        letter-spacing: -.05em;
        margin: 0;
    }

    .ll-device-hero p,
    .ll-muted {
        color: var(--muted);
    }

.ll-device-status {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .5rem;
}

.ll-metric-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    gap: 1.2rem;
}

.ll-metric-card {
    background: linear-gradient(180deg, var(--panel), var(--panel2));
    border: 1px solid var(--line);
    border-radius: 28px;
    padding: 1.4rem;
    box-shadow: 0 24px 80px rgba(0,0,0,.32);
}

.ll-metric-title {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 1.2rem;
}

.ll-metric-value {
    font-size: clamp(2.6rem, 5.5vw, 4.4rem);
    font-weight: 750;
    letter-spacing: -.06em;
    line-height: .9;
}

.ll-metric-unit {
    color: var(--text);
    font-size: 1.2rem;
    margin-top: .6rem;
}

.ll-metric-sub {
    color: var(--muted);
    margin-top: .35rem;
}

.ll-progress-track {
    position: relative;
    margin-top: 1.4rem;
    height: 10px;
    border-radius: 999px;
    background: repeating-linear-gradient( 90deg, rgba(255,255,255,.12) 0, rgba(255,255,255,.12) 1px, transparent 1px, transparent 10% ), rgba(255,255,255,.07);
    overflow: hidden;
}

.ll-progress-bar {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(53,242,163,.55), var(--ok));
    box-shadow: 0 0 18px rgba(53,242,163,.25);
}

    .ll-progress-bar.ao {
        background: linear-gradient(90deg, rgba(255,209,102,.5), var(--warn));
        box-shadow: 0 0 18px rgba(255,209,102,.22);
    }

@media (max-width: 900px) {
    .ll-device-hero {
        flex-direction: column;
        align-items: flex-start;
    }

    .ll-metric-grid {
        grid-template-columns: 1fr;
    }
}

.ll-metric-title small {
    display: block;
    margin-top: .2rem;
    color: var(--muted);
    opacity: .65;
    font-size: .68rem;
    letter-spacing: .08em;
}

.ll-mini-alarms {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: 1rem;
}

.ll-mini-alarm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: .28rem .55rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.045);
    color: var(--muted);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

    .ll-mini-alarm.ok {
        color: var(--ok);
        border-color: rgba(53,242,163,.32);
        background: rgba(53,242,163,.07);
    }

    .ll-mini-alarm.warn {
        color: var(--warn);
        border-color: rgba(255,209,102,.36);
        background: rgba(255,209,102,.08);
    }

    .ll-mini-alarm.bad {
        color: var(--bad);
        border-color: rgba(255,92,122,.38);
        background: rgba(255,92,122,.09);
    }

    .ll-mini-alarm.off {
        color: rgba(143,163,187,.65);
        border-color: rgba(143,163,187,.20);
        background: rgba(143,163,187,.045);
    }

.ll-info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.2rem;
    margin-top: 1.2rem;
}

.ll-info-card {
    background: linear-gradient(180deg, var(--panel), var(--panel2));
    border: 1px solid var(--line);
    border-radius: 28px;
    padding: 1.4rem;
    box-shadow: 0 24px 80px rgba(0,0,0,.28);
}

.ll-info-header {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 1rem;
    margin-bottom: 1rem;
}

    .ll-info-header h2 {
        margin: 0;
        font-size: 1.1rem;
        letter-spacing: -.02em;
    }

.ll-info-header span {
        color: var(--muted);
        font-size: .85rem;
    }

.ll-summary-inline-actions {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: .8rem;
    font-weight: 800;
}

.ll-summary-inline-actions input {
    width: 6.5rem;
    padding: .55rem .75rem;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    background: rgba(10,16,25,.82);
    color: #eaf2ff;
}

.ll-tile-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(120px, 1fr));
    gap: .8rem;
}

.ll-tile {
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
    padding: 1rem;
    background: rgba(255,255,255,.035);
}

.ll-relay-tile {
    position: relative;
}

.ll-relay-tile.is-on {
    border-color: rgba(53,242,163,.18);
    box-shadow: inset 0 0 0 1px rgba(53,242,163,.08);
}

.ll-relay-menu-trigger {
    position: absolute;
    top: .75rem;
    right: .75rem;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 10px;
    background: rgba(255,255,255,.03);
    color: rgba(234,242,255,.88);
    font-size: 1rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ll-relay-menu-trigger:hover {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.18);
}

.ll-relay-tile-label {
    padding-right: 2.2rem;
}

.ll-relay-menu {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px solid rgba(255,255,255,.07);
}

.ll-relay-action-btn {
    min-height: 34px;
    padding: .45rem .75rem;
}

.ll-tile-label {
    color: var(--muted);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: .55rem;
}

.ll-tile-value {
    font-size: 1.8rem;
    font-weight: 750;
    letter-spacing: -.04em;
    line-height: 1;
}

    .ll-tile-value.small {
        font-size: 1.05rem;
        letter-spacing: -.02em;
    }

.ll-tile-sub {
    color: var(--muted);
    font-size: .82rem;
    margin-top: .45rem;
}

@media (max-width: 900px) {
    .ll-tile-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.ll-metric-unit-inline {
    font-size: .34em;
    color: var(--muted);
    margin-left: .35rem;
    letter-spacing: 0;
}

.ll-tile-grid.io {
    grid-template-columns: repeat(5, minmax(120px, 1fr));
}

.ll-state-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 34px;
    padding: .45rem .75rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.045);
    color: var(--muted);
    font-size: .82rem;
    font-weight: 850;
    letter-spacing: .08em;
}

.ll-state-pill::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 0 0 1px rgba(255,255,255,.06);
    flex: 0 0 auto;
}

    .ll-state-pill.on {
        color: var(--ok);
        border-color: rgba(53,242,163,.34);
        background: rgba(53,242,163,.08);
        box-shadow: 0 0 18px rgba(53,242,163,.10);
    }

    .ll-state-pill.off {
        color: rgba(143,163,187,.75);
        border-color: rgba(143,163,187,.22);
        background: rgba(143,163,187,.045);
    }

@media (max-width: 900px) {
    .ll-tile-grid.io {
        grid-template-columns: repeat(2, 1fr);
    }
}

.ll-system-alarms {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}

.ll-vc-nav-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 1.2rem 0;
}

/* VC detail tabs */
.ll-vc-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin: 0;
    padding: .35rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255,255,255,.035);
    width: fit-content;
    max-width: 100%;
}

.ll-vc-tab {
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    padding: .55rem .9rem;
    font-size: .76rem;
    font-weight: 850;
    letter-spacing: .09em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.ll-vc-tab:hover {
    color: var(--text);
    background: rgba(255,255,255,.055);
}

.ll-vc-tab.active {
    color: var(--ok);
    border-color: rgba(53,242,163,.34);
    background: rgba(53,242,163,.08);
}

.ll-tab-panel {
    display: none;
}

.ll-tab-panel.active {
    display: block;
}

.ll-tech-zone {
    display: grid;
    justify-items: end;
    gap: .3rem;
    flex: 0 0 auto;
}

.ll-tech-zone-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: .5rem;
}

.ll-tech-zone-header strong {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.ll-vc-tech-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin: 0;
    padding: .3rem;
    border: 1px solid rgba(97,168,255,.22);
    border-radius: 999px;
    background: rgba(97,168,255,.05);
}

.ll-vc-tech-tab {
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    padding: .62rem 1rem;
    font-weight: 850;
    transition: .18s ease;
}

.ll-vc-tech-tab:hover,
.ll-vc-tech-tab.active {
    color: var(--text);
    background: rgba(97,168,255,.16);
    box-shadow: inset 0 0 0 1px rgba(97,168,255,.18);
}

.ll-placeholder-card {
    margin-top: 1.2rem;
}

.ll-placeholder-body {
    min-height: 220px;
    border: 1px dashed rgba(255,255,255,.14);
    border-radius: 22px;
    background: rgba(255,255,255,.025);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
}

.ll-placeholder-title {
    color: var(--text);
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -.03em;
    margin-bottom: .45rem;
}

.ll-placeholder-body p {
    max-width: 620px;
    color: var(--muted);
    margin: 0;
}

.ll-config-shell {
    display: grid;
    gap: 1rem;
}

.ll-config-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: linear-gradient(180deg, var(--panel), var(--panel2));
    padding: 1.2rem;
    box-shadow: 0 24px 80px rgba(0,0,0,.24);
}

.ll-config-head h2,
.ll-config-card h3,
.ll-config-card h4 {
    margin: 0;
}

.ll-config-head p {
    max-width: 860px;
    margin: .45rem 0;
    color: var(--muted);
    line-height: 1.55;
}

.ll-config-context,
.ll-config-timestamp {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.ll-config-context {
    margin-top: .35rem;
    color: var(--text);
    font-weight: 800;
}

.ll-config-timestamp {
    color: var(--muted);
}

.ll-config-timestamp strong {
    color: var(--text);
}

.ll-config-head small,
.ll-save-notice {
    color: var(--muted);
}

.ll-config-actions {
    display: grid;
    justify-items: end;
    gap: .55rem;
    min-width: 240px;
}

.ll-primary-btn {
    min-height: 42px;
    border: 1px solid rgba(53,242,163,.55);
    border-radius: 8px;
    background: var(--ok);
    color: #06100c;
    padding: .6rem .9rem;
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
}

.ll-secondary-btn {
    min-height: 42px;
    border: 1px solid rgba(143,163,187,.32);
    border-radius: 8px;
    background: rgba(255,255,255,.05);
    color: var(--text);
    padding: .6rem .9rem;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    cursor: pointer;
}

.ll-secondary-btn:hover {
    background: rgba(255,255,255,.09);
}

.ll-config-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255,255,255,.035);
    padding: .45rem;
}

.ll-config-tab {
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    padding: .55rem .75rem;
    font-size: .74rem;
    font-weight: 850;
    letter-spacing: .07em;
    text-transform: uppercase;
    cursor: pointer;
}

.ll-config-tab:hover {
    color: var(--text);
    background: rgba(255,255,255,.055);
}

.ll-config-tab.active {
    color: var(--ok);
    border-color: rgba(53,242,163,.32);
    background: rgba(53,242,163,.08);
}

.ll-config-panel {
    display: none;
}

.ll-config-panel.active {
    display: block;
}

.ll-config-card {
    display: grid;
    gap: 1rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: linear-gradient(180deg, var(--panel), var(--panel2));
    padding: 1.2rem;
    box-shadow: 0 24px 80px rgba(0,0,0,.22);
}

.ll-config-card .ll-form-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: .95rem;
}

.ll-config-card > h3 {
    color: var(--ok);
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255,255,255,.08);
    padding-bottom: .75rem;
}

.ll-config-card > h4,
.ll-mode-panel h4,
.ll-signal-block h4,
.ll-contact-list h4 {
    color: var(--text);
    font-size: .98rem;
    font-weight: 850;
}

.ll-config-separator {
    width: 100%;
    margin: .25rem 0;
    border: 0;
    border-top: 1px solid rgba(255,255,255,.10);
    opacity: 1;
}

.ll-section-help {
    margin-top: .2rem;
    color: var(--muted);
    font-size: .85rem;
    line-height: 1.45;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
}

.ll-section-subtitle {
    color: var(--text);
    font-size: .78rem;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ll-integrity-block,
.ll-config-subblock,
.ll-soft-block {
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px;
    background: rgba(255,255,255,.025);
    padding: .85rem;
}

.ll-integrity-block {
    display: grid;
    gap: .45rem;
}

.ll-config-grid {
    display: grid;
    gap: 1rem;
}

.ll-config-grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ll-config-grid.three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ll-form-grid.one {
    grid-template-columns: 1fr;
}

.ll-mode-select-row {
    display: flex;
    flex-wrap: wrap;
    gap: .9rem;
    align-items: end;
}

.ll-mode-select-field {
    min-width: min(420px, 100%);
}

.ll-narrow-field {
    max-width: 420px;
}

.ll-wide-field {
    grid-column: 1 / -1;
    max-width: 520px;
}

.ll-mode-panel {
    display: grid;
    gap: .85rem;
    border-top: 1px solid var(--line);
    padding-top: 1rem;
}

.hidden {
    display: none !important;
}

.ll-config-table {
    width: 100%;
    border-collapse: collapse;
}

.ll-config-table th,
.ll-config-table td {
    border-bottom: 1px solid rgba(255,255,255,.07);
    padding: .55rem;
    vertical-align: middle;
    white-space: nowrap;
}

.ll-config-table th {
    color: var(--muted);
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ll-config-table input,
.ll-config-table select,
.ll-list-editor input {
    width: 100%;
    min-height: 36px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255,255,255,.055);
    color: var(--text);
    padding: .42rem .55rem;
}

.ll-config-table input[type="checkbox"],
.ll-field input[type="checkbox"],
.ll-check-field input[type="checkbox"] {
    width: 18px;
    height: 18px;
    min-height: 18px;
    accent-color: var(--ok);
}

.ll-inline-check,
.ll-field .ll-inline-check {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: .5rem;
    width: fit-content;
    max-width: 100%;
    margin-top: .25rem;
    color: var(--muted);
    font-size: .9rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.3;
    text-transform: none;
}

.ll-inline-check input {
    flex: 0 0 auto;
    margin: 0;
}

.ll-inline-check span {
    overflow-wrap: anywhere;
}

.ll-auto2-enable-cell {
    width: 100px;
}

.ll-auto2-enable-wrap {
    margin-top: 0;
}

.ll-field input:disabled,
.ll-field select:disabled {
    opacity: .52;
    cursor: not-allowed;
}

.ll-list-editor {
    display: grid;
    gap: .55rem;
}

.ll-signal-block {
    display: grid;
    gap: .85rem;
}

.ll-contact-grid {
    display: grid;
    gap: 1rem;
}

.ll-contact-list {
    display: grid;
    gap: .7rem;
}

.ll-alb-editor {
    display: grid;
    gap: 1rem;
}

.ll-alb-editor h3 {
    margin: 0;
    color: var(--ok);
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.alb-subcard {
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 8px;
    background: rgba(255,255,255,.025);
    padding: .85rem;
}

.alb-program-card {
    border-color: rgba(53,242,163,.24);
    background: rgba(53,242,163,.055);
}

.alb-program-row {
    display: flex;
    align-items: flex-end;
    gap: .9rem;
    flex-wrap: wrap;
}

.alb-program-enable {
    min-width: 110px;
}

.alb-program-name {
    flex: 1 1 220px;
}

.alb-program-version {
    flex: 0 1 120px;
}

.alb-toggle-label,
.alb-rule-enable-wrap,
.alb-inline-check,
.alb-value-mode label {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--muted);
    font-size: .88rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.alb-toggle-label input,
.alb-rule-enable-wrap input,
.alb-inline-check input,
.alb-value-mode input {
    width: 18px;
    height: 18px;
    min-height: 18px;
    margin: 0;
    accent-color: var(--ok);
}

.alb-toggle-text {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--text);
}

.alb-badge {
    border-radius: 8px;
    padding: .15rem .45rem;
    font-size: .72rem;
    font-weight: 900;
}

.alb-badge-on {
    color: #06100c;
    background: var(--ok);
}

.alb-badge-off {
    color: var(--text);
    background: rgba(143,163,187,.45);
}

.alb-actions-bar {
    display: flex;
    gap: .65rem;
    flex-wrap: wrap;
}

.alb-move-row {
    display: flex;
    gap: .75rem;
    align-items: end;
    flex-wrap: wrap;
    margin-top: .75rem;
}

.alb-move-row .ll-field {
    min-width: 180px;
    margin: 0;
}

.alb-editor-body {
    display: grid;
    gap: .85rem;
    max-height: 680px;
    overflow: auto;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 8px;
    padding: .85rem;
    background: rgba(7,10,15,.30);
}

.alb-subcard-header {
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 0;
    text-align: left;
    cursor: pointer;
}

.alb-subcard-header.static {
    cursor: default;
}

.alb-subcard-header h4 {
    margin: 0;
}

.alb-section-arrow,
.alb-section-spacer,
.alb-rule-arrow {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    flex: 0 0 auto;
}

.alb-section-arrow::before,
.alb-rule-arrow::before {
    content: "";
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 7px solid currentColor;
    transition: transform .16s ease;
    transform-origin: 35% 50%;
}

.alb-section-arrow.open::before,
.alb-rule-arrow.open::before {
    transform: rotate(90deg);
}

.alb-sp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: .75rem;
    margin-top: .75rem;
}

.alb-rule-list {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    margin-top: .85rem;
}

.alb-rule-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    border: 1px solid rgba(255,255,255,.10);
    border-left-width: 3px;
    border-radius: 8px;
    background: rgba(255,255,255,.035);
    overflow: hidden;
}

.alb-rule-card.rule-enabled {
    border-left-color: var(--ok);
    background: rgba(53,242,163,.045);
}

.alb-rule-card.rule-disabled {
    border-left-color: rgba(143,163,187,.45);
    background: rgba(143,163,187,.035);
}

.alb-rule-header {
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .75rem .85rem;
    text-align: left;
    cursor: pointer;
}

.alb-rule-header:hover {
    background: rgba(255,255,255,.035);
}

.alb-rule-title {
    color: var(--text);
    font-size: .95rem;
    font-weight: 850;
    flex: 0 0 auto;
}

.alb-rule-summary {
    color: var(--muted);
    font-size: .82rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.alb-rule-enable-wrap {
    padding: .75rem .85rem .75rem .2rem;
    white-space: nowrap;
}

.alb-rule-body {
    grid-column: 1 / -1;
    display: none;
    border-top: 1px solid rgba(255,255,255,.08);
    padding: .85rem;
}

.alb-rule-body.open {
    display: block;
}

.ll-config-modal {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: grid;
    place-items: center;
    background: rgba(4,8,12,.72);
    backdrop-filter: blur(6px);
    padding: 1rem;
}

.ll-config-modal-card {
    width: min(920px, 100%);
    display: grid;
    gap: .9rem;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 12px;
    background: linear-gradient(180deg, var(--panel), var(--panel2));
    padding: 1rem;
    box-shadow: 0 32px 90px rgba(0,0,0,.38);
}

.ll-config-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.ll-config-modal-head h4 {
    margin: 0;
    color: var(--text);
}

.alb-program-textarea {
    width: 100%;
    min-height: 420px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 8px;
    background: rgba(7,10,15,.5);
    color: var(--text);
    padding: .85rem;
    resize: vertical;
    font: 500 .84rem/1.5 Consolas, "Courier New", monospace;
}

.alb-block {
    border: 1px solid rgba(255,255,255,.10);
    border-left-width: 3px;
    border-radius: 8px;
    background: rgba(7,10,15,.25);
    padding: .85rem;
    margin-bottom: .85rem;
}

.alb-block:last-child {
    margin-bottom: 0;
}

.alb-if-block {
    border-left-color: #61a8ff;
}

.alb-then-block {
    border-left-color: var(--warn);
}

.alb-block-title {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: .65rem;
}

.alb-cond-line,
.alb-calc-row {
    display: flex;
    align-items: center;
    gap: .55rem;
    flex-wrap: wrap;
    margin-top: .65rem;
}

.alb-cond-line select,
.alb-cond-line input,
.alb-calc-row select,
.alb-calc-row input,
.alb-rule-body .ll-field input,
.alb-rule-body .ll-field select,
.alb-rule-body textarea,
.alb-sp-grid input,
.alb-sp-grid select {
    width: auto;
    min-width: 90px;
    flex: 1 1 110px;
    min-height: 36px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255,255,255,.055);
    color: var(--text);
    padding: .45rem .55rem;
}

.alb-calc-row > select,
.alb-calc-row > span {
    flex: 1 1 90px;
    max-width: 160px;
}

.alb-calc-row > span {
    display: flex;
}

.alb-calc-row > span select,
.alb-calc-row > span input {
    width: 100%;
    min-width: 0;
}

.alb-cond-noif {
    color: var(--muted);
    font-size: .82rem;
    font-style: italic;
    margin-top: .45rem;
}

.alb-then-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    margin-bottom: .75rem;
}

.alb-action-value-section {
    margin-top: .6rem;
}

.alb-value-title {
    display: block;
    color: var(--muted);
    font-size: .82rem;
    font-weight: 800;
    margin-bottom: .45rem;
}

.alb-value-mode {
    display: flex;
    gap: .9rem;
    flex-wrap: wrap;
    margin-bottom: .65rem;
}

.alb-binary-op {
    flex: 0 0 72px !important;
}

.alb-textarea {
    width: 100% !important;
    min-height: 70px;
    resize: vertical;
}

@media (max-width: 760px) {
    .alb-rule-card {
        grid-template-columns: 1fr;
    }

    .alb-rule-enable-wrap {
        padding: 0 .85rem .75rem 2.45rem;
    }

    .alb-then-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1050px) {
    .ll-config-grid.two,
    .ll-config-grid.three {
        grid-template-columns: 1fr;
    }

    .ll-config-head {
        flex-direction: column;
    }

    .ll-config-actions {
        justify-items: start;
    }
}

@media (max-width: 720px) {
    .ll-vc-tabs {
        width: 100%;
        border-radius: 22px;
    }

    .ll-vc-tab {
        flex: 1 1 calc(50% - .55rem);
    }

    .ll-vc-nav-row {
        flex-direction: column;
        align-items: stretch;
    }

    .ll-tech-zone {
        justify-items: stretch;
    }

    .ll-tech-zone-header {
        justify-content: flex-start;
    }

    .ll-vc-tech-tabs {
        width: 100%;
        border-radius: 22px;
    }

    .ll-vc-tech-tab {
        flex: 1 1 auto;
    }
}
.ll-empty-state {
    border: 1px dashed var(--line);
    border-radius: 18px;
    padding: 1.2rem;
    color: var(--muted);
    background: rgba(255,255,255,.025);
}

.ll-portal-nav {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin: -0.8rem 0 1.3rem;
}

    .ll-portal-nav a {
        color: var(--muted);
        text-decoration: none;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: rgba(255,255,255,.035);
        padding: .55rem .75rem;
        font-size: .82rem;
        font-weight: 850;
        letter-spacing: .07em;
        text-transform: uppercase;
    }

        .ll-portal-nav a:hover {
            color: var(--ok);
            border-color: rgba(53,242,163,.30);
            background: rgba(53,242,163,.07);
        }

.ll-module-grid,
.ll-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.ll-module-card {
    min-height: 190px;
    color: var(--text);
    text-decoration: none;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: linear-gradient(180deg, var(--panel), var(--panel2));
    padding: 1.2rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .85rem;
    box-shadow: 0 24px 80px rgba(0,0,0,.28);
}

    .ll-module-card:hover {
        color: var(--text);
        border-color: rgba(53,242,163,.30);
        background: linear-gradient(180deg, rgba(20,32,47,.96), rgba(16,23,34,.96));
    }

    .ll-module-card.disabled {
        opacity: .72;
    }

    .ll-module-card h2 {
        margin: .25rem 0 0;
        font-size: 1.35rem;
        letter-spacing: -.03em;
    }

    .ll-module-card p {
        margin: 0;
        color: var(--muted);
        line-height: 1.55;
    }

.ll-summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 1.2rem;
}

.ll-summary-tile {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255,255,255,.035);
    padding: 1rem;
}

    .ll-summary-tile span {
        display: block;
        color: var(--muted);
        font-size: .72rem;
        font-weight: 850;
        letter-spacing: .10em;
        text-transform: uppercase;
        margin-bottom: .55rem;
    }

    .ll-summary-tile strong {
        display: block;
        font-size: 2rem;
        line-height: 1;
        letter-spacing: -.04em;
    }

.ll-device-section {
    margin-top: 1.2rem;
}

@media (max-width: 900px) {
    .ll-module-grid,
    .ll-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .ll-module-grid,
    .ll-summary-grid {
        grid-template-columns: 1fr;
    }
}

.ll-chart-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 24px;
    background:
        radial-gradient(circle at top left, rgba(53,242,163,.08), transparent 22rem),
        radial-gradient(circle at top right, rgba(97,168,255,.08), transparent 24rem),
        linear-gradient(180deg, rgba(10,15,24,.96), rgba(14,21,31,.92));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
    padding: .45rem .55rem .3rem;
}

    .ll-chart-wrap::after {
        content: "";
        position: absolute;
        inset: 8px;
        border-radius: 20px;
        border: 1px solid rgba(255,255,255,.04);
        pointer-events: none;
    }

    .ll-chart-wrap canvas,
    .ll-history-chart {
        width: 100%;
        height: 460px;
        display: block;
    }

.ll-history-chart {
    min-height: 460px;
}

@media (max-width: 720px) {
    .ll-chart-wrap {
        padding: .3rem .35rem .2rem;
    }

    .ll-chart-wrap::after {
        inset: 6px;
    }

    .ll-history-chart {
        height: 360px;
        min-height: 360px;
    }
}

.ll-history-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .65rem;
    margin-bottom: 1rem;
}

    .ll-history-actions label {
        color: var(--muted);
        font-size: .78rem;
        font-weight: 800;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .ll-history-actions select {
        background: rgba(255,255,255,.06);
        color: var(--text);
        border: 1px solid var(--line);
        border-radius: 999px;
        padding: .45rem .75rem;
        font-weight: 800;
    }

        .ll-history-actions select:focus {
            outline: none;
            border-color: rgba(97,168,255,.45);
            box-shadow: 0 0 0 3px rgba(97,168,255,.12);
        }

.ll-ghost-btn {
    background: rgba(53,242,163,.08);
    color: var(--ok);
    border: 1px solid rgba(53,242,163,.28);
    border-radius: 999px;
    padding: .48rem .85rem;
    font-size: .78rem;
    font-weight: 850;
    letter-spacing: .07em;
    text-transform: uppercase;
    cursor: pointer;
}

    .ll-ghost-btn:hover {
        background: rgba(53,242,163,.14);
    }

.ll-history-table-wrap {
    margin-top: 1rem;
    max-height: 320px;
    overflow: auto;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
    background: rgba(255,255,255,.025);
}

.ll-history-table {
    width: 100%;
    border-collapse: collapse;
}

    .ll-history-table th {
        position: sticky;
        top: 0;
        z-index: 1;
        background: rgba(16,23,34,.96);
        color: var(--muted);
        font-size: .68rem;
        font-weight: 850;
        letter-spacing: .09em;
        text-transform: uppercase;
        padding: .75rem .8rem;
        border-bottom: 1px solid var(--line);
        white-space: nowrap;
    }

    .ll-history-table td {
        padding: .7rem .8rem;
        border-bottom: 1px solid rgba(255,255,255,.055);
        color: var(--text);
        font-size: .86rem;
        white-space: nowrap;
    }

.ll-history-table tbody tr:hover {
        background: rgba(255,255,255,.045);
    }

.ll-device-log-toolbar {
    align-items: center;
}

.ll-device-log-help {
    color: var(--muted);
    font-size: .78rem;
}

.ll-device-log-wrap {
    margin-top: 1rem;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
    background: rgba(255,255,255,.025);
    overflow: hidden;
}

.ll-device-log-viewer {
    margin: 0;
    min-height: 360px;
    max-height: 560px;
    overflow: auto;
    padding: 1rem;
    color: var(--text);
    font: 600 .85rem/1.45 "Consolas", "Courier New", monospace;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    background: rgba(7,10,15,.35);
}

.ll-device-health-viewer {
    white-space: pre;
    overflow-wrap: normal;
}

.ll-storage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.ll-storage-stat {
    display: grid;
    gap: .35rem;
    padding: .95rem 1rem;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    background: rgba(255,255,255,.025);
}

.ll-storage-stat span {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ll-storage-stat strong {
    color: var(--text);
    font-size: .96rem;
    overflow-wrap: anywhere;
}

.ll-storage-stat small {
    color: var(--muted);
    font-size: .78rem;
}
.ll-history-actions select option {
    background: #101722;
    color: #eaf2ff;
}

.ll-command-grid {
    display: grid;
    gap: 1.5rem;
}

.ll-command-readonly-note {
    margin-bottom: 1rem;
    padding: .85rem 1rem;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 14px;
    background: rgba(255,255,255,.04);
    color: rgba(234,242,255,.78);
}

.ll-command-history-actions {
    justify-content: space-between;
}

.ll-command-history-caption {
    color: rgba(143,163,187,.86);
    font-weight: 700;
}

.ll-command-table-wrap {
    overflow-x: auto;
}

.ll-command-row.is-pending {
    background: rgba(255,209,102,.08);
}

.ll-command-row.is-delivered {
    color: rgba(234,242,255,.72);
}

.ll-command-row.is-cancelled {
    color: rgba(143,163,187,.72);
}

.ll-command-status {
    display: inline-flex;
    align-items: center;
    padding: .28rem .55rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.ll-command-status.pending {
    background: rgba(255,209,102,.18);
    color: #ffe08a;
}

.ll-command-status.delivered {
    background: rgba(255,255,255,.09);
    color: rgba(234,242,255,.82);
}

.ll-command-status.cancelled {
    background: rgba(143,163,187,.14);
    color: rgba(200,214,231,.68);
}

.ll-command-row-muted {
    color: rgba(143,163,187,.74);
}

.ll-command-cancel-btn {
    padding: .45rem .8rem;
}

.ll-form {
    display: grid;
    gap: 1rem;
}

.ll-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.ll-field {
    display: grid;
    gap: .4rem;
}

.ll-field label,
.ll-check-field {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ll-field input,
.ll-field select,
.ll-field textarea {
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255,255,255,.055);
    color: var(--text);
    padding: .55rem .7rem;
}

.ll-field textarea {
    resize: vertical;
}

.ll-field select option,
.ll-config-table select option,
.alb-cond-line select option,
.alb-calc-row select option,
.alb-rule-body .ll-field select option,
.alb-sp-grid select option {
    background: #101722;
    color: #eaf2ff;
}

.ll-field-wide {
    grid-column: 1 / -1;
}

.ll-settings-block {
    display: grid;
    gap: 1rem;
    border-top: 1px solid var(--line);
    padding-top: 1rem;
}

.ll-settings-block:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.ll-settings-block h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 850;
}

.ll-admin-form .ll-form-actions {
    border-top: 1px solid var(--line);
    padding-top: 1rem;
}

.ll-login-page {
    min-height: calc(100vh - 78px);
    display: grid;
    place-items: center;
    padding: 2.5rem 0 4rem;
}

.ll-login-panel {
    width: min(100%, 430px);
    border: 1px solid var(--line);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(16,23,34,.96), rgba(21,31,46,.96));
    box-shadow: 0 24px 80px rgba(0,0,0,.34);
    padding: 1.4rem;
}

.ll-login-heading {
    margin-bottom: 1.2rem;
}

.ll-login-heading h1 {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 800;
}

.ll-login-heading p {
    margin: .45rem 0 0;
    color: var(--muted);
}

.ll-login-form {
    gap: .85rem;
}

.ll-login-form .ll-field input {
    min-height: 40px;
}

.ll-login-submit {
    justify-content: center;
    text-align: center;
}

.ll-environments-table td {
    vertical-align: middle;
}

.ll-environment-logo {
    width: 54px;
    height: 54px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.04);
    object-fit: contain;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ll-environment-logo.placeholder,
.ll-environment-logo-preview-placeholder {
    color: var(--ok);
    font-weight: 950;
    letter-spacing: .08em;
    background: rgba(53,242,163,.08);
    border-color: rgba(53,242,163,.28);
}

.ll-environment-edit-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 180px;
    gap: 1rem;
    align-items: start;
}

.ll-environment-logo-preview {
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px;
    background: rgba(255,255,255,.03);
    padding: 1rem;
    display: grid;
    gap: .75rem;
    justify-items: center;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ll-environment-logo-preview img,
.ll-environment-logo-preview-placeholder {
    width: 112px;
    height: 112px;
    border-radius: 8px;
    object-fit: contain;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ll-inline-management-form {
    grid-template-columns: minmax(260px, 1fr) auto;
    align-items: end;
    margin-bottom: 1rem;
}

.ll-user-access-form,
.ll-access-row-form {
    margin-bottom: 1rem;
}

.ll-permission-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(130px, 1fr));
    gap: .55rem;
    align-items: center;
}

.ll-user-access-table td {
    vertical-align: top;
}

@media (max-width: 1050px) {
    .ll-permission-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .ll-environment-edit-grid,
    .ll-inline-management-form,
    .ll-permission-grid {
        grid-template-columns: 1fr;
    }
}

.ll-field span[data-valmsg-for],
.ll-validation-summary {
    color: var(--bad);
    font-size: .82rem;
}

.ll-check-field {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
}

.ll-check-field input {
    width: 18px;
    height: 18px;
    accent-color: var(--ok);
}

.ll-success-box {
    border-color: rgba(53,242,163,.28);
    background: rgba(53,242,163,.055);
}

.ll-hero-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .7rem;
}

.ll-environment-context {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 8px;
    background: rgba(255,255,255,.04);
    padding: .55rem .75rem;
}

.ll-environment-context.compact {
    padding: .4rem .55rem;
}

.ll-environment-context img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    border-radius: 8px;
    background: rgba(255,255,255,.04);
}

.ll-environment-context span {
    display: block;
    color: var(--muted);
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .10em;
    text-transform: uppercase;
}

.ll-environment-context strong {
    display: block;
    color: var(--text);
    font-size: .95rem;
    line-height: 1.15;
}

.ll-user-environment-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

.ll-user-environment-option {
    display: grid;
    grid-template-columns: auto 52px minmax(0, 1fr);
    align-items: center;
    gap: .75rem;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px;
    background: rgba(255,255,255,.03);
    padding: .85rem;
}

.ll-user-environment-option input {
    width: 18px;
    height: 18px;
    accent-color: var(--ok);
}

.ll-user-environment-logo,
.ll-user-environment-logo img {
    width: 52px;
    height: 52px;
    border-radius: 8px;
}

.ll-user-environment-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.04);
    color: var(--ok);
    font-weight: 950;
}

.ll-user-environment-logo img {
    object-fit: contain;
}

.ll-user-environment-option strong,
.ll-user-environment-option small {
    display: block;
}

.ll-user-environment-option small {
    margin-top: .25rem;
    color: var(--muted);
}

.ll-pagination {
    display: flex;
    justify-content: flex-end;
    gap: .65rem;
    margin-top: 1rem;
}

.ll-device-summary-table td {
    vertical-align: top;
}

.ll-device-detail-row td {
    padding: 0 0 1rem;
    white-space: normal;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.ll-device-detail-panel {
    margin: 0 .7rem;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 8px;
    background: rgba(255,255,255,.035);
    padding: 1rem;
}

.ll-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.ll-detail-header h3 {
    margin: .15rem 0;
    font-size: 1.35rem;
}

.ll-detail-header p {
    margin: 0;
    color: var(--muted);
}

.ll-detail-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
}

.ll-detail-grid div {
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px;
    background: rgba(7,10,15,.28);
    padding: .8rem;
    min-width: 0;
}

.ll-detail-grid span {
    display: block;
    color: var(--muted);
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .09em;
    text-transform: uppercase;
    margin-bottom: .35rem;
}

.ll-detail-grid strong {
    display: block;
    overflow-wrap: anywhere;
}

.platform-log-filters {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.platform-log-table td {
    vertical-align: top;
}

.ll-message-cell {
    min-width: 260px;
    max-width: 520px;
    white-space: normal !important;
}

.ll-log-details {
    min-width: 180px;
}

.ll-log-details summary {
    color: var(--ok);
    cursor: pointer;
    font-weight: 850;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: .76rem;
}

.ll-log-details pre {
    max-width: 520px;
    max-height: 260px;
    overflow: auto;
    margin: .7rem 0 0;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px;
    background: rgba(7,10,15,.45);
    color: var(--text);
    padding: .75rem;
    white-space: pre-wrap;
}

@media (max-width: 720px) {
    .ll-form-grid {
        grid-template-columns: 1fr;
    }

    .ll-actions-inline {
        justify-content: flex-start;
    }
}

@media (max-width: 1050px) {
    .ll-detail-grid,
    .platform-log-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .ll-detail-header {
        flex-direction: column;
    }

    .ll-detail-grid,
    .platform-log-filters {
        grid-template-columns: 1fr;
    }

    .ll-hero-side {
        align-items: flex-start;
    }

    .ll-user-environment-grid {
        grid-template-columns: 1fr;
    }
}

/* ─────────────────────────────────────────────
   LED Labs public home
   ───────────────────────────────────────────── */

.home-hero {
    min-height: calc(100vh - 90px);
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);
    gap: 3rem;
    align-items: center;
    padding: 4rem 0 5rem;
}

.home-hero-content h1 {
    max-width: 900px;
    margin: 0;
    font-size: clamp(3rem, 7vw, 6.3rem);
    line-height: .92;
    letter-spacing: -.075em;
    font-weight: 780;
}

.home-hero-content p {
    max-width: 720px;
    margin: 1.5rem 0 0;
    color: var(--muted);
    font-size: clamp(1.05rem, 1.7vw, 1.35rem);
    line-height: 1.6;
}

.home-actions {
    display: flex;
    gap: .8rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}

.home-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: .72rem 1.05rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    text-decoration: none;
    font-weight: 850;
    letter-spacing: .04em;
    transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

    .home-btn:hover {
        transform: translateY(-1px);
    }

    .home-btn.primary {
        color: #06100c;
        background: var(--ok);
        border-color: rgba(53,242,163,.65);
        box-shadow: 0 0 30px rgba(53,242,163,.14);
    }

    .home-btn.secondary {
        color: var(--text);
        background: rgba(255,255,255,.055);
    }

        .home-btn.secondary:hover {
            border-color: rgba(53,242,163,.35);
            background: rgba(53,242,163,.08);
        }

.home-hero-visual {
    position: relative;
    min-height: 500px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 34px;
    background: radial-gradient(circle at 30% 20%, rgba(53,242,163,.16), transparent 22rem), radial-gradient(circle at 80% 70%, rgba(97,168,255,.15), transparent 18rem), linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
    box-shadow: 0 30px 100px rgba(0,0,0,.34);
    overflow: hidden;
}

    .home-hero-visual::before {
        content: "";
        position: absolute;
        inset: 12%;
        border: 1px solid rgba(255,255,255,.08);
        border-radius: 999px;
        transform: rotate(-18deg);
    }

    .home-hero-visual::after {
        content: "";
        position: absolute;
        inset: 23%;
        border: 1px dashed rgba(255,255,255,.10);
        border-radius: 999px;
        transform: rotate(20deg);
    }

.home-orbit-card {
    position: absolute;
    z-index: 1;
    width: min(78%, 330px);
    padding: 1.2rem;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(16,23,34,.78);
    backdrop-filter: blur(12px);
    box-shadow: 0 24px 80px rgba(0,0,0,.30);
}

    .home-orbit-card.main {
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        border-color: rgba(53,242,163,.28);
    }

    .home-orbit-card:not(.main):nth-child(2) {
        left: 8%;
        top: 12%;
    }

    .home-orbit-card:not(.main):nth-child(3) {
        right: 8%;
        bottom: 12%;
    }

    .home-orbit-card span {
        display: block;
        color: var(--ok);
        font-size: .72rem;
        font-weight: 850;
        letter-spacing: .12em;
        text-transform: uppercase;
        margin-bottom: .55rem;
    }

    .home-orbit-card strong {
        display: block;
        font-size: 1.3rem;
        letter-spacing: -.03em;
    }

    .home-orbit-card small {
        display: block;
        margin-top: .45rem;
        color: var(--muted);
    }

.home-section {
    padding: 5rem 0;
    border-top: 1px solid rgba(255,255,255,.06);
}

.home-section-head {
    max-width: 820px;
    margin-bottom: 1.6rem;
}

    .home-section-head h2,
    .home-split h2,
    .home-about-card h2,
    .home-final h2 {
        margin: 0 0 1rem;
        font-size: clamp(2rem, 4vw, 3.8rem);
        line-height: 1.08;
        letter-spacing: -.055em;
    }

    .home-section-head p,
    .home-split p,
    .home-about-card p,
    .home-final p {
        margin-top: 0;
        color: var(--muted);
        font-size: 1.05rem;
        line-height: 1.7;
    }

.home-card-grid {
    display: grid;
    gap: 1rem;
}

    .home-card-grid.two {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-card-grid.three {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .home-card-grid.four {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

.home-card,
.home-product-card,
.home-about-card,
.home-dashboard-preview {
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(16,23,34,.92), rgba(21,31,46,.86));
    box-shadow: 0 24px 80px rgba(0,0,0,.26);
}

.home-card {
    padding: 1.35rem;
}

    .home-card h3,
    .home-product-card h3 {
        margin: 0 0 .65rem;
        font-size: 1.25rem;
        letter-spacing: -.025em;
    }

    .home-card p,
    .home-product-card p {
        margin: 0;
        color: var(--muted);
        line-height: 1.55;
    }

    .home-card.compact {
        min-height: 170px;
    }

.home-product-card {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 1.2rem;
    padding: 1rem;
    align-items: center;
}

.home-product-visual {
    min-height: 170px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.08);
    display: flex;
    align-items: end;
    padding: 1rem;
    overflow: hidden;
    position: relative;
}

    .home-product-visual::before {
        content: "";
        position: absolute;
        inset: 18%;
        border-radius: 24px;
        border: 1px solid rgba(255,255,255,.12);
        transform: rotate(-12deg);
    }

    .home-product-visual.alarmator {
        background: radial-gradient(circle at 30% 20%, rgba(53,242,163,.22), transparent 10rem), linear-gradient(135deg, rgba(53,242,163,.10), rgba(255,255,255,.025));
    }

    .home-product-visual.vc {
        background: radial-gradient(circle at 30% 20%, rgba(255,209,102,.20), transparent 10rem), linear-gradient(135deg, rgba(97,168,255,.10), rgba(255,255,255,.025));
    }

    .home-product-visual span {
        position: relative;
        z-index: 1;
        font-weight: 900;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: rgba(234,242,255,.88);
    }

.home-split {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(320px, 1.05fr);
    gap: 2rem;
    align-items: center;
}

.home-dashboard-preview {
    padding: 1.2rem;
    min-height: 330px;
}

.preview-top {
    display: flex;
    justify-content: space-between;
    color: var(--muted);
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: .78rem;
}

.preview-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .8rem;
    margin-top: 2rem;
}

    .preview-metrics div {
        border: 1px solid rgba(255,255,255,.08);
        border-radius: 20px;
        padding: 1rem;
        background: rgba(255,255,255,.035);
    }

    .preview-metrics strong {
        display: block;
        font-size: clamp(2rem, 4vw, 3.4rem);
        line-height: .9;
        letter-spacing: -.06em;
    }

    .preview-metrics span {
        display: block;
        color: var(--muted);
        margin-top: .45rem;
    }

.preview-line {
    height: 90px;
    margin: 1.6rem 0;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(90deg, transparent 0 8%, rgba(53,242,163,.7) 8% 9%, transparent 9% 24%, rgba(97,168,255,.7) 24% 25%, transparent 25% 42%, rgba(255,209,102,.7) 42% 43%, transparent 43%), repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 42px), rgba(255,255,255,.025);
}

.preview-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

    .preview-tags span {
        border: 1px solid rgba(53,242,163,.26);
        background: rgba(53,242,163,.07);
        color: var(--ok);
        border-radius: 999px;
        padding: .35rem .65rem;
        font-size: .72rem;
        font-weight: 850;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

.home-about-card {
    display: grid;
    grid-template-columns: minmax(220px, .6fr) minmax(0, 1fr);
    gap: 2rem;
    padding: 1.5rem;
}

.home-final {
    text-align: center;
    padding-bottom: 7rem;
}

    .home-final p {
        margin-left: auto;
        margin-right: auto;
        max-width: 640px;
    }

/* Smooth anchor navigation */
html {
    scroll-behavior: smooth;
}

@media (max-width: 1050px) {
    .home-hero,
    .home-split,
    .home-about-card {
        grid-template-columns: 1fr;
    }

    .home-hero-visual {
        min-height: 430px;
    }

    .home-card-grid.four,
    .home-card-grid.three {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .home-hero {
        padding-top: 2.5rem;
    }

    .home-card-grid.two,
    .home-card-grid.three,
    .home-card-grid.four {
        grid-template-columns: 1fr;
    }

    .home-product-card {
        grid-template-columns: 1fr;
    }

    .home-hero-visual {
        min-height: 390px;
    }

    .home-orbit-card {
        width: 82%;
    }

        .home-orbit-card:not(.main):nth-child(2) {
            left: 6%;
            top: 8%;
        }

        .home-orbit-card:not(.main):nth-child(3) {
            right: 6%;
            bottom: 8%;
        }

    .preview-metrics {
        grid-template-columns: 1fr;
    }
}

.ll-topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid var(--line);
    background: rgba(7, 10, 15, .82);
    backdrop-filter: blur(14px);
}

.ll-topnav {
    max-width: 1180px;
    margin: 0 auto;
    padding: .8rem 1rem;
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

.ll-brand {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    color: var(--text);
    text-decoration: none;
    font-weight: 900;
    letter-spacing: -.02em;
    white-space: nowrap;
}

.ll-logo-slot {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(53,242,163,.10);
    border: 1px solid rgba(53,242,163,.30);
    color: var(--ok);
    font-size: .78rem;
    font-weight: 950;
    letter-spacing: .05em;
    box-shadow: 0 0 24px rgba(53,242,163,.08);
}

.ll-nav-links {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .85rem;
}

    .ll-nav-links a {
        color: var(--muted);
        text-decoration: none;
        font-size: .9rem;
        font-weight: 750;
    }

        .ll-nav-links a:hover {
            color: var(--text);
        }

.ll-top-actions {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-left: .2rem;
}

.ll-user-chip {
    display: inline-grid;
    gap: .1rem;
    max-width: 220px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255,255,255,.04);
    padding: .42rem .65rem;
}

.ll-user-chip strong,
.ll-user-chip span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ll-user-chip strong {
    color: var(--text);
    font-size: .82rem;
    font-weight: 850;
}

.ll-user-chip span {
    color: var(--ok);
    font-size: .68rem;
    font-weight: 850;
    text-transform: uppercase;
}

.ll-logout-btn {
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255,255,255,.045);
    padding: .5rem .75rem;
    text-decoration: none;
    font-weight: 850;
}

.ll-logout-btn:hover {
    color: var(--bad);
    border-color: rgba(255,92,122,.35);
    background: rgba(255,92,122,.08);
}

.ll-portal-btn {
    color: #06100c;
    background: var(--ok);
    border: 1px solid rgba(53,242,163,.65);
    border-radius: 999px;
    padding: .5rem .85rem;
    text-decoration: none;
    font-weight: 900;
    box-shadow: 0 0 24px rgba(53,242,163,.12);
}

@media (max-width: 760px) {
    .ll-topnav {
        flex-wrap: wrap;
    }

    .ll-nav-links {
        order: 3;
        width: 100%;
        justify-content: flex-start;
        overflow-x: auto;
        padding-top: .3rem;
    }

    .ll-top-actions {
        margin-left: auto;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .ll-user-chip {
        max-width: 180px;
    }
}

.home-product-note {
    margin-top: 1rem;
    border: 1px solid rgba(53,242,163,.18);
    border-radius: 22px;
    background: rgba(53,242,163,.045);
    padding: 1rem 1.15rem;
}

    .home-product-note span {
        display: block;
        color: var(--ok);
        font-size: .72rem;
        font-weight: 900;
        letter-spacing: .12em;
        text-transform: uppercase;
        margin-bottom: .35rem;
    }

    .home-product-note p {
        margin: 0;
        color: var(--muted);
        line-height: 1.55;
    }

.home-legacy-strip {
    margin-top: 1rem;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 26px;
    background: rgba(255,255,255,.025);
    padding: 1.2rem;
}

.home-legacy-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 1rem;
    margin-bottom: 1rem;
}

    .home-legacy-head span {
        color: var(--ok);
        font-size: .72rem;
        font-weight: 900;
        letter-spacing: .12em;
        text-transform: uppercase;
    }

    .home-legacy-head p {
        margin: 0;
        color: var(--muted);
        font-size: .92rem;
    }

.home-legacy-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .8rem;
}

    .home-legacy-list div {
        border: 1px solid rgba(255,255,255,.07);
        border-radius: 18px;
        padding: .9rem;
        background: rgba(255,255,255,.025);
    }

    .home-legacy-list strong {
        display: block;
        margin-bottom: .35rem;
        color: var(--text);
        font-size: .95rem;
    }

    .home-legacy-list span {
        color: var(--muted);
        font-size: .86rem;
        line-height: 1.45;
    }

@media (max-width: 950px) {
    .home-legacy-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .home-legacy-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .home-legacy-list {
        grid-template-columns: 1fr;
    }
}

/* ─────────────────────────────────────────────
   LED Labs public home · image slots
   ───────────────────────────────────────────── */

.home-image-slot {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 28px;
    background:
        radial-gradient(circle at 20% 18%, rgba(53,242,163,.12), transparent 18rem),
        radial-gradient(circle at 82% 74%, rgba(97,168,255,.11), transparent 20rem),
        linear-gradient(180deg, rgba(16,23,34,.72), rgba(7,10,15,.48));
    box-shadow: 0 30px 100px rgba(0,0,0,.32);
}

.home-image-slot img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: initial;
}

.ll-device-admin-block {
    margin: 1rem 0;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px;
    background: rgba(255,255,255,.035);
    padding: 1rem;
}

.ll-device-admin-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.ll-device-admin-head span,
.ll-security-summary span {
    display: block;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .09em;
    text-transform: uppercase;
    margin-bottom: .35rem;
}

.ll-device-admin-head p {
    margin: 0;
    color: var(--text);
    white-space: normal;
    line-height: 1.55;
}

.ll-admin-modal {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(0,0,0,.68);
}

.ll-admin-modal.hidden {
    display: none;
}

.ll-admin-modal-card {
    width: min(680px, 100%);
    max-height: min(820px, calc(100vh - 2rem));
    overflow: auto;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 8px;
    background: linear-gradient(180deg, var(--panel), var(--panel2));
    box-shadow: 0 30px 110px rgba(0,0,0,.55);
    padding: 1.2rem;
}

.ll-admin-modal-card.wide {
    width: min(980px, 100%);
}

.ll-admin-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.ll-admin-modal-head span {
    color: var(--ok);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.ll-admin-modal-head h4 {
    margin: .25rem 0 0;
    color: var(--text);
}

.ll-modal-close {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 8px;
    background: rgba(255,255,255,.04);
    color: var(--text);
    font-weight: 900;
}

.ll-logbook-form {
    margin-bottom: 1rem;
}

.ll-wrap-cell {
    white-space: normal !important;
    min-width: 320px;
    line-height: 1.5;
}

.ll-security-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .8rem;
    margin-bottom: 1rem;
}

.ll-security-summary div {
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px;
    background: rgba(255,255,255,.035);
    padding: .85rem;
}

.ll-security-summary strong {
    display: block;
    overflow-wrap: anywhere;
}

.ll-warning-box {
    border: 1px solid rgba(255,209,102,.28);
    border-radius: 8px;
    background: rgba(255,209,102,.08);
    color: var(--warn);
    padding: .85rem;
    line-height: 1.45;
}

@media (max-width: 720px) {
    .ll-device-admin-head,
    .ll-admin-modal-head {
        flex-direction: column;
    }

    .ll-security-summary {
        grid-template-columns: 1fr;
    }
}

.home-hero-image-slot {
    min-height: 0;
    height: auto;
    align-self: center;
    border-radius: 34px;
}

.home-image-slot::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255,255,255,.05), transparent 28%),
        radial-gradient(circle at 50% 100%, rgba(53,242,163,.10), transparent 34rem);
}



.home-hero-image-slot::before {
    display: none;
}

.home-product-showcase {
    display: grid;
    gap: 1.4rem;
}

.home-product-row {
    display: grid;
    grid-template-columns: minmax(320px, 1.05fr) minmax(0, .95fr);
    gap: 2rem;
    align-items: center;
}

.home-product-row.reverse {
    grid-template-columns: minmax(0, .95fr) minmax(320px, 1.05fr);
}

.home-product-row.reverse .home-product-image {
    order: 2;
}

.home-product-row.reverse .home-product-copy {
    order: 1;
}

.home-product-image {
    min-height: 340px;
}

.home-product-image.alarmator {
    background:
        radial-gradient(circle at 32% 22%, rgba(53,242,163,.16), transparent 18rem),
        radial-gradient(circle at 82% 78%, rgba(97,168,255,.10), transparent 18rem),
        linear-gradient(180deg, rgba(16,23,34,.82), rgba(7,10,15,.50));
}

.home-product-image.vc {
    background:
        radial-gradient(circle at 30% 20%, rgba(255,209,102,.12), transparent 16rem),
        radial-gradient(circle at 82% 74%, rgba(97,168,255,.14), transparent 18rem),
        linear-gradient(180deg, rgba(16,23,34,.82), rgba(7,10,15,.50));
}

.home-product-copy {
    display: grid;
    align-content: center;
}

.home-product-copy h3 {
    margin: 0 0 .85rem;
    font-size: clamp(1.7rem, 3vw, 3rem);
    line-height: 1.05;
    letter-spacing: -.045em;
}

.home-product-copy p {
    margin: 0;
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1.7;
}

.home-image-slot img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: initial;
}

.home-llscada-image {
    min-height: 0;
    height: auto;
    align-self: start;
    border-radius: 28px;
}

.home-engineering-visual {
    margin: -0.2rem 0 1.5rem;
}

.home-pcb-image {
    min-height: 360px;
    border-radius: 30px;
}

@media (max-width: 1050px) {
    .home-product-row,
    .home-product-row.reverse {
        grid-template-columns: 1fr;
    }

    .home-product-row.reverse .home-product-image,
    .home-product-row.reverse .home-product-copy {
        order: initial;
    }

    .home-product-image,
    .home-pcb-image {
        min-height: 300px;
    }
}

@media (max-width: 720px) {
    .home-hero-image-slot {
        min-height: 390px;
    }

	.home-product-image,
	.home-pcb-image {
		min-height: 260px;
		border-radius: 22px;
	}

	.home-llscada-image {
		min-height: 0;
		border-radius: 22px;
	}
}

@media (max-width: 720px) {
    .ll-summary-inline-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .ll-summary-inline-actions input {
        width: 100%;
        max-width: 8rem;
    }

    .ll-relay-menu {
        width: 100%;
    }
}