.op-workflow-page {
    --op-accent: #175cd3;
    --op-accent-hover: #1849a9;
    --op-canvas: #f4f7fb;
    --op-surface: #ffffff;
    --op-surface-subtle: #f8fafc;
    --op-text: #101828;
    --op-muted: #475467;
    --op-border: #d0d9e6;
    --op-warning: #93370d;
    --op-warning-bg: #fff8eb;
    --op-danger: #b42318;
    --op-danger-bg: #fff1f0;
    color: var(--op-text);
    font-variant-numeric: tabular-nums;
}

.op-workflow-page,
.op-workflow-page * {
    box-sizing: border-box;
}

.op-workflow-page .op-context-header {
    display: grid;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--op-border);
}

.op-workflow-page .op-back-link {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: .45rem;
    color: var(--op-muted);
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
}

.op-workflow-page .op-back-link:hover {
    color: var(--op-accent);
    text-decoration: underline;
    text-underline-offset: .2rem;
}

.op-workflow-page .op-context-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
}

.op-workflow-page .op-eyebrow {
    margin-bottom: .35rem;
    color: var(--op-muted);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.op-workflow-page .op-title {
    margin: 0;
    color: var(--op-text);
    font-size: clamp(1.6rem, 2.2vw, 2.1rem);
    font-weight: 720;
    letter-spacing: -.025em;
    line-height: 1.16;
}

.op-workflow-page .op-title-id {
    color: var(--op-muted);
    font-weight: 650;
}

.op-workflow-page .op-subtitle,
.op-workflow-page .op-context-line {
    margin-top: .45rem;
    color: var(--op-muted);
    font-size: .95rem;
}

.op-workflow-page .op-status {
    display: inline-flex;
    min-height: 2rem;
    align-items: center;
    gap: .5rem;
    padding: .25rem .65rem;
    border: 1px solid var(--op-border);
    border-radius: 6px;
    background: var(--op-surface-subtle);
    color: var(--op-text);
    font-size: .8125rem;
    font-weight: 700;
    white-space: nowrap;
}

.op-workflow-page .op-status::before {
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: #98a2b3;
    content: "";
}

.op-workflow-page .op-status-cobalt::before { background: var(--op-accent); }
.op-workflow-page .op-status-warning { border-color: #f5c97a; background: var(--op-warning-bg); color: var(--op-warning); }
.op-workflow-page .op-status-warning::before { background: #dc6803; }
.op-workflow-page .op-status-danger { border-color: #f7b4ad; background: var(--op-danger-bg); color: var(--op-danger); }
.op-workflow-page .op-status-danger::before { background: var(--op-danger); }

.op-workflow-page .op-action-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
}

.op-workflow-page .op-next-action {
    display: grid;
    min-width: min(100%, 28rem);
    gap: .5rem;
}

.op-workflow-page .op-next-action-context {
    max-width: 30rem;
    color: var(--op-muted);
    font-size: .875rem;
}

.op-workflow-page .op-next-action-form {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) auto;
    align-items: end;
    gap: .75rem;
}

.op-workflow-page .btn {
    min-height: 2.5rem;
    border-radius: 6px;
    font-weight: 650;
}

.op-workflow-page .btn-primary {
    border-color: var(--op-accent);
    background: var(--op-accent);
}

.op-workflow-page .btn-primary:hover,
.op-workflow-page .btn-primary:focus-visible {
    border-color: var(--op-accent-hover);
    background: var(--op-accent-hover);
}

.op-workflow-page .op-btn-warning {
    border: 1px solid #e9a23b;
    background: transparent;
    color: var(--op-warning);
}

.op-workflow-page .op-btn-warning:hover {
    background: var(--op-warning-bg);
    color: #7a2e0e;
}

.op-workflow-page .op-section {
    margin-bottom: 1.5rem;
    padding: 1.25rem;
    border: 1px solid var(--op-border);
    border-radius: 6px;
    background: var(--op-surface);
}

.op-workflow-page .op-section-tonal {
    background: var(--op-surface-subtle);
}

.op-workflow-page .op-section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.op-workflow-page .op-section-title {
    margin: 0;
    color: var(--op-text);
    font-size: 1.05rem;
    font-weight: 720;
    letter-spacing: -.01em;
}

.op-workflow-page .op-section-description {
    margin: .25rem 0 0;
    color: var(--op-muted);
    font-size: .925rem;
}

.op-workflow-page .op-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem 1.5rem;
}

.op-workflow-page .op-fact-label {
    margin-bottom: .2rem;
    color: var(--op-muted);
    font-size: .8125rem;
    font-weight: 650;
}

.op-workflow-page .op-fact-value {
    overflow-wrap: anywhere;
    color: var(--op-text);
    font-weight: 600;
}

.op-workflow-page .op-fact {
    padding: .25rem 0;
}

.op-workflow-page .op-table-wrap {
    border-top: 1px solid var(--op-border);
}

.op-workflow-page .table {
    --bs-table-bg: transparent;
    margin-bottom: 0;
    color: var(--op-text);
}

.op-workflow-page .table > :not(caption) > * > * {
    padding: .75rem .65rem;
    border-bottom-color: #e4e9f0;
    vertical-align: middle;
}

.op-workflow-page .table thead th {
    color: var(--op-muted);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.op-workflow-page .op-feedback {
    border: 0;
    border-left: 3px solid var(--op-border);
    border-radius: 0 6px 6px 0;
    background: var(--op-surface-subtle);
    color: var(--op-text);
}

.op-workflow-page .validation-summary-valid {
    display: none;
}

.op-workflow-page .op-empty-row td {
    padding: 1.15rem .65rem;
    color: var(--op-muted);
    text-align: center;
}

.op-workflow-page .op-inline-technical {
    margin-top: .35rem;
    color: var(--op-muted);
    font-size: .8125rem;
}

.op-workflow-page .op-inline-technical > summary {
    width: fit-content;
    cursor: pointer;
    font-weight: 650;
}

.op-workflow-page .alert-info.op-feedback { border-left-color: var(--op-accent); }
.op-workflow-page .alert-warning.op-feedback { border-left-color: #dc6803; background: var(--op-warning-bg); }
.op-workflow-page .alert-danger.op-feedback { border-left-color: var(--op-danger); background: var(--op-danger-bg); }

.op-workflow-page .op-timeline {
    position: relative;
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.op-workflow-page .op-timeline-item {
    position: relative;
    padding: 0 0 1.1rem 1.55rem;
}

.op-workflow-page .op-timeline-item::before {
    position: absolute;
    top: .35rem;
    left: .18rem;
    width: .55rem;
    height: .55rem;
    border: 2px solid var(--op-accent);
    border-radius: 50%;
    background: var(--op-surface);
    content: "";
}

.op-workflow-page .op-timeline-item:not(:last-child)::after {
    position: absolute;
    top: 1rem;
    bottom: -.1rem;
    left: .43rem;
    width: 1px;
    background: var(--op-border);
    content: "";
}

.op-workflow-page .op-timeline-meta {
    color: var(--op-muted);
    font-size: .875rem;
}

.op-workflow-page .op-disclosure {
    border-top: 1px solid var(--op-border);
}

.op-workflow-page .op-disclosure > summary {
    padding: .9rem 0;
    color: var(--op-text);
    cursor: pointer;
    font-weight: 680;
}

.op-workflow-page .op-disclosure > summary::marker {
    color: var(--op-accent);
}

.op-workflow-page .op-decision-area {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(18rem, .65fr);
    gap: 1rem;
    scroll-margin-top: 1rem;
}

.op-workflow-page .op-decision-primary {
    border-color: #a9c7f7;
    background: #f7faff;
}

.op-workflow-page .op-decision-warning {
    border-color: #f2d49b;
    background: var(--op-warning-bg);
}

.op-workflow-page .op-step-number {
    display: inline-grid;
    width: 1.75rem;
    height: 1.75rem;
    margin-right: .45rem;
    place-items: center;
    border-radius: 6px;
    background: #eaf2ff;
    color: var(--op-accent);
    font-size: .8rem;
    font-weight: 750;
}

.op-workflow-page .op-advanced {
    margin-bottom: 1.5rem;
    padding: 0 1.25rem;
    border: 1px solid var(--op-border);
    border-radius: 6px;
    background: var(--op-surface-subtle);
}

.op-workflow-page .op-advanced > summary {
    padding: 1rem 0;
    cursor: pointer;
    font-weight: 680;
}

.op-workflow-page .op-form-actions {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--op-border);
}

.op-workflow-page .form-control,
.op-workflow-page .form-select {
    min-height: 2.6rem;
    border-color: #b8c4d4;
    border-radius: 6px;
}

.op-workflow-page .form-control:focus,
.op-workflow-page .form-select:focus {
    border-color: var(--op-accent);
    box-shadow: 0 0 0 .18rem rgb(23 92 211 / 16%);
}

.op-workflow-page :is(a, button, input, select, textarea, summary):focus-visible {
    outline: 2px solid var(--op-accent);
    outline-offset: 2px;
}

.op-workflow-page .op-processing-overlay {
    z-index: 2000;
    backdrop-filter: blur(1px);
}

.op-workflow-page .op-processing-dialog {
    max-width: 22rem;
    border: 1px solid var(--op-border);
    border-radius: 8px;
    background: var(--op-surface);
    box-shadow: 0 18px 42px rgb(16 24 40 / 18%);
}

.op-module-hub,
.op-admin-list-page {
    min-height: calc(100vh - 8rem);
    margin: -.5rem -.75rem -3rem;
    padding: 1.75rem 1.25rem 4rem;
    background: var(--op-canvas);
}

.op-hub-header {
    margin-bottom: 1.25rem !important;
}

.op-hub-scope {
    display: grid;
    justify-items: end;
    gap: .2rem;
    color: var(--op-muted);
    font-size: .8125rem;
}

.op-hub-scope > span {
    padding: .2rem .5rem;
    border: 1px solid var(--op-border);
    border-radius: 5px;
    background: var(--op-surface-subtle);
    font-weight: 700;
}

.op-hub-scope > strong {
    color: var(--op-text);
    font-weight: 650;
}

.op-hub-section {
    margin-bottom: 1rem;
    border: 1px solid var(--op-border);
    border-radius: 6px;
    background: var(--op-surface);
}

.op-hub-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.25rem 1.5rem;
}

.op-hub-section-heading h2 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 720;
}

.op-hub-section-heading p {
    max-width: 48rem;
    margin: .3rem 0 0;
    color: var(--op-muted);
    font-size: .925rem;
}

.op-hub-destinations {
    border-top: 1px solid var(--op-border);
}

.op-hub-destination {
    display: flex;
    min-height: 5.25rem;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1rem 1.5rem;
    color: var(--op-text);
    text-decoration: none;
}

.op-hub-destination + .op-hub-destination {
    border-top: 1px solid #e4e9f0;
}

.op-hub-destination:hover {
    background: var(--op-surface-subtle);
    color: var(--op-text);
}

.op-hub-destination > span:first-child {
    display: grid;
    gap: .25rem;
}

.op-hub-destination strong {
    font-size: 1rem;
    font-weight: 720;
}

.op-hub-destination small {
    color: var(--op-muted);
    font-size: .875rem;
}

.op-hub-link-label {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    gap: .4rem;
    color: #174ea6;
    font-size: .875rem;
    font-weight: 700;
    white-space: nowrap;
}

.op-hub-operational {
    background: var(--op-surface-subtle);
}

.op-queue-count {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    color: var(--op-muted);
    font-size: .875rem;
}

.op-queue-count strong {
    color: var(--op-text);
    font-size: 1.5rem;
    font-weight: 720;
}

.op-admin-table-wrap {
    border-top: 1px solid var(--op-border);
    border-bottom: 1px solid var(--op-border);
    overflow-x: auto;
    background: rgb(255 255 255 / 72%);
}

.op-admin-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.op-admin-table thead {
    background: var(--op-surface-subtle);
}

.op-admin-table thead th {
    padding: .75rem 1rem;
    color: #5d6b80;
    font-size: .75rem;
    font-weight: 760;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.op-admin-table tbody tr {
    border-top: 1px solid #e2e7ee;
}

.op-admin-table tbody tr:hover {
    background: #f7f9fc;
}

.op-admin-table tbody th,
.op-admin-table tbody td {
    height: 5.25rem;
    padding: .9rem 1rem;
    color: #344054;
    font-size: .9rem;
    font-weight: 500;
    vertical-align: middle;
}

.op-admin-table tbody th {
    text-align: left;
}

.op-decision-queue-table th:nth-child(1) { width: 28%; }
.op-decision-queue-table th:nth-child(2) { width: 17%; }
.op-decision-queue-table th:nth-child(3) { width: 19%; }
.op-decision-queue-table th:nth-child(4) { width: 17%; }
.op-decision-queue-table th:nth-child(5) { width: 11%; }
.op-decision-queue-table th:nth-child(6) { width: 8%; }

.op-integration-queue-table th:nth-child(1) { width: 29%; }
.op-integration-queue-table th:nth-child(2) { width: 16%; }
.op-integration-queue-table th:nth-child(3) { width: 17%; }
.op-integration-queue-table th:nth-child(4) { width: 17%; }
.op-integration-queue-table th:nth-child(5) { width: 13%; }
.op-integration-queue-table th:nth-child(6) { width: 8%; }

.op-sort-button {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
}

.op-sort-button:hover {
    color: var(--op-accent);
}

.op-queue-product {
    display: block;
    color: var(--op-text);
    font-size: 1rem;
    font-weight: 720;
    line-height: 1.35;
}

.op-queue-meta {
    display: block;
    margin-top: .3rem;
    color: var(--op-muted);
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.4;
}

.op-attention-label,
.op-readiness {
    display: inline-flex;
    min-height: 1.9rem;
    align-items: center;
    gap: .4rem;
    padding: .2rem .55rem;
    border: 1px solid #f2cc84;
    border-radius: 5px;
    background: var(--op-warning-bg);
    color: #7a3e00;
    font-size: .8125rem;
    font-weight: 700;
}

.op-attention-label > span {
    display: inline-grid;
    width: 1rem;
    height: 1rem;
    place-items: center;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: .65rem;
}

.op-readiness > span {
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: currentColor;
}

.op-readiness-ready {
    border-color: #abefc6;
    background: #ecfdf3;
    color: #067647;
}

.op-readiness-warning {
    border-color: #f2cc84;
    background: var(--op-warning-bg);
    color: #7a3e00;
}

.op-readiness-blocked {
    border-color: #f7b4ad;
    background: var(--op-danger-bg);
    color: var(--op-danger);
}

.op-quiet-state {
    color: var(--op-muted);
    font-size: .8125rem;
}

.op-admin-destination {
    text-align: right;
}

.op-admin-destination a {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: flex-end;
    gap: .35rem;
    color: #526077;
    font-size: .875rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.op-admin-destination a:hover {
    color: var(--op-accent);
    text-decoration: underline;
    text-underline-offset: .2rem;
}

.op-admin-table .has-attention {
    box-shadow: inset 3px 0 #dc6803;
}

.op-admin-table .has-blocker {
    box-shadow: inset 3px 0 var(--op-danger);
}

.op-admin-empty-state {
    min-height: 13rem;
    padding: 2rem 1.5rem;
    border-top: 1px solid var(--op-border);
    border-bottom: 1px solid var(--op-border);
    background: var(--op-surface-subtle);
}

.op-admin-empty-state h2 {
    margin: 0 0 .35rem;
    font-size: 1.1rem;
}

.op-admin-empty-state p {
    max-width: 42rem;
    margin: 0;
    color: var(--op-muted);
}

.op-admin-empty-state a {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    margin-top: .75rem;
    color: var(--op-accent);
    font-weight: 700;
}

.op-decision-summary {
    margin-bottom: 1.5rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid #b8cbe8;
    border-radius: 6px;
    background: #f7faff;
}

.op-decision-summary-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.op-decision-summary-heading h2 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 720;
}

.op-review-state {
    display: inline-flex;
    min-height: 2rem;
    align-items: center;
    padding: .25rem .6rem;
    border: 1px solid var(--op-border);
    border-radius: 5px;
    font-size: .8125rem;
    font-weight: 700;
}

.op-review-state-warning {
    border-color: #f2cc84;
    background: var(--op-warning-bg);
    color: #7a3e00;
}

.op-review-state-quiet {
    background: var(--op-surface-subtle);
    color: var(--op-muted);
}

.op-decision-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid #d6e1f2;
}

.op-decision-summary-grid > div {
    display: grid;
    gap: .25rem;
    padding: 1rem 1rem 0 0;
}

.op-decision-summary-grid span {
    color: var(--op-muted);
    font-size: .8125rem;
    font-weight: 600;
}

.op-decision-summary-grid strong {
    color: var(--op-text);
    font-size: 1.15rem;
    font-weight: 720;
}

.op-secondary-disclosure {
    border: 1px solid var(--op-border);
    border-radius: 6px;
    background: var(--op-surface-subtle);
}

.op-secondary-disclosure > summary,
.op-history-disclosure > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    cursor: pointer;
    list-style: none;
    font-weight: 700;
}

