:root {
    color-scheme: dark;
    --zk-bg: #080c12;
    --zk-bg-soft: #0d131c;
    --zk-panel: #111923;
    --zk-panel-raised: #151f2c;
    --zk-panel-soft: #0f1721;
    --zk-border: #253244;
    --zk-border-soft: #1c2837;
    --zk-text: #e8eef7;
    --zk-text-soft: #8f9caf;
    --zk-input: #0b121b;
    --zk-input-border: #324156;
    --zk-accent: #59b8ff;
    --zk-accent-strong: #208de3;
    --zk-green: #42dc8b;
    --zk-red: #ff6675;
    --zk-yellow: #f0b955;
    --zk-radius: 14px;
    --zk-shadow: 0 18px 54px rgba(0, 0, 0, .28);
}

html,
body {
    min-height: 100%;
    background:
        radial-gradient(circle at 15% -10%, rgba(33, 141, 227, .12), transparent 30rem),
        var(--zk-bg);
}

body {
    color: var(--zk-text);
}

a {
    color: var(--zk-accent);
}

a:hover {
    color: #a5d8ff;
}

.title,
.subtitle,
.label,
.content,
strong,
th,
td,
summary {
    color: var(--zk-text) !important;
}

.app-navbar,
.app-navbar .navbar-menu,
.app-navbar .navbar-item {
    background: rgba(17, 25, 35, .94) !important;
    color: var(--zk-text) !important;
}

.app-navbar {
    border-bottom: 1px solid var(--zk-border);
    backdrop-filter: blur(12px);
    position: sticky;
    top: 0;
    z-index: 30;
}

.app-main {
    padding-top: 2rem;
}

.app-container {
    max-width: 1540px;
    margin: 0 auto;
}

.brand-mark {
    width: 2.2rem;
    height: 2.2rem;
    display: inline-grid;
    place-items: center;
    border-radius: .7rem;
    background: linear-gradient(145deg, #f7fbff, #c9d8e8);
    color: #07101a;
    font-weight: 900;
    margin-right: .75rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
}

.brand-title,
.brand-subtitle {
    display: block;
    line-height: 1.1;
}

.brand-subtitle {
    color: var(--zk-text-soft);
    font-size: .68rem;
    margin-top: .2rem;
}

.panel-card {
    background: linear-gradient(180deg, rgba(21, 31, 44, .96), rgba(15, 23, 33, .96));
    border: 1px solid var(--zk-border);
    border-radius: var(--zk-radius);
    box-shadow: var(--zk-shadow);
}

.page-heading,
.device-page-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 2rem;
}

.eyebrow,
.section-kicker {
    color: var(--zk-accent);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: .45rem;
}

.heading-status,
.agent-status-pill {
    display: flex;
    align-items: center;
    gap: .65rem;
    border: 1px solid var(--zk-border);
    background: var(--zk-panel-soft);
    border-radius: 999px;
    padding: .65rem .9rem;
    color: var(--zk-text-soft);
    font-size: .76rem;
}

.agent-status-pill div,
.agent-status-pill small {
    display: block;
}

.agent-status-pill strong {
    font-size: .78rem;
}

.agent-status-pill small {
    color: var(--zk-text-soft);
    font-size: .68rem;
    margin-top: .1rem;
}

.agent-status-pill.compact {
    padding: .55rem .75rem;
}

.status-dot {
    width: .72rem;
    height: .72rem;
    display: inline-block;
    flex: 0 0 auto;
    border-radius: 999px;
    background: #667085;
    box-shadow: 0 0 0 4px rgba(102, 112, 133, .1);
}

.status-dot.online {
    background: var(--zk-green);
    box-shadow: 0 0 0 4px rgba(66, 220, 139, .11);
}

.status-dot.offline {
    background: var(--zk-red);
    box-shadow: 0 0 0 4px rgba(255, 102, 117, .11);
}

.agent-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 1.1rem;
}

.agent-card {
    background: linear-gradient(180deg, var(--zk-panel-raised), var(--zk-panel));
    border: 1px solid var(--zk-border);
    border-radius: var(--zk-radius);
    padding: 1.25rem;
    box-shadow: var(--zk-shadow);
}

