:root {
    color-scheme: light;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #172033;
    background: #eef2f7;
}

* {
    box-sizing: border-box;
}

.table-subline {
    display: block;
    margin-top: 0.35rem;
    color: #667085;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.58rem;
    border-radius: 999px;
    background: #eef2f6;
    color: #344054;
    font-size: 0.78rem;
    font-weight: 750;
}

.status-valid,
.status-succeeded {
    background: #e8f7ef;
    color: #17643a;
}

.status-invalid,
.status-failed,
.status-recovery_required {
    background: #fdecec;
    color: #9f1c1c;
}

.status-planned,
.status-running {
    background: #eaf2ff;
    color: #1859a9;
}

.status-blocked {
    background: #fff4df;
    color: #8a5400;
}

.release-meta.release-detail-meta {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14.375rem), 1fr));
}

.hash-value,
.technical-list li {
    overflow-wrap: anywhere;
    word-break: break-word;
}

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

.release-contents-grid > div {
    min-width: 0;
}

.technical-list {
    display: grid;
    gap: 0.55rem;
    margin: 0.8rem 0 0;
    padding-left: 1.2rem;
}

.technical-list small {
    display: block;
    margin-top: 0.2rem;
    color: #667085;
}

.deployment-target-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16.25rem), 1fr));
    gap: 0.8rem;
}

form.management-form label.deployment-target-card {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid #d8e0ea;
    border-radius: 0.75rem;
    background: #fff;
}

.deployment-target-card input[type="radio"] {
    flex: 0 0 auto;
    width: 1.05rem;
    min-width: 1.05rem;
    height: 1.05rem;
    min-height: 0;
    margin: 0.16rem 0 0;
    padding: 0;
    accent-color: #3158a6;
}

.deployment-target-card > span {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
}

form.management-form label.deployment-target-card.is-disabled {
    border-color: #e1e5eb;
    background: #f6f7f9;
    color: #667085;
    opacity: 0.82;
}

.deployment-confirm-dialog {
    width: min(92vw, 35rem);
    max-height: 88vh;
    overflow: auto;
    padding: 0;
    border: 0;
    border-radius: 1.125rem;
    box-shadow: 0 1.5rem 5rem rgba(16, 24, 40, 0.25);
}

.deployment-confirm-dialog::backdrop {
    background: rgba(15, 23, 42, 0.52);
}

.deployment-confirm-dialog form {
    padding: clamp(1.25rem, 4vw, 2rem);
}

.deployment-execute-card {
    border-color: #b9d2f5;
}

@media (max-width: 45rem) {
    .release-contents-grid {
        grid-template-columns: 1fr;
    }

    .deployment-confirm-dialog {
        width: calc(100vw - 1.5rem);
    }
}

body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(circle at top left, rgba(49, 88, 166, 0.14), transparent 34rem),
        #eef2f7;
}

.shell {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 2rem 1.25rem;
}

.status-card {
    width: min(100%, 42rem);
    padding: clamp(2rem, 6vw, 4rem);
    border: 1px solid rgba(23, 32, 51, 0.1);
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 1.5rem 4rem rgba(23, 32, 51, 0.1);
}

.auth-card {
    width: min(100%, 36rem);
}

.dashboard-card {
    width: min(100%, 58rem);
}

.eyebrow {
    margin: 0 0 0.75rem;
    color: #3158a6;
    font-size: 0.75rem;
    font-weight: 750;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

h1 {
    margin: 0;
    font-size: clamp(2rem, 7vw, 3.5rem);
    line-height: 1.02;
    letter-spacing: -0.045em;
}

.intro {
    max-width: 35rem;
    margin: 1.25rem 0 2rem;
    color: #596579;
    font-size: 1.05rem;
    line-height: 1.65;
}

.release-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0;
}

.release-meta div {
    padding: 1rem;
    border-radius: 0.9rem;
    background: #f4f6fa;
}

