:root {
    --bg: #f5f7f9;
    --surface: #ffffff;
    --surface-soft: #f8fafb;
    --border: #dfe5eb;
    --border-soft: #edf1f4;

    --text: #17202a;
    --muted: #687581;
    --muted-strong: #56626d;

    --sidebar: #141c24;
    --sidebar-soft: #1c2732;
    --sidebar-text: #e7edf2;

    --success: #176b3a;
    --success-soft: #e5f5ea;

    --warning: #765b00;
    --warning-soft: #fff4d6;

    --danger: #8e2424;
    --danger-soft: #f9e6e6;

    --info: #284c78;
    --info-soft: #e8eef8;

    --violet: #584278;
    --violet-soft: #ece8f8;

    --sidebar-width: 236px;
    --radius: 12px;

    --shadow:
        0 1px 2px
        rgba(23,32,42,.04);
}


* {
    box-sizing: border-box;
}


html {
    min-width: 320px;
}


body {
    margin: 0;
    min-height: 100vh;

    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background: var(--bg);
    color: var(--text);
    line-height: 1.45;
}


body.nav-locked {
    overflow: hidden;
}


a {
    color: inherit;
}


button,
input,
select {
    font: inherit;
}


button {
    cursor: pointer;
}


button:disabled {
    cursor: not-allowed;
    opacity: .55;
}


.app-shell {
    min-height: 100vh;
}


.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 40;

    width: var(--sidebar-width);

    display: flex;
    flex-direction: column;

    background: var(--sidebar);
    color: var(--sidebar-text);

    border-right:
        1px solid
        rgba(255,255,255,.06);
}


.brand {
    display: flex;
    gap: 11px;
    align-items: center;

    min-height: 72px;

    padding: 16px 18px;

    text-decoration: none;

    border-bottom:
        1px solid
        rgba(255,255,255,.08);
}


.brand-mark {
    display: grid;
    place-items: center;

    width: 39px;
    height: 39px;

    border-radius: 10px;

    background: #eef4f8;
    color: #18232e;

    font-size: 11px;
    font-weight: 850;
    letter-spacing: .06em;
}


.brand-copy {
    display: grid;
    line-height: 1.1;
}


.brand-copy strong {
    font-size: 13px;
    letter-spacing: .08em;
}


.brand-copy small {
    margin-top: 5px;
    color: #9eabb6;
    font-size: 12px;
}


.sidebar-nav {
    padding: 18px 12px;
}


.nav-label {
    padding: 0 10px 8px;

    color: #7f8d99;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .12em;
    text-transform: uppercase;
}


.nav-item {
    display: flex;
    align-items: center;
    gap: 11px;

    min-height: 42px;

    margin: 3px 0;
    padding: 8px 10px;

    border-radius: 9px;

    color: #c7d1d9;

    text-decoration: none;
    font-size: 14px;
    font-weight: 650;
}


.nav-item:hover {
    background:
        rgba(255,255,255,.06);

    color: white;
}


.nav-item.active {
    background: var(--sidebar-soft);
    color: white;
}


.nav-icon {
    display: grid;
    place-items: center;

    width: 25px;
    height: 25px;
    flex: 0 0 25px;

    border:
        1px solid
        rgba(255,255,255,.14);

    border-radius: 7px;

    color: #9eb0bd;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Consolas,
        monospace;

    font-size: 9px;
    font-weight: 800;
}


.nav-item.active .nav-icon {
    background: #eef4f8;
    border-color: #eef4f8;
    color: #17202a;
}


.sidebar-footer {
    margin-top: auto;

    display: flex;
    align-items: center;
    gap: 8px;

    padding: 16px 20px;

    border-top:
        1px solid
        rgba(255,255,255,.08);

    color: #91a0ac;
    font-size: 11px;
}


.status-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #5fc985;

    box-shadow:
        0 0 0 3px
        rgba(95,201,133,.12);
}


.sidebar-scrim {
    position: fixed;
    inset: 0;
    z-index: 35;

    width: 100%;
    height: 100%;

    padding: 0;
    border: 0;

    background:
        rgba(12,18,24,.48);
}


.sidebar-scrim[hidden] {
    display: none;
}


.app-column {
    min-height: 100vh;
    margin-left: var(--sidebar-width);
}


.topbar {
    position: sticky;
    top: 0;
    z-index: 30;

    min-height: 72px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 20px;

    padding: 12px 28px;

    background:
        rgba(255,255,255,.96);

    border-bottom:
        1px solid
        var(--border);

    backdrop-filter: blur(8px);
}


.topbar-left,
.topbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}


.topbar-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
}


.topbar-actions form {
    margin: 0;
}


.topbar-title {
    display: grid;
    min-width: 0;
    line-height: 1.15;
}


.topbar-title strong {
    font-size: 17px;
    font-weight: 760;
}


.topbar-title small {
    margin-top: 5px;

    color: var(--muted);

    font-size: 12px;
}


.menu-toggle {
    display: none;

    width: 40px;
    height: 40px;

    padding: 9px;

    border:
        1px solid
        var(--border);

    border-radius: 9px;

    background: var(--surface);
}


.menu-toggle span {
    display: block;

    height: 2px;

    margin: 4px 0;

    border-radius: 4px;

    background: var(--text);
}


.user-chip {
    display: flex;
    align-items: center;
    gap: 8px;

    min-height: 38px;

    padding:
        4px 10px
        4px 5px;

    border:
        1px solid
        var(--border);

    border-radius: 999px;

    background:
        var(--surface-soft);
}


.user-avatar {
    display: grid;
    place-items: center;

    width: 28px;
    height: 28px;

    border-radius: 50%;

    background: #dfeaf1;
    color: #26465d;

    font-size: 12px;
    font-weight: 800;
}


.user-name {
    max-width: 160px;

    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;

    font-size: 12px;
    font-weight: 700;
}


.app-main {
    width: min(100%,1500px);

    margin: 0 auto;

    padding: 28px;
}


section,
.card {
    background: var(--surface);

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius);

    box-shadow:
        var(--shadow);
}


section {
    padding: 20px;
    margin-bottom: 22px;
}


section h2,
h2 {
    margin-top: 0;
}


section h2 {
    margin-bottom: 14px;
    font-size: 17px;
}


.grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(190px,1fr)
        );

    gap: 14px;

    margin-bottom: 22px;
}


.card {
    padding: 17px;
    min-width: 0;
}


.card h3 {
    margin: 0 0 8px;

    color: var(--muted-strong);

    font-size: 11px;
    font-weight: 800;

    letter-spacing: .045em;
    text-transform: uppercase;
}


.value {
    font-size: 20px;
    font-weight: 760;

    overflow-wrap: anywhere;
}


.ok {
    color: var(--success);
}


.bad {
    color: var(--danger);
}


.note {
    color: var(--muted);
    font-size: 12px;
}


.mono {
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Consolas,
        monospace;
}


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


th,
td {
    padding: 10px 9px;

    border-bottom:
        1px solid
        var(--border-soft);

    text-align: left;

    font-size: 13px;
    vertical-align: top;
}


th {
    color: #63707b;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .04em;

    text-transform: uppercase;
    white-space: nowrap;
}


tbody tr:last-child td {
    border-bottom: 0;
}


tbody tr:hover {
    background: #fbfcfd;
}


.badge {
    display: inline-flex;
    align-items: center;

    min-height: 24px;

    padding: 3px 8px;

    border-radius: 999px;

    background: #edf0f2;
    color: #4d5964;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .02em;
}


.badge.active,
.badge.online,
.badge.pass,
.badge.verified {
    background: var(--success-soft);
    color: var(--success);
}