.op-secondary-disclosure > summary::-webkit-details-marker,
.op-history-disclosure > summary::-webkit-details-marker {
    display: none;
}

.op-secondary-disclosure > summary small,
.op-history-disclosure > summary small {
    color: var(--op-muted);
    font-size: .8125rem;
    font-weight: 500;
}

.op-secondary-disclosure-content,
.op-history-content {
    padding: 0 1.25rem 1.25rem;
}

.op-cost-summary {
    max-width: 42rem;
}

.op-difference {
    color: #7a3e00 !important;
    font-weight: 700;
}

.op-difference-zero {
    color: var(--op-muted) !important;
}

.op-history-disclosure {
    padding: 0 !important;
}

.op-history-disclosure > summary {
    padding: 1rem 1.25rem !important;
}

.op-approval-page .op-decision-area {
    grid-template-columns: minmax(0, 1.5fr) minmax(17rem, .5fr);
}

@media (max-width: 991.98px) {
    .op-workflow-page .op-context-main,
    .op-workflow-page .op-section-header {
        flex-direction: column;
    }

    .op-workflow-page .op-action-bar {
        justify-content: flex-start;
    }

    .op-workflow-page .op-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .op-workflow-page .op-decision-area {
        grid-template-columns: 1fr;
    }

    .op-hub-section-heading,
    .op-decision-summary-heading {
        flex-direction: column;
    }

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

    .op-admin-table-wrap {
        overflow: visible;
    }

    .op-admin-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .op-admin-table,
    .op-admin-table tbody {
        display: block;
    }

    .op-admin-table tbody tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .85rem 1.25rem;
        padding: 1rem;
    }

    .op-admin-table tbody th,
    .op-admin-table tbody td {
        display: grid;
        height: auto;
        min-width: 0;
        gap: .2rem;
        padding: 0;
    }

    .op-admin-table tbody th {
        grid-column: 1 / -1;
    }

    .op-admin-table tbody :is(th, td)::before {
        color: var(--op-muted);
        content: attr(data-label);
        font-size: .72rem;
        font-weight: 760;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    .op-admin-destination {
        align-items: end;
        text-align: right;
    }
}