.agent-card__top,
.agent-card__footer,
.result-card__header,
.state-summary__top,
.latest-operation,
.status-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.agent-card__top {
    align-items: flex-start;
}

.agent-icon,
.section-icon,
.discovered-device__icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    background: rgba(89, 184, 255, .1);
    border: 1px solid rgba(89, 184, 255, .25);
    color: var(--zk-accent);
    font-weight: 900;
}

.agent-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .75rem;
}

.agent-card__identity {
    flex: 1;
    min-width: 0;
}

.compact-definition {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .85rem 1rem;
}

.compact-definition div {
    min-width: 0;
}

.compact-definition dt,
.value-grid dt {
    color: var(--zk-text-soft);
    font-size: .67rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom: .18rem;
}

.compact-definition dd,
.value-grid dd {
    color: var(--zk-text);
    font-size: .8rem;
    overflow-wrap: anywhere;
}

.agent-card__footer {
    border-top: 1px solid var(--zk-border-soft);
    margin-top: 1.15rem;
    padding-top: 1rem;
}

.mono-caption {
    color: var(--zk-text-soft);
    font-family: monospace;
    font-size: .66rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

.selection-card {
    padding: 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.selection-card form {
    margin-top: auto;
}

.section-icon {
    width: 3rem;
    height: 3rem;
    border-radius: .9rem;
    font-size: 1.35rem;
}

.empty-state,
.empty-inline {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--zk-text-soft);
}

.empty-state {
    grid-column: 1 / -1;
    flex-direction: column;
    justify-content: center;
    min-height: 18rem;
    text-align: center;
    padding: 3rem;
}

.empty-inline {
    padding: 1rem 1.2rem;
}

.empty-state__icon,
.empty-inline__icon {
    color: var(--zk-text-soft);
    font-size: 1.35rem;
}

.result-card {
    padding: 1.25rem;
}

.discovered-grid {
    display: grid;
    gap: .75rem;
}

.discovered-device {
    display: flex;
    align-items: center;
    gap: 1rem;
    border: 1px solid var(--zk-border-soft);
    background: rgba(8, 12, 18, .38);
    border-radius: .85rem;
    padding: .9rem;
}

.discovered-device__icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .7rem;
    font-size: .72rem;
}

.discovered-device__body {
    flex: 1;
    min-width: 0;
}

.discovered-device__body strong,
.discovered-device__body span,
.discovered-device__body small {
    display: block;
}

.discovered-device__body span {
    color: var(--zk-accent);
    font-size: .83rem;
    margin-top: .12rem;
}

.discovered-device__body small {
    color: var(--zk-text-soft);
    margin-top: .18rem;
}

.device-page-heading {
    align-items: center;
}

.device-heading-actions {
    display: flex;
    align-items: center;
    gap: .7rem;
}

.device-address {
    display: inline-block;
    border: 1px solid var(--zk-border);
    border-radius: .55rem;
    background: var(--zk-panel-soft);
    color: var(--zk-accent);
    font-family: monospace;
    font-size: .82rem;
    padding: .35rem .55rem;
}

.gap-3 {
    gap: .75rem;
}

.management-layout {
    display: grid;
    grid-template-columns: minmax(360px, .88fr) minmax(520px, 1.12fr);
    gap: 1.25rem;
    align-items: start;
}

.management-status {
    position: sticky;
    top: 6rem;
    max-height: calc(100vh - 7rem);
    overflow: auto;
    padding-right: .25rem;
}

.management-actions {
    min-width: 0;
}

.state-summary,
.status-section,
.command-panel {
    padding: 1.15rem;
}

.latest-operation {
    border-top: 1px solid var(--zk-border-soft);
    padding-top: .85rem;
    align-items: flex-end;
}

.latest-operation strong,
.latest-operation span {
    display: block;
}

.working-state {
    color: var(--zk-text-soft);
    font-size: .74rem;
}

.working-state .progress {
    margin-bottom: .45rem;
}

.status-section__header {
    align-items: flex-start;
    border-bottom: 1px solid var(--zk-border-soft);
    padding-bottom: .75rem;
    margin-bottom: .85rem;
}

.status-section__header h3 {
    color: var(--zk-text);
    font-weight: 750;
    font-size: .95rem;
}