.badge.stale,
.badge.partial {
    background: var(--warning-soft);
    color: var(--warning);
}


.badge.offline,
.badge.failed {
    background: var(--danger-soft);
    color: var(--danger);
}


.badge.session {
    background: var(--info-soft);
    color: var(--info);
}


.badge.refused {
    background: var(--violet-soft);
    color: var(--violet);
}


.btn,
button.btn,
.btn-light,
.btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 36px;

    padding: 8px 12px;

    border:
        1px solid
        transparent;

    border-radius: 8px;

    text-decoration: none;

    font-size: 12px;
    font-weight: 720;

    line-height: 1.15;
}


.btn {
    background: var(--sidebar);
    color: white;
}


.btn:hover {
    background: #202d38;
}


.btn-light,
.btn-quiet {
    background: #eef1f3;
    color: var(--text);

    border-color: #e0e5e9;
}


.btn-light:hover,
.btn-quiet:hover {
    background: #e5eaed;
}


.btn-danger {
    background: var(--danger-soft);
    color: var(--danger);

    border-color: #efd2d2;
}


.inline {
    display: inline-block;
    margin: 2px 5px 2px 0;
}


.actions {
    white-space: nowrap;
}


.flash {
    padding: 12px 14px;

    margin-bottom: 20px;

    border-radius: 9px;

    font-size: 13px;
}


.flash.success {
    background: #e7f6ec;
    border: 1px solid #a8d8b8;
}


.flash.error {
    background: #fff0f0;
    border: 1px solid #e1aaaa;
}


.empty,
.telemetry-empty {
    padding: 20px;

    background:
        var(--surface-soft);

    border:
        1px dashed
        #cbd4dc;

    border-radius: 9px;

    color: var(--muted);
    font-size: 13px;
}


.telemetry-grid {
    margin-top: 18px;
    margin-bottom: 20px;
}


.audit {
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Consolas,
        monospace;

    font-size: 11px;
}


.upload {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}


.upload input[type=file] {
    flex: 1;

    min-width: 260px;

    padding: 9px 10px;

    border:
        1px solid
        #ccd4dc;

    border-radius: 8px;

    background: white;
}


.upload-progress {
    margin-top: 14px;

    padding: 15px;

    border:
        1px solid
        var(--border);

    border-radius: 10px;

    background:
        var(--surface-soft);
}


.upload-progress progress {
    display: block;

    width: 100%;
    height: 15px;

    margin: 10px 0;
}


.progress-title {
    margin-bottom: 4px;
    font-weight: 750;
}


.progress-actions {
    margin-top: 10px;
}


.filters {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(180px,1fr)
        );

    gap: 11px;

    align-items: end;
}


.filters label {
    display: block;

    margin-bottom: 5px;

    color: #63707b;

    font-size: 11px;
    font-weight: 750;
}


.filters input,
.filters select {
    width: 100%;

    padding: 9px;

    border:
        1px solid
        #ccd4dc;

    border-radius: 7px;

    background: white;
}


.filter-actions,
.export-actions,
.actions {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    align-items: center;
}


.export-actions {
    margin-top: 14px;
}


.metrics {
    white-space: nowrap;
}


.pager {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 10px;

    margin-top: 17px;
}


.memory-bar {
    width: 100%;
    height: 11px;

    margin-top: 8px;

    overflow: hidden;

    border-radius: 999px;

    background: #e8ecef;
}


.memory-fill {
    height: 100%;

    border-radius: inherit;

    background: #596675;
}


.server-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;

    display: grid;
    place-items: center;

    padding: 20px;

    background:
        rgba(23,32,42,.56);
}


.server-overlay[hidden] {
    display: none;
}


.server-progress-card {
    width: min(470px,100%);

    padding: 26px;

    border-radius: 14px;

    background: white;

    box-shadow:
        0 20px 60px
        rgba(0,0,0,.25);

    text-align: center;
}


.progress-spinner {
    width: 42px;
    height: 42px;

    margin: 0 auto 16px;

    border:
        4px solid
        #dfe5eb;

    border-top-color:
        var(--sidebar);

    border-radius: 50%;

    animation:
        pxe-spin
        .8s linear infinite;
}


@keyframes pxe-spin {
    to {
        transform:
            rotate(360deg);
    }
}


@media (max-width: 900px) {

    .sidebar {
        transform:
            translateX(-100%);

        transition:
            transform
            .18s ease;

        box-shadow:
            10px 0 30px
            rgba(0,0,0,.14);
    }


    .app-shell.nav-open
    .sidebar {
        transform:
            translateX(0);
    }


    .app-column {
        margin-left: 0;
    }


    .menu-toggle {
        display: block;
    }


    .topbar {
        padding: 11px 16px;
    }


    .app-main {
        padding:
            18px 16px
            28px;
    }
}


@media (max-width: 700px) {

    .topbar {
        min-height: 64px;
    }


    .topbar-title small {
        display: none;
    }


    .user-name {
        display: none;
    }


    .user-chip {
        padding-right: 5px;
    }


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


    section {
        padding: 16px;
        margin-bottom: 16px;
    }


    table {
        display: block;
        overflow-x: auto;
    }


    .pager {
        align-items: stretch;
        flex-direction: column;
    }


    .pager .btn,
    .pager .btn-light {
        width: 100%;
    }


    .upload {
        align-items: stretch;
        flex-direction: column;
    }


    .upload
    input[type=file] {
        width: 100%;
        min-width: 0;
    }


    .upload .btn {
        width: 100%;
    }


    .actions {
        white-space: normal;
    }
}


@media (max-width: 430px) {

    .topbar-actions {
        gap: 6px;
    }


    .btn,
    button.btn,
    .btn-light,
    .btn-danger {
        min-height: 34px;

        padding:
            7px 10px;
    }


    .app-main {
        padding-left: 12px;
        padding-right: 12px;
    }
}


/* PXELAB_UI_1B_MODULES */

.page-intro {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    gap: 24px;

    margin-bottom: 24px;
}

.page-intro h1 {
    margin: 2px 0 7px;

    font-size: 25px;
    line-height: 1.2;
}

.page-intro p {
    max-width: 720px;

    margin: 0;

    color: var(--muted);

    font-size: 13px;
}

.eyebrow {
    color: var(--muted-strong);

    font-size: 10px;
    font-weight: 850;

    letter-spacing: .12em;
}

.page-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;

    gap: 7px;
}

.page-meta span {
    padding: 6px 9px;

    border:
        1px solid
        var(--border);

    border-radius: 999px;

    background: var(--surface);

    color: var(--muted-strong);

    font-size: 11px;
    font-weight: 720;
}

.summary-grid {
    margin-bottom: 24px;
}

.summary-card {
    min-height: 128px;

    display: flex;
    flex-direction: column;
}

.summary-card .value {
    font-size: 19px;
}

.summary-detail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 7px;

    margin-top: auto;
    padding-top: 13px;

    color: var(--muted);

    font-size: 11px;
}

.summary-detail a {
    color: var(--info);
    font-weight: 720;

    text-decoration: none;
}

.summary-detail a:hover {
    text-decoration: underline;
}

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    gap: 16px;

    margin-bottom: 16px;
}

.section-head h2 {
    margin: 0 0 4px;
}

.section-head p {
    margin: 0;

    color: var(--muted);

    font-size: 12px;
}

.module-grid {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0,1fr)
        );

    gap: 12px;
}