@media (max-width: 575.98px) {
    .op-workflow-page .op-title {
        font-size: 1.45rem;
    }

    .op-workflow-page .op-facts {
        grid-template-columns: 1fr;
    }

    .op-workflow-page .op-section {
        padding: 1rem;
    }

    .op-workflow-page .op-action-bar,
    .op-workflow-page .op-action-bar > *,
    .op-workflow-page .op-action-bar form,
    .op-workflow-page .op-action-bar .btn,
    .op-workflow-page .op-form-actions,
    .op-workflow-page .op-form-actions .btn {
        width: 100%;
    }

    .op-workflow-page .op-next-action,
    .op-workflow-page .op-next-action-form,
    .op-workflow-page .op-next-action-form .btn {
        width: 100%;
    }

    .op-workflow-page .op-next-action-form {
        grid-template-columns: 1fr;
    }

    .op-workflow-page .btn,
    .op-workflow-page .form-control,
    .op-workflow-page .form-select,
    .op-workflow-page summary {
        min-height: 2.75rem;
    }

    .op-workflow-page .op-form-actions {
        flex-direction: column;
    }

    .op-module-hub,
    .op-admin-list-page {
        margin-right: -.625rem;
        margin-left: -.625rem;
        padding: 1.25rem .75rem 3rem;
    }

    .op-hub-scope {
        justify-items: start;
    }

    .op-hub-section-heading {
        padding: 1rem;
    }

    .op-hub-section-heading .btn {
        width: 100%;
    }

    .op-hub-destination {
        min-height: 7rem;
        align-items: flex-start;
        flex-direction: column;
        gap: .4rem;
        padding: 1rem;
    }

    .op-hub-link-label {
        width: 100%;
        justify-content: space-between;
    }

    .op-queue-count {
        align-self: flex-start;
    }

    .op-admin-table tbody tr {
        grid-template-columns: 1fr;
    }

    .op-admin-table tbody th,
    .op-admin-table tbody td,
    .op-admin-destination {
        grid-column: 1;
        align-items: start;
        text-align: left;
    }

    .op-admin-destination a {
        width: 100%;
        justify-content: space-between;
    }

    .op-decision-summary {
        padding: 1rem;
    }

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

    .op-secondary-disclosure > summary,
    .op-history-disclosure > summary {
        align-items: flex-start;
        flex-direction: column;
        gap: .2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .op-workflow-page *,
    .op-workflow-page *::before,
    .op-workflow-page *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

.op-dashboard-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    justify-content: flex-end;
}

.op-dashboard-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .9rem;
    margin-bottom: 1.25rem;
}