.release-meta dt {
    margin-bottom: 0.35rem;
    color: #6b7587;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.release-meta dd {
    margin: 0;
    overflow-wrap: anywhere;
    font-weight: 700;
}

.auth-form {
    display: grid;
    gap: 1rem;
    margin: 0 0 2rem;
}

.auth-form label {
    display: grid;
    gap: 0.45rem;
    color: #33405a;
    font-size: 0.9rem;
    font-weight: 700;
}

.auth-form input {
    width: 100%;
    min-height: 3rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid #c9d1dd;
    border-radius: 0.75rem;
    background: #fff;
    color: #172033;
    font: inherit;
}

.auth-form input:focus {
    border-color: #3158a6;
    outline: 3px solid rgba(49, 88, 166, 0.16);
}

button {
    min-height: 2.75rem;
    padding: 0.7rem 1rem;
    border: 1px solid #3158a6;
    border-radius: 0.75rem;
    background: #3158a6;
    color: #fff;
    font: inherit;
    font-weight: 750;
    cursor: pointer;
}

button:hover {
    background: #274987;
}

button:focus-visible {
    outline: 3px solid rgba(49, 88, 166, 0.24);
    outline-offset: 2px;
}

.button-secondary {
    border-color: #c9d1dd;
    background: #fff;
    color: #263550;
}

.button-secondary:hover {
    background: #f4f6fa;
}

.notice {
    margin: 1rem 0;
    padding: 0.9rem 1rem;
    border: 1px solid #d7deea;
    border-radius: 0.8rem;
    background: #f7f9fc;
    color: #45526a;
    line-height: 1.5;
}

.notice-error {
    border-color: #efc3c3;
    background: #fff5f5;
    color: #8b2f2f;
}

.notice-warning {
    border-color: #ead59b;
    background: #fffaf0;
    color: #70591f;
}

.notice-success {
    border-color: #acd9c3;
    background: #f2fbf6;
    color: #236544;
}

.field-hint {
    margin: -0.25rem 0 0;
    color: #6b7587;
    font-size: 0.85rem;
    line-height: 1.45;
}

.setup-actions {
    margin: 1.25rem 0 0;
    text-align: center;
}

.security-steps {
    display: grid;
    gap: 0.65rem;
    margin: 0 0 1.25rem;
    padding-left: 1.25rem;
    color: #45526a;
    line-height: 1.55;
}

.secret-display {
    margin: 1rem 0;
    padding: 1rem;
    border: 1px dashed #9eabc0;
    border-radius: 0.8rem;
    background: #f4f6fa;
    overflow-wrap: anywhere;
    text-align: center;
}

.secret-display code {
    font-size: 1rem;
    letter-spacing: 0.08em;
}

.recovery-code-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    padding: 0;
    list-style: none;
}

.recovery-code-list li {
    padding: 0.75rem;
    border-radius: 0.65rem;
    background: #f4f6fa;
    text-align: center;
}

.text-link {
    color: #3158a6;
    font-weight: 700;
    text-underline-offset: 0.2em;
}

code {
    padding: 0.1rem 0.3rem;
    border-radius: 0.3rem;
    background: #edf1f7;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.92em;
}

.dashboard-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
}

.dashboard-heading .intro {
    margin-bottom: 1rem;
}

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

.dashboard-notices {
    margin-top: 1.5rem;
}

.status-dot {
    display: inline-block;
    width: 0.55rem;
    height: 0.55rem;
    margin-right: 0.4rem;
    border-radius: 50%;
    background: #27845a;
    box-shadow: 0 0 0 3px rgba(39, 132, 90, 0.12);
}