.module-card {
    min-height: 132px;

    display: flex;
    flex-direction: column;

    padding: 16px;

    border:
        1px solid
        var(--border);

    border-radius: 10px;

    background:
        var(--surface-soft);

    text-decoration: none;

    transition:
        border-color .15s ease,
        transform .15s ease,
        background .15s ease;
}

.module-card:hover {
    border-color: #b9c4cd;

    background: white;

    transform:
        translateY(-1px);
}

.module-card strong {
    margin-top: 14px;

    font-size: 14px;
}

.module-card small {
    margin-top: 5px;

    color: var(--muted);

    font-size: 11px;

    line-height: 1.4;
}

.module-code {
    display: grid;
    place-items: center;

    width: 34px;
    height: 28px;

    border-radius: 7px;

    background: #e8edf1;

    color: #43515d;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Consolas,
        monospace;

    font-size: 9px;
    font-weight: 850;

    letter-spacing: .04em;
}

.action-note {
    display: inline-flex;
    align-items: center;

    min-height: 32px;

    padding: 4px 8px;

    color: var(--muted);

    font-size: 11px;
}

.badge.ready {
    background: var(--info-soft);
    color: var(--info);
}

.badge.validated {
    background: var(--success-soft);
    color: var(--success);
}

.badge.invalid {
    background: var(--danger-soft);
    color: var(--danger);
}

.badge.queued,
.badge.importing {
    background: var(--warning-soft);
    color: var(--warning);
}

.service-grid {
    margin-bottom: 24px;
}

.service-card {
    min-height: 92px;
}

.service-state {
    display: flex;
    align-items: center;

    gap: 8px;

    margin-top: 14px;

    font-size: 13px;
    font-weight: 800;
}

.service-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: currentColor;

    box-shadow:
        0 0 0 3px
        currentColor;

    opacity: .75;
}

.runtime-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );

    gap: 12px;
}

.runtime-item {
    display: flex;
    flex-direction: column;

    min-height: 112px;

    padding: 15px;

    border:
        1px solid
        var(--border-soft);

    border-radius: 9px;

    background:
        var(--surface-soft);
}

.runtime-item > span {
    color: var(--muted);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .04em;
    text-transform: uppercase;
}

.runtime-item strong {
    margin-top: 8px;

    font-size: 15px;

    overflow-wrap: anywhere;
}

.runtime-item small {
    margin-top: 7px;

    color: var(--muted);

    font-size: 11px;
}

.memory-progress {
    width: 100%;
    height: 10px;

    margin-top: 11px;
}


@media (max-width: 1050px) {

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


@media (max-width: 700px) {

    .page-intro {
        flex-direction: column;
    }

    .page-intro .btn {
        width: 100%;
    }

    .page-meta {
        justify-content: flex-start;
    }

    .section-head {
        flex-direction: column;
    }

    .section-head > a {
        width: 100%;
    }

    .module-grid,
    .runtime-grid {
        grid-template-columns:
            1fr;
    }

    .module-card {
        min-height: 112px;
    }
}


/* PXELAB_UI_1B1_POLISH */

.quick-actions-section {
    padding-bottom: 18px;
}

.quick-actions {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );

    gap: 10px;
}

.quick-action {
    display: flex;
    flex-direction: column;

    min-height: 82px;

    padding: 13px 14px;

    border:
        1px solid
        var(--border);

    border-radius: 9px;

    background:
        var(--surface-soft);

    text-decoration: none;

    transition:
        background .15s ease,
        border-color .15s ease;
}

.quick-action:hover {
    background: white;
    border-color: #b9c4cd;
}

.quick-action strong {
    font-size: 13px;
}

.quick-action small {
    margin-top: 5px;

    color: var(--muted);

    font-size: 11px;

    line-height: 1.35;
}

.section-count {
    display: inline-flex;
    align-items: center;

    min-height: 27px;

    padding: 4px 8px;

    border:
        1px solid
        var(--border);

    border-radius: 999px;

    background:
        var(--surface-soft);

    color: var(--muted-strong);

    font-size: 10px;
    font-weight: 800;
}

.btn-small {
    min-height: 32px !important;

    padding:
        6px 9px !important;

    font-size: 11px !important;
}

.client-summary-grid {
    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );
}

.client-status-stack {
    display: flex;
    flex-wrap: wrap;

    gap: 5px;

    margin-bottom: 5px;
}

.table-link {
    display: inline-block;

    margin-top: 4px;

    color: var(--info);

    font-size: 11px;
    font-weight: 720;

    text-decoration: none;
}

.table-link:hover {
    text-decoration: underline;
}

.result-summary-grid {
    grid-template-columns:
        repeat(
            4,
            minmax(0,1fr)
        );
}

.status-breakdown {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;

    margin-top: 14px;
}

.summary-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 16px;

    margin-top: 17px;
    padding-top: 15px;

    border-top:
        1px solid
        var(--border-soft);
}

.summary-footer .export-actions {
    margin-top: 0;
}

.performance-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );

    gap: 10px;
}

.performance-item {
    min-height: 88px;

    display: flex;
    flex-direction: column;

    justify-content: space-between;

    padding: 13px 14px;

    border:
        1px solid
        var(--border-soft);

    border-radius: 9px;

    background:
        var(--surface-soft);
}

.performance-item span {
    color: var(--muted);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .04em;
    text-transform: uppercase;
}

.performance-item strong {
    margin-top: 12px;

    font-size: 17px;
}

.filter-note {
    margin-bottom: 0;
}

.results-export-note {
    margin:
        -4px 2px
        20px;
}

.memory-progress {
    appearance: none;
    -webkit-appearance: none;

    overflow: hidden;

    border: 0;
    border-radius: 999px;

    background: #e6ebef;
}

.memory-progress::-webkit-progress-bar {
    background: #e6ebef;
}

.memory-progress::-webkit-progress-value {
    background: #596675;
    border-radius: 999px;
}

.memory-progress::-moz-progress-bar {
    background: #596675;
    border-radius: 999px;
}

.confirm-dialog {
    width: min(440px,calc(100% - 28px));

    padding: 0;

    border:
        1px solid
        var(--border);

    border-radius: 14px;

    background: white;

    color: var(--text);

    box-shadow:
        0 24px 70px
        rgba(0,0,0,.24);
}

.confirm-dialog::backdrop {
    background:
        rgba(15,22,29,.54);

    backdrop-filter:
        blur(2px);
}

.confirm-dialog-panel {
    padding: 22px;
}

.confirm-kicker {
    margin-bottom: 8px;

    color: var(--muted);

    font-size: 10px;
    font-weight: 850;

    letter-spacing: .1em;
}

.confirm-dialog h2 {
    margin: 0 0 9px;

    font-size: 19px;
}

.confirm-dialog p {
    margin:
        0 0
        20px;

    line-height: 1.55;
}

.confirm-actions {
    display: flex;
    justify-content: flex-end;

    gap: 8px;

    padding-top: 15px;

    border-top:
        1px solid
        var(--border-soft);
}


@media (max-width: 900px) {

    .quick-actions,
    .performance-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }

    .result-summary-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }
}


@media (max-width: 700px) {

    .quick-actions,
    .client-summary-grid,
    .result-summary-grid,
    .performance-grid {
        grid-template-columns:
            1fr;
    }

    .summary-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .summary-footer
    .export-actions {
        width: 100%;
    }

    .summary-footer
    .export-actions
    a {
        flex: 1;
    }

    .confirm-actions {
        flex-direction: column-reverse;
    }

    .confirm-actions button {
        width: 100%;
    }
}


/* PXELAB_UI_1C_JOBS */

.jobs-summary-grid {
    grid-template-columns:
        repeat(
            4,
            minmax(0,1fr)
        );
}