.op-dashboard-kpi {
    display: grid;
    gap: .25rem;
    min-height: 9rem;
    padding: 1rem;
    color: var(--op-text);
    text-decoration: none;
    border: 1px solid var(--op-border);
    border-top: 3px solid var(--op-accent);
    border-radius: var(--op-radius);
    background: #fff;
    box-shadow: var(--op-shadow);
}

.op-dashboard-kpi:hover {
    color: var(--op-text);
    border-color: #98a2b3;
    transform: translateY(-1px);
}

.op-dashboard-kpi.is-attention { border-top-color: #dc6803; }
.op-dashboard-kpi.is-success { border-top-color: #079455; }

.op-dashboard-kpi > span {
    font-weight: 700;
}

.op-dashboard-kpi > strong {
    align-self: end;
    font-size: 2rem;
    line-height: 1;
}

.op-dashboard-kpi > small,
.op-dashboard-attention small {
    color: var(--op-muted);
}

.op-dashboard-attention-list {
    display: grid;
    gap: .55rem;
}

.op-dashboard-attention {
    display: grid;
    grid-template-columns: minmax(9rem, .55fr) minmax(0, 1.6fr) auto;
    gap: 1rem;
    align-items: center;
    padding: .9rem 1rem;
    color: var(--op-text);
    text-decoration: none;
    border: 1px solid var(--op-border);
    border-radius: var(--op-radius-sm);
    background: #fff;
}

.op-dashboard-attention:hover {
    color: var(--op-text);
    border-color: var(--op-accent);
    background: #f8faff;
}

.op-dashboard-attention__status {
    color: #b54708;
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.op-dashboard-attention__main {
    display: grid;
    gap: .15rem;
    min-width: 0;
}

.op-dashboard-attention__main strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.op-dashboard-attention time {
    color: var(--op-muted);
    font-variant-numeric: tabular-nums;
}

.op-dashboard-empty {
    display: grid;
    gap: .25rem;
    padding: 1.25rem;
    color: var(--op-muted);
    text-align: center;
    border: 1px dashed var(--op-border);
    border-radius: var(--op-radius-sm);
    background: #fcfcfd;
}

.op-orientations-card {
    border-left: 4px solid #f79009 !important;
    background: #fffaeb !important;
}

@media (max-width: 991.98px) {
    .op-dashboard-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
    .op-dashboard-actions,
    .op-dashboard-actions .btn { width: 100%; }
    .op-dashboard-kpis { grid-template-columns: 1fr 1fr; gap: .65rem; }
    .op-dashboard-kpi { min-height: 8rem; padding: .8rem; }
    .op-dashboard-kpi > strong { font-size: 1.65rem; }
    .op-dashboard-attention { grid-template-columns: 1fr auto; gap: .35rem .75rem; }
    .op-dashboard-attention__status { grid-column: 1 / -1; }
}