.read-time {
    color: var(--zk-text-soft);
    font-size: .62rem;
    text-align: right;
}

.value-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .8rem 1rem;
}

.value-grid .is-span-2 {
    grid-column: 1 / -1;
}

.section-empty {
    color: var(--zk-text-soft);
    font-size: .75rem;
    padding: .45rem 0;
}

.option-list {
    display: grid;
    gap: .42rem;
}

.option-list > div {
    display: grid;
    grid-template-columns: minmax(8rem, .8fr) minmax(0, 1.2fr);
    gap: .7rem;
    align-items: center;
    border-bottom: 1px solid var(--zk-border-soft);
    padding-bottom: .42rem;
}

.option-list > div:last-child {
    border-bottom: 0;
}

.option-list span {
    color: var(--zk-text-soft);
    font-size: .7rem;
    overflow-wrap: anywhere;
}

.option-list code {
    color: #d9e7f5;
    background: var(--zk-input);
    border: 1px solid var(--zk-border-soft);
    border-radius: .35rem;
    font-size: .68rem;
    padding: .2rem .35rem;
    overflow-wrap: anywhere;
    white-space: normal;
}

.raw-details summary,
.raw-result summary {
    cursor: pointer;
    color: var(--zk-text-soft) !important;
    font-size: .72rem;
}

.raw-result {
    padding: .9rem 1rem;
}

.raw-result .code-block,
.raw-details .code-block {
    margin-top: .75rem;
}

.command-panel__header {
    margin-bottom: 1rem;
}

.quick-action-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .55rem;
}

.quick-action-grid form {
    display: flex;
}

.quick-action {
    width: 100%;
    min-height: 6.2rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    border: 1px solid var(--zk-border);
    border-radius: .75rem;
    background: var(--zk-panel-soft);
    color: var(--zk-text);
    padding: .75rem;
    cursor: pointer;
    text-align: left;
    transition: transform .15s ease, border-color .15s ease, background .15s ease;
}

.quick-action:hover {
    transform: translateY(-1px);
    border-color: var(--zk-accent);
    background: rgba(89, 184, 255, .08);
}

.quick-action span {
    color: var(--zk-accent);
    font-size: 1rem;
    margin-bottom: .35rem;
}

.quick-action strong {
    font-size: .78rem;
}

.quick-action small {
    color: var(--zk-text-soft);
    font-size: .62rem;
    line-height: 1.25;
    margin-top: .15rem;
}

.command-section {
    border: 1px solid var(--zk-border);
    border-radius: var(--zk-radius);
    background: linear-gradient(180deg, var(--zk-panel-raised), var(--zk-panel));
    margin-bottom: .85rem;
    box-shadow: 0 10px 35px rgba(0, 0, 0, .18);
    overflow: hidden;
}

.command-section > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.1rem;
    user-select: none;
}

.command-section > summary::-webkit-details-marker {
    display: none;
}

.command-section > summary span:first-child b,
.command-section > summary span:first-child small {
    display: block;
}

.command-section > summary b {
    font-size: .9rem;
}

.command-section > summary small {
    color: var(--zk-text-soft);
    font-size: .68rem;
    margin-top: .12rem;
}

.summary-arrow {
    color: var(--zk-text-soft);
    transition: transform .16s ease;
}

.command-section[open] .summary-arrow {
    transform: rotate(180deg);
}

.command-section__body {
    border-top: 1px solid var(--zk-border-soft);
    padding: 1.1rem;
}

.subsection-title {
    color: var(--zk-text);
    font-size: .78rem;
    font-weight: 800;
    margin-bottom: .8rem;
}

.soft-divider {
    background: var(--zk-border-soft);
    border: 0;
    height: 1px;
    margin: 1.25rem 0;
}

.warning-strip,
.info-strip {
    border-radius: .65rem;
    padding: .7rem .8rem;
    font-size: .7rem;
}

.warning-strip {
    border: 1px solid rgba(240, 185, 85, .28);
    background: rgba(240, 185, 85, .08);
    color: #e8c983;
}

.info-strip {
    border: 1px solid rgba(89, 184, 255, .25);
    background: rgba(89, 184, 255, .08);
    color: #a9d8fb;
}