.job-live-note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 8px;

    margin:
        -5px 0
        22px;

    padding:
        10px 13px;

    border:
        1px solid
        #cfe5d7;

    border-radius: 9px;

    background:
        var(--success-soft);

    color:
        var(--success);

    font-size: 12px;
}


.job-live-note .status-dot {
    flex:
        0 0 auto;
}


.job-live-note span:last-child {
    color:
        var(--muted-strong);
}


.job-list {
    display: grid;
    gap: 10px;
}


.job-card {
    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(220px,320px);

    gap: 18px;

    padding: 16px;

    border:
        1px solid
        var(--border);

    border-radius: 10px;

    background:
        var(--surface-soft);
}


.job-heading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px;
}


.job-heading strong {
    font-size: 14px;
}


.job-target {
    margin-top: 9px;

    font-size: 16px;
    font-weight: 760;
}


.job-meta {
    display: flex;
    flex-wrap: wrap;

    gap:
        5px 14px;

    margin-top: 10px;

    color:
        var(--muted);

    font-size: 10px;
}


.job-meta strong {
    color:
        var(--muted-strong);
}


.job-runtime {
    display: flex;
    flex-direction: column;

    justify-content: center;

    min-width: 0;

    padding-left: 17px;

    border-left:
        1px solid
        var(--border);
}


.job-stage {
    display: flex;
    justify-content: space-between;
    align-items: baseline;

    gap: 10px;

    font-size: 11px;
}


.job-stage span {
    color:
        var(--muted);

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .05em;
    text-transform: uppercase;
}


.job-stage strong {
    text-align: right;

    overflow-wrap: anywhere;
}


.job-progress {
    width: 100%;
    height: 8px;

    margin:
        11px 0
        5px;

    overflow: hidden;

    appearance: none;
    -webkit-appearance: none;

    border: 0;
    border-radius: 999px;

    background:
        #e6ebef;
}


.job-progress::-webkit-progress-bar {
    background:
        #e6ebef;
}


.job-progress::-webkit-progress-value {
    background:
        #536575;

    border-radius: 999px;
}


.job-progress::-moz-progress-bar {
    background:
        #536575;

    border-radius: 999px;
}


.job-progress-meta {
    display: flex;
    justify-content: space-between;

    color:
        var(--muted);

    font-size: 9px;
}


.job-updated {
    margin-top: 9px;

    color:
        var(--muted);

    font-size: 9px;
}


.job-details {
    grid-column:
        1 / -1;

    padding-top: 11px;

    border-top:
        1px solid
        var(--border-soft);
}


.job-details summary {
    width: max-content;

    color:
        var(--info);

    cursor: pointer;

    font-size: 11px;
    font-weight: 720;
}


.job-details-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );

    gap: 9px;

    margin-top: 12px;
}


.job-details-grid > div {
    min-width: 0;

    padding: 10px;

    border:
        1px solid
        var(--border-soft);

    border-radius: 8px;

    background:
        white;
}


.job-details-grid span {
    display: block;

    margin-bottom: 4px;

    color:
        var(--muted);

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .04em;
    text-transform: uppercase;
}


.job-details-grid strong {
    display: block;

    font-size: 11px;
    font-weight: 650;

    overflow-wrap: anywhere;
}


.badge.running {
    background:
        var(--info-soft);

    color:
        var(--info);
}


.badge.queued {
    background:
        var(--warning-soft);

    color:
        var(--warning);
}


.badge.completed {
    background:
        var(--success-soft);

    color:
        var(--success);
}


.badge.failed,
.badge.recovery_required {
    background:
        var(--danger-soft);

    color:
        var(--danger);
}


@media (max-width: 900px) {

    .jobs-summary-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }


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


    .job-runtime {
        padding:
            12px 0 0;

        border-left:
            0;

        border-top:
            1px solid
            var(--border);
    }
}


@media (max-width: 700px) {

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


    .job-details-grid {
        grid-template-columns:
            1fr;
    }


    .job-meta {
        flex-direction:
            column;
    }
}


/* PXELAB_UI_1D_DETAILS */

.detail-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    gap: 22px;

    margin-bottom: 24px;
}

.detail-hero h1 {
    margin: 3px 0 8px;

    font-size: 26px;
    line-height: 1.2;
}

.detail-hero-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 7px;
}

.detail-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;

    gap: 8px;
}

.detail-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );

    gap: 12px;
}

.detail-panel {
    min-width: 0;

    padding: 15px;

    border:
        1px solid
        var(--border-soft);

    border-radius: 9px;

    background:
        var(--surface-soft);
}

.detail-panel h3 {
    margin: 0 0 11px;

    color: var(--muted-strong);

    font-size: 10px;
    font-weight: 850;

    letter-spacing: .055em;
    text-transform: uppercase;
}

.detail-kv {
    display: grid;
    gap: 0;
}

.detail-row {
    display: grid;

    grid-template-columns:
        minmax(110px,.42fr)
        minmax(0,1fr);

    gap: 12px;

    padding: 8px 0;

    border-bottom:
        1px solid
        var(--border-soft);
}

.detail-row:first-child {
    padding-top: 0;
}

.detail-row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.detail-row > span {
    color: var(--muted);

    font-size: 10px;
    font-weight: 700;
}

.detail-row > strong {
    min-width: 0;

    font-size: 12px;
    font-weight: 680;

    overflow-wrap: anywhere;
}

.detail-inline-grid {
    display: grid;

    grid-template-columns:
        repeat(
            5,
            minmax(0,1fr)
        );

    gap: 10px;
}

.detail-stat {
    min-width: 0;

    padding: 13px;

    border:
        1px solid
        var(--border-soft);

    border-radius: 9px;

    background:
        var(--surface-soft);
}

.detail-stat > span {
    display: block;

    margin-bottom: 8px;

    color: var(--muted);

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .04em;
    text-transform: uppercase;
}

.detail-stat > strong {
    display: block;

    font-size: 11px;

    overflow-wrap: anywhere;
}

.detail-progress {
    width: 100%;
    height: 9px;

    margin-top: 13px;

    overflow: hidden;

    appearance: none;
    -webkit-appearance: none;

    border: 0;
    border-radius: 999px;

    background: #e6ebef;
}

.detail-progress::-webkit-progress-bar {
    background: #e6ebef;
}

.detail-progress::-webkit-progress-value {
    background: #596675;
    border-radius: 999px;
}

.detail-progress::-moz-progress-bar {
    background: #596675;
    border-radius: 999px;
}

.detail-collected {
    margin:
        13px 2px 0;
}

.interface-wifi {
    display: grid;

    gap: 2px;

    margin-top: 7px;

    color: var(--muted-strong);

    font-size: 10px;
}

.interface-wifi strong {
    color: var(--text);

    font-size: 11px;
}

.secondary-details {
    margin-bottom: 22px;

    border:
        1px solid
        var(--border);

    border-radius: var(--radius);

    background: var(--surface);

    box-shadow: var(--shadow);
}

.secondary-details > summary {
    padding: 15px 18px;

    cursor: pointer;

    font-size: 13px;
    font-weight: 760;
}

.secondary-details[open] > summary {
    border-bottom:
        1px solid
        var(--border-soft);
}

.secondary-details-body {
    padding: 16px 18px;
}

.integrity-grid {
    grid-template-columns:
        minmax(150px,.6fr)
        minmax(150px,.6fr)
        minmax(0,1.8fr);
}

.integrity-status {
    padding-top: 2px;
}

.integrity-value {
    font-size: 15px;
    font-weight: 760;
}