@media (max-width: 48rem) {
    .dashboard-heading {
        display: grid;
    }

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

@media (max-width: 34rem) {
    .release-meta {
        grid-template-columns: 1fr;
    }

    .status-card {
        padding: 1.5rem;
        border-radius: 1.1rem;
    }
}

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

.app-layout {
    display: grid;
    grid-template-columns: 16rem minmax(0, 1fr);
    min-height: 100vh;
}

.app-sidebar {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: 1.5rem 1rem;
    border-right: 1px solid #d9e0ea;
    background: rgba(248, 250, 253, 0.97);
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.35rem 0.5rem 1.5rem;
    color: #172033;
    font-weight: 800;
    text-decoration: none;
}

.brand-mark {
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    border-radius: 0.7rem;
    background: #3158a6;
    color: #fff;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
}

.app-nav {
    display: grid;
    gap: 0.3rem;
}

.app-nav a {
    padding: 0.75rem 0.85rem;
    border-radius: 0.7rem;
    color: #45526a;
    font-weight: 700;
    text-decoration: none;
}

.app-nav a:hover {
    background: #edf1f7;
    color: #172033;
}

.app-nav a[aria-current="page"] {
    background: #e3eaf8;
    color: #274987;
}

.sidebar-operator {
    display: grid;
    gap: 0.25rem;
    margin-top: auto;
    padding: 1rem 0.5rem 0;
    border-top: 1px solid #d9e0ea;
    overflow-wrap: anywhere;
}

.sidebar-operator span,
.sidebar-operator small {
    color: #6b7587;
    font-size: 0.75rem;
}

.sidebar-operator form {
    margin-top: 0.75rem;
}

.button-full {
    width: 100%;
}

.app-main {
    width: min(100%, 90rem);
    padding: clamp(1.5rem, 4vw, 3.5rem);
}

.page-heading {
    margin-bottom: 1.5rem;
}

.page-heading h1 {
    font-size: clamp(2rem, 4vw, 3rem);
}

.page-heading > div > p:last-child {
    margin: 0.75rem 0 0;
    color: #596579;
    line-height: 1.55;
}

.action-heading,
.section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
}

.content-card {
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid rgba(23, 32, 51, 0.1);
    border-radius: 1.1rem;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 0.75rem 2rem rgba(23, 32, 51, 0.06);
}

.app-main > .content-card ~ .content-card {
    margin-top: 1.125rem;
}

.content-card h2,
.empty-state h2,
.section-heading h2 {
    margin: 0;
    font-size: 1.35rem;
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11.5rem), 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.metric-grid article {
    display: grid;
    gap: 0.25rem;
    min-height: 6.75rem;
    align-content: start;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(23, 32, 51, 0.1);
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 0.75rem 2rem rgba(23, 32, 51, 0.05);
}

.metric-grid article > span,
.metric-grid article > small {
    color: #6b7587;
    font-size: 0.8rem;
    font-weight: 700;
}

.metric-grid strong {
    color: #172033;
    font-size: clamp(1.45rem, 2.2vw, 2rem);
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.dashboard-info {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 1fr);
    align-items: center;
    gap: 2rem;
}

.dashboard-info h2,
.dashboard-info p {
    margin-top: 0;
}

.table-card {
    padding: 0;
    overflow: hidden;
}

.table-card > .section-heading,
.table-card > .empty-state,
.table-card > .empty-inline {
    padding: 1.5rem;
}