.inline-command {
    display: flex;
    align-items: flex-end;
    gap: .75rem;
}

.field-grow {
    flex: 1;
}

.advanced-actions {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
}

.is-soft {
    color: var(--zk-text-soft) !important;
}

.input,
.textarea,
.select select {
    background: var(--zk-input) !important;
    border-color: var(--zk-input-border) !important;
    color: var(--zk-text) !important;
    box-shadow: none !important;
}

.input::placeholder,
.textarea::placeholder {
    color: #617084;
}

.input:focus,
.textarea:focus,
.select select:focus {
    border-color: var(--zk-accent) !important;
    box-shadow: 0 0 0 .125em rgba(89, 184, 255, .12) !important;
}

.select:not(.is-multiple):not(.is-loading)::after {
    border-color: var(--zk-accent);
}

.help {
    font-size: .66rem;
}

.button {
    border-radius: .65rem;
    font-weight: 750;
}

.button.is-primary {
    background: var(--zk-accent-strong);
    border-color: var(--zk-accent-strong);
    color: white;
}

.button.is-primary:hover {
    background: #2b9aee;
    border-color: #2b9aee;
}

.button.is-secondary,
.button.is-dark {
    background: #e7eef7;
    border-color: #e7eef7;
    color: #09121c;
}

.button.is-secondary:hover,
.button.is-dark:hover {
    background: white;
    border-color: white;
    color: #09121c;
}

.button.is-quiet,
.button.is-light {
    background: #1c2734;
    border-color: #344356;
    color: var(--zk-text);
}

.button.is-quiet:hover,
.button.is-light:hover {
    background: #263344;
    border-color: #486078;
    color: white;
}

.button.is-warning {
    background: #d99a2b;
    border-color: #d99a2b;
    color: #130d04;
}

.button.is-danger {
    background: #d64959;
    border-color: #d64959;
    color: white;
}

.tag.is-light {
    background: #202c3a !important;
    color: #dbe6f2 !important;
}

.notification.is-danger.is-light {
    background: #39171d;
    color: #ffbcc4;
}

.notification.is-info.is-light {
    background: #102c40;
    color: #ade0ff;
}

.notification.is-success.is-light {
    background: #123624;
    color: #aff1ca;
}

.notification.is-warning.is-light {
    background: #3b2b12;
    color: #f3d295;
}

.progress {
    background-color: #202c3a;
}

.code-block {
    background: #070b10;
    color: #d9e4ef;
    border: 1px solid var(--zk-border);
    border-radius: .7rem;
    padding: .9rem;
    overflow: auto;
    font-size: .7rem;
    max-height: 28rem;
}

.code-block.compact {
    max-height: 18rem;
}

.table {
    background: transparent !important;
    color: var(--zk-text) !important;
}

.table th,
.table td {
    border-color: var(--zk-border) !important;
}

.table tbody tr:hover {
    background: rgba(255, 255, 255, .025) !important;
}

.breadcrumb a {
    color: var(--zk-text-soft);
}

.breadcrumb li.is-active a {
    color: var(--zk-text);
}

@media (max-width: 1180px) {
    .management-layout {
        grid-template-columns: minmax(320px, .85fr) minmax(460px, 1.15fr);
    }

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

@media (max-width: 900px) {
    .management-layout,
    .selection-grid {
        grid-template-columns: 1fr;
    }

    .management-status {
        position: static;
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }

    .page-heading,
    .device-page-heading {
        flex-direction: column;
        align-items: stretch;
    }

    .device-heading-actions {
        justify-content: space-between;
    }
}

@media (max-width: 620px) {
    .app-main {
        padding: 1rem .75rem;
    }

    .app-navbar .container {
        padding-left: .75rem !important;
        padding-right: .75rem !important;
    }

    .brand-subtitle,
    .app-navbar .navbar-end .is-soft {
        display: none;
    }

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

    .value-grid,
    .compact-definition {
        grid-template-columns: 1fr;
    }

    .value-grid .is-span-2 {
        grid-column: auto;
    }

    .inline-command,
    .device-heading-actions,
    .discovered-device {
        align-items: stretch;
        flex-direction: column;
    }

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