.integrity-hash .mono {
    font-size: 11px;

    overflow-wrap: anywhere;
}

.integrity-actions {
    justify-content: flex-start;

    margin-top: 16px;
}


@media (max-width: 1100px) {

    .detail-inline-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0,1fr)
            );
    }

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

    .integrity-hash {
        grid-column:
            1 / -1;
    }
}


@media (max-width: 760px) {

    .detail-hero {
        flex-direction: column;
    }

    .detail-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .detail-actions .btn,
    .detail-actions .btn-light {
        flex: 1;
    }

    .detail-grid,
    .detail-inline-grid,
    .integrity-grid {
        grid-template-columns:
            1fr;
    }

    .integrity-hash {
        grid-column: auto;
    }

    .detail-row {
        grid-template-columns:
            1fr;

        gap: 3px;
    }
}


@media (max-width: 480px) {

    .detail-actions {
        flex-direction: column;
    }

    .detail-actions .btn,
    .detail-actions .btn-light {
        width: 100%;
    }
}


/* PXELAB_NET_2_NETWORKS */

.network-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );

    gap: 14px;

    margin-bottom: 22px;
}


.network-card {
    min-width: 0;

    padding: 17px;

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius);

    background:
        var(--surface);

    box-shadow:
        var(--shadow);
}


.network-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    gap: 12px;
}


.network-role {
    color:
        var(--muted);

    font-size: 9px;
    font-weight: 850;

    letter-spacing: .09em;
}


.network-card h2 {
    margin:
        4px 0 0;

    font-size: 20px;
}


.network-class {
    display: inline-flex;
    align-items: center;

    min-height: 24px;

    padding:
        3px 8px;

    border-radius:
        999px;

    font-size: 9px;
    font-weight: 850;

    white-space: nowrap;
}


.network-class.protected {
    background:
        var(--warning-soft);

    color:
        var(--warning);
}


.network-class.eligible {
    background:
        var(--success-soft);

    color:
        var(--success);
}


.network-address {
    display: grid;

    gap: 4px;

    margin-top: 17px;
    padding-bottom: 14px;

    border-bottom:
        1px solid
        var(--border-soft);
}


.network-address strong {
    font-size: 16px;
}


.network-address .mono {
    color:
        var(--muted);

    font-size: 10px;
}


.muted-value {
    color:
        var(--muted-strong);
}


.network-facts {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );

    gap: 10px;

    margin-top: 14px;
}


.network-facts > div {
    display: grid;

    gap: 4px;
}


.network-facts span:first-child {
    color:
        var(--muted);

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .04em;
    text-transform: uppercase;
}


.network-facts strong {
    font-size: 11px;
}


.network-service-box {
    margin-top: 15px;

    padding: 12px;

    border:
        1px solid
        #cfe2d5;

    border-radius: 9px;

    background:
        #f5fbf7;
}


.network-service-title {
    margin-bottom: 9px;

    color:
        var(--success);

    font-size: 10px;
    font-weight: 850;

    letter-spacing: .045em;
    text-transform: uppercase;
}


.network-service-row {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 8px;

    padding:
        5px 0;
}


.network-service-row > span {
    color:
        var(--muted-strong);

    font-size: 10px;
}


.network-serving {
    display: grid;

    margin-top: 9px;
    padding-top: 10px;

    border-top:
        1px solid
        #dcebe1;
}


.network-serving > span {
    color:
        var(--muted);

    font-size: 9px;
    font-weight: 800;

    text-transform: uppercase;
}


.network-serving strong {
    margin-top: 4px;

    font-size: 14px;
}


.network-serving small {
    margin-top: 2px;

    color:
        var(--success);

    font-size: 9px;
    font-weight: 800;
}


.network-policy-note {
    display: grid;

    gap: 4px;

    margin-top: 15px;
    padding: 12px;

    border-radius: 9px;
}


.network-policy-note.protected {
    border:
        1px solid
        #eadcab;

    background:
        #fffaf0;
}


.network-policy-note.eligible {
    border:
        1px solid
        #cfe2d5;

    background:
        #f5fbf7;
}


.network-policy-note strong {
    font-size: 11px;
}


.network-policy-note span {
    color:
        var(--muted);

    font-size: 10px;

    line-height: 1.45;
}


.network-reason {
    margin-top: 11px;

    color:
        var(--muted);

    font-size: 9px;

    line-height: 1.4;
}


.readiness-list {
    border:
        1px solid
        var(--border);

    border-radius: 10px;

    overflow: hidden;
}


.readiness-row {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 18px;

    padding:
        13px 14px;

    border-bottom:
        1px solid
        var(--border-soft);
}


.readiness-row:last-child {
    border-bottom: 0;
}


.readiness-row > div {
    display: grid;

    min-width: 0;

    gap: 3px;
}


.readiness-row strong {
    font-size: 12px;
}


.readiness-row div > span {
    color:
        var(--muted);

    font-size: 10px;
}


.readiness-status {
    flex:
        0 0 auto;

    padding:
        4px 8px;

    border-radius: 999px;

    font-size: 9px;
    font-weight: 850;
}


.readiness-status.ok {
    background:
        var(--success-soft);

    color:
        var(--success);
}


.readiness-status.warning {
    background:
        var(--warning-soft);

    color:
        var(--warning);
}


.readiness-status.bad {
    background:
        var(--danger-soft);

    color:
        var(--danger);
}


.readiness-status.neutral {
    background:
        #edf0f2;

    color:
        var(--muted-strong);
}


.policy-grid {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0,1fr)
        );

    gap: 10px;
}


.policy-item {
    min-width: 0;

    padding: 13px;

    border:
        1px solid
        var(--border-soft);

    border-radius: 9px;

    background:
        var(--surface-soft);
}


.policy-item > span {
    display: block;

    color:
        var(--muted);

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .04em;

    text-transform: uppercase;
}


.policy-item strong {
    display: block;

    margin-top: 7px;

    font-size: 12px;

    overflow-wrap: anywhere;
}


.policy-item small {
    display: block;

    margin-top: 5px;

    color:
        var(--muted);

    font-size: 10px;

    line-height: 1.4;
}


.network-phase-note {
    margin:
        -4px 0
        22px;

    padding:
        12px 14px;

    border:
        1px solid
        var(--info-soft);

    border-radius: 9px;

    background:
        #f4f7fb;

    color:
        var(--muted-strong);

    font-size: 11px;
}


.network-phase-note strong {
    color:
        var(--info);
}


@media (max-width: 1150px) {

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


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


@media (max-width: 700px) {

    .network-grid,
    .policy-grid {
        grid-template-columns:
            1fr;
    }


    .readiness-row {
        align-items: flex-start;
        flex-direction: column;
    }


    .network-facts {
        grid-template-columns:
            1fr 1fr;
    }
}


/* PXELAB_NET_3B_PROFILE_BROKER */

.network-profile-broker {
    display: grid;
    justify-items: end;

    gap: 2px;
}

.network-profile-broker > span {
    color:
        var(--muted);

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .04em;
    text-transform: uppercase;
}

.network-profile-broker > strong {
    font-size: 11px;
}

.network-profile-broker > small {
    color:
        var(--muted);

    font-size: 9px;
}

.network-profile-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );

    gap: 12px;
}

.network-profile-card {
    min-width: 0;

    padding: 16px;

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius);

    background:
        var(--surface);

    box-shadow:
        var(--shadow);
}

.network-profile-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    gap: 12px;

    padding-bottom: 13px;

    border-bottom:
        1px solid
        var(--border-soft);
}

.network-profile-head h3 {
    margin:
        4px 0 2px;

    font-size: 17px;
}

