:root {
    --background: #f5f7fb;
    --surface: #ffffff;
    --surface-soft: #f8faff;
    --surface-strong: #edf1f8;

    --text: #172033;
    --muted: #667085;
    --border: #dfe4ee;

    --primary: #3156d3;
    --primary-hover: #2646b7;
    --primary-soft: #e9eeff;

    --success: #16794a;
    --success-soft: #e8f7ef;

    --warning: #9a6700;
    --warning-soft: #fff4d6;

    --danger: #b42318;
    --danger-hover: #912018;
    --danger-soft: #fdecea;

    --shadow-small:
        0 2px 8px
        rgba(23, 32, 51, 0.06);

    --shadow-medium:
        0 12px 32px
        rgba(23, 32, 51, 0.08);

    --radius-small: 8px;
    --radius-medium: 14px;
    --radius-large: 20px;

    --container-width: 1180px;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    margin: 0;
    background: var(--background);
    color: var(--text);
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    font-size: 16px;
    line-height: 1.55;
}

button,
input,
textarea,
select {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

a {
    color: var(--primary);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

img {
    max-width: 100%;
    height: auto;
}

h1,
h2,
h3,
h4,
p {
    overflow-wrap: anywhere;
}

h1,
h2,
h3,
h4 {
    margin-top: 0;
    color: var(--text);
    line-height: 1.2;
}

h1 {
    margin-bottom: 12px;
    font-size: clamp(2rem, 4vw, 3rem);
    letter-spacing: -0.04em;
}

h2 {
    margin-bottom: 12px;
    font-size: clamp(1.35rem, 2vw, 1.75rem);
    letter-spacing: -0.02em;
}

h3 {
    margin-bottom: 8px;
    font-size: 1.1rem;
}

p {
    margin-top: 0;
}

ul,
ol {
    padding-left: 22px;
}

pre {
    font-family:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        monospace;
}

.container {
    width: min(
        var(--container-width),
        calc(100% - 40px)
    );
    margin-right: auto;
    margin-left: auto;
}

.page-content {
    min-height: calc(100vh - 180px);
    padding-top: 38px;
    padding-bottom: 64px;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid var(--border);
    background:
        rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(14px);
    box-shadow: var(--shadow-small);
}

.header-inner {
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

.brand {
    flex-shrink: 0;
    color: var(--text);
    font-size: 1.2rem;
    font-weight: 900;
    letter-spacing: -0.03em;
}

.brand:hover {
    color: var(--primary);
    text-decoration: none;
}

.navigation {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

.navigation a,
.nav-button {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    padding: 9px 12px;
    border: 0;
    border-radius: var(--radius-small);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none;
    transition:
        background 0.18s ease,
        color 0.18s ease;
}

.navigation a:hover,
.nav-button:hover {
    background: var(--surface-strong);
    color: var(--text);
    text-decoration: none;
}

.navigation a.active {
    background: var(--primary-soft);
    color: var(--primary);
}

.nav-form {
    margin: 0;
}

.mobile-menu-button {
    display: none;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    padding: 8px 9px;
    border: 1px solid var(--border);
    border-radius: var(--radius-small);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
}

.mobile-menu-button span {
    display: block;
    width: 100%;
    height: 2px;
    margin: 5px 0;
    border-radius: 999px;
    background: currentColor;
}

.site-footer {
    border-top: 1px solid var(--border);
    background: var(--surface);
}

.footer-inner {
    min-height: 110px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding-top: 26px;
    padding-bottom: 26px;
    color: var(--muted);
}

.footer-inner p {
    margin: 4px 0 0;
}

.page-heading {
    margin-bottom: 28px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 30px;
}

.page-heading > div:first-child {
    min-width: 0;
}

.page-heading p {
    margin-bottom: 0;
    color: var(--muted);
}

.eyebrow {
    margin-bottom: 8px !important;
    color: var(--primary) !important;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.panel {
    margin-bottom: 24px;
    padding: 26px;
    border: 1px solid var(--border);
    border-radius: var(--radius-medium);
    background: var(--surface);
    box-shadow: var(--shadow-small);
}

.panel > :last-child {
    margin-bottom: 0;
}

.panel-heading {
    margin-bottom: 22px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.panel-heading > div:first-child {
    min-width: 0;
}

.panel-heading p {
    margin-bottom: 0;
    color: var(--muted);
}

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

.metrics-grid {
    margin-bottom: 24px;
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.metric-card {
    min-width: 0;
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: var(--radius-medium);
    background: var(--surface);
    box-shadow: var(--shadow-small);
}

.metric-card span {
    display: block;
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.metric-card strong {
    display: block;
    font-size: 1.8rem;
    line-height: 1.1;
}

.workflow-metric {
    font-size: 1rem !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere;
}

.button {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 15px;
    border: 1px solid var(--border);
    border-radius: var(--radius-small);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease;
}

.button:hover {
    border-color: #c7cedb;
    background: var(--surface-strong);
    color: var(--text);
    text-decoration: none;
}

.button:active {
    transform: translateY(1px);
}

.button:disabled {
    opacity: 0.58;
    cursor: not-allowed;
    transform: none;
}

.button.primary {
    border-color: var(--primary);
    background: var(--primary);
    color: #ffffff;
}

.button.primary:hover {
    border-color: var(--primary-hover);
    background: var(--primary-hover);
    color: #ffffff;
}

.button.danger,
.danger-button {
    border-color: var(--danger);
    background: var(--surface);
    color: var(--danger);
}

.button.danger:hover,
.danger-button:hover {
    border-color: var(--danger);
    background: var(--danger);
    color: #ffffff;
}

.form-actions,
.action-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.form-actions form,
.action-buttons form {
    margin: 0;
}

.stacked-form {
    display: grid;
    gap: 18px;
}

label {
    color: var(--text);
    font-weight: 750;
}

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

input,
textarea,
select {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-small);
    outline: none;
    background: var(--surface);
    color: var(--text);
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

textarea {
    min-height: 120px;
    resize: vertical;
    line-height: 1.5;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--primary);
    box-shadow:
        0 0 0 3px
        rgba(49, 86, 211, 0.13);
}

input::placeholder,
textarea::placeholder {
    color: #98a2b3;
}

input:disabled,
textarea:disabled,
select:disabled {
    background: var(--surface-strong);
    color: var(--muted);
    cursor: not-allowed;
}

.form-note {
    color: var(--muted);
    font-size: 0.88rem;
}

.alert {
    margin-bottom: 24px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 20px;
    border: 1px solid;
    border-radius: var(--radius-medium);
}

.alert h2,
.alert h3,
.alert p {
    margin-bottom: 5px;
}

.alert > div > :last-child {
    margin-bottom: 0;
}

.alert.success {
    border-color: #aadfc3;
    background: var(--success-soft);
    color: var(--success);
}

.alert.warning {
    border-color: #efd58c;
    background: var(--warning-soft);
    color: var(--warning);
}

.alert.error {
    border-color: #f2b8b5;
    background: var(--danger-soft);
    color: var(--danger);
}

.status {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--surface-strong);
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.status.proposed,
.status.pending,
.status.awaiting_approval {
    background: var(--warning-soft);
    color: var(--warning);
}

.status.approved,
.status.executing,
.status.running,
.status.workflow_running {
    background: var(--primary-soft);
    color: var(--primary);
}

.status.completed,
.status.success,
.status.workflow_completed {
    background: var(--success-soft);
    color: var(--success);
}

.status.failed,
.status.error,
.status.rejected {
    background: var(--danger-soft);
    color: var(--danger);
}

.status.new {
    background: var(--surface-strong);
    color: var(--muted);
}

.status.contacted,
.status.discovery,
.status.qualified,
.status.proposal,
.status.nurture,
.status.won,
.status.lost {
    background: var(--primary-soft);
    color: var(--primary);
}

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

.status.lost {
    background: var(--danger-soft);
    color: var(--danger);
}

.tag,
.tag-list .tag {
    display: inline-flex;
    min-height: 27px;
    align-items: center;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 0.76rem;
    font-weight: 850;
}

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.removable-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.removable-tag form {
    margin: 0;
}

.tag-remove-button {
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
}

.tag-remove-button:hover {
    background: var(--danger-soft);
    color: var(--danger);
}

.lead-summary-list {
    margin: 0;
    display: grid;
    gap: 14px;
}

.lead-summary-list > div {
    padding-bottom: 13px;
    border-bottom: 1px solid var(--border);
}

.lead-summary-list > div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.lead-summary-list dt {
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

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

.message-copy {
    white-space: normal;
    overflow-wrap: anywhere;
}

.result-hero {
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 26px;
    padding: 30px;
    border: 1px solid var(--border);
    border-radius: var(--radius-large);
    background:
        linear-gradient(
            135deg,
            var(--surface),
            var(--primary-soft)
        );
    box-shadow: var(--shadow-medium);
}

.result-hero p:last-child {
    margin-bottom: 0;
}

.score-circle {
    width: 120px;
    height: 120px;
    flex-shrink: 0;
    display: grid;
    place-content: center;
    border: 9px solid var(--primary);
    border-radius: 50%;
    background: var(--surface);
    text-align: center;
    box-shadow: var(--shadow-small);
}

.score-circle strong {
    display: block;
    font-size: 2rem;
    line-height: 1;
}

.score-circle span {
    margin-top: 6px;
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 700;
}

.score-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 18px 0;
    border-bottom: 1px solid var(--border);
}

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

.score-row > div {
    min-width: 0;
}

.score-row p {
    margin: 6px 0 0;
    color: var(--muted);
}

.score-row > strong {
    flex-shrink: 0;
    font-size: 1.05rem;
}

.action-list {
    display: grid;
    gap: 18px;
}

.action-card {
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-medium);
    background: var(--surface-soft);
}

.action-card > :last-child {
    margin-bottom: 0;
}

.action-card-heading {
    margin-bottom: 14px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.action-card-heading > div {
    min-width: 0;
}

.action-card-heading h3 {
    margin: 9px 0 0;
}

.action-error {
    margin-top: 18px;
    margin-bottom: 0;
}

.email-preview {
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-medium);
    background: var(--surface-soft);
}

.email-preview + .email-preview {
    margin-top: 16px;
}

.email-body {
    margin-top: 16px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-small);
    background: var(--surface);
}

.email-body p:last-child {
    margin-bottom: 0;
}

.payload-preview {
    max-height: 420px;
    margin-top: 12px;
    padding: 16px;
    overflow: auto;
    border: 1px solid #26334c;
    border-radius: var(--radius-small);
    background: #172033;
    color: #e7ecf7;
    font-size: 0.83rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

details {
    margin-top: 14px;
}

summary {
    color: var(--primary);
    cursor: pointer;
    font-weight: 800;
}

.workflow-steps {
    margin: 24px 0;
    padding-left: 25px;
}

.workflow-steps li {
    margin-bottom: 18px;
    padding-left: 8px;
}

.workflow-steps p {
    margin: 5px 0 0;
    color: var(--muted);
}

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

.detail-list li {
    padding-left: 3px;
}

.empty-state {
    padding: 34px 18px;
    text-align: center;
}

.empty-state h3 {
    margin-bottom: 8px;
}

.empty-state p {
    max-width: 580px;
    margin-right: auto;
    margin-left: auto;
    color: var(--muted);
}

.review-flag {
    margin-top: 14px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-small);
    background: var(--surface-soft);
}

.review-flag.warning {
    border-color: #efd58c;
    background: var(--warning-soft);
}

.review-flag.error,
.review-flag.high {
    border-color: #f2b8b5;
    background: var(--danger-soft);
}

.error-page {
    width: min(680px, 100%);
    margin: 42px auto;
    padding: 34px;
}

.table-wrapper {
    width: 100%;
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
}

th,
td {
    padding: 13px 14px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}

th {
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

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

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

    .navigation {
        gap: 1px;
    }

    .navigation a,
    .nav-button {
        padding-right: 9px;
        padding-left: 9px;
        font-size: 0.86rem;
    }
}

@media (max-width: 900px) {
    .header-inner {
        position: relative;
        flex-wrap: wrap;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .mobile-menu-button {
        display: block;
    }

    .navigation {
        display: none;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 3px;
        padding-top: 8px;
    }

    .navigation.open {
        display: flex;
    }

    .navigation a,
    .navigation .nav-form,
    .navigation .nav-button {
        width: 100%;
    }

    .navigation a,
    .navigation .nav-button {
        justify-content: flex-start;
        padding: 11px 12px;
        text-align: left;
    }

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

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

    .page-heading .form-actions {
        width: 100%;
    }

    .panel-heading {
        flex-direction: column;
    }

    .panel-heading > form,
    .panel-heading > .button {
        width: 100%;
    }

    .panel-heading > form .button {
        width: 100%;
    }

    .footer-inner {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 650px) {
    .container {
        width: min(
            var(--container-width),
            calc(100% - 24px)
        );
    }

    .page-content {
        padding-top: 24px;
        padding-bottom: 42px;
    }

    .panel,
    .metric-card,
    .result-hero {
        padding: 19px;
    }

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

    .result-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .score-circle {
        width: 100px;
        height: 100px;
    }

    .score-row {
        flex-direction: column;
        gap: 12px;
    }

    .action-card-heading {
        flex-direction: column;
    }

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

    .form-actions,
    .action-buttons {
        width: 100%;
        align-items: stretch;
        flex-direction: column;
    }

    .form-actions form,
    .action-buttons form,
    .form-actions .button,
    .action-buttons .button {
        width: 100%;
    }

    .button {
        width: 100%;
    }

    .tag-remove-button {
        width: 30px;
        height: 30px;
    }

    h1 {
        font-size: 2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
    .workflow-history-metrics {
    margin-top: 18px;
    margin-bottom: 18px;
}

.status.analysis_failed,
.status.action_failed,
.status.partially_completed {
    background: var(--danger-soft);
    color: var(--danger);
}

.status.completed_with_rejections {
    background: var(--warning-soft);
    color: var(--warning);
}
.usage-meter {
    margin-top: 24px;
}

.usage-meter-heading {
    margin-bottom: 9px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 800;
}

.usage-meter-track {
    width: 100%;
    height: 14px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--surface-strong);
}

.usage-meter-fill {
    min-width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--primary);
    transition: width 0.25s ease;
}
.error-page {
    max-width: 760px;
    margin: 48px auto;
}

.error-panel {
    text-align: center;
}

.error-message {
    max-width: 620px;
    margin: 18px auto;
    font-size: 1.05rem;
    line-height: 1.7;
}

.error-request-id {
    margin-top: 20px;
    color: var(--muted);
    font-size: 0.85rem;
}

.error-request-id code {
    word-break: break-all;
}

.error-panel .button-row {
    justify-content: center;
    margin-top: 28px;
}
.card-grid {
    display: grid;
    grid-template-columns: repeat(
        auto-fit,
        minmax(260px, 1fr)
    );
    gap: 20px;
}

.feature-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    min-height: 245px;
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface);
}

.feature-card h3 {
    margin: 14px 0 10px;
}

.feature-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.65;
}

.feature-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: var(--muted);
    font-size: 0.88rem;
}

.detail-list {
    margin: 18px 0 0;
    padding-left: 24px;
}

.detail-list li {
    margin-bottom: 12px;
    line-height: 1.6;
}

.workflow-sequence {
    counter-reset: workflow-step;
}

.workflow-sequence li {
    padding-left: 8px;
}
.form-stack {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-field label {
    font-weight: 800;
}

.form-field input,
.form-field textarea {
    width: 100%;
}

.field-help {
    margin: 0;
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.5;
}

.checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
}

.checkbox-row input {
    width: auto;
    margin-top: 4px;
}

.feature-card form {
    margin: 0;
}
.compact-agent-list {
    margin: 18px 0 0;
    padding-left: 22px;
}

.compact-agent-list li {
    margin-bottom: 8px;
    color: var(--muted);
}

.agent-order-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.agent-order-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
}

.agent-order-item label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
    cursor: pointer;
}

.agent-order-item label input {
    width: auto;
    margin-top: 4px;
}

.agent-order-item label span {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.agent-order-item small {
    color: var(--muted);
}

.agent-order-controls {
    display: flex;
    gap: 8px;
}

.agent-order-controls .button {
    min-width: 42px;
    padding: 8px 11px;
}

.empty-state {
    text-align: center;
}

.empty-state .button {
    margin-top: 16px;
}
.team-run-step-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.team-run-step {
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
}

.team-run-step-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.team-run-step-heading > div {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.team-run-step-heading h3 {
    margin: 0 0 4px;
}

.team-run-step-heading p {
    margin: 0;
    color: var(--muted);
}

.step-position {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 50%;
    background: var(--surface-strong);
    font-weight: 800;
}

.json-output {
    margin-top: 16px;
    padding: 18px;
    overflow-x: auto;
    border-radius: 12px;
    background: var(--surface-strong);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: 0.86rem;
    line-height: 1.55;
}

.team-run-step details {
    margin-top: 18px;
}

.team-run-step summary {
    cursor: pointer;
    font-weight: 800;
}
.processing-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.processing-indicator {
    display: flex;
    align-items: center;
    gap: 18px;
}

.processing-indicator h2 {
    margin: 0 0 6px;
}

.processing-indicator p {
    margin: 0;
    color: var(--muted);
}

.spinner {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border: 4px solid var(--border);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: leadpilot-spin 0.9s linear infinite;
}

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

.status.queued,
.status.retrying {
    background: rgba(245, 158, 11, 0.14);
}

.status.running {
    background: rgba(59, 130, 246, 0.14);
}

.status.failed,
.status.cancelled {
    background: rgba(239, 68, 68, 0.14);
}

@media (max-width: 760px) {
    .processing-panel {
        align-items: flex-start;
        flex-direction: column;
    }
}
.status.pending_review {
    background: rgba(245, 158, 11, 0.14);
}

.status.approved {
    background: rgba(34, 197, 94, 0.14);
}

.status.rejected {
    background: rgba(239, 68, 68, 0.14);
}

.status.executing {
    background: rgba(59, 130, 246, 0.14);
}

.status.executed {
    background: rgba(34, 197, 94, 0.14);
}

.status.execution_failed {
    background: rgba(239, 68, 68, 0.14);
}
}
/* Super-admin additions */
.admin-filter-grid { display:grid; grid-template-columns:2fr 1fr 1fr auto; gap:16px; align-items:end; }
.pagination { display:flex; justify-content:center; align-items:center; gap:16px; margin-top:20px; }
.copy-field { width:100%; min-height:90px; margin-top:12px; font-family:monospace; }
.danger-zone { border-color:rgba(239,68,68,.45); }
.narrow-panel { max-width:680px; }
.muted { color:var(--muted); }
@media (max-width:900px){ .admin-filter-grid{grid-template-columns:1fr;} }


.password-input-wrap {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
    width: 100%;
}

.password-input-wrap input {
    flex: 1 1 auto;
    min-width: 0;
}

.password-toggle {
    flex: 0 0 auto;
    min-width: 4.5rem;
    padding: 0.65rem 0.8rem;
    border: 1px solid #bcc7d1;
    border-radius: 0.5rem;
    background: #f4f7f9;
    color: #17324d;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.password-toggle:hover,
.password-toggle:focus-visible {
    background: #e7eef3;
}
/* =========================================================
   THE FLOCK — APPLICATION SHELL & DASHBOARD REDESIGN
   Appended to the existing LeadPilot stylesheet so all
   established forms, tables, status badges, and admin
   screens continue to retain their original component CSS.
   ========================================================= */

:root {
    --flock-black: #070707;
    --flock-black-soft: #111111;
    --flock-panel-black: #151515;
    --flock-gold: #f2bf1f;
    --flock-gold-bright: #ffd633;
    --flock-gold-soft: #fff6d2;
    --flock-gold-border: #ead287;
    --flock-page: #f6f6f5;
    --flock-card: #ffffff;
    --flock-text: #171717;
    --flock-muted: #71717a;
    --flock-line: #e6e6e3;
    --flock-green: #25a55f;
    --flock-green-soft: #e8f7ef;
    --flock-red: #d94c4c;
    --flock-red-soft: #fdecec;
    --flock-amber: #b87900;
    --flock-amber-soft: #fff5d8;
    --flock-sidebar-width: 244px;
    --flock-topbar-height: 74px;

    --background: var(--flock-page);
    --surface: var(--flock-card);
    --surface-soft: #fafaf9;
    --surface-strong: #f1f1ef;
    --text: var(--flock-text);
    --muted: var(--flock-muted);
    --border: var(--flock-line);
    --primary: #c88f00;
    --primary-hover: #a87500;
    --primary-soft: var(--flock-gold-soft);
}

body.app-shell-body {
    background: var(--flock-page);
    color: var(--flock-text);
}

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

.app-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 300;
    width: var(--flock-sidebar-width);
    display: flex;
    flex-direction: column;
    border-right: 1px solid #1f1f1f;
    background:
        radial-gradient(
            circle at 45% 0%,
            rgba(242, 191, 31, 0.13),
            transparent 25%
        ),
        linear-gradient(
            180deg,
            #050505 0%,
            #090909 60%,
            #050505 100%
        );
    color: #f7f7f7;
    box-shadow: 14px 0 40px rgba(0, 0, 0, 0.12);
}

.sidebar-brand-wrap {
    min-height: 96px;
    padding: 6px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

.sidebar-brand {
    width: 100%;
    padding: 2px;
    display: block;
    border: none;
    border-radius: 8px;
    background: transparent;
    overflow: hidden;
    text-decoration: none;
}

.sidebar-brand:hover {
    text-decoration: none;
}

.sidebar-logo {
    width: 100%;
    height: 76px;
    display: block;
    object-fit: contain;
    object-position: center center;
    border-radius: 6px;
    filter: saturate(1.05) contrast(1.03);
}

.sidebar-nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 15px 12px 22px;
    scrollbar-width: thin;
    scrollbar-color: #353535 transparent;
}

.sidebar-link {
    min-height: 46px;
    margin: 3px 0;
    padding: 10px 13px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 10px;
    color: #cfcfcf;
    font-size: 0.94rem;
    font-weight: 700;
    text-decoration: none;
    transition:
        background 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease;
}

.sidebar-link:hover {
    background: rgba(255,255,255,0.065);
    color: #ffffff;
    text-decoration: none;
    transform: translateX(2px);
}

.sidebar-link.active {
    background:
        linear-gradient(
            90deg,
            rgba(242,191,31,0.24),
            rgba(242,191,31,0.08)
        );
    color: var(--flock-gold-bright);
    box-shadow:
        inset 3px 0 0 var(--flock-gold);
}

.sidebar-icon {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    display: grid;
    place-items: center;
    color: currentColor;
    font-size: 1.1rem;
    line-height: 1;
}

.sidebar-section-label {
    margin: 20px 12px 8px;
    color: #737373;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.sidebar-footer {
    padding: 14px 12px 18px;
    border-top: 1px solid rgba(255,255,255,0.07);
}

.sidebar-account-link {
    min-height: 58px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 12px;
    color: #efefef;
    text-decoration: none;
}

.sidebar-account-link:hover {
    background: rgba(255,255,255,0.055);
    text-decoration: none;
}

.sidebar-avatar {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(242,191,31,0.45);
    border-radius: 50%;
    background: #191919;
    color: var(--flock-gold-bright);
    font-size: 0.72rem;
    font-weight: 900;
}

.sidebar-account-copy {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.sidebar-account-copy strong {
    color: #ffffff;
    font-size: 0.86rem;
}

.sidebar-account-copy small {
    color: #838383;
    font-size: 0.73rem;
}

.sidebar-logout-form {
    margin: 8px 0 0;
}

.sidebar-logout-button {
    width: 100%;
    min-height: 38px;
    border: 1px solid #292929;
    border-radius: 9px;
    background: #101010;
    color: #9f9f9f;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 800;
}

.sidebar-logout-button:hover {
    border-color: #444;
    color: #fff;
}

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

.app-topbar {
    position: sticky;
    top: 0;
    z-index: 200;
    min-height: var(--flock-topbar-height);
    padding: 0 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid var(--flock-line);
    background: rgba(255,255,255,0.94);
    backdrop-filter: blur(16px);
}

.topbar-title {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    color: #747474;
    font-size: 0.88rem;
}

.topbar-product {
    color: #111;
    font-weight: 950;
    letter-spacing: 0.05em;
}

.topbar-divider {
    color: #c7c7c7;
}

.topbar-section {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.topbar-icon-button {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid var(--flock-line);
    border-radius: 11px;
    background: #fff;
    color: #191919;
    font-size: 1rem;
    font-weight: 950;
    text-decoration: none;
}

.topbar-icon-button:hover {
    border-color: var(--flock-gold-border);
    background: var(--flock-gold-soft);
    color: #7a5600;
    text-decoration: none;
}

.topbar-balance-link {
    min-height: 42px;
    padding: 6px 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid var(--flock-line);
    border-radius: 11px;
    background: #fff;
    color: #555;
    text-decoration: none;
}

.topbar-balance-link span {
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.topbar-balance-link strong {
    color: #161616;
    font-size: 0.78rem;
}

.topbar-balance-link:hover {
    border-color: var(--flock-gold-border);
    text-decoration: none;
}

.sidebar-mobile-toggle {
    display: none;
    width: 42px;
    height: 42px;
    border: 1px solid var(--flock-line);
    border-radius: 10px;
    background: #fff;
    color: #171717;
    cursor: pointer;
}

.sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 250;
    background: rgba(0,0,0,0.48);
}

.app-content {
    width: 100%;
    max-width: 1540px;
    margin: 0 auto;
    padding: 30px 30px 60px;
}

body.app-shell-body .site-header,
body.app-shell-body .site-footer {
    display: none;
}

.button {
    border-radius: 10px;
    font-weight: 850;
    box-shadow: none;
}

.button.primary {
    border-color: #d7a000;
    background:
        linear-gradient(
            180deg,
            var(--flock-gold-bright),
            var(--flock-gold)
        );
    color: #171717;
    box-shadow:
        0 6px 14px rgba(202, 145, 0, 0.16);
}

.button.primary:hover {
    border-color: #c38d00;
    background:
        linear-gradient(
            180deg,
            #ffe15a,
            #eeb51b
        );
    color: #111;
    text-decoration: none;
}

.button.secondary,
.button:not(.primary):not(.danger) {
    border: 1px solid var(--flock-line);
    background: #fff;
    color: #303030;
}

.button.secondary:hover,
.button:not(.primary):not(.danger):hover {
    border-color: #d8c17a;
    background: #fffaf0;
    color: #181818;
    text-decoration: none;
}

.button.compact {
    min-height: 40px;
    padding: 9px 15px;
}

.button.full-width {
    width: 100%;
}

.panel,
.small-card,
.metric-card {
    border-color: var(--flock-line);
    box-shadow:
        0 1px 2px rgba(20,20,20,0.035),
        0 8px 28px rgba(20,20,20,0.035);
}

.status.completed,
.status.success,
.status.active {
    background: var(--flock-green-soft);
    color: #187a46;
}

.status.failed,
.status.error,
.status.rejected {
    background: var(--flock-red-soft);
    color: #ae3737;
}

.status.pending,
.status.pending_review,
.status.queued,
.status.executing {
    background: var(--flock-amber-soft);
    color: #986600;
}

/* Dashboard */

.flock-dashboard-hero {
    margin-bottom: 24px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.flock-dashboard-hero h1 {
    margin: 2px 0 7px;
    color: #111;
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    letter-spacing: -0.035em;
}

.flock-dashboard-hero p {
    margin: 0;
    color: var(--flock-muted);
}

.dashboard-hero-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dashboard-setup-banner {
    margin-bottom: 22px;
    padding: 16px 18px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    border: 1px solid #ecd88f;
    border-radius: 14px;
    background:
        linear-gradient(
            90deg,
            #fff8dc,
            #fffdf5
        );
}

.dashboard-setup-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--flock-gold);
    color: #171717;
    font-weight: 950;
}

.dashboard-setup-banner strong {
    display: block;
    margin-bottom: 3px;
    color: #2c2100;
}

.dashboard-setup-banner p {
    margin: 0;
    color: #7d6a32;
    font-size: 0.88rem;
}

.dashboard-kpi-grid {
    margin-bottom: 22px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.dashboard-kpi-card {
    min-width: 0;
    min-height: 126px;
    padding: 19px;
    display: flex;
    align-items: center;
    gap: 15px;
    border: 1px solid var(--flock-line);
    border-radius: 14px;
    background: #fff;
    box-shadow:
        0 1px 2px rgba(0,0,0,0.025),
        0 8px 26px rgba(0,0,0,0.025);
}

.dashboard-kpi-icon {
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    display: grid;
    place-items: center;
    border: 1px solid #f0d679;
    border-radius: 13px;
    background: #fff4c7;
    color: #7b5700;
    font-size: 1.2rem;
    font-weight: 950;
}

.dashboard-kpi-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.dashboard-kpi-copy > span {
    color: #626262;
    font-size: 0.8rem;
    font-weight: 800;
}

.dashboard-kpi-copy strong {
    margin: 2px 0 3px;
    color: #111;
    font-size: 1.75rem;
    line-height: 1.05;
}

.dashboard-kpi-copy small {
    color: #8a8a8a;
    font-size: 0.72rem;
}

.dashboard-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 18px;
    align-items: start;
}

.dashboard-primary-column,
.dashboard-side-column {
    min-width: 0;
}

.dashboard-card {
    margin-bottom: 18px;
    overflow: hidden;
    border: 1px solid var(--flock-line);
    border-radius: 15px;
    background: #fff;
    box-shadow:
        0 1px 2px rgba(0,0,0,0.025),
        0 10px 30px rgba(0,0,0,0.025);
}

.dashboard-card-header {
    padding: 20px 21px 16px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.dashboard-card-header.compact {
    align-items: center;
}

.dashboard-card-header h2 {
    margin: 2px 0 5px;
    color: #171717;
    font-size: 1rem;
    letter-spacing: -0.015em;
}

.dashboard-card-header p {
    margin: 0;
    color: #858585;
    font-size: 0.78rem;
}

.dashboard-card-kicker {
    color: #9a790d;
    font-size: 0.65rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dashboard-text-link {
    color: #815e00;
    font-size: 0.78rem;
    font-weight: 900;
    text-decoration: none;
    white-space: nowrap;
}

.dashboard-text-link:hover {
    color: #b17f00;
    text-decoration: none;
}

.dashboard-lead-list {
    border-top: 1px solid var(--flock-line);
}

.dashboard-lead-row {
    min-height: 68px;
    padding: 11px 18px;
    display: grid;
    grid-template-columns:
        38px
        minmax(150px, 1fr)
        auto
        64px
        18px;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #eeeeeb;
    color: inherit;
    text-decoration: none;
    transition: background 0.15s ease;
}

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

.dashboard-lead-row:hover {
    background: #fffdf6;
    text-decoration: none;
}

.dashboard-lead-avatar {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid #e8d17e;
    border-radius: 50%;
    background: #111;
    color: var(--flock-gold-bright);
    font-size: 0.82rem;
    font-weight: 950;
}

.dashboard-lead-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.dashboard-lead-main strong {
    overflow: hidden;
    color: #212121;
    font-size: 0.84rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-lead-main span {
    overflow: hidden;
    color: #919191;
    font-size: 0.73rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-lead-status .status {
    white-space: nowrap;
}

.dashboard-lead-score {
    text-align: right;
}

.dashboard-lead-score strong {
    color: #171717;
    font-size: 0.92rem;
}

.dashboard-lead-score span {
    color: #929292;
    font-size: 0.7rem;
}

.dashboard-row-arrow {
    color: #a7a7a7;
    font-size: 1.15rem;
}

.dashboard-empty {
    padding: 44px 24px 48px;
    border-top: 1px solid var(--flock-line);
    text-align: center;
}

.dashboard-empty-icon {
    width: 54px;
    height: 54px;
    margin: 0 auto 13px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: #fff3be;
    color: #8b6500;
    font-size: 1.4rem;
}

.dashboard-empty h3 {
    margin-bottom: 6px;
}

.dashboard-empty p {
    max-width: 400px;
    margin: 0 auto 16px;
    color: #888;
    font-size: 0.84rem;
}

.dashboard-quick-grid {
    padding: 0 18px 18px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.dashboard-quick-action {
    min-height: 74px;
    padding: 11px 13px;
    display: grid;
    grid-template-columns: 38px 1fr auto;
    align-items: center;
    gap: 10px;
    border: 1px solid #e8e8e5;
    border-radius: 12px;
    background: #fcfcfb;
    color: inherit;
    text-decoration: none;
}

.dashboard-quick-action:hover {
    border-color: #dfc76b;
    background: #fffdf5;
    text-decoration: none;
}

.dashboard-quick-icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: #fff1b2;
    color: #765400;
    font-size: 1rem;
    font-weight: 950;
}

.dashboard-quick-action > span:nth-child(2) {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.dashboard-quick-action strong {
    color: #252525;
    font-size: 0.8rem;
}

.dashboard-quick-action small {
    margin-top: 2px;
    overflow: hidden;
    color: #8b8b8b;
    font-size: 0.68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-quick-action b {
    color: #c39a22;
    font-size: 1.1rem;
}

.dashboard-live-dot {
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--flock-green-soft);
    color: #20794a;
    font-size: 0.66rem;
    font-weight: 900;
}

.dashboard-live-dot::before {
    content: "";
    width: 6px;
    height: 6px;
    margin-right: 5px;
    display: inline-block;
    border-radius: 50%;
    background: #27a761;
}

.dashboard-model-box {
    margin: 0 18px 14px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 12px;
    background: #111;
    color: #fff;
}

.dashboard-model-mark {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid #5c4d16;
    border-radius: 10px;
    background: #1c1a11;
    color: var(--flock-gold-bright);
}

.dashboard-model-box > div:last-child {
    display: flex;
    flex-direction: column;
}

.dashboard-model-box span {
    color: #8c8c8c;
    font-size: 0.67rem;
}

.dashboard-model-box strong {
    color: #fff;
    font-size: 0.9rem;
}

.dashboard-model-meta {
    margin: 0 18px 15px;
    padding: 12px 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    border-top: 1px solid #ecece9;
    border-bottom: 1px solid #ecece9;
}

.dashboard-model-meta span,
.dashboard-integration-detail > span {
    color: #969696;
    font-size: 0.67rem;
    font-weight: 800;
    text-transform: uppercase;
}

.dashboard-model-meta strong,
.dashboard-integration-detail strong {
    overflow-wrap: anywhere;
    color: #242424;
    font-size: 0.8rem;
}

.dashboard-card > .button.full-width,
.dashboard-card > form {
    margin-right: 18px;
    margin-bottom: 18px;
    margin-left: 18px;
}

.dashboard-card > form .button.full-width {
    margin: 0;
}

.dashboard-integration-detail {
    margin: 0 18px 16px;
}

.dashboard-integration-detail strong {
    display: block;
    margin: 3px 0 8px;
}

.dashboard-integration-detail p {
    margin: 0;
    color: #838383;
    font-size: 0.76rem;
}

.dashboard-balance-visual {
    margin: 0 18px 15px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #edd886;
    border-radius: 12px;
    background:
        linear-gradient(
            135deg,
            #fff9de,
            #fffef8
        );
}

.dashboard-balance-symbol {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #111;
    color: var(--flock-gold-bright);
    font-weight: 950;
}

.dashboard-balance-visual > div {
    display: flex;
    flex-direction: column;
}

.dashboard-balance-visual strong {
    color: #282100;
    font-size: 0.85rem;
}

.dashboard-balance-visual span:last-child {
    color: #8a7842;
    font-size: 0.7rem;
}

/* Public shell */

.public-shell-body {
    background: #080808;
}

.public-header {
    border-bottom: 1px solid #1d1d1d;
    background: #060606;
}

.public-header-inner {
    min-height: 88px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.public-brand {
    width: 190px;
    height: 68px;
    display: block;
    overflow: hidden;
}

.public-brand img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.public-main {
    padding-top: 44px;
    padding-bottom: 60px;
}

/* Keep generic pages polished inside the new shell */

.app-content .page-heading {
    margin-bottom: 22px;
}

.app-content .page-heading h1 {
    font-size: clamp(1.8rem, 3vw, 2.4rem);
}

.app-content .panel {
    border-radius: 14px;
}

.app-content table {
    font-size: 0.86rem;
}

.app-content thead th {
    color: #787878;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Responsive */

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

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

    .dashboard-side-column {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    .dashboard-side-column .dashboard-card {
        margin-bottom: 0;
    }
}

@media (max-width: 980px) {
    :root {
        --flock-sidebar-width: 250px;
    }

    .app-sidebar {
        transform: translateX(-102%);
        transition: transform 0.22s ease;
    }

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

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

    .sidebar-mobile-toggle {
        display: grid;
        place-items: center;
    }

    .app-topbar {
        padding-right: 18px;
        padding-left: 18px;
    }

    .app-content {
        padding-right: 18px;
        padding-left: 18px;
    }

    .topbar-balance-link {
        display: none;
    }
}

@media (max-width: 760px) {
    .flock-dashboard-hero {
        flex-direction: column;
    }

    .dashboard-hero-actions {
        width: 100%;
    }

    .dashboard-hero-actions .button {
        flex: 1;
    }

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

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

    .dashboard-side-column {
        grid-template-columns: 1fr;
    }

    .dashboard-lead-row {
        grid-template-columns:
            36px
            minmax(0, 1fr)
            auto;
    }

    .dashboard-lead-status,
    .dashboard-lead-score {
        display: none;
    }

    .dashboard-setup-banner {
        grid-template-columns: auto 1fr;
    }

    .dashboard-setup-banner .button {
        grid-column: 1 / -1;
        width: 100%;
    }

    .topbar-title {
        display: none;
    }
}

@media (max-width: 520px) {
    .app-topbar {
        min-height: 66px;
    }

    .topbar-actions {
        gap: 6px;
    }

    .topbar-icon-button {
        display: none;
    }

    .app-content {
        padding: 22px 12px 42px;
    }

    .dashboard-hero-actions {
        flex-direction: column;
    }

    .dashboard-hero-actions .button {
        width: 100%;
    }

    .dashboard-card-header {
        padding-right: 16px;
        padding-left: 16px;
    }

    .dashboard-lead-row {
        padding-right: 14px;
        padding-left: 14px;
    }
}

/* =========================================================
   UI1 PRODUCT SHELL REFRESH
   Navigation + shared cards + Connections
   ========================================================= */

:root {
    --ui-radius-sm: 10px;
    --ui-radius-md: 14px;
    --ui-radius-lg: 20px;
    --ui-shadow-soft: 0 12px 32px rgba(15, 23, 42, .08);
}

.app-sidebar {
    width: 248px;
}

.sidebar-nav {
    padding: 10px 12px 20px;
}

.sidebar-section-label {
    margin: 20px 10px 7px;
    padding: 0;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .48;
}

.sidebar-link {
    min-height: 42px;
    margin: 2px 0;
    padding: 9px 11px;
    border-radius: 11px;
    transition:
        background-color .16s ease,
        color .16s ease,
        transform .16s ease;
}

.sidebar-link:hover {
    transform: translateX(2px);
}

.sidebar-link.active {
    font-weight: 700;
}

.sidebar-icon {
    width: 22px;
    text-align: center;
    opacity: .78;
}

.app-content {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 30px 34px 48px;
}

.app-topbar {
    min-height: 66px;
}

.topbar-product {
    letter-spacing: .08em;
    font-weight: 800;
}

.page-heading,
.ui-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.ui-page-header h1 {
    margin: 3px 0 8px;
    font-size: clamp(30px, 4vw, 44px);
    line-height: 1.05;
    letter-spacing: -.035em;
}

.ui-page-subtitle {
    max-width: 720px;
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
    opacity: .74;
}

.panel,
.feature-card,
.metric-card {
    border-radius: var(--ui-radius-lg);
}

.ui-stat-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.ui-stat-strip article {
    padding: 18px 20px;
    border: 1px solid var(--border-color, rgba(148, 163, 184, .22));
    border-radius: var(--ui-radius-md);
    background: var(--panel-bg, rgba(255, 255, 255, .035));
}

.ui-stat-strip strong {
    display: block;
    margin-bottom: 5px;
    font-size: 28px;
    line-height: 1;
    letter-spacing: -.03em;
}

.ui-stat-strip span {
    font-size: 12px;
    font-weight: 700;
    opacity: .62;
}

.ui-info-banner {
    display: flex;
    gap: 13px;
    align-items: flex-start;
    margin-bottom: 32px;
    padding: 16px 18px;
    border: 1px solid rgba(59, 130, 246, .18);
    border-radius: var(--ui-radius-md);
    background: rgba(59, 130, 246, .055);
}

.ui-info-icon {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 999px;
    background: rgba(59, 130, 246, .12);
    font-size: 12px;
    font-weight: 900;
}

.ui-info-banner strong {
    display: block;
    margin-bottom: 3px;
    font-size: 13px;
}

.ui-info-banner p {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    opacity: .7;
}

.ui-section {
    margin-top: 34px;
}

.ui-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.ui-section-heading h2 {
    margin: 0 0 3px;
    font-size: 20px;
    letter-spacing: -.02em;
}

.ui-section-heading p {
    margin: 0;
    font-size: 12px;
    opacity: .58;
}

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

.ui-connection-card {
    display: flex;
    flex-direction: column;
    min-height: 292px;
    padding: 20px;
    border: 1px solid var(--border-color, rgba(148, 163, 184, .22));
    border-radius: var(--ui-radius-lg);
    background: var(--panel-bg, rgba(255, 255, 255, .035));
    box-shadow: var(--ui-shadow-soft);
}

.ui-connection-card.coming_soon {
    box-shadow: none;
    opacity: .8;
}

.ui-connection-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.ui-connection-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.ui-provider-mark {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border: 1px solid var(--border-color, rgba(148, 163, 184, .2));
    border-radius: 13px;
    background: rgba(148, 163, 184, .08);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: -.02em;
}

.ui-connection-brand h3 {
    margin: 0 0 2px;
    font-size: 17px;
    line-height: 1.2;
}

.ui-connection-brand span {
    display: block;
    font-size: 11px;
    opacity: .55;
}

.ui-status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 5px 9px;
    border: 1px solid var(--border-color, rgba(148, 163, 184, .22));
    border-radius: 999px;
    background: rgba(148, 163, 184, .08);
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

.ui-status-pill.connected,
.ui-status-pill.configured,
.ui-status-pill.built_in {
    border-color: rgba(34, 197, 94, .24);
    background: rgba(34, 197, 94, .09);
}

.ui-status-pill.not_configured {
    border-color: rgba(245, 158, 11, .24);
    background: rgba(245, 158, 11, .08);
}

.ui-connection-body {
    flex: 1;
}

.ui-connection-description {
    margin: 0;
    font-size: 13px;
    line-height: 1.58;
}

.ui-connection-detail {
    margin: 9px 0 0;
    font-size: 12px;
    line-height: 1.5;
    opacity: .62;
}

.ui-capability-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 16px;
}

.ui-capability-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
    padding: 8px 9px;
    border-radius: var(--ui-radius-sm);
    background: rgba(148, 163, 184, .055);
}

.ui-capability-check {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    border-radius: 999px;
    background: rgba(34, 197, 94, .11);
    font-size: 10px;
    font-weight: 900;
}

.ui-capability-check.future {
    background: rgba(148, 163, 184, .08);
    opacity: .55;
}

.ui-capability-item strong {
    display: block;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.25;
    text-overflow: ellipsis;
}

.ui-capability-item small {
    display: block;
    margin-top: 2px;
    font-size: 10px;
    opacity: .55;
}

.ui-connection-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color, rgba(148, 163, 184, .15));
}

.ui-connection-actions form {
    margin: 0;
}

.ui-connection-note {
    margin: 12px 0 0;
    font-size: 11px;
    line-height: 1.45;
    opacity: .56;
}

.ui-bottom-note {
    margin-top: 30px;
    padding: 18px 20px;
    border: 1px solid var(--border-color, rgba(148, 163, 184, .18));
    border-radius: var(--ui-radius-md);
    background: rgba(148, 163, 184, .035);
}

.ui-bottom-note strong {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
}

.ui-bottom-note p {
    margin: 0;
    font-size: 12px;
    line-height: 1.55;
    opacity: .65;
}

.button {
    border-radius: 10px;
}

@media (max-width: 980px) {
    .app-content {
        padding: 24px 22px 40px;
    }

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

@media (max-width: 680px) {
    .ui-stat-strip {
        grid-template-columns: 1fr;
    }

    .ui-capability-list {
        grid-template-columns: 1fr;
    }

    .ui-connection-top {
        flex-direction: column;
    }
}

/* =========================================================
   UI2 HOME / DASHBOARD REDESIGN
   ========================================================= */

.home-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:30px}
.home-hero h1{margin:4px 0 8px;font-size:clamp(34px,4.8vw,52px);line-height:1;letter-spacing:-.045em}
.home-hero p{max-width:720px;margin:0;line-height:1.6;opacity:.72}
.home-hero-actions{display:flex;flex-wrap:wrap;gap:10px}
.home-section,.home-attention{margin-top:38px}
.home-section-heading{margin-bottom:15px}
.home-section-heading.split{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.home-section-heading h2{margin:2px 0 4px;font-size:22px;letter-spacing:-.025em}
.home-section-heading p{margin:0;font-size:13px;line-height:1.5;opacity:.62}

.home-attention-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.home-attention-card{display:flex;gap:14px;padding:18px;border:1px solid var(--border-color,rgba(148,163,184,.2));border-radius:16px;background:var(--panel-bg,rgba(255,255,255,.035))}
.home-attention-card.warning{border-color:rgba(245,158,11,.25);background:rgba(245,158,11,.055)}
.home-attention-card.danger{border-color:rgba(239,68,68,.22);background:rgba(239,68,68,.045)}
.home-attention-icon{display:grid;place-items:center;width:34px;height:34px;flex:0 0 34px;border-radius:10px;background:rgba(148,163,184,.1);font-size:13px;font-weight:900}
.home-attention-card span{display:block;margin-bottom:3px;font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;opacity:.52}
.home-attention-card h3{margin:0 0 5px;font-size:15px}
.home-attention-card p{margin:0 0 8px;font-size:12px;line-height:1.55;opacity:.67}
.home-attention-card a{font-size:12px;font-weight:700;text-decoration:none}

.home-start-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.home-start-card{display:flex;align-items:center;gap:12px;min-height:104px;padding:16px;border:1px solid var(--border-color,rgba(148,163,184,.2));border-radius:16px;background:var(--panel-bg,rgba(255,255,255,.035));color:inherit;text-decoration:none;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}
.home-start-card:hover{transform:translateY(-2px);border-color:rgba(99,102,241,.32);box-shadow:0 12px 28px rgba(15,23,42,.08)}
.home-start-icon{display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;border-radius:11px;background:rgba(99,102,241,.09);font-size:16px}
.home-start-card div{flex:1;min-width:0}
.home-start-card h3{margin:0 0 3px;font-size:14px}
.home-start-card p{margin:0;font-size:11px;line-height:1.4;opacity:.58}
.home-start-card b{font-size:20px;opacity:.38}

.home-recent-card{overflow:hidden;border:1px solid var(--border-color,rgba(148,163,184,.2));border-radius:18px;background:var(--panel-bg,rgba(255,255,255,.035))}
.home-lead-row{display:grid;grid-template-columns:38px minmax(0,1fr) auto 72px 16px;align-items:center;gap:12px;min-height:68px;padding:10px 15px;border-bottom:1px solid var(--border-color,rgba(148,163,184,.12));color:inherit;text-decoration:none}
.home-lead-row:last-child{border-bottom:0}
.home-lead-row:hover{background:rgba(148,163,184,.04)}
.home-lead-avatar{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:rgba(99,102,241,.09);font-size:12px;font-weight:800}
.home-lead-main{min-width:0}
.home-lead-main strong,.home-lead-main span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.home-lead-main strong{font-size:13px}
.home-lead-main span{margin-top:2px;font-size:11px;opacity:.55}
.home-lead-score{text-align:right}
.home-lead-score strong{font-size:15px}
.home-lead-score small{font-size:10px;opacity:.52}
.home-row-arrow{font-size:18px;opacity:.34}

.home-empty{padding:40px 24px;border:1px dashed var(--border-color,rgba(148,163,184,.25));border-radius:18px;text-align:center}
.home-empty-icon{display:grid;place-items:center;width:44px;height:44px;margin:0 auto 12px;border-radius:13px;background:rgba(99,102,241,.08)}
.home-empty h3{margin:0 0 5px}
.home-empty p{margin:0 auto 15px;max-width:420px;font-size:13px;opacity:.62}

.home-health-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.home-health-card{padding:17px;border:1px solid var(--border-color,rgba(148,163,184,.2));border-radius:15px;background:var(--panel-bg,rgba(255,255,255,.03))}
.home-health-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.home-health-top>span:first-child{font-size:11px;font-weight:700;opacity:.58}
.home-health-mark{font-size:13px;opacity:.5}
.home-health-card>strong{display:block;margin-bottom:3px;font-size:28px;line-height:1.05;letter-spacing:-.03em}
.home-health-card>strong.home-health-text{overflow:hidden;font-size:16px;text-overflow:ellipsis;white-space:nowrap}
.home-health-card p{overflow:hidden;margin:0 0 10px;font-size:11px;line-height:1.4;text-overflow:ellipsis;opacity:.55}
.home-health-card a{font-size:11px;font-weight:700;text-decoration:none}

@media(max-width:1050px){
  .home-start-grid,.home-health-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .home-hero,.home-section-heading.split{align-items:stretch;flex-direction:column}
  .home-attention-grid,.home-start-grid,.home-health-grid{grid-template-columns:1fr}
  .home-lead-row{grid-template-columns:36px minmax(0,1fr) 16px}
  .home-lead-row .status,.home-lead-score{display:none}
}

/* =========================================================
   UI3 AGENTS + WORK ITEMS
   ========================================================= */
.ui3-page-header{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:24px}
.ui3-page-header h1{margin:4px 0 8px;font-size:clamp(32px,4vw,44px);line-height:1.05;letter-spacing:-.04em}
.ui3-page-header p{max-width:760px;margin:0;line-height:1.6;opacity:.7}
.ui3-header-actions{display:flex;gap:10px;flex-wrap:wrap}
.ui3-summary-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 32px}
.ui3-summary-strip article{padding:16px 18px;border:1px solid var(--border-color,rgba(148,163,184,.2));border-radius:14px;background:var(--panel-bg,rgba(255,255,255,.03))}
.ui3-summary-strip strong{display:block;margin-bottom:5px;font-size:25px;line-height:1}
.ui3-summary-strip span{font-size:11px;font-weight:700;opacity:.58}
.ui3-section{margin-top:34px}
.ui3-section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:14px}
.ui3-section-heading h2{margin:2px 0 4px;font-size:21px;letter-spacing:-.025em}
.ui3-section-heading p{max-width:720px;margin:0;font-size:12px;line-height:1.5;opacity:.6}
.ui3-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ui3-agent-card{display:flex;flex-direction:column;min-height:270px;padding:18px;border:1px solid var(--border-color,rgba(148,163,184,.2));border-radius:18px;background:var(--panel-bg,rgba(255,255,255,.035));transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}
.ui3-agent-card:hover{transform:translateY(-2px);border-color:rgba(99,102,241,.3);box-shadow:0 12px 30px rgba(15,23,42,.07)}
.ui3-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:15px}
.ui3-agent-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:rgba(99,102,241,.09);font-size:14px;font-weight:900}
.ui3-pill{display:inline-flex;align-items:center;min-height:24px;padding:4px 8px;border:1px solid var(--border-color,rgba(148,163,184,.18));border-radius:999px;background:rgba(148,163,184,.07);font-size:9px;font-weight:800;white-space:nowrap}
.ui3-pill.ready{border-color:rgba(34,197,94,.22);background:rgba(34,197,94,.08)}
.ui3-pill.warning{border-color:rgba(245,158,11,.22);background:rgba(245,158,11,.08)}
.ui3-pill.muted{opacity:.55}
.ui3-card-body{flex:1}
.ui3-kicker{display:block;margin-bottom:5px;font-size:9px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;opacity:.5}
.ui3-card-body h3{margin:0 0 7px;font-size:16px}
.ui3-card-body p{margin:0;font-size:12px;line-height:1.55;opacity:.65}
.ui3-agent-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:13px}
.ui3-agent-meta span,.ui3-capability-tags span{padding:5px 7px;border-radius:8px;background:rgba(148,163,184,.06);font-size:9px;font-weight:700;opacity:.72}
.ui3-capability-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.ui3-card-actions{margin-top:17px;padding-top:14px;border-top:1px solid var(--border-color,rgba(148,163,184,.12))}
.ui3-work-list{overflow:hidden;border:1px solid var(--border-color,rgba(148,163,184,.2));border-radius:18px;background:var(--panel-bg,rgba(255,255,255,.03))}
.ui3-work-row{display:grid;grid-template-columns:38px minmax(0,1fr) auto auto minmax(120px,180px) 16px;align-items:center;gap:12px;min-height:72px;padding:11px 15px;border-bottom:1px solid var(--border-color,rgba(148,163,184,.12));color:inherit;text-decoration:none}
.ui3-work-row:last-child{border-bottom:0}
.ui3-work-row:hover{background:rgba(148,163,184,.04)}
.ui3-work-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:rgba(99,102,241,.08);font-size:12px;font-weight:800}
.ui3-work-main{min-width:0}
.ui3-work-main strong,.ui3-work-main span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ui3-work-main strong{font-size:13px}
.ui3-work-main span{margin-top:2px;font-size:10px;opacity:.55}
.ui3-work-date span,.ui3-work-date strong{display:block}
.ui3-work-date span{font-size:9px;text-transform:uppercase;letter-spacing:.06em;opacity:.42}
.ui3-work-date strong{overflow:hidden;margin-top:2px;font-size:10px;font-weight:600;text-overflow:ellipsis;white-space:nowrap;opacity:.7}
.ui3-row-arrow{font-size:18px;opacity:.35}
.ui3-empty-state{padding:48px 24px;border:1px dashed var(--border-color,rgba(148,163,184,.26));border-radius:18px;text-align:center}
.ui3-empty-mark{display:grid;place-items:center;width:46px;height:46px;margin:0 auto 12px;border-radius:13px;background:rgba(99,102,241,.08)}
.ui3-empty-state h2{margin:0 0 6px}
.ui3-empty-state p{max-width:460px;margin:0 auto 16px;font-size:13px;opacity:.62}
.ui3-bottom-note{margin-top:28px;padding:17px 19px;border:1px solid var(--border-color,rgba(148,163,184,.17));border-radius:14px;background:rgba(148,163,184,.03)}
.ui3-bottom-note strong{display:block;margin-bottom:3px;font-size:12px}
.ui3-bottom-note p{margin:0;font-size:11px;line-height:1.5;opacity:.58}
@media(max-width:1100px){.ui3-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ui3-work-row{grid-template-columns:38px minmax(0,1fr) auto auto 16px}.ui3-work-date{display:none}}
@media(max-width:760px){.ui3-page-header,.ui3-section-heading{align-items:stretch;flex-direction:column}.ui3-summary-strip,.ui3-card-grid{grid-template-columns:1fr}.ui3-work-row{grid-template-columns:36px minmax(0,1fr) 16px}.ui3-work-status,.ui3-work-priority{display:none}}

/* =========================================================
   UI4 AGENT TEAMS + APPROVALS
   ========================================================= */

.ui4-page-header{
    display:flex;align-items:flex-end;justify-content:space-between;
    gap:24px;margin-bottom:22px
}
.ui4-page-header h1{
    margin:4px 0 8px;font-size:clamp(32px,4vw,44px);
    line-height:1.05;letter-spacing:-.04em
}
.ui4-page-header p{
    max-width:760px;margin:0;line-height:1.6;opacity:.7
}

.ui4-team-shell .page-heading{
    display:flex;align-items:flex-end;justify-content:space-between;
    gap:24px;margin-bottom:26px
}
.ui4-team-shell .page-heading h1{
    margin:4px 0 8px;font-size:clamp(32px,4vw,44px);
    line-height:1.05;letter-spacing:-.04em
}
.ui4-team-shell .page-heading p{
    max-width:760px;line-height:1.55
}
.ui4-team-shell .content-grid,
.ui4-team-shell .card-grid{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px
}
.ui4-team-shell .panel,
.ui4-team-shell .feature-card{
    border-radius:18px
}
.ui4-team-shell .feature-card{
    min-height:220px;padding:19px;
    border:1px solid var(--border-color,rgba(148,163,184,.2));
    background:var(--panel-bg,rgba(255,255,255,.035));
    transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease
}
.ui4-team-shell .feature-card:hover{
    transform:translateY(-2px);border-color:rgba(99,102,241,.3);
    box-shadow:0 12px 30px rgba(15,23,42,.07)
}
.ui4-team-shell .feature-card h3{
    margin:10px 0 6px;font-size:17px
}
.ui4-team-shell .feature-card p{
    font-size:12px;line-height:1.55;opacity:.66
}
.ui4-team-shell .feature-card .button-row,
.ui4-team-shell .feature-card form{
    margin-top:16px
}
.ui4-team-shell .table-wrapper{
    overflow:hidden;border:1px solid var(--border-color,rgba(148,163,184,.18));
    border-radius:16px
}

.ui4-filter-bar{
    display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px;padding:5px;
    width:max-content;max-width:100%;
    border:1px solid var(--border-color,rgba(148,163,184,.18));
    border-radius:12px;background:rgba(148,163,184,.035)
}
.ui4-filter{
    padding:8px 12px;border-radius:9px;color:inherit;font-size:11px;
    font-weight:700;text-decoration:none;opacity:.65
}
.ui4-filter:hover{opacity:1}
.ui4-filter.active{background:rgba(99,102,241,.1);opacity:1}

.ui4-info-banner{
    display:flex;gap:12px;align-items:flex-start;margin-bottom:22px;
    padding:15px 17px;border:1px solid rgba(59,130,246,.16);
    border-radius:14px;background:rgba(59,130,246,.045)
}
.ui4-info-mark{
    display:grid;place-items:center;width:29px;height:29px;flex:0 0 29px;
    border-radius:9px;background:rgba(59,130,246,.09);
    font-size:11px;font-weight:900
}
.ui4-info-banner strong{display:block;margin-bottom:3px;font-size:12px}
.ui4-info-banner p{margin:0;font-size:11px;line-height:1.5;opacity:.62}

.ui4-approval-list{
    overflow:hidden;border:1px solid var(--border-color,rgba(148,163,184,.2));
    border-radius:18px;background:var(--panel-bg,rgba(255,255,255,.03))
}
.ui4-approval-row{
    display:grid;
    grid-template-columns:38px minmax(0,1fr) auto minmax(120px,180px) 16px;
    align-items:center;gap:13px;min-height:82px;padding:12px 15px;
    border-bottom:1px solid var(--border-color,rgba(148,163,184,.12));
    color:inherit;text-decoration:none
}
.ui4-approval-row:last-child{border-bottom:0}
.ui4-approval-row:hover{background:rgba(148,163,184,.04)}
.ui4-action-mark{
    display:grid;place-items:center;width:35px;height:35px;border-radius:10px;
    background:rgba(99,102,241,.08);font-size:12px;font-weight:900
}
.ui4-action-main{min-width:0}
.ui4-action-title-line{
    display:flex;align-items:center;gap:8px;min-width:0
}
.ui4-action-title-line strong{
    overflow:hidden;font-size:13px;text-overflow:ellipsis;white-space:nowrap
}
.ui4-type-label{
    flex:0 0 auto;font-size:9px;font-weight:700;opacity:.48
}
.ui4-action-main p{
    display:-webkit-box;overflow:hidden;margin:4px 0 0;font-size:11px;
    line-height:1.4;opacity:.58;-webkit-box-orient:vertical;-webkit-line-clamp:2
}
.ui4-status-pill{
    display:inline-flex;align-items:center;min-height:25px;padding:4px 8px;
    border:1px solid var(--border-color,rgba(148,163,184,.18));
    border-radius:999px;background:rgba(148,163,184,.07);
    font-size:9px;font-weight:800;white-space:nowrap
}
.ui4-status-pill.pending_review{
    border-color:rgba(245,158,11,.22);background:rgba(245,158,11,.08)
}
.ui4-status-pill.approved,
.ui4-status-pill.completed{
    border-color:rgba(34,197,94,.22);background:rgba(34,197,94,.08)
}
.ui4-status-pill.rejected,
.ui4-status-pill.failed{
    border-color:rgba(239,68,68,.2);background:rgba(239,68,68,.07)
}
.ui4-action-date span,.ui4-action-date strong{display:block}
.ui4-action-date span{
    font-size:9px;text-transform:uppercase;letter-spacing:.06em;opacity:.4
}
.ui4-action-date strong{
    overflow:hidden;margin-top:2px;font-size:10px;font-weight:600;
    text-overflow:ellipsis;white-space:nowrap;opacity:.68
}
.ui4-row-arrow{font-size:18px;opacity:.34}

.ui4-empty-state{
    padding:48px 24px;border:1px dashed var(--border-color,rgba(148,163,184,.25));
    border-radius:18px;text-align:center
}
.ui4-empty-mark{
    display:grid;place-items:center;width:46px;height:46px;margin:0 auto 12px;
    border-radius:13px;background:rgba(34,197,94,.08)
}
.ui4-empty-state h2{margin:0 0 6px}
.ui4-empty-state p{
    max-width:500px;margin:0 auto 16px;font-size:12px;line-height:1.55;opacity:.6
}
.ui4-empty-actions{
    display:flex;justify-content:center;gap:9px;flex-wrap:wrap
}
.ui4-action-key{
    margin-top:24px;padding:16px 18px;
    border:1px solid var(--border-color,rgba(148,163,184,.16));
    border-radius:14px;background:rgba(148,163,184,.025)
}
.ui4-action-key strong{display:block;margin-bottom:3px;font-size:11px}
.ui4-action-key p{margin:0;font-size:10px;line-height:1.5;opacity:.55}

@media(max-width:900px){
    .ui4-team-shell .content-grid,
    .ui4-team-shell .card-grid{grid-template-columns:1fr}
    .ui4-approval-row{
        grid-template-columns:38px minmax(0,1fr) auto 16px
    }
    .ui4-action-date{display:none}
}
@media(max-width:680px){
    .ui4-page-header,
    .ui4-team-shell .page-heading{
        align-items:stretch;flex-direction:column
    }
    .ui4-approval-row{
        grid-template-columns:36px minmax(0,1fr) 16px
    }
    .ui4-status-pill{display:none}
}

/* =========================================================
   UI5 WORKFLOW VISUALS
   ========================================================= */

.workflow-visual{
    margin-top:32px;
    padding:22px;
    border:1px solid var(--border-color,rgba(148,163,184,.18));
    border-radius:20px;
    background:var(--panel-bg,rgba(255,255,255,.035));
    box-shadow:0 10px 28px rgba(15,23,42,.05);
}
.workflow-visual-header{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:18px;
}
.workflow-visual-header h2{
    margin:4px 0 7px;
    font-size:24px;
    letter-spacing:-.03em;
}
.workflow-visual-header p{
    max-width:760px;
    margin:0;
    font-size:13px;
    line-height:1.6;
    opacity:.68;
}
.workflow-visual-actions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.workflow-flow{
    display:flex;
    align-items:stretch;
    gap:10px;
    overflow-x:auto;
    padding-bottom:4px;
}
.workflow-step{
    min-width:190px;
    flex:1 1 0;
    padding:16px;
    border:1px solid var(--border-color,rgba(148,163,184,.16));
    border-radius:16px;
    background:rgba(148,163,184,.035);
}
.workflow-step.emphasis{
    border-color:rgba(99,102,241,.28);
    background:rgba(99,102,241,.055);
}
.workflow-step strong{
    display:block;
    margin-bottom:5px;
    font-size:14px;
}
.workflow-step p{
    margin:0;
    font-size:11px;
    line-height:1.5;
    opacity:.62;
}
.workflow-step-kicker{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:26px;
    min-height:22px;
    margin-bottom:8px;
    padding:3px 7px;
    border-radius:999px;
    background:rgba(99,102,241,.1);
    font-size:10px;
    font-weight:800;
    letter-spacing:.04em;
    text-transform:uppercase;
}
.workflow-arrow{
    display:grid;
    place-items:center;
    min-width:24px;
    font-size:18px;
    opacity:.34;
}
.workflow-legend{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:14px;
}
.workflow-chip{
    display:inline-flex;
    align-items:center;
    min-height:26px;
    padding:5px 9px;
    border-radius:999px;
    background:rgba(148,163,184,.07);
    font-size:10px;
    font-weight:700;
}
.workflow-chip.strong{
    background:rgba(99,102,241,.09);
}
.workflow-chip.muted{
    opacity:.62;
}

.workflow-stack{
    display:grid;
    gap:14px;
}
.workflow-band{
    padding:14px;
    border:1px solid var(--border-color,rgba(148,163,184,.15));
    border-radius:16px;
    background:rgba(148,163,184,.03);
}
.workflow-band-label{
    margin-bottom:10px;
    font-size:10px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
    opacity:.48;
}
.workflow-band-items{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.workflow-core{
    display:grid;
    gap:12px;
}
.workflow-core-node{
    padding:18px;
    border:1px solid rgba(99,102,241,.24);
    border-radius:18px;
    background:rgba(99,102,241,.05);
    text-align:center;
}
.workflow-core-node strong{
    display:block;
    margin-bottom:5px;
    font-size:18px;
}
.workflow-core-node p{
    max-width:620px;
    margin:0 auto;
    font-size:12px;
    line-height:1.55;
    opacity:.64;
}
.workflow-core-arrow{
    text-align:center;
    font-size:22px;
    opacity:.38;
}
.workflow-agent-lane{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    justify-content:center;
}
.workflow-agent-pill{
    display:inline-flex;
    align-items:center;
    min-height:34px;
    padding:8px 12px;
    border:1px solid var(--border-color,rgba(148,163,184,.18));
    border-radius:999px;
    background:rgba(148,163,184,.045);
    font-size:11px;
    font-weight:700;
}
.workflow-decision-row{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
}
.workflow-decision-card{
    padding:16px;
    border:1px solid var(--border-color,rgba(148,163,184,.16));
    border-radius:16px;
    background:rgba(148,163,184,.03);
}
.workflow-decision-card strong{
    display:block;
    margin-bottom:5px;
    font-size:14px;
}
.workflow-decision-card p{
    margin:0;
    font-size:11px;
    line-height:1.5;
    opacity:.62;
}

@media(max-width:980px){
    .workflow-visual-header{
        align-items:stretch;
        flex-direction:column;
    }
    .workflow-decision-row{
        grid-template-columns:1fr;
    }
}
@media(max-width:700px){
    .workflow-step{
        min-width:220px;
    }
}

/* =========================================================
   UI6 RUNS + LIVE ORCHESTRATION
   ========================================================= */
.ui6-run-lifecycle{display:flex;align-items:center;gap:16px;margin:0 0 20px;padding:11px 14px;border:1px solid var(--border-color,rgba(148,163,184,.16));border-radius:13px;background:rgba(148,163,184,.02)}
.ui6-life-label{font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.45;white-space:nowrap}
.ui6-life-steps{display:flex;align-items:center;gap:7px;flex:1;min-width:0}
.ui6-life-steps span{display:flex;align-items:center;gap:5px;font-size:9px;font-weight:700;opacity:.64;white-space:nowrap}
.ui6-life-steps b{display:grid;place-items:center;width:20px;height:20px;border-radius:999px;background:rgba(99,102,241,.08);font-size:8px}
.ui6-life-steps i{height:1px;min-width:12px;flex:1;background:var(--border-color,rgba(148,163,184,.18))}

.ui6-live-flow{margin:16px 0 22px;padding:17px 18px;border:1px solid var(--border-color,rgba(148,163,184,.18));border-radius:17px;background:var(--panel-bg,rgba(255,255,255,.025))}
.ui6-live-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:14px}
.ui6-live-head h2{margin:3px 0 0;font-size:17px;letter-spacing:-.02em}
.ui6-live-state{display:inline-flex;align-items:center;min-height:23px;padding:4px 8px;border:1px solid var(--border-color,rgba(148,163,184,.18));border-radius:999px;background:rgba(148,163,184,.06);font-size:8px;font-weight:800}
.ui6-live-state.running,.ui6-live-state.queued{border-color:rgba(59,130,246,.2);background:rgba(59,130,246,.06)}
.ui6-live-state.awaiting_approval{border-color:rgba(245,158,11,.22);background:rgba(245,158,11,.06)}
.ui6-live-state.approved,.ui6-live-state.completed{border-color:rgba(34,197,94,.22);background:rgba(34,197,94,.06)}
.ui6-live-state.failed{border-color:rgba(239,68,68,.2);background:rgba(239,68,68,.05)}

.ui6-agent-lane{display:flex;align-items:center;gap:7px;overflow-x:auto;padding:2px 1px 4px}
.ui6-agent-node{display:flex;align-items:center;gap:8px;min-width:135px;padding:9px 10px;border:1px solid var(--border-color,rgba(148,163,184,.14));border-radius:11px;background:rgba(148,163,184,.02);transition:border-color .18s ease,background-color .18s ease,opacity .18s ease}
.ui6-agent-dot{display:grid;place-items:center;width:25px;height:25px;flex:0 0 25px;border-radius:999px;background:rgba(148,163,184,.08);font-size:9px;font-weight:900}
.ui6-agent-node>div{min-width:0}.ui6-agent-node strong,.ui6-agent-node small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui6-agent-node strong{font-size:10px}.ui6-agent-node small{margin-top:2px;font-size:8px;opacity:.48}
.ui6-agent-node.running{border-color:rgba(59,130,246,.3);background:rgba(59,130,246,.05)}.ui6-agent-node.running .ui6-agent-dot{background:rgba(59,130,246,.12)}
.ui6-agent-node.completed{border-color:rgba(34,197,94,.17)}.ui6-agent-node.completed .ui6-agent-dot{background:rgba(34,197,94,.09)}
.ui6-agent-node.failed{border-color:rgba(239,68,68,.22);background:rgba(239,68,68,.03)}.ui6-agent-node.failed .ui6-agent-dot{background:rgba(239,68,68,.08)}
.ui6-agent-node.queued{opacity:.62}.ui6-agent-connector{flex:0 0 auto;font-size:13px;opacity:.22}

.ui6-flow-note{display:flex;align-items:center;gap:8px;margin-top:12px;padding-top:11px;border-top:1px solid var(--border-color,rgba(148,163,184,.1))}.ui6-flow-note>span{display:grid;place-items:center;width:22px;height:22px;flex:0 0 22px;border-radius:999px;background:rgba(148,163,184,.07);font-size:8px;font-weight:900}.ui6-flow-note p{flex:1;margin:0;font-size:9px;line-height:1.45;opacity:.58}.ui6-flow-note a{font-size:9px;font-weight:700;text-decoration:none}.ui6-flow-note.approval>span{background:rgba(245,158,11,.08)}.ui6-flow-note.complete>span{background:rgba(34,197,94,.08)}.ui6-flow-note.failed>span{background:rgba(239,68,68,.07)}
@media(max-width:760px){.ui6-run-lifecycle{align-items:flex-start;flex-direction:column;gap:8px}.ui6-life-steps{width:100%;overflow-x:auto}.ui6-live-flow{padding:14px}}

/* =========================================================
   UI7 SIDEBAR AGENT DROPDOWN
   ========================================================= */
.sidebar-disclosure{margin:2px 0}
.sidebar-disclosure>summary{list-style:none;cursor:pointer;user-select:none}
.sidebar-disclosure>summary::-webkit-details-marker{display:none}
.sidebar-disclosure-toggle{display:flex;align-items:center;width:100%}
.sidebar-disclosure-label{flex:1;min-width:0}
.sidebar-disclosure-chevron{margin-left:auto;font-size:17px;opacity:.45;transition:transform .16s ease,opacity .16s ease}
.sidebar-disclosure[open] .sidebar-disclosure-chevron{transform:rotate(90deg);opacity:.72}
.sidebar-submenu{position:relative;margin:3px 0 8px 21px;padding:3px 0 3px 14px}
.sidebar-submenu::before{content:"";position:absolute;top:5px;bottom:5px;left:0;width:1px;background:var(--border-color,rgba(148,163,184,.16))}
.sidebar-sublink{display:flex;align-items:center;gap:8px;min-height:31px;margin:1px 0;padding:6px 8px;border-radius:8px;color:inherit;font-size:10.5px;font-weight:600;line-height:1.25;text-decoration:none;opacity:.62;transition:background-color .14s ease,opacity .14s ease,transform .14s ease}
.sidebar-sublink:hover{background:rgba(148,163,184,.055);opacity:1;transform:translateX(1px)}
.sidebar-sublink.active{background:rgba(99,102,241,.085);opacity:1}
.sidebar-subdot{width:5px;height:5px;flex:0 0 5px;border-radius:999px;background:currentColor;opacity:.42}
.sidebar-sublink.active .sidebar-subdot{opacity:.9}
.sidebar-sublink.create{margin-top:5px;padding-top:7px;border-top:1px solid var(--border-color,rgba(148,163,184,.12));border-radius:0 0 8px 8px}
.sidebar-subplus{display:grid;place-items:center;width:12px;flex:0 0 12px;font-size:13px;font-weight:800;opacity:.68}
@media(max-width:760px){.sidebar-submenu{margin-left:19px}.sidebar-sublink{min-height:34px;font-size:11px}}

/* =========================================================
   UI10 FINAL NAVIGATION POLISH
   ========================================================= */

/* Keep navigation usable when dropdowns are expanded. */
.app-sidebar{
    display:flex;
    flex-direction:column;
    min-height:0;
}
.sidebar-brand-wrap,
.sidebar-footer{
    flex:0 0 auto;
}
.sidebar-nav{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    padding-bottom:14px;
}
.sidebar-nav::-webkit-scrollbar{
    width:6px;
}
.sidebar-nav::-webkit-scrollbar-thumb{
    border-radius:999px;
    background:rgba(148,163,184,.18);
}
.sidebar-section-label{
    margin-top:14px;
}
.sidebar-disclosure + .sidebar-disclosure{
    margin-top:1px;
}

/* Context-aware topbar. */
.ui10-topbar-context{
    min-width:0;
}
.ui10-topbar-context .topbar-product{
    flex:0 0 auto;
}
.ui10-topbar-context .topbar-section{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.ui10-topbar-context .topbar-divider{
    opacity:.34;
}

/* One status language across the product. */
.status{
    display:inline-flex;
    align-items:center;
    min-height:24px;
    padding:4px 8px;
    border:1px solid rgba(148,163,184,.16);
    border-radius:999px;
    background:rgba(148,163,184,.06);
    font-size:9px;
    font-weight:800;
    line-height:1;
    letter-spacing:.01em;
    white-space:nowrap;
}

/* Positive / ready */
.status.active,
.status.enabled,
.status.connected,
.status.ready,
.status.completed,
.status.complete,
.status.approved,
.status.succeeded,
.status.success{
    border-color:rgba(34,197,94,.22);
    background:rgba(34,197,94,.075);
}

/* Work in progress */
.status.running,
.status.processing,
.status.queued,
.status.retrying,
.status.in_progress{
    border-color:rgba(59,130,246,.22);
    background:rgba(59,130,246,.075);
}

/* Human attention */
.status.pending_review,
.status.awaiting_approval,
.status.needs_review,
.status.pending,
.status.warning{
    border-color:rgba(245,158,11,.24);
    background:rgba(245,158,11,.075);
}

/* Inactive / neutral */
.status.disabled,
.status.inactive,
.status.not_connected,
.status.not-connected,
.status.draft,
.status.cancelled,
.status.canceled{
    border-color:rgba(148,163,184,.18);
    background:rgba(148,163,184,.055);
    opacity:.75;
}

/* Error / declined */
.status.failed,
.status.error,
.status.rejected,
.status.revoked{
    border-color:rgba(239,68,68,.22);
    background:rgba(239,68,68,.065);
}

/* A small visual cue without adding extra dashboard chrome. */
.status::before{
    content:"";
    width:5px;
    height:5px;
    margin-right:5px;
    border-radius:999px;
    background:currentColor;
    opacity:.46;
}
.status.running::before,
.status.processing::before,
.status.retrying::before{
    opacity:.75;
}

/* Keep dense tables and cards from making badges too prominent. */
table .status,
.feature-card .status,
.agent-card .status{
    vertical-align:middle;
}

@media(max-width:760px){
    .ui10-topbar-context .topbar-product{
        display:none;
    }
    .ui10-topbar-context .topbar-divider{
        display:none;
    }
    .sidebar-section-label{
        margin-top:10px;
    }
}
/* UI11 TOOL PERMISSION CHECKBOX POLISH */
.tool-permissions-fieldset{display:grid;gap:5px;padding:0;border:0}
.tool-permissions-fieldset>legend{margin-bottom:2px}
.tool-permissions-fieldset>.field-help{margin:0 0 7px}
.tool-permission-row{display:flex;align-items:flex-start;gap:9px;margin:0;padding:8px 10px;border:1px solid rgba(148,163,184,.13);border-radius:10px;background:rgba(148,163,184,.018);cursor:pointer;transition:border-color .14s ease,background-color .14s ease,transform .14s ease}
.tool-permission-row:hover{border-color:rgba(148,163,184,.24);background:rgba(148,163,184,.035)}
.tool-permission-row:has(input:checked){border-color:rgba(99,102,241,.24);background:rgba(99,102,241,.055)}
.tool-permission-row>input[type="checkbox"]{width:14px;height:14px;min-width:14px;margin:2px 0 0;padding:0;border-radius:4px;accent-color:currentColor;cursor:pointer}
.tool-permission-row>span{display:block;min-width:0;flex:1}
.tool-permission-row strong{display:block;margin:0;font-size:11px;line-height:1.25;font-weight:700}
.tool-permission-row small{display:block;margin-top:2px;font-size:9.5px;line-height:1.4;opacity:.54}
.tool-permission-row:has(input:checked) small{opacity:.68}
@media(min-width:980px){.tool-permissions-fieldset{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:7px}.tool-permissions-fieldset>legend,.tool-permissions-fieldset>.field-help{grid-column:1/-1}}
@media(max-width:700px){.tool-permission-row{padding:8px 9px}}
/* UI12 HUMAN APPROVAL BUTTON */
.human-approval-setting{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:4px;padding:12px 14px;border:1px solid rgba(148,163,184,.13);border-radius:12px;background:rgba(148,163,184,.018)}
.human-approval-setting>div{min-width:0}
.human-approval-setting strong{display:block;margin-bottom:2px;font-size:11px;font-weight:750}
.human-approval-setting .field-help{max-width:560px;font-size:9.5px;line-height:1.45}
.human-approval-toggle{position:relative;flex:0 0 auto;cursor:pointer}
.human-approval-toggle input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.human-approval-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:34px;padding:8px 12px;border:1px solid rgba(148,163,184,.18);border-radius:9px;font-size:10px;font-weight:800;line-height:1;white-space:nowrap;transition:transform .14s ease,border-color .14s ease,background-color .14s ease}
.human-approval-toggle:hover .human-approval-button{transform:translateY(-1px)}
.human-approval-toggle .approval-on{display:none;border-color:rgba(34,197,94,.30);background:rgba(34,197,94,.12);color:rgb(21,128,61)}
.human-approval-toggle .approval-off{display:inline-flex;background:rgba(148,163,184,.055);opacity:.72}
.human-approval-toggle input:checked~.approval-on{display:inline-flex}
.human-approval-toggle input:checked~.approval-off{display:none}
.human-approval-toggle input:focus-visible~.human-approval-button{outline:2px solid currentColor;outline-offset:2px}
@media(max-width:700px){.human-approval-setting{align-items:flex-start;flex-direction:column}.human-approval-toggle,.human-approval-button{width:100%}}