.table-scroll {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

th,
td {
    padding: 1rem 1.1rem;
    border-bottom: 1px solid #e5e9f0;
    text-align: left;
    vertical-align: middle;
}

th {
    color: #6b7587;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

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

tbody tr:hover {
    background: #fafbfc;
}

.row-link,
.subtle-link {
    color: #274987;
    font-weight: 750;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

.subtle-link {
    color: #45526a;
    font-weight: 650;
}

.status-badge,
.environment-badge,
.health-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 0.3rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 800;
    white-space: nowrap;
}

.status-badge.is-active {
    background: #e8f6ee;
    color: #236544;
}

.status-badge.is-inactive {
    background: #edf0f4;
    color: #687386;
}

.environment-badge {
    background: #eef2fb;
    color: #3158a6;
}

.health-badge.is-healthy {
    background: #e8f6ee;
    color: #236544;
}

.health-badge.is-problem {
    background: #fff1f0;
    color: #9b332c;
}

.health-badge.is-unknown {
    background: #edf0f4;
    color: #687386;
}

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

.health-summary-grid article {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border: 1px solid rgba(23, 32, 51, 0.1);
    border-radius: 1rem;
    background: #fff;
}

.health-summary-grid span,
.health-checked {
    color: #6b7587;
    font-size: 0.78rem;
    font-weight: 700;
}

.health-summary-grid strong {
    font-size: 1.6rem;
}

.health-compact {
    display: grid;
    min-width: 10rem;
    gap: 0.35rem;
}

.health-version {
    color: #45526a;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.78rem;
}

.health-checked {
    display: block;
}

.health-stale {
    display: block;
    color: #986f19;
    font-size: 0.75rem;
    font-weight: 750;
}

.monitoring-status-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 1fr);
    align-items: center;
    gap: 1rem 2rem;
}

.monitoring-status-card h2,
.monitoring-status-card p {
    margin: 0;
}

.monitoring-status-card .notice {
    grid-column: 1 / -1;
}

.health-detail-card > p {
    color: #596579;
    line-height: 1.6;
}

.health-check-form {
    margin: 0;
}

.health-detail-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin: 1.5rem 0 0;
}

.health-detail-list div {
    display: grid;
    gap: 0.3rem;
    padding: 1rem;
    border-radius: 0.8rem;
    background: #f6f8fb;
}

.health-detail-list dt {
    color: #6b7587;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.health-detail-list dd {
    margin: 0;
    overflow-wrap: anywhere;
    font-weight: 750;
}

.url-cell {
    display: inline-block;
    max-width: 22rem;
    overflow: hidden;
    color: #45526a;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.button-link {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    padding: 0.7rem 1rem;
    border: 1px solid #3158a6;
    border-radius: 0.75rem;
    background: #3158a6;
    color: #fff;
    font-weight: 750;
    text-decoration: none;
    white-space: nowrap;
}

.button-link:hover {
    background: #274987;
}

.button-link.button-secondary {
    border-color: #c9d1dd;
    background: #fff;
    color: #263550;
}

.button-link.button-secondary:hover {
    background: #f4f6fa;
}

.management-form {
    display: grid;
    gap: 1.2rem;
}

.management-form label:not(.check-field) {
    display: grid;
    gap: 0.45rem;
    color: #33405a;
    font-size: 0.9rem;
    font-weight: 750;
}

.management-form label small {
    color: #7b8596;
    font-weight: 600;
}

.management-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.management-form textarea,
.management-form select {
    width: 100%;
    min-height: 3rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid #c9d1dd;
    border-radius: 0.75rem;
    background: #fff;
    color: #172033;
    font: inherit;
}

.management-form textarea {
    min-height: 8rem;
    resize: vertical;
}

.management-form input:focus,
.management-form textarea:focus,
.management-form select:focus {
    border-color: #3158a6;
    outline: 3px solid rgba(49, 88, 166, 0.16);
}

.file-upload-field {
    display: grid;
    gap: 0.45rem;
}

.file-upload-field > .field-label {
    color: #33405a;
    font-size: 0.9rem;
    font-weight: 750;
}