.network-profile-id {
    color:
        var(--muted);

    font-size: 9px;
}

.network-profile-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;

    gap: 5px;
}

.network-profile-kv {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );

    gap: 10px 16px;

    margin-top: 14px;
}

.network-profile-kv > div {
    display: grid;

    min-width: 0;

    gap: 3px;
}

.network-profile-kv span {
    color:
        var(--muted);

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .04em;

    text-transform: uppercase;
}

.network-profile-kv strong {
    font-size: 11px;

    overflow-wrap: anywhere;
}

.network-profile-compat {
    display: grid;

    gap: 3px;

    margin-top: 14px;
    padding: 10px 11px;

    border:
        1px solid
        var(--warning-soft);

    border-radius: 8px;

    background:
        #fffaf0;
}

.network-profile-compat strong {
    font-size: 10px;
}

.network-profile-compat span {
    color:
        var(--muted);

    font-size: 10px;
    line-height: 1.4;
}


@media (max-width: 850px) {

    .network-profile-grid {
        grid-template-columns:
            1fr;
    }

    .network-profile-broker {
        justify-items:
            start;
    }
}


@media (max-width: 520px) {

    .network-profile-head {
        flex-direction:
            column;
    }

    .network-profile-tags {
        justify-content:
            flex-start;
    }

    .network-profile-kv {
        grid-template-columns:
            1fr;
    }
}


/* PXELAB_NET_4A_R2_PLANNER */

.network-plan-form {
    padding: 16px;

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius);

    background:
        var(--surface);

    box-shadow:
        var(--shadow);
}


.network-plan-fields {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );

    gap: 13px 16px;
}


.network-plan-fields label {
    display: grid;

    gap: 6px;

    min-width: 0;
}


.network-plan-fields label > span {
    color:
        var(--muted-strong);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .035em;
    text-transform: uppercase;
}


.network-plan-fields input,
.network-plan-fields select {
    width: 100%;

    min-height: 38px;

    padding:
        8px 10px;

    border:
        1px solid
        var(--border);

    border-radius: 8px;

    background:
        white;

    color:
        var(--text);

    font: inherit;

    font-size: 12px;
}


.network-plan-fields small {
    color:
        var(--muted);

    font-size: 9px;
}


.network-plan-actions {
    display: flex;

    gap: 8px;

    margin-top: 15px;
}


.network-plan-result {
    margin-top: 14px;

    padding: 16px;

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius);
}


.network-plan-result.valid {
    border-color:
        #cfe2d5;

    background:
        #f8fcf9;
}


.network-plan-result.invalid {
    border-color:
        #efd1d1;

    background:
        #fffafa;
}


.network-plan-result-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    gap: 14px;
}


.network-plan-result-head h3 {
    margin:
        3px 0 0;

    font-size: 16px;
}


.network-plan-messages {
    margin-top: 13px;

    padding: 11px 12px;

    border-radius: 8px;
}


.network-plan-messages.error {
    background:
        var(--danger-soft);

    color:
        var(--danger);
}


.network-plan-messages.warning {
    background:
        var(--warning-soft);

    color:
        var(--warning);
}


.network-plan-messages strong {
    font-size: 10px;
}


.network-plan-messages ul {
    margin:
        7px 0 0;

    padding-left: 17px;

    font-size: 10px;
}


.network-plan-summary {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );

    gap: 9px;

    margin-top: 14px;
}


.network-plan-summary > div {
    display: grid;

    min-width: 0;

    gap: 3px;

    padding: 10px;

    border:
        1px solid
        var(--border-soft);

    border-radius: 8px;

    background: white;
}


.network-plan-summary span {
    color:
        var(--muted);

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .04em;

    text-transform: uppercase;
}


.network-plan-summary strong {
    font-size: 11px;

    overflow-wrap: anywhere;
}


.network-plan-summary small {
    color:
        var(--muted);

    font-size: 9px;
}


.network-preview {
    margin-top: 14px;

    overflow: hidden;

    border:
        1px solid
        var(--border);

    border-radius: 9px;

    background:
        #111820;
}


.network-preview-head {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 12px;

    padding:
        10px 12px;

    background:
        #1a232d;

    color:
        #e8edf2;
}


.network-preview-head > div {
    display: grid;

    gap: 2px;
}


.network-preview-head strong {
    font-size: 10px;
}


.network-preview-head span {
    color:
        #a9b5c0;

    font-size: 9px;
}


.network-preview-head > .mono {
    font-size: 9px;
}


.network-preview pre {
    margin: 0;

    padding: 14px;

    overflow-x: auto;

    color:
        #dbe4ec;

    font-size: 10px;
    line-height: 1.55;

    white-space: pre;
}


.network-plan-safety {
    margin-top: 12px;

    padding: 10px 11px;

    border:
        1px solid
        #cfe2d5;

    border-radius: 8px;

    background:
        var(--success-soft);

    color:
        var(--muted-strong);

    font-size: 10px;
}


.network-plan-safety strong {
    color:
        var(--success);
}


@media (max-width: 800px) {

    .network-plan-fields,
    .network-plan-summary {
        grid-template-columns:
            1fr;
    }


    .network-preview-head {
        align-items: flex-start;
        flex-direction: column;
    }
}


@media (max-width: 480px) {

    .network-plan-actions {
        flex-direction: column;
    }


    .network-plan-actions .btn,
    .network-plan-actions .btn-light {
        width: 100%;
    }
}

/* PXELAB_PER_NETWORK_UI_POLISH_20260826 */

.workflow-banner,
.compatibility-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;

    margin-bottom: 24px;
    padding: 14px 16px;

    border: 1px solid var(--border);
    border-radius: var(--radius);

    background: var(--surface-soft);
}

.workflow-banner > div,
.compatibility-banner > div {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.workflow-banner strong,
.compatibility-banner strong {
    font-size: 12px;
}

.workflow-banner span,
.compatibility-banner span:not(.badge) {
    color: var(--muted);
    font-size: 10px;
    line-height: 1.45;
}

.assignment-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.assignment-grid-manage {
    align-items: stretch;
}

.assignment-card {
    min-width: 0;
    padding: 16px;

    border: 1px solid var(--border);
    border-radius: var(--radius);

    background: var(--surface);
    box-shadow: var(--shadow);
}

.assignment-manage-card {
    display: flex;
    flex-direction: column;
}

.assignment-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;

    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-soft);
}

.assignment-head h3 {
    margin: 4px 0 0;
    font-size: 16px;
}

.assignment-current {
    display: grid;
    gap: 4px;
    margin-top: 13px;
}

.assignment-current > span,
.assignment-form label > span,
.assignment-pending > span {
    color: var(--muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.assignment-current strong {
    font-size: 15px;
}

.assignment-current small {
    color: var(--muted);
    font-size: 9px;
}

.assignment-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;

    margin-top: 10px;
    color: var(--muted);
    font-size: 10px;
}

.assignment-pending {
    display: grid;
    gap: 3px;

    margin-top: 12px;
    padding: 9px 10px;

    border: 1px solid #ead9aa;
    border-radius: 8px;

    background: var(--warning-soft);
}

.assignment-pending strong {
    font-size: 11px;
}

.assignment-pending small {
    color: var(--muted-strong);
    font-size: 9px;
    overflow-wrap: anywhere;
}

.assignment-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 9px;

    margin-top: auto;
    padding-top: 15px;
}

.assignment-form label {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.assignment-form select {
    width: 100%;
    min-height: 38px;

    padding: 8px 10px;

    border: 1px solid var(--border);
    border-radius: 8px;

    background: white;
    color: var(--text);

    font: inherit;
    font-size: 12px;
}

.assignment-form select:disabled,
.assignment-form button:disabled {
    cursor: not-allowed;
    opacity: .58;
}

.assignment-readonly-note {
    margin-top: 14px;
    padding: 9px 10px;

    border: 1px solid var(--border-soft);
    border-radius: 8px;

    background: var(--surface-soft);
    color: var(--muted);

    font-size: 10px;
}

.image-usage {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.image-usage span {
    display: inline-flex;
    padding: 3px 6px;

    border: 1px solid var(--border-soft);
    border-radius: 999px;

    background: var(--surface-soft);
    color: var(--muted-strong);

    font-size: 9px;
}

.image-fallback-note {
    display: inline-flex;
    margin-top: 4px;

    color: var(--warning);
    font-size: 9px;
    font-weight: 760;
}

.job-target-profile {
    font-weight: 760;
}

.job-target-id {
    margin-left: 4px;
    color: var(--muted);
    font-size: 10px;
}

.job-target-arrow {
    display: inline-block;
    margin: 0 7px;
    color: var(--muted);
}

.network-phase-note-current {
    border-color: #cfe2d5;
    background: var(--success-soft);
}

@media (max-width: 900px) {
    .assignment-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .workflow-banner,
    .compatibility-banner {
        align-items: stretch;
        flex-direction: column;
    }

    .workflow-banner .btn,
    .compatibility-banner .btn,
    .compatibility-banner .btn-light {
        width: 100%;
    }

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

    .assignment-form .btn {
        width: 100%;
    }
}

@media (max-width: 520px) {
    .assignment-head {
        flex-direction: column;
    }
}


/* ==================================================================
   PXELAB UI-POLISH-R1 - operator-friendly, responsive design layer
   ================================================================== */

:root {
    --bg: #f3f6f8;
    --surface-soft: #f7f9fb;
    --border: #dbe2e8;
    --border-soft: #e9eef2;
    --text: #17212b;
    --muted: #667480;
    --muted-strong: #4e5c68;
    --radius: 14px;
    --shadow: 0 1px 2px rgba(23,33,43,.035), 0 8px 28px rgba(23,33,43,.025);
}

body {
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}

.sidebar {
    background: linear-gradient(180deg,#111922 0%,#16212b 100%);
}

.brand {
    min-height: 76px;
}

.brand-mark {
    box-shadow: 0 5px 18px rgba(0,0,0,.14);
}

.nav-item {
    min-height: 44px;
    border: 1px solid transparent;
}

.nav-item.active {
    background: rgba(255,255,255,.09);
    border-color: rgba(255,255,255,.08);
}

.topbar {
    min-height: 70px;
    box-shadow: 0 1px 0 rgba(23,33,43,.02);
}

.app-main {
    padding-top: 26px;
    padding-bottom: 48px;
}

section,
.card,
.detail-panel,
.network-profile-card,
.assignment-card,
.job-card,
.bulk-card {
    box-shadow: var(--shadow);
}

section {
    padding: 22px;
}

.page-intro {
    margin: 2px 0 22px;
}

.page-intro h1,
.detail-hero h1 {
    letter-spacing: -.025em;
}

.page-intro p,
.section-head p,
.note {
    line-height: 1.55;
}

.eyebrow {
    color: #5f6f7d;
}

.btn,
button.btn,
.btn-light,
.btn-danger {
    min-height: 40px;
    padding: 9px 14px;
    border-radius: 10px;
    transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.btn:not(:disabled):active,
.btn-light:not(:disabled):active,
.btn-danger:not(:disabled):active {
    transform: translateY(1px);
}

.btn:focus-visible,
.btn-light:focus-visible,
.btn-danger:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible,
a:focus-visible {
    outline: 3px solid rgba(40,76,120,.18);
    outline-offset: 2px;
}

input[type="text"],
input[type="password"],
input[type="number"],
input[type="datetime-local"],
select,
textarea {
    min-height: 40px;
    padding: 9px 11px;
    border: 1px solid #cbd5dd;
    border-radius: 9px;
    background: #fff;
    color: var(--text);
}

input:focus,
select:focus,
textarea:focus {
    border-color: #8198aa;
    box-shadow: 0 0 0 3px rgba(40,76,120,.08);
}

label {
    color: var(--muted-strong);
    font-size: 12px;
    font-weight: 720;
}

th {
    padding-top: 11px;
    padding-bottom: 11px;
    color: #5e6c78;
}

td {
    padding-top: 12px;
    padding-bottom: 12px;
}

.badge {
    min-height: 25px;
    padding: 4px 9px;
}

.flash {
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}

.flash.info {
    background: var(--info-soft);
    border-color: #cbd9eb;
}

.empty {
    line-height: 1.6;
}

/* Login */
.login-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
        radial-gradient(circle at 20% 10%,rgba(40,76,120,.08),transparent 36%),
        linear-gradient(180deg,#f6f8fa,#eef2f5);
}

.login-shell {
    width: min(100%,440px);
}

.login-card {
    margin: 0;
    padding: 30px;
    border-radius: 18px;
    box-shadow: 0 18px 55px rgba(23,33,43,.10);
}

.login-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
}

.login-brand > div {
    display: grid;
    gap: 2px;
}

.login-brand strong {
    font-size: 13px;
    letter-spacing: .09em;
}

.login-brand span:not(.brand-mark) {
    color: var(--muted);
    font-size: 12px;
}

.login-heading h1 {
    margin: 3px 0 8px;
    font-size: 25px;
    letter-spacing: -.025em;
}

.login-heading p {
    margin: 0 0 24px;
    color: var(--muted);
}

.login-form {
    display: grid;
    gap: 8px;
}

.login-form label {
    margin-top: 6px;
}

.login-submit {
    width: 100%;
    margin-top: 12px;
}

.login-foot {
    margin: 24px 0 0;
    color: var(--muted);
    font-size: 11px;
    text-align: center;
}

/* Operator-friendly client control */
.client-control-section {
    overflow: hidden;
}

.operator-status-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.operator-status-card {
    min-width: 0;
    min-height: 112px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 15px;
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    background: var(--surface-soft);
}

.operator-status-card > span {
    color: var(--muted);
    font-size: 10px;
    font-weight: 820;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.operator-status-card > strong {
    font-size: 15px;
    overflow-wrap: anywhere;
}

.operator-status-card > small {
    margin-top: auto;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.4;
}

.operator-alert {
    display: grid;
    gap: 4px;
    margin-bottom: 16px;
    padding: 13px 14px;
    border-radius: 10px;
    font-size: 12px;
}

.operator-alert.warning {
    background: var(--warning-soft);
    border: 1px solid #ecdca9;
}

.inline-details {
    margin-top: 4px;
    color: var(--muted-strong);
}

.inline-details summary {
    cursor: pointer;
    font-weight: 720;
}

.control-settings-card {
    margin-bottom: 16px;
    padding: 17px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: #fff;
}

.control-settings-head,
.subsection-head,
.control-action-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.control-settings-head h3,
.subsection-head h3,
.control-action-head h3 {
    margin: 0 0 4px;
    font-size: 15px;
}

.control-settings-head p,
.subsection-head p,
.control-action-head p {
    margin: 0;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.45;
}

.control-setting-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 4px 9px;
    border-radius: 999px;
    background: #edf0f2;
    color: var(--muted-strong);
    font-size: 10px;
    font-weight: 780;
}

.status-pill.on {
    background: var(--success-soft);
    color: var(--success);
}

.control-settings-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 12px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--border-soft);
}

.control-settings-block {
    min-width: 0;
    padding: 13px;
    border-radius: 10px;
    background: var(--surface-soft);
}

.control-settings-block h4 {
    margin: 0 0 9px;
    font-size: 12px;
}

.control-time,
.form-help {
    margin: 6px 0 10px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.45;
}

.stack-form {
    display: grid;
    gap: 8px;
}

.stack-form label {
    display: grid;
    gap: 6px;
}

.inline-control-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
}