.file-upload-control {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.file-upload-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

form.management-form label.file-upload-button {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    padding: 0.7rem 1rem;
    border: 1px solid #3158a6;
    border-radius: 0.75rem;
    background: #3158a6;
    color: #fff;
    font: inherit;
    font-weight: 750;
    cursor: pointer;
}

form.management-form label.file-upload-button:hover,
form.management-form label.file-upload-button:active,
.file-upload-input:focus-visible + .file-upload-button {
    background: #274987;
    color: #fff;
}

.file-upload-input:focus-visible + .file-upload-button {
    outline: 3px solid rgba(49, 88, 166, 0.24);
    outline-offset: 2px;
}

.file-upload-name {
    min-width: 0;
    color: #596579;
    font-size: 0.9rem;
    font-weight: 650;
    overflow-wrap: anywhere;
}

.file-upload-field > small {
    color: #7b8596;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.45;
}

.form-card {
    max-width: 58rem;
}

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

.check-field {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: fit-content;
    color: #33405a;
    font-weight: 750;
}

.check-field input {
    width: 1.15rem;
    height: 1.15rem;
    accent-color: #3158a6;
}

.operations-section + .operations-section {
    margin-top: 1rem;
}

.operations-section-intro {
    max-width: 52rem;
    margin: 0.55rem 0 0;
    color: #596579;
    line-height: 1.55;
}

.operations-fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.operations-fieldset > legend {
    margin-bottom: 0.65rem;
    color: #33405a;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.operations-choice-grid,
.operations-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.operations-choice {
    width: 100%;
    min-width: 0;
    align-items: flex-start;
    padding: 0.9rem 1rem;
    border: 1px solid #d7deea;
    border-radius: 0.85rem;
    background: #fff;
    cursor: pointer;
}

.operations-choice:hover,
.operations-choice:focus-within {
    border-color: #9eafd0;
    background: #f8faff;
}

.operations-choice input,
.operations-instance-card input,
.operations-maintenance-option input {
    flex: 0 0 auto;
    width: 1.05rem;
    min-width: 1.05rem;
    height: 1.05rem;
    min-height: 0;
    margin: 0.16rem 0 0;
    padding: 0;
}

.operations-choice span,
.operations-maintenance-option span {
    display: grid;
    min-width: 0;
    gap: 0.2rem;
}

.operations-choice small,
.operations-maintenance-option small {
    color: #6b7587;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.4;
}

.operations-instance-list {
    display: grid;
    gap: 0.65rem;
    min-width: 0;
}

.operations-instance-card {
    display: grid;
    grid-template-columns: 1.2rem minmax(0, 1fr);
    align-items: center;
    gap: 0.8rem;
    width: 100%;
    min-width: 0;
    padding: 0.85rem 1rem;
    border: 1px solid #d7deea;
    border-radius: 0.85rem;
    background: #fff;
}

label.operations-instance-card {
    cursor: pointer;
}

label.operations-instance-card:hover,
label.operations-instance-card:focus-within {
    border-color: #9eafd0;
    background: #f8faff;
}

.operations-instance-list.is-all-mode label.operations-instance-card {
    background: #f5f7fa;
    cursor: default;
}

.operations-instance-card.is-production {
    border-color: #dfc684;
    box-shadow: inset 0.22rem 0 #c18a16;
}

.operations-instance-card.is-disabled {
    border-color: #e1e5eb;
    background: #f5f6f8;
    color: #667184;
}

.operations-selection-placeholder {
    width: 1.05rem;
    height: 1.05rem;
    border: 1px solid #c9d1dd;
    border-radius: 0.25rem;
    background: #e8ebf0;
}

.operations-instance-body {
    display: grid;
    min-width: 0;
    gap: 0.45rem;
}

.operations-instance-heading,
.operations-instance-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem 0.65rem;
    min-width: 0;
}

.operations-instance-heading strong {
    min-width: 0;
    overflow-wrap: anywhere;
}

.operations-instance-meta small {
    color: #6b7587;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.4;
}

.operations-instance-meta .operations-technical-code {
    color: #4e596b;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-weight: 700;
}

.operations-state-badge {
    display: inline-flex;
    width: fit-content;
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    white-space: nowrap;
}

.operations-state-badge.state-ready {
    background: #e8f6ee;
    color: #236544;
}

.operations-state-badge.state-unconfigured,
.operations-state-badge.state-unavailable {
    background: #e5e8ed;
    color: #596579;
}

.operations-state-badge.state-incompatible {
    background: #fff1f0;
    color: #8b3731;
}

.environment-badge.is-production {
    background: #fff0cf;
    color: #7b5710;
}

.environment-badge.is-staging {
    background: #eef2fb;
    color: #3158a6;
}

.operations-settings-grid {
    align-items: stretch;
}

.operations-maintenance-option {
    width: 100%;
    min-width: 0;
    align-items: flex-start;
    padding: 0.75rem 0.85rem;
    border: 1px solid #d7deea;
    border-radius: 0.75rem;
    background: #f7f9fc;
}

.operations-maintenance-option[hidden] {
    display: none;
}

.operations-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.operations-form-footer .field-hint {
    max-width: 44rem;
    margin: 0;
}

.operations-form-footer button {
    flex: 0 0 auto;
}

.operations-history {
    clear: both;
}

.operations-history-operation {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.operations-history-operation small {
    color: #667184;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.form-actions {
    display: flex;
    gap: 0.75rem;
    padding-top: 0.5rem;
}

.detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(16rem, 0.8fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

.detail-list {
    display: grid;
    gap: 1rem;
    margin: 1.5rem 0 0;
}

.detail-list div {
    display: grid;
    gap: 0.3rem;
}

.detail-list dt {
    color: #6b7587;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.detail-list dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.security-status-card .detail-list {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}

.security-status-card .detail-list div {
    padding: 0.85rem 1rem;
    border-radius: 0.75rem;
    background: #f4f6fa;
}

.action-disclosure {
    padding: 0;
    overflow: hidden;
}

.action-disclosure > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    min-height: 4.75rem;
    padding: 1.15rem 1.35rem;
    cursor: pointer;
    list-style: none;
}

.action-disclosure > summary::-webkit-details-marker {
    display: none;
}

.action-disclosure > summary:focus-visible {
    outline: 3px solid rgba(49, 88, 166, 0.24);
    outline-offset: -3px;
}

.disclosure-copy {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
}

.disclosure-copy .eyebrow {
    margin-bottom: 0;
}

.disclosure-copy strong {
    color: #172033;
    font-size: 1.05rem;
}

.disclosure-copy small {
    color: #667085;
    font-weight: 600;
    line-height: 1.4;
}

.disclosure-state {
    flex: 0 0 auto;
    color: #3158a6;
    font-size: 0.82rem;
    font-weight: 750;
}

.disclosure-state .is-close,
.action-disclosure[open] .disclosure-state .is-open {
    display: none;
}

.action-disclosure[open] .disclosure-state .is-close {
    display: inline;
}

.disclosure-content {
    padding: 1.25rem 1.35rem 1.35rem;
    border-top: 1px solid #e1e6ee;
}

.detail-number {
    display: block;
    font-size: 3rem;
}

.preserve-lines {
    line-height: 1.65;
    white-space: pre-line;
}

.muted {
    margin-left: 0.5rem;
    color: #6b7587;
}

.empty-state {
    max-width: 40rem;
    margin: 0 auto;
    text-align: center;
}

.empty-state p,
.empty-inline {
    color: #596579;
    line-height: 1.6;
}

@media (max-width: 72rem) {
    .health-detail-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 52rem) {
    .app-layout {
        grid-template-columns: 1fr;
    }

    .app-sidebar {
        position: static;
        display: grid;
        grid-template-columns: 1fr;
        height: auto;
        padding: 1rem;
        border-right: 0;
        border-bottom: 1px solid #d9e0ea;
    }

    .brand {
        padding-bottom: 0.75rem;
    }

    .app-nav {
        display: flex;
        overflow-x: auto;
        padding-bottom: 0.25rem;
    }

    .app-nav a {
        flex: 0 0 auto;
    }

    .sidebar-operator {
        margin-top: 0.75rem;
    }

    .dashboard-info,
    .detail-grid,
    .form-grid,
    .health-summary-grid,
    .monitoring-status-card,
    .operations-choice-grid,
    .operations-settings-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 38rem) {
    .app-main {
        padding: 1.25rem 1rem 2rem;
    }

    .action-heading,
    .section-heading,
    .form-actions {
        display: grid;
    }

    .button-link,
    .form-actions button,
    .health-check-form button,
    .operations-form-footer button {
        width: 100%;
    }

    .operations-form-footer {
        display: grid;
    }

    .operations-instance-card {
        align-items: flex-start;
        padding: 0.8rem;
    }

    .operations-instance-heading,
    .operations-instance-meta {
        align-items: flex-start;
    }

    .health-detail-list {
        grid-template-columns: 1fr;
    }

    .recovery-code-list {
        grid-template-columns: 1fr;
    }

    .file-upload-control,
    .action-disclosure > summary {
        display: grid;
    }

    .file-upload-button {
        width: 100%;
    }

    .disclosure-state {
        justify-self: start;
    }

    th,
    td {
        padding: 0.85rem;
    }

    .muted {
        display: block;
        margin: 0.6rem 0 0;
    }
}

/* Keep the single-instance preview readable before its explicit confirmation. */
.binding-preview-card,
.binding-preview-confirm-dialog {
    min-width: 0;
    overflow-wrap: anywhere;
}
.binding-preview-card .management-form {
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
}
.binding-preview-card .management-form > * { min-width: 0; }
.binding-preview-card button,
.binding-preview-card .button-link {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}
.binding-preview-confirm-dialog .form-actions {
    flex-wrap: wrap;
    grid-template-columns: minmax(0, 1fr);
}
.binding-preview-card button:disabled,
.binding-preview-card button:disabled:hover,
.binding-preview-card [aria-disabled="true"],
.binding-preview-card [aria-disabled="true"]:hover {
    border-color: #c9d1dd;
    background: #e9edf2;
    color: #526071;
    cursor: not-allowed;
    text-decoration: none;
}
.binding-submit-status { display: flex; align-items: flex-start; gap: .65rem; }
.binding-submit-spinner {
    flex: 0 0 auto;
    width: 1.1rem;
    height: 1.1rem;
    margin-top: .15rem;
    border: 3px solid #c9d1dd;
    border-top-color: #3158a6;
    border-radius: 50%;
    animation: binding-submit-spin 1s linear infinite;
}
/* Explicitly preserve hidden even where button-link/spinner sets display. */
.binding-preview-card [data-binding-reconcile][hidden],
.binding-submit-spinner[hidden] { display: none; }
@keyframes binding-submit-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .binding-submit-spinner { animation: none; }
}

/* Scoped instance overview: existing management controls and table, no runtime requests. */
.instance-list-filters { margin-bottom: 1rem; }
.instance-list-filter-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.instance-list-search { grid-column: span 2; }
.instance-list-actions, .instance-list-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1rem; }
.instance-list-pagination { justify-content: center; padding: 0 1rem 1rem; }
.instance-list-count { margin: 1rem 1.25rem; color: #6b7587; }
.instance-list-host { overflow-wrap: anywhere; }
@media (max-width: 52rem) {
    .instance-list-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 38rem) {
    .instance-list-filter-grid { grid-template-columns: minmax(0, 1fr); }
    .instance-list-search { grid-column: auto; }
    .instance-list-table .table-scroll { overflow: visible; }
    .instance-list-table table, .instance-list-table tbody, .instance-list-table tr { display: block; width: 100%; }
    .instance-list-table thead { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
    .instance-list-table tr { padding: .75rem 0; border-bottom: 1px solid #edf0f4; }
    .instance-list-table td { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: .25rem .75rem; padding: .5rem 1rem; border: 0; }
    .instance-list-table td::before { content: attr(data-label); grid-row: 1; color: #6b7587; font-size: .78rem; font-weight: 700; }
    .instance-list-table td { min-width: 0; overflow-wrap: anywhere; }
    .instance-list-table td > * { grid-column: 2; min-width: 0; max-width: 100%; }
    .instance-list-table .health-badge,
    .instance-list-table .status-badge,
    .instance-list-table .environment-badge {
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
    }
}