.inline-control-form select {
    flex: 1 1 120px;
}

.client-control-grid {
    display: grid;
    grid-template-columns: minmax(0,1.35fr) minmax(280px,.65fr);
    gap: 14px;
}

.control-action-card {
    min-width: 0;
    padding: 17px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: #fff;
    box-shadow: var(--shadow);
}

.control-icon {
    display: inline-flex;
    align-items: center;
    min-height: 23px;
    margin-bottom: 8px;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--info-soft);
    color: var(--info);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.power-control-card .control-icon {
    background: var(--warning-soft);
    color: var(--warning);
}

.control-action-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 15px 0;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-soft);
}

.control-action-toolbar form {
    margin: 0;
}

.form-grid {
    display: grid;
    gap: 10px;
}

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

.power-action-list {
    display: grid;
    gap: 10px;
    margin-top: 17px;
}

.power-action-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px;
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    background: var(--surface-soft);
}

.power-action-row > div {
    display: grid;
    gap: 3px;
}

.power-action-row strong {
    font-size: 12px;
}

.power-action-row span {
    color: var(--muted);
    font-size: 10px;
    line-height: 1.4;
}

.power-action-row form {
    flex: 0 0 auto;
    margin: 0;
}

.danger-row {
    border-color: #f0dddd;
    background: #fffafa;
}

.wifi-results-block {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-soft);
}

.wifi-network-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 9px;
    margin-top: 12px;
}

.wifi-network-card {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    background: var(--surface-soft);
}

.wifi-network-card > div {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.wifi-network-card strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
}

.wifi-network-card span {
    color: var(--muted);
    font-size: 10px;
}

.wifi-signal {
    flex: 0 0 auto;
    text-align: right;
}

.control-history {
    margin-top: 16px;
}

/* Bulk benchmark integrated into main design system */
.bulk-grid {
    display: grid;
    grid-template-columns: minmax(0,1.65fr) minmax(300px,.75fr);
    gap: 16px;
}

.bulk-card {
    margin-bottom: 16px;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.bulk-card h2,
.bulk-card h3 {
    margin-top: 0;
}

.bulk-muted {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.45;
}

.bulk-ok { color: var(--success); font-weight: 760; }
.bulk-bad { color: var(--danger); font-weight: 760; }

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

.bulk-field {
    margin: 0 0 14px;
}

.bulk-field > label:first-child {
    display: block;
    margin-bottom: 6px;
    font-weight: 760;
}

.bulk-field input[type="text"],
.bulk-field input[type="number"],
.bulk-field select {
    width: min(100%,460px);
}

.bulk-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
}

.bulk-options label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.bulk-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 9px 14px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: var(--sidebar);
    color: #fff;
    font-size: 12px;
    font-weight: 740;
    text-decoration: none;
}

.bulk-button:disabled {
    opacity: .5;
}

.bulk-danger {
    background: var(--danger);
}

.bulk-link {
    color: var(--info);
    font-weight: 760;
    text-decoration: none;
}

.bulk-warning {
    margin: 12px 0;
    padding: 12px 13px;
    border: 1px solid #eadcab;
    border-radius: 10px;
    background: #fffaf0;
    color: var(--muted-strong);
    font-size: 12px;
}

.bulk-kv {
    display: grid;
    grid-template-columns: minmax(150px,.45fr) minmax(0,1fr);
    gap: 9px 18px;
}

.bulk-state {
    display: inline-flex;
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--info-soft);
    color: var(--info);
    font-size: 12px;
    font-weight: 820;
}

/* Simplify existing information density */
.network-profile-compat,
.network-reason {
    display: none;
}

.network-profile-id {
    opacity: .65;
}

.image-usage {
    margin-top: 6px;
}

/* Mobile improvements */
@media (max-width: 1150px) {
    .operator-status-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
    .control-settings-grid {
        grid-template-columns: 1fr 1fr;
    }
    .control-settings-block:first-child {
        grid-column: 1 / -1;
    }
    .wifi-network-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

@media (max-width: 900px) {
    .client-control-grid,
    .bulk-grid {
        grid-template-columns: 1fr;
    }
    .control-settings-head,
    .subsection-head,
    .control-action-head {
        align-items: flex-start;
    }
}

@media (max-width: 700px) {
    .app-main {
        padding-top: 16px;
    }
    .page-intro {
        gap: 14px;
    }
    .page-intro h1,
    .detail-hero h1 {
        font-size: 23px;
    }
    .page-meta {
        gap: 5px;
    }
    .page-meta span {
        font-size: 10px;
    }
    .operator-status-grid,
    .control-settings-grid,
    .form-grid.two-col,
    .wifi-network-grid {
        grid-template-columns: 1fr;
    }
    .control-settings-block:first-child {
        grid-column: auto;
    }
    .control-settings-head,
    .subsection-head,
    .control-action-head {
        flex-direction: column;
    }
    .control-setting-badges {
        justify-content: flex-start;
    }
    .control-action-toolbar,
    .inline-control-form {
        align-items: stretch;
        flex-direction: column;
    }
    .control-action-toolbar form,
    .control-action-toolbar button,
    .inline-control-form select,
    .inline-control-form button,
    .stack-form > button {
        width: 100%;
    }
    .power-action-row {
        align-items: stretch;
        flex-direction: column;
    }
    .power-action-row form,
    .power-action-row button {
        width: 100%;
    }
    .bulk-kv {
        grid-template-columns: 1fr;
        gap: 3px 0;
    }
    .bulk-kv strong:not(:first-child) {
        margin-top: 9px;
    }
    .login-page {
        padding: 14px;
    }
    .login-card {
        padding: 24px 20px;
    }
}

@media (max-width: 480px) {
    .topbar-actions .btn-quiet {
        padding-left: 9px;
        padding-right: 9px;
    }
    .user-chip {
        display: none;
    }
    section,
    .card,
    .detail-panel,
    .control-action-card,
    .control-settings-card {
        border-radius: 12px;
    }
}


/* UI-POLISH-R1 information-density refinements */
.technical-row {
    display: none;
}

.network-interface-table th:nth-child(3),
.network-interface-table td:nth-child(3),
.network-interface-table th:nth-child(6),
.network-interface-table td:nth-child(6) {
    display: none;
}

.interface-wifi .mono {
    display: none;
}

.network-technical-preview {
    margin-top: 14px;
}

.network-technical-preview .network-preview {
    margin: 0;
}

@media (max-width: 760px) {
    .network-interface-table th:nth-child(2),
    .network-interface-table td:nth-child(2),
    .network-interface-table th:nth-child(4),
    .network-interface-table td:nth-child(4) {
        display: none;
    }
}


/* UI-POLISH-R1 primary-view simplification */
.technical-filter {
    display: none !important;
}

.managed-images-table th:nth-child(2),
.managed-images-table td:nth-child(2),
.managed-images-table th:nth-child(3),
.managed-images-table td:nth-child(3),
.managed-images-table th:nth-child(4),
.managed-images-table td:nth-child(4),
.staging-images-table th:nth-child(4),
.staging-images-table td:nth-child(4) {
    display: none;
}

.network-profile-id {
    display: none;
}